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

[Alexander Mikhaylenko <alexm src gnome org>]

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

    a

 src/stylesheet/_colors.scss           | 75 +++++++++++++++++++++++++----------
 src/stylesheet/_common.scss           |  2 +-
 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 +-
 6 files changed, 61 insertions(+), 31 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index 13ffd08d..418802ac 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -13,34 +13,64 @@ $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);
+@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', #fafafa, #242424)};
+@define-color fg_color               #{if($variant == 'light', transparentize(black, .2), white)};
+
+@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)};
+
+@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;
+
+@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       #{if($variant == 'light', gtkalpha(currentColor, .18), 
gtkalpha(currentColor, .18))};
+@define-color scrollbar_outline_color #{if($variant == 'light', white, transparentize(black, .5))};
+
+@define-color popover_bg_color        #{if($variant == 'light', #ffffff, #383838)};
+@define-color popover_fg_color        #{if($variant == 'light', transparentize(black, .2), white)};
+@define-color shade_color             #{if($variant == 'light', transparentize(black, .93), 
transparentize(black, .64))};
+
+@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))};
 
 $border_opacity: if($contrast == 'high', .5, .15);
 $window_outline_opacity: if($contrast == 'high', .3, .1);
 
+$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: gtkalpha(gtkcolor(headerbar_border_color), $border_opacity);
+$headerbar_backdrop_color: gtkcolor(headerbar_backdrop_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);
+$card_bg_color: gtkcolor(card_bg_color);
+$card_fg_color: gtkcolor(card_fg_color);
+$card_border_color: gtkcolor(card_border_color);
+$scrollbar_outline_color: gtkcolor(scrollbar_outline_color);
+$popover_bg_color: gtkcolor(popover_bg_color);
+$popover_fg_color: gtkcolor(popover_fg_color);
+$shade_color: gtkcolor(shade_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);
+
 $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%);
-$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 +87,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);
@@ -76,7 +106,8 @@ $dim_label_opacity: 0.55;
 // High Contrast color overrides
 @if $contrast == 'high' {
   $thin_borders_color: gtkalpha(currentColor, .25);
-  $card_border_color: $borders_color;
+
+  @define-color 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/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) {