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

[Alexander Mikhaylenko <alexm src gnome org>]

commit 5e9d213ca3c663000ec0f9f7e26ced680a4fa331
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   | 61 ++++++++++++++++++++++---------------------
 src/stylesheet/_defaults.scss | 31 ++++++++++++++++++++++
 2 files changed, 62 insertions(+), 30 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index 5d6a5d40..6226ee50 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,37 +17,37 @@ $success_color: gtkcolor(success_color);
 $warning_color: gtkcolor(warning_color);
 $error_color: gtkcolor(error_color);
 
-$window_bg_color: if($variant == 'light', #fafafa, #242424);
-$window_fg_color: if($variant == 'light', transparentize(black, .2), white);
+$window_bg_color: gtkcolor(window_bg_color);
+$window_fg_color: gtkcolor(window_fg_color);
 
-$view_bg_color: if($variant == 'light', white, #1e1e1e);
-$view_fg_color: if($variant == 'light', black, white);
+$view_bg_color: gtkcolor(view_bg_color);
+$view_fg_color: gtkcolor(view_fg_color);
 
-$border_opacity: if($contrast == 'high', .5, .15);
-$window_outline_opacity: if($contrast == 'high', .3, .1);
+$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);
 
-$border_color: gtkalpha(currentColor, $border_opacity);
-$thin_border_color: gtkalpha(currentColor, .05);
-$link_color: $accent_color;
-$link_visited_color: gtkmix($accent_color, $view_fg_color, 80%);
-$headerbar_bg_color: if($variant == 'light', #ebebeb, #303030);
-$headerbar_fg_color: $window_fg_color;
-$headerbar_border_color: gtkalpha($window_fg_color, $border_opacity);
-$headerbar_backdrop_color: $window_bg_color;
-$card_bg_color: if($variant == 'light', #ffffff, transparentize(white, .945));
-$card_fg_color: $window_fg_color;
-$card_border_color: if($variant == 'light', gtkalpha(currentColor, .18), gtkalpha(currentColor, .18));
-$scrollbar_outline_color: if($variant == 'light', white, transparentize(black, .5));
+$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: if($variant == 'light', transparentize(black, .93), transparentize(black, .64));
-$headerbar_shade_color: $shade_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);
 
-$popover_bg_color: if($variant == 'light', #ffffff, #383838);
-$popover_fg_color: $window_fg_color;
+// Other colors
 
-$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));
+$border_color: gtkalpha(currentColor, $border_opacity);
+$thin_border_color: gtkalpha(currentColor, $thin_border_opacity);
+$link_color: $accent_color;
+$link_visited_color: gtkmix($accent_color, $view_fg_color, 80%);
 
 $view_hover_color: gtkalpha(currentColor, .07);
 $view_active_color: gtkalpha(currentColor, .16);
@@ -78,9 +82,6 @@ $dim_label_opacity: 0.55;
 
 // High Contrast color overrides
 @if $contrast == 'high' {
-  $thin_border_color: gtkalpha(currentColor, .25);
-  $card_border_color: $border_color;
-
   //focus rings
   $focus_border_color: gtkalpha($accent_bg_color, 0.8);
 
diff --git a/src/stylesheet/_defaults.scss b/src/stylesheet/_defaults.scss
index c49f253e..ea7af856 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};
+
+// Window
+@define-color window_bg_color #{if($variant == 'light', #fafafa, #242424)};
+@define-color window_fg_color #{if($variant == 'light', transparentize(black, .2), white)};
+
+// Views - e.g. text view or tree view
+@define-color view_bg_color #{if($variant == 'light', #ffffff, #1e1e1e)};
+@define-color view_fg_color #{if($variant == 'light', #000000, #ffffff)};
+
+// 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 @window_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 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))};