Add a button-style for subtle highlighting

and use it to subtly highlight commonly used symbols in the
accent-views of the German layouts.

Part-of: <https://gitlab.gnome.org/World/Phosh/squeekboard/-/merge_requests/637>

data/keyboards/de.yaml

@@ -1,6 +1,7 @@
 ---
 outlines:
     default:          { width: 35.33, height: 52 }
+    subtle-highlight: { width: 35.33, height: 52 }
     altline:          { width: 52.67, height: 52 }
     change-view:      { width: 52.67, height: 52 }
     wide:             { width: 62,    height: 52 }
@@ -31,7 +32,7 @@ views:
     eschars:
         - "ä è é ö ü Ä È É Ö Ü"
         - "à â ê î ô À Â È Î Ô"
-        - "show_numbers  « » ç Ç æ œ ß  BackSpace"
+        - "show_numbers  « » ç Ç æ œ ß-subtle-highlight  BackSpace"
         - "show_letters show_eschars preferences         space        „ “ Return"
 
 buttons:
@@ -79,3 +80,18 @@ buttons:
         outline: "altline"
         icon: "key-enter"
         keysym: "Return"
+    ä:
+        outline: "subtle-highlight"
+    ö:
+        outline: "subtle-highlight"
+    ü:
+        outline: "subtle-highlight"
+    Ä:
+        outline: "subtle-highlight"
+    Ö:
+        outline: "subtle-highlight"
+    Ü:
+        outline: "subtle-highlight"
+    ß-subtle-highlight:
+        outline: "subtle-highlight"
+        text: "ß"

data/keyboards/de_wide.yaml

@@ -1,6 +1,7 @@
 ---
 outlines:
     default:          { width: 48,   height: 42 }
+    subtle-highlight: { width: 48,   height: 42 }
     halfwidth:        { width: 24,   height: 42 }
     thin:             { width: 30,   height: 42 }
     narrow:           { width: 40.5, height: 42 }
@@ -32,9 +33,9 @@ views:
         - "show_numbers   \\ / § π τ [ ]  BackSpace"
         - "show_letters show_eschars preferences         space        ,-narrow .-narrow Return"
     eschars:
-        - "ä è é ö ü Ä È É Ö Ü"
+        - "ä-subtle-highlight è é ö-subtle-highlight ü-subtle-highlight Ä-subtle-highlight È É Ö-subtle-highlight Ü-subtle-highlight"
         - "à â ê î ô À Â È Î Ô"
-        - "show_numbers  « » ç Ç æ œ ß  BackSpace"
+        - "show_numbers  « » ç Ç æ œ ß-subtle-highlight  BackSpace"
         - "show_letters show_eschars preferences         space        „ “ Return"
 
 buttons:
@@ -104,3 +105,24 @@ buttons:
     ß-thin:
         outline: "thin"
         text: "ß"
+    ä-subtle-highlight:
+        outline: "subtle-highlight"
+        text: "ä"
+    ö-subtle-highlight:
+        outline: "subtle-highlight"
+        text: "ö"
+    ü-subtle-highlight:
+        outline: "subtle-highlight"
+        text: "ü"
+    Ä-subtle-highlight:
+        outline: "subtle-highlight"
+        text: "Ä"
+    Ö-subtle-highlight:
+        outline: "subtle-highlight"
+        text: "Ö"
+    Ü-subtle-highlight:
+        outline: "subtle-highlight"
+        text: "Ü"
+    ß-subtle-highlight:
+        outline: "subtle-highlight"
+        text: "ß"

data/keyboards/terminal/de.yaml

@@ -1,6 +1,7 @@
 ---
 outlines:
     default:          { width: 35.33,  height: 46 }
+    subtle-highlight: { width: 35.33,  height: 46 }
     halfwidth:        { width: 17.665, height: 46 }
     narrow:           { width: 26.335, height: 46 }
     special:          { width: 44,     height: 46 }
@@ -245,3 +246,17 @@ buttons:
         outline: "halfwidth"
     _:
         outline: "halfwidth"
+    ä:
+        outline: "subtle-highlight"
+    ö:
+        outline: "subtle-highlight"
+    ü:
+        outline: "subtle-highlight"
+    Ä:
+        outline: "subtle-highlight"
+    Ö:
+        outline: "subtle-highlight"
+    Ü:
+        outline: "subtle-highlight"
+    ß:
+        outline: "subtle-highlight"

data/keyboards/terminal/de_wide.yaml

@@ -1,6 +1,7 @@
 ---
 outlines:
     default:          { width: 54,   height: 37 }
+    subtle-highlight: { width: 54,   height: 37 }
     halfwidth:        { width: 27,   height: 37 }
     narrow:           { width: 40.5, height: 37 }
     special:          { width: 54,   height: 37 }
@@ -249,3 +250,17 @@ buttons:
         outline: "halfwidth"
     _:
         outline: "halfwidth"
+    ä:
+        outline: "subtle-highlight"
+    ö:
+        outline: "subtle-highlight"
+    ü:
+        outline: "subtle-highlight"
+    Ä:
+        outline: "subtle-highlight"
+    Ö:
+        outline: "subtle-highlight"
+    Ü:
+        outline: "subtle-highlight"
+    ß:
+        outline: "subtle-highlight"

data/style-Adwaita:dark.css

@@ -13,6 +13,14 @@ sq_button:active {
     background: #747077;
 }
 
+sq_button.subtle-highlight {
+    background: #3f3e41;
+}
+
+sq_button.subtle-highlight:active {
+    background: #676669;
+}
+
 sq_button.emoji-group {
     background: #3f3e41;
     border-bottom: 0.4999px;

data/style.css

@@ -14,6 +14,14 @@ sq_button:active {
     background: alpha(@theme_fg_color, 0.11);
 }
 
+sq_button.subtle-highlight {
+    background: alpha(@theme_fg_color, 0.105);
+}
+
+sq_button.subtle-highlight:active {
+    background: alpha(@theme_fg_color, 0.16);
+}
+
 sq_button.emoji-group {
     background: alpha(@theme_fg_color, 0.105);
     border-bottom: 0.4999px;