@zohodesk/components/es/v1/helpers/colorHelpers/colorHelper.js

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

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 toTextIntensity = (tone, hasState) => {
  const intensity = TONE_INTENSITY[tone];

  if (!intensity) {
    return tone;
  }

  if (hasState) {
    return `${tone}-${intensity.textHover ?? intensity.hover}`;
  }

  return `${tone}-${intensity.base}`;
};

const toBorderIntensity = (tone, hasState, isLighter) => {
  const intensity = TONE_INTENSITY[tone];

  if (!intensity) {
    return tone;
  }

  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,
  tone,
  isLighter
}) => paletteBorderStyle[withState(state, `border-${toBorderIntensity(tone, !!state, isLighter)}`)];

const buildPaletteClasses = (config, {
  bgAppearance,
  borderAppearance,
  paletteShade,
  isSelected
}) => {
  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: 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,
  bgAppearance,
  borderAppearance,
  paletteShade,
  isSelected
}) => {
  const config = PALETTE_CONFIG[palette];
  return config ? buildPaletteClasses(config, {
    bgAppearance,
    borderAppearance,
    paletteShade,
    isSelected
  }) : DUMMY_OBJECT;
};

export default getPaletteClasses;