3.0.0-alpha.11 Alpha
Style Utilities

Appearance Variants

.wa-accent .wa-outlined .wa-filled .wa-plain

Appearance utilities apply a collection of properties to achieve certain effects, like making elements accented, outlined, filled, or plain.

Some Web Awesome components, like <wa-button>, allow you to change their overall style by using an appearance attribute:

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

Using these classes is a two-way handshake: they do not directly apply styles, but define custom properties that you can use in styles that should respond to these utilities:

Then you can use (some of) these properties in any class that should respond to these.

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

<small class="badge wa-accent">Accent</small>
<small class="badge wa-outlined">Outlined</small>
<small class="badge wa-filled">Filled</small>
<small class="badge wa-plain">Plain</small>

<style>
  .badge {
	background-color: var(--background-color);
	border: 1px solid var(--border-color);
	color: var(--text-color);
	padding: var(--wa-space-2xs) var(--wa-space-xs);
	border-radius: var(--wa-border-radius-s);
  }
</style>

With Color Variants

These properties also work well with the color variants utility classes:

<div class="wa-stack">
	<div class="wa-brand">
		<small class="badge wa-accent">Accent</small>
		<small class="badge wa-outlined">Outlined</small>
		<small class="badge wa-filled">Filled</small>
		<small class="badge wa-plain">Plain</small>
	</div>
	<div class="wa-danger">
		<small class="badge wa-accent">Accent</small>
		<small class="badge wa-outlined">Outlined</small>
		<small class="badge wa-filled">Filled</small>
		<small class="badge wa-plain">Plain</small>
	</div>
	<div class="wa-warning">
		<small class="badge wa-accent">Accent</small>
		<small class="badge wa-outlined">Outlined</small>
		<small class="badge wa-filled">Filled</small>
		<small class="badge wa-plain">Plain</small>
	</div>
	<div class="wa-success">
		<small class="badge wa-accent">Accent</small>
		<small class="badge wa-outlined">Outlined</small>
		<small class="badge wa-filled">Filled</small>
		<small class="badge wa-plain">Plain</small>
	</div>
</div>

<style>
  .badge {
	background-color: var(--background-color);
	border: 1px solid var(--border-color);
	color: var(--text-color);
	padding: var(--wa-space-2xs) var(--wa-space-xs);
	border-radius: var(--wa-border-radius-s);
  }
</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/webawesome@3.0.0-alpha.11/dist/styles/utilities/appearance.css" />

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

@import url('https://early.webawesome.com/webawesome@3.0.0-alpha.11/dist/styles/utilities/appearance.css');

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

    No results