@zohodesk/components 1.6.7 → 1.6.11-exp-6

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

@@ -0,0 +1,629 @@
+/* Theme-aware Brand Palette (changes with CTA theme selection) */
+.bg-brand-80 {
+    background-color: var(--zdt_v1_palette_brand_bg);
+}
+
+.hover\:bg-brand-80:hover {
+    background-color: var(--zdt_v1_palette_brand_bg);
+}
+
+.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);
+}
+
+/* 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);
+}
+
+/* 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 {
+    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 {
+    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);
+}
+
+.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 {
+    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);
+}
+
+.focus\:bg-blue-100:focus {
+    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 {
+    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 {
+    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 {
+    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 {
+    background-color: var(--zdt_v1_palette_green_hover_bg);
+}
+
+.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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    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 {
+    background-color: var(--zdt_v1_palette_yellow_bg);
+}
+
+.selected\:bg-yellow-80 {
+    background-color: var(--zdt_v1_palette_yellow_bg);
+}
+
+.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 {
+    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 {
+    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);
+}
+
+.hover\:bg-white:hover {
+    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 {
+    background-color: var(--zdt_v1_palette_black);
+}