import deepmerge from "deepmerge"import { FontWeight, font_weights, useTheme } from "../common"import chroma from "chroma-js" 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    hint: SyntaxHighlightStyle     // === Formatted Text ====== /    emphasis: SyntaxHighlightStyle    "emphasis.strong": SyntaxHighlightStyle    title: SyntaxHighlightStyle    link_uri: SyntaxHighlightStyle    link_text: 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 ====== /    // We allow Function here because all JS objects literals have this property    constructor: SyntaxHighlightStyle | Function // eslint-disable-line  @typescript-eslint/ban-types    variant: SyntaxHighlightStyle    type: SyntaxHighlightStyle    // js: predefined_type    "type.builtin"?: SyntaxHighlightStyle     // == Values    variable: 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    // 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} export type ThemeSyntax = Partial<Syntax> const default_syntax_highlight_style: Omit<SyntaxHighlightStyle, "color"> = {    weight: "normal",    underline: false,    italic: false,} function build_default_syntax(): Syntax {    const theme = useTheme()     // 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] = {            ...default_syntax_highlight_style,        }    }     // Mix the neutral and blue colors to get a    // predictive color distinct from any other color in the theme    const predictive = chroma        .mix(            theme.ramps.neutral(0.4).hex(),            theme.ramps.blue(0.4).hex(),            0.45,            "lch"        )        .hex()    // Mix the neutral and green colors to get a    // hint color distinct from any other color in the theme    const hint = chroma        .mix(            theme.ramps.neutral(0.6).hex(),            theme.ramps.blue(0.4).hex(),            0.45,            "lch"        )        .hex()     const color = {        primary: theme.ramps.neutral(1).hex(),        comment: theme.ramps.neutral(0.71).hex(),        punctuation: theme.ramps.neutral(0.86).hex(),        predictive: predictive,        hint: hint,        emphasis: theme.ramps.blue(0.5).hex(),        string: theme.ramps.orange(0.5).hex(),        function: theme.ramps.yellow(0.5).hex(),        type: theme.ramps.cyan(0.5).hex(),        constructor: theme.ramps.blue(0.5).hex(),        variant: theme.ramps.blue(0.5).hex(),        property: theme.ramps.blue(0.5).hex(),        enum: theme.ramps.orange(0.5).hex(),        operator: theme.ramps.orange(0.5).hex(),        number: theme.ramps.green(0.5).hex(),        boolean: theme.ramps.green(0.5).hex(),        constant: theme.ramps.green(0.5).hex(),        keyword: theme.ramps.blue(0.5).hex(),    }     // Then assign colors and use Syntax to enforce each style getting it's own color    const default_syntax: Syntax = {        ...syntax,        comment: {            color: color.comment,        },        "comment.doc": {            color: color.comment,        },        primary: {            color: color.primary,        },        predictive: {            color: color.predictive,            italic: true,        },        hint: {            color: color.hint,            weight: font_weights.bold,        },        emphasis: {            color: color.emphasis,        },        "emphasis.strong": {            color: color.emphasis,            weight: font_weights.bold,        },        title: {            color: color.primary,            weight: font_weights.bold,        },        link_uri: {            color: theme.ramps.green(0.5).hex(),            underline: true,        },        link_text: {            color: theme.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: theme.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.escape": {            color: color.comment,        },        "string.regex": {            color: color.string,        },        constructor: {            color: theme.ramps.blue(0.5).hex(),        },        variant: {            color: theme.ramps.blue(0.5).hex(),        },        type: {            color: color.type,        },        variable: {            color: color.primary,        },        label: {            color: theme.ramps.blue(0.5).hex(),        },        tag: {            color: theme.ramps.blue(0.5).hex(),        },        attribute: {            color: theme.ramps.blue(0.5).hex(),        },        property: {            color: theme.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,        },        function: {            color: color.function,        },        preproc: {            color: color.primary,        },        embedded: {            color: color.primary,        },    }     return default_syntax} export function build_syntax(): Syntax {    const theme = useTheme()     const default_syntax: Syntax = build_default_syntax()     if (!theme.syntax) {        return default_syntax    }     const syntax = deepmerge<Syntax, Partial<ThemeSyntax>>(        default_syntax,        theme.syntax,        {            arrayMerge: (destinationArray, sourceArray) => [                ...destinationArray,                ...sourceArray,            ],        }    )     return syntax}