@hitachivantara/uikit-react-core 5.88.0 → 5.90.0

package/dist/cjs/ListContainer/ListItem/ListItem.styles.cjs

@@ -24,11 +24,11 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvListItem"
     },
     "&.HvIsFocused": {
       ...focusUtils.outlineStyles,
-      backgroundColor: uikitStyles.theme.colors.atmo3,
+      backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
       zIndex: 2
     }
   },
-  focus: { backgroundColor: uikitStyles.theme.colors.atmo3, zIndex: 2 },
+  focus: { backgroundColor: uikitStyles.theme.colors.bgPageSecondary, zIndex: 2 },
   startAdornment: {},
   endAdornment: {},
   gutters: {
@@ -44,16 +44,16 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvListItem"
   interactive: {
     cursor: "pointer",
     "&:not($disabled):not($selected):hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+      backgroundColor: uikitStyles.theme.colors.bgHover
     },
     "&$disabled": {
       cursor: "not-allowed"
     }
   },
-  selected: { backgroundColor: uikitStyles.theme.colors.containerBackgroundHover },
+  selected: { backgroundColor: uikitStyles.theme.colors.bgHover },
   disabled: {
-    color: uikitStyles.theme.colors.secondary_60,
-    backgroundColor: uikitStyles.theme.colors.atmo3
+    color: uikitStyles.theme.colors.textDisabled,
+    backgroundColor: uikitStyles.theme.colors.bgDisabled
   },
   withStartAdornment: {
     "& > div": {
@@ -62,9 +62,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvListItem"
     "& svg": {
       boxShadow: "none !important",
       outline: "none !important"
-    },
-    "$disabled > svg *.color0": {
-      fill: uikitStyles.theme.colors.secondary_60
     }
   },
   withEndAdornment: {
@@ -72,9 +69,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvListItem"
     "& svg": {
       boxShadow: "none !important",
       outline: "none !important"
-    },
-    "$disabled > svg *.color0": {
-      fill: uikitStyles.theme.colors.secondary_60
     }
   }
 });

package/dist/cjs/Loading/Loading.cjs

@@ -6,7 +6,6 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const helpers = require("../utils/helpers.cjs");
 const Loading_styles = require("./Loading.styles.cjs");
-const Typography = require("../Typography/Typography.cjs");
 const HvLoading = React.forwardRef(function HvLoading2(props, ref) {
   const {
     color,
@@ -27,7 +26,7 @@ const HvLoading = React.forwardRef(function HvLoading2(props, ref) {
       ref,
       hidden: !!hidden,
       style: uikitReactUtils.mergeStyles(style, {
-        color: uikitStyles.getColor(color, small ? "secondary" : "brand"),
+        color: uikitStyles.getColor(color, small ? "text" : "brand"),
         "--customColor": uikitStyles.getColor(color)
       }),
       className: cx(
@@ -51,7 +50,7 @@ const HvLoading = React.forwardRef(function HvLoading2(props, ref) {
           },
           e
         )) }),
-        label && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "caption1", className: classes.label, children: label })
+        label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.label, children: label })
       ]
     }
   );

package/dist/cjs/Loading/Loading.styles.cjs

@@ -34,13 +34,15 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvLoading",
     "@keyframes loading": {
       "50%": {
         height: "var(--height, 60%)",
-        backgroundColor: `var(--customColor, ${uikitStyles.theme.colors.secondary})`
+        backgroundColor: `var(--customColor, ${uikitStyles.theme.colors.text})`
       }
     },
     ":nth-of-type(2)": { animationDelay: "0.22s" },
     ":nth-of-type(3)": { animationDelay: "0.44s" }
   },
-  label: {},
+  label: {
+    ...uikitStyles.theme.typography.caption1
+  },
   overlay: {},
   blur: {},
   hidden: { display: "none" },

package/dist/cjs/LoadingContainer/LoadingContainer.styles.cjs

@@ -13,7 +13,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvLoadingCo
     inset: 0,
     zIndex: uikitStyles.theme.zIndices.overlay,
     transition: "background-color .2s ease",
-    backgroundColor: uikitStyles.theme.alpha("atmo1", "var(--opacity, 80%)")
+    backgroundColor: uikitStyles.theme.alpha("bgContainer", "var(--opacity, 80%)")
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Login/Login.styles.cjs

@@ -13,7 +13,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvLogin", {
     margin: "-1px 0 0 0"
   },
   formContainer: {
-    background: uikitStyles.theme.colors.atmo2,
+    background: uikitStyles.theme.colors.bgPage,
     marginLeft: "auto",
     maxWidth: 500,
     height: "100%"

package/dist/cjs/MultiButton/MultiButton.styles.cjs

@@ -11,9 +11,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButt
     position: "relative"
   },
   multiple: {
-    backgroundColor: uikitStyles.theme.colors.atmo2,
+    backgroundColor: uikitStyles.theme.colors.bgPage,
     borderWidth: 0,
-    borderColor: `${uikitStyles.theme.colors.atmo4} transparent`,
+    borderColor: `${uikitStyles.theme.colors.border} transparent`,
     borderRadius: uikitStyles.theme.radii.base,
     "& $button": {
       minWidth: 32,
@@ -25,43 +25,43 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButt
       borderRadius: 0,
       fontWeight: uikitStyles.theme.typography.body.fontWeight,
       "&:disabled": {
-        color: uikitStyles.theme.colors.secondary_60,
+        color: uikitStyles.theme.colors.textDisabled,
         borderColor: "inherit"
       },
       "&:hover": {
         borderColor: "inherit"
       },
       "&$firstButton": {
-        borderLeftColor: uikitStyles.theme.colors.atmo4,
+        borderLeftColor: uikitStyles.theme.colors.border,
         borderTopLeftRadius: "inherit",
         borderBottomLeftRadius: "inherit",
         "&:disabled": {
-          borderLeftColor: uikitStyles.theme.colors.atmo4
+          borderLeftColor: uikitStyles.theme.colors.border
         }
       },
       "&$lastButton": {
-        borderRightColor: uikitStyles.theme.colors.atmo4,
+        borderRightColor: uikitStyles.theme.colors.border,
         borderTopRightRadius: "inherit",
         borderBottomRightRadius: "inherit",
         "&:disabled": {
-          borderRightColor: uikitStyles.theme.colors.atmo4
+          borderRightColor: uikitStyles.theme.colors.border
         }
       },
       "&:not($firstButton)": {
         marginLeft: "-1px"
       },
       "&$selected": {
-        backgroundColor: uikitStyles.theme.colors.atmo1,
+        backgroundColor: uikitStyles.theme.colors.bgContainer,
         fontWeight: uikitStyles.theme.typography.label.fontWeight,
         borderRadius: "inherit",
-        borderColor: uikitStyles.theme.colors.secondary,
+        borderColor: uikitStyles.theme.colors.text,
         zIndex: 2,
         "&:hover:not(:disabled),&:focus-visible": {
-          backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+          backgroundColor: uikitStyles.theme.colors.bgHover
         },
         "&:disabled": {
           zIndex: 1,
-          borderColor: uikitStyles.theme.colors.atmo4
+          borderColor: uikitStyles.theme.colors.border
         }
       }
     }
@@ -104,17 +104,17 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButt
   vertical: {
     flexDirection: "column",
     height: "auto",
-    borderColor: `transparent ${uikitStyles.theme.colors.atmo4}`,
+    borderColor: `transparent ${uikitStyles.theme.colors.border}`,
     "& $button": {
       minWidth: 32,
       width: "100%",
       "&$firstButton": {
-        borderTopColor: uikitStyles.theme.colors.atmo4,
+        borderTopColor: uikitStyles.theme.colors.border,
         borderTopLeftRadius: "inherit",
         borderTopRightRadius: "inherit"
       },
       "&$lastButton": {
-        borderBottomColor: uikitStyles.theme.colors.atmo4,
+        borderBottomColor: uikitStyles.theme.colors.border,
         borderBottomLeftRadius: "inherit",
         borderBottomRightRadius: "inherit"
       },
@@ -125,7 +125,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButt
       "&$selected": {
         height: 32,
         width: "calc(100% + 2px)",
-        borderColor: uikitStyles.theme.colors.secondary
+        borderColor: uikitStyles.theme.colors.text
       }
     }
   },

package/dist/cjs/Pagination/Pagination.styles.cjs

@@ -6,7 +6,7 @@ const Input_styles = require("../Input/Input.styles.cjs");
 require("../Input/Input.cjs");
 const BaseDropdown_styles = require("../BaseDropdown/BaseDropdown.styles.cjs");
 require("../BaseDropdown/BaseDropdown.cjs");
-const hoverColor = uikitStyles.theme.colors.atmo3;
+const hoverColor = uikitStyles.theme.colors.bgHover;
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvPagination", {
   /** Styles applied to the component root class. */
   root: {

package/dist/cjs/Pagination/Select.styles.cjs

@@ -6,16 +6,16 @@ const { useClasses } = uikitReactUtils.createClasses("HvPaginationSelect", {
   root: {},
   header: {
     backgroundColor: "transparent",
-    borderColor: uikitStyles.theme.colors.secondary_80,
+    borderColor: uikitStyles.theme.colors.textSubtle,
     "&:hover": {
-      borderColor: uikitStyles.theme.colors.secondary_80
+      borderColor: uikitStyles.theme.colors.textSubtle
     }
   },
   selection: {
     padding: uikitStyles.theme.spacing(0, "md", 0, "xs")
   },
   headerOpen: {
-    backgroundColor: uikitStyles.theme.colors.atmo1
+    backgroundColor: uikitStyles.theme.colors.bgContainer
   }
 });
 exports.useClasses = useClasses;

package/dist/cjs/Panel/Panel.styles.cjs

@@ -6,8 +6,8 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvPanel", {
   root: {
     position: "relative",
     padding: uikitStyles.theme.space.sm,
-    borderColor: uikitStyles.theme.colors.atmo4,
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    borderColor: uikitStyles.theme.colors.border,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     overflow: "auto",
     borderRadius: "inherit"
   }

package/dist/cjs/ProgressBar/ProgressBar.styles.cjs

@@ -15,7 +15,7 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvProgressB
     width: "100%"
   },
   progressBar: {
-    backgroundColor: uikitStyles.theme.colors.secondary
+    backgroundColor: uikitStyles.theme.colors.text
   },
   progressBarLabel: {
     backgroundColor: "transparent",
@@ -32,7 +32,7 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvProgressB
     display: "flex",
     width: "100%",
     height: 4,
-    backgroundColor: uikitStyles.theme.colors.atmo4
+    backgroundColor: uikitStyles.theme.colors.border
   },
   progressError: {
     backgroundColor: uikitStyles.theme.colors.negative

package/dist/cjs/QueryBuilder/QueryBuilder.styles.cjs

@@ -9,7 +9,7 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvQueryBuil
     padding: uikitStyles.theme.space.sm,
     marginTop: 12,
     marginBottom: 32,
-    border: `1px solid ${uikitStyles.theme.colors.atmo4}`
+    border: `1px solid ${uikitStyles.theme.colors.border}`
   },
   /** Styles applied to the top group container. */
   topGroup: {
@@ -29,8 +29,8 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvQueryBuil
       zIndex: 2,
       width: 21,
       height: 36,
-      borderBottom: `1px solid ${uikitStyles.theme.colors.atmo4}`,
-      borderLeft: `1px solid ${uikitStyles.theme.colors.atmo4}`,
+      borderBottom: `1px solid ${uikitStyles.theme.colors.border}`,
+      borderLeft: `1px solid ${uikitStyles.theme.colors.border}`,
       top: -38,
       left: -38
     },
@@ -40,7 +40,7 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvQueryBuil
       zIndex: 1,
       width: 32,
       height: "100%",
-      borderLeft: `1px solid ${uikitStyles.theme.colors.atmo4}`,
+      borderLeft: `1px solid ${uikitStyles.theme.colors.border}`,
       top: 0,
       left: `calc(${uikitStyles.theme.space.sm} + 2)`
     }
@@ -60,12 +60,12 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvQueryBuil
   /** Styles applied to the remove button on the top group. */
   topRemoveButton: { position: "absolute", top: -16, right: -16 },
   /** Styles applied to the remove button when disabled on the top group. */
-  topRemoveButtonDisabled: { backgroundColor: uikitStyles.theme.colors.atmo2 },
+  topRemoveButtonDisabled: { backgroundColor: uikitStyles.theme.colors.bgPage },
   /** Styles applied to the rules container. */
   rulesContainer: {},
   /** Styles applied to the sub rules container. */
   subRulesContainer: {
-    borderLeft: `1px solid ${uikitStyles.theme.colors.atmo4}`,
+    borderLeft: `1px solid ${uikitStyles.theme.colors.border}`,
     marginLeft: uikitStyles.theme.space.sm,
     marginBottom: uikitStyles.theme.space.md,
     paddingLeft: uikitStyles.theme.space.sm,
@@ -91,7 +91,7 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvQueryBuil
   topRulesContainer: {},
   /** Styles applied to the background of buttons to remove transparency */
   buttonBackground: {
-    backgroundColor: uikitStyles.theme.colors.atmo2,
+    backgroundColor: uikitStyles.theme.colors.bgPage,
     display: "inline-flex"
   },
   createConditionButton: {

package/dist/cjs/QueryBuilder/Rule/Rule.styles.cjs

@@ -23,8 +23,8 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses(
         zIndex: 2,
         width: "17px",
         height: "39px",
-        borderBottom: `1px solid ${uikitStyles.theme.colors.atmo4}`,
-        borderLeft: `1px solid ${uikitStyles.theme.colors.atmo4}`,
+        borderBottom: `1px solid ${uikitStyles.theme.colors.border}`,
+        borderLeft: `1px solid ${uikitStyles.theme.colors.border}`,
         top: 0,
         left: `calc(-1 * 17px)`
       },
@@ -34,7 +34,7 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses(
         zIndex: 1,
         width: "17px",
         height: "100%",
-        borderLeft: `1px solid ${uikitStyles.theme.colors.atmo4}`,
+        borderLeft: `1px solid ${uikitStyles.theme.colors.border}`,
         top: 0,
         left: `calc(-1 * 17px)`
       }

package/dist/cjs/Radio/Radio.styles.cjs

@@ -12,13 +12,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvRadio", {
     transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
     borderRadius: uikitStyles.theme.radii.base,
     ":hover:not($disabled)": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+      backgroundColor: uikitStyles.theme.colors.bgHover
     }
   },
   invalidContainer: {},
   disabled: {
     cursor: "not-allowed",
-    "& $label": { color: uikitStyles.theme.colors.secondary_60, cursor: "not-allowed" }
+    "& $label": { color: uikitStyles.theme.colors.textDisabled, cursor: "not-allowed" }
   },
   radio: {
     "& svg": {
@@ -35,7 +35,10 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvRadio", {
     lineHeight: "32px",
     width: "100%"
   },
-  focusVisible: { backgroundColor: uikitStyles.theme.colors.atmo3, ...focusUtils.outlineStyles },
+  focusVisible: {
+    backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
+    ...focusUtils.outlineStyles
+  },
   checked: {},
   semantic: {}
 });

package/dist/cjs/RadioGroup/RadioGroup.styles.cjs

@@ -28,7 +28,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvRadioGrou
   },
   invalid: {
     paddingBottom: uikitStyles.theme.space.xs,
-    borderBottom: `1px solid ${uikitStyles.theme.colors.negative_120}`
+    borderBottom: `1px solid ${uikitStyles.theme.form.errorColor}`
   },
   error: {}
 });

package/dist/cjs/ScrollToHorizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.cjs

@@ -32,18 +32,18 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
     height: 24,
     width: 24,
     fontSize: 4,
-    color: uikitStyles.theme.colors.secondary_60,
+    color: uikitStyles.theme.colors.textDisabled,
     "& > span": {
       margin: "auto",
       width: "1em",
       height: "1em",
       backgroundColor: "currentcolor",
-      borderRadius: "50%"
+      borderRadius: uikitStyles.theme.radii.full
     }
   },
   bulletSelected: {
     fontSize: 6,
-    color: uikitStyles.theme.colors.secondary
+    color: uikitStyles.theme.colors.text
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/ScrollToHorizontal/ScrollToHorizontal.styles.cjs

@@ -11,7 +11,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
       listStyleType: "none",
       flexWrap: "wrap",
       backdropFilter: `blur(4px)`,
-      backgroundColor: uikitStyles.theme.alpha("atmo2", 0.9)
+      backgroundColor: uikitStyles.theme.alpha("bgPage", 0.9)
     },
     positionSticky: {
       position: "sticky",

package/dist/cjs/ScrollToVertical/ScrollToVertical.styles.cjs

@@ -14,7 +14,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
       flexWrap: "wrap",
       flexDirection: "column",
       backdropFilter: `blur(4px)`,
-      backgroundColor: uikitStyles.theme.alpha("atmo2", 0.9)
+      backgroundColor: uikitStyles.theme.alpha("bgPage", 0.9)
     },
     positionAbsolute: {
       width: "32px",

package/dist/cjs/ScrollToVertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs

@@ -16,15 +16,15 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
   icon: {
     width: "1em",
     height: "1em",
-    borderRadius: "50%",
+    borderRadius: uikitStyles.theme.radii.full,
     fontSize: 6,
-    color: uikitStyles.theme.colors.secondary,
+    color: uikitStyles.theme.colors.text,
     display: "inline-block",
     backgroundColor: "currentcolor"
   },
   notSelected: {
     fontSize: 4,
-    color: uikitStyles.theme.colors.secondary_60
+    color: uikitStyles.theme.colors.textDisabled
   },
   // TODO: remove in v6 (use classes.button)
   text: {},
@@ -34,13 +34,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(name, {
     alignItems: "center",
     height: "16px",
     width: "16px",
-    borderRadius: "50%",
+    borderRadius: uikitStyles.theme.radii.full,
     cursor: "pointer",
     "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
+      backgroundColor: uikitStyles.theme.colors.bgHover,
       "& $notSelected": {
         fontSize: 6,
-        color: uikitStyles.theme.colors.secondary
+        color: uikitStyles.theme.colors.text
       }
     },
     "&:focus": {

package/dist/cjs/Section/Section.styles.cjs

@@ -7,9 +7,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSection",
     width: "100%",
     display: "flex",
     flexDirection: "column",
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     borderRadius: uikitStyles.theme.radii.round,
-    border: `1px solid ${uikitStyles.theme.colors.atmo4}`
+    border: `1px solid ${uikitStyles.theme.colors.border}`
   },
   hidden: { height: 0, display: "none" },
   header: {
@@ -17,7 +17,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSection",
     alignItems: "center",
     borderColor: "inherit",
     position: "relative",
-    minHeight: uikitStyles.theme.sizes.sm,
     padding: uikitStyles.theme.space.sm
   },
   content: {

package/dist/cjs/Select/Select.styles.cjs

@@ -12,7 +12,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSelect",
   disabled: {},
   readOnly: {},
   invalid: {
-    borderColor: uikitStyles.theme.colors.negative_120
+    borderColor: uikitStyles.theme.form.errorColor
   },
   labelContainer: {
     display: "flex",
@@ -26,13 +26,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSelect",
   },
   panel: {
     maxHeight: 400,
-    border: `1px solid ${uikitStyles.theme.colors.secondary}`,
+    border: `1px solid ${uikitStyles.theme.colors.text}`,
     marginTop: -1,
     marginBottom: -1,
     // panel styles
     position: "relative",
     padding: uikitStyles.theme.space.xs,
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     overflowY: "auto",
     borderRadius: "inherit"
   },

package/dist/cjs/SelectionList/SelectionList.styles.cjs

@@ -32,7 +32,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSelection
       zIndex: 1
     }
   },
-  invalid: { borderBottom: `1px solid ${uikitStyles.theme.colors.negative_120}` }
+  invalid: { borderBottom: `1px solid ${uikitStyles.theme.form.errorColor}` }
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/Skeleton/Skeleton.styles.cjs

@@ -4,7 +4,7 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSkeleton", {
   root: {
-    backgroundColor: uikitStyles.theme.colors.atmo3,
+    backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
     width: "fit-content",
     "& > *": {
       visibility: "hidden"
@@ -20,7 +20,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSkeleton"
     }
   },
   circle: {
-    borderRadius: uikitStyles.theme.radii.circle
+    borderRadius: uikitStyles.theme.radii.full
   },
   square: {
     borderRadius: uikitStyles.theme.radii.base
@@ -46,7 +46,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSkeleton"
       background: `linear-gradient(
             90deg,
             transparent,
-            ${uikitStyles.theme.colors.atmo4},
+            ${uikitStyles.theme.colors.border},
             transparent
           )`,
       content: "''",

package/dist/cjs/Slider/Slider.styles.cjs

@@ -11,8 +11,7 @@ const dot = {
   width: "1px",
   height: "4px",
   border: "none",
-  borderRadius: "0%",
-  backgroundColor: uikitStyles.theme.colors.atmo4,
+  backgroundColor: uikitStyles.theme.colors.border,
   cursor: "pointer",
   verticalAlign: "middle",
   zIndex: "-3"
@@ -26,15 +25,15 @@ const dragSquare = {
   top: "-12px",
   content: "''",
   background: "transparent",
-  borderTop: `12px solid ${uikitStyles.theme.colors.primary_20}`,
-  borderBottom: `12px solid ${uikitStyles.theme.colors.primary_20}`,
+  borderTop: `12px solid ${uikitStyles.theme.colors.primaryDimmed}`,
+  borderBottom: `12px solid ${uikitStyles.theme.colors.primaryDimmed}`,
   zIndex: "-2"
 };
 const ring = {
   width: "32px",
   height: "32px",
-  borderRadius: "50%",
-  border: `9px solid ${uikitStyles.theme.colors.primary_20}`,
+  borderRadius: uikitStyles.theme.radii.circle,
+  border: `9px solid ${uikitStyles.theme.colors.primaryDimmed}`,
   opacity: "100%",
   content: "''",
   position: "absolute",
@@ -44,8 +43,8 @@ const ring = {
 const border = {
   width: "20px",
   height: "20px",
-  borderRadius: "50%",
-  border: `2px solid ${uikitStyles.theme.colors.atmo1}`,
+  borderRadius: uikitStyles.theme.radii.circle,
+  border: `2px solid ${uikitStyles.theme.colors.textDimmed}`,
   content: "''",
   position: "absolute",
   top: "-4px",
@@ -61,7 +60,7 @@ const sliderStyles = {
   disabledMark: {
     ...uikitStyles.theme.typography.caption1,
     fontFamily: uikitStyles.theme.fontFamily.body,
-    color: `${uikitStyles.theme.colors.secondary_60}`,
+    color: uikitStyles.theme.colors.textDisabled,
     cursor: "not-allowed",
     top: "-2px"
   },
@@ -79,7 +78,6 @@ const sliderStyles = {
     width: "2px",
     marginLeft: "-1px",
     border: "none",
-    borderRadius: "0",
     marginTop: "0px",
     left: "100%",
     touchAction: "none",
@@ -88,16 +86,16 @@ const sliderStyles = {
   knobInner: {
     borderColor: "transparent",
     boxShadow: "none",
-    backgroundColor: uikitStyles.theme.colors.secondary,
+    backgroundColor: uikitStyles.theme.colors.text,
     width: "16px",
     height: "16px"
   },
   knobOuter: {
     position: "relative",
     borderColor: "transparent",
-    borderRadius: "50%",
+    borderRadius: uikitStyles.theme.radii.circle,
     boxShadow: "none",
-    backgroundColor: uikitStyles.theme.colors.atmo4,
+    backgroundColor: uikitStyles.theme.colors.border,
     width: "32px",
     height: "32px",
     top: "-80%",
@@ -105,12 +103,12 @@ const sliderStyles = {
     zIndex: "-1"
   },
   track: {
-    backgroundColor: uikitStyles.theme.colors.secondary,
+    backgroundColor: uikitStyles.theme.colors.text,
     height: "3px",
     zIndex: "-1",
     marginTop: "-1px"
   },
-  rail: { backgroundColor: uikitStyles.theme.colors.atmo4, height: "1px", zIndex: "-3" }
+  rail: { backgroundColor: uikitStyles.theme.colors.border, height: "1px", zIndex: "-3" }
 };
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSlider", {
   sliderBase: { ...base.default },
@@ -206,7 +204,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSlider",
   root: {},
   sliderTooltip: {
     "&& .rc-slider-tooltip-inner": {
-      background: uikitStyles.theme.colors.atmo1,
+      background: uikitStyles.theme.colors.bgContainer,
       borderRadius: 0,
       maxWidth: "532px",
       height: "100%",