mirror of
https://github.com/zed-industries/zed.git
synced 2024-10-28 17:20:32 +00:00
257 lines
5.5 KiB
TypeScript
257 lines
5.5 KiB
TypeScript
|
import { color, fontWeights, NumberToken } from "../tokens";
|
||
|
import { withOpacity } from "../utils/color";
|
||
|
import Theme, { buildPlayer, Syntax } from "./theme";
|
||
|
|
||
|
// Dark: 0 == Darkest, 3 == Lightest
|
||
|
const dark = {
|
||
|
0: color("#19171c"),
|
||
|
1: color("#26232a"),
|
||
|
2: color("#585260"),
|
||
|
3: color("#655f6d"),
|
||
|
};
|
||
|
// Light: 0 == Lightest, 3 == Darkest
|
||
|
const light = {
|
||
|
0: color("#efecf4"),
|
||
|
1: color("#e2dfe7"),
|
||
|
2: color("#8b8792"),
|
||
|
3: color("#7e7887"),
|
||
|
};
|
||
|
|
||
|
const colors = {
|
||
|
"red": color("#be4678"),
|
||
|
"orange": color("#aa573c"),
|
||
|
"yellow": color("#a06e3b"),
|
||
|
"green": color("#2a9292"),
|
||
|
"cyan": color("#398bc6"),
|
||
|
"blue": color("#576ddb"),
|
||
|
"violet": color("#955ae7"),
|
||
|
"magenta": color("#bf40bf"),
|
||
|
};
|
||
|
|
||
|
export function cave(darkTheme: boolean): Theme {
|
||
|
let fg = darkTheme ? light : dark;
|
||
|
let bg = darkTheme ? dark : light;
|
||
|
let name = darkTheme ? "cave-dark" : "cave-light";
|
||
|
|
||
|
const backgroundColor = {
|
||
|
100: {
|
||
|
base: bg[1],
|
||
|
hovered: bg[3],
|
||
|
active: bg[3],
|
||
|
focused: bg[3],
|
||
|
},
|
||
|
300: {
|
||
|
base: bg[1],
|
||
|
hovered: bg[3],
|
||
|
active: bg[3],
|
||
|
focused: bg[3],
|
||
|
},
|
||
|
500: {
|
||
|
base: bg[0],
|
||
|
hovered: bg[1],
|
||
|
active: bg[1],
|
||
|
focused: bg[1],
|
||
|
},
|
||
|
on300: {
|
||
|
base: bg[0],
|
||
|
hovered: bg[1],
|
||
|
active: bg[1],
|
||
|
focused: bg[1],
|
||
|
},
|
||
|
on500: {
|
||
|
base: bg[1],
|
||
|
hovered: bg[3],
|
||
|
active: bg[3],
|
||
|
focused: bg[3],
|
||
|
},
|
||
|
ok: {
|
||
|
base: colors.green,
|
||
|
hovered: colors.green,
|
||
|
active: colors.green,
|
||
|
focused: colors.green,
|
||
|
},
|
||
|
error: {
|
||
|
base: colors.red,
|
||
|
hovered: colors.red,
|
||
|
active: colors.red,
|
||
|
focused: colors.red,
|
||
|
},
|
||
|
warning: {
|
||
|
base: colors.yellow,
|
||
|
hovered: colors.yellow,
|
||
|
active: colors.yellow,
|
||
|
focused: colors.yellow,
|
||
|
},
|
||
|
info: {
|
||
|
base: colors.blue,
|
||
|
hovered: colors.blue,
|
||
|
active: colors.blue,
|
||
|
focused: colors.blue,
|
||
|
},
|
||
|
};
|
||
|
|
||
|
const borderColor = {
|
||
|
primary: bg[0],
|
||
|
secondary: bg[1],
|
||
|
muted: bg[3],
|
||
|
focused: bg[3],
|
||
|
active: bg[3],
|
||
|
ok: colors.green,
|
||
|
error: colors.red,
|
||
|
warning: colors.yellow,
|
||
|
info: colors.blue,
|
||
|
};
|
||
|
|
||
|
const textColor = {
|
||
|
primary: fg[1],
|
||
|
secondary: fg[2],
|
||
|
muted: fg[2],
|
||
|
placeholder: fg[3],
|
||
|
active: fg[0],
|
||
|
//TODO: (design) define feature and it's correct value
|
||
|
feature: colors.blue,
|
||
|
ok: colors.green,
|
||
|
error: colors.red,
|
||
|
warning: colors.yellow,
|
||
|
info: colors.blue,
|
||
|
};
|
||
|
|
||
|
const player = {
|
||
|
1: buildPlayer(colors.blue),
|
||
|
2: buildPlayer(colors.green),
|
||
|
3: buildPlayer(colors.magenta),
|
||
|
4: buildPlayer(colors.orange),
|
||
|
5: buildPlayer(colors.violet),
|
||
|
6: buildPlayer(colors.cyan),
|
||
|
7: buildPlayer(colors.red),
|
||
|
8: buildPlayer(colors.yellow),
|
||
|
};
|
||
|
|
||
|
const editor = {
|
||
|
background: backgroundColor[500].base,
|
||
|
indent_guide: borderColor.muted,
|
||
|
indent_guide_active: borderColor.secondary,
|
||
|
line: {
|
||
|
active: withOpacity(fg[0], 0.07),
|
||
|
highlighted: withOpacity(fg[0], 0.12),
|
||
|
inserted: backgroundColor.ok.active,
|
||
|
deleted: backgroundColor.error.active,
|
||
|
modified: backgroundColor.info.active,
|
||
|
},
|
||
|
highlight: {
|
||
|
selection: player[1].selectionColor,
|
||
|
occurrence: withOpacity(bg[0], 0.12),
|
||
|
activeOccurrence: withOpacity(bg[0], 0.16), // TODO: This is not correctly hooked up to occurences on the rust side
|
||
|
matchingBracket: backgroundColor[500].active,
|
||
|
match: withOpacity(colors.violet, 0.5),
|
||
|
activeMatch: withOpacity(colors.violet, 0.7),
|
||
|
related: backgroundColor[500].focused,
|
||
|
},
|
||
|
gutter: {
|
||
|
primary: textColor.placeholder,
|
||
|
active: textColor.active,
|
||
|
},
|
||
|
};
|
||
|
|
||
|
const syntax: Syntax = {
|
||
|
primary: {
|
||
|
color: fg[0],
|
||
|
weight: fontWeights.normal,
|
||
|
},
|
||
|
comment: {
|
||
|
color: fg[2],
|
||
|
weight: fontWeights.normal,
|
||
|
},
|
||
|
punctuation: {
|
||
|
color: fg[2],
|
||
|
weight: fontWeights.normal,
|
||
|
},
|
||
|
constant: {
|
||
|
color: fg[3],
|
||
|
weight: fontWeights.normal,
|
||
|
},
|
||
|
keyword: {
|
||
|
color: colors.blue,
|
||
|
weight: fontWeights.normal,
|
||
|
},
|
||
|
function: {
|
||
|
color: colors.yellow,
|
||
|
weight: fontWeights.normal,
|
||
|
},
|
||
|
type: {
|
||
|
color: colors.cyan,
|
||
|
weight: fontWeights.normal,
|
||
|
},
|
||
|
variant: {
|
||
|
color: colors.blue,
|
||
|
weight: fontWeights.normal,
|
||
|
},
|
||
|
property: {
|
||
|
color: colors.blue,
|
||
|
weight: fontWeights.normal,
|
||
|
},
|
||
|
enum: {
|
||
|
color: colors.orange,
|
||
|
weight: fontWeights.normal,
|
||
|
},
|
||
|
operator: {
|
||
|
color: colors.orange,
|
||
|
weight: fontWeights.normal,
|
||
|
},
|
||
|
string: {
|
||
|
color: colors.orange,
|
||
|
weight: fontWeights.normal,
|
||
|
},
|
||
|
number: {
|
||
|
color: colors.green,
|
||
|
weight: fontWeights.normal,
|
||
|
},
|
||
|
boolean: {
|
||
|
color: colors.green,
|
||
|
weight: fontWeights.normal,
|
||
|
},
|
||
|
predictive: {
|
||
|
color: textColor.muted,
|
||
|
weight: fontWeights.normal,
|
||
|
},
|
||
|
title: {
|
||
|
color: colors.yellow,
|
||
|
weight: fontWeights.bold,
|
||
|
},
|
||
|
emphasis: {
|
||
|
color: textColor.feature,
|
||
|
weight: fontWeights.normal,
|
||
|
},
|
||
|
"emphasis.strong": {
|
||
|
color: textColor.feature,
|
||
|
weight: fontWeights.bold,
|
||
|
},
|
||
|
linkUri: {
|
||
|
color: colors.green,
|
||
|
weight: fontWeights.normal,
|
||
|
underline: true,
|
||
|
},
|
||
|
linkText: {
|
||
|
color: colors.orange,
|
||
|
weight: fontWeights.normal,
|
||
|
italic: true,
|
||
|
},
|
||
|
};
|
||
|
|
||
|
const shadowAlpha: NumberToken = {
|
||
|
value: 0.32,
|
||
|
type: "number",
|
||
|
};
|
||
|
|
||
|
return {
|
||
|
name,
|
||
|
backgroundColor,
|
||
|
borderColor,
|
||
|
textColor,
|
||
|
iconColor: textColor,
|
||
|
editor,
|
||
|
syntax,
|
||
|
player,
|
||
|
shadowAlpha,
|
||
|
};
|
||
|
}
|