Skip to content

feat: drop the chart tokens; charts use the existing colors #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zyx1121 merged 1 commit into from
Oct 7, 2026
Merged

feat: drop the chart tokens; charts use the existing colors #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion DESIGN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,16 @@ A new container picks its radius from this rule, not by eye. If its padding is n

## Color

Use the theme tokens only: `background` / `foreground`, `primary`, `muted` (the one neutral fill and the secondary text color), `border` / `input` / `ring`, `destructive`, `success`, `warning`. There is no `secondary` or `accent` (they were the same gray as `muted`) and no `sidebar-*`: a sidebar needs a second surface color, which layer 1 does not have. Navigation lives in the app shell's corners or in an overlay. No Tailwind palette colors and no color literals.
Use the theme tokens only: `background` / `foreground`, `primary`, `muted` (the one neutral fill and the secondary text color), `border` / `input` / `ring`, `destructive`, `success`, `warning`. There is no `secondary` or `accent` (they were the same gray as `muted`) and no `sidebar-*`: a sidebar needs a second surface color, which layer 1 does not have. Navigation lives in the app shell's corners or in an overlay.

Charts use the same colors, not chart-specific tokens:

| Series | Color |
|--------|-------|
| The main series | `primary` |
| A comparison (last year, average) | `muted-foreground` |
| A series with a meaning (income, expense, overdue) | `success`, `destructive`, `warning` |

A chart that needs more than two series to be told apart by color is split into small multiples or shown as a table. No Tailwind palette colors and no color literals.

Focus follows the component's own color. `--ring` is a neutral gray, so inputs, selects and outline or ghost buttons show a gray focus ring; the primary button shows a primary ring and the destructive button a destructive one. Ultramarine marks the main action, not every focused control.
15 changes: 0 additions & 15 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,6 @@
--font-sans: var(--font-inter), var(--font-noto-sans-jp), var(--font-noto-sans-tc), sans-serif;
--font-heading: var(--font-inter), var(--font-noto-sans-jp), var(--font-noto-sans-tc), sans-serif;
--font-mono: var(--font-jetbrains-mono), var(--font-noto-sans-jp), var(--font-noto-sans-tc), monospace;
--color-chart-5: var(--chart-5);
--color-chart-4: var(--chart-4);
--color-chart-3: var(--chart-3);
--color-chart-2: var(--chart-2);
--color-chart-1: var(--chart-1);
--color-ring: var(--ring);
--color-input: var(--input);
--color-border: var(--border);
Expand Down Expand Up @@ -56,11 +51,6 @@
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.87 0 0);
--chart-2: oklch(0.556 0 0);
--chart-3: oklch(0.439 0 0);
--chart-4: oklch(0.371 0 0);
--chart-5: oklch(0.269 0 0);
--radius: 1rem;
}

Expand All @@ -81,11 +71,6 @@
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.87 0 0);
--chart-2: oklch(0.556 0 0);
--chart-3: oklch(0.439 0 0);
--chart-4: oklch(0.371 0 0);
--chart-5: oklch(0.269 0 0);
}

/* Menus with p-1 sit 4px outside their trigger on both sides. */
Expand Down
14 changes: 2 additions & 12 deletions registry.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,12 +87,7 @@
"warning": "oklch(0.55 0.112 85)",
"border": "oklch(0.922 0 0)",
"input": "oklch(0.922 0 0)",
"ring": "oklch(0.708 0 0)",
"chart-1": "oklch(0.87 0 0)",
"chart-2": "oklch(0.556 0 0)",
"chart-3": "oklch(0.439 0 0)",
"chart-4": "oklch(0.371 0 0)",
"chart-5": "oklch(0.269 0 0)"
"ring": "oklch(0.708 0 0)"
},
"dark": {
"background": "oklch(0.145 0 0)",
Expand All @@ -110,12 +105,7 @@
"warning": "oklch(0.84 0.12 85)",
"border": "oklch(1 0 0 / 10%)",
"input": "oklch(1 0 0 / 15%)",
"ring": "oklch(0.556 0 0)",
"chart-1": "oklch(0.87 0 0)",
"chart-2": "oklch(0.556 0 0)",
"chart-3": "oklch(0.439 0 0)",
"chart-4": "oklch(0.371 0 0)",
"chart-5": "oklch(0.269 0 0)"
"ring": "oklch(0.556 0 0)"
}
}
},
Expand Down
6 changes: 3 additions & 3 deletions scripts/check-tokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,11 @@ const patterns = [
name: "palette color",
regex: new RegExp(`\\b(?:${colorUtilities})-(?:${palette})\\b`, "g"),
},
// secondary and accent were the same gray as muted, and there is no
// sidebar in the two-layer model; the base drops all of them.
// secondary and accent were the same gray as muted, charts use the
// existing colors, and there is no sidebar in the two-layer model.
{
name: "removed color token",
regex: /\b[a-z]+-(?:secondary|accent|sidebar)[\w-]*/g,
regex: /\b[a-z]+-(?:secondary|accent|sidebar|chart)[\w-]*/g,
},
{
name: "color literal",
Expand Down
Loading