[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]