fix(onboarding): use the success and warning tokens for status badges by Maksim-Burtsev · Pull Request #535 · milind-soni/OpenMausBot

Maksim-Burtsev · 2026-08-27T18:46:14Z

What changed

The onboarding status badges in src/components/Onboarding.tsx move from
hardcoded hex to the success and warning tokens: bg-success/15 text-success
and bg-warning/15 text-warning for the round badge in StatusRow, and
text-success for the microphone-granted tick.

Why

#38d591 and #ff9800 are not arbitrary colours — they are Midnight's own
--color-success and --color-warning, copied into the component. Every skin
redefines those tokens, and the two light skins deliberately darken them;
styles.css annotates the Atelier warning with /* darkened → 4.98:1 */.
Painting the literal bypasses exactly the re-tuning that annotation exists for,
so on Atelier and Lagoon the badges keep Midnight's bright green and orange on a
near-white card:

skin	ok badge	warn badge	mic tick
midnight	6.35:1	5.50:1	8.00:1
atelier	1.69:1	1.94:1	1.89:1
foundry	7.35:1	6.32:1	9.15:1
lagoon	1.69:1	1.94:1	1.89:1

1.69:1 is below the 3:1 floor for non-text graphics, not just below AA — the tick
is close to invisible against its own tint, which is visible in the screenshots.

bg-success/15 text-success is the pattern this same round status pill already
uses at ConnectorCard.tsx:103 and SecretRequestCard.tsx:114
(LocalComputerSection uses the /20 step for its step badge). /15 is the
nearest Tailwind step to the literal's own 0x22 alpha, so the dark skins keep
the appearance they have today — midnight and foundry are unchanged in the
screenshots below.

After the change every skin clears AA:

skin	ok badge	warn badge	mic tick
midnight	5.88:1	5.31:1	8.00:1
atelier	4.99:1	4.86:1	6.17:1
foundry	5.12:1	5.94:1	6.50:1
lagoon	5.07:1	5.10:1	6.29:1

Scope: after this change Onboarding.tsx has no colour literals left, and these
three were the last occurrences of #38d591 / #ff9800 / #00c972 anywhere in
src/.

Worth noting for context: electron/skin-overlay.test.mjs already guards the
native chrome table against exactly this class of drift, but it covers the
Electron colour table rather than the components, which is why these three
survived.

How it was verified

macOS 26.6, Node 26, pnpm dev + pnpm dev:server. The numbers are read out of
the running app, not computed by hand: a harness mounts the badges inside a
[data-skin] wrapper (the skin blocks are written so any element can open a skin
context for its subtree), extracts the class strings from Onboarding.tsx so it
cannot drift from what ships, then composites getComputedStyle colours over the
first opaque ancestor and measures. Same harness before and after; only the
component changed between runs.

pnpm typecheck                          # clean
pnpm test                               # 200 files, 2114 tests passed, 1 file / 18 skipped
node scripts/check-skin-contrast.mjs    # green
pnpm check:contrast                     # green, no new failures

No test is added: every test under src/ is a pure-logic test on exported
functions, with no DOM or layout harness in the repo, and CONTRIBUTING asks UI
changes for screenshots instead.

Screenshots (UI changes)

The three badges in all four skins — the ok badge, the warn badge, and the
bare mic tick.

Before — atelier and lagoon wash out; the ticks barely separate from their
own tint:

After — the light skins pick up their darkened tokens and read clearly;
midnight and foundry are unchanged:

_{Screenshots live on a separate branch of my fork so they stay out of this PR's diff.}

Checklist

pnpm typecheck and pnpm test pass locally
Server behavior changes come with tests — n/a, no server change; this is CSS only
No dist-server/ edits (it's build output)
macOS-only code is platform-gated; no shell: true / cmd.exe string-building — n/a
No secrets in logs, responses, events, or argv

Summary by CodeRabbit

Style
- Updated onboarding status indicators to use consistent semantic success and warning colors.
- Improved visual consistency for the microphone permission confirmation icon.

The onboarding status rows hardcode `#38d591` and `#ff9800`. Those are not arbitrary greens and oranges — they are Midnight's own `--color-success` and `--color-warning`. Every other skin redefines those tokens, and the two light skins deliberately darken them; styles.css even annotates the warning with `/* darkened -> 4.98:1 */`. Painting the literal bypasses exactly the re-tuning that annotation is about, so on Atelier and Lagoon the badges keep Midnight's bright colours over a near-white card: skin ok badge warn badge mic check midnight 6.35:1 5.50:1 8.00:1 atelier 1.69:1 1.94:1 1.89:1 foundry 7.35:1 6.32:1 9.15:1 lagoon 1.69:1 1.94:1 1.89:1 1.69:1 is under the 3:1 floor for non-text graphics, and the tick is close to invisible against its own tint. Use `bg-success/15 text-success` and `bg-warning/15 text-warning`, the pattern the same round status pill already uses in ConnectorCard and SecretRequestCard. `/15` is the nearest step to the literal's own `0x22` alpha, so the dark skins keep the look they have: after the change the four skins measure 4.99, 4.86, 5.12 and 5.07 at worst, and all twelve pairs clear AA. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

vercel · 2026-08-27T18:46:20Z

@Maksim-Burtsev is attempting to deploy a commit to the SupaMaus Team on Vercel.

A member of the Team first needs to authorize it.

coderabbitai · 2026-08-27T18:47:35Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 83ff263b-b862-4e8f-9a4e-efecb96f00aa

📥 Commits

Reviewing files that changed from the base of the PR and between ec7b487 and a7a4e4f.

📒 Files selected for processing (1)

src/components/Onboarding.tsx

Included review availability: Your plan provides up to 4 included reviews per hour; 3 remain after this review.

📝 Walkthrough

Walkthrough

The onboarding flow replaces hardcoded status colors with semantic success and warning design tokens. No logic or control flow changes.

Changes

Onboarding status colors

Layer / File(s)	Summary
Replace hardcoded status colors `src/components/Onboarding.tsx`	`StatusRow` uses `bg-success/15`, `text-success`, `bg-warning/15`, and `text-warning`. The microphone permission checkmark uses `text-success`.

Estimated code review effort: 1 (Trivial) | ~3 minutes

Merge Risk: ⚪ Minimal · up to a7a4e

This localized UI change replaces hardcoded onboarding badge colors with the existing success and warning tokens so skins render the intended accessible colors. No actionable merge-blocking risk remains after normal checks and review.

Suggested reviewers: milind-soni, aivsomkar, kesleydavid

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 1 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: replacing hardcoded onboarding badge colors with success and warning design tokens.
Description check	✅ Passed	The description includes all required sections, explains the change and reason, documents verification commands and environment, includes UI screenshots, and completes the checklist.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

milind-soni merged commit 743ce8e into milind-soni:main Aug 28, 2026
7 of 8 checks passed

Navigation Menu

fix(onboarding): use the success and warning tokens for status badges - #535

fix(onboarding): use the success and warning tokens for status badges#535
milind-soni merged 1 commit into
milind-soni:mainfrom
Maksim-Burtsev:fix/onboarding-status-skin-tokens

Maksim-Burtsev commented Aug 27, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented Aug 27, 2026

Uh oh!

coderabbitai Bot commented Aug 27, 2026 •

edited

Loading

Walkthrough

Changes

❌ Failed checks (1 warning)

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Maksim-Burtsev commented Aug 27, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What changed

Why

How it was verified

Screenshots (UI changes)

Checklist

Summary by CodeRabbit

Uh oh!

vercel Bot commented Aug 27, 2026

Uh oh!

coderabbitai Bot commented Aug 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

❌ Failed checks (1 warning)

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Maksim-Burtsev commented Aug 27, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Aug 27, 2026 •

edited

Loading