[libadwaita/wip/exalm/osd: 6/6] stylesheet: .osd refinements

[Alexander Mikhaylenko <alexm src gnome org>]

commit 02802d8b5d8d18be6bf39705cc282d317eafe8ef
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Wed Dec 1 19:54:39 2021 +0500

    stylesheet: .osd refinements
    
    Make checks, links, switches, progress bars, scales and level bars use
    white accent instead, also change their focus rings.
    
    Since focus rings are also used on button.card, make a proper .osd card
    style as well.
    
    Fixes https://gitlab.gnome.org/GNOME/libadwaita/-/issues/245

 src/stylesheet/_colors.scss               |  5 +++++
 src/stylesheet/widgets/_buttons.scss      | 14 +++++++++++++-
 src/stylesheet/widgets/_checks.scss       | 12 ++++++++++++
 src/stylesheet/widgets/_entries.scss      |  8 ++++++++
 src/stylesheet/widgets/_level-bar.scss    |  6 ++++++
 src/stylesheet/widgets/_links.scss        | 25 ++++++++++++++++++++-----
 src/stylesheet/widgets/_lists.scss        | 12 ++++++++++++
 src/stylesheet/widgets/_menus.scss        |  7 +++++++
 src/stylesheet/widgets/_misc.scss         | 17 +++++++++++++++++
 src/stylesheet/widgets/_progress-bar.scss |  4 ++++
 src/stylesheet/widgets/_scale.scss        | 11 +++++++++++
 src/stylesheet/widgets/_switch.scss       | 11 +++++++++++
 src/stylesheet/widgets/_toolbars.scss     |  6 ++++++
 13 files changed, 132 insertions(+), 6 deletions(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index e5015d48..8f81e42f 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -64,6 +64,11 @@ $slider_hover_color: white;
 $osd_fg_color: transparentize(white, .1);
 $osd_text_color: white;
 $osd_bg_color: transparentize(black, 0.3);
+$osd_fill_bg_color: transparentize(white, .25);
+$osd_fill_fg_color: transparentize(black, .25);
+$osd_focus_color: transparentize(white, .5);
+$osd_link_color: gtkmix($accent_bg_color, $osd_text_color, 50%);
+$osd_link_visited_color: gtkmix($accent_bg_color, $osd_text_color, 75%);
 
 $tooltip_border_color: transparentize(white, 0.9);
 $shadow_color: transparentize(black, 0.9);
diff --git a/src/stylesheet/widgets/_buttons.scss b/src/stylesheet/widgets/_buttons.scss
index abb3fa33..7e7b70ff 100644
--- a/src/stylesheet/widgets/_buttons.scss
+++ b/src/stylesheet/widgets/_buttons.scss
@@ -19,6 +19,10 @@ button {
     @include focus-ring();
     transition: $button_transition;
 
+    .osd &:focus:focus-visible {
+      outline-color: $osd_focus_color;
+    }
+
     @at-root %button_basic_raised, & {
       background-color: $button_color;
 
@@ -107,7 +111,7 @@ button {
   &.osd {
     min-width: 32px;
     min-height: 32px;
-    @include focus-ring($outer: true, $offset: 1px);
+    @include focus-ring($outer: true, $offset: 1px, $fc: $osd_focus_color);
     transition: $button_transition;
 
     color: $osd_fg_color;
@@ -153,6 +157,10 @@ button {
     @include focus-ring($outer: true, $offset: 1px);
     transition: $button_transition;
 
+    .osd &:focus:focus-visible {
+      outline-color: $osd_focus_color;
+    }
+
     &:hover {
       background-image: image(gtkalpha(currentColor, .1));
     }
@@ -209,6 +217,10 @@ button {
     @include focus-ring();
     transition: $button_transition;
 
+    .osd &:focus:focus-visible {
+      outline-color: $osd_focus_color;
+    }
+
     box-shadow: none;
 
     @if $contrast == 'high' {
diff --git a/src/stylesheet/widgets/_checks.scss b/src/stylesheet/widgets/_checks.scss
index 8f0bd40d..262602c3 100644
--- a/src/stylesheet/widgets/_checks.scss
+++ b/src/stylesheet/widgets/_checks.scss
@@ -5,6 +5,10 @@ checkbutton {
 
   @include focus-ring();
 
+  .osd &:focus:focus-visible {
+    outline-color: $osd_focus_color;
+  }
+
   &.text-button {
     // this is for a nice focus on check and radios text
     padding: 4px;
@@ -47,6 +51,14 @@ radio {
   &:disabled {
     filter: opacity($disabled_opacity);
   }
+
+  .osd & {
+    &:checked,
+    &:indeterminate {
+      background-color: $osd_fill_bg_color;
+      color: $osd_fill_fg_color;
+    }
+  }
 }
 
 check {
diff --git a/src/stylesheet/widgets/_entries.scss b/src/stylesheet/widgets/_entries.scss
index 12c56a12..a58acb2f 100644
--- a/src/stylesheet/widgets/_entries.scss
+++ b/src/stylesheet/widgets/_entries.scss
@@ -17,6 +17,10 @@ entry {
 
     @include focus-ring($focus-state: ':focus-within');
 
+    .osd &:focus-within {
+      outline-color: $osd_focus_color;
+    }
+
     > text {
       > placeholder {
         @extend .dim-label;
@@ -102,6 +106,10 @@ entry {
       box-shadow: none;
     }
   }
+
+  .osd & > progress > trough > progress {
+    border-color: $osd_fill_bg_color;
+  }
 }
 
 treeview entry {
diff --git a/src/stylesheet/widgets/_level-bar.scss b/src/stylesheet/widgets/_level-bar.scss
index e3513834..27795a15 100644
--- a/src/stylesheet/widgets/_level-bar.scss
+++ b/src/stylesheet/widgets/_level-bar.scss
@@ -91,4 +91,10 @@ levelbar {
       }
     }
   }
+
+  .osd & > trough > block {
+    &.high, &:not(.empty) {
+      background-color: $osd_fill_bg_color;
+    }
+  }
 }
diff --git a/src/stylesheet/widgets/_links.scss b/src/stylesheet/widgets/_links.scss
index a3a5fba6..254a40ed 100644
--- a/src/stylesheet/widgets/_links.scss
+++ b/src/stylesheet/widgets/_links.scss
@@ -1,14 +1,15 @@
-%link,
-link {
+link,
+button.link {
   color: $link_color;
   text-decoration: underline;
+  font-weight: inherit;
 
   &:visited {
     color: $link_visited_color;
   }
 
   &:hover {
-    color: gtkshade($link_color, 1.1);
+    color: gtkshade(currentColor, 1.1);
   }
 
   &:active {
@@ -16,15 +17,29 @@ link {
   }
 
   &:disabled { color: gtkalpha(currentColor, $disabled_opacity); }
+
+  .osd & {
+    color: $osd_link_color;
+
+    &:visited {
+      color: $osd_link_visited_color;
+    }
+
+    &:active {
+      color: $osd_link_color;
+    }
+  }
 }
 
 link {
   @include focus-ring();
+
+  .osd &:focus:focus-visible {
+    outline-color: $osd_focus_color;
+  }
 }
 
 button.link {
-  @extend %link;
-
   &,
   &:hover,
   &:active,
diff --git a/src/stylesheet/widgets/_lists.scss b/src/stylesheet/widgets/_lists.scss
index e32ce14b..56ecf3e4 100644
--- a/src/stylesheet/widgets/_lists.scss
+++ b/src/stylesheet/widgets/_lists.scss
@@ -27,6 +27,10 @@ list {
 row {
   @include focus-ring();
 
+  .osd &:focus:focus-visible {
+    outline-color: $osd_focus_color;
+  }
+
   background-clip: padding-box;
 
   &.activatable {
@@ -138,6 +142,10 @@ row.combo {
 %boxed_list_row {
   @include focus-ring($offset: -1px);
 
+  .osd &:focus:focus-visible {
+    outline-color: $osd_focus_color;
+  }
+
   transition: 200ms $ease-out-quad;
   border-bottom: 1px solid $border_color;
 
@@ -203,6 +211,10 @@ row.expander {
     color: $accent_color;
   }
 
+  .osd &:checked image.expander-row-arrow:not(:disabled) {
+    color: inherit;
+  }
+
   image.expander-row-arrow:disabled {
     filter: opacity($disabled_opacity);
   }
diff --git a/src/stylesheet/widgets/_menus.scss b/src/stylesheet/widgets/_menus.scss
index aa53762f..b92d31c6 100644
--- a/src/stylesheet/widgets/_menus.scss
+++ b/src/stylesheet/widgets/_menus.scss
@@ -88,6 +88,13 @@ popover.menu {
     }
   }
 
+  .osd & {
+    check, radio {
+      background: none;
+      color: inherit;
+    }
+  }
+
   check:checked { -gtk-icon-source: 
-gtk-scaled(-gtk-recolor(url("assets/check-small-symbolic.symbolic.png")),
                                                 -gtk-recolor(url("assets/check-small 2-symbolic symbolic 
png"))); }
 
diff --git a/src/stylesheet/widgets/_misc.scss b/src/stylesheet/widgets/_misc.scss
index fee78f83..ed88a3ef 100644
--- a/src/stylesheet/widgets/_misc.scss
+++ b/src/stylesheet/widgets/_misc.scss
@@ -154,10 +154,27 @@ statuspage {
     box-shadow: 0 0 0 1px if($contrast == 'high', $border_color, transparentize(black, 0.97)),
                 0 1px 3px 1px transparentize(black, .93),
                 0 2px 6px 2px transparentize(black, .97);
+
+    .osd &, &.osd {
+      background-color: gtkalpha(currentColor, .1);
+      color: inherit;
+
+      @if $contrast == 'high' {
+        box-shadow: 0 0 0 1px $border_color;
+      } @else {
+        box-shadow: none;
+      }
+    }
   }
 
   @include focus-ring($offset: -1px);
 
+  .osd &, &.osd {
+    &:focus:focus-visible {
+      outline-color: $osd_focus_color;
+    }
+  }
+
   &.activatable {
     transition: $button_transition;
 
diff --git a/src/stylesheet/widgets/_progress-bar.scss b/src/stylesheet/widgets/_progress-bar.scss
index 1f4a6139..6c345091 100644
--- a/src/stylesheet/widgets/_progress-bar.scss
+++ b/src/stylesheet/widgets/_progress-bar.scss
@@ -84,4 +84,8 @@ progressbar {
   }
 
   > trough.empty > progress { all: unset; } // makes the progress indicator disappear, when the fraction is 0
+
+  .osd & > trough > progress {
+    background-color: $osd_fill_bg_color;
+  }
 }
diff --git a/src/stylesheet/widgets/_scale.scss b/src/stylesheet/widgets/_scale.scss
index 3f1d7286..6c21a55f 100644
--- a/src/stylesheet/widgets/_scale.scss
+++ b/src/stylesheet/widgets/_scale.scss
@@ -67,6 +67,17 @@ scale {
     }
   }
 
+  .osd & {
+    &:focus:focus-visible > trough {
+      outline-color: $osd_focus_color;
+    }
+
+    > trough > highlight {
+      background-color: $osd_fill_bg_color;
+      color: $osd_fill_fg_color;
+    }
+  }
+
   &:disabled {
     filter: opacity($disabled_opacity);
 
diff --git a/src/stylesheet/widgets/_switch.scss b/src/stylesheet/widgets/_switch.scss
index b274a0ff..3d585352 100644
--- a/src/stylesheet/widgets/_switch.scss
+++ b/src/stylesheet/widgets/_switch.scss
@@ -55,4 +55,15 @@ switch {
       > image {  color: inherit; }
     }
   }
+
+  .osd & {
+    &:focus:focus-visible {
+      outline-color: $osd_focus_color;
+    }
+
+    &:checked {
+      background-color: transparentize($osd_fill_bg_color, .15);
+      color: $osd_fill_fg_color;
+    }
+  }
 }
diff --git a/src/stylesheet/widgets/_toolbars.scss b/src/stylesheet/widgets/_toolbars.scss
index 8e081334..32d5eb18 100644
--- a/src/stylesheet/widgets/_toolbars.scss
+++ b/src/stylesheet/widgets/_toolbars.scss
@@ -7,6 +7,12 @@
     }
   }
 
+  &.osd button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
+    &:focus:focus-visible {
+      outline-color: $osd_focus_color;
+    }
+  }
+
   menubutton:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
     &.image-button > button {
       @extend %button_basic_flat;