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>

styles/.gitignore

@@ -0,0 +1 @@
+node_modules/

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/styleTree/components.ts

@@ -1,7 +1,7 @@
 import chroma from "chroma-js";
-import core from "./core";
+import core from "../tokens/core";
-import { Color } from "./lib";
+import { Color } from "../utils/color";
-import Theme, { BackgroundColor, Weight } from "./theme";
+import Theme, { BackgroundColor, Weight } from "../themes/theme";
 
 export type TextColor = keyof Theme["textColor"];
 

styles/styleTree/projectPanel.ts

@@ -1,7 +1,7 @@
 import { panel } from "./app";
 import { backgroundColor, iconColor, text, TextColor } from "./components";
-import Theme from "./theme";
+import Theme from "../themes/theme";
-import { Color } from "./lib";
+import { Color } from "../utils/color";
 
 export default function projectPanel(theme: Theme) {
   function entry(theme: Theme, textColor: TextColor, background?: Color) {

styles/themes/dark.ts

@@ -1,5 +1,5 @@
-import core from "./core";
+import core from "../tokens/core";
-import Theme from "./theme";
+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 = {
+// TODO: Fixup
-    value: 0.32,
+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 {
+const syntax: Syntax = {
-    return {
+    primary: {
-        backgroundColor,
+        color: textColor.primary,
-        borderColor,
+        weight: { value: "normal", type: "fontWeight" },
-        textColor,
+    },
-        iconColor,
+    comment: {
-        editor,
+        color: color.lime[200],
-        syntax,
+        weight: { value: "normal", type: "fontWeight" },
-        player,
+    },
-        shadowAlpha,
+    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;

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/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: {
+    syntax: 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;
-    };
 
     player: {
         1: Player;

styles/tokens/core.ts

@@ -1,4 +1,4 @@
-import { colorRamp } from "./lib";
+import { colorRamp } from "../utils/color";
 
 export default {
     fontFamily: {