Add blank pane experience

styles/src/styleTree/contextMenu.ts

@@ -26,14 +26,19 @@ export default function contextMenu(colorScheme: ColorScheme) {
             hover: {
                 background: background(layer, "hovered"),
                 label: text(layer, "sans", "hovered", { size: "sm" }),
+                keystroke: {
+                    ...text(layer, "sans", "hovered", {
+                        size: "sm",
+                        weight: "bold",
+                    }),
+                    padding: { left: 3, right: 3 },
+                },
             },
             active: {
                 background: background(layer, "active"),
-                label: text(layer, "sans", "active", { size: "sm" }),
             },
             activeHover: {
                 background: background(layer, "active"),
-                label: text(layer, "sans", "active", { size: "sm" }),
             },
         },
         separator: {

styles/src/styleTree/welcome.ts

@@ -86,20 +86,24 @@ export default function welcome(colorScheme: ColorScheme) {
                 border: border(layer, "active"),
             },
         },
+        checkboxContainer: {
+            margin: {
+                top: 4,
+            },
+        },
         checkbox: {
             label: {
                 ...text(layer, "sans", interactive_text_size),
                 // Also supports margin, container, border, etc.
             },
-            container: {
-                margin: {
-                    top: 4,
-                },
+            icon: {
+                color: foreground(layer, "on"),
+                icon: "icons/check_12.svg",
+                dimensions: {
+                    width: 12,
+                    height: 12,
+                }
             },
-            width: 12,
-            height: 12,
-            checkIcon: "icons/check_12.svg",
-            checkIconColor: foreground(layer, "on"),
             default: {
                 ...checkboxBase,
                 background: background(layer, "default"),

styles/src/styleTree/workspace.ts

@@ -41,6 +41,34 @@ export default function workspace(colorScheme: ColorScheme) {
 
     return {
         background: background(layer),
+        blankPane: {
+            logo: {
+                color: background(layer, "on"),
+                icon: "icons/logo_96.svg",
+                dimensions: {
+                    width: 240,
+                    height: 240,
+                }
+            },
+            keyboardHints: {
+                margin: {
+                    top: 32
+                },
+                padding: {
+                    bottom: -8.
+                }
+            },
+            keyboardHint: {
+                ...text(colorScheme.lowest, "sans", "variant", { size: "sm" }),
+                margin: {
+                    bottom: 8
+                },
+                hover: {
+                    ...text(colorScheme.lowest, "sans", "hovered", { size: "sm" }),
+                }
+            },
+            keyboardHintWidth: 240,
+        },
         joiningProjectAvatar: {
             cornerRadius: 40,
             width: 80,