@jovertical/mise-design-system 0.0.0-stage → 1.0.0

package/dist/tokens/emit-web.js

@@ -0,0 +1,172 @@
+import { RAMP_ROLES, resolveTheme } from './config.js';
+import { layout, radiusScale, sizing } from './geometry.js';
+import { darkTokens, lightTokens, SEMANTIC_TOKENS } from './semantic.js';
+import { STEPS } from './tailwind-palette.js';
+/**
+ * Generates `theme.css` from a theme config.
+ *
+ * Consumers import it after Tailwind:
+ *
+ *   @import 'tailwindcss';
+ *   @import 'tw-animate-css';
+ *   @import '@jovertical/mise-design-system/theme.css';
+ *   @source '../node_modules/@jovertical/mise-design-system/dist';
+ *
+ * The `@source` line is not optional. Tailwind v4 skips `node_modules` when
+ * it detects content, so without it every class the components use is pruned.
+ *
+ * Adapted from the React package 2.23.0 src/tokens/emit-web.ts. The
+ * emitter now takes a config instead of reading module constants.
+ */
+/** Tokens declared in `:root` under a `--color-*` name rather than a semantic one. */
+const COLOR_PREFIXED = new Set(['--color-table-header']);
+/** The faces live in `:root` so a consumer can override them in plain CSS. */
+const FONT_TOKENS = ['--font-sans', '--font-heading', '--font-mono'];
+/**
+ * A 10% wash under ink of the same tone, for a soft badge, a chip or an alert.
+ * Named once here, because a tint that drifts by a percent between components
+ * reads as two different states. Red washes from `--destructive`, the red
+ * every component inks with.
+ */
+const SOFT_TINTS = {
+    '--color-primary-soft': 'var(--primary)',
+    '--color-info-soft': 'var(--color-info)',
+    '--color-success-soft': 'var(--color-success)',
+    '--color-warning-soft': 'var(--color-warning)',
+    '--color-destructive-soft': 'var(--destructive)',
+};
+const declare = (entries) => [...entries].map(([token, value]) => `  ${token}: ${value};`);
+const bridgeName = (token) => token.startsWith('--color-') ? token : `--color-${token.slice(2)}`;
+/**
+ * The `@theme inline` bridge. `inline` makes Tailwind write each value
+ * through as authored, so `bg-primary` emits `var(--primary)` and follows
+ * whichever of `:root` / `.dark` is in scope. A bridge that pointed at a ramp
+ * step directly would freeze the utility in one scheme.
+ */
+function themeInline() {
+    const lines = [
+        '  /* Faces, resolved from :root so a consumer can override them. */',
+        ...declare(FONT_TOKENS.map((token) => [token, `var(${token})`])),
+        '',
+        '  /* Radius scale, derived from the single --radius in :root. */',
+        ...declare(Object.entries(radiusScale)),
+        '',
+        '  /* Semantic surfaces and ink. Every one resolves through :root / .dark. */',
+        ...declare(SEMANTIC_TOKENS.filter((token) => !COLOR_PREFIXED.has(token)).map((token) => [
+            bridgeName(token),
+            `var(${token})`,
+        ])),
+        '',
+        '  /* Soft tints: each tone at 10%, behind ink of the same tone. */',
+        ...declare(Object.entries(SOFT_TINTS).map(([token, ink]) => [
+            token,
+            `color-mix(in oklab, ${ink} 10%, transparent)`,
+        ])),
+        '',
+        '  /* Theme-responsive, declared under a --color-* name in :root. */',
+        ...declare([...COLOR_PREFIXED].map((token) => [token, `var(${token})`])),
+        '',
+        '  /* Role ramps. The self-reference hands each utility a var() that :root',
+        '     resolves, rather than baking in a literal. */',
+        ...RAMP_ROLES.flatMap((role) => declare(STEPS.map((at) => [`--color-${role}-${at}`, `var(--color-${role}-${at})`]))),
+        '',
+        '  /* Structural measurements. */',
+        ...declare(Object.entries(layout)),
+    ];
+    return `@theme inline {\n${lines.join('\n')}\n}`;
+}
+function rootBlock(theme) {
+    const lines = [
+        '  /* Structure, and the one --radius the scale derives from. */',
+        ...declare(Object.entries(sizing)),
+        `  --radius: ${theme.radius};`,
+        '',
+        '  /* Faces. */',
+        `  --font-sans: ${theme.fonts.sans};`,
+        `  --font-heading: ${theme.fonts.heading};`,
+        `  --font-mono: ${theme.fonts.mono};`,
+        '',
+        '  /* Light scheme. --accent is a brand tint meaning "active nav row";',
+        '     it is never a hover state. */',
+        ...declare(Object.entries({ ...lightTokens(theme), ...theme.light })),
+        '',
+        '  /* Role ramps, as literals: Tailwind prunes theme variables nobody uses. */',
+        ...RAMP_ROLES.flatMap((role) => declare(STEPS.map((at) => [`--color-${role}-${at}`, theme.ramps[role][at]]))),
+    ];
+    return `:root {\n${lines.join('\n')}\n}`;
+}
+function darkBlock(theme) {
+    const lines = [
+        '  /* Near-black surfaces and translucent white borders. */',
+        ...declare(Object.entries({ ...darkTokens(theme), ...theme.dark })),
+    ];
+    return `.dark {\n${lines.join('\n')}\n}`;
+}
+const BASE_BLOCK = `@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground font-sans;
+  }
+}`;
+/**
+ * Printing a listing should produce the table, not a screenshot of the app.
+ * The rules target `data-slot` attributes the components emit, so they ship
+ * with the theme instead of rotting in an app.
+ */
+const PRINT_BLOCK = `@media print {
+  [data-slot='sidebar'],
+  [data-slot='sidebar-gap'],
+  header {
+    display: none !important;
+  }
+
+  [data-slot='sidebar-inset'] {
+    margin: 0 !important;
+    box-shadow: none !important;
+  }
+
+  [data-slot='table-container'] {
+    overflow: visible !important;
+  }
+
+  body {
+    background: #fff !important;
+  }
+}`;
+/** `:root` and `.dark` only, for swapping a theme at runtime, as Storybook's preset switcher does. */
+export function emitThemeVariables(config = {}) {
+    const theme = resolveTheme(config);
+    return `${rootBlock(theme)}\n\n${darkBlock(theme)}\n`;
+}
+/** The whole generated theme, without the hand-written component overrides. */
+export function emitThemeCss(config = {}) {
+    const theme = resolveTheme(config);
+    return [
+        '/* Generated by @jovertical/mise-design-system. Do not edit.',
+        ' * Regenerate with `pnpm build:theme`, or `npx mise-theme` for a custom theme.',
+        ' */',
+        '',
+        '@custom-variant dark (&:is(.dark *));',
+        '',
+        themeInline(),
+        '',
+        rootBlock(theme),
+        '',
+        darkBlock(theme),
+        '',
+        BASE_BLOCK,
+        '',
+        PRINT_BLOCK,
+        '',
+    ].join('\n');
+}
+/**
+ * The shipped stylesheet: the emitted theme, then the hand-written overrides.
+ * They are concatenated rather than joined by an `@import`, because CSS
+ * requires `@import` to come before every other rule.
+ */
+export function themeStylesheet(config, componentsCss) {
+    return `${emitThemeCss(config)}\n${componentsCss}`;
+}

package/dist/tokens/geometry.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Everything in the theme that is not a colour and not configurable: the
+ * radius scale's shape, the shell's structural measurements, and the control
+ * geometry components hard-code.
+ *
+ * Adapted from the React package 2.23.0 src/tokens/geometry.ts.
+ */
+/** Structural measurements, declared in `:root`. `--spacing` drives every spacing utility. */
+export declare const sizing: {
+    readonly '--sidebar-width': "calc(var(--spacing) * 20)";
+    readonly '--header-height': "64px";
+    readonly '--spacing': "0.25rem";
+};
+/**
+ * Derived from the single `--radius`, so one edit moves the whole scale in
+ * step. `--radius-4xl` is what cards and dialogs use, clamped to 24px by
+ * `rounded-[min(var(--radius-4xl),24px)]`.
+ */
+export declare const radiusScale: {
+    readonly '--radius-sm': "calc(var(--radius) - 4px)";
+    readonly '--radius-md': "calc(var(--radius) - 2px)";
+    readonly '--radius-lg': "var(--radius)";
+    readonly '--radius-xl': "calc(var(--radius) + 4px)";
+    readonly '--radius-2xl': "calc(var(--radius) + 8px)";
+    readonly '--radius-3xl': "calc(var(--radius) + 12px)";
+    readonly '--radius-4xl': "calc(var(--radius) + 16px)";
+};
+/**
+ * `--container-content` caps the content column, header bar included, so
+ * tables do not stretch the full width of an ultrawide display.
+ */
+export declare const layout: {
+    readonly '--height-header': "var(--header-height)";
+    readonly '--width-sidebar': "var(--sidebar-width)";
+    readonly '--container-content': "96rem";
+    readonly '--spacing': "var(--spacing)";
+};
+/**
+ * Control geometry, recorded as a rule rather than emitted as CSS.
+ *
+ * Components hard-code these classes; the table exists so that a new component
+ * has one place to check instead of copying whichever neighbour it was pasted
+ * from. Kept in sync with the Geometry docs page in Storybook.
+ */
+export declare const geometryRules: {
+    readonly card: "rounded-[min(var(--radius-4xl),24px)]";
+    readonly dialog: "rounded-[min(var(--radius-4xl),24px)]";
+    readonly button: "rounded-2xl";
+    readonly input: "rounded-2xl";
+    readonly select: "rounded-2xl";
+    readonly toolbarPill: "rounded-2xl";
+    readonly segmentedTrack: "rounded-full";
+    readonly segmentedItem: "rounded-full";
+    readonly menuSurface: "rounded-2xl";
+    readonly menuRow: "rounded-lg";
+    readonly sidebarNavRow: "rounded-xl";
+    readonly badge: "rounded-lg";
+    readonly iconAction: "rounded-full";
+    readonly toolbarControlHeight: "h-8";
+    readonly formControlHeight: "h-9";
+    readonly menuRowHeight: "py-1.5";
+};

package/dist/tokens/geometry.js

@@ -0,0 +1,67 @@
+/**
+ * Everything in the theme that is not a colour and not configurable: the
+ * radius scale's shape, the shell's structural measurements, and the control
+ * geometry components hard-code.
+ *
+ * Adapted from the React package 2.23.0 src/tokens/geometry.ts.
+ */
+/** Structural measurements, declared in `:root`. `--spacing` drives every spacing utility. */
+export const sizing = {
+    '--sidebar-width': 'calc(var(--spacing) * 20)',
+    '--header-height': '64px',
+    '--spacing': '0.25rem',
+};
+/**
+ * Derived from the single `--radius`, so one edit moves the whole scale in
+ * step. `--radius-4xl` is what cards and dialogs use, clamped to 24px by
+ * `rounded-[min(var(--radius-4xl),24px)]`.
+ */
+export const radiusScale = {
+    '--radius-sm': 'calc(var(--radius) - 4px)',
+    '--radius-md': 'calc(var(--radius) - 2px)',
+    '--radius-lg': 'var(--radius)',
+    '--radius-xl': 'calc(var(--radius) + 4px)',
+    '--radius-2xl': 'calc(var(--radius) + 8px)',
+    '--radius-3xl': 'calc(var(--radius) + 12px)',
+    '--radius-4xl': 'calc(var(--radius) + 16px)',
+};
+/**
+ * `--container-content` caps the content column, header bar included, so
+ * tables do not stretch the full width of an ultrawide display.
+ */
+export const layout = {
+    '--height-header': 'var(--header-height)',
+    '--width-sidebar': 'var(--sidebar-width)',
+    '--container-content': '96rem',
+    '--spacing': 'var(--spacing)',
+};
+/**
+ * Control geometry, recorded as a rule rather than emitted as CSS.
+ *
+ * Components hard-code these classes; the table exists so that a new component
+ * has one place to check instead of copying whichever neighbour it was pasted
+ * from. Kept in sync with the Geometry docs page in Storybook.
+ */
+export const geometryRules = {
+    card: 'rounded-[min(var(--radius-4xl),24px)]',
+    dialog: 'rounded-[min(var(--radius-4xl),24px)]',
+    button: 'rounded-2xl',
+    input: 'rounded-2xl',
+    select: 'rounded-2xl',
+    toolbarPill: 'rounded-2xl',
+    // The segmented control's track and its pill are both fully round, and the
+    // pill is lifted with `shadow-sm`. The composed class strings live in
+    // `src/components/segmented-control.ts`, which is what `Tabs`, `ToggleGroup`
+    // and `DataTableViewToggle` read; these two lines record the geometry so a
+    // new control can check the table without importing a component.
+    segmentedTrack: 'rounded-full',
+    segmentedItem: 'rounded-full',
+    menuSurface: 'rounded-2xl',
+    menuRow: 'rounded-lg',
+    sidebarNavRow: 'rounded-xl',
+    badge: 'rounded-lg',
+    iconAction: 'rounded-full',
+    toolbarControlHeight: 'h-8',
+    formControlHeight: 'h-9',
+    menuRowHeight: 'py-1.5',
+};

package/dist/tokens/presets.d.ts

@@ -0,0 +1,51 @@
+/** The neutral ramps a theme can sit on. `zinc` is the default. */
+export declare const BASES: readonly ["zinc", "slate", "gray", "neutral", "stone"];
+export type BaseName = (typeof BASES)[number];
+/**
+ * The theme mise ships (D4, D11): zinc neutrals, an indigo brand, and the four
+ * statuses on hues that read as their meaning. The five chart hues are picked
+ * to stay apart from each other and from the indigo brand.
+ */
+export declare const defaultTheme: {
+    readonly base: "zinc";
+    readonly primary: "indigo";
+    readonly status: {
+        readonly info: "sky";
+        readonly success: "emerald";
+        readonly warning: "amber";
+        readonly critical: "red";
+    };
+    readonly charts: readonly ["teal", "orange", "fuchsia", "lime", "sky"];
+    readonly radius: "0.625rem";
+    readonly fonts: {
+        readonly sans: "ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'";
+        readonly heading: "ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'";
+        readonly mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
+    };
+};
+/**
+ * What Storybook's preset switcher offers: each base under the default brand,
+ * and one worked custom theme that changes the base, the brand and the radius
+ * together.
+ */
+export declare const presets: {
+    readonly zinc: {};
+    readonly slate: {
+        readonly base: "slate";
+    };
+    readonly gray: {
+        readonly base: "gray";
+    };
+    readonly neutral: {
+        readonly base: "neutral";
+    };
+    readonly stone: {
+        readonly base: "stone";
+    };
+    readonly 'teal-on-stone': {
+        readonly base: "stone";
+        readonly primary: "teal";
+        readonly radius: "0.5rem";
+    };
+};
+export type PresetName = keyof typeof presets;

package/dist/tokens/presets.js

@@ -0,0 +1,35 @@
+/** The neutral ramps a theme can sit on. `zinc` is the default. */
+export const BASES = ['zinc', 'slate', 'gray', 'neutral', 'stone'];
+/**
+ * System stacks, so a consumer loads no web font by default. Numbers line up
+ * through `tabular-nums` where a component needs it, not through a mono base
+ * face. Mono-as-base was the React package's identity choice and did not come over.
+ */
+const SYSTEM_SANS = "ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'";
+const SYSTEM_MONO = "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
+/**
+ * The theme mise ships (D4, D11): zinc neutrals, an indigo brand, and the four
+ * statuses on hues that read as their meaning. The five chart hues are picked
+ * to stay apart from each other and from the indigo brand.
+ */
+export const defaultTheme = {
+    base: 'zinc',
+    primary: 'indigo',
+    status: { info: 'sky', success: 'emerald', warning: 'amber', critical: 'red' },
+    charts: ['teal', 'orange', 'fuchsia', 'lime', 'sky'],
+    radius: '0.625rem',
+    fonts: { sans: SYSTEM_SANS, heading: SYSTEM_SANS, mono: SYSTEM_MONO },
+};
+/**
+ * What Storybook's preset switcher offers: each base under the default brand,
+ * and one worked custom theme that changes the base, the brand and the radius
+ * together.
+ */
+export const presets = {
+    zinc: {},
+    slate: { base: 'slate' },
+    gray: { base: 'gray' },
+    neutral: { base: 'neutral' },
+    stone: { base: 'stone' },
+    'teal-on-stone': { base: 'stone', primary: 'teal', radius: '0.5rem' },
+};

package/dist/tokens/semantic.d.ts

@@ -0,0 +1,32 @@
+import type { ResolvedTheme } from './config.js';
+/**
+ * The semantic contract: what a colour means. Consumers override these by
+ * name (spec, Theming level 2), so the list is public and stable.
+ *
+ * Values point at the role ramps in `:root` (`var(--color-primary-600)`)
+ * rather than being resolved to literals. That way an override of one ramp
+ * step moves every token that reads it, and light and dark cannot drift apart
+ * silently.
+ *
+ * Adapted from the React package 2.23.0 src/tokens/semantic.ts. The
+ * React package's brand literals and `--error` did not come over. `--secondary` is a
+ * neutral fill again, as in shadcn, rather than a brand orange.
+ */
+export declare const SEMANTIC_TOKENS: readonly ["--background", "--foreground", "--card", "--card-foreground", "--popover", "--popover-foreground", "--primary", "--primary-foreground", "--secondary", "--secondary-foreground", "--muted", "--muted-foreground", "--accent", "--accent-foreground", "--destructive", "--info", "--success", "--warning", "--destructive-foreground", "--info-foreground", "--success-foreground", "--warning-foreground", "--border", "--input", "--ring", "--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5", "--sidebar", "--sidebar-foreground", "--sidebar-primary", "--sidebar-primary-foreground", "--sidebar-accent", "--sidebar-accent-foreground", "--sidebar-border", "--sidebar-ring", "--color-table-header"];
+export type SemanticToken = (typeof SEMANTIC_TOKENS)[number];
+type Scheme = Record<SemanticToken, string>;
+/**
+ * `:root`. Muted ink is the base's 600 rather than shadcn's 500: 500 falls
+ * below AA on a `--muted` surface, which is where most small grey text sits.
+ * `--accent` is a brand tint and means "active nav row". It is never a hover
+ * state.
+ */
+export declare function lightTokens(theme: ResolvedTheme): Scheme;
+/**
+ * `.dark`: near-black surfaces with translucent white borders, so stacked
+ * panels stay legible without heavy outlines. Status ink brightens to the 400
+ * step. The table header follows the sidebar, as in the React package.
+ * Without that, the header is the brightest thing on a dark screen.
+ */
+export declare function darkTokens(theme: ResolvedTheme): Scheme;
+export {};

package/dist/tokens/semantic.js

@@ -0,0 +1,158 @@
+/**
+ * The semantic contract: what a colour means. Consumers override these by
+ * name (spec, Theming level 2), so the list is public and stable.
+ *
+ * Values point at the role ramps in `:root` (`var(--color-primary-600)`)
+ * rather than being resolved to literals. That way an override of one ramp
+ * step moves every token that reads it, and light and dark cannot drift apart
+ * silently.
+ *
+ * Adapted from the React package 2.23.0 src/tokens/semantic.ts. The
+ * React package's brand literals and `--error` did not come over. `--secondary` is a
+ * neutral fill again, as in shadcn, rather than a brand orange.
+ */
+export const SEMANTIC_TOKENS = [
+    '--background',
+    '--foreground',
+    '--card',
+    '--card-foreground',
+    '--popover',
+    '--popover-foreground',
+    '--primary',
+    '--primary-foreground',
+    '--secondary',
+    '--secondary-foreground',
+    '--muted',
+    '--muted-foreground',
+    '--accent',
+    '--accent-foreground',
+    '--destructive',
+    '--info',
+    '--success',
+    '--warning',
+    '--destructive-foreground',
+    '--info-foreground',
+    '--success-foreground',
+    '--warning-foreground',
+    '--border',
+    '--input',
+    '--ring',
+    '--chart-1',
+    '--chart-2',
+    '--chart-3',
+    '--chart-4',
+    '--chart-5',
+    '--sidebar',
+    '--sidebar-foreground',
+    '--sidebar-primary',
+    '--sidebar-primary-foreground',
+    '--sidebar-accent',
+    '--sidebar-accent-foreground',
+    '--sidebar-border',
+    '--sidebar-ring',
+    '--color-table-header',
+];
+const WHITE = 'oklch(1 0 0)';
+const step = (role, at) => `var(--color-${role}-${at})`;
+/**
+ * `:root`. Muted ink is the base's 600 rather than shadcn's 500: 500 falls
+ * below AA on a `--muted` surface, which is where most small grey text sits.
+ * `--accent` is a brand tint and means "active nav row". It is never a hover
+ * state.
+ */
+export function lightTokens(theme) {
+    const [c1, c2, c3, c4, c5] = theme.charts;
+    return {
+        '--background': WHITE,
+        '--foreground': step('base', 950),
+        '--card': WHITE,
+        '--card-foreground': step('base', 950),
+        '--popover': WHITE,
+        '--popover-foreground': step('base', 950),
+        '--primary': step('primary', 600),
+        '--primary-foreground': WHITE,
+        '--secondary': step('base', 100),
+        '--secondary-foreground': step('base', 900),
+        '--muted': step('base', 100),
+        '--muted-foreground': step('base', 600),
+        '--accent': step('primary', 50),
+        '--accent-foreground': step('primary', 700),
+        '--destructive': step('critical', 600),
+        '--info': step('info', 600),
+        '--success': step('success', 600),
+        '--warning': step('warning', 600),
+        '--destructive-foreground': WHITE,
+        '--info-foreground': WHITE,
+        '--success-foreground': WHITE,
+        '--warning-foreground': WHITE,
+        '--border': step('base', 200),
+        '--input': step('base', 200),
+        '--ring': step('primary', 400),
+        '--chart-1': c1[500],
+        '--chart-2': c2[500],
+        '--chart-3': c3[500],
+        '--chart-4': c4[500],
+        '--chart-5': c5[500],
+        '--sidebar': step('base', 50),
+        '--sidebar-foreground': step('base', 950),
+        '--sidebar-primary': step('primary', 600),
+        '--sidebar-primary-foreground': WHITE,
+        '--sidebar-accent': step('base', 100),
+        '--sidebar-accent-foreground': step('base', 900),
+        '--sidebar-border': step('base', 200),
+        '--sidebar-ring': step('base', 400),
+        '--color-table-header': step('base', 50),
+    };
+}
+/**
+ * `.dark`: near-black surfaces with translucent white borders, so stacked
+ * panels stay legible without heavy outlines. Status ink brightens to the 400
+ * step. The table header follows the sidebar, as in the React package.
+ * Without that, the header is the brightest thing on a dark screen.
+ */
+export function darkTokens(theme) {
+    const [c1, c2, c3, c4, c5] = theme.charts;
+    return {
+        '--background': step('base', 950),
+        '--foreground': step('base', 50),
+        '--card': step('base', 900),
+        '--card-foreground': step('base', 50),
+        '--popover': step('base', 900),
+        '--popover-foreground': step('base', 50),
+        '--primary': step('primary', 400),
+        '--primary-foreground': step('primary', 950),
+        '--secondary': step('base', 800),
+        '--secondary-foreground': step('base', 50),
+        '--muted': step('base', 800),
+        '--muted-foreground': step('base', 400),
+        '--accent': step('primary', 950),
+        '--accent-foreground': step('primary', 200),
+        '--destructive': step('critical', 400),
+        '--info': step('info', 400),
+        '--success': step('success', 400),
+        '--warning': step('warning', 400),
+        // White on a bright 400 all but disappears; the darkest step reads, as
+        // `--primary-foreground` does on the brand.
+        '--destructive-foreground': step('critical', 950),
+        '--info-foreground': step('info', 950),
+        '--success-foreground': step('success', 950),
+        '--warning-foreground': step('warning', 950),
+        '--border': 'oklch(1 0 0 / 10%)',
+        '--input': 'oklch(1 0 0 / 15%)',
+        '--ring': step('primary', 500),
+        '--chart-1': c1[400],
+        '--chart-2': c2[400],
+        '--chart-3': c3[400],
+        '--chart-4': c4[400],
+        '--chart-5': c5[400],
+        '--sidebar': step('base', 900),
+        '--sidebar-foreground': step('base', 50),
+        '--sidebar-primary': step('primary', 400),
+        '--sidebar-primary-foreground': step('primary', 950),
+        '--sidebar-accent': step('base', 800),
+        '--sidebar-accent-foreground': step('base', 50),
+        '--sidebar-border': 'oklch(1 0 0 / 10%)',
+        '--sidebar-ring': step('base', 600),
+        '--color-table-header': 'var(--sidebar)',
+    };
+}