@brokenrubik/ui 0.0.0-stage → 0.1.1

package/dist/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAC7C,OAAO,EAAqC,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEzF;;;;GAIG;AACH,eAAO,MAAM,WAAW,YACtB,SAAS,EACT,YAAY,EACZ,SAAS,EACT,YAAY,EACZ,SAAS,EACT,MAAM,EACN,SAAS,EACT,SAAS,EACT,UAAU,EACV,KAAK,EACL,WAAW,EACX,UAAU,EACV,aAAa,EACb,MAAM,EACN,SAAS,EACT,WAAW,EACX,QAAQ,EACR,UAAU,CACF,CAAC;AAEX,KAAK,WAAW,GAAG,eAAe,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEnD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,MAAM,CAAC,EAAE,WAAW,eAIxB,UAAU,EAAE,YAChC;AAED,+EAA+E;AAC/E,eAAO,MAAM,EAAE,cAJM,UAAU,EAAE,WAIL,CAAC"}

package/dist/lib/utils.js

@@ -0,0 +1,40 @@
+import { clsx } from 'clsx';
+import { extendTailwindMerge, mergeConfigs } from 'tailwind-merge';
+/**
+ * The BR text styles registered as `text-*` font sizes in theme.css. tailwind-merge must
+ * know them: by default it reads an unknown `text-foo` as a color, so `cn('text-body',
+ * 'text-muted-foreground')` would drop `text-body`.
+ */
+export const brTextSizes = [
+    'display',
+    'page-title',
+    'section',
+    'card-title',
+    'body-lg',
+    'body',
+    'body-sm',
+    'caption',
+    'overline',
+    'nav',
+    'nav-label',
+    'initials',
+    'initials-sm',
+    'mono',
+    'mono-sm',
+    'doc-title',
+    'doc-h2',
+    'doc-body',
+];
+/**
+ * Builds a `cn` for an app that adds its own scales on top of the BR theme (for example
+ * extra `text-*` sizes or `shadow-*` names), so tailwind-merge groups them right.
+ *
+ *   export const cn = createCn({ extend: { theme: { text: ['hero'] } } });
+ */
+export function createCn(config) {
+    const merge = extendTailwindMerge({ extend: { theme: { text: [...brTextSizes] } } }, (base) => config ? mergeConfigs(base, config) : base);
+    return (...inputs) => merge(clsx(inputs));
+}
+/** Joins class names and resolves Tailwind conflicts (the last class wins). */
+export const cn = createCn();
+//# sourceMappingURL=utils.js.map

package/dist/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,MAAM,CAAC;AAC7C,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAwB,MAAM,gBAAgB,CAAC;AAEzF;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,SAAS;IACT,YAAY;IACZ,SAAS;IACT,YAAY;IACZ,SAAS;IACT,MAAM;IACN,SAAS;IACT,SAAS;IACT,UAAU;IACV,KAAK;IACL,WAAW;IACX,UAAU;IACV,aAAa;IACb,MAAM;IACN,SAAS;IACT,WAAW;IACX,QAAQ;IACR,UAAU;CACF,CAAC;AAIX;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CAAC,MAAoB;IAC3C,MAAM,KAAK,GAAG,mBAAmB,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,GAAG,WAAW,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,IAAI,EAAE,EAAE,CAC5F,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAC3C,CAAC;IACF,OAAO,CAAC,GAAG,MAAoB,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;AAC1D,CAAC;AAED,+EAA+E;AAC/E,MAAM,CAAC,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAC"}

package/dist/styles/base.css

@@ -0,0 +1,37 @@
+/*
+ * @brokenrubik/ui — base styles (optional). Page defaults from the BR Admin Library:
+ * Body/Default (13/20 IBM Plex Sans) on --background, slate borders, balanced headings.
+ * Skip this file if the app sets its own base; tokens.css and theme.css work without it.
+ */
+@layer base {
+  *,
+  ::before,
+  ::after {
+    border-color: var(--color-border);
+    outline-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+  }
+
+  html {
+    font-family: var(--font-sans);
+  }
+
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    font-size: var(--text-body);
+    line-height: var(--text-body--line-height);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+
+  h1,
+  h2,
+  h3 {
+    text-wrap: balance;
+  }
+
+  p {
+    text-wrap: pretty;
+  }
+}

package/dist/styles/fonts.css

@@ -0,0 +1,16 @@
+/*
+ * @brokenrubik/ui — fonts: IBM Plex Sans 400/500/600 and IBM Plex Mono 400/500 (the weights
+ * the BR Admin Library uses). styles.css imports this file, so apps get the fonts with no
+ * extra setup. The font files come from the @fontsource packages (dependencies of this
+ * package); the app's bundler copies them. Each @font-face has a unicode-range, so the
+ * browser downloads only the subsets (latin, latin-ext…) that the page uses.
+ *
+ * The families are "IBM Plex Sans" and "IBM Plex Mono", the default of --font-sans and
+ * --font-mono in theme.css. An app that loads the fonts in a different way (next/font) can
+ * set --font-plex-sans / --font-plex-mono; these faces are then never downloaded.
+ */
+@import "@fontsource/ibm-plex-sans/400.css";
+@import "@fontsource/ibm-plex-sans/500.css";
+@import "@fontsource/ibm-plex-sans/600.css";
+@import "@fontsource/ibm-plex-mono/400.css";
+@import "@fontsource/ibm-plex-mono/500.css";

package/dist/styles/styles.css

@@ -0,0 +1,14 @@
+/*
+ * @brokenrubik/ui — everything: fonts, tokens, Tailwind theme, animations, base styles.
+ *
+ *   @import "tailwindcss";
+ *   @import "@brokenrubik/ui/styles.css";
+ *
+ * Need less? Import the parts: fonts.css (IBM Plex), tokens.css (CSS variables only),
+ * theme.css (Tailwind mapping), base.css (page defaults). Components need tokens.css + theme.css + tw-animate-css.
+ */
+@import "./fonts.css";
+@import "tw-animate-css";
+@import "./tokens.css";
+@import "./theme.css";
+@import "./base.css";

package/dist/styles/theme.css

@@ -0,0 +1,170 @@
+/*
+ * @brokenrubik/ui — Tailwind v4 theme.
+ *
+ * Maps the tokens (tokens.css) to Tailwind utilities and sets the BR Admin Library scales
+ * (radius, shadow, type). Import it after `tailwindcss`:
+ *
+ *   @import "tailwindcss";
+ *   @import "@brokenrubik/ui/styles.css";   // tokens + theme + base (or this file alone)
+ *
+ * Tailwind v4 has no JS config to inherit: this file IS the shared config. To extend or
+ * change it in an app, add your own `@theme { … }` block after the import. A later
+ * declaration of the same variable wins.
+ */
+
+/* The components live in this package; let the app's Tailwind find their classes. */
+@source "../";
+
+/* `dark:` follows the `.dark` class on <html> (all BR apps), not the OS preference. */
+@custom-variant dark (&:where(.dark, .dark *));
+
+@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-primary-strong: var(--primary-strong);
+  --color-primary-tint: var(--primary-tint);
+
+  --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-destructive-strong: var(--destructive-strong);
+  --color-destructive-tint: var(--destructive-tint);
+  --color-success: var(--success);
+  --color-success-strong: var(--success-strong);
+  --color-success-tint: var(--success-tint);
+  --color-warning: var(--warning);
+  --color-warning-strong: var(--warning-strong);
+  --color-warning-tint: var(--warning-tint);
+  --color-info: var(--info);
+  --color-info-strong: var(--info-strong);
+  --color-info-tint: var(--info-tint);
+
+  --color-highlight: var(--highlight);
+  --color-highlight-foreground: var(--highlight-foreground);
+  --color-brand-coral: var(--brand-coral);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-overlay: var(--overlay);
+  --color-surface-subtle: var(--surface-subtle);
+
+  --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-muted-foreground: var(--sidebar-muted-foreground);
+  --color-sidebar-label: var(--sidebar-label);
+  --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-accent-strong: var(--sidebar-accent-strong);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --color-app-proma: var(--app-proma);
+  --color-app-folio: var(--app-folio);
+  --color-app-docubuilder: var(--app-docubuilder);
+  --color-app-timma: var(--app-timma);
+  --color-app-mara: var(--app-mara);
+
+  /* Figma radius/*: xs 4 · sm 5 · md 6 · lg 8 · xl 12 · full. One knob: --radius. */
+  --radius-xs: calc(var(--radius) - 4px);
+  --radius-sm: calc(var(--radius) - 3px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  /* IBM Plex: fonts.css (in styles.css) loads "IBM Plex Sans" / "IBM Plex Mono". An app that
+     loads the fonts another way (next/font) sets --font-plex-sans / --font-plex-mono. */
+  --font-sans: var(--font-plex-sans, "IBM Plex Sans"), ui-sans-serif, system-ui, sans-serif;
+  --font-mono: var(--font-plex-mono, "IBM Plex Mono"), ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+@theme {
+  /* Figma effect styles Shadow/xs, Shadow/md, Shadow/lg (slate-900 based). */
+  --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.05);
+  --shadow-md: 0 4px 12px -2px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.05);
+  --shadow-lg: 0 16px 32px -8px rgb(15 23 42 / 0.16), 0 4px 8px -4px rgb(15 23 42 / 0.06);
+
+  /*
+   * Figma text styles as `text-*` utilities (size + line height + letter spacing + weight).
+   * A dense admin scale on a 13 px base. Tailwind's own text-xs … text-9xl stay available.
+   * "… Medium" styles: add `font-medium`.
+   */
+  --text-display: 32px; /* Heading/Display */
+  --text-display--line-height: 40px;
+  --text-display--letter-spacing: -0.48px;
+  --text-display--font-weight: 600;
+  --text-page-title: 20px; /* Heading/Page title */
+  --text-page-title--line-height: 28px;
+  --text-page-title--letter-spacing: -0.4px;
+  --text-page-title--font-weight: 600;
+  --text-section: 15px; /* Heading/Section */
+  --text-section--line-height: 20px;
+  --text-section--letter-spacing: -0.2px;
+  --text-section--font-weight: 600;
+  --text-card-title: 14px; /* Heading/Card */
+  --text-card-title--line-height: 20px;
+  --text-card-title--letter-spacing: -0.1px;
+  --text-card-title--font-weight: 600;
+  --text-body-lg: 15px; /* Body/Large */
+  --text-body-lg--line-height: 22px;
+  --text-body: 13px; /* Body/Default */
+  --text-body--line-height: 20px;
+  --text-body-sm: 12px; /* Body/Small */
+  --text-body-sm--line-height: 16px;
+  --text-caption: 11px; /* Label/Caption */
+  --text-caption--line-height: 16px;
+  --text-overline: 11px; /* Label/Overline (add `uppercase`) */
+  --text-overline--line-height: 16px;
+  --text-overline--letter-spacing: 0.4px;
+  --text-overline--font-weight: 500;
+  --text-nav: 14px; /* Nav/Item */
+  --text-nav--line-height: 20px;
+  --text-nav--letter-spacing: -0.15px;
+  --text-nav--font-weight: 500;
+  --text-nav-label: 12px; /* Nav/Group label */
+  --text-nav-label--line-height: 16px;
+  --text-nav-label--font-weight: 500;
+  --text-initials: 11px; /* Label/Initials */
+  --text-initials--line-height: 16px;
+  --text-initials--letter-spacing: 0.2px;
+  --text-initials--font-weight: 600;
+  --text-initials-sm: 8px; /* Label/Initials small */
+  --text-initials-sm--line-height: 12px;
+  --text-initials-sm--letter-spacing: 0.2px;
+  --text-initials-sm--font-weight: 600;
+  --text-mono: 12px; /* Mono/Default (with font-mono) */
+  --text-mono--line-height: 16px;
+  --text-mono-sm: 11px; /* Mono/Small (with font-mono) */
+  --text-mono-sm--line-height: 16px;
+  --text-doc-title: 36px; /* Doc/Title */
+  --text-doc-title--line-height: 44px;
+  --text-doc-title--letter-spacing: -0.72px;
+  --text-doc-title--font-weight: 600;
+  --text-doc-h2: 20px; /* Doc/H2 */
+  --text-doc-h2--line-height: 28px;
+  --text-doc-h2--letter-spacing: -0.2px;
+  --text-doc-h2--font-weight: 600;
+  --text-doc-body: 15px; /* Doc/Body */
+  --text-doc-body--line-height: 26px;
+}

package/dist/styles/tokens.css

@@ -0,0 +1,228 @@
+/*
+ * @brokenrubik/ui — design tokens (BR Admin Library, Figma file ONZyUryZr526mtbex2HVPk).
+ *
+ * Plain CSS custom properties, no Tailwind needed: an app without Tailwind (or app-shell)
+ * can import only this file. Names match shadcn/ui, so `var(--primary)` here is `primary`
+ * in Figma (every Theme variable has the code syntax var(--name)). Modes of the Figma
+ * "Theme" collection:
+ *   Light                 → :root
+ *   Dark                  → .dark (class on <html>)
+ *   Light · Sidebar claro → .sidebar-light on <html>
+ *   Dark · Sidebar claro  → .dark.sidebar-light on <html>
+ *
+ * Every color is a Figma variable. Values read from Figma on 2026-11-11 through the Figma
+ * MCP (all 58 Theme variables, all modes). Check again: scripts/figma-sync.mjs.
+ * --radius is not a Figma variable: the Figma Radius collection (4/5/6/8/12) is derived from it
+ * in theme.css.
+ *
+ * Override any token in the app, after this file:  :root { --primary: #7c3aed; }
+ */
+
+:root {
+  color-scheme: light;
+
+  /* Radius scale base: lg = radius, md = -2px, sm = -3px, xs = -4px, xl = +4px
+     → 8 / 6 / 5 / 4 / 12 px, as Figma's radius/* variables. */
+  --radius: 0.5rem;
+
+  /* Surfaces */
+  --background: #ffffff;
+  --foreground: #0f172a;
+  --card: #ffffff;
+  --card-foreground: #0f172a;
+  --popover: #ffffff;
+  --popover-foreground: #0f172a;
+
+  /* BR violet: the click color. Never use --primary for text: use --primary-strong. */
+  --primary: #9547ff;
+  --primary-foreground: #ffffff;
+  --primary-strong: #6b1fd0;
+  --primary-tint: #f4edff;
+
+  /* Neutrals (shadcn meaning: secondary and accent are slate, not brand) */
+  --secondary: #f1f5f9;
+  --secondary-foreground: #0f172a;
+  --muted: #f1f5f9;
+  --muted-foreground: #64748b;
+  --accent: #f1f5f9;
+  --accent-foreground: #0f172a;
+
+  /* States: base for dots and bars, -strong for text and icons, -tint for soft fills */
+  --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+  --destructive-strong: #dc2626;
+  --destructive-tint: #fef2f2;
+  --success: #10b981;
+  --success-strong: #047857;
+  --success-tint: #ecfdf5;
+  --warning: #f59e0b;
+  --warning-strong: #b45309;
+  --warning-tint: #fffbeb;
+  --info: #3b82f6;
+  --info-strong: #1d4ed8;
+  --info-tint: #eff6ff;
+
+  /* BR lime: "you are here" only (active nav item, active space chip). Never body text. */
+  --highlight: #dff95f;
+  --highlight-foreground: #0f172a;
+  /* Marketing and illustration only, never in product UI. */
+  --brand-coral: #ff707a;
+
+  /* Lines and focus */
+  --border: #e2e8f0;
+  /* Form-control borders: 3:1 against white (WCAG 2.2 non-text contrast). */
+  --input: #8391a7;
+  --ring: #9547ff;
+  /* The dialog and sheet backdrop. */
+  --overlay: rgb(0 0 0 / 0.5);
+  /* A slightly raised page area (Figma surface-subtle). */
+  --surface-subtle: #fbfdfd;
+
+  /* Data series */
+  --chart-1: #9547ff;
+  --chart-2: #64748b;
+  --chart-3: #c4a6ff;
+  --chart-4: #cbd5e1;
+  --chart-5: #6b1fd0;
+
+  /* Sidebar and App Rail: navy in both themes */
+  --sidebar: #0f172a;
+  --sidebar-foreground: #ffffff;
+  --sidebar-muted-foreground: #cbd5e1;
+  --sidebar-label: #94a3b8;
+  --sidebar-primary: #dff95f;
+  --sidebar-primary-foreground: #0f172a;
+  --sidebar-accent: rgb(255 255 255 / 0.08);
+  --sidebar-accent-foreground: #ffffff;
+  /* A stronger hover/selected fill on the sidebar. */
+  --sidebar-accent-strong: rgb(255 255 255 / 0.15);
+  --sidebar-border: rgb(255 255 255 / 0.1);
+  --sidebar-ring: #a875ff;
+
+  /* App identity (Brand · Product family): logo, app icon, App Rail only. */
+  --app-proma: #3e63dd;
+  --app-folio: #0d9488;
+  --app-docubuilder: #9d3f8c;
+  --app-timma: #c2581c;
+  --app-mara: #2f855a;
+}
+
+.dark {
+  color-scheme: dark;
+
+  --background: #0f172a;
+  --foreground: #e2e8f0;
+  --card: #162032;
+  --card-foreground: #e2e8f0;
+  --popover: #162032;
+  --popover-foreground: #e2e8f0;
+
+  --primary: #9547ff;
+  --primary-foreground: #ffffff;
+  --primary-strong: #a875ff;
+  --primary-tint: rgb(149 71 255 / 0.2);
+
+  --secondary: #1e293b;
+  --secondary-foreground: #f8fafc;
+  --muted: #1e293b;
+  --muted-foreground: #94a3b8;
+  --accent: rgb(255 255 255 / 0.05);
+  --accent-foreground: #f8fafc;
+
+  --destructive: #dc2626;
+  --destructive-foreground: #ffffff;
+  --destructive-strong: #f87171;
+  --destructive-tint: rgb(239 68 68 / 0.15);
+  --success: #10b981;
+  --success-strong: #34d399;
+  --success-tint: rgb(16 185 129 / 0.15);
+  --warning: #f59e0b;
+  --warning-strong: #fbbf24;
+  --warning-tint: rgb(245 158 11 / 0.15);
+  --info: #3b82f6;
+  --info-strong: #60a5fa;
+  --info-tint: rgb(59 130 246 / 0.15);
+
+  --highlight: #dff95f;
+  --highlight-foreground: #0f172a;
+
+  --border: rgb(255 255 255 / 0.1);
+  --input: #64748b;
+  --ring: #9547ff;
+  --overlay: rgb(0 0 0 / 0.6);
+  --surface-subtle: #0f172a;
+
+  --chart-2: #94a3b8;
+  --chart-4: #475569;
+  --chart-5: #a875ff;
+
+  --sidebar: #0b1120;
+  --sidebar-foreground: #e2e8f0;
+
+  --app-proma: #5b7bea;
+  --app-folio: #14a89a;
+  --app-docubuilder: #b65aa5;
+  --app-timma: #e07a3e;
+  --app-mara: #48a878;
+}
+
+/* Sidebar claro: a personal choice, in the light and the dark theme. Only sidebar-* change. */
+:root.sidebar-light {
+  --sidebar: #f1f5f9;
+  --sidebar-foreground: #0f172a;
+  --sidebar-muted-foreground: #334155;
+  --sidebar-label: #64748b;
+  --sidebar-primary: #9547ff;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #ffffff;
+  --sidebar-accent-foreground: #0f172a;
+  --sidebar-accent-strong: #e2e8f0;
+  --sidebar-border: #e2e8f0;
+  --sidebar-ring: #9547ff;
+}
+
+/* Dark · Sidebar claro: the app identity colors sit on the light sidebar, so they keep
+   their light values. */
+:root.dark.sidebar-light {
+  --app-proma: #3e63dd;
+  --app-folio: #0d9488;
+  --app-docubuilder: #9d3f8c;
+  --app-timma: #c2581c;
+  --app-mara: #2f855a;
+}
+
+/*
+ * Put .sidebar-surface on the sidebar element: inside it the shared tokens point at the
+ * sidebar-* ones, so every component reads right on navy (or on the light sidebar)
+ * without per-component styles. Menus and dialogs render in portals and keep the page theme.
+ */
+.sidebar-surface {
+  color-scheme: dark;
+  --background: var(--sidebar);
+  --card: #1e293b;
+  --foreground: var(--sidebar-foreground);
+  --muted: rgb(255 255 255 / 0.06);
+  --muted-foreground: var(--sidebar-label);
+  --accent: var(--sidebar-accent);
+  --accent-foreground: var(--sidebar-accent-foreground);
+  --primary: var(--sidebar-primary);
+  --primary-foreground: var(--sidebar-primary-foreground);
+  --primary-strong: var(--sidebar-primary);
+  --primary-tint: var(--sidebar-accent);
+  --border: var(--sidebar-border);
+  --input: rgb(255 255 255 / 0.12);
+  --ring: var(--sidebar-ring);
+  --success-strong: #34d399;
+  --destructive-strong: #f87171;
+  --warning-strong: #fbbf24;
+}
+
+:root.sidebar-light .sidebar-surface {
+  color-scheme: light;
+  --card: #ffffff;
+  --muted: #e2e8f0;
+  --input: #cbd5e1;
+  --success-strong: #047857;
+  --destructive-strong: #dc2626;
+  --warning-strong: #b45309;
+}

package/docs/design-handoff.md

@@ -0,0 +1,112 @@
+# Design handoff: requests for the BR Admin Library
+
+For: the designer who owns the Figma file *BR Admin Library* (`ONZyUryZr526mtbex2HVPk`).
+From: the `@brokenrubik/ui` package, which builds the components from this file.
+Date: 2026-11-11.
+
+The code reads the Figma file to check that the apps look the same as Figma. These changes make
+Figma and the code use the same names and the same values. Then a developer, or an AI agent,
+can go from a Figma layer to the code without a translation table.
+
+## Status
+
+| Part | Status |
+| --- | --- |
+| 1. Color variables | **Done (2026-11-11).** All 58 Theme variables have the code syntax `var(--name)` and a swatch on Foundations. The code now uses the exact Figma values in all 4 modes. |
+| 2. Confirm dark values | **Done (2026-11-11).** Read from the variables through the Figma MCP. |
+| 3. Component and property names | **Open.** See below. |
+
+### What changed in the code after parts 1 and 2
+
+The code follows Figma. These values changed in `src/styles/tokens.css`:
+
+- `info`: `#3B82F6` (blue/500) in light and dark.
+- `overlay`: black at 50 % (light) and 60 % (dark).
+- `sidebar-ring`: `#A875FF` (violet-400) on the navy sidebar, `#9547FF` on the light sidebar.
+- New: `surface-subtle`, `sidebar-accent-strong`, and the mode *Dark · Sidebar claro*.
+
+When you add or change a variable, keep the code syntax `var(--name)` and the swatch. A
+developer then reads all values through the Figma MCP (`scripts/figma/read-variables.js`) and
+the CI check shows every difference.
+
+## Part 3: Rename components and properties to the code names
+
+The code uses the shadcn/ui names. When Figma uses the same names, Dev Mode, the layer panel and
+the code all say the same thing.
+
+### Rules (use them for every component, also for future ones)
+
+1. **Component set name = the code component name**, in PascalCase, without spaces:
+   `DropdownMenuItem`, not "Menu Item". The table below has each name.
+2. **Property name = the code prop name**, in lowercase: `variant`, `size`, `tone`,
+   `orientation`.
+3. **Property value = the code value**, in lowercase: `default`, `outline`, `sm`. The main
+   style is called `default` (not "Primary"), as in shadcn.
+4. **A yes/no property** is a variant property with the values `false` and `true` (Figma then
+   shows a toggle): `checked=true`, `disabled=true`.
+5. **An interaction state that is not a prop** (hover, focus, open) stays as a property called
+   `state`, with lowercase values: `state=hover`, `state=focus`.
+6. **Text and boolean component properties** (Label, Show icon…) do not change. They are only
+   example content.
+
+Renaming in Figma is safe. Instances keep their link and their selected variants.
+
+### Table
+
+Only the parts that change are listed. Anything not in the table stays as it is today.
+
+| Figma today | Rename the set to | Property changes |
+| --- | --- | --- |
+| Button | `Button` | `Variant` → `variant`: Primary → `default`, Secondary → `secondary`, Outline → `outline`, Ghost → `ghost`, Destructive → `destructive`. `Size` → `size`: md → `default`, sm → `sm` |
+| Icon Button | merge into `Button` | In code, an icon button is a `Button` with `size="icon"`. Move the 4 variants into the Button set as `size` = `icon` (md) and `icon-sm` (sm), with `variant` = `ghost` or `outline`. If you prefer a separate set, name it `Button/Icon`. |
+| Badge | `Badge` | `Tone` → `variant`: lowercase values (`neutral`, `primary`, `success`, `warning`, `destructive`, `highlight`, `info`) |
+| Avatar | `Avatar` | `Size` → `size`. `Tone` → `tone`: lowercase values; Photo → `image` |
+| Key Chip | `Kbd` | `Variant` → `variant`: `highlight`, `muted`. `Size` → `size` |
+| Input | `Input` | `State` → `state`: `default`, `focus`, `disabled` |
+| Tab | `TabsTrigger` | `State` → `state`: Active → `active`, Inactive → `inactive` |
+| Switch | `Switch` | `State` → `checked`: Off → `false`, On → `true` |
+| Menu Item | `DropdownMenuItem` | `State` → `state`: `default`, `hover` |
+| Tooltip | `Tooltip` | `Side` → `side`: `top` |
+| Checkbox | `Checkbox` | `State` → `checked`: Unchecked → `false`, Checked → `true` |
+| Select | `Select` | `State` → `state`: lowercase |
+| Textarea | `Textarea` | `State` → `state`: lowercase |
+| Date Picker | `DatePicker` | `State` → `state`: lowercase |
+| Calendar Day | `CalendarDay` | `State` → `state`: lowercase |
+| Radio | `RadioGroupItem` | `State` → split into `checked` (`false`, `true`) and `disabled` (`false`, `true`) |
+| Form Field | `Field` | `State` → split into `invalid` (`false`, `true`) and `disabled` (`false`, `true`) |
+| Dropdown Menu | `DropdownMenu` | — |
+| Dialog | `Dialog` | `Type` → `variant`: `default`, `destructive` (in code, the destructive one is `AlertDialog`) |
+| Alert | `Alert` | `Tone` → `variant`: lowercase (`info`, `success`, `warning`, `destructive`) |
+| Toast | `Toast` | `Tone` → `type`: Default → `default`, Success → `success`, Destructive → `error` |
+| Progress | `Progress` | `Tone` → `variant`: lowercase |
+| Skeleton | `Skeleton` | `Shape` → `shape`: lowercase |
+| Empty State | `EmptyState` | — |
+| Separator | `Separator` | `Orientation` → `orientation`: lowercase |
+| Toggle Group Item | `ToggleGroupItem` | `State` → `state`: Off → `off`, On → `on` |
+| Toggle Group | `ToggleGroup` | — |
+| Pagination Item | `PaginationLink` | `State` → `isActive`: Default → `false`, Active → `true` |
+| Pagination | `Pagination` | — |
+| Accordion Item | `AccordionItem` | `State` → `state`: Closed → `closed`, Open → `open` |
+
+Badge, Alert and Progress use `variant` because the code accepts `variant` and `tone` as the
+same prop, and shadcn uses `variant`. Avatar keeps `tone`, because there `variant` would mean
+nothing to a developer.
+
+### Before you rename
+
+Tell the developers the day before. The visual test in the code finds components by their Figma
+names. After the rename, a developer runs `pnpm figma:pull` and updates the names in the test
+(`playground/src/spec/Spec.tsx`) in the same pull request. If you rename without notice, the
+weekly *Figma drift* check fails, which is safe but noisy.
+
+## How to tell the developers about a future change
+
+1. Make the change in Figma.
+2. Open an issue in `BrokenRubik/ui` (or post in the team channel) with:
+   - the link to the changed node (right-click → *Copy link to selection*),
+   - one line per change: "Badge · Tone=Info: text is now `info-strong`".
+3. A developer updates the code, runs the visual test, and sends you the link to the docs site
+   to check.
+
+Every Monday, the *Figma drift* check compares the code with Figma and reports any difference,
+so a change that nobody announces is still found within a week.