[gnome-builder] theme: Add support for the Arc theme

[Patrick Griffis <pgriffis src gnome org>]

commit 6788ccec2e2437e3eba035289545b2229061aaf0
Author: Patrick Griffis <tingping tingping se>
Date:   Wed Mar 2 19:49:39 2016 -0500

    theme: Add support for the Arc theme
    
    This does move some of Adwaita-shared into shared but
    the Adwaita theme should be unchanged.

 data/theme/Adwaita-shared.css         |  152 ---------------------------------
 data/theme/Arc-Dark.css               |    1 +
 data/theme/Arc-Darker.css             |    7 ++
 data/theme/Arc-shared.css             |  135 +++++++++++++++++++++++++++++
 data/theme/Arc.css                    |    1 +
 data/theme/shared.css                 |  150 ++++++++++++++++++++++++++++++++
 libide/resources/libide.gresource.xml |    9 ++
 7 files changed, 303 insertions(+), 152 deletions(-)
---
diff --git a/data/theme/Adwaita-shared.css b/data/theme/Adwaita-shared.css
index 9f52924..d3a36fc 100644
--- a/data/theme/Adwaita-shared.css
+++ b/data/theme/Adwaita-shared.css
@@ -26,91 +26,6 @@ workbench stack.titlebar headerbar:backdrop {
 
 
 /*
- * Greeter tweaks
- *
- * The following tweaks the greeter perspective by adding
- * separator lines to the list box.
- */
-greeter list row {
-  border-bottom: 1px solid alpha(@borders, 0.2);
-}
-greeter list row:last-child {
-  border-bottom: none;
-}
-greeter frame border {
-  border-color: alpha(@borders, 0.6);
-}
-greeter actionbar {
-  border-top: 1px solid @borders;
-}
-
-
-/*
- * Global search results styling
- *
- * The following tweaks the sizing of listbox rows in the
- * global search results to have a bit more padding and
- * row separators after each line. Additionally, we tweak
- * the selection color to ensure it has priority.
- */
-omnisearchdisplay omnisearchgroup omnisearchrow {
-  background: transparent;
-  padding: 9px 12px 9px 12px;
-  border-bottom: 1px solid alpha(@borders, 0.2);
-}
-omnisearchdisplay omnisearchgroup omnisearchrow:last-child {
-  border-bottom: none;
-}
-omnisearchdisplay omnisearchgroup omnisearchrow:selected {
-  background-color: @theme_selected_bg_color;
-  color: @theme_selected_fg_color;
-}
-
-
-/*
- * Preferences styling
- *
- * The following tweaks our preferences styling in the
- * preferences perspective, including groups, rows,
- * sidebar, etc.
- */
-workbench preferences stacksidebar list {
-  border-right: 1px solid alpha(@borders, 0.4);
-  background-color: @theme_base_color;
-}
-workbench preferences preferencesgroup list row {
-  padding: 10px;
-  border-bottom: 1px solid alpha(@borders, 0.2);
-}
-workbench preferences preferencesgroup list row:last-child {
-  border-bottom: none;
-}
-workbench preferences preferencesgroup list entry {
-  background: none;
-  min-height: 0px;
-}
-
-
-/*
- * Perspectives switcher
- *
- * The following tweaks the left-most sidebar containing
- * the list of perspectives.
- */
-perspectiveswitcher {
-  border-right: 1px solid alpha(@borders, 0.5);
-}
-perspectiveswitcher button {
-  background: transparent;
-  border-radius: 0;
-  border: none;
-  box-shadow: none;
-  padding: 6px;
-}
-
-
-
-/*
  * Layout tab and tab bar tweaks
  *
  * The following makes the layout stack header look similar to a tab bar.
@@ -213,70 +128,3 @@ layoutpane .pane-separator {
   background-color: @borders;
 }
 
-
-/*
- * For our pattern of popover with lists (and close buttons).
- */
-popover list row {
-  padding: 6px;
-}
-popover list row button {
-  background: transparent;
-  border: none;
-  box-shadow: none;
-  margin: 0;
-  padding: 0;
-  opacity: 0.25;
-}
-popover list row:selected button,
-popover list row:selected button:hover {
-  color: @theme_selected_fg_color;
-}
-popover list row button:hover {
-  opacity: 1;
-}
-
-
-/*
- * Tweaks for the editortweak popover in the editor.
- */
-editortweak button {
-  padding: 0 6px 0 6px;
-}
-editortweak list row {
-  padding: 0;
-}
-
-
-/*
- * Keep search bar and layouttab height in sync.
- */
-layouttabbar > box {
-  min-height: 39px;
-}
-eggsearchbar > revealer > box {
-  min-height: 39px;
-}
-eggsearchbar entry {
-  min-height: 24px;
-}
-
-
-/*
- * Pillbox is used to render "languages" in the greeter.
- */
-pillbox {
-  border-radius: 3px;
-}
-
-
-/*
- * Styling in the genesis (create project) perspective.
- */
-genesisperspective stack > box:first-child list row {
-  padding: 10px;
-  border-bottom: 1px solid alpha(@borders, 0.2);
-}
-genesisperspective stack > box:first-child list row:last-child {
-  border-bottom: none;
-}
diff --git a/data/theme/Arc-Dark.css b/data/theme/Arc-Dark.css
new file mode 100644
index 0000000..84846e7
--- /dev/null
+++ b/data/theme/Arc-Dark.css
@@ -0,0 +1 @@
+ import url("resource:///org/gnome/builder/theme/Arc-shared.css");
diff --git a/data/theme/Arc-Darker.css b/data/theme/Arc-Darker.css
new file mode 100644
index 0000000..1b89e7b
--- /dev/null
+++ b/data/theme/Arc-Darker.css
@@ -0,0 +1,7 @@
+ import url("resource:///org/gnome/builder/theme/Arc-shared.css");
+
+/* Darker border */
+perspectiveswitcher {
+  border-top: 1px solid #2b2e39;
+  border-right: 1px solid #2b2e39;
+}
diff --git a/data/theme/Arc-shared.css b/data/theme/Arc-shared.css
new file mode 100644
index 0000000..25a1e47
--- /dev/null
+++ b/data/theme/Arc-shared.css
@@ -0,0 +1,135 @@
+ import url("resource:///org/gnome/builder/theme/shared.css");
+
+/* Darker grey accents used throughtout */
+ define-color theme_accent_color #858c98;
+ define-color theme_accent_bg_color #353945;
+/* define-color theme_accent_unfocused_color #89929e;
+ define-color theme_accent_bg_unfocused_color #313843;*/
+ define-color theme_button_hover_bg_color #454C5C;
+ define-color theme_button_hover_border_color #262932;
+
+perspectiveswitcher {
+  background-color: @theme_accent_bg_color;
+  border-top: 1px solid @borders;
+  border-right: 1px solid @borders;
+}
+
+perspectiveswitcher button {
+  color: @theme_accent_color;
+  background-color: @theme_accent_bg_color;
+  border-radius: 3px;
+  box-shadow: none;
+  border: none;
+  margin: 1px;
+}
+
+perspectiveswitcher button:hover {
+  border-color: @theme_button_hover_border_color;
+  background-color: @theme_button_hover_bg_color;
+}
+
+perspectiveswitcher button:checked {
+  color: white;
+  background-color: @wm_button_active_bg;
+}
+
+perspectiveswitcher button:checked:backdrop {
+  color: #c2c4c7;
+}
+
+
+/*
+ * Layout tab and tab bar tweaks
+ *
+ * The following makes the layout stack header look similar to a tab bar.
+ */
+layouttabbar {
+  border-bottom: 1px solid @borders;
+}
+layouttabbar > box > button {
+  opacity: 0.5;
+}
+layouttabbar > box > button:hover,
+layouttabbar > box > button:active {
+  color: @theme_fg_color;
+  opacity: 0.75;
+}
+layouttabbar > box > button:checked {
+  color: @theme_fg_color;
+  opacity: 1;
+}
+layouttabbar button {
+  border: none;
+  box-shadow: none;
+  background: transparent;
+}
+layouttabbar > box {
+  border-top: 3px solid @theme_bg_color;
+}
+
+layouttab label {
+  padding: 5px;
+}
+layouttab {
+  border: 1px solid @borders;
+}
+layouttab separator.vertical {
+  margin-top: 7px;
+  margin-bottom: 7px;
+  opacity: 0.75;
+}
+layouttab separator.vertical:backdrop {
+  opacity: 0.3;
+}
+layouttab button:disabled,
+layouttab button {
+  background: none;
+  border: none;
+  box-shadow: none;
+  padding-left: 4px;
+  padding-right: 4px;
+}
+layouttab button:checked,
+layouttab button:active {
+  color: @theme_fg_color;
+}
+
+/* Close button */
+layouttab > box > button:last-child image {
+  opacity: 0.75;
+}
+layouttab > box > button:last-child:hover image {
+  color: red;
+}
+
+
+layoutpane stackswitcher button {
+  color: @theme_fg_color;
+  background-color: transparent;
+  border: none;
+}
+layoutpane stackswitcher button:checked {
+  color: @theme_selected_bg_color;
+}
+/* All boxes */
+layoutpane > box > box.horizontal > stackswitcher > button:hover {
+       border: 1px solid @borders;
+}
+/* Box above file switcher */
+layoutpane > box.vertical:first-child > box.horizontal {
+       border: 1px solid @borders;
+}
+
+
+/* Builder pane */
+workbench buildperspective list {
+  border-right: 1px solid @borders;
+  background-color: @theme_base_color;
+}
+workbench buildperspective list row {
+  padding: 10px;
+  border-bottom: 1px solid alpha(@borders, 0.50);
+}
+workbench buildperspective list row:last-child {
+  border-bottom: none;
+}
diff --git a/data/theme/Arc.css b/data/theme/Arc.css
new file mode 100644
index 0000000..84846e7
--- /dev/null
+++ b/data/theme/Arc.css
@@ -0,0 +1 @@
+ import url("resource:///org/gnome/builder/theme/Arc-shared.css");
diff --git a/data/theme/shared.css b/data/theme/shared.css
index c7b98ac..b7f8ea6 100644
--- a/data/theme/shared.css
+++ b/data/theme/shared.css
@@ -49,3 +49,153 @@ frame.gb-search-frame border {
     margin: 2px;
     padding: 2px;
 }
+
+/*
+ * For our pattern of popover with lists (and close buttons).
+ */
+popover list row {
+  padding: 6px;
+}
+popover list row button {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  margin: 0;
+  padding: 0;
+  opacity: 0.25;
+}
+popover list row:selected button,
+popover list row:selected button:hover {
+  color: @theme_selected_fg_color;
+}
+popover list row button:hover {
+  opacity: 1;
+}
+
+
+/*
+ * Tweaks for the editortweak popover in the editor.
+ */
+editortweak button {
+  padding: 0 6px 0 6px;
+}
+editortweak list row {
+  padding: 0;
+}
+
+
+/*
+ * Keep search bar and layouttab height in sync.
+ */
+layouttabbar > box {
+  min-height: 39px;
+}
+eggsearchbar > revealer > box {
+  min-height: 39px;
+}
+eggsearchbar entry {
+  min-height: 24px;
+}
+
+
+/*
+ * Pillbox is used to render "languages" in the greeter.
+ */
+pillbox {
+  border-radius: 3px;
+}
+
+
+/*
+ * Styling in the genesis (create project) perspective.
+ */
+genesisperspective stack > box:first-child list row {
+  padding: 10px;
+  border-bottom: 1px solid alpha(@borders, 0.2);
+}
+genesisperspective stack > box:first-child list row:last-child {
+  border-bottom: none;
+}
+
+/*
+ * Greeter tweaks
+ *
+ * The following tweaks the greeter perspective by adding
+ * separator lines to the list box.
+ */
+greeter list row {
+  border-bottom: 1px solid alpha(@borders, 0.2);
+}
+greeter list row:last-child {
+  border-bottom: none;
+}
+greeter frame border {
+  border-color: alpha(@borders, 0.6);
+}
+greeter actionbar {
+  border-top: 1px solid @borders;
+}
+
+/*
+ * Global search results styling
+ *
+ * The following tweaks the sizing of listbox rows in the
+ * global search results to have a bit more padding and
+ * row separators after each line. Additionally, we tweak
+ * the selection color to ensure it has priority.
+ */
+omnisearchdisplay omnisearchgroup omnisearchrow {
+  background: transparent;
+  padding: 9px 12px 9px 12px;
+  border-bottom: 1px solid alpha(@borders, 0.2);
+}
+omnisearchdisplay omnisearchgroup omnisearchrow:last-child {
+  border-bottom: none;
+}
+omnisearchdisplay omnisearchgroup omnisearchrow:selected {
+  background-color: @theme_selected_bg_color;
+  color: @theme_selected_fg_color;
+}
+
+
+/*
+ * Preferences styling
+ *
+ * The following tweaks our preferences styling in the
+ * preferences perspective, including groups, rows,
+ * sidebar, etc.
+ */
+workbench preferences stacksidebar list {
+  border-right: 1px solid alpha(@borders, 0.4);
+  background-color: @theme_base_color;
+}
+workbench preferences preferencesgroup list row {
+  padding: 10px;
+  border-bottom: 1px solid alpha(@borders, 0.2);
+}
+workbench preferences preferencesgroup list row:last-child {
+  border-bottom: none;
+}
+workbench preferences preferencesgroup list entry {
+  background: none;
+  min-height: 0px;
+}
+
+
+/*
+ * Perspectives switcher
+ *
+ * The following tweaks the left-most sidebar containing
+ * the list of perspectives.
+ */
+perspectiveswitcher {
+  border-right: 1px solid alpha(@borders, 0.5);
+}
+perspectiveswitcher button {
+  background: transparent;
+  border-radius: 0;
+  border: none;
+  box-shadow: none;
+  padding: 6px;
+}
+
diff --git a/libide/resources/libide.gresource.xml b/libide/resources/libide.gresource.xml
index 3c3abc3..cb159c4 100644
--- a/libide/resources/libide.gresource.xml
+++ b/libide/resources/libide.gresource.xml
@@ -21,6 +21,15 @@
     <file compressed="true" alias="Adwaita.css">../../data/theme/Adwaita.css</file>
     <file compressed="true" alias="Adwaita-dark.css">../../data/theme/Adwaita-dark.css</file>
     <file compressed="true" alias="Adwaita-shared.css">../../data/theme/Adwaita-shared.css</file>
+
+    <file compressed="true" alias="Arc.css">../../data/theme/Arc.css</file>
+    <file compressed="true" alias="Arc-Dark.css">../../data/theme/Arc-Dark.css</file>
+    <file compressed="true" alias="Arc-Darker.css">../../data/theme/Arc-Darker.css</file>
+    <file compressed="true" alias="Arc-dark.css">../../data/theme/Arc-Dark.css</file>
+    <file compressed="true" alias="Arc-Dark-dark.css">../../data/theme/Arc-Dark.css</file>
+    <file compressed="true" alias="Arc-Darker-dark.css">../../data/theme/Arc-Dark.css</file>
+    <file compressed="true" alias="Arc-shared.css">../../data/theme/Arc-shared.css</file>
+
     <file compressed="true" alias="shared.css">../../data/theme/shared.css</file>
   </gresource>