[gnome-shell/wip/snwh/style-updates: 66/100] theme: improved keyboard style

[Sam Hewitt <snwh src gnome org>]

commit 80bd81573f9cc049345a3fe1ca72041fe0c68519
Author: Sam Hewitt <sam snwh org>
Date:   Fri Dec 31 11:03:18 2021 -0330

    theme: improved keyboard style

 data/theme/gnome-shell-sass/widgets/_keyboard.scss | 44 ++++++++++++++--------
 1 file changed, 28 insertions(+), 16 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/widgets/_keyboard.scss 
b/data/theme/gnome-shell-sass/widgets/_keyboard.scss
index 4f7f2e86b6..c6f03f9da9 100644
--- a/data/theme/gnome-shell-sass/widgets/_keyboard.scss
+++ b/data/theme/gnome-shell-sass/widgets/_keyboard.scss
@@ -2,14 +2,15 @@
 
 $key_size: 1.2em;
 $key_border_radius: $base_border_radius + 3px;
-$key_bg_color:  $bg_color;
+$key_bg_color:  darken($osd_fg_color, 70%);
 // $default_key_bg_color: darken($key_bg_color, 4%);
-$default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten($osd_bg_color, 2%));
+$default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken($key_bg_color, 10%));
 
 
 // draw keys using button function
 #keyboard {
-  background-color: transparentize(if($variant=='light', darken($bg_color, 5%), darken($bg_color, 8%)), 0.1);
+  // background-color: transparentize(if($variant=='light', darken($bg_color, 5%), darken($bg_color, 8%)), 
0.1);
+  background-color: $osd_bg_color;
   box-shadow: inset 0 1px 0 0 $osd_outer_borders_color;
 
   .page-indicator {
@@ -31,11 +32,11 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
 // the keys
 .keyboard-key {
 
-  @include button(normal, $c:$key_bg_color);
+  @include button(normal, $c:$key_bg_color, $tc:$osd_fg_color);
 
   &:focus { @include button(focus);}
-  &:hover, &:checked { @include button(hover, $c: $key_bg_color);}
-  &:active { @include button(active, $c: $key_bg_color); }
+  &:hover, &:checked { @include button(hover, $c: $key_bg_color, $tc:$osd_fg_color);}
+  &:active { @include button(active, $c: $key_bg_color, $tc:$osd_fg_color); }
 
   @include fontsize($base_font_size + 5);
   font-weight: bold;
@@ -53,28 +54,39 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
 
   // non-character keys
   &.default-key {
-    @include button(normal, $c:$default_key_bg_color);
-    &:hover, &:checked {@include button(hover, $c: $default_key_bg_color);}
-    &:active { @include button(active, $c: $default_key_bg_color);}
+    @include button(normal, $c:$default_key_bg_color, $tc:$osd_fg_color);
+    &:hover, &:checked {@include button(hover, $c: $default_key_bg_color, $tc:$osd_fg_color);}
+    &:active { @include button(active, $c: $default_key_bg_color, $tc:$osd_fg_color);}
     border-radius: $key_border_radius;
   }
 
   // enter key is suggested-action
   &.enter-key {
     @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
-    &:hover, &:checked { @include button(hover, $c: lighten($selected_bg_color, 3%));}
-    &:active {@include button(active, $c: darken($selected_bg_color, 2%));}
+    &:hover, &:checked { @include button(hover, $c: lighten($selected_bg_color, 3%), 
$tc:$selected_fg_color);}
+    &:active {@include button(active, $c: darken($selected_bg_color, 2%), $tc:$selected_fg_color);}
     border-radius: $key_border_radius;
+    color: $osd_fg_color;
   }
 
-  &.shift-key-uppercase { color: $selected_bg_color }
+  &.shift-key-lowercase {}
+  
+  // pressed shift has different style
+  &.shift-key-uppercase { 
+    background-color: lighten($key_bg_color, 20%);
+    color: $osd_bg_color;
+    &:hover {
+      background-color: lighten($key_bg_color, 25%);
+      color: lighten($osd_bg_color, 5%);
+    }
+  }
 
+  // size of icons on keys
   StIcon { icon-size: 24px; }
 }
 
 // long press on a key popup
 .keyboard-subkeys {
-  color: $osd_fg_color;
   -arrow-border-radius: $modal_radius;
   -arrow-background-color: $osd_bg_color;
   -arrow-border-width: 1px;
@@ -84,11 +96,11 @@ $default_key_bg_color: if($variant=='light', darken($osd_bg_color, 11%), lighten
   -boxpointer-gap: $base_spacing;
 
   .keyboard-key {
-    @include button(normal, $c:$key_bg_color);
+    @include button(normal, $c:$key_bg_color, $tc:$osd_fg_color);
 
     &:focus { @include button(focus);}
-    &:hover, &:checked { @include button(hover, $c: $key_bg_color);}
-    &:active { @include button(active, $c: $key_bg_color); }
+    &:hover, &:checked { @include button(hover, $c: $key_bg_color, $tc:$osd_fg_color);}
+    &:active { @include button(active, $c: $key_bg_color, $tc:$osd_fg_color); }
 
     border-radius:$base_border_radius;
   }