From a7a4e4f4c14bfed6dc8d5f7a590a58de7fbf36a1 Mon Sep 17 00:00:00 2001
From: Maksim Burtsev <zadrot-lol@list.ru>
Date: Thu, 27 Aug 2026 22:45:33 +0400
Subject: [PATCH] fix(onboarding): use the success and warning tokens for
 status badges
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/components/Onboarding.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Onboarding.tsx b/src/components/Onboarding.tsx
index 7b754cabf..c96b040bf 100644
--- a/src/components/Onboarding.tsx
+++ b/src/components/Onboarding.tsx
@@ -34,7 +34,7 @@ function StatusRow({
     <div className="flex items-start gap-3 rounded-xl bg-card p-3.5">
       <span
         className={`mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full ${
-          ok ? "bg-[#00c97222] text-[#38d591]" : warn ? "bg-[#ff980022] text-[#ff9800]" : "bg-raised text-ink-secondary"
+          ok ? "bg-success/15 text-success" : warn ? "bg-warning/15 text-warning" : "bg-raised text-ink-secondary"
         }`}
       >
         {ok ? <Check size={14} /> : <AlertTriangle size={13} />}
@@ -298,7 +298,7 @@ export function Onboarding({ onDone }: { onDone: () => void }) {
                   </div>
                 </div>
                 {perms?.mic === "granted" ? (
-                  <Check size={16} className="shrink-0 text-[#38d591]" />
+                  <Check size={16} className="shrink-0 text-success" />
                 ) : perms?.mic === "denied" || perms?.mic === "restricted" ? (
                   <button
                     onClick={() => window.ogb?.permOpenSettings?.("mic")}