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

package/lib/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/lib/v1/helpers/colorHelpers/colorHelper.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.getTextClass = exports.getBorderClass = exports.getBgClass = exports["default"] = void 0;
 
 var _backgroundColorModule = _interopRequireDefault(require("./background/backgroundColor.module.css"));
 
@@ -11,154 +11,182 @@ var _borderColorModule = _interopRequireDefault(require("./border/borderColor.mo
 
 var _textColorModule = _interopRequireDefault(require("./text/textColor.module.css"));
 
-var _constants = require("./constants");
+var _constants = require("@zohodesk/dotkit/es/utils/constants");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+var _constants2 = require("./constants");
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var withState = function withState(state, key) {
   return state ? "".concat(state, ":").concat(key) : key;
 };
 
-var resolveConfig = function resolveConfig(value, paletteConfig) {
-  if (!value) return null;
-  if (value === true) return paletteConfig ? _objectSpread(_objectSpread({}, paletteConfig), {}, {
-    isInherit: true
-  }) : null;
-  return _constants.PALETTE_CONFIG[value] || {
-    tone: value,
-    textTone: value,
-    filledTextTone: value
-  };
+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 isContinuingTone = function isContinuingTone(config, restConfig) {
-  return !!(config && restConfig && config.tone === restConfig.tone && !!config.isLighter === !!restConfig.isLighter);
+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 getBgClass = function getBgClass(state, config, darker) {
-  var tone = config.tone,
-      isLighter = config.isLighter;
-  var intensity = _constants.TONE_INTENSITY[tone];
-  if (!intensity) return _backgroundColorModule["default"][withState(state, "bg-".concat(tone))];
-  var shade = darker ? isLighter ? intensity.lightHover : intensity.hover : isLighter ? intensity.light : intensity.base;
-  return _backgroundColorModule["default"][withState(state, "bg-".concat(tone, "-").concat(shade))];
+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 getBorderClass = function getBorderClass(state, config, darker) {
-  var tone = config.tone,
-      isLighter = config.isLighter;
-  var intensity = _constants.TONE_INTENSITY[tone];
-  if (!intensity) return _borderColorModule["default"][withState(state, "border-".concat(tone))];
-  var shade = darker ? intensity.hover : isLighter ? intensity.borderLight : intensity.base;
-  return _borderColorModule["default"][withState(state, "border-".concat(tone, "-").concat(shade))];
+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)))];
 };
 
-var getTextClass = function getTextClass(state, textTone, darker) {
-  var _intensity$textHover;
+exports.getBgClass = getBgClass;
 
-  var intensity = _constants.TONE_INTENSITY[textTone];
-  if (!intensity) return _textColorModule["default"][withState(state, "text-".concat(textTone))];
-  var shade = darker ? (_intensity$textHover = intensity.textHover) !== null && _intensity$textHover !== void 0 ? _intensity$textHover : intensity.hover : intensity.base;
-  return _textColorModule["default"][withState(state, "text-".concat(textTone, "-").concat(shade))];
-}; // text: true  → isInherit flag இருக்கும் → bg context-ல இருந்து filledTextTone/textTone pick பண்ணும்
-// text: 'red' → directly textTone use பண்ணும்
-// text absent → null → no text
+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 resolveTextTone = function resolveTextTone(textConfig, bgConfig) {
-  if (!textConfig) return null;
-  if (textConfig.isInherit && bgConfig) return bgConfig.isLighter ? bgConfig.textTone : bgConfig.filledTextTone;
-  return textConfig.textTone || null;
+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)))];
 };
 
-var BG_BORDER_INVALID = new Set(['black', 'white']);
-var TEXT_INVALID = new Set(['transparent']);
-
-var buildStateClasses = function buildStateClasses(_ref) {
-  var appearance = _ref.appearance,
-      state = _ref.state,
-      paletteConfig = _ref.paletteConfig,
-      restAppearance = _ref.restAppearance,
-      restPaletteConfig = _ref.restPaletteConfig;
-  if (!appearance) return {
-    bg: '',
-    text: '',
-    border: ''
-  };
-  var rawBgConfig = resolveConfig(appearance.bg, paletteConfig);
-  var rawBorderConfig = resolveConfig(appearance.border, paletteConfig);
-  var rawTextConfig = resolveConfig(appearance.text, paletteConfig);
-  var bgConfig = rawBgConfig && !BG_BORDER_INVALID.has(rawBgConfig.tone) ? rawBgConfig : null;
-  var borderConfig = rawBorderConfig && !BG_BORDER_INVALID.has(rawBorderConfig.tone) ? rawBorderConfig : null;
-  var textConfig = rawTextConfig && !TEXT_INVALID.has(rawTextConfig.tone) ? rawTextConfig : null;
-  var restBgConfig = restAppearance ? resolveConfig(restAppearance.bg, restPaletteConfig) : null;
-  var restBorderConfig = restAppearance ? resolveConfig(restAppearance.border, restPaletteConfig) : null;
-  var restTextConfig = restAppearance ? resolveConfig(restAppearance.text, restPaletteConfig) : null;
-  var bg = bgConfig ? getBgClass(state, bgConfig, isContinuingTone(bgConfig, restBgConfig)) || '' : '';
-  var border = borderConfig ? getBorderClass(state, borderConfig, isContinuingTone(borderConfig, restBorderConfig)) || '' : state ? '' : _borderColorModule["default"]['border-transparent'] || '';
-  var textTone = resolveTextTone(textConfig, bgConfig);
-  var restTextTone = resolveTextTone(restTextConfig, restBgConfig);
-  var text = textTone ? getTextClass(state, textTone, textTone === restTextTone) || '' : '';
+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: bg,
-    text: text,
-    border: border
+    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(_ref2) {
-  var palette = _ref2.palette,
-      appearance = _ref2.appearance,
-      hoverAppearance = _ref2.hoverAppearance,
-      selectedAppearance = _ref2.selectedAppearance;
-  var paletteConfig = _constants.PALETTE_CONFIG[palette];
-  var base = buildStateClasses({
-    appearance: appearance,
-    state: undefined,
-    paletteConfig: paletteConfig
-  });
-  var selected = buildStateClasses({
-    appearance: selectedAppearance,
-    state: 'selected',
-    paletteConfig: paletteConfig
-  });
-
-  var buildInteractive = function buildInteractive(state) {
-    return buildStateClasses({
-      appearance: hoverAppearance,
-      state: state,
-      paletteConfig: paletteConfig,
-      restAppearance: appearance,
-      restPaletteConfig: paletteConfig
-    });
-  };
-
-  var hover = buildInteractive('hover');
-  var focus = buildInteractive('focus');
-  var 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
-  };
+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;

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

@@ -16,8 +16,8 @@ var TONE_INTENSITY = {
     base: 65,
     hover: 55,
     light: 10,
-    lightHover: 20,
-    borderLight: 20,
+    lightHover: 15,
+    borderLight: 15,
     textHover: 100
   },
   blue: {
@@ -58,71 +58,30 @@ var TONE_INTENSITY = {
 };
 exports.TONE_INTENSITY = TONE_INTENSITY;
 var 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
   }
 };
 exports.PALETTE_CONFIG = PALETTE_CONFIG;