[libadwaita/wip/exalm/buttons-5: 14/18] stylesheet: Overhaul button styles

From: Alexander Mikhaylenko <alexm src gnome org>
To: commits-list gnome org
Cc:
Subject: [libadwaita/wip/exalm/buttons-5: 14/18] stylesheet: Overhaul button styles
Date: Thu, 10 Jun 2021 18:46:43 +0000 (UTC)

commit 8bb170d153f2c31ac99959ef52eabd6d4da88929
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Thu Jun 10 13:52:46 2021 +0500

    stylesheet: Overhaul button styles
    
    Use a flat recolorable overlay style. Adjust padding and min sizes
    everywhere to accommodate for removed borders.
    
    Remove the .osd style as the regular style already works for it.

 src/stylesheet/_colors.scss                |  10 ++
 src/stylesheet/_drawing.scss               | 155 --------------------
 src/stylesheet/widgets/_buttons.scss       | 225 ++++++++++++++---------------
 src/stylesheet/widgets/_color-chooser.scss |   1 +
 src/stylesheet/widgets/_file-chooser.scss  |   4 +-
 src/stylesheet/widgets/_menus.scss         |  19 ++-
 src/stylesheet/widgets/_notebook.scss      |   4 -
 src/stylesheet/widgets/_popovers.scss      |   5 -
 src/stylesheet/widgets/_spin-button.scss   |  16 +-
 src/stylesheet/widgets/_trees.scss         |   6 +-
 10 files changed, 147 insertions(+), 298 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index 0d626ea3..dab29663 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -28,6 +28,13 @@ $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)"};
+
 $fill_color: $selected_bg_color;
 $fill_text_color: $selected_fg_color;
 $fill_hover_color: mix($selected_bg_color, $text_color, 90%);
@@ -44,7 +51,10 @@ $scrollbar_slider_active_color: if($variant=='light', darken($selected_bg_color,
 $warning_color: #f57900;
 $error_color: #cc0000;
 $success_color: if($variant == 'light', #33d17a, darken(#33d17a, 10%));
+$suggested_color: if($variant == 'light', $selected_bg_color, $selected_bg_color);
+$suggested_text_color: if($variant == 'light', darken($suggested_color, 10%), lighten($suggested_color, 
20%));
 $destructive_color: if($variant == 'light', #e01b24, darken(#e01b24, 10%));
+$destructive_text_color: if($variant == 'light', darken($destructive_color, 10%), 
lighten($destructive_color, 20%));
 
 $osd_fg_color: #eeeeec;
 $osd_text_color: white;
diff --git a/src/stylesheet/_drawing.scss b/src/stylesheet/_drawing.scss
index 2dc1c2cc..0a269c18 100644
--- a/src/stylesheet/_drawing.scss
+++ b/src/stylesheet/_drawing.scss
@@ -94,161 +94,6 @@
   @else { @return darken($c, 15%); }
 }
 
-$_default_button_c: lighten($bg_color,2%);
-@mixin button($t, $c:$_default_button_c, $tc:$fg_color) {
-//
-// Button drawing function
-//
-// $t:    button type,
-// $c:    base button color for colored* types
-// $tc:   optional text color for colored* types
-//
-// possible $t values:
-// normal, hover, active, checked-hover, checked-active, insensitive, insensitive-active,
-// osd, osd-hover, osd-active, osd-insensitive, undecorated
-//
-  $_button_shadow: 0 1px 2px transparentize($shadow_color, 0.03);
-
-  @if $t==normal {
-  //
-  // normal button
-  //
-    color: $tc;
-    outline-color: if($c != $_default_button_c, $alt_focus_border_color, $focus_border_color);
-    border-color: if($c!=$_default_button_c, _border_color($c, true), $borders_color); //tint if not default 
button color
-    background-image: if($variant == 'light', linear-gradient(to top, darken($c, 2%) 2px, $c),
-                                              linear-gradient(to top, darken($c,1%) 2px, $c));
-    @include _shadows($_button_shadow);
-  }
-
-  @else if $t==hover {
-  //
-  // hovered button
-  //
-    color: $tc;
-    border-color: if($c != $_default_button_c, _border_color($c), $borders_color);
-    @if $variant == 'light' {
-      background-image: linear-gradient(to top, darken($c,16%), darken($c,8%) 1px);
-      @include _shadows($_button_shadow);
-    }
-    @else {
-      background-image: linear-gradient(to top, darken($c,4%) 20%, darken($c, 3%) 90%);
-      @include _shadows($_button_shadow);
-    }
-  }
-
-  @else if $t==active {
-  //
-  // pushed button
-  //
-    color: $tc;
-    border-color: if($c != $_default_button_c, _border_color($c), $borders_color);
-    background-image: if($variant == 'light', image(darken($c, 14%)), image(darken($c, 9%)));
-    box-shadow: none;
-  }
-
-  @else if $t==checked-hover {
-  //
-  // pushed togglebutton hover
-  //
-    color: $tc;
-    border-color: if($c != $_default_button_c, _border_color($c), $borders_color);
-    background-image: if($variant == 'light', image(darken($c, 18%)), image(darken($c, 12%)));
-    box-shadow: none;
-  }
-
-  @else if $t==checked-active {
-  //
-  // pushed togglebutton pushed further :)
-  //
-    color: $tc;
-    border-color: if($c != $_default_button_c, _border_color($c), $borders_color);
-    background-image: if($variant == 'light', image(darken($c, 22%)), image(darken($c, 14%)));
-    box-shadow: none;
-  }
-
-  @else if $t==osd {
-  //
-  // normal osd button
-  //
-    $_bg: if($c != $_default_button_c, transparentize($c, 0.5), $osd_bg_color);
-
-    color: $osd_fg_color;
-    outline-color: if($c != $_default_button_c, $alt_focus_border_color, $focus_border_color);
-    border-color: $osd_borders_color;
-    background-color: transparent;
-    background-image: image($_bg);
-    background-clip: padding-box;
-  }
-
-  @else if $t==osd-hover {
-  //
-  // active osd button
-  //
-    $_bg: if($c != $_default_button_c, transparentize($c, 0.3), darken($osd_bg_color, 10%));
-
-    color: white;
-    border-color: $osd_borders_color;
-    background-color: transparent;
-    background-image: image($_bg);
-    background-clip: padding-box;
-  }
-
-  @else if $t==osd-active {
-  //
-  // active osd button
-  //
-    $_bg: if($c != $_default_button_c, $c, darken($osd_bg_color, 20%));
-
-    color: white;
-    border-color: $osd_borders_color;
-    background-color: transparent;
-    background-image: image($_bg);
-    background-clip: padding-box;
-    box-shadow: none;
-  }
-
-  @else if $t==undecorated {
-  //
-  // reset
-  //
-    border-color: transparent;
-    background-color: transparent;
-    background-image: none;
-    box-shadow: none;
-  }
-  @else if $t==undecorated-hover {
-    border-color: transparent;
-    background-image: none;
-    box-shadow: none;
-    background-color: $view_hover_color;
-  }
-  @else if $t==undecorated-active {
-    border-color: transparent;
-    background-image: none;
-    box-shadow: none;
-    background-color: $view_active_color;
-  }
-  @else if $t==undecorated-checked {
-    border-color: transparent;
-    background-image: none;
-    box-shadow: none;
-    background-color: $view_selected_color;
-  }
-  @else if $t==undecorated-checked-hover {
-    border-color: transparent;
-    background-image: none;
-    box-shadow: none;
-    background-color: $view_selected_hover_color;
-  }
-  @else if $t==undecorated-checked-active {
-    border-color: transparent;
-    background-image: none;
-    box-shadow: none;
-    background-color: $view_selected_active_color;
-  }
-}
-
 @mixin overshoot($p, $c:$fg_color) {
 //
 // overshoot
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index ed0a2237..75f1d352 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -11,29 +11,34 @@ button {
   @at-root %button_basic, & {
     min-height: 24px;
     min-width: 16px;
-    padding: 4px 9px;
-    border: 1px solid;
+    padding: 5px 10px;
     border-radius: $button_radius;
-    transition: $button_transition;
-
-    @include button(normal);
+    background-color: $button_color;
 
     @include focus-ring();
+    transition: $button_transition;
 
     &:hover {
-      @include button(hover);
+      background-color: $button_hover_color;
     }
 
     &.keyboard-activating,
-    &:active,
+    &:active {
+      background-color: $button_active_color;
+    }
+
     &:checked {
-      @include button(active);
+      background-color: $button_checked_color;
 
-      transition-duration: 50ms;
-    }
+      &:hover {
+        background-color: $button_checked_hover_color;
+      }
 
-    &:checked:hover { @include button(checked-hover); }
-    &:checked:active { @include button(checked-active); }
+      &.keyboard-activating,
+      &:active {
+        background-color: $button_checked_active_color;
+      }
+    }
 
     &:disabled {
       filter: opacity(.5);
@@ -43,53 +48,20 @@ button {
       }
     }
 
-    @at-root %button_basic_flat,
-    &.flat {
-      @include button(undecorated);
-      // to avoid adjacent buttons borders clashing when transitioning, the transition on the normal state 
is set
-      // to none, while it's added back in the hover state, so the button decoration will fade in on hover, 
but
-      // it won't fade out when the pointer leave the button allocation area. To make the transition more 
evident
-      // in this case the duration is increased.
-      transition: none;
-
-      &:hover {
-        @include button(undecorated-hover);
-        transition: $button_transition;
-        transition-duration: 500ms;
-
-        &:active {
-          @include button(undecorated-active);
-        }
-      }
-
-      &:checked {
-        @include button(undecorated-checked);
-        transition: $button_transition;
-
-        &:hover {
-          @include button(undecorated-checked-hover);
-
-          &:active {
-            @include button(undecorated-checked-active);
-          }
-        }
-      }
-    }
-
     &.image-button {
       min-width: 24px;
-      padding-left: 5px;
-      padding-right: 5px;
+      padding-left: 6px;
+      padding-right: 6px;
     }
 
     &.text-button {
-      padding-left: 16px;
-      padding-right: 16px;
+      padding-left: 17px;
+      padding-right: 17px;
     }
 
     &.text-button.image-button {
-      padding-left: 8px;
-      padding-right: 8px;
+      padding-left: 9px;
+      padding-right: 9px;
 
       label {
         padding-left: 8px;
@@ -100,8 +72,7 @@ button {
     @at-root %button_basic_drop_active,
     &:drop(active) {
       color: $drop_target_color;
-      border-color: $drop_target_color;
-      box-shadow: inset 0 0 0 1px $drop_target_color;
+      box-shadow: inset 0 0 0 2px $drop_target_color;
     }
   }
 
@@ -110,78 +81,110 @@ button {
     min-width: 32px;
     min-height: 32px;
 
-    color: $osd_fg_color;
-
-    @include button(osd);
+    @include focus-ring($outer: true, $offset: 1px);
+    transition: $button_transition;
 
-    border: none;
-    box-shadow: none;
+    color: $osd_fg_color;
+    background-color: $osd_bg_color;
 
     &:hover {
-      @include button(osd-hover);
+      color: white;
+      background-color: lighten($osd_bg_color, 10%);
+    }
 
-      border: none;
-      box-shadow: none;
+    &.keyboard-activating,
+    &:active {
+      color: white;
+      background-color: lighten($osd_bg_color, 20%);
     }
 
-    &:active,
     &:checked {
-      @include button(osd-active);
+      background-color: lighten($osd_bg_color, 15%);
+
+      &:hover {
+        background-color: lighten($osd_bg_color, 25%);
+      }
 
-      border: none;
-      box-shadow: none;
+      &.keyboard-activating,
+      &:active {
+        background-color: lighten($osd_bg_color, 30%);
+      }
     }
   }
 
-  //overlay / OSD style
-  @at-root %osd_button,
-  .osd & {
-    @include button(osd);
+  // Suggested and Destructive Action buttons
+  @each $b_type, $b_color in (suggested-action, $suggested_color),
+                             (destructive-action, $destructive_color) {
+    &.#{$b_type} {
+      color: white;
+      background-color: $b_color;
 
-    &:hover { @include button(osd-hover); }
+      @include focus-ring($outer: true, $offset: 1px);
+      transition: $button_transition;
 
-    &:active,
-    &:checked { @include button(osd-active); }
+      &:hover {
+        background-color: shade($b_color, 0.95);
+      }
 
-    &.flat {
-      @include button(undecorated);
+      &.keyboard-activating,
+      &:active {
+        background-color: shade($b_color, 0.8);
+      }
 
-      box-shadow: none;
+      &:checked {
+        background-color: shade($b_color, 0.85);
 
-      &:hover { @include button(osd-hover); }
+        &:hover {
+          background-color: shade($b_color, 0.8);
+        }
 
-      &:active,
-      &:checked { @include button(osd-active); }
+        &.keyboard-activating,
+        &:active {
+          background-color: shade($b_color, 0.7);
+        }
+      }
     }
   }
 
-  // Suggested and Destructive Action buttons
-  @each $b_type, $b_color in (suggested-action, $selected_bg_color),
-                             (destructive-action, $destructive_color) {
-    &.#{$b_type} {
-      @include button(normal, $b_color, white);
-      @include focus-ring($fc: $alt_focus_border_color);
-
-      &.flat {
-        @include button(undecorated);
+  @at-root %button_basic_flat,
+  &.flat {
+    background-color: transparent;
+    @include focus-ring();
+    transition: $button_transition;
 
-        color: $b_color; //FIXME: does it work on the dark variant?
-      }
+    &:hover {
+      background-color: $view_hover_color;
+    }
 
-      &:hover { @include button(hover, $b_color, white); }
+    &.keyboard-activating,
+    &:active {
+      background-color: $view_active_color;
+    }
 
-      &:active,
-      &:checked { @include button(active, $b_color, white); }
+    &:checked {
+      background-color: $view_selected_color;
 
-      .osd & {
-        @include button(osd, $b_color);
+      &:hover {
+        background-color: $view_selected_hover_color;
+      }
 
-        &:hover { @include button(osd-hover, $b_color); }
+      &.keyboard-activating,
+      &:active {
+        background-color: $view_selected_active_color;
+      }
+    }
 
-        &:active,
-        &:checked { @include button(osd-active, $b_color); }
+    @each $b_type, $b_color in (suggested-action, $suggested_text_color),
+                               (destructive-action, $destructive_text_color) {
+      &.#{$b_type} {
+        color: $b_color;
       }
     }
+
+    // Specificity bump
+    &:drop(active) {
+      @extend %button_basic_drop_active;
+    }
   }
 
   stackswitcher > & {
@@ -214,8 +217,8 @@ button {
 
   menubutton.circular &,
   &.circular { // force circular button shape
-    min-width: 32px;
-    min-height: 32px;
+    min-width: 34px;
+    min-height: 34px;
     padding: 0;
     border-radius: 9999px;
 
@@ -252,15 +255,13 @@ button {
 }
 
 button.color {
-  padding: 4px;
+  padding: 5px;
 
   > colorswatch:only-child {
     &, > overlay { border-radius: 0; }
 
     @if $variant == 'light' {
       box-shadow: 0 1px $shadow_color;
-
-      .osd & { box-shadow: none; }
     }
   }
 
@@ -276,20 +277,16 @@ button.color {
 /* tone down as per new designs, see issue #1473 */
 %outline_button,
 button.outline {
-  @extend %undecorated_button;
-  border: 1px solid transparentize($borders_color, .5);
-
-  &:hover { @include button(hover); }
+  @extend %button_basic_flat;
+  box-shadow: inset 0 0 0 1px #{"alpha(currentColor, .15)"};
 
-  &:active,
-  &:checked { @include button(active); }
+  &:hover, &:active, &:checked {
+    box-shadow: none;
+  }
 
-  @each $b_type, $b_color in (suggested-action, $selected_bg_color),
-                             (destructive-action, $destructive_color) {
-    &.#{$b_type} { // allow colored buttons in lists #3643
-      @include button(normal, $b_color, white);
-      @include focus-ring($fc: $alt_focus_border_color);
-    }
+  // Specificity bump
+  &:drop(active) {
+    @extend %button_basic_drop_active;
   }
 }
 
diff --git a/src/stylesheet/widgets/_color-chooser.scss b/src/stylesheet/widgets/_color-chooser.scss
index 9385acc3..a8935c47 100644
--- a/src/stylesheet/widgets/_color-chooser.scss
+++ b/src/stylesheet/widgets/_color-chooser.scss
@@ -107,6 +107,7 @@ colorswatch {
     > overlay {
       @extend %button_basic;
 
+      border: none;
       border-radius: $_colorswatch_radius 0 0 $_colorswatch_radius;
     }
 
diff --git a/src/stylesheet/widgets/_file-chooser.scss b/src/stylesheet/widgets/_file-chooser.scss
index c7d59366..a7111bb7 100644
--- a/src/stylesheet/widgets/_file-chooser.scss
+++ b/src/stylesheet/widgets/_file-chooser.scss
@@ -25,8 +25,8 @@ filechooser {
 
   pathbar > button {
     &.text-button, &.image-button, & {
-      padding-left: 4px;
-      padding-right: 4px;
+      padding-left: 5px;
+      padding-right: 5px;
     }
 
     &.text-button.image-button label {
diff --git a/src/stylesheet/widgets/_menus.scss b/src/stylesheet/widgets/_menus.scss
index 6db921ed..1cc8bed1 100644
--- a/src/stylesheet/widgets/_menus.scss
+++ b/src/stylesheet/widgets/_menus.scss
@@ -14,7 +14,13 @@ popover.menu {
       outline: none;
       transition: none;
 
-      &:selected { background: image($view_selected_color); }
+      &:selected {
+        background-color: $view_selected_color;
+
+        &:active {
+          background-color: $view_selected_active_color;
+        }
+      }
     }
   }
 
@@ -25,9 +31,14 @@ popover.menu {
       @extend %outline_button;
 
       padding: 11px;
-      &:focus {
-         background-color: $view_selected_color;
-         border-color: $view_selected_color;
+      &:selected {
+        background-color: $view_selected_color;
+        box-shadow: none;
+        outline: none;
+
+        &:active {
+          background-color: $view_selected_active_color;
+        }
       }
     }
   }
diff --git a/src/stylesheet/widgets/_notebook.scss b/src/stylesheet/widgets/_notebook.scss
index 89947c47..eb262fd5 100644
--- a/src/stylesheet/widgets/_notebook.scss
+++ b/src/stylesheet/widgets/_notebook.scss
@@ -113,10 +113,6 @@ notebook {
       border-radius: 0;
 
       &:hover:not(:active) {
-        background-clip: padding-box;
-        background-image: none;
-        background-color: transparentize(white, 0.7);
-        border-color: transparent;
         box-shadow: none;
       }
     }
diff --git a/src/stylesheet/widgets/_popovers.scss b/src/stylesheet/widgets/_popovers.scss
index 513891f0..627a7798 100644
--- a/src/stylesheet/widgets/_popovers.scss
+++ b/src/stylesheet/widgets/_popovers.scss
@@ -54,9 +54,4 @@ popover.background {
       box-shadow: none;
     }
   }
-
-  &.touch-selection,
-  &.magnifier {
-    button { @extend %osd_button; }
-  }
 }
diff --git a/src/stylesheet/widgets/_spin-button.scss b/src/stylesheet/widgets/_spin-button.scss
index 1af5659a..4993506b 100644
--- a/src/stylesheet/widgets/_spin-button.scss
+++ b/src/stylesheet/widgets/_spin-button.scss
@@ -8,26 +8,20 @@ spinbutton {
   > button.image-button.up:not(.flat),
   > button.image-button.down:not(.flat) {
     margin: 0;
-    color: mix($fg_color, $base_color, 90%);
-    background-image: none;
+    background: none;
     border-style: solid;
     border-color: transparentize($borders_color, 0.7);
     border-radius: 0;
     box-shadow: none;
+    color: inherit;
 
     &:hover {
-      color: $fg_color;
-      background-color: darken($bg_color,5%);
-    }
-
-    &:disabled {
-      color: transparentize($insensitive_fg_color, 0.7);
-      background-color: transparent;
+      color: $text_color;
+      background-color: $view_hover_color;
     }
 
     &:active {
-      background-color: transparentize(black, 0.9);
-      box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8);
+      background-color: $view_active_color;
     }
   }
 
diff --git a/src/stylesheet/widgets/_trees.scss b/src/stylesheet/widgets/_trees.scss
index 66d3a7af..10ba11dd 100644
--- a/src/stylesheet/widgets/_trees.scss
+++ b/src/stylesheet/widgets/_trees.scss
@@ -75,7 +75,6 @@ treeview.view {
       color: $_column_header_color;
       background-color: $base_color;
       font-weight: bold;
-      box-shadow: none;
 
       &:hover {
         @extend %column_header_button;
@@ -128,7 +127,8 @@ treeview.view {
 %column_header_button {
   padding: 0 6px;
   background-image: none;
-  border-style: none none solid solid;
+  border-style: solid;
+  border-width: 0 0 1px 1px;
   border-color: $treeview_borders_color;
   border-radius: 0;
 
@@ -137,7 +137,7 @@ treeview.view {
     background-image: none;
   }
 
-  &:last-child { border-right-style: none; }
+  &:last-child { border-right-width: 0; }
 }
 
 /********************************************************
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]