CSS variables

Acronis UI Component Library is using CSS custom properties to define colors, typography, spacing, and other design tokens according used theme.

Naming convention

--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.

Types of CSS variables

Tokens

These are global values, named objectively, following a strict naming convention. They are used atomically and can not be overridden later.

:root {
  --acv-size--4px: 4px;
}

UI internal variables

These are values that are used internally in the UI components. They created for project reusability, can be used in project dictionary, and can be overridden later.

:root {
  --acv-color-primary: var(--acv-color-blue);
  --acv-card-padding: var(--acv-spacing-large);
  --acv-surface: red;

  @media (prefers-color-scheme: dark) {
    --surface: blue;
  }
}

Adaptive variables

These are dynamic css properties, expected to change.

:root {
  --text: var(--acv-color-gray);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: var(--acv-color-white);
  }
}

Private variables

[Lea Verou calls these pseudo-private custom properties](https://lea.verou.me/2021/10/custom-properties-with-defaults/.

.card {
  --_acv-card-radius: 10px;
}

Which makes them like static tokens or internal props, but scoped instead of global.

Partial props

Parts of a full usable prop. Here, brand color channels as partial props.

:root {
    --h: 200;
    --s: 50%;
    --l: 50%;
}

Mixin props

Basic mixin props are collection of partial props placed on shorthands (background-image, border, border-image, mask-image, etc). This makes the partial props like params into a greater "mixin" prop, function thing.

* {
  --input-1: 1px;
  --input-2: var(--acv-color-blue);
  --border-mixin: var(--input-1) solid var(--input-2);
}

Container query props

Could be used as enums for theming, state machines, you name it.

button {
    @container style(--vibe: primary) {
        --_bg: var(--acv-color-indigo);
        --_border: var(--acv-color-indigo-light);
    }

    @container style(--vibe: rad) {
        --_bg: var(--acv-gradient-11);
        border: none;
    }

    @container style(--size: large) {
        font-size: var(--acv-font-size-title);
    }
}

List of UI-syntax 3.0 global styles

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.

reset.css

/*
    - acv-reset - reset default browser styling for HTML elements (lowest priority)
    - acv-theme - css for specific theme
 */
@layer acv-reset, acv-theme, acv-utilities;
@import "./tokens/sizes.css";
@import "./tokens/icon.css";
@import "./utilities/icon.css";

@layer acv-reset {
  *,
  :before,
  :after {
    box-sizing: border-box;
    background-repeat: no-repeat;
  }

  :before,
  :after {
    text-decoration: inherit;
    vertical-align: inherit;
  }

  :root {
    block-size: 100%;
    cursor: default;
    line-height: var(--acv-font-line-height-regular);
    overflow-wrap: break-word;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent;
    text-size-adjust: 100%;
    hanging-punctuation: first last;
  }

  body {
    background-color: var(--acv-color-surface-primary);
    margin: 0;
    min-block-size: 100%;
    color: var(--acv-color-text-primary);
    font-family: var(--acv-font-family-default);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
  }

  hr {
    block-size: 0;
    color: inherit;
    border-block-start-width: 1px;
  }

  h1,
  h2,
  h3,
  h4,
  p,
  pre,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  b, strong {
    font-weight: var(--acv-font-weight-strong);
  }

  pre {
    font-family: monospace;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value */
    font-size: 1em;
    overflow: auto;
  }

  small {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value */
    font-size: 80%;
  }

  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block;
    /* stylelint-disable-next-line plugin/declaration-block-no-ignored-properties */
    vertical-align: middle;
    align-self: center;
  }

  img,
  picture {
    max-width: 100%;
    display: block;
  }

  :target {
    /* Anything that has been anchored to should have extra scroll margin */
    scroll-margin-block: 5ex;
  }

  iframe {
    border-style: none;
  }

  :where(svg:not([fill])) {
    fill: currentColor;
  }

  code, kbd, samp {
    font-family: monospace;
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value */
    font-size: 1em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  ol,
  ul,
  menu {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  abbr[title] {
    text-decoration: underline;
    text-decoration: underline dotted;
  }

  fieldset {
    margin: 0;
    padding: 0;
  }

  legend {
    padding: 0;
  }

  button,
  input,
  optgroup,
  select,
  textarea {
    font: inherit;
    font-size: var(--acv-font-size-body);
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }

  ::-webkit-search-decoration {
    appearance: none;
  }

  ::-webkit-file-upload-button {
    appearance: button;
    font: inherit;
  }

  /* stylelint-disable-next-line selector-pseudo-element-no-unknown */
  ::input-placeholder {
    color: inherit;
    opacity: 0.54;
  }

  [type="search"] {
    appearance: textfield;
    outline-offset: -2px;
  }

  [aria-controls] {
    cursor: pointer;
  }

  [hidden] {
    display: none;
  }

  [aria-disabled="true"],
  [disabled] {
    cursor: not-allowed;
  }

  summary {
    display: list-item;
  }

  button,
  select {
    text-transform: none;
  }

  progress {
    vertical-align: baseline;
  }

  button {
    appearance: button;
    border: 0;
    background: none;
    text-align: inherit;
  }

  a {
    /* stylelint-disable-next-line scale-unlimited/declaration-strict-value */
    color: currentcolor;
    cursor: pointer;
    text-decoration: none;
  }

  :focus-visible {
    outline: var(--acv-outline-width) solid var(--acv-color-outline);
  }
}

List of UI-syntax 3.0 theme styles

Acronis theme

@import "./acronis-light.pcss";
@import "./acronis-dark.pcss";

@layer acv-theme {
  @media (prefers-color-scheme: light) {
    /* light theme without color scheme override */
    :where(:root:not([class^="acv-theme-"]), .acv-theme-acronis):not(.acv-color-scheme-dark) {
      @mixin acv-theme-acronis-light;
    }

    /* dark theme with color scheme override */
    :where(:root:not([class^="acv-theme-"]), .acv-theme-acronis).acv-color-scheme-dark {
      @mixin acv-theme-acronis-dark;
    }
  }

  @media (prefers-color-scheme: dark) {
    /* light theme without color scheme override */
    :where(:root:not([class^="acv-theme-"]), .acv-theme-acronis).acv-color-scheme-light {
      @mixin acv-theme-acronis-light;
    }

    /* dark theme without color scheme override */
    :where(:root:not([class^="acv-theme-"]), .acv-theme-acronis):not(.acv-color-scheme-light) {
      @mixin acv-theme-acronis-dark;
    }
  }
}

Shadows

small

regular

large

extra-large

extra-extra-large

extra-extra-extra-large