Fixed #25 on-screen keyboard

colors.json

@@ -8,6 +8,10 @@
             "_comment" : "Hover color for buttons.",
             "default" : "ACCENT_HOVER"
         },
+        "BUTTON_ACTIVE" : {
+            "_comment" : "Hover color for buttons.",
+            "default" : "ACCENT_ACTIVE"
+        },
         "BUTTON_INSENSITIVE" : {
             "_comment" : "Color of disabled buttons",
             "default" : "ACCENT_INSENSITIVE"
@@ -53,6 +57,21 @@
                 "a" : 1
             }
         },
+        "ACCENT_ACTIVE" : {
+            "_comment" : "Active color in active buttons/toggles",
+
+            "light" : {
+                "s" : 48,
+                "l" : 52,
+                "a" : 1
+            },
+
+            "dark" : {
+                "s" : 72,
+                "l" : 18,
+                "a" : 1
+            }
+        },
         "ACCENT_INSENSITIVE" : {
             "_comment" : "Accent color for insensitive elements",
             
@@ -99,6 +118,21 @@
                 "a" : 0.13
             }
         },
+        "ACCENT-DISABLED_ACTIVE" : {
+            "_comment" : "Hover color in buttons / disabled toggles",
+
+            "light" : {
+                "s" : 35,
+                "l" : 80,
+                "a" : 0.95
+            },
+
+            "dark" : {
+                "s" : 40,
+                "l" : 85,
+                "a" : 0.2
+            }
+        },
 
         "ACCENT-SECONDARY-COLOR" : {
             "_comment" : "Capture button in Screenshot UI, checkboxes; borders when focusing on element",
@@ -208,6 +242,21 @@
                 "a" : 1
             }
         },
+        "ACCENT-FILLED_ACTIVE" : {
+            "_comment" : "Active effect for accent filled color",
+
+            "light" : {
+                "s" : 65,
+                "l" : 55,
+                "a" : 1
+            },
+
+            "dark" : {
+                "s" : 100,
+                "l" : 82,
+                "a" : 1
+            }
+        },
         "ACCENT-FILLED_INSENSITIVE" : {
             "_comment" : "Vibrant color for insensitive elements",
 

scripts/theme.py

@@ -41,12 +41,13 @@ class Theme:
                 replace_keywords(f"{self.temp_folder}/{apply_file}",
                                  ("BUTTON-COLOR", "ACCENT-FILLED-COLOR"),
                                  ("BUTTON_HOVER", "ACCENT-FILLED_HOVER"),
+                                 ("BUTTON_ACTIVE", "ACCENT-FILLED_ACTIVE"),
                                  ("BUTTON_INSENSITIVE", "ACCENT-FILLED_INSENSITIVE"),
                                  ("BUTTON-TEXT-COLOR", "TEXT-BLACK-COLOR"),
                                  ("BUTTON-TEXT_SECONDARY", "TEXT-BLACK_SECONDARY"))
 
     def __add__(self, other):
-        """
+        """Z
         Add to main styles another styles
         :param other: styles to add
         :return: new Theme object

theme/gnome-shell_css/keyboard.css

@@ -0,0 +1,96 @@
+/* On-screen keyboard */
+
+/* keyboard background */
+#keyboard {
+    background-color: BACKGROUND-COLOR;
+    color: TEXT-PRIMARY-COLOR;
+    box-shadow: inset 0 1px 0 0 BORDER-MENU-SHADOW;
+}
+
+
+/* keyboard keys */
+.keyboard-key {
+    border-radius: 15px;
+    box-shadow: inset 0 0 0 1px BORDER-SHADOW;
+    background-color: ACCENT-DISABLED-COLOR;
+    color: TEXT-PRIMARY-COLOR;
+    transition-duration: 75ms;
+}
+
+.keyboard-key:hover { background-color: ACCENT-DISABLED_HOVER; }
+.keyboard-key:active { background-color: ACCENT-DISABLED_ACTIVE; }
+.keyboard-key:checked { background-color: ACCENT-FILLED-COLOR; }
+
+
+/* non-character keys */ 
+.keyboard-key.default-key {
+    color: BUTTON-TEXT-COLOR;
+    background-color: BUTTON-COLOR;
+}
+
+.keyboard-key.default-key:hover { background-color: BUTTON_HOVER; }
+
+.keyboard-key.default-key:active,
+.keyboard-key.default-key:checked {
+    background-color: BUTTON_ACTIVE;
+}
+
+/* ctrl / alt / shift */
+.keyboard-key.default-key:latched,
+.keyboard-key.shift-key-uppercase {
+    border-color: BORDER-SHADOW;
+    background-color: BUTTON_ACTIVE;
+}
+
+
+/* long press on key popup */
+.keyboard-subkeys {
+    -arrow-border-radius: 18px;
+    -arrow-background-color: BACKGROUND-COLOR;
+    -arrow-border-width: 1px;
+    -arrow-border-color: BORDER-MENU-SHADOW;
+    color: TEXT-PRIMARY-COLOR;
+    padding: 6px;
+}
+
+
+/* emojis */
+.emoji-page .keyboard-key {
+    background-color: transparent;
+    border: none;
+}
+
+.emoji-page .keyboard-key:hover,
+.emoji-page .keyboard-key:active {
+    background-color: ACCENT-DISABLED_HOVER;
+}
+
+.emoji-panel .keyboard-key:latched {
+    border-color: BORDER-SHADOW;
+    background-color: BUTTON_ACTIVE;
+}
+
+
+/* word suggestions list */
+.word-suggestions {
+    spacing: 12px;
+    min-height: 22pt;
+    padding: 0;
+    padding-top: 6px; /* same as keyboard buttons padding */
+    color: BUTTON-TEXT-COLOR;
+}
+
+/* suggestion button */
+.word-suggestions StButton {
+    border-radius: 10px;
+    padding: 0px 15px;
+    color: TEXT-PRIMARY-COLOR;
+    transition-duration: 100ms;
+}
+
+.word-suggestions StButton:hover,
+.word-suggestions StButton:active,
+.word-suggestions StButton:checked {
+    box-shadow: inset 0 0 0 1px BORDER-SHADOW;
+    background-color: ACCENT-DISABLED-COLOR;
+}