@assure-one/design-system 1.38.0 → 1.39.0

package/dist/brand-theme-B6rem2II.d.ts

@@ -0,0 +1,59 @@
+/**
+ * The seed a host supplies per tenant.
+ *
+ * @experimental Gated by decision D7.
+ */
+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];
+/**
+ * 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.
+ */
+type BrandTheme = {
+    readonly [P in BrandThemeProperty]: string;
+};
+/**
+ * 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>;
+ * ```
+ *
+ * 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.
+ *
+ * @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 function createBrandTheme(seed: BrandThemeSeed): BrandTheme;
+
+export { BRAND_THEME_PROPERTIES as B, type BrandTheme as a, type BrandThemeProperty as b, type BrandThemeSeed as c, createBrandTheme as d };