Colors

This is the C2FO standard color palette. All colors have a name which correspond directly with a less variable. For example, the color “primary” has comes from the less variable @color-primary or scss variable $color-primary.

Although a variable exists for each color this is not how our colors should be used in our codebase. See usage for how to properly extend these in less and scss.

Supported

Do not use the HEX values directly. These values are shown so it’s easy to compare colors and for designers to see how close the colors are to a given call out.

Informative State Colors

Colors with names like “success” and “warning” should be used to indicate how something is doing. For example you may use some of these colors to show that something is activated or successful.

The intent of these colors is to be used as variables within a mixin via using :extend(.color-mixin) that way we have less CSS rules created. The selector count will be the same eitherway. Since we are using a preprocessor we’ll be able to read what the intent as well as produce better CSS.

Color Example Hex
success  
warning  
info  
critical  
primary  
secondary  
success-light  
info-light  
warning-light  
critical-light  

Usage

Colors are expected to be used via a &:extend(.color) within a given LESS/SASS declaration. For example:

Less:

html {
    &:extend(.text-color);
    &:extend(.background-color);
}

Scss:

html {
    @extend .text-color;
    @extend .background-color;
}

There are two ways to apply color:

Below are all the possible options:

    
    
  • text-color
    • 
    
  • text-color--success
    • 
    
  • text-color--warning
    • 
    
  • text-color--info
    • 
    
  • text-color--critical
    • 
    
  • text-color--primary
    • 
    
  • text-color--secondary
    • 
    
  • text-color--success-light
    • 
    
  • text-color--info-light
    • 
    
  • text-color--warning-light
    • 
    
  • text-color--critical-light
    • 
    
  • text-color--inverse
    • 
    
  • background-color
    • 
    
  • background-color--success
    • 
    
  • background-color--warning
    • 
    
  • background-color--info
    • 
    
  • background-color--critical
    • 
    
  • background-color--primary
    • 
    
  • background-color--secondary
    • 
    
  • background-color--inverse
    • 
    
  • background-color--success-light
    • 
    
  • background-color--info-light
    • 
    
  • background-color--warning-light
    • 
    
  • background-color--critical-light
    •