[libadwaita/wip/exalm/accent: 14/16] stylesheet: Use a more contrasty accent for foreground

[Alexander Mikhaylenko <alexm src gnome org>]

commit aac3ac4aa864534257f023f2c579032dae71b72e
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Mon Jun 14 17:20:18 2021 +0500

    stylesheet: Use a more contrasty accent for foreground
    
    Use lighter color in dark variant and darker color in light variant. Since
    this was the main reason to lighten accent for dark, use the same color as
    in light variant now, this makes it simpler and widgets like suggested
    action buttons don't look too bright now.
    
    We still need a way to easily make labels accent-colored using the correct
    color though as it was a prominent use case for this. It will be added in
    the next commit.

 src/stylesheet/_colors.scss           |  7 +++-
 src/stylesheet/_defaults.scss         |  4 +-
 src/stylesheet/widgets/_buttons.scss  | 69 ++++++++++++++++++++---------------
 src/stylesheet/widgets/_entries.scss  |  2 +-
 src/stylesheet/widgets/_lists.scss    |  2 +-
 src/stylesheet/widgets/_sidebars.scss |  2 +-
 6 files changed, 50 insertions(+), 36 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index 34cfde7d..74414c0d 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -15,11 +15,14 @@ $text_color: if($variant == 'light', black, white);
 $bg_color: if($variant == 'light', #f6f5f4, darken(desaturate(#3d3846, 100%), 4%));
 $fg_color: if($variant == 'light', #2e3436, #eeeeec);
 
+$accent_standalone_color: gtkmix($accent_color, $text_color, if($variant == 'dark', 50%, 75%));
+$destructive_standalone_color: gtkmix($destructive_color, $text_color, if($variant == 'dark', 50%, 75%));
+
 $borders_color: if($variant == 'light', darken($bg_color, 18%), darken($bg_color, 10%));
 $alt_borders_color: if($variant == 'light', darken($bg_color, 24%), darken($bg_color, 18%));
 $borders_edge: if($variant == 'light', transparentize(white, 0.2), transparentize($fg_color, 0.93));
-$link_color: gtkmix($accent_color, $text_color, 90%);
-$link_visited_color: gtkmix($accent_color, $text_color, 80%);
+$link_color: $accent_standalone_color;
+$link_visited_color: gtkmix($accent_standalone_color, $text_color, 80%);
 $dark_fill: mix($borders_color, $bg_color, 50%);
 $headerbar_bg_color: $bg_color;
 $menu_color: $base_color;
diff --git a/src/stylesheet/_defaults.scss b/src/stylesheet/_defaults.scss
index a43e554c..a441a457 100644
--- a/src/stylesheet/_defaults.scss
+++ b/src/stylesheet/_defaults.scss
@@ -9,11 +9,11 @@
 // define variables for them in _colors.scss
 
 // The main accent color and the matching text value
-@define-color accent_color #{"" + if($variant == 'light', #3584e4, #62a0ea)};
+@define-color accent_color #3584e4;
 @define-color accent_text #ffffff;
 
 // destructive-action buttons
-@define-color destructive_color #{"" + if($variant == 'light', #e01b24, #a51d2d)};
+@define-color destructive_color #e01b24;
 @define-color destructive_text #ffffff;
 
 // Levelbars, entries, labels and infobars. These don't need text colors
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index 60f0e4cb..5217dadb 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -123,42 +123,52 @@ button {
     }
   }
 
-  // Suggested and Destructive Action buttons
-  @each $b_type, $b_color, $b_text in (suggested-action,   $accent_color,      $accent_text),
-                                      (destructive-action, $destructive_color, $destructive_text) {
-    &.#{$b_type} {
-      color: $b_text;
-
-      &, &:checked {
-        background-color: $b_color;
-      }
+  @at-root %filled_button {
+    box-shadow: none;
 
-      box-shadow: none;
+    @include focus-ring($outer: true, $offset: 1px);
+    transition: $button_transition;
 
-      @include focus-ring($outer: true, $offset: 1px);
-      transition: $button_transition;
+    &:hover {
+      background-image: image(gtkalpha(currentColor, .1));
+    }
+
+    &.keyboard-activating,
+    &:active {
+      background-image: image(transparentize(black, .8));
+    }
+
+    &:checked {
+      background-image: image(transparentize(black, .85));
 
       &:hover {
-        background-image: image(gtkalpha(currentColor, .1));
+        background-image: image(transparentize(black, .95));
       }
 
       &.keyboard-activating,
       &:active {
-        background-image: image(transparentize(black, .8));
+        background-image: image(transparentize(black, .7));
       }
+    }
+  }
 
-      &:checked {
-        background-image: image(transparentize(black, .85));
+  &.destructive-action {
+    @extend %filled_button;
 
-        &:hover {
-          background-image: image(transparentize(black, .95));
-        }
+    color: $destructive_text;
 
-        &.keyboard-activating,
-        &:active {
-          background-image: image(transparentize(black, .7));
-        }
-      }
+    &, &:checked {
+      background-color: $destructive_color;
+    }
+  }
+
+  &.suggested-action {
+    @extend %filled_button;
+
+    color: $accent_text;
+
+    &, &:checked {
+      background-color: $accent_color;
     }
   }
 
@@ -201,11 +211,12 @@ button {
       }
     }
 
-    @each $b_type, $b_color in (suggested-action,   $accent_color),
-                               (destructive-action, $destructive_color) {
-      &.#{$b_type} {
-        color: gtkmix($b_color, $text_color, 90%);
-      }
+    &.suggested-action {
+      color: $accent_standalone_color;
+    }
+
+    &.destructive-action {
+      color: $destructive_standalone_color;
     }
 
     // Specificity bump
diff --git a/src/stylesheet/widgets/_entries.scss b/src/stylesheet/widgets/_entries.scss
index d99faf4e..554bfbdc 100644
--- a/src/stylesheet/widgets/_entries.scss
+++ b/src/stylesheet/widgets/_entries.scss
@@ -56,7 +56,7 @@ entry {
 
       &:hover { color: $fg_color; }
 
-      &:active { color: $accent_color; }
+      &:active { color: $accent_standalone_color; }
 
       &.left { margin-right: 6px; }
       &.right { margin-left: 6px; }
diff --git a/src/stylesheet/widgets/_lists.scss b/src/stylesheet/widgets/_lists.scss
index 6fcbd092..85f7e972 100644
--- a/src/stylesheet/widgets/_lists.scss
+++ b/src/stylesheet/widgets/_lists.scss
@@ -172,7 +172,7 @@ row.expander {
   }
 
   &:checked image.expander-row-arrow:not(:disabled) {
-    color: $accent_color;
+    color: $accent_standalone_color;
   }
 
   & image.expander-row-arrow:disabled {
diff --git a/src/stylesheet/widgets/_sidebars.scss b/src/stylesheet/widgets/_sidebars.scss
index 8a0481f8..50b74b72 100644
--- a/src/stylesheet/widgets/_sidebars.scss
+++ b/src/stylesheet/widgets/_sidebars.scss
@@ -114,7 +114,7 @@ placessidebar {
       background-clip: content-box;
     }
 
-    &.sidebar-new-bookmark-row { color: $accent_color; }
+    &.sidebar-new-bookmark-row { color: $accent_standalone_color; }
 
     &:drop(active):not(:disabled) {
       color: $drop_target_color;