[libadwaita/wip/exalm/background-colors: 19/19] tmp

[Alexander Mikhaylenko <alexm src gnome org>]

commit 3551a3a4a11c2b59613d88aedfaf96dee114d806
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Wed Sep 1 17:11:25 2021 +0500

    tmp

 src/stylesheet/_colors.scss                | 33 ++++++++++++++++++++----------
 src/stylesheet/_common.scss                |  2 +-
 src/stylesheet/widgets/_color-chooser.scss |  2 +-
 src/stylesheet/widgets/_lists.scss         |  4 ++--
 src/stylesheet/widgets/_notebook.scss      |  6 +++---
 src/stylesheet/widgets/_sidebars.scss      |  2 +-
 src/stylesheet/widgets/_tab-view.scss      | 11 +++++-----
 src/stylesheet/widgets/_trees.scss         |  9 ++++----
 src/stylesheet/widgets/_views.scss         |  2 +-
 9 files changed, 41 insertions(+), 30 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index f8bcdc99..9808bd1b 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -18,18 +18,28 @@ $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', $light_1, lighten(desaturate($dark_4, 100%), 2%))};
+@define-color text_color #{if($variant == 'light', black, white)};
+@define-color bg_color #{if($variant == 'light', $light_bg, $dark_bg)};
+@define-color fg_color #{if($variant == 'light', $light_fg, $dark_fg)};
+@define-color headerbar_bg_color #{if($variant == 'light', darken($light_bg, 10%), darken($dark_bg, 5%))};
+@define-color headerbar_fg_color #{if($variant == 'light', $light_fg, $dark_fg)};
+@define-color headerbar_border_color #{if($variant == 'light', $light_fg, $dark_fg)};
+@define-color dark_fill_color #{if($variant == 'light', darken($light_bg, 9%), darken($dark_bg, 5%))};
+
+$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);
 
 $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_border_color: $fg_color;
 $menu_color: $base_color;
 
 $view_hover_color: gtkalpha(currentColor, .07);
@@ -47,14 +57,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);
@@ -69,8 +79,9 @@ $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);
 
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 d5fdc7a7..1ed0f757 100644
--- a/src/stylesheet/widgets/_lists.scss
+++ b/src/stylesheet/widgets/_lists.scss
@@ -150,7 +150,7 @@ row.expander {
   padding: 0px;
 
   list.nested > row {
-    background-color: transparentize($bg_color, 0.5);
+    background-color: gtkmix($bg_color, $base_color, 50%);
     border-color: $borders_color;
     border-style: solid;
     border-width: 1px 0px 0px 0px;
@@ -247,7 +247,7 @@ listview.content {
 
         // Nested rows background
         list.nested > row:not(:selected) {
-          $_nested_row_bg: mix($bg_color, $base_color, 50%);
+          $_nested_row_bg: gtkmix($bg_color, $base_color, 50%);
           background-color: $_nested_row_bg;
 
           &.activatable {
diff --git a/src/stylesheet/widgets/_notebook.scss b/src/stylesheet/widgets/_notebook.scss
index db476d28..f6dbed99 100644
--- a/src/stylesheet/widgets/_notebook.scss
+++ b/src/stylesheet/widgets/_notebook.scss
@@ -131,7 +131,7 @@ notebook {
       background-clip: padding-box; //
 
       &:hover {
-        background-color: transparentize($bg_color, 0.8);
+        background-color: gtkalpha($bg_color, 2.8);
 
         &.reorderable-page {
           border-color: $thin_borders_color;
@@ -145,9 +145,9 @@ notebook {
       &:checked {
         &.reorderable-page {
           border-color: $thin_borders_color;
-          background-color: transparentize($bg_color, 0.5);
+          background-color: gtkalpha($bg_color, 0.5);
 
-          &:hover { background-color: transparentize($bg_color, 0.3); }
+          &:hover { background-color: gtkalpha($bg_color, 0.73); }
         }
       }
 
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/_tab-view.scss b/src/stylesheet/widgets/_tab-view.scss
index 5d0887bf..e8c03590 100644
--- a/src/stylesheet/widgets/_tab-view.scss
+++ b/src/stylesheet/widgets/_tab-view.scss
@@ -24,7 +24,8 @@ $tab_border: gtkmix($headerbar_border_color, $headerbar_bg_color, 100% * $header
 tabbar {
   .box {
     min-height: 38px;
-    background: darken($tab_bg, 3%);
+    background: gtkshade($tab_bg, .97);
+    color: $headerbar_fg_color;
     border-bottom: 1px solid $tab_border;
   }
 
@@ -82,15 +83,15 @@ tabbar {
     @include focus-ring();
 
     &:checked {
-      background-color: lighten($tab_bg, 6%);
+      background-color: gtkshade($tab_bg, 1.06);
 
       &:hover {
-        background-color: lighten($tab_bg, 9%);
+        background-color: gtkshade($tab_bg, 1.09);
       }
     }
 
     &:hover {
-      background-color: lighten($tab_bg, 3%);
+      background-color: gtkshade($tab_bg, 1.03);
     }
   }
 
@@ -120,7 +121,7 @@ tabbar {
 
 dnd tab {
   min-height: 26px;
-  background-color: lighten($tab_bg, 9%);
+  background-color: gtkshade($tab_bg, 1.09);
 
   $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize(black, 0.25));
 
diff --git a/src/stylesheet/widgets/_trees.scss b/src/stylesheet/widgets/_trees.scss
index 0edfc9fd..f98091d0 100644
--- a/src/stylesheet/widgets/_trees.scss
+++ b/src/stylesheet/widgets/_trees.scss
@@ -1,7 +1,6 @@
 // To be used for opaque elements overlaid atop the selected row
-$treeview_selection_default: transparentize($text_color, .9);
-$treeview_selection_opaque: mix(opacify($treeview_selection_default, 1), $base_color, 100% * 
alpha($treeview_selection_default));
-$treeview_borders_opaque: mix($text_color, $base_color, if($contrast == 'high', 40%, 20%));
+$treeview_selection_opaque: gtkmix($text_color, $base_color, 10%);
+$treeview_borders_opaque: gtkmix($text_color, $base_color, if($contrast == 'high', 40%, 20%));
 
 treeview.view {
   border-left-color: $treeview_borders_opaque; // this is actually the tree lines color,
@@ -45,7 +44,7 @@ treeview.view {
 
     &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
 
-    color: transparentize($text_color, .3);
+    color: gtkalpha($text_color, .7);
 
     &:hover { color: $text_color; }
 
@@ -66,7 +65,7 @@ treeview.view {
   }
 
   &.trough { // progress bar trough in treeviews
-    background-color: transparentize($fg_color,0.9);
+    background-color: gtkalpha($fg_color, 0.1);
   }
 
   > header {
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) {