Adwaita: make circular button border looking nice

the darker bottom border used on buttons looks bad on circular ones
so now a gradient clipped on the border-box and a transparent
border is used in that partcular case.
See https://bugzilla.gnome.org/show_bug.cgi?id=771205 for details.

3 files changed, 72 insertions, 2 deletions

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 49d5ef46bb..24cfeb2fb0 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -770,6 +770,28 @@ button {
     -gtk-outline-radius: 9999px;
 
     label { padding: 0; }
+
+    // the followind code is needed since we use a darker bottom border on buttons, which looks pretty
+    // bad with a 100% border radius (see https://bugzilla.gnome.org/show_bug.cgi?id=771205 for details),
+    // so on relevant states we an additional background-image with a gradient clipped on the border-box,
+    // so setting a transparent border would reveal it.
+    // FIXME: take care of colored circular button.
+    $_border_bg: linear-gradient(to top, $alt-borders-color 25%, $borders-color 50%);
+
+    &:not(.flat):not(:checked):not(:active):not(:disabled):not(:backdrop) {
+      @include button(normal);
+      background-image: $button_fill, $_border_bg;
+      border-color: transparent;
+    }
+
+    &:hover:not(:checked):not(:active):not(:disabled):not(:backdrop) {
+      @include button(hover);
+      background-image: $button_fill, $_border_bg;
+      border-color: transparent;
+    }
+
+    background-origin: padding-box, border-box;
+    background-clip: padding-box, border-box;
   }
 }
 
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 2fad5d717e..bcc08831d6 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1155,9 +1155,33 @@ button {
   -gtk-icon-shadow: none; }
 button.circular {
   border-radius: 9999px;
-  -gtk-outline-radius: 9999px; }
+  -gtk-outline-radius: 9999px;
+  background-origin: padding-box, border-box;
+  background-clip: padding-box, border-box; }
   button.circular label {
     padding: 0; }
+  button.circular:not(.flat):not(:checked):not(:active):not(:disabled):not(:backdrop) {
+    color: #eeeeec;
+    outline-color: rgba(238, 238, 236, 0.3);
+    border-color: #1b1f20;
+    border-bottom-color: #0b0c0c;
+    background-image: linear-gradient(to bottom, #2e3436, #2a2e30 60%, #25292b);
+    text-shadow: 0 -1px rgba(0, 0, 0, 0.82745);
+    -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.82745);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
+    background-image: linear-gradient(to bottom, #2e3436, #2a2e30 60%, #25292b), linear-gradient(to top, #0b0c0c 25%, #1b1f20 50%);
+    border-color: transparent; }
+  button.circular:hover:not(:checked):not(:active):not(:disabled):not(:backdrop) {
+    color: #eeeeec;
+    outline-color: rgba(238, 238, 236, 0.3);
+    border-color: #1b1f20;
+    border-bottom-color: #0b0c0c;
+    text-shadow: 0 -1px rgba(0, 0, 0, 0.77945);
+    -gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.77945);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
+    background-image: linear-gradient(to bottom, #353c3e, #2e3436 60%, #2a2e30);
+    background-image: linear-gradient(to bottom, #353c3e, #2e3436 60%, #2a2e30), linear-gradient(to top, #0b0c0c 25%, #1b1f20 50%);
+    border-color: transparent; }
 
 .stack-switcher >
 button.needs-attention > label,
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 041e4c65bd..ef4c933056 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1158,9 +1158,33 @@ button {
   -gtk-icon-shadow: none; }
 button.circular {
   border-radius: 9999px;
-  -gtk-outline-radius: 9999px; }
+  -gtk-outline-radius: 9999px;
+  background-origin: padding-box, border-box;
+  background-clip: padding-box, border-box; }
   button.circular label {
     padding: 0; }
+  button.circular:not(.flat):not(:checked):not(:active):not(:disabled):not(:backdrop) {
+    color: #2e3436;
+    outline-color: rgba(46, 52, 54, 0.3);
+    border-color: #b6b6b3;
+    border-bottom-color: #91918c;
+    background-image: linear-gradient(to bottom, #e8e8e7, #dededd 60%, #cfcfcd);
+    text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+    -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);
+    background-image: linear-gradient(to bottom, #e8e8e7, #dededd 60%, #cfcfcd), linear-gradient(to top, #91918c 25%, #b6b6b3 50%);
+    border-color: transparent; }
+  button.circular:hover:not(:checked):not(:active):not(:disabled):not(:backdrop) {
+    color: #2e3436;
+    outline-color: rgba(46, 52, 54, 0.3);
+    border-color: #b6b6b3;
+    border-bottom-color: #91918c;
+    text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+    -gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+    box-shadow: inset 0 1px white;
+    background-image: linear-gradient(to bottom, #f7f7f7, #e8e8e7 60%, #dededd);
+    background-image: linear-gradient(to bottom, #f7f7f7, #e8e8e7 60%, #dededd), linear-gradient(to top, #91918c 25%, #b6b6b3 50%);
+    border-color: transparent; }
 
 .stack-switcher >
 button.needs-attention > label,