From 161373710c3b97c6c9786dee7d6cf95afba41cb2 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Sun, 26 Feb 2023 13:24:41 -0500
Subject: [PATCH 01/19] WIP

---
 styles/src/themes/common/colorScheme.ts | 89 +++++++++++++++++++++++--
 1 file changed, 82 insertions(+), 7 deletions(-)

diff --git a/styles/src/themes/common/colorScheme.ts b/styles/src/themes/common/colorScheme.ts
index 8de484d7f5..b4f35d3903 100644
--- a/styles/src/themes/common/colorScheme.ts
+++ b/styles/src/themes/common/colorScheme.ts
@@ -109,28 +109,103 @@ export interface SyntaxHighlightStyle {
 }
 
 export interface Syntax {
+    // == Text Styles
     primary: SyntaxHighlightStyle
-    "variable.special": SyntaxHighlightStyle
+    predictive: SyntaxHighlightStyle
+    emphasis: SyntaxHighlightStyle
+    "emphasis.strong": SyntaxHighlightStyle
+    title: SyntaxHighlightStyle
+    linkUri: SyntaxHighlightStyle
+    linkText: SyntaxHighlightStyle
+
+    // == General
     comment: SyntaxHighlightStyle
+
+    // == Punctuation
     punctuation: SyntaxHighlightStyle
+    /** (, [, {...*/
+    "punctuation.bracket": SyntaxHighlightStyle,
+    // ., ;
+    "punctuation.delimiter": SyntaxHighlightStyle,
+    // js, ts: ${, } in a template literal
+    // yaml: *, &, ---, ...
+    "punctuation.special": SyntaxHighlightStyle,
+    // md: list_marker_plus, list_marker_dot, etc
+    "punctuation.list_marker": SyntaxHighlightStyle
+
+    // this, ...
+    // css: -- (var(--foo))
+    // lua: self
+    "variable.special": SyntaxHighlightStyle
+    // true, false, null, nullptr
     constant: SyntaxHighlightStyle
+    // css: @media, @import, @supports...
+    // js: declare, implements, interface, keyof, public...
     keyword: SyntaxHighlightStyle
     function: SyntaxHighlightStyle
     type: SyntaxHighlightStyle
     constructor: SyntaxHighlightStyle
     variant: SyntaxHighlightStyle
+    // css: class_name, property_name, namespace_name...
     property: SyntaxHighlightStyle
+    // note: js enum is currently defined as a keyword
     enum: SyntaxHighlightStyle
+    // -, --, ->, !=, &&, ||, <=...
     operator: SyntaxHighlightStyle
     string: SyntaxHighlightStyle
     number: SyntaxHighlightStyle
     boolean: SyntaxHighlightStyle
-    predictive: SyntaxHighlightStyle
-    title: SyntaxHighlightStyle
-    emphasis: SyntaxHighlightStyle
-    "emphasis.strong": SyntaxHighlightStyle
-    linkUri: SyntaxHighlightStyle
-    linkText: SyntaxHighlightStyle
+
+    // c: statement_identifier, 
+    label: SyntaxHighlightStyle,
+    // css: tag_name, nesting_selector, universal_selector...
+    tag: SyntaxHighlightStyle,
+    // css: attribute, pseudo_element_selector (tag_name), 
+    attribute: SyntaxHighlightStyle,
+    // css: color_value
+    // js: this, super
+    // racket: regex
+    // toml: offset_date_time, local_date_time...
+    "string.special": SyntaxHighlightStyle,
+    // elixir: atom, quoted_atom, keyword, quoted_keyword
+    // ruby: simple_symbol, delimited_symbol...
+    "string.special.symbol": SyntaxHighlightStyle
+    // ruby: Regular expression
+    "string.special.regex": SyntaxHighlightStyle
+    // elixir, python, yaml...: escape_sequence
+    "string.escape": SyntaxHighlightStyle,
+    // Regular expressions
+    "string.regex": SyntaxHighlightStyle,
+    // elixir: doc comment
+    "comment.doc": SyntaxHighlightStyle,
+    // js: predefined_type
+    "type.builtin": SyntaxHighlightStyle,
+    // elixir, python: interpolation (ex: foo in ${foo})
+    // js: template_substitution
+    embedded: SyntaxHighlightStyle,
+    // elixir: __MODULE__, __DIR__, __ENV__, etc
+    // go: nil, iota
+    "constant.builtin": SyntaxHighlightStyle,
+    // go: call_expression, method_declaration
+    // js: call_expression, method_definition, pair (key, arrow function)
+    "function.method": SyntaxHighlightStyle,
+    // ruby: identifier/"defined?" // Nate note: I don't fully understand this one.
+    "function.method.builtin": SyntaxHighlightStyle
+    // lua: function_call
+    "function.call": SyntaxHighlightStyle
+    // lua: assert, error, loadfile, tostring, unpack...
+    "function.builtin": SyntaxHighlightStyle
+    // lua: hash_bang_line
+    preproc: SyntaxHighlightStyle
+
+    // md: indented_code_block, fenced_code_block, code_span
+    "text.literal": SyntaxHighlightStyle
+    // racket: lang_name
+    "variable.builtin": SyntaxHighlightStyle
+    // rust: function_item name: (identifier)
+    "function.definition": SyntaxHighlightStyle
+    // rust: macro_definition name: (identifier) 
+    "function.special.definition": SyntaxHighlightStyle
 }
 
 // HACK: "constructor" as a key in the syntax interface returns an error when a theme tries to use it.

From 6cb35536b3ba76eca505bad00f763ea057fc4a64 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Sun, 26 Feb 2023 14:15:06 -0500
Subject: [PATCH 02/19] Start on syntax organization

---
 styles/src/themes/common/colorScheme.ts | 118 +++++++++++++-----------
 1 file changed, 64 insertions(+), 54 deletions(-)

diff --git a/styles/src/themes/common/colorScheme.ts b/styles/src/themes/common/colorScheme.ts
index b4f35d3903..b56bf636a1 100644
--- a/styles/src/themes/common/colorScheme.ts
+++ b/styles/src/themes/common/colorScheme.ts
@@ -109,23 +109,27 @@ export interface SyntaxHighlightStyle {
 }
 
 export interface Syntax {
-    // == Text Styles
+    // == Text Styles ====== /
+    comment: SyntaxHighlightStyle
+    // elixir: doc comment
+    "comment.doc": SyntaxHighlightStyle,
     primary: SyntaxHighlightStyle
     predictive: SyntaxHighlightStyle
+
+    // === Formatted Text ====== /
     emphasis: SyntaxHighlightStyle
     "emphasis.strong": SyntaxHighlightStyle
     title: SyntaxHighlightStyle
     linkUri: SyntaxHighlightStyle
     linkText: SyntaxHighlightStyle
+    // md: indented_code_block, fenced_code_block, code_span
+    "text.literal": SyntaxHighlightStyle
 
-    // == General
-    comment: SyntaxHighlightStyle
-
-    // == Punctuation
+    // == Punctuation ====== /
     punctuation: SyntaxHighlightStyle
-    /** (, [, {...*/
+    /** Example: `(`, `[`, `{`...*/
     "punctuation.bracket": SyntaxHighlightStyle,
-    // ., ;
+    /**., ;*/
     "punctuation.delimiter": SyntaxHighlightStyle,
     // js, ts: ${, } in a template literal
     // yaml: *, &, ---, ...
@@ -133,35 +137,9 @@ export interface Syntax {
     // md: list_marker_plus, list_marker_dot, etc
     "punctuation.list_marker": SyntaxHighlightStyle
 
-    // this, ...
-    // css: -- (var(--foo))
-    // lua: self
-    "variable.special": SyntaxHighlightStyle
-    // true, false, null, nullptr
-    constant: SyntaxHighlightStyle
-    // css: @media, @import, @supports...
-    // js: declare, implements, interface, keyof, public...
-    keyword: SyntaxHighlightStyle
-    function: SyntaxHighlightStyle
-    type: SyntaxHighlightStyle
-    constructor: SyntaxHighlightStyle
-    variant: SyntaxHighlightStyle
-    // css: class_name, property_name, namespace_name...
-    property: SyntaxHighlightStyle
-    // note: js enum is currently defined as a keyword
-    enum: SyntaxHighlightStyle
-    // -, --, ->, !=, &&, ||, <=...
-    operator: SyntaxHighlightStyle
-    string: SyntaxHighlightStyle
-    number: SyntaxHighlightStyle
-    boolean: SyntaxHighlightStyle
+    // == Strings ====== /
 
-    // c: statement_identifier, 
-    label: SyntaxHighlightStyle,
-    // css: tag_name, nesting_selector, universal_selector...
-    tag: SyntaxHighlightStyle,
-    // css: attribute, pseudo_element_selector (tag_name), 
-    attribute: SyntaxHighlightStyle,
+    string: SyntaxHighlightStyle
     // css: color_value
     // js: this, super
     // racket: regex
@@ -176,36 +154,68 @@ export interface Syntax {
     "string.escape": SyntaxHighlightStyle,
     // Regular expressions
     "string.regex": SyntaxHighlightStyle,
-    // elixir: doc comment
-    "comment.doc": SyntaxHighlightStyle,
+
+    // == Types ====== /
+    constructor: SyntaxHighlightStyle
+    variant: SyntaxHighlightStyle
+    type: SyntaxHighlightStyle
     // js: predefined_type
     "type.builtin": SyntaxHighlightStyle,
-    // elixir, python: interpolation (ex: foo in ${foo})
-    // js: template_substitution
-    embedded: SyntaxHighlightStyle,
+
+    // == Values
+
+    // racket: lang_name
+    "variable.builtin": SyntaxHighlightStyle
+    // this, ...
+    // css: -- (var(--foo))
+    // lua: self
+    "variable.special": SyntaxHighlightStyle
+    // c: statement_identifier, 
+    label: SyntaxHighlightStyle,
+    // css: tag_name, nesting_selector, universal_selector...
+    tag: SyntaxHighlightStyle,
+    // css: attribute, pseudo_element_selector (tag_name), 
+    attribute: SyntaxHighlightStyle,
+    // css: class_name, property_name, namespace_name...
+    property: SyntaxHighlightStyle
+    // true, false, null, nullptr
+    constant: SyntaxHighlightStyle
+    // css: @media, @import, @supports...
+    // js: declare, implements, interface, keyof, public...
+    keyword: SyntaxHighlightStyle
+    // note: js enum is currently defined as a keyword
+    enum: SyntaxHighlightStyle
+    // -, --, ->, !=, &&, ||, <=...
+    operator: SyntaxHighlightStyle
+    number: SyntaxHighlightStyle
+    boolean: SyntaxHighlightStyle
     // elixir: __MODULE__, __DIR__, __ENV__, etc
     // go: nil, iota
     "constant.builtin": SyntaxHighlightStyle,
-    // go: call_expression, method_declaration
-    // js: call_expression, method_definition, pair (key, arrow function)
-    "function.method": SyntaxHighlightStyle,
-    // ruby: identifier/"defined?" // Nate note: I don't fully understand this one.
-    "function.method.builtin": SyntaxHighlightStyle
-    // lua: function_call
-    "function.call": SyntaxHighlightStyle
+
+    // == Functions ====== /
+
+    function: SyntaxHighlightStyle
     // lua: assert, error, loadfile, tostring, unpack...
     "function.builtin": SyntaxHighlightStyle
-    // lua: hash_bang_line
-    preproc: SyntaxHighlightStyle
-
-    // md: indented_code_block, fenced_code_block, code_span
-    "text.literal": SyntaxHighlightStyle
-    // racket: lang_name
-    "variable.builtin": SyntaxHighlightStyle
+    // lua: function_call
+    "function.call": SyntaxHighlightStyle
+    // go: call_expression, method_declaration
+    // js: call_expression, method_definition, pair (key, arrow function)
     // rust: function_item name: (identifier)
     "function.definition": SyntaxHighlightStyle
     // rust: macro_definition name: (identifier) 
     "function.special.definition": SyntaxHighlightStyle
+    "function.method": SyntaxHighlightStyle,
+    // ruby: identifier/"defined?" // Nate note: I don't fully understand this one.
+    "function.method.builtin": SyntaxHighlightStyle
+
+    // == Unsorted ====== /
+    // lua: hash_bang_line
+    preproc: SyntaxHighlightStyle
+    // elixir, python: interpolation (ex: foo in ${foo})
+    // js: template_substitution
+    embedded: SyntaxHighlightStyle,
 }
 
 // HACK: "constructor" as a key in the syntax interface returns an error when a theme tries to use it.

From 7854f4a1ef4d9eeb06fff09a4c88885659c7685f Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Sun, 26 Feb 2023 14:57:43 -0500
Subject: [PATCH 03/19] WIP need to finish default styles

---
 styles/src/themes/common/syntax.ts | 71 ++++++++++++++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 styles/src/themes/common/syntax.ts

diff --git a/styles/src/themes/common/syntax.ts b/styles/src/themes/common/syntax.ts
new file mode 100644
index 0000000000..6faf48852f
--- /dev/null
+++ b/styles/src/themes/common/syntax.ts
@@ -0,0 +1,71 @@
+import deepmerge from "deepmerge"
+import { fontWeights } from "../../common";
+
+const defaultSyntaxHighlightStyle: Omit<SyntaxHighlightStyle, "color"> = {
+    weight: fontWeights.normal,
+    underline: false,
+    italic: false
+}
+
+function buildDefaultSyntax(colorScheme: ColorScheme): Syntax {
+    const syntax: {
+        [key: string]: Omit<SyntaxHighlightStyle, "color">
+    } = {}
+
+    for (const key of Object.keys({} as Syntax)) {
+        syntax[key as keyof Syntax] = {
+            ...defaultSyntaxHighlightStyle
+        }
+    }
+
+    const color = {
+        comment: colorScheme.ramps.neutral(0.71).hex()
+    }
+
+    const defaultSyntax: Syntax = {
+        ...syntax,
+        comment: {
+            color: color.comment
+        },
+        "comment.doc": {
+            color: color.comment
+        },
+        primary: {
+            color: colorScheme.ramps.neutral(1).hex()
+        },
+        predictive: {
+            color: colorScheme.ramps.neutral(0.57).hex()
+        }
+        // TODO: Finish default styles
+    }
+
+    return defaultSyntax
+}
+
+function mergeSyntax(defaultSyntax: Syntax, colorScheme: ColorScheme): Syntax {
+    if (!colorScheme.syntax) {
+        return defaultSyntax
+    }
+
+    return deepmerge<Syntax, Partial<ThemeSyntax>>(
+        defaultSyntax,
+        colorScheme.syntax,
+        {
+            arrayMerge: (destinationArray, sourceArray) => [
+                ...destinationArray,
+                ...sourceArray,
+            ],
+        }
+    )
+}
+
+import { ColorScheme, Syntax, SyntaxHighlightStyle, ThemeSyntax } from "./colorScheme";
+
+export function buildSyntax(colorScheme: ColorScheme): Syntax {
+
+    const defaultSyntax: Syntax = buildDefaultSyntax(colorScheme)
+
+    const syntax = mergeSyntax(defaultSyntax, colorScheme)
+
+    return syntax
+}
\ No newline at end of file

From 3b19a409f8b52bc12b818e6b001beb64592a4129 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Sun, 26 Feb 2023 15:01:18 -0500
Subject: [PATCH 04/19] Add some comments

---
 styles/src/themes/common/syntax.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/styles/src/themes/common/syntax.ts b/styles/src/themes/common/syntax.ts
index 6faf48852f..28600c4df4 100644
--- a/styles/src/themes/common/syntax.ts
+++ b/styles/src/themes/common/syntax.ts
@@ -8,10 +8,13 @@ const defaultSyntaxHighlightStyle: Omit<SyntaxHighlightStyle, "color"> = {
 }
 
 function buildDefaultSyntax(colorScheme: ColorScheme): Syntax {
+    // Make a temporary object that is allowed to be missing 
+    // the "color" property for each style
     const syntax: {
         [key: string]: Omit<SyntaxHighlightStyle, "color">
     } = {}
 
+    // then spread the default to each style
     for (const key of Object.keys({} as Syntax)) {
         syntax[key as keyof Syntax] = {
             ...defaultSyntaxHighlightStyle
@@ -22,6 +25,7 @@ function buildDefaultSyntax(colorScheme: ColorScheme): Syntax {
         comment: colorScheme.ramps.neutral(0.71).hex()
     }
 
+    // Then assign colors and use Syntax to enforce each style getting it's own color
     const defaultSyntax: Syntax = {
         ...syntax,
         comment: {

From f2d6a03dffdec06535cc594d1eef4cd7e0408310 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Sun, 26 Feb 2023 17:10:52 -0500
Subject: [PATCH 05/19] Finish adding default properties

---
 styles/src/styleTree/editor.ts          | 114 +--------------
 styles/src/themes/common/colorScheme.ts |   2 +-
 styles/src/themes/common/syntax.ts      | 182 ++++++++++++++++++++++--
 3 files changed, 171 insertions(+), 127 deletions(-)

diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts
index 6dde5363fc..2c67a6f23c 100644
--- a/styles/src/styleTree/editor.ts
+++ b/styles/src/styleTree/editor.ts
@@ -11,6 +11,7 @@ import { background, border, borderColor, foreground, text } from "./components"
 import hoverPopover from "./hoverPopover"
 
 import deepmerge from "deepmerge"
+import { buildSyntax } from "../themes/common/syntax"
 
 export default function editor(colorScheme: ColorScheme) {
     let layer = colorScheme.highest
@@ -43,118 +44,7 @@ export default function editor(colorScheme: ColorScheme) {
         }
     }
 
-    const defaultSyntax: Syntax = {
-        primary: {
-            color: colorScheme.ramps.neutral(1).hex(),
-            weight: fontWeights.normal,
-        },
-        "variable.special": {
-            // Highlights for self, this, etc
-            color: colorScheme.ramps.blue(0.7).hex(),
-            weight: fontWeights.normal,
-        },
-        comment: {
-            color: colorScheme.ramps.neutral(0.71).hex(),
-            weight: fontWeights.normal,
-        },
-        punctuation: {
-            color: colorScheme.ramps.neutral(0.86).hex(),
-            weight: fontWeights.normal,
-        },
-        constant: {
-            color: colorScheme.ramps.green(0.5).hex(),
-            weight: fontWeights.normal,
-        },
-        keyword: {
-            color: colorScheme.ramps.blue(0.5).hex(),
-            weight: fontWeights.normal,
-        },
-        function: {
-            color: colorScheme.ramps.yellow(0.5).hex(),
-            weight: fontWeights.normal,
-        },
-        type: {
-            color: colorScheme.ramps.cyan(0.5).hex(),
-            weight: fontWeights.normal,
-        },
-        constructor: {
-            color: colorScheme.ramps.blue(0.5).hex(),
-            weight: fontWeights.normal,
-        },
-        variant: {
-            color: colorScheme.ramps.blue(0.5).hex(),
-            weight: fontWeights.normal,
-        },
-        property: {
-            color: colorScheme.ramps.blue(0.5).hex(),
-            weight: fontWeights.normal,
-        },
-        enum: {
-            color: colorScheme.ramps.orange(0.5).hex(),
-            weight: fontWeights.normal,
-        },
-        operator: {
-            color: colorScheme.ramps.orange(0.5).hex(),
-            weight: fontWeights.normal,
-        },
-        string: {
-            color: colorScheme.ramps.orange(0.5).hex(),
-            weight: fontWeights.normal,
-        },
-        number: {
-            color: colorScheme.ramps.green(0.5).hex(),
-            weight: fontWeights.normal,
-        },
-        boolean: {
-            color: colorScheme.ramps.green(0.5).hex(),
-            weight: fontWeights.normal,
-        },
-        predictive: {
-            color: colorScheme.ramps.neutral(0.57).hex(),
-            weight: fontWeights.normal,
-        },
-        title: {
-            color: colorScheme.ramps.yellow(0.5).hex(),
-            weight: fontWeights.bold,
-        },
-        emphasis: {
-            color: colorScheme.ramps.blue(0.5).hex(),
-            weight: fontWeights.normal,
-        },
-        "emphasis.strong": {
-            color: colorScheme.ramps.blue(0.5).hex(),
-            weight: fontWeights.bold,
-        },
-        linkUri: {
-            color: colorScheme.ramps.green(0.5).hex(),
-            weight: fontWeights.normal,
-            underline: true,
-        },
-        linkText: {
-            color: colorScheme.ramps.orange(0.5).hex(),
-            weight: fontWeights.normal,
-            italic: true,
-        },
-    }
-
-    function createSyntax(colorScheme: ColorScheme): Syntax {
-        if (!colorScheme.syntax) {
-            return defaultSyntax
-        }
-
-        return deepmerge<Syntax, Partial<ThemeSyntax>>(
-            defaultSyntax,
-            colorScheme.syntax,
-            {
-                arrayMerge: (destinationArray, sourceArray) => [
-                    ...destinationArray,
-                    ...sourceArray,
-                ],
-            }
-        )
-    }
-
-    const syntax = createSyntax(colorScheme)
+    const syntax = buildSyntax(colorScheme)
 
     return {
         textColor: syntax.primary.color,
diff --git a/styles/src/themes/common/colorScheme.ts b/styles/src/themes/common/colorScheme.ts
index b56bf636a1..2594813bf1 100644
--- a/styles/src/themes/common/colorScheme.ts
+++ b/styles/src/themes/common/colorScheme.ts
@@ -122,7 +122,7 @@ export interface Syntax {
     title: SyntaxHighlightStyle
     linkUri: SyntaxHighlightStyle
     linkText: SyntaxHighlightStyle
-    // md: indented_code_block, fenced_code_block, code_span
+    /** md: indented_code_block, fenced_code_block, code_span */
     "text.literal": SyntaxHighlightStyle
 
     // == Punctuation ====== /
diff --git a/styles/src/themes/common/syntax.ts b/styles/src/themes/common/syntax.ts
index 28600c4df4..ada4c50b57 100644
--- a/styles/src/themes/common/syntax.ts
+++ b/styles/src/themes/common/syntax.ts
@@ -1,14 +1,14 @@
 import deepmerge from "deepmerge"
-import { fontWeights } from "../../common";
+import { fontWeights } from "../../common"
 
 const defaultSyntaxHighlightStyle: Omit<SyntaxHighlightStyle, "color"> = {
     weight: fontWeights.normal,
     underline: false,
-    italic: false
+    italic: false,
 }
 
 function buildDefaultSyntax(colorScheme: ColorScheme): Syntax {
-    // Make a temporary object that is allowed to be missing 
+    // Make a temporary object that is allowed to be missing
     // the "color" property for each style
     const syntax: {
         [key: string]: Omit<SyntaxHighlightStyle, "color">
@@ -17,32 +17,182 @@ function buildDefaultSyntax(colorScheme: ColorScheme): Syntax {
     // then spread the default to each style
     for (const key of Object.keys({} as Syntax)) {
         syntax[key as keyof Syntax] = {
-            ...defaultSyntaxHighlightStyle
+            ...defaultSyntaxHighlightStyle,
         }
     }
 
     const color = {
-        comment: colorScheme.ramps.neutral(0.71).hex()
+        primary: colorScheme.ramps.neutral(1).hex(),
+        comment: colorScheme.ramps.neutral(0.71).hex(),
+        punctuation: colorScheme.ramps.neutral(0.86).hex(),
+        predictive: colorScheme.ramps.neutral(0.57).hex(),
+        emphasis: colorScheme.ramps.blue(0.5).hex(),
+        string: colorScheme.ramps.orange(0.5).hex(),
+        function: colorScheme.ramps.yellow(0.5).hex(),
+        type: colorScheme.ramps.cyan(0.5).hex(),
+        constructor: colorScheme.ramps.blue(0.5).hex(),
+        variant: colorScheme.ramps.blue(0.5).hex(),
+        property: colorScheme.ramps.blue(0.5).hex(),
+        enum: colorScheme.ramps.orange(0.5).hex(),
+        operator: colorScheme.ramps.orange(0.5).hex(),
+        number: colorScheme.ramps.green(0.5).hex(),
+        boolean: colorScheme.ramps.green(0.5).hex(),
+        constant: colorScheme.ramps.green(0.5).hex(),
+        keyword: colorScheme.ramps.blue(0.5).hex(),
     }
 
     // Then assign colors and use Syntax to enforce each style getting it's own color
     const defaultSyntax: Syntax = {
         ...syntax,
         comment: {
-            color: color.comment
+            color: color.comment,
         },
         "comment.doc": {
-            color: color.comment
+            color: color.comment,
         },
         primary: {
-            color: colorScheme.ramps.neutral(1).hex()
+            color: color.primary,
         },
         predictive: {
-            color: colorScheme.ramps.neutral(0.57).hex()
-        }
-        // TODO: Finish default styles
+            color: color.predictive,
+        },
+        emphasis: {
+            color: color.emphasis,
+        },
+        "emphasis.strong": {
+            color: color.emphasis,
+            weight: fontWeights.bold,
+        },
+        title: {
+            color: color.primary,
+            weight: fontWeights.bold,
+        },
+        linkUri: {
+            color: colorScheme.ramps.green(0.5).hex(),
+            underline: true,
+        },
+        linkText: {
+            color: colorScheme.ramps.orange(0.5).hex(),
+            italic: true,
+        },
+        "text.literal": {
+            color: color.string,
+        },
+        punctuation: {
+            color: color.punctuation,
+        },
+        "punctuation.bracket": {
+            color: color.punctuation,
+        },
+        "punctuation.delimiter": {
+            color: color.punctuation,
+        },
+        "punctuation.special": {
+            color: colorScheme.ramps.neutral(0.86).hex(),
+        },
+        "punctuation.list_marker": {
+            color: color.punctuation,
+        },
+        string: {
+            color: color.string,
+        },
+        "string.special": {
+            color: color.string,
+        },
+        "string.special.symbol": {
+            color: color.string,
+        },
+        "string.special.regex": {
+            color: color.string,
+        },
+        "string.escape": {
+            color: color.comment,
+        },
+        "string.regex": {
+            color: color.string,
+        },
+        constructor: {
+            color: colorScheme.ramps.blue(0.5).hex(),
+        },
+        variant: {
+            color: colorScheme.ramps.blue(0.5).hex(),
+        },
+        type: {
+            color: color.type,
+        },
+        "type.builtin": {
+            color: color.type,
+        },
+        "variable.builtin": {
+            color: colorScheme.ramps.blue(0.5).hex(),
+        },
+        "variable.special": {
+            color: colorScheme.ramps.blue(0.7).hex(),
+        },
+        label: {
+            color: colorScheme.ramps.blue(0.5).hex(),
+        },
+        tag: {
+            color: colorScheme.ramps.blue(0.5).hex(),
+        },
+        attribute: {
+            color: colorScheme.ramps.blue(0.5).hex(),
+        },
+        property: {
+            color: colorScheme.ramps.blue(0.5).hex(),
+        },
+        constant: {
+            color: color.constant,
+        },
+        keyword: {
+            color: color.keyword,
+        },
+        enum: {
+            color: color.enum,
+        },
+        operator: {
+            color: color.operator,
+        },
+        number: {
+            color: color.number,
+        },
+        boolean: {
+            color: color.boolean,
+        },
+        "constant.builtin": {
+            color: color.constant,
+        },
+        function: {
+            color: color.function,
+        },
+        "function.builtin": {
+            color: color.function,
+        },
+        "function.call": {
+            color: color.function,
+        },
+        "function.definition": {
+            color: color.function,
+        },
+        "function.special.definition": {
+            color: color.function,
+        },
+        "function.method": {
+            color: color.function,
+        },
+        "function.method.builtin": {
+            color: color.function,
+        },
+        preproc: {
+            color: color.primary,
+        },
+        embedded: {
+            color: color.primary,
+        },
     }
 
+    console.log(JSON.stringify(defaultSyntax, null, 2))
+
     return defaultSyntax
 }
 
@@ -63,13 +213,17 @@ function mergeSyntax(defaultSyntax: Syntax, colorScheme: ColorScheme): Syntax {
     )
 }
 
-import { ColorScheme, Syntax, SyntaxHighlightStyle, ThemeSyntax } from "./colorScheme";
+import {
+    ColorScheme,
+    Syntax,
+    SyntaxHighlightStyle,
+    ThemeSyntax,
+} from "./colorScheme"
 
 export function buildSyntax(colorScheme: ColorScheme): Syntax {
-
     const defaultSyntax: Syntax = buildDefaultSyntax(colorScheme)
 
     const syntax = mergeSyntax(defaultSyntax, colorScheme)
 
     return syntax
-}
\ No newline at end of file
+}

From 94c76c45e6efdd77982836822f4f32a4d0e9819e Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Sun, 26 Feb 2023 17:11:02 -0500
Subject: [PATCH 06/19] Style `One Dark` with new properties

---
 styles/src/themes/one-dark.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/styles/src/themes/one-dark.ts b/styles/src/themes/one-dark.ts
index a4326aa4c6..65d8f3e20b 100644
--- a/styles/src/themes/one-dark.ts
+++ b/styles/src/themes/one-dark.ts
@@ -1,4 +1,5 @@
 import chroma from "chroma-js"
+import { fontWeights } from "../common"
 import { Meta, ThemeSyntax } from "./common/colorScheme"
 import { colorRamp, createColorScheme } from "./common/ramps"
 
@@ -8,6 +9,7 @@ const color = {
     white: "#ACB2BE",
     grey: "#5D636F",
     red: "#D07277",
+    darkRed: "#B1574B",
     orange: "#C0966B",
     yellow: "#DFC184",
     green: "#A1C181",
@@ -47,10 +49,22 @@ const syntax: ThemeSyntax = {
     property: { color: color.red },
     number: { color: color.orange },
     string: { color: color.green },
+    "text.literal": { color: color.green },
     keyword: { color: color.purple },
     boolean: { color: color.orange },
+    title: { color: color.red, weight: fontWeights.normal },
     punctuation: { color: color.white },
+    "punctuation.special": { color: color.darkRed },
+    "punctuation.list_marker": { color: color.red },
     operator: { color: color.teal },
+    "variable.special": { color: color.orange },
+    variant: { color: color.blue },
+    enum: { color: color.red },
+    "emphasis.strong": {
+        color: color.orange,
+    },
+    linkText: { color: color.blue, italic: false },
+    linkUri: { color: color.teal },
 }
 
 export const dark = createColorScheme(name, false, ramps, syntax)

From 504d88d56cf122742f71630af26e3e26359c530e Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Sun, 26 Feb 2023 17:12:11 -0500
Subject: [PATCH 07/19] Remove unused code

---
 styles/src/styleTree/editor.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts
index 2c67a6f23c..5c7152072b 100644
--- a/styles/src/styleTree/editor.ts
+++ b/styles/src/styleTree/editor.ts
@@ -1,16 +1,12 @@
-import { fontWeights } from "../common"
 import { withOpacity } from "../utils/color"
 import {
     ColorScheme,
     Layer,
     StyleSets,
-    Syntax,
-    ThemeSyntax,
 } from "../themes/common/colorScheme"
 import { background, border, borderColor, foreground, text } from "./components"
 import hoverPopover from "./hoverPopover"
 
-import deepmerge from "deepmerge"
 import { buildSyntax } from "../themes/common/syntax"
 
 export default function editor(colorScheme: ColorScheme) {

From 794e6e22a6deccc3831bb8db635058017512dbf3 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Sun, 26 Feb 2023 17:12:48 -0500
Subject: [PATCH 08/19] Format

---
 styles/src/styleTree/editor.ts          |  6 +----
 styles/src/themes/common/colorScheme.ts | 34 ++++++++++++-------------
 2 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts
index 5c7152072b..85c9ccec95 100644
--- a/styles/src/styleTree/editor.ts
+++ b/styles/src/styleTree/editor.ts
@@ -1,9 +1,5 @@
 import { withOpacity } from "../utils/color"
-import {
-    ColorScheme,
-    Layer,
-    StyleSets,
-} from "../themes/common/colorScheme"
+import { ColorScheme, Layer, StyleSets } from "../themes/common/colorScheme"
 import { background, border, borderColor, foreground, text } from "./components"
 import hoverPopover from "./hoverPopover"
 
diff --git a/styles/src/themes/common/colorScheme.ts b/styles/src/themes/common/colorScheme.ts
index 2594813bf1..d4e63376b9 100644
--- a/styles/src/themes/common/colorScheme.ts
+++ b/styles/src/themes/common/colorScheme.ts
@@ -112,7 +112,7 @@ export interface Syntax {
     // == Text Styles ====== /
     comment: SyntaxHighlightStyle
     // elixir: doc comment
-    "comment.doc": SyntaxHighlightStyle,
+    "comment.doc": SyntaxHighlightStyle
     primary: SyntaxHighlightStyle
     predictive: SyntaxHighlightStyle
 
@@ -128,12 +128,12 @@ export interface Syntax {
     // == Punctuation ====== /
     punctuation: SyntaxHighlightStyle
     /** Example: `(`, `[`, `{`...*/
-    "punctuation.bracket": SyntaxHighlightStyle,
+    "punctuation.bracket": SyntaxHighlightStyle
     /**., ;*/
-    "punctuation.delimiter": SyntaxHighlightStyle,
+    "punctuation.delimiter": SyntaxHighlightStyle
     // js, ts: ${, } in a template literal
     // yaml: *, &, ---, ...
-    "punctuation.special": SyntaxHighlightStyle,
+    "punctuation.special": SyntaxHighlightStyle
     // md: list_marker_plus, list_marker_dot, etc
     "punctuation.list_marker": SyntaxHighlightStyle
 
@@ -144,23 +144,23 @@ export interface Syntax {
     // js: this, super
     // racket: regex
     // toml: offset_date_time, local_date_time...
-    "string.special": SyntaxHighlightStyle,
+    "string.special": SyntaxHighlightStyle
     // elixir: atom, quoted_atom, keyword, quoted_keyword
     // ruby: simple_symbol, delimited_symbol...
     "string.special.symbol": SyntaxHighlightStyle
     // ruby: Regular expression
     "string.special.regex": SyntaxHighlightStyle
     // elixir, python, yaml...: escape_sequence
-    "string.escape": SyntaxHighlightStyle,
+    "string.escape": SyntaxHighlightStyle
     // Regular expressions
-    "string.regex": SyntaxHighlightStyle,
+    "string.regex": SyntaxHighlightStyle
 
     // == Types ====== /
     constructor: SyntaxHighlightStyle
     variant: SyntaxHighlightStyle
     type: SyntaxHighlightStyle
     // js: predefined_type
-    "type.builtin": SyntaxHighlightStyle,
+    "type.builtin": SyntaxHighlightStyle
 
     // == Values
 
@@ -170,12 +170,12 @@ export interface Syntax {
     // css: -- (var(--foo))
     // lua: self
     "variable.special": SyntaxHighlightStyle
-    // c: statement_identifier, 
-    label: SyntaxHighlightStyle,
+    // c: statement_identifier,
+    label: SyntaxHighlightStyle
     // css: tag_name, nesting_selector, universal_selector...
-    tag: SyntaxHighlightStyle,
-    // css: attribute, pseudo_element_selector (tag_name), 
-    attribute: SyntaxHighlightStyle,
+    tag: SyntaxHighlightStyle
+    // css: attribute, pseudo_element_selector (tag_name),
+    attribute: SyntaxHighlightStyle
     // css: class_name, property_name, namespace_name...
     property: SyntaxHighlightStyle
     // true, false, null, nullptr
@@ -191,7 +191,7 @@ export interface Syntax {
     boolean: SyntaxHighlightStyle
     // elixir: __MODULE__, __DIR__, __ENV__, etc
     // go: nil, iota
-    "constant.builtin": SyntaxHighlightStyle,
+    "constant.builtin": SyntaxHighlightStyle
 
     // == Functions ====== /
 
@@ -204,9 +204,9 @@ export interface Syntax {
     // js: call_expression, method_definition, pair (key, arrow function)
     // rust: function_item name: (identifier)
     "function.definition": SyntaxHighlightStyle
-    // rust: macro_definition name: (identifier) 
+    // rust: macro_definition name: (identifier)
     "function.special.definition": SyntaxHighlightStyle
-    "function.method": SyntaxHighlightStyle,
+    "function.method": SyntaxHighlightStyle
     // ruby: identifier/"defined?" // Nate note: I don't fully understand this one.
     "function.method.builtin": SyntaxHighlightStyle
 
@@ -215,7 +215,7 @@ export interface Syntax {
     preproc: SyntaxHighlightStyle
     // elixir, python: interpolation (ex: foo in ${foo})
     // js: template_substitution
-    embedded: SyntaxHighlightStyle,
+    embedded: SyntaxHighlightStyle
 }
 
 // HACK: "constructor" as a key in the syntax interface returns an error when a theme tries to use it.

From 8c51a62a8d37074a67d593be557b259afd0b00f7 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Mon, 27 Feb 2023 10:08:24 -0500
Subject: [PATCH 09/19] Unify regex highlight style under `@string.regex`

---
 crates/zed/src/languages/javascript/highlights.scm | 2 +-
 crates/zed/src/languages/racket/highlights.scm     | 2 +-
 crates/zed/src/languages/ruby/highlights.scm       | 2 +-
 crates/zed/src/languages/typescript/highlights.scm | 2 +-
 styles/src/themes/common/colorScheme.ts            | 3 ---
 styles/src/themes/common/syntax.ts                 | 3 ---
 6 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/crates/zed/src/languages/javascript/highlights.scm b/crates/zed/src/languages/javascript/highlights.scm
index bd1986b6b3..dca0b28949 100644
--- a/crates/zed/src/languages/javascript/highlights.scm
+++ b/crates/zed/src/languages/javascript/highlights.scm
@@ -72,7 +72,7 @@
   (template_string)
 ] @string
 
-(regex) @string.special
+(regex) @string.regex
 (number) @number
 
 ; Tokens
diff --git a/crates/zed/src/languages/racket/highlights.scm b/crates/zed/src/languages/racket/highlights.scm
index 9eeeb1d4ea..42b85774c9 100644
--- a/crates/zed/src/languages/racket/highlights.scm
+++ b/crates/zed/src/languages/racket/highlights.scm
@@ -3,7 +3,7 @@
 [(string)
  (here_string)
  (byte_string)] @string
-(regex) @string.special
+(regex) @string.regex
 (escape_sequence) @escape
 
 [(comment)
diff --git a/crates/zed/src/languages/ruby/highlights.scm b/crates/zed/src/languages/ruby/highlights.scm
index 0dfd725cd8..7ed6b3ab3d 100644
--- a/crates/zed/src/languages/ruby/highlights.scm
+++ b/crates/zed/src/languages/ruby/highlights.scm
@@ -95,7 +95,7 @@
   (bare_symbol)
 ] @string.special.symbol
 
-(regex) @string.special.regex
+(regex) @string.regex
 (escape_sequence) @escape
 
 [
diff --git a/crates/zed/src/languages/typescript/highlights.scm b/crates/zed/src/languages/typescript/highlights.scm
index 43df33d158..8149ced0dd 100644
--- a/crates/zed/src/languages/typescript/highlights.scm
+++ b/crates/zed/src/languages/typescript/highlights.scm
@@ -72,7 +72,7 @@
   (template_string)
 ] @string
 
-(regex) @string.special
+(regex) @string.regex
 (number) @number
 
 ; Tokens
diff --git a/styles/src/themes/common/colorScheme.ts b/styles/src/themes/common/colorScheme.ts
index d4e63376b9..ad2de9b62d 100644
--- a/styles/src/themes/common/colorScheme.ts
+++ b/styles/src/themes/common/colorScheme.ts
@@ -142,14 +142,11 @@ export interface Syntax {
     string: SyntaxHighlightStyle
     // css: color_value
     // js: this, super
-    // racket: regex
     // toml: offset_date_time, local_date_time...
     "string.special": SyntaxHighlightStyle
     // elixir: atom, quoted_atom, keyword, quoted_keyword
     // ruby: simple_symbol, delimited_symbol...
     "string.special.symbol": SyntaxHighlightStyle
-    // ruby: Regular expression
-    "string.special.regex": SyntaxHighlightStyle
     // elixir, python, yaml...: escape_sequence
     "string.escape": SyntaxHighlightStyle
     // Regular expressions
diff --git a/styles/src/themes/common/syntax.ts b/styles/src/themes/common/syntax.ts
index ada4c50b57..9c0b61447e 100644
--- a/styles/src/themes/common/syntax.ts
+++ b/styles/src/themes/common/syntax.ts
@@ -102,9 +102,6 @@ function buildDefaultSyntax(colorScheme: ColorScheme): Syntax {
         "string.special.symbol": {
             color: color.string,
         },
-        "string.special.regex": {
-            color: color.string,
-        },
         "string.escape": {
             color: color.comment,
         },

From f84046b74fc1c67d0d7586571270b4130be42f53 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Mon, 27 Feb 2023 10:40:01 -0500
Subject: [PATCH 10/19] use `@boolean` in all flavors of js

---
 crates/zed/src/languages/javascript/highlights.scm | 7 +++++--
 crates/zed/src/languages/typescript/highlights.scm | 7 +++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/crates/zed/src/languages/javascript/highlights.scm b/crates/zed/src/languages/javascript/highlights.scm
index dca0b28949..21af8b03c4 100644
--- a/crates/zed/src/languages/javascript/highlights.scm
+++ b/crates/zed/src/languages/javascript/highlights.scm
@@ -59,12 +59,15 @@
 (super) @variable.special
 
 [
-  (true)
-  (false)
   (null)
   (undefined)
 ] @constant.builtin
 
+[
+  (true)
+  (false)
+] @boolean
+
 (comment) @comment
 
 [
diff --git a/crates/zed/src/languages/typescript/highlights.scm b/crates/zed/src/languages/typescript/highlights.scm
index 8149ced0dd..5c459fba9e 100644
--- a/crates/zed/src/languages/typescript/highlights.scm
+++ b/crates/zed/src/languages/typescript/highlights.scm
@@ -59,12 +59,15 @@
 (super) @variable.special
 
 [
-  (true)
-  (false)
   (null)
   (undefined)
 ] @constant.builtin
 
+[
+  (true)
+  (false)
+] @boolean
+
 (comment) @comment
 
 [

From 46dc347a1af5d0c8c7edbd76dae572e0167e6c3f Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Mon, 27 Feb 2023 10:47:30 -0500
Subject: [PATCH 11/19] Bring andromeda in line with it's correct colors

---
 styles/src/themes/andromeda.ts | 59 +++++++++++++++++++++++++++-------
 1 file changed, 47 insertions(+), 12 deletions(-)

diff --git a/styles/src/themes/andromeda.ts b/styles/src/themes/andromeda.ts
index 7e715f61ac..7935e49d78 100644
--- a/styles/src/themes/andromeda.ts
+++ b/styles/src/themes/andromeda.ts
@@ -1,14 +1,27 @@
 import chroma from "chroma-js"
-import { Meta } from "./common/colorScheme"
+import { Meta, ThemeSyntax } from "./common/colorScheme"
 import { colorRamp, createColorScheme } from "./common/ramps"
 
 const name = "Andromeda"
 
+const color = {
+    text: "#D5CED9",
+    gray: "#5f6167",
+    cyan: "#00e8c6",
+    orange: "#f39c12",
+    yellow: "#FFE66D",
+    pink: "#ff00aa",
+    hotPink: "#f92672",
+    purple: "#c74ded",
+    blue: "#7cb7ff",
+    red: "#ee5d43",
+    green: "#96E072",
+}
+
 const ramps = {
     neutral: chroma
         .scale([
-            "#1E2025",
-            "#23262E",
+            "#24262D",
             "#292E38",
             "#2E323C",
             "#ACA8AE",
@@ -17,17 +30,39 @@ const ramps = {
             "#F7F7F8",
         ])
         .domain([0, 0.15, 0.25, 0.35, 0.7, 0.8, 0.9, 1]),
-    red: colorRamp(chroma("#F92672")),
-    orange: colorRamp(chroma("#F39C12")),
-    yellow: colorRamp(chroma("#FFE66D")),
-    green: colorRamp(chroma("#96E072")),
-    cyan: colorRamp(chroma("#00E8C6")),
-    blue: colorRamp(chroma("#0CA793")),
-    violet: colorRamp(chroma("#8A3FA6")),
-    magenta: colorRamp(chroma("#C74DED")),
+    red: colorRamp(chroma(color.red)),
+    orange: colorRamp(chroma(color.orange)),
+    yellow: colorRamp(chroma(color.yellow)),
+    green: colorRamp(chroma(color.green)),
+    cyan: colorRamp(chroma(color.cyan)),
+    blue: colorRamp(chroma(color.blue)),
+    violet: colorRamp(chroma(color.purple)),
+    magenta: colorRamp(chroma(color.hotPink)),
 }
 
-export const dark = createColorScheme(`${name}`, false, ramps)
+const syntax: ThemeSyntax = {
+    variable: { color: color.cyan },
+    "variable.special": { color: color.cyan },
+    "punctuation.special": { color: color.red },
+    attribute: { color: color.text },
+    boolean: { color: color.red },
+    comment: { color: color.gray },
+    function: { color: color.yellow },
+    keyword: { color: color.purple },
+    number: { color: color.orange },
+    operator: { color: color.red },
+    primary: { color: color.text },
+    property: { color: color.text },
+    string: { color: color.green },
+    type: { color: color.yellow },
+    title: { color: color.hotPink },
+    linkText: { color: color.red },
+    linkUri: { color: color.purple },
+    "text.literal": { color: color.green },
+    "punctuation.list_marker": { color: color.yellow },
+}
+
+export const dark = createColorScheme(`${name}`, false, ramps, syntax)
 
 export const meta: Meta = {
     name,

From 40c2409b80791de2e9786305e2256e02a3b6225b Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Mon, 27 Feb 2023 10:47:52 -0500
Subject: [PATCH 12/19] Add missing `variable` property to `Syntax`

---
 styles/src/themes/common/colorScheme.ts | 2 +-
 styles/src/themes/common/syntax.ts      | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/styles/src/themes/common/colorScheme.ts b/styles/src/themes/common/colorScheme.ts
index ad2de9b62d..91e8f5a020 100644
--- a/styles/src/themes/common/colorScheme.ts
+++ b/styles/src/themes/common/colorScheme.ts
@@ -160,7 +160,7 @@ export interface Syntax {
     "type.builtin": SyntaxHighlightStyle
 
     // == Values
-
+    variable: SyntaxHighlightStyle,
     // racket: lang_name
     "variable.builtin": SyntaxHighlightStyle
     // this, ...
diff --git a/styles/src/themes/common/syntax.ts b/styles/src/themes/common/syntax.ts
index 9c0b61447e..a1c82ec7e9 100644
--- a/styles/src/themes/common/syntax.ts
+++ b/styles/src/themes/common/syntax.ts
@@ -120,6 +120,9 @@ function buildDefaultSyntax(colorScheme: ColorScheme): Syntax {
         "type.builtin": {
             color: color.type,
         },
+        variable: {
+            color: color.primary,
+        },
         "variable.builtin": {
             color: colorScheme.ramps.blue(0.5).hex(),
         },

From 465fcec36d25c9310a13885f73dda7c3d784da1a Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Mon, 27 Feb 2023 10:48:55 -0500
Subject: [PATCH 13/19] Format

---
 styles/src/themes/common/colorScheme.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles/src/themes/common/colorScheme.ts b/styles/src/themes/common/colorScheme.ts
index 91e8f5a020..d64271c00c 100644
--- a/styles/src/themes/common/colorScheme.ts
+++ b/styles/src/themes/common/colorScheme.ts
@@ -160,7 +160,7 @@ export interface Syntax {
     "type.builtin": SyntaxHighlightStyle
 
     // == Values
-    variable: SyntaxHighlightStyle,
+    variable: SyntaxHighlightStyle
     // racket: lang_name
     "variable.builtin": SyntaxHighlightStyle
     // this, ...

From df798c1a7f4631ba1972d5b47efcb88788c23d5d Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Mon, 27 Feb 2023 10:52:53 -0500
Subject: [PATCH 14/19] Remove `punctuation.special` until bug is fixed

---
 styles/src/themes/andromeda.ts | 16 ++++++++-------
 styles/src/themes/one-dark.ts  | 36 +++++++++++++++++-----------------
 styles/src/themes/one-light.ts | 34 ++++++++++++++++----------------
 3 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/styles/src/themes/andromeda.ts b/styles/src/themes/andromeda.ts
index 7935e49d78..1fb5448eb6 100644
--- a/styles/src/themes/andromeda.ts
+++ b/styles/src/themes/andromeda.ts
@@ -41,25 +41,27 @@ const ramps = {
 }
 
 const syntax: ThemeSyntax = {
-    variable: { color: color.cyan },
+    "punctuation.list_marker": { color: color.yellow },
+    "text.literal": { color: color.green },
     "variable.special": { color: color.cyan },
-    "punctuation.special": { color: color.red },
     attribute: { color: color.text },
     boolean: { color: color.red },
     comment: { color: color.gray },
     function: { color: color.yellow },
     keyword: { color: color.purple },
+    linkText: { color: color.red },
+    linkUri: { color: color.purple },
     number: { color: color.orange },
     operator: { color: color.red },
     primary: { color: color.text },
     property: { color: color.text },
     string: { color: color.green },
-    type: { color: color.yellow },
     title: { color: color.hotPink },
-    linkText: { color: color.red },
-    linkUri: { color: color.purple },
-    "text.literal": { color: color.green },
-    "punctuation.list_marker": { color: color.yellow },
+    type: { color: color.yellow },
+    variable: { color: color.cyan },
+
+    // TODO: uncomment this once the bug with styling curly braces in template literals is fixed
+    // "punctuation.special": { color: color.red },
 }
 
 export const dark = createColorScheme(`${name}`, false, ramps, syntax)
diff --git a/styles/src/themes/one-dark.ts b/styles/src/themes/one-dark.ts
index 65d8f3e20b..56a8399a82 100644
--- a/styles/src/themes/one-dark.ts
+++ b/styles/src/themes/one-dark.ts
@@ -42,29 +42,29 @@ const ramps = {
 }
 
 const syntax: ThemeSyntax = {
-    primary: { color: color.white },
-    comment: { color: color.grey },
-    function: { color: color.blue },
-    type: { color: color.teal },
-    property: { color: color.red },
-    number: { color: color.orange },
-    string: { color: color.green },
-    "text.literal": { color: color.green },
-    keyword: { color: color.purple },
-    boolean: { color: color.orange },
-    title: { color: color.red, weight: fontWeights.normal },
-    punctuation: { color: color.white },
-    "punctuation.special": { color: color.darkRed },
+    "emphasis.strong": { color: color.orange },
     "punctuation.list_marker": { color: color.red },
-    operator: { color: color.teal },
+    "text.literal": { color: color.green },
     "variable.special": { color: color.orange },
-    variant: { color: color.blue },
+    boolean: { color: color.orange },
+    comment: { color: color.grey },
     enum: { color: color.red },
-    "emphasis.strong": {
-        color: color.orange,
-    },
+    function: { color: color.blue },
+    keyword: { color: color.purple },
     linkText: { color: color.blue, italic: false },
     linkUri: { color: color.teal },
+    number: { color: color.orange },
+    operator: { color: color.teal },
+    primary: { color: color.white },
+    property: { color: color.red },
+    punctuation: { color: color.white },
+    string: { color: color.green },
+    title: { color: color.red, weight: fontWeights.normal },
+    type: { color: color.teal },
+    variant: { color: color.blue },
+
+    // TODO: uncomment this once the bug with styling curly braces in template literals is fixed
+    // "punctuation.special": { color: color.darkRed },
 }
 
 export const dark = createColorScheme(name, false, ramps, syntax)
diff --git a/styles/src/themes/one-light.ts b/styles/src/themes/one-light.ts
index 91f66ec6ea..1979206cb9 100644
--- a/styles/src/themes/one-light.ts
+++ b/styles/src/themes/one-light.ts
@@ -42,26 +42,26 @@ const ramps = {
 }
 
 const syntax: ThemeSyntax = {
-    primary: { color: color.black },
-    "variable.special": { color: color.orange },
-    comment: { color: color.grey },
-    punctuation: { color: color.black },
-    keyword: { color: color.purple },
-    function: { color: color.blue },
-    type: { color: color.teal },
-    variant: { color: color.blue },
-    property: { color: color.red },
-    enum: { color: color.red },
-    operator: { color: color.teal },
-    string: { color: color.green },
-    number: { color: color.orange },
+    "emphasis.strong": { color: color.orange },
     boolean: { color: color.orange },
-    title: { color: color.red, weight: fontWeights.normal },
-    "emphasis.strong": {
-        color: color.orange,
-    },
+    comment: { color: color.grey },
+    enum: { color: color.red },
+    function: { color: color.blue },
+    keyword: { color: color.purple },
     linkText: { color: color.blue },
     linkUri: { color: color.teal },
+    number: { color: color.orange },
+    operator: { color: color.teal },
+    primary: { color: color.black },
+    property: { color: color.red },
+    punctuation: { color: color.black },
+    string: { color: color.green },
+    title: { color: color.red, weight: fontWeights.normal },
+    type: { color: color.teal },
+    variant: { color: color.blue },
+
+    // TODO: uncomment this once the bug with styling curly braces in template literals is fixed
+    // "variable.special": { color: color.orange },
 }
 
 export const light = createColorScheme(name, true, ramps, syntax)

From c9997a81a37b45bdff6b9109b16f0e745137bff9 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Mon, 27 Feb 2023 11:01:32 -0500
Subject: [PATCH 15/19] Move syntax types to `syntax.ts`

---
 styles/src/themes/common/colorScheme.ts | 121 +---------------------
 styles/src/themes/common/syntax.ts      | 130 ++++++++++++++++++++++--
 2 files changed, 124 insertions(+), 127 deletions(-)

diff --git a/styles/src/themes/common/colorScheme.ts b/styles/src/themes/common/colorScheme.ts
index d64271c00c..d2f0d17201 100644
--- a/styles/src/themes/common/colorScheme.ts
+++ b/styles/src/themes/common/colorScheme.ts
@@ -1,5 +1,6 @@
 import { Scale } from "chroma-js"
-import { FontWeight } from "../../common"
+import { Syntax, ThemeSyntax, SyntaxHighlightStyle } from "./syntax"
+export { Syntax, ThemeSyntax, SyntaxHighlightStyle }
 
 export interface ColorScheme {
     name: string
@@ -100,121 +101,3 @@ export interface Style {
     border: string
     foreground: string
 }
-
-export interface SyntaxHighlightStyle {
-    color: string
-    weight?: FontWeight
-    underline?: boolean
-    italic?: boolean
-}
-
-export interface Syntax {
-    // == Text Styles ====== /
-    comment: SyntaxHighlightStyle
-    // elixir: doc comment
-    "comment.doc": SyntaxHighlightStyle
-    primary: SyntaxHighlightStyle
-    predictive: SyntaxHighlightStyle
-
-    // === Formatted Text ====== /
-    emphasis: SyntaxHighlightStyle
-    "emphasis.strong": SyntaxHighlightStyle
-    title: SyntaxHighlightStyle
-    linkUri: SyntaxHighlightStyle
-    linkText: SyntaxHighlightStyle
-    /** md: indented_code_block, fenced_code_block, code_span */
-    "text.literal": SyntaxHighlightStyle
-
-    // == Punctuation ====== /
-    punctuation: SyntaxHighlightStyle
-    /** Example: `(`, `[`, `{`...*/
-    "punctuation.bracket": SyntaxHighlightStyle
-    /**., ;*/
-    "punctuation.delimiter": SyntaxHighlightStyle
-    // js, ts: ${, } in a template literal
-    // yaml: *, &, ---, ...
-    "punctuation.special": SyntaxHighlightStyle
-    // md: list_marker_plus, list_marker_dot, etc
-    "punctuation.list_marker": SyntaxHighlightStyle
-
-    // == Strings ====== /
-
-    string: SyntaxHighlightStyle
-    // css: color_value
-    // js: this, super
-    // toml: offset_date_time, local_date_time...
-    "string.special": SyntaxHighlightStyle
-    // elixir: atom, quoted_atom, keyword, quoted_keyword
-    // ruby: simple_symbol, delimited_symbol...
-    "string.special.symbol": SyntaxHighlightStyle
-    // elixir, python, yaml...: escape_sequence
-    "string.escape": SyntaxHighlightStyle
-    // Regular expressions
-    "string.regex": SyntaxHighlightStyle
-
-    // == Types ====== /
-    constructor: SyntaxHighlightStyle
-    variant: SyntaxHighlightStyle
-    type: SyntaxHighlightStyle
-    // js: predefined_type
-    "type.builtin": SyntaxHighlightStyle
-
-    // == Values
-    variable: SyntaxHighlightStyle
-    // racket: lang_name
-    "variable.builtin": SyntaxHighlightStyle
-    // this, ...
-    // css: -- (var(--foo))
-    // lua: self
-    "variable.special": SyntaxHighlightStyle
-    // c: statement_identifier,
-    label: SyntaxHighlightStyle
-    // css: tag_name, nesting_selector, universal_selector...
-    tag: SyntaxHighlightStyle
-    // css: attribute, pseudo_element_selector (tag_name),
-    attribute: SyntaxHighlightStyle
-    // css: class_name, property_name, namespace_name...
-    property: SyntaxHighlightStyle
-    // true, false, null, nullptr
-    constant: SyntaxHighlightStyle
-    // css: @media, @import, @supports...
-    // js: declare, implements, interface, keyof, public...
-    keyword: SyntaxHighlightStyle
-    // note: js enum is currently defined as a keyword
-    enum: SyntaxHighlightStyle
-    // -, --, ->, !=, &&, ||, <=...
-    operator: SyntaxHighlightStyle
-    number: SyntaxHighlightStyle
-    boolean: SyntaxHighlightStyle
-    // elixir: __MODULE__, __DIR__, __ENV__, etc
-    // go: nil, iota
-    "constant.builtin": SyntaxHighlightStyle
-
-    // == Functions ====== /
-
-    function: SyntaxHighlightStyle
-    // lua: assert, error, loadfile, tostring, unpack...
-    "function.builtin": SyntaxHighlightStyle
-    // lua: function_call
-    "function.call": SyntaxHighlightStyle
-    // go: call_expression, method_declaration
-    // js: call_expression, method_definition, pair (key, arrow function)
-    // rust: function_item name: (identifier)
-    "function.definition": SyntaxHighlightStyle
-    // rust: macro_definition name: (identifier)
-    "function.special.definition": SyntaxHighlightStyle
-    "function.method": SyntaxHighlightStyle
-    // ruby: identifier/"defined?" // Nate note: I don't fully understand this one.
-    "function.method.builtin": SyntaxHighlightStyle
-
-    // == Unsorted ====== /
-    // lua: hash_bang_line
-    preproc: SyntaxHighlightStyle
-    // elixir, python: interpolation (ex: foo in ${foo})
-    // js: template_substitution
-    embedded: SyntaxHighlightStyle
-}
-
-// HACK: "constructor" as a key in the syntax interface returns an error when a theme tries to use it.
-// For now hack around it by omiting constructor as a valid key for overrides.
-export type ThemeSyntax = Partial<Omit<Syntax, "constructor">>
diff --git a/styles/src/themes/common/syntax.ts b/styles/src/themes/common/syntax.ts
index a1c82ec7e9..11d16eea16 100644
--- a/styles/src/themes/common/syntax.ts
+++ b/styles/src/themes/common/syntax.ts
@@ -1,5 +1,126 @@
 import deepmerge from "deepmerge"
-import { fontWeights } from "../../common"
+import { FontWeight, fontWeights } from "../../common"
+import {
+    ColorScheme,
+} from "./colorScheme"
+
+export interface SyntaxHighlightStyle {
+    color: string
+    weight?: FontWeight
+    underline?: boolean
+    italic?: boolean
+}
+
+export interface Syntax {
+    // == Text Styles ====== /
+    comment: SyntaxHighlightStyle
+    // elixir: doc comment
+    "comment.doc": SyntaxHighlightStyle
+    primary: SyntaxHighlightStyle
+    predictive: SyntaxHighlightStyle
+
+    // === Formatted Text ====== /
+    emphasis: SyntaxHighlightStyle
+    "emphasis.strong": SyntaxHighlightStyle
+    title: SyntaxHighlightStyle
+    linkUri: SyntaxHighlightStyle
+    linkText: SyntaxHighlightStyle
+    /** md: indented_code_block, fenced_code_block, code_span */
+    "text.literal": SyntaxHighlightStyle
+
+    // == Punctuation ====== /
+    punctuation: SyntaxHighlightStyle
+    /** Example: `(`, `[`, `{`...*/
+    "punctuation.bracket": SyntaxHighlightStyle
+    /**., ;*/
+    "punctuation.delimiter": SyntaxHighlightStyle
+    // js, ts: ${, } in a template literal
+    // yaml: *, &, ---, ...
+    "punctuation.special": SyntaxHighlightStyle
+    // md: list_marker_plus, list_marker_dot, etc
+    "punctuation.list_marker": SyntaxHighlightStyle
+
+    // == Strings ====== /
+
+    string: SyntaxHighlightStyle
+    // css: color_value
+    // js: this, super
+    // toml: offset_date_time, local_date_time...
+    "string.special": SyntaxHighlightStyle
+    // elixir: atom, quoted_atom, keyword, quoted_keyword
+    // ruby: simple_symbol, delimited_symbol...
+    "string.special.symbol": SyntaxHighlightStyle
+    // elixir, python, yaml...: escape_sequence
+    "string.escape": SyntaxHighlightStyle
+    // Regular expressions
+    "string.regex": SyntaxHighlightStyle
+
+    // == Types ====== /
+    constructor: SyntaxHighlightStyle
+    variant: SyntaxHighlightStyle
+    type: SyntaxHighlightStyle
+    // js: predefined_type
+    "type.builtin": SyntaxHighlightStyle
+
+    // == Values
+    variable: SyntaxHighlightStyle
+    // racket: lang_name
+    "variable.builtin": SyntaxHighlightStyle
+    // this, ...
+    // css: -- (var(--foo))
+    // lua: self
+    "variable.special": SyntaxHighlightStyle
+    // c: statement_identifier,
+    label: SyntaxHighlightStyle
+    // css: tag_name, nesting_selector, universal_selector...
+    tag: SyntaxHighlightStyle
+    // css: attribute, pseudo_element_selector (tag_name),
+    attribute: SyntaxHighlightStyle
+    // css: class_name, property_name, namespace_name...
+    property: SyntaxHighlightStyle
+    // true, false, null, nullptr
+    constant: SyntaxHighlightStyle
+    // css: @media, @import, @supports...
+    // js: declare, implements, interface, keyof, public...
+    keyword: SyntaxHighlightStyle
+    // note: js enum is currently defined as a keyword
+    enum: SyntaxHighlightStyle
+    // -, --, ->, !=, &&, ||, <=...
+    operator: SyntaxHighlightStyle
+    number: SyntaxHighlightStyle
+    boolean: SyntaxHighlightStyle
+    // elixir: __MODULE__, __DIR__, __ENV__, etc
+    // go: nil, iota
+    "constant.builtin": SyntaxHighlightStyle
+
+    // == Functions ====== /
+
+    function: SyntaxHighlightStyle
+    // lua: assert, error, loadfile, tostring, unpack...
+    "function.builtin": SyntaxHighlightStyle
+    // lua: function_call
+    "function.call": SyntaxHighlightStyle
+    // go: call_expression, method_declaration
+    // js: call_expression, method_definition, pair (key, arrow function)
+    // rust: function_item name: (identifier)
+    "function.definition": SyntaxHighlightStyle
+    // rust: macro_definition name: (identifier)
+    "function.special.definition": SyntaxHighlightStyle
+    "function.method": SyntaxHighlightStyle
+    // ruby: identifier/"defined?" // Nate note: I don't fully understand this one.
+    "function.method.builtin": SyntaxHighlightStyle
+
+    // == Unsorted ====== /
+    // lua: hash_bang_line
+    preproc: SyntaxHighlightStyle
+    // elixir, python: interpolation (ex: foo in ${foo})
+    // js: template_substitution
+    embedded: SyntaxHighlightStyle
+}
+
+// HACK: "constructor" as a key in the syntax interface returns an error when a theme tries to use it.
+// For now hack around it by omiting constructor as a valid key for overrides.
+export type ThemeSyntax = Partial<Omit<Syntax, "constructor">>
 
 const defaultSyntaxHighlightStyle: Omit<SyntaxHighlightStyle, "color"> = {
     weight: fontWeights.normal,
@@ -213,13 +334,6 @@ function mergeSyntax(defaultSyntax: Syntax, colorScheme: ColorScheme): Syntax {
     )
 }
 
-import {
-    ColorScheme,
-    Syntax,
-    SyntaxHighlightStyle,
-    ThemeSyntax,
-} from "./colorScheme"
-
 export function buildSyntax(colorScheme: ColorScheme): Syntax {
     const defaultSyntax: Syntax = buildDefaultSyntax(colorScheme)
 

From fb7818f93cce9ed9cd25671d0049201c2eaeec34 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 28 Feb 2023 10:50:03 -0500
Subject: [PATCH 16/19] Revert changes to Andromeda

---
 styles/src/themes/andromeda.ts | 61 +++++++---------------------------
 1 file changed, 12 insertions(+), 49 deletions(-)

diff --git a/styles/src/themes/andromeda.ts b/styles/src/themes/andromeda.ts
index 1fb5448eb6..7e715f61ac 100644
--- a/styles/src/themes/andromeda.ts
+++ b/styles/src/themes/andromeda.ts
@@ -1,27 +1,14 @@
 import chroma from "chroma-js"
-import { Meta, ThemeSyntax } from "./common/colorScheme"
+import { Meta } from "./common/colorScheme"
 import { colorRamp, createColorScheme } from "./common/ramps"
 
 const name = "Andromeda"
 
-const color = {
-    text: "#D5CED9",
-    gray: "#5f6167",
-    cyan: "#00e8c6",
-    orange: "#f39c12",
-    yellow: "#FFE66D",
-    pink: "#ff00aa",
-    hotPink: "#f92672",
-    purple: "#c74ded",
-    blue: "#7cb7ff",
-    red: "#ee5d43",
-    green: "#96E072",
-}
-
 const ramps = {
     neutral: chroma
         .scale([
-            "#24262D",
+            "#1E2025",
+            "#23262E",
             "#292E38",
             "#2E323C",
             "#ACA8AE",
@@ -30,41 +17,17 @@ const ramps = {
             "#F7F7F8",
         ])
         .domain([0, 0.15, 0.25, 0.35, 0.7, 0.8, 0.9, 1]),
-    red: colorRamp(chroma(color.red)),
-    orange: colorRamp(chroma(color.orange)),
-    yellow: colorRamp(chroma(color.yellow)),
-    green: colorRamp(chroma(color.green)),
-    cyan: colorRamp(chroma(color.cyan)),
-    blue: colorRamp(chroma(color.blue)),
-    violet: colorRamp(chroma(color.purple)),
-    magenta: colorRamp(chroma(color.hotPink)),
+    red: colorRamp(chroma("#F92672")),
+    orange: colorRamp(chroma("#F39C12")),
+    yellow: colorRamp(chroma("#FFE66D")),
+    green: colorRamp(chroma("#96E072")),
+    cyan: colorRamp(chroma("#00E8C6")),
+    blue: colorRamp(chroma("#0CA793")),
+    violet: colorRamp(chroma("#8A3FA6")),
+    magenta: colorRamp(chroma("#C74DED")),
 }
 
-const syntax: ThemeSyntax = {
-    "punctuation.list_marker": { color: color.yellow },
-    "text.literal": { color: color.green },
-    "variable.special": { color: color.cyan },
-    attribute: { color: color.text },
-    boolean: { color: color.red },
-    comment: { color: color.gray },
-    function: { color: color.yellow },
-    keyword: { color: color.purple },
-    linkText: { color: color.red },
-    linkUri: { color: color.purple },
-    number: { color: color.orange },
-    operator: { color: color.red },
-    primary: { color: color.text },
-    property: { color: color.text },
-    string: { color: color.green },
-    title: { color: color.hotPink },
-    type: { color: color.yellow },
-    variable: { color: color.cyan },
-
-    // TODO: uncomment this once the bug with styling curly braces in template literals is fixed
-    // "punctuation.special": { color: color.red },
-}
-
-export const dark = createColorScheme(`${name}`, false, ramps, syntax)
+export const dark = createColorScheme(`${name}`, false, ramps)
 
 export const meta: Meta = {
     name,

From 59bd50369623c2e46f68d430713b35d3cda4072c Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 28 Feb 2023 10:55:08 -0500
Subject: [PATCH 17/19] Tidy theme names

---
 styles/src/themes/andromeda.ts               | 2 +-
 styles/src/themes/rose-pine-dawn.ts          | 2 +-
 styles/src/themes/rose-pine-moon.ts          | 2 +-
 styles/src/themes/rose-pine.ts               | 2 +-
 styles/src/themes/sandcastle.ts              | 2 +-
 styles/src/themes/staff/abruzzo.ts           | 2 +-
 styles/src/themes/staff/dracula.ts           | 2 +-
 styles/src/themes/staff/monokai.ts           | 2 +-
 styles/src/themes/staff/nord.ts              | 2 +-
 styles/src/themes/staff/seti-ui.ts           | 2 +-
 styles/src/themes/staff/tokyo-night-storm.ts | 2 +-
 styles/src/themes/staff/zenburn.ts           | 3 +--
 styles/src/themes/summercamp.ts              | 2 +-
 13 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/styles/src/themes/andromeda.ts b/styles/src/themes/andromeda.ts
index 7e715f61ac..37a4d3c345 100644
--- a/styles/src/themes/andromeda.ts
+++ b/styles/src/themes/andromeda.ts
@@ -27,7 +27,7 @@ const ramps = {
     magenta: colorRamp(chroma("#C74DED")),
 }
 
-export const dark = createColorScheme(`${name}`, false, ramps)
+export const dark = createColorScheme(name, false, ramps)
 
 export const meta: Meta = {
     name,
diff --git a/styles/src/themes/rose-pine-dawn.ts b/styles/src/themes/rose-pine-dawn.ts
index 8ba105395e..bcd4e268bd 100644
--- a/styles/src/themes/rose-pine-dawn.ts
+++ b/styles/src/themes/rose-pine-dawn.ts
@@ -27,7 +27,7 @@ const ramps = {
     magenta: colorRamp(chroma("#79549F")),
 }
 
-export const light = createColorScheme(`${name}`, true, ramps)
+export const light = createColorScheme(name, true, ramps)
 
 export const meta: Meta = {
     name,
diff --git a/styles/src/themes/rose-pine-moon.ts b/styles/src/themes/rose-pine-moon.ts
index e13352a58a..d40ea390ac 100644
--- a/styles/src/themes/rose-pine-moon.ts
+++ b/styles/src/themes/rose-pine-moon.ts
@@ -27,7 +27,7 @@ const ramps = {
     magenta: colorRamp(chroma("#AB6FE9")),
 }
 
-export const dark = createColorScheme(`${name}`, false, ramps)
+export const dark = createColorScheme(name, false, ramps)
 
 export const meta: Meta = {
     name,
diff --git a/styles/src/themes/rose-pine.ts b/styles/src/themes/rose-pine.ts
index bcbe94ce52..7b61ab56e7 100644
--- a/styles/src/themes/rose-pine.ts
+++ b/styles/src/themes/rose-pine.ts
@@ -25,7 +25,7 @@ const ramps = {
     magenta: colorRamp(chroma("#AB6FE9")),
 }
 
-export const dark = createColorScheme(`${name}`, false, ramps)
+export const dark = createColorScheme(name, false, ramps)
 
 export const meta: Meta = {
     name,
diff --git a/styles/src/themes/sandcastle.ts b/styles/src/themes/sandcastle.ts
index 47b81f29df..b38416a966 100644
--- a/styles/src/themes/sandcastle.ts
+++ b/styles/src/themes/sandcastle.ts
@@ -25,7 +25,7 @@ const ramps = {
     magenta: colorRamp(chroma("#a87322")),
 }
 
-export const dark = createColorScheme(`${name}`, false, ramps)
+export const dark = createColorScheme(name, false, ramps)
 
 export const meta: Meta = {
     name,
diff --git a/styles/src/themes/staff/abruzzo.ts b/styles/src/themes/staff/abruzzo.ts
index 7a1f0f956a..43b75f2613 100644
--- a/styles/src/themes/staff/abruzzo.ts
+++ b/styles/src/themes/staff/abruzzo.ts
@@ -9,7 +9,7 @@ const license = {
     url: "",
 }
 
-export const dark = createColorScheme(`${name}`, false, {
+export const dark = createColorScheme(name, false, {
     neutral: chroma.scale([
         "#1b0d05",
         "#2c1e18",
diff --git a/styles/src/themes/staff/dracula.ts b/styles/src/themes/staff/dracula.ts
index 855fc20724..acff08d230 100644
--- a/styles/src/themes/staff/dracula.ts
+++ b/styles/src/themes/staff/dracula.ts
@@ -9,7 +9,7 @@ const license = {
     url: "https://github.com/dracula/dracula-theme/blob/master/LICENSE",
 }
 
-export const dark = createColorScheme(`${name}`, false, {
+export const dark = createColorScheme(name, false, {
     neutral: chroma.scale([
         "#282A36",
         "#3a3c4e",
diff --git a/styles/src/themes/staff/monokai.ts b/styles/src/themes/staff/monokai.ts
index 25ae88a269..75319e527a 100644
--- a/styles/src/themes/staff/monokai.ts
+++ b/styles/src/themes/staff/monokai.ts
@@ -10,7 +10,7 @@ const license = {
 }
 
 // `name-[light|dark]`, isLight, color ramps
-export const dark = createColorScheme(`${name}`, false, {
+export const dark = createColorScheme(name, false, {
     neutral: chroma.scale([
         "#272822",
         "#383830",
diff --git a/styles/src/themes/staff/nord.ts b/styles/src/themes/staff/nord.ts
index 50a47700d9..48f924e7a4 100644
--- a/styles/src/themes/staff/nord.ts
+++ b/styles/src/themes/staff/nord.ts
@@ -10,7 +10,7 @@ const license = {
 }
 
 // `name-[light|dark]`, isLight, color ramps
-export const dark = createColorScheme(`${name}`, false, {
+export const dark = createColorScheme(name, false, {
     neutral: chroma.scale([
         "#2E3440",
         "#3B4252",
diff --git a/styles/src/themes/staff/seti-ui.ts b/styles/src/themes/staff/seti-ui.ts
index 7a675829fb..abf6624242 100644
--- a/styles/src/themes/staff/seti-ui.ts
+++ b/styles/src/themes/staff/seti-ui.ts
@@ -10,7 +10,7 @@ const license = {
 }
 
 // `name-[light|dark]`, isLight, color ramps
-export const dark = createColorScheme(`${name}`, false, {
+export const dark = createColorScheme(name, false, {
     neutral: chroma.scale([
         "#151718",
         "#262B30",
diff --git a/styles/src/themes/staff/tokyo-night-storm.ts b/styles/src/themes/staff/tokyo-night-storm.ts
index ae375485e8..399c526872 100644
--- a/styles/src/themes/staff/tokyo-night-storm.ts
+++ b/styles/src/themes/staff/tokyo-night-storm.ts
@@ -10,7 +10,7 @@ const license = {
 }
 
 // `name-[light|dark]`, isLight, color ramps
-export const dark = createColorScheme(`${name}`, false, {
+export const dark = createColorScheme(name, false, {
     neutral: chroma.scale([
         "#24283B",
         "#16161E",
diff --git a/styles/src/themes/staff/zenburn.ts b/styles/src/themes/staff/zenburn.ts
index 648d918a42..9457ef1957 100644
--- a/styles/src/themes/staff/zenburn.ts
+++ b/styles/src/themes/staff/zenburn.ts
@@ -9,8 +9,7 @@ const license = {
     url: "",
 }
 
-// `name-[light|dark]`, isLight, color ramps
-export const dark = createColorScheme(`${name}`, false, {
+export const dark = createColorScheme(name, false, {
     neutral: chroma.scale([
         "#383838",
         "#404040",
diff --git a/styles/src/themes/summercamp.ts b/styles/src/themes/summercamp.ts
index 42d4b1a2e4..1114f496c2 100644
--- a/styles/src/themes/summercamp.ts
+++ b/styles/src/themes/summercamp.ts
@@ -27,7 +27,7 @@ const ramps = {
     magenta: colorRamp(chroma("#F69BE7")),
 }
 
-export const dark = createColorScheme(`${name}`, false, ramps)
+export const dark = createColorScheme(name, false, ramps)
 export const meta: Meta = {
     name,
     author: "zoefiri",

From fb69611568c06b4a64a6be546ce7bcaa89811451 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 28 Feb 2023 11:19:55 -0500
Subject: [PATCH 18/19] Fix order of `template_substitution` in highlights.scm

---
 crates/zed/src/languages/javascript/highlights.scm | 8 ++++----
 crates/zed/src/languages/typescript/highlights.scm | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/crates/zed/src/languages/javascript/highlights.scm b/crates/zed/src/languages/javascript/highlights.scm
index 21af8b03c4..9dc3af4eae 100644
--- a/crates/zed/src/languages/javascript/highlights.scm
+++ b/crates/zed/src/languages/javascript/highlights.scm
@@ -80,10 +80,6 @@
 
 ; Tokens
 
-(template_substitution
-  "${" @punctuation.special
-  "}" @punctuation.special) @embedded
-
 [
   ";"
   "?."
@@ -192,6 +188,10 @@
   "yield"
 ] @keyword
 
+(template_substitution
+  "${" @punctuation.special
+  "}" @punctuation.special) @embedded
+
 ; Types
 
 (type_identifier) @type
diff --git a/crates/zed/src/languages/typescript/highlights.scm b/crates/zed/src/languages/typescript/highlights.scm
index 5c459fba9e..4b744c3a80 100644
--- a/crates/zed/src/languages/typescript/highlights.scm
+++ b/crates/zed/src/languages/typescript/highlights.scm
@@ -80,10 +80,6 @@
 
 ; Tokens
 
-(template_substitution
-  "${" @punctuation.special
-  "}" @punctuation.special) @embedded
-
 [
   ";"
   "?."
@@ -193,6 +189,10 @@
   "yield"
 ] @keyword
 
+(template_substitution
+  "${" @punctuation.special
+  "}" @punctuation.special) @embedded
+
 ; Types
 
 (type_identifier) @type

From b9811e48e4996635e82250700fb45fb425f58935 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 28 Feb 2023 11:20:16 -0500
Subject: [PATCH 19/19] One family tune up + tidy

---
 styles/src/themes/one-dark.ts  | 12 +++++-------
 styles/src/themes/one-light.ts | 10 ++++++----
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/styles/src/themes/one-dark.ts b/styles/src/themes/one-dark.ts
index 56a8399a82..48305e5bd9 100644
--- a/styles/src/themes/one-dark.ts
+++ b/styles/src/themes/one-dark.ts
@@ -42,13 +42,10 @@ const ramps = {
 }
 
 const syntax: ThemeSyntax = {
-    "emphasis.strong": { color: color.orange },
-    "punctuation.list_marker": { color: color.red },
-    "text.literal": { color: color.green },
-    "variable.special": { color: color.orange },
     boolean: { color: color.orange },
     comment: { color: color.grey },
     enum: { color: color.red },
+    "emphasis.strong": { color: color.orange },
     function: { color: color.blue },
     keyword: { color: color.purple },
     linkText: { color: color.blue, italic: false },
@@ -58,13 +55,14 @@ const syntax: ThemeSyntax = {
     primary: { color: color.white },
     property: { color: color.red },
     punctuation: { color: color.white },
+    "punctuation.list_marker": { color: color.red },
+    "punctuation.special": { color: color.darkRed },
     string: { color: color.green },
     title: { color: color.red, weight: fontWeights.normal },
+    "text.literal": { color: color.green },
     type: { color: color.teal },
+    "variable.special": { color: color.orange },
     variant: { color: color.blue },
-
-    // TODO: uncomment this once the bug with styling curly braces in template literals is fixed
-    // "punctuation.special": { color: color.darkRed },
 }
 
 export const dark = createColorScheme(name, false, ramps, syntax)
diff --git a/styles/src/themes/one-light.ts b/styles/src/themes/one-light.ts
index 1979206cb9..267345ed4e 100644
--- a/styles/src/themes/one-light.ts
+++ b/styles/src/themes/one-light.ts
@@ -9,6 +9,7 @@ const color = {
     black: "#383A41",
     grey: "#A2A3A7",
     red: "#D36050",
+    darkRed: "#B92C46",
     orange: "#AD6F26",
     yellow: "#DFC184",
     green: "#659F58",
@@ -42,10 +43,10 @@ const ramps = {
 }
 
 const syntax: ThemeSyntax = {
-    "emphasis.strong": { color: color.orange },
     boolean: { color: color.orange },
     comment: { color: color.grey },
     enum: { color: color.red },
+    "emphasis.strong": { color: color.orange },
     function: { color: color.blue },
     keyword: { color: color.purple },
     linkText: { color: color.blue },
@@ -55,13 +56,14 @@ const syntax: ThemeSyntax = {
     primary: { color: color.black },
     property: { color: color.red },
     punctuation: { color: color.black },
+    "punctuation.list_marker": { color: color.red },
+    "punctuation.special": { color: color.darkRed },
     string: { color: color.green },
     title: { color: color.red, weight: fontWeights.normal },
+    "text.literal": { color: color.green },
     type: { color: color.teal },
+    "variable.special": { color: color.orange },
     variant: { color: color.blue },
-
-    // TODO: uncomment this once the bug with styling curly braces in template literals is fixed
-    // "variable.special": { color: color.orange },
 }
 
 export const light = createColorScheme(name, true, ramps, syntax)