@brokenrubik/ui 0.0.0-stage → 0.1.0

package/src/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/src/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;
+}