fix(ui): typography overrides replace defaults instead of appending#1417
Merged
fix(ui): typography overrides replace defaults instead of appending#1417
Conversation
Token props (color, size, weight, line, tracking, family, align, transform) now replace the matching default dimension at emit time instead of appending on top of a flat default string. Tailwind v4 orders utilities alphabetically in generated CSS, so cascade order could not be trusted: e.g. `text-accent` would lose to `text-foreground` (a < f), `text-4xl` would beat a smaller override like `text-2xl`, and `@lg:text-5xl` CQ defaults would survive a bare size override. Variant defaults in typography.classes.ts are now stored dimensionally and resolved via resolveTypography(variant, props), which merges non-null overrides into the defaults and emits utilities through a single DIM_TO_UTIL map. CQ variants are kept only when the matching dimension is not overridden. typographyClasses flat-string export is preserved (computed from the dimensional defaults) for back-compat with the few remaining consumers that do not take token props (li, codeblock, lists). All React + Astro typography components switched to resolveTypography. Missing align/transform destructures added to React variants for parity with Astro. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Scratch notes and prototype dumps belong outside version control and shouldn't gate pushes via biome. Matches the intent of the directory name. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- emitProps shared primitive used by both resolveTypography and tokenPropsToClasses, with a prefix parameter reused for CQ emit - resolveTypography reads overrides[key] ?? defaults[key] directly per dimension instead of pickDefined + object spread + delete - tokenPropsToClasses comment says what it's for (test helper) instead of narrating the previous change Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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
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.
Summary
Token props on typography (
color,size,weight,line,tracking,family,align,transform) now replace the matching default dimension at emit time instead of appending on top of a flat default string.Tailwind v4 orders utilities alphabetically in generated CSS, so the cascade cannot be trusted for overrides:
text-accentwould lose to defaulttext-foreground(a < f)text-2xloverride would lose to defaulttext-4xl@lg:text-5xlCQ defaults survived bare size overridesAudited the other 50+ UI components -- they're fine because they use map-lookup replacement patterns (
variantClasses[v],sizeClasses[s]) rather than flat-string append. Typography was the outlier because its props are free-form dimensions (not enum variants) and went throughtokenPropsToClasseswhich appended.Approach
typography.classes.ts: variant defaults stored dimensionally (size,weight,color,line,tracking,family,align,transform+ optionallayoutextras +cqresponsive overrides), resolved viaresolveTypography(variant, props).overrides[key] ?? defaults[key]per dimension and emits utilities through a singleDIM_TO_UTILmap -- one source of truth for the dimension-to-Tailwind mapping.emitPropsshared primitive handles both the base emit and the CQ-prefixed emit;tokenPropsToClassesis a one-line wrapper kept as a test-only entry point.size="2xl"correctly drops@lg:text-5xl).typographyClassesflat-string export preserved for consumers that don't take token props (List'sli, CodeBlock wrapper), computed from the dimensional defaults.resolveTypography. Missingalign/transformdestructures added to React variants for parity with Astro.classyunchanged..gitignorechore adds.scratch/so scratchwork doesn't gate pushes via biome.Test plan
pnpm --filter=@rafters/ui test typography-- 288 tests pass@rafters/uisuite -- 4907 pass, 6 pre-existing skips