Atomics

Color Atomics

Atlas has CSS classes that allow you to easily apply themed background and text colors. Change the site's theme to see how each looks in different themes.

Accessibility concerns

Atlas components ensure accessible text-to-background color contrast ratios. However, when applying specific colors yourself via atomics, always remember to test contrast.

Text colors

Atlas has three themed text colors.

Text color classes
Text color	Text class
Text	`.color-text`
Text subtle	`.color-text-subtle`
Text invert	`.color-text-invert`

Background colors

Atlas has five themed (non-semantic) background colors.

Body color classes
Background color	Background class
Body	`.background-color-body`
Body medium	`.background-color-body-medium`
Body accent	`.background-color-body-accent`
Alternate	`.background-color-alternate`
Alternate medium	`.background-color-alternate-medium`

Semantic colors

Semantic colors are themed colors that vary depending on the active theme. They have names that pertain to their usage. Generally speaking, these are the colors used to paint components too.

Primary color classes
Background color / Text color	Font class	Background class
Primary invert / Primary	`.color-primary`	`.background-color-primary-invert`
Primary light / Primary dark	N/A	`.background-color-primary-light`
Primary / Primary invert	`.color-primary-invert`	`.background-color-primary`
Primary dark / Primary invert	`.color-primary-invert`	`.background-color-primary-dark`

Success color classes
Background color / Text color	Font class	Background class
Success invert / Success	`.color-success`	`.background-color-success-invert`
Success light / Success dark	N/A	`.background-color-success-light`
Success / Success invert	`.color-success-invert`	`.background-color-success`
Success dark / Success invert	`.color-success-invert`	`.background-color-success-dark`

Info color classes
Background color / Text color	Font class	Background class
Info invert / Info	`.color-info`	`.background-color-info-invert`
Info light / Info dark	N/A	`.background-color-info-light`
Info / Info invert	`.color-info-invert`	`.background-color-info`
Info dark / Info invert	`.color-info-invert`	`.background-color-info-dark`

Danger color classes
Background color / Text color	Font class	Background class
Danger invert / Danger	`.color-danger`	`.background-color-danger-invert`
Danger light / Danger dark	N/A	`.background-color-danger-light`
Danger / Danger invert	`.color-danger-invert`	`.background-color-danger`
Danger dark / Danger invert	`.color-danger-invert`	`.background-color-danger-dark`