@mohasinac/appkit 3.6.4 → 3.7.0

package/dist/tokens/color-pairs.d.ts

@@ -0,0 +1,46 @@
+import type { SurfaceKey } from "../ui/components/surface-tokens";
+/**
+ * Colors as a function, not a convention.
+ *
+ * Every layout primitive that accepts a `surface` prop (Stack, Row, Grid,
+ * Container, Section, Div, Card) used to pick its background and its text
+ * color completely independently — nothing stopped a consumer from combining
+ * a light surface with light text, because there was no single source of
+ * truth pairing them. `getSurfaceTextPair` is that source of truth: one
+ * lookup, one entry per surface token, each entry a real CSS-var pair
+ * already used somewhere in this codebase (this is a consolidation of
+ * existing choices, not a new palette).
+ *
+ * `buildSurfaceClasses` (surface-tokens.ts) calls this automatically so
+ * every consumer of a `surface` prop gets a readable default text color for
+ * free. A child element's own explicit `color`/`text-*` class still wins
+ * (normal CSS specificity — the default only fills in when nothing more
+ * specific is set), so this is additive, not a breaking change.
+ */
+export interface SurfaceTextPair {
+    /** CSS var reference for the surface's default (non-muted) text color. */
+    textVar: string;
+    /** CSS var reference for secondary/de-emphasized text on this surface. */
+    textMutedVar: string;
+    /** CSS var reference for the lowest-emphasis text on this surface. */
+    textFaintVar: string;
+}
+/**
+ * One entry per `SurfaceKey` (surface-tokens.ts). Surfaces that are light
+ * neutrals (default/muted/subtle/inset/card/elevated/interactive/form/
+ * sidePanel/skeleton/status-surfaces) pair with the theme's standard
+ * text/text-muted/text-faint triad, since those surfaces are always close
+ * to `--appkit-color-surface`/`--appkit-color-bg` in lightness regardless of
+ * theme. Surfaces that are dark overlays or near-black regardless of theme
+ * mode (overlay-*, media-dark) pair with on-primary (white-on-dark) text —
+ * they never lighten in dark mode, so a theme-relative text color would
+ * become unreadable exactly when the surface is at its darkest.
+ */
+export declare const SURFACE_TEXT_PAIR_MAP: Record<SurfaceKey, SurfaceTextPair>;
+export declare function getSurfaceTextPair(surface: SurfaceKey): SurfaceTextPair;
+/**
+ * Tailwind class for the surface's default text color, e.g.
+ * `text-[var(--appkit-color-text)]`. `buildSurfaceClasses` appends this so
+ * every `surface`-bearing primitive gets a readable default.
+ */
+export declare function getSurfaceTextClass(surface: SurfaceKey): string;

package/dist/tokens/color-pairs.js

@@ -0,0 +1,93 @@
+const DEFAULT_PAIR = {
+    textVar: "var(--appkit-color-text)",
+    textMutedVar: "var(--appkit-color-text-muted)",
+    textFaintVar: "var(--appkit-color-text-faint)",
+};
+const ON_PRIMARY_PAIR = {
+    textVar: "var(--appkit-color-text-on-primary)",
+    textMutedVar: "var(--appkit-color-text-on-primary)",
+    textFaintVar: "var(--appkit-color-text-on-primary)",
+};
+/**
+ * One entry per `SurfaceKey` (surface-tokens.ts). Surfaces that are light
+ * neutrals (default/muted/subtle/inset/card/elevated/interactive/form/
+ * sidePanel/skeleton/status-surfaces) pair with the theme's standard
+ * text/text-muted/text-faint triad, since those surfaces are always close
+ * to `--appkit-color-surface`/`--appkit-color-bg` in lightness regardless of
+ * theme. Surfaces that are dark overlays or near-black regardless of theme
+ * mode (overlay-*, media-dark) pair with on-primary (white-on-dark) text —
+ * they never lighten in dark mode, so a theme-relative text color would
+ * become unreadable exactly when the surface is at its darkest.
+ */
+export const SURFACE_TEXT_PAIR_MAP = {
+    none: DEFAULT_PAIR,
+    default: DEFAULT_PAIR,
+    muted: DEFAULT_PAIR,
+    subtle: DEFAULT_PAIR,
+    inset: DEFAULT_PAIR,
+    card: DEFAULT_PAIR,
+    elevated: DEFAULT_PAIR,
+    interactive: DEFAULT_PAIR,
+    glass: DEFAULT_PAIR,
+    form: DEFAULT_PAIR,
+    sidePanel: DEFAULT_PAIR,
+    "success-surface": {
+        textVar: "var(--appkit-color-success)",
+        textMutedVar: "var(--appkit-color-success)",
+        textFaintVar: "var(--appkit-color-text-muted)",
+    },
+    "danger-surface": {
+        textVar: "var(--appkit-color-error)",
+        textMutedVar: "var(--appkit-color-error)",
+        textFaintVar: "var(--appkit-color-text-muted)",
+    },
+    "warning-surface": {
+        textVar: "var(--appkit-color-warning)",
+        textMutedVar: "var(--appkit-color-warning)",
+        textFaintVar: "var(--appkit-color-text-muted)",
+    },
+    "info-surface": {
+        textVar: "var(--appkit-color-info)",
+        textMutedVar: "var(--appkit-color-info)",
+        textFaintVar: "var(--appkit-color-text-muted)",
+    },
+    "overlay-xs": ON_PRIMARY_PAIR,
+    "overlay-sm": ON_PRIMARY_PAIR,
+    "overlay-md": ON_PRIMARY_PAIR,
+    "overlay-lg": ON_PRIMARY_PAIR,
+    "overlay-xl": ON_PRIMARY_PAIR,
+    skeleton: DEFAULT_PAIR,
+    "skeleton-light": DEFAULT_PAIR,
+    "media-dark": ON_PRIMARY_PAIR,
+};
+export function getSurfaceTextPair(surface) {
+    return SURFACE_TEXT_PAIR_MAP[surface] ?? DEFAULT_PAIR;
+}
+/**
+ * Fixed, statically-written Tailwind arbitrary-value classes — one per
+ * distinct `textVar` that can appear in `SURFACE_TEXT_PAIR_MAP`. Every class
+ * string below is a complete literal Tailwind can find via its static
+ * content scan. Building this string via runtime template-literal
+ * interpolation (`` `text-[${pair.textVar}]` ``) instead would make Tailwind's
+ * scanner unable to see it — no CSS rule would ever be generated — caught by
+ * `audit-dynamic-tailwind-arbitrary.mjs`.
+ */
+const TEXT_VAR_TO_CLASS = {
+    "var(--appkit-color-text)": "text-[var(--appkit-color-text)]",
+    "var(--appkit-color-text-on-primary)": "text-[var(--appkit-color-text-on-primary)]",
+    "var(--appkit-color-success)": "text-[var(--appkit-color-success)]",
+    "var(--appkit-color-error)": "text-[var(--appkit-color-error)]",
+    "var(--appkit-color-warning)": "text-[var(--appkit-color-warning)]",
+    "var(--appkit-color-info)": "text-[var(--appkit-color-info)]",
+};
+/**
+ * Tailwind class for the surface's default text color, e.g.
+ * `text-[var(--appkit-color-text)]`. `buildSurfaceClasses` appends this so
+ * every `surface`-bearing primitive gets a readable default.
+ */
+export function getSurfaceTextClass(surface) {
+    if (surface === "none")
+        return "";
+    const pair = getSurfaceTextPair(surface);
+    return TEXT_VAR_TO_CLASS[pair.textVar] ?? "";
+}

package/dist/tokens/index.d.ts

@@ -9,32 +9,32 @@
  */
 export declare const COLORS: {
     readonly primary: {
-        readonly DEFAULT: "#84e122";
-        readonly 50: "#f3ffe3";
-        readonly 100: "#e4ffc5";
-        readonly 200: "#c8ff90";
-        readonly 300: "#a3f550";
-        readonly 400: "#84e122";
-        readonly 500: "#65c408";
-        readonly 600: "#509c02";
-        readonly 700: "#3e7708";
-        readonly 800: "#345e0d";
-        readonly 900: "#2c5011";
-        readonly 950: "#142d03";
+        readonly DEFAULT: "#0d9488";
+        readonly 50: "#f0fdfa";
+        readonly 100: "#ccfbf1";
+        readonly 200: "#99f6e4";
+        readonly 300: "#5eead4";
+        readonly 400: "#2dd4bf";
+        readonly 500: "#14b8a6";
+        readonly 600: "#0d9488";
+        readonly 700: "#0f766e";
+        readonly 800: "#115e59";
+        readonly 900: "#134e4a";
+        readonly 950: "#042f2e";
     };
     readonly secondary: {
-        readonly DEFAULT: "#e91e8c";
-        readonly 50: "#fdf0f8";
-        readonly 100: "#fce2f2";
-        readonly 200: "#fac6e6";
-        readonly 300: "#f79dd2";
-        readonly 400: "#f063b9";
-        readonly 500: "#e91e8c";
-        readonly 600: "#d4107a";
-        readonly 700: "#b00d66";
-        readonly 800: "#900f56";
-        readonly 900: "#771249";
-        readonly 950: "#480525";
+        readonly DEFAULT: "#c026d3";
+        readonly 50: "#fdf4ff";
+        readonly 100: "#fae8ff";
+        readonly 200: "#f5d0fe";
+        readonly 300: "#f0abfc";
+        readonly 400: "#e879f9";
+        readonly 500: "#d946ef";
+        readonly 600: "#c026d3";
+        readonly 700: "#a21caf";
+        readonly 800: "#86198f";
+        readonly 900: "#701a75";
+        readonly 950: "#4a044e";
     };
     readonly cobalt: {
         readonly DEFAULT: "#3570fc";
@@ -65,10 +65,10 @@ export declare const COLORS: {
         readonly 950: "#222730";
     };
     readonly semantic: {
-        readonly success: "#059669";
-        readonly warning: "#d97706";
-        readonly error: "#dc2626";
-        readonly info: "#0284c7";
+        readonly success: "#15803d";
+        readonly warning: "#b45309";
+        readonly error: "#b91c1c";
+        readonly info: "#0369a1";
     };
 };
 export declare const RADIUS: {
@@ -88,8 +88,8 @@ export declare const SHADOWS: {
     readonly lg: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)";
     readonly xl: "0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)";
     readonly soft: "0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04)";
-    readonly glow: "0 0 20px rgba(80, 156, 2, 0.45)";
-    readonly glowPink: "0 0 20px rgba(233, 30, 140, 0.5)";
+    readonly glow: "0 0 20px rgba(13, 148, 136, 0.45)";
+    readonly glowPink: "0 0 20px rgba(192, 38, 211, 0.5)";
 };
 export declare const Z_INDEX: {
     readonly dropdown: 30;
@@ -114,32 +114,32 @@ export declare function token(name: string): string;
 export declare const TOKENS: {
     readonly colors: {
         readonly primary: {
-            readonly DEFAULT: "#84e122";
-            readonly 50: "#f3ffe3";
-            readonly 100: "#e4ffc5";
-            readonly 200: "#c8ff90";
-            readonly 300: "#a3f550";
-            readonly 400: "#84e122";
-            readonly 500: "#65c408";
-            readonly 600: "#509c02";
-            readonly 700: "#3e7708";
-            readonly 800: "#345e0d";
-            readonly 900: "#2c5011";
-            readonly 950: "#142d03";
+            readonly DEFAULT: "#0d9488";
+            readonly 50: "#f0fdfa";
+            readonly 100: "#ccfbf1";
+            readonly 200: "#99f6e4";
+            readonly 300: "#5eead4";
+            readonly 400: "#2dd4bf";
+            readonly 500: "#14b8a6";
+            readonly 600: "#0d9488";
+            readonly 700: "#0f766e";
+            readonly 800: "#115e59";
+            readonly 900: "#134e4a";
+            readonly 950: "#042f2e";
         };
         readonly secondary: {
-            readonly DEFAULT: "#e91e8c";
-            readonly 50: "#fdf0f8";
-            readonly 100: "#fce2f2";
-            readonly 200: "#fac6e6";
-            readonly 300: "#f79dd2";
-            readonly 400: "#f063b9";
-            readonly 500: "#e91e8c";
-            readonly 600: "#d4107a";
-            readonly 700: "#b00d66";
-            readonly 800: "#900f56";
-            readonly 900: "#771249";
-            readonly 950: "#480525";
+            readonly DEFAULT: "#c026d3";
+            readonly 50: "#fdf4ff";
+            readonly 100: "#fae8ff";
+            readonly 200: "#f5d0fe";
+            readonly 300: "#f0abfc";
+            readonly 400: "#e879f9";
+            readonly 500: "#d946ef";
+            readonly 600: "#c026d3";
+            readonly 700: "#a21caf";
+            readonly 800: "#86198f";
+            readonly 900: "#701a75";
+            readonly 950: "#4a044e";
         };
         readonly cobalt: {
             readonly DEFAULT: "#3570fc";
@@ -170,10 +170,10 @@ export declare const TOKENS: {
             readonly 950: "#222730";
         };
         readonly semantic: {
-            readonly success: "#059669";
-            readonly warning: "#d97706";
-            readonly error: "#dc2626";
-            readonly info: "#0284c7";
+            readonly success: "#15803d";
+            readonly warning: "#b45309";
+            readonly error: "#b91c1c";
+            readonly info: "#0369a1";
         };
     };
     readonly radius: {
@@ -193,8 +193,8 @@ export declare const TOKENS: {
         readonly lg: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)";
         readonly xl: "0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)";
         readonly soft: "0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04)";
-        readonly glow: "0 0 20px rgba(80, 156, 2, 0.45)";
-        readonly glowPink: "0 0 20px rgba(233, 30, 140, 0.5)";
+        readonly glow: "0 0 20px rgba(13, 148, 136, 0.45)";
+        readonly glowPink: "0 0 20px rgba(192, 38, 211, 0.5)";
     };
     readonly zIndex: {
         readonly dropdown: 30;

package/dist/tokens/index.js

@@ -10,32 +10,32 @@
 // --- Brand Colors ----------------------------------------------------------
 export const COLORS = {
     primary: {
-        DEFAULT: "#84e122",
-        50: "#f3ffe3",
-        100: "#e4ffc5",
-        200: "#c8ff90",
-        300: "#a3f550",
-        400: "#84e122",
-        500: "#65c408",
-        600: "#509c02",
-        700: "#3e7708",
-        800: "#345e0d",
-        900: "#2c5011",
-        950: "#142d03",
+        DEFAULT: "#0d9488",
+        50: "#f0fdfa",
+        100: "#ccfbf1",
+        200: "#99f6e4",
+        300: "#5eead4",
+        400: "#2dd4bf",
+        500: "#14b8a6",
+        600: "#0d9488",
+        700: "#0f766e",
+        800: "#115e59",
+        900: "#134e4a",
+        950: "#042f2e",
     },
     secondary: {
-        DEFAULT: "#e91e8c",
-        50: "#fdf0f8",
-        100: "#fce2f2",
-        200: "#fac6e6",
-        300: "#f79dd2",
-        400: "#f063b9",
-        500: "#e91e8c",
-        600: "#d4107a",
-        700: "#b00d66",
-        800: "#900f56",
-        900: "#771249",
-        950: "#480525",
+        DEFAULT: "#c026d3",
+        50: "#fdf4ff",
+        100: "#fae8ff",
+        200: "#f5d0fe",
+        300: "#f0abfc",
+        400: "#e879f9",
+        500: "#d946ef",
+        600: "#c026d3",
+        700: "#a21caf",
+        800: "#86198f",
+        900: "#701a75",
+        950: "#4a044e",
     },
     cobalt: {
         DEFAULT: "#3570fc",
@@ -66,10 +66,10 @@ export const COLORS = {
         950: "#222730",
     },
     semantic: {
-        success: "#059669",
-        warning: "#d97706",
-        error: "#dc2626",
-        info: "#0284c7",
+        success: "#15803d",
+        warning: "#b45309",
+        error: "#b91c1c",
+        info: "#0369a1",
     },
 };
 // --- Border Radius ---------------------------------------------------------
@@ -91,8 +91,8 @@ export const SHADOWS = {
     lg: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)",
     xl: "0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)",
     soft: "0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04)",
-    glow: "0 0 20px rgba(80, 156, 2, 0.45)",
-    glowPink: "0 0 20px rgba(233, 30, 140, 0.5)",
+    glow: "0 0 20px rgba(13, 148, 136, 0.45)",
+    glowPink: "0 0 20px rgba(192, 38, 211, 0.5)",
 };
 // --- Z-index ---------------------------------------------------------------
 export const Z_INDEX = {

package/dist/tokens/themes/cobalt-night.d.ts

@@ -1,7 +1,8 @@
 import type { ThemeRecord } from "./types";
 /**
- * Theme template — Cobalt Night. Keeps the cobalt primary but pairs it with
- * a deep-blue dark surface instead of hot pink. Mirrors the
+ * Theme template — Cobalt Night. Keeps a cobalt-blue primary but pairs it
+ * with a deep-blue dark surface — a distinct alternate dark palette from the
+ * built-in `default-dark` (crimson + cyan since 2026-08-17). Mirrors the
  * `[data-theme="cobalt-night"]` block in `appkit/src/tokens/tokens.css`.
  *
  * Not a built-in (`builtIn: false`) — seeded into `siteSettings.theme.themes`

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

@@ -1,7 +1,8 @@
 import { DEFAULT_DARK_THEME } from "./default-dark";
 /**
- * Theme template — Cobalt Night. Keeps the cobalt primary but pairs it with
- * a deep-blue dark surface instead of hot pink. Mirrors the
+ * Theme template — Cobalt Night. Keeps a cobalt-blue primary but pairs it
+ * with a deep-blue dark surface — a distinct alternate dark palette from the
+ * built-in `default-dark` (crimson + cyan since 2026-08-17). Mirrors the
  * `[data-theme="cobalt-night"]` block in `appkit/src/tokens/tokens.css`.
  *
  * Not a built-in (`builtIn: false`) — seeded into `siteSettings.theme.themes`

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

@@ -1,6 +1,9 @@
 import type { ThemeRecord } from "./types";
 /**
- * Built-in dark theme — hot pink unified primary + slate surfaces.
+ * 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).
  * 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,5 +1,8 @@
 /**
- * Built-in dark theme — hot pink unified primary + slate surfaces.
+ * 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).
  * 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.
  *
@@ -8,34 +11,34 @@
  */
 export const DEFAULT_DARK_THEME = {
     id: "default-dark",
-    name: "Default Dark (Hot Pink)",
+    name: "Default Dark (Crimson + Cyan)",
     mode: "dark",
     builtIn: true,
     tokens: {
-        "appkit-color-primary": "#e91e8c",
-        "appkit-color-primary-50": "#fdf0f8",
-        "appkit-color-primary-100": "#fce2f2",
-        "appkit-color-primary-200": "#fac6e6",
-        "appkit-color-primary-300": "#f79dd2",
-        "appkit-color-primary-400": "#f063b9",
-        "appkit-color-primary-500": "#e91e8c",
-        "appkit-color-primary-600": "#d4107a",
-        "appkit-color-primary-700": "#b00d66",
-        "appkit-color-primary-800": "#900f56",
-        "appkit-color-primary-900": "#771249",
-        "appkit-color-primary-950": "#480525",
-        "appkit-color-secondary": "#e91e8c",
-        "appkit-color-secondary-50": "#fdf0f8",
-        "appkit-color-secondary-100": "#fce2f2",
-        "appkit-color-secondary-200": "#fac6e6",
-        "appkit-color-secondary-300": "#f79dd2",
-        "appkit-color-secondary-400": "#f063b9",
-        "appkit-color-secondary-500": "#e91e8c",
-        "appkit-color-secondary-600": "#d4107a",
-        "appkit-color-secondary-700": "#b00d66",
-        "appkit-color-secondary-800": "#900f56",
-        "appkit-color-secondary-900": "#771249",
-        "appkit-color-secondary-950": "#480525",
+        "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-bg": "#020617",
         "appkit-color-surface": "#0f172a",
         "appkit-color-surface-elevated": "rgba(15, 23, 42, 0.9)",
@@ -49,13 +52,13 @@ export const DEFAULT_DARK_THEME = {
         "appkit-color-success-surface": "rgba(6, 78, 59, 0.25)",
         "appkit-color-warning": "#fbbf24",
         "appkit-color-warning-surface": "#1c1508",
-        "appkit-color-error": "#f87171",
+        "appkit-color-error": "#fb7185",
         "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": "#f063b9",
-        "appkit-shadow-glow": "0 0 0 1px rgba(233,30,140,0.12), 0 4px 16px -4px rgba(233,30,140,0.22)",
-        "appkit-shadow-glow-pink": "0 0 0 1px rgba(233,30,140,0.14), 0 4px 20px -4px rgba(233,30,140,0.28)",
+        "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)",
         "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",
@@ -90,24 +93,24 @@ export const DEFAULT_DARK_THEME = {
         "appkit-text-5xl": "3rem",
     },
     gradients: {
-        brand: "linear-gradient(to right, var(--appkit-color-primary), var(--appkit-color-info))",
+        brand: "linear-gradient(to right, var(--appkit-color-primary), var(--appkit-color-secondary))",
         "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-info), var(--appkit-color-primary))",
+        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(233,30,140,0.10), transparent 60%, transparent)",
+        "page-header": "linear-gradient(to bottom right, rgba(239,68,68,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(56,189,248,0.10), transparent)",
-        "section-mesh": "radial-gradient(ellipse at top, rgba(233,30,140,0.10), var(--appkit-color-surface), rgba(56,189,248,0.08))",
-        "accent-banner": "linear-gradient(to right, var(--appkit-color-primary), var(--appkit-color-info))",
+        "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))",
+        "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(56,189,248,0.10), var(--appkit-color-bg), rgba(56,189,248,0.10))",
+        spotlight: "linear-gradient(to bottom right, rgba(6,182,212,0.10), var(--appkit-color-bg), rgba(6,182,212,0.10))",
         "whatsapp-card": "linear-gradient(to bottom right, var(--appkit-color-success), var(--appkit-color-success))",
         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(233,30,140,0.10), var(--appkit-color-surface), var(--appkit-color-surface))",
-        "card-teal": "linear-gradient(to bottom right, rgba(56,189,248,0.10), var(--appkit-color-surface), var(--appkit-color-surface))",
+        "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-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-info) 100%)",
-        sidebar: "linear-gradient(to bottom, var(--appkit-color-primary), var(--appkit-color-info))",
+        logo: "linear-gradient(to right, var(--appkit-color-primary-300) 0%, var(--appkit-color-primary-400) 55%, var(--appkit-color-secondary) 100%)",
+        sidebar: "linear-gradient(to bottom, var(--appkit-color-primary), var(--appkit-color-secondary))",
     },
 };

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

@@ -1,6 +1,10 @@
 import type { ThemeRecord } from "./types";
 /**
- * Built-in light theme — cobalt blue primary + lime green secondary.
+ * 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.
  * Mirrors the `:root` block in `appkit/src/tokens/tokens.css`.
  * Cannot be deleted; can be cloned by the admin into a new theme.
  *