@zohodesk/components
Version:
In this Package, we Provide Some Basic Components to Build Web App
36 lines • 3.95 kB
CSS
[data-mode='dark'][data-theme='red'] {
/* CTA variables */
--zdt_cta_primary_text: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_cta_primary_hover_text: hsla(0, 77.03%, calc(70.98% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_cta_primary_bg: hsla(0, 77.78%, calc(61.18% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_cta_primary_hover_bg: hsla(0, 81.62%, calc(36.27% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_cta_primary_border: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_cta_primary_hover_border: hsla(0, 81.62%, calc(36.27% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_cta_primary_box_shadow: rgba(222, 53, 53, 0.2);
--zdt_cta_primary_hover_box_shadow: rgba(171, 26, 24, 0.25);
--zdt_cta_primary_light_bg: hsla(258, 12.62%, calc(20.20% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_cta_primary_light_hover_bg: hsla(334, 20.00%, calc(24.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_cta_primary_light_border: hsla(334, 20.00%, calc(24.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_cta_secondary_bg: hsla(0, 77.78%, calc(61.18% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_cta_secondary_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter_high)), calc(1 + var(--zdc_alpha_high)));
--zdt_cta_secondary_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_medium)), calc( 0.15 + var(--zdc_alpha_low)));
--zdt_cta_secondary_light_border: hsla(334, 20.00%, calc(24.51% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_cta_secondary_light_bg: hsla(334, 20.00%, calc(24.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_cta_alpha_text: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_cta_alpha_hover_text: hsla(0, 81.62%, calc(36.27% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_cta_alpha_border: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_cta_alpha_hover_border: hsla(0, 81.62%, calc(36.27% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_cta_alpha_bg: hsla(284, 10.48%, calc(20.59% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
--zdt_cta_beta_border: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
--zdt_cta_grey_10_bg: hsla(217, 23.23%, calc(19.41% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
--zdt_cta_grey_10_border: hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_cta_grey_15_bg: hsla(218, 23.08%, calc(22.94% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
--zdt_cta_grey_15_border: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_cta_grey_20_bg: hsla(217, 22.81%, calc(11.18% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
--zdt_cta_grey_35_bg: hsla(223, 21.68%, calc(28.04% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
--zdt_cta_grey_35_text: hsla(223, 21.68%, calc(28.04% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_cta_grey_35_border: hsla(223, 21.68%, calc(28.04% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
--zdt_cta_grey_40_bg: hsla(216, 22.98%, calc(31.57% + var(--zdc_darker_lowest)), calc(1 + var(--zdc_alpha_high)));
--zdt_cta_grey_40_text: hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
--zdt_cta_grey_40_border: hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
}