[gnome-themes-standard] Separate the colors used in the theme from the gtk color scheme names

From: Carlos Garnacho <carlosg src gnome org>
To: commits-list gnome org
Cc:
Subject: [gnome-themes-standard] Separate the colors used in the theme from the gtk color scheme names
Date: Fri, 18 Feb 2011 11:17:14 +0000 (UTC)
commit f545d1597f47ff729922d54c48d4409f11c9a2f3
Author: Carlos Garnacho <carlosg gnome org>
Date:   Thu Feb 17 19:53:37 2011 +0100

    Separate the colors used in the theme from the gtk color scheme names
    
    This enables us to make gtk-dark.css variants that bypass
    the color scheme provided through GtkSettings

 themes/Adwaita/gtk-3.0/gtk.css |  232 +++++++++++++++++++++-------------------
 1 files changed, 122 insertions(+), 110 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/gtk.css b/themes/Adwaita/gtk-3.0/gtk.css
index c08e1b2..09eaa70 100644
--- a/themes/Adwaita/gtk-3.0/gtk.css
+++ b/themes/Adwaita/gtk-3.0/gtk.css
@@ -7,6 +7,18 @@
 @define-color fg_color #2e3436;
 @define-color tooltip_fg_color #ffffff;
 @define-color selected_fg_color #ffffff;
+
+/* Colormap actually used by the theme, to be overridden in other css files */
+ define-color theme_base_color @base_color;
+ define-color theme_text_color @text_color;
+ define-color theme_bg_color @bg_color;
+ define-color theme_fg_color @fg_color;
+ define-color theme_tooltip_bg_color @tooltip_bg_color;
+ define-color theme_tooltip_fg_color @tooltip_fg_color;
+ define-color theme_selected_bg_color @selected_bg_color;
+ define-color theme_selected_fg_color @selected_fg_color;
+
+
 @define-color link_color #4a90d9;
 @define-color frame_color #8a9580;
 @define-color inactive_frame_color #c7ccc1;
@@ -37,11 +49,11 @@
 @define-color trough_bg_color_a #ccccc7;
 @define-color trough_bg_color_b #e4e4e1;
 
- define-color active_trough_bg_color_a shade (@selected_bg_color, 1.29);
- define-color active_trough_bg_color_b shade (@selected_bg_color, 1.05);
+ define-color active_trough_bg_color_a shade (@theme_selected_bg_color, 1.29);
+ define-color active_trough_bg_color_b shade (@theme_selected_bg_color, 1.05);
 
 @define-color selected_row_bg_color_a #1f72c6;
- define-color selected_row_bg_color_b shade (@selected_bg_color, 1.22);
+ define-color selected_row_bg_color_b shade (@theme_selected_bg_color, 1.22);
 
 @define-color highlighted_border #8a8f8a;
 @define-color menu_fg_color #2e87e3;
@@ -104,8 +116,8 @@
     -GtkSeparatorToolItem-shadow-type: none;
 
     /* Style */
-    background-color: @bg_color;
-    color: @fg_color;
+    background-color: @theme_bg_color;
+    color: @theme_fg_color;
     border-radius: 3;
 
     /* Engine settings */
@@ -114,18 +126,18 @@
 }
 
 *:hover {
-    background-color: shade (@bg_color, 1.02);
-    color: @fg_color;
+    background-color: shade (@theme_bg_color, 1.02);
+    color: @theme_fg_color;
 }
 
 *:selected {
-    background-color: @selected_bg_color;
-    color: @selected_fg_color;
+    background-color: @theme_selected_bg_color;
+    color: @theme_selected_fg_color;
 }
 
 *:selected:focused {
-    background-color: @selected_bg_color;
-    color: @selected_fg_color;
+    background-color: @theme_selected_bg_color;
+    color: @theme_selected_fg_color;
 }
 
 *:insensitive {
@@ -134,7 +146,7 @@
 }
 
 *:active {
-    background-color: shade (@bg_color, 0.915);
+    background-color: shade (@theme_bg_color, 0.915);
 }
 
 .background {
@@ -142,8 +154,8 @@
     to have a fixed height gradient, not sure.*/
     /*background-image: -gtk-gradient (linear,
 				     left top, left bottom,
-				     from (shade (@bg_color, 0.94)),
-				     to (@bg_color)); */
+				     from (shade (@theme_bg_color, 0.94)),
+				     to (@theme_bg_color)); */
     border-style: none;
     border-width: 0;
     border-radius: 0;
@@ -151,7 +163,7 @@
 
 /* Text Entries */
 .entry, .toolbar .entry {
-    background-color: @base_color;
+    background-color: @theme_base_color;
     background-image: none;
     border-color: @focused_entry_border;
     border-radius: 3;
@@ -169,7 +181,7 @@ GtkSpinButton.button:insensitive,
 GtkSpinButton.button:prelight,
 GtkSpinButton.button:active {
     background-image: none;
-    background-color: @base_color;
+    background-color: @theme_base_color;
     border-width: 1;
     border-style: none;
     padding: 0;
@@ -183,25 +195,25 @@ GtkScale {
 
 .frame {
     font: bold;
-    color: lighter (@fg_color);
+    color: lighter (@theme_fg_color);
     border-style: none;
     border-width: 0;
 }
 
 .cell {
-    background-color: @base_color;
-    color: @text_color;
+    background-color: @theme_base_color;
+    color: @theme_text_color;
 }
 
 .cell:selected {
-    background-color: @selected_bg_color;
+    background-color: @theme_selected_bg_color;
 }
 
 /* Notebooks/Tabs */
 
 .notebook {
-    -adwaita-selected-tab-color: shade (@selected_bg_color, 1.33);
-    background-color: shade (@bg_color, 1.12);
+    -adwaita-selected-tab-color: shade (@theme_selected_bg_color, 1.33);
+    background-color: shade (@theme_bg_color, 1.12);
     padding: 2;
     border-style: solid;
     border-radius: 0;
@@ -215,7 +227,7 @@ GtkScale {
 }
 
 .notebook tab:active {
-    background-color: @base_color;
+    background-color: @theme_base_color;
 }
 
 /* Scrollbars */
@@ -231,18 +243,18 @@ GtkScrollbar {
 }
 
 GtkScrollbar.trough {
-    background-color: shade (@bg_color, 0.9);
+    background-color: shade (@theme_bg_color, 0.9);
     border-width: 0;
     border-radius: 0;
     /* non uniform borders don't work
     border: 1px solid @frame_color;
-    border-left: 1px solid shade (@bg_color, 0.9);
+    border-left: 1px solid shade (@theme_bg_color, 0.9);
     */
 }
 
 GtkScrollbar.slider, GtkScrollbar.button {
     background-image: none;
-    background-color: lighter (@bg_color);
+    background-color: lighter (@theme_bg_color);
     border-color: @button_border;
     border-width: 1;
     border-radius: 3;
@@ -252,14 +264,14 @@ GtkScrollbar.slider, GtkScrollbar.button {
 GtkScrollbar.slider:prelight,
 GtkScrollbar.button:prelight {
     background-image: none;
-    background-color: lighter (@bg_color);
+    background-color: lighter (@theme_bg_color);
     border-color: @frame_color;
 }
 
 GtkScrollbar.slider:prelight:active,
 GtkScrollbar.button:prelight:active {
     background-image: none;
-    border-color: @selected_bg_color;
+    border-color: @theme_selected_bg_color;
 }
 
 /* Buttons */
@@ -273,23 +285,23 @@ GtkScrollbar.button:prelight:active {
 
     background-image: -gtk-gradient (linear,
 				     left top, left bottom,
-				     from (shade (@bg_color, 1.06)),
-				     to (shade (@bg_color, 0.95)));
+				     from (shade (@theme_bg_color, 1.06)),
+				     to (shade (@theme_bg_color, 0.95)));
 }
 
 .button:hover {
     border-color: @button_border;
     background-image: -gtk-gradient (linear,
 				     left top, left bottom,
-				     from (@base_color),
-				     to (shade (@bg_color, 0.97)));
+				     from (@theme_base_color),
+				     to (shade (@theme_bg_color, 0.97)));
 }
 
 .button:active {
     background-image: -gtk-gradient (linear,
     				     left top, left bottom,
-				     from (shade (@bg_color, 0.86)),
-				     to (shade (@bg_color, 1.09)));
+				     from (shade (@theme_bg_color, 0.86)),
+				     to (shade (@theme_bg_color, 1.09)));
 }
 
 .button:hover:active,
@@ -310,7 +322,7 @@ GtkScrollbar.button:prelight:active {
 .toolbar .button:prelight {
     background-image: -gtk-gradient (linear,
                                      left top, left bottom,
-                                     from (shade (@bg_color, 1.035)),
+                                     from (shade (@theme_bg_color, 1.035)),
                                      to (shade (@inactive_frame_color, 1.09)));
     border-style: solid;
     border-radius: 3;
@@ -324,16 +336,16 @@ GtkScrollbar.button:prelight:active {
 
 GtkStatusbar {
     padding: 5;
-    color: @fg_color;
+    color: @theme_fg_color;
     -GtkStatusbar-shadow-type: none;
 }
 
 .menubar {
     background-image: -gtk-gradient (linear,
 				     left top, left bottom,
-				     from (@bg_color),
-				     color-stop (0.45, shade (@bg_color, 0.97)),
-				     to (shade (@bg_color, 0,99));
+				     from (@theme_bg_color),
+				     color-stop (0.45, shade (@theme_bg_color, 0.97)),
+				     to (shade (@theme_bg_color, 0,99));
     border-style: none;
     padding: 4;
     border-width: 0;
@@ -343,10 +355,10 @@ GtkStatusbar {
 
 .menu {
     padding: -1;
-    background-color: shade (@bg_color, 1.12);
+    background-color: shade (@theme_bg_color, 1.12);
     border-style: solid;
     border-width: 1;
-    border-color: shade (@bg_color, 0.7);
+    border-color: shade (@theme_bg_color, 0.7);
     border-radius: 0; /* No argb visuals by default 0, it would have been nice to have it something like 4*/
     -GtkMenuItem-arrow-scaling: 0.4;
 }
@@ -361,16 +373,16 @@ GtkStatusbar {
     background-image: -gtk-gradient (linear,
 				     left top,
 				     left bottom,
-				     from (shade (@selected_bg_color, 1.3)),
-				     color-stop (0.05, shade (@selected_bg_color, 0.95)),
-				     color-stop (0.4, @selected_bg_color),
-				     to @selected_bg_color);
-    /* background-color: @selected_bg_color; */
-    color: @selected_fg_color;
+				     from (shade (@theme_selected_bg_color, 1.3)),
+				     color-stop (0.05, shade (@theme_selected_bg_color, 0.95)),
+				     color-stop (0.4, @theme_selected_bg_color),
+				     to @theme_selected_bg_color);
+    /* background-color: @theme_selected_bg_color; */
+    color: @theme_selected_fg_color;
     border-style: solid;
     border-width: 1;
     border-radius: 0;
-    border-color: darker (@selected_bg_color);
+    border-color: darker (@theme_selected_bg_color);
 }
 
 .menu.separator {
@@ -382,14 +394,14 @@ GtkStatusbar {
 }
 
 GtkCheckButton, GtkRadioButton {
-    background-color: @bg_color;
+    background-color: @theme_bg_color;
 }
 
 GtkCheckButton:prelight,
 GtkRadioButton:prelight,
 GtkCheckButton:selected,
 GtkRadioButton:selected {
-    background-color: shade (@bg_color, 1.1);
+    background-color: shade (@theme_bg_color, 1.1);
 }
 
 .check, .radio,
@@ -400,7 +412,7 @@ GtkRadioButton:selected {
 .menu .check:hover, .menu .radio:hover {
     border-color: shade (@frame_color, 1.035);
     color: @menu_fg_color;
-    background-color: mix (shade (@highlighted_border, 1.345), @bg_color, 0.9);
+    background-color: mix (shade (@highlighted_border, 1.345), @theme_bg_color, 0.9);
 }
 
 .check:insensitive,
@@ -423,10 +435,10 @@ GtkRadioButton:selected {
 .progressbar {
     padding: 0;
     border-radius: 3;
-    background-color: @selected_bg_color;
+    background-color: @theme_selected_bg_color;
     border-style: solid;
-    border-color: darker (@selected_bg_color);
-    color: @selected_fg_color;
+    border-color: darker (@theme_selected_bg_color);
+    color: @theme_selected_fg_color;
 }
 
 column-header {
@@ -435,14 +447,14 @@ column-header {
 
 .tooltips {
     padding: 4 4;
-    background-color: @tooltip_bg_color;
-    color: @tooltip_fg_color;
+    background-color: @theme_tooltip_bg_color;
+    color: @theme_tooltip_fg_color;
 }
 
 /* Toolbars */
 .toolbar {
     border-style: solid;
-    border-color: darker (@bg_color);
+    border-color: darker (@theme_bg_color);
     border-width: 1;
     border-radius: 3;
     padding: 1;
@@ -456,15 +468,15 @@ GtkWindow > GtkVBox > .toolbar {
     background-image: -gtk-gradient (linear,
 				     left top,
 				     left bottom,
-				     from (shade (@bg_color, 0.6)),
-				     color-stop (0.02, shade (@bg_color, 0.6)),
-				     color-stop (0.03, shade (@bg_color, 0.7)),
-				     color-stop (0.2, shade (@bg_color, 0.75)),
-				     color-stop (0.8, shade (@bg_color, 0.8)),
-				     color-stop (0.96, shade (@bg_color, 0.95)),
-				     color-stop (0.97, shade (@bg_color, 0.8)),
-				     color-stop (0.98, shade (@bg_color, 1.2)),
-				     to (shade (@bg_color, 1.2)));
+				     from (shade (@theme_bg_color, 0.6)),
+				     color-stop (0.02, shade (@theme_bg_color, 0.6)),
+				     color-stop (0.03, shade (@theme_bg_color, 0.7)),
+				     color-stop (0.2, shade (@theme_bg_color, 0.75)),
+				     color-stop (0.8, shade (@theme_bg_color, 0.8)),
+				     color-stop (0.96, shade (@theme_bg_color, 0.95)),
+				     color-stop (0.97, shade (@theme_bg_color, 0.8)),
+				     color-stop (0.98, shade (@theme_bg_color, 1.2)),
+				     to (shade (@theme_bg_color, 1.2)));
     border-radius: 0;
     border-style: none;
     padding: 4;
@@ -479,10 +491,10 @@ GtkWindow > GtkVBox > GtkToolbar .button {
 
     background-image: -gtk-gradient (linear,
 				     left top, left bottom,
-				     from (alpha (shade (@bg_color, 0.75), 0.0)),
-				     color-stop (0.3, alpha (shade (@bg_color, 0.9), 0.0)),
-				     color-stop (0.6, alpha (shade (@bg_color, 0.9), 0.0)),
-				     to (alpha (shade (@bg_color, 0.85), 0.0)));
+				     from (alpha (shade (@theme_bg_color, 0.75), 0.0)),
+				     color-stop (0.3, alpha (shade (@theme_bg_color, 0.9), 0.0)),
+				     color-stop (0.6, alpha (shade (@theme_bg_color, 0.9), 0.0)),
+				     to (alpha (shade (@theme_bg_color, 0.85), 0.0)));
     -GtkWidget-focus-line-width: 0;
 }
 
@@ -494,14 +506,14 @@ GtkWindow > GtkVBox > EggEditableToolbar > GtkHBox > GtkToolbar .button:hover,
 GtkWindow > GtkVBox > GtkToolbar .button:hover { /* needs correct colors */
     background-image: -gtk-gradient (linear,
 				     left top, left bottom,
-				     from (shade (@bg_color, 0.75)),
-				     color-stop (0.3, shade (@bg_color, 0.9)),
-				     color-stop (0.6, shade (@bg_color, 0.9)),
-				     to (shade (@bg_color, 0.85)));
+				     from (shade (@theme_bg_color, 0.75)),
+				     color-stop (0.3, shade (@theme_bg_color, 0.9)),
+				     color-stop (0.6, shade (@theme_bg_color, 0.9)),
+				     to (shade (@theme_bg_color, 0.85)));
 }
 
 .toolbar *:insensitive {
-    color: alpha (@fg_color, 0.6);
+    color: alpha (@theme_fg_color, 0.6);
 }
 
 GtkWindow > GtkVBox > EggEditableToolbar > GtkHBox > GtkToolbar .button:active, GtkToolbar .button:active:prelight,
@@ -510,16 +522,16 @@ GtkWindow > GtkVBox > GtkToolbar .button:active, GtkToolbar .button:active:preli
     border-width: 0;
     background-image: -gtk-gradient (linear,
 				     left top, left bottom,
-				     from (shade (@bg_color, 0.75)),
-				     color-stop (0.3, shade (@bg_color, 0.9)),
-				     color-stop (0.6, shade (@bg_color, 0.9)),
-				     to (shade (@bg_color, 0.85)));
-  }
+				     from (shade (@theme_bg_color, 0.75)),
+				     color-stop (0.3, shade (@theme_bg_color, 0.9)),
+				     color-stop (0.6, shade (@theme_bg_color, 0.9)),
+				     to (shade (@theme_bg_color, 0.85)));
+}
 
 GtkWindow > GtkVBox > EggEditableToolbar > GtkHBox > .toolbar.separator,
 GtkWindow > GtkVBox > .toolbar.separator {
     padding: 1 0;
-    background-color: shade (@bg_color, 0.8);
+    background-color: shade (@theme_bg_color, 0.8);
     -GtkVSeparator-vertical-padding: 0;
     -GtkWidget-wide-separators: 1;
     -GtkWidget-separator-width: 7;
@@ -532,7 +544,7 @@ GtkSeparator {
 
 GtkScrolledWindow.frame {
     border-style: solid;
-    border-color: darker (@bg_color);
+    border-color: darker (@theme_bg_color);
     border-width: 1;
     border-radius: 3;
     padding: 1;
@@ -551,8 +563,8 @@ GtkTreeView * {
 }
 
 .view {
-    background-color: @base_color;
-    color: @fg_color;
+    background-color: @theme_base_color;
+    color: @theme_fg_color;
     border-radius: 0;
 }
 
@@ -570,10 +582,10 @@ row:selected {
     background-image: -gtk-gradient (linear,
 				     left top,
 				     left bottom,
-                                     from (mix (@selected_row_bg_color_a, @bg_color, 0.8)),
-                                     color-stop (0.05, mix (@selected_row_bg_color_a, @bg_color, 0.8)),
-                                     color-stop (0.05, mix (@selected_row_bg_color_b, @bg_color, 0.8)),
-                                     to (mix (@selected_row_bg_color_a, @bg_color, 0.8)));
+                                     from (mix (@selected_row_bg_color_a, @theme_bg_color, 0.8)),
+                                     color-stop (0.05, mix (@selected_row_bg_color_a, @theme_bg_color, 0.8)),
+                                     color-stop (0.05, mix (@selected_row_bg_color_b, @theme_bg_color, 0.8)),
+                                     to (mix (@selected_row_bg_color_a, @theme_bg_color, 0.8)));
 }
 
 
@@ -585,21 +597,21 @@ column-header .button {
     background-image: -gtk-gradient (linear,
                                      left top,
                                      left bottom,
-                                     from (shade (@bg_color, 1.04)),
-                                     to (shade (@bg_color, 0.89)));
+                                     from (shade (@theme_bg_color, 1.04)),
+                                     to (shade (@theme_bg_color, 0.89)));
 }
 
 .expander,
 .expander:active {
     border-color: #797b76;
-    background-color: shade (@bg_color, 1.035);
-    color: shade (@selected_bg_color, 1.02);
+    background-color: shade (@theme_bg_color, 1.035);
+    color: shade (@theme_selected_bg_color, 1.02);
 }
 
 .expander:prelight {
     border-color: shade (@inactive_frame_color, 0.425);
     background-color: #888a85;
-    color: lighter (@bg_color);
+    color: lighter (@theme_bg_color);
 }
 
 GtkSwitch.trough {
@@ -614,7 +626,7 @@ GtkSwitch.trough {
 }
 
 GtkSwitch.trough:active {
-    border-color: shade (@selected_bg_color, 0.935);
+    border-color: shade (@theme_selected_bg_color, 0.935);
     background-image: -gtk-gradient (linear,
                                      left top, left bottom,
                                      from (@active_trough_bg_color_a),
@@ -623,7 +635,7 @@ GtkSwitch.trough:active {
 
 GtkSwitch.trough:insensitive {
     background-image: none;
-    background-color: shade (@bg_color, 0.9);
+    background-color: shade (@theme_bg_color, 0.9);
     border-color: shade (@inactive_frame_color, 0.845);
 }
 
@@ -635,7 +647,7 @@ GtkScale.slider {
     background-image: -gtk-gradient (linear,
                                      left top, left bottom,
                                      from (shade (@frame_color, 1.72)),
-                                     to (@base_color));
+                                     to (@theme_base_color));
 }
 
 GtkScale.trough {
@@ -655,8 +667,8 @@ GtkCalendar.header {
     background-image: -gtk-gradient (linear,
                                      left top,
                                      left bottom,
-                                     from (shade (@bg_color, 1.04)),
-                                     to (shade (@bg_color, 0.89)));
+                                     from (shade (@theme_bg_color, 1.04)),
+                                     to (shade (@theme_bg_color, 0.89)));
     border-width: 0;
 }
 
@@ -670,8 +682,8 @@ GtkCalendar.button {
 
 .highlight,
 GtkCalendar.highlight {
-    background-color: @selected_bg_color;
-    color: @selected_fg_color;
+    background-color: @theme_selected_bg_color;
+    color: @theme_selected_fg_color;
     border-radius: 0;
     padding: 0;
     border-width: 0;
@@ -703,7 +715,7 @@ GtkTreeView.GtkFileChooserDefaultSidebar {
 
 /* Custom colors for some applications' widgets */
 #nautilus-extra-view-widget {
-    background-color: mix (shade (@bg_color, 1.05), @selected_bg_color, 0.60);
+    background-color: mix (shade (@theme_bg_color, 1.05), @theme_selected_bg_color, 0.60);
 }
 
 ApDocView, /* Abiword */
@@ -716,8 +728,8 @@ CheeseThumbView /* Cheese */
 
 /* gnome-terminal */
 TerminalScreen {
-    background-color: @bg_color;
-    color: @fg_color;
+    background-color: @theme_bg_color;
+    color: @theme_fg_color;
     -TerminalScreen-background-darkness: 0.95;
 }
 
@@ -735,31 +747,31 @@ PanelToplevel {
 PanelApplet GtkToggleButton {
     background-color: @chrome_bg_color;
     background-image: none;
-    border-color: shade (@bg_color, 0.215);
+    border-color: shade (@theme_bg_color, 0.215);
     border-width: 0;
     color: @chrome_fg_color;
 }
 
 PanelApplet GtkToggleButton:active {
-    background-color: shade (@bg_color, 0.43);
+    background-color: shade (@theme_bg_color, 0.43);
     background-image: none;
-    border-color: shade (@bg_color, 0.215);
+    border-color: shade (@theme_bg_color, 0.215);
     border-width: 0;
     color: @chrome_fg_color;
 }
 
 PanelApplet GtkToggleButton:hover {
-    background-color: shade (@bg_color, 0.215);
+    background-color: shade (@theme_bg_color, 0.215);
     background-image: none;
-    border-color: shade (@bg_color, 0.215);
+    border-color: shade (@theme_bg_color, 0.215);
     border-width: 0;
     color: @chrome_fg_color;
 }
 
 PanelApplet GtkToggleButton:hover:active {
-    background-color: shade (@bg_color, 0.43);
+    background-color: shade (@theme_bg_color, 0.43);
     background-image: none;
-    border-color: shade (@bg_color, 0.215);
+    border-color: shade (@theme_bg_color, 0.215);
     border-width: 0;
     color: @chrome_fg_color;
 }
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]