@zohodesk/components/lib/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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getTextClass = exports.getBorderClass = exports.getBgClass = exports["default"] = void 0;

var _backgroundColorModule = _interopRequireDefault(require("./background/backgroundColor.module.css"));

var _borderColorModule = _interopRequireDefault(require("./border/borderColor.module.css"));

var _textColorModule = _interopRequireDefault(require("./text/textColor.module.css"));

var _constants = require("@zohodesk/dotkit/es/utils/constants");

var _constants2 = require("./constants");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var withState = function withState(state, key) {
  return state ? "".concat(state, ":").concat(key) : key;
};

var toBgIntensity = function toBgIntensity(tone, hasState, isLighter) {
  var intensity = _constants2.TONE_INTENSITY[tone];

  if (!intensity) {
    return tone;
  }

  if (hasState) {
    return "".concat(tone, "-").concat(isLighter ? intensity.lightHover : intensity.hover);
  }

  return "".concat(tone, "-").concat(isLighter ? intensity.light : intensity.base);
};

var toTextIntensity = function toTextIntensity(tone, hasState) {
  var intensity = _constants2.TONE_INTENSITY[tone];

  if (!intensity) {
    return tone;
  }

  if (hasState) {
    var _intensity$textHover;

    return "".concat(tone, "-").concat((_intensity$textHover = intensity.textHover) !== null && _intensity$textHover !== void 0 ? _intensity$textHover : intensity.hover);
  }

  return "".concat(tone, "-").concat(intensity.base);
};

var toBorderIntensity = function toBorderIntensity(tone, hasState, isLighter) {
  var intensity = _constants2.TONE_INTENSITY[tone];

  if (!intensity) {
    return tone;
  }

  if (hasState) {
    return "".concat(tone, "-").concat(intensity.hover);
  }

  return "".concat(tone, "-").concat(isLighter ? intensity.borderLight : intensity.base);
};

var getBgClass = function getBgClass(_ref) {
  var state = _ref.state,
      tone = _ref.tone,
      isLighter = _ref.isLighter;
  return _backgroundColorModule["default"][withState(state, "bg-".concat(toBgIntensity(tone, !!state, isLighter)))];
};

exports.getBgClass = getBgClass;

var getTextClass = function getTextClass(_ref2) {
  var state = _ref2.state,
      textTone = _ref2.textTone;
  return _textColorModule["default"][withState(state, "text-".concat(toTextIntensity(textTone, !!state)))];
};

exports.getTextClass = getTextClass;

var getBorderClass = function getBorderClass(_ref3) {
  var state = _ref3.state,
      tone = _ref3.tone,
      isLighter = _ref3.isLighter;
  return _borderColorModule["default"][withState(state, "border-".concat(toBorderIntensity(tone, !!state, isLighter)))];
};

exports.getBorderClass = getBorderClass;

var buildPaletteClasses = function buildPaletteClasses(config, _ref4) {
  var bgAppearance = _ref4.bgAppearance,
      borderAppearance = _ref4.borderAppearance,
      paletteShade = _ref4.paletteShade,
      isSelected = _ref4.isSelected;
  var tone = config.tone,
      textTone = config.textTone,
      filledTextTone = config.filledTextTone;
  var isLighter = paletteShade === 'lighter';
  var hasBgState = bgAppearance !== 'none';
  var isFilledBg = bgAppearance === 'default';
  var hasBorderState = borderAppearance !== 'none';
  var hasTransparentBorder = borderAppearance === 'onHover' || borderAppearance === 'none';
  var baseTextTone = isFilledBg && !isLighter ? filledTextTone : textTone;
  var stateTextTone = hasBgState && !isLighter ? filledTextTone : textTone;
  return {
    bg: isSelected ? hasBgState ? getBgClass({
      state: 'selected',
      tone: tone,
      isLighter: isLighter
    }) : '' : isFilledBg ? getBgClass({
      tone: tone,
      isLighter: isLighter
    }) : '',
    hoverBg: hasBgState ? getBgClass({
      state: 'hover',
      tone: tone,
      isLighter: isLighter
    }) : '',
    focusBg: hasBgState ? getBgClass({
      state: 'focus',
      tone: tone,
      isLighter: isLighter
    }) : '',
    activeBg: hasBgState ? getBgClass({
      state: 'active',
      tone: tone,
      isLighter: 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: tone
    }) : hasTransparentBorder ? getBorderClass({
      tone: 'transparent'
    }) : getBorderClass({
      tone: tone,
      isLighter: isLighter
    }),
    hoverBorder: hasBorderState ? getBorderClass({
      state: 'hover',
      tone: tone
    }) : '',
    focusBorder: hasBorderState ? getBorderClass({
      state: 'focus',
      tone: tone
    }) : '',
    activeBorder: hasBorderState ? getBorderClass({
      state: 'active',
      tone: tone
    }) : ''
  };
};

var getPaletteClasses = function getPaletteClasses(_ref5) {
  var palette = _ref5.palette,
      bgAppearance = _ref5.bgAppearance,
      borderAppearance = _ref5.borderAppearance,
      paletteShade = _ref5.paletteShade,
      isSelected = _ref5.isSelected;
  var config = _constants2.PALETTE_CONFIG[palette];
  return config ? buildPaletteClasses(config, {
    bgAppearance: bgAppearance,
    borderAppearance: borderAppearance,
    paletteShade: paletteShade,
    isSelected: isSelected
  }) : _constants.DUMMY_OBJECT;
};

var _default = getPaletteClasses;
exports["default"] = _default;