@assure-one/design-system 1.32.0 → 1.33.0

package/dist/tokens/index.d.ts

@@ -1,450 +1,61 @@
+export { C as ColorName, R as ReferenceTokens, S as SystemTokens, f as breakpoints, c as colors, i as iconSizes, l as layout, m as motion, o as overlays, r as radii, a as reference, s as shadows, b as spacing, d as surfaces, e as systemTokens, t as typography, z as zIndex } from '../system-BDU18fVg.js';
+
 /**
- * Reference tokens — raw palette.
+ * The seed a host supplies per tenant.
  *
- * Programmatic access for theme switching, Figma sync, design tools, etc.
- * Components should NOT consume these directly; use system tokens (./system.ts)
- * or the CSS variables in ./tokens.css.
- */
-declare const colors: {
-    readonly bg: "#ffffff";
-    readonly bg2: "#f1f3f8";
-    readonly bg3: "#e7eaf1";
-    readonly surface: "#ffffff";
-    readonly surface2: "#f7f8fc";
-    readonly fg: "#0a0a0a";
-    readonly fg2: "#38383b";
-    readonly fg3: "#5f5f64";
-    readonly fg4: "#6b6b70";
-    readonly fg5: "#9a9aa0";
-    readonly rule: "#e4e7ef";
-    readonly ruleSoft: "#eef0f5";
-    readonly ruleStrong: "#d3d8e3";
-    readonly accent: "#6c42f8";
-    readonly accent2: "#5127e8";
-    readonly accentTint: "#efeaff";
-    readonly accentHover: "#5e35f2";
-    readonly accentActive: "#5127e8";
-    readonly proBg: "#f4f1ff";
-    readonly proBgHover: "#eee9ff";
-    readonly proBgActive: "#e4ddff";
-    readonly proFg: "#6c42f8";
-    readonly proHover: "#5e35f2";
-    readonly proActive: "#5127e8";
-    readonly proDisabled: "#b7a7f3";
-    readonly proLine: "#7b5bd8";
-    readonly fgDisabled: "#a7a7ac";
-    readonly bgDisabled: "#f3f3f1";
-    readonly successFg: "#1f7a3d";
-    readonly successBg: "#eaf6ee";
-    readonly successLine: "#c5e5cf";
-    readonly warningFg: "#8a4606";
-    readonly warningBg: "#fff3e5";
-    readonly warningLine: "#f5d5a8";
-    readonly dangerFg: "#c43838";
-    readonly dangerBg: "#fbeaea";
-    readonly dangerLine: "#ecc5c5";
-    readonly fgOnAccent: "#ffffff";
-    readonly fgOnPro: "#ffffff";
-};
-declare const typography: {
-    readonly family: {
-        readonly display: "\"Plus Jakarta Sans\", -apple-system, system-ui, sans-serif";
-        readonly body: "\"Plus Jakarta Sans\", -apple-system, system-ui, sans-serif";
-        readonly mono: "\"Plus Jakarta Sans\", -apple-system, system-ui, sans-serif";
-    };
-    readonly weight: {
-        readonly regular: 400;
-        readonly medium: 500;
-        readonly semibold: 600;
-        readonly bold: 700;
-    };
-    readonly ease: "cubic-bezier(0.2, 0.8, 0.2, 1)";
-};
-declare const radii: {
-    readonly btn: "7px";
-    readonly input: "7px";
-    readonly pill: "5px";
-    readonly card: "12px";
-    readonly icon: "4px";
-    readonly full: "9999px";
-};
-declare const shadows: {
-    readonly quiet: "0 1px 2px rgba(10, 10, 10, 0.03)";
-    readonly card: "0 12px 28px -16px rgba(10, 10, 10, 0.18), 0 1px 2px rgba(10, 10, 10, 0.04)";
-    readonly pop: "0 30px 80px -30px rgba(10, 10, 10, 0.18), 0 8px 24px -8px rgba(10, 10, 10, 0.06)";
-    readonly focusRing: "0 0 0 2px rgba(108, 66, 248, 0.18)";
-};
-declare const overlays: {
-    readonly hover: "rgba(10, 10, 10, 0.03)";
-    readonly active: "rgba(10, 10, 10, 0.05)";
-};
-declare const layout: {
-    readonly shellSidebarWidth: "200px";
-    readonly shellHeaderHeight: "56px";
-    readonly contentPad: "32px";
-};
-/**
- * Spacing — 4px base scale. Components mostly use arbitrary values;
- * this scale is exposed for programmatic access (e.g. design-tool sync).
+ * @experimental Gated by decision D7.
  */
-declare const spacing: {
-    readonly unit: "4px";
-    readonly 4: "4px";
-    readonly 8: "8px";
-    readonly 12: "12px";
-    readonly 16: "16px";
-    readonly 20: "20px";
-    readonly 24: "24px";
-    readonly 28: "28px";
-    readonly 32: "32px";
-    readonly 36: "36px";
-    readonly 40: "40px";
-    readonly 64: "64px";
-    readonly 80: "80px";
-    readonly 180: "180px";
-};
+interface BrandThemeSeed {
+    /**
+     * The brand fill, as `#rgb` or `#rrggbb`. Drives the `action.brand` family,
+     * the focus ring and the brand gradient.
+     */
+    brand: string;
+    /**
+     * An optional second hue for the `action.accent` family, as `#rgb` or
+     * `#rrggbb`. `undefined` or `null` means "the same as `brand`", which is what
+     * the built-in `[data-ds-brand]` scopes do.
+     */
+    accent?: string | null;
+}
+/** Every custom property `createBrandTheme()` sets, in output order. */
+declare const BRAND_THEME_PROPERTIES: readonly ["--ds-color-action-brand-bg", "--ds-color-action-brand-bg-hover", "--ds-color-action-brand-bg-active", "--ds-color-action-brand-bg-disabled", "--ds-color-action-brand-subtle-bg", "--ds-color-action-brand-subtle-bg-hover", "--ds-color-action-brand-subtle-bg-active", "--ds-color-action-brand-border", "--ds-color-action-brand-ring", "--ds-color-action-brand-fg", "--ds-color-action-accent-bg", "--ds-color-action-accent-bg-strong", "--ds-color-action-accent-bg-hover", "--ds-color-action-accent-bg-active", "--ds-color-action-accent-subtle-bg", "--ds-color-action-accent-ring", "--ds-color-action-accent-fg", "--ds-color-border-focus", "--ds-focus-ring-color", "--ds-focus-ring-border", "--ds-gradient-brand", "--ds-compat-color-brand-soft", "--ds-compat-color-brand-soft-foreground"];
+/** One of the custom properties `createBrandTheme()` sets. */
+type BrandThemeProperty = (typeof BRAND_THEME_PROPERTIES)[number];
 /**
- * Surface palette — the four canonical layers. Mirrors --color-bg / -2 /
- * --color-surface / --color-surface-2.
+ * The style object `createBrandTheme()` returns: every property of
+ * {@link BRAND_THEME_PROPERTIES} with a CSS value.
+ *
+ * React types `style` as `CSSProperties`, which has no index signature for
+ * custom properties, so spread it or cast it at the call site:
+ * `style={{ ...createBrandTheme(seed) }}`.
+ *
+ * @experimental Gated by decision D7.
  */
-declare const surfaces: {
-    readonly bg: "#ffffff";
-    readonly bg2: "#f1f3f8";
-    readonly surface: "#ffffff";
-    readonly surface2: "#f7f8fc";
-};
-declare const motion: {
-    readonly ease: {
-        readonly outQuart: "cubic-bezier(0.2, 0.8, 0.2, 1)";
-        readonly out: "cubic-bezier(0.16, 1, 0.3, 1)";
-        readonly in: "cubic-bezier(0.7, 0, 0.84, 0)";
-        readonly inOut: "cubic-bezier(0.65, 0, 0.35, 1)";
-    };
-    readonly duration: {
-        readonly instant: "100ms";
-        readonly fast: "150ms";
-        readonly normal: "250ms";
-        readonly slow: "400ms";
-    };
-};
-declare const reference: {
-    readonly colors: {
-        readonly bg: "#ffffff";
-        readonly bg2: "#f1f3f8";
-        readonly bg3: "#e7eaf1";
-        readonly surface: "#ffffff";
-        readonly surface2: "#f7f8fc";
-        readonly fg: "#0a0a0a";
-        readonly fg2: "#38383b";
-        readonly fg3: "#5f5f64";
-        readonly fg4: "#6b6b70";
-        readonly fg5: "#9a9aa0";
-        readonly rule: "#e4e7ef";
-        readonly ruleSoft: "#eef0f5";
-        readonly ruleStrong: "#d3d8e3";
-        readonly accent: "#6c42f8";
-        readonly accent2: "#5127e8";
-        readonly accentTint: "#efeaff";
-        readonly accentHover: "#5e35f2";
-        readonly accentActive: "#5127e8";
-        readonly proBg: "#f4f1ff";
-        readonly proBgHover: "#eee9ff";
-        readonly proBgActive: "#e4ddff";
-        readonly proFg: "#6c42f8";
-        readonly proHover: "#5e35f2";
-        readonly proActive: "#5127e8";
-        readonly proDisabled: "#b7a7f3";
-        readonly proLine: "#7b5bd8";
-        readonly fgDisabled: "#a7a7ac";
-        readonly bgDisabled: "#f3f3f1";
-        readonly successFg: "#1f7a3d";
-        readonly successBg: "#eaf6ee";
-        readonly successLine: "#c5e5cf";
-        readonly warningFg: "#8a4606";
-        readonly warningBg: "#fff3e5";
-        readonly warningLine: "#f5d5a8";
-        readonly dangerFg: "#c43838";
-        readonly dangerBg: "#fbeaea";
-        readonly dangerLine: "#ecc5c5";
-        readonly fgOnAccent: "#ffffff";
-        readonly fgOnPro: "#ffffff";
-    };
-    readonly typography: {
-        readonly family: {
-            readonly display: "\"Plus Jakarta Sans\", -apple-system, system-ui, sans-serif";
-            readonly body: "\"Plus Jakarta Sans\", -apple-system, system-ui, sans-serif";
-            readonly mono: "\"Plus Jakarta Sans\", -apple-system, system-ui, sans-serif";
-        };
-        readonly weight: {
-            readonly regular: 400;
-            readonly medium: 500;
-            readonly semibold: 600;
-            readonly bold: 700;
-        };
-        readonly ease: "cubic-bezier(0.2, 0.8, 0.2, 1)";
-    };
-    readonly radii: {
-        readonly btn: "7px";
-        readonly input: "7px";
-        readonly pill: "5px";
-        readonly card: "12px";
-        readonly icon: "4px";
-        readonly full: "9999px";
-    };
-    readonly shadows: {
-        readonly quiet: "0 1px 2px rgba(10, 10, 10, 0.03)";
-        readonly card: "0 12px 28px -16px rgba(10, 10, 10, 0.18), 0 1px 2px rgba(10, 10, 10, 0.04)";
-        readonly pop: "0 30px 80px -30px rgba(10, 10, 10, 0.18), 0 8px 24px -8px rgba(10, 10, 10, 0.06)";
-        readonly focusRing: "0 0 0 2px rgba(108, 66, 248, 0.18)";
-    };
-    readonly overlays: {
-        readonly hover: "rgba(10, 10, 10, 0.03)";
-        readonly active: "rgba(10, 10, 10, 0.05)";
-    };
-    readonly layout: {
-        readonly shellSidebarWidth: "200px";
-        readonly shellHeaderHeight: "56px";
-        readonly contentPad: "32px";
-    };
-    readonly motion: {
-        readonly ease: {
-            readonly outQuart: "cubic-bezier(0.2, 0.8, 0.2, 1)";
-            readonly out: "cubic-bezier(0.16, 1, 0.3, 1)";
-            readonly in: "cubic-bezier(0.7, 0, 0.84, 0)";
-            readonly inOut: "cubic-bezier(0.65, 0, 0.35, 1)";
-        };
-        readonly duration: {
-            readonly instant: "100ms";
-            readonly fast: "150ms";
-            readonly normal: "250ms";
-            readonly slow: "400ms";
-        };
-    };
-    readonly spacing: {
-        readonly unit: "4px";
-        readonly 4: "4px";
-        readonly 8: "8px";
-        readonly 12: "12px";
-        readonly 16: "16px";
-        readonly 20: "20px";
-        readonly 24: "24px";
-        readonly 28: "28px";
-        readonly 32: "32px";
-        readonly 36: "36px";
-        readonly 40: "40px";
-        readonly 64: "64px";
-        readonly 80: "80px";
-        readonly 180: "180px";
-    };
-    readonly surfaces: {
-        readonly bg: "#ffffff";
-        readonly bg2: "#f1f3f8";
-        readonly surface: "#ffffff";
-        readonly surface2: "#f7f8fc";
-    };
+type BrandTheme = {
+    readonly [P in BrandThemeProperty]: string;
 };
-type ReferenceTokens = typeof reference;
-type ColorName = keyof typeof colors;
-
 /**
- * System tokens — suite semantic mappings as CSS variable references.
+ * Turn a tenant's colours into the design system's brand and accent tokens.
+ *
+ * ```tsx
+ * const theme = createBrandTheme({ brand: firm.primaryColor, accent: firm.accentColor });
+ * return <div style={{ ...theme }}>{children}</div>;
+ * ```
  *
- * Use these from JS (e.g. inline styles, Storybook decorators, motion configs)
- * when you can't use a Tailwind utility class. Component CSS should prefer the
- * generated utilities (`bg-bg`, `text-fg-2`, `border-rule`, `bg-pro-fg`, etc.)
- * which Tailwind 4 emits from `--color-*` tokens declared in ./tokens.css.
+ * Apply it to the element that scopes the brand — `<body>` for a whole-tenant
+ * theme, a wrapper for a preview. The properties are the same ones a built-in
+ * `[data-ds-brand]` scope declares, so anything reading them (every design
+ * system component, and any application CSS reading `--ds-*`) follows.
  *
- * Themes (.dark) re-map the underlying CSS variables; these references stay valid.
+ * @param seed - `brand`, and optionally `accent` (decision D7).
+ * @returns A frozen object of custom property names to CSS values.
+ * @throws TypeError when the seed is not an object, carries an unknown key, or
+ * a colour is missing or not `#rgb`/`#rrggbb`.
+ *
+ * @experimental Gated by decision D7. The property set may grow, and the seed
+ * shape may change, until D7 is resolved.
  */
-declare const systemTokens: {
-    readonly color: {
-        readonly bg: "var(--color-bg)";
-        readonly bg2: "var(--color-bg-2)";
-        readonly bg3: "var(--color-bg-3)";
-        readonly surface: "var(--color-surface)";
-        readonly surface2: "var(--color-surface-2)";
-        readonly fg: "var(--color-fg)";
-        readonly fg2: "var(--color-fg-2)";
-        readonly fg3: "var(--color-fg-3)";
-        readonly fg4: "var(--color-fg-4)";
-        readonly fg5: "var(--color-fg-5)";
-        readonly rule: "var(--color-rule)";
-        readonly ruleSoft: "var(--color-rule-soft)";
-        readonly ruleStrong: "var(--color-rule-strong)";
-        readonly accent: "var(--color-accent)";
-        readonly accent2: "var(--color-accent-2)";
-        readonly accentTint: "var(--color-accent-tint)";
-        readonly accentHover: "var(--color-accent-hover)";
-        readonly accentActive: "var(--color-accent-active)";
-        readonly accentRing: "var(--color-accent-ring)";
-        readonly suiteAction: "var(--color-suite-action)";
-        readonly suiteActionHover: "var(--color-suite-action-hover)";
-        readonly suiteActionActive: "var(--color-suite-action-active)";
-        readonly fgOnSuiteAction: "var(--color-fg-on-suite-action)";
-        readonly brand: "var(--color-brand)";
-        readonly brandHover: "var(--color-brand-hover)";
-        readonly brandActive: "var(--color-brand-active)";
-        readonly brandDisabled: "var(--color-brand-disabled)";
-        readonly brandBg: "var(--color-brand-bg)";
-        readonly brandBgHover: "var(--color-brand-bg-hover)";
-        readonly brandBgActive: "var(--color-brand-bg-active)";
-        readonly brandLine: "var(--color-brand-line)";
-        readonly brandRing: "var(--color-brand-ring)";
-        readonly fgOnBrand: "var(--color-fg-on-brand)";
-        readonly proBg: "var(--color-pro-bg)";
-        readonly proBgHover: "var(--color-pro-bg-hover)";
-        readonly proBgActive: "var(--color-pro-bg-active)";
-        readonly proFg: "var(--color-pro-fg)";
-        readonly proHover: "var(--color-pro-hover)";
-        readonly proActive: "var(--color-pro-active)";
-        readonly proDisabled: "var(--color-pro-disabled)";
-        readonly proLine: "var(--color-pro-line)";
-        readonly proRing: "var(--color-pro-ring)";
-        readonly auditFg: "var(--color-audit-fg)";
-        readonly auditHover: "var(--color-audit-hover)";
-        readonly auditActive: "var(--color-audit-active)";
-        readonly auditDisabled: "var(--color-audit-disabled)";
-        readonly auditBg: "var(--color-audit-bg)";
-        readonly auditBgHover: "var(--color-audit-bg-hover)";
-        readonly auditBgActive: "var(--color-audit-bg-active)";
-        readonly auditLine: "var(--color-audit-line)";
-        readonly auditRing: "var(--color-audit-ring)";
-        readonly booksFg: "var(--color-books-fg)";
-        readonly booksHover: "var(--color-books-hover)";
-        readonly booksActive: "var(--color-books-active)";
-        readonly booksDisabled: "var(--color-books-disabled)";
-        readonly booksBg: "var(--color-books-bg)";
-        readonly booksBgHover: "var(--color-books-bg-hover)";
-        readonly booksBgActive: "var(--color-books-bg-active)";
-        readonly booksLine: "var(--color-books-line)";
-        readonly booksRing: "var(--color-books-ring)";
-        readonly taxFg: "var(--color-tax-fg)";
-        readonly taxHover: "var(--color-tax-hover)";
-        readonly taxActive: "var(--color-tax-active)";
-        readonly taxDisabled: "var(--color-tax-disabled)";
-        readonly taxBg: "var(--color-tax-bg)";
-        readonly taxBgHover: "var(--color-tax-bg-hover)";
-        readonly taxBgActive: "var(--color-tax-bg-active)";
-        readonly taxLine: "var(--color-tax-line)";
-        readonly taxRing: "var(--color-tax-ring)";
-        readonly fgOnAccent: "var(--color-fg-on-accent)";
-        readonly fgOnPro: "var(--color-fg-on-pro)";
-        readonly fgOnAudit: "var(--color-fg-on-audit)";
-        readonly fgOnBooks: "var(--color-fg-on-books)";
-        readonly fgOnTax: "var(--color-fg-on-tax)";
-        readonly fgDisabled: "var(--color-fg-disabled)";
-        readonly bgDisabled: "var(--color-bg-disabled)";
-        readonly overlayHover: "var(--color-overlay-hover)";
-        readonly overlayActive: "var(--color-overlay-active)";
-        readonly successFg: "var(--color-success-fg)";
-        readonly successBg: "var(--color-success-bg)";
-        readonly successLine: "var(--color-success-line)";
-        readonly warningFg: "var(--color-warning-fg)";
-        readonly warningBg: "var(--color-warning-bg)";
-        readonly warningLine: "var(--color-warning-line)";
-        readonly dangerFg: "var(--color-danger-fg)";
-        readonly dangerBg: "var(--color-danger-bg)";
-        readonly dangerLine: "var(--color-danger-line)";
-        readonly chart1: "var(--color-chart-1)";
-        readonly chart2: "var(--color-chart-2)";
-        readonly chart3: "var(--color-chart-3)";
-        readonly chart4: "var(--color-chart-4)";
-        readonly chartLine: "var(--color-chart-line)";
-        readonly chartAreaFrom: "var(--color-chart-area-from)";
-        readonly chartAreaTo: "var(--color-chart-area-to)";
-        readonly serviceTax: "var(--color-service-tax)";
-        readonly serviceTaxBg: "var(--color-service-tax-bg)";
-        readonly serviceAudit: "var(--color-service-audit)";
-        readonly serviceAuditBg: "var(--color-service-audit-bg)";
-        readonly serviceAccounting: "var(--color-service-accounting)";
-        readonly serviceAccountingBg: "var(--color-service-accounting-bg)";
-    };
-    /** Ordered chart series ramp — index a series by position, cycle with `% 4`. */
-    readonly chart: readonly ["var(--color-chart-1)", "var(--color-chart-2)", "var(--color-chart-3)", "var(--color-chart-4)"];
-    readonly gradient: {
-        readonly brand: "var(--gradient-brand)";
-        readonly pro: "var(--gradient-pro)";
-        readonly audit: "var(--gradient-audit)";
-        readonly books: "var(--gradient-books)";
-        readonly tax: "var(--gradient-tax)";
-    };
-    readonly shadow: {
-        readonly quiet: "var(--shadow-quiet)";
-        readonly card: "var(--shadow-card)";
-        readonly pop: "var(--shadow-pop)";
-        readonly focusRing: "var(--shadow-focus-ring)";
-        readonly xs: "var(--shadow-xs)";
-        readonly sm: "var(--shadow-sm)";
-        readonly md: "var(--shadow-md)";
-        readonly lg: "var(--shadow-lg)";
-        readonly xl: "var(--shadow-xl)";
-        readonly "2xl": "var(--shadow-2xl)";
-    };
-    readonly radius: {
-        readonly btn: "var(--radius-btn)";
-        readonly input: "var(--radius-input)";
-        readonly pill: "var(--radius-pill)";
-        readonly card: "var(--radius-card)";
-        readonly icon: "var(--radius-icon)";
-        readonly full: "var(--radius-full)";
-    };
-    readonly type: {
-        readonly family: {
-            readonly display: "var(--font-display)";
-            readonly body: "var(--font-body)";
-            readonly mono: "var(--font-mono)";
-        };
-        readonly weight: {
-            readonly regular: "var(--font-weight-regular)";
-            readonly medium: "var(--font-weight-medium)";
-            readonly semibold: "var(--font-weight-semibold)";
-            readonly bold: "var(--font-weight-bold)";
-        };
-    };
-    readonly motion: {
-        readonly ease: {
-            readonly outQuart: "var(--ease-out-quart)";
-            readonly out: "var(--ease-out)";
-            readonly in: "var(--ease-in)";
-            readonly inOut: "var(--ease-in-out)";
-        };
-        readonly duration: {
-            readonly instant: "var(--duration-instant)";
-            readonly fast: "var(--duration-fast)";
-            readonly normal: "var(--duration-normal)";
-            readonly slow: "var(--duration-slow)";
-        };
-        readonly semantic: {
-            readonly duration: {
-                readonly press: "var(--motion-duration-press)";
-                readonly feedback: "var(--motion-duration-feedback)";
-                readonly overlay: "var(--motion-duration-overlay)";
-                readonly spatial: "var(--motion-duration-spatial)";
-                readonly deliberate: "var(--motion-duration-deliberate)";
-            };
-            readonly ease: {
-                readonly enter: "var(--motion-ease-enter)";
-                readonly exit: "var(--motion-ease-exit)";
-                readonly move: "var(--motion-ease-move)";
-            };
-        };
-    };
-    readonly layout: {
-        readonly shellSidebarWidth: "var(--shell-sidebar-w)";
-        readonly shellSidebarRailWidth: "var(--shell-sidebar-w-rail)";
-        readonly shellHeaderHeight: "var(--shell-header-h)";
-        readonly contentPad: "var(--content-pad)";
-    };
-    readonly z: {
-        readonly base: "var(--z-base)";
-        readonly dropdown: "var(--z-dropdown)";
-        readonly sticky: "var(--z-sticky)";
-        readonly overlay: "var(--z-overlay)";
-        readonly modal: "var(--z-modal)";
-        readonly toast: "var(--z-toast)";
-        readonly tooltip: "var(--z-tooltip)";
-    };
-};
-type SystemTokens = typeof systemTokens;
+declare function createBrandTheme(seed: BrandThemeSeed): BrandTheme;
 
-export { type ColorName, type ReferenceTokens, type SystemTokens, colors, layout, motion, overlays, radii, reference, shadows, spacing, surfaces, systemTokens, typography };
+export { BRAND_THEME_PROPERTIES, type BrandTheme, type BrandThemeProperty, type BrandThemeSeed, createBrandTheme };