From e990b46b9de028c46f6f08a2847f4313c4b1fa69 Mon Sep 17 00:00:00 2001 From: Keith Simmons Date: Thu, 31 Mar 2022 20:27:25 -0700 Subject: [PATCH] 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 --- styles/.gitignore | 1 + styles/buildStyleTree.ts | 11 + styles/{ => styleTree}/app.ts | 0 .../{chat-panel.ts => styleTree/chatPanel.ts} | 0 styles/{ => styleTree}/components.ts | 6 +- styles/{ => styleTree}/editor.ts | 0 .../projectPanel.ts} | 4 +- styles/{ => styleTree}/search.ts | 0 .../selectorModal.ts} | 0 styles/{ => styleTree}/workspace.ts | 0 styles/{ => themes}/dark.ts | 213 +++++++-------- styles/themes/light.ts | 251 ++++++++++++++++++ styles/{ => themes}/theme.ts | 36 +-- styles/{ => tokens}/core.ts | 2 +- styles/{lib.ts => utils/color.ts} | 0 15 files changed, 396 insertions(+), 128 deletions(-) create mode 100644 styles/.gitignore create mode 100644 styles/buildStyleTree.ts rename styles/{ => styleTree}/app.ts (100%) rename styles/{chat-panel.ts => styleTree/chatPanel.ts} (100%) rename styles/{ => styleTree}/components.ts (92%) rename styles/{ => styleTree}/editor.ts (100%) rename styles/{project-panel.ts => styleTree/projectPanel.ts} (90%) rename styles/{ => styleTree}/search.ts (100%) rename styles/{selector-modal.ts => styleTree/selectorModal.ts} (100%) rename styles/{ => styleTree}/workspace.ts (100%) rename styles/{ => themes}/dark.ts (71%) create mode 100644 styles/themes/light.ts rename styles/{ => themes}/theme.ts (82%) rename styles/{ => tokens}/core.ts (97%) rename styles/{lib.ts => utils/color.ts} (100%) diff --git a/styles/.gitignore b/styles/.gitignore new file mode 100644 index 0000000000..c2658d7d1b --- /dev/null +++ b/styles/.gitignore @@ -0,0 +1 @@ +node_modules/ diff --git a/styles/buildStyleTree.ts b/styles/buildStyleTree.ts new file mode 100644 index 0000000000..6fa1c1576d --- /dev/null +++ b/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 +} \ No newline at end of file diff --git a/styles/app.ts b/styles/styleTree/app.ts similarity index 100% rename from styles/app.ts rename to styles/styleTree/app.ts diff --git a/styles/chat-panel.ts b/styles/styleTree/chatPanel.ts similarity index 100% rename from styles/chat-panel.ts rename to styles/styleTree/chatPanel.ts diff --git a/styles/components.ts b/styles/styleTree/components.ts similarity index 92% rename from styles/components.ts rename to styles/styleTree/components.ts index 590c1b5eea..b54956facc 100644 --- a/styles/components.ts +++ b/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"]; diff --git a/styles/editor.ts b/styles/styleTree/editor.ts similarity index 100% rename from styles/editor.ts rename to styles/styleTree/editor.ts diff --git a/styles/project-panel.ts b/styles/styleTree/projectPanel.ts similarity index 90% rename from styles/project-panel.ts rename to styles/styleTree/projectPanel.ts index 343e11b96b..3b5fba8853 100644 --- a/styles/project-panel.ts +++ b/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) { diff --git a/styles/search.ts b/styles/styleTree/search.ts similarity index 100% rename from styles/search.ts rename to styles/styleTree/search.ts diff --git a/styles/selector-modal.ts b/styles/styleTree/selectorModal.ts similarity index 100% rename from styles/selector-modal.ts rename to styles/styleTree/selectorModal.ts diff --git a/styles/workspace.ts b/styles/styleTree/workspace.ts similarity index 100% rename from styles/workspace.ts rename to styles/styleTree/workspace.ts diff --git a/styles/dark.ts b/styles/themes/dark.ts similarity index 71% rename from styles/dark.ts rename to styles/themes/dark.ts index 5b60bd0316..098677a1e9 100644 --- a/styles/dark.ts +++ b/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,95 +88,6 @@ const iconColor = { info: color.blue[500], }; -const editor = { - background: backgroundColor[500].base, - indent_guide: color.neutral[999], - indent_guide_active: color.neutral[999], - line: { - active: color.neutral[999], - highlighted: color.neutral[999], - inserted: color.neutral[999], - deleted: color.neutral[999], - modified: color.neutral[999], - }, - 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], - }, - gutter: { - primary: color.neutral[999], - active: color.neutral[999], - }, -}; - -const syntax = { - primary: { - color: textColor.primary, - weight: { value: "normal" }, - }, - comment: { - color: color.lime[200], - weight: { value: "normal" }, - }, - punctuation: { - color: textColor.primary, - weight: { value: "normal" }, - }, - constant: { - color: color.neutral[150], - weight: { value: "normal" }, - }, - keyword: { - color: color.sky[400], - weight: { value: "normal" }, - }, - function: { - color: color.yellow[200], - weight: { value: "normal" }, - }, - type: { - color: color.teal[300], - weight: { value: "normal" }, - }, - variant: { - color: color.teal[300], - weight: { value: "normal" }, - }, - property: { - color: color.sky[300], - weight: { value: "normal" }, - }, - enum: { - color: color.sky[400], - weight: { value: "normal" }, - }, - operator: { - color: color.sky[400], - weight: { value: "normal" }, - }, - string: { - color: color.orange[300], - weight: { value: "normal" }, - }, - number: { - color: color.neutral[150], - weight: { value: "normal" }, - }, - boolean: { - color: color.neutral[150], - weight: { value: "normal" }, - }, - predictive: { - color: textColor.muted, - weight: { value: "normal" }, - }, -}; - const player = { 1: { baseColor: color.blue[600], @@ -228,19 +139,111 @@ const player = { }, }; -const shadowAlpha = { - value: 0.32, +// 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], + }, }; -export default function dark(): Theme { - return { - backgroundColor, - borderColor, - textColor, - iconColor, - editor, - syntax, - player, - shadowAlpha, - }; -} +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; \ No newline at end of file diff --git a/styles/themes/light.ts b/styles/themes/light.ts new file mode 100644 index 0000000000..20760427f2 --- /dev/null +++ b/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; diff --git a/styles/theme.ts b/styles/themes/theme.ts similarity index 82% rename from styles/theme.ts rename to styles/themes/theme.ts index 9d70ea0227..e319f510c7 100644 --- a/styles/theme.ts +++ b/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; diff --git a/styles/core.ts b/styles/tokens/core.ts similarity index 97% rename from styles/core.ts rename to styles/tokens/core.ts index 49e376b4eb..38bfe82e28 100644 --- a/styles/core.ts +++ b/styles/tokens/core.ts @@ -1,4 +1,4 @@ -import { colorRamp } from "./lib"; +import { colorRamp } from "../utils/color"; export default { fontFamily: { diff --git a/styles/lib.ts b/styles/utils/color.ts similarity index 100% rename from styles/lib.ts rename to styles/utils/color.ts