@atom-learning/components 11.6.0 → 12.0.0-beta.1

package/dist/components/action-icon/ActionIcon.js

@@ -12,7 +12,7 @@ var StyledButton = styled("button", {
 	base: [
 		"items-center",
 		"appearance-none",
-		"bg-white",
+		"bg-surface",
 		"rounded-md",
 		"box-border",
 		"cursor-pointer",
@@ -26,73 +26,19 @@ var StyledButton = styled("button", {
 		"disabled:opacity-30"
 	],
 	variants: {
-		theme: {
-			neutral: [
-				"[--solid-base:var(--color-white)]",
-				"[--solid-interact:var(--color-grey-100)]",
-				"[--solid-active:var(--color-grey-200)]",
-				"[--solid-text:var(--color-grey-1200)]",
-				"[--base:var(--color-grey-700)]",
-				"[--interact:var(--color-primary-900)]",
-				"[--active:var(--color-primary-1100)]"
-			],
-			primary: [
-				"[--base:var(--color-primary-800)]",
-				"[--interact:var(--color-primary-900)]",
-				"[--active:var(--color-primary-1000)]"
-			],
-			primaryDark: [
-				"[--base:var(--color-primary-1000)]",
-				"[--interact:var(--color-primary-1100)]",
-				"[--active:var(--color-primary-1200)]"
-			],
-			success: [
-				"[--base:var(--color-success)]",
-				"[--interact:var(--color-success-mid)]",
-				"[--active:var(--color-success-dark)]"
-			],
-			warning: [
-				"[--base:var(--color-warning)]",
-				"[--interact:var(--color-warning-mid)]",
-				"[--active:var(--color-warning-dark)]"
-			],
-			danger: [
-				"[--base:var(--color-danger)]",
-				"[--interact:var(--color-danger-mid)]",
-				"[--active:var(--color-danger-dark)]"
-			],
-			white: [
-				"[--base:var(--color-white)]",
-				"[--interact:var(--color-white)]",
-				"[--active:var(--color-white)]"
-			]
+		colorRole: {
+			accent: [],
+			neutral: [],
+			inverse: []
 		},
 		appearance: {
-			simple: [
-				"bg-transparent",
-				"text-(--base)",
-				"not-disabled:hover:text-(--interact)",
-				"not-disabled:focus:text-(--interact)",
-				"not-disabled:active:text-(--active)"
-			],
+			simple: ["bg-transparent"],
 			outline: [
 				"bg-[unset]",
 				"border",
-				"border-current",
-				"text-(--base)",
-				"not-disabled:hover:text-(--interact)",
-				"not-disabled:focus:text-(--interact)",
-				"not-disabled:active:text-(--active)"
+				"border-current"
 			],
-			solid: [
-				"bg-(--solid-base,var(--base))",
-				"text-(--solid-text,white)",
-				"not-disabled:hover:bg-(--solid-interact,var(--interact))",
-				"not-disabled:hover:text-(--solid-text,white)",
-				"not-disabled:focus:bg-(--solid-interact,var(--interact))",
-				"not-disabled:focus:text-(--solid-text,white)",
-				"not-disabled:active:bg-(--solid-active,var(--active))"
-			]
+			solid: []
 		},
 		size: {
 			xs: ["size-6"],
@@ -101,9 +47,58 @@ var StyledButton = styled("button", {
 			lg: ["size-12"]
 		},
 		isRounded: { true: ["rounded-full"] }
-	}
+	},
+	compoundVariants: [
+		{
+			appearance: ["simple", "outline"],
+			colorRole: "accent",
+			class: [
+				"text-accent",
+				"not-disabled:hover:text-accent-hover",
+				"not-disabled:focus:text-accent-hover",
+				"not-disabled:active:text-accent-active"
+			]
+		},
+		{
+			appearance: ["simple", "outline"],
+			colorRole: "neutral",
+			class: [
+				"text-subtlest",
+				"not-disabled:hover:text-accent-hover",
+				"not-disabled:focus:text-accent-hover",
+				"not-disabled:active:text-accent-active"
+			]
+		},
+		{
+			appearance: ["simple", "outline"],
+			colorRole: "inverse",
+			class: ["text-on-accent"]
+		},
+		{
+			appearance: "solid",
+			colorRole: ["accent", "inverse"],
+			class: [
+				"bg-accent-solid",
+				"text-on-accent",
+				"not-disabled:hover:bg-accent-solid-hover",
+				"not-disabled:focus:bg-accent-solid-hover",
+				"not-disabled:active:bg-accent-solid-active"
+			]
+		},
+		{
+			appearance: "solid",
+			colorRole: "neutral",
+			class: [
+				"bg-surface",
+				"text-default",
+				"not-disabled:hover:bg-hover",
+				"not-disabled:focus:bg-hover",
+				"not-disabled:active:bg-active"
+			]
+		}
+	]
 }, { enableResponsiveVariants: true });
-var ActionIcon = ({ ref, children, theme = "primary", appearance = "simple", size = "sm", label, href, disabled, hasTooltip = true, tooltipSide, reloadDocument, ...rest }) => {
+var ActionIcon = ({ ref, children, tone, inverse, appearance = "simple", size = "sm", label, href, disabled, hasTooltip = true, tooltipSide, reloadDocument, ...rest }) => {
 	const INVALID_CHILDREN_MESSAGE = `A single ${Icon.name} component is permitted as a child of ActionIcon`;
 	invariant(React$1.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE);
 	const routerLinkProps = useRouterLinkProps(href, { reloadDocument });
@@ -119,9 +114,10 @@ var ActionIcon = ({ ref, children, theme = "primary", appearance = "simple", siz
 				"aria-disabled": !!disabled
 			} : { type: "button" },
 			...getExternalAnchorProps(href),
+			"data-color-accent": tone === "neutral" ? void 0 : tone,
+			colorRole: inverse ? "inverse" : tone === "neutral" ? "neutral" : "accent",
 			...rest,
 			"aria-label": label,
-			theme,
 			appearance,
 			size,
 			ref,

package/dist/components/action-icon/ActionIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionIcon.js","names":[],"sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import * as React from 'react'\nimport invariant from 'tiny-invariant'\n\nimport { styled } from '../../styled'\nimport type { OptionalTooltipWrapperProps } from '../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport { OptionalTooltipWrapper } from '../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport type { Override } from '../../utilities/types'\nimport { getExternalAnchorProps } from '../../utilities/uri'\nimport { Icon } from '../icon/Icon'\nimport { useRouterLinkProps } from '../router-provider/RouterProvider'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\n\nconst StyledButton = styled(\n  'button',\n  {\n    base: [\n      'items-center',\n      'appearance-none',\n      'bg-white',\n      'rounded-md',\n      'box-border',\n      'cursor-pointer',\n      'flex',\n      'shrink-0',\n      'justify-center',\n      'transition-all',\n      'duration-100',\n      'ease-out',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30'\n    ],\n    variants: {\n      theme: {\n        neutral: [\n          '[--solid-base:var(--color-white)]',\n          '[--solid-interact:var(--color-grey-100)]',\n          '[--solid-active:var(--color-grey-200)]',\n          '[--solid-text:var(--color-grey-1200)]',\n          '[--base:var(--color-grey-700)]',\n          '[--interact:var(--color-primary-900)]',\n          '[--active:var(--color-primary-1100)]'\n        ],\n        primary: [\n          '[--base:var(--color-primary-800)]',\n          '[--interact:var(--color-primary-900)]',\n          '[--active:var(--color-primary-1000)]'\n        ],\n        primaryDark: [\n          '[--base:var(--color-primary-1000)]',\n          '[--interact:var(--color-primary-1100)]',\n          '[--active:var(--color-primary-1200)]'\n        ],\n        success: [\n          '[--base:var(--color-success)]',\n          '[--interact:var(--color-success-mid)]',\n          '[--active:var(--color-success-dark)]'\n        ],\n        warning: [\n          '[--base:var(--color-warning)]',\n          '[--interact:var(--color-warning-mid)]',\n          '[--active:var(--color-warning-dark)]'\n        ],\n        danger: [\n          '[--base:var(--color-danger)]',\n          '[--interact:var(--color-danger-mid)]',\n          '[--active:var(--color-danger-dark)]'\n        ],\n        white: [\n          '[--base:var(--color-white)]',\n          '[--interact:var(--color-white)]',\n          '[--active:var(--color-white)]'\n        ]\n      },\n      appearance: {\n        simple: [\n          'bg-transparent',\n          'text-(--base)',\n          'not-disabled:hover:text-(--interact)',\n          'not-disabled:focus:text-(--interact)',\n          'not-disabled:active:text-(--active)'\n        ],\n        outline: [\n          'bg-[unset]',\n          'border',\n          'border-current',\n          'text-(--base)',\n          'not-disabled:hover:text-(--interact)',\n          'not-disabled:focus:text-(--interact)',\n          'not-disabled:active:text-(--active)'\n        ],\n        solid: [\n          'bg-(--solid-base,var(--base))',\n          'text-(--solid-text,white)',\n          'not-disabled:hover:bg-(--solid-interact,var(--interact))',\n          'not-disabled:hover:text-(--solid-text,white)',\n          'not-disabled:focus:bg-(--solid-interact,var(--interact))',\n          'not-disabled:focus:text-(--solid-text,white)',\n          'not-disabled:active:bg-(--solid-active,var(--active))'\n        ]\n      },\n      size: {\n        xs: ['size-6'],\n        sm: ['size-8'],\n        md: ['size-10'],\n        lg: ['size-12']\n      },\n      isRounded: {\n        true: ['rounded-full']\n      }\n    }\n  },\n  {\n    enableResponsiveVariants: true\n  }\n)\n\ntype ActionIconProps = Override<\n  React.ComponentProps<typeof StyledButton>,\n  {\n    as?: React.ElementType\n    children: React.ReactNode\n    href?: string\n    label: string\n    reloadDocument?: boolean\n  } & Omit<OptionalTooltipWrapperProps, 'label'>\n>\n\nexport const ActionIcon = ({\n  ref,\n  children,\n  theme = 'primary',\n  appearance = 'simple',\n  size = 'sm',\n  label,\n  href,\n  disabled,\n  hasTooltip = true,\n  tooltipSide,\n  reloadDocument,\n  ...rest\n}: ActionIconProps) => {\n  const INVALID_CHILDREN_MESSAGE = `A single ${Icon.name} component is permitted as a child of ActionIcon`\n\n  invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n  const routerLinkProps = useRouterLinkProps(href, { reloadDocument })\n\n  // Polymorphic props: can be either button or anchor element\n  const optionalLinkProps = href\n    ? ({\n        as: routerLinkProps.as || 'a',\n        href: disabled ? undefined : href,\n        onClick: undefined,\n        'aria-disabled': !!disabled\n      } as const)\n    : ({ type: 'button' } as const)\n\n  return (\n    <OptionalTooltipWrapper\n      hasTooltip={hasTooltip}\n      label={label}\n      tooltipSide={tooltipSide}\n    >\n      <StyledButton\n        {...optionalLinkProps}\n        {...getExternalAnchorProps(href)}\n        {...rest}\n        aria-label={label}\n        theme={theme}\n        appearance={appearance}\n        size={size}\n        ref={ref}\n        disabled={disabled}\n      >\n        {React.Children.map(children, (child) => {\n          // TS needs this check for any following code to access child.type\n          // even with optional chaining\n          if (!React.isValidElement(child)) {\n            throw new Error(INVALID_CHILDREN_MESSAGE)\n          }\n\n          invariant(\n            child.type === Icon,\n            `Children of type ${child?.type} aren't permitted. Only an ${Icon.name} component is allowed in ActionIcon`\n          )\n\n          return React.cloneElement(\n            child as React.ReactElement<React.ComponentProps<typeof Icon>>,\n            {\n              size: ActionIconSizeMap[size as string]\n            }\n          )\n        })}\n      </StyledButton>\n    </OptionalTooltipWrapper>\n  )\n}\n"],"mappings":";;;;;;;;;;AAYA,IAAM,eAAe,OACnB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,OAAO;GACL,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,aAAa;IACX;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;GACF;EACF;EACA,YAAY;GACV,QAAQ;IACN;IACA;IACA;IACA;IACA;GACF;GACA,SAAS;IACP;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;EAChB;EACA,WAAW,EACT,MAAM,CAAC,cAAc,EACvB;CACF;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAaA,IAAa,cAAc,EACzB,KACA,UACA,QAAQ,WACR,aAAa,UACb,OAAO,MACP,OACA,MACA,UACA,aAAa,MACb,aACA,gBACA,GAAG,WACkB;CACrB,MAAM,2BAA2B,YAAY,KAAK,KAAK;CAEvD,UAAU,QAAM,SAAS,MAAM,QAAQ,MAAM,GAAG,wBAAwB;CAExE,MAAM,kBAAkB,mBAAmB,MAAM,EAAE,eAAe,CAAC;CAYnE,OACE,oBAAC,wBAAD;EACc;EACL;EACM;YAEb,oBAAC,cAAD;GACE,GAhBoB,OACrB;IACC,IAAI,gBAAgB,MAAM;IAC1B,MAAM,WAAW,KAAA,IAAY;IAC7B,SAAS,KAAA;IACT,iBAAiB,CAAC,CAAC;GACrB,IACC,EAAE,MAAM,SAAS;GAUhB,GAAI,uBAAuB,IAAI;GAC/B,GAAI;GACJ,cAAY;GACL;GACK;GACN;GACD;GACK;aAET,QAAM,SAAS,IAAI,WAAW,UAAU;IAGvC,IAAI,CAAC,QAAM,eAAe,KAAK,GAC7B,MAAM,IAAI,MAAM,wBAAwB;IAG1C,UACE,MAAM,SAAS,MACf,oBAAoB,OAAO,KAAK,6BAA6B,KAAK,KAAK,oCACzE;IAEA,OAAO,QAAM,aACX,OACA,EACE,MAAM,kBAAkB,MAC1B,CACF;GACF,CAAC;EACW,CAAA;CACQ,CAAA;AAE5B"}
+{"version":3,"file":"ActionIcon.js","names":[],"sources":["../../../src/components/action-icon/ActionIcon.tsx"],"sourcesContent":["import * as React from 'react'\nimport invariant from 'tiny-invariant'\n\nimport type { TColorAccent } from '../../experiments/theme/Theme'\nimport { styled } from '../../styled'\nimport type { OptionalTooltipWrapperProps } from '../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport { OptionalTooltipWrapper } from '../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper'\nimport type { Override } from '../../utilities/types'\nimport { getExternalAnchorProps } from '../../utilities/uri'\nimport { Icon } from '../icon/Icon'\nimport { useRouterLinkProps } from '../router-provider/RouterProvider'\nimport { ActionIconSizeMap } from './ActionIcon.constants'\n\nconst StyledButton = styled(\n  'button',\n  {\n    base: [\n      'items-center',\n      'appearance-none',\n      'bg-surface',\n      'rounded-md',\n      'box-border',\n      'cursor-pointer',\n      'flex',\n      'shrink-0',\n      'justify-center',\n      'transition-all',\n      'duration-100',\n      'ease-out',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30'\n    ],\n    variants: {\n      // Set from `tone` and `inverse`; picks which roles the appearance uses\n      colorRole: {\n        accent: [],\n        // Quiet grey icon on a normal surface (close buttons, input adornments)\n        neutral: [],\n        // For icons on a strong or dark fill (image overlays, floating bars)\n        inverse: []\n      },\n      appearance: {\n        simple: ['bg-transparent'],\n        outline: ['bg-[unset]', 'border', 'border-current'],\n        solid: []\n      },\n      size: {\n        xs: ['size-6'],\n        sm: ['size-8'],\n        md: ['size-10'],\n        lg: ['size-12']\n      },\n      isRounded: {\n        true: ['rounded-full']\n      }\n    },\n    compoundVariants: [\n      {\n        appearance: ['simple', 'outline'],\n        colorRole: 'accent',\n        class: [\n          'text-accent',\n          'not-disabled:hover:text-accent-hover',\n          'not-disabled:focus:text-accent-hover',\n          'not-disabled:active:text-accent-active'\n        ]\n      },\n      {\n        appearance: ['simple', 'outline'],\n        colorRole: 'neutral',\n        class: [\n          'text-subtlest',\n          'not-disabled:hover:text-accent-hover',\n          'not-disabled:focus:text-accent-hover',\n          'not-disabled:active:text-accent-active'\n        ]\n      },\n      {\n        appearance: ['simple', 'outline'],\n        colorRole: 'inverse',\n        class: ['text-on-accent']\n      },\n      {\n        // Solid fills already sit behind on-accent text, so inverse keeps them\n        appearance: 'solid',\n        colorRole: ['accent', 'inverse'],\n        class: [\n          'bg-accent-solid',\n          'text-on-accent',\n          'not-disabled:hover:bg-accent-solid-hover',\n          'not-disabled:focus:bg-accent-solid-hover',\n          'not-disabled:active:bg-accent-solid-active'\n        ]\n      },\n      {\n        appearance: 'solid',\n        colorRole: 'neutral',\n        class: [\n          'bg-surface',\n          'text-default',\n          'not-disabled:hover:bg-hover',\n          'not-disabled:focus:bg-hover',\n          'not-disabled:active:bg-active'\n        ]\n      }\n    ]\n  },\n  {\n    enableResponsiveVariants: true\n  }\n)\n\n// Intent, not hue: each tone resolves to a fixed status scale\ntype ActionIconTone =\n  | 'neutral'\n  | Extract<TColorAccent, 'success' | 'warning' | 'danger'>\n\ntype ActionIconProps = Override<\n  Omit<React.ComponentProps<typeof StyledButton>, 'colorRole'>,\n  {\n    /**\n     * Unset inherits the accent from the nearest <Theme> or palette. Don't\n     * combine with `inverse`, which replaces the tone's colours.\n     */\n    tone?: ActionIconTone\n    inverse?: boolean\n    as?: React.ElementType\n    children: React.ReactNode\n    href?: string\n    label: string\n    reloadDocument?: boolean\n  } & Omit<OptionalTooltipWrapperProps, 'label'>\n>\n\nexport const ActionIcon = ({\n  ref,\n  children,\n  tone,\n  inverse,\n  appearance = 'simple',\n  size = 'sm',\n  label,\n  href,\n  disabled,\n  hasTooltip = true,\n  tooltipSide,\n  reloadDocument,\n  ...rest\n}: ActionIconProps) => {\n  const INVALID_CHILDREN_MESSAGE = `A single ${Icon.name} component is permitted as a child of ActionIcon`\n\n  invariant(React.Children.count(children) === 1, INVALID_CHILDREN_MESSAGE)\n\n  const routerLinkProps = useRouterLinkProps(href, { reloadDocument })\n\n  // Polymorphic props: can be either button or anchor element\n  const optionalLinkProps = href\n    ? ({\n        as: routerLinkProps.as || 'a',\n        href: disabled ? undefined : href,\n        onClick: undefined,\n        'aria-disabled': !!disabled\n      } as const)\n    : ({ type: 'button' } as const)\n\n  return (\n    <OptionalTooltipWrapper\n      hasTooltip={hasTooltip}\n      label={label}\n      tooltipSide={tooltipSide}\n    >\n      <StyledButton\n        {...optionalLinkProps}\n        {...getExternalAnchorProps(href)}\n        // Neutral leaves the accent inherited: its hover tints in the accent\n        data-color-accent={tone === 'neutral' ? undefined : tone}\n        colorRole={\n          inverse ? 'inverse' : tone === 'neutral' ? 'neutral' : 'accent'\n        }\n        {...rest}\n        aria-label={label}\n        appearance={appearance}\n        size={size}\n        ref={ref}\n        disabled={disabled}\n      >\n        {React.Children.map(children, (child) => {\n          // TS needs this check for any following code to access child.type\n          // even with optional chaining\n          if (!React.isValidElement(child)) {\n            throw new Error(INVALID_CHILDREN_MESSAGE)\n          }\n\n          invariant(\n            child.type === Icon,\n            `Children of type ${child?.type} aren't permitted. Only an ${Icon.name} component is allowed in ActionIcon`\n          )\n\n          return React.cloneElement(\n            child as React.ReactElement<React.ComponentProps<typeof Icon>>,\n            {\n              size: ActionIconSizeMap[size as string]\n            }\n          )\n        })}\n      </StyledButton>\n    </OptionalTooltipWrapper>\n  )\n}\n"],"mappings":";;;;;;;;;;AAaA,IAAM,eAAe,OACnB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EAER,WAAW;GACT,QAAQ,CAAC;GAET,SAAS,CAAC;GAEV,SAAS,CAAC;EACZ;EACA,YAAY;GACV,QAAQ,CAAC,gBAAgB;GACzB,SAAS;IAAC;IAAc;IAAU;GAAgB;GAClD,OAAO,CAAC;EACV;EACA,MAAM;GACJ,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;EAChB;EACA,WAAW,EACT,MAAM,CAAC,cAAc,EACvB;CACF;CACA,kBAAkB;EAChB;GACE,YAAY,CAAC,UAAU,SAAS;GAChC,WAAW;GACX,OAAO;IACL;IACA;IACA;IACA;GACF;EACF;EACA;GACE,YAAY,CAAC,UAAU,SAAS;GAChC,WAAW;GACX,OAAO;IACL;IACA;IACA;IACA;GACF;EACF;EACA;GACE,YAAY,CAAC,UAAU,SAAS;GAChC,WAAW;GACX,OAAO,CAAC,gBAAgB;EAC1B;EACA;GAEE,YAAY;GACZ,WAAW,CAAC,UAAU,SAAS;GAC/B,OAAO;IACL;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,YAAY;GACZ,WAAW;GACX,OAAO;IACL;IACA;IACA;IACA;IACA;GACF;EACF;CACF;AACF,GACA,EACE,0BAA0B,KAC5B,CACF;AAwBA,IAAa,cAAc,EACzB,KACA,UACA,MACA,SACA,aAAa,UACb,OAAO,MACP,OACA,MACA,UACA,aAAa,MACb,aACA,gBACA,GAAG,WACkB;CACrB,MAAM,2BAA2B,YAAY,KAAK,KAAK;CAEvD,UAAU,QAAM,SAAS,MAAM,QAAQ,MAAM,GAAG,wBAAwB;CAExE,MAAM,kBAAkB,mBAAmB,MAAM,EAAE,eAAe,CAAC;CAYnE,OACE,oBAAC,wBAAD;EACc;EACL;EACM;YAEb,oBAAC,cAAD;GACE,GAhBoB,OACrB;IACC,IAAI,gBAAgB,MAAM;IAC1B,MAAM,WAAW,KAAA,IAAY;IAC7B,SAAS,KAAA;IACT,iBAAiB,CAAC,CAAC;GACrB,IACC,EAAE,MAAM,SAAS;GAUhB,GAAI,uBAAuB,IAAI;GAE/B,qBAAmB,SAAS,YAAY,KAAA,IAAY;GACpD,WACE,UAAU,YAAY,SAAS,YAAY,YAAY;GAEzD,GAAI;GACJ,cAAY;GACA;GACN;GACD;GACK;aAET,QAAM,SAAS,IAAI,WAAW,UAAU;IAGvC,IAAI,CAAC,QAAM,eAAe,KAAK,GAC7B,MAAM,IAAI,MAAM,wBAAwB;IAG1C,UACE,MAAM,SAAS,MACf,oBAAoB,OAAO,KAAK,6BAA6B,KAAK,KAAK,oCACzE;IAEA,OAAO,QAAM,aACX,OACA,EACE,MAAM,kBAAkB,MAC1B,CACF;GACF,CAAC;EACW,CAAA;CACQ,CAAA;AAE5B"}

package/dist/components/alert-dialog/AlertDialogContent.js

@@ -1,10 +1,11 @@
 import { styled } from "../../styled.js";
+import { ThemePortalScope } from "../../experiments/theme/Theme.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Content, Overlay, Portal } from "@radix-ui/react-alert-dialog";
 //#region src/components/alert-dialog/AlertDialogContent.tsx
 var StyledAlertDialogOverlay = styled(Overlay, { base: [
-	"bg-alpha-600",
+	"bg-scrim",
 	"top-0",
 	"right-0",
 	"bottom-0",
@@ -17,9 +18,11 @@ var StyledAlertDialogOverlay = styled(Overlay, { base: [
 var StyledAlertDialogContent = styled(Content, {
 	base: [
 		"transform-[translate(-50%,-50%)]",
-		"bg-white",
+		"bg-surface-overlay",
 		"rounded-xl",
-		"shadow-xl",
+		"shadow-(--shadow-floating-xl)",
+		"forced-colors:border",
+		"forced-colors:border-[CanvasText]",
 		"box-border",
 		"left-1/2",
 		"max-w-[90vw]",
@@ -37,10 +40,10 @@ var StyledAlertDialogContent = styled(Content, {
 		lg: ["w-150"]
 	} }
 });
-var AlertDialogContent = ({ size = "sm", ...rest }) => /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(StyledAlertDialogOverlay, {}), /* @__PURE__ */ jsx(StyledAlertDialogContent, {
+var AlertDialogContent = ({ size = "sm", ...rest }) => /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(ThemePortalScope, { children: [/* @__PURE__ */ jsx(StyledAlertDialogOverlay, {}), /* @__PURE__ */ jsx(StyledAlertDialogContent, {
 	size,
 	...rest
-})] });
+})] }) });
 //#endregion
 export { AlertDialogContent };
 

package/dist/components/alert-dialog/AlertDialogContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialogContent.js","names":[],"sources":["../../../src/components/alert-dialog/AlertDialogContent.tsx"],"sourcesContent":["import { Content, Overlay, Portal } from '@radix-ui/react-alert-dialog'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\n\nconst StyledAlertDialogOverlay = styled(Overlay, {\n  base: [\n    'bg-alpha-600',\n    'top-0',\n    'right-0',\n    'bottom-0',\n    'left-0',\n    'fixed',\n    'z-1147483646',\n    'motion-safe:data-[state=open]:animate-fade-in',\n    'motion-safe:data-[state=closed]:animate-fade-out'\n  ]\n})\nconst StyledAlertDialogContent = styled(Content, {\n  base: [\n    // `transform: translate()` is required for `floating-ui` to\n    // correctly position elements within the Dialog component.\n    // we can't use the translate property directly\n    'transform-[translate(-50%,-50%)]',\n    'bg-white',\n    'rounded-xl',\n    'shadow-xl',\n    'box-border',\n    'left-1/2',\n    'max-w-[90vw]',\n    'p-8',\n    'fixed',\n    'top-1/2',\n    'focus:outline-none',\n    'z-1147483646',\n    'motion-safe:data-[state=open]:animate-slide-in-center',\n    'motion-safe:data-[state=closed]:animate-slide-out-center'\n  ],\n  variants: {\n    size: {\n      sm: ['w-95'],\n      md: ['w-120'],\n      lg: ['w-150']\n    }\n  }\n})\n\nexport const AlertDialogContent = ({\n  size = 'sm',\n  ...rest\n}: React.ComponentProps<typeof StyledAlertDialogContent>) => (\n  <Portal>\n    <StyledAlertDialogOverlay />\n    <StyledAlertDialogContent size={size} {...rest} />\n  </Portal>\n)\n"],"mappings":";;;;;AAKA,IAAM,2BAA2B,OAAO,SAAS,EAC/C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AACD,IAAM,2BAA2B,OAAO,SAAS;CAC/C,MAAM;EAIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,MAAM;EACX,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,OAAO;CACd,EACF;AACF,CAAC;AAED,IAAa,sBAAsB,EACjC,OAAO,MACP,GAAG,WAEH,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,0BAAD,CAA2B,CAAA,GAC3B,oBAAC,0BAAD;CAAgC;CAAM,GAAI;AAAO,CAAA,CAC3C,EAAA,CAAA"}
+{"version":3,"file":"AlertDialogContent.js","names":[],"sources":["../../../src/components/alert-dialog/AlertDialogContent.tsx"],"sourcesContent":["import { Content, Overlay, Portal } from '@radix-ui/react-alert-dialog'\nimport * as React from 'react'\n\nimport { ThemePortalScope } from '../../experiments/theme/Theme'\nimport { styled } from '../../styled'\n\nconst StyledAlertDialogOverlay = styled(Overlay, {\n  base: [\n    'bg-scrim',\n    'top-0',\n    'right-0',\n    'bottom-0',\n    'left-0',\n    'fixed',\n    'z-1147483646',\n    'motion-safe:data-[state=open]:animate-fade-in',\n    'motion-safe:data-[state=closed]:animate-fade-out'\n  ]\n})\nconst StyledAlertDialogContent = styled(Content, {\n  base: [\n    // `transform: translate()` is required for `floating-ui` to\n    // correctly position elements within the Dialog component.\n    // we can't use the translate property directly\n    'transform-[translate(-50%,-50%)]',\n    'bg-surface-overlay',\n    'rounded-xl',\n    'shadow-(--shadow-floating-xl)',\n    // Forced colours drop box-shadow, so the edge needs a real border\n    'forced-colors:border',\n    'forced-colors:border-[CanvasText]',\n    'box-border',\n    'left-1/2',\n    'max-w-[90vw]',\n    'p-8',\n    'fixed',\n    'top-1/2',\n    'focus:outline-none',\n    'z-1147483646',\n    'motion-safe:data-[state=open]:animate-slide-in-center',\n    'motion-safe:data-[state=closed]:animate-slide-out-center'\n  ],\n  variants: {\n    size: {\n      sm: ['w-95'],\n      md: ['w-120'],\n      lg: ['w-150']\n    }\n  }\n})\n\nexport const AlertDialogContent = ({\n  size = 'sm',\n  ...rest\n}: React.ComponentProps<typeof StyledAlertDialogContent>) => (\n  <Portal>\n    <ThemePortalScope>\n      <StyledAlertDialogOverlay />\n      <StyledAlertDialogContent size={size} {...rest} />\n    </ThemePortalScope>\n  </Portal>\n)\n"],"mappings":";;;;;;AAMA,IAAM,2BAA2B,OAAO,SAAS,EAC/C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AACD,IAAM,2BAA2B,OAAO,SAAS;CAC/C,MAAM;EAIJ;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,MAAM;EACX,IAAI,CAAC,OAAO;EACZ,IAAI,CAAC,OAAO;CACd,EACF;AACF,CAAC;AAED,IAAa,sBAAsB,EACjC,OAAO,MACP,GAAG,WAEH,oBAAC,QAAD,EAAA,UACE,qBAAC,kBAAD,EAAA,UAAA,CACE,oBAAC,0BAAD,CAA2B,CAAA,GAC3B,oBAAC,0BAAD;CAAgC;CAAM,GAAI;AAAO,CAAA,CACjC,EAAA,CAAA,EACZ,CAAA"}

package/dist/components/alert-dialog/alert-context/AlertDialog.d.ts

@@ -5,5 +5,5 @@ type AlertDialogContentProps = React.ComponentProps<typeof AlertDialog> & {
     className?: string;
     onClose: () => void;
 } & alert;
-export declare const Alert: ({ title, size, theme, description, onAction, cancelActionText, confirmActionText, onClose, confirmElement, cancelElement, ...rest }: AlertDialogContentProps) => React.JSX.Element;
+export declare const Alert: ({ title, size, tone, description, onAction, cancelActionText, confirmActionText, onClose, confirmElement, cancelElement, ...rest }: AlertDialogContentProps) => React.JSX.Element;
 export {};

package/dist/components/alert-dialog/alert-context/AlertDialog.js

@@ -6,7 +6,7 @@ import { AlertDialogIcon } from "./AlertDialogIcon.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/alert-dialog/alert-context/AlertDialog.tsx
-var Alert = ({ title, size, theme, description, onAction, cancelActionText, confirmActionText, onClose, confirmElement, cancelElement, ...rest }) => /* @__PURE__ */ jsx(AlertDialog, {
+var Alert = ({ title, size, tone, description, onAction, cancelActionText, confirmActionText, onClose, confirmElement, cancelElement, ...rest }) => /* @__PURE__ */ jsx(AlertDialog, {
 	defaultOpen: true,
 	children: /* @__PURE__ */ jsxs(AlertDialog.Content, {
 		size,
@@ -17,7 +17,7 @@ var Alert = ({ title, size, theme, description, onAction, cancelActionText, conf
 		children: [
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2",
-				children: [theme && /* @__PURE__ */ jsx(AlertDialogIcon, { theme }), /* @__PURE__ */ jsx(Heading, {
+				children: [tone && /* @__PURE__ */ jsx(AlertDialogIcon, { tone }), /* @__PURE__ */ jsx(Heading, {
 					as: AlertDialog.Title,
 					size: "sm",
 					className: "mr-4",

package/dist/components/alert-dialog/alert-context/AlertDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.js","names":[],"sources":["../../../../src/components/alert-dialog/alert-context/AlertDialog.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../../button/Button'\nimport { Heading } from '../../heading/Heading'\nimport { Text } from '../../text/Text'\nimport { AlertDialog } from '../AlertDialog'\nimport { AlertDialogIcon } from './AlertDialogIcon'\nimport type { alert } from './types'\n\ntype AlertDialogContentProps = React.ComponentProps<typeof AlertDialog> & {\n  className?: string\n  onClose: () => void\n} & alert\n\nexport const Alert = ({\n  title,\n  size,\n  theme,\n  description,\n  onAction,\n  cancelActionText,\n  confirmActionText,\n  onClose,\n  confirmElement,\n  cancelElement,\n  ...rest\n}: AlertDialogContentProps) => (\n  <AlertDialog defaultOpen>\n    <AlertDialog.Content\n      size={size}\n      onEscapeKeyDown={(e) => e.preventDefault()}\n      onCloseAutoFocus={onClose}\n      {...rest}\n      className=\"flex max-h-[90vh] flex-col gap-8\"\n    >\n      <div className=\"flex items-center gap-2\">\n        {theme && <AlertDialogIcon theme={theme} />}\n        <Heading as={AlertDialog.Title} size=\"sm\" className=\"mr-4\">\n          {title}\n        </Heading>\n      </div>\n      {description && (\n        <Text as={AlertDialog.Description} className=\"flex overflow-y-auto\">\n          {description}\n        </Text>\n      )}\n      <div className=\"flex flex-wrap justify-end gap-2\">\n        <AlertDialog.Cancel asChild>\n          {cancelElement ||\n            (cancelActionText && (\n              <Button\n                size=\"sm\"\n                appearance=\"outline\"\n                onClick={() => onAction?.(false)}\n              >\n                {cancelActionText}\n              </Button>\n            ))}\n        </AlertDialog.Cancel>\n        <AlertDialog.Action asChild>\n          {confirmElement || (\n            <Button size=\"sm\" onClick={() => onAction?.(true)}>\n              {confirmActionText}\n            </Button>\n          )}\n        </AlertDialog.Action>\n      </div>\n    </AlertDialog.Content>\n  </AlertDialog>\n)\n"],"mappings":";;;;;;;;AAcA,IAAa,SAAS,EACpB,OACA,MACA,OACA,aACA,UACA,kBACA,mBACA,SACA,gBACA,eACA,GAAG,WAEH,oBAAC,aAAD;CAAa,aAAA;WACX,qBAAC,YAAY,SAAb;EACQ;EACN,kBAAkB,MAAM,EAAE,eAAe;EACzC,kBAAkB;EAClB,GAAI;EACJ,WAAU;YALZ;GAOE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,SAAS,oBAAC,iBAAD,EAAwB,MAAQ,CAAA,GAC1C,oBAAC,SAAD;KAAS,IAAI,YAAY;KAAO,MAAK;KAAK,WAAU;eACjD;IACM,CAAA,CACN;;GACJ,eACC,oBAAC,MAAD;IAAM,IAAI,YAAY;IAAa,WAAU;cAC1C;GACG,CAAA;GAER,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,YAAY,QAAb;KAAoB,SAAA;eACjB,iBACE,oBACC,oBAAC,QAAD;MACE,MAAK;MACL,YAAW;MACX,eAAe,WAAW,KAAK;gBAE9B;KACK,CAAA;IAEM,CAAA,GACpB,oBAAC,YAAY,QAAb;KAAoB,SAAA;eACjB,kBACC,oBAAC,QAAD;MAAQ,MAAK;MAAK,eAAe,WAAW,IAAI;gBAC7C;KACK,CAAA;IAEQ,CAAA,CACjB;;EACc;;AACV,CAAA"}
+{"version":3,"file":"AlertDialog.js","names":[],"sources":["../../../../src/components/alert-dialog/alert-context/AlertDialog.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../../button/Button'\nimport { Heading } from '../../heading/Heading'\nimport { Text } from '../../text/Text'\nimport { AlertDialog } from '../AlertDialog'\nimport { AlertDialogIcon } from './AlertDialogIcon'\nimport type { alert } from './types'\n\ntype AlertDialogContentProps = React.ComponentProps<typeof AlertDialog> & {\n  className?: string\n  onClose: () => void\n} & alert\n\nexport const Alert = ({\n  title,\n  size,\n  tone,\n  description,\n  onAction,\n  cancelActionText,\n  confirmActionText,\n  onClose,\n  confirmElement,\n  cancelElement,\n  ...rest\n}: AlertDialogContentProps) => (\n  <AlertDialog defaultOpen>\n    <AlertDialog.Content\n      size={size}\n      onEscapeKeyDown={(e) => e.preventDefault()}\n      onCloseAutoFocus={onClose}\n      {...rest}\n      className=\"flex max-h-[90vh] flex-col gap-8\"\n    >\n      <div className=\"flex items-center gap-2\">\n        {tone && <AlertDialogIcon tone={tone} />}\n        <Heading as={AlertDialog.Title} size=\"sm\" className=\"mr-4\">\n          {title}\n        </Heading>\n      </div>\n      {description && (\n        <Text as={AlertDialog.Description} className=\"flex overflow-y-auto\">\n          {description}\n        </Text>\n      )}\n      <div className=\"flex flex-wrap justify-end gap-2\">\n        <AlertDialog.Cancel asChild>\n          {cancelElement ||\n            (cancelActionText && (\n              <Button\n                size=\"sm\"\n                appearance=\"outline\"\n                onClick={() => onAction?.(false)}\n              >\n                {cancelActionText}\n              </Button>\n            ))}\n        </AlertDialog.Cancel>\n        <AlertDialog.Action asChild>\n          {confirmElement || (\n            <Button size=\"sm\" onClick={() => onAction?.(true)}>\n              {confirmActionText}\n            </Button>\n          )}\n        </AlertDialog.Action>\n      </div>\n    </AlertDialog.Content>\n  </AlertDialog>\n)\n"],"mappings":";;;;;;;;AAcA,IAAa,SAAS,EACpB,OACA,MACA,MACA,aACA,UACA,kBACA,mBACA,SACA,gBACA,eACA,GAAG,WAEH,oBAAC,aAAD;CAAa,aAAA;WACX,qBAAC,YAAY,SAAb;EACQ;EACN,kBAAkB,MAAM,EAAE,eAAe;EACzC,kBAAkB;EAClB,GAAI;EACJ,WAAU;YALZ;GAOE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACG,QAAQ,oBAAC,iBAAD,EAAuB,KAAO,CAAA,GACvC,oBAAC,SAAD;KAAS,IAAI,YAAY;KAAO,MAAK;KAAK,WAAU;eACjD;IACM,CAAA,CACN;;GACJ,eACC,oBAAC,MAAD;IAAM,IAAI,YAAY;IAAa,WAAU;cAC1C;GACG,CAAA;GAER,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,YAAY,QAAb;KAAoB,SAAA;eACjB,iBACE,oBACC,oBAAC,QAAD;MACE,MAAK;MACL,YAAW;MACX,eAAe,WAAW,KAAK;gBAE9B;KACK,CAAA;IAEM,CAAA,GACpB,oBAAC,YAAY,QAAb;KAAoB,SAAA;eACjB,kBACC,oBAAC,QAAD;MAAQ,MAAK;MAAK,eAAe,WAAW,IAAI;gBAC7C;KACK,CAAA;IAEQ,CAAA,CACjB;;EACc;;AACV,CAAA"}

package/dist/components/alert-dialog/alert-context/AlertDialogIcon.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export type AlertDialogTheme = 'info' | 'warning' | 'danger' | 'success';
-export declare const AlertDialogIcon: ({ theme }: {
-    theme: AlertDialogTheme;
+import type { TColorAccent } from '../../../experiments/theme/Theme';
+export type AlertDialogTone = Extract<TColorAccent, 'info' | 'warning' | 'danger' | 'success'>;
+export declare const AlertDialogIcon: ({ tone }: {
+    tone: AlertDialogTone;
 }) => React.JSX.Element;

package/dist/components/alert-dialog/alert-context/AlertDialogIcon.js

@@ -5,12 +5,12 @@ import { jsx } from "react/jsx-runtime";
 import { Danger, Info, OkCircle } from "@atom-learning/icons";
 //#region src/components/alert-dialog/alert-context/AlertDialogIcon.tsx
 var StyledIcon = styled(Icon, {
-	base: ["self-start"],
-	variants: { theme: {
-		info: ["text-info"],
-		warning: ["text-warning-mid"],
-		danger: ["rotate-180", "text-danger"],
-		success: ["text-success"]
+	base: ["self-start", "text-accent"],
+	variants: { tone: {
+		info: [],
+		warning: ["text-accent"],
+		danger: ["rotate-180"],
+		success: []
 	} }
 });
 var iconMap = {
@@ -19,9 +19,10 @@ var iconMap = {
 	danger: Info,
 	success: OkCircle
 };
-var AlertDialogIcon = ({ theme }) => /* @__PURE__ */ jsx(StyledIcon, {
-	theme,
-	is: iconMap[theme]
+var AlertDialogIcon = ({ tone }) => /* @__PURE__ */ jsx(StyledIcon, {
+	tone,
+	"data-color-accent": tone,
+	is: iconMap[tone]
 });
 //#endregion
 export { AlertDialogIcon };

package/dist/components/alert-dialog/alert-context/AlertDialogIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialogIcon.js","names":[],"sources":["../../../../src/components/alert-dialog/alert-context/AlertDialogIcon.tsx"],"sourcesContent":["import { Danger, Info, OkCircle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '../../../styled'\nimport { Icon } from '../../icon/Icon'\n\nexport type AlertDialogTheme = 'info' | 'warning' | 'danger' | 'success'\n\nconst StyledIcon = styled(Icon, {\n  base: ['self-start'],\n  variants: {\n    theme: {\n      info: ['text-info'],\n      warning: ['text-warning-mid'],\n      danger: ['rotate-180', 'text-danger'],\n      success: ['text-success']\n    }\n  }\n})\n\nconst iconMap: Record<\n  AlertDialogTheme,\n  React.FC<React.SVGProps<SVGSVGElement>>\n> = {\n  info: Info,\n  warning: Danger,\n  danger: Info,\n  success: OkCircle\n}\n\nexport const AlertDialogIcon = ({ theme }: { theme: AlertDialogTheme }) => (\n  <StyledIcon theme={theme} is={iconMap[theme]} />\n)\n"],"mappings":";;;;;;AAQA,IAAM,aAAa,OAAO,MAAM;CAC9B,MAAM,CAAC,YAAY;CACnB,UAAU,EACR,OAAO;EACL,MAAM,CAAC,WAAW;EAClB,SAAS,CAAC,kBAAkB;EAC5B,QAAQ,CAAC,cAAc,aAAa;EACpC,SAAS,CAAC,cAAc;CAC1B,EACF;AACF,CAAC;AAED,IAAM,UAGF;CACF,MAAM;CACN,SAAS;CACT,QAAQ;CACR,SAAS;AACX;AAEA,IAAa,mBAAmB,EAAE,YAChC,oBAAC,YAAD;CAAmB;CAAO,IAAI,QAAQ;AAAS,CAAA"}
+{"version":3,"file":"AlertDialogIcon.js","names":[],"sources":["../../../../src/components/alert-dialog/alert-context/AlertDialogIcon.tsx"],"sourcesContent":["import { Danger, Info, OkCircle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport type { TColorAccent } from '../../../experiments/theme/Theme'\nimport { styled } from '../../../styled'\nimport { Icon } from '../../icon/Icon'\n\n// Intent, not hue: each tone resolves to a fixed status scale\nexport type AlertDialogTone = Extract<\n  TColorAccent,\n  'info' | 'warning' | 'danger' | 'success'\n>\n\n// Accent roles only: data-color-accent (from `tone`) picks the scale\nconst StyledIcon = styled(Icon, {\n  base: ['self-start', 'text-accent'],\n  variants: {\n    tone: {\n      info: [],\n      // Warning icons use the brighter step 10, not the warning text role\n      warning: ['text-accent'],\n      danger: ['rotate-180'],\n      success: []\n    }\n  }\n})\n\nconst iconMap: Record<\n  AlertDialogTone,\n  React.FC<React.SVGProps<SVGSVGElement>>\n> = {\n  info: Info,\n  warning: Danger,\n  danger: Info,\n  success: OkCircle\n}\n\nexport const AlertDialogIcon = ({ tone }: { tone: AlertDialogTone }) => (\n  <StyledIcon tone={tone} data-color-accent={tone} is={iconMap[tone]} />\n)\n"],"mappings":";;;;;;AAcA,IAAM,aAAa,OAAO,MAAM;CAC9B,MAAM,CAAC,cAAc,aAAa;CAClC,UAAU,EACR,MAAM;EACJ,MAAM,CAAC;EAEP,SAAS,CAAC,aAAa;EACvB,QAAQ,CAAC,YAAY;EACrB,SAAS,CAAC;CACZ,EACF;AACF,CAAC;AAED,IAAM,UAGF;CACF,MAAM;CACN,SAAS;CACT,QAAQ;CACR,SAAS;AACX;AAEA,IAAa,mBAAmB,EAAE,WAChC,oBAAC,YAAD;CAAkB;CAAM,qBAAmB;CAAM,IAAI,QAAQ;AAAQ,CAAA"}

package/dist/components/alert-dialog/alert-context/types.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { AlertDialogContent } from '../AlertDialogContent';
-import type { AlertDialogTheme } from './AlertDialogIcon';
+import type { AlertDialogTone } from './AlertDialogIcon';
 type AlertCommonProps = {
     id: string;
     title: string;
     size?: React.ComponentProps<typeof AlertDialogContent>['size'];
-    theme?: AlertDialogTheme;
+    tone?: AlertDialogTone;
     description?: string;
 };
 type AlertActions = {

package/dist/components/avatar/Avatar.d.ts

@@ -3,11 +3,11 @@ import type { AvatarRootContextValue } from './Avatar.context';
 import { AvatarRootContext } from './Avatar.context';
 declare const StyledDiv: import("../..").PolymorphicComponent<"div", {
     size?: "lg" | "md" | "sm" | "xl" | "xs" | "xxl" | undefined;
-    emphasis?: "bold" | "subtle" | "white" | undefined;
+    emphasis?: "bold" | "minimal" | "subtle" | undefined;
 }>;
 declare const StyledButton: import("../..").PolymorphicComponent<"button", {
     size?: "lg" | "md" | "sm" | "xl" | "xs" | "xxl" | undefined;
-    emphasis?: "bold" | "subtle" | "white" | undefined;
+    emphasis?: "bold" | "minimal" | "subtle" | undefined;
 }>;
 type AvatarProps = React.ComponentProps<typeof StyledDiv | typeof StyledButton> & {
     name?: string;

package/dist/components/avatar/Avatar.js

@@ -12,10 +12,10 @@ var avatarRootStyles = [
 	"flex",
 	"justify-center",
 	"items-center",
-	"text-grey-800",
+	"text-subtle",
 	"rounded-full",
 	"border-2",
-	"border-grey-200",
+	"border-subtle",
 	"bg-(--bg-color)",
 	"overflow-hidden"
 ];
@@ -31,24 +31,25 @@ var StyledDiv = /* @__PURE__ */ styled("div", {
 			xxl: ["size-24"]
 		},
 		emphasis: {
-			bold: ["border-0", "[&>p]:text-white"],
+			bold: ["border-0", "[&>p]:text-(--fg-color)"],
 			subtle: ["border-0"],
-			white: []
+			minimal: []
 		}
 	}
 });
 var StyledButton = /* @__PURE__ */ styled("button", {
 	base: [
 		...avatarRootStyles,
-		"not-disabled:active:bg-grey-200",
-		"not-disabled:active:border-primary-800",
-		"not-disabled:hover:bg-grey-100",
-		"not-disabled:hover:border-grey-800",
-		"not-disabled:focus-visible:outline-none",
-		"not-disabled:focus-visible:relative",
-		"not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]",
-		"not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]",
-		"not-disabled:focus-visible:z-1",
+		"not-disabled:active:bg-active",
+		"not-disabled:active:border-accent-solid",
+		"not-disabled:hover:bg-hover",
+		"not-disabled:hover:border-strong",
+		"focus-visible:outline-2",
+		"focus-visible:outline-offset-2",
+		"focus-visible:outline-solid",
+		"focus-visible:outline-focus",
+		"focus-visible:relative",
+		"focus-visible:z-1",
 		"disabled:cursor-not-allowed",
 		"disabled:opacity-30"
 	],
@@ -62,9 +63,9 @@ var StyledButton = /* @__PURE__ */ styled("button", {
 			xxl: ["size-24"]
 		},
 		emphasis: {
-			bold: ["border-0", "[&>p]:text-white"],
+			bold: ["border-0", "[&>p]:text-(--fg-color)"],
 			subtle: ["border-0"],
-			white: []
+			minimal: []
 		}
 	}
 });
@@ -92,21 +93,35 @@ var DS_COLORS = [
 	"yellow",
 	"orange"
 ];
-var getBackgroundColor = ({ emphasis, name }) => {
-	if (emphasis === "white" || !name) return "white";
-	return `var(--color-${DS_COLORS[name.toLocaleUpperCase().charCodeAt(0) % DS_COLORS.length]}-${emphasis === "bold" ? 700 : 300})`;
+var getIdentityColors = ({ emphasis, name }) => {
+	if (emphasis === "minimal" || !name) return {
+		background: "var(--background-color-surface)",
+		foreground: "currentColor"
+	};
+	return {
+		accent: DS_COLORS[name.toLocaleUpperCase().charCodeAt(0) % DS_COLORS.length],
+		background: emphasis === "bold" ? "var(--color-accent-8)" : "var(--background-color-accent-subtle-active)",
+		foreground: "var(--text-color-on-accent)"
+	};
 };
-var AvatarRoot = ({ children, size = "lg", name, emphasis = "white", disabled = false, onClick }) => {
-	const backgroundColor = getBackgroundColor({
+var AvatarRoot = ({ children, size = "lg", name, emphasis = "minimal", disabled = false, onClick }) => {
+	const { accent, background, foreground } = getIdentityColors({
 		emphasis,
 		name
 	});
+	const colorProps = {
+		"data-color-accent": accent,
+		style: {
+			"--bg-color": background,
+			"--fg-color": foreground
+		}
+	};
 	return /* @__PURE__ */ jsx(AvatarRootProvider, {
 		name,
 		size,
 		children: onClick ? /* @__PURE__ */ jsx(StyledButton, {
 			size,
-			style: { "--bg-color": backgroundColor },
+			...colorProps,
 			disabled,
 			onClick: disabled ? void 0 : onClick,
 			className: cn(disabled ? "cursor-auto" : "cursor-pointer"),
@@ -114,7 +129,7 @@ var AvatarRoot = ({ children, size = "lg", name, emphasis = "white", disabled =
 			children
 		}) : /* @__PURE__ */ jsx(StyledDiv, {
 			size,
-			style: { "--bg-color": backgroundColor },
+			...colorProps,
 			emphasis,
 			children
 		})

package/dist/components/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport type { AvatarRootContextValue } from './Avatar.context'\nimport { AvatarRootContext } from './Avatar.context'\nimport { AvatarIcon } from './AvatarIcon'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarInitial } from './AvatarInitial'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\n\nconst avatarRootStyles = [\n  'flex',\n  'justify-center',\n  'items-center',\n  'text-grey-800',\n  'rounded-full',\n  'border-2',\n  'border-grey-200',\n  'bg-(--bg-color)',\n  'overflow-hidden'\n]\n\nconst StyledDiv = /* @__PURE__ */ styled('div', {\n  base: avatarRootStyles,\n  variants: {\n    size: {\n      xs: ['size-6'],\n      sm: ['size-8'],\n      md: ['size-10'],\n      lg: ['size-12'],\n      xl: ['size-16'],\n      xxl: ['size-24']\n    },\n    emphasis: {\n      bold: ['border-0', '[&>p]:text-white'],\n      subtle: ['border-0'],\n      white: []\n    }\n  }\n})\n\nconst StyledButton = /* @__PURE__ */ styled('button', {\n  base: [\n    ...avatarRootStyles,\n    'not-disabled:active:bg-grey-200',\n    'not-disabled:active:border-primary-800',\n    'not-disabled:hover:bg-grey-100',\n    'not-disabled:hover:border-grey-800',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:z-1',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    size: {\n      xs: ['size-6'],\n      sm: ['size-8'],\n      md: ['size-10'],\n      lg: ['size-12'],\n      xl: ['size-16'],\n      xxl: ['size-24']\n    },\n    emphasis: {\n      bold: ['border-0', '[&>p]:text-white'],\n      subtle: ['border-0'],\n      white: []\n    }\n  }\n})\n\ntype AvatarProps = React.ComponentProps<\n  typeof StyledDiv | typeof StyledButton\n> & {\n  name?: string\n} & (\n    | {\n        onClick: React.MouseEventHandler<HTMLButtonElement>\n        disabled?: boolean\n      }\n    | { onClick?: never; disabled?: never }\n  )\n\nexport { AvatarRootContext }\nexport type { AvatarRootContextValue }\n\nexport const AvatarRootProvider = ({ children, name, size }: AvatarProps) => {\n  const value = React.useMemo<AvatarRootContextValue>(\n    () => ({ name, size }),\n    [name, size]\n  )\n\n  return <AvatarRootContext value={value}>{children}</AvatarRootContext>\n}\n\nconst DS_COLORS = [\n  'maroon',\n  'red',\n  'magenta',\n  'pink',\n  'purple',\n  'lapis',\n  'blue',\n  'cyan',\n  'teal',\n  'green',\n  'lime',\n  'yellow',\n  'orange'\n] as const\n\nconst getBackgroundColor = ({\n  emphasis,\n  name\n}: Pick<AvatarProps, 'emphasis' | 'name'>) => {\n  if (emphasis === 'white' || !name) return 'white'\n  const index = name.toLocaleUpperCase().charCodeAt(0) % DS_COLORS.length\n  return `var(--color-${DS_COLORS[index]}-${emphasis === 'bold' ? 700 : 300})`\n}\n\nexport const AvatarRoot = ({\n  children,\n  size = 'lg',\n  name,\n  emphasis = 'white',\n  disabled = false,\n  onClick\n}: AvatarProps) => {\n  const backgroundColor = getBackgroundColor({ emphasis, name })\n  return (\n    <AvatarRootProvider name={name} size={size}>\n      {onClick ? (\n        <StyledButton\n          size={size}\n          style={{\n            '--bg-color': backgroundColor\n          }}\n          disabled={disabled}\n          onClick={disabled ? undefined : onClick}\n          className={cn(disabled ? 'cursor-auto' : 'cursor-pointer')}\n          emphasis={emphasis}\n        >\n          {children}\n        </StyledButton>\n      ) : (\n        <StyledDiv\n          size={size}\n          style={{\n            '--bg-color': backgroundColor\n          }}\n          emphasis={emphasis}\n        >\n          {children}\n        </StyledDiv>\n      )}\n    </AvatarRootProvider>\n  )\n}\n\nexport const Avatar = /* @__PURE__ */ Object.assign(AvatarRoot, {\n  Image: AvatarImage,\n  Initial: AvatarInitial,\n  Placeholder: AvatarPlaceholder,\n  Icon: AvatarIcon\n})\n\nAvatarRoot.displayName = 'Avatar'\n"],"mappings":";;;;;;;;;;AAUA,IAAM,mBAAmB;CACvB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAM,YAA4B,uBAAO,OAAO;CAC9C,MAAM;CACN,UAAU;EACR,MAAM;GACJ,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,KAAK,CAAC,SAAS;EACjB;EACA,UAAU;GACR,MAAM,CAAC,YAAY,kBAAkB;GACrC,QAAQ,CAAC,UAAU;GACnB,OAAO,CAAC;EACV;CACF;AACF,CAAC;AAED,IAAM,eAA+B,uBAAO,UAAU;CACpD,MAAM;EACJ,GAAG;EACH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,KAAK,CAAC,SAAS;EACjB;EACA,UAAU;GACR,MAAM,CAAC,YAAY,kBAAkB;GACrC,QAAQ,CAAC,UAAU;GACnB,OAAO,CAAC;EACV;CACF;AACF,CAAC;AAiBD,IAAa,sBAAsB,EAAE,UAAU,MAAM,WAAwB;CAM3E,OAAO,oBAAC,mBAAD;EAA0B,OALnB,QAAM,eACX;GAAE;GAAM;EAAK,IACpB,CAAC,MAAM,IAAI,CAGoB;EAAQ;CAA4B,CAAA;AACvE;AAEA,IAAM,YAAY;CAChB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAM,sBAAsB,EAC1B,UACA,WAC4C;CAC5C,IAAI,aAAa,WAAW,CAAC,MAAM,OAAO;CAE1C,OAAO,eAAe,UADR,KAAK,kBAAkB,CAAC,CAAC,WAAW,CAAC,IAAI,UAAU,QAC1B,GAAG,aAAa,SAAS,MAAM,IAAI;AAC5E;AAEA,IAAa,cAAc,EACzB,UACA,OAAO,MACP,MACA,WAAW,SACX,WAAW,OACX,cACiB;CACjB,MAAM,kBAAkB,mBAAmB;EAAE;EAAU;CAAK,CAAC;CAC7D,OACE,oBAAC,oBAAD;EAA0B;EAAY;YACnC,UACC,oBAAC,cAAD;GACQ;GACN,OAAO,EACL,cAAc,gBAChB;GACU;GACV,SAAS,WAAW,KAAA,IAAY;GAChC,WAAW,GAAG,WAAW,gBAAgB,gBAAgB;GAC/C;GAET;EACW,CAAA,IAEd,oBAAC,WAAD;GACQ;GACN,OAAO,EACL,cAAc,gBAChB;GACU;GAET;EACQ,CAAA;CAEK,CAAA;AAExB;AAEA,IAAa,SAAyB,uBAAO,OAAO,YAAY;CAC9D,OAAO;CACP,SAAS;CACT,aAAa;CACb,MAAM;AACR,CAAC;AAED,WAAW,cAAc"}
+{"version":3,"file":"Avatar.js","names":[],"sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { TColorAccent } from '../../experiments/theme/Theme'\nimport { styled, cn } from '../../styled'\nimport type { AvatarRootContextValue } from './Avatar.context'\nimport { AvatarRootContext } from './Avatar.context'\nimport { AvatarIcon } from './AvatarIcon'\nimport { AvatarImage } from './AvatarImage'\nimport { AvatarInitial } from './AvatarInitial'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\n\nconst avatarRootStyles = [\n  'flex',\n  'justify-center',\n  'items-center',\n  'text-subtle',\n  'rounded-full',\n  'border-2',\n  'border-subtle',\n  'bg-(--bg-color)',\n  'overflow-hidden'\n]\n\nconst StyledDiv = /* @__PURE__ */ styled('div', {\n  base: avatarRootStyles,\n  variants: {\n    size: {\n      xs: ['size-6'],\n      sm: ['size-8'],\n      md: ['size-10'],\n      lg: ['size-12'],\n      xl: ['size-16'],\n      xxl: ['size-24']\n    },\n    emphasis: {\n      bold: ['border-0', '[&>p]:text-(--fg-color)'],\n      subtle: ['border-0'],\n      minimal: []\n    }\n  }\n})\n\nconst StyledButton = /* @__PURE__ */ styled('button', {\n  base: [\n    ...avatarRootStyles,\n    'not-disabled:active:bg-active',\n    'not-disabled:active:border-accent-solid',\n    'not-disabled:hover:bg-hover',\n    'not-disabled:hover:border-strong',\n    'focus-visible:outline-2',\n    'focus-visible:outline-offset-2',\n    'focus-visible:outline-solid',\n    'focus-visible:outline-focus',\n    'focus-visible:relative',\n    'focus-visible:z-1',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    size: {\n      xs: ['size-6'],\n      sm: ['size-8'],\n      md: ['size-10'],\n      lg: ['size-12'],\n      xl: ['size-16'],\n      xxl: ['size-24']\n    },\n    emphasis: {\n      bold: ['border-0', '[&>p]:text-(--fg-color)'],\n      subtle: ['border-0'],\n      minimal: []\n    }\n  }\n})\n\ntype AvatarProps = React.ComponentProps<\n  typeof StyledDiv | typeof StyledButton\n> & {\n  name?: string\n} & (\n    | {\n        onClick: React.MouseEventHandler<HTMLButtonElement>\n        disabled?: boolean\n      }\n    | { onClick?: never; disabled?: never }\n  )\n\nexport { AvatarRootContext }\nexport type { AvatarRootContextValue }\n\nexport const AvatarRootProvider = ({ children, name, size }: AvatarProps) => {\n  const value = React.useMemo<AvatarRootContextValue>(\n    () => ({ name, size }),\n    [name, size]\n  )\n\n  return <AvatarRootContext value={value}>{children}</AvatarRootContext>\n}\n\nconst DS_COLORS = [\n  'maroon',\n  'red',\n  'magenta',\n  'pink',\n  'purple',\n  'lapis',\n  'blue',\n  'cyan',\n  'teal',\n  'green',\n  'lime',\n  'yellow',\n  'orange'\n] as const\n\nconst getIdentityColors = ({\n  emphasis,\n  name\n}: Pick<AvatarProps, 'emphasis' | 'name'>) => {\n  if (emphasis === 'minimal' || !name)\n    return {\n      background: 'var(--background-color-surface)',\n      foreground: 'currentColor'\n    }\n  const hue =\n    DS_COLORS[name.toLocaleUpperCase().charCodeAt(0) % DS_COLORS.length]\n  const bold = emphasis === 'bold'\n  return {\n    accent: hue,\n    // Light steps 8 / 4 are the hue's 700 / 300\n    background: bold\n      ? 'var(--color-accent-8)'\n      : 'var(--background-color-accent-subtle-active)',\n    foreground: 'var(--text-color-on-accent)'\n  }\n}\n\nexport const AvatarRoot = ({\n  children,\n  size = 'lg',\n  name,\n  emphasis = 'minimal',\n  disabled = false,\n  onClick\n}: AvatarProps) => {\n  const { accent, background, foreground } = getIdentityColors({\n    emphasis,\n    name\n  })\n  const colorProps = {\n    'data-color-accent': accent,\n    style: { '--bg-color': background, '--fg-color': foreground }\n  }\n  return (\n    <AvatarRootProvider name={name} size={size}>\n      {onClick ? (\n        <StyledButton\n          size={size}\n          {...colorProps}\n          disabled={disabled}\n          onClick={disabled ? undefined : onClick}\n          className={cn(disabled ? 'cursor-auto' : 'cursor-pointer')}\n          emphasis={emphasis}\n        >\n          {children}\n        </StyledButton>\n      ) : (\n        <StyledDiv size={size} {...colorProps} emphasis={emphasis}>\n          {children}\n        </StyledDiv>\n      )}\n    </AvatarRootProvider>\n  )\n}\n\nexport const Avatar = /* @__PURE__ */ Object.assign(AvatarRoot, {\n  Image: AvatarImage,\n  Initial: AvatarInitial,\n  Placeholder: AvatarPlaceholder,\n  Icon: AvatarIcon\n})\n\nAvatarRoot.displayName = 'Avatar'\n"],"mappings":";;;;;;;;;;AAWA,IAAM,mBAAmB;CACvB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAM,YAA4B,uBAAO,OAAO;CAC9C,MAAM;CACN,UAAU;EACR,MAAM;GACJ,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,KAAK,CAAC,SAAS;EACjB;EACA,UAAU;GACR,MAAM,CAAC,YAAY,yBAAyB;GAC5C,QAAQ,CAAC,UAAU;GACnB,SAAS,CAAC;EACZ;CACF;AACF,CAAC;AAED,IAAM,eAA+B,uBAAO,UAAU;CACpD,MAAM;EACJ,GAAG;EACH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,IAAI,CAAC,SAAS;GACd,KAAK,CAAC,SAAS;EACjB;EACA,UAAU;GACR,MAAM,CAAC,YAAY,yBAAyB;GAC5C,QAAQ,CAAC,UAAU;GACnB,SAAS,CAAC;EACZ;CACF;AACF,CAAC;AAiBD,IAAa,sBAAsB,EAAE,UAAU,MAAM,WAAwB;CAM3E,OAAO,oBAAC,mBAAD;EAA0B,OALnB,QAAM,eACX;GAAE;GAAM;EAAK,IACpB,CAAC,MAAM,IAAI,CAGoB;EAAQ;CAA4B,CAAA;AACvE;AAEA,IAAM,YAAY;CAChB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAM,qBAAqB,EACzB,UACA,WAC4C;CAC5C,IAAI,aAAa,aAAa,CAAC,MAC7B,OAAO;EACL,YAAY;EACZ,YAAY;CACd;CAIF,OAAO;EACL,QAHA,UAAU,KAAK,kBAAkB,CAAC,CAAC,WAAW,CAAC,IAAI,UAAU;EAK7D,YAJW,aAAa,SAKpB,0BACA;EACJ,YAAY;CACd;AACF;AAEA,IAAa,cAAc,EACzB,UACA,OAAO,MACP,MACA,WAAW,WACX,WAAW,OACX,cACiB;CACjB,MAAM,EAAE,QAAQ,YAAY,eAAe,kBAAkB;EAC3D;EACA;CACF,CAAC;CACD,MAAM,aAAa;EACjB,qBAAqB;EACrB,OAAO;GAAE,cAAc;GAAY,cAAc;EAAW;CAC9D;CACA,OACE,oBAAC,oBAAD;EAA0B;EAAY;YACnC,UACC,oBAAC,cAAD;GACQ;GACN,GAAI;GACM;GACV,SAAS,WAAW,KAAA,IAAY;GAChC,WAAW,GAAG,WAAW,gBAAgB,gBAAgB;GAC/C;GAET;EACW,CAAA,IAEd,oBAAC,WAAD;GAAiB;GAAM,GAAI;GAAsB;GAC9C;EACQ,CAAA;CAEK,CAAA;AAExB;AAEA,IAAa,SAAyB,uBAAO,OAAO,YAAY;CAC9D,OAAO;CACP,SAAS;CACT,aAAa;CACb,MAAM;AACR,CAAC;AAED,WAAW,cAAc"}

package/dist/components/avatar/AvatarInitial.js

@@ -19,7 +19,7 @@ var AvatarInitial = () => {
 	if (!name) return /* @__PURE__ */ jsx(AvatarPlaceholder, {});
 	return /* @__PURE__ */ jsx(Text, {
 		size: textSize,
-		className: "text-grey-800",
+		className: "text-subtle",
 		children: name[0].toUpperCase()
 	});
 };

package/dist/components/avatar/AvatarInitial.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarInitial.js","names":[],"sources":["../../../src/components/avatar/AvatarInitial.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { overrideStyledVariantValue } from '../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Text } from '../text/Text'\nimport { AvatarRootContext } from './Avatar.context'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\n\nconst toTextSize = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'sm',\n  lg: 'md',\n  xl: 'md',\n  xxl: 'lg'\n}\n\nexport const AvatarInitial = () => {\n  const rootContext = React.use(AvatarRootContext)\n  const { name, size } = rootContext\n  const textSize = overrideStyledVariantValue(size, (s) => toTextSize[s])\n\n  if (!name) {\n    return <AvatarPlaceholder />\n  }\n\n  return (\n    <Text size={textSize} className=\"text-grey-800\">\n      {name[0].toUpperCase()}\n    </Text>\n  )\n}\n"],"mappings":";;;;;;;AAOA,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,KAAK;AACP;AAEA,IAAa,sBAAsB;CAEjC,MAAM,EAAE,MAAM,SADM,QAAM,IAAI,iBACP;CACvB,MAAM,WAAW,2BAA2B,OAAO,MAAM,WAAW,EAAE;CAEtE,IAAI,CAAC,MACH,OAAO,oBAAC,mBAAD,CAAoB,CAAA;CAG7B,OACE,oBAAC,MAAD;EAAM,MAAM;EAAU,WAAU;YAC7B,KAAK,EAAE,CAAC,YAAY;CACjB,CAAA;AAEV"}
+{"version":3,"file":"AvatarInitial.js","names":[],"sources":["../../../src/components/avatar/AvatarInitial.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { overrideStyledVariantValue } from '../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Text } from '../text/Text'\nimport { AvatarRootContext } from './Avatar.context'\nimport { AvatarPlaceholder } from './AvatarPlaceholder'\n\nconst toTextSize = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'sm',\n  lg: 'md',\n  xl: 'md',\n  xxl: 'lg'\n}\n\nexport const AvatarInitial = () => {\n  const rootContext = React.use(AvatarRootContext)\n  const { name, size } = rootContext\n  const textSize = overrideStyledVariantValue(size, (s) => toTextSize[s])\n\n  if (!name) {\n    return <AvatarPlaceholder />\n  }\n\n  return (\n    <Text size={textSize} className=\"text-subtle\">\n      {name[0].toUpperCase()}\n    </Text>\n  )\n}\n"],"mappings":";;;;;;;AAOA,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,KAAK;AACP;AAEA,IAAa,sBAAsB;CAEjC,MAAM,EAAE,MAAM,SADM,QAAM,IAAI,iBACP;CACvB,MAAM,WAAW,2BAA2B,OAAO,MAAM,WAAW,EAAE;CAEtE,IAAI,CAAC,MACH,OAAO,oBAAC,mBAAD,CAAoB,CAAA;CAG7B,OACE,oBAAC,MAAD;EAAM,MAAM;EAAU,WAAU;YAC7B,KAAK,EAAE,CAAC,YAAY;CACjB,CAAA;AAEV"}

package/dist/components/badge/Badge.d.ts

@@ -1,15 +1,25 @@
 import * as React from 'react';
+import type { TColorAccent } from '../../experiments/theme/Theme';
 import { Icon } from '../icon/Icon';
-import { colorSchemes as badgeColorSchemes } from './Badge.colorscheme.config';
 import type { BadgeOverflow } from './Badge.types';
 declare const StyledBadge: import("../..").PolymorphicComponent<"div", {
-    emphasis?: ("bold" | "subtle" | "white" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "subtle" | "white">>) | undefined;
+    emphasis?: ("bold" | "minimal" | "subtle" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "bold" | "minimal" | "subtle">>) | undefined;
     size?: ("md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "md" | "sm" | "xs">>) | undefined;
     isClickable?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
     highlighted?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    decorative?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
 }>;
-export type BadgeProps = React.ComponentProps<typeof StyledBadge> & {
-    theme?: keyof typeof badgeColorSchemes;
+type BadgeStatusTone = Extract<TColorAccent, 'success' | 'warning' | 'danger' | 'info'>;
+type BadgeTone = 'neutral' | BadgeStatusTone;
+type BadgeAccent = Exclude<TColorAccent, BadgeStatusTone>;
+export type BadgeColorProps = {
+    tone?: BadgeTone;
+    accent?: never;
+} | {
+    accent?: BadgeAccent | 'inherit';
+    tone?: never;
+};
+export type BadgeProps = Omit<React.ComponentProps<typeof StyledBadge>, 'decorative'> & BadgeColorProps & {
     overflow?: BadgeOverflow;
 };
 export declare const Badge: (({ ref, size, overflow, ...rest }: BadgeProps) => React.JSX.Element) & {