Skip to content

feat: migration to okhst - #1229

Open
tenphi wants to merge 2 commits into
mainfrom
feat-migration-to-okhsl
Open

feat: migration to okhst#1229
tenphi wants to merge 2 commits into
mainfrom
feat-migration-to-okhsl

Conversation

@tenphi

@tenphi tenphi commented Jul 9, 2026

Copy link
Copy Markdown
Member

Note

Medium Risk
Default palette changes affect every consumer on the kit’s global tokens (visual breaking change for apps that relied on implicit defaults), though behavior is tunable and code syntax colors are isolated.

Overview
Makes the pastel palette the shipped default by changing PaletteConfig defaults to saturation: 100 and pastel: true, which re-resolves almost every app token (snapshot updated). Consumers can restore the previous look with { saturation: 80, pastel: false } without API changes.

Decouples syntax colors from the app seed by introducing DEFAULT_CODE_SATURATION (still 80) and resolving themes.code.saturation from it instead of DEFAULT_SATURATION, so raising the app seed to 100 does not pull code-* tokens along.

Keeps Storybook presets stable by pinning pastel: false on Ocean / Forest / Ember and documenting why; Cube still uses {} to track whatever the kit ships. Theming docs and tests are updated for the new defaults (e.g. pastel tests toggle off to perturb the palette).

Reviewed by Cursor Bugbot for commit bffa100. Bugbot is set up for automated code reviews on this repo. Configure here.

@vercel

vercel Bot commented Jul 9, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
cube-ui-kit Ready Ready Preview Aug 6, 2026 2:31pm

Request Review

@changeset-bot

changeset-bot Bot commented Jul 9, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: bffa100

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@cube-dev/ui-kit Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions

github-actions Bot commented Jul 9, 2026

Copy link
Copy Markdown
Contributor

🧪 Storybook is successfully deployed!

@github-actions

github-actions Bot commented Jul 9, 2026

Copy link
Copy Markdown
Contributor

🏋️ Size limit report

Name Size Passed?
All 449.38 KB (+0.01% 🔺) Yes 🎉
Tree shaking (just a Button) 118.94 KB (0% 🟰) Yes 🎉

Click here if you want to find out what is changed in this build

Comment thread src/tokens/colors.ts Outdated
@github-actions

github-actions Bot commented Jul 9, 2026

Copy link
Copy Markdown
Contributor

📦 NPM canary release

Deployed canary version 0.0.0-canary-fb1ba42.

Comment thread src/tokens/palette.ts Outdated
Comment thread src/tokens/palette.ts Outdated
Comment thread src/tokens/palette.ts Outdated
Comment thread src/components/content/PrismCode/PrismCode.tsx

@cursor cursor Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes using default effort and found 2 potential issues.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 19d6918. Configure here.

Comment thread src/components/overlays/Dialog/DialogTrigger.tsx Outdated
Comment thread src/components/fields/FilterPicker/FilterPicker.tsx
Makes the pastel palette the shipped default: the app seed moves to saturation
100 with `pastel: true`, giving a softer, more even spread across hues.

Rewritten onto the runtime-tunable palette that landed in #1277. The original
version of this branch hand-edited the whole recipe in `palette.ts`; that file is
now generated from `PaletteConfig`, which already exposes `saturation` and
`pastel` as first-class options. So the change collapses from a few hundred lines
of rewritten recipe to two defaults, and anything tuning the palette at runtime
keeps working — opting back out is `{ saturation: 80, pastel: false }`.

Also drops this branch's own "keep syntax highlighting out of the pastel base"
commit. #1281 landed the same fix on main and did it better, pinning `pastel:
false` on the code theme's instance config with tests, rather than splitting out
a parallel code theme the way this branch had.

**`DEFAULT_CODE_SATURATION` is the one genuinely new thing here.** The code seed
read `DEFAULT_SATURATION`, deliberately not the palette-level saturation, so that
tuning the app could not wash out a code block. Moving that single constant to
100 would have dragged the syntax colors along with it — reintroducing exactly
the coupling `PaletteCodeSeed` and the `pastel` opt-out both exist to prevent.
Splitting it lets the app seed move while the code palette stays on the value it
was calibrated against.

Four tests assumed non-pastel was the default and used `{ pastel: true }` as their
perturbation, which is now a no-op. They are inverted to toggle pastel OFF rather
than re-baselined, so each still asserts what it was written to assert. The
exception is `anchors its contrast floors to the real surface`: bit-for-bit
equality between the code theme's mirrored surface and the live one only holds
while the page is non-pastel, so it now pins that explicitly — its sibling
already covers the pastel case on tone, which is what the AA/AAA floors are
solved against.

Verified: 45 passing, and the 9 remaining failures are present on clean
origin/main too (contrastLevel / renderPaletteTokens / glaze-interop). Typecheck
is unchanged at 29 errors, 12 of them in src/tokens — all pre-existing on main,
none in the files this touches.
… stale defaults

`Ocean`, `Forest` and `Ember` were authored on main, where `pastel` defaulted to
`false`, and their saturation seeds are tuned for the per-hue chroma ceiling.
Shipping the pastel palette silently restyled all three — 133 of 156 light-scheme
tokens move per preset — and flattened them against `Slate`, whose entire identity
is being the soft one. Pin the flag off so each preset states its own stance.

`Slate` keeps its explicit `pastel: true`, now redundant against the default but
kept so the four read as a set; its comment no longer claims pastel distinguishes
it from the shipped palette, only from the three siblings that pin it off.

`Cube` stays `{}` on purpose — it *is* the shipped palette and should follow the
default wherever the default goes.

The docs page had gone stale in the same commit that moved the default:

- the options table still advertised `saturation: 80` and `pastel: false`;
- the "pastel is a redesign, not a filter" caveat warned about opting *in* with
  seeds tuned for non-pastel, which is now exactly backwards — `pastel: false` is
  the departure, and the re-tuning warning applies in whichever direction you flip;
- `themes.code.saturation` is still 80, but that is now its own constant rather
  than a value shared with the app seed, which is what keeps syntax colors put.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant