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

@@ -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:

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:

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 {

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 {