Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP Allow applying domains to theme ramps

Browse source 
Co-Authored-By: Kay Simmons <3323631+Kethku@users.noreply.github.com>
This commit is contained in:
Nate Butler 2022-09-26 17:41:59 -04:00
parent 506c28d2b6
commit 01570504ad
6 changed files with 152 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

4
styles/src/styleTree/picker.ts
View file

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

4
styles/src/styleTree/projectPanel.ts
View file

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

12
styles/src/styleTree/statusBar.ts
View file

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

12
styles/src/styleTree/workspace.ts
View file

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

258
styles/src/themes/common/ramps.ts
View file

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

9
styles/src/themes/internal/zed-pro.ts
View file

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