Fixup some theme inconsistencies and incorrect layer selections

K Simmons created 3 years ago

Change summary

styles/src/styleTree/editor.ts    | 14 +++++++-------
styles/src/styleTree/picker.ts    |  2 +-
styles/src/styleTree/workspace.ts | 10 +++++-----
styles/src/themes/cave.ts         |  2 +-
4 files changed, 14 insertions(+), 14 deletions(-)

Detailed changes

styles/src/styleTree/editor.ts

@@ -177,25 +177,25 @@ export default function editor(colorScheme: ColorScheme) {
       colorScheme.players[7],
     ],
     autocomplete: {
-      background: background(colorScheme.lowest),
+      background: background(colorScheme.middle),
       cornerRadius: 8,
       padding: 4,
       margin: {
         left: -14,
       },
-      border: border(colorScheme.lowest),
+      border: border(colorScheme.middle),
       shadow: colorScheme.popoverShadow,
-      matchHighlight: foreground(colorScheme.lowest, "accent"),
+      matchHighlight: foreground(colorScheme.middle, "accent"),
       item: autocompleteItem,
       hoveredItem: {
         ...autocompleteItem,
-        matchHighlight: foreground(colorScheme.lowest, "accent", "hovered"),
-        background: background(colorScheme.lowest, "hovered"),
+        matchHighlight: foreground(colorScheme.middle, "accent", "hovered"),
+        background: background(colorScheme.middle, "hovered"),
       },
       selectedItem: {
         ...autocompleteItem,
-        matchHighlight: foreground(colorScheme.lowest, "accent", "active"),
-        background: background(colorScheme.lowest, "active"),
+        matchHighlight: foreground(colorScheme.middle, "accent", "active"),
+        background: background(colorScheme.middle, "active"),
       },
     },
     diagnosticHeader: {

styles/src/styleTree/picker.ts

@@ -2,7 +2,7 @@ import { ColorScheme } from "../themes/common/colorScheme";
 import { background, border, text } from "./components";
 
 export default function picker(colorScheme: ColorScheme) {
-  let layer = colorScheme.highest;
+  let layer = colorScheme.lowest;
   return {
     background: background(layer),
     border: border(layer),

styles/src/styleTree/workspace.ts

@@ -21,13 +21,13 @@ export default function workspace(colorScheme: ColorScheme) {
       left: 8,
       right: 8,
     },
-    ...text(layer, "sans", { size: "xs" }),
-    background: background(layer),
+    ...text(layer, "sans", "variant", { size: "xs" }),
+    background: background(layer, "variant"),
     border: border(layer),
     hover: {
-      ...text(layer, "sans", "hovered", { size: "xs" }),
-      background: background(layer, "hovered"),
-      border: border(layer, "hovered"),
+      ...text(layer, "sans", "variant", "hovered", { size: "xs" }),
+      background: background(layer, "variant", "hovered"),
+      border: border(layer, "variant", "hovered"),
     },
   };
   const avatarWidth = 18;

styles/src/themes/cave.ts

@@ -15,7 +15,7 @@ export const dark = createColorScheme(`${name}-dark`, false, {
       "#e2dfe7",
       "#efecf4",
     ])
-    .domain([0, 0.3, 0.45, 0.6, 0.65, 0.7, 0.85, 1]),
+    .domain([0, 0.15, 0.45, 0.6, 0.65, 0.7, 0.85, 1]),
   red: colorRamp(chroma("#be4678")),
   orange: colorRamp(chroma("#aa573c")),
   yellow: colorRamp(chroma("#a06e3b")),