feat(tokens): theming-token refactor — radius scale + elevation + surface tokens#129
Open
developit wants to merge 2 commits into
Open
Conversation
First slice of the theming-token refactor. Introduces a numbered radius ramp so themes get one knob to shift all corners (`--k-radius`) plus the ability to re-pin any individual step (e.g. `--k-radius-1: 0`) — instead of every theme re-deriving the same `calc(var(--k-radius) ± Npx)` math. --k-radius-1 tightest (== old `- 4px` / `- 0.25rem`) --k-radius-2 tight (== old `- 2px` / `- 0.125rem`) --k-radius-3 default (== --k-radius) --k-radius-4 loose (== old `+ 0.25rem`) The ramp is expressed as offsets off --k-radius, so changing --k-radius still shifts the whole set (back-compatible). Base components that used the ad-hoc calc forms now reference the named steps; every substitution is computed-identical, so the default theme renders pixel-for-pixel the same (verified in-browser: steps resolve to 4/6/8/12px exactly as before). `var(--k-radius)` usages are left as-is — it remains the friendly single knob and is exactly step 3. Pill/circle literals (9999px, 50%) and intentional sharp corners (0) are not part of the linear ramp and are untouched. Scope: library only. claw is unchanged (its radii are deliberately bespoke per-component overrides). The theme-side dedup payoff lands with the shadow/font/hover tokens in the follow-up sweep.
…w dedup Second slice of the theming-token refactor — tokenizes the remaining duplicated / sync-risk values surfaced in the plan, and fixes a couple of latent claw bugs along the way. ## New tokens (defaults in @layer tokens) - Elevation: --k-shadow-1 (resting/card), --k-shadow-2 (floating: popover, dropdown, menus, hover-card, combobox), --k-shadow-3 (modal: dialog, sheet, drawer). Base components reference them; a theme retunes all elevated surfaces with three values. - --k-tab-indicator-bg, --k-avatar-font-size, --k-font-mono, --k-scrollbar-size/-thumb/-thumb-hover, --k-selection-bg. ## Normalized elevation (intentional default change) Previously dropdowns/menus carried the heaviest shadow (0 14px 30px) — heavier than modal dialogs (0 4px 12px). Now ordered logically: resting < floating < modal, so a dialog/sheet sits above a dropdown. Dropdowns and popovers are unified at the floating level. ## Base now owns the gnarly selectors (themes set values) - ::-webkit-scrollbar (already in base) reads --k-scrollbar-*. - ::selection added to base, brand-tinted via --k-selection-bg. - Avatar initials size flows through --k-avatar-font-size — the base ::after keeps the em-multiplier internally, so themes set a plain px value and the clipping footgun is gone by construction. - kbd + prose code share --k-font-mono. - Tab indicator bg (anchor ::before + @supports fallback) reads --k-tab-indicator-bg, so a theme recolours it without re-authoring the anchor-positioning machinery. Default theme renders identically except the deliberate elevation normalization (verified in-browser: token values resolve to the prior literals; shadow ordering is 1<2<3). ## claw - Sheds the now-redundant scrollbar, ::selection, avatar ::after, and per-surface box-shadow rules; sets the new tokens instead. - Fixes a latent bug: claw's overlay enumeration targeted non-existent k-names (dropdown-menu-content, context-menu-content, …) so its soft shadow + borderless 8px treatment never reached dropdowns/menus. Now routed through the real selectors + elevation tokens, so claw menus get the intended Claude-style surface. - Fixes dark mode: claw keyed off the .dark/.light class while base moved to the data-color-scheme attribute, so data-color-scheme="dark" yielded claw-light tokens. claw now uses the attribute model to match base.
developit
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Theming-token refactor, stacked on #126 (theme-system branch) for a clean diff; retarget to
mainonce #126 merges. Deploy preview: #130 (same branch → main).Tokenizes the duplicated / sync-risk values and base scales we agreed on, while leaving genuinely component-specific, single-site selector overrides alone (BYO-CSS stays first-class).
Commit 1 — radius scale
--k-radius-1..4as offsets off the--k-radiusanchor. One knob shifts the whole ramp; any step is individually re-pinnable. All 20 ad-hoccalc(var(--k-radius) ± Npx)forms migrated; computed-identical (4/6/8/12px).Commit 2 — elevation + surface tokens
--k-shadow-1/2/3(resting / floating / modal). Normalized: previously dropdowns carried a heavier shadow than modal dialogs — nowresting < floating < modal, dropdowns/popovers unified at the floating level. (Intentional default-appearance change, per your call.)::-webkit-scrollbar→--k-scrollbar-*,::selection→--k-selection-bg(base ships these for all consumers now), avatar initials →--k-avatar-font-size(em-trick stays internal → clipping footgun gone by construction), kbd + prose share--k-font-mono, tab indicator →--k-tab-indicator-bg(theme recolours without re-authoring the anchor::before/@supports).claw
::selection/ avatar-::after/ per-surface box-shadow rules; sets the tokens instead.k=names (dropdown-menu-content, …) so the soft shadow + borderless treatment never reached dropdowns/menus — now routed through real selectors + tokens; (2) dark mode keyed off the.darkclass while base moved todata-color-scheme, sodata-color-scheme="dark"gave claw light tokens — now uses the attribute model.Verified
Library + demo build, lint, tests pass. In-browser: default elevation ordering correct; claw avatars/inbox clean, dropdowns get the soft borderless surface, dark mode works via
data-color-scheme.Deliberately left as selectors (not smells)
Switch geometry, badge/chip padding, button weight, list gap, table cells, card padding, inline-code, checkbox/radio sizing. And
--k-font-sansskipped — the library intentionally inherits the host font.https://claude.ai/code/session_01V7eeBQGLaJDdycKo8yPttw