Colors

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 background color
• --env-section-background-color - Used for larger sections
• --env-font-color - Generic text color
• --env-link-font-color - Generic link color
• --env-link-hover-font-color - Generic link:hover color
• --env-border-color - Generic border color
• --env-border-color-light - Calculated from --env-border-color

--env-font-color should have at least a 4.5:1 contrast ratio on both --env-background-color and --env-section-background-color.

The following example uses --env-background-color outside the centered box and the following colors inside the box --env-section-background-color, --env-border-color, --env-font-color, --env-link-font-color, --env-link-hover-font-color

<div class="example-fill example-basic-colors  env-p-around--xx-large">
   <div class="env-ui-section env-border env-p-around--large">
      <div class="env-text">
         Generic text with
         <a href="javascript:void(0)" class="env-link">a link</a>.
      </div>
   </div>
</div>

Block colors

Preset color combinations, use for larger blocks of content.

<div class="example-grid" id="blocks">
   <div class="example-grid__col example-grid__col--33">
      <div class="env-block env-block--border">
         <div class="example-variant">
            <h2 class="env-text-h4">Default</h2>
            <p>
               Bacon <a href="#block" class="env-link">ipsum</a> dolor
               <a href="#blocks">amet beef</a> cupim brisket pork
               <a href="#block" class="env-link-secondary">turducken</a>.
            </p>
         </div>
      </div>
   </div>
   <div class="example-grid__col example-grid__col--33">
      <div class="env-block-primary env-block-primary--border">
         <div class="example-variant">
            <h2 class="env-text-h4">Primary</h2>
            <p>
               Bacon <a href="#block" class="env-link">ipsum</a> dolor
               <a href="#blocks">amet beef</a> cupim brisket pork
               <a href="#block" class="env-link-secondary">turducken</a>.
            </p>
         </div>
      </div>
   </div>
   <div class="example-grid__col example-grid__col--33">
      <div class="env-block-secondary env-block-secondary--border">
         <div class="example-variant">
            <h2 class="env-text-h4">Secondary</h2>
            <p>
               Bacon <span href="#block" class="env-link">ipsum</span> dolor
               <a href="#blocks">amet beef</a> cupim brisket pork
               <a href="#block" class="env-link-secondary">turducken</a>.
            </p>
         </div>
      </div>
   </div>
</div>

Element colors

Element colors are used for elements and components. See usage examples below.

Status colors 2023.02.1

Status colors are UI colors that are used to signal a status, for example if a user is logged in or when new messages have arrived.

Status colors have a main color and a matching contrast color for text.

Status color text should be used when status color is applied to text on section background. Since 2023.07.1

Examples of usage

Badge

8 Logged in 42

Custom inline SVG decoration

Error message

Email

Please enter a valid email address

Status badge

Lorem Ipsumsson

Logged in

Status badge on Profile image

Logged in

Text

Logged in

New message

An error occurred

Documentation of examples:

• Status variant Badge
• Custom inline SVG decoration
• Status badge
• Status badge on Profile image
• Form error message
• Text status colors

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