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

[Alexander Mikhaylenko <alexm src gnome org>]

commit da9f32601c693899ed2e690336ea97194bbde169
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        | 64 ++++++++++++++++++++------------------
 src/stylesheet/_common.scss        |  2 +-
 src/stylesheet/_defaults.scss      | 31 ++++++++++++++++++
 src/stylesheet/widgets/_views.scss |  2 +-
 4 files changed, 66 insertions(+), 33 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index 923a1623..c670684d 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,36 +17,37 @@ $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);
+$shade_color: gtkcolor(shade_color);
 
-$borders_color: gtkalpha(currentColor, $border_opacity);
-$thin_borders_color: gtkalpha(currentColor, .05);
-$link_color: $accent_color;
-$link_visited_color: gtkmix($accent_color, $text_color, 80%);
-$headerbar_bg_color: if($variant == 'light', #ebebeb, #303030);
-$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));
+$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);
+$headerbar_shade_color: gtkcolor(headerbar_shade_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);
 
-$shade_color: if($variant == 'light', transparentize(black, .93), transparentize(black, .64));
-$headerbar_shade_color: $shade_color;
+$popover_bg_color: gtkcolor(popover_bg_color);
+$popover_fg_color: gtkcolor(popover_fg_color);
 
-$popover_bg_color: if($variant == 'light', #ffffff, #383838);
-$popover_fg_color: $fg_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);
 
-$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));
+// Other colors
+
+$borders_color: gtkalpha(currentColor, $border_opacity);
+$thin_borders_color: gtkalpha(currentColor, $thin_border_opacity);
+$link_color: $accent_color;
+$link_visited_color: gtkmix($accent_color, $text_color, 80%);
 
 $view_hover_color: gtkalpha(currentColor, .07);
 $view_active_color: gtkalpha(currentColor, .16);
@@ -59,7 +64,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);
@@ -77,9 +82,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..26469dbd 100644
--- a/src/stylesheet/_defaults.scss
+++ b/src/stylesheet/_defaults.scss
@@ -22,3 +22,34 @@
 @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)};
+@define-color shade_color #{if($variant == 'light', transparentize(black, .93), transparentize(black, .64))};
+
+// Header bar, search bar, tab bar
+@define-color headerbar_bg_color #{if($variant == 'light', #ebebeb, #303030)};
+@define-color headerbar_fg_color #{if($variant == 'light', transparentize(black, .2), white)};
+@define-color headerbar_border_color #{if($variant == 'light', transparentize(black, .2), white)};
+@define-color headerbar_backdrop_color @bg_color;
+@define-color headerbar_shade_color #{if($variant == 'light', transparentize(black, .93), 
transparentize(black, .64))};
+
+// 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 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/_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) {