Colors

Colors in Flair are organized by variants. Each variant has different colors for different intensity levels (400—800). 400 and 500 colors always have sufficient contrast (1:4.5) when paired with foreground[400], while 600-800 always have sufficient contrast when paired with background[400].

The colors are generated using ColorBox, using the approach Lyft explained splendidly in their article: Re-approaching Color.

In dark color scheme, the order of color for each shades are just reversed.

Variants

By default, Flair has 7 color variants: primary, secondary, success, warning, error, dark and light. All of the colors are accessible from the ThemeContext. Accessing a color is as simple as colors[variant][intensity].color. To get the contrasting color: colors[variant][intensity].contrastingColor.

dark

light

primary

secondary

success

warning

error

Foreground and background colors

In light color scheme, background colors will refer to the light-variant colors and foreground colors will refer to the dark-variant colors. Similarly, in dark color scheme, background colors are dark-variant and foreground colors are light-variant.

foreground

background