[gnome-shell-sass] OSK variables and key rounding

[Florian Müllner <fmuellner src gnome org>]

commit 93aa4e819398230ce5fe7fd82b74936b0c817147
Author: frederik.feichtmeier <frederik feichtmeier gmail com>
Date:   Tue Jul 2 14:29:40 2019 -0400

    OSK variables and key rounding
    
    - generate the OSK key colors from variables in _colors.scss without changing the design
    - add hover and active colors for all key, not only letter keys
    - use $button_radius for the OSK keys, buttons and entries (no value change for the latter)
    
    https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/610

 _common.scss | 56 ++++++++++++++++++++++++++++++++------------------------
 1 file changed, 32 insertions(+), 24 deletions(-)
---
diff --git a/_common.scss b/_common.scss
index 0b38c9c..f910a5b 100644
--- a/_common.scss
+++ b/_common.scss
@@ -25,8 +25,10 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
 
 /* GLOBALS */
 
-$panel-corner-radius: 6px;
-$medium_radius: 9px;
+
+$modal_radius: 9px;
+$button_radius: 5px;
+$panel-corner-radius: $button_radius + 1;
 
 $_trough_color: transparentize($fg_color, 0.9);
 $_bubble_borders_color: lighten($borders_color, if($variant=='light', 0%, 5%));
@@ -46,7 +48,7 @@ stage {
 
 /* Buttons */
 .button, %button {
-  border-radius: 5px;
+  border-radius: $button_radius;
   border-width: 1px;
   min-height: 22px;
   padding: 4px 32px;
@@ -68,21 +70,21 @@ stage {
   border-top: 1px solid $_bubble_borders_color;
 
   &:first-child {
-    border-radius: 0px 0px 0px $medium_radius;
+    border-radius: 0px 0px 0px $modal_radius;
   }
   &:last-child {
     border-right-width: 0px;
-    border-radius: 0px 0px $medium_radius 0px;
+    border-radius: 0px 0px $modal_radius 0px;
   }
   &:first-child:last-child {
     border-right-width: 0px;
-    border-radius: 0px 0px $medium_radius $medium_radius;
+    border-radius: 0px 0px $modal_radius $modal_radius;
   }
 }
 
 /* Entries */
 StEntry {
-  border-radius: 5px;
+  border-radius: $button_radius;
   padding: 4px;
   border-width: 1px;
   color: $fg_color;
@@ -192,7 +194,7 @@ StScrollBar {
 .flashspot { background-color: white; }
 
 .modal-dialog {
-  border-radius: 9px;
+  border-radius: $modal_radius;
   @extend %bubble-panel;
   .modal-dialog-content-box {
     padding: 24px;
@@ -589,7 +591,7 @@ StScrollBar {
   }
   .popup-menu-boxpointer,
   .candidate-popup-boxpointer {
-    -arrow-border-radius: $medium_radius;
+    -arrow-border-radius: $button_radius+4;
     -arrow-background-color: $bg_color;
     -arrow-border-width: 1px;
     -arrow-border-color: if($variant=='light', transparentize(black, 0.6), $borders_color);
@@ -1518,7 +1520,7 @@ StScrollBar {
 
   %icon_tile {
     color: $osd_fg_color;
-    border-radius: $medium_radius;
+    border-radius: $button_radius+4;
     padding: 6px;
     border: 1px solid transparent;
     transition-duration: 100ms;
@@ -1625,7 +1627,7 @@ StScrollBar {
     font-size: 11pt;
     width: 34em;
     margin: 5px;
-    border-radius: $medium-radius;
+    border-radius: $modal_radius;
     border: if($variant == 'light', none, $_bubble_borders_color);
     min-height: 64px;
     box-shadow: 0 1px 2px transparentize(black, 0.7);
@@ -1777,30 +1779,36 @@ StScrollBar {
   }
 
   .keyboard-key {
-    background-color: #393f3f;
+    $_key_bg: opacify(lighten($osd_bg_color, 9%), 1);
+    background-color: $_key_bg;
     min-height: 1.2em;
     min-width: 1.2em;
     font-size: 16pt;
-    border-radius: 3px;
-    border: 1px solid #464d4d;
-    color: #e5e5e5;
+    border-radius: $button_radius;
+    border: 1px solid $osd_outer_borders_color;
+    color: $osd_fg_color;
     &:focus { @include button(focus); }
-    &:hover,&:checked { @include button(hover); }
-    &:active { @include button(active);}
+    &:hover, &:checked { background-color: lighten($_key_bg, 3%); }
+    &:active { background-color: darken($_key_bg, 2%); }
     &:grayed { //FIXME
       background-color: $osd_bg_color;
       color: $osd_fg_color;
       border-color: $osd_borders_color;
     }
     &.default-key {
-      border-color: #2d3232;
-      background-color: #1d2020;
+      $_default_key_bg: opacify($osd_bg_color, 1);
+      border-color: $osd_outer_borders_color;
+      background-color: $_default_key_bg;
       background-size: 20px;
+      &:hover, &:checked { background-color: lighten($_default_key_bg, 3%); }
+      &:active { background-color: darken($_default_key_bg, 2%); }
     }
     &.enter-key {
-      border-color: #005684;
-      background-color: #006098;
+      border-color: lighten($selected_bg_color, 5%);
+      background-color: $selected_bg_color;
       background-image: url("resource:///org/gnome/shell/theme/key-enter.svg");
+      &:hover, &:checked { background-color: lighten($selected_bg_color, 3%); }
+      &:active { background-color: darken($selected_bg_color, 2%); }
     }
     &.shift-key-lowercase {
       background-image: url("resource:///org/gnome/shell/theme/key-shift.svg");
@@ -1839,8 +1847,8 @@ StScrollBar {
 
 .emoji-panel {
   .keyboard-key:latched {
-    border-color: #005684;
-    background-color: #006098;
+    border-color: lighten($selected_bg_color, 5%);
+    background-color: $selected_bg_color;
   }
 }
 
@@ -1904,7 +1912,7 @@ StScrollBar {
 
   StEntry {
     @extend %search_entry;
-    border-radius: 5px;
+    border-radius: $button_radius;
     @if $variant=='dark' {
       $_gdm_entry_bg: transparentize(lighten(desaturate(#241f31, 20%), 2%), 0.5);
       background-color: $_gdm_entry_bg;