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

Rework darkest color in base16, shadows, and add hoverPopover styleTree

Browse Source
This commit is contained in:
Keith Simmons
2022-06-07 11:47:38 -07:00
parent 0c4f798a2d
commit 02249dc2e8
8 changed files with 128 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/src/themes/common/base16.ts
+85 -88
View File
@@ -14,7 +14,6 @@ export function createTheme(
name: string,
isLight: boolean,
ramps: { [rampName: string]: Scale },
blend?: number
): Theme {
if (isLight) {
for (var rampName in ramps) {
@@ -25,100 +24,99 @@ export function createTheme(
ramps.neutral = ramps.neutral.domain([0, 7]);
}
if (blend === undefined) {
blend = isLight ? 0.12 : 0.24;
}
let blend = isLight ? 0.12 : 0.24;
function rampColor(ramp: Scale, index: number): ColorToken {
function sample(ramp: Scale, index: number): ColorToken {
return color(ramp(index).hex());
}
const darkest = color(ramps.neutral(isLight ? 7 : 0).hex());
const backgroundColor = {
// Title bar
100: {
base: rampColor(ramps.neutral, 1.25),
hovered: rampColor(ramps.neutral, 1.5),
active: rampColor(ramps.neutral, 1.75),
base: sample(ramps.neutral, 1.25),
hovered: sample(ramps.neutral, 1.5),
active: sample(ramps.neutral, 1.75),
},
// Midground (panels, etc)
300: {
base: rampColor(ramps.neutral, 1),
hovered: rampColor(ramps.neutral, 1.25),
active: rampColor(ramps.neutral, 1.5),
base: sample(ramps.neutral, 1),
hovered: sample(ramps.neutral, 1.25),
active: sample(ramps.neutral, 1.5),
},
// Editor
500: {
base: rampColor(ramps.neutral, 0),
hovered: rampColor(ramps.neutral, 0.25),
active: rampColor(ramps.neutral, 0.5),
base: sample(ramps.neutral, 0),
hovered: sample(ramps.neutral, 0.25),
active: sample(ramps.neutral, 0.5),
},
on300: {
base: rampColor(ramps.neutral, 0),
hovered: rampColor(ramps.neutral, 0.25),
active: rampColor(ramps.neutral, 0.5),
base: sample(ramps.neutral, 0),
hovered: sample(ramps.neutral, 0.25),
active: sample(ramps.neutral, 0.5),
},
on500: {
base: rampColor(ramps.neutral, 1.25),
hovered: rampColor(ramps.neutral, 1.5),
active: rampColor(ramps.neutral, 1.75),
base: sample(ramps.neutral, 1.25),
hovered: sample(ramps.neutral, 1.5),
active: sample(ramps.neutral, 1.75),
},
ok: {
base: withOpacity(rampColor(ramps.green, 0.5), 0.15),
hovered: withOpacity(rampColor(ramps.green, 0.5), 0.2),
active: withOpacity(rampColor(ramps.green, 0.5), 0.25),
base: withOpacity(sample(ramps.green, 0.5), 0.15),
hovered: withOpacity(sample(ramps.green, 0.5), 0.2),
active: withOpacity(sample(ramps.green, 0.5), 0.25),
},
error: {
base: withOpacity(rampColor(ramps.red, 0.5), 0.15),
hovered: withOpacity(rampColor(ramps.red, 0.5), 0.2),
active: withOpacity(rampColor(ramps.red, 0.5), 0.25),
base: withOpacity(sample(ramps.red, 0.5), 0.15),
hovered: withOpacity(sample(ramps.red, 0.5), 0.2),
active: withOpacity(sample(ramps.red, 0.5), 0.25),
},
warning: {
base: withOpacity(rampColor(ramps.yellow, 0.5), 0.15),
hovered: withOpacity(rampColor(ramps.yellow, 0.5), 0.2),
active: withOpacity(rampColor(ramps.yellow, 0.5), 0.25),
base: withOpacity(sample(ramps.yellow, 0.5), 0.15),
hovered: withOpacity(sample(ramps.yellow, 0.5), 0.2),
active: withOpacity(sample(ramps.yellow, 0.5), 0.25),
},
info: {
base: withOpacity(rampColor(ramps.blue, 0.5), 0.15),
hovered: withOpacity(rampColor(ramps.blue, 0.5), 0.2),
active: withOpacity(rampColor(ramps.blue, 0.5), 0.25),
base: withOpacity(sample(ramps.blue, 0.5), 0.15),
hovered: withOpacity(sample(ramps.blue, 0.5), 0.2),
active: withOpacity(sample(ramps.blue, 0.5), 0.25),
},
};
const borderColor = {
primary: rampColor(ramps.neutral, isLight ? 1.5 : 0),
secondary: rampColor(ramps.neutral, isLight ? 1.25 : 1),
muted: rampColor(ramps.neutral, isLight ? 1 : 3),
active: rampColor(ramps.neutral, isLight ? 4 : 3),
onMedia: withOpacity(rampColor(ramps.neutral, 0), 0.1),
ok: withOpacity(rampColor(ramps.green, 0.5), 0.15),
error: withOpacity(rampColor(ramps.red, 0.5), 0.15),
warning: withOpacity(rampColor(ramps.yellow, 0.5), 0.15),
info: withOpacity(rampColor(ramps.blue, 0.5), 0.15),
primary: sample(ramps.neutral, isLight ? 1.5 : 0),
secondary: sample(ramps.neutral, isLight ? 1.25 : 1),
muted: sample(ramps.neutral, isLight ? 1 : 3),
active: sample(ramps.neutral, isLight ? 4 : 3),
onMedia: withOpacity(darkest, 0.1),
ok: withOpacity(sample(ramps.green, 0.5), 0.15),
error: withOpacity(sample(ramps.red, 0.5), 0.15),
warning: withOpacity(sample(ramps.yellow, 0.5), 0.15),
info: withOpacity(sample(ramps.blue, 0.5), 0.15),
};
const textColor = {
primary: rampColor(ramps.neutral, 6),
secondary: rampColor(ramps.neutral, 5),
muted: rampColor(ramps.neutral, 5),
placeholder: rampColor(ramps.neutral, 4),
active: rampColor(ramps.neutral, 7),
feature: rampColor(ramps.blue, 0.5),
ok: rampColor(ramps.green, 0.5),
error: rampColor(ramps.red, 0.5),
warning: rampColor(ramps.yellow, 0.5),
info: rampColor(ramps.blue, 0.5),
onMedia: rampColor(ramps.neutral, isLight ? 0 : 7),
primary: sample(ramps.neutral, 6),
secondary: sample(ramps.neutral, 5),
muted: sample(ramps.neutral, 5),
placeholder: sample(ramps.neutral, 4),
active: sample(ramps.neutral, 7),
feature: sample(ramps.blue, 0.5),
ok: sample(ramps.green, 0.5),
error: sample(ramps.red, 0.5),
warning: sample(ramps.yellow, 0.5),
info: sample(ramps.blue, 0.5),
onMedia: darkest,
};
const player = {
1: buildPlayer(rampColor(ramps.blue, 0.5)),
2: buildPlayer(rampColor(ramps.green, 0.5)),
3: buildPlayer(rampColor(ramps.magenta, 0.5)),
4: buildPlayer(rampColor(ramps.orange, 0.5)),
5: buildPlayer(rampColor(ramps.violet, 0.5)),
6: buildPlayer(rampColor(ramps.cyan, 0.5)),
7: buildPlayer(rampColor(ramps.red, 0.5)),
8: buildPlayer(rampColor(ramps.yellow, 0.5)),
1: buildPlayer(sample(ramps.blue, 0.5)),
2: buildPlayer(sample(ramps.green, 0.5)),
3: buildPlayer(sample(ramps.magenta, 0.5)),
4: buildPlayer(sample(ramps.orange, 0.5)),
5: buildPlayer(sample(ramps.violet, 0.5)),
6: buildPlayer(sample(ramps.cyan, 0.5)),
7: buildPlayer(sample(ramps.red, 0.5)),
8: buildPlayer(sample(ramps.yellow, 0.5)),
};
const editor = {
@@ -126,16 +124,16 @@ export function createTheme(
indent_guide: borderColor.muted,
indent_guide_active: borderColor.secondary,
line: {
active: rampColor(ramps.neutral, 1),
highlighted: rampColor(ramps.neutral, 1.25), // TODO: Where is this used?
active: sample(ramps.neutral, 1),
highlighted: sample(ramps.neutral, 1.25), // TODO: Where is this used?
},
highlight: {
selection: player[1].selectionColor,
occurrence: withOpacity(rampColor(ramps.neutral, 3.5), blend),
activeOccurrence: withOpacity(rampColor(ramps.neutral, 3.5), blend * 2), // TODO: Not hooked up - https://github.com/zed-industries/zed/issues/751
occurrence: withOpacity(sample(ramps.neutral, 3.5), blend),
activeOccurrence: withOpacity(sample(ramps.neutral, 3.5), blend * 2), // TODO: Not hooked up - https://github.com/zed-industries/zed/issues/751
matchingBracket: backgroundColor[500].active, // TODO: Not hooked up
match: rampColor(ramps.violet, 0.15),
activeMatch: withOpacity(rampColor(ramps.violet, 0.4), blend * 2), // TODO: Not hooked up - https://github.com/zed-industries/zed/issues/751
match: sample(ramps.violet, 0.15),
activeMatch: withOpacity(sample(ramps.violet, 0.4), blend * 2), // TODO: Not hooked up - https://github.com/zed-industries/zed/issues/751
related: backgroundColor[500].hovered,
},
gutter: {
@@ -146,59 +144,59 @@ export function createTheme(
const syntax: Syntax = {
primary: {
color: rampColor(ramps.neutral, 7),
color: sample(ramps.neutral, 7),
weight: fontWeights.normal,
},
comment: {
color: rampColor(ramps.neutral, 5),
color: sample(ramps.neutral, 5),
weight: fontWeights.normal,
},
punctuation: {
color: rampColor(ramps.neutral, 6),
color: sample(ramps.neutral, 6),
weight: fontWeights.normal,
},
constant: {
color: rampColor(ramps.neutral, 4),
color: sample(ramps.neutral, 4),
weight: fontWeights.normal,
},
keyword: {
color: rampColor(ramps.blue, 0.5),
color: sample(ramps.blue, 0.5),
weight: fontWeights.normal,
},
function: {
color: rampColor(ramps.yellow, 0.5),
color: sample(ramps.yellow, 0.5),
weight: fontWeights.normal,
},
type: {
color: rampColor(ramps.cyan, 0.5),
color: sample(ramps.cyan, 0.5),
weight: fontWeights.normal,
},
variant: {
color: rampColor(ramps.blue, 0.5),
color: sample(ramps.blue, 0.5),
weight: fontWeights.normal,
},
property: {
color: rampColor(ramps.blue, 0.5),
color: sample(ramps.blue, 0.5),
weight: fontWeights.normal,
},
enum: {
color: rampColor(ramps.orange, 0.5),
color: sample(ramps.orange, 0.5),
weight: fontWeights.normal,
},
operator: {
color: rampColor(ramps.orange, 0.5),
color: sample(ramps.orange, 0.5),
weight: fontWeights.normal,
},
string: {
color: rampColor(ramps.orange, 0.5),
color: sample(ramps.orange, 0.5),
weight: fontWeights.normal,
},
number: {
color: rampColor(ramps.green, 0.5),
color: sample(ramps.green, 0.5),
weight: fontWeights.normal,
},
boolean: {
color: rampColor(ramps.green, 0.5),
color: sample(ramps.green, 0.5),
weight: fontWeights.normal,
},
predictive: {
@@ -206,7 +204,7 @@ export function createTheme(
weight: fontWeights.normal,
},
title: {
color: rampColor(ramps.yellow, 0.5),
color: sample(ramps.yellow, 0.5),
weight: fontWeights.bold,
},
emphasis: {
@@ -218,21 +216,20 @@ export function createTheme(
weight: fontWeights.bold,
},
linkUri: {
color: rampColor(ramps.green, 0.5),
color: sample(ramps.green, 0.5),
weight: fontWeights.normal,
underline: true,
},
linkText: {
color: rampColor(ramps.orange, 0.5),
color: sample(ramps.orange, 0.5),
weight: fontWeights.normal,
italic: true,
},
};
const shadowAlpha: NumberToken = {
value: blend,
type: "number",
};
const shadow = withOpacity(
color(ramps.neutral(isLight ? 7 : 0).darken().hex()),
blend);
return {
name,
@@ -243,6 +240,6 @@ export function createTheme(
editor,
syntax,
player,
shadowAlpha,
shadow,
};
}
styles/src/themes/common/theme.ts
+2 -2
View File
@@ -153,6 +153,6 @@ export default interface Theme {
6: Player;
7: Player;
8: Player;
};
shadowAlpha: NumberToken;
},
shadow: ColorToken;
}