Colors

Colors are the crucial part theming of the Acronis UI Component Library. Each theme provides a set of colors that are used to style the components.

These colors are divided into basic colors, background colors, text colors and utility colors.

Each theme may provide light and dark color schemes.

If dark color scheme is not provided, the default dark color scheme is used.

css

/* Example for light and dark color scheme */
html {
  --acv-text-1: var(--acv-color-gray-darkest);
  --text-2: var(--acv-color-gray-dark);

  @container style(--acv-os-dark: true) {
    --text-1: var(--acv-color-gray-lightest);
    --text-2: var(--acv-color-gray-light);
  }
}

Accents

Accent colors are used to highlight interactive elements such as buttons, links, and other interactive elements.

--acv-color-brand-primary Accent colors used on buttons, links and interactive elements

--acv-color-brand-secondary Secondary colors used on non-important interactive elements

--acv-color-brand-tertiary

Status colors

Status colors are used to focus attention on particular UI elements.

--acv-color-status-critical-primary

--acv-color-status-critical-secondary

--acv-color-status-danger-primary Body color for error validation, alerts or toasts

--acv-color-status-danger-secondary Status colors for error validation, alerts or toasts

--acv-color-status-info-primary

--acv-color-status-info-secondary

--acv-color-status-neutral-primary

--acv-color-status-neutral-secondary

--acv-color-status-success-primary Body color for success validation, alerts or toasts

--acv-color-status-success-secondary Status color for success validation, alerts or toasts

--acv-color-status-warning-primary Body color for warning toasts or alerts

--acv-color-status-warning-secondary Status color for warning toasts or alerts

Background colors

Background colors are used to define the background of the page, cards, modals, dropdowns, and other elements.

--acv-color-surface-fixed-primary Page background

--acv-color-surface-fixed-secondary Input, switch, divider background colors

--acv-color-surface-inversed-primary

--acv-color-surface-inversed-secondary

--acv-color-surface-primary

--acv-color-surface-secondary Card, Modal, Dropdown background

Text colors

Text colors are used to define the main and alternative text colors. Usually correct text color will be applied based on background color.

--acv-color-text-disabled

--acv-color-text-error

--acv-color-text-highlight-result

--acv-color-text-inversed-primary

--acv-color-text-inversed-secondary

--acv-color-text-primary

--acv-color-text-secondary

--acv-color-text-status-critical

--acv-color-text-status-danger

--acv-color-text-status-info

--acv-color-text-status-neutral

--acv-color-text-status-success

--acv-color-text-status-warning

Utility colors

Utility colors are used to define the colors of borders, dividers, shadows, and other elements.

--acv-color-effect-shadow-primary

Component colors

Component colors are used to define the colors of specific components.

Button colors

Danger

--acv-color-button-danger

--acv-color-button-active-danger

--acv-color-button-hover-danger

--acv-color-button-disabled-danger

Primary

--acv-color-button-primary

--acv-color-button-active-primary

--acv-color-button-hover-primary

--acv-color-button-disabled

Inversed

--acv-color-button-inversed

--acv-color-button-active-inversed

--acv-color-button-hover-inversed

--acv-color-button-disabled-inversed

Secondary

--acv-color-button-secondary

--acv-color-button-active-secondary

--acv-color-button-hover-secondary

Focus

--acv-color-button-focus

Form colors

--acv-color-form-active

--acv-color-form-disabled-primary

--acv-color-form-disabled-secondary

--acv-color-form-disabled-tertiary

--acv-color-form-disabled-success

--acv-color-form-error

--acv-color-form-focus

--acv-color-form-hover

--acv-color-form-primary

--acv-color-form-secondary

--acv-color-form-success

Icon colors

--acv-color-icon-active

--acv-color-icon-active-disabled

--acv-color-icon-disabled

--acv-color-icon-disabled-inversed

--acv-color-icon-inversed-primary

--acv-color-icon-inversed-secondary

--acv-color-icon-primary

--acv-color-icon-status-critical

--acv-color-icon-status-danger

--acv-color-icon-status-info

--acv-color-icon-status-neutral

--acv-color-icon-status-success

--acv-color-icon-status-warning

Link colors

--acv-color-link-active

--acv-color-link-disabled

--acv-color-link-disabled-inversed

--acv-color-link-hover

--acv-color-link-inversed-primary

--acv-color-link-inversed-secondary

--acv-color-link-primary

--acv-color-link-secondary

Divider colors

--acv-color-divider-primary

--acv-color-divider-secondary

--acv-color-divider-inversed-primary

--acv-color-divider-inversed-secondary

Nav colors

--acv-color-nav-active-primary

--acv-color-nav-active-secondary

--acv-color-nav-focus-primary

--acv-color-nav-focus-secondary

--acv-color-nav-hover-primary

--acv-color-nav-hover-secondary

--acv-color-nav-label-primary

--acv-color-nav-label-secondary

--acv-color-nav-primary

--acv-color-nav-secondary

--acv-color-scroll-thumb

--acv-color-scroll-thumb-inversed

--acv-color-status-active

--acv-color-status-critical-primary

--acv-color-status-critical-secondary

--acv-color-status-critical-tertiary

--acv-color-status-danger-primary

--acv-color-status-danger-secondary

--acv-color-status-danger-tertiary

--acv-color-status-focus

--acv-color-status-hover

--acv-color-status-info-primary

--acv-color-status-info-secondary

--acv-color-status-info-tertiary

--acv-color-status-neutral-primary

--acv-color-status-neutral-secondary

--acv-color-status-neutral-tertiary

--acv-color-status-success-primary

--acv-color-status-success-secondary

--acv-color-status-success-tertiary

--acv-color-status-warning-primary

--acv-color-status-warning-secondary

--acv-color-status-warning-tertiary

--acv-color-surface-fixed-primary

--acv-color-surface-fixed-secondary

--acv-color-surface-inversed-dark-primary

--acv-color-surface-inversed-primary

--acv-color-surface-inversed-secondary

--acv-color-surface-primary

--acv-color-surface-secondary

--acv-color-text-disabled

--acv-color-text-error

--acv-color-text-highlight-result

--acv-color-text-inversed-primary

--acv-color-text-inversed-secondary

--acv-color-text-primary

--acv-color-text-secondary

--acv-color-text-status-critical

--acv-color-text-status-danger

--acv-color-text-status-info

--acv-color-text-status-neutral

--acv-color-text-status-success

--acv-color-text-status-warning

Color palette

--acv-color-red-lightest

--acv-color-red-lighter

--acv-color-red-light

--acv-color-red

--acv-color-red-dark

--acv-color-red-darker

--acv-color-red-darkest

--acv-color-pink-lightest

--acv-color-pink-lighter

--acv-color-pink-light

--acv-color-pink

--acv-color-pink-dark

--acv-color-pink-darker

--acv-color-pink-darkest

--acv-color-purple-lightest

--acv-color-purple-lighter

--acv-color-purple-light

--acv-color-purple

--acv-color-purple-dark

--acv-color-purple-darker

--acv-color-purple-darkest

--acv-color-deep-purple-lightest

--acv-color-deep-purple-lighter

--acv-color-deep-purple-light

--acv-color-deep-purple

--acv-color-deep-purple-dark

--acv-color-deep-purple-darker

--acv-color-deep-purple-darkest

--acv-color-blue-lightest

--acv-color-blue-lighter

--acv-color-blue-light

--acv-color-blue

--acv-color-blue-dark

--acv-color-blue-darker

--acv-color-blue-darkest

--acv-color-dodge-blue-lightest

--acv-color-dodge-blue-lighter

--acv-color-dodge-blue-light

--acv-color-dodge-blue

--acv-color-dodge-blue-dark

--acv-color-dodge-blue-darker

--acv-color-dodge-blue-darkest

--acv-color-light-blue-lightest

--acv-color-light-blue-lighter

--acv-color-light-blue-light

--acv-color-light-blue

--acv-color-light-blue-dark

--acv-color-light-blue-darker

--acv-color-light-blue-darkest

--acv-color-cyan-lightest

--acv-color-cyan-lighter

--acv-color-cyan-light

--acv-color-cyan

--acv-color-cyan-dark

--acv-color-cyan-darker

--acv-color-cyan-darkest

--acv-color-teal-lightest

--acv-color-teal-lighter

--acv-color-teal-light

--acv-color-teal

--acv-color-teal-dark

--acv-color-teal-darker

--acv-color-teal-darkest

--acv-color-green-lightest

--acv-color-green-lighter

--acv-color-green-light

--acv-color-green

--acv-color-green-dark

--acv-color-green-darker

--acv-color-green-darkest

--acv-color-light-green-lightest

--acv-color-light-green-lighter

--acv-color-light-green-light

--acv-color-light-green

--acv-color-light-green-dark

--acv-color-light-green-darker

--acv-color-light-green-darkest

--acv-color-yellow-lightest

--acv-color-yellow-lighter

--acv-color-yellow-light

--acv-color-yellow

--acv-color-yellow-dark

--acv-color-yellow-darker

--acv-color-yellow-darkest

--acv-color-amber-lightest

--acv-color-amber-lighter

--acv-color-amber-light

--acv-color-amber

--acv-color-amber-dark

--acv-color-amber-darker

--acv-color-amber-darkest

--acv-color-gray-lightest

--acv-color-gray-lighter

--acv-color-gray-light

--acv-color-gray

--acv-color-gray-dark

--acv-color-gray-darker

--acv-color-gray-darkest

Colors ​

Accents ​

Status colors ​

Background colors ​

Text colors ​

Utility colors ​

Component colors ​

Button colors ​

Danger ​

Primary ​

Inversed ​

Secondary ​

Focus ​

Form colors ​

Icon colors ​

Link colors ​

Divider colors ​

Nav colors ​

Color palette ​