From 50fd28e8e3ead2446495035f2383f1f3618a97f9 Mon Sep 17 00:00:00 2001 From: Sven Reiser Date: Sun, 21 Jun 2026 12:10:53 +0200 Subject: [PATCH] fix(color): adopt ui 0.5.0 semantic tokens, fold accents to Mind Green MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bumps @mind-studio/ui to ^0.5.0 and consumes its new semantic state tokens so the shell stops hand-picking raw palette colors: - success/warning/error states: emerald-*/amber-*/red-* palette classes → text-success / bg-warning/10 / text-destructive (the tokens adapt per mode, so the bespoke `dark:` variants are dropped). - Per-app identity accents fold to the single brand green: the WidgetTile header tint and wallet's balance accent already use var(--primary); the opaque-origin widget iframe bodies (which can't read CSS vars) move from per-app hex to the Mind Green literal #16b88a, matching their now-green tiles. Wallet's amber atmosphere bloom and doc comments follow. Categorical colors that aren't brand accents are left as-is (the wallet positive-delta GREEN, etc.). Typecheck + Biome clean. Co-Authored-By: Claude Opus 4.8 (1M context) --- package-lock.json | 8 +++---- package.json | 2 +- src/app/settings/page.tsx | 2 +- src/app/widget/decks/page.tsx | 2 +- src/app/widget/people/page.tsx | 2 +- src/app/widget/quick-note/page.tsx | 2 +- src/app/widget/up-next/page.tsx | 2 +- src/app/widget/vault-glance/page.tsx | 2 +- src/app/widget/wallet-balance/page.tsx | 2 +- src/apps/identity/index.tsx | 14 ++++++------ src/apps/vault/ItemDetail.tsx | 2 +- src/apps/vault/ProviderAccounts.tsx | 6 +++--- src/apps/wallet/index.tsx | 30 +++++++++++++------------- src/components/PrototypeWarning.tsx | 4 ++-- src/components/WalletOnboarding.tsx | 2 +- src/components/shell/WidgetTile.tsx | 28 +++++++++--------------- src/components/shell/WorkspaceRail.tsx | 4 ++-- 17 files changed, 53 insertions(+), 61 deletions(-) diff --git a/package-lock.json b/package-lock.json index 429b3b7..bd4ad91 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,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", @@ -1515,9 +1515,9 @@ } }, "node_modules/@mind-studio/ui": { - "version": "0.4.0", - "resolved": "https://npm.pkg.github.com/download/@mind-studio/ui/0.4.0/4d57829589aba38f8123b53c858598ed84db4910", - "integrity": "sha512-GOMaHU1tR8z0JIOnOHMJBLcYDItcUuYVuxgBmsBXGoipoSxrknzVnarqiR/7Wm26AWkQ7ISyzDkDcFot6jTgyQ==", + "version": "0.5.0", + "resolved": "https://npm.pkg.github.com/download/@mind-studio/ui/0.5.0/3fc873067e04a306cb44015874f24eeaf683a6d9", + "integrity": "sha512-nJJN2RuP4KvFDyZYJSRnG68kHt6WXFyxyVYH8jCpK6l0Bj+T0+lj7lNuAUrW0bm2atE04NGkZjMAkmZoxjBxmQ==", "license": "MIT", "dependencies": { "@base-ui/react": "^1.5.0", diff --git a/package.json b/package.json index 65cca27..e856094 100644 --- a/package.json +++ b/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", diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx index 1085206..000f4f6 100644 --- a/src/app/settings/page.tsx +++ b/src/app/settings/page.tsx @@ -166,7 +166,7 @@ export default function SettingsPage() { )} - {nameError &&

{nameError}

} + {nameError &&

{nameError}

}
diff --git a/src/app/widget/decks/page.tsx b/src/app/widget/decks/page.tsx index 7fb3cf9..abf2f61 100644 --- a/src/app/widget/decks/page.tsx +++ b/src/app/widget/decks/page.tsx @@ -19,7 +19,7 @@ import type { BridgeTheme } from "@/lib/shell/bridge-protocol"; 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("connecting"); diff --git a/src/app/widget/people/page.tsx b/src/app/widget/people/page.tsx index 12066ce..8c104d9 100644 --- a/src/app/widget/people/page.tsx +++ b/src/app/widget/people/page.tsx @@ -17,7 +17,7 @@ import type { BridgeTheme } from "@/lib/shell/bridge-protocol"; 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 { diff --git a/src/app/widget/quick-note/page.tsx b/src/app/widget/quick-note/page.tsx index 1cf81f6..d8d584e 100644 --- a/src/app/widget/quick-note/page.tsx +++ b/src/app/widget/quick-note/page.tsx @@ -149,7 +149,7 @@ export default function QuickNoteWidget() { const border = dark ? "#27272a" : "#e5e7eb"; const fieldBg = dark ? "#18181b" : "#f9fafb"; const hoverBg = dark ? "#1f1f23" : "#f3f4f6"; - const accent = "#6366f1"; + const accent = "#16b88a"; return (
("connecting"); diff --git a/src/app/widget/wallet-balance/page.tsx b/src/app/widget/wallet-balance/page.tsx index 7bc777f..5e38311 100644 --- a/src/app/widget/wallet-balance/page.tsx +++ b/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 = { diff --git a/src/apps/identity/index.tsx b/src/apps/identity/index.tsx index 6edd3e5..279249d 100644 --- a/src/apps/identity/index.tsx +++ b/src/apps/identity/index.tsx @@ -419,7 +419,7 @@ function SessionBindingCard({ {busy === "verify" ? "Verifying…" : "Verify control"} {verdict === "ok" && ( - + ✓ verified )} @@ -611,7 +611,7 @@ function PassportRow({ )} {passport.bound && ( - + bound )} @@ -629,7 +629,7 @@ function PassportRow({

{podRoot}

- {verdict === "ok" && ✓} + {verdict === "ok" && ✓} {verdict === "fail" && ✗}
{isActive ? ( @@ -699,7 +699,7 @@ function PassportRow({ {busy === "did" ? "Signing challenge…" : "Log in with DID"} {didVerdict === "ok" && ( - ✓ signed in + ✓ signed in )} {didVerdict === "fail" && ( ✗ failed @@ -709,7 +709,7 @@ function PassportRow({

void

Checking DID support…

)} {serverDid === "yes" && ( -

+

✓ Supports DID login — your master DID will be linked automatically.

)} {serverDid === "no" && ( -

+

Stock CSS — no DID login here. The passport still works via its stored key (password-less switch).

diff --git a/src/apps/vault/ItemDetail.tsx b/src/apps/vault/ItemDetail.tsx index bf26030..14f80c1 100644 --- a/src/apps/vault/ItemDetail.tsx +++ b/src/apps/vault/ItemDetail.tsx @@ -157,7 +157,7 @@ export function ItemDetail({ {breach.status === "checking" ? "Checking…" : "Check breaches"} {breach.status === "safe" && ( - Not found in known breaches. + Not found in known breaches. )} {breach.status === "pwned" && ( diff --git a/src/apps/vault/ProviderAccounts.tsx b/src/apps/vault/ProviderAccounts.tsx index bbe301e..0599c90 100644 --- a/src/apps/vault/ProviderAccounts.tsx +++ b/src/apps/vault/ProviderAccounts.tsx @@ -261,12 +261,12 @@ function AccountRow({ account }: { account: ProviderAccount }) {
{account.label} {account.didLinked && ( - + DID )} {account.pending && ( - + Pending )} @@ -288,7 +288,7 @@ function AccountRow({ account }: { account: ProviderAccount }) {

{entry.reason}

{account.pending && ( -
+
Confirm this email at the provider, then mark it verified to re-enable automatic sign-in. diff --git a/src/apps/wallet/index.tsx b/src/apps/wallet/index.tsx index 09b977f..2ccea6f 100644 --- a/src/apps/wallet/index.tsx +++ b/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 (
- {/* atmosphere: a faint amber bloom behind the balance, vignetting to the surface */} + {/* atmosphere: a faint green bloom behind the balance, vignetting to the surface */}
@@ -292,11 +294,11 @@ function BalanceHeader({

- ● Balance + ● Balance

{fmt.format(shown)} - + {view.unit}

@@ -308,7 +310,7 @@ function BalanceHeader({ {(earned > 0 || spent > 0) && (
- + ↓ {fmt.format(earned)} in @@ -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 (
    • -

    +

    {entry.amount > 0 ? "+" : ""} {fmt.format(entry.amount)}{" "} {unit} @@ -591,7 +591,7 @@ function SendPanel({

    Send {view.unit}

    - + feeless
    @@ -599,7 +599,7 @@ function SendPanel({ {phase.p === "review" ? (
    {/* the document about to be signed */} -
    +
    {phase.toName && } @@ -666,7 +666,7 @@ function SendPanel({
    {phase.p === "sent" && ( -

    +

    Sent ✓ — recorded at #{phase.seq}.

    )} diff --git a/src/components/PrototypeWarning.tsx b/src/components/PrototypeWarning.tsx index 74e9786..11809a6 100644 --- a/src/components/PrototypeWarning.tsx +++ b/src/components/PrototypeWarning.tsx @@ -11,14 +11,14 @@ export function PrototypeWarning({ className = "" }: { className?: string }) {
    ⚠️

    Prototype — don’t use real passwords.

    -

    +

    This Vault is an unaudited preview. Use throwaway, made-up secrets only — never your real accounts.

    diff --git a/src/components/WalletOnboarding.tsx b/src/components/WalletOnboarding.tsx index 7976c52..98ebef2 100644 --- a/src/components/WalletOnboarding.tsx +++ b/src/components/WalletOnboarding.tsx @@ -300,7 +300,7 @@ export default function WalletOnboarding() { )} {status === "locked" && ( -

    +

    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. diff --git a/src/components/shell/WidgetTile.tsx b/src/components/shell/WidgetTile.tsx index 6d734e1..10e8878 100644 --- a/src/components/shell/WidgetTile.tsx +++ b/src/components/shell/WidgetTile.tsx @@ -39,22 +39,12 @@ function maxHeight(size: WidgetSize): number { 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 = { - 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, @@ -111,7 +101,7 @@ export function WidgetTile({ 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 (

    {widget.icon} diff --git a/src/components/shell/WorkspaceRail.tsx b/src/components/shell/WorkspaceRail.tsx index 9a7f693..cca444b 100644 --- a/src/components/shell/WorkspaceRail.tsx +++ b/src/components/shell/WorkspaceRail.tsx @@ -305,7 +305,7 @@ function CreateWorkspaceForm({ onDone }: { onDone: () => void }) { aria-describedby={error ? "ws-create-error" : undefined} /> {canCreate === false ? ( -

    +

    This server can’t create extra pods — it makes one pod per identity, at sign-in. Use “Join existing” 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 && (

    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