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

even more docs progress

Browse Source
This commit is contained in:
lindsaym-fa
2024-05-29 18:20:39 -04:00
parent 0b9ca99053
commit 67535f6af0
6 changed files with 57 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/_includes/sidebar.njk
View File

@@ -249,10 +249,10 @@
<a href="/docs/theming/borders">Borders</a>
</li>
<li>
<a href="/docs/theming/corners">Corners</a>
<a href="/docs/theming/shadows">Shadows</a>
</li>
<li>
<a href="/docs/theming/shadows">Shadows</a>
<a href="/docs/theming/motion">Motion</a>
</li>
<li>
<a href="/docs/theming/extras">Extras</a>

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

@@ -504,10 +504,10 @@ Surfaces are background layers that other components and content rest on. Surfac
| Custom Property | Preview |
| ----------------------------- | ------------------------------- |
| `--wa-color-surface-raised` | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-surface-raised); box-shadow:var(--wa-shadow-level-1)"></div></div> |
| `--wa-color-surface-default` | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-surface-default)"></div></div> |
| `--wa-color-surface-lowered` | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-surface-lowered); box-shadow:var(--wa-shadow-inset)"></div></div> |
| `--wa-color-surface-border` | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-surface-border)"></div></div> |
| `--wa-color-surface-raised` | <div class="color-swatch" style="background-color: var(--wa-color-surface-raised); box-shadow:var(--wa-shadow-level-1)"></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-inset)"></div> |
| `--wa-color-surface-border` | <div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-surface-border)"></div> |
### Text
@@ -515,9 +515,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-preview"><div class="color-swatch text-only" style="color: var(--wa-color-text-normal)">AaBb</div></div> |
| `--wa-color-text-quiet` | <div class="color-preview"><div class="color-swatch text-only" style="color: var(--wa-color-text-quiet)">AaBb</div></div> |
| `--wa-color-text-link` | <div class="color-preview"><div class="color-swatch text-only" style="color: var(--wa-color-text-link)">AaBb</div></div> |
| `--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> |
### Overlays
@@ -525,8 +525,8 @@ Overlays provide a backdrop to isolate content, often allowing background contex
| Custom Property | Preview |
| ----------------------------- | ------------------------------- |
| `--wa-color-overlay-modal` | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-overlay-modal)"></div></div> |
| `--wa-color-overlay-inline` | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-overlay-inline)"></div></div> |
| `--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> |
### Shadow
@@ -534,7 +534,7 @@ Shadows indicate elevation. `--wa-color-shadow` is used to construct your theme'
| Custom Property | Preview |
| ----------------------------- | ------------------------------- |
| `--wa-color-shadow` | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-shadow)"></div></div> |
| `--wa-color-shadow` | <div class="color-swatch" style="background-color: var(--wa-color-shadow)"></div> |
### Interactions
@@ -544,7 +544,7 @@ Web Awesome uses a single, consistent focus color for predictable keyboard navig
| Custom Property | Preview |
| ----------------------------- | ------------------------------- |
| `--wa-color-focus` | <div class="color-preview"><div class="color-swatch" style="outline: var(--wa-focus-ring)"></div></div> |
| `--wa-color-focus` | <div class="color-swatch" style="outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus)"></div> |
#### Hover and Active
@@ -552,8 +552,8 @@ We leverage `color-mix()` to achieve consistent hover and active states across c
| Custom Property | Preview |
| ----------------------------- | ------------------------------- |
| `--wa-color-mix-hover` | <div class="color-preview"><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></div> |
| `--wa-color-mix-active` | <div class="color-preview"><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></div> |
| `--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> |
## Semantic Colors
@@ -580,12 +580,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-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-quiet)"></div></div> |
| `--wa-color-*-fill-normal` | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-normal)"></div></div> |<div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-normal)"></div></div> |
| `--wa-color-*-fill-loud` | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-loud)"></div></div> |
| `--wa-color-*-border-quiet` | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-quiet)"></div></div> |
| `--wa-color-*-border-normal` | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-normal)"></div></div> |
| `--wa-color-*-border-loud` | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-loud)"></div></div> |
| `--wa-color-*-on-quiet` | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-quiet); color: var(--wa-color-neutral-on-quiet)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-quiet); color: var(--wa-color-danger-on-quiet)">AaBb</div></div> |
| `--wa-color-*-on-normal` | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-normal); color: var(--wa-color-brand-on-normal)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-normal); color: var(--wa-color-success-on-normal)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-normal); color: var(--wa-color-neutral-on-normal)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-normal); color: var(--wa-color-warning-on-normal)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-normal); color: var(--wa-color-danger-on-normal)">AaBb</div></div> |
| `--wa-color-*-on-loud` | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-loud); color: var(--wa-color-success-on-loud)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-loud); color: var(--wa-color-neutral-on-loud)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-loud); color: var(--wa-color-warning-on-loud)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-loud); color: var(--wa-color-danger-on-loud)">AaBb</div></div> |
| `--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> |

7
docs/docs/theming/corners.md
View File

@@ -1,7 +0,0 @@
---
title: Corners
description: Sharpen or soften the appearance of your components with Web Awesome's corner properties.
layout: page.njk
---
coming soon!

7
docs/docs/theming/extras.md
View File

@@ -5,6 +5,13 @@ layout: page.njk
---
## Focus
| Custom Property | Preview |
| ----------------------------- | ------------------------------- |
| `--wa-color-focus` | <div class="color-swatch" style="outline: var(--wa-focus-ring)"></div> |
| `--wa-focus-ring-style` | <div class="color-swatch" style="outline: var(--wa-focus-ring)"></div> |
| `--wa-focus-ring-width` | <div class="color-swatch" style="outline: var(--wa-focus-ring)"></div> |
| `--wa-focus-ring` | <div class="color-swatch" style="outline: var(--wa-focus-ring)"></div> |
| `--wa-focus-ring-offset` | <div class="color-swatch" style="outline: var(--wa-focus-ring)"></div> |
## Links

24
docs/docs/theming/motion.md Normal file
View File

@@ -0,0 +1,24 @@
---
title: Motion
description: Customize your theme's built-in transitions and animations with Web Awesome's motion properties.
layout: page.njk
---
<style>
.motion-swatch {
height: 2em;
background-color: var(--wa-color-neutral-fill-normal);
}
.motion-swatch:hover {
background-color: var(--wa-color-brand-fill-loud);
}
</style>
## Transitions
| Custom Property | Preview |
| ----------------------------- | ------------------------------- |
| `--wa-transition-normal` | <div class="motion-swatch" style="transition: background-color var(--wa-transition-normal)"></div> |
| `--wa-transition-fast` | <div class="motion-swatch" style="transition: background-color var(--wa-transition-fast)"></div> |
| `--wa-transition-faster` | <div class="motion-swatch" style="transition: background-color var(--wa-transition-faster)"></div> |

4
src/themes/default.css
View File

@@ -307,7 +307,7 @@
--wa-border-radius-m: calc(var(--wa-border-radius-multiplier) * 2rem);
--wa-border-radius-l: calc(var(--wa-border-radius-multiplier) * 3rem);
/* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
/* These common border radius properties can create specific shapes beyond the theme's preferred corner styles. */
--wa-border-radius-pill: 9999px;
--wa-border-radius-circle: 50%;
--wa-border-radius-sharp: 0;
@@ -318,7 +318,7 @@
--wa-focus-ring-style: solid;
--wa-focus-ring-width: 0.1875rem; /* 3px */
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
color-mix(in oklab, var(--wa-color-focus) 98%, transparent);
color-mix(in oklab, var(--wa-color-focus) 99%, transparent);
--wa-focus-ring-offset: 0.0625rem; /* 1px */
/**