Style Utilities

Color Variants

.wa-brand .wa-neutral .wa-success .wa-warning .wa-danger

Color utilities allow you to apply the brand, neutral, success, warning, and danger colors from your theme to any element.

Some Web Awesome components, like <wa-button>, allow you to change the color by using a variant attribute:

You can create the same effect on any element by using the color variant utility classes:

Using these classes is a two-way handshake: they do not directly apply styles, but define generic color tokens modeled after our Semantic Colors but without the group identifier (neutral, brand, success, warning, danger), defaulting to neutral. This means that styles can be written to respond to variants by using e.g. --wa-color-fill-loud instead of e.g. --wa-color-brand-fill-loud, and all of our native styles do so (where it made sense).

For example, assume we wanted to make a custom .callout class with color variants. This is all we need to do:

This is a callout.

<p class="callout">This is a callout.</p>
<p class="callout wa-brand">This is a callout.</p>
<p class="callout wa-success">This is a callout.</p>
<p class="callout wa-warning">This is a callout.</p>
<p class="callout wa-danger">This is a callout.</p>

<style>
  .callout {
	background-color: var(--wa-color-fill-quiet);
	border: 1px solid var(--wa-color-border-quiet);
	color: var(--wa-color-on-quiet);
	padding: var(--wa-space-m) var(--wa-space-l);
  }
</style>

Opting In

If you want to use this utility only without all others, you can include the following CSS file from the Web Awesome CDN.

In HTML In CSS

Add the following code to the <head> of your page:

<link rel="stylesheet" href="https://early.webawesome.com/[email protected]/dist/styles/utilities/variants.css" />

Add the following code at the top of your CSS file:

@import url('https://early.webawesome.com/[email protected]/dist/styles/utilities/variants.css');

Want them all? Follow the instructions on the Utilities overview page to get all Web Awesome utilities.

    No results