@hitachivantara/uikit-react-core 5.88.0 → 5.90.0

package/dist/cjs/BaseInput/BaseInput.styles.cjs

@@ -7,8 +7,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseInput
   root: {
     // #region `input` style reset
     "input:-webkit-autofill": {
-      WebkitBoxShadow: `0 0 0px 1000px ${uikitStyles.theme.colors.atmo1} inset`,
-      WebkitTextFillColor: uikitStyles.theme.colors.secondary
+      WebkitBoxShadow: `0 0 0px 1000px ${uikitStyles.theme.colors.textDimmed} inset`,
+      WebkitTextFillColor: uikitStyles.theme.colors.text
     },
     // Clears number input up/down arrows in Chrome and Firefox
     "input[type=number]": {
@@ -34,9 +34,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseInput
     borderRadius: uikitStyles.theme.radii.base,
     height: "32px",
     borderWidth: 1,
-    borderColor: uikitStyles.theme.colors.secondary,
+    borderColor: uikitStyles.theme.colors.text,
     boxSizing: "border-box",
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     fontFamily: uikitStyles.theme.fontFamily.body,
     ":hover:not($disabled,$invalid,$readOnly)": {
       borderColor: uikitStyles.theme.colors.primary
@@ -46,15 +46,15 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseInput
     }
   },
   disabled: {
-    backgroundColor: uikitStyles.theme.colors.atmo2,
-    borderColor: uikitStyles.theme.colors.secondary_60,
+    backgroundColor: uikitStyles.theme.colors.bgPage,
+    borderColor: uikitStyles.theme.colors.textDisabled,
     cursor: "not-allowed",
     "&&::before": {
       borderBottomStyle: "none"
     }
   },
   invalid: {
-    borderColor: uikitStyles.theme.colors.negative_120
+    borderColor: uikitStyles.theme.form.errorColor
   },
   multiline: {
     padding: 0,
@@ -71,19 +71,16 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseInput
   },
   resizable: { width: "auto" },
   readOnly: {
-    borderColor: uikitStyles.theme.colors.secondary_60,
-    backgroundColor: uikitStyles.theme.colors.atmo2
+    borderColor: uikitStyles.theme.colors.textDisabled,
+    backgroundColor: uikitStyles.theme.colors.bgPage
   },
   focused: {},
   /** @deprecated unused. use `::after` instead */
   inputBorderContainer: {},
   /** @deprecated use `classes.invalid` instead */
-  inputRootInvalid: { borderColor: uikitStyles.theme.colors.negative_120 },
+  inputRootInvalid: {},
   /** @deprecated use `classes.readOnly` instead */
-  inputRootReadOnly: {
-    borderColor: uikitStyles.theme.colors.secondary_60,
-    backgroundColor: uikitStyles.theme.colors.atmo2
-  },
+  inputRootReadOnly: {},
   /** @deprecated use `classes.root` instead */
   inputRoot: {},
   /** @deprecated unused */
@@ -106,15 +103,15 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseInput
     ...uikitStyles.theme.typography.body,
     "&::placeholder": {
       opacity: 1,
-      color: uikitStyles.theme.colors.secondary_80
+      color: uikitStyles.theme.colors.textSubtle
     }
   },
   inputDisabled: {
-    color: uikitStyles.theme.colors.secondary_60,
-    WebkitTextFillColor: uikitStyles.theme.colors.secondary_60
+    color: uikitStyles.theme.colors.textDisabled,
+    WebkitTextFillColor: uikitStyles.theme.colors.textDisabled
   },
   inputReadOnly: {
-    color: uikitStyles.theme.colors.secondary_80
+    color: uikitStyles.theme.colors.textSubtle
   },
   inputResizable: {
     resize: "both",

package/dist/cjs/BaseRadio/BaseRadio.styles.cjs

@@ -11,16 +11,16 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseRadio
     height: 32,
     cursor: "pointer",
     "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
+      backgroundColor: uikitStyles.theme.colors.bgHover,
       borderRadius: uikitStyles.theme.radii.base
     },
     "& svg": {
       width: 16,
       height: 16,
-      borderRadius: uikitStyles.theme.radii.circle,
+      borderRadius: uikitStyles.theme.radii.full,
       borderWidth: 1,
-      borderColor: uikitStyles.theme.colors.secondary,
-      backgroundColor: uikitStyles.theme.colors.atmo1
+      borderColor: uikitStyles.theme.colors.text,
+      backgroundColor: uikitStyles.theme.colors.bgContainer
     },
     borderRadius: 0
   },
@@ -28,8 +28,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseRadio
     cursor: "not-allowed",
     pointerEvents: "initial",
     "& svg": {
-      borderColor: uikitStyles.theme.colors.secondary_60,
-      backgroundColor: uikitStyles.theme.colors.atmo3
+      borderColor: uikitStyles.theme.colors.textDisabled,
+      backgroundColor: uikitStyles.theme.colors.bgDisabled
     }
   },
   focusVisible: {
@@ -41,29 +41,29 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseRadio
   icon: {},
   checked: {
     "& svg": {
-      borderColor: uikitStyles.theme.colors.secondary,
-      backgroundColor: uikitStyles.theme.colors.secondary,
-      color: uikitStyles.theme.colors.atmo2
+      borderColor: uikitStyles.theme.colors.text,
+      backgroundColor: uikitStyles.theme.colors.text,
+      color: uikitStyles.theme.colors.bgPage
     },
     "&$semantic": {
       "& svg": {
-        borderColor: uikitStyles.theme.colors.base_dark,
-        backgroundColor: uikitStyles.theme.colors.base_light,
-        color: uikitStyles.theme.colors.base_dark
+        borderColor: uikitStyles.theme.colors.textDark,
+        backgroundColor: uikitStyles.theme.colors.textLight,
+        color: uikitStyles.theme.colors.textDark
       }
     },
     "&$disabled": {
       "& svg": {
-        borderColor: uikitStyles.theme.colors.secondary_60,
-        backgroundColor: uikitStyles.theme.colors.secondary_60,
-        color: uikitStyles.theme.colors.atmo3
+        borderColor: uikitStyles.theme.colors.textDisabled,
+        backgroundColor: uikitStyles.theme.colors.textDisabled,
+        color: uikitStyles.theme.colors.bgDisabled
       }
     }
   },
   semantic: {
     "& svg": {
-      borderColor: uikitStyles.theme.colors.base_dark,
-      backgroundColor: uikitStyles.theme.colors.base_light
+      borderColor: uikitStyles.theme.colors.textDark,
+      backgroundColor: uikitStyles.theme.colors.textLight
     }
   }
 });

package/dist/cjs/BaseSwitch/BaseSwitch.styles.cjs

@@ -13,7 +13,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseSwitc
     justifyContent: "center",
     borderRadius: uikitStyles.theme.radii.base,
     "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+      backgroundColor: uikitStyles.theme.colors.bgHover
     },
     // Higher CSS specificity here
     "& $switchBase": {
@@ -24,7 +24,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseSwitc
         transform: "translateX(16px)",
         "& + $track": {
           opacity: 1,
-          backgroundColor: uikitStyles.theme.colors.secondary
+          backgroundColor: uikitStyles.theme.colors.text
         },
         "&:hover": {
           backgroundColor: "transparent"
@@ -36,8 +36,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseSwitc
       "& $switchBase": {
         "& + $track": {
           opacity: 1,
-          backgroundColor: uikitStyles.theme.colors.atmo3,
-          border: `solid 1px ${uikitStyles.theme.colors.secondary_60}`
+          backgroundColor: uikitStyles.theme.colors.bgDisabled,
+          border: `solid 1px ${uikitStyles.theme.colors.textDisabled}`
         }
       }
     }
@@ -60,16 +60,16 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseSwitc
     borderRadius: "15px",
     height: "16px",
     width: "32px",
-    border: `solid 1px ${uikitStyles.theme.colors.secondary}`,
-    backgroundColor: uikitStyles.theme.colors.atmo1
+    border: `solid 1px ${uikitStyles.theme.colors.text}`,
+    backgroundColor: uikitStyles.theme.colors.bgContainer
   },
   thumb: {
     position: "relative",
     left: "-9px",
     width: "12px",
     height: "12px",
-    border: `solid 1px ${uikitStyles.theme.colors.secondary}`,
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    border: `solid 1px ${uikitStyles.theme.colors.text}`,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     marginLeft: "2px",
     marginTop: 0,
     boxShadow: "none"
@@ -81,8 +81,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseSwitc
       cursor: "not-allowed"
     },
     "& $thumb": {
-      backgroundColor: uikitStyles.theme.colors.atmo3,
-      border: `solid 1px ${uikitStyles.theme.colors.secondary_60}`
+      backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
+      border: `solid 1px ${uikitStyles.theme.colors.textDisabled}`
     }
   },
   readOnly: {},

package/dist/cjs/BreadCrumb/Page/Page.styles.cjs

@@ -11,10 +11,10 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBreadCrum
     textTransform: "capitalize",
     "&:hover": {
       cursor: "pointer",
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+      backgroundColor: uikitStyles.theme.colors.bgHover
     },
     "&:focus": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+      backgroundColor: uikitStyles.theme.colors.bgHover
     },
     "&:focus-visible": {
       ...focusUtils.outlineStyles

package/dist/cjs/BreadCrumb/PathElement/PathElement.cjs

@@ -15,7 +15,7 @@ const HvPathElement = ({
       uikitReactIcons.DropRightXS,
       {
         className: classes.separatorContainer,
-        color: "secondary_60"
+        color: "textDisabled"
       }
     )
   ] });

package/dist/cjs/BreadCrumb/utils.cjs

@@ -19,7 +19,7 @@ const pathWithSubMenu = (id, listRoute, maxVisible, onClick, dropDownMenuProps)
       DropDownMenu.HvDropDownMenu,
       {
         id: setId.setId(id, "submenu"),
-        icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.MoreOptionsHorizontal, { iconSize: "S", color: "secondary" }),
+        icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.MoreOptionsHorizontal, { iconSize: "S", color: "text" }),
         dataList: subMenuList,
         ...dropDownMenuProps,
         onClick: onClick != null ? handleClick : void 0

package/dist/cjs/BulkActions/BulkActions.styles.cjs

@@ -8,20 +8,20 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBulkActio
   root: {
     display: "flex",
     alignItems: "center",
-    border: `1px solid ${uikitStyles.theme.colors.atmo4}`,
-    backgroundColor: uikitStyles.theme.colors.atmo2,
+    border: `1px solid ${uikitStyles.theme.colors.border}`,
+    backgroundColor: uikitStyles.theme.colors.bgPage,
     padding: uikitStyles.theme.spacing("xs", "md"),
     marginBottom: uikitStyles.theme.space.xs
   },
   semantic: {
-    backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
+    backgroundColor: uikitStyles.theme.colors.bgHover,
     "& $selectAll div": {
       "&:hover:not(:disabled)": {
-        backgroundColor: uikitStyles.theme.alpha("base_light", 0.3)
+        backgroundColor: uikitStyles.theme.alpha("textLight", 0.3)
       }
     },
     "& $selectAll:focus-within div": {
-      backgroundColor: uikitStyles.theme.alpha("base_light", 0.3)
+      backgroundColor: uikitStyles.theme.alpha("textLight", 0.3)
     }
   },
   actions: {
@@ -38,7 +38,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBulkActio
   selectAllPages: {},
   divider: {
     display: "flex",
-    backgroundColor: uikitStyles.theme.colors.atmo4,
+    backgroundColor: uikitStyles.theme.colors.border,
     width: "1px",
     height: "32px",
     marginLeft: uikitStyles.theme.space.sm

package/dist/cjs/Button/Button.cjs

@@ -30,7 +30,7 @@ const HvButton = generic.fixedForwardRef(function HvButton2(props, ref) {
     endIcon,
     size,
     radius,
-    overrideIconColors = true,
+    overrideIconColors,
     component: Component = "button",
     focusableWhenDisabled,
     onClick: onClickProp,
@@ -68,7 +68,6 @@ const HvButton = generic.fixedForwardRef(function HvButton2(props, ref) {
         classes[variant],
         classes[variantProp],
         // Placed after type and color CSS for DS3 override
-        overrideIconColors && css(Button_styles.getOverrideColors()),
         {
           [classes.icon]: icon,
           [classes.disabled]: disabled

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

@@ -15,7 +15,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton",
     // Background color common for almost all variants
     ":where(:not($disabled))": {
       ":hover, :focus-visible": {
-        backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+        backgroundColor: uikitStyles.theme.colors.bgHover
       }
     },
     ":focus-visible": {
@@ -47,7 +47,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton",
   /** applied to the root element when disabled */
   disabled: {
     cursor: "not-allowed",
-    color: uikitStyles.theme.colors.secondary_60,
+    color: uikitStyles.theme.colors.textDisabled,
     backgroundColor: "transparent",
     borderColor: "transparent",
     ":hover, :focus-visible": {
@@ -66,8 +66,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton",
   },
   /** applied to the root element when using the `contained` variant */
   contained: {
-    color: uikitStyles.theme.colors.atmo1,
-    // `color-contrast(var(--color) vs ${colors.atmo1}, ${colors.base_light}, ${colors.base_dark})`,
+    color: uikitStyles.theme.colors.textDimmed,
+    // `color-contrast(var(--color) vs ${colors.textDimmed}, ${colors.textLight}, ${colors.textDark})`,
     backgroundColor: "var(--color)",
     ":where(:not($disabled))": {
       ":hover, :focus-visible": {
@@ -86,17 +86,17 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton",
   ghost: {},
   /** applied to the root element when using the `semantic` variant */
   semantic: {
-    color: uikitStyles.theme.colors.base_dark,
+    color: uikitStyles.theme.colors.textDark,
     backgroundColor: "transparent",
     borderColor: "transparent",
     "&:hover, &:focus-visible": {
-      backgroundColor: uikitStyles.theme.alpha("base_light", 0.3)
+      backgroundColor: uikitStyles.theme.alpha("textLight", 0.3)
     },
     "&:active": {
-      backgroundColor: uikitStyles.theme.alpha("base_light", 0.5)
+      backgroundColor: uikitStyles.theme.alpha("textLight", 0.5)
     },
     "&$disabled": {
-      backgroundColor: uikitStyles.theme.alpha("base_light", 0.1)
+      backgroundColor: uikitStyles.theme.alpha("textLight", 0.1)
     }
   },
   // TODO - remove in v6
@@ -130,13 +130,7 @@ const getIconSizeStyles = (size) => {
     width: height
   };
 };
-const getOverrideColors = () => ({
-  "& svg .color0": {
-    fill: "currentcolor"
-  }
-});
 exports.getIconSizeStyles = getIconSizeStyles;
-exports.getOverrideColors = getOverrideColors;
 exports.getSizeStyles = getSizeStyles;
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/ButtonBase/ButtonBase.styles.cjs

@@ -12,7 +12,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButtonBas
     // Background color common for almost all variants
     ":where(:not($disabled))": {
       ":hover, :focus-visible": {
-        backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+        backgroundColor: uikitStyles.theme.colors.bgHover
       }
     },
     ":focus-visible": {
@@ -25,7 +25,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButtonBas
   },
   disabled: {
     cursor: "not-allowed",
-    color: uikitStyles.theme.colors.secondary_60,
+    color: uikitStyles.theme.colors.textDisabled,
     "&:hover, &:focus-visible": {
       backgroundColor: "transparent"
     }

package/dist/cjs/Calendar/Calendar.styles.cjs

@@ -18,7 +18,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCalendar"
           "& > div:nth-of-type(3)": {
             "& > div": {
               "& > div[data-calendar-cell='calendarCell']": {
-                backgroundColor: uikitStyles.theme.colors.atmo1
+                backgroundColor: uikitStyles.theme.colors.bgContainer
               }
             }
           }

package/dist/cjs/Calendar/CalendarHeader/CalendarHeader.styles.cjs

@@ -11,7 +11,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCalendarH
   },
   invalid: {},
   headerDayOfWeek: {
-    color: uikitStyles.theme.colors.secondary_80
+    color: uikitStyles.theme.colors.textSubtle
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Calendar/CalendarNavigation/MonthSelector/MonthSelector.styles.cjs

@@ -19,7 +19,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMonthSele
     width: "92px"
   },
   calendarMonthlyCellSelected: {
-    backgroundColor: uikitStyles.theme.colors.atmo3
+    backgroundColor: uikitStyles.theme.colors.bgPageSecondary
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Calendar/CalendarNavigation/Navigation/Navigation.styles.cjs

@@ -14,7 +14,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvNavigatio
   text: {
     minWidth: "unset",
     flex: 1,
-    color: uikitStyles.theme.colors.secondary,
+    color: uikitStyles.theme.colors.text,
     fontWeight: uikitStyles.theme.typography.body.fontWeight,
     padding: 0
   },

package/dist/cjs/Calendar/SingleCalendar/CalendarCell.styles.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const hover = {
-  backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
+  backgroundColor: uikitStyles.theme.colors.bgHover,
   cursor: "pointer"
 };
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCalendarCell", {
@@ -17,28 +17,28 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCalendarC
     width: "40px"
   },
   calendarDateSelected: {
-    backgroundColor: uikitStyles.theme.colors.atmo3,
-    color: uikitStyles.theme.colors.secondary,
+    backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
+    color: uikitStyles.theme.colors.text,
     "&:hover": {
       ...hover
     }
   },
   calendarDateNotInMonth: {
-    color: uikitStyles.theme.colors.secondary_60,
+    color: uikitStyles.theme.colors.textDisabled,
     cursor: "not-allowed"
   },
   calendarDateInSelectionRange: {
-    backgroundColor: uikitStyles.theme.colors.atmo3
+    backgroundColor: uikitStyles.theme.colors.bgPageSecondary
   },
   calendarDateDisabled: {
-    color: uikitStyles.theme.colors.secondary_60,
+    color: uikitStyles.theme.colors.textDisabled,
     cursor: "no-drop"
   },
   startBookend: {
-    borderLeft: `1px solid ${uikitStyles.theme.colors.secondary}`
+    borderLeft: `1px solid ${uikitStyles.theme.colors.text}`
   },
   endBookend: {
-    borderRight: `1px solid ${uikitStyles.theme.colors.secondary}`
+    borderRight: `1px solid ${uikitStyles.theme.colors.text}`
   },
   dateWrapper: {
     width: "40px",

package/dist/cjs/Calendar/SingleCalendar/SingleCalendar.styles.cjs

@@ -10,34 +10,34 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSingleCal
     display: "grid",
     gridTemplateColumns: "repeat(7, 1fr)",
     "& $cellsInRange": {
-      backgroundColor: uikitStyles.theme.colors.atmo3,
+      backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
       "& $startBookend": {
-        borderLeft: `1px solid ${uikitStyles.theme.colors.secondary}`,
-        backgroundColor: uikitStyles.theme.colors.atmo3,
+        borderLeft: `1px solid ${uikitStyles.theme.colors.text}`,
+        backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
         "&:hover": {
-          borderRight: `1px solid ${uikitStyles.theme.colors.secondary}`
+          borderRight: `1px solid ${uikitStyles.theme.colors.text}`
         }
       }
     },
     "&:hover $cellsInRange": {
-      backgroundColor: uikitStyles.theme.colors.atmo3,
+      backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
       "& $startBookend": {
-        borderLeft: `1px solid ${uikitStyles.theme.colors.secondary}`,
+        borderLeft: `1px solid ${uikitStyles.theme.colors.text}`,
         borderRight: "inherit"
       }
     },
     "& $cellsInRange:hover": {
-      backgroundColor: uikitStyles.theme.colors.atmo3,
+      backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
       "& $calendarDate": {
-        borderRight: `1px solid ${uikitStyles.theme.colors.secondary}`
+        borderRight: `1px solid ${uikitStyles.theme.colors.text}`
       }
     },
     "& $cellsInRange:hover ~ $cellsInRange": {
-      backgroundColor: uikitStyles.theme.colors.atmo1
+      backgroundColor: uikitStyles.theme.colors.bgContainer
       // controls the right side of the hovered range
     },
     "& $cellsOutsideRange:hover ~ $cellsInRange": {
-      backgroundColor: uikitStyles.theme.colors.atmo1
+      backgroundColor: uikitStyles.theme.colors.bgContainer
       // control the right side when hovering outside of the range
     }
   },
@@ -60,7 +60,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSingleCal
   startBookend: {},
   endBookend: {},
   cellsInRange: {
-    backgroundColor: uikitStyles.theme.colors.atmo3
+    backgroundColor: uikitStyles.theme.colors.bgPageSecondary
   },
   cellsOutsideRange: {},
   cellContainer: {}

package/dist/cjs/Card/Card.cjs

@@ -19,7 +19,7 @@ const HvCard = React.forwardRef(function HvCard2(props, ref) {
     ...others
   } = uikitReactUtils.useDefaultProps("HvCard", props);
   const { classes, cx } = Card_styles.useClasses(classesProp);
-  const barColor = statusColor !== "sema0" && statusColor || selected && "secondary" || "atmo4";
+  const barColor = statusColor !== "sema0" && statusColor || selected && "text" || "border";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {

package/dist/cjs/Card/Card.styles.cjs

@@ -7,7 +7,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCard", {
   root: {
     overflow: "visible",
     position: "relative",
-    outline: `1px solid ${uikitStyles.theme.colors.atmo4}`,
+    outline: `1px solid ${uikitStyles.theme.colors.border}`,
     borderRadius: `0px 0px ${uikitStyles.theme.radii.round} ${uikitStyles.theme.radii.round}`,
     backgroundColor: "var(--bg-color)",
     "&:focus-visible": {
@@ -18,12 +18,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCard", {
     }
   },
   selected: {
-    outline: `1px solid ${uikitStyles.theme.colors.secondary}`,
-    "&:hover": {
-      outline: `1px solid ${uikitStyles.theme.colors.secondary}`
-    },
-    "&:focus": {
-      outline: `1px solid ${uikitStyles.theme.colors.secondary}`
+    "&,&:hover,&:focus": {
+      outline: `1px solid ${uikitStyles.theme.colors.text}`
     }
   },
   selectable: {

package/dist/cjs/Carousel/Carousel.styles.cjs

@@ -8,7 +8,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCarousel"
     display: "flex",
     alignItems: "stretch",
     flexDirection: "column",
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     margin: 0,
     paddingTop: uikitStyles.theme.spacing(2),
     paddingBottom: uikitStyles.theme.spacing(2)
@@ -58,8 +58,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCarousel"
     position: "relative",
     height: 32,
     justifyContent: "center",
-    backgroundColor: uikitStyles.theme.colors.atmo2,
-    border: `1px solid ${uikitStyles.theme.colors.atmo4}`,
+    backgroundColor: uikitStyles.theme.colors.bgPage,
+    border: `1px solid ${uikitStyles.theme.colors.border}`,
     gap: uikitStyles.theme.space.xs,
     "&:has($dots)": {
       justifyContent: "center"
@@ -87,8 +87,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCarousel"
     display: "none"
   },
   counter: {
-    color: uikitStyles.theme.colors.base_light,
-    backgroundColor: uikitStyles.theme.colors.base_dark,
+    color: uikitStyles.theme.colors.textLight,
+    backgroundColor: uikitStyles.theme.colors.textDark,
     padding: uikitStyles.theme.spacing(0, "sm")
   },
   slideControls: {
@@ -129,13 +129,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCarousel"
     width: 5,
     height: 5,
     margin: uikitStyles.theme.space.xs,
-    borderRadius: "50%",
-    backgroundColor: uikitStyles.theme.colors.atmo4
+    borderRadius: uikitStyles.theme.radii.full,
+    backgroundColor: uikitStyles.theme.colors.border
   },
   dotSelected: {
     width: 10,
     height: 10,
-    backgroundColor: uikitStyles.theme.colors.secondary_80
+    backgroundColor: uikitStyles.theme.colors.textSubtle
   },
   panel: {
     display: "flex",

package/dist/cjs/CheckBox/CheckBox.styles.cjs

@@ -11,18 +11,18 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCheckBox"
     height: "32px",
     transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
     "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
+      backgroundColor: uikitStyles.theme.colors.bgHover,
       borderRadius: uikitStyles.theme.radii.base
     }
   },
   disabled: {
     cursor: "not-allowed",
-    "& $label": { color: uikitStyles.theme.colors.secondary_60, cursor: "not-allowed" }
+    "& $label": { color: uikitStyles.theme.colors.textDisabled, cursor: "not-allowed" }
   },
   focusVisible: {
     ...focusUtils.outlineStyles,
     "& div": {
-      backgroundColor: uikitStyles.theme.colors.atmo3
+      backgroundColor: uikitStyles.theme.colors.bgPageSecondary
     },
     [`& $checkbox div > svg`]: {
       outline: "none",
@@ -30,7 +30,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCheckBox"
     }
   },
   invalidContainer: {
-    borderBottom: `1px solid ${uikitStyles.theme.colors.negative_120}`,
+    borderBottom: `1px solid ${uikitStyles.theme.form.errorColor}`,
     "&:hover": {
       borderBottomLeftRadius: "0px",
       borderBottomRightRadius: "0px"
@@ -38,7 +38,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCheckBox"
   },
   checkbox: { height: "32px" },
   invalidCheckbox: {
-    borderBottom: `1px solid ${uikitStyles.theme.colors.negative_120}`,
+    borderBottom: `1px solid ${uikitStyles.theme.form.errorColor}`,
     borderBottomLeftRadius: "0px",
     borderBottomRightRadius: "0px"
   },