[libadwaita/wip/exalm/accent: 12/17] stylesheet: Consistently use gtkalpha()

[Alexander Mikhaylenko <alexm src gnome org>]

commit de9d72819e7a2c5bd371af7e4e0826e57d3d176a
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Sat Jun 12 01:00:14 2021 +0500

    stylesheet: Consistently use gtkalpha()
    
    Move it to a separate file so we can use it in _colors.scss as well,
    since we have lots of currentColor mentions now.

 src/stylesheet/Adwaita-dark.scss      |  1 +
 src/stylesheet/Adwaita-hc-dark.scss   |  1 +
 src/stylesheet/Adwaita-hc.scss        |  1 +
 src/stylesheet/Adwaita-light.scss     |  1 +
 src/stylesheet/_colors.scss           | 32 ++++++++++++++++----------------
 src/stylesheet/_common.scss           |  4 ----
 src/stylesheet/_functions.scss        |  3 +++
 src/stylesheet/meson.build            |  1 +
 src/stylesheet/widgets/_buttons.scss  |  4 ++--
 src/stylesheet/widgets/_menus.scss    |  2 +-
 src/stylesheet/widgets/_toolbars.scss |  6 +++---
 11 files changed, 30 insertions(+), 26 deletions(-)
---
diff --git a/src/stylesheet/Adwaita-dark.scss b/src/stylesheet/Adwaita-dark.scss
index 92078025..e209e50b 100644
--- a/src/stylesheet/Adwaita-dark.scss
+++ b/src/stylesheet/Adwaita-dark.scss
@@ -1,6 +1,7 @@
 $variant: 'dark';
 $contrast: 'normal';
 
+@import 'functions';
 @import 'colors';
 @import 'drawing';
 @import 'common';
diff --git a/src/stylesheet/Adwaita-hc-dark.scss b/src/stylesheet/Adwaita-hc-dark.scss
index 3a7bbeaa..b41008a8 100644
--- a/src/stylesheet/Adwaita-hc-dark.scss
+++ b/src/stylesheet/Adwaita-hc-dark.scss
@@ -1,6 +1,7 @@
 $variant: 'dark';
 $contrast: 'high';
 
+@import 'functions';
 @import 'colors';
 @import 'colors-public';
 @import 'drawing';
diff --git a/src/stylesheet/Adwaita-hc.scss b/src/stylesheet/Adwaita-hc.scss
index 85293a94..41d7ec8b 100644
--- a/src/stylesheet/Adwaita-hc.scss
+++ b/src/stylesheet/Adwaita-hc.scss
@@ -1,6 +1,7 @@
 $variant: 'light';
 $contrast: 'high';
 
+@import 'functions';
 @import 'colors';
 @import 'colors-public';
 @import 'drawing';
diff --git a/src/stylesheet/Adwaita-light.scss b/src/stylesheet/Adwaita-light.scss
index d11373be..22286980 100644
--- a/src/stylesheet/Adwaita-light.scss
+++ b/src/stylesheet/Adwaita-light.scss
@@ -7,6 +7,7 @@
 $variant: 'light';
 $contrast: 'normal';
 
+@import 'functions';
 @import 'colors';
 @import 'drawing';
 @import 'common';
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index e0b9796e..10fd4578 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -24,22 +24,22 @@ $dark_fill: mix($borders_color, $bg_color, 50%);
 $headerbar_bg_color: $bg_color;
 $menu_color: $base_color;
 
-$view_hover_color: #{"alpha(currentColor, .07)"};
-$view_active_color: #{"alpha(currentColor, .16)"};
-$view_selected_color: #{"alpha(currentColor, .1)"};
-$view_selected_hover_color: #{"alpha(currentColor, .13)"};
-$view_selected_active_color: #{"alpha(currentColor, .19)"};
-
-$trough_color: #{"alpha(currentColor, .15)"};
-$trough_hover_color: #{"alpha(currentColor, .2)"};
-$trough_active_color: #{"alpha(currentColor, .25)"};
-
-$button_color: #{"alpha(currentColor, .1)"};
-$button_hover_color: #{"alpha(currentColor, .15)"};
-$button_active_color: #{"alpha(currentColor, .25)"};
-$button_checked_color: #{"alpha(currentColor, .2)"};
-$button_checked_hover_color: #{"alpha(currentColor, .25)"};
-$button_checked_active_color: #{"alpha(currentColor, .35)"};
+$view_hover_color: gtkalpha(currentColor, .07);
+$view_active_color: gtkalpha(currentColor, .16);
+$view_selected_color: gtkalpha(currentColor, .1);
+$view_selected_hover_color: gtkalpha(currentColor, .13);
+$view_selected_active_color: gtkalpha(currentColor, .19);
+
+$trough_color: gtkalpha(currentColor, .15);
+$trough_hover_color: gtkalpha(currentColor, .2);
+$trough_active_color: gtkalpha(currentColor, .25);
+
+$button_color: gtkalpha(currentColor, .1);
+$button_hover_color: gtkalpha(currentColor, .15);
+$button_active_color: gtkalpha(currentColor, .25);
+$button_checked_color: gtkalpha(currentColor, .2);
+$button_checked_hover_color: gtkalpha(currentColor, .25);
+$button_checked_active_color: gtkalpha(currentColor, .35);
 
 $fill_color: $accent_color;
 $fill_text_color: $accent_text;
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index a88853bf..a8867d9e 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -1,7 +1,3 @@
-@function gtkalpha($c,$a) {
-  @return unquote("alpha(#{$c},#{$a})");
-}
-
 $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 $backdrop_transition: 200ms ease-out;
 $button_transition: all 200ms $ease-out-quad;
diff --git a/src/stylesheet/_functions.scss b/src/stylesheet/_functions.scss
new file mode 100644
index 00000000..5ac80e3b
--- /dev/null
+++ b/src/stylesheet/_functions.scss
@@ -0,0 +1,3 @@
+@function gtkalpha($c,$a) {
+  @return unquote("alpha(#{$c},#{$a})");
+}
diff --git a/src/stylesheet/meson.build b/src/stylesheet/meson.build
index 7accf415..3b46657b 100644
--- a/src/stylesheet/meson.build
+++ b/src/stylesheet/meson.build
@@ -18,6 +18,7 @@ if not fs.exists('Adwaita-light.css')
       '_colors.scss',
       '_common.scss',
       '_drawing.scss',
+      '_functions.scss',
       '_widgets.scss',
 
       'widgets/_avatar.scss',
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index 04814d7a..6e317645 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -139,7 +139,7 @@ button {
       transition: $button_transition;
 
       &:hover {
-        background-image: image(#{"alpha(currentColor, .1)"});
+        background-image: image(gtkalpha(currentColor, .1));
       }
 
       &.keyboard-activating,
@@ -310,7 +310,7 @@ button.outline {
     box-shadow: inset 0 0 0 1px $borders_color;
   }
   @else {
-    box-shadow: inset 0 0 0 1px #{"alpha(currentColor, .15)"};
+    box-shadow: inset 0 0 0 1px gtkalpha(currentColor, .15);
 
     &:hover, &:active, &:checked {
       box-shadow: none;
diff --git a/src/stylesheet/widgets/_menus.scss b/src/stylesheet/widgets/_menus.scss
index 289cec3f..3f7c579b 100644
--- a/src/stylesheet/widgets/_menus.scss
+++ b/src/stylesheet/widgets/_menus.scss
@@ -73,7 +73,7 @@ popover.menu {
   //only menu radios have a border
   radio {
     padding: 0;
-    border: 1.2px solid #{"alpha(currentColor, #{if($contrast == "high", 1, 0.3)})"};
+    border: 1.2px solid gtkalpha(currentColor, if($contrast == "high", 1, 0.3));
   }
 
   check,
diff --git a/src/stylesheet/widgets/_toolbars.scss b/src/stylesheet/widgets/_toolbars.scss
index bd940458..b0bf4089 100644
--- a/src/stylesheet/widgets/_toolbars.scss
+++ b/src/stylesheet/widgets/_toolbars.scss
@@ -72,15 +72,15 @@ infobar {
   > revealer > box {
     padding: 8px;
     border-spacing: 12px;
-    box-shadow: inset 0 -1px #{"alpha(currentColor, .1)"};
+    box-shadow: inset 0 -1px gtkalpha(currentColor, .1);
   }
 
   &.action:hover > revealer > box {
-    background-image: image(#{"alpha(currentColor, .05)"});
+    background-image: image(gtkalpha(currentColor, .05));
   }
 
   &.action:hover:active > revealer > box {
-    background-image: image(#{"alpha(currentColor, .1)"});
+    background-image: image(gtkalpha(currentColor, .1));
   }
 
   @each $i_type, $i_color in (info, $accent_color),