GNOME.org
 

[libadwaita/wip/exalm/radii: 7/7] stylesheet: Update border radii


commit b021979a6f62d8feaa31ef14f41fb7b694d67a14
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Thu Oct 14 14:19:13 2021 +0500

    stylesheet: Update border radii
    
    Fixes https://gitlab.gnome.org/GNOME/libadwaita/-/issues/265
    
    Co-authored-by: Tobias Bernard <tbernard gnome org>

 src/stylesheet/_common.scss                   | 11 ++++---
 src/stylesheet/widgets/_calendar.scss         |  2 +-
 src/stylesheet/widgets/_checks.scss           |  4 +--
 src/stylesheet/widgets/_color-chooser.scss    | 44 +++++++++++++--------------
 src/stylesheet/widgets/_emoji-chooser.scss    |  2 +-
 src/stylesheet/widgets/_level-bar.scss        |  8 ++---
 src/stylesheet/widgets/_lists.scss            |  2 +-
 src/stylesheet/widgets/_misc.scss             |  4 +--
 src/stylesheet/widgets/_progress-bar.scss     |  5 +--
 src/stylesheet/widgets/_shortcuts-window.scss |  2 +-
 src/stylesheet/widgets/_toolbars.scss         |  2 +-
 src/stylesheet/widgets/_tooltip.scss          |  7 +----
 src/stylesheet/widgets/_views.scss            |  3 +-
 13 files changed, 46 insertions(+), 50 deletions(-)
---
diff --git a/src/stylesheet/_common.scss b/src/stylesheet/_common.scss
index a0add299..48120d1e 100644
--- a/src/stylesheet/_common.scss
+++ b/src/stylesheet/_common.scss
@@ -2,12 +2,13 @@ $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 $backdrop_transition: 200ms ease-out;
 $button_transition: all 200ms $ease-out-quad;
 $focus_transition: outline-width 200ms $ease-out-quad, outline-offset 200ms $ease-out-quad;
-$button_radius: 5px;
-$menu_radius: 5px;
-$menu_margin: 5px; //margin around menuitems & sidebar items
+$button_radius: 6px;
+$card_radius: $button_radius + 6;
+$menu_radius: 6px;
+$menu_margin: 6px; //margin around menuitems & sidebar items
 $menu_padding: 12px; //inner menuitem padding
-$window_radius: $button_radius + 3;
-$popover_radius: $button_radius + 4;
+$window_radius: $button_radius + 6;
+$popover_radius: $window_radius;
 
 .background {
   color: $fg_color;
diff --git a/src/stylesheet/widgets/_calendar.scss b/src/stylesheet/widgets/_calendar.scss
index 005b936b..54bb99a6 100644
--- a/src/stylesheet/widgets/_calendar.scss
+++ b/src/stylesheet/widgets/_calendar.scss
@@ -28,7 +28,7 @@ calendar {
         padding: 4px;
 
         &:selected {
-          border-radius: 3px;
+          border-radius: $button_radius;
 
           background-color: $accent_bg_color;
           color: $accent_fg_color;
diff --git a/src/stylesheet/widgets/_checks.scss b/src/stylesheet/widgets/_checks.scss
index 1c2ef3a8..992880e2 100644
--- a/src/stylesheet/widgets/_checks.scss
+++ b/src/stylesheet/widgets/_checks.scss
@@ -50,7 +50,7 @@ radio {
 }
 
 check {
-  border-radius: 3px;
+  border-radius: $button_radius;
 
   &:checked { -gtk-icon-source: -gtk-scaled(-gtk-recolor(url("assets/check-symbolic.symbolic.png")),
                                             -gtk-recolor(url("assets/check 2-symbolic symbolic png"))); }
@@ -75,7 +75,7 @@ radio {
   margin: 4px;
   min-width: 32px;
   min-height: 32px;
-  border-radius: 5px;
+  border-radius: $button_radius;
 
   &:checked { -gtk-icon-source: -gtk-icontheme('object-select-symbolic'); }
 }
diff --git a/src/stylesheet/widgets/_color-chooser.scss b/src/stylesheet/widgets/_color-chooser.scss
index 3743e5ff..bbd7ae8c 100644
--- a/src/stylesheet/widgets/_color-chooser.scss
+++ b/src/stylesheet/widgets/_color-chooser.scss
@@ -7,52 +7,50 @@ colorswatch {
 
   @include focus-ring($width: 4px, $offset: -2px);
 
-  $_colorswatch_radius: 5px;
-
   // base color corners rounding
   // to avoid the artifacts caused by rounded corner anti-aliasing the base color
   // sports a bigger radius.
   // nth-child is needed by the custom color strip.
 
   &.top {
-    border-top-left-radius: $_colorswatch_radius + 0.5px;
-    border-top-right-radius: $_colorswatch_radius + 0.5px;
+    border-top-left-radius: $button_radius + 0.5px;
+    border-top-right-radius: $button_radius + 0.5px;
 
     > overlay {
-      border-top-left-radius: $_colorswatch_radius;
-      border-top-right-radius: $_colorswatch_radius;
+      border-top-left-radius: $button_radius;
+      border-top-right-radius: $button_radius;
     }
   }
 
   &.bottom {
-    border-bottom-left-radius: $_colorswatch_radius + 0.5px;
-    border-bottom-right-radius: $_colorswatch_radius + 0.5px;
+    border-bottom-left-radius: $button_radius + 0.5px;
+    border-bottom-right-radius: $button_radius + 0.5px;
 
     > overlay {
-      border-bottom-left-radius: $_colorswatch_radius;
-      border-bottom-right-radius: $_colorswatch_radius;
+      border-bottom-left-radius: $button_radius;
+      border-bottom-right-radius: $button_radius;
     }
   }
 
   &.left,
   &:first-child:not(.top) {
-    border-top-left-radius: $_colorswatch_radius + 0.5px;
-    border-bottom-left-radius: $_colorswatch_radius + 0.5px;
+    border-top-left-radius: $button_radius + 0.5px;
+    border-bottom-left-radius: $button_radius + 0.5px;
 
     > overlay {
-      border-top-left-radius: $_colorswatch_radius;
-      border-bottom-left-radius: $_colorswatch_radius;
+      border-top-left-radius: $button_radius;
+      border-bottom-left-radius: $button_radius;
     }
   }
 
   &.right,
   &:last-child:not(.bottom) {
-    border-top-right-radius: $_colorswatch_radius + 0.5px;
-    border-bottom-right-radius: $_colorswatch_radius + 0.5px;
+    border-top-right-radius: $button_radius + 0.5px;
+    border-bottom-right-radius: $button_radius + 0.5px;
 
     > overlay {
-      border-top-right-radius: $_colorswatch_radius;
-      border-bottom-right-radius: $_colorswatch_radius;
+      border-top-right-radius: $button_radius;
+      border-bottom-right-radius: $button_radius;
     }
   }
 
@@ -88,10 +86,10 @@ colorswatch {
     > overlay {
       @extend %button_basic;
 
-      border-radius: $_colorswatch_radius 0 0 $_colorswatch_radius;
+      border-radius: $button_radius 0 0 $button_radius;
     }
 
-    &:only-child > overlay { border-radius: $_colorswatch_radius; }
+    &:only-child > overlay { border-radius: $button_radius; }
   }
 
   &:disabled {
@@ -99,9 +97,9 @@ colorswatch {
   }
 
   &#editor-color-sample {
-    border-radius: 4px;
+    border-radius: $button_radius;
 
-    > overlay { border-radius: 4.5px; }
+    > overlay { border-radius: $button_radius + 0.5px; }
   }
 }
 
@@ -112,4 +110,4 @@ plane {
 }
 
 // colorscale popup
-colorchooser .popover.osd { border-radius: 5px; }
+colorchooser .popover.osd { border-radius: $popover_radius; }
diff --git a/src/stylesheet/widgets/_emoji-chooser.scss b/src/stylesheet/widgets/_emoji-chooser.scss
index efb8f297..954b429f 100644
--- a/src/stylesheet/widgets/_emoji-chooser.scss
+++ b/src/stylesheet/widgets/_emoji-chooser.scss
@@ -25,7 +25,7 @@ button.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destr
 popover.emoji-picker emoji {
   font-size: x-large;
   padding: 6px;
-  border-radius: 6px;
+  border-radius: $button_radius;
 
   &:focus,
   &:hover {
diff --git a/src/stylesheet/widgets/_level-bar.scss b/src/stylesheet/widgets/_level-bar.scss
index 4fe5de08..33ea008e 100644
--- a/src/stylesheet/widgets/_level-bar.scss
+++ b/src/stylesheet/widgets/_level-bar.scss
@@ -33,11 +33,11 @@ levelbar {
       border-radius: 0;
 
       &:first-child {
-        border-radius: 2px 0 0 2px;
+        border-radius: $_levelbar_border_radius 0 0 $_levelbar_border_radius;
       }
 
       &:last-child {
-        border-radius: 0 2px 2px 0;
+        border-radius: 0 $_levelbar_border_radius $_levelbar_border_radius 0;
       }
     }
   }
@@ -61,11 +61,11 @@ levelbar {
       border-radius: 0;
 
       &:first-child {
-        border-radius: 2px 2px 0 0;
+        border-radius: $_levelbar_border_radius $_levelbar_border_radius 0 0;
       }
 
       &:last-child {
-        border-radius: 0 0 2px 2px;
+        border-radius: 0 0 $_levelbar_border_radius $_levelbar_border_radius;
       }
     }
   }
diff --git a/src/stylesheet/widgets/_lists.scss b/src/stylesheet/widgets/_lists.scss
index 70617014..db112708 100644
--- a/src/stylesheet/widgets/_lists.scss
+++ b/src/stylesheet/widgets/_lists.scss
@@ -238,7 +238,7 @@ listview.content {
   background-color: $card_bg_color;
   color: $card_fg_color;
   border: 1px solid $card_border_color;
-  border-radius: 8px;
+  border-radius: $card_radius;
 
   > row {
     // Regular rows and expander header rows background
diff --git a/src/stylesheet/widgets/_misc.scss b/src/stylesheet/widgets/_misc.scss
index b373fd43..0644837e 100644
--- a/src/stylesheet/widgets/_misc.scss
+++ b/src/stylesheet/widgets/_misc.scss
@@ -7,7 +7,7 @@ frame,
 }
 
 frame {
-  border-radius: $window_radius;
+  border-radius: $card_radius;
 
   > label {
     margin: 4px;
@@ -40,7 +40,7 @@ separator {
 
   padding: 10px;
   border-spacing: 10px;
-  border-radius: 0 0 5px 5px;
+  border-radius: 0 0 $card_radius $card_radius;
   background-color: $osd_bg_color;
   background-image: linear-gradient(to bottom, transparentize(black, 0.8),
                                                transparent 2px);
diff --git a/src/stylesheet/widgets/_progress-bar.scss b/src/stylesheet/widgets/_progress-bar.scss
index 8cbd0c81..5076bf98 100644
--- a/src/stylesheet/widgets/_progress-bar.scss
+++ b/src/stylesheet/widgets/_progress-bar.scss
@@ -30,9 +30,10 @@ progressbar {
     > progress {
       @extend %scale_highlight; /* share most of scales' */
 
-      border-radius: 1.5px;
-
       $_progress-radius: 5px;
+
+      border-radius: $_progress-radius;
+
       &.left {
         border-top-left-radius: $_progress-radius;
         border-bottom-left-radius: $_progress-radius;
diff --git a/src/stylesheet/widgets/_shortcuts-window.scss b/src/stylesheet/widgets/_shortcuts-window.scss
index 5bfe8569..e073f42f 100644
--- a/src/stylesheet/widgets/_shortcuts-window.scss
+++ b/src/stylesheet/widgets/_shortcuts-window.scss
@@ -24,7 +24,7 @@ shortcut {
     background-clip: padding-box;
     border: 1px solid;
     border-color: $card_border_color;
-    border-radius: 5px;
+    border-radius: $button_radius;
     box-shadow: inset 0 -3px gtkalpha($card_border_color, .5);
     font-size: smaller;
   }
diff --git a/src/stylesheet/widgets/_toolbars.scss b/src/stylesheet/widgets/_toolbars.scss
index 39ae44b6..b6da74f3 100644
--- a/src/stylesheet/widgets/_toolbars.scss
+++ b/src/stylesheet/widgets/_toolbars.scss
@@ -114,7 +114,7 @@
   &.osd {
     padding: 8px 14px;
     border: none;
-    border-radius: 5px;
+    border-radius: $card_radius;
     background-color: $osd_bg_color;
 
     &.left,
diff --git a/src/stylesheet/widgets/_tooltip.scss b/src/stylesheet/widgets/_tooltip.scss
index b5c339ce..7091ab6f 100644
--- a/src/stylesheet/widgets/_tooltip.scss
+++ b/src/stylesheet/widgets/_tooltip.scss
@@ -10,13 +10,8 @@ tooltip {
     color: white;
   }
 
-  &.csd {
-    border-radius: 5px;
-    box-shadow: none;
-  }
-
   padding: 6px 10px;
-  border-radius: $window_radius;
+  border-radius: 9px;
   box-shadow: none; // otherwise it gets inherited by windowframe.csd
 
   > box {
diff --git a/src/stylesheet/widgets/_views.scss b/src/stylesheet/widgets/_views.scss
index d9d8d103..0f241248 100644
--- a/src/stylesheet/widgets/_views.scss
+++ b/src/stylesheet/widgets/_views.scss
@@ -12,7 +12,7 @@
     &:focus, & {
       background-color: $view_selected_color;
 
-      border-radius: 3px;
+      border-radius: $button_radius;
     }
   }
 }
@@ -58,6 +58,7 @@ flowbox > flowboxchild,
 gridview > child {
   padding: 3px;
   transition: $focus_transition;
+  border-radius: $button_radius;
 
   @include focus-ring();
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]