Background & Text Assignments

By self-describing their use, contextual utilities (classes/variables) provide tremendous flexibility, scalability, maintainability, efficiency, and theme-ability.

This article will detail the use of contextual color utilities in Automatic.css, but you should note that there are also contextual spacing utilities. Make sure you understand and use those utilities as well.

Example of a non-contextual color utility

var(--primary), a color variable in ACSS, is an example of a non-contextual utility.

This variable references the site’s primary color but doesn’t tell us where the primary color is being used. Has this color been used for backgrounds? Text? Where else?

We don’t know! Having generic utility names like this makes things unpredictable when it comes time to re-theme the site. It’s also hard to pick up where we left off when we return to a project after many months or when a team works on multiple projects together.

Life is simpler and better when there are standards. Contextual color utilities provide standards.

Example of a naturally contextual color utility

Automatic.css has the following colors available in your palette that are naturally contextual due to their names:

Action – Buttons and links
Accent – Icons, accent items, certain types of backgrounds, minimal splashes of color.
Warning – Any use dictating a warning.
Info – Any use dictating user info.
Danger – Any use dictating danger.
Success – Any use dictating success.

But notice that these colors are used relatively sparingly. They’re not for widespread use across a website for things like background and foreground colors. For widespread use of background and text colors, we need tokens specific for those uses.

Contextual Background Color Utilities in ACSS

Let’s say you set three colors in ACSS:

Action
Primary
Base

Out of those three colors, action is the only naturally contextual color since it self-describes its use (you’ll use it on action items: buttons and links).

Since Primary and Base don’t offer any context, we shouldn’t use those as-is. Instead, we should map them to variables that do provide context.

For Backgrounds, you have four new options. The first two are very simple:

bg--light
bg--dark

There’s always variance in background options, though, right? So, we’ve provided the following two options as well:

bg--ultra-light
bg--ultra-dark

These are set in the new Contextual Utilities area of the dashboard (subject to change – we’re experimenting with where to locate these).

Contextual color utilities dashboard in ACSS

Keep in mind that you also have your website’s default background color. Let’s say your default background color is var(--white). By not using a background color on a section, it will default to white. So, now you have five simple options for setting background colors across your site.

Now combine that with naturally contextual colors found in the ACSS palette, and you now have the following 24 options with five main options that will be used 95% of the time:

default website color
bg--ultra-dark
bg--dark
bg--ultra-light
bg--light
bg--accent-[+6 shades]
bg--action-[light/dark optional as well]
bg--success-[light/dark optional as well]
bg--info-[light/dark optional as well]
bg--warning-[light/dark optional as well]

These utilities are available as both classes and variables. Variables always use single dashes:

section {
  background-color: var(--bg-light);
}
Code language: CSS (css)

Now, if your light background color ever needs to change, you can change it safely. You know exactly where and how it was used. You also don’t need to keep track of what color/shade you’re using for background colors on any given site. All you need to know is what kind of background you want: dark, ultra-dark, light, ultra-light. Easy!

Contextual Text Color Utilities

Let’s say you want to use the following colors for text:

var(--white-trans-80)
var(--white-trans-60)
var(--base-dark-trans-70)
var(--base-dark)

Once again, visit the Contextual Utilities screen in the ACSS dashboard and map these variables to the new text color utilities. There are four options:

text--light
text--dark
text--light-muted
text--dark-muted

text–light and text–dark are the primary options. Muted gives you an option for lower contrast uses that are very common in UI design.

Now, instead of remembering what color you’re using for text, you can simply use .text--light or .text--dark or var(--text-light) or var(--text-dark).

This dramatically improves efficiency, flexibility, scalability, maintainability, and theme-ability.

Real-world example:

The white background of that section is likely the default body background color of the website set to var(–white). Or, if the site’s body background color is something other than white, that section could be set to white using bg--ultra-light.

This is only the start!

We’re starting slow with contextual color utilities. We may expand these to icon colors, fixed utilities for accent backgrounds and text, and more. We’ll collect user feedback and do internal experiments to make the best possible decisions regarding adding new contextual color utilities into the library.

Navigation