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> 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> const defaultSyntaxHighlightStyle: Omit = { 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)