impact-ui 5.0.2-alpha.1 → 5.0.2-beta.2

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

@@ -0,0 +1,431 @@
+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",
+    "agentic-usecase-card-accent-tint": "#ECEEFD",
+    "agentic-usecase-card-sky-tint": "#E9F7FC",
+    "agentic-usecase-card-slate-tint": "#6682D2",
+    "agentic-usecase-card-success-tint": "#EBF7F1",
+    "agentic-usecase-card-warm-tint": "#FCF8EA",
+    "alert-info-bg": "#B3BDF8",
+    "alert-info-border": "#4259EE",
+    "alert-info-icon": "#4259EE",
+    "comments-reply-bg": "#FFFFFF",
+    "file-upload-inner-border": "#B3BDF8",
+    "filter-panel-tab-active-bg": "#ECEEFD",
+    "link-button-color": "#4259EE",
+    "notification-read-read-bg": "#F8F9FB",
+    "notification-read-read-card-bg": "#F8F9FB"
+  },
+  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": "#1A1D24",
+    "bg-disabled-2": "#343841",
+    "bg-disabled-cell": "#161920",
+    "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": "#868C97",
+    "bg-surface-body-bg": "#0B0D12",
+    "bg-surface-layer-bg": "#12141A",
+    "bg-surface-lighter": "#1A1D24",
+    "bg-surface-lightest": "#20242C",
+    "bg-surface-overlay-bg": "#0B0D12",
+    "bg-surface-subtle": "#2A2E37",
+    "bg-warning": "#E1BC29",
+    "bg-warning-darker": "#EDD77F",
+    "bg-warning-lighter": "#52430B",
+    "bg-warning-subtle": "#2B2304",
+    "border-default": "#343841",
+    "border-default-darker": "#4A4F59",
+    "border-default-subtle": "#262A32",
+    "border-disabled": "#343841",
+    "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": "#6B7078",
+    "on-disabled-icon-1": "#6B7078",
+    "on-disabled-icon-2": "#4A4F59",
+    "on-disabled-placeholder": "#6B7078",
+    "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": "#C7CBD1",
+    "on-surface-caption": "#9CA1AC",
+    "on-surface-icon": "#9CA1AC",
+    "on-surface-label": "#868C97",
+    "on-surface-placeholder-text": "#757B86",
+    "on-surface-subtitle": "#E4E6EA",
+    "on-surface-title": "#F5F6F8",
+    "on-warning-icon": "#F6EBBF",
+    "on-warning-text": "#52430B",
+    "select-options-bg": "#1A1D24",
+    "agentic-usecase-card-accent-tint": "#1F2332",
+    "agentic-usecase-card-sky-tint": "#E9F7FC",
+    "agentic-usecase-card-slate-tint": "#6682D2",
+    "agentic-usecase-card-success-tint": "#071E10",
+    "agentic-usecase-card-warm-tint": "#2B2304",
+    "alert-info-bg": "#121A52",
+    "alert-info-border": "#4259EE",
+    "alert-info-icon": "#4259EE",
+    "comments-reply-bg": "#12141A",
+    "file-upload-inner-border": "#121A52",
+    "filter-panel-tab-active-bg": "#1F2332",
+    "link-button-color": "#687AF1",
+    "notification-read-read-bg": "#1A1D24",
+    "notification-read-read-card-bg": "#1A1D2480"
+  }
+};
+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;AAIjG,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,qBAQ3B"}

package/dist/tokens/ImpactUiAppProviders.js

@@ -0,0 +1,23 @@
+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 { HalloweenStyleIntroProvider } from "../components/HalloweenStyleIntro/HalloweenStyleIntroProvider.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: /* @__PURE__ */ jsx(HalloweenStyleIntroProvider, { 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,KAA+E,MAAM,OAAO,CAAC;AAkBpG,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;AAEvF,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,IAAI,EAAE,cAAc,EACpB,WAA0C,EAC1C,YAAY,GACb,EAAE,0BAA0B,qBAiF5B;AAED,wEAAwE;AACxE,wBAAgB,uBAAuB,IAAI,sBAAsB,GAAG,IAAI,CAEvE"}

package/dist/tokens/ImpactUiThemeProvider.js

@@ -0,0 +1,86 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useState, useEffect, useCallback, useMemo, useContext } from "react";
+import { applyImpactUiAccentToDom, readImpactUiAccentFromStorage } from "./accentDom.js";
+import { applyImpactUiContrastToDom, readImpactUiContrastFromStorage } from "./contrastDom.js";
+import { applyImpactUiInterfaceStyleToDom, readImpactUiInterfaceStyleFromStorage } from "./interfaceStyleDom.js";
+import { readImpactUiThemePreferenceFromDom, getSystemColorSchemeSnapshot, subscribeSystemColorScheme, applyImpactUiThemeToDom, notifyImpactUiThemeChange, resolveThemeAppearance } from "./themeDom.js";
+import { getColorToken } from "../styles/tokens/tokens.generated.js";
+const DEFAULT_IMPACT_UI_THEME_MODE = "light";
+const ImpactUiThemeContext = createContext(null);
+function ImpactUiThemeProvider({
+  children,
+  mode: controlledMode,
+  defaultMode = DEFAULT_IMPACT_UI_THEME_MODE,
+  onModeChange
+}) {
+  const isControlled = controlledMode !== void 0;
+  const [uncontrolledMode, setUncontrolledMode] = useState(
+    () => readImpactUiThemePreferenceFromDom(defaultMode)
+  );
+  const [controlledOverride, setControlledOverride] = useState(null);
+  useEffect(() => {
+    if (!isControlled) return;
+    setControlledOverride(null);
+  }, [isControlled, controlledMode]);
+  const preference = isControlled ? controlledOverride ?? 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;
+  useEffect(() => {
+    if (!isControlled) return;
+    applyImpactUiThemeToDom(preference, resolved, { persist: false });
+    notifyImpactUiThemeChange({ mode: preference, resolved });
+  }, [isControlled, preference, resolved]);
+  useEffect(() => {
+    if (isControlled) return;
+    applyImpactUiThemeToDom(preference, resolved, { persist: false });
+    notifyImpactUiThemeChange({ mode: preference, resolved });
+  }, []);
+  useEffect(() => {
+    applyImpactUiInterfaceStyleToDom(readImpactUiInterfaceStyleFromStorage(), { persist: false });
+    applyImpactUiContrastToDom(readImpactUiContrastFromStorage(), { persist: false });
+    applyImpactUiAccentToDom(readImpactUiAccentFromStorage(), { persist: false });
+  }, []);
+  const setMode = useCallback(
+    (next, options = {}) => {
+      const nextResolved = resolveThemeAppearance(next);
+      if (!isControlled) {
+        setUncontrolledMode(next);
+        applyImpactUiThemeToDom(next, nextResolved, options);
+        notifyImpactUiThemeChange({ mode: next, resolved: nextResolved });
+        return;
+      }
+      setControlledOverride(next);
+      onModeChange == null ? void 0 : onModeChange(next);
+      applyImpactUiThemeToDom(next, nextResolved, options);
+      notifyImpactUiThemeChange({ mode: next, resolved: nextResolved });
+    },
+    [isControlled, 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/accentDom.d.ts

@@ -0,0 +1,17 @@
+import { ImpactUiAccentColorId } from './impactUiPreferences';
+import { ImpactUiDomPersistOptions } from './interfaceStyleDom';
+
+export type { ImpactUiAccentColorId } from './impactUiPreferences';
+export declare const IU_ACCENT_ATTR: "data-iu-accent";
+export declare const IMPACT_UI_ACCENT_CHANGE: "impact-ui-accent-change";
+export interface ImpactUiAccentChangeDetail {
+    accent: ImpactUiAccentColorId;
+}
+export declare function isImpactUiAccentColorId(value: string): value is ImpactUiAccentColorId;
+export declare function normalizeImpactUiAccentColorId(value: string | undefined): ImpactUiAccentColorId;
+export declare function readImpactUiAccentFromStorage(): ImpactUiAccentColorId;
+export declare function readImpactUiAccentFromDom(): ImpactUiAccentColorId;
+export declare function applyImpactUiAccentToDom(accent: ImpactUiAccentColorId, options?: ImpactUiDomPersistOptions): void;
+export declare function notifyImpactUiAccentChange(detail: ImpactUiAccentChangeDetail): void;
+export declare function setImpactUiAccent(accent: ImpactUiAccentColorId, options?: ImpactUiDomPersistOptions): void;
+//# sourceMappingURL=accentDom.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accentDom.d.ts","sourceRoot":"","sources":["../../src/tokens/accentDom.ts"],"names":[],"mappings":"AAAA,kGAAkG;AAElG,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAErE,YAAY,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAEnE,eAAO,MAAM,cAAc,EAAG,gBAAyB,CAAC;AAExD,eAAO,MAAM,uBAAuB,EAAG,yBAAkC,CAAC;AAE1E,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,qBAAqB,CAAC;CAC/B;AAID,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,qBAAqB,CAErF;AAED,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,qBAAqB,CAG/F;AAWD,wBAAgB,6BAA6B,IAAI,qBAAqB,CAErE;AAED,wBAAgB,yBAAyB,IAAI,qBAAqB,CAKjE;AAED,wBAAgB,wBAAwB,CACtC,MAAM,EAAE,qBAAqB,EAC7B,OAAO,GAAE,yBAA8B,GACtC,IAAI,CAgBN;AAED,wBAAgB,0BAA0B,CAAC,MAAM,EAAE,0BAA0B,GAAG,IAAI,CAGnF;AAED,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,qBAAqB,EAC7B,OAAO,GAAE,yBAA8B,GACtC,IAAI,CAGN"}

package/dist/tokens/accentDom.js

@@ -0,0 +1,44 @@
+import { patchImpactUiPreferences, readImpactUiPreferences } from "./impactUiPreferences.js";
+const IU_ACCENT_ATTR = "data-iu-accent";
+const VALID_ACCENT = /* @__PURE__ */ new Set(["blue", "pink", "ocean", "teal", "amethyst"]);
+function isImpactUiAccentColorId(value) {
+  return VALID_ACCENT.has(value);
+}
+function normalizeImpactUiAccentColorId(value) {
+  if (value && isImpactUiAccentColorId(value)) return value;
+  return "blue";
+}
+function readFromStorage() {
+  if (typeof localStorage === "undefined") return "blue";
+  try {
+    return normalizeImpactUiAccentColorId(readImpactUiPreferences().accentColor);
+  } catch {
+    return "blue";
+  }
+}
+function readImpactUiAccentFromStorage() {
+  return readFromStorage();
+}
+function applyImpactUiAccentToDom(accent, options = {}) {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  if (accent === "blue") {
+    root.removeAttribute(IU_ACCENT_ATTR);
+  } else {
+    root.setAttribute(IU_ACCENT_ATTR, accent);
+  }
+  if (options.persist === false) return;
+  if (typeof localStorage !== "undefined") {
+    try {
+      patchImpactUiPreferences({ accentColor: accent });
+    } catch {
+    }
+  }
+}
+export {
+  IU_ACCENT_ATTR,
+  applyImpactUiAccentToDom,
+  isImpactUiAccentColorId,
+  normalizeImpactUiAccentColorId,
+  readImpactUiAccentFromStorage
+};

package/dist/tokens/accentDom.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=accentDom.test.d.ts.map

package/dist/tokens/accentDom.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accentDom.test.d.ts","sourceRoot":"","sources":["../../src/tokens/accentDom.test.ts"],"names":[],"mappings":""}