@zohodesk/components 1.0.0-temp-259.3 → 1.0.0-temp-259.5

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

@@ -1,489 +1,105 @@
 /* Theme-aware Brand Palette (changes with CTA theme selection) */
-.border-brand-80 {
+.border-brand-80, .hover\:border-brand-80:hover, .focus\:border-brand-80:focus, .active\:border-brand-80:active, .selected\: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-brand-100, .hover\:border-brand-100:hover, .focus\:border-brand-100:focus, .active\:border-brand-100:active, .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-brand-10, .hover\:border-brand-10:hover, .focus\:border-brand-10:focus, .active\:border-brand-10:active, .selected\:border-brand-10 {
     border-color: var(--zdt_v1_palette_brand_light_border);
 }
 
 /* Static Grey Palette */
-.border-grey-65 {
+.border-grey-65, .hover\:border-grey-65:hover, .focus\:border-grey-65:focus, .active\:border-grey-65:active, .selected\:border-grey-65 {
     border-color: var(--zd-border-secondary);
 }
 
-.hover\:border-grey-65:hover {
-    border-color: var(--zd-border-secondary);
-}
-
-.focus\:border-grey-65:focus {
-    border-color: var(--zd-border-secondary);
-}
-
-.active\:border-grey-65:active {
-    border-color: var(--zd-border-secondary);
-}
-
-.selected\:border-grey-65 {
-    border-color: var(--zd-border-secondary);
-}
-
-.border-grey-55 {
-    border-color: var(--zd-border-tertiary);
-}
-
-.hover\:border-grey-55:hover {
-    border-color: var(--zd-border-tertiary);
-}
-
-.focus\:border-grey-55:focus {
+.border-grey-55, .hover\:border-grey-55:hover, .focus\:border-grey-55:focus, .active\:border-grey-55:active, .selected\:border-grey-55 {
     border-color: var(--zd-border-tertiary);
 }
 
-.active\:border-grey-55:active {
-    border-color: var(--zd-border-tertiary);
-}
-
-.selected\:border-grey-55 {
-    border-color: var(--zd-border-tertiary);
-}
-
-.border-grey-20 {
-    border-color: var(--zd-border-secondary);
-}
-
-.hover\:border-grey-20:hover {
-    border-color: var(--zd-border-secondary);
-}
-
-.focus\:border-grey-20:focus {
-    border-color: var(--zd-border-secondary);
-}
-
-.active\:border-grey-20:active {
-    border-color: var(--zd-border-secondary);
-}
-
-.selected\:border-grey-20 {
+.border-grey-20, .hover\:border-grey-20:hover, .focus\:border-grey-20:focus, .active\:border-grey-20:active, .selected\:border-grey-20 {
     border-color: var(--zd-border-secondary);
 }
 
 /* Static Blue Palette */
-.border-blue-80 {
+.border-blue-80, .hover\:border-blue-80:hover, .focus\:border-blue-80:focus, .active\:border-blue-80:active, .selected\:border-blue-80 {
     border-color: var(--zd-border-info);
 }
 
-.hover\:border-blue-80:hover {
-    border-color: var(--zd-border-info);
-}
-
-.focus\:border-blue-80:focus {
-    border-color: var(--zd-border-info);
-}
-
-.active\:border-blue-80:active {
-    border-color: var(--zd-border-info);
-}
-
-.selected\:border-blue-80 {
-    border-color: var(--zd-border-info);
-}
-
-.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-blue-100, .hover\:border-blue-100:hover, .focus\:border-blue-100:focus, .active\:border-blue-100:active, .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-blue-10, .hover\:border-blue-10:hover, .focus\:border-blue-10:focus, .active\:border-blue-10:active, .selected\:border-blue-10 {
     border-color: var(--zdt_v1_palette_blue_light_border);
 }
 
 /* Static Green Palette */
-.border-green-80 {
+.border-green-80, .hover\:border-green-80:hover, .focus\:border-green-80:focus, .active\:border-green-80:active, .selected\: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-green-100, .hover\:border-green-100:hover, .focus\:border-green-100:focus, .active\:border-green-100:active, .selected\:border-green-100 {
     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-green-30, .hover\:border-green-30:hover, .focus\:border-green-30:focus, .active\:border-green-30:active, .selected\:border-green-30 {
     border-color: var(--zdt_v1_palette_green_light_border);
 }
 
 /* Static Orange Palette */
-.border-orange-80 {
+.border-orange-80, .hover\:border-orange-80:hover, .focus\:border-orange-80:focus, .active\:border-orange-80:active, .selected\: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-orange-100, .hover\:border-orange-100:hover, .focus\:border-orange-100:focus, .active\:border-orange-100:active, .selected\:border-orange-100 {
     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-orange-15, .hover\:border-orange-15:hover, .focus\:border-orange-15:focus, .active\:border-orange-15:active, .selected\:border-orange-15 {
     border-color: var(--zdt_v1_palette_orange_light_border);
 }
 
 /* Static Red Palette */
-.border-red-70 {
+.border-red-70, .hover\:border-red-70:hover, .focus\:border-red-70:focus, .active\:border-red-70:active, .selected\: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-red-100, .hover\:border-red-100:hover, .focus\:border-red-100:focus, .active\:border-red-100:active, .selected\:border-red-100 {
     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-red-30, .hover\:border-red-30:hover, .focus\:border-red-30:focus, .active\:border-red-30:active, .selected\:border-red-30 {
     border-color: var(--zdt_v1_palette_red_light_border);
 }
 
 /* Static Yellow Palette */
-.border-yellow-80 {
+.border-yellow-80, .hover\:border-yellow-80:hover, .focus\:border-yellow-80:focus, .active\:border-yellow-80:active, .selected\: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-yellow-100, .hover\:border-yellow-100:hover, .focus\:border-yellow-100:focus, .active\:border-yellow-100:active, .selected\:border-yellow-100 {
     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-yellow-20, .hover\:border-yellow-20:hover, .focus\:border-yellow-20:focus, .active\:border-yellow-20:active, .selected\:border-yellow-20 {
     border-color: var(--zdt_v1_palette_yellow_light_border);
 }
 
 /* Utility Colors */
-.border-transparent {
+.border-transparent, .hover\:border-transparent:hover, .focus\:border-transparent:focus, .active\:border-transparent:active, .selected\: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-white, .hover\:border-white:hover, .focus\:border-white:focus, .active\:border-white:active, .selected\:border-white {
     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-black, .hover\:border-black:hover, .focus\:border-black:focus, .active\:border-black:active, .selected\:border-black {
     border-color: var(--zdt_v1_palette_black);
 }

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

@@ -95,9 +95,12 @@ var buildStateClasses = function buildStateClasses(_ref) {
   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 rawRestBgConfig = restAppearance ? resolveConfig(restAppearance.bg, restPaletteConfig) : null;
+  var restBgConfig = rawRestBgConfig && !BG_BORDER_INVALID.has(rawRestBgConfig.tone) ? rawRestBgConfig : null;
+  var rawRestBorderConfig = restAppearance ? resolveConfig(restAppearance.border, restPaletteConfig) : null;
+  var restBorderConfig = rawRestBorderConfig && !BG_BORDER_INVALID.has(rawRestBorderConfig.tone) ? rawRestBorderConfig : null;
+  var rawRestTextConfig = restAppearance ? resolveConfig(restAppearance.text, restPaletteConfig) : null;
+  var restTextConfig = rawRestTextConfig && !TEXT_INVALID.has(rawRestTextConfig.tone) ? rawRestTextConfig : 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 effectiveBgForText = bgConfig || textFallbackBgConfig || restBgConfig || null;
@@ -122,8 +125,8 @@ var getPaletteClasses = function getPaletteClasses(_ref2) {
     state: undefined,
     paletteConfig: paletteConfig
   });
-  var rawRestBgConfig = resolveConfig(appearance === null || appearance === void 0 ? void 0 : appearance.bg, paletteConfig);
-  var restBgForText = rawRestBgConfig && !BG_BORDER_INVALID.has(rawRestBgConfig.tone) ? rawRestBgConfig : null;
+  var rawBaseBgConfig = resolveConfig(appearance === null || appearance === void 0 ? void 0 : appearance.bg, paletteConfig);
+  var restBgForText = rawBaseBgConfig && !BG_BORDER_INVALID.has(rawBaseBgConfig.tone) ? rawBaseBgConfig : null;
   var selected = buildStateClasses({
     appearance: selectedAppearance,
     state: 'selected',