Skip to content

fix(ui): adopt the canonical fleet theme and hue set C - #1297

Merged
krisarmstrong merged 1 commit into
mainfrom
fix/ui-stem-7-canonical-theme
Sep 16, 2026
Merged

krisarmstrong merged 1 commit into
mainfrom
fix/ui-stem-7-canonical-theme

Conversation

@krisarmstrong

Copy link
Copy Markdown
Collaborator

Summary

ui/src/theme/msn-shared.css is now byte-identical to the canonical copy in
MustardSeedNetworks/.github (sha256 b073e5e15bab). The fleet
ci-conformance check 9 compares the two by hash and has been failing every
stem PR since .github#72 landed at 13:03:21Z — ci-conformance is in
ci-complete's needs: and CI Complete is required. stem's copy was
38eb15f3a815.

What the canonical file changes for stem: light --color-surface-border
#d9d2bd#8e7f52 (1.45:1 → 3.48:1 on base, WCAG 1.4.11 wants 3:1 for a UI
edge), the whole dark palette re-derived at hue 43–51° as the night version of
the warm-cream light theme instead of cold steel, and --color-brand-gold
replaced by the shared --color-accent-gold (same value, one fleet decision).
stem's own darker success green was already the fleet's value.

The anchor moves to the fleet's hue set C (owner 2026-09-15): #1565c0 light,
#2d81e1 dark, in ui/src/theme/product-stem.css, with the theme-color meta
and the favicon following it. --color-brand-accent tracks the anchor because
it is both the hover fill behind every primary button (components/ui/Button.tsx)
and a text colour (Sidebar, ghost/outline variants): light #10509b carries
white at 7.95:1 and reads 7.60:1 as text on the page; dark #5a9fea reads
6.53:1 on the page ground and 5.81:1 on cards.

Three sites keep muted text while only the surface changes on hover
(SettingsDrawer.tsx:259,274, HelpDrawer.tsx:294). Under the canonical dark
palette that pair is #91896e on #312e25 = 3.88:1, down from 6.40:1
before this change, so they move to text-text-secondary (5.97:1). This is the
same finding run seed-20260916-1310 recorded on UI-SEED-7; UI-NIAC-9 and any
other adopter needs the same substitution
, and the token itself is worth a
.github follow-up — the canonical file's comments measure text-muted against
base (5.17) and raised (4.61) but never against surface-hover.

Not changed here: the six module accents keep their current dark values — their
colour-blind-safe re-cut is UI-STEM-10's row, not this one.

Linked Issue

Fixes #1263

Type of Change

  • Bug fix / chore (theme conformance; unblocks the repo's merge gate)

Risk

Low, and entirely visual. No Go, no API, no behaviour.

  • Every dark surface, text and status value changes at once; the light theme
    changes two tokens. Both were reviewed against the canonical file's measured
    comments and re-measured here for the pairs stem actually renders.
  • --color-text-accent takes the set C anchor as the row prescribes. Its dark
    value measures 4.09:1 on surface-raised, under AA — recorded rather than
    deviated from, and it has no consumer: rg 'text-text-accent' ui/src
    returns nothing (the token is defined in the @theme map only; the sidebar
    and buttons consume brand-accent).
  • The six favicon rasters were regenerated from the SVG by
    scripts/build-favicons.js, which installs sharp transiently; nothing was
    added to package.json or the lockfile (git status clean there).
    android-chrome-512x512.png grew 14239 → 20786 bytes — encoder output, not
    content.

Testing Evidence

RED/GREEN on the gate that is blocking the repo, using .github main's own
script (the version every caller actually runs — the reusable workflow's SHA pin
does not freeze it, support-plan D-GH-3):

$ python3 ../.github/scripts/check-ci-conformance.py ~/Developer/.../stem   # main
::error::ui/src/theme/msn-shared.css has drifted from the canonical theme
    expected: sha256 b073e5e15bab (MustardSeedNetworks/.github ui/theme/msn-shared.css)

$ python3 ../.github/scripts/check-ci-conformance.py <this branch> | grep -c msn-shared
0

$ shasum -a 256 ui/src/theme/msn-shared.css
b073e5e15bab6366794986f671266f49ccf816a897b2b3be366e18b6ce6ca4a8

Gates (golangci-lint reports v2.13.2, the pinned CI version):

$ golangci-lint version
golangci-lint has version 2.13.2 built with go1.27.0 from 27774aa

$ make lint-go
0 issues.

$ make lint-frontend
Checked 255 files in 2s. No fixes applied.

$ make fmt-check
✓ All formatting checks passed

$ make test
[1/2] Backend (Go)   32 packages, all ok
[2/2] Frontend       62 files, 561 tests passed
EXIT=0

$ govulncheck ./...
No vulnerabilities found.
EXIT=0

$ scripts/check-token-discipline.sh
OK: blocking color-token discipline is clean.        exit=0
$ scripts/check-file-size.sh                         exit=0
$ scripts/check-filename-policy.sh                   exit=0
$ scripts/check-banned-vocabulary.py                 exit=0
$ npm run test:coverage && scripts/check-ui-coverage.sh
OK: UI coverage is at or above every floor.          exit=0

Storybook accessibility in real Chromium (color-contrast is blocking here,
preview.tsx test: 'error'):

$ npm run test:storybook      # after the SettingsDrawer/HelpDrawer fix
 Test Files  39 passed (39)
      Tests  111 passed (111)
EXIT=0

Note that this gate was already green with the 3.88:1 pair present: stories
render on the a11y addon's own #ffffff/#1a1a2e backgrounds, not on
surface-hover. The three sites were found by grepping the class pairs and
measuring them, not by the gate.

Past the gates to the artifact, because a gate can pass on a definition the
bundler drops:

$ make ui && rg -o 'accent-gold:[^;]*|--color-brand-primary:#[0-9a-f]*' internal/api/ui/assets/*.css
accent-gold:#8a6208}.dark{--color-surface-base:#181611
accent-gold:#b88a1e}:root{--color-brand-primary:#1565c0

Security and Release Checklist

  • No new dependency, no lockfile change
  • No secret, credential or endpoint touched
  • No change to auth, CSRF, rate limiting or role gating
  • govulncheck ./... clean
  • No //nolint, no biome-ignore
  • No customer-facing AI or banned vocabulary

ui/src/theme/msn-shared.css is now byte-identical to the canonical copy in
MustardSeedNetworks/.github (sha256 b073e5e15bab). The fleet ci-conformance
check compares the two by hash and has been failing every stem PR since
.github#72 landed; stem's copy was 38eb15f3a815.

The canonical file darkens the light-mode surface-border from #d9d2bd (1.45:1
on the page, under WCAG 1.4.11's 3:1 for a UI edge) to #8e7f52, re-derives the
whole dark palette at hue 43-51 as the night version of the warm-cream light
theme, and owns the eyebrow gold as --color-accent-gold, so product-stem.css
drops brand-gold.

The anchor takes the fleet's hue set C (owner 2026-09-15): #1565c0 light,
#2d81e1 dark, with the theme-color meta and the favicon following it.
brand-accent tracks the anchor because it is both the hover fill behind every
primary button and a text colour: light #10509b carries white at 7.95:1, dark
#5a9fea reads 6.53:1 on the page ground.

Three sites keep muted text while only the surface changes on hover
(SettingsDrawer, HelpDrawer). Under the canonical dark palette that pair is
3.88:1, down from 6.40:1, so they move to text-secondary (5.97:1) -- the same
substitution seed made on UI-SEED-7. The Storybook a11y gate does not see it:
stories render on the addon's own backgrounds, not on surface-hover.

Fixes #1263
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

chore(theme): adopt the re-synced fleet theme

1 participant