@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='light']{
/* switch */
--zdt_v1_switch_track_on_bg:hsla(133, calc(var(--zd-saturation, 1) * 63.29%), calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_switch_track_off_bg:hsla(213, calc(var(--zd-saturation, 1) * 27.27%), calc(87.06% + 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) * 78.63%), calc(25.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_switch_track_off_hover_bg:hsla(231, calc(var(--zd-saturation, 1) * 22.22%), calc(82.35% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_switch_thumb_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_v1_switch_onLabel:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_v1_switch_offLabel:hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_switch_offLabel_hover:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
/* label */
--zdt_v1_label_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_v1_label_required_text:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + 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(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + 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(216, calc(var(--zd-saturation, 1) * 38.46%), calc(97.45% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
--zdt_v1_palette_grey_light_border:hsla(210, calc(var(--zd-saturation, 1) * 33.33%), calc(94.12% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_grey_light_hover_bg:hsla(210, calc(var(--zd-saturation, 1) * 33.33%), calc(94.12% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
--zdt_v1_palette_grey_bg:hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_grey_text:hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_v1_palette_grey_border:hsla(220, calc(var(--zd-saturation, 1) * 10.45%), calc(39.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_grey_hover_bg:hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_grey_hover_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_v1_palette_grey_hover_border:hsla(218, calc(var(--zd-saturation, 1) * 9.76%), calc(51.76% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_blue_bg:hsla(212, calc(var(--zd-saturation, 1) * 91.84%), calc(48.04% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_blue_text:hsla(212, calc(var(--zd-saturation, 1) * 91.84%), calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_blue_border:hsla(212, calc(var(--zd-saturation, 1) * 91.84%), calc(48.04% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_blue_hover_bg:hsla(213, calc(var(--zd-saturation, 1) * 100.00%), calc(36.08% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_blue_hover_text:hsla(213, calc(var(--zd-saturation, 1) * 100.00%), calc(36.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_blue_hover_border:hsla(213, calc(var(--zd-saturation, 1) * 100.00%), calc(36.08% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_blue_light_bg:hsla(212, calc(var(--zd-saturation, 1) * 86.67%), calc(97.06% + 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(212, calc(var(--zd-saturation, 1) * 80.95%), calc(95.88% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_green_bg:hsla(133, calc(var(--zd-saturation, 1) * 63.29%), calc(40.59% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_green_text:hsla(133, calc(var(--zd-saturation, 1) * 63.29%), calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_green_border:hsla(133, calc(var(--zd-saturation, 1) * 63.29%), calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_green_hover_bg:hsla(134, calc(var(--zd-saturation, 1) * 78.63%), calc(25.69% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_green_hover_text:hsla(134, calc(var(--zd-saturation, 1) * 78.63%), calc(25.69% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_green_hover_border:hsla(134, calc(var(--zd-saturation, 1) * 78.63%), calc(25.69% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_green_light_bg:hsla(143, calc(var(--zd-saturation, 1) * 44.44%), calc(96.47% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_green_light_border:hsla(132, calc(var(--zd-saturation, 1) * 43.33%), calc(88.24% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_green_light_hover_bg:hsla(132, calc(var(--zd-saturation, 1) * 43.33%), calc(88.24% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_orange_bg:hsla(28, calc(var(--zd-saturation, 1) * 81.75%), calc(49.41% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_orange_text:hsla(28, calc(var(--zd-saturation, 1) * 81.75%), calc(49.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_orange_border:hsla(28, calc(var(--zd-saturation, 1) * 81.75%), calc(49.41% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_orange_hover_bg:hsla(30, calc(var(--zd-saturation, 1) * 100.00%), calc(34.90% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_orange_hover_text:hsla(30, calc(var(--zd-saturation, 1) * 100.00%), calc(34.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_orange_hover_border:hsla(30, calc(var(--zd-saturation, 1) * 100.00%), calc(34.90% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_orange_light_bg:hsla(26, calc(var(--zd-saturation, 1) * 77.78%), calc(96.47% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_orange_light_border:hsla(28, calc(var(--zd-saturation, 1) * 80.39%), calc(90.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_orange_light_hover_bg:hsla(28, calc(var(--zd-saturation, 1) * 80.39%), calc(90.00% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_red_bg:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_red_text:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_red_border:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_red_hover_bg:hsla(1, calc(var(--zd-saturation, 1) * 75.38%), calc(38.24% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_red_hover_text:hsla(1, calc(var(--zd-saturation, 1) * 75.38%), calc(38.24% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_red_hover_border:hsla(1, calc(var(--zd-saturation, 1) * 75.38%), calc(38.24% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_red_light_bg:hsla(0, calc(var(--zd-saturation, 1) * 71.43%), calc(97.25% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_red_light_border:hsla(0, calc(var(--zd-saturation, 1) * 70.21%), calc(90.78% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_red_light_hover_bg:hsla(0, calc(var(--zd-saturation, 1) * 70.21%), calc(90.78% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_yellow_bg:hsla(46, calc(var(--zd-saturation, 1) * 81.07%), calc(52.35% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_yellow_text:hsla(46, calc(var(--zd-saturation, 1) * 92.59%), calc(37.06% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_yellow_border:hsla(46, calc(var(--zd-saturation, 1) * 81.07%), calc(52.35% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_yellow_hover_bg:hsla(48, calc(var(--zd-saturation, 1) * 100.00%), calc(35.49% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_yellow_hover_text:hsla(48, calc(var(--zd-saturation, 1) * 100.00%), calc(25.49% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_yellow_hover_border:hsla(48, calc(var(--zd-saturation, 1) * 100.00%), calc(35.49% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_yellow_light_bg:hsla(45, calc(var(--zd-saturation, 1) * 83.33%), calc(95.29% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_yellow_light_border:hsla(46, calc(var(--zd-saturation, 1) * 80.82%), calc(85.69% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_yellow_light_hover_bg:hsla(46, calc(var(--zd-saturation, 1) * 80.82%), calc(85.69% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
--zdt_v1_palette_white:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
--zdt_v1_palette_black:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 0.00%, 1);
}