@hitachivantara/uikit-react-core 5.88.0 → 5.90.0

package/dist/cjs/ActionBar/ActionBar.styles.cjs

@@ -6,7 +6,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvActionBar
   root: {
     width: "100%",
     padding: uikitStyles.theme.space.sm,
-    borderTop: `1px solid ${uikitStyles.theme.colors.atmo4}`,
+    borderTop: `1px solid ${uikitStyles.theme.colors.border}`,
     display: "flex",
     alignItems: "center",
     justifyContent: "flex-end"

package/dist/cjs/ActionsGeneric/ActionsGeneric.cjs

@@ -64,8 +64,7 @@ const HvActionsGeneric = React.forwardRef(function HvActionsGeneric2(props, ref)
   const renderActionsGrid = () => {
     const actsVisible = actions.slice(0, maxVisibleActions);
     const actsDropdown = actions.slice(maxVisibleActions);
-    const semantic = variant === "semantic";
-    const iconColor = disabled && "secondary_60" || semantic && "base_dark" || void 0;
+    const iconColor = variant === "semantic" && "textDark" || void 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       actsVisible.map((action, idx) => renderButton(action, idx)),
       /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/AppSwitcher/Action/Action.cjs

@@ -23,8 +23,8 @@ const HvAppSwitcherAction = ({
   const { classes, cx } = Action_styles.useClasses(classesProp);
   const { name, description, disabled, iconElement, iconUrl, url, target } = application;
   const color = uikitStyles.getColor(
-    disabled ? "secondary_60" : application?.color,
-    "secondary"
+    disabled ? "textDisabled" : application?.color,
+    "text"
   );
   const [validIconUrl, setValidIconUrl] = React.useState(true);
   const renderApplicationIcon = () => {

package/dist/cjs/AppSwitcher/Action/Action.styles.cjs

@@ -23,10 +23,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
       minHeight: 52,
       padding: `6px ${uikitStyles.theme.space.xs}`,
       border: "none",
-      borderLeft: `solid 2px ${uikitStyles.theme.colors.secondary}`,
+      borderLeft: `2px solid currentcolor`,
       cursor: "pointer",
       textDecoration: "inherit",
-      color: "inherit",
       backgroundColor: "inherit",
       "$disabled &": {
         cursor: "not-allowed"
@@ -38,7 +37,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
       textAlign: "left",
       margin: `0 ${uikitStyles.theme.space.xs}`,
       textWrap: "balance",
-      ...uikitStyles.theme.typography.label
+      ...uikitStyles.theme.typography.label,
+      color: "inherit"
     },
     titleAnchor: {
       WebkitLineClamp: 2

package/dist/cjs/Avatar/Avatar.cjs

@@ -20,8 +20,8 @@ const HvAvatar = React.forwardRef(function HvAvatar2(props, ref) {
     children: childrenProp,
     component = "div",
     size: sizeProp,
-    backgroundColor = "secondary",
-    color = "atmo1",
+    backgroundColor = "text",
+    color = "bgContainer",
     src,
     srcSet,
     sizes: sizes$1,
@@ -73,18 +73,15 @@ const HvAvatar = React.forwardRef(function HvAvatar2(props, ref) {
     inlineStyle.borderRadius = "50%";
   }
   if (!hasImgNotFailing) {
-    inlineStyle.backgroundColor = uikitStyles.getColor(
-      backgroundColor,
-      uikitStyles.theme.colors.secondary
-    );
-    inlineStyle.color = uikitStyles.getColor(color, uikitStyles.theme.colors.atmo1);
+    inlineStyle.backgroundColor = uikitStyles.getColor(backgroundColor, "text");
+    inlineStyle.color = uikitStyles.getColor(color, "textDimmed");
   }
   const statusInlineStyle = {};
   if (status) {
-    const statusColor = uikitStyles.getColor(status, uikitStyles.theme.colors.positive);
+    const statusColor = uikitStyles.getColor(status, "positive");
     statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;
   }
-  const badgeColor = uikitStyles.getColor(badge || "", uikitStyles.theme.colors.positive);
+  const badgeColor = uikitStyles.getColor(badge || "", "positive");
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: classes.container, ...others, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {

package/dist/cjs/Avatar/Avatar.styles.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const uikitStyles = require("@hitachivantara/uikit-styles");
 const focusUtils = require("../utils/focusUtils.cjs");
 const EXTRA_SMALL = { container: "32px", avatar: "24px" };
 const SMALL = { container: "40px", avatar: "32px" };
@@ -61,7 +62,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvAvatar",
     position: "absolute",
     top: 0,
     right: 0,
-    borderRadius: "50%",
+    borderRadius: uikitStyles.theme.radii.full,
     zIndex: 1
   },
   xs: {},
@@ -69,7 +70,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvAvatar",
   md: {},
   lg: {},
   xl: {},
-  circular: { borderRadius: "50%" },
+  circular: { borderRadius: uikitStyles.theme.radii.full },
   square: {}
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/AvatarGroup/AvatarGroup.cjs

@@ -61,7 +61,7 @@ const Overflow = ({
         Avatar.HvAvatar,
         {
           size,
-          backgroundColor: uikitStyles.theme.colors.atmo4,
+          backgroundColor: uikitStyles.theme.colors.border,
           classes: {
             avatar: css({
               [`&.HvAvatar-${size}`]: {

package/dist/cjs/AvatarGroup/AvatarGroup.styles.cjs

@@ -8,7 +8,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvAvatarGro
   root: {
     display: "flex",
     [`& .${Avatar_styles.staticClasses.root}`]: {
-      border: `2px solid ${uikitStyles.theme.colors.atmo2}`,
+      border: `2px solid ${uikitStyles.theme.colors.bgPage}`,
       boxSizing: "content-box"
     },
     "&$row": {

package/dist/cjs/Badge/Badge.styles.cjs

@@ -9,9 +9,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBadge", {
   /** class applied to the badge */
   badgePosition: {
     ...uikitStyles.theme.typography.caption2,
-    color: uikitStyles.theme.colors.atmo1,
+    color: uikitStyles.theme.colors.textDimmed,
     borderRadius: uikitStyles.theme.radii.full,
-    backgroundColor: uikitStyles.theme.colors.secondary,
+    backgroundColor: uikitStyles.theme.colors.text,
     lineHeight: "16px",
     minWidth: 8,
     padding: "0 5px",

package/dist/cjs/Banner/Banner.cjs

@@ -16,20 +16,21 @@ const HvBanner = React.forwardRef(function HvBanner2(props, ref) {
     id,
     classes: classesProp,
     className,
+    title,
     open,
     onClose,
     anchorOrigin = "top",
-    variant = "default",
+    variant,
     transitionDuration = 300,
     transitionDirection = "down",
     container,
-    showIcon = false,
+    showIcon,
     customIcon,
     actions,
     actionsCallback,
     // TODO - remove in v6
     onAction,
-    actionsPosition = "auto",
+    actionsPosition,
     label,
     offset = 60,
     bannerContentProps,
@@ -72,7 +73,7 @@ const HvBanner = React.forwardRef(function HvBanner2(props, ref) {
         BannerContent.HvBannerContent,
         {
           id: setId.setId(id, "content"),
-          content: label,
+          title,
           variant,
           customIcon,
           showIcon,
@@ -81,7 +82,8 @@ const HvBanner = React.forwardRef(function HvBanner2(props, ref) {
           onAction,
           actionsPosition,
           onClose,
-          ...bannerContentProps
+          ...bannerContentProps,
+          children: label
         }
       )
     }

package/dist/cjs/Banner/BannerContent/BannerContent.cjs

@@ -2,107 +2,69 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const SnackbarContent = require("@mui/material/SnackbarContent");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const iconVariant = require("../../utils/iconVariant.cjs");
-const setId = require("../../utils/setId.cjs");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const Callout = require("../../utils/Callout.cjs");
 const BannerContent_styles = require("./BannerContent.styles.cjs");
-const Button = require("../../Button/Button.cjs");
-const ActionsGeneric = require("../../ActionsGeneric/ActionsGeneric.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const SnackbarContent__default = /* @__PURE__ */ _interopDefault(SnackbarContent);
-const HvBannerContent = React.forwardRef(
-  function HvBannerContent2(props, ref) {
-    const {
+const HvBannerContent = React.forwardRef(function HvBannerContent2(props, ref) {
+  const {
+    id,
+    classes: classesProp,
+    className,
+    showIcon,
+    customIcon,
+    variant = "default",
+    onClose,
+    actions,
+    actionsCallback,
+    // TODO - remove in v6
+    onAction,
+    actionsPosition = "auto",
+    content,
+    children,
+    actionProps,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvBannerContent", props);
+  const { classes, cx } = BannerContent_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Callout.HvCallout,
+    {
+      ref,
       id,
-      classes: classesProp,
-      className,
-      showIcon = false,
+      variant,
+      showClose: true,
+      showIcon,
       customIcon,
-      variant = "default",
-      onClose,
+      classes: {
+        root: cx(
+          classes.root,
+          classes.outContainer,
+          classes.baseVariant,
+          classes[variant],
+          className
+        ),
+        message: classes.message,
+        action: classes.action,
+        messageIcon: classes.iconContainer,
+        messageContent: classes.messageContainer,
+        actionCustom: classes.messageActions,
+        actionContent: cx(
+          classes.actionContainer,
+          classes.actionsInnerContainer
+        ),
+        actionClose: classes.closeAction
+      },
       actions,
-      actionsCallback,
-      // TODO - remove in v6
-      onAction,
-      actionsPosition = "auto",
-      content,
-      children,
+      actionsPosition,
       actionProps,
-      ...others
-    } = props;
-    const { classes, cx } = BannerContent_styles.useClasses(classesProp);
-    const icon = customIcon || showIcon && iconVariant.iconVariant(variant, "base_dark");
-    const effectiveActionsPosition = actionsPosition === "auto" ? "inline" : actionsPosition;
-    const handleAction = (evt, action) => {
-      onAction?.(evt, action);
-      actionsCallback?.(evt, id, action);
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.outContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-      SnackbarContent__default.default,
-      {
-        ref,
-        id,
-        classes: {
-          root: classes.root,
-          message: classes.message,
-          action: classes.action
-        },
-        className: cx(classes.baseVariant, classes[variant], className),
-        message: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.iconContainer, children: icon }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              id: setId.setId(id, "message-text"),
-              className: classes.messageContainer,
-              children: children ?? content
-            }
-          ),
-          actions && effectiveActionsPosition === "inline" && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              id: setId.setId(id, "message-actions"),
-              className: classes.messageActions,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                ActionsGeneric.HvActionsGeneric,
-                {
-                  id,
-                  variant: "semantic",
-                  actions,
-                  onAction: handleAction
-                }
-              )
-            }
-          )
-        ] }),
-        action: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.actionContainer, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Button.HvButton,
-            {
-              icon: true,
-              className: classes.closeAction,
-              variant: "semantic",
-              "aria-label": "Close",
-              onClick: onClose,
-              ...actionProps,
-              children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, { size: "XS" })
-            }
-          ),
-          actions && effectiveActionsPosition === "bottom-right" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.actionsInnerContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
-            ActionsGeneric.HvActionsGeneric,
-            {
-              id,
-              variant: "semantic",
-              actions,
-              onAction: handleAction
-            }
-          ) })
-        ] }),
-        ...others
-      }
-    ) });
-  }
-);
+      onClose: (evt) => onClose?.(evt),
+      onAction: (evt, action) => {
+        onAction?.(evt, action);
+        actionsCallback?.(evt, id, action);
+      },
+      ...others,
+      children: children ?? content
+    }
+  );
+});
 exports.bannerContentClasses = BannerContent_styles.staticClasses;
 exports.HvBannerContent = HvBannerContent;

package/dist/cjs/Banner/BannerContent/BannerContent.styles.cjs

@@ -5,72 +5,46 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
 const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBannerContent", {
   root: {
     minWidth: "100%",
+    width: "100%",
     position: "relative",
-    display: "flex",
-    flexWrap: "nowrap",
-    boxShadow: "none",
+    gap: uikitStyles.theme.space.xs,
     borderRadius: uikitStyles.theme.radii.none
   },
+  success: {},
+  warning: {},
+  error: {},
+  default: {},
+  info: {},
+  accent: {},
   message: {
-    display: "flex",
-    alignItems: "center",
+    gap: uikitStyles.theme.space.xs,
     padding: uikitStyles.theme.spacing("xs", 0),
     paddingLeft: uikitStyles.theme.space.sm,
     ...uikitStyles.theme.typography.body,
-    color: uikitStyles.theme.colors.base_dark
+    color: uikitStyles.theme.colors.textDark
   },
   action: {
-    padding: uikitStyles.theme.spacing("xs"),
-    marginRight: 0,
+    padding: uikitStyles.theme.space.xs,
     flex: "0 0 auto",
     placeSelf: "stretch"
   },
-  baseVariant: {
-    padding: 0
-  },
-  success: {
-    backgroundColor: uikitStyles.theme.colors.positive_20
-  },
-  warning: {
-    backgroundColor: uikitStyles.theme.colors.warning_20
-  },
-  error: {
-    backgroundColor: uikitStyles.theme.colors.negative_20
-  },
-  default: {
-    backgroundColor: uikitStyles.theme.colors.neutral_20
-  },
-  outContainer: {
-    width: "100%",
-    position: "relative"
-  },
   messageContainer: {
-    wordBreak: "break-word",
-    maxWidth: 700,
-    overflow: "hidden",
-    marginRight: 10
+    maxWidth: 700
   },
   iconContainer: {
-    marginRight: uikitStyles.theme.space.xs,
-    marginLeft: -uikitStyles.theme.space.xs
+    marginLeft: uikitStyles.theme.spacing(-1)
   },
   messageActions: {
     flex: "0 0 auto"
   },
-  actionContainer: {
-    display: "flex",
-    flexDirection: "column",
-    height: "100%",
-    justifyContent: "space-between"
-  },
-  actionsInnerContainer: {
-    flexDirection: "row",
-    marginTop: "8px"
-    // avoid overlap with close button outline focus ring
-  },
-  closeAction: {
-    alignSelf: "flex-end"
-  }
+  actionContainer: {},
+  closeAction: {},
+  /** @deprecated use ´classes.root` instead */
+  baseVariant: {},
+  /** @deprecated use `classes.root` instead */
+  outContainer: {},
+  /** @deprecated use `classes.actionContainer` instead */
+  actionsInnerContainer: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/BaseCheckBox/BaseCheckBox.styles.cjs

@@ -12,14 +12,14 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseCheck
     borderRadius: uikitStyles.theme.radii.base,
     cursor: "pointer",
     "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+      backgroundColor: uikitStyles.theme.colors.bgHover
     },
     "& svg": {
       width: 16,
       height: 16,
-      color: uikitStyles.theme.colors.atmo1,
+      color: uikitStyles.theme.colors.bgContainer,
       borderRadius: uikitStyles.theme.radii.none,
-      border: `1px solid ${uikitStyles.theme.colors.secondary}`
+      border: `1px solid ${uikitStyles.theme.colors.text}`
     }
   },
   disabled: {
@@ -27,9 +27,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseCheck
       cursor: "not-allowed",
       pointerEvents: "initial",
       "& svg": {
-        color: uikitStyles.theme.colors.atmo3,
-        borderColor: uikitStyles.theme.colors.secondary_60,
-        backgroundColor: uikitStyles.theme.colors.atmo3
+        color: uikitStyles.theme.colors.bgDisabled,
+        borderColor: uikitStyles.theme.colors.textDisabled,
+        backgroundColor: uikitStyles.theme.colors.bgDisabled
       }
     }
   },
@@ -41,36 +41,36 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseCheck
   icon: {},
   checked: {
     "& svg": {
-      border: `1px solid ${uikitStyles.theme.colors.secondary}`,
-      backgroundColor: uikitStyles.theme.colors.secondary,
-      color: uikitStyles.theme.colors.atmo1
+      border: `1px solid ${uikitStyles.theme.colors.text}`,
+      backgroundColor: uikitStyles.theme.colors.text,
+      color: uikitStyles.theme.colors.bgContainer
     },
     "&$disabled": {
       "& svg": {
-        color: uikitStyles.theme.colors.secondary_60
+        color: uikitStyles.theme.colors.textDisabled
       }
     }
   },
   indeterminate: {
     "& svg": {
-      color: uikitStyles.theme.colors.secondary
+      color: uikitStyles.theme.colors.text
     },
     "&$disabled": {
       "& svg": {
-        color: uikitStyles.theme.colors.secondary_60
+        color: uikitStyles.theme.colors.textDisabled
       }
     }
   },
   semantic: {
     "& svg": {
-      border: `1px solid ${uikitStyles.theme.colors.base_dark}`,
-      color: uikitStyles.theme.colors.base_light,
-      backgroundColor: uikitStyles.theme.colors.base_dark
+      border: `1px solid ${uikitStyles.theme.colors.textDark}`,
+      color: uikitStyles.theme.colors.textLight,
+      backgroundColor: uikitStyles.theme.colors.textDark
     },
     "&$indeterminate": {
       "& svg": {
-        color: uikitStyles.theme.colors.base_dark,
-        backgroundColor: uikitStyles.theme.colors.base_light
+        color: uikitStyles.theme.colors.textDark,
+        backgroundColor: uikitStyles.theme.colors.textLight
       }
     }
   }

package/dist/cjs/BaseDropdown/BaseDropdown.cjs

@@ -123,7 +123,7 @@ const BaseDropdown = React.forwardRef(function BaseDropdown2(props, ref) {
           ExpanderComponent,
           {
             iconSize: "XS",
-            color: disabled ? "secondary_60" : void 0,
+            color: disabled ? "textDisabled" : void 0,
             className: classes.arrow
           }
         ) })

package/dist/cjs/BaseDropdown/BaseDropdown.styles.cjs

@@ -17,9 +17,9 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBaseDropd
     cursor: "pointer",
     userSelect: "none",
     position: "relative",
-    background: uikitStyles.theme.colors.atmo1,
+    background: uikitStyles.theme.colors.bgContainer,
     boxSizing: "border-box",
-    border: `1px solid ${uikitStyles.theme.colors.secondary}`,
+    border: `1px solid ${uikitStyles.theme.colors.text}`,
     borderRadius: uikitStyles.theme.radii.base,
     "&:hover": {
       border: `1px solid ${uikitStyles.theme.colors.primary}`
@@ -33,9 +33,9 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBaseDropd
     }
   },
   headerOpen: {
-    border: `1px solid ${uikitStyles.theme.colors.secondary}`,
+    border: `1px solid ${uikitStyles.theme.colors.text}`,
     "&:hover": {
-      border: `1px solid ${uikitStyles.theme.colors.secondary}`
+      border: `1px solid ${uikitStyles.theme.colors.text}`
     }
   },
   headerOpenUp: {
@@ -47,23 +47,23 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBaseDropd
   headerDisabled: {
     cursor: "not-allowed",
     pointerEvents: "none",
-    color: uikitStyles.theme.colors.secondary_60,
-    border: `1px solid ${uikitStyles.theme.colors.secondary_60}`,
-    background: uikitStyles.theme.colors.atmo2,
+    color: uikitStyles.theme.colors.textDisabled,
+    border: `1px solid currentcolor`,
+    background: uikitStyles.theme.colors.bgPage,
     "&:hover": {
-      border: `1px solid ${uikitStyles.theme.colors.secondary_60}`
+      border: `1px solid currentcolor`
     }
   },
   headerReadOnly: {
     cursor: "not-allowed",
     pointerEvents: "none",
-    color: uikitStyles.theme.colors.secondary_80,
-    border: `1px solid ${uikitStyles.theme.colors.secondary_60}`,
-    background: uikitStyles.theme.colors.atmo2,
+    color: uikitStyles.theme.colors.textSubtle,
+    border: `1px solid currentcolor`,
+    background: uikitStyles.theme.colors.bgPage,
     userSelect: "text",
     "&:focus-visible": {
       outline: "none",
-      border: `1px solid ${uikitStyles.theme.colors.secondary_60}`
+      border: `1px solid currentcolor`
     }
   },
   arrowContainer: {
@@ -79,18 +79,17 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBaseDropd
     height: "30px",
     boxSizing: "border-box",
     paddingLeft: uikitStyles.theme.space.xs,
-    paddingRight: uikitStyles.theme.sizes.sm,
-    color: "inherit"
+    paddingRight: 32
   },
   selectionDisabled: {},
   placeholder: {
     display: "block",
-    color: uikitStyles.theme.colors.secondary_80
+    color: uikitStyles.theme.colors.textSubtle
   },
   panel: {
     // TODO: remove padding override in v6 (most elements need it)
     padding: 0,
-    border: `1px solid ${uikitStyles.theme.colors.secondary}`
+    border: `1px solid ${uikitStyles.theme.colors.text}`
   },
   panelOpenedUp: {
     top: 1,
@@ -102,15 +101,15 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBaseDropd
   },
   inputExtensionOpen: {
     height: "0px",
-    backgroundColor: uikitStyles.theme.colors.atmo1,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     borderTop: "none",
     borderBottom: "none",
-    borderRight: `1px solid ${uikitStyles.theme.colors.secondary}`,
-    borderLeft: `1px solid ${uikitStyles.theme.colors.secondary}`
+    borderRight: `1px solid ${uikitStyles.theme.colors.text}`,
+    borderLeft: `1px solid ${uikitStyles.theme.colors.text}`
   },
   inputExtensionLeftPosition: { marginLeft: "auto" },
   inputExtensionOpenShadow: {
-    boxShadow: `0px 8px 0px ${uikitStyles.theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`
+    boxShadow: `0px 8px 0px ${uikitStyles.theme.colors.textDimmed}, 0px 0px 9px 0px rgba(65,65,65,.12)`
   },
   inputExtensionFloatRight: { float: "right" },
   inputExtensionFloatLeft: { float: "left" }