[libadwaita/wip/exalm/background-colors] stylesheet: Make everything recolorable

[Alexander Mikhaylenko <alexm src gnome org>]

commit 5044d169e1acc2203d5f4cc4992e172d69308b7f
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Fri Oct 1 16:19:44 2021 +0500

    stylesheet: Make everything recolorable
    
    Now that everything has been cleaned up, extract all of the colors like
    window background into _defaults.scss and make them public.
    
    These colors express all the difference between light and dark variants.
    With these colors being public, apps can create their own variants, such as
    sepia or solarized, by overriding all of those variables.

 src/stylesheet/_colors.scss           | 65 +++++++++++++++++++----------------
 src/stylesheet/_common.scss           |  2 +-
 src/stylesheet/_defaults.scss         | 35 +++++++++++++++++++
 src/stylesheet/widgets/_notebook.scss |  6 ++--
 src/stylesheet/widgets/_tab-view.scss |  2 --
 src/stylesheet/widgets/_toolbars.scss |  5 +--
 src/stylesheet/widgets/_views.scss    |  2 +-
 7 files changed, 79 insertions(+), 38 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index 13ffd08d..9b4107f0 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -1,5 +1,9 @@
-// When color definition differs for dark and light variant
-// it gets @if ed depending on $variant
+$border_opacity: if($contrast == 'high', .5, .15);
+$thin_border_opacity: if($contrast == 'high', .25, .05);
+$card_border_opacity: if($contrast == 'high', .5, .18);
+$window_outline_opacity: if($contrast == 'high', .3, .1);
+
+// Colors from _defaults.scss
 
 $accent_bg_color: gtkcolor(accent_bg_color);
 $accent_fg_color: gtkcolor(accent_fg_color);
@@ -13,34 +17,40 @@ $success_color: gtkcolor(success_color);
 $warning_color: gtkcolor(warning_color);
 $error_color: gtkcolor(error_color);
 
-$base_color: if($variant == 'light', white, #1e1e1e);
-$text_color: if($variant == 'light', black, white);
-$bg_color: if($variant == 'light', #fafafa, #242424);
-$fg_color: if($variant == 'light', transparentize(black, .2), white);
+$base_color: gtkcolor(base_color);
+$text_color: gtkcolor(text_color);
 
-$border_opacity: if($contrast == 'high', .5, .15);
-$window_outline_opacity: if($contrast == 'high', .3, .1);
+$bg_color: gtkcolor(bg_color);
+$fg_color: gtkcolor(fg_color);
+
+$dark_fill_bg_color: gtkcolor(dark_fill_bg_color);
+$dark_fill_fg_color: gtkcolor(dark_fill_fg_color);
+$dark_fill_border_color: gtkalpha(gtkcolor(dark_fill_border_color), $border_opacity);
+
+$headerbar_bg_color: gtkcolor(headerbar_bg_color);
+$headerbar_fg_color: gtkcolor(headerbar_fg_color);
+$headerbar_border_color: gtkalpha(gtkcolor(headerbar_border_color), $border_opacity);
+$headerbar_backdrop_color: gtkcolor(headerbar_backdrop_color);
+
+$card_bg_color: gtkcolor(card_bg_color);
+$card_fg_color: gtkcolor(card_fg_color);
+$card_border_color: gtkalpha(gtkcolor(card_border_color), $card_border_opacity);
+
+$popover_bg_color: gtkcolor(popover_bg_color);
+$popover_fg_color: gtkcolor(popover_fg_color);
+
+$shade_color: gtkcolor(shade_color);
+$scrollbar_outline_color: gtkcolor(scrollbar_outline_color);
+$window_outline_color: gtkalpha(gtkcolor(window_outline_color), $window_outline_opacity);
+$window_border_color: gtkcolor(window_border_color);
+$window_border_backdrop_color: gtkcolor(window_border_backdrop_color);
+
+// Other colors
 
 $borders_color: gtkalpha(currentColor, $border_opacity);
-$thin_borders_color: gtkalpha(currentColor, .05);
+$thin_borders_color: gtkalpha(currentColor, $thin_border_opacity);
 $link_color: $accent_color;
 $link_visited_color: gtkmix($accent_color, $text_color, 80%);
-$dark_fill: if($variant == 'light', #ebebeb, #303030);
-$headerbar_bg_color: $dark_fill;
-$headerbar_fg_color: $fg_color;
-$headerbar_border_color: gtkalpha($fg_color, $border_opacity);
-$headerbar_backdrop_color: $bg_color;
-$card_bg_color: if($variant == 'light', #ffffff, transparentize(white, .945));
-$card_fg_color: $fg_color;
-$card_border_color: if($variant == 'light', gtkalpha(currentColor, .18), gtkalpha(currentColor, .18));
-$scrollbar_outline_color: if($variant == 'light', white, transparentize(black, .5));
-
-$popover_bg_color: if($variant == 'light', #ffffff, #383838);
-$popover_fg_color: $fg_color;
-
-$window_outline_color: gtkalpha(if($variant == 'light', transparent, white), $window_outline_opacity);
-$window_border_color: if($variant == 'light', transparentize(black, 0.77), transparentize(black, 0.25));
-$window_border_backdrop_color: if($variant == 'light', transparentize(black, 0.82), transparentize(black, 
0.25));
 
 $view_hover_color: gtkalpha(currentColor, .07);
 $view_active_color: gtkalpha(currentColor, .16);
@@ -57,7 +67,7 @@ $fill_text_color: $accent_fg_color;
 $fill_hover_color: gtkmix($accent_bg_color, currentColor, 90%);
 $fill_active_color: gtkmix($accent_bg_color, black, 80%);
 
-$slider_color: mix(white, $base_color, 80%);
+$slider_color: gtkmix(white, $base_color, 80%);
 $slider_hover_color: white;
 
 $osd_fg_color: transparentize(white, .1);
@@ -75,9 +85,6 @@ $dim_label_opacity: 0.55;
 
 // High Contrast color overrides
 @if $contrast == 'high' {
-  $thin_borders_color: gtkalpha(currentColor, .25);
-  $card_border_color: $borders_color;
-
   //focus rings
   $focus_border_color: gtkalpha($accent_bg_color, 0.8);
 
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index ae193d46..6ff4f965 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -38,7 +38,7 @@ dnd {
 /* Text selection */
 
 selection {
-  background-color: transparentize($text_color, 0.9);
+  background-color: gtkalpha($text_color, 0.1);
   color: transparent;
 
   &:focus-within {
diff --git a/src/stylesheet/_defaults.scss b/src/stylesheet/_defaults.scss
index c49f253e..98fbfe46 100644
--- a/src/stylesheet/_defaults.scss
+++ b/src/stylesheet/_defaults.scss
@@ -22,3 +22,38 @@
 @define-color success_color #{$green_3};
 @define-color warning_color #{$yellow_5};
 @define-color error_color #{$red_3};
+
+// Content areas, e.g. text views
+@define-color base_color #{if($variant == 'light', #ffffff, #1e1e1e)};
+@define-color text_color #{if($variant == 'light', #000000, #ffffff)};
+
+// Main window background
+@define-color bg_color #{if($variant == 'light', #fafafa, #242424)};
+@define-color fg_color #{if($variant == 'light', transparentize(black, .2), white)};
+
+// Header bar, search bar, tab bar, notebook header
+@define-color dark_fill_bg_color #{if($variant == 'light', #ebebeb, #303030)};
+@define-color dark_fill_fg_color #{if($variant == 'light', transparentize(black, .2), white)};
+@define-color dark_fill_border_color #{if($variant == 'light', transparentize(black, .2), white)};
+
+// Separately define header bar color for overrides
+@define-color headerbar_bg_color @dark_fill_bg_color;
+@define-color headerbar_fg_color @dark_fill_fg_color;
+@define-color headerbar_border_color @dark_fill_border_color;
+@define-color headerbar_backdrop_color @bg_color;
+
+// Cards, boxed lists
+@define-color card_bg_color #{if($variant == 'light', #ffffff, transparentize(white, .945))};
+@define-color card_fg_color #{if($variant == 'light', transparentize(black, .2), white)};
+@define-color card_border_color #{currentColor};
+
+// Popovers
+@define-color popover_bg_color #{if($variant == 'light', #ffffff, #383838)};
+@define-color popover_fg_color #{if($variant == 'light', transparentize(black, .2), white)};
+
+// Miscellaneous
+@define-color shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .64))};
+@define-color scrollbar_outline_color #{if($variant == 'light', white, transparentize(black, .5))};
+@define-color window_outline_color #{if($variant == 'light', transparent, white)};
+@define-color window_border_color #{if($variant == 'light', transparentize(black, 0.77), 
transparentize(black, 0.25))};
+@define-color window_border_backdrop_color #{if($variant == 'light', transparentize(black, 0.82), 
transparentize(black, 0.25))};
diff --git a/src/stylesheet/widgets/_notebook.scss b/src/stylesheet/widgets/_notebook.scss
index 723d4368..512cfb4e 100644
--- a/src/stylesheet/widgets/_notebook.scss
+++ b/src/stylesheet/widgets/_notebook.scss
@@ -3,11 +3,11 @@ notebook {
 
   > header {
     padding: 1px;
-    border-color: $borders_color;
+    border-color: $dark_fill_border_color;
     border-width: 1px;
-    background-color: $dark_fill;
+    background-color: $dark_fill_bg_color;
     background-clip: padding-box;
-    color: $fg_color;
+    color: $dark_fill_fg_color;
 
     > tabs { margin: -1px; }
 
diff --git a/src/stylesheet/widgets/_tab-view.scss b/src/stylesheet/widgets/_tab-view.scss
index eca92cb6..68b1585f 100644
--- a/src/stylesheet/widgets/_tab-view.scss
+++ b/src/stylesheet/widgets/_tab-view.scss
@@ -1,5 +1,3 @@
-$shade_color: if($variant == 'light', transparentize(black, .93), transparentize(black, .64));
-
 $tab_needs_attention_gradient: radial-gradient(ellipse at bottom,
                                                transparentize(white, .2),
                                                gtkalpha($accent_bg_color, .2) 15%,
diff --git a/src/stylesheet/widgets/_toolbars.scss b/src/stylesheet/widgets/_toolbars.scss
index 083e2cce..bd01a923 100644
--- a/src/stylesheet/widgets/_toolbars.scss
+++ b/src/stylesheet/widgets/_toolbars.scss
@@ -133,8 +133,9 @@ searchbar > revealer > box {
   border-spacing: 6px;
   @extend %toolbar;
 
-  background-color: $dark_fill;
-  box-shadow: inset 0 -1px $borders_color;
+  background-color: $dark_fill_bg_color;
+  color: $dark_fill_fg_color;
+  box-shadow: inset 0 -1px $dark_fill_border_color;
 
  .close {
     min-width: 18px;
diff --git a/src/stylesheet/widgets/_views.scss b/src/stylesheet/widgets/_views.scss
index 0f241248..9c2a7a54 100644
--- a/src/stylesheet/widgets/_views.scss
+++ b/src/stylesheet/widgets/_views.scss
@@ -25,7 +25,7 @@ textview {
   }
 
   > border {
-    background-color: mix($bg_color, $base_color, 50%);
+    background-color: gtkmix($bg_color, $base_color, 50%);
   }
 
   &:drop(active) {