Finish dark.ts initial port and restructure files to get ready for build script
Build script currently fails to type check. Not sure whats going on. Will fix in the morning. Co-authored-by: Nate Butler <nate@zed.dev>
This commit is contained in:
Keith Simmons
co-authored by
Nate Butler
Nate Butler
parent
f11e0aeda9
commit
bfeb6abb4b
@@ -0,0 +1,249 @@
|
||||
import core from "../tokens/core";
|
||||
import Theme, { NumberToken, Syntax } from "./theme";
|
||||
|
||||
const { color } = core;
|
||||
|
||||
const backgroundColor = {
|
||||
100: {
|
||||
base: color.neutral[750],
|
||||
hovered: color.neutral[750],
|
||||
active: color.neutral[750],
|
||||
focused: color.neutral[750],
|
||||
},
|
||||
300: {
|
||||
base: color.neutral[800],
|
||||
hovered: color.neutral[800],
|
||||
active: color.neutral[800],
|
||||
focused: color.neutral[800],
|
||||
},
|
||||
500: {
|
||||
base: color.neutral[900],
|
||||
hovered: color.neutral[900],
|
||||
active: color.neutral[900],
|
||||
focused: color.neutral[900],
|
||||
},
|
||||
ok: {
|
||||
base: color.green[600],
|
||||
hovered: color.green[600],
|
||||
active: color.green[600],
|
||||
focused: color.green[600],
|
||||
},
|
||||
error: {
|
||||
base: color.red[400],
|
||||
hovered: color.red[400],
|
||||
active: color.red[400],
|
||||
focused: color.red[400],
|
||||
},
|
||||
warning: {
|
||||
base: color.amber[300],
|
||||
hovered: color.amber[300],
|
||||
active: color.amber[300],
|
||||
focused: color.amber[300],
|
||||
},
|
||||
info: {
|
||||
base: color.blue[500],
|
||||
hovered: color.blue[500],
|
||||
active: color.blue[500],
|
||||
focused: color.blue[500],
|
||||
},
|
||||
};
|
||||
|
||||
const borderColor = {
|
||||
primary: color.neutral[850],
|
||||
secondary: color.neutral[700],
|
||||
muted: color.neutral[750],
|
||||
focused: color.neutral[100],
|
||||
active: color.neutral[500],
|
||||
ok: color.neutral[999],
|
||||
error: color.neutral[999],
|
||||
warning: color.neutral[999],
|
||||
info: color.neutral[999],
|
||||
};
|
||||
|
||||
const textColor = {
|
||||
primary: color.neutral[150],
|
||||
secondary: color.neutral[350],
|
||||
muted: color.neutral[550],
|
||||
placeholder: color.neutral[750],
|
||||
active: color.neutral[0],
|
||||
//TODO: (design) define feature and it's correct value
|
||||
feature: color.sky[500],
|
||||
ok: color.green[600],
|
||||
error: color.red[400],
|
||||
warning: color.amber[300],
|
||||
info: color.blue[500],
|
||||
};
|
||||
|
||||
const iconColor = {
|
||||
primary: color.neutral[300],
|
||||
secondary: color.neutral[500],
|
||||
muted: color.neutral[600],
|
||||
placeholder: color.neutral[700],
|
||||
active: color.neutral[50],
|
||||
//TODO: (design) define feature and it's correct value
|
||||
feature: color.sky[500],
|
||||
ok: color.green[600],
|
||||
error: color.red[400],
|
||||
warning: color.amber[300],
|
||||
info: color.blue[500],
|
||||
};
|
||||
|
||||
const player = {
|
||||
1: {
|
||||
baseColor: color.blue[600],
|
||||
cursorColor: color.blue[600],
|
||||
selectionColor: color.blue[600],
|
||||
borderColor: color.blue[600],
|
||||
},
|
||||
2: {
|
||||
baseColor: color.indigo[500],
|
||||
cursorColor: color.indigo[500],
|
||||
selectionColor: color.indigo[500],
|
||||
borderColor: color.indigo[500],
|
||||
},
|
||||
3: {
|
||||
baseColor: color.green[500],
|
||||
cursorColor: color.green[500],
|
||||
selectionColor: color.green[500],
|
||||
borderColor: color.green[500],
|
||||
},
|
||||
4: {
|
||||
baseColor: color.orange[500],
|
||||
cursorColor: color.orange[500],
|
||||
selectionColor: color.orange[500],
|
||||
borderColor: color.orange[500],
|
||||
},
|
||||
5: {
|
||||
baseColor: color.purple[500],
|
||||
cursorColor: color.purple[500],
|
||||
selectionColor: color.purple[500],
|
||||
borderColor: color.purple[500],
|
||||
},
|
||||
6: {
|
||||
baseColor: color.teal[400],
|
||||
cursorColor: color.teal[400],
|
||||
selectionColor: color.teal[400],
|
||||
borderColor: color.teal[400],
|
||||
},
|
||||
7: {
|
||||
baseColor: color.pink[400],
|
||||
cursorColor: color.pink[400],
|
||||
selectionColor: color.pink[400],
|
||||
borderColor: color.pink[400],
|
||||
},
|
||||
8: {
|
||||
baseColor: color.yellow[400],
|
||||
cursorColor: color.yellow[400],
|
||||
selectionColor: color.yellow[400],
|
||||
borderColor: color.yellow[400],
|
||||
},
|
||||
};
|
||||
|
||||
// TODO: Fixup
|
||||
const editor = {
|
||||
background: backgroundColor[500].base,
|
||||
indent_guide: borderColor.muted,
|
||||
indent_guide_active: borderColor.secondary,
|
||||
line: {
|
||||
active: color.neutral[0],
|
||||
highlighted: color.neutral[0],
|
||||
inserted: backgroundColor.ok.active,
|
||||
deleted: backgroundColor.error.active,
|
||||
modified: backgroundColor.info.active,
|
||||
},
|
||||
highlight: {
|
||||
selection: player[1].selectionColor,
|
||||
occurrence: backgroundColor[500].active,
|
||||
activeOccurrence: color.neutral[0],
|
||||
matchingBracket: color.neutral[0],
|
||||
match: color.neutral[0],
|
||||
activeMatch: color.neutral[0],
|
||||
related: color.neutral[0],
|
||||
},
|
||||
gutter: {
|
||||
primary: color.neutral[0],
|
||||
active: color.neutral[0],
|
||||
},
|
||||
};
|
||||
|
||||
const syntax: Syntax = {
|
||||
primary: {
|
||||
color: textColor.primary,
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
comment: {
|
||||
color: color.lime[200],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
punctuation: {
|
||||
color: textColor.primary,
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
constant: {
|
||||
color: color.neutral[150],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
keyword: {
|
||||
color: color.sky[400],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
function: {
|
||||
color: color.yellow[200],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
type: {
|
||||
color: color.teal[300],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
variant: {
|
||||
color: color.teal[300],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
property: {
|
||||
color: color.sky[300],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
enum: {
|
||||
color: color.sky[400],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
operator: {
|
||||
color: color.sky[400],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
string: {
|
||||
color: color.orange[300],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
number: {
|
||||
color: color.neutral[150],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
boolean: {
|
||||
color: color.neutral[150],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
predictive: {
|
||||
color: textColor.muted,
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
};
|
||||
|
||||
const shadowAlpha: NumberToken = {
|
||||
value: 0.32,
|
||||
type: "number"
|
||||
};
|
||||
|
||||
const theme: Theme = {
|
||||
name: "dark",
|
||||
backgroundColor,
|
||||
borderColor,
|
||||
textColor,
|
||||
iconColor,
|
||||
editor,
|
||||
syntax,
|
||||
player,
|
||||
shadowAlpha,
|
||||
};
|
||||
|
||||
export default theme;
|
||||
@@ -0,0 +1,251 @@
|
||||
import core from "../tokens/core";
|
||||
import Theme, { NumberToken, Syntax } from "./theme";
|
||||
|
||||
const { color } = core;
|
||||
|
||||
// TODO: Replace with light values
|
||||
|
||||
const backgroundColor = {
|
||||
100: {
|
||||
base: color.neutral[750],
|
||||
hovered: color.neutral[750],
|
||||
active: color.neutral[750],
|
||||
focused: color.neutral[750],
|
||||
},
|
||||
300: {
|
||||
base: color.neutral[800],
|
||||
hovered: color.neutral[800],
|
||||
active: color.neutral[800],
|
||||
focused: color.neutral[800],
|
||||
},
|
||||
500: {
|
||||
base: color.neutral[900],
|
||||
hovered: color.neutral[900],
|
||||
active: color.neutral[900],
|
||||
focused: color.neutral[900],
|
||||
},
|
||||
ok: {
|
||||
base: color.green[600],
|
||||
hovered: color.green[600],
|
||||
active: color.green[600],
|
||||
focused: color.green[600],
|
||||
},
|
||||
error: {
|
||||
base: color.red[400],
|
||||
hovered: color.red[400],
|
||||
active: color.red[400],
|
||||
focused: color.red[400],
|
||||
},
|
||||
warning: {
|
||||
base: color.amber[300],
|
||||
hovered: color.amber[300],
|
||||
active: color.amber[300],
|
||||
focused: color.amber[300],
|
||||
},
|
||||
info: {
|
||||
base: color.blue[500],
|
||||
hovered: color.blue[500],
|
||||
active: color.blue[500],
|
||||
focused: color.blue[500],
|
||||
},
|
||||
};
|
||||
|
||||
const borderColor = {
|
||||
primary: color.neutral[850],
|
||||
secondary: color.neutral[700],
|
||||
muted: color.neutral[750],
|
||||
focused: color.neutral[100],
|
||||
active: color.neutral[500],
|
||||
ok: color.neutral[999],
|
||||
error: color.neutral[999],
|
||||
warning: color.neutral[999],
|
||||
info: color.neutral[999],
|
||||
};
|
||||
|
||||
const textColor = {
|
||||
primary: color.neutral[150],
|
||||
secondary: color.neutral[350],
|
||||
muted: color.neutral[550],
|
||||
placeholder: color.neutral[750],
|
||||
active: color.neutral[0],
|
||||
//TODO: (design) define feature and it's correct value
|
||||
feature: color.sky[500],
|
||||
ok: color.green[600],
|
||||
error: color.red[400],
|
||||
warning: color.amber[300],
|
||||
info: color.blue[500],
|
||||
};
|
||||
|
||||
const iconColor = {
|
||||
primary: color.neutral[300],
|
||||
secondary: color.neutral[500],
|
||||
muted: color.neutral[600],
|
||||
placeholder: color.neutral[700],
|
||||
active: color.neutral[50],
|
||||
//TODO: (design) define feature and it's correct value
|
||||
feature: color.sky[500],
|
||||
ok: color.green[600],
|
||||
error: color.red[400],
|
||||
warning: color.amber[300],
|
||||
info: color.blue[500],
|
||||
};
|
||||
|
||||
const player = {
|
||||
1: {
|
||||
baseColor: color.blue[600],
|
||||
cursorColor: color.blue[600],
|
||||
selectionColor: color.blue[600],
|
||||
borderColor: color.blue[600],
|
||||
},
|
||||
2: {
|
||||
baseColor: color.indigo[500],
|
||||
cursorColor: color.indigo[500],
|
||||
selectionColor: color.indigo[500],
|
||||
borderColor: color.indigo[500],
|
||||
},
|
||||
3: {
|
||||
baseColor: color.green[500],
|
||||
cursorColor: color.green[500],
|
||||
selectionColor: color.green[500],
|
||||
borderColor: color.green[500],
|
||||
},
|
||||
4: {
|
||||
baseColor: color.orange[500],
|
||||
cursorColor: color.orange[500],
|
||||
selectionColor: color.orange[500],
|
||||
borderColor: color.orange[500],
|
||||
},
|
||||
5: {
|
||||
baseColor: color.purple[500],
|
||||
cursorColor: color.purple[500],
|
||||
selectionColor: color.purple[500],
|
||||
borderColor: color.purple[500],
|
||||
},
|
||||
6: {
|
||||
baseColor: color.teal[400],
|
||||
cursorColor: color.teal[400],
|
||||
selectionColor: color.teal[400],
|
||||
borderColor: color.teal[400],
|
||||
},
|
||||
7: {
|
||||
baseColor: color.pink[400],
|
||||
cursorColor: color.pink[400],
|
||||
selectionColor: color.pink[400],
|
||||
borderColor: color.pink[400],
|
||||
},
|
||||
8: {
|
||||
baseColor: color.yellow[400],
|
||||
cursorColor: color.yellow[400],
|
||||
selectionColor: color.yellow[400],
|
||||
borderColor: color.yellow[400],
|
||||
},
|
||||
};
|
||||
|
||||
// TODO: Fixup
|
||||
const editor = {
|
||||
background: backgroundColor[500].base,
|
||||
indent_guide: borderColor.muted,
|
||||
indent_guide_active: borderColor.secondary,
|
||||
line: {
|
||||
active: color.neutral[0],
|
||||
highlighted: color.neutral[0],
|
||||
inserted: backgroundColor.ok.active,
|
||||
deleted: backgroundColor.error.active,
|
||||
modified: backgroundColor.info.active,
|
||||
},
|
||||
highlight: {
|
||||
selection: player[1].selectionColor,
|
||||
occurrence: backgroundColor[500].active,
|
||||
activeOccurrence: color.neutral[0],
|
||||
matchingBracket: color.neutral[0],
|
||||
match: color.neutral[0],
|
||||
activeMatch: color.neutral[0],
|
||||
related: color.neutral[0],
|
||||
},
|
||||
gutter: {
|
||||
primary: color.neutral[0],
|
||||
active: color.neutral[0],
|
||||
},
|
||||
};
|
||||
|
||||
const syntax: Syntax = {
|
||||
primary: {
|
||||
color: textColor.primary,
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
comment: {
|
||||
color: color.lime[200],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
punctuation: {
|
||||
color: textColor.primary,
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
constant: {
|
||||
color: color.neutral[150],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
keyword: {
|
||||
color: color.sky[400],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
function: {
|
||||
color: color.yellow[200],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
type: {
|
||||
color: color.teal[300],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
variant: {
|
||||
color: color.teal[300],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
property: {
|
||||
color: color.sky[300],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
enum: {
|
||||
color: color.sky[400],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
operator: {
|
||||
color: color.sky[400],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
string: {
|
||||
color: color.orange[300],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
number: {
|
||||
color: color.neutral[150],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
boolean: {
|
||||
color: color.neutral[150],
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
predictive: {
|
||||
color: textColor.muted,
|
||||
weight: { value: "normal", type: "fontWeight" },
|
||||
},
|
||||
};
|
||||
|
||||
const shadowAlpha: NumberToken = {
|
||||
value: 0.32,
|
||||
type: "number"
|
||||
};
|
||||
|
||||
const theme: Theme = {
|
||||
name: "light",
|
||||
backgroundColor,
|
||||
borderColor,
|
||||
textColor,
|
||||
iconColor,
|
||||
editor,
|
||||
syntax,
|
||||
player,
|
||||
shadowAlpha,
|
||||
};
|
||||
|
||||
export default theme;
|
||||
@@ -0,0 +1,148 @@
|
||||
export interface NumberToken {
|
||||
value: number,
|
||||
type: "number"
|
||||
}
|
||||
|
||||
export type Color = string;
|
||||
export interface ColorToken {
|
||||
value: Color;
|
||||
type: "color";
|
||||
step?: number
|
||||
}
|
||||
export type Weight =
|
||||
| "thin"
|
||||
| "extra_light"
|
||||
| "light"
|
||||
| "normal"
|
||||
| "medium"
|
||||
| "semibold"
|
||||
| "bold"
|
||||
| "extra_bold"
|
||||
| "black";
|
||||
export interface WeightToken {
|
||||
value: Weight,
|
||||
type: "fontWeight"
|
||||
}
|
||||
|
||||
export interface SyntaxHighlightStyle {
|
||||
color: ColorToken;
|
||||
weight: WeightToken;
|
||||
}
|
||||
|
||||
export interface Player {
|
||||
baseColor: ColorToken;
|
||||
cursorColor: ColorToken;
|
||||
selectionColor: ColorToken;
|
||||
borderColor: ColorToken;
|
||||
}
|
||||
|
||||
export interface BackgroundColor {
|
||||
base: ColorToken;
|
||||
hovered: ColorToken;
|
||||
active: ColorToken;
|
||||
focused: ColorToken;
|
||||
}
|
||||
|
||||
export interface Syntax {
|
||||
primary: SyntaxHighlightStyle;
|
||||
comment: SyntaxHighlightStyle;
|
||||
punctuation: SyntaxHighlightStyle;
|
||||
constant: SyntaxHighlightStyle;
|
||||
keyword: SyntaxHighlightStyle;
|
||||
function: SyntaxHighlightStyle;
|
||||
type: SyntaxHighlightStyle;
|
||||
variant: SyntaxHighlightStyle;
|
||||
property: SyntaxHighlightStyle;
|
||||
enum: SyntaxHighlightStyle;
|
||||
operator: SyntaxHighlightStyle;
|
||||
string: SyntaxHighlightStyle;
|
||||
number: SyntaxHighlightStyle;
|
||||
boolean: SyntaxHighlightStyle;
|
||||
predictive: SyntaxHighlightStyle;
|
||||
};
|
||||
|
||||
export default interface Theme {
|
||||
backgroundColor: {
|
||||
100: BackgroundColor;
|
||||
300: BackgroundColor;
|
||||
500: BackgroundColor;
|
||||
ok: BackgroundColor;
|
||||
error: BackgroundColor;
|
||||
warning: BackgroundColor;
|
||||
info: BackgroundColor;
|
||||
};
|
||||
borderColor: {
|
||||
primary: ColorToken;
|
||||
secondary: ColorToken;
|
||||
muted: ColorToken;
|
||||
focused: ColorToken;
|
||||
active: ColorToken;
|
||||
ok: ColorToken;
|
||||
error: ColorToken;
|
||||
warning: ColorToken;
|
||||
info: ColorToken;
|
||||
};
|
||||
textColor: {
|
||||
primary: ColorToken;
|
||||
secondary: ColorToken;
|
||||
muted: ColorToken;
|
||||
placeholder: ColorToken;
|
||||
active: ColorToken;
|
||||
feature: ColorToken;
|
||||
ok: ColorToken;
|
||||
error: ColorToken;
|
||||
warning: ColorToken;
|
||||
info: ColorToken;
|
||||
};
|
||||
iconColor: {
|
||||
primary: ColorToken;
|
||||
secondary: ColorToken;
|
||||
muted: ColorToken;
|
||||
placeholder: ColorToken;
|
||||
active: ColorToken;
|
||||
feature: ColorToken;
|
||||
ok: ColorToken;
|
||||
error: ColorToken;
|
||||
warning: ColorToken;
|
||||
info: ColorToken;
|
||||
};
|
||||
editor: {
|
||||
background: ColorToken;
|
||||
indent_guide: ColorToken;
|
||||
indent_guide_active: ColorToken;
|
||||
line: {
|
||||
active: ColorToken;
|
||||
highlighted: ColorToken;
|
||||
inserted: ColorToken;
|
||||
deleted: ColorToken;
|
||||
modified: ColorToken;
|
||||
};
|
||||
highlight: {
|
||||
selection: ColorToken;
|
||||
occurrence: ColorToken;
|
||||
activeOccurrence: ColorToken;
|
||||
matchingBracket: ColorToken;
|
||||
match: ColorToken;
|
||||
activeMatch: ColorToken;
|
||||
related: ColorToken;
|
||||
};
|
||||
gutter: {
|
||||
primary: ColorToken;
|
||||
active: ColorToken;
|
||||
};
|
||||
};
|
||||
|
||||
syntax: Syntax,
|
||||
|
||||
player: {
|
||||
1: Player;
|
||||
2: Player;
|
||||
3: Player;
|
||||
4: Player;
|
||||
5: Player;
|
||||
6: Player;
|
||||
7: Player;
|
||||
8: Player;
|
||||
};
|
||||
shadowAlpha: NumberToken;
|
||||
}
|
||||
Reference in New Issue
Block a user