small
regular
large
extra-large
extra-extra-large
extra-extra-extra-large
CSS variables
Acronis UI Component Library is using CSS variables to define colors, typography, spacing, and other design tokens according used theme.
Syntax
--acv-<category>-<name>
- <category> - category of the token (base, color, font, spacing, component name etc.)
- <name> - name of the token, usually describes the CSS property or the purpose of the token (border, display, color, etc.)
TIP
List of CSS variables is available at the bottom of this page.
List of UI-syntax 3.0 css variables
Basic variables are used to define the basic design tokens like colors, typography, spacing, etc.
Theme variables are used to define the theme-specific design tokens like colors, spacing, components, etc.
css
:root {
--acv-base-border-width-00: 0px;
--acv-base-border-width-01: 1px;
--acv-base-border-width-02: 2px;
--acv-base-border-width-03: 3px;
--acv-base-font-family-inter: Inter;
--acv-base-font-line-height-16: 16px;
--acv-base-font-line-height-20: 20px;
--acv-base-font-line-height-24: 24px;
--acv-base-font-line-height-32: 32px;
--acv-base-font-line-height-40: 40px;
--acv-base-font-line-height-48: 48px;
--acv-base-font-line-height-56: 56px;
--acv-base-font-line-height-64: 64px;
--acv-base-font-size-10: 10px;
--acv-base-font-size-11: 11px;
--acv-base-font-size-12: 12px;
--acv-base-font-size-14: 14px;
--acv-base-font-size-16: 16px;
--acv-base-font-size-18: 18px;
--acv-base-font-size-24: 24px;
--acv-base-font-size-32: 32px;
--acv-base-font-size-40: 40px;
--acv-base-font-size-48: 48px;
--acv-base-font-size-56: 56px;
--acv-base-font-weight-100: 100;
--acv-base-font-weight-300: 300;
--acv-base-font-weight-400: 400;
--acv-base-font-weight-500: 500;
--acv-base-font-weight-600: 600;
--acv-base-font-weight-700: 700;
--acv-base-font-weight-900: 900;
--acv-base-height-16: 16px;
--acv-base-height-24: 24px;
--acv-base-height-32: 32px;
--acv-base-height-40: 40px;
--acv-base-height-48: 48px;
--acv-base-radius-00: 0px;
--acv-base-radius-01: 1px;
--acv-base-radius-02: 2px;
--acv-base-radius-03: 3px;
--acv-base-radius-04: 4px;
--acv-base-radius-06: 6px;
--acv-base-radius-08: 8px;
--acv-base-radius-16: 16px;
--acv-base-radius-circle: 999px;
--acv-base-shadow-blur-08: 4px;
--acv-base-shadow-blur-20: 20px;
--acv-base-shadow-position-y-00: 0px;
--acv-base-shadow-position-y-04: 4px;
--acv-base-shadow-position-y-08: 8px;
--acv-base-spacing-00: 0px;
--acv-base-spacing-02: 2px;
--acv-base-spacing-04: 4px;
--acv-base-spacing-08: 8px;
--acv-base-spacing-12: 12px;
--acv-base-spacing-16: 16px;
--acv-base-spacing-24: 24px;
--acv-base-spacing-32: 32px;
--acv-base-spacing-40: 40px;
--acv-base-spacing-48: 48px;
--acv-base-spacing-56: 56px;
}css
:root,
:root[data-theme="light"],
:root[data-theme="acronis"] {
--acv-border-large: var(--acv-base-border-width-02, 2px);
--acv-border-regular: var(--acv-base-border-width-01, 1px);
--acv-border-x-large: var(--acv-base-border-width-03, 3px);
--acv-color-brand-primary: hsl(215deg 68% 46%);
--acv-color-brand-secondary: hsl(218deg 57% 97%);
--acv-color-brand-tertiary: hsl(218deg 57% 97%);
--acv-color-button-active-danger: hsl(0deg 81% 45%);
--acv-color-button-active-inversed: hsla(0deg 0% 100% / 0.05);
--acv-color-button-active-primary: hsl(215deg 68% 38%);
--acv-color-button-active-secondary: hsl(215deg 56% 89%);
--acv-color-button-danger: hsl(0deg 81% 57%);
--acv-color-button-disabled: hsla(215deg 68% 46% / 0.3);
--acv-color-button-disabled-danger: hsla(0deg 4% 35% / 0.3);
--acv-color-button-disabled-inversed: hsla(0deg 0% 100% / 0.1);
--acv-color-button-focus: hsl(214deg 81% 84%);
--acv-color-button-hover-danger: hsl(0deg 65% 51%);
--acv-color-button-hover-inversed: hsla(0deg 0% 100% / 0.1);
--acv-color-button-hover-primary: hsl(215deg 68% 38%);
--acv-color-button-hover-secondary: hsl(214deg 57% 95%);
--acv-color-button-inversed: hsla(0deg 0% 100% / 0.2);
--acv-color-button-label-disabled: hsla(215deg 68% 46% / 0.3);
--acv-color-button-label-disabled-inversed: hsla(0deg 0% 100% / 0.7);
--acv-color-button-label-inversed-primary: hsl(0deg 0% 100%);
--acv-color-button-label-inversed-secondary: hsl(0deg 0% 100%);
--acv-color-button-label-primary: hsl(215deg 68% 46%);
--acv-color-button-label-secondary: hsl(0deg 0% 100%);
--acv-color-button-primary: hsl(215deg 68% 46%);
--acv-color-button-secondary: hsl(215deg 68% 46%);
--acv-color-divider-inversed-primary: hsl(0deg 0% 100%);
--acv-color-divider-inversed-secondary: hsl(0deg 0% 100%);
--acv-color-divider-primary: hsl(215deg 60% 92%);
--acv-color-divider-secondary: hsl(215deg 60% 92%);
--acv-color-effect-shadow-primary: hsla(215deg 30% 20% / 0.2);
--acv-color-form-active: hsl(215deg 68% 46%);
--acv-color-form-disabled-primary: hsla(215deg 68% 46% / 0.1);
--acv-color-form-disabled-secondary: hsla(215deg 68% 46% / 0.1);
--acv-color-form-disabled-success: hsl(75deg 57% 95%);
--acv-color-form-disabled-tertiary: hsl(215deg 59% 84%);
--acv-color-form-error: hsl(0deg 81% 57%);
--acv-color-form-focus: hsl(214deg 81% 84%);
--acv-color-form-hover: hsl(215deg 68% 38%);
--acv-color-form-primary: hsl(0deg 0% 100%);
--acv-color-form-secondary: hsl(215deg 59% 84%);
--acv-color-form-success: hsl(75deg 68% 45%);
--acv-color-icon-active: hsl(215deg 30% 20%);
--acv-color-icon-active-disabled: hsl(215deg 30% 20%);
--acv-color-icon-disabled: hsla(215deg 68% 46% / 0.3);
--acv-color-icon-disabled-inversed: hsla(0deg 0% 100% / 0.7);
--acv-color-icon-inversed-primary: hsl(0deg 0% 100%);
--acv-color-icon-inversed-secondary: hsla(0deg 0% 100% / 0.7);
--acv-color-icon-primary: hsl(215deg 68% 46%);
--acv-color-icon-status-critical: hsl(11deg 73% 41%);
--acv-color-icon-status-danger: hsl(0deg 72% 45%);
--acv-color-icon-status-info: hsl(215deg 68% 38%);
--acv-color-icon-status-neutral: hsl(0deg 0% 4%);
--acv-color-icon-status-success: hsl(88deg 85% 24%);
--acv-color-icon-status-warning: hsl(30deg 50% 37%);
--acv-color-link-active: hsl(215deg 68% 46%);
--acv-color-link-disabled: hsla(215deg 68% 46% / 0.3);
--acv-color-link-disabled-inversed: hsla(0deg 0% 100% / 0.7);
--acv-color-link-hover: hsl(215deg 68% 38%);
--acv-color-link-inversed-primary: hsl(0deg 0% 100%);
--acv-color-link-inversed-secondary: hsl(0deg 0% 100%);
--acv-color-link-primary: hsl(215deg 68% 46%);
--acv-color-link-secondary: hsl(0deg 0% 100%);
--acv-color-nav-active-primary: hsl(213deg 100% 45%);
--acv-color-nav-active-secondary: hsl(214deg 57% 95%);
--acv-color-nav-focus-primary: hsla(0deg 0% 100% / 0.2);
--acv-color-nav-focus-secondary: hsl(215deg 56% 89%);
--acv-color-nav-hover-primary: hsla(0deg 0% 100% / 0.2);
--acv-color-nav-hover-secondary: hsl(214deg 57% 95%);
--acv-color-nav-label-primary: hsl(0deg 0% 100%);
--acv-color-nav-label-secondary: hsla(0deg 0% 100% / 0.7);
--acv-color-nav-primary: hsl(215deg 100% 15%);
--acv-color-nav-secondary: hsl(0deg 0% 100%);
--acv-color-scroll-thumb: hsla(215deg 30% 20% / 0.4);
--acv-color-scroll-thumb-inversed: hsla(0deg 0% 100% / 0.4);
--acv-color-status-active: hsla(215deg 30% 20% / 0.1);
--acv-color-status-critical-primary: hsl(32deg 95% 92%);
--acv-color-status-critical-secondary: hsl(29deg 100% 53%);
--acv-color-status-critical-tertiary: hsl(21deg 100% 83%);
--acv-color-status-danger-primary: hsl(0deg 100% 96%);
--acv-color-status-danger-secondary: hsl(0deg 81% 57%);
--acv-color-status-danger-tertiary: hsl(0deg 100% 89%);
--acv-color-status-focus: hsl(214deg 81% 84%);
--acv-color-status-hover: hsla(215deg 30% 20% / 0.05);
--acv-color-status-info-primary: hsl(215deg 81% 96%);
--acv-color-status-info-secondary: hsl(214deg 80% 58%);
--acv-color-status-info-tertiary: hsl(214deg 80% 88%);
--acv-color-status-neutral-primary: hsl(220deg 7% 92%);
--acv-color-status-neutral-secondary: hsl(216deg 8% 61%);
--acv-color-status-neutral-tertiary: hsl(216deg 8% 88%);
--acv-color-status-success-primary: hsl(75deg 57% 95%);
--acv-color-status-success-secondary: hsl(75deg 68% 45%);
--acv-color-status-success-tertiary: hsl(75deg 57% 80%);
--acv-color-status-warning-primary: hsl(46deg 100% 95%);
--acv-color-status-warning-secondary: hsl(45deg 100% 51%);
--acv-color-status-warning-tertiary: hsl(45deg 100% 82%);
--acv-color-surface-fixed-primary: hsla(215deg 30% 20% / 0.9);
--acv-color-surface-fixed-secondary: hsl(0deg 0% 100%);
--acv-color-surface-inversed-dark-primary: hsl(215deg 30% 20%);
--acv-color-surface-inversed-primary: hsl(0deg 0% 100%);
--acv-color-surface-inversed-secondary: hsla(0deg 0% 100% / 0.95);
--acv-color-surface-primary: hsl(218deg 57% 97%);
--acv-color-surface-secondary: hsl(214deg 57% 95%);
--acv-color-text-disabled: hsla(215deg 30% 20% / 0.4);
--acv-color-text-error: hsl(0deg 81% 57%);
--acv-color-text-highlight-result: hsl(52deg 100% 50%);
--acv-color-text-inversed-primary: hsl(0deg 0% 100%);
--acv-color-text-inversed-secondary: hsla(0deg 0% 100% / 0.7);
--acv-color-text-primary: hsl(215deg 30% 20%);
--acv-color-text-secondary: hsla(215deg 30% 20% / 0.7);
--acv-color-text-status-critical: hsl(11deg 73% 41%);
--acv-color-text-status-danger: hsl(0deg 72% 45%);
--acv-color-text-status-info: hsl(215deg 68% 38%);
--acv-color-text-status-neutral: hsl(215deg 30% 20%);
--acv-color-text-status-success: hsl(88deg 85% 24%);
--acv-color-text-status-warning: hsl(30deg 50% 37%);
--acv-font-family-default: var(--acv-base-font-family-inter, Inter);
--acv-font-line-height-large: var(--acv-base-font-line-height-40, 40px);
--acv-font-line-height-medium: var(--acv-base-font-line-height-32, 32px);
--acv-font-line-height-regular: var(--acv-base-font-line-height-24, 24px);
--acv-font-line-height-small: var(--acv-base-font-line-height-20, 20px);
--acv-font-line-height-x-large: var(--acv-base-font-line-height-48, 48px);
--acv-font-line-height-x-small: var(--acv-base-font-line-height-16, 16px);
--acv-font-size-accent: var(--acv-base-font-size-16, 16px);
--acv-font-size-body: var(--acv-base-font-size-14, 14px);
--acv-font-size-caption: var(--acv-base-font-size-12, 12px);
--acv-font-size-display: var(--acv-base-font-size-32, 32px);
--acv-font-size-fineprint: var(--acv-base-font-size-10, 10px);
--acv-font-size-lead: var(--acv-base-font-size-18, 18px);
--acv-font-size-note: var(--acv-base-font-size-11, 11px);
--acv-font-size-title: var(--acv-base-font-size-24, 24px);
--acv-font-weight-accent: var(--acv-base-font-weight-500, 500);
--acv-font-weight-regular: var(--acv-base-font-weight-400, 400);
--acv-font-weight-strong: var(--acv-base-font-weight-600, 600);
--acv-font-weight-x-strong: var(--acv-base-font-weight-700, 700);
--acv-height-large: var(--acv-base-height-40, 40px);
--acv-height-regular: var(--acv-base-height-32, 32px);
--acv-height-small: var(--acv-base-height-24, 24px);
--acv-height-x-large: var(--acv-base-height-48, 48px);
--acv-height-x-small: var(--acv-base-height-16, 16px);
--acv-radius-circle: var(--acv-base-radius-circle, 999px);
--acv-radius-large: var(--acv-base-radius-08, 8px);
--acv-radius-medium: var(--acv-base-radius-06, 6px);
--acv-radius-regular: var(--acv-base-radius-04, 4px);
--acv-radius-small: var(--acv-base-radius-02, 2px);
--acv-radius-zero: var(--acv-base-radius-00, 0px);
--acv-shadow-blur-regular: var(--acv-base-shadow-blur-20, 20px);
--acv-shadow-blur-small: var(--acv-base-shadow-blur-08, 4px);
--acv-shadow-position-y-regular: var(--acv-base-shadow-position-y-08, 8px);
--acv-shadow-position-y-small: var(--acv-base-shadow-position-y-04, 4px);
--acv-spacing-large: var(--acv-base-spacing-24, 24px);
--acv-spacing-regular: var(--acv-base-spacing-16, 16px);
--acv-spacing-small: var(--acv-base-spacing-08, 8px);
--acv-spacing-x-large: var(--acv-base-spacing-32, 32px);
--acv-spacing-x-regular: var(--acv-base-spacing-12, 12px);
--acv-spacing-x-small: var(--acv-base-spacing-04, 4px);
--acv-spacing-xx-small: var(--acv-base-spacing-02, 2px);
--acv-spacing-zero: var(--acv-base-spacing-00, 0px);
}css
:root[data-theme="constructor"] {
--acv-border-large: var(--acv-base-border-width-02, 2px);
--acv-border-regular: var(--acv-base-border-width-01, 1px);
--acv-border-x-large: var(--acv-base-border-width-03, 3px);
--acv-color-brand-primary: hsl(0deg 0% 8%);
--acv-color-brand-secondary: hsla(0deg 0% 100% / 0);
--acv-color-brand-tertiary: hsla(0deg 0% 100% / 0);
--acv-color-button-active-danger: hsl(4deg 47% 29%);
--acv-color-button-active-inversed: hsla(0deg 0% 100% / 0.35);
--acv-color-button-active-primary: hsl(0deg 0% 8%);
--acv-color-button-active-secondary: hsla(0deg 0% 8% / 0.2);
--acv-color-button-danger: hsl(345deg 93% 43%);
--acv-color-button-disabled: hsla(0deg 0% 10% / 0.07);
--acv-color-button-disabled-danger: hsla(0deg 0% 10% / 0.07);
--acv-color-button-disabled-inversed: hsla(0deg 0% 100% / 0.07);
--acv-color-button-focus: hsl(214deg 81% 84%);
--acv-color-button-hover-danger: hsl(3deg 52% 39%);
--acv-color-button-hover-inversed: hsla(0deg 0% 100% / 0.2);
--acv-color-button-hover-primary: hsla(0deg 0% 8% / 0.8);
--acv-color-button-hover-secondary: hsla(0deg 0% 8% / 0.1);
--acv-color-button-inversed: hsla(0deg 0% 100% / 0);
--acv-color-button-label-disabled: hsla(0deg 0% 4% / 0.36);
--acv-color-button-label-disabled-inversed: hsla(0deg 0% 100% / 0.7);
--acv-color-button-label-inversed-primary: hsl(0deg 0% 100%);
--acv-color-button-label-inversed-secondary: hsl(0deg 0% 100%);
--acv-color-button-label-primary: hsl(0deg 0% 8%);
--acv-color-button-label-secondary: hsl(0deg 0% 8%);
--acv-color-button-primary: hsl(0deg 0% 8%);
--acv-color-button-secondary: hsl(0deg 0% 8%);
--acv-color-divider-inversed-primary: hsl(0deg 0% 19%);
--acv-color-divider-inversed-secondary: hsl(0deg 0% 31%);
--acv-color-divider-primary: hsl(0deg 0% 94%);
--acv-color-divider-secondary: hsl(0deg 0% 84%);
--acv-color-effect-shadow-primary: hsla(215deg 30% 20% / 0.2);
--acv-color-form-active: hsla(0deg 0% 100% / 0);
--acv-color-form-disabled-primary: hsla(0deg 0% 8% / 0.07);
--acv-color-form-disabled-secondary: hsl(0deg 0% 72%);
--acv-color-form-disabled-success: hsl(75deg 57% 95%);
--acv-color-form-disabled-tertiary: hsl(215deg 59% 84%);
--acv-color-form-error: hsl(345deg 93% 43%);
--acv-color-form-focus: hsl(214deg 81% 84%);
--acv-color-form-hover: hsl(0deg 0% 8%);
--acv-color-form-primary: hsl(0deg 0% 100%);
--acv-color-form-secondary: hsl(0deg 0% 63%);
--acv-color-form-success: hsl(117deg 48% 36%);
--acv-color-icon-active: hsl(0deg 0% 4%);
--acv-color-icon-active-disabled: hsl(0deg 0% 4%);
--acv-color-icon-disabled: hsla(0deg 0% 4% / 0.36);
--acv-color-icon-disabled-inversed: hsla(0deg 0% 100% / 0.7);
--acv-color-icon-inversed-primary: hsl(0deg 0% 100%);
--acv-color-icon-inversed-secondary: hsla(0deg 0% 100% / 0.7);
--acv-color-icon-primary: hsl(0deg 0% 4%);
--acv-color-icon-status-critical: hsl(11deg 73% 41%);
--acv-color-icon-status-danger: hsl(0deg 72% 45%);
--acv-color-icon-status-info: hsl(215deg 68% 38%);
--acv-color-icon-status-neutral: hsl(0deg 0% 4%);
--acv-color-icon-status-success: hsl(88deg 85% 24%);
--acv-color-icon-status-warning: hsl(30deg 50% 37%);
--acv-color-link-active: hsl(0deg 0% 100%);
--acv-color-link-disabled: hsla(0deg 0% 4% / 0.36);
--acv-color-link-disabled-inversed: hsla(0deg 0% 100% / 0.7);
--acv-color-link-hover: hsl(0deg 0% 100%);
--acv-color-link-inversed-primary: hsl(0deg 0% 100%);
--acv-color-link-inversed-secondary: hsl(0deg 0% 100%);
--acv-color-link-primary: hsl(0deg 0% 4%);
--acv-color-link-secondary: hsl(0deg 0% 100%);
--acv-color-nav-active-primary: hsl(213deg 100% 45%);
--acv-color-nav-active-secondary: hsl(215deg 56% 89%);
--acv-color-nav-focus-primary: hsla(0deg 0% 100% / 0.2);
--acv-color-nav-focus-secondary: hsl(215deg 56% 89%);
--acv-color-nav-hover-primary: hsla(0deg 0% 100% / 0.2);
--acv-color-nav-hover-secondary: hsl(214deg 57% 95%);
--acv-color-nav-label-primary: hsl(0deg 0% 100%);
--acv-color-nav-label-secondary: hsl(0deg 0% 100%);
--acv-color-nav-primary: hsl(0deg 0% 4%);
--acv-color-nav-secondary: hsl(0deg 0% 100%);
--acv-color-scroll-thumb: hsla(0deg 0% 100% / 0.4);
--acv-color-scroll-thumb-inversed: hsla(0deg 0% 100% / 0.4);
--acv-color-status-active: hsl(0deg 0% 100%);
--acv-color-status-critical-primary: hsl(32deg 95% 92%);
--acv-color-status-critical-secondary: hsl(17deg 100% 42%);
--acv-color-status-critical-tertiary: hsl(21deg 100% 83%);
--acv-color-status-danger-primary: hsl(0deg 100% 96%);
--acv-color-status-danger-secondary: hsl(345deg 93% 43%);
--acv-color-status-danger-tertiary: hsl(0deg 100% 89%);
--acv-color-status-focus: hsl(0deg 0% 100%);
--acv-color-status-hover: hsl(0deg 0% 100%);
--acv-color-status-info-primary: hsl(215deg 81% 96%);
--acv-color-status-info-secondary: hsl(219deg 67% 54%);
--acv-color-status-info-tertiary: hsl(214deg 80% 88%);
--acv-color-status-neutral-primary: hsl(220deg 7% 92%);
--acv-color-status-neutral-secondary: hsl(216deg 8% 61%);
--acv-color-status-neutral-tertiary: hsl(216deg 8% 88%);
--acv-color-status-success-primary: hsl(75deg 57% 95%);
--acv-color-status-success-secondary: hsl(117deg 48% 36%);
--acv-color-status-success-tertiary: hsl(75deg 57% 80%);
--acv-color-status-warning-primary: hsl(46deg 100% 95%);
--acv-color-status-warning-secondary: hsl(45deg 100% 46%);
--acv-color-status-warning-tertiary: hsl(45deg 100% 82%);
--acv-color-surface-fixed-primary: hsla(0deg 0% 8% / 0.9);
--acv-color-surface-fixed-secondary: hsl(0deg 0% 18%);
--acv-color-surface-inversed-dark-primary: hsl(0deg 0% 100%);
--acv-color-surface-inversed-primary: hsl(0deg 0% 100%);
--acv-color-surface-inversed-secondary: hsla(0deg 0% 100% / 0.95);
--acv-color-surface-primary: hsl(0deg 0% 100%);
--acv-color-surface-secondary: hsl(0deg 0% 94%);
--acv-color-text-disabled: hsla(0deg 0% 8% / 0.4);
--acv-color-text-error: hsl(345deg 93% 43%);
--acv-color-text-highlight-result: hsl(52deg 100% 50%);
--acv-color-text-inversed-primary: hsl(0deg 0% 95%);
--acv-color-text-inversed-secondary: hsla(0deg 0% 95% / 0.7);
--acv-color-text-primary: hsl(0deg 0% 8%);
--acv-color-text-secondary: hsla(0deg 0% 8% / 0.7);
--acv-color-text-status-critical: hsl(17deg 100% 42%);
--acv-color-text-status-danger: hsl(345deg 93% 43%);
--acv-color-text-status-info: hsl(219deg 67% 54%);
--acv-color-text-status-neutral: hsl(0deg 0% 8%);
--acv-color-text-status-success: hsl(117deg 48% 36%);
--acv-color-text-status-warning: hsl(17deg 100% 42%);
--acv-font-family-default: var(--acv-base-font-family-inter, Inter);
--acv-font-line-height-large: var(--acv-base-font-line-height-40, 40px);
--acv-font-line-height-medium: var(--acv-base-font-line-height-32, 32px);
--acv-font-line-height-regular: var(--acv-base-font-line-height-24, 24px);
--acv-font-line-height-small: var(--acv-base-font-line-height-20, 20px);
--acv-font-line-height-x-large: var(--acv-base-font-line-height-48, 48px);
--acv-font-line-height-x-small: var(--acv-base-font-line-height-16, 16px);
--acv-font-size-accent: var(--acv-base-font-size-16, 16px);
--acv-font-size-body: var(--acv-base-font-size-14, 14px);
--acv-font-size-caption: var(--acv-base-font-size-12, 12px);
--acv-font-size-display: var(--acv-base-font-size-32, 32px);
--acv-font-size-fineprint: var(--acv-base-font-size-10, 10px);
--acv-font-size-lead: var(--acv-base-font-size-18, 18px);
--acv-font-size-note: var(--acv-base-font-size-11, 11px);
--acv-font-size-title: var(--acv-base-font-size-24, 24px);
--acv-font-weight-accent: var(--acv-base-font-weight-500, 500);
--acv-font-weight-regular: var(--acv-base-font-weight-400, 400);
--acv-font-weight-strong: var(--acv-base-font-weight-600, 600);
--acv-font-weight-x-strong: var(--acv-base-font-weight-700, 700);
--acv-height-large: var(--acv-base-height-40, 40px);
--acv-height-regular: var(--acv-base-height-32, 32px);
--acv-height-small: var(--acv-base-height-24, 24px);
--acv-height-x-large: var(--acv-base-height-48, 48px);
--acv-height-x-small: var(--acv-base-height-16, 16px);
--acv-radius-circle: var(--acv-base-radius-circle, 999px);
--acv-radius-large: var(--acv-base-radius-00, 0px);
--acv-radius-medium: var(--acv-base-radius-00, 0px);
--acv-radius-regular: var(--acv-base-radius-04, 4px);
--acv-radius-small: var(--acv-base-radius-00, 0px);
--acv-radius-zero: var(--acv-base-radius-00, 0px);
--acv-shadow-blur-regular: 0;
--acv-shadow-blur-small: 0;
--acv-shadow-position-y-regular: 0;
--acv-shadow-position-y-small: 0;
--acv-spacing-large: var(--acv-base-spacing-24, 24px);
--acv-spacing-regular: var(--acv-base-spacing-16, 16px);
--acv-spacing-small: var(--acv-base-spacing-08, 8px);
--acv-spacing-x-large: var(--acv-base-spacing-32, 32px);
--acv-spacing-x-regular: var(--acv-base-spacing-12, 12px);
--acv-spacing-x-small: 0;
--acv-spacing-xx-small: var(--acv-base-spacing-02, 2px);
--acv-spacing-zero: var(--acv-base-spacing-00, 0px);
}css
:root[data-theme="virtuozzo"] {
--acv-border-large: var(--acv-base-border-width-02, 2px);
--acv-border-regular: var(--acv-base-border-width-01, 1px);
--acv-border-x-large: var(--acv-base-border-width-03, 3px);
--acv-color-brand-primary: hsl(215deg 68% 46%);
--acv-color-brand-secondary: hsl(218deg 57% 97%);
--acv-color-brand-tertiary: hsl(218deg 57% 97%);
--acv-color-button-active-danger: hsl(0deg 81% 45%);
--acv-color-button-active-inversed: hsla(0deg 0% 100% / 0.05);
--acv-color-button-active-primary: hsl(215deg 68% 38%);
--acv-color-button-active-secondary: hsl(215deg 56% 89%);
--acv-color-button-danger: hsl(0deg 81% 57%);
--acv-color-button-disabled: hsla(215deg 68% 46% / 0.3);
--acv-color-button-disabled-danger: hsla(0deg 81% 57% / 0.3);
--acv-color-button-disabled-inversed: hsla(0deg 0% 100% / 0.1);
--acv-color-button-focus: hsl(214deg 81% 84%);
--acv-color-button-hover-danger: hsl(0deg 65% 51%);
--acv-color-button-hover-inversed: hsla(0deg 0% 100% / 0.1);
--acv-color-button-hover-primary: hsl(215deg 68% 38%);
--acv-color-button-hover-secondary: hsl(214deg 57% 95%);
--acv-color-button-inversed: hsla(0deg 0% 100% / 0.2);
--acv-color-button-label-disabled: hsl(0deg 0% 100%);
--acv-color-button-label-disabled-inversed: hsla(0deg 0% 100% / 0.7);
--acv-color-button-label-inversed-primary: hsl(0deg 0% 100%);
--acv-color-button-label-inversed-secondary: hsl(0deg 0% 100%);
--acv-color-button-label-primary: hsl(215deg 68% 46%);
--acv-color-button-label-secondary: hsl(0deg 0% 100%);
--acv-color-button-primary: hsl(0deg 88% 3%);
--acv-color-button-secondary: hsl(215deg 68% 46%);
--acv-color-divider-inversed-primary: hsl(0deg 0% 100%);
--acv-color-divider-inversed-secondary: hsl(0deg 0% 100%);
--acv-color-divider-primary: hsl(215deg 60% 92%);
--acv-color-divider-secondary: hsl(215deg 60% 92%);
--acv-color-effect-shadow-primary: hsla(215deg 30% 20% / 0.2);
--acv-color-form-active: hsla(0deg 0% 100% / 0);
--acv-color-form-disabled-primary: hsla(215deg 68% 46% / 0.1);
--acv-color-form-disabled-secondary: hsla(215deg 68% 46% / 0.1);
--acv-color-form-disabled-success: hsl(75deg 57% 95%);
--acv-color-form-disabled-tertiary: hsl(215deg 59% 84%);
--acv-color-form-error: hsl(0deg 81% 57%);
--acv-color-form-focus: hsl(214deg 81% 84%);
--acv-color-form-hover: hsl(215deg 68% 38%);
--acv-color-form-primary: hsl(0deg 0% 100%);
--acv-color-form-secondary: hsl(215deg 59% 84%);
--acv-color-form-success: hsl(75deg 68% 45%);
--acv-color-icon-active: hsl(0deg 0% 4%);
--acv-color-icon-active-disabled: hsl(0deg 0% 4%);
--acv-color-icon-disabled: hsla(215deg 68% 46% / 0.3);
--acv-color-icon-disabled-inversed: hsla(0deg 0% 100% / 0.7);
--acv-color-icon-inversed-primary: hsl(0deg 0% 100%);
--acv-color-icon-inversed-secondary: hsla(0deg 0% 100% / 0.7);
--acv-color-icon-primary: hsl(215deg 68% 46%);
--acv-color-icon-status-critical: hsl(11deg 73% 41%);
--acv-color-icon-status-danger: hsl(0deg 72% 45%);
--acv-color-icon-status-info: hsl(215deg 68% 38%);
--acv-color-icon-status-neutral: hsl(0deg 0% 4%);
--acv-color-icon-status-success: hsl(88deg 85% 24%);
--acv-color-icon-status-warning: hsl(30deg 50% 37%);
--acv-color-link-active: hsl(0deg 0% 100%);
--acv-color-link-disabled: hsl(0deg 0% 100%);
--acv-color-link-disabled-inversed: hsla(0deg 0% 100% / 0.7);
--acv-color-link-hover: hsl(0deg 0% 100%);
--acv-color-link-inversed-primary: hsl(0deg 0% 100%);
--acv-color-link-inversed-secondary: hsl(0deg 0% 100%);
--acv-color-link-primary: hsl(215deg 68% 46%);
--acv-color-link-secondary: hsl(0deg 0% 100%);
--acv-color-nav-active-primary: hsl(213deg 100% 45%);
--acv-color-nav-active-secondary: hsl(215deg 56% 89%);
--acv-color-nav-focus-primary: hsla(0deg 0% 100% / 0.2);
--acv-color-nav-focus-secondary: hsl(215deg 56% 89%);
--acv-color-nav-hover-primary: hsla(0deg 0% 100% / 0.2);
--acv-color-nav-hover-secondary: hsl(214deg 57% 95%);
--acv-color-nav-label-primary: hsl(0deg 0% 100%);
--acv-color-nav-label-secondary: hsl(0deg 0% 100%);
--acv-color-nav-primary: hsl(215deg 100% 15%);
--acv-color-nav-secondary: hsl(0deg 0% 100%);
--acv-color-scroll-thumb: hsla(0deg 0% 100% / 0.4);
--acv-color-scroll-thumb-inversed: hsla(0deg 0% 100% / 0.4);
--acv-color-status-active: hsl(0deg 0% 100%);
--acv-color-status-critical-primary: hsl(32deg 95% 92%);
--acv-color-status-critical-secondary: hsl(29deg 100% 53%);
--acv-color-status-critical-tertiary: hsl(0deg 0% 100%);
--acv-color-status-danger-primary: hsl(0deg 100% 96%);
--acv-color-status-danger-secondary: hsl(0deg 81% 57%);
--acv-color-status-danger-tertiary: hsl(0deg 0% 100%);
--acv-color-status-focus: hsl(0deg 0% 100%);
--acv-color-status-hover: hsl(0deg 0% 100%);
--acv-color-status-info-primary: hsl(215deg 81% 96%);
--acv-color-status-info-secondary: hsl(214deg 80% 58%);
--acv-color-status-info-tertiary: hsl(0deg 0% 100%);
--acv-color-status-neutral-primary: hsl(220deg 7% 92%);
--acv-color-status-neutral-secondary: hsl(216deg 8% 61%);
--acv-color-status-neutral-tertiary: hsl(0deg 0% 100%);
--acv-color-status-success-primary: hsl(75deg 57% 95%);
--acv-color-status-success-secondary: hsl(75deg 68% 45%);
--acv-color-status-success-tertiary: hsl(0deg 0% 100%);
--acv-color-status-warning-primary: hsl(46deg 100% 95%);
--acv-color-status-warning-secondary: hsl(45deg 100% 51%);
--acv-color-status-warning-tertiary: hsl(0deg 0% 100%);
--acv-color-surface-fixed-primary: hsla(215deg 30% 20% / 0.9);
--acv-color-surface-fixed-secondary: hsl(0deg 0% 100%);
--acv-color-surface-inversed-dark-primary: hsl(0deg 0% 100%);
--acv-color-surface-inversed-primary: hsl(0deg 0% 100%);
--acv-color-surface-inversed-secondary: hsla(0deg 0% 100% / 0.95);
--acv-color-surface-primary: hsl(218deg 57% 97%);
--acv-color-surface-secondary: hsl(214deg 57% 95%);
--acv-color-text-disabled: hsla(215deg 30% 20% / 0.4);
--acv-color-text-error: hsl(0deg 81% 57%);
--acv-color-text-highlight-result: hsl(52deg 100% 50%);
--acv-color-text-inversed-primary: hsl(0deg 0% 100%);
--acv-color-text-inversed-secondary: hsla(0deg 0% 100% / 0.7);
--acv-color-text-primary: hsl(215deg 30% 20%);
--acv-color-text-secondary: hsla(215deg 30% 20% / 0.7);
--acv-color-text-status-critical: hsl(11deg 73% 41%);
--acv-color-text-status-danger: hsl(0deg 72% 45%);
--acv-color-text-status-info: hsl(215deg 68% 38%);
--acv-color-text-status-neutral: hsl(215deg 30% 20%);
--acv-color-text-status-success: hsl(88deg 85% 24%);
--acv-color-text-status-warning: hsl(30deg 50% 37%);
--acv-font-family-default: var(--acv-base-font-family-inter, Inter);
--acv-font-line-height-large: var(--acv-base-font-line-height-40, 40px);
--acv-font-line-height-medium: var(--acv-base-font-line-height-32, 32px);
--acv-font-line-height-regular: var(--acv-base-font-line-height-24, 24px);
--acv-font-line-height-small: var(--acv-base-font-line-height-20, 20px);
--acv-font-line-height-x-large: var(--acv-base-font-line-height-48, 48px);
--acv-font-line-height-x-small: var(--acv-base-font-line-height-16, 16px);
--acv-font-size-accent: var(--acv-base-font-size-16, 16px);
--acv-font-size-body: var(--acv-base-font-size-14, 14px);
--acv-font-size-caption: var(--acv-base-font-size-12, 12px);
--acv-font-size-display: var(--acv-base-font-size-32, 32px);
--acv-font-size-fineprint: var(--acv-base-font-size-10, 10px);
--acv-font-size-lead: var(--acv-base-font-size-18, 18px);
--acv-font-size-note: var(--acv-base-font-size-11, 11px);
--acv-font-size-title: var(--acv-base-font-size-24, 24px);
--acv-font-weight-accent: var(--acv-base-font-weight-500, 500);
--acv-font-weight-regular: var(--acv-base-font-weight-400, 400);
--acv-font-weight-strong: var(--acv-base-font-weight-600, 600);
--acv-font-weight-x-strong: var(--acv-base-font-weight-700, 700);
--acv-height-large: var(--acv-base-height-40, 40px);
--acv-height-regular: var(--acv-base-height-32, 32px);
--acv-height-small: var(--acv-base-height-24, 24px);
--acv-height-x-large: var(--acv-base-height-48, 48px);
--acv-height-x-small: var(--acv-base-height-16, 16px);
--acv-radius-circle: var(--acv-base-radius-circle, 999px);
--acv-radius-large: var(--acv-base-radius-08, 8px);
--acv-radius-medium: var(--acv-base-radius-06, 6px);
--acv-radius-regular: var(--acv-base-radius-04, 4px);
--acv-radius-small: var(--acv-base-radius-02, 2px);
--acv-radius-zero: var(--acv-base-radius-00, 0px);
--acv-shadow-blur-regular: 0;
--acv-shadow-blur-small: 0;
--acv-shadow-position-y-regular: 0;
--acv-shadow-position-y-small: 0;
--acv-spacing-large: var(--acv-base-spacing-24, 24px);
--acv-spacing-regular: var(--acv-base-spacing-16, 16px);
--acv-spacing-small: var(--acv-base-spacing-08, 8px);
--acv-spacing-x-large: var(--acv-base-spacing-32, 32px);
--acv-spacing-x-regular: var(--acv-base-spacing-12, 12px);
--acv-spacing-x-small: 0;
--acv-spacing-xx-small: var(--acv-base-spacing-02, 2px);
--acv-spacing-zero: var(--acv-base-spacing-00, 0px);
}css
:root[data-theme="dark"] {
/* colors */
--acv-color-brand-primary: hsl(230deg 13% 9%);
--acv-color-brand-secondary: hsl(218deg 57% 97%);
--acv-color-brand-tertiary: hsl(218deg 57% 97%);
--acv-color-button-active-danger: hsl(215deg 56% 89%);
--acv-color-button-active-primary: hsl(215deg 68% 38%);
--acv-color-button-active-secondary: hsl(215deg 56% 89%);
--acv-color-button-danger: hsl(16deg 25% 38%);
--acv-color-button-disabled: hsl(215deg 68% 46% / 0.3);
--acv-color-button-focus: hsl(214deg 81% 84%);
--acv-color-button-hover-danger: hsl(214deg 57% 95%);
--acv-color-button-hover-primary: hsl(215deg 68% 38%);
--acv-color-button-hover-secondary: hsl(214deg 57% 95%);
--acv-color-button-primary: hsl(215deg 68% 46%);
--acv-color-button-secondary: hsl(215deg 68% 46%);
--acv-color-divider-inversed-primary: hsl(0deg 0% 100%);
--acv-color-divider-inversed-secondary: hsl(0deg 0% 100%);
--acv-color-divider-primary: hsl(215deg 68% 46%);
--acv-color-divider-secondary: hsl(215deg 60% 92%);
--acv-color-effect-shadow-primary: hsl(215deg 30% 20% / 0.2);
--acv-color-form-active: hsl(215deg 68% 46%);
--acv-color-form-disabled: hsl(215deg 68% 46% / 0.05);
--acv-color-form-error: hsl(0deg 81% 57%);
--acv-color-form-focus: hsl(214deg 81% 84%);
--acv-color-form-hover: hsl(215deg 68% 38%);
--acv-color-form-primary: hsl(0deg 0% 100%);
--acv-color-form-secondary: hsl(215deg 59% 84%);
--acv-color-icon-disabled: hsl(215deg 68% 46% / 0.3);
--acv-color-icon-inversed: hsl(218deg 57% 97%);
--acv-color-icon-primary: hsl(215deg 68% 46%);
--acv-color-link-inversed-disabled: hsl(0deg 0% 100%);
--acv-color-link-inversed-primary: hsl(0deg 0% 100%);
--acv-color-link-inversed-secondary: hsl(0deg 0% 100%);
--acv-color-link-primary: hsl(215deg 68% 46%);
--acv-color-link-secondary: hsl(0deg 0% 100%);
--acv-color-nav-active-primary: hsl(213deg 100% 45%);
--acv-color-nav-active-secondary: hsl(215deg 56% 89%);
--acv-color-nav-focus-primary: hsl(213deg 100% 45%);
--acv-color-nav-focus-secondary: hsl(215deg 56% 89%);
--acv-color-nav-hover-primary: hsl(0deg 0% 100% / 0.4);
--acv-color-nav-hover-secondary: hsl(214deg 57% 95%);
--acv-color-nav-primary: hsl(215deg 100% 15%);
--acv-color-nav-secondary: hsl(0deg 0% 100%);
--acv-color-status-critical-primary: hsl(32deg 95% 92%);
--acv-color-status-critical-secondary: hsl(29deg 100% 53%);
--acv-color-status-danger-primary: hsl(0deg 100% 96%);
--acv-color-status-danger-secondary: hsl(0deg 81% 57%);
--acv-color-status-info-primary: hsl(215deg 81% 96%);
--acv-color-status-info-secondary: hsl(214deg 80% 58%);
--acv-color-status-neutral-primary: hsl(220deg 7% 92%);
--acv-color-status-neutral-secondary: hsl(216deg 8% 61%);
--acv-color-status-success-primary: hsl(75deg 57% 95%);
--acv-color-status-success-secondary: hsl(75deg 68% 45%);
--acv-color-status-warning-primary: hsl(46deg 100% 95%);
--acv-color-status-warning-secondary: hsl(45deg 100% 51%);
--acv-color-surface-fixed-primary: hsl(215deg 30% 20% / 0.9);
--acv-color-surface-fixed-secondary: hsl(0deg 0% 100%);
--acv-color-surface-inversed-primary: hsl(0deg 0% 100%);
--acv-color-surface-inversed-secondary: hsl(0deg 0% 100% / 0.95);
--acv-color-surface-primary: hsl(218deg 57% 97%);
--acv-color-surface-secondary: hsl(214deg 57% 95%);
--acv-color-text-disabled: hsl(215deg 30% 20% / 0.4);
--acv-color-text-error: hsl(0deg 81% 57%);
--acv-color-text-highlight-result: hsl(52deg 100% 50%);
--acv-color-text-inversed-primary: hsl(0deg 0% 100%);
--acv-color-text-inversed-secondary: hsl(0deg 0% 100% / 0.7);
--acv-color-text-primary: hsl(215deg 30% 20%);
--acv-color-text-secondary: hsl(215deg 30% 20% / 0.7);
--acv-color-text-status-critical: hsl(11deg 73% 41%);
--acv-color-text-status-danger: hsl(0deg 72% 45%);
--acv-color-text-status-info: hsl(215deg 68% 38%);
--acv-color-text-status-success: hsl(88deg 85% 24%);
--acv-color-text-status-warning: hsl(30deg 50% 37%);
}List of basic tokens
css
:where(html) {
--acv-animation-duration-20: 20ms;
--acv-animation-duration-100: 100ms;
--acv-animation-delay: 300ms;
--acv-animation-repeat: 1;
--acv-animation-fade-in: fade-in 0.5s var(--acv-ease-3);
--acv-animation-fade-in-bloom: fade-in-bloom 2s var(--acv-ease-3);
--acv-animation-fade-out: fade-out 0.5s var(--acv-ease-3);
--acv-animation-fade-out-bloom: fade-out-bloom 2s var(--acv-ease-3);
--acv-animation-scale-up: scale-up 0.5s var(--acv-ease-3);
--acv-animation-scale-down: scale-down 0.5s var(--acv-ease-3);
--acv-animation-slide-out-up: slide-out-up 0.5s var(--acv-ease-3);
--acv-animation-slide-out-down: slide-out-down 0.5s var(--acv-ease-3);
--acv-animation-slide-out-right: slide-out-right 0.5s var(--acv-ease-3);
--acv-animation-slide-out-left: slide-out-left 0.5s var(--acv-ease-3);
--acv-animation-slide-in-up: slide-in-up 0.5s var(--acv-ease-3);
--acv-animation-slide-in-down: slide-in-down 0.5s var(--acv-ease-3);
--acv-animation-slide-in-right: slide-in-right 0.5s var(--acv-ease-3);
--acv-animation-slide-in-left: slide-in-left 0.5s var(--acv-ease-3);
--acv-animation-shake-x: shake-x 0.75s var(--acv-ease-out-5);
--acv-animation-shake-y: shake-y 0.75s var(--acv-ease-out-5);
--acv-animation-shake-z: shake-z 1s var(--acv-ease-in-out-3);
--acv-animation-spin: spin 2s linear infinite;
--acv-animation-ping: ping 5s var(--acv-ease-out-3) infinite;
--acv-animation-blink: blink 1s var(--acv-ease-out-3) infinite;
--acv-animation-float: float 3s var(--acv-ease-in-out-3) infinite;
--acv-animation-bounce: bounce 2s var(--acv-ease-squish-2) infinite;
--acv-animation-pulse: pulse 2s var(--acv-ease-out-3) infinite;
}
@keyframes fade-in {
to {
opacity: 1;
}
}
@keyframes fade-in-bloom {
0% {
opacity: 0;
filter: brightness(1) blur(20px);
}
10% {
opacity: 1;
filter: brightness(2) blur(10px);
}
100% {
opacity: 1;
filter: brightness(1) blur(0);
}
}
@keyframes fade-out {
to {
opacity: 0;
}
}
@keyframes fade-out-bloom {
100% {
opacity: 0;
filter: brightness(1) blur(20px);
}
10% {
opacity: 1;
filter: brightness(2) blur(10px);
}
0% {
opacity: 1;
filter: brightness(1) blur(0);
}
}
@keyframes scale-up {
to {
transform: scale(1.25);
}
}
@keyframes scale-down {
to {
transform: scale(0.75);
}
}
@keyframes slide-out-up {
to {
transform: translateY(-100%);
}
}
@keyframes slide-out-down {
to {
transform: translateY(100%);
}
}
@keyframes slide-out-right {
to {
transform: translateX(100%);
}
}
@keyframes slide-out-left {
to {
transform: translateX(-100%);
}
}
@keyframes slide-in-up {
from {
transform: translateY(100%);
}
}
@keyframes slide-in-down {
from {
transform: translateY(-100%);
}
}
@keyframes slide-in-right {
from {
transform: translateX(-100%);
}
}
@keyframes slide-in-left {
from {
transform: translateX(100%);
}
}
@keyframes shake-x {
0%,
100% {
transform: translateX(0%);
}
20% {
transform: translateX(-5%);
}
40% {
transform: translateX(5%);
}
60% {
transform: translateX(-5%);
}
80% {
transform: translateX(5%);
}
}
@keyframes shake-y {
0%,
100% {
transform: translateY(0%);
}
20% {
transform: translateY(-5%);
}
40% {
transform: translateY(5%);
}
60% {
transform: translateY(-5%);
}
80% {
transform: translateY(5%);
}
}
@keyframes shake-z {
0%,
100% {
transform: rotate(0deg);
}
20% {
transform: rotate(-2deg);
}
40% {
transform: rotate(2deg);
}
60% {
transform: rotate(-2deg);
}
80% {
transform: rotate(2deg);
}
}
@keyframes spin {
to {
transform: rotate(1turn);
}
}
@keyframes ping {
90%,
100% {
transform: scale(2);
opacity: 0;
}
}
@keyframes blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
@keyframes float {
50% {
transform: translateY(-25%);
}
}
@keyframes bounce {
25% {
transform: translateY(-20%);
}
40% {
transform: translateY(-3%);
}
0%,
60%,
100% {
transform: translateY(0);
}
}
@keyframes pulse {
50% {
transform: scale(0.9, 0.9);
}
}
@container style(--acv-os-dark: true) {
@keyframes fade-in-bloom {
0% {
opacity: 0;
filter: brightness(1) blur(20px);
}
10% {
opacity: 1;
filter: brightness(0.5) blur(10px);
}
100% {
opacity: 1;
filter: brightness(1) blur(0);
}
}
}
@container style(--acv-os-dark: true) {
@keyframes fade-out-bloom {
100% {
opacity: 0;
filter: brightness(1) blur(20px);
}
10% {
opacity: 1;
filter: brightness(0.5) blur(10px);
}
0% {
opacity: 1;
filter: brightness(1) blur(0);
}
}
}css
:where(html) {
--acv-ratio-square: 1;
--acv-ratio-landscape: 4/3;
--acv-ratio-portrait: 3/4;
--acv-ratio-widescreen: 16/9;
--acv-ratio-ultrawide: 18/5;
--acv-ratio-golden: 1.618/1;
}css
:root {
/* Shadow: blur, x-offset, y-offset, hsl(color / strength) */
--acv-shadow-color-hsl: 215deg 30% 20%;
--acv-shadow-color: hsl(var(--acv-shadow-color-hsl));
--acv-shadow-strength: 1%;
--acv-inner-shadow-highlight: inset 0 -0.5px 0 0 hsl(0deg 0% 100%),
inset 0 0.5px 0 0 hsl(0deg 0% 0% / 0.067);
--acv-box-shadow: 0 10px 20px 0;
--acv-box-shadow-details: 0 15px 30px 0 hsl(218deg 11% 20% / 0.25);
--acv-box-shadow-focus: var(--acv-box-shadow) hsl(218deg 11% 20% / 0.25);
--acv-box-shadow-modal: var(--acv-box-shadow) hsl(218deg 11% 20% / 0.7);
--acv-shadow-blur-regular: var(--acv-base-shadow-blur-08);
--acv-shadow-blur-large: var(--acv-base-shadow-blur-20);
--acv-shadow-position-zero: var(--acv-base-shadow-position-y-00);
--acv-shadow-position-y-small: var(--acv-base-shadow-position-y-04);
--acv-shadow-position-y-regular: var(--acv-base-shadow-position-y-08);
/* --acv-shadow-default: 0px 4px 20px 0px var(--acv-color-white-80); */
/* --acv-shadow-danger: 0px 0px 0px 1px var(--acv-color-red) inset; */
/* --acv-shadow-danger-strong: 0px 0px 0px 1px var(--acv-color-red-shade-10) inset; */
/* --acv-shadow-disabled: 0px 0px 0px 1px var(--acv-color-gray-light-20) inset; */
/* --acv-shadow-focus: 0px 0px 0px 4px var(--acv-color-gray-shade-10) inset; */
/* --acv-shadow-primary: 0px 0px 0px 1px var(--acv-color-blue-gray-light-20) inset; */
/* small */
--acv-shadow-small-x-offset: 0rem;
--acv-shadow-small-y-offset: 0.25rem;
--acv-shadow-small-blur: 0.5rem;
--acv-shadow-small-color: hsl(var(--acv-shadow-color-hsl) / 0.1);
--acv-shadow-small: 0px 4px 8px 0px var(--acv-shadow-small-color);
/* regular */
--acv-shadow-regular-x-offset: 0rem;
--acv-shadow-regular-y-offset: 0.625rem;
--acv-shadow-regular-blur: 1.25rem;
--acv-shadow-regular-color: hsl(var(--acv-shadow-color-hsl) / 0.2);
--acv-shadow-regular-dark-color: hsl(0deg 0% 0% / 0.3);
--acv-shadow-regular: 0 10px 20px 0 var(--acv-shadow-regular-color);
/* large */
--acv-shadow-large-x-offset: 0rem;
--acv-shadow-large-y-offset: 0.625rem;
--acv-shadow-large-blur: 1.25rem;
--acv-shadow-large-color: hsl(var(--acv-shadow-color-hsl) / 0.9);
--acv-shadow-large: 0 0 20px var(--acv-shadow-large-color);
/* modal */
--acv-shadow-modal-color: hsl(var(--acv-shadow-color-hsl) / 0.9);
--acv-shadow-modal: 0px 10px 20px 0px var(--acv-shadow-modal-color);
--acv-shadow-modal-dark: 0px 10px 20px 0px
var(--acv-shadow-regular-dark-color);
/* vertical */
--acv-shadow-vertical: -2px 0px 20px 0px hsl(0deg 0% 0% / 0.25);
--acv-shadow-vertical-right: 5px 0px 20px 0px
hsl(var(--acv-shadow-color-hsl) / 0.2);
--acv-shadow-vertical-dark: -2px 0px 20px 0px hsl(0deg 0% 0% / 0.25);
/* soft */
--acv-shadow-soft: var(--acv-shadow-small);
--acv-shadow-strong: var(--acv-shadow-small);
--acv-shadow-shape: 0 0 20px 0 hsl(218deg 11% 20% / 0.25);
/* inner shadows */
--acv-inner-shadow: inset 0 0 20px 0 hsl(218deg 11% 20% / 0.25);
}
@container style(--acv-os-dark: true) {
:root {
--acv-shadow-regular-color: hsl(var(--acv-shadow-color-hsl) / 0.2);
--acv-shadow-regular-dark-color: hsl(0deg 0% 0% / 0.3);
--acv-shadow-modal-color: hsl(var(--acv-shadow-color-hsl) / 0.9);
--acv-shadow-vertical: -2px 0px 20px 0px hsl(0deg 0% 0% / 0.25);
--acv-shadow-vertical-right: 5px 0px 20px 0px
hsl(var(--acv-shadow-color-hsl) / 0.2);
--acv-shadow-vertical-dark: -2px 0px 20px 0px hsl(0deg 0% 0% / 0.25);
--acv-shadow-color-hsl: 220 40% 2%;
--acv-shadow-strength: 25%;
--inner-shadow-highlight: inset 0 -0.5px 0 0 hsl(0deg 0% 100% / 0.06),
inset 0 0.5px 0 0 hsl(0deg 0% 0% / 0.5);
}
}