feat(tokens): chart color fixes

[najlaskr]

Summary

Adds a dedicated chart colors documentation page and refines chart color demos + palette ordering for clearer, more consistent color guidance.

What changed

• Added new chart colors docs page
• Updated chart color demos
• Updated chart demo typing/behavior cleanup
• Updated charts index page to include the new colors docs entry
• Updated docs sidebar navigation for charts/colors
• Updated chart categorical palette ordering in library code

Why

• Improves chart color documentation clarity and discoverability.
• Aligns categorical palette ordering across docs and implementation.
• Keeps chart demo behavior and docs examples consistent with current chart APIs.

Validation

• pnpm lint ✅
• pnpm typecheck ✅

Reviews

• bonk has reviewed the change
• automated review not possible because: no access to bonk

Tests

• Tests included/updated
• Automated tests not possible - manual testing has been completed as follows: N/A
• Additional testing not necessary because: changes are docs/demo and palette ordering updates validated via lint and typecheck

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@426

commit: 062af9f

[github-actions]

Docs Preview

View docs preview

Commit: 062af9f

[github-actions]

Visual Regression Report — 10 changed, 27 unchanged

10 screenshot(s) with visual changes:

Button / Variant: Primary

166 px (0.16%) changed

Before	After	Diff

Button / Loading State

5 px (0%) changed

Before	After	Diff

Dialog / Dialog Alert

2,499 px (2.46%) changed

Before	After	Diff

Dialog / Dialog Confirmation

352 px (0.35%) changed

Before	After	Diff

Dialog (Open)

0 px (0%) changed

Before	After	Diff

Select / Select Basic

299 px (0.29%) changed

Before	After	Diff

Select / Select Sizes

855 px (0.46%) changed

Before	After	Diff

Select / Select Custom Rendering

413 px (0.41%) changed

Before	After	Diff

Select / Select Loading

1,429 px (0.71%) changed

Before	After	Diff

Select (Open)

747 px (0%) changed

Before	After	Diff

27 screenshot(s) unchanged

• Button / Basic
• Button / Variant: Secondary
• Button / Variant: Ghost
• Button / Variant: Destructive
• Button / Variant: Outline
• Button / Variant: Secondary Destructive
• Button / Sizes
• Button / With Icon
• Button / Icon Only
• Button / Disabled State
• Button / Title
• Dialog / Dialog With Actions
• Dialog / Dialog Basic
• Dialog / Dialog With Select
• Dialog / Dialog With Combobox
• Dialog / Dialog With Dropdown
• Select / Select Without Label
• Select / Select With Field
• Select / Select Placeholder
• Select / Select With Tooltip
• Select / Select Multiple
• Select / Select Complex
• Select / Select Disabled Options
• Select / Select Disabled Items
• Select / Select Grouped
• Select / Select Grouped With Disabled
• Select / Select Long List

---

Generated by Kumo Visual Regression

[geoquant]

looks good! can we add it so that it is visible with the command palette?

[geoquant]

also, i thought we needed a palette with 16 color steps?

[geoquant]

also fwiw i think our "semantic" colors are either "diverging" or "categorical"

so we have 1 sequential palette and 2 categorical/qualitative palettes

but i'm not a purist, i just want us to build out an api that is flexible enough to support many color palettes under a type. like we may want a range of blues, under sequential.

check out this api:
https://observablehq.com/@d3/color-schemes

[geoquant]

left a few comments!