GNOME.org
 

[libadwaita/wip/exalm/accent: 13/13] stylesheet: Implement recoloring for accent and a few other colors


commit dd5ef505d8a7e5012a43a05c7830081ec9af8028
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Sat Jun 12 03:14:57 2021 +0500

    stylesheet: Implement recoloring for accent and a few other colors
    
    Make their GTK colors the source of truth, proxy them to the SCSS.
    
    This allows to override them from the apps.

 src/stylesheet/Adwaita-dark.scss        |  1 +
 src/stylesheet/Adwaita-hc-dark.scss     |  1 +
 src/stylesheet/Adwaita-hc.scss          |  1 +
 src/stylesheet/Adwaita-light.scss       |  1 +
 src/stylesheet/_colors-public.scss      | 12 ------------
 src/stylesheet/_colors.scss             | 25 ++++++++++++-------------
 src/stylesheet/_common.scss             |  2 +-
 src/stylesheet/_defaults.scss           | 23 +++++++++++++++++++++++
 src/stylesheet/_functions.scss          |  8 ++++++++
 src/stylesheet/meson.build              |  1 +
 src/stylesheet/widgets/_buttons.scss    |  8 ++++----
 src/stylesheet/widgets/_calendar.scss   |  2 +-
 src/stylesheet/widgets/_entries.scss    |  6 +++---
 src/stylesheet/widgets/_header-bar.scss |  4 ++--
 src/stylesheet/widgets/_links.scss      |  5 ++---
 src/stylesheet/widgets/_tab-view.scss   | 10 +++++-----
 src/stylesheet/widgets/_toolbars.scss   |  2 +-
 src/stylesheet/widgets/_views.scss      |  2 +-
 18 files changed, 68 insertions(+), 46 deletions(-)
---
diff --git a/src/stylesheet/Adwaita-dark.scss b/src/stylesheet/Adwaita-dark.scss
index e209e50b..79f9aa36 100644
--- a/src/stylesheet/Adwaita-dark.scss
+++ b/src/stylesheet/Adwaita-dark.scss
@@ -1,6 +1,7 @@
 $variant: 'dark';
 $contrast: 'normal';
 
+@import 'defaults';
 @import 'functions';
 @import 'colors';
 @import 'drawing';
diff --git a/src/stylesheet/Adwaita-hc-dark.scss b/src/stylesheet/Adwaita-hc-dark.scss
index b41008a8..865f2ff5 100644
--- a/src/stylesheet/Adwaita-hc-dark.scss
+++ b/src/stylesheet/Adwaita-hc-dark.scss
@@ -1,6 +1,7 @@
 $variant: 'dark';
 $contrast: 'high';
 
+@import 'defaults';
 @import 'functions';
 @import 'colors';
 @import 'colors-public';
diff --git a/src/stylesheet/Adwaita-hc.scss b/src/stylesheet/Adwaita-hc.scss
index 41d7ec8b..4403ac25 100644
--- a/src/stylesheet/Adwaita-hc.scss
+++ b/src/stylesheet/Adwaita-hc.scss
@@ -1,6 +1,7 @@
 $variant: 'light';
 $contrast: 'high';
 
+@import 'defaults';
 @import 'functions';
 @import 'colors';
 @import 'colors-public';
diff --git a/src/stylesheet/Adwaita-light.scss b/src/stylesheet/Adwaita-light.scss
index 22286980..a5b2b51b 100644
--- a/src/stylesheet/Adwaita-light.scss
+++ b/src/stylesheet/Adwaita-light.scss
@@ -7,6 +7,7 @@
 $variant: 'light';
 $contrast: 'normal';
 
+@import 'defaults';
 @import 'functions';
 @import 'colors';
 @import 'drawing';
diff --git a/src/stylesheet/_colors-public.scss b/src/stylesheet/_colors-public.scss
index c318e068..948fb1bf 100644
--- a/src/stylesheet/_colors-public.scss
+++ b/src/stylesheet/_colors-public.scss
@@ -44,15 +44,3 @@ widgets main borders color */
 
 /* Very contrasty background for text views (@theme_text_color foreground) */
 @define-color text_view_bg #{"" + if($variant == 'light', $base_color, darken($base_color,6%))};
-
-/* Overridable colors */
-
-@define-color accent_color #{"" +$accent_color};
-@define-color accent_text #{"" +$accent_text};
-
-@define-color destructive_color #{"" +$accent_text};
-@define-color destructive_text #{"" +$accent_text};
-
-@define-color success_color #{"" +$success_color};
-@define-color warning_color #{"" +$warning_color};
-@define-color error_color #{"" +$error_color};
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index c801f491..34cfde7d 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -1,14 +1,14 @@
 // When color definition differs for dark and light variant
 // it gets @if ed depending on $variant
 
-$accent_color: if($variant == 'light', #3584e4, #62a0ea);
-$accent_text: #ffffff;
-$destructive_color: if($variant == 'light', #e01b24, #a51d2d);
-$destructive_text: #ffffff;
+$accent_color: gtkcolor(accent_color);
+$accent_text: gtkcolor(accent_text);
+$destructive_color: gtkcolor(destructive_color);
+$destructive_text: gtkcolor(destructive_text);
 
-$success_color: if($variant == 'light', #33d17a, darken(#33d17a, 10%));
-$warning_color: #e5a50a;
-$error_color: #e01b24;
+$success_color: gtkcolor(success_color);
+$warning_color: gtkcolor(warning_color);
+$error_color: gtkcolor(error_color);
 
 $base_color: if($variant == 'light', #ffffff, lighten(desaturate(#241f31, 100%), 2%));
 $text_color: if($variant == 'light', black, white);
@@ -18,8 +18,8 @@ $fg_color: if($variant == 'light', #2e3436, #eeeeec);
 $borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 10%));
 $alt_borders_color: if($variant == 'light', darken($bg_color, 24%), darken($bg_color, 18%));
 $borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93));
-$link_color:darken($accent_color, 10%);
-$link_visited_color: darken($accent_color, 20%);
+$link_color: gtkmix($accent_color, $text_color, 90%);
+$link_visited_color: gtkmix($accent_color, $text_color, 80%);
 $dark_fill: mix($borders_color, $bg_color, 50%);
 $headerbar_bg_color: $bg_color;
 $menu_color: $base_color;
@@ -52,7 +52,7 @@ $slider_hover_color: white;
 $scrollbar_bg_color: if($variant == 'light', mix($bg_color, $fg_color, 80%), mix($base_color, $bg_color, 
50%));
 $scrollbar_slider_color: mix($fg_color, $bg_color, 60%);
 $scrollbar_slider_hover_color: mix($fg_color, $bg_color, 80%);
-$scrollbar_slider_active_color: darken($accent_color, 10%);
+$scrollbar_slider_active_color: $accent_color;
 
 $osd_fg_color: #eeeeec;
 $osd_text_color: white;
@@ -74,7 +74,7 @@ $insensitive_bg_color: mix($bg_color, $base_color, 60%);
 $insensitive_borders_color: mix($borders_color, $bg_color, 80%);
 
 //special cased widget colors
-$focus_border_color:  transparentize($accent_color, 0.5);
+$focus_border_color:  gtkalpha($accent_color, 0.5);
 $alt_focus_border_color: if($variant == 'light', transparentize(white, 0.2), transparentize(white,0.7));
 $dim_label_opacity: 0.55;
 
@@ -83,7 +83,6 @@ $dim_label_opacity: 0.55;
 
   $fg_color: if($variant == 'light', darken($fg_color, 3%), lighten($fg_color, 2%));
   $bg_color: if($variant == 'light', lighten($bg_color, 3%), darken($bg_color, 2%));
-  $accent_color: darken($accent_color, 10%);
   $borders_color: if($variant == 'light', darken($borders_color, 30%), lighten($borders_color, 30%));
   $alt_borders_color: if($variant == 'light', darken($alt_borders_color, 33%), lighten($alt_borders_color, 
28%));
 
@@ -93,7 +92,7 @@ $dim_label_opacity: 0.55;
   $insensitive_borders_color: mix($borders_color, $bg_color, 80%);
 
   //focus rings
-  $focus_border_color: transparentize($accent_color, 0.2);
+  $focus_border_color: gtkalpha($accent_color, 0.2);
   $alt_focus_border_color: if($variant == 'light', white, transparentize(white,0.4));
 
   $dim_label_opacity: 0.9;
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index a8867d9e..bf77b901 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -43,7 +43,7 @@ selection {
   color: transparent;
 
   &:focus-within {
-    background-color: transparentize($accent_color, 0.7);
+    background-color: gtkalpha($accent_color, 0.3);
   }
 }
 
diff --git a/src/stylesheet/_defaults.scss b/src/stylesheet/_defaults.scss
new file mode 100644
index 00000000..a3b311bb
--- /dev/null
+++ b/src/stylesheet/_defaults.scss
@@ -0,0 +1,23 @@
+/* GTK NAMED COLORS
+   ----------------
+   use responsibly! */
+
+// Sass thinks we're using the colors in the variables as strings and may shoot
+// warning, it's innocuous and can be defeated by using "" + $var
+
+// These are the colors apps are can override. We define the defaults here and
+// define variables for them in _colors.scss
+
+// The main accent color and the matching text value
+@define-color accent_color if($variant == 'light', #3584e4, #62a0ea);
+@define-color accent_text #ffffff;
+
+// destructive-action buttons
+@define-color destructive_color if($variant == 'light', #e01b24, #a51d2d);
+@define-color destructive_text #ffffff;
+
+// Levelbars, entries, labels and infobars. These don't need text colors
+@define-color success_color if($variant == 'light', #33d17a, darken(#33d17a, 10%));
+@define-color warning_color #e5a50a;
+@define-color error_color #e01b24;
+
diff --git a/src/stylesheet/_functions.scss b/src/stylesheet/_functions.scss
index afc8b648..c4af658b 100644
--- a/src/stylesheet/_functions.scss
+++ b/src/stylesheet/_functions.scss
@@ -6,3 +6,11 @@
   $ratio: 1 -  $r / 100%; // match SCSS mix()
   @return unquote("mix(#{$c1},#{$c2},#{$ratio})");
 }
+
+@function gtkshade($c,$s) {
+  @return unquote("shade(#{$c},#{$s})");
+}
+
+@function gtkcolor($c) {
+  @return unquote("@#{$c}");
+}
diff --git a/src/stylesheet/meson.build b/src/stylesheet/meson.build
index 3b46657b..6ea83706 100644
--- a/src/stylesheet/meson.build
+++ b/src/stylesheet/meson.build
@@ -17,6 +17,7 @@ if not fs.exists('Adwaita-light.css')
       '_colors-public.scss',
       '_colors.scss',
       '_common.scss',
+      '_defaults.scss',
       '_drawing.scss',
       '_functions.scss',
       '_widgets.scss',
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index 6e317645..60f0e4cb 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -1,7 +1,7 @@
 // stuff for .needs-attention
 @keyframes needs_attention {
-  from { background-image: radial-gradient(farthest-side, $accent_color 0%, transparentize($accent_color, 1) 
0%); }
-  to { background-image: radial-gradient(farthest-side, $accent_color 95%, transparentize($accent_color, 
1)); }
+  from { background-image: radial-gradient(farthest-side, $accent_color 0%, transparent 0%); }
+  to { background-image: radial-gradient(farthest-side, $accent_color 95%, transparent); }
 }
 
 %button,
@@ -204,7 +204,7 @@ button {
     @each $b_type, $b_color in (suggested-action,   $accent_color),
                                (destructive-action, $destructive_color) {
       &.#{$b_type} {
-        color: if($variant == 'light', darken($b_color, 10%), lighten($b_color, 10%));
+        color: gtkmix($b_color, $text_color, 90%);
       }
     }
 
@@ -258,7 +258,7 @@ button {
   // simulates the shadow labels and icons normally have in buttons.
   animation: needs_attention 150ms ease-in;
 
-  background-image: radial-gradient(farthest-side, $accent_color 96%, transparentize($accent_color, 1));
+  background-image: radial-gradient(farthest-side, $accent_color 96%, transparent);
   background-size: 6px 6px, 6px 6px;
   background-repeat: no-repeat;
 
diff --git a/src/stylesheet/widgets/_calendar.scss b/src/stylesheet/widgets/_calendar.scss
index a9ad0a92..5c03190a 100644
--- a/src/stylesheet/widgets/_calendar.scss
+++ b/src/stylesheet/widgets/_calendar.scss
@@ -32,7 +32,7 @@ calendar {
           background-color: $accent_color;
           color: $accent_text;
 
-          &:disabled { color: mix($accent_text, $accent_color, 50%); }
+          &:disabled { color: gtkmix($accent_text, $accent_color, 50%); }
         }
       }
 
diff --git a/src/stylesheet/widgets/_entries.scss b/src/stylesheet/widgets/_entries.scss
index c5ecd198..d99faf4e 100644
--- a/src/stylesheet/widgets/_entries.scss
+++ b/src/stylesheet/widgets/_entries.scss
@@ -39,12 +39,12 @@ entry {
     @each $e_type, $e_color in (error, $error_color),
                                (warning, $warning_color) {
       &.#{$e_type} {
-        color: mix($e_color, $text_color, 70%);
+        color: gtkmix($e_color, $text_color, 70%);
 
-        @include focus-ring($focus-state: 'focus-within', $fc: transparentize($e_color, 0.5));
+        @include focus-ring($focus-state: 'focus-within', $fc: gtkalpha($e_color, 0.5));
 
         > text {
-          > selection:focus-within { background-color: transparentize($e_color, .8); }
+          > selection:focus-within { background-color: gtkalpha($e_color, .2); }
 
           > cursor-handle > contents { background-color: $e_color; }
         }
diff --git a/src/stylesheet/widgets/_header-bar.scss b/src/stylesheet/widgets/_header-bar.scss
index ba622684..de0d8c7a 100644
--- a/src/stylesheet/widgets/_header-bar.scss
+++ b/src/stylesheet/widgets/_header-bar.scss
@@ -128,11 +128,11 @@ windowtitle {
 window.devel {
   headerbar {
     $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px 
no-repeat,
-               linear-gradient(to right, transparent 65%, transparentize($accent_color, 0.8));
+               linear-gradient(to right, transparent 65%, gtkalpha($accent_color, 0.2));
 
     @if $variant == 'dark' {
       $gradient: cross-fade(10% -gtk-icontheme("system-run-symbolic"), image(transparent)) 90% 0/256px 256px 
no-repeat,
-                 linear-gradient(to right, transparent 65%, transparentize($accent_color, 0.9));
+                 linear-gradient(to right, transparent 65%, gtkalpha($accent_color, 0.1));
     }
 
     background: $headerbar_bg_color $gradient;
diff --git a/src/stylesheet/widgets/_links.scss b/src/stylesheet/widgets/_links.scss
index 6b87b5d8..756eab69 100644
--- a/src/stylesheet/widgets/_links.scss
+++ b/src/stylesheet/widgets/_links.scss
@@ -8,15 +8,14 @@ link {
   }
 
   &:hover {
-    $_fg: lighten($link_color, 10%);
-    color: $_fg;
+    color: gtkshade($link_color, 1.1);
   }
 
   &:active {
     color: $link_color;
   }
 
-  &:disabled { color: transparentize(desaturate($link_color, 100%), 0.2); }
+  &:disabled { color: gtkalpha(currentColor, 0.5); }
 }
 
 link {
diff --git a/src/stylesheet/widgets/_tab-view.scss b/src/stylesheet/widgets/_tab-view.scss
index 2732e881..616c2685 100644
--- a/src/stylesheet/widgets/_tab-view.scss
+++ b/src/stylesheet/widgets/_tab-view.scss
@@ -15,9 +15,9 @@ $tab_bg: darken($headerbar_bg_color, 6%);
 
 @mixin need-attention-gradient($dir) {
   background: linear-gradient(to #{$dir},
-                              transparentize($accent_color, .3),
-                              transparentize($accent_color, .5) 1px,
-                              transparentize($accent_color, 1) 20px);
+                              gtkalpha($accent_color, .7),
+                              gtkalpha($accent_color, .5) 1px,
+                              gtkalpha($accent_color, 0) 20px);
 }
 
 tabbar {
@@ -145,8 +145,8 @@ dnd {
       background-image:
         radial-gradient(ellipse at bottom,
                         transparentize(white, .2),
-                        transparentize($accent_color, .8) 15%,
-                        transparentize($accent_color, 1) 15%);
+                        gtkalpha($accent_color, .2) 15%,
+                        gtkalpha($accent_color, 0) 15%);
     }
 
     button.image-button {
diff --git a/src/stylesheet/widgets/_toolbars.scss b/src/stylesheet/widgets/_toolbars.scss
index b0bf4089..2fcb98c0 100644
--- a/src/stylesheet/widgets/_toolbars.scss
+++ b/src/stylesheet/widgets/_toolbars.scss
@@ -88,7 +88,7 @@ infobar {
                              (warning, $warning_color),
                              (error, $error_color) {
     &.#{$i_type} > revealer > box {
-      background-color: mix($i_color, $base_color, if($variant == 'dark', 30%, 15%));
+      background-color: gtkmix($i_color, $base_color, if($variant == 'dark', 30%, 15%));
     }
   }
 
diff --git a/src/stylesheet/widgets/_views.scss b/src/stylesheet/widgets/_views.scss
index 7993bd5d..b9db025d 100644
--- a/src/stylesheet/widgets/_views.scss
+++ b/src/stylesheet/widgets/_views.scss
@@ -49,7 +49,7 @@ iconview {
 
 rubberband {
   border: 1px solid $accent_color;
-  background-color: transparentize($accent_color, 0.8);
+  background-color: gtkalpha($accent_color, 0.2);
 }
 
 flowbox {
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]