@zohodesk/components
Version:
Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development
85 lines (83 loc) • 11.4 kB
CSS
[data-mode='dark']{
/* switch */
--zdt_v1_switch_track_on_bg:hsla(133, calc(var(--zd-saturation, 1) * 48.36%), calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_switch_track_off_bg:hsla(223, calc(var(--zd-saturation, 1) * 21.68%), calc(28.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_switch_track_on_hover_bg:hsla(134, calc(var(--zd-saturation, 1) * 67.66%), calc(32.75% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_switch_track_off_hover_bg:hsla(216, calc(var(--zd-saturation, 1) * 22.98%), calc(31.57% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_switch_thumb_bg:hsla(217, calc(var(--zd-saturation, 1) * 23.08%), calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_v1_switch_onLabel:hsla(217, calc(var(--zd-saturation, 1) * 23.08%), calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_v1_switch_offLabel:hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_switch_offLabel_hover:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
/* label */
--zdt_v1_label_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_v1_label_required_text:hsla(0, calc(var(--zd-saturation, 1) * 100.00%), calc(70.98% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_label_disabled_text:var(--dot_inputDisable);
--zdt_v1_label_secondary_text:hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
/* palette - universal color tokens */
--zdt_v1_palette_brand_filled_text:var(--zdt_cta_secondary_text);
--zdt_v1_palette_brand_bg:var(--zdt_cta_primary_bg);
--zdt_v1_palette_brand_text:var(--zdt_cta_primary_text);
--zdt_v1_palette_brand_border:var(--zdt_cta_primary_border);
--zdt_v1_palette_brand_hover_bg:var(--zdt_cta_primary_hover_bg);
--zdt_v1_palette_brand_hover_text:var(--zdt_cta_primary_hover_text);
--zdt_v1_palette_brand_hover_border:var(--zdt_cta_primary_hover_border);
--zdt_v1_palette_brand_light_bg:var(--zdt_cta_primary_light_bg);
--zdt_v1_palette_brand_light_hover_bg:var(--zdt_cta_primary_light_hover_bg);
--zdt_v1_palette_brand_light_border:var(--zdt_cta_primary_light_border);
--zdt_v1_palette_grey_light_bg:hsla(217, calc(var(--zd-saturation, 1) * 23.23%), calc(19.41% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
--zdt_v1_palette_grey_light_border:hsla(218, calc(var(--zd-saturation, 1) * 23.08%), calc(22.94% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_grey_light_hover_bg:hsla(218, calc(var(--zd-saturation, 1) * 23.08%), calc(22.94% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
--zdt_v1_palette_grey_bg:hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_grey_text:hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_v1_palette_grey_border:hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_grey_hover_bg:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_grey_hover_text:hsla(217, calc(var(--zd-saturation, 1) * 13.73%), calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_v1_palette_grey_hover_border:hsla(217, calc(var(--zd-saturation, 1) * 7.76%), calc(54.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_blue_bg:hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_blue_text:hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_blue_border:hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(63.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_blue_hover_bg:hsla(213, calc(var(--zd-saturation, 1) * 85.45%), calc(43.14% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_blue_hover_text:hsla(212, calc(var(--zd-saturation, 1) * 100.00%), calc(71.57% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_blue_hover_border:hsla(213, calc(var(--zd-saturation, 1) * 85.45%), calc(43.14% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_blue_light_bg:hsla(213, calc(var(--zd-saturation, 1) * 27.27%), calc(23.73% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_blue_light_border:hsla(208, calc(var(--zd-saturation, 1) * 85.19%), calc(73.53% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_blue_light_hover_bg:hsla(217, calc(var(--zd-saturation, 1) * 23.23%), calc(19.41% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_green_bg:hsla(133, calc(var(--zd-saturation, 1) * 40.00%), calc(45.10% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_green_text:hsla(133, calc(var(--zd-saturation, 1) * 40.00%), calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_green_border:hsla(133, calc(var(--zd-saturation, 1) * 40.00%), calc(45.10% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_green_hover_bg:hsla(128, calc(var(--zd-saturation, 1) * 79.71%), calc(27.06% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_green_hover_text:hsla(133, calc(var(--zd-saturation, 1) * 40.00%), calc(54.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_green_hover_border:hsla(128, calc(var(--zd-saturation, 1) * 79.71%), calc(27.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_green_light_bg:hsla(191, calc(var(--zd-saturation, 1) * 21.65%), calc(19.02% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_green_light_border:hsla(158, calc(var(--zd-saturation, 1) * 26.83%), calc(24.12% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_green_light_hover_bg:hsla(158, calc(var(--zd-saturation, 1) * 26.83%), calc(24.12% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_orange_bg:hsla(26, calc(var(--zd-saturation, 1) * 100.00%), calc(56.08% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_orange_text:hsla(26, calc(var(--zd-saturation, 1) * 100.00%), calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_orange_border:hsla(26, calc(var(--zd-saturation, 1) * 100.00%), calc(56.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_orange_hover_bg:hsla(29, calc(var(--zd-saturation, 1) * 100.00%), calc(32.94% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_orange_hover_text:hsla(26, calc(var(--zd-saturation, 1) * 100.00%), calc(70.00% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_orange_hover_border:hsla(29, calc(var(--zd-saturation, 1) * 100.00%), calc(32.94% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_orange_light_bg:hsla(252, calc(var(--zd-saturation, 1) * 4.85%), calc(20.20% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_orange_light_border:hsla(19, calc(var(--zd-saturation, 1) * 21.54%), calc(25.49% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_orange_light_hover_bg:hsla(19, calc(var(--zd-saturation, 1) * 21.54%), calc(25.49% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_red_bg:hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_red_text:hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_red_border:hsla(0, calc(var(--zd-saturation, 1) * 77.78%), calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_red_hover_bg:hsla(0, calc(var(--zd-saturation, 1) * 81.62%), calc(36.27% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_red_hover_text:hsla(0, calc(var(--zd-saturation, 1) * 77.03%), calc(70.98% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_red_hover_border:hsla(0, calc(var(--zd-saturation, 1) * 81.62%), calc(36.27% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_red_light_bg:hsla(258, calc(var(--zd-saturation, 1) * 12.62%), calc(20.20% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_red_light_border:hsla(334, calc(var(--zd-saturation, 1) * 20.00%), calc(24.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_red_light_hover_bg:hsla(334, calc(var(--zd-saturation, 1) * 20.00%), calc(24.51% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_yellow_bg:hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_yellow_text:hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_yellow_border:hsla(37, calc(var(--zd-saturation, 1) * 66.94%), calc(52.55% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_yellow_hover_bg:hsla(39, calc(var(--zd-saturation, 1) * 90.18%), calc(31.96% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_yellow_hover_text:hsla(37, calc(var(--zd-saturation, 1) * 66.48%), calc(64.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_yellow_hover_border:hsla(39, calc(var(--zd-saturation, 1) * 90.18%), calc(31.96% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_yellow_light_bg:hsla(218, calc(var(--zd-saturation, 1) * 7.69%), calc(20.39% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_yellow_light_border:hsla(37, calc(var(--zd-saturation, 1) * 12.70%), calc(24.71% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_yellow_light_hover_bg:hsla(37, calc(var(--zd-saturation, 1) * 12.70%), calc(24.71% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_white:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%, 1);
--zdt_v1_palette_black:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
}