3 colors Colors

There is a scss file included called _project-theme.scss. This file contains semantic naming of variables that map to 'paint swatch' naming. Components should all use the semantically-named variables to better indicate the designer's intent and promote site-wide consistency. For example, --text-color shows intent, where --ink-01 doesn't carry any semantic meaning.

Colors are stored in a nested SCSS map and then converted to root-level CSS variables with a SCSS mixin. The first option in the swatches below shows the CSS variable. Use these whenever possible to allow for access to the theme overrides. Sometimes using SCSS variables directly is required, such as when adding colors to css-inline SVGs, or mixing RGBA values. In those cases, use the color() function, which will print the hex value in the compiled CSS.