@zohodesk/components 1.6.24 → 1.6.26

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

@@ -1,168 +1,149 @@
 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 toBgIntensity = (tone, hasState, isLighter) => {
-  const intensity = TONE_INTENSITY[tone];
-
-  if (!intensity) {
-    return tone;
-  }
-
-  if (hasState) {
-    return `${tone}-${isLighter ? intensity.lightHover : intensity.hover}`;
-  }
-
-  return `${tone}-${isLighter ? intensity.light : intensity.base}`;
+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 toTextIntensity = (tone, hasState) => {
-  const intensity = TONE_INTENSITY[tone];
-
-  if (!intensity) {
-    return tone;
-  }
+const isContinuingTone = (config, restConfig) => !!(config && restConfig && config.tone === restConfig.tone && !!config.isLighter === !!restConfig.isLighter);
 
-  if (hasState) {
-    return `${tone}-${intensity.textHover ?? intensity.hover}`;
-  }
-
-  return `${tone}-${intensity.base}`;
+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}`)];
 };
 
-const toBorderIntensity = (tone, hasState, isLighter) => {
+const getBorderClass = (state, config, darker) => {
+  const {
+    tone,
+    isLighter
+  } = config;
   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}`)];
+};
 
-  if (!intensity) {
-    return tone;
-  }
-
-  if (hasState) {
-    return `${tone}-${intensity.hover}`;
-  }
+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}`)];
+};
 
-  return `${tone}-${isLighter ? intensity.borderLight : intensity.base}`;
+const resolveTextTone = (textConfig, bgConfig) => {
+  if (!textConfig) return null;
+  if (textConfig.isInherit && bgConfig) return bgConfig.isLighter ? textConfig.textTone : textConfig.filledTextTone;
+  return textConfig.textTone || null;
 };
 
-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,
-  tone,
-  isLighter
-}) => paletteBorderStyle[withState(state, `border-${toBorderIntensity(tone, !!state, isLighter)}`)];
+const BG_BORDER_INVALID = new Set(['black', 'white']);
+const TEXT_INVALID = new Set(['transparent']);
 
-const buildPaletteClasses = (config, {
-  bgAppearance,
-  borderAppearance,
-  paletteShade,
-  isSelected
+const buildStateClasses = ({
+  appearance,
+  state,
+  paletteConfig,
+  restAppearance,
+  restPaletteConfig,
+  textFallbackBgConfig
 }) => {
-  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;
+  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 rawRestBgConfig = restAppearance ? resolveConfig(restAppearance.bg, restPaletteConfig) : null;
+  const restBgConfig = rawRestBgConfig && !BG_BORDER_INVALID.has(rawRestBgConfig.tone) ? rawRestBgConfig : null;
+  const rawRestBorderConfig = restAppearance ? resolveConfig(restAppearance.border, restPaletteConfig) : null;
+  const restBorderConfig = rawRestBorderConfig && !BG_BORDER_INVALID.has(rawRestBorderConfig.tone) ? rawRestBorderConfig : null;
+  const rawRestTextConfig = restAppearance ? resolveConfig(restAppearance.text, restPaletteConfig) : null;
+  const restTextConfig = rawRestTextConfig && !TEXT_INVALID.has(rawRestTextConfig.tone) ? rawRestTextConfig : 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) || '' : '';
   return {
-    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
-    }) : ''
+    bg,
+    text,
+    border
   };
 };
 
 const getPaletteClasses = ({
   palette,
-  bgAppearance,
-  borderAppearance,
-  paletteShade,
-  isSelected
+  appearance,
+  hoverAppearance,
+  selectedAppearance
 }) => {
-  const config = PALETTE_CONFIG[palette];
-  return config ? buildPaletteClasses(config, {
-    bgAppearance,
-    borderAppearance,
-    paletteShade,
-    isSelected
-  }) : DUMMY_OBJECT;
+  const paletteConfig = PALETTE_CONFIG[palette];
+  const base = buildStateClasses({
+    appearance,
+    state: undefined,
+    paletteConfig
+  });
+  const rawBaseBgConfig = resolveConfig(appearance?.bg, paletteConfig);
+  const restBgForText = rawBaseBgConfig && !BG_BORDER_INVALID.has(rawBaseBgConfig.tone) ? rawBaseBgConfig : 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
+  };
 };
 
 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: 15,
-    borderLight: 15,
+    lightHover: 20,
+    borderLight: 20,
     textHover: 100
   },
   blue: {
@@ -51,29 +51,70 @@ export const TONE_INTENSITY = {
   }
 };
 export const PALETTE_CONFIG = {
-  default: {
+  brand: {
     tone: 'brand',
     textTone: 'brand',
     filledTextTone: 'brand-filled'
   },
-  primary: {
+  brandLighter: {
+    tone: 'brand',
+    textTone: 'brand',
+    filledTextTone: 'brand',
+    isLighter: true
+  },
+  info: {
     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/index.js

@@ -1,4 +1,3 @@
 export { default } from "./colorHelper";
 export { default as getPaletteClasses } from "./colorHelper";
-export { getBgClass, getTextClass, getBorderClass } from "./colorHelper";
 export { PALETTE_CONFIG, TONE_INTENSITY } from "./constants";