[libadwaita/wip/exalm/buttons-5: 1/4] stylesheet: Overhaul button styles

From: Alexander Mikhaylenko <alexm src gnome org>
To: commits-list gnome org
Cc:
Subject: [libadwaita/wip/exalm/buttons-5: 1/4] stylesheet: Overhaul button styles
Date: Fri, 11 Jun 2021 08:25:09 +0000 (UTC)

commit 18115018561df684c4dd0a79804dba8dea8dd564
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.
    
    Simplify transitions, make sure they actually work.
    
    Make sure buttons like .suggested-action.flat work as expected in all
    states.
    
    Fixes https://gitlab.gnome.org/GNOME/libadwaita/-/issues/147
    Fixes https://gitlab.gnome.org/GNOME/libadwaita/-/issues/153
    Fixes https://gitlab.gnome.org/GNOME/libadwaita/-/issues/155
    Fixes https://gitlab.gnome.org/GNOME/libadwaita/-/issues/193

 src/stylesheet/_colors.scss                |  10 ++
 src/stylesheet/_drawing.scss               | 155 ------------------
 src/stylesheet/widgets/_buttons.scss       | 247 ++++++++++++++++-------------
 src/stylesheet/widgets/_color-chooser.scss |   1 +
 src/stylesheet/widgets/_file-chooser.scss  |   4 +-
 src/stylesheet/widgets/_menus.scss         |  18 ++-
 src/stylesheet/widgets/_notebook.scss      |   4 -
 src/stylesheet/widgets/_popovers.scss      |   5 -
 src/stylesheet/widgets/_spin-button.scss   |  16 +-
 src/stylesheet/widgets/_trees.scss         |   5 +-
 10 files changed, 173 insertions(+), 292 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..7d389bd3 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -11,29 +11,38 @@ 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;
+    background-color: $button_color;
 
-    @include button(normal);
+    @if $contrast == 'high' {
+      box-shadow: inset 0 0 0 1px $borders_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 +52,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 +76,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 +85,132 @@ button {
     min-width: 32px;
     min-height: 32px;
 
-    color: $osd_fg_color;
+    @include focus-ring($outer: true, $offset: 1px);
+    transition: $button_transition;
 
-    @include button(osd);
+    color: $osd_fg_color;
+    background-color: $osd_bg_color;
 
-    border: none;
-    box-shadow: none;
+    @if $contrast == 'high' {
+      box-shadow: 0 0 0 1px currentColor;
+    }
 
     &: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%);
 
-      border: none;
-      box-shadow: none;
+      &:hover {
+        background-color: lighten($osd_bg_color, 25%);
+      }
+
+      &.keyboard-activating,
+      &:active {
+        background-color: lighten($osd_bg_color, 30%);
+      }
+    }
+
+    // Specificity bump
+    &:drop(active) {
+      @extend %button_basic_drop_active;
     }
   }
 
-  //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); }
+      box-shadow: none;
 
-    &:active,
-    &:checked { @include button(osd-active); }
+      @include focus-ring($outer: true, $offset: 1px);
+      transition: $button_transition;
 
-    &.flat {
-      @include button(undecorated);
+      &:hover {
+        background-color: shade($b_color, 0.95);
+      }
 
-      box-shadow: none;
+      &.keyboard-activating,
+      &:active {
+        background-color: shade($b_color, 0.8);
+      }
 
-      &:hover { @include button(osd-hover); }
+      &:checked {
+        background-color: shade($b_color, 0.85);
 
-      &:active,
-      &:checked { @include button(osd-active); }
+        &:hover {
+          background-color: shade($b_color, 0.8);
+        }
+
+        &.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);
+  @at-root %button_basic_flat,
+  &.flat {
+    background-color: transparent;
+    @include focus-ring();
+    transition: $button_transition;
 
-      &.flat {
-        @include button(undecorated);
+    box-shadow: none;
 
-        color: $b_color; //FIXME: does it work on the dark variant?
+    @if $contrast == 'high' {
+      &:hover,
+      &.keyboard-activating,
+      &:active,
+      &:checked {
+        box-shadow: inset 0 0 0 1px $borders_color;
       }
+    }
+
+    &: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 +243,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 +281,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,21 +303,23 @@ 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;
 
-  &:active,
-  &:checked { @include button(active); }
+  @if $contrast == 'high' {
+    box-shadow: inset 0 0 0 1px $borders_color;
+  }
+  @else {
+    box-shadow: inset 0 0 0 1px #{"alpha(currentColor, .15)"};
 
-  @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);
+    &:hover, &:active, &:checked {
+      box-shadow: none;
     }
   }
+
+  // Specificity bump
+  &:drop(active) {
+    @extend %button_basic_drop_active;
+  }
 }
 
 menubutton {
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..0f5eed14 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;
+        }
+      }
     }
   }
 
@@ -24,10 +30,14 @@ popover.menu {
     button.circular.image-button.model {
       @extend %outline_button;
 
+      outline: none;
       padding: 11px;
-      &:focus {
-         background-color: $view_selected_color;
-         border-color: $view_selected_color;
+      &:selected {
+        background-color: $view_selected_color;
+
+        &: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..c6eafb1a 100644
--- a/src/stylesheet/widgets/_trees.scss
+++ b/src/stylesheet/widgets/_trees.scss
@@ -128,7 +128,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 +138,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]