Stylelint coverage for Lit + Vue; retire raw hex from web components#13110
Closed
lokesh wants to merge 2 commits into
Closed
Stylelint coverage for Lit + Vue; retire raw hex from web components#13110lokesh wants to merge 2 commits into
lokesh wants to merge 2 commits into
Conversation
…ted aliases - Rewrite static/css/tokens/colors.css into three tiers: primitive ramps (warm neutrals, blue, red/green/amber), semantic tokens (--color-*, the dark-mode seam), and deprecated aliases that re-point every legacy token name so all ~2,100 existing var() consumers shift to the new palette with zero edits. - Brand blues are bit-identical (--blue-500/600 == --primary-blue/--link-blue). - Add tests/unit/js/token-contrast.test.js asserting the WCAG AA contrast matrix over the semantic tokens (runs in npm test). - Add bundlesize budgets for tokens.css (6KB) and ol-components.css (8KB). - Update docs/ai/design.md token documentation (fix nonexistent tokens/typography.css reference). - Remove --beige-bright (zero consumers).
- stylelint now parses Lit components (customSyntax: postcss-lit, full rule set) and ObservationForm Vue SFCs (postcss-html; color-no-hex / color-named to start - LibraryExplorer/MergeUI join once their ~120 legacy literals are cleaned). lint:css globs extended; devDeps postcss-lit + postcss-html added. - Replace every raw hex in the Lit layer with tokens (they inherit through the shadow boundary): OlCarousel arrow/indicator fallbacks -> --color-text/--color-surface/--neutral-300 (@cssprop docs updated, manifest regenerated via cem analyze); OlPagination text/hover/ disabled -> semantic tokens; OLChip + OlToggle internal slots -> --color-text/-muted/--color-primary; OpenLibraryOTP dialog/input/ button -> semantic tokens, IA-purple #4b4bdf fallbacks -> --color-primary, and the ia-otp-form custom-property API now fed --color-success-fg/--color-error-fg/--color-link values. - Auto-fixable cleanups the new coverage surfaced: monospace -> var(--font-family-mono) in OLMarkdownEditor, z-index literals -> --z-index-level-* (relative order preserved), margin-block/inset shorthands, rule-order fixes. - ObservationForm: OLChip.vue Material-blue chip -> --color-primary/ --color-primary-subtle; CardHeader/ValueCard internetarchive#999 borders -> --color-border; CategorySelector #505050 -> --color-text-secondary; SavedTags 'red' -> --color-error-fg. Verified: /developers/design demos - pagination, chip, and carousel color slots all resolve to token values in the shadow DOM.
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
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.
Stylelint coverage for Lit + Vue; retire raw hex from web components
Final PR of the visual modernization series. Stacked on #13102 only (the color tokens) — independent of the page-by-page PRs (#13103–#13109) and can land in parallel with them.
What changes
1. Enforcement — stylelint previously saw only
.cssfiles, so the Lit CSS-in-JS layer (26 raw hex) and Vue SFCs drifted unchecked:openlibrary/components/lit/*.js) are linted withcustomSyntax: postcss-litunder the full rule set.color-no-hex/color-namedviapostcss-html, scoped toObservationForm/**(now clean). LibraryExplorer/MergeUI/BulkSearch carry ~120 pre-existing literals and are explicitly out of redesign scope — their glob joins the override once cleaned, ratchet-style.postcss-lit,postcss-html(compatible with stylelint 16).lint:css/lint-fix:cssglobs extended.2. Lit hex retirement (tokens inherit through the shadow boundary, so fallbacks are unnecessary):
OlCarouselarrow/indicator fallbacks →--color-text/--color-surface/--neutral-300;@csspropJSDoc updated andcustom-elements.jsonregenerated (npx cem analyze).OlPaginationtext/hover/disabled → semantic tokens;OLChip/OlToggleinternal slots →--color-text/-muted/--color-primary.OpenLibraryOTP: dialog/input/button → semantic tokens; the IA-purple#4b4bdffallbacks →--color-primary. The--color-success/--color-danger/--link-colorproperties set onia-otp-formare that component's own API — names kept, now fed--color-success-fg/--color-error-fg/--color-link.monospace→var(--font-family-mono)(OLMarkdownEditor), z-index literals →--z-index-level-*(relative order preserved), longhand→shorthand fixes, rule reordering.3.
OLChip.vue(ObservationForm): the duplicate Material-blue chip (#1976d2/#f6fafe) →--color-primary/--color-primary-subtle;#999→--color-border;#e6e6e6→--neutral-200. (Full<ol-chip>replacement stays out of scope.)Verified
npm run lint(JS + extended CSS globs) clean;npx jest495/495./developers/designcomponent demos: pagination text, chip fg/bg, and carousel--_arrow-color/--_indicator-colorslots all resolve to token values inside the shadow DOM (verified viagetComputedStyleagainst the running dev site).🤖 Generated with Claude Code