@hirobius/design-system 0.10.0 → 0.12.0

package/README.md

@@ -6,7 +6,17 @@ A publishable React + TypeScript component library, backed by a governed design-
 
 Installing HDS in another project? It ships to the **public npm registry** as
 `@hirobius/design-system` (ESM) — no `.npmrc`, no token, no registry config. Full
-guide: **[docs/CONSUMING.md](docs/CONSUMING.md)**. The short version:
+guide: **[docs/CONSUMING.md](docs/CONSUMING.md)**.
+
+> **Not on GitHub Packages.** This repo's **Packages** sidebar still shows an old
+> `@hirobius/design-system` entry under GitHub Packages
+> (`/pkgs/npm/design-system`). That listing is **frozen and no longer updated** —
+> publishing moved to the public npm registry in
+> [#39](https://github.com/hirobius/hirobius-design-system/pull/39). Always
+> install from npm:
+> **[npmjs.com/package/@hirobius/design-system](https://www.npmjs.com/package/@hirobius/design-system)**.
+
+The short version:
 
 ```bash
 npm install @hirobius/design-system react react-dom
@@ -30,6 +40,39 @@ No router, Tailwind config, or font files needed. With a router, inject it once
 via `<HdsRouterProvider>`. See **[docs/CONSUMING.md](docs/CONSUMING.md)** for the
 router seam, `data-hds` scoping, and MUI coexistence.
 
+### Theming: the four dials
+
+HDS theming is driven by root attributes + CSS variables, so it works with **zero
+JavaScript** — set them on any element (React, Astro, plain HTML) and every HDS
+descendant re-skins:
+
+| Dial | Attribute / var | Values | Default |
+| --- | --- | --- | --- |
+| theme | `data-theme` | `dark` | light (unset) |
+| density | `data-density` | `compact` | comfortable (unset) |
+| brand | `data-brand` (+ `data-tenant` alias) | overlay slug | base (unset) |
+| font | `--hds-font-family` / `--hds-font-family-mono` | any font-family | Satoshi / Geist Mono |
+
+```html
+<!-- zero-JS: static markup (e.g. an Astro layout) -->
+<div data-hds data-theme="dark" data-density="compact" data-brand="acme"
+     style="--hds-font-family: 'Inter', sans-serif">
+  …
+</div>
+```
+
+React apps can set the same contract declaratively with the typed
+`<HdsThemeProvider>` (renders the `data-hds` scope wrapper) and read it back with
+`useHdsTheme()` — it is a convenience, not a requirement:
+
+```tsx
+import { HdsThemeProvider } from '@hirobius/design-system';
+
+<HdsThemeProvider theme="dark" density="compact" brand="acme">
+  <App />
+</HdsThemeProvider>;
+```
+
 ## Developing this repo
 
 ```bash

package/dist/brand.js

@@ -0,0 +1,36 @@
+const l = (c, n) => `color-mix(in srgb, ${c} ${n}%, #000)`, E = (c, n) => `color-mix(in srgb, ${c} ${n}%, #fff)`, C = (c, n, t) => `color-mix(in srgb, ${c} ${t}%, ${n})`;
+function d(c) {
+  const { primary: n, onPrimary: t, bg: r, fg: a, muted: f, accent: i, radius: o, fontHeading: s, fontBody: m } = c, e = {
+    // ── accent ramp (rest + derived interactive states) ──
+    "--semantic-accent-rest": n,
+    "--semantic-accent-hover": l(n, 88),
+    "--semantic-accent-pressed": l(n, 76),
+    "--semantic-accent-subtle": E(n, 12),
+    "--semantic-accent-content": n,
+    "--semantic-color-surface-accent": n,
+    "--semantic-color-surface-accentSubtle": E(n, 12),
+    "--semantic-color-border-accent": n,
+    "--semantic-color-content-onAccent": t,
+    // ── page + content ──
+    "--semantic-color-surface-page": r,
+    "--semantic-color-surface-raised": f,
+    "--semantic-color-content-primary": a,
+    "--semantic-color-content-secondary": C(a, r, 66)
+  };
+  return i && (e["--brand-accent"] = i), o && (e["--semantic-radius-action"] = o, e["--brand-radius"] = o), s && (e["--primitive-typography-family-display"] = s), m && (e["--primitive-typography-family-primary"] = m), e;
+}
+function y(c) {
+  return Object.entries(d(c)).map(([n, t]) => `${n}:${t}`).join(";");
+}
+function _(c, n) {
+  const t = Object.entries(d(n)).map(([r, a]) => `  ${r}: ${a};`).join(`
+`);
+  return `${c} {
+${t}
+}`;
+}
+export {
+  _ as brandOverlayCss,
+  y as brandOverlayStyle,
+  d as brandOverlayVars
+};

package/dist/contexts.js

@@ -1,7 +1,7 @@
-import { jsx as l, Fragment as A } from "react/jsx-runtime";
-import { useState as i, useCallback as a, useEffect as s, useContext as T, createContext as v } from "react";
-import { F as U, H as z, L as K, T as Y, b as j, u as q, a as B, c as J } from "./chunks/TokenDisplayContext-B3gxyQN7.js";
-const I = ["system", "light", "dark"], m = "hds-theme-mode", w = "hds-theme", S = v({
+import { jsx as f, Fragment as M } from "react/jsx-runtime";
+import { useState as u, useCallback as s, useEffect as a, useContext as S, createContext as D } from "react";
+import { F as K, H as Y, L as j, T as q, b as J, u as Q, a as W, c as X } from "./chunks/TokenDisplayContext-B3gxyQN7.js";
+const L = ["system", "light", "dark"], m = "hds-theme-mode", x = "hds-theme", _ = D({
   isDark: !0,
   toggleDark: () => {
   },
@@ -14,22 +14,22 @@ const I = ["system", "light", "dark"], m = "hds-theme-mode", w = "hds-theme", S
   setDensity: () => {
   }
 });
-function y() {
+function T() {
   try {
     const t = localStorage.getItem(m);
-    if (t && I.includes(t)) return t;
+    if (t && L.includes(t)) return t;
   } catch {
   }
   return "system";
 }
-function M() {
+function P() {
   var t;
   return typeof window > "u" ? !1 : !!((t = window.matchMedia) != null && t.call(window, "(prefers-color-scheme: dark)").matches);
 }
 function E(t) {
-  return t === "dark" ? !0 : t === "light" ? !1 : M();
+  return t === "dark" ? !0 : t === "light" ? !1 : P();
 }
-function L() {
+function N() {
   try {
     const t = localStorage.getItem("hds-density");
     if (t === "compact" || t === "comfortable") return t;
@@ -37,97 +37,101 @@ function L() {
   }
   return "comfortable";
 }
-function C({ children: t }) {
-  const [n, f] = i(y), [r, u] = i(() => E(y())), [c, g] = i(L), h = a((e) => {
+function F({ children: t }) {
+  const [n, g] = u(T), [r, i] = u(() => E(T())), [c, h] = u(N), y = s((e) => {
     const o = e ? "dark" : "light";
     try {
-      localStorage.setItem(w, o);
+      localStorage.setItem(x, o);
     } catch {
     }
     document.documentElement.setAttribute("data-theme", o), document.documentElement.classList.toggle("dark", e);
   }, []);
-  s(() => {
+  a(() => {
     try {
       localStorage.setItem("hds-density", c);
     } catch {
     }
     document.documentElement.setAttribute("data-density", c);
-  }, [c]), s(() => {
-    h(r);
-  }, [r, h]), s(() => {
+  }, [c]), a(() => {
+    y(r);
+  }, [r, y]), a(() => {
     if (n !== "system" || typeof window > "u" || !window.matchMedia) return;
     const e = window.matchMedia("(prefers-color-scheme: dark)"), o = () => {
-      u(e.matches);
+      i(e.matches);
     };
     return e.addEventListener("change", o), () => {
       e.removeEventListener("change", o);
     };
   }, [n]);
-  const _ = a(() => {
+  const A = s(() => {
     const e = !r, o = e ? "dark" : "light";
-    f(o), u(e);
+    g(o), i(e);
     try {
       localStorage.setItem(m, o);
     } catch {
     }
-  }, [r]), k = a((e) => {
-    f(e), u(E(e));
+  }, [r]), b = s((e) => {
+    g(e), i(E(e));
     try {
       localStorage.setItem(m, e);
     } catch {
     }
-  }, []), b = a(
-    () => g((e) => e === "comfortable" ? "compact" : "comfortable"),
+  }, []), I = s(
+    () => h((e) => e === "comfortable" ? "compact" : "comfortable"),
     []
-  ), p = a((e) => g(e), []);
-  return /* @__PURE__ */ l(
-    S.Provider,
+  ), w = s((e) => h(e), []);
+  return /* @__PURE__ */ f(
+    _.Provider,
     {
-      value: { isDark: r, toggleDark: _, mode: n, setMode: k, density: c, toggleDensity: b, setDensity: p },
+      value: { isDark: r, toggleDark: A, mode: n, setMode: b, density: c, toggleDensity: I, setDensity: w },
       children: t
     }
   );
 }
-function N() {
-  return T(S);
+function G() {
+  return S(_);
 }
-const d = {}, D = v({ tenantSlug: null });
-function F({ children: t }) {
+const d = {}, v = D({ tenantSlug: null }), p = ["data-brand", "data-tenant"];
+function l(t) {
+  for (const n of p) document.documentElement.setAttribute(n, t);
+}
+function k() {
+  for (const t of p) document.documentElement.removeAttribute(t);
+}
+function O({ children: t }) {
   const n = typeof d.VITE_TENANT_SLUG == "string" && d.VITE_TENANT_SLUG.trim().length > 0 ? d.VITE_TENANT_SLUG.trim() : null;
-  return s(() => {
+  return a(() => {
     if (n)
-      return document.documentElement.setAttribute("data-tenant", n), () => {
-        document.documentElement.removeAttribute("data-tenant");
-      };
-  }, [n]), /* @__PURE__ */ l(D.Provider, { value: { tenantSlug: n }, children: t });
+      return l(n), () => k();
+  }, [n]), /* @__PURE__ */ f(v.Provider, { value: { tenantSlug: n }, children: t });
 }
-function G() {
-  return T(D);
+function B() {
+  return S(v);
 }
-function O(t) {
-  s(() => {
-    const n = document.documentElement.getAttribute("data-tenant");
-    return document.documentElement.setAttribute("data-tenant", t), () => {
-      n !== null ? document.documentElement.setAttribute("data-tenant", n) : document.documentElement.removeAttribute("data-tenant");
+function H(t) {
+  a(() => {
+    const n = document.documentElement.getAttribute("data-brand");
+    return l(t), () => {
+      n !== null ? l(n) : k();
     };
   }, [t]);
 }
-function H({ children: t }) {
-  return /* @__PURE__ */ l(A, { children: t });
+function V({ children: t }) {
+  return /* @__PURE__ */ f(M, { children: t });
 }
 export {
-  H as FontProvider,
-  U as FreezeState,
-  z as HdsRouterProvider,
-  K as LanguageProvider,
-  F as TenantProvider,
-  C as ThemeProvider,
-  Y as TokenDisplayProvider,
-  j as useFrozenState,
-  q as useHdsRouter,
-  B as useLanguage,
-  G as useTenant,
-  O as useTenantOnDocument,
-  N as useTheme,
-  J as useTokenDisplay
+  V as FontProvider,
+  K as FreezeState,
+  Y as HdsRouterProvider,
+  j as LanguageProvider,
+  O as TenantProvider,
+  F as ThemeProvider,
+  q as TokenDisplayProvider,
+  J as useFrozenState,
+  Q as useHdsRouter,
+  W as useLanguage,
+  B as useTenant,
+  H as useTenantOnDocument,
+  G as useTheme,
+  X as useTokenDisplay
 };