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

touch up theming docs

Browse Source
This commit is contained in:
lindsaym-fa
2024-06-06 16:55:01 -04:00
parent 889ded3b01
commit 282d79da4a
9 changed files with 213 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
docs/assets/styles/docs.css
View File

@@ -131,3 +131,16 @@ wa-page > main {
background-color: var(--wa-color-warning-fill-normal);
}
}
/* Swatches */
.swatch {
background-color: var(--wa-color-surface-default);
border-color: var(--wa-color-neutral-border-normal);
border-style: var(--wa-border-style);
border-width: var(--wa-border-width-s);
border-radius: var(--wa-border-radius-s);
line-height: 2.5;
height: 2.5em;
padding-inline: var(--wa-space-xs);
}

34
docs/docs/theming/borders.md
View File

@@ -4,25 +4,13 @@ description: Change the edges and corners of your components with Web Awesome's
layout: page.njk
---
<style>
.border-swatch {
border-color: var(--wa-color-neutral-border-loud);
border-style: var(--wa-border-style);
border-width: var(--wa-border-width-s);
border-radius: var(--wa-border-radius-s);
line-height: 2;
height: 3em;
padding-inline: var(--wa-space-xs);
}
</style>
## Style
Border style controls the line shape of borders throughout Web Awesome.
| Custom Property | Default Value | Preview |
| ----------------------------- | - | ------------------------------- |
| `--wa-border-style` | <code>solid</code> | <div class="border-swatch" style="border-style: var(--wa-border-style)"></div> |
| `--wa-border-style` | <code>solid</code> | <div class="swatch" style="border-style: var(--wa-border-style)"></div> |
## Width
@@ -32,9 +20,9 @@ Each border width value uses a `calc()` function with `--wa-border-width-multipl
| Custom Property | Default Value | Preview |
| ----------------------------- | - | ------------------------------- |
| `--wa-border-width-s` | <code>0.0625rem</code> <small>(1px)</small> | <div class="border-swatch" style="border-width: var(--wa-border-width-s)"></div> |
| `--wa-border-width-m` | <code>0.125rem</code> <small>(2px)</small> | <div class="border-swatch" style="border-width: var(--wa-border-width-m)"></div> |
| `--wa-border-width-l` | <code>0.1875rem</code> <small>(3px)</small> | <div class="border-swatch" style="border-width: var(--wa-border-width-l)"></div> |
| `--wa-border-width-s` | <code>0.0625rem</code> <small>(1px)</small> | <div class="swatch" style="border-width: var(--wa-border-width-s)"></div> |
| `--wa-border-width-m` | <code>0.125rem</code> <small>(2px)</small> | <div class="swatch" style="border-width: var(--wa-border-width-m)"></div> |
| `--wa-border-width-l` | <code>0.1875rem</code> <small>(3px)</small> | <div class="swatch" style="border-width: var(--wa-border-width-l)"></div> |
## Radius
@@ -42,9 +30,9 @@ Common border radius properties allow you to achieve specific shapes.
| Custom Property | Default Value | Preview |
| ----------------------------- | - | ------------------------------- |
| `--wa-border-radius-pill` | <code>9999px</code> | <div class="border-swatch" style="border-radius: var(--wa-border-radius-pill)"></div> |
| `--wa-border-radius-circle` | <code>50%</code> | <div class="border-swatch" style="aspect-ratio: 1 / 1; border-radius: var(--wa-border-radius-circle)"></div> |
| `--wa-border-radius-square` | <code>0rem</code> | <div class="border-swatch" style="border-radius: var(--wa-border-radius-square)"></div> |
| `--wa-border-radius-pill` | <code>9999px</code> | <div class="swatch" style="border-radius: var(--wa-border-radius-pill)"></div> |
| `--wa-border-radius-circle` | <code>50%</code> | <div class="swatch" style="aspect-ratio: 1 / 1; border-radius: var(--wa-border-radius-circle)"></div> |
| `--wa-border-radius-square` | <code>0rem</code> | <div class="swatch" style="border-radius: var(--wa-border-radius-square)"></div> |
Size-based border radius properties allow you to customize the overall roundness of Web Awesome components. These use `rem` units in order to scale proportionately with the root font size.
@@ -52,7 +40,7 @@ Each border radius value uses a `calc()` function with `--wa-border-radius-multi
| Custom Property | Default Value | Preview |
| ----------------------------- | - | ------------------------------- |
| `--wa-border-radius-xs` | <code>0.1875rem</code> <small>(3px)</small> | <div class="border-swatch" style="border-radius: var(--wa-border-radius-xs)"></div> |
| `--wa-border-radius-s` | <code>0.375rem</code> <small>(6px)</small> | <div class="border-swatch" style="border-radius: var(--wa-border-radius-s)"></div> |
| `--wa-border-radius-m` | <code>0.75rem</code> <small>(12px)</small> | <div class="border-swatch" style="border-radius: var(--wa-border-radius-m)"></div> |
| `--wa-border-radius-l` | <code>1.125rem</code> <small>(18px)</small> | <div class="border-swatch" style="border-radius: var(--wa-border-radius-l)"></div> |
| `--wa-border-radius-xs` | <code>0.1875rem</code> <small>(3px)</small> | <div class="swatch" style="border-radius: var(--wa-border-radius-xs)"></div> |
| `--wa-border-radius-s` | <code>0.375rem</code> <small>(6px)</small> | <div class="swatch" style="border-radius: var(--wa-border-radius-s)"></div> |
| `--wa-border-radius-m` | <code>0.75rem</code> <small>(12px)</small> | <div class="swatch" style="border-radius: var(--wa-border-radius-m)"></div> |
| `--wa-border-radius-l` | <code>1.125rem</code> <small>(18px)</small> | <div class="swatch" style="border-radius: var(--wa-border-radius-l)"></div> |

252
docs/docs/theming/color.md
View File

@@ -21,14 +21,8 @@ layout: page.njk
.color-preview {
flex: 1 1 auto;
}
.color-swatch {
border-radius: var(--wa-border-radius-s);
line-height: 2;
height: 2em;
padding-inline: var(--wa-space-xs);
}
.color-swatch.text-only {
padding-inline: 0;
.swatch {
border: none;
}
</style>
@@ -56,47 +50,47 @@ Web Awesome defines seven literal colors each with 11 lightness values using the
<div class="color-name">Red</div>
<div class="color-group">
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-red-95)"></div>
<div class="swatch" style="background-color: var(--wa-color-red-95)"></div>
<small>95</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-red-90)"></div>
<div class="swatch" style="background-color: var(--wa-color-red-90)"></div>
<small>90</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-red-80)"></div>
<div class="swatch" style="background-color: var(--wa-color-red-80)"></div>
<small>80</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-red-70)"></div>
<div class="swatch" style="background-color: var(--wa-color-red-70)"></div>
<small>70</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-red-60)"></div>
<div class="swatch" style="background-color: var(--wa-color-red-60)"></div>
<small>60</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-red-50)"></div>
<div class="swatch" style="background-color: var(--wa-color-red-50)"></div>
<small>50</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-red-40)"></div>
<div class="swatch" style="background-color: var(--wa-color-red-40)"></div>
<small>40</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-red-30)"></div>
<div class="swatch" style="background-color: var(--wa-color-red-30)"></div>
<small>30</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-red-20)"></div>
<div class="swatch" style="background-color: var(--wa-color-red-20)"></div>
<small>20</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-red-10)"></div>
<div class="swatch" style="background-color: var(--wa-color-red-10)"></div>
<small>10</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-red-05)"></div>
<div class="swatch" style="background-color: var(--wa-color-red-05)"></div>
<small>05</small>
</div>
</div>
@@ -104,47 +98,47 @@ Web Awesome defines seven literal colors each with 11 lightness values using the
<div class="color-name">Yellow</div>
<div class="color-group">
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-yellow-95)"></div>
<div class="swatch" style="background-color: var(--wa-color-yellow-95)"></div>
<small>95</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-yellow-90)"></div>
<div class="swatch" style="background-color: var(--wa-color-yellow-90)"></div>
<small>90</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-yellow-80)"></div>
<div class="swatch" style="background-color: var(--wa-color-yellow-80)"></div>
<small>80</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-yellow-70)"></div>
<div class="swatch" style="background-color: var(--wa-color-yellow-70)"></div>
<small>70</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-yellow-60)"></div>
<div class="swatch" style="background-color: var(--wa-color-yellow-60)"></div>
<small>60</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-yellow-50)"></div>
<div class="swatch" style="background-color: var(--wa-color-yellow-50)"></div>
<small>50</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-yellow-40)"></div>
<div class="swatch" style="background-color: var(--wa-color-yellow-40)"></div>
<small>40</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-yellow-30)"></div>
<div class="swatch" style="background-color: var(--wa-color-yellow-30)"></div>
<small>30</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-yellow-20)"></div>
<div class="swatch" style="background-color: var(--wa-color-yellow-20)"></div>
<small>20</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-yellow-10)"></div>
<div class="swatch" style="background-color: var(--wa-color-yellow-10)"></div>
<small>10</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-yellow-05)"></div>
<div class="swatch" style="background-color: var(--wa-color-yellow-05)"></div>
<small>05</small>
</div>
</div>
@@ -152,47 +146,47 @@ Web Awesome defines seven literal colors each with 11 lightness values using the
<div class="color-name">Green</div>
<div class="color-group">
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-green-95)"></div>
<div class="swatch" style="background-color: var(--wa-color-green-95)"></div>
<small>95</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-green-90)"></div>
<div class="swatch" style="background-color: var(--wa-color-green-90)"></div>
<small>90</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-green-80)"></div>
<div class="swatch" style="background-color: var(--wa-color-green-80)"></div>
<small>80</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-green-70)"></div>
<div class="swatch" style="background-color: var(--wa-color-green-70)"></div>
<small>70</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-green-60)"></div>
<div class="swatch" style="background-color: var(--wa-color-green-60)"></div>
<small>60</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-green-50)"></div>
<div class="swatch" style="background-color: var(--wa-color-green-50)"></div>
<small>50</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-green-40)"></div>
<div class="swatch" style="background-color: var(--wa-color-green-40)"></div>
<small>40</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-green-30)"></div>
<div class="swatch" style="background-color: var(--wa-color-green-30)"></div>
<small>30</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-green-20)"></div>
<div class="swatch" style="background-color: var(--wa-color-green-20)"></div>
<small>20</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-green-10)"></div>
<div class="swatch" style="background-color: var(--wa-color-green-10)"></div>
<small>10</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-green-05)"></div>
<div class="swatch" style="background-color: var(--wa-color-green-05)"></div>
<small>05</small>
</div>
</div>
@@ -200,47 +194,47 @@ Web Awesome defines seven literal colors each with 11 lightness values using the
<div class="color-name">Blue</div>
<div class="color-group">
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-blue-95)"></div>
<div class="swatch" style="background-color: var(--wa-color-blue-95)"></div>
<small>95</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-blue-90)"></div>
<div class="swatch" style="background-color: var(--wa-color-blue-90)"></div>
<small>90</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-blue-80)"></div>
<div class="swatch" style="background-color: var(--wa-color-blue-80)"></div>
<small>80</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-blue-70)"></div>
<div class="swatch" style="background-color: var(--wa-color-blue-70)"></div>
<small>70</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-blue-60)"></div>
<div class="swatch" style="background-color: var(--wa-color-blue-60)"></div>
<small>60</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-blue-50)"></div>
<div class="swatch" style="background-color: var(--wa-color-blue-50)"></div>
<small>50</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-blue-40)"></div>
<div class="swatch" style="background-color: var(--wa-color-blue-40)"></div>
<small>40</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-blue-30)"></div>
<div class="swatch" style="background-color: var(--wa-color-blue-30)"></div>
<small>30</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-blue-20)"></div>
<div class="swatch" style="background-color: var(--wa-color-blue-20)"></div>
<small>20</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-blue-10)"></div>
<div class="swatch" style="background-color: var(--wa-color-blue-10)"></div>
<small>10</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-blue-05)"></div>
<div class="swatch" style="background-color: var(--wa-color-blue-05)"></div>
<small>05</small>
</div>
</div>
@@ -248,47 +242,47 @@ Web Awesome defines seven literal colors each with 11 lightness values using the
<div class="color-name">Indigo</div>
<div class="color-group">
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-indigo-95)"></div>
<div class="swatch" style="background-color: var(--wa-color-indigo-95)"></div>
<small>95</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-indigo-90)"></div>
<div class="swatch" style="background-color: var(--wa-color-indigo-90)"></div>
<small>90</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-indigo-80)"></div>
<div class="swatch" style="background-color: var(--wa-color-indigo-80)"></div>
<small>80</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-indigo-70)"></div>
<div class="swatch" style="background-color: var(--wa-color-indigo-70)"></div>
<small>70</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-indigo-60)"></div>
<div class="swatch" style="background-color: var(--wa-color-indigo-60)"></div>
<small>60</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-indigo-50)"></div>
<div class="swatch" style="background-color: var(--wa-color-indigo-50)"></div>
<small>50</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-indigo-40)"></div>
<div class="swatch" style="background-color: var(--wa-color-indigo-40)"></div>
<small>40</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-indigo-30)"></div>
<div class="swatch" style="background-color: var(--wa-color-indigo-30)"></div>
<small>30</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-indigo-20)"></div>
<div class="swatch" style="background-color: var(--wa-color-indigo-20)"></div>
<small>20</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-indigo-10)"></div>
<div class="swatch" style="background-color: var(--wa-color-indigo-10)"></div>
<small>10</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-indigo-05)"></div>
<div class="swatch" style="background-color: var(--wa-color-indigo-05)"></div>
<small>05</small>
</div>
</div>
@@ -296,47 +290,47 @@ Web Awesome defines seven literal colors each with 11 lightness values using the
<div class="color-name">Violet</div>
<div class="color-group">
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-violet-95)"></div>
<div class="swatch" style="background-color: var(--wa-color-violet-95)"></div>
<small>95</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-violet-90)"></div>
<div class="swatch" style="background-color: var(--wa-color-violet-90)"></div>
<small>90</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-violet-80)"></div>
<div class="swatch" style="background-color: var(--wa-color-violet-80)"></div>
<small>80</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-violet-70)"></div>
<div class="swatch" style="background-color: var(--wa-color-violet-70)"></div>
<small>70</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-violet-60)"></div>
<div class="swatch" style="background-color: var(--wa-color-violet-60)"></div>
<small>60</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-violet-50)"></div>
<div class="swatch" style="background-color: var(--wa-color-violet-50)"></div>
<small>50</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-violet-40)"></div>
<div class="swatch" style="background-color: var(--wa-color-violet-40)"></div>
<small>40</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-violet-30)"></div>
<div class="swatch" style="background-color: var(--wa-color-violet-30)"></div>
<small>30</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-violet-20)"></div>
<div class="swatch" style="background-color: var(--wa-color-violet-20)"></div>
<small>20</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-violet-10)"></div>
<div class="swatch" style="background-color: var(--wa-color-violet-10)"></div>
<small>10</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-violet-05)"></div>
<div class="swatch" style="background-color: var(--wa-color-violet-05)"></div>
<small>05</small>
</div>
</div>
@@ -344,47 +338,47 @@ Web Awesome defines seven literal colors each with 11 lightness values using the
<div class="color-name">Gray</div>
<div class="color-group">
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-gray-95)"></div>
<div class="swatch" style="background-color: var(--wa-color-gray-95)"></div>
<small>95</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-gray-90)"></div>
<div class="swatch" style="background-color: var(--wa-color-gray-90)"></div>
<small>90</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-gray-80)"></div>
<div class="swatch" style="background-color: var(--wa-color-gray-80)"></div>
<small>80</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-gray-70)"></div>
<div class="swatch" style="background-color: var(--wa-color-gray-70)"></div>
<small>70</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-gray-60)"></div>
<div class="swatch" style="background-color: var(--wa-color-gray-60)"></div>
<small>60</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-gray-50)"></div>
<div class="swatch" style="background-color: var(--wa-color-gray-50)"></div>
<small>50</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-gray-40)"></div>
<div class="swatch" style="background-color: var(--wa-color-gray-40)"></div>
<small>40</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-gray-30)"></div>
<div class="swatch" style="background-color: var(--wa-color-gray-30)"></div>
<small>30</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-gray-20)"></div>
<div class="swatch" style="background-color: var(--wa-color-gray-20)"></div>
<small>20</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-gray-10)"></div>
<div class="swatch" style="background-color: var(--wa-color-gray-10)"></div>
<small>10</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-gray-05)"></div>
<div class="swatch" style="background-color: var(--wa-color-gray-05)"></div>
<small>05</small>
</div>
</div>
@@ -405,47 +399,47 @@ By default, `--wa-color-primary-{#}` references `--wa-color-blue-{#}` and `--wa-
<div class="color-name">Primary</div>
<div class="color-group">
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-primary-95)"></div>
<div class="swatch" style="background-color: var(--wa-color-primary-95)"></div>
<small>95</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-primary-90)"></div>
<div class="swatch" style="background-color: var(--wa-color-primary-90)"></div>
<small>90</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-primary-80)"></div>
<div class="swatch" style="background-color: var(--wa-color-primary-80)"></div>
<small>80</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-primary-70)"></div>
<div class="swatch" style="background-color: var(--wa-color-primary-70)"></div>
<small>70</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-primary-60)"></div>
<div class="swatch" style="background-color: var(--wa-color-primary-60)"></div>
<small>60</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-primary-50)"></div>
<div class="swatch" style="background-color: var(--wa-color-primary-50)"></div>
<small>50</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-primary-40)"></div>
<div class="swatch" style="background-color: var(--wa-color-primary-40)"></div>
<small>40</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-primary-30)"></div>
<div class="swatch" style="background-color: var(--wa-color-primary-30)"></div>
<small>30</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-primary-20)"></div>
<div class="swatch" style="background-color: var(--wa-color-primary-20)"></div>
<small>20</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-primary-10)"></div>
<div class="swatch" style="background-color: var(--wa-color-primary-10)"></div>
<small>10</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-primary-05)"></div>
<div class="swatch" style="background-color: var(--wa-color-primary-05)"></div>
<small>05</small>
</div>
</div>
@@ -453,47 +447,47 @@ By default, `--wa-color-primary-{#}` references `--wa-color-blue-{#}` and `--wa-
<div class="color-name">Base</div>
<div class="color-group">
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-base-95)"></div>
<div class="swatch" style="background-color: var(--wa-color-base-95)"></div>
<small>95</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-base-90)"></div>
<div class="swatch" style="background-color: var(--wa-color-base-90)"></div>
<small>90</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-base-80)"></div>
<div class="swatch" style="background-color: var(--wa-color-base-80)"></div>
<small>80</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-base-70)"></div>
<div class="swatch" style="background-color: var(--wa-color-base-70)"></div>
<small>70</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-base-60)"></div>
<div class="swatch" style="background-color: var(--wa-color-base-60)"></div>
<small>60</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-base-50)"></div>
<div class="swatch" style="background-color: var(--wa-color-base-50)"></div>
<small>50</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-base-40)"></div>
<div class="swatch" style="background-color: var(--wa-color-base-40)"></div>
<small>40</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-base-30)"></div>
<div class="swatch" style="background-color: var(--wa-color-base-30)"></div>
<small>30</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-base-20)"></div>
<div class="swatch" style="background-color: var(--wa-color-base-20)"></div>
<small>20</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-base-10)"></div>
<div class="swatch" style="background-color: var(--wa-color-base-10)"></div>
<small>10</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-base-05)"></div>
<div class="swatch" style="background-color: var(--wa-color-base-05)"></div>
<small>05</small>
</div>
</div>
@@ -504,10 +498,10 @@ Surfaces are background layers that other components and content rest on. Surfac
| Custom Property | Preview |
| ----------------------------- | ------------------------------- |
| `--wa-color-surface-raised` | <div class="color-swatch" style="background-color: var(--wa-color-surface-raised); box-shadow:var(--wa-shadow-s)"></div> |
| `--wa-color-surface-default` | <div class="color-swatch" style="background-color: var(--wa-color-surface-default)"></div> |
| `--wa-color-surface-lowered` | <div class="color-swatch" style="background-color: var(--wa-color-surface-lowered); box-shadow:var(--wa-shadow-xs)"></div> |
| `--wa-color-surface-border` | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-surface-border)"></div> |
| `--wa-color-surface-raised` | <div class="swatch" style="background-color: var(--wa-color-surface-raised); box-shadow:var(--wa-shadow-s)"></div> |
| `--wa-color-surface-default` | <div class="swatch" style="background-color: var(--wa-color-surface-default)"></div> |
| `--wa-color-surface-lowered` | <div class="swatch" style="background-color: var(--wa-color-surface-lowered); box-shadow: inset var(--wa-shadow-s)"></div> |
| `--wa-color-surface-border` | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-surface-border)"></div> |
### Text
@@ -515,9 +509,9 @@ Text colors are used for standard text elements. We recommend a minimum 4.5:1 co
| Custom Property | Preview |
| ----------------------------- | ------------------------------- |
| `--wa-color-text-normal` | <div class="color-swatch text-only" style="color: var(--wa-color-text-normal)">AaBb</div> |
| `--wa-color-text-quiet` | <div class="color-swatch text-only" style="color: var(--wa-color-text-quiet)">AaBb</div> |
| `--wa-color-text-link` | <div class="color-swatch text-only" style="color: var(--wa-color-text-link)">AaBb</div> |
| `--wa-color-text-normal` | <span style="color: var(--wa-color-text-normal)">AaBb</span> |
| `--wa-color-text-quiet` | <span style="color: var(--wa-color-text-quiet)">AaBb</span> |
| `--wa-color-text-link` | <span style="color: var(--wa-color-text-link)">AaBb</span> |
### Overlays
@@ -525,8 +519,8 @@ Overlays provide a backdrop to isolate content, often allowing background contex
| Custom Property | Preview |
| ----------------------------- | ------------------------------- |
| `--wa-color-overlay-modal` | <div class="color-swatch" style="background-color: var(--wa-color-overlay-modal)"></div> |
| `--wa-color-overlay-inline` | <div class="color-swatch" style="background-color: var(--wa-color-overlay-inline)"></div> |
| `--wa-color-overlay-modal` | <div class="swatch" style="background-color: var(--wa-color-overlay-modal)"></div> |
| `--wa-color-overlay-inline` | <div class="swatch" style="background-color: var(--wa-color-overlay-inline)"></div> |
### Shadow
@@ -534,7 +528,7 @@ Shadows indicate elevation and, often, interactivity. `--wa-color-shadow` is use
| Custom Property | Preview |
| ----------------------------- | ------------------------------- |
| `--wa-color-shadow` | <div class="color-swatch" style="background-color: var(--wa-color-shadow)"></div> |
| `--wa-color-shadow` | <div class="swatch" style="background-color: var(--wa-color-shadow)"></div> |
### Interactions
@@ -544,7 +538,7 @@ Web Awesome uses a single, consistent focus color for predictable keyboard navig
| Custom Property | Preview |
| ----------------------------- | ------------------------------- |
| `--wa-color-focus` | <div class="color-swatch" style="outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus)"></div> |
| `--wa-color-focus` | <div class="swatch" style="outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus)"></div> |
#### Hover and Active
@@ -552,8 +546,8 @@ We leverage `color-mix()` to achieve consistent hover and active states across c
| Custom Property | Preview |
| ----------------------------- | ------------------------------- |
| `--wa-color-mix-hover` | <div class="color-swatch" style="text-align: center; background-image: linear-gradient(to right, color-mix(in oklab, transparent, var(--wa-color-mix-hover)) 25%, color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-hover)) 25%, color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-hover)) 75%, var(--wa-color-brand-fill-loud) 75%, var(--wa-color-brand-fill-loud))"><small style="color:var(--wa-color-brand-on-loud)">mixed</small></div> |
| `--wa-color-mix-active` | <div class="color-swatch" style="text-align: center; background-image: linear-gradient(to right, color-mix(in oklab, transparent, var(--wa-color-mix-active)) 25%, color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-active)) 25%, color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-active)) 75%, var(--wa-color-brand-fill-loud) 75%, var(--wa-color-brand-fill-loud))"><small style="color:var(--wa-color-brand-on-loud);">mixed</small></div> |
| `--wa-color-mix-hover` | <div class="swatch" style="text-align: center; background-image: linear-gradient(to right, color-mix(in oklab, transparent, var(--wa-color-mix-hover)) 25%, color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-hover)) 25%, color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-hover)) 75%, var(--wa-color-brand-fill-loud) 75%, var(--wa-color-brand-fill-loud))"><small style="color:var(--wa-color-brand-on-loud)">mixed</small></div> |
| `--wa-color-mix-active` | <div class="swatch" style="text-align: center; background-image: linear-gradient(to right, color-mix(in oklab, transparent, var(--wa-color-mix-active)) 25%, color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-active)) 25%, color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-active)) 75%, var(--wa-color-brand-fill-loud) 75%, var(--wa-color-brand-fill-loud))"><small style="color:var(--wa-color-brand-on-loud);">mixed</small></div> |
## Semantic Colors
@@ -580,12 +574,12 @@ Finally, each color is named according to how much attention it draws. Here, we
| Custom Property | <code>brand</code> | <code>success</code> | <code>neutral</code> | <code>warning</code> | <code>danger</code> |
| ----------------------------- | ------------------------------- | ------------------------------- | ------------------------------- | ------------------------------- | ------------------------------- |
| `--wa-color-*-fill-quiet` | <div class="color-swatch" style="background-color: var(--wa-color-brand-fill-quiet)"></div> | <div class="color-swatch" style="background-color: var(--wa-color-success-fill-quiet)"></div> | <div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-quiet)"></div> | <div class="color-swatch" style="background-color: var(--wa-color-warning-fill-quiet)"></div> | <div class="color-swatch" style="background-color: var(--wa-color-danger-fill-quiet)"></div> |
| `--wa-color-*-fill-normal` | <div class="color-swatch" style="background-color: var(--wa-color-brand-fill-normal)"></div> | <div class="color-swatch" style="background-color: var(--wa-color-success-fill-normal)"></div> |<div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-normal)"></div> | <div class="color-swatch" style="background-color: var(--wa-color-warning-fill-normal)"></div> | <div class="color-swatch" style="background-color: var(--wa-color-danger-fill-normal)"></div> |
| `--wa-color-*-fill-loud` | <div class="color-swatch" style="background-color: var(--wa-color-brand-fill-loud)"></div> | <div class="color-swatch" style="background-color: var(--wa-color-success-fill-loud)"></div> | <div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-loud)"></div> | <div class="color-swatch" style="background-color: var(--wa-color-warning-fill-loud)"></div> | <div class="color-swatch" style="background-color: var(--wa-color-danger-fill-loud)"></div> |
| `--wa-color-*-border-quiet` | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-quiet)"></div> | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-quiet)"></div> | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-quiet)"></div> | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-quiet)"></div> | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-quiet)"></div> |
| `--wa-color-*-border-normal` | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-normal)"></div> | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-normal)"></div> | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-normal)"></div> | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-normal)"></div> | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-normal)"></div> |
| `--wa-color-*-border-loud` | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-loud)"></div> | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-loud)"></div> | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-loud)"></div> | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-loud)"></div> | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-loud)"></div> |
| `--wa-color-*-on-quiet` | <div class="color-swatch" style="background-color: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet)">AaBb</div> | <div class="color-swatch" style="background-color: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet)">AaBb</div> | <div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-quiet); color: var(--wa-color-neutral-on-quiet)">AaBb</div> | <div class="color-swatch" style="background-color: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet)">AaBb</div> | <div class="color-swatch" style="background-color: var(--wa-color-danger-fill-quiet); color: var(--wa-color-danger-on-quiet)">AaBb</div> |
| `--wa-color-*-on-normal` | <div class="color-swatch" style="background-color: var(--wa-color-brand-fill-normal); color: var(--wa-color-brand-on-normal)">AaBb</div> | <div class="color-swatch" style="background-color: var(--wa-color-success-fill-normal); color: var(--wa-color-success-on-normal)">AaBb</div> | <div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-normal); color: var(--wa-color-neutral-on-normal)">AaBb</div> | <div class="color-swatch" style="background-color: var(--wa-color-warning-fill-normal); color: var(--wa-color-warning-on-normal)">AaBb</div> | <div class="color-swatch" style="background-color: var(--wa-color-danger-fill-normal); color: var(--wa-color-danger-on-normal)">AaBb</div> |
| `--wa-color-*-on-loud` | <div class="color-swatch" style="background-color: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud)">AaBb</div> | <div class="color-swatch" style="background-color: var(--wa-color-success-fill-loud); color: var(--wa-color-success-on-loud)">AaBb</div> | <div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-loud); color: var(--wa-color-neutral-on-loud)">AaBb</div> | <div class="color-swatch" style="background-color: var(--wa-color-warning-fill-loud); color: var(--wa-color-warning-on-loud)">AaBb</div> | <div class="color-swatch" style="background-color: var(--wa-color-danger-fill-loud); color: var(--wa-color-danger-on-loud)">AaBb</div> |
| `--wa-color-*-fill-quiet` | <div class="swatch" style="background-color: var(--wa-color-brand-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-quiet)"></div> |
| `--wa-color-*-fill-normal` | <div class="swatch" style="background-color: var(--wa-color-brand-fill-normal)"></div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-normal)"></div> |<div class="swatch" style="background-color: var(--wa-color-neutral-fill-normal)"></div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-normal)"></div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-normal)"></div> |
| `--wa-color-*-fill-loud` | <div class="swatch" style="background-color: var(--wa-color-brand-fill-loud)"></div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-loud)"></div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-loud)"></div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-loud)"></div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-loud)"></div> |
| `--wa-color-*-border-quiet` | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-quiet)"></div> | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-quiet)"></div> | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-quiet)"></div> | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-quiet)"></div> | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-quiet)"></div> |
| `--wa-color-*-border-normal` | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-normal)"></div> | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-normal)"></div> | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-normal)"></div> | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-normal)"></div> | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-normal)"></div> |
| `--wa-color-*-border-loud` | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-loud)"></div> | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-loud)"></div> | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-loud)"></div> | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-loud)"></div> | <div class="swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-loud)"></div> |
| `--wa-color-*-on-quiet` | <div class="swatch" style="background-color: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-quiet); color: var(--wa-color-neutral-on-quiet)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-quiet); color: var(--wa-color-danger-on-quiet)">AaBb</div> |
| `--wa-color-*-on-normal` | <div class="swatch" style="background-color: var(--wa-color-brand-fill-normal); color: var(--wa-color-brand-on-normal)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-normal); color: var(--wa-color-success-on-normal)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-normal); color: var(--wa-color-neutral-on-normal)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-normal); color: var(--wa-color-warning-on-normal)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-normal); color: var(--wa-color-danger-on-normal)">AaBb</div> |
| `--wa-color-*-on-loud` | <div class="swatch" style="background-color: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-loud); color: var(--wa-color-success-on-loud)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-loud); color: var(--wa-color-neutral-on-loud)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-loud); color: var(--wa-color-warning-on-loud)">AaBb</div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-loud); color: var(--wa-color-danger-on-loud)">AaBb</div> |

46
docs/docs/theming/component-groups.md
View File

@@ -10,29 +10,29 @@ For components that share similar qualities, Web Awesome includes custom propert
Components such as [input](/docs/components/input), [select](/docs/components/select), [textarea](/docs/components/textarea), [checkbox](/docs/components/checkbox), etc. share a number of styles to give your forms a cohesive appearance. Web Awesome defines custom properties for these styles using the format `--wa-form-control-{style}`.
Not every form control uses all of these custom properties. For example, `wa-radio` defines its own height and border radius to achieve its familiar shape but shares many other styles with other components for a cohesive look and feel. Similarly, `wa-button` defines many of its own styles but matches the height and border styles of other form controls.
Not every form control uses all of these custom properties. For example, `<wa-radio>` defines its own height and border radius to achieve its familiar shape but shares many other styles with other components for a cohesive look and feel. Similarly, `<wa-button>` defines many of its own styles but matches the height and border styles of other form controls.
| Custom Property | Default Value |
| ------------------------------------------- | ------------------------------- |
| `--wa-form-control-background` | `var(--wa-color-surface-default)` |
| `--wa-form-control-border-style` | `var(--wa-border-style)` |
| `--wa-form-control-border-width` | `var(--wa-border-width-s)` |
| `--wa-form-control-border-radius` | `var(--wa-border-radius-s)` |
| `--wa-form-control-activated-color` | `var(--wa-color-brand-fill-loud)` |
| `--wa-form-control-resting-color` | `var(--wa-color-neutral-border-loud)` |
| `--wa-form-control-label-color` | `var(--wa-color-neutral-border-loud)` |
| `--wa-form-control-label-font-weight` | `var(--wa-font-weight-normal)` |
| `--wa-form-control-label-line-height` | `var(--wa-line-height-normal)` |
| `--wa-form-control-value-color` | `var(--wa-color-text-normal)` |
| `--wa-form-control-value-font-weight` | `var(--wa-font-weight-body)` |
| `--wa-form-control-value-line-height` | `var(--wa-line-height-condensed)` |
| `--wa-form-control-placeholder-color` | `var(--wa-color-base-60)` |
| Custom Property | Default Value |
| ------------------------------------------- | ------------------------------------------------------------------------------------------------- |
| `--wa-form-control-background` | `var(--wa-color-surface-default)` |
| `--wa-form-control-border-style` | `var(--wa-border-style)` |
| `--wa-form-control-border-width` | `var(--wa-border-width-s)` |
| `--wa-form-control-border-radius` | `var(--wa-border-radius-s)` |
| `--wa-form-control-activated-color` | `var(--wa-color-brand-fill-loud)` |
| `--wa-form-control-resting-color` | `var(--wa-color-neutral-border-loud)` |
| `--wa-form-control-label-color` | `var(--wa-color-neutral-border-loud)` |
| `--wa-form-control-label-font-weight` | `var(--wa-font-weight-normal)` |
| `--wa-form-control-label-line-height` | `var(--wa-line-height-normal)` |
| `--wa-form-control-value-color` | `var(--wa-color-text-normal)` |
| `--wa-form-control-value-font-weight` | `var(--wa-font-weight-body)` |
| `--wa-form-control-value-line-height` | `var(--wa-line-height-condensed)` |
| `--wa-form-control-placeholder-color` | `var(--wa-color-base-60)` |
| `--wa-form-control-height-s` | `calc(var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height))` |
| `--wa-form-control-height-m` | `calc(var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height))` |
| `--wa-form-control-height-l` | `calc(var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height))` |
| `--wa-form-control-required-content` | `'*'` |
| `--wa-form-control-required-content-color` | `inherit` |
| `--wa-form-control-required-content-offset` | `-0.1em` |
| `--wa-form-control-height-m` | `calc(var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height))` |
| `--wa-form-control-height-l` | `calc(var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height))` |
| `--wa-form-control-required-content` | `'*'` |
| `--wa-form-control-required-content-color` | `inherit` |
| `--wa-form-control-required-content-offset` | `-0.1em` |
```html {.example}
<form class="wa-block-spacing-l">
@@ -104,10 +104,10 @@ Tooltip styles are shared between the [tooltip](/docs/components/tooltip) compon
| Custom Property | Default Value |
| ---------------------------- | ----------------------------------- |
| `--wa-tooltip-arrow-size` | `0.375rem` |
| `--wa-tooltip-arrow-size` | `0.375rem` <small>(6px)</small> |
| `--wa-tooltip-background` | `var(--wa-color-neutral-fill-loud)` |
| `--wa-tooltip-border-radius` | `var(--wa-border-radius-s)` |
| `--wa-tooltip-content-color` | `var(--wa-color-neutral-on-loud)` |
| `--wa-tooltip-content-color` | `var(--wa-color-neutral-on-loud)` |
| `--wa-tooltip-font-size` | `var(--wa-font-size-s)` |
| `--wa-tooltip-line-height` | `var(--wa-line-height-normal)` |

14
docs/docs/theming/motion.md
View File

@@ -5,13 +5,11 @@ layout: page.njk
---
<style>
.motion-swatch {
height: 2em;
.swatch {
background-color: var(--wa-color-neutral-fill-normal);
border-radius: var(--wa-border-radius-s);
border: none;
}
.motion-swatch:hover {
.swatch:hover {
background-color: var(--wa-color-brand-fill-loud);
}
</style>
@@ -24,6 +22,6 @@ Web Awesome uses transitions to ease between component states.
| Custom Property | Default Value | Preview |
| ----------------------------- | - | ------------------------------- |
| `--wa-transition-slow` | <code>300ms</code> | <div class="motion-swatch" style="transition: background-color var(--wa-transition-slow)"></div> |
| `--wa-transition-normal` | <code>150ms</code> | <div class="motion-swatch" style="transition: background-color var(--wa-transition-normal)"></div> |
| `--wa-transition-fast` | <code>75ms</code> | <div class="motion-swatch" style="transition: background-color var(--wa-transition-fast)"></div> |
| `--wa-transition-slow` | <code>300ms</code> | <div class="swatch" style="transition: background-color var(--wa-transition-slow)"></div> |
| `--wa-transition-normal` | <code>150ms</code> | <div class="swatch" style="transition: background-color var(--wa-transition-normal)"></div> |
| `--wa-transition-fast` | <code>75ms</code> | <div class="swatch" style="transition: background-color var(--wa-transition-fast)"></div> |

19
docs/docs/theming/shadows.md
View File

@@ -4,17 +4,6 @@ description: Elevate your components with Web Awesome's shadow properties.
layout: page.njk
---
<style>
div.shadow {
border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
border-radius: var(--wa-border-radius-s);
display: inline-block;
height: 4rem;
margin-right: 2rem;
width: 4rem;
}
</style>
Web Awesome offers highly modular shadow properties to easily create custom shadow effects or transform elements based on specific shadow qualities. Together with [`--wa-color-shadow`](/docs/theming/color/#shadow), these custom properties create realistic shadows for Web Awesome components.
Shadows use a size-based scale where larger shadows have greater offset and blur values to indicate greater distance from the surface below.
@@ -69,7 +58,7 @@ Shadows are constructed using the corresponding offset-x, offset-y, blur, and sp
| Custom Property | Default Value |
| ---------------- | ------------------------------------------------------------------- |
| `--wa-shadow-xs` | <div class="shadow" style="box-shadow: var(--wa-shadow-xs);"></div> |
| `--wa-shadow-s` | <div class="shadow" style="box-shadow: var(--wa-shadow-s);"></div> |
| `--wa-shadow-m` | <div class="shadow" style="box-shadow: var(--wa-shadow-m);"></div> |
| `--wa-shadow-l` | <div class="shadow" style="box-shadow: var(--wa-shadow-l);"></div> |
| `--wa-shadow-xs` | <div class="swatch" style="box-shadow: var(--wa-shadow-xs);"></div> |
| `--wa-shadow-s` | <div class="swatch" style="box-shadow: var(--wa-shadow-s);"></div> |
| `--wa-shadow-m` | <div class="swatch" style="box-shadow: var(--wa-shadow-m);"></div> |
| `--wa-shadow-l` | <div class="swatch" style="box-shadow: var(--wa-shadow-l);"></div> |

52
docs/docs/theming/typography.md
View File

@@ -10,10 +10,10 @@ Font families are assigned specific roles &mdash; like heading or code &mdash; t
| Custom Property | Default Value | Preview |
| ----------------------------- | - | ------------------------------- |
| `--wa-font-family-body` | <code>ui-sans-serif, system-ui, sans-serif</code> | <div style="font-family: var(--wa-font-family-body)">Sphinx of black quartz, judge my vow.</div> |
| `--wa-font-family-heading` | <code>var(--wa-font-family-body)</code> | <div style="font-family: var(--wa-font-family-heading)">Sphinx of black quartz, judge my vow.</div> |
| `--wa-font-family-code` | <code>ui-monospace, monospace</code> | <div style="font-family: var(--wa-font-family-code)">Sphinx of black quartz, judge my vow.</div> |
| `--wa-font-family-longform` | <code>ui-serif, serif</code> | <div style="font-family: var(--wa-font-family-longform)">Sphinx of black quartz, judge my vow.</div> |
| `--wa-font-family-body` | `ui-sans-serif, system-ui, sans-serif` | <div style="font-family: var(--wa-font-family-body)">Sphinx of black quartz, judge my vow.</div> |
| `--wa-font-family-heading` | `var(--wa-font-family-body)` | <div style="font-family: var(--wa-font-family-heading)">Sphinx of black quartz, judge my vow.</div> |
| `--wa-font-family-code` | `ui-monospace, monospace` | <div style="font-family: var(--wa-font-family-code)">Sphinx of black quartz, judge my vow.</div> |
| `--wa-font-family-longform` | `ui-serif, serif` | <div style="font-family: var(--wa-font-family-longform)">Sphinx of black quartz, judge my vow.</div> |
## Font Size
@@ -23,15 +23,15 @@ Each font size value uses a `calc()` function with `--wa-font-size-multiplier` t
| Custom Property | Default Value | Preview |
| ----------------------------- | - | ------------------------------- |
| `--wa-font-size-2xs` | <code>0.6875rem</code> <small>(11px)</small> | <div style="font-size: var(--wa-font-size-2xs)">AaBb</div> |
| `--wa-font-size-xs` | <code>0.75rem</code> <small>(12px)</small> | <div style="font-size: var(--wa-font-size-xs)">AaBb</div> |
| `--wa-font-size-s` | <code>0.875rem</code> <small>(14px)</small> | <div style="font-size: var(--wa-font-size-s)">AaBb</div> |
| `--wa-font-size-m` | <code>1rem</code> <small>(16px)</small> | <div style="font-size: var(--wa-font-size-m)">AaBb</div> |
| `--wa-font-size-l` | <code>1.25rem</code> <small>(20px)</small> | <div style="font-size: var(--wa-font-size-l)">AaBb</div> |
| `--wa-font-size-xl` | <code>1.625rem</code> <small>(26px)</small> | <div style="font-size: var(--wa-font-size-xl)">AaBb</div> |
| `--wa-font-size-2xl` | <code>2rem</code> <small>(32px)</small> | <div style="font-size: var(--wa-font-size-2xl)">AaBb</div> |
| `--wa-font-size-3xl` | <code>2.5625rem</code> <small>(41px)</small> | <div style="font-size: var(--wa-font-size-3xl)">AaBb</div> |
| `--wa-font-size-4xl` | <code>3.25rem</code> <small>(52px)</small> | <div style="font-size: var(--wa-font-size-4xl)">AaBb</div> |
| `--wa-font-size-2xs` | `0.6875rem` <small>(11px)</small> | <div style="font-size: var(--wa-font-size-2xs)">AaBb</div> |
| `--wa-font-size-xs` | `0.75rem` <small>(12px)</small> | <div style="font-size: var(--wa-font-size-xs)">AaBb</div> |
| `--wa-font-size-s` | `0.875rem` <small>(14px)</small> | <div style="font-size: var(--wa-font-size-s)">AaBb</div> |
| `--wa-font-size-m` | `1rem` <small>(16px)</small> | <div style="font-size: var(--wa-font-size-m)">AaBb</div> |
| `--wa-font-size-l` | `1.25rem` <small>(20px)</small> | <div style="font-size: var(--wa-font-size-l)">AaBb</div> |
| `--wa-font-size-xl` | `1.625rem` <small>(26px)</small> | <div style="font-size: var(--wa-font-size-xl)">AaBb</div> |
| `--wa-font-size-2xl` | `2rem` <small>(32px)</small> | <div style="font-size: var(--wa-font-size-2xl)">AaBb</div> |
| `--wa-font-size-3xl` | `2.5625rem` <small>(41px)</small> | <div style="font-size: var(--wa-font-size-3xl)">AaBb</div> |
| `--wa-font-size-4xl` | `3.25rem` <small>(52px)</small> | <div style="font-size: var(--wa-font-size-4xl)">AaBb</div> |
## Font Weight
@@ -41,31 +41,31 @@ Common weights let you easily adjust the full range of weights for your theme.
| Custom Property | Default Value | Preview |
| ----------------------------- | - | ------------------------------- |
| `--wa-font-weight-light` | <code>300</code> | <div style="font-weight: var(--wa-font-weight-light)">AaBb</div> |
| `--wa-font-weight-normal` | <code>400</code> | <div style="font-weight: var(--wa-font-weight-normal)">AaBb</div> |
| `--wa-font-weight-semibold` | <code>500</code> | <div style="font-weight: var(--wa-font-weight-semibold)">AaBb</div> |
| `--wa-font-weight-bold` | <code>600</code> | <div style="font-weight: var(--wa-font-weight-bold)">AaBb</div> |
| `--wa-font-weight-light` | `300` | <div style="font-weight: var(--wa-font-weight-light)">AaBb</div> |
| `--wa-font-weight-normal` | `400` | <div style="font-weight: var(--wa-font-weight-normal)">AaBb</div> |
| `--wa-font-weight-semibold` | `500` | <div style="font-weight: var(--wa-font-weight-semibold)">AaBb</div> |
| `--wa-font-weight-bold` | `600` | <div style="font-weight: var(--wa-font-weight-bold)">AaBb</div> |
Role-based weights allow you to uniformly adjust the weight of certain types of text elements to keep text styles consistent.
| Custom Property | Default Value | Preview |
| ----------------------------- | - | ------------------------------- |
| `--wa-font-weight-body` | <code>var(--wa-font-weight-normal)</code> | <div style="font-weight: var(--wa-font-weight-body)">AaBb</div> |
| `--wa-font-weight-heading` | <code>var(--wa-font-weight-bold)</code> | <div style="font-weight: var(--wa-font-weight-heading)">AaBb</div> |
| `--wa-font-weight-action` | <code>var(--wa-font-weight-semibold)</code> | <div style="font-weight: var(--wa-font-weight-action)">AaBb</div> |
| `--wa-font-weight-body` | `var(--wa-font-weight-normal)` | <div style="font-weight: var(--wa-font-weight-body)">AaBb</div> |
| `--wa-font-weight-heading` | `var(--wa-font-weight-bold)` | <div style="font-weight: var(--wa-font-weight-heading)">AaBb</div> |
| `--wa-font-weight-action` | `var(--wa-font-weight-semibold)` | <div style="font-weight: var(--wa-font-weight-action)">AaBb</div> |
In Web Awesome, we use `--wa-font-weight-action` for interactive text, such as button labels and tab names. We also recommend using `--wa-font-weight-action` for interactive text that doesn't otherwise signal its interactively, such as links without text decoration.
## Line Height
Line heights control the distance between lines of text and are unitless to scale proportionately with text size. For readability, `--wa-line-height-normal`, used for paragraph text, should be 1.5 or greater.
Line heights control the distance between lines of text and are unitless to scale proportionately with text size. For readability, `--wa-line-height-normal`, recommended for paragraph text, should be 1.5 or greater.
| Custom Property | Default Value | Preview |
| ----------------------------- | - | ------------------------------- |
| `--wa-line-height-condensed` | <code>1.125</code> | <div style="line-height: var(--wa-line-height-condensed); border-block: 1px solid var(--wa-color-neutral-border-loud)">AaBb</div> |
| `--wa-line-height-normal` | <code>1.6</code> | <div style="line-height: var(--wa-line-height-normal); border-block: 1px solid var(--wa-color-neutral-border-loud)">AaBb</div> |
| `--wa-line-height-expanded` | <code>2</code> | <div style="line-height: var(--wa-line-height-expanded); border-block: 1px solid var(--wa-color-neutral-border-loud)">AaBb</div> |
| `--wa-line-height-condensed` | `1.125` | <div style="line-height: var(--wa-line-height-condensed); border-block: 1px solid var(--wa-color-neutral-border-loud)">AaBb</div> |
| `--wa-line-height-normal` | `1.6` | <div style="line-height: var(--wa-line-height-normal); border-block: 1px solid var(--wa-color-neutral-border-loud)">AaBb</div> |
| `--wa-line-height-expanded` | `2` | <div style="line-height: var(--wa-line-height-expanded); border-block: 1px solid var(--wa-color-neutral-border-loud)">AaBb</div> |
## Links
@@ -73,8 +73,8 @@ Together with [`--wa-color-link`](/docs/theming/color/#text), these custom prope
| Custom Property | Default Value |
| ----------------------------- | ------------------------------- |
| `--wa-link-decoration-default` | <code>underline color-mix(in oklab, var(--wa-color-text-link) 70%, transparent) dotted</code> |
| `--wa-link-decoration-hover` | <code>underline</code> |
| `--wa-link-decoration-default` | `underline color-mix(in oklab, var(--wa-color-text-link) 70%, transparent) dotted` |
| `--wa-link-decoration-hover` | `underline` |
```html {.example}
<a href="#">Web Awesome anchor</a>

10
docs/docs/theming/z-index.md
View File

@@ -6,11 +6,11 @@ layout: page.njk
Z-index properties make sure that certain Web Awesome components aren't mistakenly obscured. If you have elements with their own z-indices outside of Web Awesome, you can change these z-index properties as needed so that everything stacks appropriately.
| Custom Property | Default Value |
| ----------------------------- | ------------------------------- |
| `--wa-z-index-dropdown` | <code>900</code> |
| `--wa-z-index-toast` | <code>990</code> |
| `--wa-z-index-tooltip` | <code>1000</code> |
| Custom Property | Default Value |
| ----------------------- | -------------- |
| `--wa-z-index-dropdown` | `900` |
| `--wa-z-index-toast` | `990` |
| `--wa-z-index-tooltip` | `1000` |
```html {.example}
<div class="z-index-example">

4
src/themes/default.css
View File

@@ -400,8 +400,6 @@
--wa-panel-border-width: var(--wa-border-width-s);
--wa-panel-border-radius: var(--wa-border-radius-m);
--wa-flow-spacing: var(--wa-space-2xl);
/* Tooltips */
--wa-tooltip-arrow-size: 0.375rem;
@@ -412,6 +410,8 @@
--wa-tooltip-content-color: var(--wa-color-neutral-on-loud);
--wa-tooltip-font-size: var(--wa-font-size-s);
--wa-tooltip-line-height: var(--wa-line-height-normal);
--wa-flow-spacing: var(--wa-space-2xl);
}
.wa-theme-default-dark,