Colors

Overview

There are six color groups supported - primary, secondary, success, warn, error, and muted. Each color group has a main, light, and dark variant.

The default primary, secondary, error, and muted colors and their dark variants are designed to have sufficient contrast with white, either as a background color or text. The default success and warn colors, as well as any of the light variants do not have sufficient contrast, and are intended as bold blocks of color or accents. The color system is designed to allow you to use any of these colors for flexibility, but make sure to check and manage color contrast when using these colors.

primary-light

primary

primary Dark

secondary Light

secondary

secondary Dark

success-light

success

success-dark

warn-light

warn

warn-dark

error-light

error

error-dark

muted-light

muted

muted-dark

Text Colors

Each color has a related text class with the format fc-text-{color}

Primary Light - Primary - Primary Dark

      
<span class="fc-text-primary-light">Primary Light </span> -
<span class="fc-text-primary">Primary </span> -
<span class="fc-text-primary-dark">Primary Dark</span>
    

Secondary Light - Secondary - Secondary Dark

      
<span class="fc-text-secondary-light">Secondary Light </span> -
<span class="fc-text-secondary">Secondary </span> -
<span class="fc-text-secondary-dark">Secondary Dark </span>
    

Muted Light - Muted - Muted Dark

      
<span class="fc-text-muted-light">Muted Light </span> -
<span class="fc-text-muted">Muted </span> -
<span class="fc-text-muted-dark">Muted Dark </span>
    

Success Light - Success - Success Dark

      
<span class="fc-text-success-light">Success Light </span> -
<span class="fc-text-success">Success </span> -
<span class="fc-text-success-dark">Success Dark </span>
    

Warn Light - Warn - Warn Dark

      
<span class="fc-text-warn-light">Warn Light </span> -
<span class="fc-text-warn">Warn </span> -
<span class="fc-text-warn-dark">Warn Dark </span>
    

Error Light - Error - Error Dark

    
<span class="fc-text-secondary-light">Secondary Light </span> -
<span class="fc-text-secondary">Secondary </span> -
<span class="fc-text-secondary-dark">Secondary Dark </span>
      

Background Colors

The background color of elements can be set with the class fc-bg-{color} for each provided color. For example, each of the codeblocks in the above text section has it's background colored in this manner. Many elements, such as code blocks have automatic integration with these color classes.

<pre class="fc-bg-primary-light">
  <code>Code Block Content</code>
</pre>

Outline Colors

By setting the class fc-border-{color} you can set the color of an element's border. This does not include any other border styling. Many element's integrate this, including list groups, and the fc-border-left attributes of block quotes and code blocks.

<ul class="fc-list-group fc-border-primary">
  <li>List Item 1</li>
  <li>List Item 2</li>
</ul>

<pre class="fc-border-left fc-border-primary"><code>
  Code
</code></pre>