From bfeb6abb4bedfbb414841b41a72cd435b11b8379 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 | 197 +++++++------- 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, 388 insertions(+), 120 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 0000000000000000000000000000000000000000..c2658d7d1b31848c3b71960543cb0368e56cd4c7 --- /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 0000000000000000000000000000000000000000..6fa1c1576d96f312c79b52d15ce2429f3902ff8a --- /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 590c1b5eea9f6779dee0c2697a781d36b3edee60..b54956facccc3874998176870498368dbe8b5b56 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 343e11b96b6e8adb3c6bd223a71de3e6d7d05f40..3b5fba8853da3799e69be735447e615341ef8391 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 5b60bd0316a53fc24a830e23d428088675ac45de..098677a1e91c898e1e57624fa28a39fe9bbafee9 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,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; \ No newline at end of file diff --git a/styles/themes/light.ts b/styles/themes/light.ts new file mode 100644 index 0000000000000000000000000000000000000000..20760427f273e93d72c2cf7cee6a8c0f6ae7192d --- /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 9d70ea0227053f81e48d2e3359379db635bed7c8..e319f510c7daa52c64caefc3d8d2c8c7bfde4221 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 49e376b4ebf81968b2681179be46b3c5b27055b6..38bfe82e28129954a2f5602038d575a3cfbb94af 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