Repository navigation
Conversation
Move tokens/tokens.json from the style guide and generate
src/themes/tokens.ts from it (`pnpm run tokens`, run before dev, build,
test and typecheck). Each token becomes a private alias on :host, e.g.
var(--ia-color-text-primary--), that a page can override by setting the
public --ia-* name. .ia-inverse re-points the aliases for dark surfaces.
themeStyles now includes the tokens and takes its defaults from them.
Every --ia-theme-* hook still overrides. Colors follow the style guide's
roles, so the link, secondary, danger, warning, success and danger
colors change.
Elements now assumes archive.org's 10px root (html { font-size: 62.5% }).
The theme defaults, ia-button and ia-otp-input move to that basis; the
components migrated from 10px-root pages already used it. The demo and
browser tests set the root, and demo and story rem values are scaled by
1.6 so the demo renders as before.
Port the style guide's contrast check as a node test over tokens.json.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #195 +/- ##
==========================================
+ Coverage 91.30% 91.31% +0.01%
==========================================
Files 235 235
Lines 7465 7465
Branches 1639 1639
==========================================
+ Hits 6816 6817 +1
- Misses 307 309 +2
+ Partials 342 339 -3 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
This was referenced Oct 21, 2026
This branch has not been deployed
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.
First of the phased PRs that move the style guide into elements. This one brings in the tokens and puts the components on them. The demo restyle and docs pages, and per-component adoption, follow separately.
Tokens.
tokens/tokens.jsoncomes from the style guide unchanged apart from its description.scripts/build-tokens.mtsgeneratessrc/themes/tokens.ts(gitignored, built likesrc/icons/, before dev, build, test and typecheck). Each token becomes a private alias on:host:--ia-color-text-primaryon:rootor any ancestor. Overriding a palette value carries through every role that points at it..ia-inverse, inside a shadow root or on the element, re-points text, border, focus, surface, hover and selected for dark surfaces.themeStyles includes the tokens and takes its defaults from them. Every
--ia-theme-*hook still wins. The five old palette names components read directly (--true-white,--mid-gray,--lighter-gray,--lightest-gray,--navy-blue) keep their values; the ten nothing reads are gone.Visible color changes, per the style guide's decisions:
#333fill, white text,#999border#2c2c2ctext,#666border#4b64ff#3a4fd6#d9534f/#d43f3a#e51c23/#b8161c#ee8950fill, white text#ffb000fill,#2c2c2ctext,#cc7a00border--color-success#31a481#20705a--color-danger#e51c23#b8161c--default-font-familysans-serif(D-02)10px root. Breaking for any consumer on a 16px root, so this ships as a major. Elements now assumes archive.org's
html { font-size: 62.5% }, as petabox and offshoot already have.theme-styles.ts. They now render at the intended size on archive.org: ia-button is 36px tall, not 22.5px.--ia-theme-button-height: 3remand so on) render as written.Tests
src/themes/tokens.node.test.tsports the style guide's contrast check: 99 recommended pairings against their WCAG minimum.src/themes/theme-styles.test.tscovers the defaults, page overrides, palette changes carrying through,--ia-theme-*priority,.ia-inverse, and the 36px button.Before release: install the prerelease in offshoot and collection-browser. Bookreader's root font size is unverified.
🤖 Generated with Claude Code