@zohodesk/components 1.0.0-temp-259.2 → 1.0.0-temp-260

package/es/v1/Button/constants/index.js

@@ -1,21 +1,19 @@
 export const PALETTE = {
-  BRAND: 'brand',
-  BRAND_LIGHTER: 'brandLighter',
-  INFO: 'info',
-  INFO_LIGHTER: 'infoLighter',
+  DEFAULT: 'default',
+  PRIMARY: 'primary',
   SECONDARY: 'secondary',
-  SECONDARY_LIGHTER: 'secondaryLighter',
   DANGER: 'danger',
-  DANGER_LIGHTER: 'dangerLighter',
-  SUCCESS: 'success',
-  SUCCESS_LIGHTER: 'successLighter',
-  WARNING: 'warning',
-  WARNING_LIGHTER: 'warningLighter'
+  SUCCESS: 'success'
 };
-export const APPEARANCE = {
-  BORDER: 'border',
-  TEXT: 'text',
-  BG: 'bg'
+export const BG_APPEARANCE = {
+  DEFAULT: 'default',
+  ON_HOVER: 'onHover',
+  NONE: 'none'
+};
+export const BORDER_APPEARANCE = {
+  DEFAULT: 'default',
+  ON_HOVER: 'onHover',
+  NONE: 'none'
 };
 export const VARIANT = {
   TEXT: 'text',
@@ -42,6 +40,10 @@ export const ICON_PLACEMENT = {
   LEFT: 'left',
   RIGHT: 'right'
 };
+export const PALETTE_SHADE = {
+  DEFAULT: 'default',
+  LIGHTER: 'lighter'
+};
 export const SHAPE = {
   PILL: 'pill',
   RECTANGLE: 'rectangle',
@@ -65,24 +67,16 @@ export const TYPOGRAPHY_SIZE_MAP = {
 };
 /** Default values referenced by both defaultProps and cssJSLogic */
 
-export const DEFAULT_APPEARANCE = {
-  bg: true,
-  text: true
-};
-export const DEFAULT_HOVER_APPEARANCE = {
-  bg: true,
-  text: true
-};
-export const DEFAULT_SELECTED_APPEARANCE = {
-  bg: true,
-  text: true
-};
+export const DEFAULT_PALETTE = PALETTE.DEFAULT;
+export const DEFAULT_BG_APPEARANCE = BG_APPEARANCE.DEFAULT;
+export const DEFAULT_BORDER_APPEARANCE = BORDER_APPEARANCE.DEFAULT;
 export const DEFAULT_VARIANT = VARIANT.TEXT;
 export const DEFAULT_SIZE = SIZE.MEDIUM;
 export const DEFAULT_STATUS = STATUS.DEFAULT;
 export const DEFAULT_LOADER_PLACEMENT = LOADER_PLACEMENT.OVERLAY;
 export const DEFAULT_ICON_PLACEMENT = ICON_PLACEMENT.LEFT;
 export const DEFAULT_ICON_SIZE = 16;
+export const DEFAULT_PALETTE_SHADE = PALETTE_SHADE.DEFAULT;
 export const DEFAULT_SHAPE = SHAPE.ROUNDED_RECTANGLE;
 export const DEFAULT_DISABLED_APPEARANCE = DISABLED_APPEARANCE.DULL;
 export const DEFAULT_BUTTON_TYPE = BUTTON_TYPE.BUTTON;

package/es/v1/Button/css/Button_v1.module.css

@@ -5,15 +5,13 @@
     --local-button-gap: var(--zd_size8);
     --local-button-padding-block: var(--zd_size6);
     --local-button-padding-inline: var(--zd_size15);
+    --local-button-font-size: var(--zd_font_size13);
     --local-loader-size: 16px;
     --local-tick-size: 16px;
     --local-button-height: auto;
     --local-button-width: auto;
-    --local-button-min-width: var(--zd_size90);
-    --local-button-overlay-opacity: 0.4;
-    --local-button-transition-duration: var(--zd_transition2);
-    --local-button-cursor: pointer;
-    --local-button-strike-color: currentColor;
+    --local-button-overlay-opacity: 0.48;
+    --local-button-transition-duration: var(--zd_transition3);
 }
 
 .button {
@@ -21,20 +19,19 @@
     composes: posrel pointer from '../../../common/common.module.css';
     padding-block: var(--local-button-padding-block);
     padding-inline: var(--local-button-padding-inline);
+    font-size: var(--local-button-font-size);
     height: var(--local-button-height);
     width: var(--local-button-width);
-    min-width: var(--local-button-min-width);
     border-radius: var(--local-button-radius);
     border-style: var(--local-button-border-style);
     border-width: var(--local-button-border-width);
     transition-duration: var(--local-button-transition-duration);
     transition-timing-function: ease;
-    cursor: var(--local-button-cursor);
     background-image: none;
 }
 
 .disabledPointer {
-    --local-button-cursor: not-allowed;
+    cursor: not-allowed;
 }
 
 .disabledOpac {
@@ -42,20 +39,7 @@
 }
 
 .loading {
-    --local-button-cursor: progress;
-    composes: disabledOpac;
-}
-
-.variantText {
-    --local-button-min-width: var(--zd_size90);
-}
-
-.variantIcon {
-    --local-button-min-width: var(--zd_size28);
-}
-
-.variantIconWithText {
-    --local-button-min-width: var(--zd_size118);
+    cursor: progress;
 }
 
 .sizeSmall {
@@ -84,14 +68,6 @@
     --local-button-width: 100%;
 }
 
-.sizeSmall.variantText {
-    --local-button-min-width: var(--zd_size50);
-}
-
-.sizeSmall.variantIconWithText {
-    --local-button-min-width: var(--zd_size78);
-}
-
 .shapeRoundedRectangle {
     --local-button-radius: 4px;
 }
@@ -104,11 +80,9 @@
     --local-button-radius: 0;
 }
 
-.strike::after,
-.loaderOverlay,
-.successOverlay {
+.loaderOverlay {
     inset: 0 ;
-    position: absolute;
+    composes: posab from '../../../common/common.module.css';
 }
 
 .contentWrapper {
@@ -124,17 +98,22 @@
 
 .strike::after {
     content: '';
-    opacity: var(--local-button-overlay-opacity);
+    position: absolute;
+    inset: 0 ;
     pointer-events: none;
     border-radius: var(--local-button-radius);
 }
 
 [dir=ltr] .strike::after {
-    background-image: repeating-linear-gradient(120deg, var(--local-button-strike-color) 0 1px, var(--zd-bg-transparent) 1px 8px);
+    background-image: repeating-linear-gradient(120deg, currentColor 0 1px, var(--dot_mirror) 1px 8px);
 }
 
 [dir=rtl] .strike::after {
-    background-image: repeating-linear-gradient(-120deg, var(--local-button-strike-color) 0 1px, var(--zd-bg-transparent) 1px 8px);
+    background-image: repeating-linear-gradient(-120deg, currentColor 0 1px, var(--dot_mirror) 1px 8px);
 }
 
+.successOverlay {
+    inset: 0 ;
+    composes: posab from '../../../common/common.module.css';
+}
 

package/es/v1/Button/css/cssJSLogic.js

@@ -1,9 +1,9 @@
+import style from "./Button_v1.module.css";
 import compileClassNames from '@zohodesk/utils/es/compileClassNames';
-import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
-import { DISABLED_APPEARANCE, LOADER_PLACEMENT, SHAPE, SIZE, STATUS, DEFAULT_APPEARANCE, DEFAULT_HOVER_APPEARANCE, DEFAULT_SELECTED_APPEARANCE } from "../constants";
 import buttonResetStyle from "../../../semantic/Button/semanticButton.module.css";
 import getPaletteClasses from "../../helpers/colorHelpers/colorHelper";
-import style from "./Button_v1.module.css";
+import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
+import { DISABLED_APPEARANCE, LOADER_PLACEMENT, SHAPE, SIZE, STATUS } from "../constants";
 
 const capitalize = (value = '') => value.charAt(0).toUpperCase() + value.slice(1);
 
@@ -12,13 +12,13 @@ export default function cssJSLogic({
 }) {
   const {
     palette,
-    appearance,
-    hoverAppearance,
-    selectedAppearance,
+    bgAppearance,
+    borderAppearance,
+    paletteShade,
     size,
-    variant,
     status,
     isDisabled,
+    isReadOnly,
     isSelected,
     shape,
     loaderPlacement,
@@ -28,72 +28,54 @@ export default function cssJSLogic({
   const {
     wrapper: wrapperClass = '',
     text: textClassCustom = '',
-    icon: iconClassCustom = '',
-    loader: loaderClassCustom = '',
-    success: successClassCustom = ''
+    icon: iconClassCustom = ''
   } = customClass;
   const isLoading = status === STATUS.LOADING;
   const isSuccess = status === STATUS.SUCCESS;
-  const isInteractive = !isDisabled && !isLoading;
+  const isInteractive = !isDisabled && !isReadOnly;
   const overlayActive = (isLoading || isSuccess) && loaderPlacement === LOADER_PLACEMENT.OVERLAY;
-  const mergedAppearance = { ...DEFAULT_APPEARANCE,
-    ...(appearance || {})
-  };
-  const mergedHoverAppearance = { ...DEFAULT_HOVER_APPEARANCE,
-    ...(hoverAppearance || {})
-  };
-  const mergedSelectedAppearance = { ...DEFAULT_SELECTED_APPEARANCE,
-    ...(selectedAppearance || {})
-  };
   const {
     bg,
-    selectedBg,
     hoverBg,
     focusBg,
     activeBg,
     text,
-    selectedText,
     hoverText,
     focusText,
     activeText,
     border,
-    selectedBorder,
     hoverBorder,
     focusBorder,
     activeBorder
   } = getPaletteClasses({
     palette,
-    appearance: mergedAppearance,
-    hoverAppearance: mergedHoverAppearance,
-    selectedAppearance: mergedSelectedAppearance
+    bgAppearance,
+    borderAppearance,
+    paletteShade,
+    isSelected
   });
   const sizeClass = size ? style[`size${capitalize(size)}`] : '';
   const shapeClass = shape ? style[`shape${capitalize(shape)}`] : '';
-  const variantClass = variant ? style[`variant${capitalize(variant)}`] : '';
   const shouldStrike = disabledAppearance === DISABLED_APPEARANCE.STRIKE && isDisabled;
   const buttonClassName = compileClassNames({
     [buttonResetStyle.buttonReset]: true,
     [style.button]: true,
-    [bg]: !!bg && !(isSelected && !!selectedBg),
-    [selectedBg]: !!selectedBg && isSelected,
-    [hoverBg]: !!hoverBg && isInteractive && !isSelected,
-    [focusBg]: !!focusBg && isInteractive && !isSelected,
-    [activeBg]: !!activeBg && isInteractive && !isSelected,
-    [text]: !!text && !(isSelected && !!selectedText),
-    [selectedText]: !!selectedText && isSelected,
-    [hoverText]: !!hoverText && isInteractive && !isSelected,
-    [focusText]: !!focusText && isInteractive && !isSelected,
-    [activeText]: !!activeText && isInteractive && !isSelected,
-    [border]: !!border && !(isSelected && !!selectedBorder),
-    [selectedBorder]: !!selectedBorder && isSelected,
-    [hoverBorder]: !!hoverBorder && isInteractive && !isSelected,
-    [focusBorder]: !!focusBorder && isInteractive && !isSelected,
-    [activeBorder]: !!activeBorder && isInteractive && !isSelected,
+    [bg]: !!bg,
+    [hoverBg]: !!hoverBg && isInteractive,
+    [focusBg]: !!focusBg && isInteractive,
+    [activeBg]: !!activeBg && isInteractive,
+    [text]: !!text,
+    [hoverText]: !!hoverText && isInteractive,
+    [focusText]: !!focusText && isInteractive,
+    [activeText]: !!activeText && isInteractive,
+    [border]: !!border,
+    [hoverBorder]: !!hoverBorder && isInteractive,
+    [focusBorder]: !!focusBorder && isInteractive,
+    [activeBorder]: !!activeBorder && isInteractive,
     [sizeClass]: !!sizeClass,
     [shapeClass]: !!shapeClass,
-    [variantClass]: !!variantClass,
-    [style.disabledOpac]: isDisabled && disabledAppearance === DISABLED_APPEARANCE.DULL,
-    [style.disabledPointer]: isDisabled,
+    [style.disabledOpac]: isReadOnly || isDisabled && disabledAppearance === DISABLED_APPEARANCE.DULL,
+    [style.disabledPointer]: isReadOnly || isDisabled,
     [style.loading]: isLoading,
     [style.strike]: shouldStrike,
     [wrapperClass]: !!wrapperClass
@@ -107,19 +89,9 @@ export default function cssJSLogic({
   return {
     buttonClassName,
     textClassName,
-    iconClassName,
     contentWrapperClass: overlayActive ? style.overlayHidden : style.contentWrapper,
     loaderOverlayClass: style.loaderOverlay,
     successOverlayClass: style.successOverlay,
-    loaderClassName: {
-      wrapper: compileClassNames({
-        [loaderClassCustom]: !!loaderClassCustom
-      })
-    },
-    successClassName: {
-      wrapper: compileClassNames({
-        [successClassCustom]: !!successClassCustom
-      })
-    }
+    iconClassName
   };
 }

package/es/v1/Button/props/defaultProps.js

@@ -1,15 +1,19 @@
 import { DUMMY_FUNCTION, DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
-import { DEFAULT_VARIANT, DEFAULT_SIZE, DEFAULT_STATUS, DEFAULT_LOADER_PLACEMENT, DEFAULT_ICON_PLACEMENT, DEFAULT_ICON_SIZE, DEFAULT_SHAPE, DEFAULT_DISABLED_APPEARANCE, DEFAULT_BUTTON_TYPE } from "../constants";
+import { DEFAULT_PALETTE, DEFAULT_BG_APPEARANCE, DEFAULT_BORDER_APPEARANCE, DEFAULT_VARIANT, DEFAULT_SIZE, DEFAULT_STATUS, DEFAULT_LOADER_PLACEMENT, DEFAULT_ICON_PLACEMENT, DEFAULT_ICON_SIZE, DEFAULT_PALETTE_SHADE, DEFAULT_SHAPE, DEFAULT_DISABLED_APPEARANCE, DEFAULT_BUTTON_TYPE } from "../constants";
 const defaultProps = {
-  palette: '',
+  palette: DEFAULT_PALETTE,
+  bgAppearance: DEFAULT_BG_APPEARANCE,
+  borderAppearance: DEFAULT_BORDER_APPEARANCE,
   variant: DEFAULT_VARIANT,
   size: DEFAULT_SIZE,
   status: DEFAULT_STATUS,
   loaderPlacement: DEFAULT_LOADER_PLACEMENT,
   iconPlacement: DEFAULT_ICON_PLACEMENT,
   iconSize: DEFAULT_ICON_SIZE,
+  paletteShade: DEFAULT_PALETTE_SHADE,
   disabledAppearance: DEFAULT_DISABLED_APPEARANCE,
   isDisabled: false,
+  isReadOnly: false,
   isSelected: false,
   shape: DEFAULT_SHAPE,
   type: DEFAULT_BUTTON_TYPE,

package/es/v1/Button/props/propTypes.js

@@ -1,19 +1,10 @@
 import PropTypes from 'prop-types';
-import { PALETTE, VARIANT, SIZE, STATUS, LOADER_PLACEMENT, ICON_PLACEMENT, SHAPE, DISABLED_APPEARANCE, BUTTON_TYPE } from "../constants";
+import { PALETTE, BG_APPEARANCE, BORDER_APPEARANCE, VARIANT, SIZE, STATUS, LOADER_PLACEMENT, ICON_PLACEMENT, PALETTE_SHADE, SHAPE, DISABLED_APPEARANCE, BUTTON_TYPE } from "../constants";
 const renderSlotType = PropTypes.oneOfType([PropTypes.node, PropTypes.func]);
-const paletteNames = Object.values(PALETTE);
-const bgBorderValueType = PropTypes.oneOfType([PropTypes.oneOf([...paletteNames, 'transparent']), PropTypes.bool]);
-const textValueType = PropTypes.oneOfType([PropTypes.oneOf([...paletteNames, 'black', 'white']), PropTypes.bool]);
-const appearanceType = PropTypes.shape({
-  bg: bgBorderValueType,
-  border: bgBorderValueType,
-  text: textValueType
-});
 const propTypes = {
   palette: PropTypes.oneOf(Object.values(PALETTE)),
-  appearance: appearanceType,
-  hoverAppearance: appearanceType,
-  selectedAppearance: appearanceType,
+  bgAppearance: PropTypes.oneOf(Object.values(BG_APPEARANCE)),
+  borderAppearance: PropTypes.oneOf(Object.values(BORDER_APPEARANCE)),
   variant: PropTypes.oneOf(Object.values(VARIANT)),
   size: PropTypes.oneOf(Object.values(SIZE)),
   status: PropTypes.oneOf(Object.values(STATUS)),
@@ -21,6 +12,7 @@ const propTypes = {
   iconName: PropTypes.string,
   iconSize: PropTypes.number,
   iconPlacement: PropTypes.oneOf(Object.values(ICON_PLACEMENT)),
+  paletteShade: PropTypes.oneOf(Object.values(PALETTE_SHADE)),
   disabledAppearance: PropTypes.oneOf(Object.values(DISABLED_APPEARANCE)),
   renderIcon: renderSlotType,
   renderBefore: renderSlotType,
@@ -31,31 +23,21 @@ const propTypes = {
   type: PropTypes.oneOf(Object.values(BUTTON_TYPE)),
   onClick: PropTypes.func,
   isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
   isSelected: PropTypes.bool,
   shape: PropTypes.oneOf(Object.values(SHAPE)),
   title: PropTypes.string,
   customClass: PropTypes.shape({
     wrapper: PropTypes.string,
-    text: PropTypes.string,
-    icon: PropTypes.string,
-    loader: PropTypes.string,
-    success: PropTypes.string
+    text: PropTypes.string
   }),
   customProps: PropTypes.shape({
     text: PropTypes.object,
     icon: PropTypes.object
   }),
-  customAttributes: PropTypes.shape({
-    button: PropTypes.object,
-    contentWrapper: PropTypes.object,
-    loader: PropTypes.object,
-    success: PropTypes.object,
-    icon: PropTypes.object,
-    text: PropTypes.object
-  }),
+  customAttributes: PropTypes.object,
   a11yAttributes: PropTypes.object,
   customId: PropTypes.string,
-  testId: PropTypes.string,
-  dataSelectorId: PropTypes.string
+  testId: PropTypes.string
 };
 export default propTypes;

package/es/v1/helpers/colorHelpers/background/backgroundColor.module.css

@@ -1,83 +1,83 @@
 /* Theme-aware Brand Palette (changes with CTA theme selection) */
 .bg-brand-80 {
-    background-color: var(--zd-bg-brand);
+    background-color: var(--zdt_v1_palette_brand_bg);
 }
 
 .hover\:bg-brand-80:hover {
-    background-color: var(--zd-bg-brand);
+    background-color: var(--zdt_v1_palette_brand_bg);
 }
 
 .focus\:bg-brand-80:focus {
-    background-color: var(--zd-bg-brand);
+    background-color: var(--zdt_v1_palette_brand_bg);
 }
 
 .active\:bg-brand-80:active {
-    background-color: var(--zd-bg-brand);
+    background-color: var(--zdt_v1_palette_brand_bg);
 }
 
 .selected\:bg-brand-80 {
-    background-color: var(--zd-bg-brand);
+    background-color: var(--zdt_v1_palette_brand_bg);
 }
 
 .bg-brand-100 {
-    background-color: var(--zd-bg-brand-hover);
+    background-color: var(--zdt_v1_palette_brand_hover_bg);
 }
 
 .hover\:bg-brand-100:hover {
-    background-color: var(--zd-bg-brand-hover);
+    background-color: var(--zdt_v1_palette_brand_hover_bg);
 }
 
 .focus\:bg-brand-100:focus {
-    background-color: var(--zd-bg-brand-hover);
+    background-color: var(--zdt_v1_palette_brand_hover_bg);
 }
 
 .active\:bg-brand-100:active {
-    background-color: var(--zd-bg-brand-hover);
+    background-color: var(--zdt_v1_palette_brand_hover_bg);
 }
 
 .selected\:bg-brand-100 {
-    background-color: var(--zd-bg-brand-hover);
+    background-color: var(--zdt_v1_palette_brand_hover_bg);
 }
 
 .bg-brand-10 {
-    background-color: var(--zd-bg-brandLight);
+    background-color: var(--zdt_v1_palette_brand_light_bg);
 }
 
 .hover\:bg-brand-10:hover {
-    background-color: var(--zd-bg-brandLight);
+    background-color: var(--zdt_v1_palette_brand_light_bg);
 }
 
 .focus\:bg-brand-10:focus {
-    background-color: var(--zd-bg-brandLight);
+    background-color: var(--zdt_v1_palette_brand_light_bg);
 }
 
 .active\:bg-brand-10:active {
-    background-color: var(--zd-bg-brandLight);
+    background-color: var(--zdt_v1_palette_brand_light_bg);
 }
 
 .selected\:bg-brand-10 {
-    background-color: var(--zd-bg-brandLight);
+    background-color: var(--zdt_v1_palette_brand_light_bg);
 }
 
 /* color not available */
 .bg-brand-20 {
-    background-color: var(--zd-bg-brandLight-hover);
+    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
 }
 
 .hover\:bg-brand-20:hover {
-    background-color: var(--zd-bg-brandLight-hover);
+    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
 }
 
 .focus\:bg-brand-20:focus {
-    background-color: var(--zd-bg-brandLight-hover);
+    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
 }
 
 .active\:bg-brand-20:active {
-    background-color: var(--zd-bg-brandLight-hover);
+    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
 }
 
 .selected\:bg-brand-20 {
-    background-color: var(--zd-bg-brandLight-hover);
+    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
 }
 
 /* Static Grey Palette */
@@ -122,64 +122,64 @@
 }
 
 .bg-grey-10 {
-    background-color: var(--zd-bg-secondary);
+    background-color: var(--zdt_v1_palette_grey_light_bg);
 }
 
 .hover\:bg-grey-10:hover {
-    background-color: var(--zd-bg-secondary);
+    background-color: var(--zdt_v1_palette_grey_light_bg);
 }
 
 .focus\:bg-grey-10:focus {
-    background-color: var(--zd-bg-secondary);
+    background-color: var(--zdt_v1_palette_grey_light_bg);
 }
 
 .active\:bg-grey-10:active {
-    background-color: var(--zd-bg-secondary);
+    background-color: var(--zdt_v1_palette_grey_light_bg);
 }
 
 .selected\:bg-grey-10 {
-    background-color: var(--zd-bg-secondary);
+    background-color: var(--zdt_v1_palette_grey_light_bg);
 }
 
-.bg-grey-20 {
+.bg-grey-15 {
     background-color: var(--zdt_v1_palette_grey_light_hover_bg);
 }
 
-.hover\:bg-grey-20:hover {
+.hover\:bg-grey-15:hover {
     background-color: var(--zdt_v1_palette_grey_light_hover_bg);
 }
 
-.focus\:bg-grey-20:focus {
+.focus\:bg-grey-15:focus {
     background-color: var(--zdt_v1_palette_grey_light_hover_bg);
 }
 
-.active\:bg-grey-20:active {
+.active\:bg-grey-15:active {
     background-color: var(--zdt_v1_palette_grey_light_hover_bg);
 }
 
-.selected\:bg-grey-20 {
+.selected\:bg-grey-15 {
     background-color: var(--zdt_v1_palette_grey_light_hover_bg);
 }
 
 /* Static Blue Palette */
 .bg-blue-80 {
-    background-color: var(--zd-bg-info);
+    background-color: var(--zdt_v1_palette_blue_bg);
 }
 
 .hover\:bg-blue-80:hover {
-    background-color: var(--zd-bg-info);
+    background-color: var(--zdt_v1_palette_blue_bg);
 }
 
 .focus\:bg-blue-80:focus {
-    background-color: var(--zd-bg-info);
+    background-color: var(--zdt_v1_palette_blue_bg);
 }
 
 .active\:bg-blue-80:active {
-    background-color: var(--zd-bg-info);
+    background-color: var(--zdt_v1_palette_blue_bg);
 }
 
 .selected\:bg-blue-80 {
-    background-color: var(--zd-bg-info);
+    background-color: var(--zdt_v1_palette_blue_bg);
 }
 
 .bg-blue-100 {
@@ -569,23 +569,23 @@
 
 /* Utility Colors */
 .bg-transparent {
-    background-color: var(--zd-bg-transparent);
+    background-color: var(--dot_mirror);
 }
 
 .hover\:bg-transparent:hover {
-    background-color: var(--zd-bg-transparent);
+    background-color: var(--dot_mirror);
 }
 
 .focus\:bg-transparent:focus {
-    background-color: var(--zd-bg-transparent);
+    background-color: var(--dot_mirror);
 }
 
 .active\:bg-transparent:active {
-    background-color: var(--zd-bg-transparent);
+    background-color: var(--dot_mirror);
 }
 
 .selected\:bg-transparent {
-    background-color: var(--zd-bg-transparent);
+    background-color: var(--dot_mirror);
 }
 
 .bg-white {