fix(styles): replace undefined --font-weight-* vars with SDS tokens

[CassioMG]

What

The SCSS in extension/src referenced var(--font-weight-light|regular|medium|semi-bold|bold) in 59 places. None of those custom properties are defined anywhere — not in extension/src, not in @stellar/design-system. Every one of those declarations has been silently doing nothing.

This swaps all of them for the real SDS tokens, plus one mistyped var(--sds-font-weight-medium) that was broken the same way. 60 replacements, 35 files, no other changes.

Why they're undefined

Tailwind v4 is loaded globally (popup/styles/vendor/tailwind.css → popup/index.tsx), and its theme.css does define --font-weight-medium: 500. But v4 prunes unused theme variables. Extracting the emitted :root, :host block from a fresh extension/build/index.min.js, the only font-weight variable that reaches the cascade is:

--font-weight-semibold: 600

…which is a different spelling from the --font-weight-semi-bold this repo uses.

The full Tailwind list does appear in the bundle, but only inside an @theme default { … } at-rule — a compile-time construct browsers discard as unknown. A naive grep of the build makes it look live, so this is worth knowing if you go verifying.

Since font-weight is inherited, each declaration was invalid at computed-value time → unset → inherited the parent's weight (usually 400).

Mapping

Replaced	With	Value	Sites
--font-weight-light	--sds-fw-light	300	5
--font-weight-regular	--sds-fw-regular	400	7
--font-weight-medium	--sds-fw-medium	500	44
--font-weight-semi-bold	--sds-fw-semi-bold	600	2
--font-weight-bold	--sds-fw-bold	700	1
--sds-font-weight-medium (typo)	--sds-fw-medium	500	1

⚠️ This is a visual change, not a refactor

Text at the medium / semi-bold / bold sites gets heavier — that's the fix landing, but it touches many screens and reviewers should expect a visible diff.

Two things worth a human eyeball:

1. The five light sites go the other direction — 400 → 300, i.e. thinner. All are large display numerals, so it's plausibly intended, but it's the least-expected part of this change:

   • components/send/styles.scss → __amount-label (2.5rem)
   • components/swap/SwapAmount/styles.scss → __amount-label, __amount-label-usd, __input-amount (2.5rem)
   • components/accountHistory/TransactionDetail/styles.scss → __header (2rem)

2. The 7 regular sites are true no-ops. Each was checked for an ancestor setting a heavier weight; none nest under one, so all were already inheriting 400 and now get an explicit 400.

swap/SwapAsset/SwapPickerSections/styles.scss deserves a note: it carries a comment saying SDS renders the Notification title semi-bold and this rule wants it regular. SDS does set that. But the broken override still won the cascade and became unset → 400, so the comment's intent was already being met by accident. No visual change there either.

Deliberately left alone

components/manageAssetsLists/DeleteModal/styles.scss:26 is the one remaining --font-weight- reference, and it's genuinely corrupt:

color: --font-weight-medium --font-weight-medium;

Not a var() usage, so this sweep correctly skipped it. git log -L shows it was color: var(--color-gray-70); until 3aec8c8c ("Release/5.20.0"), where a bad find-and-replace clobbered the value of a color property with two bare font-weight idents. It's invalid CSS, dropped at parse time, so .DeleteModal__body currently inherits its color. Left as-is because picking the right modern SDS gray is a design decision, not a mechanical one.

Related rot, out of scope for this PR: --color-white, --color-red-70, and --color-gray-70 are likewise undefined and still referenced in several files (ModalInfo, NetworkForm, accountMigration/basics). Same silent-failure class — worth a follow-up.

Testing

yarn test:ci
  Test Suites: 6 skipped, 197 passed, 197 of 203 total
  Tests:       51 skipped, 1525 passed, 1576 total

yarn build:extension
  webpack compiled in 23116 ms

Prettier clean across all 35 changed files. ESLint is wired through lint-staged for src/**/*.ts?(x) only, so it doesn't apply to a .scss-only diff.

Post-build check confirming the fix reaches the emitted stylesheets:

=== var(--sds-fw-*) in emitted CSS ===
  70 index.min.css:var(--sds-fw-medium)      16 638.min.css:var(--sds-fw-medium)
  14 index.min.css:var(--sds-fw-regular)      8 638.min.css:var(--sds-fw-regular)
   8 index.min.css:var(--sds-fw-semi-bold)    7 638.min.css:var(--sds-fw-semi-bold)
   5 index.min.css:var(--sds-fw-light)        2 638.min.css:var(--sds-fw-bold)
   1 index.min.css:var(--sds-fw-bold)

The only remaining --font-weight-* in the emitted CSS is the DeleteModal color: line above, as expected.

Not run: the Playwright E2E suite. Given this shifts type weight app-wide, any screenshot baselines should be checked before merge.

Draft because

Filed as a draft so the weight changes can be eyeballed on-device first — particularly the five light sites going thinner.

🤖 Generated with Claude Code

[github-actions]

PR Preview build is ready: https://github.com/stellar/freighter/releases/tag/untagged-95076905901e55bc9bcb (SDF collaborators only — install instructions in the release description)