@zohodesk/components 1.6.8 → 1.6.11

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

@@ -0,0 +1,489 @@
+/* Theme-aware Brand Palette (changes with CTA theme selection) */
+.border-brand-80 {
+    border-color: var(--zdt_v1_palette_brand_border);
+}
+
+.hover\:border-brand-80:hover {
+    border-color: var(--zdt_v1_palette_brand_border);
+}
+
+.focus\:border-brand-80:focus {
+    border-color: var(--zdt_v1_palette_brand_border);
+}
+
+.active\:border-brand-80:active {
+    border-color: var(--zdt_v1_palette_brand_border);
+}
+
+.selected\:border-brand-80 {
+    border-color: var(--zdt_v1_palette_brand_border);
+}
+
+.border-brand-100 {
+    border-color: var(--zdt_v1_palette_brand_hover_border);
+}
+
+.hover\:border-brand-100:hover {
+    border-color: var(--zdt_v1_palette_brand_hover_border);
+}
+
+.focus\:border-brand-100:focus {
+    border-color: var(--zdt_v1_palette_brand_hover_border);
+}
+
+.active\:border-brand-100:active {
+    border-color: var(--zdt_v1_palette_brand_hover_border);
+}
+
+.selected\:border-brand-100 {
+    border-color: var(--zdt_v1_palette_brand_hover_border);
+}
+
+/* color not available */
+.border-brand-10 {
+    border-color: var(--zdt_v1_palette_brand_light_border);
+}
+
+.hover\:border-brand-10:hover {
+    border-color: var(--zdt_v1_palette_brand_light_border);
+}
+
+.focus\:border-brand-10:focus {
+    border-color: var(--zdt_v1_palette_brand_light_border);
+}
+
+.active\:border-brand-10:active {
+    border-color: var(--zdt_v1_palette_brand_light_border);
+}
+
+.selected\:border-brand-10 {
+    border-color: var(--zdt_v1_palette_brand_light_border);
+}
+
+/* Static Grey Palette */
+.border-grey-65 {
+    border-color: var(--zdt_v1_palette_grey_border);
+}
+
+.hover\:border-grey-65:hover {
+    border-color: var(--zdt_v1_palette_grey_border);
+}
+
+.focus\:border-grey-65:focus {
+    border-color: var(--zdt_v1_palette_grey_border);
+}
+
+.active\:border-grey-65:active {
+    border-color: var(--zdt_v1_palette_grey_border);
+}
+
+.selected\:border-grey-65 {
+    border-color: var(--zdt_v1_palette_grey_border);
+}
+
+.border-grey-55 {
+    border-color: var(--zdt_v1_palette_grey_hover_border);
+}
+
+.hover\:border-grey-55:hover {
+    border-color: var(--zdt_v1_palette_grey_hover_border);
+}
+
+.focus\:border-grey-55:focus {
+    border-color: var(--zdt_v1_palette_grey_hover_border);
+}
+
+.active\:border-grey-55:active {
+    border-color: var(--zdt_v1_palette_grey_hover_border);
+}
+
+.selected\:border-grey-55 {
+    border-color: var(--zdt_v1_palette_grey_hover_border);
+}
+
+.border-grey-15 {
+    border-color: var(--zdt_v1_palette_grey_light_border);
+}
+
+.hover\:border-grey-15:hover {
+    border-color: var(--zdt_v1_palette_grey_light_border);
+}
+
+.focus\:border-grey-15:focus {
+    border-color: var(--zdt_v1_palette_grey_light_border);
+}
+
+.active\:border-grey-15:active {
+    border-color: var(--zdt_v1_palette_grey_light_border);
+}
+
+.selected\:border-grey-15 {
+    border-color: var(--zdt_v1_palette_grey_light_border);
+}
+
+/* Static Blue Palette */
+.border-blue-80 {
+    border-color: var(--zdt_v1_palette_blue_border);
+}
+
+.hover\:border-blue-80:hover {
+    border-color: var(--zdt_v1_palette_blue_border);
+}
+
+.focus\:border-blue-80:focus {
+    border-color: var(--zdt_v1_palette_blue_border);
+}
+
+.active\:border-blue-80:active {
+    border-color: var(--zdt_v1_palette_blue_border);
+}
+
+.selected\:border-blue-80 {
+    border-color: var(--zdt_v1_palette_blue_border);
+}
+
+.border-blue-100 {
+    border-color: var(--zdt_v1_palette_blue_hover_border);
+}
+
+.hover\:border-blue-100:hover {
+    border-color: var(--zdt_v1_palette_blue_hover_border);
+}
+
+.focus\:border-blue-100:focus {
+    border-color: var(--zdt_v1_palette_blue_hover_border);
+}
+
+.active\:border-blue-100:active {
+    border-color: var(--zdt_v1_palette_blue_hover_border);
+}
+
+.selected\:border-blue-100 {
+    border-color: var(--zdt_v1_palette_blue_hover_border);
+}
+
+/* color not available */
+.border-blue-10 {
+    border-color: var(--zdt_v1_palette_blue_light_border);
+}
+
+.hover\:border-blue-10:hover {
+    border-color: var(--zdt_v1_palette_blue_light_border);
+}
+
+.focus\:border-blue-10:focus {
+    border-color: var(--zdt_v1_palette_blue_light_border);
+}
+
+.active\:border-blue-10:active {
+    border-color: var(--zdt_v1_palette_blue_light_border);
+}
+
+.selected\:border-blue-10 {
+    border-color: var(--zdt_v1_palette_blue_light_border);
+}
+
+/* Static Green Palette */
+.border-green-80 {
+    border-color: var(--zdt_v1_palette_green_border);
+}
+
+.hover\:border-green-80:hover {
+    border-color: var(--zdt_v1_palette_green_border);
+}
+
+.focus\:border-green-80:focus {
+    border-color: var(--zdt_v1_palette_green_border);
+}
+
+.active\:border-green-80:active {
+    border-color: var(--zdt_v1_palette_green_border);
+}
+
+.selected\:border-green-80 {
+    border-color: var(--zdt_v1_palette_green_border);
+}
+
+.border-green-100 {
+    border-color: var(--zdt_v1_palette_green_hover_border);
+}
+
+.hover\:border-green-100:hover {
+    border-color: var(--zdt_v1_palette_green_hover_border);
+}
+
+.focus\:border-green-100:focus {
+    border-color: var(--zdt_v1_palette_green_hover_border);
+}
+
+.active\:border-green-100:active {
+    border-color: var(--zdt_v1_palette_green_hover_border);
+}
+
+.selected\:border-green-100 {
+    border-color: var(--zdt_v1_palette_green_hover_border);
+}
+
+.border-green-30 {
+    border-color: var(--zdt_v1_palette_green_light_border);
+}
+
+.hover\:border-green-30:hover {
+    border-color: var(--zdt_v1_palette_green_light_border);
+}
+
+.focus\:border-green-30:focus {
+    border-color: var(--zdt_v1_palette_green_light_border);
+}
+
+.active\:border-green-30:active {
+    border-color: var(--zdt_v1_palette_green_light_border);
+}
+
+.selected\:border-green-30 {
+    border-color: var(--zdt_v1_palette_green_light_border);
+}
+
+/* Static Orange Palette */
+.border-orange-80 {
+    border-color: var(--zdt_v1_palette_orange_border);
+}
+
+.hover\:border-orange-80:hover {
+    border-color: var(--zdt_v1_palette_orange_border);
+}
+
+.focus\:border-orange-80:focus {
+    border-color: var(--zdt_v1_palette_orange_border);
+}
+
+.active\:border-orange-80:active {
+    border-color: var(--zdt_v1_palette_orange_border);
+}
+
+.selected\:border-orange-80 {
+    border-color: var(--zdt_v1_palette_orange_border);
+}
+
+.border-orange-100 {
+    border-color: var(--zdt_v1_palette_orange_hover_border);
+}
+
+.hover\:border-orange-100:hover {
+    border-color: var(--zdt_v1_palette_orange_hover_border);
+}
+
+.focus\:border-orange-100:focus {
+    border-color: var(--zdt_v1_palette_orange_hover_border);
+}
+
+.active\:border-orange-100:active {
+    border-color: var(--zdt_v1_palette_orange_hover_border);
+}
+
+.selected\:border-orange-100 {
+    border-color: var(--zdt_v1_palette_orange_hover_border);
+}
+
+.border-orange-15 {
+    border-color: var(--zdt_v1_palette_orange_light_border);
+}
+
+.hover\:border-orange-15:hover {
+    border-color: var(--zdt_v1_palette_orange_light_border);
+}
+
+.focus\:border-orange-15:focus {
+    border-color: var(--zdt_v1_palette_orange_light_border);
+}
+
+.active\:border-orange-15:active {
+    border-color: var(--zdt_v1_palette_orange_light_border);
+}
+
+.selected\:border-orange-15 {
+    border-color: var(--zdt_v1_palette_orange_light_border);
+}
+
+/* Static Red Palette */
+.border-red-70 {
+    border-color: var(--zdt_v1_palette_red_border);
+}
+
+.hover\:border-red-70:hover {
+    border-color: var(--zdt_v1_palette_red_border);
+}
+
+.focus\:border-red-70:focus {
+    border-color: var(--zdt_v1_palette_red_border);
+}
+
+.active\:border-red-70:active {
+    border-color: var(--zdt_v1_palette_red_border);
+}
+
+.selected\:border-red-70 {
+    border-color: var(--zdt_v1_palette_red_border);
+}
+
+.border-red-100 {
+    border-color: var(--zdt_v1_palette_red_hover_border);
+}
+
+.hover\:border-red-100:hover {
+    border-color: var(--zdt_v1_palette_red_hover_border);
+}
+
+.focus\:border-red-100:focus {
+    border-color: var(--zdt_v1_palette_red_hover_border);
+}
+
+.active\:border-red-100:active {
+    border-color: var(--zdt_v1_palette_red_hover_border);
+}
+
+.selected\:border-red-100 {
+    border-color: var(--zdt_v1_palette_red_hover_border);
+}
+
+.border-red-30 {
+    border-color: var(--zdt_v1_palette_red_light_border);
+}
+
+.hover\:border-red-30:hover {
+    border-color: var(--zdt_v1_palette_red_light_border);
+}
+
+.focus\:border-red-30:focus {
+    border-color: var(--zdt_v1_palette_red_light_border);
+}
+
+.active\:border-red-30:active {
+    border-color: var(--zdt_v1_palette_red_light_border);
+}
+
+.selected\:border-red-30 {
+    border-color: var(--zdt_v1_palette_red_light_border);
+}
+
+/* Static Yellow Palette */
+.border-yellow-80 {
+    border-color: var(--zdt_v1_palette_yellow_border);
+}
+
+.hover\:border-yellow-80:hover {
+    border-color: var(--zdt_v1_palette_yellow_border);
+}
+
+.focus\:border-yellow-80:focus {
+    border-color: var(--zdt_v1_palette_yellow_border);
+}
+
+.active\:border-yellow-80:active {
+    border-color: var(--zdt_v1_palette_yellow_border);
+}
+
+.selected\:border-yellow-80 {
+    border-color: var(--zdt_v1_palette_yellow_border);
+}
+
+.border-yellow-100 {
+    border-color: var(--zdt_v1_palette_yellow_hover_border);
+}
+
+.hover\:border-yellow-100:hover {
+    border-color: var(--zdt_v1_palette_yellow_hover_border);
+}
+
+.focus\:border-yellow-100:focus {
+    border-color: var(--zdt_v1_palette_yellow_hover_border);
+}
+
+.active\:border-yellow-100:active {
+    border-color: var(--zdt_v1_palette_yellow_hover_border);
+}
+
+.selected\:border-yellow-100 {
+    border-color: var(--zdt_v1_palette_yellow_hover_border);
+}
+
+.border-yellow-20 {
+    border-color: var(--zdt_v1_palette_yellow_light_border);
+}
+
+.hover\:border-yellow-20:hover {
+    border-color: var(--zdt_v1_palette_yellow_light_border);
+}
+
+.focus\:border-yellow-20:focus {
+    border-color: var(--zdt_v1_palette_yellow_light_border);
+}
+
+.active\:border-yellow-20:active {
+    border-color: var(--zdt_v1_palette_yellow_light_border);
+}
+
+.selected\:border-yellow-20 {
+    border-color: var(--zdt_v1_palette_yellow_light_border);
+}
+
+/* Utility Colors */
+.border-transparent {
+    border-color: var(--dot_mirror);
+}
+
+.hover\:border-transparent:hover {
+    border-color: var(--dot_mirror);
+}
+
+.focus\:border-transparent:focus {
+    border-color: var(--dot_mirror);
+}
+
+.active\:border-transparent:active {
+    border-color: var(--dot_mirror);
+}
+
+.selected\:border-transparent {
+    border-color: var(--dot_mirror);
+}
+
+.border-white {
+    border-color: var(--zdt_v1_palette_white);
+}
+
+.hover\:border-white:hover {
+    border-color: var(--zdt_v1_palette_white);
+}
+
+.focus\:border-white:focus {
+    border-color: var(--zdt_v1_palette_white);
+}
+
+.active\:border-white:active {
+    border-color: var(--zdt_v1_palette_white);
+}
+
+.selected\:border-white {
+    border-color: var(--zdt_v1_palette_white);
+}
+
+.border-black {
+    border-color: var(--zdt_v1_palette_black);
+}
+
+.hover\:border-black:hover {
+    border-color: var(--zdt_v1_palette_black);
+}
+
+.focus\:border-black:focus {
+    border-color: var(--zdt_v1_palette_black);
+}
+
+.active\:border-black:active {
+    border-color: var(--zdt_v1_palette_black);
+}
+
+.selected\:border-black {
+    border-color: var(--zdt_v1_palette_black);
+}

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

@@ -0,0 +1,190 @@
+"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: baseTextTone
+    }) : getTextClass({
+      textTone: baseTextTone
+    }),
+    hoverText: getTextClass({
+      state: 'hover',
+      textTone: stateTextTone
+    }),
+    focusText: getTextClass({
+      state: 'focus',
+      textTone: stateTextTone
+    }),
+    activeText: getTextClass({
+      state: 'active',
+      textTone: stateTextTone
+    }),
+    border: isSelected ? getBorderClass({
+      state: 'selected',
+      tone: tone,
+      isLighter: isLighter
+    }) : hasTransparentBorder ? _borderColorModule["default"]['border-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;