zed-industries/zed
1
1
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-12-29 12:22:27 +03:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Keith Simmons 2022-03-31 19:05:21 -07:00
parent e3366c490e
commit ce8d5bc0db
3 changed files with 305 additions and 613 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

458
styles/dark.ts
View File

@ -1,442 +1,230 @@
import core from "./core"; import core from "./core";
import Theme from "./theme"; import Theme from "./theme";
const { color } = core;
const backgroundColor = { const backgroundColor = {
100: { 100: {
base: { base: color.neutral[750],
value: core.color.neutral[999].value, hovered: color.neutral[750],
}, active: color.neutral[750],
hovered: { focused: color.neutral[750],
value: core.color.neutral[999].value,
},
active: {
value: core.color.neutral[999].value,
},
focused: {
value: core.color.neutral[999].value,
},
}, },
300: { 300: {
base: { base: color.neutral[800],
value: core.color.neutral[999].value, hovered: color.neutral[800],
}, active: color.neutral[800],
hovered: { focused: color.neutral[800],
value: core.color.neutral[999].value,
},
active: {
value: core.color.neutral[999].value,
},
focused: {
value: core.color.neutral[999].value,
},
}, },
500: { 500: {
base: { base: color.neutral[900],
value: core.color.neutral[999].value, hovered: color.neutral[900],
}, active: color.neutral[900],
hovered: { focused: color.neutral[900],
value: "#000000",
},
active: {
value: "#000000",
},
focused: {
value: "#000000",
},
}, },
ok: { ok: {
base: { base: color.green[600],
value: "#000000", hovered: color.green[600],
}, active: color.green[600],
hovered: { focused: color.green[600],
value: "#000000",
},
active: {
value: "#000000",
},
focused: {
value: "#000000",
},
}, },
error: { error: {
base: { base: color.red[400],
value: "#000000", hovered: color.red[400],
}, active: color.red[400],
hovered: { focused: color.red[400],
value: "#000000",
},
active: {
value: "#000000",
},
focused: {
value: "#000000",
},
}, },
warning: { warning: {
base: { base: color.amber[300],
value: "#000000", hovered: color.amber[300],
}, active: color.amber[300],
hovered: { focused: color.amber[300],
value: "#000000",
},
active: {
value: "#000000",
},
focused: {
value: "#000000",
},
}, },
info: { info: {
base: { base: color.blue[500],
value: "#000000", hovered: color.blue[500],
}, active: color.blue[500],
hovered: { focused: color.blue[500],
value: "#000000",
},
active: {
value: "#000000",
},
focused: {
value: "#000000",
},
}, },
}; };
const borderColor = { const borderColor = {
primary: { primary: color.neutral[850],
value: "#000000", secondary: color.neutral[700],
}, muted: color.neutral[750],
secondary: { focused: color.neutral[100],
value: "#000000", active: color.neutral[500],
}, ok: color.neutral[999],
muted: { error: color.neutral[999],
value: "#000000", warning: color.neutral[999],
}, info: color.neutral[999],
focused: {
value: "#000000",
},
active: {
value: "#000000",
},
ok: {
value: "#000000",
},
error: {
value: "#000000",
},
warning: {
value: "#000000",
},
info: {
value: "#000000",
},
}; };
const textColor = { const textColor = {
primary: { primary: color.neutral[150],
value: core.color.neutral[150].value, secondary: color.neutral[350],
}, muted: color.neutral[550],
secondary: { placeholder: color.neutral[750],
value: core.color.neutral[350].value, active: color.neutral[0],
},
muted: {
value: core.color.neutral[550].value,
},
placeholder: {
value: core.color.neutral[750].value,
},
active: {
value: core.color.neutral[0].value,
},
feature: {
//TODO: (design) define feature and it's correct value //TODO: (design) define feature and it's correct value
value: core.color.sky[500].value, feature: color.sky[500],
}, ok: color.green[600],
ok: { error: color.red[400],
value: core.color.green[600].value, warning: color.amber[300],
}, info: color.blue[500],
error: {
value: core.color.red[400].value,
},
warning: {
value: core.color.amber[300].value,
},
info: {
value: core.color.blue[500].value,
},
}; };
const iconColor = { const iconColor = {
primary: { primary: color.neutral[300],
value: core.color.neutral[300].value, secondary: color.neutral[500],
}, muted: color.neutral[600],
secondary: { placeholder: color.neutral[700],
value: core.color.neutral[500].value, active: color.neutral[50],
},
muted: {
value: core.color.neutral[600].value,
},
placeholder: {
value: core.color.neutral[700].value,
},
active: {
value: core.color.neutral[50].value,
},
feature: {
//TODO: (design) define feature and it's correct value //TODO: (design) define feature and it's correct value
value: core.color.sky[500].value, feature: color.sky[500],
}, ok: color.green[600],
ok: { error: color.red[400],
value: core.color.green[600].value, warning: color.amber[300],
}, info: color.blue[500],
error: {
value: core.color.red[400].value,
},
warning: {
value: core.color.amber[300].value,
},
info: {
value: core.color.blue[500].value,
},
}; };
const editor = { const editor = {
background: { background: backgroundColor[500].base,
value: backgroundColor[500].base.value, indent_guide: color.neutral[999],
}, indent_guide_active: color.neutral[999],
indent_guide: {
value: core.color.neutral[999].value,
},
indent_guide_active: {
value: core.color.neutral[999].value,
},
line: { line: {
active: { active: color.neutral[999],
value: core.color.neutral[999].value, highlighted: color.neutral[999],
}, inserted: color.neutral[999],
highlighted: { deleted: color.neutral[999],
value: core.color.neutral[999].value, modified: color.neutral[999],
},
inserted: {
value: core.color.neutral[999].value,
},
deleted: {
value: core.color.neutral[999].value,
},
modified: {
value: core.color.neutral[999].value,
},
}, },
highlight: { highlight: {
selection: { selection: color.neutral[999],
value: core.color.neutral[999].value, occurrence: color.neutral[999],
}, activeOccurrence: color.neutral[999],
occurrence: { matchingBracket: color.neutral[999],
value: core.color.neutral[999].value, match: color.neutral[999],
}, activeMatch: color.neutral[999],
activeOccurrence: { related: color.neutral[999],
value: core.color.neutral[999].value,
},
matchingBracket: {
value: core.color.neutral[999].value,
},
match: {
value: core.color.neutral[999].value,
},
activeMatch: {
value: core.color.neutral[999].value,
},
related: {
value: core.color.neutral[999].value,
},
}, },
gutter: { gutter: {
primary: { primary: color.neutral[999],
value: core.color.neutral[999].value, active: color.neutral[999],
},
active: {
value: core.color.neutral[999].value,
},
}, },
}; };
const syntax = { const syntax = {
primary: { primary: {
color: { color: textColor.primary,
value: core.color.neutral[150]
},
weight: { value: "normal" }, weight: { value: "normal" },
}, },
comment: { comment: {
color: { value: "000000" }, color: color.lime[200],
weight: { value: "normal" }, weight: { value: "normal" },
}, },
punctuation: { punctuation: {
color: { value: "000000" }, color: textColor.primary,
weight: { value: "normal" }, weight: { value: "normal" },
}, },
constant: { constant: {
color: { value: "000000" }, color: color.neutral[150],
weight: { value: "normal" }, weight: { value: "normal" },
}, },
keyword: { keyword: {
color: { value: "000000" }, color: color.sky[400],
weight: { value: "normal" }, weight: { value: "normal" },
}, },
function: { function: {
color: { value: "000000" }, color: color.yellow[200],
weight: { value: "normal" }, weight: { value: "normal" },
}, },
type: { type: {
color: { value: "000000" }, color: color.teal[300],
weight: { value: "normal" }, weight: { value: "normal" },
}, },
variant: { variant: {
color: { value: "000000" }, color: color.teal[300],
weight: { value: "normal" }, weight: { value: "normal" },
}, },
property: { property: {
color: { value: "000000" }, color: color.sky[300],
weight: { value: "normal" }, weight: { value: "normal" },
}, },
enum: { enum: {
color: { value: "000000" }, color: color.sky[400],
weight: { value: "normal" }, weight: { value: "normal" },
}, },
operator: { operator: {
color: { value: "000000" }, color: color.sky[400],
weight: { value: "normal" }, weight: { value: "normal" },
}, },
string: { string: {
color: { value: "000000" }, color: color.orange[300],
weight: { value: "normal" }, weight: { value: "normal" },
}, },
number: { number: {
color: { value: "000000" }, color: color.neutral[150],
weight: { value: "normal" }, weight: { value: "normal" },
}, },
boolean: { boolean: {
color: { value: "000000" }, color: color.neutral[150],
weight: { value: "normal" }, weight: { value: "normal" },
}, },
predictive: { predictive: {
color: { value: "000000" }, color: textColor.muted,
weight: { value: "normal" }, weight: { value: "normal" },
}, },
}; };
const player = { const player = {
1: { 1: {
baseColor: { baseColor: color.blue[600],
value: core.color.neutral[999].value, cursorColor: color.blue[600],
}, selectionColor: color.blue[600],
cursorColor: { borderColor: color.blue[600],
value: core.color.neutral[999].value,
},
selectionColor: {
value: core.color.neutral[999].value,
},
borderColor: {
value: core.color.neutral[999].value,
},
}, },
2: { 2: {
baseColor: { baseColor: color.indigo[500],
value: core.color.neutral[999].value, cursorColor: color.indigo[500],
}, selectionColor: color.indigo[500],
cursorColor: { borderColor: color.indigo[500],
value: core.color.neutral[999].value,
},
selectionColor: {
value: core.color.neutral[999].value,
},
borderColor: {
value: core.color.neutral[999].value,
},
}, },
3: { 3: {
baseColor: { baseColor: color.green[500],
value: core.color.neutral[999].value, cursorColor: color.green[500],
}, selectionColor: color.green[500],
cursorColor: { borderColor: color.green[500],
value: core.color.neutral[999].value,
},
selectionColor: {
value: core.color.neutral[999].value,
},
borderColor: {
value: core.color.neutral[999].value,
},
}, },
4: { 4: {
baseColor: { baseColor: color.orange[500],
value: core.color.neutral[999].value, cursorColor: color.orange[500],
}, selectionColor: color.orange[500],
cursorColor: { borderColor: color.orange[500],
value: core.color.neutral[999].value,
},
selectionColor: {
value: core.color.neutral[999].value,
},
borderColor: {
value: core.color.neutral[999].value,
},
}, },
5: { 5: {
baseColor: { baseColor: color.purple[500],
value: core.color.neutral[999].value, cursorColor: color.purple[500],
}, selectionColor: color.purple[500],
cursorColor: { borderColor: color.purple[500],
value: core.color.neutral[999].value,
},
selectionColor: {
value: core.color.neutral[999].value,
},
borderColor: {
value: core.color.neutral[999].value,
},
}, },
6: { 6: {
baseColor: { baseColor: color.teal[400],
value: core.color.neutral[999].value, cursorColor: color.teal[400],
}, selectionColor: color.teal[400],
cursorColor: { borderColor: color.teal[400],
value: core.color.neutral[999].value,
},
selectionColor: {
value: core.color.neutral[999].value,
},
borderColor: {
value: core.color.neutral[999].value,
},
}, },
7: { 7: {
baseColor: { baseColor: color.pink[400],
value: core.color.neutral[999].value, cursorColor: color.pink[400],
}, selectionColor: color.pink[400],
cursorColor: { borderColor: color.pink[400],
value: core.color.neutral[999].value,
},
selectionColor: {
value: core.color.neutral[999].value,
},
borderColor: {
value: core.color.neutral[999].value,
},
}, },
8: { 8: {
baseColor: { baseColor: color.yellow[400],
value: core.color.neutral[999].value, cursorColor: color.yellow[400],
}, selectionColor: color.yellow[400],
cursorColor: { borderColor: color.yellow[400],
value: core.color.neutral[999].value,
},
selectionColor: {
value: core.color.neutral[999].value,
},
borderColor: {
value: core.color.neutral[999].value,
},
}, },
}; };

244
styles/theme.ts
View File

@ -1,4 +1,14 @@
export interface NumberToken {
value: number,
type: "number"
}
export type Color = string; export type Color = string;
export interface ColorToken {
value: Color;
type: "color";
step?: number
}
export type Weight = export type Weight =
| "thin" | "thin"
| "extra_light" | "extra_light"
@ -9,40 +19,28 @@ export type Weight =
| "bold" | "bold"
| "extra_bold" | "extra_bold"
| "black"; | "black";
export interface WeightToken {
interface SyntaxHighlightStyle { value: Weight,
color: { value: Color }; type: "fontWeight"
weight: { value: Weight };
} }
interface Player { export interface SyntaxHighlightStyle {
baseColor: { color: ColorToken;
value: Color; weight: WeightToken;
}; }
cursorColor: {
value: Color; export interface Player {
}; baseColor: ColorToken;
selectionColor: { cursorColor: ColorToken;
value: Color; selectionColor: ColorToken;
}; borderColor: ColorToken;
borderColor: {
value: Color;
};
} }
export interface BackgroundColor { export interface BackgroundColor {
base: { base: ColorToken;
value: Color; hovered: ColorToken;
}; active: ColorToken;
hovered: { focused: ColorToken;
value: Color;
};
active: {
value: Color;
};
focused: {
value: Color;
};
} }
export default interface Theme { export default interface Theme {
@ -56,155 +54,63 @@ export default interface Theme {
info: BackgroundColor; info: BackgroundColor;
}; };
borderColor: { borderColor: {
primary: { primary: ColorToken;
value: Color; secondary: ColorToken;
}; muted: ColorToken;
secondary: { focused: ColorToken;
value: Color; active: ColorToken;
}; ok: ColorToken;
muted: { error: ColorToken;
value: Color; warning: ColorToken;
}; info: ColorToken;
focused: {
value: Color;
};
active: {
value: Color;
};
ok: {
value: Color;
};
error: {
value: Color;
};
warning: {
value: Color;
};
info: {
value: Color;
};
}; };
textColor: { textColor: {
primary: { primary: ColorToken;
value: Color; secondary: ColorToken;
}; muted: ColorToken;
secondary: { placeholder: ColorToken;
value: Color; active: ColorToken;
}; feature: ColorToken;
muted: { ok: ColorToken;
value: Color; error: ColorToken;
}; warning: ColorToken;
placeholder: { info: ColorToken;
value: Color;
};
active: {
value: Color;
};
feature: {
value: Color;
};
ok: {
value: Color;
};
error: {
value: Color;
};
warning: {
value: Color;
};
info: {
value: Color;
};
}; };
iconColor: { iconColor: {
primary: { primary: ColorToken;
value: Color; secondary: ColorToken;
}; muted: ColorToken;
secondary: { placeholder: ColorToken;
value: Color; active: ColorToken;
}; feature: ColorToken;
muted: { ok: ColorToken;
value: Color; error: ColorToken;
}; warning: ColorToken;
placeholder: { info: ColorToken;
value: Color;
};
active: {
value: Color;
};
feature: {
value: Color;
};
ok: {
value: Color;
};
error: {
value: Color;
};
warning: {
value: Color;
};
info: {
value: Color;
};
}; };
editor: { editor: {
background: { background: ColorToken;
value: Color; indent_guide: ColorToken;
}; indent_guide_active: ColorToken;
indent_guide: {
value: Color;
};
indent_guide_active: {
value: Color;
};
line: { line: {
active: { active: ColorToken;
value: Color; highlighted: ColorToken;
}; inserted: ColorToken;
highlighted: { deleted: ColorToken;
value: Color; modified: ColorToken;
};
inserted: {
value: Color;
};
deleted: {
value: Color;
};
modified: {
value: Color;
};
}; };
highlight: { highlight: {
selection: { selection: ColorToken;
value: Color; occurrence: ColorToken;
}; activeOccurrence: ColorToken;
occurrence: { matchingBracket: ColorToken;
value: Color; match: ColorToken;
}; activeMatch: ColorToken;
activeOccurrence: { related: ColorToken;
value: Color;
};
matchingBracket: {
value: Color;
};
match: {
value: Color;
};
activeMatch: {
value: Color;
};
related: {
value: Color;
};
}; };
gutter: { gutter: {
primary: { primary: ColorToken;
value: Color; active: ColorToken;
};
active: {
value: Color;
};
}; };
}; };
@ -236,7 +142,5 @@ export default interface Theme {
7: Player; 7: Player;
8: Player; 8: Player;
}; };
shadowAlpha: { shadowAlpha: NumberToken;
value: number;
};
} }