From 583816a3846a9ea19e5d86da89aec6fd20490174 Mon Sep 17 00:00:00 2001
From: MoonlightWave-12
 <135532-MoonlightWave-12@users.noreply.gitlab.gnome.org>
Date: Tue, 2 Apr 2024 19:45:19 +0200
Subject: [PATCH] Add placeholder-buttons to emoji-layout

to enhance contrast between usable and unusable buttons.

Part-of: <https://gitlab.gnome.org/World/Phosh/squeekboard/-/merge_requests/636>
---
 data/keyboards/emoji/us.yaml      |  6 ++++--
 data/keyboards/emoji/us_wide.yaml |  6 ++++--
 data/style-Adwaita:dark.css       | 11 +++++++++++
 data/style.css                    | 11 +++++++++++
 4 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/data/keyboards/emoji/us.yaml b/data/keyboards/emoji/us.yaml
index 294294a5..b69428b4 100644
--- a/data/keyboards/emoji/us.yaml
+++ b/data/keyboards/emoji/us.yaml
@@ -1,11 +1,12 @@
 ---
 outlines:
     default:       { width: 52,   height: 52 }
+    placeholder:   { width: 52,   height: 52 }
     special:       { width: 52,   height: 52 }
     change-view:   { width: 52,   height: 52 }
     change-view-2: { width: 36.4, height: 56 }
     emoji-group:   { width: 52,   height: 52 }
-    infobar:       { width: 260,  height: 52 }
+    placeholder-2: { width: 260,  height: 52 }
 
 views:
     base:
@@ -854,10 +855,11 @@ buttons:
         icon: "edit-clear-symbolic"
         keysym: BackSpace
     InfoBar:
-        outline: "infobar"
+        outline: "placeholder-2"
         text: ""
         label: "🧘 + 🏾 = 🧘🏾"
     0:
+       outline: "placeholder"
        text: ""
        label: ""
     1:
diff --git a/data/keyboards/emoji/us_wide.yaml b/data/keyboards/emoji/us_wide.yaml
index 9e8e3964..7e7febbf 100644
--- a/data/keyboards/emoji/us_wide.yaml
+++ b/data/keyboards/emoji/us_wide.yaml
@@ -1,11 +1,12 @@
 ---
 outlines:
     default:       { width: 104,  height: 52 }
+    placeholder:   { width: 104,  height: 52 }
     special:       { width: 104,  height: 52 }
     change-view:   { width: 104,  height: 52 }
     change-view-2: { width: 72.8, height: 56 }
     emoji-group:   { width: 104,  height: 52 }
-    infobar:       { width: 520,  height: 52 }
+    placeholder-2: { width: 520,  height: 52 }
 
 views:
     base:
@@ -854,10 +855,11 @@ buttons:
         icon: "edit-clear-symbolic"
         keysym: BackSpace
     InfoBar:
-        outline: "infobar"
+        outline: "placeholder-2"
         text: ""
         label: "🧘 + 🏾 = 🧘🏾"
     0:
+       outline: "placeholder"
        text: ""
        label: ""
     1:
diff --git a/data/style-Adwaita:dark.css b/data/style-Adwaita:dark.css
index a3e68124..ed0faca85b 100644
--- a/data/style-Adwaita:dark.css
+++ b/data/style-Adwaita:dark.css
@@ -43,6 +43,17 @@ sq_button.change-view-2:active {
     border-color: alpha(white, 0.5);
 }
 
+sq_button.placeholder,
+sq_button.placeholder-2 {
+    background: #171618;
+}
+
+sq_button.placeholder:active,
+sq_button.placeholder-2:active {
+    background: initial;
+    box-shadow: initial;
+}
+
 sq_button.altline,
 sq_button.special,
 sq_button.wide {
diff --git a/data/style.css b/data/style.css
index 219d967b..4a0bb2d6 100644
--- a/data/style.css
+++ b/data/style.css
@@ -44,6 +44,17 @@ sq_button.change-view-2:active {
     border-color: alpha(@theme_fg_color, 0.275);
 }
 
+sq_button.placeholder,
+sq_button.placeholder-2 {
+    background: alpha(@theme_fg_color, 0.035);
+}
+
+sq_button.placeholder:active,
+sq_button.placeholder-2:active {
+    background: initial;
+    box-shadow: initial;
+}
+
 sq_button.altline,
 sq_button.special,
 sq_button.wide {