diff --git a/crates/zed/src/languages/javascript/highlights.scm b/crates/zed/src/languages/javascript/highlights.scm index bd1986b6b3..9dc3af4eae 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 [ @@ -72,15 +75,11 @@ (template_string) ] @string -(regex) @string.special +(regex) @string.regex (number) @number ; Tokens -(template_substitution - "${" @punctuation.special - "}" @punctuation.special) @embedded - [ ";" "?." @@ -189,6 +188,10 @@ "yield" ] @keyword +(template_substitution + "${" @punctuation.special + "}" @punctuation.special) @embedded + ; Types (type_identifier) @type 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..4b744c3a80 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 [ @@ -72,15 +75,11 @@ (template_string) ] @string -(regex) @string.special +(regex) @string.regex (number) @number ; Tokens -(template_substitution - "${" @punctuation.special - "}" @punctuation.special) @embedded - [ ";" "?." @@ -190,6 +189,10 @@ "yield" ] @keyword +(template_substitution + "${" @punctuation.special + "}" @punctuation.special) @embedded + ; Types (type_identifier) @type diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index 6dde5363fc..85c9ccec95 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -1,16 +1,9 @@ -import { fontWeights } from "../common" import { withOpacity } from "../utils/color" -import { - ColorScheme, - Layer, - StyleSets, - Syntax, - ThemeSyntax, -} from "../themes/common/colorScheme" +import { ColorScheme, Layer, StyleSets } 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) { let layer = colorScheme.highest @@ -43,118 +36,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>( - 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/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/common/colorScheme.ts b/styles/src/themes/common/colorScheme.ts index 8de484d7f5..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,39 +101,3 @@ export interface Style { border: string foreground: string } - -export interface SyntaxHighlightStyle { - color: string - weight?: FontWeight - underline?: boolean - italic?: boolean -} - -export interface Syntax { - primary: SyntaxHighlightStyle - "variable.special": SyntaxHighlightStyle - comment: SyntaxHighlightStyle - punctuation: SyntaxHighlightStyle - constant: SyntaxHighlightStyle - keyword: SyntaxHighlightStyle - function: SyntaxHighlightStyle - type: SyntaxHighlightStyle - constructor: SyntaxHighlightStyle - variant: SyntaxHighlightStyle - property: SyntaxHighlightStyle - enum: SyntaxHighlightStyle - operator: SyntaxHighlightStyle - string: SyntaxHighlightStyle - number: SyntaxHighlightStyle - boolean: SyntaxHighlightStyle - predictive: SyntaxHighlightStyle - title: SyntaxHighlightStyle - emphasis: SyntaxHighlightStyle - "emphasis.strong": SyntaxHighlightStyle - linkUri: SyntaxHighlightStyle - linkText: 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 new file mode 100644 index 0000000000..11d16eea16 --- /dev/null +++ b/styles/src/themes/common/syntax.ts @@ -0,0 +1,343 @@ +import deepmerge from "deepmerge" +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, + underline: false, + italic: false, +} + +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 + } = {} + + // then spread the default to each style + for (const key of Object.keys({} as Syntax)) { + syntax[key as keyof Syntax] = { + ...defaultSyntaxHighlightStyle, + } + } + + const color = { + 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, + }, + "comment.doc": { + color: color.comment, + }, + primary: { + color: color.primary, + }, + predictive: { + 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.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: { + color: color.primary, + }, + "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 +} + +function mergeSyntax(defaultSyntax: Syntax, colorScheme: ColorScheme): Syntax { + if (!colorScheme.syntax) { + return defaultSyntax + } + + return deepmerge>( + defaultSyntax, + colorScheme.syntax, + { + arrayMerge: (destinationArray, sourceArray) => [ + ...destinationArray, + ...sourceArray, + ], + } + ) +} + +export function buildSyntax(colorScheme: ColorScheme): Syntax { + const defaultSyntax: Syntax = buildDefaultSyntax(colorScheme) + + const syntax = mergeSyntax(defaultSyntax, colorScheme) + + return syntax +} diff --git a/styles/src/themes/one-dark.ts b/styles/src/themes/one-dark.ts index a4326aa4c6..48305e5bd9 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", @@ -40,17 +42,27 @@ 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 }, - keyword: { color: color.purple }, boolean: { color: color.orange }, - punctuation: { color: color.white }, + 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 }, + "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 }, } 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..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,26 +43,27 @@ 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 }, boolean: { color: color.orange }, - title: { color: color.red, weight: fontWeights.normal }, - "emphasis.strong": { - 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 }, linkUri: { color: color.teal }, + number: { color: color.orange }, + operator: { color: color.teal }, + 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 }, } export const light = createColorScheme(name, true, ramps, syntax) 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",