CSS variables

CSS variables are available with the format: --env-{variable}

Only works in browsers that support CSS variables.

Example

<div class="example-variables">
   <div class="example-custom-css">Example</div>
</div>

<style>
   .example-custom-css {
      margin: var(--env-spacing-medium) var(--env-spacing-xx-large);
      padding: var(--env-spacing-x-large);
      box-shadow: var(--env-box-shadow);
      background-color: var(--env-block-secondary-background-color);
      color: var(--env-block-secondary-font-color);
      border: 2px dashed var(--env-block-secondary-border-color);
      border-radius: var(--env-border-radius-large);
      font-size: var(--env-font-size-large);
      text-align: center;
   }
</style>

Available CSS variables

General

Font

  • --env-font-family
  • --env-font-color
  • --env-font-size-base
  • --env-font-size-x-small
  • --env-font-size-small
  • --env-font-size-medium
  • --env-font-size-large
  • --env-font-size-x-large
  • --env-font-size-xx-large
  • --env-font-size-xxx-large
  • --env-font-size-xxxx-large

Links 8.2

  • --env-link-font-color
  • --env-link-text-decoration
  • --env-link-hover-font-color
  • --env-link-hover-text-decoration

  • --env-link-secondary-font-color
  • --env-link-secondary-text-decoration
  • --env-link-secondary-hover-font-color
  • --env-link-secondary-hover-text-decoration

Spacing 8.2

  • --env-spacing-xxx-small
  • --env-spacing-xx-small
  • --env-spacing-x-small
  • --env-spacing-small
  • --env-spacing-medium
  • --env-spacing-large
  • --env-spacing-x-large
  • --env-spacing-xx-large
  • --env-spacing-xxx-large

Shadows 8.2

  • --env-box-shadow
  • --env-box-shadow-large
  • --env-box-shadow-small

Borders 8.2

  • --env-border-radius
  • --env-border-radius-small
  • --env-border-radius-medium
  • --env-border-radius-large

  • --env-border-color
  • --env-border-color-light
  • --env-border-success-color
  • --env-border-warning-color
  • --env-border-danger-color

Colors

Base 8.2

  • --env-page-background-color
  • --env-section-background-color

Blocks 8.2

  • --env-block-font-color
  • --env-block-background-color
  • --env-block-border-color
    Block links: 8.2.1
  • --env-block-link-font-color
  • --env-block-link-hover-font-color

  • --env-block-primary-font-color
  • --env-block-primary-background-color
  • --env-block-primary-border-color
    Block links: 8.2.1
  • --env-block-primary-link-font-color
  • --env-block-primary-link-hover-font-color

  • --env-block-secondary-font-color
  • --env-block-secondary-background-color
  • --env-block-secondary-border-color
    Block links: 8.2.1
  • --env-block-secondary-link-font-color
  • --env-block-secondary-link-hover-font-color

Elements 8.2

  • --env-element-font-color
  • --env-element-background-color
  • --env-element-background-color-dark
  • --env-element-background-color-light

  • --env-element-primary-font-color
  • --env-element-primary-background-color
  • --env-element-primary-background-color-dark
  • --env-element-primary-background-color-light

  • --env-element-secondary-font-color
  • --env-element-secondary-background-color
  • --env-element-secondary-background-color-dark
  • --env-element-secondary-background-color-light

  • --env-element-success-font-color
  • --env-element-success-background-color
  • --env-element-success-background-color-dark
  • --env-element-success-background-color-light

  • --env-element-warning-font-color
  • --env-element-warning-background-color
  • --env-element-warning-background-color-dark
  • --env-element-warning-background-color-light

  • --env-element-danger-font-color
  • --env-element-danger-background-color
  • --env-element-danger-background-color-dark
  • --env-element-danger-background-color-light

  • --env-element-info-font-color
  • --env-element-info-background-color
  • --env-element-info-background-color-dark
  • --env-element-info-background-color-light

  • --env-element-common-background-color
  • --env-element-common-background-color-dark

Components

Alert 8.2

  • --env-alert-font-family
  • --env-alert-border-radius
  • --env-alert-background-color

Badge 8.2

  • --env-badge-font-family
  • --env-badge-font-size
  • --env-badge-border-radius

Breadcrumbs 8.2

  • --env-breadcrumb-divider-color

Buttons 8.2

  • --env-button-font-family
  • --env-button-border-radius

Cardholder 9.0.1

  • --env-cardholder-column-min-width
  • --env-cardholder-column-max-width
  • --env-cardholder-column-spacing

Collapse 8.2

  • --env-collapse-border-style
  • --env-collapse-border-width
  • --env-collapse-icon-color
  • --env-collapse-icon-width
  • --env-collapse-icon-height
  • --env-collapse-toggle-duration
  • --env-collapse-background-color
  • --env-collapse-border-color
  • --env-collapse-expanded-background-color
  • --env-collapse-expanded-border-color

Form 8.2

  • --env-form-font-family
  • --env-form-input-border-radius
  • --env-form-input-font-color
  • --env-form-input-border-color
  • --env-form-input-background-color

Image viewer/slider controls 8.2

  • --env-image-control-color
  • --env-image-control-inactive-color

Modal 8.2

  • --env-modal-small-width
  • --env-modal-medium-width
  • --env-modal-large-width
  • --env-modal-backdrop-background-color
  • --env-modal-backdrop-opacity

Pagination 8.2

  • --env-pagination-font-family
  • --env-pagination-border-width
  • --env-pagination-border-style

Popover 8.2

  • --env-popover-width

Profile image 8.2

  • --env-profile-image-border-radius

Spinner

  • --env-spinner-color

Legacy variables Deprecated

  • --env-color-page-bg
  • --env-color-element-bg
  • --env-color-brand
  • --env-color-brand-light
  • --env-color-brand-dark
  • --env-color-warning
  • --env-color-warning-dark
  • --env-color-danger
  • --env-color-success
  • --env-color-info
  • --env-color-hover
  • --env-font-color-light
  • --env-font-color-lighter
  • --env-font-color-invert
  • --env-color-base
  • --env-color-darker
  • --env-color-dark
  • --env-color-normal
  • --env-color-light
  • --env-color-lighter
  • --env-color-lightest
  • --env-focus-background-color
  • --env-focus-color

Removed

  • --env-default-button-color 8.2