fix(color): adopt ui 0.5.0 semantic tokens, fold accents to Mind Green

package.json

@@ -31,7 +31,7 @@
     "@inrupt/solid-client-authn-browser": "^4.0.0",
     "@inrupt/solid-client-authn-node": "^3.1.0",
     "@mind-studio/core": "^0.7.0",
-    "@mind-studio/ui": "^0.4.0",
+    "@mind-studio/ui": "^0.5.0",
     "@tauri-apps/api": "^2.11.0",
     "lucide-react": "^0.460.0",
     "next": "16.2.6",

src/app/settings/page.tsx

@@ -128,7 +128,7 @@
                         }}
                       >
                         <input
                           autoFocus
                           value={draftName}
                           onChange={(e) => setDraftName(e.target.value)}
                           onKeyDown={(e) => e.key === "Escape" && setEditingName(false)}
@@ -166,7 +166,7 @@
                         </Button>
                       </span>
                     )}
-                    {nameError && <p className="mt-1 text-xs text-red-400">{nameError}</p>}
+                    {nameError && <p className="mt-1 text-xs text-destructive">{nameError}</p>}
                   </dd>
                 </div>
                 <div>

src/app/widget/decks/page.tsx

@@ -19,7 +19,7 @@
 type Phase = "connecting" | "ready" | "error";
 type Deck = { id: string; title: string; updatedAt: string };
 
-const ACCENT = "#14b8a6"; // slides teal (mirrors the tile header accent)
+const ACCENT = "#16b88a"; // Mind Green brand accent (mirrors the tile header)
 
 export default function DecksWidget() {
   const [phase, setPhase] = useState<Phase>("connecting");
@@ -30,7 +30,7 @@
   const clientRef = useRef<WidgetClient | null>(null);
 
   const load = useCallback(async (client: WidgetClient) => {
     let entries;
     try {
       entries = await client.readdir("");
     } catch {
@@ -89,7 +89,7 @@
     };
   }, [load]);
 
   useEffect(() => {
     const el = rootRef.current;
     const client = clientRef.current;
     if (!el || !client || phase !== "ready") return;

src/app/widget/people/page.tsx

@@ -17,7 +17,7 @@
 type Phase = "connecting" | "ready" | "error";
 type Person = { name: string; fn: string };
 
-const ACCENT = "#ec4899"; // contacts pink (mirrors the tile header accent)
+const ACCENT = "#16b88a"; // Mind Green brand accent (mirrors the tile header)
 
 /** Pull `vcard:fn`, tolerating both the prefix and full-IRI forms. */
 function vcardFn(ttl: string): string | undefined {
@@ -42,7 +42,7 @@
   const clientRef = useRef<WidgetClient | null>(null);
 
   const load = useCallback(async (client: WidgetClient) => {
     let entries;
     try {
       entries = await client.readdir("");
     } catch {
@@ -91,7 +91,7 @@
     };
   }, [load]);
 
   useEffect(() => {
     const el = rootRef.current;
     const client = clientRef.current;
     if (!el || !client || phase !== "ready") return;

src/app/widget/quick-note/page.tsx

@@ -53,7 +53,7 @@
   // need server mtimes (not on the bridge yet) — name sort is a good-enough proxy
   // that keeps freshly-added notes on top.
   const loadNotes = useCallback(async (client: WidgetClient) => {
     let entries;
     try {
       entries = await client.readdir("");
     } catch {
@@ -149,7 +149,7 @@
   const border = dark ? "#27272a" : "#e5e7eb";
   const fieldBg = dark ? "#18181b" : "#f9fafb";
   const hoverBg = dark ? "#1f1f23" : "#f3f4f6";
-  const accent = "#6366f1";
+  const accent = "#16b88a";
 
   return (
     <div

src/app/widget/up-next/page.tsx

@@ -17,7 +17,7 @@ import type { BridgeTheme } from "@/lib/shell/bridge-protocol";
 type Phase = "connecting" | "ready" | "error";
 type Event = { name: string; title: string; start: Date | null };
 
-const ACCENT = "#f97316"; // calendar orange (mirrors the tile header accent)
+const ACCENT = "#16b88a"; // Mind Green brand accent (mirrors the tile header)
 
 /** Pull a schema.org literal, tolerating both `schema:pred` and full-IRI forms. */
 function schemaLit(ttl: string, pred: string): string | undefined {

src/app/widget/vault-glance/page.tsx

@@ -16,7 +16,7 @@ import type { BridgeTheme } from "@/lib/shell/bridge-protocol";
 
 type Phase = "connecting" | "ready" | "error";
 
-const ACCENT = "#f59e0b"; // vault amber (mirrors the tile header accent)
+const ACCENT = "#16b88a"; // Mind Green brand accent (mirrors the tile header)
 
 export default function VaultGlanceWidget() {
   const [phase, setPhase] = useState<Phase>("connecting");

src/app/widget/wallet-balance/page.tsx

@@ -26,7 +26,7 @@ type Snapshot = {
   syncedAt: string;
 };
 
-const ACCENT = "#f59e0b"; // wallet amber (mirrors the 💰 tile header)
+const ACCENT = "#16b88a"; // Mind Green brand accent (mirrors the tile header)
 const GREEN = "#10b981";
 
 const KIND_GLYPH: Record<string, string> = {

src/apps/identity/index.tsx

@@ -238,7 +238,7 @@
     const blob = exportBlob();
     if (!blob || !workspacePod) return;
     try {
       const base = workspacePod.endsWith("/") ? workspacePod : workspacePod + "/";
       await ensureContainerChain(`${base}apps/shell/`, workspacePod);
       await writeFileText(walletBackupUrl(workspacePod), blob, "application/json");
       setBackupMsg("Encrypted backup written to your pod.");
@@ -419,7 +419,7 @@
           {busy === "verify" ? "Verifying…" : "Verify control"}
         </Button>
         {verdict === "ok" && (
-          <span data-testid="verdict-ok" className="text-sm font-medium text-emerald-500">
+          <span data-testid="verdict-ok" className="text-sm font-medium text-success">
             ✓ verified
           </span>
         )}
@@ -557,7 +557,7 @@
       // controls (authed-only) instead.
       let authed = Boolean(webId);
       if (!authed) {
         const root = passport.server.endsWith("/") ? passport.server : passport.server + "/";
         const res = await fetch(`${root}.account/`, {
           headers: { Authorization: `CSS-Account-Token ${token}`, Accept: "application/json" },
         });
@@ -611,7 +611,7 @@
               </span>
             )}
             {passport.bound && (
-              <span className="ml-2 rounded bg-emerald-500/15 px-1.5 py-0.5 text-[10px] font-medium text-emerald-500">
+              <span className="ml-2 rounded bg-success/15 px-1.5 py-0.5 text-[10px] font-medium text-success">
                 bound
               </span>
             )}
@@ -629,7 +629,7 @@
           </p>
           <p className="break-all font-mono text-[11px] text-muted-foreground">{podRoot}</p>
         </div>
-        {verdict === "ok" && <span className="text-sm text-emerald-500">✓</span>}
+        {verdict === "ok" && <span className="text-sm text-success">✓</span>}
         {verdict === "fail" && <span className="text-sm text-destructive">✗</span>}
       </div>
       {isActive ? (
@@ -699,7 +699,7 @@
                 {busy === "did" ? "Signing challenge…" : "Log in with DID"}
               </Button>
               {didVerdict === "ok" && (
-                <span className="text-sm font-medium text-emerald-500">✓ signed in</span>
+                <span className="text-sm font-medium text-success">✓ signed in</span>
               )}
               {didVerdict === "fail" && (
                 <span className="text-sm font-medium text-destructive">✗ failed</span>
@@ -709,7 +709,7 @@
               <p
                 className={`mt-2 text-[11px] ${
                   didVerdict === "ok"
-                    ? "text-emerald-500"
+                    ? "text-success"
                     : didVerdict === "fail"
                       ? "text-destructive"
                       : "text-muted-foreground"
@@ -831,12 +831,12 @@
                 <p className="mt-1 text-[11px] text-muted-foreground">Checking DID support…</p>
               )}
               {serverDid === "yes" && (
-                <p className="mt-1 text-[11px] text-emerald-500">
+                <p className="mt-1 text-[11px] text-success">
                   ✓ Supports DID login — your master DID will be linked automatically.
                 </p>
               )}
               {serverDid === "no" && (
-                <p className="mt-1 text-[11px] text-amber-500">
+                <p className="mt-1 text-[11px] text-warning">
                   Stock CSS — no DID login here. The passport still works via its stored key
                   (password-less switch).
                 </p>

src/apps/vault/ItemDetail.tsx

@@ -157,7 +157,7 @@ export function ItemDetail({
               {breach.status === "checking" ? "Checking…" : "Check breaches"}
             </Button>
             {breach.status === "safe" && (
-              <span className="ml-2 text-sm text-emerald-500">Not found in known breaches.</span>
+              <span className="ml-2 text-sm text-success">Not found in known breaches.</span>
             )}
             {breach.status === "pwned" && (
               <span className="ml-2 text-sm text-destructive">

src/apps/vault/ProviderAccounts.tsx

@@ -261,12 +261,12 @@ function AccountRow({ account }: { account: ProviderAccount }) {
       <div className="flex items-center gap-2">
         <span className="truncate text-sm font-medium">{account.label}</span>
         {account.didLinked && (
-          <span className="rounded bg-emerald-500/15 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-emerald-500">
+          <span className="rounded bg-success/15 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-success">
             DID
           </span>
         )}
         {account.pending && (
-          <span className="rounded bg-amber-500/15 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-amber-500">
+          <span className="rounded bg-warning/15 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-warning">
             Pending
           </span>
         )}
@@ -288,7 +288,7 @@ function AccountRow({ account }: { account: ProviderAccount }) {
       <p className="mt-0.5 text-xs text-muted-foreground">{entry.reason}</p>
 
       {account.pending && (
-        <div className="mt-2 flex items-center gap-2 rounded-md bg-amber-500/10 px-2 py-1.5 text-xs text-amber-600 dark:text-amber-400">
+        <div className="mt-2 flex items-center gap-2 rounded-md bg-warning/10 px-2 py-1.5 text-xs text-warning">
           <span className="min-w-0 flex-1">
             Confirm this email at the provider, then mark it verified to re-enable automatic
             sign-in.

src/apps/wallet/index.tsx

@@ -15,7 +15,7 @@
  * Never logged: amounts, memos, transfer bodies (rule #5).
  *
  * Design language: "the ledger as a signed artifact" — tabular numerals, an
- * amber unit accent, transactions as a hash-chain timeline, and a Send review
+ * green unit accent, transactions as a hash-chain timeline, and a Send review
  * framed as the canonical document about to be signed.
  */
 
@@ -42,7 +42,9 @@ import {
 
 // ---- presentation helpers ----------------------------------------------------
 
-const AMBER = "#f59e0b";
+// Wallet's balance accent — Mind Green (the single brand accent) via the token,
+// not a raw gold hex. Positive/negative gain colors below stay semantic.
+const ACCENT = "var(--primary)";
 
 const KIND_META: Record<
   string,
@@ -244,13 +246,13 @@ function WalletView({
   return (
     <div className="relative h-full overflow-y-auto">
       <WalletStyles />
-      {/* atmosphere: a faint amber bloom behind the balance, vignetting to the surface */}
+      {/* atmosphere: a faint green bloom behind the balance, vignetting to the surface */}
       <div
         aria-hidden
         className="pointer-events-none absolute inset-x-0 top-0 h-72"
         style={{
           background:
-            "radial-gradient(60% 100% at 35% 0%, rgba(245,158,11,0.10), rgba(245,158,11,0.03) 45%, transparent 75%)",
+            "radial-gradient(60% 100% at 35% 0%, rgba(22,184,138,0.10), rgba(22,184,138,0.03) 45%, transparent 75%)",
         }}
       />
       <div className="relative mx-auto max-w-3xl space-y-8 p-6 pb-16">
@@ -292,11 +294,11 @@ function BalanceHeader({
       <div className="flex flex-wrap items-end justify-between gap-4">
         <div>
           <p className="font-mono text-[11px] uppercase tracking-[0.22em] text-muted-foreground">
-            <span style={{ color: AMBER }}>●</span> Balance
+            <span style={{ color: ACCENT }}>●</span> Balance
           </p>
           <p className="mt-1 text-6xl font-semibold tracking-tight tabular-nums">
             {fmt.format(shown)}
-            <span className="ml-3 align-baseline text-xl font-medium" style={{ color: AMBER }}>
+            <span className="ml-3 align-baseline text-xl font-medium" style={{ color: ACCENT }}>
               {view.unit}
             </span>
           </p>
@@ -308,7 +310,7 @@ function BalanceHeader({
 
       {(earned > 0 || spent > 0) && (
         <div className="flex gap-2 font-mono text-[11px] text-muted-foreground">
-          <span className="rounded-full border border-emerald-500/20 bg-emerald-500/10 px-2.5 py-0.5 text-emerald-400 tabular-nums">
+          <span className="rounded-full border border-success/20 bg-success/10 px-2.5 py-0.5 text-success tabular-nums">
             ↓ {fmt.format(earned)} in
           </span>
           <span className="rounded-full border border-border bg-muted/40 px-2.5 py-0.5 tabular-nums">
@@ -380,9 +382,9 @@ function TxRow({ entry, unit, index }: { entry: LedgerEntry; unit: string; index
   const meta = kindMeta(entry.kind, entry.amount);
   const node =
     meta.tone === "credit"
-      ? "border-emerald-500/40 bg-emerald-500/15 text-emerald-400"
+      ? "border-success/40 bg-success/15 text-success"
       : meta.tone === "meter"
-        ? "border-amber-500/40 bg-amber-500/15 text-amber-400"
+        ? "border-warning/40 bg-warning/15 text-warning"
         : "border-border bg-muted text-muted-foreground";
   return (
     <li
@@ -411,9 +413,7 @@ function TxRow({ entry, unit, index }: { entry: LedgerEntry; unit: string; index
         </p>
       </div>
       <div className="shrink-0 text-right">
-        <p
-          className={`text-sm font-medium tabular-nums ${meta.positive ? "text-emerald-400" : ""}`}
-        >
+        <p className={`text-sm font-medium tabular-nums ${meta.positive ? "text-success" : ""}`}>
           {entry.amount > 0 ? "+" : ""}
           {fmt.format(entry.amount)}{" "}
           <span className="text-xs font-normal text-muted-foreground">{unit}</span>
@@ -591,15 +591,15 @@ function SendPanel({
         <h2 className="font-mono text-[11px] uppercase tracking-[0.22em] text-muted-foreground">
           Send {view.unit}
         </h2>
-        <span className="rounded-full border border-amber-500/25 bg-amber-500/10 px-2.5 py-0.5 font-mono text-[10px] uppercase tracking-wider text-amber-400">
+        <span className="rounded-full border border-warning/25 bg-warning/10 px-2.5 py-0.5 font-mono text-[10px] uppercase tracking-wider text-warning">
           feeless
         </span>
       </div>
 
       {phase.p === "review" ? (
         <div className="space-y-4">
           {/* the document about to be signed */}
-          <div className="rounded-lg border border-dashed border-amber-500/30 bg-background/60 p-4">
+          <div className="rounded-lg border border-dashed border-warning/30 bg-background/60 p-4">
             <dl className="space-y-1.5 text-sm">
               {phase.toName && <Row k="To" v={phase.toName} />}
               <Row k={phase.toName ? "WebID" : "To"} v={phase.to} mono />
@@ -666,7 +666,7 @@ function SendPanel({
           </div>
 
           {phase.p === "sent" && (
-            <p className="text-sm text-emerald-400">
+            <p className="text-sm text-success">
               Sent ✓ — recorded at <span className="font-mono">#{phase.seq}</span>.
             </p>
           )}

src/components/PrototypeWarning.tsx

@@ -11,14 +11,14 @@ export function PrototypeWarning({ className = "" }: { className?: string }) {
     <div
       role="alert"
       data-testid="prototype-warning"
-      className={`flex items-start gap-3 rounded-xl border border-amber-500/50 bg-amber-500/10 px-4 py-3 text-amber-700 dark:text-amber-200 ${className}`}
+      className={`flex items-start gap-3 rounded-xl border border-warning/50 bg-warning/10 px-4 py-3 text-warning ${className}`}
     >
       <span aria-hidden className="text-lg leading-none">
         ⚠️
       </span>
       <div className="text-sm">
         <p className="font-semibold">Prototype — don’t use real passwords.</p>
-        <p className="mt-0.5 text-amber-800 dark:text-amber-200/80">
+        <p className="mt-0.5 text-warning">
           This Vault is an unaudited preview. Use throwaway, made-up secrets only — never your real
           accounts.
         </p>

src/components/WalletOnboarding.tsx

@@ -150,7 +150,7 @@
       }
       // Persist the issuer the passport actually lives on so every storedIssuer()
       // consumer (workspace provisioning, DID probe, next sign-in) targets it.
       rememberIssuer(passport.server.endsWith("/") ? passport.server : passport.server + "/");
       router.replace("/shell"); // SPA nav keeps the in-memory passport session
     } catch (e) {
       setError(e instanceof Error ? e.message : "Could not create your identity.");
@@ -300,7 +300,7 @@
         )}
 
         {status === "locked" && (
-          <p className="rounded-md border border-amber-500/50 bg-amber-500/10 p-2 text-[11px] leading-snug text-amber-700 dark:text-amber-200">
+          <p className="rounded-md border border-warning/50 bg-warning/10 p-2 text-[11px] leading-snug text-warning">
             This device already holds an identity wallet (one per device for now). Your master
             password must match it — this form finishes its setup or resumes it, rather than
             starting over.

src/components/shell/WidgetTile.tsx

@@ -39,22 +39,12 @@
 const MIN_HEIGHT = 96;
 
 /**
- * Per-app accent (the "refined" Home look): a soft, app-identifying tint on each
- * tile's header. Keyed by the OWNING app's key; falls back to the Mind indigo.
- * Pure chrome — it never reaches the sandboxed widget body.
+ * Tile header accent — a soft tint on each widget tile's header. Mind Green is
+ * the single brand accent across the fleet, so every tile uses `--primary`
+ * (was a per-app raw-hex palette map). Pure chrome — it never reaches the
+ * sandboxed widget body. Alpha tints come from `color-mix`, not hex suffixes.
  */
-const APP_ACCENTS: Record<string, string> = {
-  drive: "#3b82f6",
-  notes: "#6366f1",
-  contacts: "#ec4899",
-  calendar: "#f97316",
-  photos: "#8b5cf6",
-  vault: "#f59e0b",
-  slides: "#14b8a6",
-};
-function accentFor(key: string): string {
-  return APP_ACCENTS[key] ?? "#6366f1";
-}
+const ACCENT = "var(--primary)";
 
 export function WidgetTile({
   app,
@@ -83,14 +73,14 @@
     if (!workspacePod) return undefined;
     let base: string;
     if (widget.podPath) {
       const root = workspacePod.endsWith("/") ? workspacePod : workspacePod + "/";
       const p = widget.podPath.replace(/^\/+/, "");
       base = `${root}${p.endsWith("/") ? p : p + "/"}`;
     } else {
       base = appZone(workspacePod, app.key, project);
     }
     const sub = widget.scope.replace(/^\/+/, "");
     return sub ? `${base}${sub.endsWith("/") ? sub : sub + "/"}` : base;
   }, [workspacePod, app.key, project, widget.scope, widget.podPath]);
 
   // A synthetic HostedApp so IframeHost loads the WIDGET's url/trust (distinct
@@ -111,7 +101,7 @@
 
   const cap = maxHeight(widget.maxSize ?? size);
   const bodyHeight = Math.max(MIN_HEIGHT, Math.min(height ?? defaultHeight(size), cap));
-  const accent = accentFor(app.key);
+  const accent = ACCENT;
 
   return (
     <section
@@ -120,12 +110,14 @@
     >
       <header
         className="flex items-center gap-2 border-b border-[color:var(--border)] px-3 py-2"
-        style={{ background: `linear-gradient(90deg, ${accent}1f, transparent 72%)` }}
+        style={{
+          background: `linear-gradient(90deg, color-mix(in oklch, ${accent} 12%, transparent), transparent 72%)`,
+        }}
       >
         <span
           aria-hidden
           className="grid size-6 shrink-0 place-items-center rounded-md text-sm leading-none"
-          style={{ background: `${accent}26`, color: accent }}
+          style={{ background: `color-mix(in oklch, ${accent} 15%, transparent)`, color: accent }}
         >
           {widget.icon}
         </span>

src/components/shell/WorkspaceRail.tsx

@@ -305,7 +305,7 @@ function CreateWorkspaceForm({ onDone }: { onDone: () => void }) {
           aria-describedby={error ? "ws-create-error" : undefined}
         />
         {canCreate === false ? (
-          <p className="rounded-md border border-amber-500/50 bg-amber-500/10 p-2 text-xs leading-snug text-amber-700 dark:text-amber-200">
+          <p className="rounded-md border border-warning/50 bg-warning/10 p-2 text-xs leading-snug text-warning">
             This server can&rsquo;t create extra pods — it makes one pod per identity, at sign-in.
             Use &ldquo;Join existing&rdquo; to add a pod you already have access to, or choose a
             different server below.
@@ -414,7 +414,7 @@ function CreateWorkspaceForm({ onDone }: { onDone: () => void }) {
           {crossIssuer && canCreate !== false && (
             <p
               data-testid="ws-cross-issuer-warning"
-              className="rounded-md border border-amber-500/50 bg-amber-500/10 p-2 text-xs leading-snug text-amber-700 dark:text-amber-200"
+              className="rounded-md border border-warning/50 bg-warning/10 p-2 text-xs leading-snug text-warning"
             >
               Heads-up: your sign-in lives on a different server, so this workspace will look empty
               here — its pod only answers a session from its own server. Its login is saved to your