feat(design): Badge brand variant (0.5.0)

design/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangecheck/design",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "OrangeCheck design system — multi-theme tokens, primitives, and family composites for the .ochk.io sub-sites. Tailwind 4 + Next.js Pages Router. Not for third-party integration.",
   "keywords": [
     "orangecheck",

design/scripts/verify-live-ui.mjs

@@ -0,0 +1,46 @@
+/* Honest live-UI check: does the deployed site actually render OcAppearanceMenu
+ * and does clicking a theme switch + persist it? Catches "tokens work but the
+ * control is missing/crashing" — which token-parity checks miss.
+ * Usage: SITES="https://a,https://b" node scripts/verify-live-ui.mjs */
+import { chromium } from '@playwright/test';
+
+const SITES = (process.env.SITES || '').split(',').map((s) => s.trim()).filter(Boolean);
+const browser = await chromium.launch();
+
+for (const url of SITES) {
+    const page = await browser.newPage({ viewport: { width: 1280, height: 900 } });
+    const errors = [];
+    page.on('console', (m) => m.type() === 'error' && errors.push(m.text()));
+    page.on('pageerror', (e) => errors.push('PAGEERROR: ' + e.message));
+    const out = { url, menu: false, opened: false, switched: false, persisted: false, errors: [] };
+    try {
+        await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 45000 });
+        await page.waitForTimeout(2500);
+        const trigger = page.locator('button[aria-label="appearance settings"]');
+        out.menu = (await trigger.count()) > 0;
+        if (out.menu) {
+            await trigger.first().click();
+            await page.waitForTimeout(300);
+            const goldItem = page.locator('[role="menuitemradio"]', { hasText: 'gold' });
+            out.opened = (await page.locator('[role="menu"]').count()) > 0 && (await goldItem.count()) > 0;
+            if (out.opened) {
+                await goldItem.first().click();
+                await page.waitForTimeout(400);
+                out.switched =
+                    (await page.evaluate(() => document.documentElement.getAttribute('data-oc-theme'))) ===
+                    'gold';
+                out.persisted = await page.evaluate(() => /oc_skin=gold/.test(document.cookie));
+            }
+        }
+    } catch (e) {
+        out.errors.push('NAV: ' + e.message);
+    }
+    out.errors.push(...errors.filter((e) => !/favicon|plausible|404|Failed to load resource|net::ERR/i.test(e)));
+    await page.close();
+    const ok = out.menu && out.opened && out.switched && out.persisted && out.errors.length === 0;
+    console.log(
+        `${ok ? '✅' : '❌'} ${url}  menu=${out.menu} open=${out.opened} switch=${out.switched} persist=${out.persisted}` +
+            (out.errors.length ? `  ERR: ${out.errors.slice(0, 2).join(' | ')}` : '')
+    );
+}
+await browser.close();

design/scripts/verify-stamp.mjs

@@ -4,7 +4,7 @@
 import { chromium } from '@playwright/test';
 
 const LOCAL = process.env.LOCAL_URL || 'http://localhost:3100';
-const PROD = 'https://stamp.ochk.io';
+const PROD = process.env.PROD_URL || 'https://stamp.ochk.io';
 
 const browser = await chromium.launch();
 

design/src/primitives/badge.stories.tsx

@@ -10,6 +10,7 @@ const VARIANTS = [
     'warning',
     'success',
     'info',
+    'brand',
 ] as const;
 
 const meta = {

design/src/primitives/badge.tsx

@@ -22,6 +22,7 @@ const badgeVariants = cva(
                 success:
                     'bg-success text-success-foreground [a&]:hover:bg-success/90 border-transparent',
                 info: 'bg-info text-info-foreground [a&]:hover:bg-info/90 border-transparent',
+                brand: 'bg-brand-soft text-brand border-brand-soft',
                 outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
             },
         },