WIP Allow applying domains to theme ramps

Nate Butler and Kay Simmons created 

Co-Authored-By: Kay Simmons <3323631+Kethku@users.noreply.github.com>

Change summary

styles/src/styleTree/picker.ts        |   4 
styles/src/styleTree/projectPanel.ts  |   4 
styles/src/styleTree/statusBar.ts     |  12 
styles/src/styleTree/workspace.ts     |  12 
styles/src/themes/common/ramps.ts     | 258 ++++++++++++++--------------
styles/src/themes/internal/zed-pro.ts |   9 +
6 files changed, 152 insertions(+), 147 deletions(-)

Detailed changes

styles/src/styleTree/picker.ts 🔗 

@@ -21,7 +21,7 @@ export default function picker(colorScheme: ColorScheme) {
       },
       cornerRadius: 8,
       text: text(layer, "sans"),
-      highlightText: text(layer, "sans", { weight: "bold" }),
+      highlightText: text(layer, "sans", "info", "active", { weight: "bold" }),
       active: {
         background: background(layer, "active"),
         text: text(layer, "sans", "active"),
@@ -32,7 +32,7 @@ export default function picker(colorScheme: ColorScheme) {
     },
     border: border(layer),
     empty: {
-      text: text(layer, "sans"),
+      text: text(layer, "sans", "variant"),
       padding: {
         bottom: 4,
         left: 12,

styles/src/styleTree/projectPanel.ts 🔗 

@@ -17,11 +17,11 @@ export default function projectPanel(colorScheme: ColorScheme) {
         background: background(layer, "on", "hovered"),
       },
       active: {
-        background: background(layer, "info", "active"),
+        background: background(layer, "active"),
         text: text(layer, "mono", "active", { size: "sm" }),
       },
       activeHover: {
-        background: background(layer, "info", "hovered"),
+        background: background(layer, "active"),
         text: text(layer, "mono", "active", { size: "sm" }),
       },
     },

styles/src/styleTree/statusBar.ts 🔗 

@@ -24,9 +24,9 @@ export default function statusBar(colorScheme: ColorScheme) {
       right: 6,
     },
     border: border(layer, { top: true, overlay: true }),
-    cursorPosition: text(layer, "sans"),
-    autoUpdateProgressMessage: text(layer, "sans"),
-    autoUpdateDoneMessage: text(layer, "sans"),
+    cursorPosition: text(layer, "sans", "variant"),
+    autoUpdateProgressMessage: text(layer, "sans", "variant"),
+    autoUpdateDoneMessage: text(layer, "sans", "variant"),
     lspStatus: {
       ...diagnosticStatusContainer,
       iconSpacing: 4,
@@ -45,11 +45,11 @@ export default function statusBar(colorScheme: ColorScheme) {
       hover: text(layer, "sans", "hovered"),
     },
     feedback: {
-      ...text(layer, "sans"),
-      hover: text(layer, "sans"),
+      ...text(layer, "sans", "variant"),
+      hover: text(layer, "sans", "variant", "hovered"),
     },
     diagnosticSummary: {
-      height: 16,
+      height: 20,
       iconWidth: 16,
       iconSpacing: 2,
       summarySpacing: 6,

styles/src/styleTree/workspace.ts 🔗 

@@ -50,7 +50,7 @@ export default function workspace(colorScheme: ColorScheme) {
     titlebar: {
       avatarWidth: 18,
       avatarMargin: 8,
-      height: 33,
+      height: 33, // 32px + 1px for overlaid border
       background: background(layer),
       padding: {
         left: 80,
@@ -72,7 +72,8 @@ export default function workspace(colorScheme: ColorScheme) {
       },
       border: border(layer, { bottom: true, overlay: true }),
       signInPrompt: {
-        background: background(layer, "on"),
+        ...text(layer, "sans", { size: "xs" }),
+        background: background(layer),
         border: border(layer, "on"),
         cornerRadius: 6,
         margin: {
@@ -84,11 +85,10 @@ export default function workspace(colorScheme: ColorScheme) {
           left: 7,
           right: 7,
         },
-        ...text(layer, "sans", { size: "xs" }),
         hover: {
-          ...text(layer, "sans", "on", "hovered", { size: "xs" }),
-          background: background(layer, "on", "hovered"),
-          border: border(layer, "on", "hovered"),
+          ...text(layer, "sans", "hovered", { size: "xs" }),
+          background: background(layer, "hovered"),
+          border: border(layer, "hovered"),
         },
       },
       offlineIcon: {

styles/src/themes/common/ramps.ts 🔗 

@@ -21,21 +21,17 @@ export function createColorScheme(name: string, isLight: boolean, colorRamps: {
   if (isLight) {
     for (var rampName in colorRamps) {
       baseRamps[rampName] = chroma
-        .scale((colorRamps[rampName].colors as any)())
-        .domain([1, 0]);
+        .scale(colorRamps[rampName].colors(100).reverse());
     }
     baseRamps.neutral = chroma
-      .scale((colorRamps.neutral.colors as any)())
-      .domain([1, 0]);
+      .scale(colorRamps.neutral.colors(100).reverse());
   } else {
     for (var rampName in colorRamps) {
       baseRamps[rampName] = chroma
-        .scale((colorRamps[rampName].colors as any)())
-        .domain([0, 1]);
+        .scale(colorRamps[rampName].colors(100));
     }
     baseRamps.neutral = chroma
-      .scale((colorRamps.neutral.colors as any)())
-      .domain([0, 1]);
+      .scale(colorRamps.neutral.colors(100));
   }
 
   let baseSet = {
@@ -230,8 +226,8 @@ function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
     },
     foreground: {
       default: 0.7,
-      hovered: 0.7,
-      pressed: 0.7,
+      hovered: 1,
+      pressed: 1,
       active: 0,
       disabled: 0.4,
     },
@@ -264,96 +260,96 @@ function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
   let infoSet = buildStyleSet(ramps.blue, {
     background: {
       default: 0,
-      hovered: 0.15,
-      pressed: 0.25,
-      active: 1,
+      hovered: 0.1,
+      pressed: 0.2,
+      active: 0.4,
       disabled: 0,
     },
     border: {
       default: 0.2,
       hovered: 0.2,
       pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
+      active: 0.6,
+      disabled: 0.1,
     },
     foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
+      default: 0.9,
+      hovered: 0.9,
+      pressed: 0.9,
+      active: 0.9,
+      disabled: 0.2,
     },
   });
 
   let positiveSet = buildStyleSet(ramps.green, {
     background: {
       default: 0,
-      hovered: 0.15,
-      pressed: 0.25,
-      active: 1,
+      hovered: 0.1,
+      pressed: 0.2,
+      active: 0.4,
       disabled: 0,
     },
     border: {
       default: 0.2,
       hovered: 0.2,
       pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
+      active: 0.6,
+      disabled: 0.1,
     },
     foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
+      default: 0.9,
+      hovered: 0.9,
+      pressed: 0.9,
+      active: 0.9,
+      disabled: 0.2,
     },
   });
 
   let warningSet = buildStyleSet(ramps.yellow, {
     background: {
       default: 0,
-      hovered: 0.15,
-      pressed: 0.25,
-      active: 1,
+      hovered: 0.1,
+      pressed: 0.2,
+      active: 0.4,
       disabled: 0,
     },
     border: {
       default: 0.2,
       hovered: 0.2,
       pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
+      active: 0.6,
+      disabled: 0.1,
     },
     foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
+      default: 0.9,
+      hovered: 0.9,
+      pressed: 0.9,
+      active: 0.9,
+      disabled: 0.2,
     },
   });
 
   let negativeSet = buildStyleSet(ramps.red, {
     background: {
       default: 0,
-      hovered: 0.15,
-      pressed: 0.25,
-      active: 1,
+      hovered: 0.1,
+      pressed: 0.2,
+      active: 0.4,
       disabled: 0,
     },
     border: {
-      default: 0.2,
+      default: 0.1,
       hovered: 0.2,
       pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
+      active: 0.6,
+      disabled: 0.1,
     },
     foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
+      default: 0.9,
+      hovered: 0.9,
+      pressed: 0.9,
+      active: 0.9,
+      disabled: 0.2,
     },
   });
 
@@ -444,96 +440,96 @@ function middleLayer(ramps: RampSet, isLight: boolean): Layer {
   let infoSet = buildStyleSet(ramps.blue, {
     background: {
       default: 0,
-      hovered: 0.15,
-      pressed: 0.25,
-      active: 1,
+      hovered: 0.1,
+      pressed: 0.2,
+      active: 0.4,
       disabled: 0,
     },
     border: {
       default: 0.2,
       hovered: 0.2,
       pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
+      active: 0.6,
+      disabled: 0.1,
     },
     foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
+      default: 0.9,
+      hovered: 0.9,
+      pressed: 0.9,
+      active: 0.9,
+      disabled: 0.2,
     },
   });
 
   let positiveSet = buildStyleSet(ramps.green, {
     background: {
       default: 0,
-      hovered: 0.15,
-      pressed: 0.25,
-      active: 1,
+      hovered: 0.1,
+      pressed: 0.2,
+      active: 0.4,
       disabled: 0,
     },
     border: {
       default: 0.2,
       hovered: 0.2,
       pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
+      active: 0.6,
+      disabled: 0.1,
     },
     foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
+      default: 0.9,
+      hovered: 0.9,
+      pressed: 0.9,
+      active: 0.9,
+      disabled: 0.2,
     },
   });
 
   let warningSet = buildStyleSet(ramps.yellow, {
     background: {
       default: 0,
-      hovered: 0.15,
-      pressed: 0.25,
-      active: 1,
+      hovered: 0.1,
+      pressed: 0.2,
+      active: 0.4,
       disabled: 0,
     },
     border: {
       default: 0.2,
       hovered: 0.2,
       pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
+      active: 0.6,
+      disabled: 0.1,
     },
     foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
+      default: 0.9,
+      hovered: 0.9,
+      pressed: 0.9,
+      active: 0.9,
+      disabled: 0.2,
     },
   });
 
   let negativeSet = buildStyleSet(ramps.red, {
     background: {
       default: 0,
-      hovered: 0.15,
-      pressed: 0.25,
-      active: 1,
+      hovered: 0.1,
+      pressed: 0.2,
+      active: 0.4,
       disabled: 0,
     },
     border: {
       default: 0.2,
       hovered: 0.2,
       pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
+      active: 0.6,
+      disabled: 0.1,
     },
     foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
+      default: 0.9,
+      hovered: 0.9,
+      pressed: 0.9,
+      active: 0.9,
+      disabled: 0.2,
     },
   });
 
@@ -625,96 +621,96 @@ function topLayer(ramps: RampSet, isLight: boolean): Layer {
   let infoSet = buildStyleSet(ramps.blue, {
     background: {
       default: 0,
-      hovered: 0.15,
-      pressed: 0.25,
-      active: 1,
+      hovered: 0.1,
+      pressed: 0.2,
+      active: 0.4,
       disabled: 0,
     },
     border: {
       default: 0.2,
       hovered: 0.2,
       pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
+      active: 0.6,
+      disabled: 0.1,
     },
     foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
+      default: 0.9,
+      hovered: 0.9,
+      pressed: 0.9,
+      active: 0.9,
+      disabled: 0.2,
     },
   });
 
   let positiveSet = buildStyleSet(ramps.green, {
     background: {
       default: 0,
-      hovered: 0.15,
-      pressed: 0.25,
-      active: 1,
+      hovered: 0.1,
+      pressed: 0.2,
+      active: 0.4,
       disabled: 0,
     },
     border: {
       default: 0.2,
       hovered: 0.2,
       pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
+      active: 0.6,
+      disabled: 0.1,
     },
     foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
+      default: 0.9,
+      hovered: 0.9,
+      pressed: 0.9,
+      active: 0.9,
+      disabled: 0.2,
     },
   });
 
   let warningSet = buildStyleSet(ramps.yellow, {
     background: {
       default: 0,
-      hovered: 0.15,
-      pressed: 0.25,
-      active: 1,
+      hovered: 0.1,
+      pressed: 0.2,
+      active: 0.4,
       disabled: 0,
     },
     border: {
       default: 0.2,
       hovered: 0.2,
       pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
+      active: 0.6,
+      disabled: 0.1,
     },
     foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
+      default: 0.9,
+      hovered: 0.9,
+      pressed: 0.9,
+      active: 0.9,
+      disabled: 0.2,
     },
   });
 
   let negativeSet = buildStyleSet(ramps.red, {
     background: {
       default: 0,
-      hovered: 0.15,
-      pressed: 0.25,
-      active: 1,
+      hovered: 0.1,
+      pressed: 0.2,
+      active: 0.4,
       disabled: 0,
     },
     border: {
       default: 0.2,
       hovered: 0.2,
       pressed: 0.2,
-      active: 0.5,
-      disabled: 0.2,
+      active: 0.6,
+      disabled: 0.1,
     },
     foreground: {
-      default: 1,
-      hovered: 1,
-      pressed: 1,
-      active: 0,
-      disabled: 0.4,
+      default: 0.9,
+      hovered: 0.9,
+      pressed: 0.9,
+      active: 0.9,
+      disabled: 0.2,
     },
   });

styles/src/themes/internal/zed-pro.ts 🔗 

@@ -13,6 +13,15 @@ const ramps = {
     "#DADADA",
     "#E6E6E6",
     "#FFFFFF",
+  ]).domain([
+    0,
+    0.1,
+    0.2,
+    0.3,
+    0.7,
+    0.8,
+    0.9,
+    1
   ]),
   red: colorRamp(chroma("#DC604F")),
   orange: colorRamp(chroma("#DE782F")),