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

Add docs

Browse Source
This commit is contained in:
Lea Verou
2025-01-14 15:08:13 -05:00
parent bc873afae8
commit b512890f2a
1 changed files with 16 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docs/docs/tokens/color.md
View File

@@ -66,10 +66,12 @@ Lightness values on this scale have a strong correlation to [relative luminance]
Web Awesome defines seven literal colors each with 11 lightness values using the format `--wa-color-{hue}-{tint}`.
{% for hue in ["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"] -%}
{% set hues = ["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"] %}
{% set tints = ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] %}
{% for hue in hues -%}
<div class="color-name">{{ hue | capitalize }}</div>
<ul class="color-group">
{% for tint in ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] -%}
{% for tint in tints -%}
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})"></div>
<small>{{ tint }}</small>
@@ -78,6 +80,18 @@ Web Awesome defines seven literal colors each with 11 lightness values using the
</ul>
{%- endfor %}
You can also omit the lightness value to get the brightest, most intense color for each hue:
<div class="color-name">Accent colors</div>
<ul class="color-group">
{% for hue in hues -%}
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-{{ hue }})"></div>
<small>{{ hue }}</small>
</li>
{%- endfor %}
</ul>
## Foundational Colors
Foundational colors lay the groundwork for the content and structure of your project. These colors are named according to their role in your theme.