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

[Alexander Mikhaylenko <alexm src gnome org>]

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

    stylesheet: .osd refinements
    
    Make checks, switches, progress bars, scales and level bars use white color
    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               |  3 +++
 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/_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     |  5 +++++
 12 files changed, 109 insertions(+), 1 deletion(-)
---
diff --git a/src/stylesheet/_colors.scss b/src/stylesheet/_colors.scss
index 6ff2eb86..705805ab 100644
--- a/src/stylesheet/_colors.scss
+++ b/src/stylesheet/_colors.scss
@@ -68,6 +68,9 @@ $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);
 
 $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 1389fa8e..b870d54d 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/_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 2f1aabc0..c15734e6 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..0aa8c8d0 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: $osd_fill_bg_color;
+      color: $osd_fill_fg_color;
+    }
+  }
 }
diff --git a/src/stylesheet/widgets/_toolbars.scss b/src/stylesheet/widgets/_toolbars.scss
index 8e081334..5c29df59 100644
--- a/src/stylesheet/widgets/_toolbars.scss
+++ b/src/stylesheet/widgets/_toolbars.scss
@@ -52,6 +52,11 @@
     }
   }
 
+  &.osd button:focus:focus-visible,
+  .osd & button:focus:focus-visible {
+    outline-color: $osd_focus_color;
+  }
+
   // add vertical margins to common widgets on toolbars to avoid them spanning
   // the whole height
   entry,