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

package/es/v1/helpers/colorHelpers/border/borderColor.module.css

@@ -62,84 +62,84 @@
 
 /* Static Grey Palette */
 .border-grey-65 {
-    border-color: var(--zd-border-secondary);
+    border-color: var(--zdt_v1_palette_grey_border);
 }
 
 .hover\:border-grey-65:hover {
-    border-color: var(--zd-border-secondary);
+    border-color: var(--zdt_v1_palette_grey_border);
 }
 
 .focus\:border-grey-65:focus {
-    border-color: var(--zd-border-secondary);
+    border-color: var(--zdt_v1_palette_grey_border);
 }
 
 .active\:border-grey-65:active {
-    border-color: var(--zd-border-secondary);
+    border-color: var(--zdt_v1_palette_grey_border);
 }
 
 .selected\:border-grey-65 {
-    border-color: var(--zd-border-secondary);
+    border-color: var(--zdt_v1_palette_grey_border);
 }
 
 .border-grey-55 {
-    border-color: var(--zd-border-tertiary);
+    border-color: var(--zdt_v1_palette_grey_hover_border);
 }
 
 .hover\:border-grey-55:hover {
-    border-color: var(--zd-border-tertiary);
+    border-color: var(--zdt_v1_palette_grey_hover_border);
 }
 
 .focus\:border-grey-55:focus {
-    border-color: var(--zd-border-tertiary);
+    border-color: var(--zdt_v1_palette_grey_hover_border);
 }
 
 .active\:border-grey-55:active {
-    border-color: var(--zd-border-tertiary);
+    border-color: var(--zdt_v1_palette_grey_hover_border);
 }
 
 .selected\:border-grey-55 {
-    border-color: var(--zd-border-tertiary);
+    border-color: var(--zdt_v1_palette_grey_hover_border);
 }
 
-.border-grey-20 {
-    border-color: var(--zd-border-secondary);
+.border-grey-15 {
+    border-color: var(--zdt_v1_palette_grey_light_border);
 }
 
-.hover\:border-grey-20:hover {
-    border-color: var(--zd-border-secondary);
+.hover\:border-grey-15:hover {
+    border-color: var(--zdt_v1_palette_grey_light_border);
 }
 
-.focus\:border-grey-20:focus {
-    border-color: var(--zd-border-secondary);
+.focus\:border-grey-15:focus {
+    border-color: var(--zdt_v1_palette_grey_light_border);
 }
 
-.active\:border-grey-20:active {
-    border-color: var(--zd-border-secondary);
+.active\:border-grey-15:active {
+    border-color: var(--zdt_v1_palette_grey_light_border);
 }
 
-.selected\:border-grey-20 {
-    border-color: var(--zd-border-secondary);
+.selected\:border-grey-15 {
+    border-color: var(--zdt_v1_palette_grey_light_border);
 }
 
 /* Static Blue Palette */
 .border-blue-80 {
-    border-color: var(--zd-border-info);
+    border-color: var(--zdt_v1_palette_blue_border);
 }
 
 .hover\:border-blue-80:hover {
-    border-color: var(--zd-border-info);
+    border-color: var(--zdt_v1_palette_blue_border);
 }
 
 .focus\:border-blue-80:focus {
-    border-color: var(--zd-border-info);
+    border-color: var(--zdt_v1_palette_blue_border);
 }
 
 .active\:border-blue-80:active {
-    border-color: var(--zd-border-info);
+    border-color: var(--zdt_v1_palette_blue_border);
 }
 
 .selected\:border-blue-80 {
-    border-color: var(--zd-border-info);
+    border-color: var(--zdt_v1_palette_blue_border);
 }
 
 .border-blue-100 {

package/es/v1/helpers/colorHelpers/colorHelper.js

@@ -1,146 +1,168 @@
 import paletteBgStyle from "./background/backgroundColor.module.css";
 import paletteBorderStyle from "./border/borderColor.module.css";
 import paletteTextStyle from "./text/textColor.module.css";
+import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
 import { PALETTE_CONFIG, TONE_INTENSITY } from "./constants";
 
 const withState = (state, key) => state ? `${state}:${key}` : key;
 
-const resolveConfig = (value, paletteConfig) => {
-  if (!value) return null;
-  if (value === true) return paletteConfig ? { ...paletteConfig,
-    isInherit: true
-  } : null;
-  return PALETTE_CONFIG[value] || {
-    tone: value,
-    textTone: value,
-    filledTextTone: value
-  };
-};
+const toBgIntensity = (tone, hasState, isLighter) => {
+  const intensity = TONE_INTENSITY[tone];
 
-const isContinuingTone = (config, restConfig) => !!(config && restConfig && config.tone === restConfig.tone && !!config.isLighter === !!restConfig.isLighter);
+  if (!intensity) {
+    return tone;
+  }
 
-const getBgClass = (state, config, darker) => {
-  const {
-    tone,
-    isLighter
-  } = config;
-  const intensity = TONE_INTENSITY[tone];
-  if (!intensity) return paletteBgStyle[withState(state, `bg-${tone}`)];
-  const shade = darker ? isLighter ? intensity.lightHover : intensity.hover : isLighter ? intensity.light : intensity.base;
-  return paletteBgStyle[withState(state, `bg-${tone}-${shade}`)];
+  if (hasState) {
+    return `${tone}-${isLighter ? intensity.lightHover : intensity.hover}`;
+  }
+
+  return `${tone}-${isLighter ? intensity.light : intensity.base}`;
 };
 
-const getBorderClass = (state, config, darker) => {
-  const {
-    tone,
-    isLighter
-  } = config;
+const toTextIntensity = (tone, hasState) => {
   const intensity = TONE_INTENSITY[tone];
-  if (!intensity) return paletteBorderStyle[withState(state, `border-${tone}`)];
-  const shade = darker ? intensity.hover : isLighter ? intensity.borderLight : intensity.base;
-  return paletteBorderStyle[withState(state, `border-${tone}-${shade}`)];
-};
 
-const getTextClass = (state, textTone, darker) => {
-  const intensity = TONE_INTENSITY[textTone];
-  if (!intensity) return paletteTextStyle[withState(state, `text-${textTone}`)];
-  const shade = darker ? intensity.textHover ?? intensity.hover : intensity.base;
-  return paletteTextStyle[withState(state, `text-${textTone}-${shade}`)];
-};
+  if (!intensity) {
+    return tone;
+  }
+
+  if (hasState) {
+    return `${tone}-${intensity.textHover ?? intensity.hover}`;
+  }
 
-const resolveTextTone = (textConfig, bgConfig) => {
-  if (!textConfig) return null;
-  if (textConfig.isInherit && bgConfig) return bgConfig.isLighter ? textConfig.textTone : textConfig.filledTextTone;
-  return textConfig.textTone || null;
+  return `${tone}-${intensity.base}`;
 };
 
-const BG_BORDER_INVALID = new Set(['black', 'white']);
-const TEXT_INVALID = new Set(['transparent']);
+const toBorderIntensity = (tone, hasState, isLighter) => {
+  const intensity = TONE_INTENSITY[tone];
+
+  if (!intensity) {
+    return tone;
+  }
 
-const buildStateClasses = ({
-  appearance,
+  if (hasState) {
+    return `${tone}-${intensity.hover}`;
+  }
+
+  return `${tone}-${isLighter ? intensity.borderLight : intensity.base}`;
+};
+
+export const getBgClass = ({
+  state,
+  tone,
+  isLighter
+}) => paletteBgStyle[withState(state, `bg-${toBgIntensity(tone, !!state, isLighter)}`)];
+export const getTextClass = ({
+  state,
+  textTone
+}) => paletteTextStyle[withState(state, `text-${toTextIntensity(textTone, !!state)}`)];
+export const getBorderClass = ({
   state,
-  paletteConfig,
-  restAppearance,
-  restPaletteConfig,
-  textFallbackBgConfig
+  tone,
+  isLighter
+}) => paletteBorderStyle[withState(state, `border-${toBorderIntensity(tone, !!state, isLighter)}`)];
+
+const buildPaletteClasses = (config, {
+  bgAppearance,
+  borderAppearance,
+  paletteShade,
+  isSelected
 }) => {
-  if (!appearance) return {
-    bg: '',
-    text: '',
-    border: ''
-  };
-  const rawBgConfig = resolveConfig(appearance.bg, paletteConfig);
-  const rawBorderConfig = resolveConfig(appearance.border, paletteConfig);
-  const rawTextConfig = resolveConfig(appearance.text, paletteConfig);
-  const bgConfig = rawBgConfig && !BG_BORDER_INVALID.has(rawBgConfig.tone) ? rawBgConfig : null;
-  const borderConfig = rawBorderConfig && !BG_BORDER_INVALID.has(rawBorderConfig.tone) ? rawBorderConfig : null;
-  const textConfig = rawTextConfig && !TEXT_INVALID.has(rawTextConfig.tone) ? rawTextConfig : null;
-  const restBgConfig = restAppearance ? resolveConfig(restAppearance.bg, restPaletteConfig) : null;
-  const restBorderConfig = restAppearance ? resolveConfig(restAppearance.border, restPaletteConfig) : null;
-  const restTextConfig = restAppearance ? resolveConfig(restAppearance.text, restPaletteConfig) : null;
-  const bg = bgConfig ? getBgClass(state, bgConfig, isContinuingTone(bgConfig, restBgConfig)) || '' : '';
-  const border = borderConfig ? getBorderClass(state, borderConfig, isContinuingTone(borderConfig, restBorderConfig)) || '' : state ? '' : paletteBorderStyle['border-transparent'] || '';
-  const effectiveBgForText = bgConfig || textFallbackBgConfig || restBgConfig || null;
-  const textTone = resolveTextTone(textConfig, effectiveBgForText);
-  const restTextTone = resolveTextTone(restTextConfig, restBgConfig);
-  const text = textTone ? getTextClass(state, textTone, textTone === restTextTone) || '' : '';
+  const {
+    tone,
+    textTone,
+    filledTextTone
+  } = config;
+  const isLighter = paletteShade === 'lighter';
+  const hasBgState = bgAppearance !== 'none';
+  const isFilledBg = bgAppearance === 'default';
+  const hasBorderState = borderAppearance !== 'none';
+  const hasTransparentBorder = borderAppearance === 'onHover' || borderAppearance === 'none';
+  const baseTextTone = isFilledBg && !isLighter ? filledTextTone : textTone;
+  const stateTextTone = hasBgState && !isLighter ? filledTextTone : textTone;
   return {
-    bg,
-    text,
-    border
+    bg: isSelected ? hasBgState ? getBgClass({
+      state: 'selected',
+      tone,
+      isLighter
+    }) : '' : isFilledBg ? getBgClass({
+      tone,
+      isLighter
+    }) : '',
+    hoverBg: hasBgState ? getBgClass({
+      state: 'hover',
+      tone,
+      isLighter
+    }) : '',
+    focusBg: hasBgState ? getBgClass({
+      state: 'focus',
+      tone,
+      isLighter
+    }) : '',
+    activeBg: hasBgState ? getBgClass({
+      state: 'active',
+      tone,
+      isLighter
+    }) : '',
+    text: isSelected ? getTextClass({
+      state: 'selected',
+      textTone: hasBgState ? stateTextTone : baseTextTone
+    }) : getTextClass({
+      textTone: baseTextTone
+    }),
+    hoverText: getTextClass({
+      state: 'hover',
+      textTone: stateTextTone
+    }),
+    focusText: getTextClass({
+      state: 'focus',
+      textTone: stateTextTone
+    }),
+    activeText: getTextClass({
+      state: 'active',
+      textTone: stateTextTone
+    }),
+    border: isSelected ? !hasBorderState ? getBorderClass({
+      tone: 'transparent'
+    }) : getBorderClass({
+      state: 'selected',
+      tone
+    }) : hasTransparentBorder ? getBorderClass({
+      tone: 'transparent'
+    }) : getBorderClass({
+      tone,
+      isLighter
+    }),
+    hoverBorder: hasBorderState ? getBorderClass({
+      state: 'hover',
+      tone
+    }) : '',
+    focusBorder: hasBorderState ? getBorderClass({
+      state: 'focus',
+      tone
+    }) : '',
+    activeBorder: hasBorderState ? getBorderClass({
+      state: 'active',
+      tone
+    }) : ''
   };
 };
 
 const getPaletteClasses = ({
   palette,
-  appearance,
-  hoverAppearance,
-  selectedAppearance
+  bgAppearance,
+  borderAppearance,
+  paletteShade,
+  isSelected
 }) => {
-  const paletteConfig = PALETTE_CONFIG[palette];
-  const base = buildStateClasses({
-    appearance,
-    state: undefined,
-    paletteConfig
-  });
-  const rawRestBgConfig = resolveConfig(appearance?.bg, paletteConfig);
-  const restBgForText = rawRestBgConfig && !BG_BORDER_INVALID.has(rawRestBgConfig.tone) ? rawRestBgConfig : null;
-  const selected = buildStateClasses({
-    appearance: selectedAppearance,
-    state: 'selected',
-    paletteConfig,
-    textFallbackBgConfig: restBgForText
-  });
-
-  const buildInteractive = state => buildStateClasses({
-    appearance: hoverAppearance,
-    state,
-    paletteConfig,
-    restAppearance: appearance,
-    restPaletteConfig: paletteConfig
-  });
-
-  const hover = buildInteractive('hover');
-  const focus = buildInteractive('focus');
-  const active = buildInteractive('active');
-  return {
-    bg: base.bg,
-    selectedBg: selected.bg,
-    hoverBg: hover.bg,
-    focusBg: focus.bg,
-    activeBg: active.bg,
-    text: base.text,
-    selectedText: selected.text,
-    hoverText: hover.text,
-    focusText: focus.text,
-    activeText: active.text,
-    border: base.border,
-    selectedBorder: selected.border,
-    hoverBorder: hover.border,
-    focusBorder: focus.border,
-    activeBorder: active.border
-  };
+  const config = PALETTE_CONFIG[palette];
+  return config ? buildPaletteClasses(config, {
+    bgAppearance,
+    borderAppearance,
+    paletteShade,
+    isSelected
+  }) : DUMMY_OBJECT;
 };
 
 export default getPaletteClasses;

package/es/v1/helpers/colorHelpers/constants/index.js

@@ -10,8 +10,8 @@ export const TONE_INTENSITY = {
     base: 65,
     hover: 55,
     light: 10,
-    lightHover: 20,
-    borderLight: 20,
+    lightHover: 15,
+    borderLight: 15,
     textHover: 100
   },
   blue: {
@@ -51,70 +51,29 @@ export const TONE_INTENSITY = {
   }
 };
 export const PALETTE_CONFIG = {
-  brand: {
+  default: {
     tone: 'brand',
     textTone: 'brand',
     filledTextTone: 'brand-filled'
   },
-  brandLighter: {
-    tone: 'brand',
-    textTone: 'brand',
-    filledTextTone: 'brand',
-    isLighter: true
-  },
-  info: {
+  primary: {
     tone: 'blue',
     textTone: 'blue',
     filledTextTone: 'white'
   },
-  infoLighter: {
-    tone: 'blue',
-    textTone: 'blue',
-    filledTextTone: 'blue',
-    isLighter: true
-  },
   secondary: {
     tone: 'grey',
     textTone: 'grey',
     filledTextTone: 'white'
   },
-  secondaryLighter: {
-    tone: 'grey',
-    textTone: 'grey',
-    filledTextTone: 'grey',
-    isLighter: true
-  },
   danger: {
     tone: 'red',
     textTone: 'red',
     filledTextTone: 'white'
   },
-  dangerLighter: {
-    tone: 'red',
-    textTone: 'red',
-    filledTextTone: 'red',
-    isLighter: true
-  },
   success: {
     tone: 'green',
     textTone: 'green',
     filledTextTone: 'white'
-  },
-  successLighter: {
-    tone: 'green',
-    textTone: 'green',
-    filledTextTone: 'green',
-    isLighter: true
-  },
-  warning: {
-    tone: 'orange',
-    textTone: 'orange',
-    filledTextTone: 'white'
-  },
-  warningLighter: {
-    tone: 'orange',
-    textTone: 'orange',
-    filledTextTone: 'orange',
-    isLighter: true
   }
 };

package/es/v1/helpers/colorHelpers/text/textColor.module.css

@@ -1,22 +1,22 @@
 /* Theme-aware Brand Palette (changes with CTA theme selection) */
 .text-brand-80 {
-    color: var(--zd-text-brand);
+    color: var(--zdt_v1_palette_brand_text);
 }
 
 .hover\:text-brand-80:hover {
-    color: var(--zd-text-brand);
+    color: var(--zdt_v1_palette_brand_text);
 }
 
 .focus\:text-brand-80:focus {
-    color: var(--zd-text-brand);
+    color: var(--zdt_v1_palette_brand_text);
 }
 
 .active\:text-brand-80:active {
-    color: var(--zd-text-brand);
+    color: var(--zdt_v1_palette_brand_text);
 }
 
 .selected\:text-brand-80 {
-    color: var(--zd-text-brand);
+    color: var(--zdt_v1_palette_brand_text);
 }
 
 .text-brand-100 {
@@ -41,23 +41,23 @@
 
 /* Static Grey Palette */
 .text-grey-65 {
-    color: var(--zd-text-secondary);
+    color: var(--zdt_v1_palette_grey_text);
 }
 
 .hover\:text-grey-65:hover {
-    color: var(--zd-text-secondary);
+    color: var(--zdt_v1_palette_grey_text);
 }
 
 .focus\:text-grey-65:focus {
-    color: var(--zd-text-secondary);
+    color: var(--zdt_v1_palette_grey_text);
 }
 
 .active\:text-grey-65:active {
-    color: var(--zd-text-secondary);
+    color: var(--zdt_v1_palette_grey_text);
 }
 
 .selected\:text-grey-65 {
-    color: var(--zd-text-secondary);
+    color: var(--zdt_v1_palette_grey_text);
 }
 
 .text-grey-100 {
@@ -82,43 +82,43 @@
 
 /* Static Blue Palette */
 .text-blue-80 {
-    color: var(--zd-text-info);
+    color: var(--zdt_v1_palette_blue_text);
 }
 
 .hover\:text-blue-80:hover {
-    color: var(--zd-text-info);
+    color: var(--zdt_v1_palette_blue_text);
 }
 
 .focus\:text-blue-80:focus {
-    color: var(--zd-text-info);
+    color: var(--zdt_v1_palette_blue_text);
 }
 
 .active\:text-blue-80:active {
-    color: var(--zd-text-info);
+    color: var(--zdt_v1_palette_blue_text);
 }
 
 .selected\:text-blue-80 {
-    color: var(--zd-text-info);
+    color: var(--zdt_v1_palette_blue_text);
 }
 
 .text-blue-100 {
-    color: var(--zd-text-info-hover);
+    color: var(--zdt_v1_palette_blue_hover_text);
 }
 
 .hover\:text-blue-100:hover {
-    color: var(--zd-text-info-hover);
+    color: var(--zdt_v1_palette_blue_hover_text);
 }
 
 .focus\:text-blue-100:focus {
-    color: var(--zd-text-info-hover);
+    color: var(--zdt_v1_palette_blue_hover_text);
 }
 
 .active\:text-blue-100:active {
-    color: var(--zd-text-info-hover);
+    color: var(--zdt_v1_palette_blue_hover_text);
 }
 
 .selected\:text-blue-100 {
-    color: var(--zd-text-info-hover);
+    color: var(--zdt_v1_palette_blue_hover_text);
 }
 
 /* Static Green Palette */
@@ -307,62 +307,62 @@
 }
 
 .text-white {
-    color: var(--zd-text-inverse);
+    color: var(--zdt_v1_palette_white);
 }
 
 .hover\:text-white:hover {
-    color: var(--zd-text-inverse);
+    color: var(--zdt_v1_palette_white);
 }
 
 .focus\:text-white:focus {
-    color: var(--zd-text-inverse);
+    color: var(--zdt_v1_palette_white);
 }
 
 .active\:text-white:active {
-    color: var(--zd-text-inverse);
+    color: var(--zdt_v1_palette_white);
 }
 
 .selected\:text-white {
-    color: var(--zd-text-inverse);
+    color: var(--zdt_v1_palette_white);
 }
 
 .text-black {
-    color: var(--zd-text-primary);
+    color: var(--zdt_v1_palette_black);
 }
 
 .hover\:text-black:hover {
-    color: var(--zd-text-primary);
+    color: var(--zdt_v1_palette_black);
 }
 
 .focus\:text-black:focus {
-    color: var(--zd-text-primary);
+    color: var(--zdt_v1_palette_black);
 }
 
 .active\:text-black:active {
-    color: var(--zd-text-primary);
+    color: var(--zdt_v1_palette_black);
 }
 
 .selected\:text-black {
-    color: var(--zd-text-primary);
+    color: var(--zdt_v1_palette_black);
 }
 
 /* CTA-aware filled text — adapts to CTA theme */
 .text-brand-filled {
-    color: var(--zd-text-onBrand);
+    color: var(--zdt_v1_palette_brand_filled_text);
 }
 
 .hover\:text-brand-filled:hover {
-    color: var(--zd-text-onBrand);
+    color: var(--zdt_v1_palette_brand_filled_text);
 }
 
 .focus\:text-brand-filled:focus {
-    color: var(--zd-text-onBrand);
+    color: var(--zdt_v1_palette_brand_filled_text);
 }
 
 .active\:text-brand-filled:active {
-    color: var(--zd-text-onBrand);
+    color: var(--zdt_v1_palette_brand_filled_text);
 }
 
 .selected\:text-brand-filled {
-    color: var(--zd-text-onBrand);
+    color: var(--zdt_v1_palette_brand_filled_text);
 }