Natura11y treats canvas (white) as a color—and this is important—it serves as your default theme. Natura11y's CSS file applies the canvas theme (and its correlated colors) to the <body> selector.
Every theme color has five correlated colors. These are for text, borders, and certain links—along with instances of confirm and warn. Correlated colors work in isolation within their corresponding theme color utility class.
Figure 1 (below) depicts the css variable declared for the primary theme on line 3. Lines 7-11 provide css variables for primary's correlated colors.
Natura11y's theme color utility classes are one of its most useful features. Each theme color utility provides predefined colors for background, text, borders, and links (within paragraphs). Theme color utilities also provide colors for instances of confirm and warn.
Figure 2 (below) provides the five theme color utilities:
You may apply theme colors to any containing block-level element within the DOM. Consider the following five cards, each colored with a different theme color utility.
In Figure 3 (below), on line 1, notice the .theme-primary utility present. No other element within the card needs color specified. Each theme color utility applies its correlated colors to all descendants.
Refer to Figure 1 (above), on line 9. The correlated link color (e.g. --primary-link) value sets the color of generic links (<a> tags) within paragraphs (<p> tags). This is not only convenient, it keeps paragraph links visible and accessible.
Beyond generic links, a text color utility named .text-color-link is available. With the following example, .text-color-link (Figure 4, Line 5) colors the buttons within the button group selector blue.
Confirm and Warn
In Figure 1 (above), on lines 10 and 11, you will find declarations for confirm and warn color values. Natura11y allows you to specify confirm and warn values for each theme color!
Instances of confirm and warn appear in alerts, and forms.
You can nest theme color utilities throughout the DOM.
Apply a theme color at a specific breakpoint. Chain a breakpoint modifier (e.g. --lg for a large breakpoint) to a the color utility. In the following example, .theme-primary--lg is present on the parent selector of our nav (Figure 5, line 1).
On smaller viewports The above example uses the default white theme. It instead used the primary theme when the viewport reaches the large breakpoint. Scale your browser horizontally to see this change occur.
Prefers Color Scheme
Natura11y's .theme-canvas utility offers a special --prefers modifier class. With .theme-canvas--prefers present on the <body> tag for example, a light or dark color theme is used depending on the operating system's settings.
Background Color Utilities
Need to apply only a background color? Our background color utilities (shown in Figure 6) apply a background color to its selector.
Text Color Utilities
Natura11y's text color utilities are useful for applying text color specificly to certain selectors.
Consider the following example in Figure 7. With our primary theme applied to the containing element (line 1), .text-color-secondary is present on the third button selector.
Keep in mind that text color utilities take priority over color applied with theme color utilies. This, of course allows for even more variations within your themes.