Move syntax types to `syntax.ts`

Nate Butler created

Change summary

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

Detailed changes

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">>

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)