From 01570504ad771318c39b152432e3a665b355db74 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Mon, 26 Sep 2022 17:41:59 -0400 Subject: [PATCH] WIP Allow applying domains to theme ramps Co-Authored-By: Kay Simmons <3323631+Kethku@users.noreply.github.com> --- 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(-) diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts index 7732fdff5fdc43471495e14eb123190c85b76523..1c1e4495c390f2c939a4d882a0f7484f01eec07f 100644 --- a/styles/src/styleTree/picker.ts +++ b/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, diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts index 437f76f51df511f42582124c5bf0fc636e4c2106..699457004714de26909524be4af8119c91cd39c1 100644 --- a/styles/src/styleTree/projectPanel.ts +++ b/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" }), }, }, diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts index 4f4aa09b4240d5cc9e778e4849c37c720e552d85..219b0081c21ff6571fe0fcb63f7836b324692028 100644 --- a/styles/src/styleTree/statusBar.ts +++ b/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, diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index fdeac5689ffc9132d9e35f4d12aecd3bef9f7dad..c31003992870118b7c6ae8329478a27bb327fe7d 100644 --- a/styles/src/styleTree/workspace.ts +++ b/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: { diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts index 1bc9f8329968826496ff4531fe0f770907c7b422..32cd0b10a838d6914f0d24f7217cba2c56a36cf6 100644 --- a/styles/src/themes/common/ramps.ts +++ b/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, }, }); diff --git a/styles/src/themes/internal/zed-pro.ts b/styles/src/themes/internal/zed-pro.ts index 2ce7ebfa327325ead521459fd073dcde4fa4a8a0..16b9c682f203a41411b60c1566edf0e275aba768 100644 --- a/styles/src/themes/internal/zed-pro.ts +++ b/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")),