Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix project panel bug (#2656)

Browse source 
Release Notes:

* Fix a bug where project panel entries would not be styled correctly
(preview only)
This commit is contained in:
Mikayla Maki 2023-06-28 10:36:59 -07:00 • committed by GitHub
commit 0b900f4faf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 344 additions and 230 deletions
Download patch file Download diff file Expand all files Collapse all files

55
styles/src/component/icon_button.ts
View file

@ -1,25 +1,32 @@
import { ColorScheme } from "../common";
import { interactive, toggleable } from "../element";
import { background, foreground } from "../styleTree/components";
import { ColorScheme } from "../common"
import { interactive, toggleable } from "../element"
import { background, foreground } from "../styleTree/components"
export type Margin = {
top: number;
bottom: number;
left: number;
right: number;
top: number
bottom: number
left: number
right: number
}
interface IconButtonOptions {
layer?: ColorScheme['lowest'] | ColorScheme['middle'] | ColorScheme['highest'];
color?: keyof ColorScheme['lowest'];
margin?: Partial<Margin>;
layer?:
| ColorScheme["lowest"]
| ColorScheme["middle"]
| ColorScheme["highest"]
color?: keyof ColorScheme["lowest"]
margin?: Partial<Margin>
}
type ToggleableIconButtonOptions = IconButtonOptions & { active_color?: keyof ColorScheme['lowest'] };
type ToggleableIconButtonOptions = IconButtonOptions & {
active_color?: keyof ColorScheme["lowest"]
}
export function icon_button(theme: ColorScheme, { color, margin, layer }: IconButtonOptions) {
if (!color)
color = "base";
export function icon_button(
theme: ColorScheme,
{ color, margin, layer }: IconButtonOptions
) {
if (!color) color = "base"
const m = {
top: margin?.top ?? 0,
@ -51,25 +58,29 @@ export function icon_button(theme: ColorScheme, { color, margin, layer }: IconBu
hovered: {
background: background(layer ?? theme.lowest, color, "hovered"),
color: foreground(layer ?? theme.lowest, color, "hovered"),
},
clicked: {
background: background(layer ?? theme.lowest, color, "pressed"),
color: foreground(layer ?? theme.lowest, color, "pressed"),
},
},
});
})
}
export function toggleable_icon_button(theme: ColorScheme, { color, active_color, margin }: ToggleableIconButtonOptions) {
if (!color)
color = "base";
export function toggleable_icon_button(
theme: ColorScheme,
{ color, active_color, margin }: ToggleableIconButtonOptions
) {
if (!color) color = "base"
return toggleable({
state: {
inactive: icon_button(theme, { color, margin }),
active: icon_button(theme, { color: active_color ? active_color : color, margin, layer: theme.middle }),
}
active: icon_button(theme, {
color: active_color ? active_color : color,
margin,
layer: theme.middle,
}),
},
})
}

60
styles/src/component/text_button.ts
View file

@ -1,25 +1,37 @@
import { ColorScheme } from "../common";
import { interactive, toggleable } from "../element";
import { TextProperties, background, foreground, text } from "../styleTree/components";
import { Margin } from "./icon_button";
import { ColorScheme } from "../common"
import { interactive, toggleable } from "../element"
import {
TextProperties,
background,
foreground,
text,
} from "../styleTree/components"
import { Margin } from "./icon_button"
interface TextButtonOptions {
layer?: ColorScheme['lowest'] | ColorScheme['middle'] | ColorScheme['highest'];
color?: keyof ColorScheme['lowest'];
margin?: Partial<Margin>;
text_properties?: TextProperties;
layer?:
| ColorScheme["lowest"]
| ColorScheme["middle"]
| ColorScheme["highest"]
color?: keyof ColorScheme["lowest"]
margin?: Partial<Margin>
text_properties?: TextProperties
}
type ToggleableTextButtonOptions = TextButtonOptions & { active_color?: keyof ColorScheme['lowest'] };
type ToggleableTextButtonOptions = TextButtonOptions & {
active_color?: keyof ColorScheme["lowest"]
}
export function text_button(theme: ColorScheme, { color, layer, margin, text_properties }: TextButtonOptions) {
if (!color)
color = "base";
export function text_button(
theme: ColorScheme,
{ color, layer, margin, text_properties }: TextButtonOptions
) {
if (!color) color = "base"
const text_options: TextProperties = {
size: "xs",
weight: "normal",
...text_properties
...text_properties,
}
const m = {
@ -40,7 +52,7 @@ export function text_button(theme: ColorScheme, { color, layer, margin, text_pro
},
margin: m,
button_height: 22,
...text(layer ?? theme.lowest, "sans", color, text_options)
...text(layer ?? theme.lowest, "sans", color, text_options),
},
state: {
default: {
@ -50,25 +62,29 @@ export function text_button(theme: ColorScheme, { color, layer, margin, text_pro
hovered: {
background: background(layer ?? theme.lowest, color, "hovered"),
color: foreground(layer ?? theme.lowest, color, "hovered"),
},
clicked: {
background: background(layer ?? theme.lowest, color, "pressed"),
color: foreground(layer ?? theme.lowest, color, "pressed"),
},
},
});
})
}
export function toggleable_text_button(theme: ColorScheme, { color, active_color, margin }: ToggleableTextButtonOptions) {
if (!color)
color = "base";
export function toggleable_text_button(
theme: ColorScheme,
{ color, active_color, margin }: ToggleableTextButtonOptions
) {
if (!color) color = "base"
return toggleable({
state: {
inactive: text_button(theme, { color, margin }),
active: text_button(theme, { color: active_color ? active_color : color, margin, layer: theme.middle }),
}
active: text_button(theme, {
color: active_color ? active_color : color,
margin,
layer: theme.middle,
}),
},
})
}

2
styles/src/element/interactive.ts
View file

@ -1,7 +1,7 @@
import merge from "ts-deepmerge"
import { DeepPartial } from "utility-types"
type InteractiveState =
export type InteractiveState =
| "default"
| "hovered"
| "clicked"

83
styles/src/styleTree/assistant.ts
View file

@ -26,15 +26,15 @@ export default function assistant(colorScheme: ColorScheme) {
},
container: {
padding: { left: 12, right: 8.5 },
}
},
},
state: {
hovered: {
icon: {
color: foreground(layer, "hovered")
}
}
}
color: foreground(layer, "hovered"),
},
},
},
}),
splitButton: interactive({
base: {
@ -48,15 +48,15 @@ export default function assistant(colorScheme: ColorScheme) {
},
container: {
padding: { left: 8.5, right: 8.5 },
}
},
},
state: {
hovered: {
icon: {
color: foreground(layer, "hovered")
}
}
}
color: foreground(layer, "hovered"),
},
},
},
}),
quoteButton: interactive({
base: {
@ -70,15 +70,15 @@ export default function assistant(colorScheme: ColorScheme) {
},
container: {
padding: { left: 8.5, right: 8.5 },
}
},
},
state: {
hovered: {
icon: {
color: foreground(layer, "hovered")
}
}
}
color: foreground(layer, "hovered"),
},
},
},
}),
assistButton: interactive({
base: {
@ -92,15 +92,15 @@ export default function assistant(colorScheme: ColorScheme) {
},
container: {
padding: { left: 8.5, right: 8.5 },
}
},
},
state: {
hovered: {
icon: {
color: foreground(layer, "hovered")
}
}
}
color: foreground(layer, "hovered"),
},
},
},
}),
zoomInButton: interactive({
base: {
@ -114,15 +114,15 @@ export default function assistant(colorScheme: ColorScheme) {
},
container: {
padding: { left: 10, right: 10 },
}
},
},
state: {
hovered: {
icon: {
color: foreground(layer, "hovered")
}
}
}
color: foreground(layer, "hovered"),
},
},
},
}),
zoomOutButton: interactive({
base: {
@ -136,15 +136,15 @@ export default function assistant(colorScheme: ColorScheme) {
},
container: {
padding: { left: 10, right: 10 },
}
},
},
state: {
hovered: {
icon: {
color: foreground(layer, "hovered")
}
}
}
color: foreground(layer, "hovered"),
},
},
},
}),
plusButton: interactive({
base: {
@ -158,29 +158,29 @@ export default function assistant(colorScheme: ColorScheme) {
},
container: {
padding: { left: 10, right: 10 },
}
},
},
state: {
hovered: {
icon: {
color: foreground(layer, "hovered")
}
}
}
color: foreground(layer, "hovered"),
},
},
},
}),
title: {
...text(layer, "sans", "default", { size: "sm" })
...text(layer, "sans", "default", { size: "sm" }),
},
savedConversation: {
container: interactive({
base: {
background: background(layer, "on"),
padding: { top: 4, bottom: 4 }
padding: { top: 4, bottom: 4 },
},
state: {
hovered: {
background: background(layer, "on", "hovered"),
}
},
},
}),
savedAt: {
@ -189,8 +189,11 @@ export default function assistant(colorScheme: ColorScheme) {
},
title: {
margin: { left: 16 },
...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
}
...text(layer, "sans", "default", {
size: "sm",
weight: "bold",
}),
},
},
userSender: {
default: {

8
styles/src/styleTree/components.ts
View file

@ -93,6 +93,14 @@ interface Text extends Object {
underline?: boolean
}
export interface TextStyle extends Object {
family: keyof typeof fontFamilies
color: string
size: number
weight?: FontWeight
underline?: boolean
}
export interface TextProperties {
size?: keyof typeof fontSizes
weight?: FontWeight

192
styles/src/styleTree/projectPanel.ts
View file

@ -1,73 +1,116 @@
import { ColorScheme } from "../theme/colorScheme"
import { withOpacity } from "../theme/color"
import { background, border, foreground, text } from "./components"
import {
Border,
TextStyle,
background,
border,
foreground,
text,
} from "./components"
import { interactive, toggleable } from "../element"
import merge from "ts-deepmerge"
export default function projectPanel(colorScheme: ColorScheme) {
const { isLight } = colorScheme
let layer = colorScheme.middle
let baseEntry = {
height: 22,
iconColor: foreground(layer, "variant"),
iconSize: 7,
iconSpacing: 5,
type EntryStateProps = {
background?: string
border?: Border
text?: TextStyle
iconColor?: string
}
let status = {
git: {
modified: isLight
? colorScheme.ramps.yellow(0.6).hex()
: colorScheme.ramps.yellow(0.5).hex(),
inserted: isLight
? colorScheme.ramps.green(0.45).hex()
: colorScheme.ramps.green(0.5).hex(),
conflict: isLight
? colorScheme.ramps.red(0.6).hex()
: colorScheme.ramps.red(0.5).hex(),
},
type EntryState = {
default: EntryStateProps
hovered?: EntryStateProps
clicked?: EntryStateProps
}
const default_entry = interactive({
base: {
...baseEntry,
const entry = (unselected?: EntryState, selected?: EntryState) => {
const git_status = {
git: {
modified: isLight
? colorScheme.ramps.yellow(0.6).hex()
: colorScheme.ramps.yellow(0.5).hex(),
inserted: isLight
? colorScheme.ramps.green(0.45).hex()
: colorScheme.ramps.green(0.5).hex(),
conflict: isLight
? colorScheme.ramps.red(0.6).hex()
: colorScheme.ramps.red(0.5).hex(),
},
}
const base_properties = {
height: 22,
background: background(layer),
iconColor: foreground(layer, "variant"),
iconSize: 7,
iconSpacing: 5,
text: text(layer, "mono", "variant", { size: "sm" }),
status,
},
state: {
default: {
background: background(layer),
status: {
...git_status,
},
hovered: {
background: background(layer, "variant", "hovered"),
},
clicked: {
background: background(layer, "variant", "pressed"),
},
},
})
}
let entry = toggleable({
base: default_entry,
state: {
active: interactive({
base: {
...default_entry,
},
state: {
default: {
background: background(colorScheme.lowest),
const selectedStyle: EntryState | undefined = selected
? selected
: unselected
const unselected_default_style = merge(
base_properties,
unselected?.default ?? {},
{}
)
const unselected_hovered_style = merge(
base_properties,
unselected?.hovered ?? {},
{ background: background(layer, "variant", "hovered") }
)
const unselected_clicked_style = merge(
base_properties,
unselected?.clicked ?? {},
{ background: background(layer, "variant", "pressed") }
)
const selected_default_style = merge(
base_properties,
selectedStyle?.default ?? {},
{ background: background(layer) }
)
const selected_hovered_style = merge(
base_properties,
selectedStyle?.hovered ?? {},
{ background: background(layer, "variant", "hovered") }
)
const selected_clicked_style = merge(
base_properties,
selectedStyle?.clicked ?? {},
{ background: background(layer, "variant", "pressed") }
)
return toggleable({
state: {
inactive: interactive({
state: {
default: unselected_default_style,
hovered: unselected_hovered_style,
clicked: unselected_clicked_style,
},
hovered: {
background: background(colorScheme.lowest, "hovered"),
}),
active: interactive({
state: {
default: selected_default_style,
hovered: selected_hovered_style,
clicked: selected_clicked_style,
},
clicked: {
background: background(colorScheme.lowest, "pressed"),
},
},
}),
},
})
}),
},
})
}
const defaultEntry = entry()
return {
openProjectButton: interactive({
@ -104,35 +147,38 @@ export default function projectPanel(colorScheme: ColorScheme) {
background: background(layer),
padding: { left: 6, right: 6, top: 0, bottom: 6 },
indentWidth: 12,
entry,
entry: defaultEntry,
draggedEntry: {
...baseEntry,
...defaultEntry.inactive.default,
text: text(layer, "mono", "on", { size: "sm" }),
background: withOpacity(background(layer, "on"), 0.9),
border: border(layer),
status,
},
ignoredEntry: {
...entry,
iconColor: foreground(layer, "disabled"),
text: text(layer, "mono", "disabled"),
active: {
...entry.active,
iconColor: foreground(layer, "variant"),
},
},
cutEntry: {
...entry,
text: text(layer, "mono", "disabled"),
active: {
...entry.active,
ignoredEntry: entry(
{
default: {
text: text(layer, "mono", "disabled"),
},
},
{
default: {
iconColor: foreground(layer, "variant"),
},
}
),
cutEntry: entry(
{
default: {
text: text(layer, "mono", "disabled"),
},
},
{
default: {
...entry.active.default,
background: background(layer, "active"),
text: text(layer, "mono", "disabled", { size: "sm" }),
},
},
},
}
),
filenameEditor: {
background: background(layer, "on"),
text: text(layer, "mono", "on", { size: "sm" }),

42
styles/src/styleTree/titlebar.ts
View file

@ -1,9 +1,9 @@
import { ColorScheme } from "../common";
import { ColorScheme } from "../common"
import { icon_button, toggleable_icon_button } from "../component/icon_button"
import { toggleable_text_button } from "../component/text_button"
import { interactive, toggleable } from "../element"
import { withOpacity } from "../theme/color";
import { background, border, foreground, text } from "./components";
import { withOpacity } from "../theme/color"
import { background, border, foreground, text } from "./components"
const ITEM_SPACING = 8
const TITLEBAR_HEIGHT = 32
@ -25,7 +25,7 @@ function build_spacing(
function call_controls(theme: ColorScheme) {
const button_height = 18
const space = build_spacing(TITLEBAR_HEIGHT, button_height, ITEM_SPACING);
const space = build_spacing(TITLEBAR_HEIGHT, button_height, ITEM_SPACING)
const marginY = {
top: space.marginY,
bottom: space.marginY,
@ -38,14 +38,14 @@ function call_controls(theme: ColorScheme) {
left: space.group,
right: space.half_item,
},
active_color: 'negative'
active_color: "negative",
}),
toggle_speakers_button: toggleable_icon_button(theme, {
margin: {
...marginY,
left: space.half_item,
right: space.half_item
right: space.half_item,
},
}),
@ -53,9 +53,9 @@ function call_controls(theme: ColorScheme) {
margin: {
...marginY,
left: space.half_item,
right: space.group
right: space.group,
},
active_color: 'accent'
active_color: "accent",
}),
muted: foreground(theme.lowest, "negative"),
@ -64,15 +64,15 @@ function call_controls(theme: ColorScheme) {
}
/**
* Opens the User Menu when toggled
*
* When logged in shows the user's avatar and a chevron,
* When logged out only shows a chevron.
*/
* Opens the User Menu when toggled
*
* When logged in shows the user's avatar and a chevron,
* When logged out only shows a chevron.
*/
function user_menu(theme: ColorScheme) {
const button_height = 18
const space = build_spacing(TITLEBAR_HEIGHT, button_height, ITEM_SPACING);
const space = build_spacing(TITLEBAR_HEIGHT, button_height, ITEM_SPACING)
const build_button = ({ online }: { online: boolean }) => {
const button = toggleable({
@ -124,8 +124,8 @@ function user_menu(theme: ColorScheme) {
background: background(theme.middle, "pressed"),
},
},
}
});
},
})
return {
user_menu: button,
@ -134,7 +134,7 @@ function user_menu(theme: ColorScheme) {
icon_height: 16,
corner_radius: 4,
outer_width: 16,
outer_corner_radius: 16
outer_corner_radius: 16,
},
icon: {
margin: {
@ -145,8 +145,8 @@ function user_menu(theme: ColorScheme) {
},
width: 11,
height: 11,
color: foreground(theme.lowest)
}
color: foreground(theme.lowest),
},
}
}
return {
@ -240,7 +240,7 @@ export function titlebar(theme: ColorScheme) {
leave_call_button: icon_button(theme, {
margin: {
left: ITEM_SPACING / 2,
right: ITEM_SPACING
right: ITEM_SPACING,
},
}),
@ -261,6 +261,6 @@ export function titlebar(theme: ColorScheme) {
background: foreground(theme.lowest, "accent"),
},
shareButton: toggleable_text_button(theme, {}),
user_menu: user_menu(theme)
user_menu: user_menu(theme),
}
}

66
styles/src/themes/rose-pine/common.ts
View file

@ -1,39 +1,39 @@
import { ThemeSyntax } from "../../common";
import { ThemeSyntax } from "../../common"
export const color = {
default: {
base: '#191724',
surface: '#1f1d2e',
overlay: '#26233a',
muted: '#6e6a86',
subtle: '#908caa',
text: '#e0def4',
love: '#eb6f92',
gold: '#f6c177',
rose: '#ebbcba',
pine: '#31748f',
foam: '#9ccfd8',
iris: '#c4a7e7',
highlightLow: '#21202e',
highlightMed: '#403d52',
highlightHigh: '#524f67',
base: "#191724",
surface: "#1f1d2e",
overlay: "#26233a",
muted: "#6e6a86",
subtle: "#908caa",
text: "#e0def4",
love: "#eb6f92",
gold: "#f6c177",
rose: "#ebbcba",
pine: "#31748f",
foam: "#9ccfd8",
iris: "#c4a7e7",
highlightLow: "#21202e",
highlightMed: "#403d52",
highlightHigh: "#524f67",
},
moon: {
base: '#232136',
surface: '#2a273f',
overlay: '#393552',
muted: '#6e6a86',
subtle: '#908caa',
text: '#e0def4',
love: '#eb6f92',
gold: '#f6c177',
rose: '#ea9a97',
pine: '#3e8fb0',
foam: '#9ccfd8',
iris: '#c4a7e7',
highlightLow: '#2a283e',
highlightMed: '#44415a',
highlightHigh: '#56526e',
base: "#232136",
surface: "#2a273f",
overlay: "#393552",
muted: "#6e6a86",
subtle: "#908caa",
text: "#e0def4",
love: "#eb6f92",
gold: "#f6c177",
rose: "#ea9a97",
pine: "#3e8fb0",
foam: "#9ccfd8",
iris: "#c4a7e7",
highlightLow: "#2a283e",
highlightMed: "#44415a",
highlightHigh: "#56526e",
},
dawn: {
base: "#faf4ed",
@ -51,8 +51,8 @@ export const color = {
highlightLow: "#f4ede8",
highlightMed: "#dfdad9",
highlightHigh: "#cecacd",
}
};
},
}
export const syntax = (c: typeof color.default): Partial<ThemeSyntax> => {
return {

24
styles/src/themes/rose-pine/rose-pine-dawn.ts
View file

@ -6,12 +6,12 @@ import {
ThemeConfig,
} from "../../common"
import { color as c, syntax } from "./common";
import { color as c, syntax } from "./common"
const color = c.dawn
const green = chroma.mix(color.foam, "#10b981", 0.6, 'lab');
const magenta = chroma.mix(color.love, color.pine, 0.5, 'lab');
const green = chroma.mix(color.foam, "#10b981", 0.6, "lab")
const magenta = chroma.mix(color.love, color.pine, 0.5, "lab")
export const theme: ThemeConfig = {
name: "Rosé Pine Dawn",
@ -21,7 +21,19 @@ export const theme: ThemeConfig = {
licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme",
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
neutral: chroma.scale([color.base, color.surface, color.highlightHigh, color.overlay, color.muted, color.subtle, color.text].reverse()).domain([0, 0.35, 0.45, 0.65, 0.7, 0.8, 0.9, 1]),
neutral: chroma
.scale(
[
color.base,
color.surface,
color.highlightHigh,
color.overlay,
color.muted,
color.subtle,
color.text,
].reverse()
)
.domain([0, 0.35, 0.45, 0.65, 0.7, 0.8, 0.9, 1]),
red: colorRamp(chroma(color.love)),
orange: colorRamp(chroma(color.iris)),
yellow: colorRamp(chroma(color.gold)),
@ -32,6 +44,6 @@ export const theme: ThemeConfig = {
magenta: colorRamp(chroma(magenta)),
},
override: {
syntax: syntax(color)
}
syntax: syntax(color),
},
}

22
styles/src/themes/rose-pine/rose-pine-moon.ts
View file

@ -6,12 +6,12 @@ import {
ThemeConfig,
} from "../../common"
import { color as c, syntax } from "./common";
import { color as c, syntax } from "./common"
const color = c.moon
const green = chroma.mix(color.foam, "#10b981", 0.6, 'lab');
const magenta = chroma.mix(color.love, color.pine, 0.5, 'lab');
const green = chroma.mix(color.foam, "#10b981", 0.6, "lab")
const magenta = chroma.mix(color.love, color.pine, 0.5, "lab")
export const theme: ThemeConfig = {
name: "Rosé Pine Moon",
@ -21,7 +21,17 @@ export const theme: ThemeConfig = {
licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme",
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
neutral: chroma.scale([color.base, color.surface, color.highlightHigh, color.overlay, color.muted, color.subtle, color.text]).domain([0, 0.3, 0.55, 1]),
neutral: chroma
.scale([
color.base,
color.surface,
color.highlightHigh,
color.overlay,
color.muted,
color.subtle,
color.text,
])
.domain([0, 0.3, 0.55, 1]),
red: colorRamp(chroma(color.love)),
orange: colorRamp(chroma(color.iris)),
yellow: colorRamp(chroma(color.gold)),
@ -32,6 +42,6 @@ export const theme: ThemeConfig = {
magenta: colorRamp(chroma(magenta)),
},
override: {
syntax: syntax(color)
}
syntax: syntax(color),
},
}

20
styles/src/themes/rose-pine/rose-pine.ts
View file

@ -5,12 +5,12 @@ import {
ThemeLicenseType,
ThemeConfig,
} from "../../common"
import { color as c, syntax } from "./common";
import { color as c, syntax } from "./common"
const color = c.default
const green = chroma.mix(color.foam, "#10b981", 0.6, 'lab');
const magenta = chroma.mix(color.love, color.pine, 0.5, 'lab');
const green = chroma.mix(color.foam, "#10b981", 0.6, "lab")
const magenta = chroma.mix(color.love, color.pine, 0.5, "lab")
export const theme: ThemeConfig = {
name: "Rosé Pine",
@ -20,7 +20,15 @@ export const theme: ThemeConfig = {
licenseUrl: "https://github.com/edunfelt/base16-rose-pine-scheme",
licenseFile: `${__dirname}/LICENSE`,
inputColor: {
neutral: chroma.scale([color.base, color.surface, color.highlightHigh, color.overlay, color.muted, color.subtle, color.text]),
neutral: chroma.scale([
color.base,
color.surface,
color.highlightHigh,
color.overlay,
color.muted,
color.subtle,
color.text,
]),
red: colorRamp(chroma(color.love)),
orange: colorRamp(chroma(color.iris)),
yellow: colorRamp(chroma(color.gold)),
@ -31,6 +39,6 @@ export const theme: ThemeConfig = {
magenta: colorRamp(chroma(magenta)),
},
override: {
syntax: syntax(color)
}
syntax: syntax(color),
},
}