@pepperui/tokens 1.2.0

package/dist/shadcn.css

@@ -0,0 +1,125 @@
+/**
+ * shadcn.css — the shadcn variable map (2.7.5, D53): every shadcn name resolves to a Pepper role
+ * GENERATED by `npm run build` from tokens/*.json — do not edit by hand.
+ * Pepper UI, the Mobupps design system. Source of truth: bitbucket.org/rashidmobupps/pepper-ui
+ */
+
+/* Load order: tokens.css → shadcn.css. Each shadcn name below is a reference into tokens.css, never a
+ * value — an accent mode switch re-resolves the charts, and a dark theme (D2, not before Q1 2027) would be one
+ * more block here, not a second palette. The map itself is build/shadcn-map.json; the reason for each pairing
+ * rides beside it. What shadcn expects is customization.md § Color Variables (.claude/skills/shadcn).
+ *
+ * Tailwind v4: import this file from the app's Tailwind entry and the @theme block registers the names, so
+ * bg-primary, text-muted-foreground, rounded-lg, ring-ring resolve. Tailwind v3: tailwind.js carries the
+ * same names as theme.extend.colors. No Tailwind at all: the :root block is plain CSS and still applies. */
+
+:root {
+  /* shadcn's names, in the order its nova preset writes them (2026-09-08) */
+  --background: var(--pui-surface-page); /* The default ground (surface/page). */
+  --foreground: var(--pui-text-default); /* Body and headings on light surfaces (D4). */
+  --card: var(--pui-surface-card); /* card.css:37 — the card ground, #f2f2f7 not neutral/100 (D5). */
+  --card-foreground: var(--pui-text-default); /* Text on a card is the default ink. */
+  --popover: var(--pui-surface-page); /* popover.css:29 — Paggy's .bg-pop is the page white with a border/default line, not the card tint. */
+  --popover-foreground: var(--pui-text-default);
+  --primary: var(--pui-action-primary-bg); /* D53: shadcn's primary is the black button (the site's .btn--dark, button.css), NOT the brand blue — so --primary and --ring never collide. */
+  --primary-foreground: var(--pui-action-primary-fg); /* White on the black button. */
+  --secondary: var(--pui-action-secondary-bg); /* The outlined button's fill (button.css --secondary). shadcn's secondary is a grey fill; Pepper's is white with border/default, so the Button paints its own secondary variant. */
+  --secondary-foreground: var(--pui-action-secondary-fg);
+  --muted: var(--pui-surface-sunken); /* Wells and inset panels — where #f2f2f2 belongs. shadcn's quiet fill and hover wash. */
+  --muted-foreground: var(--pui-text-muted); /* Secondary text (neutral/600 — D43 keeps captions readable). */
+  --accent: var(--pui-surface-sunken); /* shadcn's accent is a HOVER WASH (ghost hover, menu item hover), not Pepper's accent mode: button.css .pui-button--ghost:hover and base.css put it on surface/sunken. The Pepper accent tokens stay --pui-accent-*. */
+  --accent-foreground: var(--pui-text-default);
+  --destructive: var(--pui-action-danger-bg); /* Paggy's .btn--red on the brand red (D35). shadcn base paints destructive at /10 tint; the Pepper Button paints it solid, as button.css does. */
+  --destructive-foreground: var(--pui-action-danger-fg); /* White on red/400 — 4.58:1, the contrast matrix's pair. */
+  --border: var(--pui-border-default); /* Card and input borders (neutral/200). */
+  --input: var(--pui-border-default); /* input.css:29 — the field border is border/default; focus swaps it for --ring. */
+  --ring: var(--pui-border-focus); /* D53: the focus hue (blue/300), QUOTED from styles.css:644–646. base.css paints it at 15 % in a 3 px box-shadow; shadcn paints ring-3 at /50 — the Pepper components use the Pepper ring. */
+  --chart-1: var(--pui-accent-chart-1); /* accent/chart/1–5 are accent-MODE tokens: emitted mode-free as --pui-accent-chart-n and re-resolved under [data-accent]. */
+  --chart-2: var(--pui-accent-chart-2);
+  --chart-3: var(--pui-accent-chart-3);
+  --chart-4: var(--pui-accent-chart-4);
+  --chart-5: var(--pui-accent-chart-5);
+  --radius: var(--pui-radius-8); /* button.css / input.css radius 8 — shadcn derives rounded-sm/md/lg/xl from this one value (× .6 / .8 / 1 / 1.4). Cards are radius/16: reach it as rounded-pui-16 from tailwind.css, not as rounded-2xl (= 14.4). */
+  --sidebar: var(--pui-nav-bg); /* sidebar.css — the rail's ground (neutral/800). */
+  --sidebar-foreground: var(--pui-nav-item-fg); /* Rest ink of a nav item. */
+  --sidebar-primary: var(--pui-nav-item-bg-active); /* The active item's wash (white at 16 %). */
+  --sidebar-primary-foreground: var(--pui-nav-item-fg-active);
+  --sidebar-accent: var(--pui-nav-item-bg-hover); /* The hover wash (white at 8 %). */
+  --sidebar-accent-foreground: var(--pui-nav-item-fg-active);
+  --sidebar-border: var(--pui-nav-item-bg-hover); /* The rail has no border token (sidebar.css border: 0; decorative separators are banned) — the hover wash is the only line it may draw, so shadcn's Sidebar separators fall on it. */
+  --sidebar-ring: var(--pui-border-focus); /* One focus hue everywhere. */
+
+  /* Pepper's status pairs — not shadcn names, added the way customization.md § Adding Custom Colors says */
+  --success: var(--pui-status-success-bg); /* Not a shadcn name — added the way customization.md § Adding Custom Colors says. MAFO's screens show success, danger and neutral (D53); a shadcn Badge/Alert on the tint pairs. */
+  --success-foreground: var(--pui-status-success-fg);
+  --warning: var(--pui-status-warning-bg);
+  --warning-foreground: var(--pui-status-warning-fg);
+  --info: var(--pui-status-info-bg);
+  --info-foreground: var(--pui-status-info-fg); /* status/info/solid stays the brand blue (D53) — the tint pair is what text sits on. */
+
+  /* The focus ring — read from packages/css/src/base.css at build (3.5.5), so the React parts draw the ring
+   * @pepperui/css draws: a solid 2 px border/focus line with the soft halo outside it; the error pair; the inset form. */
+  --pui-ring-color: color-mix(in srgb, var(--pui-border-focus) 15%, transparent);
+  --pui-ring-error-color: color-mix(in srgb, var(--pui-border-error) 10%, transparent);
+  --pui-ring: 0 0 0 2px var(--pui-border-focus), 0 0 0 5px var(--pui-ring-color);
+  --pui-ring-error: 0 0 0 3px var(--pui-ring-error-color);
+  --pui-ring-error-focus: 0 0 0 2px var(--pui-border-error), 0 0 0 5px var(--pui-ring-error-color);
+  --pui-ring-inset: inset 0 0 0 2px var(--pui-border-focus);
+}
+
+/* Tailwind v4 — the block shadcn's preset writes into globals.css. A browser and Tailwind v3 ignore it. */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+/* Ground modes (tokens.css [data-ground]) — a name that points at a role which follows the ground is declared again
+ * where the ground changes: a custom property computes on the element that declares it, so the :root line alone
+ * would hand every descendant the page value. */
+[data-ground] {
+  --muted: var(--pui-surface-sunken);
+  --accent: var(--pui-surface-sunken);
+}

package/dist/tailwind.css

@@ -0,0 +1,213 @@
+/**
+ * tailwind.css — the Tailwind v4 theme: every Pepper scale as a `pui-` key, by reference into tokens.css
+ * GENERATED by `npm run build` from tokens/*.json — do not edit by hand.
+ * Pepper UI, the Mobupps design system. Source of truth: bitbucket.org/rashidmobupps/pepper-ui
+ */
+
+/* Load order: tokens.css → shadcn.css → this file, all @imported from the app's Tailwind v4 entry (the file that
+ * says @import "tailwindcss"). Tailwind v3 uses tailwind.js instead. Keys carry the token's own name, so the class
+ * is the token: p-pui-8 · gap-pui-16 · rounded-pui-16 · text-pui-14 · font-pui-500 · font-pui · shadow-pui-card ·
+ * bg-pui-surface-card · text-pui-text-muted · border-pui-border-default · h-control-medium · size-icon-16 ·
+ * ease-pui-standard · tablet: / desktop:. Tailwind's own scale stays available; it is not a token (AGENTS.md § 2). */
+
+@theme inline {
+  /* Colour roles — tier 2 semantic + tier 3 component tokens, never a primitive (components bind roles) */
+  --color-pui-icon-list-ink: var(--pui-icon-list-ink);
+  --color-pui-table-header-bg: var(--pui-table-header-bg);
+  --color-pui-table-header-pill-tint: var(--pui-table-header-pill-tint);
+  --color-pui-table-row-selected-bg: var(--pui-table-row-selected-bg);
+  --color-pui-table-divider: var(--pui-table-divider);
+  --color-pui-card-band: var(--pui-card-band);
+  --color-pui-avatar-blue-bg: var(--pui-avatar-blue-bg);
+  --color-pui-avatar-blue-fg: var(--pui-avatar-blue-fg);
+  --color-pui-avatar-red-bg: var(--pui-avatar-red-bg);
+  --color-pui-avatar-red-fg: var(--pui-avatar-red-fg);
+  --color-pui-avatar-yellow-bg: var(--pui-avatar-yellow-bg);
+  --color-pui-avatar-yellow-fg: var(--pui-avatar-yellow-fg);
+  --color-pui-toggle-on-bg: var(--pui-toggle-on-bg);
+  --color-pui-toggle-on-fg: var(--pui-toggle-on-fg);
+  --color-pui-tabs-track: var(--pui-tabs-track);
+  --color-pui-kpi-tone-blue-bg: var(--pui-kpi-tone-blue-bg);
+  --color-pui-kpi-tone-red-bg: var(--pui-kpi-tone-red-bg);
+  --color-pui-kpi-tone-yellow-bg: var(--pui-kpi-tone-yellow-bg);
+  --color-pui-kpi-tone-neutral-bg: var(--pui-kpi-tone-neutral-bg);
+  --color-pui-kpi-delta-ring: var(--pui-kpi-delta-ring);
+  --color-pui-nav-bg: var(--pui-nav-bg);
+  --color-pui-nav-item-fg: var(--pui-nav-item-fg);
+  --color-pui-nav-item-fg-active: var(--pui-nav-item-fg-active);
+  --color-pui-nav-item-bg-hover: var(--pui-nav-item-bg-hover);
+  --color-pui-nav-item-bg-active: var(--pui-nav-item-bg-active);
+  --color-pui-nav-section-fg: var(--pui-nav-section-fg);
+  --color-pui-illustration-shell: var(--pui-illustration-shell);
+  --color-pui-illustration-surface: var(--pui-illustration-surface);
+  --color-pui-illustration-detail: var(--pui-illustration-detail);
+  --color-pui-illustration-screen: var(--pui-illustration-screen);
+  --color-pui-illustration-deck: var(--pui-illustration-deck);
+  --color-pui-illustration-text: var(--pui-illustration-text);
+  --color-pui-illustration-outline-color: var(--pui-illustration-outline-color);
+  --color-pui-illustration-connector-color: var(--pui-illustration-connector-color);
+  --color-pui-illustration-arrow-color: var(--pui-illustration-arrow-color);
+  --color-pui-text-default: var(--pui-text-default);
+  --color-pui-text-muted: var(--pui-text-muted);
+  --color-pui-text-subtle: var(--pui-text-subtle);
+  --color-pui-text-on-accent: var(--pui-text-on-accent);
+  --color-pui-text-on-inverse: var(--pui-text-on-inverse);
+  --color-pui-text-link: var(--pui-text-link);
+  --color-pui-text-disabled: var(--pui-text-disabled);
+  --color-pui-text-error: var(--pui-text-error);
+  --color-pui-text-caption: var(--pui-text-caption);
+  --color-pui-surface-page: var(--pui-surface-page);
+  --color-pui-surface-card: var(--pui-surface-card);
+  --color-pui-surface-sunken: var(--pui-surface-sunken);
+  --color-pui-surface-inverse: var(--pui-surface-inverse);
+  --color-pui-surface-slot: var(--pui-surface-slot);
+  --color-pui-surface-glass: var(--pui-surface-glass);
+  --color-pui-surface-glass-strong: var(--pui-surface-glass-strong);
+  --color-pui-overlay-scrim: var(--pui-overlay-scrim);
+  --color-pui-border-default: var(--pui-border-default);
+  --color-pui-border-strong: var(--pui-border-strong);
+  --color-pui-border-focus: var(--pui-border-focus);
+  --color-pui-border-error: var(--pui-border-error);
+  --color-pui-action-primary-bg: var(--pui-action-primary-bg);
+  --color-pui-action-primary-bg-hover: var(--pui-action-primary-bg-hover);
+  --color-pui-action-primary-fg: var(--pui-action-primary-fg);
+  --color-pui-action-secondary-bg: var(--pui-action-secondary-bg);
+  --color-pui-action-secondary-bg-hover: var(--pui-action-secondary-bg-hover);
+  --color-pui-action-secondary-fg: var(--pui-action-secondary-fg);
+  --color-pui-action-secondary-border: var(--pui-action-secondary-border);
+  --color-pui-action-danger-bg: var(--pui-action-danger-bg);
+  --color-pui-action-danger-bg-hover: var(--pui-action-danger-bg-hover);
+  --color-pui-action-danger-fg: var(--pui-action-danger-fg);
+  --color-pui-action-disabled-bg: var(--pui-action-disabled-bg);
+  --color-pui-action-disabled-fg: var(--pui-action-disabled-fg);
+  --color-pui-status-success-bg: var(--pui-status-success-bg);
+  --color-pui-status-success-fg: var(--pui-status-success-fg);
+  --color-pui-status-success-solid: var(--pui-status-success-solid);
+  --color-pui-status-danger-bg: var(--pui-status-danger-bg);
+  --color-pui-status-danger-fg: var(--pui-status-danger-fg);
+  --color-pui-status-danger-solid: var(--pui-status-danger-solid);
+  --color-pui-status-warning-bg: var(--pui-status-warning-bg);
+  --color-pui-status-warning-fg: var(--pui-status-warning-fg);
+  --color-pui-status-warning-solid: var(--pui-status-warning-solid);
+  --color-pui-status-info-bg: var(--pui-status-info-bg);
+  --color-pui-status-info-fg: var(--pui-status-info-fg);
+  --color-pui-status-info-solid: var(--pui-status-info-solid);
+  --color-pui-tint-neutral-bg: var(--pui-tint-neutral-bg);
+  --color-pui-tint-neutral-fg: var(--pui-tint-neutral-fg);
+  --color-pui-tint-blue-bg: var(--pui-tint-blue-bg);
+  --color-pui-tint-blue-fg: var(--pui-tint-blue-fg);
+  --color-pui-tint-red-bg: var(--pui-tint-red-bg);
+  --color-pui-tint-red-fg: var(--pui-tint-red-fg);
+  --color-pui-tint-yellow-bg: var(--pui-tint-yellow-bg);
+  --color-pui-tint-yellow-fg: var(--pui-tint-yellow-fg);
+  --color-pui-tint-green-bg: var(--pui-tint-green-bg);
+  --color-pui-tint-green-fg: var(--pui-tint-green-fg);
+  --color-pui-accent-main: var(--pui-accent-main);
+  --color-pui-accent-light: var(--pui-accent-light);
+  --color-pui-accent-lighter: var(--pui-accent-lighter);
+  --color-pui-accent-bg: var(--pui-accent-bg);
+  --color-pui-accent-dark: var(--pui-accent-dark);
+  --color-pui-accent-on-accent: var(--pui-accent-on-accent);
+  --color-pui-accent-heading: var(--pui-accent-heading);
+  --color-pui-accent-icon-ink: var(--pui-accent-icon-ink);
+  --color-pui-accent-text: var(--pui-accent-text);
+  --color-pui-accent-selected: var(--pui-accent-selected);
+  --color-pui-accent-pill-tint: var(--pui-accent-pill-tint);
+  --color-pui-accent-chart-1: var(--pui-accent-chart-1);
+  --color-pui-accent-chart-2: var(--pui-accent-chart-2);
+  --color-pui-accent-chart-3: var(--pui-accent-chart-3);
+  --color-pui-accent-chart-4: var(--pui-accent-chart-4);
+  --color-pui-accent-chart-5: var(--pui-accent-chart-5);
+  --color-pui-accent-gradient-far: var(--pui-accent-gradient-far);
+  --color-pui-chart-text: var(--pui-chart-text);
+  --color-pui-chart-grid: var(--pui-chart-grid);
+  --color-pui-chart-rest: var(--pui-chart-rest);
+  --color-pui-chart-on-fill: var(--pui-chart-on-fill);
+
+  /* Spacing steps — p-pui-8, gap-pui-16, w-pui-24 */
+  --spacing-pui-2: var(--pui-space-2);
+  --spacing-pui-4: var(--pui-space-4);
+  --spacing-pui-8: var(--pui-space-8);
+  --spacing-pui-12: var(--pui-space-12);
+  --spacing-pui-16: var(--pui-space-16);
+  --spacing-pui-20: var(--pui-space-20);
+  --spacing-pui-24: var(--pui-space-24);
+  --spacing-pui-32: var(--pui-space-32);
+  --spacing-pui-40: var(--pui-space-40);
+  --spacing-pui-48: var(--pui-space-48);
+  --spacing-pui-64: var(--pui-space-64);
+  --spacing-pui-80: var(--pui-space-80);
+
+  /* Sizes — h-control-medium (size/control, D41), size-icon-16 (size/icon) */
+  --spacing-icon-16: var(--pui-size-icon-16);
+  --spacing-icon-24: var(--pui-size-icon-24);
+  --spacing-icon-32: var(--pui-size-icon-32);
+  --spacing-icon-48: var(--pui-size-icon-48);
+  --spacing-control-small: var(--pui-size-control-small);
+  --spacing-control-medium: var(--pui-size-control-medium);
+  --spacing-control-large: var(--pui-size-control-large);
+
+  /* Radius — rounded-pui-8; shadcn's rounded-lg is --radius (= radius/8) from shadcn.css */
+  --radius-pui-4: var(--pui-radius-4);
+  --radius-pui-8: var(--pui-radius-8);
+  --radius-pui-16: var(--pui-radius-16);
+  --radius-pui-32: var(--pui-radius-32);
+  --radius-pui-64: var(--pui-radius-64);
+  --radius-pui-full: var(--pui-radius-full);
+
+  /* Type — font-pui is the face (Poppins; Onest under lang="ru" through base.css); text-pui-14; font-pui-500; leading-pui-normal; tracking-pui-normal */
+  --font-pui: var(--pui-font-family, var(--pui-font-family-poppins));
+  --text-pui-12: var(--pui-font-size-12);
+  --text-pui-13: var(--pui-font-size-13);
+  --text-pui-14: var(--pui-font-size-14);
+  --text-pui-15: var(--pui-font-size-15);
+  --text-pui-16: var(--pui-font-size-16);
+  --text-pui-18: var(--pui-font-size-18);
+  --text-pui-20: var(--pui-font-size-20);
+  --text-pui-22: var(--pui-font-size-22);
+  --text-pui-24: var(--pui-font-size-24);
+  --text-pui-25: var(--pui-font-size-25);
+  --text-pui-26: var(--pui-font-size-26);
+  --text-pui-28: var(--pui-font-size-28);
+  --text-pui-32: var(--pui-font-size-32);
+  --text-pui-36: var(--pui-font-size-36);
+  --text-pui-40: var(--pui-font-size-40);
+  --text-pui-41: var(--pui-font-size-41);
+  --text-pui-45: var(--pui-font-size-45);
+  --text-pui-46: var(--pui-font-size-46);
+  --text-pui-48: var(--pui-font-size-48);
+  --text-pui-64: var(--pui-font-size-64);
+  --text-pui-65: var(--pui-font-size-65);
+  --text-pui-66: var(--pui-font-size-66);
+  --text-pui-92: var(--pui-font-size-92);
+  --text-pui-117: var(--pui-font-size-117);
+  --text-pui-148: var(--pui-font-size-148);
+  --font-weight-pui-400: var(--pui-font-weight-400);
+  --font-weight-pui-500: var(--pui-font-weight-500);
+  --font-weight-pui-600: var(--pui-font-weight-600);
+  --font-weight-pui-700: var(--pui-font-weight-700);
+  --leading-pui-tight: var(--pui-font-line-height-tight);
+  --leading-pui-normal: var(--pui-font-line-height-normal);
+  --leading-pui-relaxed: var(--pui-font-line-height-relaxed);
+  --leading-pui-loose: var(--pui-font-line-height-loose);
+  --tracking-pui-normal: var(--pui-font-letter-spacing-normal);
+  --tracking-pui-tight: var(--pui-font-letter-spacing-tight);
+  --tracking-pui-wide: var(--pui-font-letter-spacing-wide);
+  --tracking-pui-wider: var(--pui-font-letter-spacing-wider);
+
+  /* Elevation — shadow-pui-card (the four roles; the raw shadow steps stay in tokens.css) */
+  --shadow-pui-flat: var(--pui-elevation-flat);
+  --shadow-pui-card: var(--pui-elevation-card);
+  --shadow-pui-floating: var(--pui-elevation-floating);
+  --shadow-pui-modal: var(--pui-elevation-modal);
+
+  /* Motion — ease-pui-standard. Durations are not a theme namespace: duration-[var(--pui-motion-state)] */
+  --ease-pui-standard: var(--pui-easing-standard);
+  --ease-pui-decelerate: var(--pui-easing-decelerate);
+}
+
+/* Breakpoints resolve into media queries, which cannot read a custom property — so these two are values, not references. */
+@theme {
+  --breakpoint-tablet: 768px;
+  --breakpoint-desktop: 1024px;
+}

package/dist/tailwind.js

@@ -0,0 +1,214 @@
+/** Tailwind preset — GENERATED from tokens/*.json, do not edit by hand.
+ *  Consumed by the products (MAFO, iRTB) via `presets: [require('@pepperui/tokens/tailwind')]`. */
+export default {
+  "theme": {
+    "extend": {
+      "colors": {
+        "neutral": {
+          "0": "#ffffff",
+          "100": "#f2f2f2",
+          "200": "#dad9d9",
+          "300": "#b5b3b3",
+          "400": "#858080",
+          "500": "#6c6666",
+          "600": "#544d4d",
+          "700": "#3b3333",
+          "800": "#231b1b",
+          "900": "#0b0202",
+          "1000": "#000000"
+        },
+        "blue": {
+          "100": "#e9e9fb",
+          "200": "#d4d3f7",
+          "300": "#6a66e4",
+          "400": "#2b25d9",
+          "500": "#221dad",
+          "600": "#110e56",
+          "700": "#0c0b41"
+        },
+        "red": {
+          "100": "#fce9e8",
+          "200": "#f9d3d2",
+          "300": "#ec6663",
+          "400": "#e42521",
+          "500": "#b61d1a",
+          "600": "#5b0e0d",
+          "700": "#440b09"
+        },
+        "yellow": {
+          "100": "#fef9e9",
+          "200": "#fdf3d3",
+          "300": "#fad567",
+          "400": "#f9c426",
+          "500": "#c79c1e",
+          "600": "#634e0f",
+          "700": "#4a3a0b"
+        },
+        "green": {
+          "100": "#d4f2de",
+          "400": "#74af36",
+          "600": "#1a6b36"
+        },
+        "status": {
+          "success": {
+            "bg": "#d4f2de",
+            "fg": "#1a6b36",
+            "solid": "#74af36"
+          },
+          "danger": {
+            "bg": "#fce9e8",
+            "fg": "#5b0e0d",
+            "solid": "#da4144"
+          },
+          "warning": {
+            "bg": "#fef9e9",
+            "fg": "#634e0f",
+            "solid": "#f9c426"
+          },
+          "info": {
+            "bg": "#e9e9fb",
+            "fg": "#110e56",
+            "solid": "#2b25d9"
+          }
+        },
+        "light-blue": {
+          "50": "#fbfbfd",
+          "100": "#f2f2f7"
+        },
+        "gradient-stop": {
+          "pink": "#f24288",
+          "orchid": "#ebb8fc",
+          "magenta": "#d947d6"
+        },
+        "alpha": {
+          "neutral-800-50": "#231b1b80",
+          "white-8": "#ffffff14",
+          "white-16": "#ffffff29",
+          "black-7": "#00000012",
+          "grey-232-49": "#e8e8e87d",
+          "white-71": "#ffffffb5"
+        },
+        "text": {
+          "default": "#0b0202",
+          "muted": "#544d4d",
+          "subtle": "#858080",
+          "on-accent": "#ffffff",
+          "on-inverse": "#ffffff",
+          "link": "#2b25d9",
+          "disabled": "#b5b3b3",
+          "error": "#e42521",
+          "caption": "#544d4d"
+        },
+        "surface": {
+          "page": "#ffffff",
+          "card": "#f2f2f7",
+          "sunken": "#f2f2f2",
+          "inverse": "#231b1b",
+          "slot": "#ffffff",
+          "glass": "#e8e8e87d",
+          "glass-strong": "#ffffffb5"
+        },
+        "border": {
+          "default": "#dad9d9",
+          "strong": "#858080",
+          "focus": "#6a66e4",
+          "error": "#e42521"
+        },
+        "action": {
+          "primary": {
+            "bg": "#0b0202",
+            "bg-hover": "#3b3333",
+            "fg": "#ffffff"
+          },
+          "secondary": {
+            "bg": "#ffffff",
+            "bg-hover": "#f2f2f2",
+            "fg": "#0b0202",
+            "border": "#dad9d9"
+          },
+          "danger": {
+            "bg": "#e42521",
+            "bg-hover": "#b61d1a",
+            "fg": "#ffffff"
+          },
+          "disabled": {
+            "bg": "#f2f2f2",
+            "fg": "#b5b3b3"
+          }
+        }
+      },
+      "spacing": {
+        "2": "2px",
+        "4": "4px",
+        "8": "8px",
+        "12": "12px",
+        "16": "16px",
+        "20": "20px",
+        "24": "24px",
+        "32": "32px",
+        "40": "40px",
+        "48": "48px",
+        "64": "64px",
+        "80": "80px"
+      },
+      "borderRadius": {
+        "4": "4px",
+        "8": "8px",
+        "16": "16px",
+        "32": "32px",
+        "64": "64px",
+        "full": "9999px"
+      },
+      "fontSize": {
+        "12": "12px",
+        "13": "13px",
+        "14": "14px",
+        "15": "15px",
+        "16": "16px",
+        "18": "18px",
+        "20": "20px",
+        "22": "22px",
+        "24": "24px",
+        "25": "25px",
+        "26": "26px",
+        "28": "28px",
+        "32": "32px",
+        "36": "36px",
+        "40": "40px",
+        "41": "41px",
+        "45": "45px",
+        "46": "46px",
+        "48": "48px",
+        "64": "64px",
+        "65": "65px",
+        "66": "66px",
+        "92": "92px",
+        "117": "117px",
+        "148": "148px"
+      },
+      "fontWeight": {
+        "400": 400,
+        "500": 500,
+        "600": 600,
+        "700": 700
+      },
+      "boxShadow": {
+        "sm": "0px 1px 2px 0px #0000000d",
+        "lg": "0px 24px 48px -12px #0000002e",
+        "xl": "0px 24px 64px 0px #1510511f",
+        "xxl": "0px 32px 64px 0px #00000024"
+      },
+      "transitionDuration": {
+        "instant": "50ms",
+        "fast": "150ms",
+        "medium": "200ms",
+        "slow": "250ms",
+        "slower": "300ms"
+      },
+      "screens": {
+        "tablet": "768px",
+        "desktop": "1024px"
+      }
+    }
+  }
+};