@hanzo/design 0.4.13 → 0.5.1

package/dist/brand.d.ts

@@ -0,0 +1,30 @@
+/** The palette a brand declares. Every field is optional: an undeclared key
+ *  leaves the design system's own value standing rather than overwriting it. */
+export interface BrandTheme {
+    surface1?: string;
+    surface2?: string;
+    surface3?: string;
+    neutral1?: string;
+    neutral2?: string;
+    neutral3?: string;
+    accent1?: string;
+    accent2?: string;
+    accent3?: string;
+    border?: string;
+    success?: string;
+    warning?: string;
+    error?: string;
+}
+/**
+ * The tokens a brand's theme sets, as `{ '--background': '#000', … }`.
+ *
+ * Only ground, ink, accent and the edges drawn on them. The radius scale, the
+ * type ramp, spacing, motion and z are NOT here and must not be: they are the
+ * system's grammar rather than a brand's voice, and a brand that redefines them
+ * is a fork wearing a stylesheet.
+ */
+export declare function themeToTokens(theme: BrandTheme): Record<string, string>;
+/** Apply a brand's theme to a live document — for an app that resolves its brand
+ *  at runtime and so cannot import a build-time stylesheet. */
+export declare function applyBrandTheme(theme: BrandTheme, el: HTMLElement): void;
+//# sourceMappingURL=brand.d.ts.map

package/dist/brand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand.d.ts","sourceRoot":"","sources":["../src/brand.ts"],"names":[],"mappings":"AAaA;gFACgF;AAChF,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAmBD;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAWvE;AAED;+DAC+D;AAC/D,wBAAgB,eAAe,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,WAAW,GAAG,IAAI,CAIxE"}

package/dist/brand.js

@@ -0,0 +1,58 @@
+// A brand's declared theme, projected onto the semantic tokens.
+//
+// A brand package (@luxfi/brand, @zooai/brand) carries its own light and dark
+// theme in brand.json. This is the ONE place that says which semantic token each
+// of those answers for — the design system owns the token contract, a brand owns
+// the values, and neither holds a copy of the other.
+//
+// It exists because that mapping was about to be written twice: once in each
+// brand package to generate a stylesheet, and once in every app that resolves its
+// brand at runtime and cannot import a build-time stylesheet. Two copies of a
+// mapping is how a brand comes to look like itself in one surface and not
+// another.
+/** theme key → the semantic tokens it answers for. */
+const OWNS = {
+    surface1: ['--background'],
+    surface2: ['--card', '--popover', '--muted'],
+    surface3: ['--accent'],
+    neutral1: ['--foreground', '--card-foreground', '--popover-foreground', '--accent-foreground'],
+    neutral2: ['--muted-foreground'],
+    neutral3: [],
+    accent1: ['--primary'],
+    accent2: [],
+    accent3: [],
+    border: ['--border'],
+    success: ['--state-success'],
+    warning: ['--state-warning'],
+    error: ['--state-error'],
+};
+/**
+ * The tokens a brand's theme sets, as `{ '--background': '#000', … }`.
+ *
+ * Only ground, ink, accent and the edges drawn on them. The radius scale, the
+ * type ramp, spacing, motion and z are NOT here and must not be: they are the
+ * system's grammar rather than a brand's voice, and a brand that redefines them
+ * is a fork wearing a stylesheet.
+ */
+export function themeToTokens(theme) {
+    const out = {};
+    for (const [key, tokens] of Object.entries(OWNS)) {
+        const value = theme[key];
+        if (!value)
+            continue;
+        for (const token of tokens)
+            out[token] = value;
+    }
+    // --primary carries ink on top of it, so the accent names its own contrast
+    // partner rather than leaving whatever the previous theme set.
+    if (theme.accent1 && theme.surface1)
+        out['--primary-foreground'] = theme.surface1;
+    return out;
+}
+/** Apply a brand's theme to a live document — for an app that resolves its brand
+ *  at runtime and so cannot import a build-time stylesheet. */
+export function applyBrandTheme(theme, el) {
+    for (const [name, value] of Object.entries(themeToTokens(theme))) {
+        el.style.setProperty(name, value);
+    }
+}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './tokens.gen.js';
+export * from './brand.js';
 import { type CssVarName } from './tokens.gen.js';
 /** A token name with the leading `--` omitted: `'background'` for `'--background'`. */
 export type TokenName = CssVarName extends `--${infer N}` ? N : never;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAWA,cAAc,iBAAiB,CAAA;AAC/B,OAAO,EAAW,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAE1D,uFAAuF;AACvF,MAAM,MAAM,SAAS,GAAG,UAAU,SAAS,KAAK,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,KAAK,CAAA;AAErE;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,UAAU,GAAG,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAI9E;AAED,oFAAoF;AACpF,wBAAgB,UAAU,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,CAE/D;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAQlD;AAKD,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACzE,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAWA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,YAAY,CAAA;AAC1B,OAAO,EAAW,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAE1D,uFAAuF;AACvF,MAAM,MAAM,SAAS,GAAG,UAAU,SAAS,KAAK,MAAM,CAAC,EAAE,GAAG,CAAC,GAAG,KAAK,CAAA;AAErE;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,UAAU,GAAG,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAI9E;AAED,oFAAoF;AACpF,wBAAgB,UAAU,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,CAE/D;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAQlD;AAKD,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACzE,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/index.js

@@ -10,6 +10,7 @@
 //   import { colors, spacing, radius, cssVar } from '@hanzo/design'  // the code layer
 //
 export * from './tokens.gen.js';
+export * from './brand.js';
 import { cssVars } from './tokens.gen.js';
 /**
  * A `var(--name, <authored literal>)` reference to a token — the ONE way code

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/design",
-  "version": "0.4.13",
+  "version": "0.5.1",
   "packageManager": "pnpm@11.17.0",
   "description": "Hanzo Design System \u2014 monochrome, dark-default tokens + components + brand assets, the single source of truth for every Hanzo surface. CSS + typed programmatic tokens.",
   "license": "MIT OR Apache-2.0",

package/src/brand.ts

@@ -0,0 +1,76 @@
+// A brand's declared theme, projected onto the semantic tokens.
+//
+// A brand package (@luxfi/brand, @zooai/brand) carries its own light and dark
+// theme in brand.json. This is the ONE place that says which semantic token each
+// of those answers for — the design system owns the token contract, a brand owns
+// the values, and neither holds a copy of the other.
+//
+// It exists because that mapping was about to be written twice: once in each
+// brand package to generate a stylesheet, and once in every app that resolves its
+// brand at runtime and cannot import a build-time stylesheet. Two copies of a
+// mapping is how a brand comes to look like itself in one surface and not
+// another.
+
+/** The palette a brand declares. Every field is optional: an undeclared key
+ *  leaves the design system's own value standing rather than overwriting it. */
+export interface BrandTheme {
+  surface1?: string
+  surface2?: string
+  surface3?: string
+  neutral1?: string
+  neutral2?: string
+  neutral3?: string
+  accent1?: string
+  accent2?: string
+  accent3?: string
+  border?: string
+  success?: string
+  warning?: string
+  error?: string
+}
+
+/** theme key → the semantic tokens it answers for. */
+const OWNS: Record<keyof BrandTheme, readonly string[]> = {
+  surface1: ['--background'],
+  surface2: ['--card', '--popover', '--muted'],
+  surface3: ['--accent'],
+  neutral1: ['--foreground', '--card-foreground', '--popover-foreground', '--accent-foreground'],
+  neutral2: ['--muted-foreground'],
+  neutral3: [],
+  accent1: ['--primary'],
+  accent2: [],
+  accent3: [],
+  border: ['--border'],
+  success: ['--state-success'],
+  warning: ['--state-warning'],
+  error: ['--state-error'],
+}
+
+/**
+ * The tokens a brand's theme sets, as `{ '--background': '#000', … }`.
+ *
+ * Only ground, ink, accent and the edges drawn on them. The radius scale, the
+ * type ramp, spacing, motion and z are NOT here and must not be: they are the
+ * system's grammar rather than a brand's voice, and a brand that redefines them
+ * is a fork wearing a stylesheet.
+ */
+export function themeToTokens(theme: BrandTheme): Record<string, string> {
+  const out: Record<string, string> = {}
+  for (const [key, tokens] of Object.entries(OWNS) as [keyof BrandTheme, readonly string[]][]) {
+    const value = theme[key]
+    if (!value) continue
+    for (const token of tokens) out[token] = value
+  }
+  // --primary carries ink on top of it, so the accent names its own contrast
+  // partner rather than leaving whatever the previous theme set.
+  if (theme.accent1 && theme.surface1) out['--primary-foreground'] = theme.surface1
+  return out
+}
+
+/** Apply a brand's theme to a live document — for an app that resolves its brand
+ *  at runtime and so cannot import a build-time stylesheet. */
+export function applyBrandTheme(theme: BrandTheme, el: HTMLElement): void {
+  for (const [name, value] of Object.entries(themeToTokens(theme))) {
+    el.style.setProperty(name, value)
+  }
+}

package/src/index.ts

@@ -10,6 +10,7 @@
 //   import { colors, spacing, radius, cssVar } from '@hanzo/design'  // the code layer
 //
 export * from './tokens.gen.js'
+export * from './brand.js'
 import { cssVars, type CssVarName } from './tokens.gen.js'
 
 /** A token name with the leading `--` omitted: `'background'` for `'--background'`. */