js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Docs for color and appearance variants

Browse Source
This commit is contained in:
Lea Verou
2024-12-19 14:04:15 -05:00
parent 995d0f2af4
commit 63a2367cc5
2 changed files with 94 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
docs/docs/utilities/appearance.md Normal file
View File

@@ -0,0 +1,92 @@
---
title: Appearance variants
---
You may have noticed that some Web Awesome components like `<wa-button>` allow you to change their overall style by using an `appearance` attribute:
{% for component in componentsBy.attribute.appearance %}
- <a href="../{{ component.url }}"><code>&lt;{{ component.tagName }}&gt;</code></a>
{%- endfor %}
You can create the same effect on any element by using the appearance utility classes:
- `.wa-accent`
- `.wa-outlined`
- `.wa-filled`
- `.wa-plain`
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:
- `--background-color`
- `--background-color-hover`
- `--background-color-active`
- `--border-color`
- `--border-color-hover`
- `--text-color`
- `--text-color-hover`
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:
```html { .example }
<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-xs);
}
</style>
```
## With color variants
These properties also work well with the [color variants](/docs/utilities/color/) utility classes:
```html { .example }
<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-xs);
}
</style>
```

4
docs/docs/utilities/color.md
View File

@@ -10,7 +10,7 @@ You may have noticed that some Web Awesome components like `<wa-button>` allow y
{%- endif %}
{%- endfor %}
You can create the same effect on any element by using the variant utility classes:
You can create the same effect on any element by using the color variant utility classes:
- `.wa-brand`
- `.wa-neutral`
@@ -38,7 +38,7 @@ This is all we need to do:
background-color: var(--wa-color-fill-quiet);
border: 1px solid var(--wa-color-border-quiet);
color: var(--wa-color-on-quiet);
padding: 1rem;
padding: var(--wa-space-m) var(--wa-space-l);
}
</style>
```