styles/.gitignore 🔗
@@ -0,0 +1 @@
+node_modules/
Finish dark.ts initial port and restructure files to get ready for build script
Keith Simmons and Nate Butler created
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>Change summary
styles/.gitignore | 1
styles/buildStyleTree.ts | 11 +
styles/styleTree/app.ts | 0
styles/styleTree/chatPanel.ts | 0
styles/styleTree/components.ts | 6
styles/styleTree/editor.ts | 0
styles/styleTree/projectPanel.ts | 4
styles/styleTree/search.ts | 0
styles/styleTree/selectorModal.ts | 0
styles/styleTree/workspace.ts | 0
styles/themes/dark.ts | 197 +++++++++++++------------
styles/themes/light.ts | 251 +++++++++++++++++++++++++++++++++
styles/themes/theme.ts | 36 ++--
styles/tokens/core.ts | 2
styles/utils/color.ts | 0
15 files changed, 388 insertions(+), 120 deletions(-)
Detailed changes
styles/buildStyleTree.ts 🔗
@@ -0,0 +1,11 @@
+import dark from "./themes/dark";
+import light from "./themes/light";
+import app from "./styleTree/app";
+
+for (let theme of [dark, light]) {
+ let styleTree = app(theme);
+
+ let styleTreeJson = JSON.stringify(styleTree);
+ console.log(styleTreeJson);
+ // TODO: Write style tree json to zed crate assets folder
+}
styles/app.ts → styles/styleTree/app.ts 🔗
styles/chat-panel.ts → styles/styleTree/chatPanel.ts 🔗
styles/components.ts → styles/styleTree/components.ts 🔗
@@ -1,7 +1,7 @@
import chroma from "chroma-js";
-import core from "./core";
-import { Color } from "./lib";
-import Theme, { BackgroundColor, Weight } from "./theme";
+import core from "../tokens/core";
+import { Color } from "../utils/color";
+import Theme, { BackgroundColor, Weight } from "../themes/theme";
export type TextColor = keyof Theme["textColor"];
styles/editor.ts → styles/styleTree/editor.ts 🔗
styles/project-panel.ts → styles/styleTree/projectPanel.ts 🔗
@@ -1,7 +1,7 @@
import { panel } from "./app";
import { backgroundColor, iconColor, text, TextColor } from "./components";
-import Theme from "./theme";
-import { Color } from "./lib";
+import Theme from "../themes/theme";
+import { Color } from "../utils/color";
export default function projectPanel(theme: Theme) {
function entry(theme: Theme, textColor: TextColor, background?: Color) {
styles/search.ts → styles/styleTree/search.ts 🔗
styles/selector-modal.ts → styles/styleTree/selectorModal.ts 🔗
styles/workspace.ts → styles/styleTree/workspace.ts 🔗
styles/dark.ts → styles/themes/dark.ts 🔗
@@ -1,5 +1,5 @@
-import core from "./core";
-import Theme from "./theme";
+import core from "../tokens/core";
+import Theme, { NumberToken, Syntax } from "./theme";
const { color } = core;
@@ -88,159 +88,162 @@ const iconColor = {
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: color.neutral[999],
- indent_guide_active: color.neutral[999],
+ indent_guide: borderColor.muted,
+ indent_guide_active: borderColor.secondary,
line: {
- active: color.neutral[999],
- highlighted: color.neutral[999],
- inserted: color.neutral[999],
- deleted: color.neutral[999],
- modified: color.neutral[999],
+ active: color.neutral[0],
+ highlighted: color.neutral[0],
+ inserted: backgroundColor.ok.active,
+ deleted: backgroundColor.error.active,
+ modified: backgroundColor.info.active,
},
highlight: {
- selection: color.neutral[999],
- occurrence: color.neutral[999],
- activeOccurrence: color.neutral[999],
- matchingBracket: color.neutral[999],
- match: color.neutral[999],
- activeMatch: color.neutral[999],
- related: color.neutral[999],
+ 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[999],
- active: color.neutral[999],
+ primary: color.neutral[0],
+ active: color.neutral[0],
},
};
-const syntax = {
+const syntax: Syntax = {
primary: {
color: textColor.primary,
- weight: { value: "normal" },
+ weight: { value: "normal", type: "fontWeight" },
},
comment: {
color: color.lime[200],
- weight: { value: "normal" },
+ weight: { value: "normal", type: "fontWeight" },
},
punctuation: {
color: textColor.primary,
- weight: { value: "normal" },
+ weight: { value: "normal", type: "fontWeight" },
},
constant: {
color: color.neutral[150],
- weight: { value: "normal" },
+ weight: { value: "normal", type: "fontWeight" },
},
keyword: {
color: color.sky[400],
- weight: { value: "normal" },
+ weight: { value: "normal", type: "fontWeight" },
},
function: {
color: color.yellow[200],
- weight: { value: "normal" },
+ weight: { value: "normal", type: "fontWeight" },
},
type: {
color: color.teal[300],
- weight: { value: "normal" },
+ weight: { value: "normal", type: "fontWeight" },
},
variant: {
color: color.teal[300],
- weight: { value: "normal" },
+ weight: { value: "normal", type: "fontWeight" },
},
property: {
color: color.sky[300],
- weight: { value: "normal" },
+ weight: { value: "normal", type: "fontWeight" },
},
enum: {
color: color.sky[400],
- weight: { value: "normal" },
+ weight: { value: "normal", type: "fontWeight" },
},
operator: {
color: color.sky[400],
- weight: { value: "normal" },
+ weight: { value: "normal", type: "fontWeight" },
},
string: {
color: color.orange[300],
- weight: { value: "normal" },
+ weight: { value: "normal", type: "fontWeight" },
},
number: {
color: color.neutral[150],
- weight: { value: "normal" },
+ weight: { value: "normal", type: "fontWeight" },
},
boolean: {
color: color.neutral[150],
- weight: { value: "normal" },
+ weight: { value: "normal", type: "fontWeight" },
},
predictive: {
color: textColor.muted,
- weight: { value: "normal" },
+ weight: { value: "normal", type: "fontWeight" },
},
};
-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],
- },
+const shadowAlpha: NumberToken = {
+ value: 0.32,
+ type: "number"
};
-const shadowAlpha = {
- value: 0.32,
+const theme: Theme = {
+ name: "dark",
+ backgroundColor,
+ borderColor,
+ textColor,
+ iconColor,
+ editor,
+ syntax,
+ player,
+ shadowAlpha,
};
-export default function dark(): Theme {
- return {
- backgroundColor,
- borderColor,
- textColor,
- iconColor,
- editor,
- syntax,
- player,
- shadowAlpha,
- };
-}
+export default theme;
styles/themes/light.ts 🔗
@@ -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;
styles/theme.ts → styles/themes/theme.ts 🔗
@@ -43,6 +43,24 @@ export interface BackgroundColor {
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;
@@ -114,23 +132,7 @@ export default interface Theme {
};
};
- 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;
- };
+ syntax: Syntax,
player: {
1: Player;
styles/core.ts → styles/tokens/core.ts 🔗
@@ -1,4 +1,4 @@
-import { colorRamp } from "./lib";
+import { colorRamp } from "../utils/color";
export default {
fontFamily: {
styles/lib.ts → styles/utils/color.ts 🔗