@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
57 lines (46 loc) • 4.21 kB
CSS
[data-mode='light'][data-theme='yellow']{
/* stencil */
--zdt_stencil_dark_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 0.07);
/* dropbox */
--zdt_dropbox_dark_bg:hsla(68, calc(var(--zd-saturation, 1) * 18.60%), 16.86%, 1);
/* listitem */
--zdt_listitem_dark_bg:hsla(68, calc(var(--zd-saturation, 1) * 18.60%), 16.86%, 1);
--zdt_listitem_dark_text:hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
--zdt_listitem_dark_effect_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 0.12);
--zdt_listitem_dark_active_bg:hsla(68, calc(var(--zd-saturation, 1) * 18.75%), 25.10%, 1);
--zdt_listitem_dark_tickicon:hsla(46, calc(var(--zd-saturation, 1) * 81.07%), 52.35%, 1);
/* tag */
--zdt_tag_dark_text:hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
--zdt_tag_dark_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 0.07);
--zdt_tag_dark_hover_text:hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
--zdt_tag_dark_hover_bg:hsla(317, calc(var(--zd-saturation, 1) * 22.14%), 25.69%, 1);
--zdt_tag_dark_close_bg:hsla(347, calc(var(--zd-saturation, 1) * 31.37%), 40.00%, 1);
--zdt_tag_dark_close_text:hsla(0, calc(var(--zd-saturation, 1) * 71.91%), 53.92%, 1);
/* multiselect */
--zdt_multiselect_dark_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 0.2);
--zdt_multiselect_darkmsg_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 0.02);
--zdt_multiselect_darkmsg_text:hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
--zdt_multiselect_darkdelete_hover_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
/* avatar */
--zdt_avatar_white_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 0.2);
--zdt_avatar_white_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
/* label */
--zdt_label_dark_text:hsla(240, calc(var(--zd-saturation, 1) * 4.44%), 82.35%, 1);
/* textbox */
--zdt_textbox_light_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
/* dropdown */
--zdt_dropdown_darkheading_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%, 1);
/* focusscope */
--zdt_a11y_focusScope_focus_border:hsla(46, calc(var(--zd-saturation, 1) * 81.07%), 52.35%, 1);
/* button */
--zdt_button_primary_strike:hsla(46, calc(var(--zd-saturation, 1) * 92.59%), calc(37.06% + var(--zdc_default_inverse_low)), calc( 0.45 + var(--zdc_alpha_low)));
--zdt_button_primaryFilled_strike:hsla(42, calc(var(--zd-saturation, 1) * 75.56%), calc(17.65% + var(--zdc_default_inverse_low)), calc( 0.30 + var(--zdc_alpha_low)));
--zdt_button_secondaryFilled_strike:hsla(45, calc(var(--zd-saturation, 1) * 28.17%), calc(72.16% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
/* buttonloading */
}[dir=ltr] [data-mode='light'][data-theme='yellow']{
--zdt_stencil_dark_gradient_bg:var(--zd-gradient-saturation, linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%));
--zdt_button_loading_primary_linear_gradient:var(--zd-gradient-saturation, linear-gradient(0deg, rgba(232, 185, 35, 1) 50%, rgba(232, 185, 35, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(232, 185, 35, 0.9) 0%, rgba(232, 185, 35, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(232, 185, 35, 0.6) 0%, rgba(232, 185, 35, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(232, 185, 35, 0.3) 0%, rgba(232, 185, 35, 0) 100%) 0% 100%);
}[dir=rtl] [data-mode='light'][data-theme='yellow']{
--zdt_stencil_dark_gradient_bg:var(--zd-gradient-saturation, linear-gradient(to right, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%));
--zdt_button_loading_primary_linear_gradient:var(--zd-gradient-saturation, linear-gradient(0deg, rgba(232, 185, 35, 1) 50%, rgba(232, 185, 35, 0.9) 100%) 0% 0%, linear-gradient(-90deg, rgba(232, 185, 35, 0.9) 0%, rgba(232, 185, 35, 0.6) 100%) 100% 0%, linear-gradient(-180deg, rgba(232, 185, 35, 0.6) 0%, rgba(232, 185, 35, 0.3) 100%) 100% 100%, linear-gradient(-360deg, rgba(232, 185, 35, 0.3) 0%, rgba(232, 185, 35, 0) 100%) 0% 100%);
}