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:
.wa-brand
.wa-neutral
.wa-success
.wa-warning
.wa-danger
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.
This is a callout.
This is a callout.
This is a callout.
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 Jump to heading
If you want to use this utility only without all others, you can include the following CSS file from the Web Awesome CDN.
Add the following code to the <head>
of your page:
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.12/dist/styles/utilities/variants.css" />
Add the following code at the top of your CSS file:
@import url('https://early.webawesome.com/webawesome@3.0.0-alpha.12/dist/styles/utilities/variants.css');
Want them all? Follow the instructions on the Utilities overview page to get all Web Awesome utilities.