@zohodesk/components/assets/Contrast/darkContrastLightness.module.css

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

[data-mode='dark']:global:not(.zd-contrast) {
   --zdc_default: calc(0 * 1%);
   --zdc_default_low: calc(0 * 1%);
   --zdc_default_inverse: calc(0 * 1%);
   --zdc_default_inverse_low: calc(0 * 1%);
   --zdc_default_inverse_lower: calc(0 * 1%);
   --zdc_default_inverse_medium: calc(0 * 1%);
   --zdc_darker: calc(0 * 1%);
   --zdc_darker_low: calc(0 * 1%);
   --zdc_darker_lower: calc(0 * 1%);
   --zdc_darker_lowest: calc(0 * 1%);
   --zdc_lighter: calc(0 * 1%);
   --zdc_lighter_low: calc(0 * 1%);
   --zdc_lighter_lower: calc(0 * 1%);
   --zdc_lighter_medium: calc(0 * 1%);
   --zdc_lighter_high: calc(0 * 1%);
   --zdc_alpha_high: 0;
   --zdc_alpha_low: 0;
}

[data-mode='dark']:global(.zd-contrast) {
   --zdc_default: calc(var(--zd_contrastLevel) * -1%);
   --zdc_default_low: calc(var(--zd_contrastLevel) * -1%);
   --zdc_default_inverse: calc(var(--zd_contrastLevel) * 1%);
   --zdc_default_inverse_low: calc(var(--zd_contrastLevel) * 0.25%);
   --zdc_default_inverse_lower: calc(var(--zd_contrastLevel) * 0.10%);
   --zdc_default_inverse_medium: calc(var(--zd_contrastLevel) * 1.5%);
   --zdc_darker: calc(var(--zd_contrastLevel) * -1%);
   --zdc_darker_low: calc(var(--zd_contrastLevel) * -0.50%);
   --zdc_darker_lower: calc(var(--zd_contrastLevel) * -1%);
   --zdc_darker_lowest: calc(var(--zd_contrastLevel) * -1%);
   --zdc_lighter: calc(var(--zd_contrastLevel) * 1%);
   --zdc_lighter_low: calc(var(--zd_contrastLevel) * 0.50%);
   --zdc_lighter_lower: calc(var(--zd_contrastLevel) * 0.25%);
   --zdc_lighter_medium: calc(var(--zd_contrastLevel) * 1.5%);
   --zdc_lighter_high: calc(var(--zd_contrastLevel) * 1%);
   --zdc_alpha_high: 1;
   --zdc_alpha_low: calc(var(--zd_contrastLevel) * 0.02);
}