@hitachivantara/uikit-react-core 5.78.0 → 5.80.0

package/dist/cjs/Button/Button.cjs

@@ -3,28 +3,31 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
 const generic = require("../types/generic.cjs");
 const Button_styles = require("./Button.styles.cjs");
-const mapVariant = (variant, theme) => {
-  if (theme === "ds3") return variant;
-  const deprecatedVariantMap = {
-    secondary: "secondarySubtle",
-    ghost: "primaryGhost"
-  };
-  const mappedVariant = deprecatedVariantMap[variant];
-  return mappedVariant || variant;
-};
+function parseVariant(variant) {
+  if (variant === "semantic") return ["inherit", "ghost"];
+  if (variant === "secondary") return ["secondary", "subtle"];
+  if (variant === "ghost") return ["primary", "ghost"];
+  if (variant === "contained" || variant === "subtle") {
+    return ["secondary", variant];
+  }
+  const result = variant.split(/(?=[A-Z])/);
+  if (!result[1]) return [result[0], "contained"];
+  return result.map((x) => x.toLowerCase());
+}
 const HvButton = generic.fixedForwardRef(function HvButton2(props, ref) {
   const {
     classes: classesProp,
     children,
-    variant: variantProp,
-    // TODO - should we split into two props (color and type) in v6?
+    icon = false,
+    variant: variantProp = icon ? "secondaryGhost" : "primary",
+    color: colorProp,
     disabled = false,
     className,
     startIcon,
     endIcon,
-    icon = false,
     size,
     radius,
     overrideIconColors = true,
@@ -37,11 +40,8 @@ const HvButton = generic.fixedForwardRef(function HvButton2(props, ref) {
     ...others
   } = uikitReactUtils.useDefaultProps("HvButton", props);
   const { classes, css, cx } = Button_styles.useClasses(classesProp);
-  const { activeTheme } = uikitReactUtils.useTheme();
-  const variant = mapVariant(
-    variantProp ?? (icon ? "secondaryGhost" : "primary"),
-    activeTheme?.base
-  );
+  const [parsedColor, variant] = parseVariant(variantProp);
+  const color = colorProp ?? parsedColor;
   const handleClick = (e) => {
     if (disabled) return;
     onClickProp?.(e);
@@ -50,31 +50,24 @@ const HvButton = generic.fixedForwardRef(function HvButton2(props, ref) {
     if (disabled) return;
     onMouseDownProp?.(e);
   };
-  const [color, type] = React.useMemo(() => {
-    const result = variant.split(/(?=[A-Z])/);
-    if (result[0] === "ghost" || result[0] === "semantic" || result[0] === "secondary" && !result[1])
-      return [];
-    return result.map((x) => x.toLowerCase());
-  }, [variant]);
   const sizeStyles = React.useMemo(
-    () => size ? icon ? Button_styles.getIconSizeStyles(size) : Button_styles.getSizeStyles(size) : void 0,
+    () => size && (icon ? Button_styles.getIconSizeStyles(size) : Button_styles.getSizeStyles(size)),
     [size, icon]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Component,
     {
       ref,
-      style: {
-        ...style,
-        "--HvButton-height": sizeStyles ? sizeStyles.height : "32px"
-      },
+      style: uikitReactUtils.mergeStyles(style, {
+        "--color": color && uikitStyles.getColor(color),
+        "--radius": radius && uikitStyles.theme.radii[radius],
+        "--HvButton-height": sizeStyles?.height ?? "32px"
+      }),
       className: cx(
         classes.root,
-        type && classes[type],
-        color && css(Button_styles.getColoringStyle(color, type)),
         classes[variant],
+        classes[variantProp],
         // Placed after type and color CSS for DS3 override
-        radius && css(Button_styles.getRadiusStyles(radius)),
         overrideIconColors && css(Button_styles.getOverrideColors()),
         {
           [classes.icon]: icon,

package/dist/cjs/Button/Button.styles.cjs

@@ -4,6 +4,9 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const focusUtils = require("../utils/focusUtils.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton", {
+  /**
+   * Classes applied to the root element
+   */
   root: {
     display: "inline-flex",
     alignItems: "center",
@@ -12,19 +15,22 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton",
     cursor: "pointer",
     whiteSpace: "nowrap",
     // Background color common for almost all variants
-    "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+    ":where(:not($disabled))": {
+      ":hover, :focus-visible": {
+        backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+      }
     },
-    "&:focus-visible": {
-      ...focusUtils.outlineStyles,
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+    ":focus-visible": {
+      ...focusUtils.outlineStyles
     },
     // Default button - no size specified
     fontFamily: uikitStyles.theme.fontFamily.body,
     ...uikitStyles.theme.typography.label,
+    color: "var(--color, currentcolor)",
+    backgroundColor: "transparent",
     height: "var(--HvButton-height)",
-    border: "1px solid currentcolor",
-    borderRadius: uikitStyles.theme.radii.base,
+    border: "1px solid transparent",
+    borderRadius: `var(--radius, ${uikitStyles.theme.radii.base})`,
     padding: uikitStyles.theme.spacing(0, "sm")
   },
   startIcon: {
@@ -37,11 +43,11 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton",
   disabled: {
     cursor: "not-allowed",
     color: uikitStyles.theme.colors.secondary_60,
-    borderColor: uikitStyles.theme.colors.atmo3,
-    backgroundColor: uikitStyles.theme.colors.atmo3,
-    "&:hover, &:focus-visible": {
-      backgroundColor: uikitStyles.theme.colors.atmo3,
-      borderColor: uikitStyles.theme.colors.atmo3
+    backgroundColor: "transparent",
+    borderColor: "transparent",
+    ":hover, :focus-visible": {
+      backgroundColor: "transparent",
+      borderColor: "transparent"
     }
   },
   icon: {
@@ -52,27 +58,23 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton",
       margin: -1
     }
   },
-  subtle: {
-    backgroundColor: "transparent",
-    "&$disabled": {
-      backgroundColor: "transparent",
-      "&:hover, &:focus-visible": {
-        backgroundColor: "transparent"
+  contained: {
+    color: uikitStyles.theme.colors.atmo1,
+    // `color-contrast(var(--color) vs ${colors.atmo1}, ${colors.base_light}, ${colors.base_dark})`,
+    backgroundColor: "var(--color)",
+    ":where(:not($disabled))": {
+      ":hover, :focus-visible": {
+        backgroundColor: "color-mix(in srgb, var(--color), black 20%)"
+      },
+      ":active": {
+        backgroundColor: "color-mix(in srgb, var(--color), black 30%)"
       }
     }
   },
-  ghost: {
-    borderColor: "transparent",
-    backgroundColor: "transparent",
-    "&$disabled": {
-      borderColor: "transparent",
-      backgroundColor: "transparent",
-      "&:hover, &:focus-visible": {
-        borderColor: "transparent",
-        backgroundColor: "transparent"
-      }
-    }
+  subtle: {
+    borderColor: "currentcolor"
   },
+  ghost: {},
   semantic: {
     color: uikitStyles.theme.colors.base_dark,
     backgroundColor: "transparent",
@@ -93,40 +95,19 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton",
   // Deprecated (DS3)
   secondary: {}
 });
-const getColoringStyle = (color, type) => {
-  if (type)
-    return {
-      color: uikitStyles.theme.colors[color !== "warning" ? color : `${color}_140`]
-    };
-  const bg = uikitStyles.theme.colors[color !== "warning" ? color : `${color}_120`];
-  const hoverBg = uikitStyles.theme.colors[color !== "warning" ? `${color}_80` : `${color}_140`];
-  return {
-    color: uikitStyles.theme.colors.atmo1,
-    backgroundColor: bg,
-    borderColor: bg,
-    "&:hover, &:focus-visible": {
-      backgroundColor: hoverBg,
-      borderColor: hoverBg
-    }
-  };
-};
-const getRadiusStyles = (radius) => ({
-  borderRadius: uikitStyles.theme.radii[radius]
-});
 const sizes = {
-  xs: { height: "24px", space: "sm", typography: "captionLabel" },
-  sm: { height: "24px", space: "sm", typography: "captionLabel" },
-  md: { height: "32px", space: "sm", typography: "label" },
-  lg: { height: "48px", space: "md", typography: "label" },
-  xl: { height: "48px", space: "md", typography: "label" }
+  xs: { height: "24px", fontSize: "sm" },
+  sm: { height: "24px", fontSize: "sm" },
+  md: { height: "32px" },
+  lg: { height: "48px", space: "md" },
+  xl: { height: "48px", space: "md" }
 };
 const getSizeStyles = (size) => {
-  const { height, space, typography } = sizes[size];
-  const { color, ...typoProps } = uikitStyles.theme.typography[typography];
+  const { height, space = "sm", fontSize } = sizes[size];
   return {
     height,
     padding: uikitStyles.theme.spacing(0, space),
-    ...typoProps
+    fontSize: fontSize && uikitStyles.theme.fontSizes[fontSize]
   };
 };
 const getIconSizeStyles = (size) => {
@@ -141,10 +122,8 @@ const getOverrideColors = () => ({
     fill: "currentcolor"
   }
 });
-exports.getColoringStyle = getColoringStyle;
 exports.getIconSizeStyles = getIconSizeStyles;
 exports.getOverrideColors = getOverrideColors;
-exports.getRadiusStyles = getRadiusStyles;
 exports.getSizeStyles = getSizeStyles;
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/Switch/Switch.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
 const validationStates = require("../Forms/FormElement/validationStates.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
@@ -12,6 +13,7 @@ const BaseSwitch = require("../BaseSwitch/BaseSwitch.cjs");
 const FormElement = require("../Forms/FormElement/FormElement.cjs");
 const Label = require("../Forms/Label/Label.cjs");
 const WarningText = require("../Forms/WarningText/WarningText.cjs");
+const isSemantical = (color) => ["positive", "negative", "warning"].includes(color);
 const HvSwitch = React.forwardRef(
   (props, ref) => {
     const {
@@ -35,9 +37,10 @@ const HvSwitch = React.forwardRef(
       statusMessage,
       "aria-errormessage": ariaErrorMessage,
       inputProps,
+      color,
       ...others
     } = uikitReactUtils.useDefaultProps("HvSwitch", props);
-    const { classes, cx } = Switch_styles.useClasses(classesProp);
+    const { classes, cx, css } = Switch_styles.useClasses(classesProp);
     const elementId = useUniqueId.useUniqueId(id);
     const [isChecked, setIsChecked] = useControlled.useControlled(
       checked,
@@ -115,6 +118,16 @@ const HvSwitch = React.forwardRef(
                     "aria-describedby": ariaDescribedBy,
                     ...inputProps
                   },
+                  ...color && {
+                    classes: {
+                      switchBase: css({
+                        "&&&+.HvBaseSwitch-track,&&&.HvBaseSwitch-checked+.HvBaseSwitch-track": {
+                          backgroundColor: uikitStyles.getColor(color),
+                          borderColor: isSemantical(color) ? uikitStyles.getColor(`${color}_120`) : "#00000032"
+                        }
+                      })
+                    }
+                  },
                   ...others
                 }
               )

package/dist/cjs/Tabs/Tabs.cjs

@@ -7,8 +7,12 @@ const Tabs_styles = require("./Tabs.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Tabs__default = /* @__PURE__ */ _interopDefault(Tabs);
 const HvTabs = (props) => {
-  const { classes: classesProp, ...others } = uikitReactUtils.useDefaultProps("HvTabs", props);
-  const { classes } = Tabs_styles.useClasses(classesProp);
+  const {
+    classes: classesProp,
+    floating = false,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvTabs", props);
+  const { classes, cx } = Tabs_styles.useClasses(classesProp);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Tabs__default.default,
     {
@@ -19,6 +23,7 @@ const HvTabs = (props) => {
         scroller: classes.scroller
       },
       TabIndicatorProps: { children: /* @__PURE__ */ jsxRuntime.jsx("div", {}) },
+      className: cx(floating && classes.floating),
       ...others
     }
   );

package/dist/cjs/Tabs/Tabs.styles.cjs

@@ -24,7 +24,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTabs", {
     "& button:first-of-type": {
       marginLeft: "3px"
     }
-  }
+  },
+  floating: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/index.cjs

@@ -118,7 +118,6 @@ const BulkActions_styles = require("./BulkActions/BulkActions.styles.cjs");
 const BulkActions = require("./BulkActions/BulkActions.cjs");
 const Button = require("./Button/Button.cjs");
 const Button_styles = require("./Button/Button.styles.cjs");
-const types = require("./Button/types.cjs");
 const Calendar_styles = require("./Calendar/Calendar.styles.cjs");
 const Calendar = require("./Calendar/Calendar.cjs");
 const CalendarHeader_styles = require("./Calendar/CalendarHeader/CalendarHeader.styles.cjs");
@@ -503,9 +502,6 @@ exports.bulkActionsClasses = BulkActions_styles.staticClasses;
 exports.HvBulkActions = BulkActions.HvBulkActions;
 exports.HvButton = Button.HvButton;
 exports.buttonClasses = Button_styles.staticClasses;
-exports.buttonRadius = types.buttonRadius;
-exports.buttonSize = types.buttonSize;
-exports.buttonVariant = types.buttonVariant;
 exports.calendarClasses = Calendar_styles.staticClasses;
 exports.HvCalendar = Calendar.HvCalendar;
 exports.calendarHeaderClasses = CalendarHeader_styles.staticClasses;

package/dist/esm/Button/Button.js

@@ -1,29 +1,32 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
+import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
+import { getColor, theme } from "@hitachivantara/uikit-styles";
 import { fixedForwardRef } from "../types/generic.js";
-import { useClasses, getIconSizeStyles, getSizeStyles, getColoringStyle, getRadiusStyles, getOverrideColors } from "./Button.styles.js";
+import { useClasses, getIconSizeStyles, getSizeStyles, getOverrideColors } from "./Button.styles.js";
 import { staticClasses } from "./Button.styles.js";
-const mapVariant = (variant, theme) => {
-  if (theme === "ds3") return variant;
-  const deprecatedVariantMap = {
-    secondary: "secondarySubtle",
-    ghost: "primaryGhost"
-  };
-  const mappedVariant = deprecatedVariantMap[variant];
-  return mappedVariant || variant;
-};
+function parseVariant(variant) {
+  if (variant === "semantic") return ["inherit", "ghost"];
+  if (variant === "secondary") return ["secondary", "subtle"];
+  if (variant === "ghost") return ["primary", "ghost"];
+  if (variant === "contained" || variant === "subtle") {
+    return ["secondary", variant];
+  }
+  const result = variant.split(/(?=[A-Z])/);
+  if (!result[1]) return [result[0], "contained"];
+  return result.map((x) => x.toLowerCase());
+}
 const HvButton = fixedForwardRef(function HvButton2(props, ref) {
   const {
     classes: classesProp,
     children,
-    variant: variantProp,
-    // TODO - should we split into two props (color and type) in v6?
+    icon = false,
+    variant: variantProp = icon ? "secondaryGhost" : "primary",
+    color: colorProp,
     disabled = false,
     className,
     startIcon,
     endIcon,
-    icon = false,
     size,
     radius,
     overrideIconColors = true,
@@ -36,11 +39,8 @@ const HvButton = fixedForwardRef(function HvButton2(props, ref) {
     ...others
   } = useDefaultProps("HvButton", props);
   const { classes, css, cx } = useClasses(classesProp);
-  const { activeTheme } = useTheme();
-  const variant = mapVariant(
-    variantProp ?? (icon ? "secondaryGhost" : "primary"),
-    activeTheme?.base
-  );
+  const [parsedColor, variant] = parseVariant(variantProp);
+  const color = colorProp ?? parsedColor;
   const handleClick = (e) => {
     if (disabled) return;
     onClickProp?.(e);
@@ -49,31 +49,24 @@ const HvButton = fixedForwardRef(function HvButton2(props, ref) {
     if (disabled) return;
     onMouseDownProp?.(e);
   };
-  const [color, type] = useMemo(() => {
-    const result = variant.split(/(?=[A-Z])/);
-    if (result[0] === "ghost" || result[0] === "semantic" || result[0] === "secondary" && !result[1])
-      return [];
-    return result.map((x) => x.toLowerCase());
-  }, [variant]);
   const sizeStyles = useMemo(
-    () => size ? icon ? getIconSizeStyles(size) : getSizeStyles(size) : void 0,
+    () => size && (icon ? getIconSizeStyles(size) : getSizeStyles(size)),
     [size, icon]
   );
   return /* @__PURE__ */ jsxs(
     Component,
     {
       ref,
-      style: {
-        ...style,
-        "--HvButton-height": sizeStyles ? sizeStyles.height : "32px"
-      },
+      style: mergeStyles(style, {
+        "--color": color && getColor(color),
+        "--radius": radius && theme.radii[radius],
+        "--HvButton-height": sizeStyles?.height ?? "32px"
+      }),
       className: cx(
         classes.root,
-        type && classes[type],
-        color && css(getColoringStyle(color, type)),
         classes[variant],
+        classes[variantProp],
         // Placed after type and color CSS for DS3 override
-        radius && css(getRadiusStyles(radius)),
         overrideIconColors && css(getOverrideColors()),
         {
           [classes.icon]: icon,

package/dist/esm/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { HvBaseTheme } from \"@hitachivantara/uikit-styles\";\n\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport {\n  staticClasses as buttonClasses,\n  getColoringStyle,\n  getIconSizeStyles,\n  getOverrideColors,\n  getRadiusStyles,\n  getSizeStyles,\n  useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the button. */\n      variant?: HvButtonVariant;\n      /** Whether the button is an icon-only button. */\n      icon?: boolean;\n      /** Whether the button is disabled or not. */\n      disabled?: boolean;\n      /** Class names to be applied. */\n      className?: string;\n      /** Element placed before the children. */\n      startIcon?: React.ReactNode;\n      /** Element placed after the children. */\n      endIcon?: React.ReactNode;\n      /** Button size. */\n      size?: HvButtonSize;\n      /** Button border radius. */\n      radius?: HvButtonRadius;\n      /** Defines the default colors of the button are forced into the icon. */\n      overrideIconColors?: boolean;\n      /** A Jss Object used to override or extend the styles applied. */\n      classes?: HvButtonClasses;\n      /** Whether the button is selected or not. */\n      selected?: boolean;\n      /**\n       * Whether the button is focusable when disabled.\n       * Without this property, the accessibility of the button decreases when disabled since it's not read by screen readers.\n       * Set this property to `true` when you need the button to still be focusable when disabled for accessibility purposes.\n       */\n      focusableWhenDisabled?: boolean;\n    }\n  >;\n\n/**\n * Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n * @returns the normalized variant in DS 5 API\n */\nconst mapVariant = (\n  variant: HvButtonVariant,\n  theme?: HvBaseTheme,\n): HvButtonVariant => {\n  if (theme === \"ds3\") return variant;\n\n  const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n    secondary: \"secondarySubtle\",\n    ghost: \"primaryGhost\",\n  };\n\n  const mappedVariant = deprecatedVariantMap[variant];\n\n  if (import.meta.env.DEV && mappedVariant) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`,\n    );\n  }\n\n  return mappedVariant || variant;\n};\n\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButton = fixedForwardRef(function HvButton<\n  C extends React.ElementType = \"button\",\n>(props: HvButtonProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    classes: classesProp,\n    children,\n    variant: variantProp, // TODO - should we split into two props (color and type) in v6?\n    disabled = false,\n    className,\n    startIcon,\n    endIcon,\n    icon = false,\n    size,\n    radius,\n    overrideIconColors = true,\n    component: Component = \"button\",\n    focusableWhenDisabled,\n    onClick: onClickProp,\n    onMouseDown: onMouseDownProp,\n    selected,\n    style,\n    ...others\n  } = useDefaultProps(\"HvButton\", props);\n  const { classes, css, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n  const variant = mapVariant(\n    variantProp ?? (icon ? \"secondaryGhost\" : \"primary\"),\n    activeTheme?.base,\n  );\n\n  const handleClick: HvButtonProps[\"onClick\"] = (e) => {\n    if (disabled) return;\n    onClickProp?.(e);\n  };\n\n  const handleMouseDown: HvButtonProps[\"onMouseDown\"] = (e) => {\n    if (disabled) return;\n    onMouseDownProp?.(e);\n  };\n\n  const [color, type] = useMemo(() => {\n    const result = variant.split(/(?=[A-Z])/);\n    if (\n      result[0] === \"ghost\" ||\n      result[0] === \"semantic\" ||\n      (result[0] === \"secondary\" && !result[1])\n    )\n      return [];\n    return result.map((x) => x.toLowerCase());\n  }, [variant]);\n\n  const sizeStyles = useMemo(\n    () =>\n      size ? (icon ? getIconSizeStyles(size) : getSizeStyles(size)) : undefined,\n    [size, icon],\n  );\n\n  return (\n    <Component\n      ref={ref}\n      style={{\n        ...style,\n        \"--HvButton-height\": sizeStyles ? sizeStyles.height : \"32px\",\n      }}\n      className={cx(\n        classes.root,\n        type && classes[type as keyof HvButtonClasses],\n        color && css(getColoringStyle(color, type)),\n        classes[variant as keyof HvButtonClasses], // Placed after type and color CSS for DS3 override\n        radius && css(getRadiusStyles(radius)),\n        overrideIconColors && css(getOverrideColors()),\n        {\n          [classes.icon]: icon,\n          [classes.disabled]: disabled,\n        },\n        sizeStyles && css(sizeStyles),\n        className,\n      )}\n      data-color={color}\n      onClick={handleClick}\n      onMouseDown={handleMouseDown}\n      {...(Component === \"button\" && { type: \"button\" })}\n      {...(disabled && {\n        disabled: !focusableWhenDisabled,\n        tabIndex: focusableWhenDisabled ? 0 : -1,\n        \"aria-disabled\": true,\n      })}\n      {...(selected && { \"aria-pressed\": selected })}\n      {...others}\n    >\n      {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n      {children}\n      {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n    </Component>\n  );\n});\n"],"names":["HvButton"],"mappings":";;;;;;AAoEA,MAAM,aAAa,CACjB,SACA,UACoB;AAChB,MAAA,UAAU,MAAc,QAAA;AAE5B,QAAM,uBAAwD;AAAA,IAC5D,WAAW;AAAA,IACX,OAAO;AAAA,EAAA;AAGH,QAAA,gBAAgB,qBAAqB,OAAO;AASlD,SAAO,iBAAiB;AAC1B;AAKO,MAAM,WAAW,gBAAgB,SAASA,UAE/C,OAAyB,KAAwB;AAC3C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,WAAW,YAAY;AAAA,IACvB;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,gBAAgB;AACxB,QAAM,UAAU;AAAA,IACd,gBAAgB,OAAO,mBAAmB;AAAA,IAC1C,aAAa;AAAA,EAAA;AAGT,QAAA,cAAwC,CAAC,MAAM;AACnD,QAAI,SAAU;AACd,kBAAc,CAAC;AAAA,EAAA;AAGX,QAAA,kBAAgD,CAAC,MAAM;AAC3D,QAAI,SAAU;AACd,sBAAkB,CAAC;AAAA,EAAA;AAGrB,QAAM,CAAC,OAAO,IAAI,IAAI,QAAQ,MAAM;AAC5B,UAAA,SAAS,QAAQ,MAAM,WAAW;AACxC,QACE,OAAO,CAAC,MAAM,WACd,OAAO,CAAC,MAAM,cACb,OAAO,CAAC,MAAM,eAAe,CAAC,OAAO,CAAC;AAEvC,aAAO;AACT,WAAO,OAAO,IAAI,CAAC,MAAM,EAAE,aAAa;AAAA,EAAA,GACvC,CAAC,OAAO,CAAC;AAEZ,QAAM,aAAa;AAAA,IACjB,MACE,OAAQ,OAAO,kBAAkB,IAAI,IAAI,cAAc,IAAI,IAAK;AAAA,IAClE,CAAC,MAAM,IAAI;AAAA,EAAA;AAIX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,GAAG;AAAA,QACH,qBAAqB,aAAa,WAAW,SAAS;AAAA,MACxD;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,QAAQ,IAA6B;AAAA,QAC7C,SAAS,IAAI,iBAAiB,OAAO,IAAI,CAAC;AAAA,QAC1C,QAAQ,OAAgC;AAAA;AAAA,QACxC,UAAU,IAAI,gBAAgB,MAAM,CAAC;AAAA,QACrC,sBAAsB,IAAI,mBAAmB;AAAA,QAC7C;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA,cAAc,IAAI,UAAU;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,cAAY;AAAA,MACZ,SAAS;AAAA,MACT,aAAa;AAAA,MACZ,GAAI,cAAc,YAAY,EAAE,MAAM,SAAS;AAAA,MAC/C,GAAI,YAAY;AAAA,QACf,UAAU,CAAC;AAAA,QACX,UAAU,wBAAwB,IAAI;AAAA,QACtC,iBAAiB;AAAA,MACnB;AAAA,MACC,GAAI,YAAY,EAAE,gBAAgB,SAAS;AAAA,MAC3C,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,aAAc,oBAAA,QAAA,EAAK,WAAW,QAAQ,WAAY,UAAU,WAAA;AAAA,QAC5D;AAAA,QACA,WAAY,oBAAA,QAAA,EAAK,WAAW,QAAQ,SAAU,UAAQ,SAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7D,CAAC;"}
+{"version":3,"file":"Button.js","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport {\n  mergeStyles,\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\nimport {\n  getColor,\n  HvColorAny,\n  HvRadius,\n  HvSize,\n  theme,\n} from \"@hitachivantara/uikit-styles\";\n\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport {\n  getIconSizeStyles,\n  getOverrideColors,\n  getSizeStyles,\n  staticClasses,\n  useClasses,\n} from \"./Button.styles\";\nimport { HvButtonVariant } from \"./types\";\n\ntype Variant = \"contained\" | \"subtle\" | \"ghost\";\n\nexport { staticClasses as buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the button. */\n      variant?: HvButtonVariant;\n      /** Whether the button is an icon-only button. */\n      icon?: boolean;\n      /** Whether the button is disabled or not. */\n      disabled?: boolean;\n      /** Class names to be applied. */\n      className?: string;\n      /** Element placed before the children. */\n      startIcon?: React.ReactNode;\n      /** Element placed after the children. */\n      endIcon?: React.ReactNode;\n      /** Color of the button. */\n      color?: HvColorAny;\n      /** Button size. */\n      size?: HvSize;\n      /** Button border radius. */\n      radius?: HvRadius;\n      /** Defines the default colors of the button are forced into the icon. */\n      overrideIconColors?: boolean;\n      /** A Jss Object used to override or extend the styles applied. */\n      classes?: HvButtonClasses;\n      /** Whether the button is selected or not. */\n      selected?: boolean;\n      /**\n       * Whether the button is focusable when disabled.\n       * Without this property, the accessibility of the button decreases when disabled since it's not read by screen readers.\n       * Set this property to `true` when you need the button to still be focusable when disabled for accessibility purposes.\n       */\n      focusableWhenDisabled?: boolean;\n    }\n  >;\n\nfunction parseVariant(variant: HvButtonVariant): [HvColorAny, Variant] {\n  const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n    secondary: \"secondarySubtle\",\n  };\n\n  const mappedVariant = deprecatedVariantMap[variant];\n\n  if (import.meta.env.DEV && mappedVariant) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `HvButton variant '${variant}' is deprecated. Please use '${mappedVariant}'.`,\n    );\n  }\n\n  if (variant === \"semantic\") return [\"inherit\", \"ghost\"];\n  if (variant === \"secondary\") return [\"secondary\", \"subtle\"];\n  if (variant === \"ghost\") return [\"primary\", \"ghost\"];\n  if (variant === \"contained\" || variant === \"subtle\") {\n    return [\"secondary\", variant];\n  }\n\n  const result = variant.split(/(?=[A-Z])/);\n  if (!result[1]) return [result[0], \"contained\"];\n\n  return result.map((x) => x.toLowerCase()) as [HvColorAny, Variant];\n}\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButton = fixedForwardRef(function HvButton<\n  C extends React.ElementType = \"button\",\n>(props: HvButtonProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    classes: classesProp,\n    children,\n    icon = false,\n    variant: variantProp = icon ? \"secondaryGhost\" : \"primary\",\n    color: colorProp,\n    disabled = false,\n    className,\n    startIcon,\n    endIcon,\n    size,\n    radius,\n    overrideIconColors = true,\n    component: Component = \"button\",\n    focusableWhenDisabled,\n    onClick: onClickProp,\n    onMouseDown: onMouseDownProp,\n    selected,\n    style,\n    ...others\n  } = useDefaultProps(\"HvButton\", props);\n  const { classes, css, cx } = useClasses(classesProp);\n  const [parsedColor, variant] = parseVariant(variantProp);\n  const color = colorProp ?? parsedColor;\n\n  const handleClick: HvButtonProps[\"onClick\"] = (e) => {\n    if (disabled) return;\n    onClickProp?.(e);\n  };\n\n  const handleMouseDown: HvButtonProps[\"onMouseDown\"] = (e) => {\n    if (disabled) return;\n    onMouseDownProp?.(e);\n  };\n\n  const sizeStyles = useMemo(\n    () => size && (icon ? getIconSizeStyles(size) : getSizeStyles(size)),\n    [size, icon],\n  );\n\n  return (\n    <Component\n      ref={ref}\n      style={mergeStyles(style, {\n        \"--color\": color && getColor(color),\n        \"--radius\": radius && theme.radii[radius],\n        \"--HvButton-height\": sizeStyles?.height ?? \"32px\",\n      })}\n      className={cx(\n        classes.root,\n        classes[variant],\n        classes[variantProp as keyof HvButtonClasses], // Placed after type and color CSS for DS3 override\n        overrideIconColors && css(getOverrideColors()),\n        {\n          [classes.icon]: icon,\n          [classes.disabled]: disabled,\n        },\n        sizeStyles && css(sizeStyles),\n        className,\n      )}\n      data-color={color}\n      onClick={handleClick}\n      onMouseDown={handleMouseDown}\n      {...(Component === \"button\" && { type: \"button\" })}\n      {...(disabled && {\n        disabled: !focusableWhenDisabled,\n        tabIndex: focusableWhenDisabled ? 0 : -1,\n        \"aria-disabled\": true,\n      })}\n      {...(selected && { \"aria-pressed\": selected })}\n      {...others}\n    >\n      {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n      {children}\n      {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n    </Component>\n  );\n});\n"],"names":["HvButton"],"mappings":";;;;;;;AAuEA,SAAS,aAAa,SAAiD;AAcrE,MAAI,YAAY,WAAmB,QAAA,CAAC,WAAW,OAAO;AACtD,MAAI,YAAY,YAAoB,QAAA,CAAC,aAAa,QAAQ;AAC1D,MAAI,YAAY,QAAgB,QAAA,CAAC,WAAW,OAAO;AAC/C,MAAA,YAAY,eAAe,YAAY,UAAU;AAC5C,WAAA,CAAC,aAAa,OAAO;AAAA,EAC9B;AAEM,QAAA,SAAS,QAAQ,MAAM,WAAW;AACpC,MAAA,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,WAAW;AAE9C,SAAO,OAAO,IAAI,CAAC,MAAM,EAAE,aAAa;AAC1C;AAIO,MAAM,WAAW,gBAAgB,SAASA,UAE/C,OAAyB,KAAwB;AAC3C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,OAAO;AAAA,IACP,SAAS,cAAc,OAAO,mBAAmB;AAAA,IACjD,OAAO;AAAA,IACP,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,WAAW,YAAY;AAAA,IACvB;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AACnD,QAAM,CAAC,aAAa,OAAO,IAAI,aAAa,WAAW;AACvD,QAAM,QAAQ,aAAa;AAErB,QAAA,cAAwC,CAAC,MAAM;AACnD,QAAI,SAAU;AACd,kBAAc,CAAC;AAAA,EAAA;AAGX,QAAA,kBAAgD,CAAC,MAAM;AAC3D,QAAI,SAAU;AACd,sBAAkB,CAAC;AAAA,EAAA;AAGrB,QAAM,aAAa;AAAA,IACjB,MAAM,SAAS,OAAO,kBAAkB,IAAI,IAAI,cAAc,IAAI;AAAA,IAClE,CAAC,MAAM,IAAI;AAAA,EAAA;AAIX,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAO,YAAY,OAAO;AAAA,QACxB,WAAW,SAAS,SAAS,KAAK;AAAA,QAClC,YAAY,UAAU,MAAM,MAAM,MAAM;AAAA,QACxC,qBAAqB,YAAY,UAAU;AAAA,MAAA,CAC5C;AAAA,MACD,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,OAAO;AAAA,QACf,QAAQ,WAAoC;AAAA;AAAA,QAC5C,sBAAsB,IAAI,mBAAmB;AAAA,QAC7C;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA,cAAc,IAAI,UAAU;AAAA,QAC5B;AAAA,MACF;AAAA,MACA,cAAY;AAAA,MACZ,SAAS;AAAA,MACT,aAAa;AAAA,MACZ,GAAI,cAAc,YAAY,EAAE,MAAM,SAAS;AAAA,MAC/C,GAAI,YAAY;AAAA,QACf,UAAU,CAAC;AAAA,QACX,UAAU,wBAAwB,IAAI;AAAA,QACtC,iBAAiB;AAAA,MACnB;AAAA,MACC,GAAI,YAAY,EAAE,gBAAgB,SAAS;AAAA,MAC3C,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,aAAc,oBAAA,QAAA,EAAK,WAAW,QAAQ,WAAY,UAAU,WAAA;AAAA,QAC5D;AAAA,QACA,WAAY,oBAAA,QAAA,EAAK,WAAW,QAAQ,SAAU,UAAQ,SAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7D,CAAC;"}

package/dist/esm/Button/Button.styles.js

@@ -2,6 +2,9 @@ import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../utils/focusUtils.js";
 const { staticClasses, useClasses } = createClasses("HvButton", {
+  /**
+   * Classes applied to the root element
+   */
   root: {
     display: "inline-flex",
     alignItems: "center",
@@ -10,19 +13,22 @@ const { staticClasses, useClasses } = createClasses("HvButton", {
     cursor: "pointer",
     whiteSpace: "nowrap",
     // Background color common for almost all variants
-    "&:hover": {
-      backgroundColor: theme.colors.containerBackgroundHover
+    ":where(:not($disabled))": {
+      ":hover, :focus-visible": {
+        backgroundColor: theme.colors.containerBackgroundHover
+      }
     },
-    "&:focus-visible": {
-      ...outlineStyles,
-      backgroundColor: theme.colors.containerBackgroundHover
+    ":focus-visible": {
+      ...outlineStyles
     },
     // Default button - no size specified
     fontFamily: theme.fontFamily.body,
     ...theme.typography.label,
+    color: "var(--color, currentcolor)",
+    backgroundColor: "transparent",
     height: "var(--HvButton-height)",
-    border: "1px solid currentcolor",
-    borderRadius: theme.radii.base,
+    border: "1px solid transparent",
+    borderRadius: `var(--radius, ${theme.radii.base})`,
     padding: theme.spacing(0, "sm")
   },
   startIcon: {
@@ -35,11 +41,11 @@ const { staticClasses, useClasses } = createClasses("HvButton", {
   disabled: {
     cursor: "not-allowed",
     color: theme.colors.secondary_60,
-    borderColor: theme.colors.atmo3,
-    backgroundColor: theme.colors.atmo3,
-    "&:hover, &:focus-visible": {
-      backgroundColor: theme.colors.atmo3,
-      borderColor: theme.colors.atmo3
+    backgroundColor: "transparent",
+    borderColor: "transparent",
+    ":hover, :focus-visible": {
+      backgroundColor: "transparent",
+      borderColor: "transparent"
     }
   },
   icon: {
@@ -50,27 +56,23 @@ const { staticClasses, useClasses } = createClasses("HvButton", {
       margin: -1
     }
   },
-  subtle: {
-    backgroundColor: "transparent",
-    "&$disabled": {
-      backgroundColor: "transparent",
-      "&:hover, &:focus-visible": {
-        backgroundColor: "transparent"
+  contained: {
+    color: theme.colors.atmo1,
+    // `color-contrast(var(--color) vs ${colors.atmo1}, ${colors.base_light}, ${colors.base_dark})`,
+    backgroundColor: "var(--color)",
+    ":where(:not($disabled))": {
+      ":hover, :focus-visible": {
+        backgroundColor: "color-mix(in srgb, var(--color), black 20%)"
+      },
+      ":active": {
+        backgroundColor: "color-mix(in srgb, var(--color), black 30%)"
       }
     }
   },
-  ghost: {
-    borderColor: "transparent",
-    backgroundColor: "transparent",
-    "&$disabled": {
-      borderColor: "transparent",
-      backgroundColor: "transparent",
-      "&:hover, &:focus-visible": {
-        borderColor: "transparent",
-        backgroundColor: "transparent"
-      }
-    }
+  subtle: {
+    borderColor: "currentcolor"
   },
+  ghost: {},
   semantic: {
     color: theme.colors.base_dark,
     backgroundColor: "transparent",
@@ -91,40 +93,19 @@ const { staticClasses, useClasses } = createClasses("HvButton", {
   // Deprecated (DS3)
   secondary: {}
 });
-const getColoringStyle = (color, type) => {
-  if (type)
-    return {
-      color: theme.colors[color !== "warning" ? color : `${color}_140`]
-    };
-  const bg = theme.colors[color !== "warning" ? color : `${color}_120`];
-  const hoverBg = theme.colors[color !== "warning" ? `${color}_80` : `${color}_140`];
-  return {
-    color: theme.colors.atmo1,
-    backgroundColor: bg,
-    borderColor: bg,
-    "&:hover, &:focus-visible": {
-      backgroundColor: hoverBg,
-      borderColor: hoverBg
-    }
-  };
-};
-const getRadiusStyles = (radius) => ({
-  borderRadius: theme.radii[radius]
-});
 const sizes = {
-  xs: { height: "24px", space: "sm", typography: "captionLabel" },
-  sm: { height: "24px", space: "sm", typography: "captionLabel" },
-  md: { height: "32px", space: "sm", typography: "label" },
-  lg: { height: "48px", space: "md", typography: "label" },
-  xl: { height: "48px", space: "md", typography: "label" }
+  xs: { height: "24px", fontSize: "sm" },
+  sm: { height: "24px", fontSize: "sm" },
+  md: { height: "32px" },
+  lg: { height: "48px", space: "md" },
+  xl: { height: "48px", space: "md" }
 };
 const getSizeStyles = (size) => {
-  const { height, space, typography } = sizes[size];
-  const { color, ...typoProps } = theme.typography[typography];
+  const { height, space = "sm", fontSize } = sizes[size];
   return {
     height,
     padding: theme.spacing(0, space),
-    ...typoProps
+    fontSize: fontSize && theme.fontSizes[fontSize]
   };
 };
 const getIconSizeStyles = (size) => {
@@ -140,10 +121,8 @@ const getOverrideColors = () => ({
   }
 });
 export {
-  getColoringStyle,
   getIconSizeStyles,
   getOverrideColors,
-  getRadiusStyles,
   getSizeStyles,
   staticClasses,
   useClasses