@zohodesk/components 1.6.25 → 1.6.26

package/lib/v1/helpers/colorHelpers/background/backgroundColor.module.css

@@ -1,629 +1,133 @@
 /* Theme-aware Brand Palette (changes with CTA theme selection) */
-.bg-brand-80 {
-    background-color: var(--zdt_v1_palette_brand_bg);
+.bg-brand-80, .hover\:bg-brand-80:hover, .focus\:bg-brand-80:focus, .active\:bg-brand-80:active, .selected\:bg-brand-80 {
+    background-color: var(--zd-bg-brand);
 }
 
-.hover\:bg-brand-80:hover {
-    background-color: var(--zdt_v1_palette_brand_bg);
+.bg-brand-100, .hover\:bg-brand-100:hover, .focus\:bg-brand-100:focus, .active\:bg-brand-100:active, .selected\:bg-brand-100 {
+    background-color: var(--zd-bg-brand-hover);
 }
 
-.focus\:bg-brand-80:focus {
-    background-color: var(--zdt_v1_palette_brand_bg);
-}
-
-.active\:bg-brand-80:active {
-    background-color: var(--zdt_v1_palette_brand_bg);
-}
-
-.selected\:bg-brand-80 {
-    background-color: var(--zdt_v1_palette_brand_bg);
-}
-
-.bg-brand-100 {
-    background-color: var(--zdt_v1_palette_brand_hover_bg);
-}
-
-.hover\:bg-brand-100:hover {
-    background-color: var(--zdt_v1_palette_brand_hover_bg);
-}
-
-.focus\:bg-brand-100:focus {
-    background-color: var(--zdt_v1_palette_brand_hover_bg);
-}
-
-.active\:bg-brand-100:active {
-    background-color: var(--zdt_v1_palette_brand_hover_bg);
-}
-
-.selected\:bg-brand-100 {
-    background-color: var(--zdt_v1_palette_brand_hover_bg);
-}
-
-.bg-brand-10 {
-    background-color: var(--zdt_v1_palette_brand_light_bg);
-}
-
-.hover\:bg-brand-10:hover {
-    background-color: var(--zdt_v1_palette_brand_light_bg);
-}
-
-.focus\:bg-brand-10:focus {
-    background-color: var(--zdt_v1_palette_brand_light_bg);
-}
-
-.active\:bg-brand-10:active {
-    background-color: var(--zdt_v1_palette_brand_light_bg);
-}
-
-.selected\:bg-brand-10 {
-    background-color: var(--zdt_v1_palette_brand_light_bg);
+.bg-brand-10, .hover\:bg-brand-10:hover, .focus\:bg-brand-10:focus, .active\:bg-brand-10:active, .selected\:bg-brand-10 {
+    background-color: var(--zd-bg-brandLight);
 }
 
 /* color not available */
-.bg-brand-20 {
-    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
-}
-
-.hover\:bg-brand-20:hover {
-    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
-}
-
-.focus\:bg-brand-20:focus {
-    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
-}
-
-.active\:bg-brand-20:active {
-    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
-}
-
-.selected\:bg-brand-20 {
-    background-color: var(--zdt_v1_palette_brand_light_hover_bg);
+.bg-brand-20, .hover\:bg-brand-20:hover, .focus\:bg-brand-20:focus, .active\:bg-brand-20:active, .selected\:bg-brand-20 {
+    background-color: var(--zd-bg-brandLight-hover);
 }
 
 /* Static Grey Palette */
-.bg-grey-65 {
-    background-color: var(--zdt_v1_palette_grey_bg);
-}
-
-.hover\:bg-grey-65:hover {
-    background-color: var(--zdt_v1_palette_grey_bg);
-}
-
-.focus\:bg-grey-65:focus {
-    background-color: var(--zdt_v1_palette_grey_bg);
-}
-
-.active\:bg-grey-65:active {
-    background-color: var(--zdt_v1_palette_grey_bg);
-}
-
-.selected\:bg-grey-65 {
+.bg-grey-65, .hover\:bg-grey-65:hover, .focus\:bg-grey-65:focus, .active\:bg-grey-65:active, .selected\:bg-grey-65 {
     background-color: var(--zdt_v1_palette_grey_bg);
 }
 
-.bg-grey-55 {
-    background-color: var(--zdt_v1_palette_grey_hover_bg);
-}
-
-.hover\:bg-grey-55:hover {
-    background-color: var(--zdt_v1_palette_grey_hover_bg);
-}
-
-.focus\:bg-grey-55:focus {
-    background-color: var(--zdt_v1_palette_grey_hover_bg);
-}
-
-.active\:bg-grey-55:active {
-    background-color: var(--zdt_v1_palette_grey_hover_bg);
-}
-
-.selected\:bg-grey-55 {
+.bg-grey-55, .hover\:bg-grey-55:hover, .focus\:bg-grey-55:focus, .active\:bg-grey-55:active, .selected\:bg-grey-55 {
     background-color: var(--zdt_v1_palette_grey_hover_bg);
 }
 
-.bg-grey-10 {
-    background-color: var(--zdt_v1_palette_grey_light_bg);
-}
-
-.hover\:bg-grey-10:hover {
-    background-color: var(--zdt_v1_palette_grey_light_bg);
-}
-
-.focus\:bg-grey-10:focus {
-    background-color: var(--zdt_v1_palette_grey_light_bg);
+.bg-grey-10, .hover\:bg-grey-10:hover, .focus\:bg-grey-10:focus, .active\:bg-grey-10:active, .selected\:bg-grey-10 {
+    background-color: var(--zd-bg-secondary);
 }
 
-.active\:bg-grey-10:active {
-    background-color: var(--zdt_v1_palette_grey_light_bg);
-}
-
-.selected\:bg-grey-10 {
-    background-color: var(--zdt_v1_palette_grey_light_bg);
-}
-
-.bg-grey-15 {
-    background-color: var(--zdt_v1_palette_grey_light_hover_bg);
-}
-
-.hover\:bg-grey-15:hover {
-    background-color: var(--zdt_v1_palette_grey_light_hover_bg);
-}
-
-.focus\:bg-grey-15:focus {
-    background-color: var(--zdt_v1_palette_grey_light_hover_bg);
-}
-
-.active\:bg-grey-15:active {
-    background-color: var(--zdt_v1_palette_grey_light_hover_bg);
-}
-
-.selected\:bg-grey-15 {
+.bg-grey-20, .hover\:bg-grey-20:hover, .focus\:bg-grey-20:focus, .active\:bg-grey-20:active, .selected\:bg-grey-20 {
     background-color: var(--zdt_v1_palette_grey_light_hover_bg);
 }
 
 /* Static Blue Palette */
-.bg-blue-80 {
-    background-color: var(--zdt_v1_palette_blue_bg);
-}
-
-.hover\:bg-blue-80:hover {
-    background-color: var(--zdt_v1_palette_blue_bg);
-}
-
-.focus\:bg-blue-80:focus {
-    background-color: var(--zdt_v1_palette_blue_bg);
-}
-
-.active\:bg-blue-80:active {
-    background-color: var(--zdt_v1_palette_blue_bg);
-}
-
-.selected\:bg-blue-80 {
-    background-color: var(--zdt_v1_palette_blue_bg);
-}
-
-.bg-blue-100 {
-    background-color: var(--zdt_v1_palette_blue_hover_bg);
-}
-
-.hover\:bg-blue-100:hover {
-    background-color: var(--zdt_v1_palette_blue_hover_bg);
+.bg-blue-80, .hover\:bg-blue-80:hover, .focus\:bg-blue-80:focus, .active\:bg-blue-80:active, .selected\:bg-blue-80 {
+    background-color: var(--zd-bg-info);
 }
 
-.focus\:bg-blue-100:focus {
+.bg-blue-100, .hover\:bg-blue-100:hover, .focus\:bg-blue-100:focus, .active\:bg-blue-100:active, .selected\:bg-blue-100 {
     background-color: var(--zdt_v1_palette_blue_hover_bg);
 }
 
-.active\:bg-blue-100:active {
-    background-color: var(--zdt_v1_palette_blue_hover_bg);
-}
-
-.selected\:bg-blue-100 {
-    background-color: var(--zdt_v1_palette_blue_hover_bg);
-}
-
-.bg-blue-10 {
-    background-color: var(--zdt_v1_palette_blue_light_bg);
-}
-
-.hover\:bg-blue-10:hover {
-    background-color: var(--zdt_v1_palette_blue_light_bg);
-}
-
-.focus\:bg-blue-10:focus {
-    background-color: var(--zdt_v1_palette_blue_light_bg);
-}
-
-.active\:bg-blue-10:active {
-    background-color: var(--zdt_v1_palette_blue_light_bg);
-}
-
-.selected\:bg-blue-10 {
+.bg-blue-10, .hover\:bg-blue-10:hover, .focus\:bg-blue-10:focus, .active\:bg-blue-10:active, .selected\:bg-blue-10 {
     background-color: var(--zdt_v1_palette_blue_light_bg);
 }
 
 /* color not available */
-.bg-blue-20 {
-    background-color: var(--zdt_v1_palette_blue_light_hover_bg);
-}
-
-.hover\:bg-blue-20:hover {
-    background-color: var(--zdt_v1_palette_blue_light_hover_bg);
-}
-
-.focus\:bg-blue-20:focus {
-    background-color: var(--zdt_v1_palette_blue_light_hover_bg);
-}
-
-.active\:bg-blue-20:active {
-    background-color: var(--zdt_v1_palette_blue_light_hover_bg);
-}
-
-.selected\:bg-blue-20 {
+.bg-blue-20, .hover\:bg-blue-20:hover, .focus\:bg-blue-20:focus, .active\:bg-blue-20:active, .selected\:bg-blue-20 {
     background-color: var(--zdt_v1_palette_blue_light_hover_bg);
 }
 
 /* Static Green Palette */
-.bg-green-80 {
-    background-color: var(--zdt_v1_palette_green_bg);
-}
-
-.hover\:bg-green-80:hover {
-    background-color: var(--zdt_v1_palette_green_bg);
-}
-
-.focus\:bg-green-80:focus {
-    background-color: var(--zdt_v1_palette_green_bg);
-}
-
-.active\:bg-green-80:active {
+.bg-green-80, .hover\:bg-green-80:hover, .focus\:bg-green-80:focus, .active\:bg-green-80:active, .selected\:bg-green-80 {
     background-color: var(--zdt_v1_palette_green_bg);
 }
 
-.selected\:bg-green-80 {
-    background-color: var(--zdt_v1_palette_green_bg);
-}
-
-.bg-green-100 {
-    background-color: var(--zdt_v1_palette_green_hover_bg);
-}
-
-.hover\:bg-green-100:hover {
-    background-color: var(--zdt_v1_palette_green_hover_bg);
-}
-
-.focus\:bg-green-100:focus {
-    background-color: var(--zdt_v1_palette_green_hover_bg);
-}
-
-.active\:bg-green-100:active {
-    background-color: var(--zdt_v1_palette_green_hover_bg);
-}
-
-.selected\:bg-green-100 {
+.bg-green-100, .hover\:bg-green-100:hover, .focus\:bg-green-100:focus, .active\:bg-green-100:active, .selected\:bg-green-100 {
     background-color: var(--zdt_v1_palette_green_hover_bg);
 }
 
-.bg-green-10 {
+.bg-green-10, .hover\:bg-green-10:hover, .focus\:bg-green-10:focus, .active\:bg-green-10:active, .selected\:bg-green-10 {
     background-color: var(--zdt_v1_palette_green_light_bg);
 }
 
-.hover\:bg-green-10:hover {
-    background-color: var(--zdt_v1_palette_green_light_bg);
-}
-
-.focus\:bg-green-10:focus {
-    background-color: var(--zdt_v1_palette_green_light_bg);
-}
-
-.active\:bg-green-10:active {
-    background-color: var(--zdt_v1_palette_green_light_bg);
-}
-
-.selected\:bg-green-10 {
-    background-color: var(--zdt_v1_palette_green_light_bg);
-}
-
-.bg-green-30 {
-    background-color: var(--zdt_v1_palette_green_light_hover_bg);
-}
-
-.hover\:bg-green-30:hover {
-    background-color: var(--zdt_v1_palette_green_light_hover_bg);
-}
-
-.focus\:bg-green-30:focus {
-    background-color: var(--zdt_v1_palette_green_light_hover_bg);
-}
-
-.active\:bg-green-30:active {
-    background-color: var(--zdt_v1_palette_green_light_hover_bg);
-}
-
-.selected\:bg-green-30 {
+.bg-green-30, .hover\:bg-green-30:hover, .focus\:bg-green-30:focus, .active\:bg-green-30:active, .selected\:bg-green-30 {
     background-color: var(--zdt_v1_palette_green_light_hover_bg);
 }
 
 /* Static Orange Palette */
-.bg-orange-80 {
-    background-color: var(--zdt_v1_palette_orange_bg);
-}
-
-.hover\:bg-orange-80:hover {
-    background-color: var(--zdt_v1_palette_orange_bg);
-}
-
-.focus\:bg-orange-80:focus {
-    background-color: var(--zdt_v1_palette_orange_bg);
-}
-
-.active\:bg-orange-80:active {
+.bg-orange-80, .hover\:bg-orange-80:hover, .focus\:bg-orange-80:focus, .active\:bg-orange-80:active, .selected\:bg-orange-80 {
     background-color: var(--zdt_v1_palette_orange_bg);
 }
 
-.selected\:bg-orange-80 {
-    background-color: var(--zdt_v1_palette_orange_bg);
-}
-
-.bg-orange-100 {
-    background-color: var(--zdt_v1_palette_orange_hover_bg);
-}
-
-.hover\:bg-orange-100:hover {
+.bg-orange-100, .hover\:bg-orange-100:hover, .focus\:bg-orange-100:focus, .active\:bg-orange-100:active, .selected\:bg-orange-100 {
     background-color: var(--zdt_v1_palette_orange_hover_bg);
 }
 
-.focus\:bg-orange-100:focus {
-    background-color: var(--zdt_v1_palette_orange_hover_bg);
-}
-
-.active\:bg-orange-100:active {
-    background-color: var(--zdt_v1_palette_orange_hover_bg);
-}
-
-.selected\:bg-orange-100 {
-    background-color: var(--zdt_v1_palette_orange_hover_bg);
-}
-
-.bg-orange-10 {
+.bg-orange-10, .hover\:bg-orange-10:hover, .focus\:bg-orange-10:focus, .active\:bg-orange-10:active, .selected\:bg-orange-10 {
     background-color: var(--zdt_v1_palette_orange_light_bg);
 }
 
-.hover\:bg-orange-10:hover {
-    background-color: var(--zdt_v1_palette_orange_light_bg);
-}
-
-.focus\:bg-orange-10:focus {
-    background-color: var(--zdt_v1_palette_orange_light_bg);
-}
-
-.active\:bg-orange-10:active {
-    background-color: var(--zdt_v1_palette_orange_light_bg);
-}
-
-.selected\:bg-orange-10 {
-    background-color: var(--zdt_v1_palette_orange_light_bg);
-}
-
-.bg-orange-15 {
-    background-color: var(--zdt_v1_palette_orange_light_hover_bg);
-}
-
-.hover\:bg-orange-15:hover {
-    background-color: var(--zdt_v1_palette_orange_light_hover_bg);
-}
-
-.focus\:bg-orange-15:focus {
-    background-color: var(--zdt_v1_palette_orange_light_hover_bg);
-}
-
-.active\:bg-orange-15:active {
-    background-color: var(--zdt_v1_palette_orange_light_hover_bg);
-}
-
-.selected\:bg-orange-15 {
+.bg-orange-15, .hover\:bg-orange-15:hover, .focus\:bg-orange-15:focus, .active\:bg-orange-15:active, .selected\:bg-orange-15 {
     background-color: var(--zdt_v1_palette_orange_light_hover_bg);
 }
 
 /* Static Red Palette */
-.bg-red-70 {
-    background-color: var(--zdt_v1_palette_red_bg);
-}
-
-.hover\:bg-red-70:hover {
-    background-color: var(--zdt_v1_palette_red_bg);
-}
-
-.focus\:bg-red-70:focus {
-    background-color: var(--zdt_v1_palette_red_bg);
-}
-
-.active\:bg-red-70:active {
-    background-color: var(--zdt_v1_palette_red_bg);
-}
-
-.selected\:bg-red-70 {
+.bg-red-70, .hover\:bg-red-70:hover, .focus\:bg-red-70:focus, .active\:bg-red-70:active, .selected\:bg-red-70 {
     background-color: var(--zdt_v1_palette_red_bg);
 }
 
-.bg-red-100 {
-    background-color: var(--zdt_v1_palette_red_hover_bg);
-}
-
-.hover\:bg-red-100:hover {
-    background-color: var(--zdt_v1_palette_red_hover_bg);
-}
-
-.focus\:bg-red-100:focus {
-    background-color: var(--zdt_v1_palette_red_hover_bg);
-}
-
-.active\:bg-red-100:active {
+.bg-red-100, .hover\:bg-red-100:hover, .focus\:bg-red-100:focus, .active\:bg-red-100:active, .selected\:bg-red-100 {
     background-color: var(--zdt_v1_palette_red_hover_bg);
 }
 
-.selected\:bg-red-100 {
-    background-color: var(--zdt_v1_palette_red_hover_bg);
-}
-
-.bg-red-10 {
-    background-color: var(--zdt_v1_palette_red_light_bg);
-}
-
-.hover\:bg-red-10:hover {
+.bg-red-10, .hover\:bg-red-10:hover, .focus\:bg-red-10:focus, .active\:bg-red-10:active, .selected\:bg-red-10 {
     background-color: var(--zdt_v1_palette_red_light_bg);
 }
 
-.focus\:bg-red-10:focus {
-    background-color: var(--zdt_v1_palette_red_light_bg);
-}
-
-.active\:bg-red-10:active {
-    background-color: var(--zdt_v1_palette_red_light_bg);
-}
-
-.selected\:bg-red-10 {
-    background-color: var(--zdt_v1_palette_red_light_bg);
-}
-
-.bg-red-30 {
-    background-color: var(--zdt_v1_palette_red_light_hover_bg);
-}
-
-.hover\:bg-red-30:hover {
-    background-color: var(--zdt_v1_palette_red_light_hover_bg);
-}
-
-.focus\:bg-red-30:focus {
-    background-color: var(--zdt_v1_palette_red_light_hover_bg);
-}
-
-.active\:bg-red-30:active {
-    background-color: var(--zdt_v1_palette_red_light_hover_bg);
-}
-
-.selected\:bg-red-30 {
+.bg-red-30, .hover\:bg-red-30:hover, .focus\:bg-red-30:focus, .active\:bg-red-30:active, .selected\:bg-red-30 {
     background-color: var(--zdt_v1_palette_red_light_hover_bg);
 }
 
 /* Static Yellow Palette */
-.bg-yellow-80 {
-    background-color: var(--zdt_v1_palette_yellow_bg);
-}
-
-.hover\:bg-yellow-80:hover {
-    background-color: var(--zdt_v1_palette_yellow_bg);
-}
-
-.focus\:bg-yellow-80:focus {
-    background-color: var(--zdt_v1_palette_yellow_bg);
-}
-
-.active\:bg-yellow-80:active {
+.bg-yellow-80, .hover\:bg-yellow-80:hover, .focus\:bg-yellow-80:focus, .active\:bg-yellow-80:active, .selected\:bg-yellow-80 {
     background-color: var(--zdt_v1_palette_yellow_bg);
 }
 
-.selected\:bg-yellow-80 {
-    background-color: var(--zdt_v1_palette_yellow_bg);
-}
-
-.bg-yellow-100 {
+.bg-yellow-100, .hover\:bg-yellow-100:hover, .focus\:bg-yellow-100:focus, .active\:bg-yellow-100:active, .selected\:bg-yellow-100 {
     background-color: var(--zdt_v1_palette_yellow_hover_bg);
 }
 
-.hover\:bg-yellow-100:hover {
-    background-color: var(--zdt_v1_palette_yellow_hover_bg);
-}
-
-.focus\:bg-yellow-100:focus {
-    background-color: var(--zdt_v1_palette_yellow_hover_bg);
-}
-
-.active\:bg-yellow-100:active {
-    background-color: var(--zdt_v1_palette_yellow_hover_bg);
-}
-
-.selected\:bg-yellow-100 {
-    background-color: var(--zdt_v1_palette_yellow_hover_bg);
-}
-
-.bg-yellow-10 {
-    background-color: var(--zdt_v1_palette_yellow_light_bg);
-}
-
-.hover\:bg-yellow-10:hover {
+.bg-yellow-10, .hover\:bg-yellow-10:hover, .focus\:bg-yellow-10:focus, .active\:bg-yellow-10:active, .selected\:bg-yellow-10 {
     background-color: var(--zdt_v1_palette_yellow_light_bg);
 }
 
-.focus\:bg-yellow-10:focus {
-    background-color: var(--zdt_v1_palette_yellow_light_bg);
-}
-
-.active\:bg-yellow-10:active {
-    background-color: var(--zdt_v1_palette_yellow_light_bg);
-}
-
-.selected\:bg-yellow-10 {
-    background-color: var(--zdt_v1_palette_yellow_light_bg);
-}
-
-.bg-yellow-20 {
-    background-color: var(--zdt_v1_palette_yellow_light_hover_bg);
-}
-
-.hover\:bg-yellow-20:hover {
-    background-color: var(--zdt_v1_palette_yellow_light_hover_bg);
-}
-
-.focus\:bg-yellow-20:focus {
-    background-color: var(--zdt_v1_palette_yellow_light_hover_bg);
-}
-
-.active\:bg-yellow-20:active {
-    background-color: var(--zdt_v1_palette_yellow_light_hover_bg);
-}
-
-.selected\:bg-yellow-20 {
+.bg-yellow-20, .hover\:bg-yellow-20:hover, .focus\:bg-yellow-20:focus, .active\:bg-yellow-20:active, .selected\:bg-yellow-20 {
     background-color: var(--zdt_v1_palette_yellow_light_hover_bg);
 }
 
 /* Utility Colors */
-.bg-transparent {
-    background-color: var(--dot_mirror);
-}
-
-.hover\:bg-transparent:hover {
-    background-color: var(--dot_mirror);
-}
-
-.focus\:bg-transparent:focus {
-    background-color: var(--dot_mirror);
-}
-
-.active\:bg-transparent:active {
-    background-color: var(--dot_mirror);
-}
-
-.selected\:bg-transparent {
-    background-color: var(--dot_mirror);
-}
-
-.bg-white {
-    background-color: var(--zdt_v1_palette_white);
+.bg-transparent, .hover\:bg-transparent:hover, .focus\:bg-transparent:focus, .active\:bg-transparent:active, .selected\:bg-transparent {
+    background-color: var(--zd-bg-transparent);
 }
 
-.hover\:bg-white:hover {
+.bg-white, .hover\:bg-white:hover, .focus\:bg-white:focus, .active\:bg-white:active, .selected\:bg-white {
     background-color: var(--zdt_v1_palette_white);
 }
 
-.focus\:bg-white:focus {
-    background-color: var(--zdt_v1_palette_white);
-}
-
-.active\:bg-white:active {
-    background-color: var(--zdt_v1_palette_white);
-}
-
-.selected\:bg-white {
-    background-color: var(--zdt_v1_palette_white);
-}
-
-.bg-black {
-    background-color: var(--zdt_v1_palette_black);
-}
-
-.hover\:bg-black:hover {
-    background-color: var(--zdt_v1_palette_black);
-}
-
-.focus\:bg-black:focus {
-    background-color: var(--zdt_v1_palette_black);
-}
-
-.active\:bg-black:active {
-    background-color: var(--zdt_v1_palette_black);
-}
-
-.selected\:bg-black {
+.bg-black, .hover\:bg-black:hover, .focus\:bg-black:focus, .active\:bg-black:active, .selected\:bg-black {
     background-color: var(--zdt_v1_palette_black);
 }