Refactor typography and settings with new token structure - #66
Merged
Conversation
Formatting only, no rule changes: selector lists split one per line, quote style, and light-dark() wrapping, so the token commits that follow stay reviewable. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
New interface tokens --heading-spacing (h1-h3), --heading-spacing-sm (h4, and the condensed margin when a subheading follows directly), and --heading-spacing-xs (h5-h6). Same defaults as before; a theme can now retune heading rhythm from :root instead of overriding element rules. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Completes the link token family (--link-color and --link-color-hover already existed); same --semi-bold default. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
New tokens: --blockquote-padding-block, --blockquote-padding-inline, --blockquote-background-color, --blockquote-border-radius, --blockquote-accent-width, --blockquote-accent-color. Same defaults. The accent bar now uses the background shorthand so a theme can set either a flat color or a gradient, and the bar's start radii follow --blockquote-border-radius. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The base code/var/kbd color (what shows inside headings and pre, where the --text-code-color chip styling doesn't apply) was a hardcoded light-dark(). Same default. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Raw 0.9rem value, kept as-is: it sits between --text-sm and --text-md and no scale token matches (same precedent as --toggle-width). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The old --content was declared on the element, so a theme's :root
override could never reach it; only an hr { } rule could. Renamed to
grammar and moved to settings.ui.css. Also swaps the hardcoded 1px
border width for --border-sm.
BREAKING: hr { --content: ... } overrides no longer apply; set
--hr-content instead (at :root or on hr).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>New --ins-color and --ins-background-color (the background now goes through --success-200 instead of the raw --yes-200 scale, per the semantic-alias convention). del's strikethrough color swaps --no-500 for --danger-500; same computed values everywhere. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The hardcoded 1.5 is exactly --leading-lg, so the token routes through the existing scale. Joins --body-background-color as a body knob. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Completes the input family (height, padding, radius, invalid color already existed): the 1px solid --ui-border-color repeated on input, select, and textarea now goes through tokens. textarea also consumes --input-padding instead of hardcoding the same --xs3 value. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The gap between a label and the control that follows it was a raw --xs1. Same default. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
New --fieldset-padding, --fieldset-border-width, --fieldset-border-color, and --fieldset-border-radius; same defaults. The legend-replacement internals (margin, font size) stay hardcoded as structural details. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The knobs were declared on the element, where a theme's :root override
can never win. They move to settings.ui.css and get grammar-correct
names, with the state colors routed through the semantic aliases:
--meter-radius -> --meter-border-radius
--meter-color-track -> --meter-track-color
--meter-color-low -> --meter-low-color (--no-400 -> --danger-400)
--meter-color-med -> --meter-medium-color (--maybe-400 -> --warning-400)
--meter-color-high -> --meter-high-color (--yes-400 -> --success-400)
Same computed values. BREAKING: meter { } overrides of the old names no
longer apply; override the new names (at :root or on meter).
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>Same reason as meter: element-level declarations blocked :root theme
overrides. --progress-height, --progress-color, and
--progress-track-color keep their names; --progress-radius becomes
--progress-border-radius per grammar. Same defaults.
BREAKING: progress { } overrides of --progress-radius no longer apply;
use --progress-border-radius.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>The raw 24px equals --sm3, so the token references the scale. The
derived --split calc stays local to the element. BREAKING: select { }
overrides of the old --icon-size no longer apply; use
--select-icon-size.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>New --dialog-min-width, --dialog-max-width, --dialog-padding, --dialog-border-width, --dialog-border-color, --dialog-background-color, and --dialog-border-radius join the two existing backdrop tokens. Same defaults. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
New --details-padding, --details-spacing (gap between an open summary and its content), --details-border-width, --details-border-color, --details-background-color, --details-border-radius, and --details-icon-size (24px equals --sm3). Border and background defaults match dialog on purpose but stay independently overridable; the padding shorthand collapses the duplicated var(--sm1) var(--sm1). Same computed values. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
One token covers both caption positions (top or bottom). Also swaps iframe's hardcoded 1px border width for --border-sm; same values. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The 1px next to the existing --table-border-color was hardcoded in four places; caption's gap was a raw --xs3. Same defaults. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
--heading-spacing/-sm/-xs leaked which raw step each tier used and required memorizing the level-to-tier mapping. Now each level has its own token (--heading-spacing-h1 through -h6), matching the per-level --heading-1..6 size tokens, and the subheading-follows rule gets an honest name, --heading-spacing-condensed. The margin-bottom moved into the existing per-level font-size rules, replacing the three grouped margin rules; the condensed rule sits after them because it ties them on specificity and must win by source order. Same defaults as before. Note: the condensed value keeps its longstanding --sm2 (20px), which is larger than the 16px h1-h3 default despite the old comment saying smaller; flagged separately for a design decision. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
New --details-icon token holding the chevron data URL; a theme can swap it for any url(), data URL or file. The icon is now applied as a mask painted with currentColor instead of a background image: SVG in background-image can't resolve currentColor and always rendered black, which was near-invisible on the dark surface. Also scopes the marker transition to transform instead of the implicit all. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Same chevron as --details-icon by default but independently overridable, matching the dialog/details surface-token decision. The first layer of the mask composite consumes the token; the gradient layers that carve out the icon zone stay inline. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Heading typography: - Per-level line-height tokens with a size ramp: h1-h3 follow the --heading-line-height master (1.15), h4-h6 get --leading-md - Spacing defaults switch to em (0.4em, 0.3em consecutive) so the gap tracks each heading's own fluid size instead of drifting with it - --heading-spacing-condensed renamed --heading-spacing-consecutive - New --heading-letter-spacing (normal), consumed by the display-font rule; resolves the display-tracking TODO, whose dead placeholder tokens (--tracking-display-md/lg) are deleted - --heading-1..6 move from settings.tokens.css to settings.ui.css as --heading-font-size-h1..h6: they are role-named decisions consuming the display scale, not scale steps Division rules (settings.tokens.css vs settings.ui.css): - Placement is by name: named for what it IS (scales) in tokens.css, named for what it's FOR (decisions) in ui.css; value preference and the three legitimate raw-value cases documented in the ui.css header - Docs updated to match (tokens, themes, ai); the heading-size table moves from the tokens page to the elements page headings section - --toc-icon-size now var(--sm1); shadow-scale upward reference and deliberate raw values annotated; --baseline moves into its only consumer (help.devtools.css) Also: wrap widths drop the 200px minmax floor for 0 (blowout guard is the min's only job; caps are the decision), grid gap responsive values nest inside :root like the header block, and the figcaption/table caption comments follow their tokens. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The aspectRatio prop defaulted to golden and always rendered an inline style, which beat the :root token and any theme override, so --card-aspect-ratio was dead for Astro-rendered cards. The prop no longer has a default; unset, the token (and a theme) decides. Docs updated: prop default is now undefined with the token as fallback, and the plain-HTML example drops the inline style. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
✅ Deploy Preview for mcssdev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Uh oh!
There was an error while loading. Please reload this page.
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 freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
No description provided.