impact-ui 5.0.0 → 5.0.1-beta.1

package/dist/tokens/createImpactUiMuiTheme.js

@@ -0,0 +1,112 @@
+import { getColorToken, semanticColorVar } from "../styles/tokens/tokens.generated.js";
+import createTheme from "../node_modules/@mui/material/styles/createTheme.js";
+const impactUiDrawerSx = {
+  "& .MuiDrawer-paper": {
+    backgroundColor: semanticColorVar("bg-surface-layer-bg"),
+    color: semanticColorVar("on-surface-body")
+  }
+};
+function mergeImpactUiDrawerSx(overrides) {
+  if (overrides == null) return impactUiDrawerSx;
+  if (Array.isArray(overrides)) {
+    const overrideList = overrides;
+    return [impactUiDrawerSx, ...overrideList];
+  }
+  return [impactUiDrawerSx, overrides];
+}
+const modalBackdrop = "var(--ia-modal-backdrop, var(--iu-effect-mix-modal-backdrop-80))";
+function createImpactUiMuiTheme(mode = "light") {
+  return createTheme({
+    palette: {
+      mode,
+      background: {
+        default: getColorToken(mode, "bg-surface-body-bg"),
+        paper: getColorToken(mode, "bg-surface-layer-bg")
+      },
+      text: {
+        primary: getColorToken(mode, "on-surface-body"),
+        secondary: getColorToken(mode, "on-surface-caption")
+      },
+      primary: {
+        main: getColorToken(mode, "bg-primary")
+      },
+      error: {
+        main: getColorToken(mode, "bg-error")
+      },
+      divider: getColorToken(mode, "border-default")
+    },
+    components: {
+      MuiButton: {
+        defaultProps: {
+          disableElevation: true
+        },
+        styleOverrides: {
+          root: {
+            "&.ia-btn": {
+              textTransform: "none",
+              boxShadow: "none"
+            }
+          }
+        }
+      },
+      MuiDrawer: {
+        styleOverrides: {
+          paper: {
+            backgroundColor: semanticColorVar("bg-surface-layer-bg"),
+            color: semanticColorVar("on-surface-body")
+          }
+        }
+      },
+      MuiPopover: {
+        styleOverrides: {
+          paper: {
+            // Flat fill: `background` (not only backgroundColor) clears MUI Paper elevation gradients.
+            background: semanticColorVar("bg-surface-layer-bg"),
+            backgroundImage: "none",
+            border: `0.5px solid ${semanticColorVar("border-default")}`,
+            color: semanticColorVar("on-surface-body")
+          }
+        }
+      },
+      MuiTooltip: {
+        styleOverrides: {
+          tooltip: {
+            backgroundColor: semanticColorVar("bg-surface-overlay-bg"),
+            color: semanticColorVar("on-primary-text")
+          },
+          arrow: {
+            color: semanticColorVar("bg-surface-overlay-bg")
+          }
+        }
+      },
+      // Only tint visible backdrops (Modal / Dialog / Drawer).
+      // Menu / Popover / Select-like overlays use an invisible backdrop for
+      // click-away; painting those dark caused the intermittent dim overlay
+      // (e.g. CommentsPanel ⋮ menu).
+      MuiBackdrop: {
+        styleOverrides: {
+          root: ({ ownerState }) => ownerState.invisible ? { backgroundColor: "transparent" } : { backgroundColor: modalBackdrop }
+        }
+      },
+      MuiSlider: {
+        styleOverrides: {
+          valueLabel: {
+            backgroundColor: semanticColorVar("on-surface-title"),
+            color: semanticColorVar("bg-surface-layer-bg"),
+            "&::before": {
+              backgroundColor: semanticColorVar("on-surface-title")
+            },
+            "& .MuiSlider-valueLabelLabel": {
+              color: "inherit"
+            }
+          }
+        }
+      }
+    }
+  });
+}
+export {
+  createImpactUiMuiTheme,
+  impactUiDrawerSx,
+  mergeImpactUiDrawerSx
+};

package/dist/tokens/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Public design-token API for impact-ui consumers.
+ *
+ * - Import styles: `import 'impact-ui/styles'`
+ * - Theme: wrap with `ImpactUiThemeProvider`; DOM is source of truth (`data-iu-theme`)
+ * - CSS: `var(--iu-…)` / `semanticColorVar('bg-primary')`
+ */
+export { COLOR_TOKENS, PRIMITIVE_COLOR_TOKENS, IU_THEME_ATTR, semanticColorVar, primitiveColorVar, getColorToken, type ThemeMode, type ColorTokenName, type PrimitiveColorTokenName, } from '../styles/tokens/tokens.generated';
+export { EFFECT_SHADOWS, EFFECT_GRADIENTS, EFFECT_COLOR_MIX_CSS, EFFECT_THEMED_MIX, getEffectThemedMix, type EffectShadowName, type EffectGradientName, type EffectThemedMixName, } from '../styles/tokens/effects.generated';
+export { useImpactUiTheme } from './useImpactUiTheme';
+export { useImpactUiInterfaceStyle } from './useImpactUiInterfaceStyle';
+export { ImpactUiThemeProvider, ImpactUiThemeContext, DEFAULT_IMPACT_UI_THEME_MODE, type ImpactUiThemeProviderProps, } from './ImpactUiThemeProvider';
+export type { UseImpactUiThemeResult, ImpactUiThemeMode, ImpactUiThemeChangeDetail, } from './theme.types';
+export { applyImpactUiThemeToDom, readImpactUiThemeModeFromDom, readImpactUiThemePreferenceFromDom, getSemanticColorFromDom, resolveThemeAppearance, setImpactUiTheme, IU_THEME_MODE_ATTR, IU_THEME_STORAGE_KEY, IU_THEME_TRANSITION_CLASS, IMPACT_UI_THEME_CHANGE, } from './themeDom';
+export { applyImpactUiInterfaceStyleToDom, readImpactUiInterfaceStyleFromDom, readImpactUiInterfaceStyleFromStorage, setImpactUiInterfaceStyle, notifyImpactUiInterfaceStyleChange, IU_INTERFACE_STYLE_ATTR, IU_INTERFACE_STYLE_STORAGE_KEY, IMPACT_UI_INTERFACE_STYLE_CHANGE, type ImpactUiInterfaceStyleId, type ImpactUiInterfaceStyleChangeDetail, type ImpactUiDomPersistOptions, } from './interfaceStyleDom';
+export { createImpactUiMuiTheme, impactUiDrawerSx, mergeImpactUiDrawerSx, } from './createImpactUiMuiTheme';
+export { ImpactUiAppProviders, type ImpactUiAppProvidersProps, type ImpactUiMuiIntegration, } from './ImpactUiAppProviders';
+//# sourceMappingURL=index.d.ts.map

package/dist/tokens/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EACL,YAAY,EACZ,sBAAsB,EACtB,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,KAAK,uBAAuB,GAC7B,MAAM,mCAAmC,CAAC;AAE3C,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,GACzB,MAAM,oCAAoC,CAAC;AAE5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAExE,OAAO,EACL,qBAAqB,EACrB,oBAAoB,EACpB,4BAA4B,EAC5B,KAAK,0BAA0B,GAChC,MAAM,yBAAyB,CAAC;AAEjC,YAAY,EACV,sBAAsB,EACtB,iBAAiB,EACjB,yBAAyB,GAC1B,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,uBAAuB,EACvB,4BAA4B,EAC5B,kCAAkC,EAClC,uBAAuB,EACvB,sBAAsB,EACtB,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,EACpB,yBAAyB,EACzB,sBAAsB,GACvB,MAAM,YAAY,CAAC;AAEpB,OAAO,EACL,gCAAgC,EAChC,iCAAiC,EACjC,qCAAqC,EACrC,yBAAyB,EACzB,kCAAkC,EAClC,uBAAuB,EACvB,8BAA8B,EAC9B,gCAAgC,EAChC,KAAK,wBAAwB,EAC7B,KAAK,kCAAkC,EACvC,KAAK,yBAAyB,GAC/B,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EACL,sBAAsB,EACtB,gBAAgB,EAChB,qBAAqB,GACtB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EACL,oBAAoB,EACpB,KAAK,yBAAyB,EAC9B,KAAK,sBAAsB,GAC5B,MAAM,wBAAwB,CAAC"}

package/dist/tokens/interfaceStyleDom.d.ts

@@ -0,0 +1,21 @@
+/** Seasonal / campaign skin on `<html>` (decorative assets via CSS, e.g. `[data-iu-interface-style='halloween']`). */
+export declare const IU_INTERFACE_STYLE_ATTR: "data-iu-interface-style";
+export declare const IU_INTERFACE_STYLE_STORAGE_KEY: "impact-ui-interface-style";
+export declare const IMPACT_UI_INTERFACE_STYLE_CHANGE: "impact-ui-interface-style-change";
+export type ImpactUiInterfaceStyleId = 'none' | 'laborDay' | 'halloween' | 'christmas';
+export interface ImpactUiInterfaceStyleChangeDetail {
+    style: ImpactUiInterfaceStyleId;
+}
+export interface ImpactUiDomPersistOptions {
+    /** When `false`, only updates `<html>` (preview). Default `true` writes `localStorage`. */
+    persist?: boolean;
+}
+export declare function isImpactUiInterfaceStyleId(value: string): value is ImpactUiInterfaceStyleId;
+/** Committed style from `localStorage` (default `none`). */
+export declare function readImpactUiInterfaceStyleFromStorage(): ImpactUiInterfaceStyleId;
+/** Current style from DOM, then storage (SSR default: `none`). */
+export declare function readImpactUiInterfaceStyleFromDom(): ImpactUiInterfaceStyleId;
+export declare function applyImpactUiInterfaceStyleToDom(style: ImpactUiInterfaceStyleId, options?: ImpactUiDomPersistOptions): void;
+export declare function notifyImpactUiInterfaceStyleChange(detail: ImpactUiInterfaceStyleChangeDetail): void;
+export declare function setImpactUiInterfaceStyle(style: ImpactUiInterfaceStyleId, options?: ImpactUiDomPersistOptions): void;
+//# sourceMappingURL=interfaceStyleDom.d.ts.map

package/dist/tokens/interfaceStyleDom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaceStyleDom.d.ts","sourceRoot":"","sources":["../../src/tokens/interfaceStyleDom.ts"],"names":[],"mappings":"AAAA,sHAAsH;AAEtH,eAAO,MAAM,uBAAuB,EAAG,yBAAkC,CAAC;AAE1E,eAAO,MAAM,8BAA8B,EAAG,2BAAoC,CAAC;AAEnF,eAAO,MAAM,gCAAgC,EAAG,kCAA2C,CAAC;AAE5F,MAAM,MAAM,wBAAwB,GAAG,MAAM,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW,CAAC;AAEvF,MAAM,WAAW,kCAAkC;IACjD,KAAK,EAAE,wBAAwB,CAAC;CACjC;AAED,MAAM,WAAW,yBAAyB;IACxC,2FAA2F;IAC3F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAID,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,wBAAwB,CAE3F;AAED,4DAA4D;AAC5D,wBAAgB,qCAAqC,IAAI,wBAAwB,CAEhF;AAaD,kEAAkE;AAClE,wBAAgB,iCAAiC,IAAI,wBAAwB,CAK5E;AAED,wBAAgB,gCAAgC,CAC9C,KAAK,EAAE,wBAAwB,EAC/B,OAAO,GAAE,yBAA8B,GACtC,IAAI,CAoBN;AAED,wBAAgB,kCAAkC,CAChD,MAAM,EAAE,kCAAkC,GACzC,IAAI,CAGN;AAED,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,wBAAwB,EAC/B,OAAO,GAAE,yBAA8B,GACtC,IAAI,CAGN"}

package/dist/tokens/interfaceStyleDom.js

@@ -0,0 +1,64 @@
+const IU_INTERFACE_STYLE_ATTR = "data-iu-interface-style";
+const IU_INTERFACE_STYLE_STORAGE_KEY = "impact-ui-interface-style";
+const IMPACT_UI_INTERFACE_STYLE_CHANGE = "impact-ui-interface-style-change";
+const VALID_STYLES = /* @__PURE__ */ new Set(["none", "laborDay", "halloween", "christmas"]);
+function isImpactUiInterfaceStyleId(value) {
+  return VALID_STYLES.has(value);
+}
+function readImpactUiInterfaceStyleFromStorage() {
+  return readFromStorage();
+}
+function readFromStorage() {
+  if (typeof localStorage === "undefined") return "none";
+  try {
+    const raw = localStorage.getItem(IU_INTERFACE_STYLE_STORAGE_KEY);
+    if (raw && isImpactUiInterfaceStyleId(raw)) return raw;
+  } catch {
+  }
+  return "none";
+}
+function readImpactUiInterfaceStyleFromDom() {
+  if (typeof document === "undefined") return readFromStorage();
+  const attr = document.documentElement.getAttribute(IU_INTERFACE_STYLE_ATTR);
+  if (attr && isImpactUiInterfaceStyleId(attr)) return attr;
+  return readFromStorage();
+}
+function applyImpactUiInterfaceStyleToDom(style, options = {}) {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  if (style === "none") {
+    root.removeAttribute(IU_INTERFACE_STYLE_ATTR);
+  } else {
+    root.setAttribute(IU_INTERFACE_STYLE_ATTR, style);
+  }
+  if (options.persist === false) return;
+  if (typeof localStorage !== "undefined") {
+    try {
+      if (style === "none") {
+        localStorage.removeItem(IU_INTERFACE_STYLE_STORAGE_KEY);
+      } else {
+        localStorage.setItem(IU_INTERFACE_STYLE_STORAGE_KEY, style);
+      }
+    } catch {
+    }
+  }
+}
+function notifyImpactUiInterfaceStyleChange(detail) {
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(new CustomEvent(IMPACT_UI_INTERFACE_STYLE_CHANGE, { detail }));
+}
+function setImpactUiInterfaceStyle(style, options = {}) {
+  applyImpactUiInterfaceStyleToDom(style, options);
+  notifyImpactUiInterfaceStyleChange({ style });
+}
+export {
+  IMPACT_UI_INTERFACE_STYLE_CHANGE,
+  IU_INTERFACE_STYLE_ATTR,
+  IU_INTERFACE_STYLE_STORAGE_KEY,
+  applyImpactUiInterfaceStyleToDom,
+  isImpactUiInterfaceStyleId,
+  notifyImpactUiInterfaceStyleChange,
+  readImpactUiInterfaceStyleFromDom,
+  readImpactUiInterfaceStyleFromStorage,
+  setImpactUiInterfaceStyle
+};

package/dist/tokens/theme.types.d.ts

@@ -0,0 +1,19 @@
+import { ImpactUiDomPersistOptions } from './interfaceStyleDom';
+import { ColorTokenName, ThemeMode } from '../styles/tokens/tokens.generated';
+
+export type { ThemeMode };
+/** User preference: fixed light/dark or follow OS (`system`). */
+export type ImpactUiThemeMode = ThemeMode | 'system';
+export interface UseImpactUiThemeResult {
+    /** Selected preference (`light` | `dark` | `system`). */
+    mode: ImpactUiThemeMode;
+    /** Resolved appearance on `<html>` — use for labels and `getColorToken`. */
+    resolvedMode: ThemeMode;
+    setMode: (mode: ImpactUiThemeMode, options?: ImpactUiDomPersistOptions) => void;
+    getSemanticColor: (name: ColorTokenName) => string;
+}
+export interface ImpactUiThemeChangeDetail {
+    mode: ImpactUiThemeMode;
+    resolved: ThemeMode;
+}
+//# sourceMappingURL=theme.types.d.ts.map

package/dist/tokens/theme.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.types.d.ts","sourceRoot":"","sources":["../../src/tokens/theme.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AACrE,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAEnF,YAAY,EAAE,SAAS,EAAE,CAAC;AAE1B,iEAAiE;AACjE,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,QAAQ,CAAC;AAErD,MAAM,WAAW,sBAAsB;IACrC,yDAAyD;IACzD,IAAI,EAAE,iBAAiB,CAAC;IACxB,4EAA4E;IAC5E,YAAY,EAAE,SAAS,CAAC;IACxB,OAAO,EAAE,CAAC,IAAI,EAAE,iBAAiB,EAAE,OAAO,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAChF,gBAAgB,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,MAAM,CAAC;CACpD;AAED,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,iBAAiB,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB"}

package/dist/tokens/themeDom.d.ts

@@ -0,0 +1,31 @@
+import { IU_THEME_ATTR, ColorTokenName, ThemeMode } from '../styles/tokens/tokens.generated';
+import { ImpactUiDomPersistOptions } from './interfaceStyleDom';
+import { ImpactUiThemeChangeDetail, ImpactUiThemeMode } from './theme.types';
+
+export { IU_THEME_ATTR };
+/** Stores user preference (`light` | `dark` | `system`). Omitted when `light`. */
+export declare const IU_THEME_MODE_ATTR: "data-iu-theme-mode";
+/** `localStorage` key for theme preference (`dark` | `system`; omitted when `light`). */
+export declare const IU_THEME_STORAGE_KEY: "impact-ui-theme-preference";
+export declare const IMPACT_UI_THEME_CHANGE = "impact-ui-theme-change";
+/** @deprecated Theme color cross-fade is disabled; class is no longer applied on mode change. */
+export declare const IU_THEME_TRANSITION_CLASS: "ia-theme-changing";
+export declare function resolveThemeAppearance(preference: ImpactUiThemeMode): ThemeMode;
+/** Resolved light/dark from `<html data-iu-theme>` (SSR default: light). */
+export declare function readImpactUiThemeModeFromDom(): ThemeMode;
+/**
+ * Hex for a semantic token from the current DOM resolved mode — no React hook.
+ * Prefer CSS vars or `useImpactUiTheme().getSemanticColor` when UI must update on theme toggle.
+ */
+export declare function getSemanticColorFromDom(name: ColorTokenName): string;
+/**
+ * Preference from storage, then `<html data-iu-theme-mode>`, then resolved appearance, then `fallback`.
+ */
+export declare function readImpactUiThemePreferenceFromDom(fallback?: ImpactUiThemeMode): ImpactUiThemeMode;
+/** Apply preference + resolved appearance on `<html>`. */
+export declare function applyImpactUiThemeToDom(preference: ImpactUiThemeMode, resolved?: ThemeMode, options?: ImpactUiDomPersistOptions): void;
+export declare function notifyImpactUiThemeChange(detail: ImpactUiThemeChangeDetail): void;
+export declare function setImpactUiTheme(mode: ImpactUiThemeMode, options?: ImpactUiDomPersistOptions): void;
+export declare function subscribeSystemColorScheme(onChange: () => void): () => void;
+export declare function getSystemColorSchemeSnapshot(): ThemeMode;
+//# sourceMappingURL=themeDom.d.ts.map

package/dist/tokens/themeDom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeDom.d.ts","sourceRoot":"","sources":["../../src/tokens/themeDom.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,aAAa,EACb,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,mCAAmC,CAAC;AAE3C,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AACrE,OAAO,KAAK,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElF,OAAO,EAAE,aAAa,EAAE,CAAC;AAEzB,kFAAkF;AAClF,eAAO,MAAM,kBAAkB,EAAG,oBAA6B,CAAC;AAEhE,yFAAyF;AACzF,eAAO,MAAM,oBAAoB,EAAG,4BAAqC,CAAC;AAE1E,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAE/D,iGAAiG;AACjG,eAAO,MAAM,yBAAyB,EAAG,mBAA4B,CAAC;AAOtE,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,iBAAiB,GAAG,SAAS,CAG/E;AAED,4EAA4E;AAC5E,wBAAgB,4BAA4B,IAAI,SAAS,CAGxD;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM,CAEpE;AA0BD;;GAEG;AACH,wBAAgB,kCAAkC,CAChD,QAAQ,GAAE,iBAA2B,GACpC,iBAAiB,CAcnB;AAED,0DAA0D;AAC1D,wBAAgB,uBAAuB,CACrC,UAAU,EAAE,iBAAiB,EAC7B,QAAQ,GAAE,SAA8C,EACxD,OAAO,GAAE,yBAA8B,GACtC,IAAI,CAqBN;AAED,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,yBAAyB,GAAG,IAAI,CAGjF;AAED,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,iBAAiB,EACvB,OAAO,GAAE,yBAA8B,GACtC,IAAI,CAIN;AAED,wBAAgB,0BAA0B,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAO3E;AAED,wBAAgB,4BAA4B,IAAI,SAAS,CAExD"}

package/dist/tokens/themeDom.js

@@ -0,0 +1,103 @@
+import { IU_THEME_ATTR, getColorToken } from "../styles/tokens/tokens.generated.js";
+const IU_THEME_MODE_ATTR = "data-iu-theme-mode";
+const IU_THEME_STORAGE_KEY = "impact-ui-theme-preference";
+const IMPACT_UI_THEME_CHANGE = "impact-ui-theme-change";
+function getSystemAppearance() {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function resolveThemeAppearance(preference) {
+  if (preference === "system") return getSystemAppearance();
+  return preference;
+}
+function readImpactUiThemeModeFromDom() {
+  if (typeof document === "undefined") return "light";
+  return document.documentElement.getAttribute(IU_THEME_ATTR) === "dark" ? "dark" : "light";
+}
+function getSemanticColorFromDom(name) {
+  return getColorToken(readImpactUiThemeModeFromDom(), name);
+}
+function readStoredThemePreference() {
+  if (typeof window === "undefined") return null;
+  try {
+    const stored = localStorage.getItem(IU_THEME_STORAGE_KEY);
+    if (stored === "light" || stored === "dark" || stored === "system") return stored;
+  } catch {
+  }
+  return null;
+}
+function persistThemePreference(preference) {
+  if (typeof window === "undefined") return;
+  try {
+    if (preference === "light") {
+      localStorage.removeItem(IU_THEME_STORAGE_KEY);
+    } else {
+      localStorage.setItem(IU_THEME_STORAGE_KEY, preference);
+    }
+  } catch {
+  }
+}
+function readImpactUiThemePreferenceFromDom(fallback = "light") {
+  if (typeof document === "undefined") return fallback;
+  const fromStorage = readStoredThemePreference();
+  if (fromStorage != null) return fromStorage;
+  const root = document.documentElement;
+  const stored = root.getAttribute(IU_THEME_MODE_ATTR);
+  if (stored === "dark" || stored === "system") return stored;
+  if (stored === "light") return "light";
+  if (readImpactUiThemeModeFromDom() === "dark") return "dark";
+  return fallback;
+}
+function applyImpactUiThemeToDom(preference, resolved = resolveThemeAppearance(preference), options = {}) {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  if (preference === "light") {
+    root.removeAttribute(IU_THEME_MODE_ATTR);
+  } else {
+    root.setAttribute(IU_THEME_MODE_ATTR, preference);
+  }
+  if (resolved === "light") {
+    root.removeAttribute(IU_THEME_ATTR);
+  } else {
+    root.setAttribute(IU_THEME_ATTR, resolved);
+  }
+  root.style.colorScheme = resolved;
+  if (options.persist !== false) {
+    persistThemePreference(preference);
+  }
+}
+function notifyImpactUiThemeChange(detail) {
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(new CustomEvent(IMPACT_UI_THEME_CHANGE, { detail }));
+}
+function setImpactUiTheme(mode, options = {}) {
+  const resolved = resolveThemeAppearance(mode);
+  applyImpactUiThemeToDom(mode, resolved, options);
+  notifyImpactUiThemeChange({ mode, resolved });
+}
+function subscribeSystemColorScheme(onChange) {
+  if (typeof window === "undefined") return () => void 0;
+  const mq = window.matchMedia("(prefers-color-scheme: dark)");
+  mq.addEventListener("change", onChange);
+  return () => {
+    mq.removeEventListener("change", onChange);
+  };
+}
+function getSystemColorSchemeSnapshot() {
+  return getSystemAppearance();
+}
+export {
+  IMPACT_UI_THEME_CHANGE,
+  IU_THEME_ATTR,
+  IU_THEME_MODE_ATTR,
+  IU_THEME_STORAGE_KEY,
+  applyImpactUiThemeToDom,
+  getSemanticColorFromDom,
+  getSystemColorSchemeSnapshot,
+  notifyImpactUiThemeChange,
+  readImpactUiThemeModeFromDom,
+  readImpactUiThemePreferenceFromDom,
+  resolveThemeAppearance,
+  setImpactUiTheme,
+  subscribeSystemColorScheme
+};

package/dist/tokens/useImpactUiInterfaceStyle.d.ts

@@ -0,0 +1,7 @@
+import { ImpactUiInterfaceStyleId } from './interfaceStyleDom';
+
+/**
+ * Subscribes to `setImpactUiInterfaceStyle` / ThemingPanel (same event as DOM `data-iu-interface-style`).
+ */
+export declare function useImpactUiInterfaceStyle(): ImpactUiInterfaceStyleId;
+//# sourceMappingURL=useImpactUiInterfaceStyle.d.ts.map

package/dist/tokens/useImpactUiInterfaceStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImpactUiInterfaceStyle.d.ts","sourceRoot":"","sources":["../../src/tokens/useImpactUiInterfaceStyle.ts"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,wBAAwB,EAC9B,MAAM,qBAAqB,CAAC;AAE7B;;GAEG;AACH,wBAAgB,yBAAyB,IAAI,wBAAwB,CAepE"}

package/dist/tokens/useImpactUiInterfaceStyle.js

@@ -0,0 +1,19 @@
+import { useState, useEffect } from "react";
+import { readImpactUiInterfaceStyleFromDom, IMPACT_UI_INTERFACE_STYLE_CHANGE } from "./interfaceStyleDom.js";
+function useImpactUiInterfaceStyle() {
+  const [style, setStyle] = useState(readImpactUiInterfaceStyleFromDom);
+  useEffect(() => {
+    const onChange = (event) => {
+      const { detail } = event;
+      setStyle(detail.style);
+    };
+    window.addEventListener(IMPACT_UI_INTERFACE_STYLE_CHANGE, onChange);
+    return () => {
+      window.removeEventListener(IMPACT_UI_INTERFACE_STYLE_CHANGE, onChange);
+    };
+  }, []);
+  return style;
+}
+export {
+  useImpactUiInterfaceStyle
+};

package/dist/tokens/useImpactUiTheme.d.ts

@@ -0,0 +1,9 @@
+import { setImpactUiTheme } from './themeDom';
+import { UseImpactUiThemeResult } from './theme.types';
+
+export { setImpactUiTheme };
+/**
+ * Prefer inside `ImpactUiThemeProvider`. Without a provider, follows DOM + theme change events.
+ */
+export declare function useImpactUiTheme(): UseImpactUiThemeResult;
+//# sourceMappingURL=useImpactUiTheme.d.ts.map

package/dist/tokens/useImpactUiTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImpactUiTheme.d.ts","sourceRoot":"","sources":["../../src/tokens/useImpactUiTheme.ts"],"names":[],"mappings":"AAGA,OAAO,EAKL,gBAAgB,EAEjB,MAAM,YAAY,CAAC;AAIpB,OAAO,KAAK,EAA6B,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAEvF,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,sBAAsB,CA8CzD"}

package/dist/tokens/useImpactUiTheme.js

@@ -0,0 +1,46 @@
+import { useState, useEffect, useCallback } from "react";
+import { useImpactUiThemeContext } from "./ImpactUiThemeProvider.js";
+import { readImpactUiThemePreferenceFromDom, getSystemColorSchemeSnapshot, IMPACT_UI_THEME_CHANGE, subscribeSystemColorScheme, resolveThemeAppearance, setImpactUiTheme } from "./themeDom.js";
+import { getColorToken } from "../styles/tokens/tokens.generated.js";
+function useImpactUiTheme() {
+  const fromProvider = useImpactUiThemeContext();
+  const [mode, setModeState] = useState(readImpactUiThemePreferenceFromDom);
+  const [systemResolved, setSystemResolved] = useState(getSystemColorSchemeSnapshot);
+  useEffect(() => {
+    if (fromProvider) return;
+    const onThemeChange = (event) => {
+      const { detail } = event;
+      setModeState(detail.mode);
+    };
+    window.addEventListener(IMPACT_UI_THEME_CHANGE, onThemeChange);
+    return () => {
+      window.removeEventListener(IMPACT_UI_THEME_CHANGE, onThemeChange);
+    };
+  }, [fromProvider]);
+  useEffect(() => {
+    if (fromProvider) return;
+    if (mode !== "system") return;
+    setSystemResolved(getSystemColorSchemeSnapshot());
+    return subscribeSystemColorScheme(() => {
+      setSystemResolved(getSystemColorSchemeSnapshot());
+    });
+  }, [fromProvider, mode]);
+  const preference = (fromProvider == null ? void 0 : fromProvider.mode) ?? mode;
+  const resolved = (fromProvider == null ? void 0 : fromProvider.resolvedMode) ?? (preference === "system" ? systemResolved : resolveThemeAppearance(preference));
+  const setModeFallback = useCallback(
+    (next, options) => {
+      setImpactUiTheme(next, options);
+    },
+    []
+  );
+  const getSemanticColor = useCallback(
+    (name) => getColorToken(resolved, name),
+    [resolved]
+  );
+  if (fromProvider) return fromProvider;
+  return { mode: preference, resolvedMode: resolved, setMode: setModeFallback, getSemanticColor };
+}
+export {
+  setImpactUiTheme,
+  useImpactUiTheme
+};

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "impact-ui",
-  "version": "5.0.0",
+  "version": "5.0.1-beta.1",
   "description": "Impact Analytics UI library",
   "type": "module",
   "main": "./dist/components/index.js",
   "module": "./dist/components/index.js",
   "types": "./dist/components/index.d.ts",
   "sideEffects": [
-    "./dist/styles/style.css"
+    "./dist/styles/style.css",
+    "./dist/styles/entry.js",
+    "./dist/components/index.js",
+    "**/*.css"
   ],
   "exports": {
     ".": {
@@ -16,6 +19,10 @@
     },
     "./styles.css": "./dist/styles/style.css",
     "./styles": "./dist/styles/style.css",
+    "./tokens": {
+      "types": "./dist/tokens/index.d.ts",
+      "import": "./dist/tokens/index.js"
+    },
     "./package.json": "./package.json",
     "./eslint-plugin": {
       "import": "./eslint-plugin/index.js"
@@ -51,6 +58,7 @@
   "scripts": {
     "dev": "vite",
     "build": "npm run build:lib",
+    "generate:tokens": "node ./scripts/generate-color-tokens.mjs && node ./scripts/generate-effects.mjs && node ./scripts/generate-legacy-colors.mjs",
     "build:lib": "node ./scripts/clean-dist.mjs && tsc --noEmit && SOURCE_MAP=0 vite build && SOURCE_MAP=0 vite build --config vite.styles.config.ts && node ./scripts/generate-mcp-registry.mjs",
     "build:lib:debug": "node ./scripts/clean-dist.mjs && tsc && NO_MINIFY=1 SOURCE_MAP=1 vite build && node ./scripts/generate-mcp-registry.mjs",
     "optimize:images": "node ./scripts/optimize-images.mjs",
@@ -108,7 +116,7 @@
     "@chromatic-com/storybook": "^5.0.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@impactsmartsuite/impact-icons": "^0.1.4",
+    "@impactsmartsuite/impact-icons": "^0.1.8-beta.8",
     "@mui/base": "^5.0.0-alpha.82",
     "@mui/docs": "^5.8.0",
     "@mui/envinfo": "^2.0.6",