impact-ui 4.0.17 → 5.0.0-beta.1

package/dist/styles/tokens/tokens.generated.js

@@ -0,0 +1,403 @@
+const IU_THEME_ATTR = "data-iu-theme";
+const COLOR_TOKENS = {
+  light: {
+    "action-primary-icon": "#3649C6",
+    "action-primary-text": "#4259EE",
+    "badge-error-bg-default": "#E15554",
+    "badge-error-bg-default-filled": "#ED9998",
+    "badge-error-bg-lighter": "#FCEEEE",
+    "badge-error-bg-subtle": "#FCEEEE",
+    "badge-error-on-default": "#C64746",
+    "badge-error-on-subtle": "#F6CCCC",
+    "badge-information-bg-default": "#4259EE",
+    "badge-information-bg-lighter": "#ECEEFD",
+    "badge-information-bg-subtle": "#EFF2FA",
+    "badge-information-on-default": "#4259EE",
+    "badge-information-on-lighter": "#B3BDF8",
+    "badge-neutral-bg-default": "#60697D",
+    "badge-neutral-bg-subtle": "#F2F4FA",
+    "badge-neutral-on-default": "#60697D",
+    "badge-neutral-on-subtle": "#C3C8D4",
+    "badge-success-bg-default": "#26734B",
+    "badge-success-bg-lighter": "#EBF7F1",
+    "badge-success-bg-subtle": "#EBF7F1",
+    "badge-success-on-default": "#26734B",
+    "badge-success-on-subtle": "#C4E8D5",
+    "badge-warnings-bg-default": "#FFE770",
+    "badge-warnings-bg-lighter": "#FFF7D1",
+    "badge-warnings-bg-subtle": "#FFFBE5",
+    "badge-warnings-on-default": "#7A6615",
+    "badge-warnings-on-subtle": "#FFE770",
+    "bg-disabled-1": "#F8F9FB",
+    "bg-disabled-2": "#C3C8D4",
+    "bg-disabled-cell": "#FAFAFA",
+    "bg-error": "#E15554",
+    "bg-error-darker": "#AB3939",
+    "bg-error-lighter": "#F6CCCC",
+    "bg-error-subtle": "#FCEEEE",
+    "bg-info": "#4259EE",
+    "bg-info-darker": "#3649C6",
+    "bg-info-darkest": "#29399F",
+    "bg-info-lighter": "#B3BDF8",
+    "bg-info-subtle": "#ECEEFD",
+    "bg-primary": "#4259EE",
+    "bg-primary-darker": "#3649C6",
+    "bg-primary-darkest": "#29399F",
+    "bg-primary-lighter": "#B3BDF8",
+    "bg-primary-subtle": "#ECEEFD",
+    "bg-success": "#3BB273",
+    "bg-success-darker": "#26734B",
+    "bg-success-lighter": "#C4E8D5",
+    "bg-success-subtle": "#EBF7F1",
+    "bg-surface": "#7A8294",
+    "bg-surface-body-bg": "#EFF2FA",
+    "bg-surface-layer-bg": "#FFFFFF",
+    "bg-surface-lighter": "#F5F6FA",
+    "bg-surface-lightest": "#F2F4FA",
+    "bg-surface-overlay-bg": "#0D152C",
+    "bg-surface-subtle": "#D9DDE7",
+    "bg-warning": "#E1BC29",
+    "bg-warning-darker": "#9D831C",
+    "bg-warning-lighter": "#F6EBBF",
+    "bg-warning-subtle": "#FCF8EA",
+    "border-default": "#D9DDE7",
+    "border-default-darker": "#7A8294",
+    "border-default-subtle": "#F5F6FA",
+    "border-disabled": "#D9DDE7",
+    "border-error": "#E15554",
+    "border-error-darker": "#AB3939",
+    "border-error-lighter": "#F6CCCC",
+    "border-error-subtle": "#FCEEEE",
+    "border-info": "#4259EE",
+    "border-info-darker": "#3649C6",
+    "border-info-lighter": "#B3BDF8",
+    "border-info-subtle": "#ECEEFD",
+    "border-primary": "#4259EE",
+    "border-primary-darker": "#3649C6",
+    "border-primary-lighter": "#B3BDF8",
+    "border-primary-subtle": "#ECEEFD",
+    "border-success": "#3BB273",
+    "border-success-darker": "#26734B",
+    "border-success-lighter": "#C4E8D5",
+    "border-success-subtle": "#EBF7F1",
+    "border-warning": "#E1BC29",
+    "border-warning-darker": "#9D831C",
+    "border-warning-lighter": "#F6EBBF",
+    "border-warning-subtle": "#FCF8EA",
+    "on-disabled": "#B4BAC7",
+    "on-disabled-icon-1": "#D9DDE7",
+    "on-disabled-icon-2": "#B4BAC7",
+    "on-disabled-placeholder": "#D9DDE7",
+    "on-error-icon": "#AB3939",
+    "on-error-text": "#AB3939",
+    "on-info-icon": "#3649C6",
+    "on-info-text": "#3649C6",
+    "on-primary-icon": "#FFFFFF",
+    "on-primary-text": "#FFFFFF",
+    "on-success-icon": "#26734B",
+    "on-success-text": "#26734B",
+    "on-surface-body": "#1F2B4D",
+    "on-surface-caption": "#7A8294",
+    "on-surface-icon": "#60697D",
+    "on-surface-label": "#60697D",
+    "on-surface-placeholder-text": "#B4BAC7",
+    "on-surface-subtitle": "#31416E",
+    "on-surface-title": "#0D152C",
+    "on-warning-icon": "#9D831C",
+    "on-warning-text": "#52430B",
+    "select-options-bg": "#FFFFFF"
+  },
+  dark: {
+    "action-primary-icon": "#4259EE",
+    "action-primary-text": "#4259EE",
+    "badge-error-bg-default": "#ED9998",
+    "badge-error-bg-default-filled": "#AB3939",
+    "badge-error-bg-lighter": "#631B1B",
+    "badge-error-bg-subtle": "#3B0E0E",
+    "badge-error-on-default": "#F6CCCC",
+    "badge-error-on-subtle": "#F6CCCC",
+    "badge-information-bg-default": "#687AF1",
+    "badge-information-bg-lighter": "#121A52",
+    "badge-information-bg-subtle": "#0A0E30",
+    "badge-information-on-default": "#B3BDF8",
+    "badge-information-on-lighter": "#ECEEFD",
+    "badge-neutral-bg-default": "#D9DDE7",
+    "badge-neutral-bg-subtle": "#1F2332",
+    "badge-neutral-on-default": "#F8F9FB",
+    "badge-neutral-on-subtle": "#C3C8D4",
+    "badge-success-bg-default": "#89D1AB",
+    "badge-success-bg-lighter": "#103822",
+    "badge-success-bg-subtle": "#071E10",
+    "badge-success-on-default": "#C4E8D5",
+    "badge-success-on-subtle": "#C4E8D5",
+    "badge-warnings-bg-default": "#FFEF9E",
+    "badge-warnings-bg-lighter": "#52430B",
+    "badge-warnings-bg-subtle": "#2B2304",
+    "badge-warnings-on-default": "#F6EBBF",
+    "badge-warnings-on-subtle": "#F6EBBF",
+    "bg-disabled-1": "#1F2332",
+    "bg-disabled-2": "#404B62",
+    "bg-disabled-cell": "#262D3D",
+    "bg-error": "#E15554",
+    "bg-error-darker": "#ED9998",
+    "bg-error-lighter": "#631B1B",
+    "bg-error-subtle": "#3B0E0E",
+    "bg-info": "#4259EE",
+    "bg-info-darker": "#687AF1",
+    "bg-info-darkest": "#B3BDF8",
+    "bg-info-lighter": "#121A52",
+    "bg-info-subtle": "#0A0E30",
+    "bg-primary": "#4259EE",
+    "bg-primary-darker": "#687AF1",
+    "bg-primary-darkest": "#687AF1",
+    "bg-primary-lighter": "#121A52",
+    "bg-primary-subtle": "#1F2332",
+    "bg-success": "#3BB273",
+    "bg-success-darker": "#89D1AB",
+    "bg-success-lighter": "#103822",
+    "bg-success-subtle": "#071E10",
+    "bg-surface": "#B4BAC7",
+    "bg-surface-body-bg": "#060714",
+    "bg-surface-layer-bg": "#121521",
+    "bg-surface-lighter": "#404B62",
+    "bg-surface-lightest": "#1F2332",
+    "bg-surface-overlay-bg": "#060714",
+    "bg-surface-subtle": "#60697D",
+    "bg-warning": "#E1BC29",
+    "bg-warning-darker": "#EDD77F",
+    "bg-warning-lighter": "#52430B",
+    "bg-warning-subtle": "#2B2304",
+    "border-default": "#404B62",
+    "border-default-darker": "#7A8294",
+    "border-default-subtle": "#262D3D",
+    "border-disabled": "#404B62",
+    "border-error": "#E15554",
+    "border-error-darker": "#ED9998",
+    "border-error-lighter": "#631B1B",
+    "border-error-subtle": "#3B0E0E",
+    "border-info": "#4259EE",
+    "border-info-darker": "#687AF1",
+    "border-info-lighter": "#121A52",
+    "border-info-subtle": "#0A0E30",
+    "border-primary": "#4259EE",
+    "border-primary-darker": "#687AF1",
+    "border-primary-lighter": "#121A52",
+    "border-primary-subtle": "#0A0E30",
+    "border-success": "#3BB273",
+    "border-success-darker": "#89D1AB",
+    "border-success-lighter": "#103822",
+    "border-success-subtle": "#071E10",
+    "border-warning": "#E1BC29",
+    "border-warning-darker": "#EDD77F",
+    "border-warning-lighter": "#52430B",
+    "border-warning-subtle": "#2B2304",
+    "on-disabled": "#60697D",
+    "on-disabled-icon-1": "#60697D",
+    "on-disabled-icon-2": "#404B62",
+    "on-disabled-placeholder": "#60697D",
+    "on-error-icon": "#F6CCCC",
+    "on-error-text": "#F6CCCC",
+    "on-info-icon": "#4259EE",
+    "on-info-text": "#4259EE",
+    "on-primary-icon": "#F8F9FB",
+    "on-primary-text": "#F8F9FB",
+    "on-success-icon": "#C4E8D5",
+    "on-success-text": "#C4E8D5",
+    "on-surface-body": "#D9DDE7",
+    "on-surface-caption": "#EFF2FA",
+    "on-surface-icon": "#C3C8D4",
+    "on-surface-label": "#B4BAC7",
+    "on-surface-placeholder-text": "#60697D",
+    "on-surface-subtitle": "#F2F4FA",
+    "on-surface-title": "#FAFAFA",
+    "on-warning-icon": "#F6EBBF",
+    "on-warning-text": "#52430B",
+    "select-options-bg": "#262D3D"
+  }
+};
+const PRIMITIVE_COLOR_TOKENS = {
+  "color-beaver-100": "#F6F5F3",
+  "color-beaver-200": "#EEEAE7",
+  "color-beaver-300": "#DED5D0",
+  "color-beaver-400": "#CEC3BB",
+  "color-beaver-500": "#BCAFA3",
+  "color-beaver-600": "#AC9A8C",
+  "color-beaver-700": "#917A69",
+  "color-blue-01-100": "#ECEEFD",
+  "color-blue-01-200": "#B3BDF8",
+  "color-blue-01-300": "#687AF1",
+  "color-blue-01-400": "#4259EE",
+  "color-blue-01-50": "#EFF2FA",
+  "color-blue-01-500": "#3649C6",
+  "color-blue-01-600": "#29399F",
+  "color-blue-01-700": "#1D2977",
+  "color-blue-01-800": "#121A52",
+  "color-blue-01-900": "#0A0E30",
+  "color-blue-02-100": "#6682D2",
+  "color-blue-02-200": "#546CB1",
+  "color-blue-02-300": "#4B61A0",
+  "color-blue-02-400": "#425690",
+  "color-blue-02-500": "#31416E",
+  "color-blue-02-600": "#1F2B4D",
+  "color-blue-02-700": "#0D152C",
+  "color-blue-02-800": "#080D1C",
+  "color-blue-02-900": "#04070F",
+  "color-bronze-100": "#FBF2E9",
+  "color-bronze-200": "#F8E5D3",
+  "color-bronze-300": "#F0CCA7",
+  "color-bronze-400": "#EAB57F",
+  "color-bronze-500": "#E29C55",
+  "color-bronze-600": "#DB8229",
+  "color-bronze-700": "#B3691E",
+  "color-brown-100": "#F7F2EE",
+  "color-brown-200": "#F1E8E0",
+  "color-brown-300": "#E0D3C2",
+  "color-brown-400": "#D1BBA3",
+  "color-brown-500": "#C1A281",
+  "color-brown-600": "#B28B63",
+  "color-brown-700": "#936F48",
+  "color-celtic-blue-100": "#F0F4F8",
+  "color-celtic-blue-200": "#E2E9F4",
+  "color-celtic-blue-300": "#C0D1E7",
+  "color-celtic-blue-400": "#A4BBDC",
+  "color-celtic-blue-500": "#86A6D0",
+  "color-celtic-blue-600": "#658EC4",
+  "color-celtic-blue-700": "#4271AE",
+  "color-cyan-100": "#E9F7FC",
+  "color-cyan-200": "#CFF0F8",
+  "color-cyan-300": "#A2E1F1",
+  "color-cyan-400": "#6FD2EA",
+  "color-cyan-500": "#3FC2E3",
+  "color-cyan-600": "#20ACCF",
+  "color-cyan-700": "#1789A5",
+  "color-eggplant-100": "#F0EBEE",
+  "color-eggplant-200": "#E0D6DE",
+  "color-eggplant-300": "#C4B1BF",
+  "color-eggplant-400": "#A5889E",
+  "color-eggplant-500": "#82637B",
+  "color-eggplant-600": "#5C4657",
+  "color-eggplant-700": "#483744",
+  "color-electric-orange-100": "#FEE7E1",
+  "color-electric-orange-200": "#FED0C3",
+  "color-electric-orange-300": "#FC9D81",
+  "color-electric-orange-400": "#FB6D45",
+  "color-electric-orange-500": "#FA3A07",
+  "color-electric-orange-600": "#BB2C05",
+  "color-electric-orange-700": "#962304",
+  "color-green-100": "#EBF7F1",
+  "color-green-200": "#C4E8D5",
+  "color-green-300": "#89D1AB",
+  "color-green-400": "#3BB273",
+  "color-green-500": "#31935F",
+  "color-green-600": "#26734B",
+  "color-green-700": "#1C5436",
+  "color-green-800": "#103822",
+  "color-green-900": "#071E10",
+  "color-grey-0": "#FFFFFF",
+  "color-grey-100": "#F8F9FB",
+  "color-grey-1000": "#404B62",
+  "color-grey-1100": "#262D3D",
+  "color-grey-1200": "#1F2332",
+  "color-grey-1300": "#121521",
+  "color-grey-1400-alpha": "#060714",
+  "color-grey-200": "#F5F6FA",
+  "color-grey-300": "#F2F4FA",
+  "color-grey-400": "#EFF2FA",
+  "color-grey-50": "#FAFAFA",
+  "color-grey-500": "#D9DDE7",
+  "color-grey-600": "#C3C8D4",
+  "color-grey-700": "#B4BAC7",
+  "color-grey-800": "#7A8294",
+  "color-grey-900": "#60697D",
+  "color-maroon-100": "#F7E3E7",
+  "color-maroon-200": "#F1CBD3",
+  "color-maroon-300": "#E397A7",
+  "color-maroon-400": "#D5647B",
+  "color-maroon-500": "#C13453",
+  "color-maroon-600": "#8C263C",
+  "color-maroon-700": "#701E30",
+  "color-olive-100": "#F6F6F3",
+  "color-olive-200": "#EDEEE7",
+  "color-olive-300": "#DDDFD3",
+  "color-olive-400": "#CCCDBB",
+  "color-olive-500": "#BABCA4",
+  "color-olive-600": "#AAAC8E",
+  "color-olive-700": "#8C906A",
+  "color-orange-100": "#FDF0EC",
+  "color-orange-200": "#FCE5DF",
+  "color-orange-300": "#F8C8BA",
+  "color-orange-400": "#F4AF9A",
+  "color-orange-500": "#F19579",
+  "color-orange-600": "#ED7955",
+  "color-orange-700": "#E74B1C",
+  "color-purple-100": "#F4F1F9",
+  "color-purple-200": "#E9E3F2",
+  "color-purple-300": "#D6CBE6",
+  "color-purple-400": "#BFAFD9",
+  "color-purple-500": "#AD97CE",
+  "color-purple-600": "#977CC1",
+  "color-purple-700": "#7552AD",
+  "color-red-100": "#FCEEEE",
+  "color-red-200": "#F6CCCC",
+  "color-red-300": "#ED9998",
+  "color-red-400": "#E15554",
+  "color-red-500": "#C64746",
+  "color-red-600": "#AB3939",
+  "color-red-700": "#8F2C2B",
+  "color-red-800": "#631B1B",
+  "color-red-900": "#3B0E0E",
+  "color-sunshine-yellow-100": "#FFFBE5",
+  "color-sunshine-yellow-200": "#FFF7D1",
+  "color-sunshine-yellow-300": "#FFEF9E",
+  "color-sunshine-yellow-400": "#FFE770",
+  "color-sunshine-yellow-500": "#FFE041",
+  "color-sunshine-yellow-600": "#FFD812",
+  "color-sunshine-yellow-700": "#DBB702",
+  "color-turquoise-100": "#EDF7F8",
+  "color-turquoise-200": "#DBEFF0",
+  "color-turquoise-300": "#B7DFE1",
+  "color-turquoise-400": "#93CFD2",
+  "color-turquoise-500": "#6BBEC2",
+  "color-turquoise-600": "#48ACB2",
+  "color-turquoise-700": "#3B898D",
+  "color-violet-100": "#F6EDFD",
+  "color-violet-200": "#F0DFFB",
+  "color-violet-300": "#DFBBF7",
+  "color-violet-400": "#D09BF3",
+  "color-violet-500": "#BE77EE",
+  "color-violet-600": "#AE57EA",
+  "color-violet-700": "#931CE3",
+  "color-yellow-100": "#FCF8EA",
+  "color-yellow-200": "#F6EBBF",
+  "color-yellow-300": "#EDD77F",
+  "color-yellow-400": "#E1BC29",
+  "color-yellow-500": "#BF9F22",
+  "color-yellow-600": "#9D831C",
+  "color-yellow-700": "#7A6615",
+  "color-yellow-800": "#52430B",
+  "color-yellow-900": "#2B2304",
+  "color-yellow-green-100": "#F5F9EC",
+  "color-yellow-green-200": "#EAF3D7",
+  "color-yellow-green-300": "#D7E5B2",
+  "color-yellow-green-400": "#C3DA8B",
+  "color-yellow-green-500": "#B1CD66",
+  "color-yellow-green-600": "#99BF3E",
+  "color-yellow-green-700": "#7D9A32"
+};
+function semanticColorVar(name) {
+  return `var(--iu-${name})`;
+}
+function primitiveColorVar(name) {
+  return `var(--iu-${name})`;
+}
+function getColorToken(mode, name) {
+  return COLOR_TOKENS[mode][name];
+}
+export {
+  COLOR_TOKENS,
+  IU_THEME_ATTR,
+  PRIMITIVE_COLOR_TOKENS,
+  getColorToken,
+  primitiveColorVar,
+  semanticColorVar
+};

package/dist/tokens/ImpactUiAppProviders.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { ImpactUiThemeProviderProps } from './ImpactUiThemeProvider';
+
+export type ImpactUiMuiIntegration = 'integrated' | 'none';
+export interface ImpactUiAppProvidersProps extends ImpactUiThemeProviderProps {
+    /**
+     * `integrated` (default): wraps with MUI `ThemeProvider` + `createImpactUiMuiTheme(resolvedMode)`.
+     * `none`: only Impact UI tokens / DOM theme (for apps that manage MUI themselves).
+     */
+    muiIntegration?: ImpactUiMuiIntegration;
+}
+/**
+ * Single entry point for consuming apps: design tokens on `<html>` + optional MUI palette sync.
+ *
+ * Requires `import 'impact-ui/styles'` once in the app entry.
+ */
+export declare function ImpactUiAppProviders({ children, muiIntegration, ...themeProps }: ImpactUiAppProvidersProps): React.JSX.Element;
+//# sourceMappingURL=ImpactUiAppProviders.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImpactUiAppProviders.d.ts","sourceRoot":"","sources":["../../src/tokens/ImpactUiAppProviders.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAyB,KAAK,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAGjG,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,yBAA0B,SAAQ,0BAA0B;IAC3E;;;OAGG;IACH,cAAc,CAAC,EAAE,sBAAsB,CAAC;CACzC;AAaD;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,cAA6B,EAC7B,GAAG,UAAU,EACd,EAAE,yBAAyB,qBAM3B"}

package/dist/tokens/ImpactUiAppProviders.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { createImpactUiMuiTheme } from "./createImpactUiMuiTheme.js";
+import { ImpactUiThemeProvider } from "./ImpactUiThemeProvider.js";
+import { useImpactUiTheme } from "./useImpactUiTheme.js";
+import StyledEngineProvider from "../node_modules/@mui/styled-engine/StyledEngineProvider/StyledEngineProvider.js";
+import ThemeProvider from "../node_modules/@mui/material/styles/ThemeProvider.js";
+function MuiThemeShell({ children }) {
+  const { resolvedMode } = useImpactUiTheme();
+  const theme = useMemo(() => createImpactUiMuiTheme(resolvedMode), [resolvedMode]);
+  return /* @__PURE__ */ jsx(StyledEngineProvider, { injectFirst: true, children: /* @__PURE__ */ jsx(ThemeProvider, { theme, children }) });
+}
+function ImpactUiAppProviders({
+  children,
+  muiIntegration = "integrated",
+  ...themeProps
+}) {
+  return /* @__PURE__ */ jsx(ImpactUiThemeProvider, { ...themeProps, children: muiIntegration === "none" ? children : /* @__PURE__ */ jsx(MuiThemeShell, { children }) });
+}
+export {
+  ImpactUiAppProviders
+};

package/dist/tokens/ImpactUiThemeProvider.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { ImpactUiThemeMode, UseImpactUiThemeResult } from './theme.types';
+
+export declare const DEFAULT_IMPACT_UI_THEME_MODE: ImpactUiThemeMode;
+export interface ImpactUiThemeProviderProps {
+    children: React.ReactNode;
+    /** Controlled preference (e.g. Storybook toolbar). */
+    mode?: ImpactUiThemeMode;
+    /** Initial preference when `mode` is not passed. */
+    defaultMode?: ImpactUiThemeMode;
+    onModeChange?: (mode: ImpactUiThemeMode) => void;
+}
+export declare const ImpactUiThemeContext: React.Context<UseImpactUiThemeResult | null>;
+export declare function ImpactUiThemeProvider({ children, mode: controlledMode, defaultMode, onModeChange, }: ImpactUiThemeProviderProps): React.JSX.Element;
+/** @internal Used by `useImpactUiTheme` when no provider is mounted. */
+export declare function useImpactUiThemeContext(): UseImpactUiThemeResult | null;
+//# sourceMappingURL=ImpactUiThemeProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImpactUiThemeProvider.d.ts","sourceRoot":"","sources":["../../src/tokens/ImpactUiThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAQN,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAG/E,eAAO,MAAM,4BAA4B,EAAE,iBAA2B,CAAC;AAEvE,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,sDAAsD;IACtD,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,oDAAoD;IACpD,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,oBAAoB,8CAAqD,CAAC;AAcvF,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,IAAI,EAAE,cAAc,EACpB,WAA0C,EAC1C,YAAY,GACb,EAAE,0BAA0B,qBAyC5B;AAED,wEAAwE;AACxE,wBAAgB,uBAAuB,IAAI,sBAAsB,GAAG,IAAI,CAEvE"}

package/dist/tokens/ImpactUiThemeProvider.js

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useState, useEffect, useRef, useCallback, useMemo, useContext } from "react";
+import { getSystemColorSchemeSnapshot, subscribeSystemColorScheme, applyImpactUiThemeToDom, notifyImpactUiThemeChange } from "./themeDom.js";
+import { getColorToken } from "../styles/tokens/tokens.generated.js";
+const DEFAULT_IMPACT_UI_THEME_MODE = "light";
+const ImpactUiThemeContext = createContext(null);
+function syncThemeDom(preference, resolved, last) {
+  const key = `${preference}:${resolved}`;
+  if (last.current === key) return;
+  last.current = key;
+  applyImpactUiThemeToDom(preference, resolved);
+  notifyImpactUiThemeChange({ mode: preference, resolved });
+}
+function ImpactUiThemeProvider({
+  children,
+  mode: controlledMode,
+  defaultMode = DEFAULT_IMPACT_UI_THEME_MODE,
+  onModeChange
+}) {
+  const [uncontrolledMode, setUncontrolledMode] = useState(() => defaultMode);
+  const preference = controlledMode ?? uncontrolledMode;
+  const [systemResolved, setSystemResolved] = useState(
+    () => getSystemColorSchemeSnapshot()
+  );
+  useEffect(() => {
+    if (preference !== "system") return;
+    setSystemResolved(getSystemColorSchemeSnapshot());
+    return subscribeSystemColorScheme(() => {
+      setSystemResolved(getSystemColorSchemeSnapshot());
+    });
+  }, [preference]);
+  const resolved = preference === "system" ? systemResolved : preference;
+  const domSyncKey = useRef(null);
+  syncThemeDom(preference, resolved, domSyncKey);
+  const setMode = useCallback(
+    (next) => {
+      if (controlledMode === void 0) setUncontrolledMode(next);
+      onModeChange == null ? void 0 : onModeChange(next);
+    },
+    [controlledMode, onModeChange]
+  );
+  const getSemanticColor = useCallback(
+    (name) => getColorToken(resolved, name),
+    [resolved]
+  );
+  const value = useMemo(
+    () => ({ mode: preference, resolvedMode: resolved, setMode, getSemanticColor }),
+    [preference, resolved, setMode, getSemanticColor]
+  );
+  return /* @__PURE__ */ jsx(ImpactUiThemeContext.Provider, { value, children });
+}
+function useImpactUiThemeContext() {
+  return useContext(ImpactUiThemeContext);
+}
+export {
+  DEFAULT_IMPACT_UI_THEME_MODE,
+  ImpactUiThemeContext,
+  ImpactUiThemeProvider,
+  useImpactUiThemeContext
+};

package/dist/tokens/createImpactUiMuiTheme.d.ts

@@ -0,0 +1,13 @@
+import { SxProps, Theme } from '@mui/material/styles';
+import { ThemeMode } from '../styles/tokens/tokens.generated';
+
+/** Drawer paper colors — follow `data-iu-theme` via CSS semantic vars. */
+export declare const impactUiDrawerSx: SxProps<Theme>;
+export declare function mergeImpactUiDrawerSx(overrides?: SxProps<Theme>): SxProps<Theme>;
+/**
+ * MUI theme whose palette uses resolved hex tokens (MUI cannot parse `var(--iu-*)`).
+ * Drawer/backdrop styleOverrides still use CSS vars so they follow `data-iu-theme`.
+ * Pair with `ImpactUiThemeProvider` + `import 'impact-ui/styles'`.
+ */
+export declare function createImpactUiMuiTheme(mode?: ThemeMode): Theme;
+//# sourceMappingURL=createImpactUiMuiTheme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createImpactUiMuiTheme.d.ts","sourceRoot":"","sources":["../../src/tokens/createImpactUiMuiTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE7E,OAAO,EAAmC,KAAK,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAEpG,0EAA0E;AAC1E,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,KAAK,CAK3C,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,CAQhF;AAID;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,GAAE,SAAmB,SA4F/D"}

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
+};