[libadwaita/wip/exalm/background-colors: 9/9] a

[Alexander Mikhaylenko <alexm src gnome org>]

commit 1591d4ba97346644388713f1e90b8004f09f0a13
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Thu Sep 2 18:29:10 2021 +0500

    a

 src/stylesheet/_colors.scss                   | 42 +++++++++++++++++++--------
 src/stylesheet/_common.scss                   |  2 +-
 src/stylesheet/widgets/_color-chooser.scss    |  2 +-
 src/stylesheet/widgets/_lists.scss            |  6 ++--
 src/stylesheet/widgets/_shortcuts-window.scss |  4 +--
 src/stylesheet/widgets/_sidebars.scss         |  2 +-
 src/stylesheet/widgets/_views.scss            |  2 +-
 7 files changed, 39 insertions(+), 21 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index 1089e0ac..661c9315 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -18,19 +18,34 @@ $success_color: gtkcolor(success_color);
 $warning_color: gtkcolor(warning_color);
 $error_color: gtkcolor(error_color);
 
-$base_color: if($variant == 'light', $light_1, lighten(desaturate($dark_4, 100%), 2%));
-$text_color: if($variant == 'light', black, white);
-$bg_color: if($variant == 'light', $light_bg, $dark_bg);
-$fg_color: if($variant == 'light', $light_fg, $dark_fg);
+@define-color base_color             #{if($variant == 'light', #ffffff, #1e1e1e)};
+@define-color text_color             #{if($variant == 'light', #000000, #ffffff)};
+@define-color bg_color               #{if($variant == 'light', #fbfbfb, #2b2b2b)};
+@define-color fg_color               #{if($variant == 'light', #323232, #ffffff)};
+@define-color headerbar_bg_color     #{if($variant == 'light', #f0f0f0, #303030)};
+@define-color headerbar_fg_color     #{if($variant == 'light', #323232, #ffffff)};
+@define-color headerbar_border_color #{if($variant == 'light', #323232, #ffffff)};
+@define-color dark_fill_color        #{if($variant == 'light', #f0f0f0, #1e1e1e)};
+@define-color card_bg_color          #{if($variant == 'light', #ffffff, #343434)};
+@define-color card_fg_color          #{if($variant == 'light', #323232, #ffffff)};
+@define-color card_border_color      #{if($variant == 'light', gtkalpha(currentColor, .075), transparent)};
+
+$base_color: gtkcolor(base_color);
+$text_color: gtkcolor(text_color);
+$bg_color: gtkcolor(bg_color);
+$fg_color: gtkcolor(fg_color);
+$headerbar_bg_color: gtkcolor(headerbar_bg_color);
+$headerbar_fg_color: gtkcolor(headerbar_fg_color);
+$headerbar_border_color: gtkcolor(headerbar_border_color);
+$dark_fill: gtkcolor(dark_fill_color);
+$card_bg_color: gtkcolor(card_bg_color);
+$card_fg_color: gtkcolor(card_fg_color);
+$card_border_color: gtkcolor(card_border_color);
 
 $borders_color: gtkalpha(currentColor, .15);
 $thin_borders_color: gtkalpha(currentColor, .05);
 $link_color: $accent_color;
 $link_visited_color: gtkmix($accent_color, $text_color, 80%);
-$dark_fill: if($variant == 'light', darken($bg_color, 9%), darken($bg_color, 5%));
-$headerbar_bg_color: darken($bg_color, if($variant == 'dark', 5%, 10%));
-$headerbar_fg_color: $fg_color;
-$headerbar_border_color: $fg_color;
 $menu_color: $base_color;
 
 $view_hover_color: gtkalpha(currentColor, .07);
@@ -48,14 +63,14 @@ $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: $dark_fg;
 $osd_text_color: white;
 $osd_bg_color: transparentize(black, 0.3);
 
-$sidebar_bg_color: mix($bg_color, $base_color, 50%);
+$sidebar_bg_color: gtkmix($bg_color, $base_color, 50%);
 
 $tooltip_borders_color: transparentize(white, 0.9);
 $shadow_color: transparentize(black, 0.9);
@@ -70,11 +85,14 @@ $dim_label_opacity: 0.55;
 // High Contrast color overrides
 @if $contrast == 'high' {
 
-  $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%));
+  @define-color bg_color #{if($variant == 'light', lighten($light_bg, 3%), darken($dark_bg, 2%))};
+  @define-color fg_color #{if($variant == 'light', darken($light_fg, 3%), lighten($dark_fg, 2%))};
+
   $borders_color: gtkalpha(currentColor, .5);
   $thin_borders_color: gtkalpha(currentColor, .25);
 
+  @define-color card_border_color #{$borders_color};
+
   //focus rings
   $focus_border_color: gtkalpha($accent_bg_color, 0.8);
   $alt_focus_border_color: if($variant == 'light', white, transparentize(white,0.4));
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index 52d21d1a..a208d69b 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -37,7 +37,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/widgets/_color-chooser.scss b/src/stylesheet/widgets/_color-chooser.scss
index 3743e5ff..fb149fd5 100644
--- a/src/stylesheet/widgets/_color-chooser.scss
+++ b/src/stylesheet/widgets/_color-chooser.scss
@@ -58,7 +58,7 @@ colorswatch {
 
   @if $contrast == 'high' {
     > overlay {
-      box-shadow: inset 0 0 0 1px transparentize($text_color, .5);
+      box-shadow: inset 0 0 0 1px gtkalpha($text_color, .5);
     }
   }
 
diff --git a/src/stylesheet/widgets/_lists.scss b/src/stylesheet/widgets/_lists.scss
index a26c201c..389044ce 100644
--- a/src/stylesheet/widgets/_lists.scss
+++ b/src/stylesheet/widgets/_lists.scss
@@ -220,9 +220,9 @@ row.expander {
 
 list.content,
 listview.content {
-  background-color: $base_color;
-  color: $text_color;
-  border: 1px solid $borders_color;
+  background-color: $card_bg_color;
+  color: $card_fg_color;
+  border: 1px solid $card_border_color;
   border-radius: 8px;
 
   > row {
diff --git a/src/stylesheet/widgets/_shortcuts-window.scss b/src/stylesheet/widgets/_shortcuts-window.scss
index 67968c27..297c7b22 100644
--- a/src/stylesheet/widgets/_shortcuts-window.scss
+++ b/src/stylesheet/widgets/_shortcuts-window.scss
@@ -19,8 +19,8 @@ shortcut {
     padding-left: 6px;
     padding-right: 6px;
 
-    color: $fg_color;
-    background-color: $base_color;
+    color: $card_fg_color;
+    background-color: $card_bg_color;
     background-clip: padding-box;
     border: 1px solid;
     border-color: $borders_color;
diff --git a/src/stylesheet/widgets/_sidebars.scss b/src/stylesheet/widgets/_sidebars.scss
index 1774b5a8..71a274ed 100644
--- a/src/stylesheet/widgets/_sidebars.scss
+++ b/src/stylesheet/widgets/_sidebars.scss
@@ -1,5 +1,5 @@
 .sidebar {
-  background-color: mix($bg_color, $base_color, 50%);
+  background-color: $sidebar_bg_color;
   background-clip: padding-box;
 
   &:not(separator) {
diff --git a/src/stylesheet/widgets/_views.scss b/src/stylesheet/widgets/_views.scss
index 9ec943d3..cc4da03a 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) {