Merge pull request #2276 from zed-industries/improve-picker-state-contrast

Nate Butler created 2 years ago

Improve picker state contrast

Change summary

styles/src/styleTree/picker.ts       |   8 +
styles/src/styleTree/projectPanel.ts | 146 +++++++++++++++---------------
styles/src/styleTree/statusBar.ts    |   4 
styles/src/styleTree/welcome.ts      |  49 +++++----
styles/src/styleTree/workspace.ts    |  11 +
5 files changed, 115 insertions(+), 103 deletions(-)

Detailed changes

styles/src/styleTree/picker.ts

@@ -1,4 +1,5 @@
 import { ColorScheme } from "../themes/common/colorScheme"
+import { withOpacity } from "../utils/color"
 import { background, border, text } from "./components"
 
 export default function picker(colorScheme: ColorScheme) {
@@ -53,14 +54,17 @@ export default function picker(colorScheme: ColorScheme) {
             text: text(layer, "sans", "variant"),
             highlightText: text(layer, "sans", "accent", { weight: "bold" }),
             active: {
-                background: background(layer, "base", "active"),
+                background: withOpacity(
+                    background(layer, "base", "active"),
+                    0.5
+                ),
                 text: text(layer, "sans", "base", "active"),
                 highlightText: text(layer, "sans", "accent", {
                     weight: "bold",
                 }),
             },
             hover: {
-                background: background(layer, "hovered"),
+                background: withOpacity(background(layer, "hovered"), 0.5),
             },
         },
         inputEditor,

styles/src/styleTree/projectPanel.ts

@@ -3,80 +3,80 @@ import { withOpacity } from "../utils/color"
 import { background, border, foreground, text } from "./components"
 
 export default function projectPanel(colorScheme: ColorScheme) {
-    let layer = colorScheme.middle
+  let layer = colorScheme.middle
 
-    let baseEntry = {
-        height: 24,
-        iconColor: foreground(layer, "variant"),
-        iconSize: 8,
-        iconSpacing: 8,
-    }
+  let baseEntry = {
+    height: 24,
+    iconColor: foreground(layer, "variant"),
+    iconSize: 8,
+    iconSpacing: 8,
+  }
 
-    let entry = {
-        ...baseEntry,
-        text: text(layer, "mono", "variant", { size: "sm" }),
-        hover: {
-            background: background(layer, "variant", "hovered"),
-        },
-        active: {
-            background: background(layer, "active"),
-            text: text(layer, "mono", "active", { size: "sm" }),
-        },
-        activeHover: {
-            background: background(layer, "active"),
-            text: text(layer, "mono", "active", { size: "sm" }),
-        },
-    }
+  let entry = {
+    ...baseEntry,
+    text: text(layer, "mono", "variant", { size: "sm" }),
+    hover: {
+      background: background(layer, "variant", "hovered"),
+    },
+    active: {
+      background: colorScheme.isLight ? withOpacity(background(layer, "active"), 0.5) : background(layer, "active"),
+      text: text(layer, "mono", "active", { size: "sm" }),
+    },
+    activeHover: {
+      background: background(layer, "active"),
+      text: text(layer, "mono", "active", { size: "sm" }),
+    },
+  }
 
-    return {
-        openProjectButton: {
-            background: background(layer),
-            border: border(layer, "active"),
-            cornerRadius: 4,
-            margin: {
-                top: 16,
-                left: 16,
-                right: 16,
-            },
-            padding: {
-                top: 3,
-                bottom: 3,
-                left: 7,
-                right: 7,
-            },
-            ...text(layer, "sans", "default", { size: "sm" }),
-            hover: {
-                ...text(layer, "sans", "default", { size: "sm" }),
-                background: background(layer, "hovered"),
-                border: border(layer, "active"),
-            },
-        },
-        background: background(layer),
-        padding: { left: 12, right: 12, top: 6, bottom: 6 },
-        indentWidth: 8,
-        entry,
-        draggedEntry: {
-            ...baseEntry,
-            text: text(layer, "mono", "on", { size: "sm" }),
-            background: withOpacity(background(layer, "on"), 0.9),
-            border: border(layer),
-        },
-        ignoredEntry: {
-            ...entry,
-            text: text(layer, "mono", "disabled"),
-        },
-        cutEntry: {
-            ...entry,
-            text: text(layer, "mono", "disabled"),
-            active: {
-                background: background(layer, "active"),
-                text: text(layer, "mono", "disabled", { size: "sm" }),
-            },
-        },
-        filenameEditor: {
-            background: background(layer, "on"),
-            text: text(layer, "mono", "on", { size: "sm" }),
-            selection: colorScheme.players[0],
-        },
-    }
+  return {
+    openProjectButton: {
+      background: background(layer),
+      border: border(layer, "active"),
+      cornerRadius: 4,
+      margin: {
+        top: 16,
+        left: 16,
+        right: 16,
+      },
+      padding: {
+        top: 3,
+        bottom: 3,
+        left: 7,
+        right: 7,
+      },
+      ...text(layer, "sans", "default", { size: "sm" }),
+      hover: {
+        ...text(layer, "sans", "default", { size: "sm" }),
+        background: background(layer, "hovered"),
+        border: border(layer, "active"),
+      },
+    },
+    background: background(layer),
+    padding: { left: 12, right: 12, top: 6, bottom: 6 },
+    indentWidth: 8,
+    entry,
+    draggedEntry: {
+      ...baseEntry,
+      text: text(layer, "mono", "on", { size: "sm" }),
+      background: withOpacity(background(layer, "on"), 0.9),
+      border: border(layer),
+    },
+    ignoredEntry: {
+      ...entry,
+      text: text(layer, "mono", "disabled"),
+    },
+    cutEntry: {
+      ...entry,
+      text: text(layer, "mono", "disabled"),
+      active: {
+        background: background(layer, "active"),
+        text: text(layer, "mono", "disabled", { size: "sm" }),
+      },
+    },
+    filenameEditor: {
+      background: background(layer, "on"),
+      text: text(layer, "mono", "on", { size: "sm" }),
+      selection: colorScheme.players[0],
+    },
+  }
 }

styles/src/styleTree/statusBar.ts

@@ -29,8 +29,8 @@ export default function statusBar(colorScheme: ColorScheme) {
             padding: { left: 6, right: 6 },
             ...text(layer, "sans", "variant"),
             hover: {
-                ...text(layer, "sans", "on")
-            }
+                ...text(layer, "sans", "on"),
+            },
         },
         autoUpdateProgressMessage: text(layer, "sans", "variant"),
         autoUpdateDoneMessage: text(layer, "sans", "variant"),

styles/src/styleTree/welcome.ts

@@ -1,11 +1,15 @@
-
-import { ColorScheme } from "../themes/common/colorScheme";
-import { withOpacity } from "../utils/color";
-import { border, background, foreground, text, TextProperties } from "./components";
-
+import { ColorScheme } from "../themes/common/colorScheme"
+import { withOpacity } from "../utils/color"
+import {
+    border,
+    background,
+    foreground,
+    text,
+    TextProperties,
+} from "./components"
 
 export default function welcome(colorScheme: ColorScheme) {
-    let layer = colorScheme.highest;
+    let layer = colorScheme.highest
 
     let checkboxBase = {
         cornerRadius: 4,
@@ -20,9 +24,9 @@ export default function welcome(colorScheme: ColorScheme) {
         margin: {
             right: 8,
             top: 5,
-            bottom: 5
+            bottom: 5,
         },
-    };
+    }
 
     let interactive_text_size: TextProperties = { size: "sm" }
 
@@ -34,7 +38,7 @@ export default function welcome(colorScheme: ColorScheme) {
             dimensions: {
                 width: 64,
                 height: 64,
-            }
+            },
         },
         logoSubheading: {
             ...text(layer, "sans", "variant", { size: "md" }),
@@ -46,13 +50,13 @@ export default function welcome(colorScheme: ColorScheme) {
         buttonGroup: {
             margin: {
                 top: 8,
-                bottom: 16
+                bottom: 16,
             },
         },
         headingGroup: {
             margin: {
                 top: 8,
-                bottom: 12
+                bottom: 12,
             },
         },
         checkboxGroup: {
@@ -62,7 +66,7 @@ export default function welcome(colorScheme: ColorScheme) {
             padding: {
                 left: 12,
                 top: 2,
-                bottom: 2
+                bottom: 2,
             },
         },
         button: {
@@ -71,7 +75,7 @@ export default function welcome(colorScheme: ColorScheme) {
             cornerRadius: 4,
             margin: {
                 top: 4,
-                bottom: 4
+                bottom: 4,
             },
             padding: {
                 top: 3,
@@ -90,8 +94,7 @@ export default function welcome(colorScheme: ColorScheme) {
             ...text(layer, "sans", "variant", { size: "2xs" }),
             padding: {
                 top: -4,
-
-            }
+            },
         },
         checkboxContainer: {
             margin: {
@@ -99,7 +102,7 @@ export default function welcome(colorScheme: ColorScheme) {
             },
             padding: {
                 bottom: 8,
-            }
+            },
         },
         checkbox: {
             label: {
@@ -112,28 +115,28 @@ export default function welcome(colorScheme: ColorScheme) {
                 dimensions: {
                     width: 12,
                     height: 12,
-                }
+                },
             },
             default: {
                 ...checkboxBase,
                 background: background(layer, "default"),
-                border: border(layer, "active")
+                border: border(layer, "active"),
             },
             checked: {
                 ...checkboxBase,
                 background: background(layer, "hovered"),
-                border: border(layer, "active")
+                border: border(layer, "active"),
             },
             hovered: {
                 ...checkboxBase,
                 background: background(layer, "hovered"),
-                border: border(layer, "active")
+                border: border(layer, "active"),
             },
             hoveredAndChecked: {
                 ...checkboxBase,
                 background: background(layer, "hovered"),
-                border: border(layer, "active")
-            }
-        }
+                border: border(layer, "active"),
+            },
+        },
     }
 }

styles/src/styleTree/workspace.ts

@@ -55,7 +55,12 @@ export default function workspace(colorScheme: ColorScheme) {
                 },
             },
             logoShadow: {
-                color: withOpacity(colorScheme.isLight ? "#FFFFFF" : colorScheme.lowest.base.default.background, colorScheme.isLight ? 1 : 0.6),
+                color: withOpacity(
+                    colorScheme.isLight
+                        ? "#FFFFFF"
+                        : colorScheme.lowest.base.default.background,
+                    colorScheme.isLight ? 1 : 0.6
+                ),
                 icon: "icons/logo_96.svg",
                 dimensions: {
                     width: 256,
@@ -74,12 +79,12 @@ export default function workspace(colorScheme: ColorScheme) {
                     top: 3,
                     left: 8,
                     right: 8,
-                    bottom: 3
+                    bottom: 3,
                 },
                 cornerRadius: 8,
                 hover: {
                     ...text(layer, "sans", "active", { size: "sm" }),
-                }
+                },
             },
             keyboardHintWidth: 320,
         },