@mohasinac/appkit 4.71.0 → 4.72.0

package/dist/tokens/contrast.d.ts

@@ -0,0 +1,61 @@
+/**
+ * WCAG contrast ratio, for the live check in `ThemeManagerView`'s colour
+ * inputs. A build-script twin of this formula lives in
+ * `scripts/audit-color-contrast.mjs`, which enforces the same AAA
+ * thresholds against the four shipped theme presets — kept separate on
+ * purpose: that script runs standalone with no appkit dependency, the same
+ * lane-boundary reason several other audit/library pairs in this codebase
+ * stay duplicated rather than sharing one module.
+ */
+export interface ParsedColor {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+/** Parses `#rrggbb` or `rgb(a)(...)`. Returns `null` for anything else (a CSS function, a bare var() reference, empty input). */
+export declare function parseCssColor(value: string): ParsedColor | null;
+/** Alpha-composite `fg` over an opaque `bg`, returning an opaque colour. */
+export declare function compositeOver(fg: ParsedColor, bg: ParsedColor): ParsedColor;
+/** WCAG contrast ratio between two opaque colours, 1 (none) to 21 (black/white). */
+export declare function contrastRatio(a: ParsedColor, b: ParsedColor): number;
+/** WCAG AAA — 7:1 normal text, 4.5:1 large text/icons. */
+export declare const AAA_NORMAL_TEXT_MIN = 7;
+export declare const AAA_LARGE_TEXT_MIN = 4.5;
+/**
+ * Convenience for the editor: ratio between two raw colour strings against a
+ * given backdrop (for alpha-compositing a translucent value). Returns `null`
+ * when either string does not parse — the caller renders "—" rather than a
+ * false measurement.
+ */
+export declare function contrastRatioFromStrings(fgValue: string, bgValue: string, backdropValue: string): number | null;
+/**
+ * The same pair set `scripts/audit-color-contrast.mjs` checks against the
+ * four shipped presets, for the LIVE check in `ThemeManagerView`. Kept here
+ * rather than only in the script so the editor can warn an admin before
+ * they save a pairing the build-time audit would later reject.
+ */
+export interface ContrastPairRule {
+    bg: string;
+    fg: string;
+    min: number;
+    label: string;
+    lightOnly?: boolean;
+    darkOnly?: boolean;
+}
+export declare const CONTRAST_PAIR_RULES: readonly ContrastPairRule[];
+export interface ContrastIssue {
+    label: string;
+    ratio: number;
+    min: number;
+}
+/**
+ * Checks `CONTRAST_PAIR_RULES` against a resolved token map (the draft's own
+ * overrides merged over its mode's built-in fallback — same merge
+ * `ThemeProvider.applyTheme` effectively produces). Returns only the
+ * failing pairs; an unresolved pair (a value the parser can't read, e.g. a
+ * `var(...)` reference) is silently skipped rather than reported — the
+ * build-time audit is the authority on anything this live check cannot
+ * parse.
+ */
+export declare function findContrastIssues(tokens: Record<string, string>, mode: "light" | "dark"): ContrastIssue[];

package/dist/tokens/contrast.js

@@ -0,0 +1,128 @@
+/**
+ * WCAG contrast ratio, for the live check in `ThemeManagerView`'s colour
+ * inputs. A build-script twin of this formula lives in
+ * `scripts/audit-color-contrast.mjs`, which enforces the same AAA
+ * thresholds against the four shipped theme presets — kept separate on
+ * purpose: that script runs standalone with no appkit dependency, the same
+ * lane-boundary reason several other audit/library pairs in this codebase
+ * stay duplicated rather than sharing one module.
+ */
+/** Parses `#rrggbb` or `rgb(a)(...)`. Returns `null` for anything else (a CSS function, a bare var() reference, empty input). */
+export function parseCssColor(value) {
+    const hex = value.trim().match(/^#([0-9a-fA-F]{6})$/);
+    if (hex) {
+        const n = parseInt(hex[1], 16);
+        return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255, a: 1 };
+    }
+    const rgba = value
+        .trim()
+        .match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+))?\s*\)$/);
+    if (rgba) {
+        return {
+            r: Number(rgba[1]),
+            g: Number(rgba[2]),
+            b: Number(rgba[3]),
+            a: rgba[4] !== undefined ? Number(rgba[4]) : 1,
+        };
+    }
+    return null;
+}
+/** Alpha-composite `fg` over an opaque `bg`, returning an opaque colour. */
+export function compositeOver(fg, bg) {
+    if (fg.a >= 1)
+        return fg;
+    return {
+        r: fg.a * fg.r + (1 - fg.a) * bg.r,
+        g: fg.a * fg.g + (1 - fg.a) * bg.g,
+        b: fg.a * fg.b + (1 - fg.a) * bg.b,
+        a: 1,
+    };
+}
+function relativeLuminance({ r, g, b }) {
+    const chan = (c) => {
+        const s = c / 255;
+        return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+    };
+    return 0.2126 * chan(r) + 0.7152 * chan(g) + 0.0722 * chan(b);
+}
+/** WCAG contrast ratio between two opaque colours, 1 (none) to 21 (black/white). */
+export function contrastRatio(a, b) {
+    const la = relativeLuminance(a);
+    const lb = relativeLuminance(b);
+    const lighter = Math.max(la, lb);
+    const darker = Math.min(la, lb);
+    return (lighter + 0.05) / (darker + 0.05);
+}
+/** WCAG AAA — 7:1 normal text, 4.5:1 large text/icons. */
+export const AAA_NORMAL_TEXT_MIN = 7;
+export const AAA_LARGE_TEXT_MIN = 4.5;
+/**
+ * Convenience for the editor: ratio between two raw colour strings against a
+ * given backdrop (for alpha-compositing a translucent value). Returns `null`
+ * when either string does not parse — the caller renders "—" rather than a
+ * false measurement.
+ */
+export function contrastRatioFromStrings(fgValue, bgValue, backdropValue) {
+    const fg = parseCssColor(fgValue);
+    const bg = parseCssColor(bgValue);
+    const backdrop = parseCssColor(backdropValue);
+    if (!fg || !bg || !backdrop)
+        return null;
+    const opaqueFg = compositeOver(fg, backdrop);
+    const opaqueBg = compositeOver(bg, backdrop);
+    return contrastRatio(opaqueFg, opaqueBg);
+}
+const BODY_BACKGROUNDS = [
+    "appkit-color-bg",
+    "appkit-color-surface",
+    "appkit-color-surface-elevated",
+    "appkit-color-surface-input",
+    "appkit-color-border-subtle",
+];
+const BODY_FOREGROUNDS = [
+    "appkit-color-text",
+    "appkit-color-text-muted",
+    "appkit-color-text-faint",
+];
+export const CONTRAST_PAIR_RULES = [
+    ...BODY_BACKGROUNDS.flatMap((bg) => BODY_FOREGROUNDS.map((fg) => ({ bg, fg, min: AAA_NORMAL_TEXT_MIN, label: `${fg} on ${bg}` }))),
+    ...["success", "warning", "error", "info"].map((status) => ({
+        bg: `appkit-color-${status}-surface`,
+        fg: `appkit-color-${status}`,
+        min: AAA_LARGE_TEXT_MIN,
+        label: `${status} badge`,
+    })),
+    { bg: "appkit-color-primary-700", fg: "appkit-color-text-on-primary", min: AAA_NORMAL_TEXT_MIN, label: "primary button (light)", lightOnly: true },
+    { bg: "appkit-color-secondary", fg: "appkit-color-text-on-primary", min: AAA_NORMAL_TEXT_MIN, label: "primary button (dark)", darkOnly: true },
+];
+/**
+ * Checks `CONTRAST_PAIR_RULES` against a resolved token map (the draft's own
+ * overrides merged over its mode's built-in fallback — same merge
+ * `ThemeProvider.applyTheme` effectively produces). Returns only the
+ * failing pairs; an unresolved pair (a value the parser can't read, e.g. a
+ * `var(...)` reference) is silently skipped rather than reported — the
+ * build-time audit is the authority on anything this live check cannot
+ * parse.
+ */
+export function findContrastIssues(tokens, mode) {
+    const issues = [];
+    const backdrop = tokens["appkit-color-bg"];
+    if (!backdrop)
+        return issues;
+    for (const rule of CONTRAST_PAIR_RULES) {
+        if (rule.lightOnly && mode !== "light")
+            continue;
+        if (rule.darkOnly && mode !== "dark")
+            continue;
+        const bgValue = tokens[rule.bg];
+        const fgValue = tokens[rule.fg];
+        if (!bgValue || !fgValue)
+            continue;
+        const ratio = contrastRatioFromStrings(fgValue, bgValue, backdrop);
+        if (ratio === null)
+            continue;
+        if (ratio < rule.min)
+            issues.push({ label: rule.label, ratio, min: rule.min });
+    }
+    return issues;
+}

package/dist/tokens/themes/cobalt-night.js

@@ -24,7 +24,7 @@ export const COBALT_NIGHT_THEME = {
         "appkit-color-primary": "#5992ff",
         "appkit-color-primary-500": "#5992ff",
         "appkit-color-primary-600": "#3570fc",
-        "appkit-color-secondary": "#84e122",
+        "appkit-color-secondary": "#3a630d",
         "appkit-color-secondary-500": "#84e122",
         "appkit-color-bg": "#111e58",
         "appkit-color-surface": "#1536b4",
@@ -33,8 +33,8 @@ export const COBALT_NIGHT_THEME = {
         "appkit-color-border": "#1343de",
         "appkit-color-border-subtle": "rgba(24, 49, 142, 0.6)",
         "appkit-color-text": "#eef5ff",
-        "appkit-color-text-muted": "#bcd4ff",
-        "appkit-color-text-faint": "#8eb9ff",
+        "appkit-color-text-muted": "#ccdfff",
+        "appkit-color-text-faint": "#cbdfff",
         "appkit-color-success": "#4ade80",
         "appkit-color-success-surface": "rgba(20, 83, 45, 0.3)",
         "appkit-color-warning": "#fbbf24",
@@ -43,6 +43,13 @@ export const COBALT_NIGHT_THEME = {
         "appkit-color-error-surface": "rgba(127, 29, 29, 0.3)",
         "appkit-color-info": "#38bdf8",
         "appkit-color-info-surface": "rgba(12, 74, 110, 0.3)",
+        // Generic accents — not status colors, see required.ts's own comment.
+        "appkit-color-accent-a": "#818cf8",
+        "appkit-color-accent-a-surface": "rgba(49, 46, 129, 0.3)",
+        "appkit-color-accent-b": "#f472b6",
+        "appkit-color-accent-b-surface": "rgba(131, 24, 67, 0.3)",
+        "appkit-color-accent-c": "#c084fc",
+        "appkit-color-accent-c-surface": "rgba(88, 28, 135, 0.3)",
         "appkit-color-focus-ring": "#8eb9ff",
         "appkit-shadow-glow": "0 0 0 1px rgba(89,146,255,0.18), 0 4px 16px -4px rgba(89,146,255,0.30)",
         "appkit-shadow-glow-pink": "0 0 0 1px rgba(89,146,255,0.18), 0 4px 20px -4px rgba(89,146,255,0.30)",

package/dist/tokens/themes/default-dark.d.ts

@@ -1,9 +1,10 @@
 import type { ThemeRecord } from "./types";
 /**
- * Built-in dark theme — crimson red unified primary + cyan secondary-highlight.
- * Rebranded 2026-08-17 from the previous hot-pink identity to match the
- * red/cyan "Meteo L-Drago"-style Beyblade reference art supplied for the
- * rebrand (red metallic body + cyan energy-ring highlight + silver accents).
+ * Built-in dark theme — navy primary + gold secondary-highlight.
+ * Refreshed 2026-11-06 from the previous crimson+cyan identity to the new
+ * owner-approved brand palette: a deep, rich navy body colour paired with
+ * the same warm metallic-gold accent used by the light theme, so the gold
+ * identity carries through both modes consistently.
  * Mirrors the `[data-theme="dark"]` block in `appkit/src/tokens/tokens.css`.
  * Cannot be deleted; can be cloned by the admin into a new theme.
  *

package/dist/tokens/themes/default-dark.js

@@ -1,8 +1,9 @@
 /**
- * Built-in dark theme — crimson red unified primary + cyan secondary-highlight.
- * Rebranded 2026-08-17 from the previous hot-pink identity to match the
- * red/cyan "Meteo L-Drago"-style Beyblade reference art supplied for the
- * rebrand (red metallic body + cyan energy-ring highlight + silver accents).
+ * Built-in dark theme — navy primary + gold secondary-highlight.
+ * Refreshed 2026-11-06 from the previous crimson+cyan identity to the new
+ * owner-approved brand palette: a deep, rich navy body colour paired with
+ * the same warm metallic-gold accent used by the light theme, so the gold
+ * identity carries through both modes consistently.
  * Mirrors the `[data-theme="dark"]` block in `appkit/src/tokens/tokens.css`.
  * Cannot be deleted; can be cloned by the admin into a new theme.
  *
@@ -11,34 +12,34 @@
  */
 export const DEFAULT_DARK_THEME = {
     id: "default-dark",
-    name: "Default Dark (Crimson + Cyan)",
+    name: "Default Dark (Navy + Gold)",
     mode: "dark",
     builtIn: true,
     tokens: {
-        "appkit-color-primary": "#ef4444",
-        "appkit-color-primary-50": "#fef2f2",
-        "appkit-color-primary-100": "#fee2e2",
-        "appkit-color-primary-200": "#fecaca",
-        "appkit-color-primary-300": "#fca5a5",
-        "appkit-color-primary-400": "#f87171",
-        "appkit-color-primary-500": "#ef4444",
-        "appkit-color-primary-600": "#dc2626",
-        "appkit-color-primary-700": "#b91c1c",
-        "appkit-color-primary-800": "#991b1b",
-        "appkit-color-primary-900": "#7f1d1d",
-        "appkit-color-primary-950": "#450a0a",
-        "appkit-color-secondary": "#06b6d4",
-        "appkit-color-secondary-50": "#ecfeff",
-        "appkit-color-secondary-100": "#cffafe",
-        "appkit-color-secondary-200": "#a5f3fc",
-        "appkit-color-secondary-300": "#67e8f9",
-        "appkit-color-secondary-400": "#22d3ee",
-        "appkit-color-secondary-500": "#06b6d4",
-        "appkit-color-secondary-600": "#0891b2",
-        "appkit-color-secondary-700": "#0e7490",
-        "appkit-color-secondary-800": "#155e75",
-        "appkit-color-secondary-900": "#164e63",
-        "appkit-color-secondary-950": "#083344",
+        "appkit-color-primary": "#1e3a8a",
+        "appkit-color-primary-50": "#ebeffb",
+        "appkit-color-primary-100": "#d0dbfb",
+        "appkit-color-primary-200": "#a8bdfb",
+        "appkit-color-primary-300": "#6e90f4",
+        "appkit-color-primary-400": "#1f52e4",
+        "appkit-color-primary-500": "#1e3a8a",
+        "appkit-color-primary-600": "#20346e",
+        "appkit-color-primary-700": "#192a5b",
+        "appkit-color-primary-800": "#17254c",
+        "appkit-color-primary-900": "#16213f",
+        "appkit-color-primary-950": "#091022",
+        "appkit-color-secondary": "#695617",
+        "appkit-color-secondary-50": "#fffbef",
+        "appkit-color-secondary-100": "#faf3dc",
+        "appkit-color-secondary-200": "#f1e5c0",
+        "appkit-color-secondary-300": "#e7d394",
+        "appkit-color-secondary-400": "#d6bb62",
+        "appkit-color-secondary-500": "#d4af37",
+        "appkit-color-secondary-600": "#b9982b",
+        "appkit-color-secondary-700": "#977e2a",
+        "appkit-color-secondary-800": "#7d6a2c",
+        "appkit-color-secondary-900": "#6a5b2a",
+        "appkit-color-secondary-950": "#483c15",
         "appkit-color-bg": "#020617",
         "appkit-color-surface": "#0f172a",
         "appkit-color-surface-elevated": "#1e293b",
@@ -48,12 +49,12 @@ export const DEFAULT_DARK_THEME = {
         // compares them.
         "appkit-color-surface-hover": "rgba(148, 163, 184, 0.12)",
         "appkit-color-surface-raised": "rgba(30, 41, 59, 0.7)",
-        "appkit-color-primary-surface": "rgba(239, 68, 68, 0.16)",
+        "appkit-color-primary-surface": "rgba(30, 58, 138, 0.16)",
         "appkit-color-border": "#334155",
         "appkit-color-border-subtle": "rgba(30, 41, 59, 0.6)",
         "appkit-color-text": "#fafafa",
         "appkit-color-text-muted": "#b4b4bd",
-        "appkit-color-text-faint": "#8b8b94",
+        "appkit-color-text-faint": "#b3b3b9",
         "appkit-color-link": "#22d3ee",
         "appkit-color-success": "#34d399",
         "appkit-color-success-surface": "rgba(6, 78, 59, 0.25)",
@@ -63,9 +64,16 @@ export const DEFAULT_DARK_THEME = {
         "appkit-color-error-surface": "rgba(127, 29, 29, 0.25)",
         "appkit-color-info": "#38bdf8",
         "appkit-color-info-surface": "rgba(12, 74, 110, 0.25)",
-        "appkit-color-focus-ring": "#f87171",
-        "appkit-shadow-glow": "0 0 0 1px rgba(239,68,68,0.12), 0 4px 16px -4px rgba(239,68,68,0.22)",
-        "appkit-shadow-glow-pink": "0 0 0 1px rgba(6,182,212,0.14), 0 4px 20px -4px rgba(6,182,212,0.28)",
+        // Generic accents — not status colors, see required.ts's own comment.
+        "appkit-color-accent-a": "#818cf8", // indigo-400 on indigo-900 tint
+        "appkit-color-accent-a-surface": "rgba(49, 46, 129, 0.25)",
+        "appkit-color-accent-b": "#f472b6", // pink-400 on pink-900 tint
+        "appkit-color-accent-b-surface": "rgba(131, 24, 67, 0.25)",
+        "appkit-color-accent-c": "#c084fc", // purple-400 on purple-900 tint
+        "appkit-color-accent-c-surface": "rgba(88, 28, 135, 0.25)",
+        "appkit-color-focus-ring": "#1f52e4",
+        "appkit-shadow-glow": "0 0 0 1px rgba(31,82,228,0.12), 0 4px 16px -4px rgba(31,82,228,0.22)",
+        "appkit-shadow-glow-pink": "0 0 0 1px rgba(212,175,55,0.14), 0 4px 20px -4px rgba(212,175,55,0.28)",
         "appkit-font-display": "var(--font-display), \"Poppins\", ui-sans-serif, system-ui, sans-serif",
         "appkit-font-sans": "var(--font-body), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
         "appkit-font-editorial": "var(--font-editorial), \"Georgia\", serif",
@@ -107,17 +115,17 @@ export const DEFAULT_DARK_THEME = {
         "brand-tri": "linear-gradient(to right, var(--appkit-color-primary), var(--appkit-color-secondary), var(--appkit-color-info))",
         accent: "linear-gradient(to right, var(--appkit-color-secondary), var(--appkit-color-primary))",
         "accent-divider": "linear-gradient(to right, transparent, var(--appkit-color-primary), transparent)",
-        "page-header": "linear-gradient(to bottom right, rgba(239,68,68,0.10), transparent 60%, transparent)",
+        "page-header": "linear-gradient(to bottom right, rgba(30,58,138,0.10), transparent 60%, transparent)",
         "section-warm": "linear-gradient(to bottom right, var(--appkit-color-warning-surface), transparent)",
-        "section-cool": "linear-gradient(to bottom right, rgba(6,182,212,0.10), transparent)",
-        "section-mesh": "radial-gradient(ellipse at top, rgba(239,68,68,0.10), var(--appkit-color-surface), rgba(6,182,212,0.08))",
+        "section-cool": "linear-gradient(to bottom right, rgba(212,175,55,0.10), transparent)",
+        "section-mesh": "radial-gradient(ellipse at top, rgba(30,58,138,0.10), var(--appkit-color-surface), rgba(212,175,55,0.08))",
         "accent-banner": "linear-gradient(to right, var(--appkit-color-primary), var(--appkit-color-secondary))",
         promotion: "linear-gradient(to bottom right, var(--appkit-color-error), var(--appkit-color-primary), var(--appkit-color-warning))",
-        spotlight: "linear-gradient(to bottom right, rgba(6,182,212,0.10), var(--appkit-color-bg), rgba(6,182,212,0.10))",
+        spotlight: "linear-gradient(to bottom right, rgba(212,175,55,0.10), var(--appkit-color-bg), rgba(212,175,55,0.10))",
         "whatsapp-card": "linear-gradient(135deg, var(--appkit-color-whatsapp) 0%, var(--appkit-color-whatsapp-light) 48%, var(--appkit-color-whatsapp-dark) 100%)",
         glass: "linear-gradient(to bottom right, color-mix(in srgb, var(--appkit-color-surface) 85%, transparent), color-mix(in srgb, var(--appkit-color-surface) 65%, transparent))",
-        "card-indigo": "linear-gradient(to bottom right, rgba(239,68,68,0.10), var(--appkit-color-surface), var(--appkit-color-surface))",
-        "card-teal": "linear-gradient(to bottom right, rgba(6,182,212,0.10), var(--appkit-color-surface), var(--appkit-color-surface))",
+        "card-indigo": "linear-gradient(to bottom right, rgba(30,58,138,0.10), var(--appkit-color-surface), var(--appkit-color-surface))",
+        "card-teal": "linear-gradient(to bottom right, rgba(212,175,55,0.10), var(--appkit-color-surface), var(--appkit-color-surface))",
         "card-amber": "linear-gradient(to bottom right, var(--appkit-color-warning-surface), var(--appkit-color-surface), var(--appkit-color-surface))",
         "card-rose": "linear-gradient(to bottom right, var(--appkit-color-error-surface), var(--appkit-color-surface), var(--appkit-color-surface))",
         logo: "linear-gradient(to right, var(--appkit-color-primary-300) 0%, var(--appkit-color-primary-400) 55%, var(--appkit-color-secondary) 100%)",

package/dist/tokens/themes/default-light.d.ts

@@ -1,10 +1,10 @@
 import type { ThemeRecord } from "./types";
 /**
- * Built-in light theme — teal-blue primary + magenta secondary-highlight.
- * Rebranded 2026-08-17 from the previous cobalt+lime identity to match the
- * teal/magenta Beyblade reference art supplied for the rebrand (turquoise
- * metallic body + magenta energy-ring highlight + silver accents), paired
- * with the new red/cyan dark theme.
+ * Built-in light theme — blue primary + gold secondary-highlight.
+ * Refreshed 2026-11-06 from the previous teal+magenta identity to the new
+ * owner-approved brand palette: a saturated royal blue body colour paired
+ * with a warm metallic-gold accent, matching the new navy+gold dark theme
+ * (gold carries through both modes as one consistent accent identity).
  * Mirrors the `:root` block in `appkit/src/tokens/tokens.css`.
  * Cannot be deleted; can be cloned by the admin into a new theme.
  *

package/dist/tokens/themes/default-light.js

@@ -1,9 +1,9 @@
 /**
- * Built-in light theme — teal-blue primary + magenta secondary-highlight.
- * Rebranded 2026-08-17 from the previous cobalt+lime identity to match the
- * teal/magenta Beyblade reference art supplied for the rebrand (turquoise
- * metallic body + magenta energy-ring highlight + silver accents), paired
- * with the new red/cyan dark theme.
+ * Built-in light theme — blue primary + gold secondary-highlight.
+ * Refreshed 2026-11-06 from the previous teal+magenta identity to the new
+ * owner-approved brand palette: a saturated royal blue body colour paired
+ * with a warm metallic-gold accent, matching the new navy+gold dark theme
+ * (gold carries through both modes as one consistent accent identity).
  * Mirrors the `:root` block in `appkit/src/tokens/tokens.css`.
  * Cannot be deleted; can be cloned by the admin into a new theme.
  *
@@ -12,34 +12,34 @@
  */
 export const DEFAULT_LIGHT_THEME = {
     id: "default-light",
-    name: "Default Light (Teal + Magenta)",
+    name: "Default Light (Blue + Gold)",
     mode: "light",
     builtIn: true,
     tokens: {
-        "appkit-color-primary": "#0d9488",
-        "appkit-color-primary-50": "#f0fdfa",
-        "appkit-color-primary-100": "#ccfbf1",
-        "appkit-color-primary-200": "#99f6e4",
-        "appkit-color-primary-300": "#5eead4",
-        "appkit-color-primary-400": "#2dd4bf",
-        "appkit-color-primary-500": "#14b8a6",
-        "appkit-color-primary-600": "#0d9488",
-        "appkit-color-primary-700": "#0f766e",
-        "appkit-color-primary-800": "#115e59",
-        "appkit-color-primary-900": "#134e4a",
-        "appkit-color-primary-950": "#042f2e",
-        "appkit-color-secondary": "#c026d3",
-        "appkit-color-secondary-50": "#fdf4ff",
-        "appkit-color-secondary-100": "#fae8ff",
-        "appkit-color-secondary-200": "#f5d0fe",
-        "appkit-color-secondary-300": "#f0abfc",
-        "appkit-color-secondary-400": "#e879f9",
-        "appkit-color-secondary-500": "#d946ef",
-        "appkit-color-secondary-600": "#c026d3",
-        "appkit-color-secondary-700": "#a21caf",
-        "appkit-color-secondary-800": "#86198f",
-        "appkit-color-secondary-900": "#701a75",
-        "appkit-color-secondary-950": "#4a044e",
+        "appkit-color-primary": "#3570fc",
+        "appkit-color-primary-50": "#f6f8fe",
+        "appkit-color-primary-100": "#dfe8ff",
+        "appkit-color-primary-200": "#bfd2fe",
+        "appkit-color-primary-300": "#9ab6f9",
+        "appkit-color-primary-400": "#7c9eed",
+        "appkit-color-primary-500": "#5183f9",
+        "appkit-color-primary-600": "#3570fc",
+        "appkit-color-primary-700": "#0c44ca",
+        "appkit-color-primary-800": "#1547be",
+        "appkit-color-primary-900": "#1b429d",
+        "appkit-color-primary-950": "#011d5f",
+        "appkit-color-secondary": "#d4af37",
+        "appkit-color-secondary-50": "#fffdf5",
+        "appkit-color-secondary-100": "#fffaea",
+        "appkit-color-secondary-200": "#fef4d3",
+        "appkit-color-secondary-300": "#fceab1",
+        "appkit-color-secondary-400": "#f9dd83",
+        "appkit-color-secondary-500": "#eeca55",
+        "appkit-color-secondary-600": "#d4af37",
+        "appkit-color-secondary-700": "#b79423",
+        "appkit-color-secondary-800": "#95791f",
+        "appkit-color-secondary-900": "#7a651f",
+        "appkit-color-secondary-950": "#534105",
         "appkit-color-cobalt": "#0d9488",
         "appkit-color-accent": "#8393b2",
         "appkit-color-bg": "#fafafa",
@@ -50,12 +50,12 @@ export const DEFAULT_LIGHT_THEME = {
         // matching :root block in tokens.css — audit-theme-drift compares them.
         "appkit-color-surface-hover": "#f4f4f5",
         "appkit-color-surface-raised": "#fafafa",
-        "appkit-color-primary-surface": "#f0fdfa",
+        "appkit-color-primary-surface": "#f6f8fe",
         "appkit-color-border": "#e4e4e7",
         "appkit-color-border-subtle": "#f4f4f5",
         "appkit-color-text": "#18181b",
-        "appkit-color-text-muted": "#5b5b63",
-        "appkit-color-text-faint": "#6f6f78",
+        "appkit-color-text-muted": "#52525a",
+        "appkit-color-text-faint": "#525259",
         "appkit-color-text-on-primary": "#ffffff",
         "appkit-color-link": "#0f766e",
         "appkit-color-success": "#15803d",
@@ -66,13 +66,20 @@ export const DEFAULT_LIGHT_THEME = {
         "appkit-color-error-surface": "#fef2f2",
         "appkit-color-info": "#0369a1",
         "appkit-color-info-surface": "#f0f9ff",
+        // Generic accents — not status colors, see required.ts's own comment.
+        "appkit-color-accent-a": "#4338ca", // indigo-700 on indigo-50
+        "appkit-color-accent-a-surface": "#eef2ff",
+        "appkit-color-accent-b": "#be185d", // pink-700 on pink-50
+        "appkit-color-accent-b-surface": "#fdf2f8",
+        "appkit-color-accent-c": "#7e22ce", // purple-700 on purple-50
+        "appkit-color-accent-c-surface": "#faf5ff",
         "appkit-color-star": "#facc15",
         "appkit-color-whatsapp-light": "#1ebe5d",
         "appkit-color-whatsapp-bg": "#ECE5DD",
         "appkit-color-whatsapp-dark": "#075E54",
-        "appkit-color-focus-ring": "#0d9488",
-        "appkit-shadow-glow": "0 0 0 1px rgba(13,148,136,0.10), 0 4px 16px -4px rgba(13,148,136,0.20)",
-        "appkit-shadow-glow-pink": "0 0 0 1px rgba(192,38,211,0.12), 0 4px 16px -4px rgba(192,38,211,0.22)",
+        "appkit-color-focus-ring": "#3570fc",
+        "appkit-shadow-glow": "0 0 0 1px rgba(53,112,252,0.10), 0 4px 16px -4px rgba(53,112,252,0.20)",
+        "appkit-shadow-glow-pink": "0 0 0 1px rgba(212,175,55,0.12), 0 4px 16px -4px rgba(212,175,55,0.22)",
         "appkit-font-display": "var(--font-display), \"Poppins\", ui-sans-serif, system-ui, sans-serif",
         "appkit-font-sans": "var(--font-body), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
         "appkit-font-editorial": "var(--font-editorial), \"Georgia\", serif",
@@ -108,6 +115,27 @@ export const DEFAULT_LIGHT_THEME = {
         "appkit-text-6xl": "3.75rem",
         "appkit-text-7xl": "4.5rem",
         "appkit-text-8xl": "6rem",
+        "appkit-radius-sm": "0.25rem",
+        "appkit-radius-md": "0.375rem",
+        "appkit-radius-lg": "0.5rem",
+        "appkit-radius-xl": "0.75rem",
+        "appkit-radius-2xl": "1rem",
+        "appkit-radius-3xl": "1.5rem",
+        "appkit-radius-card": "1rem",
+        "appkit-radius-btn": "0.75rem",
+        "appkit-radius-full": "9999px",
+        "appkit-tracking-tighter": "-0.02em",
+        "appkit-tracking-tight": "-0.011em",
+        "appkit-tracking-normal": "0em",
+        "appkit-tracking-wide": "0.025em",
+        "appkit-tracking-wider": "0.05em",
+        "appkit-duration-fast": "150ms",
+        "appkit-duration-base": "200ms",
+        "appkit-duration-slow": "300ms",
+        "appkit-duration-slower": "400ms",
+        "appkit-ease-default": "cubic-bezier(0.4, 0, 0.2, 1)",
+        "appkit-ease-in": "cubic-bezier(0.4, 0, 1, 1)",
+        "appkit-ease-out": "cubic-bezier(0, 0, 0.2, 1)",
     },
     gradients: {
         brand: "linear-gradient(to right, var(--appkit-color-primary), var(--appkit-color-secondary))",

package/dist/tokens/themes/required.d.ts

@@ -10,6 +10,6 @@ import type { GradientKey } from "./types";
  * unknown keys are rejected; missing keys fall back to the active mode's
  * default theme value (so a theme can override only a subset).
  */
-export declare const REQUIRED_THEME_TOKENS: readonly ["appkit-color-primary", "appkit-color-primary-50", "appkit-color-primary-100", "appkit-color-primary-200", "appkit-color-primary-300", "appkit-color-primary-400", "appkit-color-primary-500", "appkit-color-primary-600", "appkit-color-primary-700", "appkit-color-primary-800", "appkit-color-primary-900", "appkit-color-primary-950", "appkit-color-secondary", "appkit-color-secondary-50", "appkit-color-secondary-100", "appkit-color-secondary-200", "appkit-color-secondary-300", "appkit-color-secondary-400", "appkit-color-secondary-500", "appkit-color-secondary-600", "appkit-color-secondary-700", "appkit-color-secondary-800", "appkit-color-secondary-900", "appkit-color-secondary-950", "appkit-color-bg", "appkit-color-surface", "appkit-color-surface-elevated", "appkit-color-surface-input", "appkit-color-border", "appkit-color-border-subtle", "appkit-color-text", "appkit-color-text-muted", "appkit-color-text-faint", "appkit-color-text-on-primary", "appkit-color-link", "appkit-color-success", "appkit-color-success-surface", "appkit-color-warning", "appkit-color-warning-surface", "appkit-color-error", "appkit-color-error-surface", "appkit-color-info", "appkit-color-info-surface", "appkit-color-focus-ring", "appkit-shadow-glow", "appkit-shadow-glow-pink", "appkit-font-display", "appkit-font-sans", "appkit-font-editorial", "appkit-font-mono", "appkit-space-0-5", "appkit-space-1", "appkit-space-1-5", "appkit-space-2", "appkit-space-2-5", "appkit-space-3", "appkit-space-3-5", "appkit-space-4", "appkit-space-5", "appkit-space-6", "appkit-space-8", "appkit-space-10", "appkit-space-12", "appkit-space-14", "appkit-space-16", "appkit-space-18", "appkit-space-20", "appkit-space-24", "appkit-text-2xs", "appkit-text-xs", "appkit-text-sm", "appkit-text-base", "appkit-text-lg", "appkit-text-xl", "appkit-text-2xl", "appkit-text-3xl", "appkit-text-4xl", "appkit-text-5xl"];
+export declare const REQUIRED_THEME_TOKENS: readonly ["appkit-color-primary", "appkit-color-primary-50", "appkit-color-primary-100", "appkit-color-primary-200", "appkit-color-primary-300", "appkit-color-primary-400", "appkit-color-primary-500", "appkit-color-primary-600", "appkit-color-primary-700", "appkit-color-primary-800", "appkit-color-primary-900", "appkit-color-primary-950", "appkit-color-secondary", "appkit-color-secondary-50", "appkit-color-secondary-100", "appkit-color-secondary-200", "appkit-color-secondary-300", "appkit-color-secondary-400", "appkit-color-secondary-500", "appkit-color-secondary-600", "appkit-color-secondary-700", "appkit-color-secondary-800", "appkit-color-secondary-900", "appkit-color-secondary-950", "appkit-color-bg", "appkit-color-surface", "appkit-color-surface-elevated", "appkit-color-surface-input", "appkit-color-border", "appkit-color-border-subtle", "appkit-color-text", "appkit-color-text-muted", "appkit-color-text-faint", "appkit-color-text-on-primary", "appkit-color-link", "appkit-color-success", "appkit-color-success-surface", "appkit-color-warning", "appkit-color-warning-surface", "appkit-color-error", "appkit-color-error-surface", "appkit-color-info", "appkit-color-info-surface", "appkit-color-accent-a", "appkit-color-accent-a-surface", "appkit-color-accent-b", "appkit-color-accent-b-surface", "appkit-color-accent-c", "appkit-color-accent-c-surface", "appkit-color-focus-ring", "appkit-shadow-glow", "appkit-shadow-glow-pink", "appkit-font-display", "appkit-font-sans", "appkit-font-editorial", "appkit-font-mono", "appkit-space-0-5", "appkit-space-1", "appkit-space-1-5", "appkit-space-2", "appkit-space-2-5", "appkit-space-3", "appkit-space-3-5", "appkit-space-4", "appkit-space-5", "appkit-space-6", "appkit-space-8", "appkit-space-10", "appkit-space-12", "appkit-space-14", "appkit-space-16", "appkit-space-18", "appkit-space-20", "appkit-space-24", "appkit-text-2xs", "appkit-text-xs", "appkit-text-sm", "appkit-text-base", "appkit-text-lg", "appkit-text-xl", "appkit-text-2xl", "appkit-text-3xl", "appkit-text-4xl", "appkit-text-5xl", "appkit-radius-sm", "appkit-radius-md", "appkit-radius-lg", "appkit-radius-xl", "appkit-radius-2xl", "appkit-radius-3xl", "appkit-radius-card", "appkit-radius-btn", "appkit-radius-full", "appkit-tracking-tighter", "appkit-tracking-tight", "appkit-tracking-normal", "appkit-tracking-wide", "appkit-tracking-wider", "appkit-duration-fast", "appkit-duration-base", "appkit-duration-slow", "appkit-duration-slower", "appkit-ease-default", "appkit-ease-in", "appkit-ease-out"];
 export type RequiredThemeToken = (typeof REQUIRED_THEME_TOKENS)[number];
 export declare const REQUIRED_GRADIENT_KEYS: readonly GradientKey[];

package/dist/tokens/themes/required.js

@@ -57,6 +57,18 @@ export const REQUIRED_THEME_TOKENS = [
     "appkit-color-error-surface",
     "appkit-color-info",
     "appkit-color-info-surface",
+    // Generic accents — 2A/Phase 11 (overhaul brief). NOT status colors: these
+    // exist purely to visually differentiate otherwise-unrelated badges from
+    // each other (first consumer: ProductFeatureBadges' COD/EMI/wishlist
+    // pills, previously hardcoded Tailwind purple/indigo/pink literals with no
+    // theme seam at all). Reusable by any future badge needing a non-status
+    // accent — not a one-off naming for these 3 specifically.
+    "appkit-color-accent-a",
+    "appkit-color-accent-a-surface",
+    "appkit-color-accent-b",
+    "appkit-color-accent-b-surface",
+    "appkit-color-accent-c",
+    "appkit-color-accent-c-surface",
     // Focus
     "appkit-color-focus-ring",
     // Glow shadow (theme-tinted; dimensional shadow stays in tokens layer)
@@ -97,6 +109,34 @@ export const REQUIRED_THEME_TOKENS = [
     "appkit-text-3xl",
     "appkit-text-4xl",
     "appkit-text-5xl",
+    // Radius scale — previously fixed in :root with no per-theme override seam.
+    "appkit-radius-sm",
+    "appkit-radius-md",
+    "appkit-radius-lg",
+    "appkit-radius-xl",
+    "appkit-radius-2xl",
+    "appkit-radius-3xl",
+    "appkit-radius-card",
+    "appkit-radius-btn",
+    "appkit-radius-full",
+    // Letter-spacing scale — `sunset.ts`'s CSS block already varies this per
+    // theme (hand-written, outside the theme-record mechanism); promoting it
+    // here gives an ADMIN-authored theme the same seam.
+    "appkit-tracking-tighter",
+    "appkit-tracking-tight",
+    "appkit-tracking-normal",
+    "appkit-tracking-wide",
+    "appkit-tracking-wider",
+    // Motion — duration + easing. `appkit/src/tokens/motion.ts`'s spring/tween
+    // presets are a separate, non-CSS concern (motion/react `Transition`
+    // objects) and are not part of this CSS-variable set.
+    "appkit-duration-fast",
+    "appkit-duration-base",
+    "appkit-duration-slow",
+    "appkit-duration-slower",
+    "appkit-ease-default",
+    "appkit-ease-in",
+    "appkit-ease-out",
 ];
 export const REQUIRED_GRADIENT_KEYS = [
     "brand",