From 77ed437cda6d3bcef3f2f40c7e6ae7f8835ecbb7 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Sun, 26 Feb 2023 01:07:21 -0500 Subject: [PATCH 1/5] Add the ability to override the system syntax config --- styles/package-lock.json | 14 +++++++++ styles/package.json | 1 + styles/src/styleTree/editor.ts | 24 ++++++++++++++-- styles/src/themes/common/colorScheme.ts | 38 +++++++++++++++++++++++++ styles/src/themes/common/ramps.ts | 9 ++++-- 5 files changed, 80 insertions(+), 6 deletions(-) diff --git a/styles/package-lock.json b/styles/package-lock.json index 2da979e205e20dcf670ba3dcf1672719abdd4ef4..19741d62b38c98305ddebd3f5aa9f0f8182493db 100644 --- a/styles/package-lock.json +++ b/styles/package-lock.json @@ -14,6 +14,7 @@ "bezier-easing": "^2.1.0", "case-anything": "^2.1.10", "chroma-js": "^2.4.2", + "deepmerge": "^4.3.0", "toml": "^3.0.0", "ts-node": "^10.9.1" } @@ -131,6 +132,14 @@ "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==" }, + "node_modules/deepmerge": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.0.tgz", + "integrity": "sha512-z2wJZXrmeHdvYJp/Ux55wIjqo81G5Bp4c+oELTW+7ar6SogWHajt5a9gO3s3IDaGSAXjDk0vlQKN3rms8ab3og==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/diff": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz", @@ -311,6 +320,11 @@ "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==" }, + "deepmerge": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.0.tgz", + "integrity": "sha512-z2wJZXrmeHdvYJp/Ux55wIjqo81G5Bp4c+oELTW+7ar6SogWHajt5a9gO3s3IDaGSAXjDk0vlQKN3rms8ab3og==" + }, "diff": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz", diff --git a/styles/package.json b/styles/package.json index f94a3cc9f58f3674bed5bd69e308de710c0dbd5f..ad4dfcf561ed3b1d47bd513c207c25a0c2c1b90c 100644 --- a/styles/package.json +++ b/styles/package.json @@ -15,6 +15,7 @@ "bezier-easing": "^2.1.0", "case-anything": "^2.1.10", "chroma-js": "^2.4.2", + "deepmerge": "^4.3.0", "toml": "^3.0.0", "ts-node": "^10.9.1" }, diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index 15818ad7f91605de1ccc728981da2680d728f48c..c30305790809d50d96154d0a17053aa7573f74ee 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -1,9 +1,12 @@ import { fontWeights } from "../common" import { withOpacity } from "../utils/color" -import { ColorScheme, Layer, StyleSets } from "../themes/common/colorScheme" +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'; + + export default function editor(colorScheme: ColorScheme) { let layer = colorScheme.highest @@ -35,7 +38,7 @@ export default function editor(colorScheme: ColorScheme) { } } - const syntax = { + const syntax: Syntax = { primary: { color: colorScheme.ramps.neutral(1).hex(), weight: fontWeights.normal, @@ -129,6 +132,21 @@ export default function editor(colorScheme: ColorScheme) { }, } + function createSyntax(colorScheme: ColorScheme): Syntax { + if (!colorScheme.syntax) { + return syntax + } + + return deepmerge>(syntax, colorScheme.syntax, { + arrayMerge: (destinationArray, sourceArray) => [ + ...destinationArray, + ...sourceArray, + ], + }); + } + + const mergedSyntax = createSyntax(colorScheme) + return { textColor: syntax.primary.color, background: background(layer), @@ -285,6 +303,6 @@ export default function editor(colorScheme: ColorScheme) { color: borderColor(layer), }, }, - syntax, + syntax: mergedSyntax, } } diff --git a/styles/src/themes/common/colorScheme.ts b/styles/src/themes/common/colorScheme.ts index f07a44d6cb4806db4d052447ea8c02411f69f2b2..cf19d567edf414f7a0efa6371484768f9c8ad21c 100644 --- a/styles/src/themes/common/colorScheme.ts +++ b/styles/src/themes/common/colorScheme.ts @@ -1,4 +1,5 @@ import { Scale } from "chroma-js" +import { FontWeight } from "../../common" export interface ColorScheme { name: string @@ -14,6 +15,7 @@ export interface ColorScheme { modalShadow: Shadow players: Players + syntax?: Partial } export interface Meta { @@ -98,3 +100,39 @@ 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> \ No newline at end of file diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts index 1090345d3007a0f5fb1c0359eeabaeb5f3bc7151..d1d73e136ac0f309a4cd088b1c4ce7ea3d60a24d 100644 --- a/styles/src/themes/common/ramps.ts +++ b/styles/src/themes/common/ramps.ts @@ -7,6 +7,7 @@ import { Style, Styles, StyleSet, + ThemeSyntax, } from "./colorScheme" export function colorRamp(color: Color): Scale { @@ -18,7 +19,8 @@ export function colorRamp(color: Color): Scale { export function createColorScheme( name: string, isLight: boolean, - colorRamps: { [rampName: string]: Scale } + colorRamps: { [rampName: string]: Scale }, + syntax?: ThemeSyntax ): ColorScheme { // Chromajs scales from 0 to 1 flipped if isLight is true let ramps: RampSet = {} as any @@ -31,14 +33,14 @@ export function createColorScheme( // function to any in order to get the colors back out from the original ramps. if (isLight) { for (var rampName in colorRamps) { - ;(ramps as any)[rampName] = chroma.scale( + ; (ramps as any)[rampName] = chroma.scale( colorRamps[rampName].colors(100).reverse() ) } ramps.neutral = chroma.scale(colorRamps.neutral.colors(100).reverse()) } else { for (var rampName in colorRamps) { - ;(ramps as any)[rampName] = chroma.scale( + ; (ramps as any)[rampName] = chroma.scale( colorRamps[rampName].colors(100) ) } @@ -94,6 +96,7 @@ export function createColorScheme( modalShadow, players, + syntax } } From 23c967418aa32b2d314cae80c339a59fc63301c6 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Sun, 26 Feb 2023 01:07:45 -0500 Subject: [PATCH 2/5] Add a syntax override style for `One Dark` --- styles/src/themes/one-dark.ts | 49 +++++++++++++++++++++++++++-------- 1 file changed, 38 insertions(+), 11 deletions(-) diff --git a/styles/src/themes/one-dark.ts b/styles/src/themes/one-dark.ts index 7c30bb78230db81098a54f564d6bc177984b0d0a..1705a8b8c4eb82304b28efc7acf3711def60f7ce 100644 --- a/styles/src/themes/one-dark.ts +++ b/styles/src/themes/one-dark.ts @@ -1,10 +1,22 @@ import chroma from "chroma-js" -import { Meta } from "./common/colorScheme" +import { Meta, ThemeSyntax } from "./common/colorScheme" import { colorRamp, createColorScheme } from "./common/ramps" const name = "One Dark" -export const dark = createColorScheme(`${name}`, false, { +const color = { + white: "#ACB2BE", + grey: "#5D636F", + red: "#D07277", + orange: "#C0966B", + yellow: "#DFC184", + green: "#A1C181", + teal: "#6FB4C0", + blue: "#74ADE9", + purple: "#B478CF", +}; + +const ramps = { neutral: chroma .scale([ "#282c34", @@ -17,16 +29,31 @@ export const dark = createColorScheme(`${name}`, false, { "#c8ccd4", ]) .domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]), - - red: colorRamp(chroma("#e06c75")), - orange: colorRamp(chroma("#d19a66")), - yellow: colorRamp(chroma("#e5c07b")), - green: colorRamp(chroma("#98c379")), - cyan: colorRamp(chroma("#56b6c2")), - blue: colorRamp(chroma("#61afef")), - violet: colorRamp(chroma("#c678dd")), + red: colorRamp(chroma(color.red)), + orange: colorRamp(chroma(color.orange)), + yellow: colorRamp(chroma(color.yellow)), + green: colorRamp(chroma(color.green)), + cyan: colorRamp(chroma(color.teal)), + blue: colorRamp(chroma(color.blue)), + violet: colorRamp(chroma(color.purple)), magenta: colorRamp(chroma("#be5046")), -}) +}; + +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 }, + operator: { color: color.teal } +} + +export const dark = createColorScheme(name, false, ramps, syntax) export const meta: Meta = { name, From 4f307c76019b9e821ca925db84ef5341f23f1d72 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Sun, 26 Feb 2023 01:20:44 -0500 Subject: [PATCH 3/5] Use `syntax` as merged name instead of `mergedSyntax` This lets us retain the existing uses of syntax, and fixes colors that were being assigned incorrectly. --- styles/src/styleTree/editor.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index c30305790809d50d96154d0a17053aa7573f74ee..810b8da5286ea1e9f4b161c1babd1e9c441a8997 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -38,7 +38,7 @@ export default function editor(colorScheme: ColorScheme) { } } - const syntax: Syntax = { + const defaultSyntax: Syntax = { primary: { color: colorScheme.ramps.neutral(1).hex(), weight: fontWeights.normal, @@ -134,10 +134,10 @@ export default function editor(colorScheme: ColorScheme) { function createSyntax(colorScheme: ColorScheme): Syntax { if (!colorScheme.syntax) { - return syntax + return defaultSyntax } - return deepmerge>(syntax, colorScheme.syntax, { + return deepmerge>(defaultSyntax, colorScheme.syntax, { arrayMerge: (destinationArray, sourceArray) => [ ...destinationArray, ...sourceArray, @@ -145,7 +145,7 @@ export default function editor(colorScheme: ColorScheme) { }); } - const mergedSyntax = createSyntax(colorScheme) + const syntax = createSyntax(colorScheme) return { textColor: syntax.primary.color, @@ -303,6 +303,6 @@ export default function editor(colorScheme: ColorScheme) { color: borderColor(layer), }, }, - syntax: mergedSyntax, + syntax, } } From 64b07dbfeb63ccc438cbec7828428b2ec4e5c21b Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Sun, 26 Feb 2023 10:09:16 -0500 Subject: [PATCH 4/5] Add syntax overrides for One Light --- styles/src/themes/one-light.ts | 77 +++++++++++++++++++++++++--------- 1 file changed, 58 insertions(+), 19 deletions(-) diff --git a/styles/src/themes/one-light.ts b/styles/src/themes/one-light.ts index 8b4cdded8a2621259e8f0115f211e58107eb7f8b..e08f3422015e62f44736c36725bddac0abbddd45 100644 --- a/styles/src/themes/one-light.ts +++ b/styles/src/themes/one-light.ts @@ -1,32 +1,71 @@ import chroma from "chroma-js" -import { Meta } from "./common/colorScheme" +import { fontWeights } from "../common"; +import { Meta, ThemeSyntax } from "./common/colorScheme" import { colorRamp, createColorScheme } from "./common/ramps" const name = "One Light" -export const light = createColorScheme(`${name}`, true, { +const color = { + black: "#383A41", + grey: "#A2A3A7", + red: "#D36050", + orange: "#AD6F26", + yellow: "#DFC184", + green: "#659F58", + teal: "#3982B7", + blue: "#5B79E3", + purple: "#A449AB", + magenta: "#994EA6" +}; + +const ramps = { neutral: chroma .scale([ - "#090a0b", - "#202227", - "#383a42", + "#383A41", + "#535456", "#696c77", - "#a0a1a7", - "#e5e5e6", - "#f0f0f1", - "#fafafa", + "#9D9D9F", + "#A9A9A9", + "#DBDBDC", + "#EAEAEB", + "#FAFAFA", ]) - .domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]), + .domain([0.05, 0.22, 0.25, 0.45, 0.62, 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.teal)), + blue: colorRamp(chroma(color.blue)), + violet: colorRamp(chroma(color.purple)), + magenta: colorRamp(chroma(color.magenta)), +}; + +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, + }, + linkText: { color: color.blue }, + linkUri: { color: color.teal }, +} - red: colorRamp(chroma("#ca1243")), - orange: colorRamp(chroma("#d75f00")), - yellow: colorRamp(chroma("#c18401")), - green: colorRamp(chroma("#50a14f")), - cyan: colorRamp(chroma("#0184bc")), - blue: colorRamp(chroma("#4078f2")), - violet: colorRamp(chroma("#a626a4")), - magenta: colorRamp(chroma("#986801")), -}) +export const light = createColorScheme(name, true, ramps, syntax) export const meta: Meta = { name, From d910eed1f1b880aefd58e8718bf0f78cc21b13e2 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Sun, 26 Feb 2023 10:31:19 -0500 Subject: [PATCH 5/5] Format --- styles/src/styleTree/editor.ts | 27 ++++++++++----- styles/src/themes/common/colorScheme.ts | 46 ++++++++++++------------- styles/src/themes/common/ramps.ts | 6 ++-- styles/src/themes/one-dark.ts | 6 ++-- styles/src/themes/one-light.ts | 11 +++--- 5 files changed, 52 insertions(+), 44 deletions(-) diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index 810b8da5286ea1e9f4b161c1babd1e9c441a8997..6dde5363fcafce9ec0f063f1e0241192682328b2 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -1,11 +1,16 @@ import { fontWeights } from "../common" import { withOpacity } from "../utils/color" -import { ColorScheme, Layer, StyleSets, Syntax, ThemeSyntax } from "../themes/common/colorScheme" +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 deepmerge from "deepmerge" export default function editor(colorScheme: ColorScheme) { let layer = colorScheme.highest @@ -137,12 +142,16 @@ export default function editor(colorScheme: ColorScheme) { return defaultSyntax } - return deepmerge>(defaultSyntax, colorScheme.syntax, { - arrayMerge: (destinationArray, sourceArray) => [ - ...destinationArray, - ...sourceArray, - ], - }); + return deepmerge>( + defaultSyntax, + colorScheme.syntax, + { + arrayMerge: (destinationArray, sourceArray) => [ + ...destinationArray, + ...sourceArray, + ], + } + ) } const syntax = createSyntax(colorScheme) diff --git a/styles/src/themes/common/colorScheme.ts b/styles/src/themes/common/colorScheme.ts index cf19d567edf414f7a0efa6371484768f9c8ad21c..8de484d7f548155cbbcdfa727e443fcf534673ad 100644 --- a/styles/src/themes/common/colorScheme.ts +++ b/styles/src/themes/common/colorScheme.ts @@ -102,37 +102,37 @@ export interface Style { } export interface SyntaxHighlightStyle { - color: string, + 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, + 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> \ No newline at end of file +export type ThemeSyntax = Partial> diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts index d1d73e136ac0f309a4cd088b1c4ce7ea3d60a24d..746b102a841dbc180a09a857f32ac3619df2e762 100644 --- a/styles/src/themes/common/ramps.ts +++ b/styles/src/themes/common/ramps.ts @@ -33,14 +33,14 @@ export function createColorScheme( // function to any in order to get the colors back out from the original ramps. if (isLight) { for (var rampName in colorRamps) { - ; (ramps as any)[rampName] = chroma.scale( + ;(ramps as any)[rampName] = chroma.scale( colorRamps[rampName].colors(100).reverse() ) } ramps.neutral = chroma.scale(colorRamps.neutral.colors(100).reverse()) } else { for (var rampName in colorRamps) { - ; (ramps as any)[rampName] = chroma.scale( + ;(ramps as any)[rampName] = chroma.scale( colorRamps[rampName].colors(100) ) } @@ -96,7 +96,7 @@ export function createColorScheme( modalShadow, players, - syntax + syntax, } } diff --git a/styles/src/themes/one-dark.ts b/styles/src/themes/one-dark.ts index 1705a8b8c4eb82304b28efc7acf3711def60f7ce..a4326aa4c674a552328a7dd0af9533bb4e68d153 100644 --- a/styles/src/themes/one-dark.ts +++ b/styles/src/themes/one-dark.ts @@ -14,7 +14,7 @@ const color = { teal: "#6FB4C0", blue: "#74ADE9", purple: "#B478CF", -}; +} const ramps = { neutral: chroma @@ -37,7 +37,7 @@ const ramps = { blue: colorRamp(chroma(color.blue)), violet: colorRamp(chroma(color.purple)), magenta: colorRamp(chroma("#be5046")), -}; +} const syntax: ThemeSyntax = { primary: { color: color.white }, @@ -50,7 +50,7 @@ const syntax: ThemeSyntax = { keyword: { color: color.purple }, boolean: { color: color.orange }, punctuation: { color: color.white }, - operator: { color: color.teal } + operator: { color: color.teal }, } 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 e08f3422015e62f44736c36725bddac0abbddd45..91f66ec6eaaa7b04464917aa5cd0f23965be1dd8 100644 --- a/styles/src/themes/one-light.ts +++ b/styles/src/themes/one-light.ts @@ -1,5 +1,5 @@ import chroma from "chroma-js" -import { fontWeights } from "../common"; +import { fontWeights } from "../common" import { Meta, ThemeSyntax } from "./common/colorScheme" import { colorRamp, createColorScheme } from "./common/ramps" @@ -15,8 +15,8 @@ const color = { teal: "#3982B7", blue: "#5B79E3", purple: "#A449AB", - magenta: "#994EA6" -}; + magenta: "#994EA6", +} const ramps = { neutral: chroma @@ -30,8 +30,7 @@ const ramps = { "#EAEAEB", "#FAFAFA", ]) - .domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]) - , + .domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]), red: colorRamp(chroma(color.red)), orange: colorRamp(chroma(color.orange)), yellow: colorRamp(chroma(color.yellow)), @@ -40,7 +39,7 @@ const ramps = { blue: colorRamp(chroma(color.blue)), violet: colorRamp(chroma(color.purple)), magenta: colorRamp(chroma(color.magenta)), -}; +} const syntax: ThemeSyntax = { primary: { color: color.black },