oak-team/oak-gpui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
co-authored by Kay Simmons
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
styles/src/styleTree/picker.ts
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+6 -6
View File
@@ -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
+6 -6
View File
@@ -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
+127 -131
View File
@@ -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
+9
View File
@@ -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")),