[gnome-themes-standard/wip/sass] define colors in one place

From: Jakub Steiner <jimmac src gnome org>
To: commits-list gnome org
Cc:
Subject: [gnome-themes-standard/wip/sass] define colors in one place
Date: Mon, 26 May 2014 15:28:52 +0000 (UTC)
commit 6feffbad4d26cd6f34364a4463eaa7902b827906
Author: Jakub Steiner <jimmac gmail com>
Date:   Mon May 26 17:25:22 2014 +0200

    define colors in one place
    
    - DRY and clear when colors differ between light/dark

 themes/Adwaita/gtk-3.0/_colors.scss            |   30 ++++++++++++
 themes/Adwaita/gtk-3.0/_common.scss            |   60 ++++++++++++------------
 themes/Adwaita/gtk-3.0/_drawing.scss           |    8 ++--
 themes/Adwaita/gtk-3.0/gtk-contained-dark.scss |   31 +------------
 themes/Adwaita/gtk-3.0/gtk-contained.css       |   58 +++++++++++-----------
 themes/Adwaita/gtk-3.0/gtk-contained.scss      |   33 +------------
 6 files changed, 96 insertions(+), 124 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_colors.scss b/themes/Adwaita/gtk-3.0/_colors.scss
new file mode 100644
index 0000000..35b8379
--- /dev/null
+++ b/themes/Adwaita/gtk-3.0/_colors.scss
@@ -0,0 +1,30 @@
+// When color definition differs for dark and light variant, 
+// it gets @if ed depending on $variant
+
+$base_color: if($variant =='light', #fff, #333);
+$bg_color: if($variant =='light', #ededed, #393f3f);
+$fg_color: if($variant =='light', #2e3436, #eeeeec);
+
+$selected_fg_color: #fff;
+$selected_bg_color: if($variant =='light', #4a90d9, darken(#4a90d9,10%));
+
+$borders_color: if($variant =='light', darken($bg_color,30%), darken($bg_color,12%));
+$borders_edge: if($variant =='light', white, transparentize($fg_color,.9)); 
+$link_color: lighten($selected_bg_color,10%);
+
+$warning_color: #f57900;
+$error_color: #cc0000;
+$success_color: $selected_bg_color;
+$destructive_color: if($variant =='light', #ef2929, darken(#ef2929,10%));
+
+//insensitive state derived colors
+$_insensitive_fg_color: if($variant =='light', lighten($fg_color, 30%), lighten($fg_color, 10%));
+$_insensitive_bg_color: transparent;
+$_insensitive_borders_color: $borders_color;
+
+//colors for the backdrop state, derived from the main colors.
+$_backdrop_base_color: if($variant =='light', darken($base_color,1%), darken($base_color,5%));
+$_backdrop_bg_color: $bg_color;
+$_backdrop_fg_color: if($variant =='light', lighten($fg_color,10%), $fg_color);
+$_backdrop_insensitive_color: if($variant =='light', darken($_backdrop_bg_color,15%), 
lighten($_insensitive_fg_color,5%));
+$_backdrop_borders_color: $borders_color;
diff --git a/themes/Adwaita/gtk-3.0/_common.scss b/themes/Adwaita/gtk-3.0/_common.scss
index a0b3ba9..704d06a 100644
--- a/themes/Adwaita/gtk-3.0/_common.scss
+++ b/themes/Adwaita/gtk-3.0/_common.scss
@@ -38,7 +38,7 @@
   // to the adwaita engine: using real CSS properties is faster,
   // and we don't use any outlines for now.
 
-  outline-color: transparentize($theme_fg_color, 0.3);
+  outline-color: transparentize($fg_color, 0.3);
   outline-style: dashed;
   outline-offset: 2px;
 }
@@ -48,15 +48,15 @@
  ***************/
 
 .background {
-    color: $theme_fg_color;
-    background-color: $theme_bg_color;
+    color: $fg_color;
+    background-color: $bg_color;
 }
 
 .background:backdrop {
     text-shadow: none;
     icon-shadow: none;
 
-    color: lighten($theme_fg_color,10%);
+    color: lighten($fg_color,10%);
 }
 
 /*
@@ -87,15 +87,15 @@
 }
 
 .gtkstyle-fallback {
-  background-color: $theme_bg_color;
-  color: $theme_fg_color;
+  background-color: $bg_color;
+  color: $fg_color;
   &:prelight {
-    background-color: lighten($theme_bg_color, 10%);
-    color: $theme_fg_color;
+    background-color: lighten($bg_color, 10%);
+    color: $fg_color;
   }
   &:active {
-    background-color: darken($theme_bg_color, 10%);
-    color: $theme_fg_color;
+    background-color: darken($bg_color, 10%);
+    color: $fg_color;
   }
   &:insensitive {
     background-color: $_insensitive_bg_color;
@@ -120,8 +120,8 @@ GtkGrid:insensitive {
 }
 
 .view {
-  background-color: $theme_base_color;
-  color: $theme_fg_color;
+  background-color: $base_color;
+  color: $fg_color;
 }
 
 /*********************
@@ -152,13 +152,13 @@ GtkGrid:insensitive {
  
 .entry {
   padding: 4px;
-  color: $theme_fg_color;
+  color: $fg_color;
   border-radius: 3px;
   transition: all 200ms ease-out;
   border: 1px solid $borders_color;
   background-image: linear-gradient(to bottom,
-                                      darken($theme_base_color,3%) 0%,
-                                      $theme_base_color 90%
+                                      darken($base_color,3%) 0%,
+                                      $base_color 90%
                                       );
 
   $_entry_shade: transparentize(black, 0.5);
@@ -289,7 +289,7 @@ GtkColorButton.button { // Uniform padding on the GtkColorButton.button
 
 /* menu/popover buttons */
 .menuitem.button, {
-  color: $theme_fg_color;
+  color: $fg_color;
   background-color: transparent;
   background-image: none;
   border-color: transparent;
@@ -454,15 +454,15 @@ GtkComboBox {
 
   background-color: transparent;
   background-image: linear-gradient(to bottom,
-                                    lighten($theme_bg_color,2%),
-                                    darken($theme_bg_color,5%));
+                                    lighten($bg_color,2%),
+                                    darken($bg_color,5%));
   box-shadow: inset 0 -1px transparentize($borders_color,0.6),
               inset 0 1px $_top_hilight;
   padding: 6px;
 
   &:backdrop {
     border-color: $_backdrop_borders_color;
-    background-color: $theme_bg_color;
+    background-color: $bg_color;
     background-image: none;
     box-shadow: none;
   }
@@ -514,7 +514,7 @@ GtkPopover {
   /*
   background-color: @osd_popover_bg;
   */
-  background-color: $theme_bg_color;
+  background-color: $bg_color;
 
   border-color: $borders-color;
   border-width: 1px;
@@ -534,7 +534,7 @@ GtkPopover {
   .separator {
     font-size: 80%;
     font-weight: bold;
-    color: transparentize($theme_fg_color,0.4);
+    color: transparentize($fg_color,0.4);
     text-shadow: none;
     background-color: transparent;
     icon-shadow: none;
@@ -551,7 +551,7 @@ GtkPopover {
   padding: 0;
   border-style: solid;
   border-color: $borders_color;
-  background-color: $theme_base_color;
+  background-color: $base_color;
   -GtkNotebook-initial-gap: 10;
   -GtkNotebook-arrow-spacing: 5;
   -GtkNotebook-tab-curvature: 0;
@@ -562,7 +562,7 @@ GtkPopover {
   transition: all 200ms ease-out;
   &.frame { border-width: 1px; }
   &.header {
-    background-color: darken($theme_bg_color,5%);
+    background-color: darken($bg_color,5%);
     box-shadow: inset 0 6px 3px -5px transparentize(black,0.4); 
 // I want just a top shadow 
 // so negative spread
@@ -595,9 +595,9 @@ GtkPopover {
 
     GtkLabel { //tab text
       font-weight: bold;
-      color: lighten($theme_fg_color,30%); //FIXME
-      &.active-page { color: $theme_fg_color; } //active tab text
-      &.prelight-page { color: lighten($theme_fg_color,15%); } //prelight tab text
+      color: lighten($fg_color,30%); //FIXME
+      &.active-page { color: $fg_color; } //active tab text
+      &.prelight-page { color: lighten($fg_color,15%); } //prelight tab text
     }
   }
 }
@@ -621,7 +621,7 @@ GtkPopover {
     border: none;
   }
   &.trough {
-    background-color: darken($theme_bg_color, 5%);
+    background-color: darken($bg_color, 5%);
     &:backdrop {
       background-color: transparent;
     }
@@ -629,12 +629,12 @@ GtkPopover {
   &.slider {
     border-radius: 20px;
     border: 3px solid transparent; //margin :/
-    background-color: darken($theme_bg_color, 30%);
+    background-color: darken($bg_color, 30%);
     &:backdrop, &:insensitive {
-      background-color: darken($theme_bg_color, 20%);
+      background-color: darken($bg_color, 20%);
     }
     &:hover {
-      background-color: darken($theme_bg_color, 40%);
+      background-color: darken($bg_color, 40%);
     }
     &:prelight:active {
       background-color: $selected_bg_color;
diff --git a/themes/Adwaita/gtk-3.0/_drawing.scss b/themes/Adwaita/gtk-3.0/_drawing.scss
index fef1b95..e53f856 100644
--- a/themes/Adwaita/gtk-3.0/_drawing.scss
+++ b/themes/Adwaita/gtk-3.0/_drawing.scss
@@ -18,7 +18,7 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
   }
 }
 
- mixin _button_text_shadow ($tc:$theme_fg_color, $bg:$theme_bg_color) { 
+ mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) { 
 //
 // helper function for the text emboss effect
 //
@@ -52,7 +52,7 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
   @else { box-shadow: $shadow1; }
 }
 
- mixin button($t, $c:$theme_bg_color, $tc:$theme_fg_color, $shadow:false ) {
+ mixin button($t, $c:$bg_color, $tc:$fg_color, $colored_button:false ) {
 //
 // Button drawing function
 // 
@@ -87,7 +87,7 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
                                   );
     }
 
-    @if $c!=$theme_bg_color { @include _button_border_color($c); }
+    @if $c!=$bg_color { @include _button_border_color($c); }
     @else { border-color: $borders_color; }
 
     @include _button_text_shadow($tc,$c);
@@ -110,7 +110,7 @@ $widget_bottom_hilight: 0 1px $borders_edge; //outer hilight "used" on
 
   @else if $t==active { // pushed button
     color: $tc;
-    @if $c!=$theme_bg_color { @include _button_border_color($c); }
+    @if $c!=$bg_color { @include _button_border_color($c); }
     @else { border-color: $borders_color; }
     @if $variant == 'light' {
       background-image: linear-gradient(to bottom,
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained-dark.scss b/themes/Adwaita/gtk-3.0/gtk-contained-dark.scss
index 7f98fc7..431e7b0 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained-dark.scss
+++ b/themes/Adwaita/gtk-3.0/gtk-contained-dark.scss
@@ -1,34 +1,5 @@
 $variant: 'dark';
 
-// Color definitions
-$theme_base_color: #333;
-$theme_bg_color: #393f3f;
-$theme_fg_color: #eeeeec;
-
-$selected_fg_color: lighten($theme_fg_color,10%);
-$selected_bg_color: darken(#4a90d9,10%); //tango too light
-
-$borders_color: darken($theme_bg_color,12%);
-$borders_edge: transparentize($theme_fg_color,.9);
-
-$link_color: lighten($selected_bg_color,10%);
-
-$warning_color: #f57900;
-$error_color: #cc0000;
-$success_color: $selected_bg_color;
-$destructive_color: darken(#ef2929,10%);
-
-$_insensitive_fg_color: lighten($theme_fg_color, 10%);
-$_insensitive_bg_color: transparent;
-$_insensitive_borders_color: $borders_color;
-
-//colors for the backdrop state, derived from the main colors.
-$_backdrop_base_color: darken($theme_base_color,5%);
-$_backdrop_bg_color: $theme_bg_color;
-$_backdrop_fg_color: $theme_fg_color;
-$_backdrop_insensitive_color: lighten($_insensitive_fg_color,5%); //FIXME
-$_backdrop_borders_color: $borders_color;
-
-
+ import 'colors';
 @import 'drawing';
 @import 'common';
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.css b/themes/Adwaita/gtk-3.0/gtk-contained.css
index 8c8104b..646b458 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.css
@@ -15,8 +15,8 @@
   -GtkTreeView-horizontal-separator: 4;
   -GtkMenu-horizontal-padding: 0;
   -GtkMenu-vertical-padding: 0;
-  -GtkWidget-link-color: #98b9dc;
-  -GtkWidget-visited-link-color: #98b9dc;
+  -GtkWidget-link-color: #74aae2;
+  -GtkWidget-visited-link-color: #74aae2;
   -GtkWidget-focus-padding: 2;
   -GtkWidget-focus-line-width: 1;
   -GtkWindow-resize-grip-width: 0;
@@ -45,11 +45,11 @@
 */
 *:selected,
 *:selected:focus {
-  background-color: #729fcf;
+  background-color: #4a90d9;
   color: white; }
 
 *:selected:backdrop {
-  background-color: #729fcf;
+  background-color: #4a90d9;
   color: white; }
 
 *:insensitive {
@@ -71,7 +71,7 @@
     background-color: transparent;
     color: #748489; }
   .gtkstyle-fallback:selected {
-    background-color: #729fcf;
+    background-color: #4a90d9;
     color: white; }
 
 GtkImage,
@@ -125,12 +125,12 @@ GtkGrid:insensitive {
     box-shadow: 0 1px white;
     /* not working */ }
   .entry:focus {
-    border-color: #729fcf;
-    box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.4), inset 0 0 2px 1px rgba(114, 159, 207, 0.5), 0 1px 
white;
+    border-color: #4a90d9;
+    box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.4), inset 0 0 2px 1px rgba(74, 144, 217, 0.5), 0 1px 
white;
     /* not working */ }
   .entry:selected, .entry:backdrop:selected {
     color: white;
-    background-color: #729fcf; }
+    background-color: #4a90d9; }
   .entry:backdrop {
     color: #454f52;
     border-color: #a1a1a1;
@@ -143,7 +143,7 @@ GtkGrid:insensitive {
     margin: 1px;
     border-radius: 0;
     border-width: 0 0 2px;
-    border-color: #729fcf;
+    border-color: #4a90d9;
     border-style: solid;
     background-image: none;
     box-shadow: none; }
@@ -237,28 +237,28 @@ GtkGrid:insensitive {
     border-width: 1px;
     border-style: solid;
     color: white;
-    background-image: linear-gradient(to bottom, #abc6e2, #729fcf 40%, #4c85c2);
-    border-color: #2b537d;
-    text-shadow: 0 -1px rgba(0, 0, 0, 0.49647);
-    icon-shadow: 0 -1px rgba(0, 0, 0, 0.49647);
+    background-image: linear-gradient(to bottom, #89b7e6, #4a90d9 40%, #2a76c6);
+    border-color: #184472;
+    text-shadow: 0 -1px rgba(0, 0, 0, 0.54353);
+    icon-shadow: 0 -1px rgba(0, 0, 0, 0.54353);
     box-shadow: inset 0 1px white, 0 1px white; }
     .button.suggested-action:hover {
       border-width: 1px;
       border-style: solid;
       color: white;
-      border-color: #2b537d;
-      background-image: linear-gradient(to bottom, #a7c3e1, #81a9d4 40%, #729fcf);
-      text-shadow: 0 -1px rgba(0, 0, 0, 0.46447);
-      icon-shadow: 0 -1px rgba(0, 0, 0, 0.46447);
+      border-color: #184472;
+      background-image: linear-gradient(to bottom, #85b4e5, #5b9add 40%, #4a90d9);
+      text-shadow: 0 -1px rgba(0, 0, 0, 0.51153);
+      icon-shadow: 0 -1px rgba(0, 0, 0, 0.51153);
       box-shadow: inset 0 1px white, 0 1px white; }
     .button.suggested-action:active {
       border-width: 1px;
       border-style: solid;
       color: white;
-      border-color: #2b537d;
-      background-image: linear-gradient(to bottom, #3e78b6, #4883c1 3%, #4c85c2);
-      text-shadow: 0 -1px rgba(0, 0, 0, 0.57647);
-      icon-shadow: 0 -1px rgba(0, 0, 0, 0.57647);
+      border-color: #184472;
+      background-image: linear-gradient(to bottom, #256ab1, #2974c2 3%, #2a76c6);
+      text-shadow: 0 -1px rgba(0, 0, 0, 0.62353);
+      icon-shadow: 0 -1px rgba(0, 0, 0, 0.62353);
       box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3), 0 1px white; }
     .button.suggested-action:backdrop {
       border-width: 1px;
@@ -513,9 +513,9 @@ GtkComboBox {
     .header-bar > GtkBox > .separator.vertical:backdrop {
       border-image: linear-gradient(to bottom, rgba(161, 161, 161, 0.5)) 0 1/1px 1px; }
   .header-bar.selection-mode {
-    color: #3e78b6;
+    color: #256ab1;
     text-shadow: 0 1px rgba(0, 0, 0, 0.5);
-    background-image: linear-gradient(to bottom, #85acd5, #7aa4d2); }
+    background-image: linear-gradient(to bottom, #5f9ddd, #5295db); }
   .tiled .header-bar, .maximized .header-bar {
     border-radius: 0; }
 
@@ -591,19 +591,19 @@ GtkPopover {
     .notebook tab.top:hover {
       box-shadow: inset 0 -2px #a1a1a1; }
     .notebook tab.top:active {
-      box-shadow: inset 0 -2px #729fcf; }
+      box-shadow: inset 0 -2px #4a90d9; }
     .notebook tab.bottom:hover {
       box-shadow: inset 0 2px #a1a1a1; }
     .notebook tab.bottom:active {
-      box-shadow: inset 0 2px #729fcf; }
+      box-shadow: inset 0 2px #4a90d9; }
     .notebook tab.right:hover {
       box-shadow: inset 2px 0 #a1a1a1; }
     .notebook tab.right:active {
-      box-shadow: inset 2px 0 #729fcf; }
+      box-shadow: inset 2px 0 #4a90d9; }
     .notebook tab.left:hover {
       box-shadow: inset -2px 0 #a1a1a1; }
     .notebook tab.left:active {
-      box-shadow: inset -2px 0 #729fcf; }
+      box-shadow: inset -2px 0 #4a90d9; }
     .notebook tab GtkLabel {
       font-weight: bold;
       color: #748489; }
@@ -641,11 +641,11 @@ GtkPopover {
     .scrollbar.slider:hover {
       background-color: #878787; }
     .scrollbar.slider:prelight:active {
-      background-color: #729fcf; }
+      background-color: #4a90d9; }
     .scrollbar.slider.fine-tune {
       border-width: 5px; }
       .scrollbar.slider.fine-tune:prelight:active {
-        background-color: #729fcf; }
+        background-color: #4a90d9; }
 
 /**********
  * Frames *
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.scss b/themes/Adwaita/gtk-3.0/gtk-contained.scss
index 1df0c61..c9761c0 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.scss
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.scss
@@ -6,37 +6,8 @@
 
 $variant: 'light';
 
-// Color definitions
-$theme_base_color: #ffffff;
-$theme_bg_color: #ededed;
-$theme_fg_color: #2e3436;
-
-$selected_fg_color: #ffffff;
-$selected_bg_color: #729fcf;
-
-$borders_color: darken($theme_bg_color,30%);
-//$borders_edge: transparentize(white,0.5);
-$borders_edge: white; //FIXME
-
-$link_color: lighten($selected_bg_color,10%);
-
-$warning_color: #f57900;
-$error_color: #cc0000;
-$success_color: $selected_bg_color;
-$destructive_color: #ef2929;
-
-//insensitive state derived colors
-$_insensitive_fg_color: lighten($theme_fg_color, 30%);
-$_insensitive_bg_color: transparent;
-$_insensitive_borders_color: $borders_color;
-
-//colors for the backdrop state, derived from the main colors.
-$_backdrop_base_color: darken($theme_base_color,1%);
-$_backdrop_bg_color: $theme_bg_color;
-$_backdrop_fg_color: lighten($theme_fg_color,10%);
-$_backdrop_insensitive_color: darken($_backdrop_bg_color,15%);
-$_backdrop_borders_color: $borders_color;
-
+// color definitions
+ import 'colors';
 // common drawing routines
 @import 'drawing';
 // actual widget styling
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]