Basic colors

There are a few general colors that are used for larger sections or less defined parts of components. For example, --env-section-background-color is used as background color for Modal dialogs.

  • --env-background-color - Theme/body background color
  • --env-section-background-color - Used for larger content sections.
  • --env-section-background-color-05 2025.02.1
  • --env-font-color - Base text color
  • --env-link-font-color - Base link color
  • --env-link-hover-font-color - Base link:hover color
  • --env-border-color - Base border color
  • --env-border-color-05 - Alternative border color 2025.02.1

--env-section-background-color-05 is calculated from --env-section-background-color.

--env-border-color-05 is calculated from --env-border-color.

Accessibility

Font and link colors should have at least a 4.5:1 contrast ratio on --env-background-color and --env-section-background-color.

Depending on design and usage, it´s recommended to try to get at least a 4.5:1 contrast ratio on --env-section-background-color-05 as well.

Examples

--env-background-color is used outside the centered boxes.

<div class="example-fill example-basic-colors  env-p-around--xx-large">
   <div
      class="env-ui-section env-border env-border--05 env-p-around--large env-m-bottom--large"
   >
      <div class="env-text">
         Base text on section background with a border 05 and
         <a href="javascript:void(0)" class="env-link">a link</a>.
      </div>
   </div>
   <div class="env-ui-section-05 env-border env-p-around--large">
      <div class="env-text">
         Base text on section background 05, standard border and
         <a href="javascript:void(0)" class="env-link">a link</a>.
      </div>
   </div>
</div>

Legacy colors Deprecated

The following colors are deprecated and will be removed.

  • env-bg-color--brand
  • env-bg-color--success
  • env-bg-color--info
  • env-bg-color--warning
  • env-bg-color--danger
  • env-bg-color--hover
  • env-bg-color--base
  • env-bg-color--darker
  • env-bg-color--dark
  • env-bg-color--normal
  • env-bg-color--light
  • env-bg-color--lighter
  • env-bg-color--lightest
  • env-color--brand
  • env-color--success
  • env-color--info
  • env-color--warning
  • env-color--danger
  • env-color--hover
  • env-color--base
  • env-color--darker
  • env-color--dark
  • env-color--normal
  • env-color--light
  • env-color--lighter
  • env-color--lightest
  • env-border-color-light 2025.02.1

Envision documentation