[libadwaita/wip/exalm/card: 5/14] stylesheet: Consistently support colored styles between buttons

[Alexander Mikhaylenko <alexm src gnome org>]

commit d79e0ee639abf131f19e2215972a6600cc131d81
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Tue Oct 19 18:02:24 2021 +0500

    stylesheet: Consistently support colored styles between buttons
    
    Make menu buttons and split buttons support .suggested-action,
    .destructive-action and .opaque.

 src/stylesheet/widgets/_buttons.scss       | 63 +++++++++++++++++++++++-------
 src/stylesheet/widgets/_emoji-chooser.scss |  2 +-
 src/stylesheet/widgets/_spin-button.scss   | 12 +++---
 src/stylesheet/widgets/_toolbars.scss      | 25 ++++++++----
 4 files changed, 74 insertions(+), 28 deletions(-)
---
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index 1db816c0..31200557 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -359,6 +359,40 @@ menubutton {
   &.flat > button { @extend %button_basic_flat; }
   &.outline > button { @extend %outline_button; }
 
+  &.suggested-action {
+    background-color: $accent_bg_color;
+    color: $accent_fg_color;
+  }
+
+  &.destructive-action {
+    background-color: $destructive_bg_color;
+    color: $destructive_fg_color;
+  }
+
+  &.opaque {
+    background-color: $opaque_button_default_bg;
+    color: $window_fg_color;
+  }
+
+  &.suggested-action,
+  &.destructive-action,
+  &.opaque {
+    border-radius: $button_radius;
+
+    &.circular {
+      border-radius: 9999px;
+    }
+
+    > button {
+      @extend %opaque_button;
+
+      &, &:checked {
+        background-color: transparent;
+        color: inherit;
+      }
+    }
+  }
+
   &.image-button > button {
     min-width: 24px;
     padding-left: 5px;
@@ -474,31 +508,32 @@ splitbutton {
   }
 
   &.suggested-action {
-    > button, > menubutton > button {
-      @extend %opaque_button;
+    background-color: $accent_bg_color;
+    color: $accent_fg_color;
+  }
 
-      color: $accent_fg_color;
+  &.destructive-action {
+    background-color: $destructive_bg_color;
+    color: $destructive_fg_color;
+  }
 
-      &, &:checked {
-        background-color: $accent_bg_color;
-      }
-    }
+  &.opaque {
+    background-color: $opaque_button_default_bg;
+    color: $window_fg_color;
   }
 
-  &.destructive-action {
+  &.suggested-action,
+  &.destructive-action,
+  &.opaque {
     > button, > menubutton > button {
       @extend %opaque_button;
 
-      color: $destructive_fg_color;
-
       &, &:checked {
-        background-color: $destructive_bg_color;
+        color: inherit;
+        background-color: transparent;
       }
     }
-  }
 
-  &.suggested-action,
-  &.destructive-action {
     $_separator_color: gtkalpha(currentColor, if($contrast == 'high', .6, .3));
     > menubutton > button {
       &:dir(ltr) { box-shadow: inset 1px 0 $_separator_color; }
diff --git a/src/stylesheet/widgets/_emoji-chooser.scss b/src/stylesheet/widgets/_emoji-chooser.scss
index 84b98848..b2d651e4 100644
--- a/src/stylesheet/widgets/_emoji-chooser.scss
+++ b/src/stylesheet/widgets/_emoji-chooser.scss
@@ -14,7 +14,7 @@ popover.background.emoji-picker > contents {
   border-top: 1px solid $border_color;
 }
 
-button.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destructive-action) {
+button.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
   @extend %circular_button;
   @extend %button_basic_flat;
 
diff --git a/src/stylesheet/widgets/_spin-button.scss b/src/stylesheet/widgets/_spin-button.scss
index c56360ff..5239f4f7 100644
--- a/src/stylesheet/widgets/_spin-button.scss
+++ b/src/stylesheet/widgets/_spin-button.scss
@@ -6,8 +6,8 @@ spinbutton {
   border-spacing: 0;
 
   /* :not here just to bump specificity above that of the list button styling */
-  > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action),
-  > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action) {
+  > 
button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque),
+  > 
button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) 
{
     margin: 0;
     background: none;
     border-style: solid;
@@ -32,8 +32,8 @@ spinbutton {
     }
 
     /* :not here just to bump specificity above that of the list button styling */
-    > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action),
-    > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action) {
+    > 
button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque),
+    > 
button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) 
{
       min-height: 16px;
       min-width: 22px;
       padding-bottom: 0;
@@ -55,8 +55,8 @@ spinbutton {
     }
 
     /* :not here just to bump specificity above that of the list button styling */
-    > button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action),
-    > button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action) {
+    > 
button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque),
+    > 
button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) 
{
       &:last-child {
         border-width: 1px 0 0 0;
         border-radius: 0 0 $button_radius $button_radius;
diff --git a/src/stylesheet/widgets/_toolbars.scss b/src/stylesheet/widgets/_toolbars.scss
index cdd1bcf9..827afc12 100644
--- a/src/stylesheet/widgets/_toolbars.scss
+++ b/src/stylesheet/widgets/_toolbars.scss
@@ -1,5 +1,5 @@
 %toolbar {
-  button:not(.raised):not(.suggested-action):not(.destructive-action) {
+  button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
     &.arrow-button,
     &.image-button,
     &.image-text-button {
@@ -7,13 +7,13 @@
     }
   }
 
-  menubutton:not(.raised):not(.suggested-action):not(.destructive-action) {
+  menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
     &.image-button > button {
       @extend %button_basic_flat;
     }
   }
 
-  .linked button:not(.raised):not(.suggested-action):not(.destructive-action) {
+  .linked button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
     &.arrow-button,
     &.image-button,
     &.image-text-button {
@@ -21,7 +21,7 @@
     }
   }
 
-  menubutton.raised > button:not(.raised):not(.suggested-action):not(.destructive-action) {
+  menubutton.raised > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
     &.arrow-button,
     &.image-button,
     &.image-text-button {
@@ -29,6 +29,17 @@
     }
   }
 
+  menubutton.suggested-action,
+  menubutton.destructive-action,
+  menubutton.opaque {
+    > button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+      @extend %opaque_button;
+
+      color: inherit;
+      background-color: transparent;
+    }
+  }
+
   splitbutton {
     // Specificity bump
     > separator.vertical {
@@ -36,7 +47,7 @@
       margin-bottom: 6px;
     }
 
-    &:not(.raised):not(.suggested-action):not(.destructive-action) {
+    &:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
       @extend %flat_split_button;
     }
   }
@@ -68,7 +79,7 @@
 
   // Reset styles for popovers
   popover {
-    button:not(.raised):not(.suggested-action):not(.destructive-action) {
+    button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
       &.arrow-button,
       &.image-button,
       &.image-text-button {
@@ -76,7 +87,7 @@
       }
     }
 
-    menubutton:not(.raised):not(.suggested-action):not(.destructive-action) {
+    menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
       &.image-button > button {
         @extend %button_basic_raised;
       }