[libadwaita/wip/exalm/accent] stylesheet: Split accent and destructive color into 2

[Alexander Mikhaylenko <alexm src gnome org>]

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

    stylesheet: Split accent and destructive color into 2
    
    Add a second more contrasty color for when it's used as foreground, e.g. on
    flat suggested-action and destructive-action buttons.
    
    Fixes https://gitlab.gnome.org/GNOME/libadwaita/-/issues/187

 src/stylesheet/_colors.scss           |  6 ++-
 src/stylesheet/_common.scss           |  2 +-
 src/stylesheet/_defaults.scss         |  7 ++--
 src/stylesheet/widgets/_buttons.scss  | 69 ++++++++++++++++++++---------------
 src/stylesheet/widgets/_entries.scss  |  2 +-
 src/stylesheet/widgets/_lists.scss    |  2 +-
 src/stylesheet/widgets/_sidebars.scss |  2 +-
 7 files changed, 52 insertions(+), 38 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index 34cfde7d..085c32ff 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -2,8 +2,10 @@
 // it gets @if ed depending on $variant
 
 $accent_color: gtkcolor(accent_color);
+$accent_color_text: gtkcolor(accent_color_text);
 $accent_text: gtkcolor(accent_text);
 $destructive_color: gtkcolor(destructive_color);
+$destructive_color_text: gtkcolor(destructive_color_text);
 $destructive_text: gtkcolor(destructive_text);
 
 $success_color: gtkcolor(success_color);
@@ -18,8 +20,8 @@ $fg_color: if($variant == 'light', #2e3436, #eeeeec);
 $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_color_text;
+$link_visited_color: gtkmix($accent_color_text, $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/_common.scss b/src/stylesheet/_common.scss
index bf77b901..f74caaae 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -43,7 +43,7 @@ selection {
   color: transparent;
 
   &:focus-within {
-    background-color: gtkalpha($accent_color, 0.3);
+    background-color: gtkalpha($accent_color_text, 0.3);
   }
 }
 
diff --git a/src/stylesheet/_defaults.scss b/src/stylesheet/_defaults.scss
index dff804e8..623f7670 100644
--- a/src/stylesheet/_defaults.scss
+++ b/src/stylesheet/_defaults.scss
@@ -9,15 +9,16 @@
 // 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 #{"" + if($variant == 'light', #3584e4, #3584e4)};
+@define-color accent_color_text #{"" + if($variant == 'light', #1a5fb4, #99c1f1)};
 @define-color accent_text #ffffff;
 
 // destructive-action buttons
-@define-color destructive_color #{"" + if($variant == 'light', #e01b24, #a51d2d)};
+@define-color destructive_color #{"" + if($variant == 'light', #e01b24, #e01b24)};
+@define-color destructive_color_text #{"" + if($variant == 'light', #a51d2d, #f66151)};
 @define-color destructive_text #ffffff;
 
 // Levelbars, entries, labels and infobars. These don't need text colors
 @define-color success_color #{"" + if($variant == 'light', #33d17a, darken(#33d17a, 10%))};
 @define-color warning_color #e5a50a;
 @define-color error_color #e01b24;
-
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index 60f0e4cb..72b96071 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_color_text;
+    }
+
+    &.destructive-action {
+      color: $destructive_color_text;
     }
 
     // Specificity bump
diff --git a/src/stylesheet/widgets/_entries.scss b/src/stylesheet/widgets/_entries.scss
index d99faf4e..eb226f8e 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_color_text; }
 
       &.left { margin-right: 6px; }
       &.right { margin-left: 6px; }
diff --git a/src/stylesheet/widgets/_lists.scss b/src/stylesheet/widgets/_lists.scss
index 6fcbd092..b2af6ffb 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_color_text;
   }
 
   & image.expander-row-arrow:disabled {
diff --git a/src/stylesheet/widgets/_sidebars.scss b/src/stylesheet/widgets/_sidebars.scss
index 8a0481f8..d6ea6a54 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_color_text; }
 
     &:drop(active):not(:disabled) {
       color: $drop_target_color;