[pezvi]

Part of the phased move of the style guide into elements. Based on #199, which adds the text-inverse-tertiary token this uses; #199 is based on #195. Every visible change here was previewed and approved before it was written.

Focus rings on every stop

Most of the homepage's first keyboard stops had no focus indicator: 13 outline: none rules across the topnav's parts. That's the first item in the navigation spec's "What must change".

• All 13 rules are gone.
• Each part now includes one shared ring, focus-styles.ts: 2px, in the dark-surface focus color #9aa8ff.
• In the bar and in menu rows, the ring is drawn inside the edge so the bar doesn't clip it.
• ia-topnav-focus.test.ts focuses every rendered focusable part and fails if any shows no ring. On the old code, eleven failed, starting with the main menu button.

Spec colors (docs/components/navigation.md)

	Before	After
Labels, media glyphs, Sign Up / Log In / Upload, subnav links	#999 / #aaa	--ia-color-text-inverse-secondary #ccc
Open media type	#474747 with the pre-D-43 hues	#333, its --ia-color-mediatype-* hue (D-43)
Logo link	the browser's rgb(0,0,238)	--ia-color-text-inverse
Media menu column headings ("Featured", "Top")	white at weight 100, which renders as a faint hairline	the menu's group heading: 11px bold uppercase #ccc (5.79:1)
Wayback search field	#bca38e border, #8e8e8e placeholder	the input spec's #666 border and secondary text

The wide account menu is the dark panel (D-41)

• It was a white panel where hover turned a row white on #4b64ff.
• It's now the menu spec's dark panel: #2c2c2c, 4px radius, overlay shadow, white rows.
• Hover lays the overlay tint on the row instantly (D-54). The focus ring sits inside the row.
• Rows are at least 30px tall, and 44px on a coarse pointer.
• The narrow menu was already dark; its divider and info text now use the same tokens.

Tokens

The topnav's own palette now points at tokens:

Variables	Token
--white	text-inverse
--grey13, --grey20, --grey28	surface-chrome, surface-chrome-secondary, border-inverse
--grey60, --grey80, --greya0	text-inverse-tertiary, then text-inverse-secondary for the last two
--grey6f	legacy-gray-550
--errorYellow	action-warning-fill (#ffb000, 8.7:1 on #222)

Other changes:

• Role names kept: every camelCase role keeps its name, so a consumer styling <ia-topnav> with them still works.
• Link color: --linkColor now reads --ia-theme-link-color first; before, it was hard-coded and couldn't be themed.
• Font: --ia-font-family-base.
• Donate heart: --ia-color-brand-donate.
• Hamburger: draws in the glyph color instead of a hard-coded #999.

Not changed

• Sizes, the font-scaled --topnavUnit--, breakpoints and hit areas.
• Strings: the "Sign Up" casing gets its own PR, because it touches translations.
• The account menu's "callout" badge (#fee257) stays as it is; there's no token for it yet.
• The navigation.md "live component" notes. The docs aren't on this branch, so they'll be updated in a docs follow-up once WEBDEV-9043: Bring the style guide's pages and docs into the demo #196 is in.

Verification

• All 160 topnav tests pass. One color assertion changed: idle glyphs are #ccc.
• Lint, typecheck, all 2527 tests and the gh-pages build pass.
• Screenshots match the approved preview: the account menu, focus on the media buttons, and an open media type.

🤖 Generated with Claude Code

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://internetarchive.github.io/elements/pr/pr-200/
Built to branch ghpages at 2026-10-22 22:57 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 91.32%. Comparing base (5ab6485) to head (da4b344).

Additional details and impacted files

@@                  Coverage Diff                   @@
##           WEBDEV-9043-tokens-3b     #200   +/-   ##
======================================================
  Coverage                  91.31%   91.32%           
======================================================
  Files                        235      236    +1     
  Lines                       7465     7466    +1     
  Branches                    1639     1639           
======================================================
+ Hits                        6817     6818    +1     
  Misses                       309      309           
  Partials                     339      339           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.