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

Palette Docs

Browse Source
This commit is contained in:
Lea Verou
2025-01-15 23:09:01 -05:00
parent 71914afc91
commit 7d089bbe2f
15 changed files with 235 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
docs/_includes/contrast-table.njk Normal file
View File

@@ -0,0 +1,31 @@
<table class="colors wa-palette-{{ paletteId }}">
<thead>
<tr>
<th></th>
{% for tint_bg in tints -%}
{% for tint_fg in tints | reverse -%}
{% if (tint_fg - tint_bg) | abs == difference %}
<th>{{ tint_fg }} on {{ tint_bg }}</th>
{% endif %}
{%- endfor -%}
{%- endfor %}
</tr>
</thead>
{% for hue in hues -%}
<tr>
<th>{{ hue | capitalize }}</th>
{% for tint_bg in tints -%}
{% for tint_fg in tints | reverse -%}
{% if (tint_fg - tint_bg) | abs == difference %}
<td>
<div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint_bg }}); color: var(--wa-color-{{ hue }}-{{ tint_fg }})">
{{ tint_fg }} on {{ tint_bg }}
</div>
</td>
{% endif %}
{%- endfor -%}
{%- endfor -%}
</tr>
{%- endfor %}
</table>

1
docs/_includes/sidebar.njk
View File

@@ -25,6 +25,7 @@
'utilities': 'Style Utilities',
'layout': 'Layout',
'patterns': 'Patterns',
'palettes': 'Color Palettes',
'tokens': 'Design Tokens'
} %}
{% include 'sidebar-group.njk' %}

108
docs/_layouts/palette.njk Normal file
View File

@@ -0,0 +1,108 @@
{% set hasSidebar = true %}
{% set hasOutline = true %}
{# {% set forceTheme = page.fileSlug %} #}
{% extends '../_layouts/block.njk' %}
{% set paletteId = page.fileSlug %}
{% block afterContent %}
<style>@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});</style>
{% set hues = ["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"] %}
{% set tints = ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] %}
<table class="colors wa-palette-{{ paletteId }}">
<thead>
<tr>
<th></th>
{% for tint in tints -%}
<th>{{ tint }}</th>
{%- endfor %}
</tr>
</thead>
{% for hue in hues -%}
<tr>
<th>{{ hue | capitalize }}</th>
{% for tint in tints -%}
<td>
<div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
<wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
</div>
</td>
{%- endfor -%}
</tr>
{%- endfor %}
</table>
<h2>Used By</h2>
<section id="grid" class="index-grid">
{% for page in collections.theme %}
{%- if page.data.palette == paletteId -%}
{% include "page-card.njk" %}
{%- endif -%}
{% endfor %}
</section>
{% markdown %}
## Color Contrast
Web Awesome color scales are designed to guarantee certain contrast ratios,
both per [WCAG 2.1 success criteria](https://www.w3.org/TR/WCAG21/#contrast-minimum)
as well as the emergent APCA specification _(planned)_.
so you can ensure that text is both legible to all users, and legally conformant.
### Level 1
A difference of `40` ensures a minimum **3:1** contrast ratio, suitable for large text and icons (AA).
{% endmarkdown %}
{% set difference = 40 %}
{% include "contrast-table.njk" %}
{% markdown %}
### Level 2
A difference of `50` ensures a minimum **4.5:1** contrast ratio, suitable for normal text (AA) and large text (AAA)
{% endmarkdown %}
{% set difference = 50 %}
{% include "contrast-table.njk" %}
{% markdown %}
### Level 3
A difference of `60` ensures a minimum **7:1** contrast ratio, suitable for all text (AAA)
{% endmarkdown %}
{% set difference = 60 %}
{% include "contrast-table.njk" %}
{% markdown %}
## How to use this palette
If you are using a Web Awesome theme that uses this palette, it will already be included.
To use a different palette than a theme default, or to use it in a custom theme, you can import this palette directly from the Web Awesome CDN.
<wa-tab-group>
<wa-tab panel="html">In HTML</wa-tab>
<wa-tab panel="css">In CSS</wa-tab>
<wa-tab-panel name="html">
Simply add the following code to the `<head>` of your page:
```html
<link rel="stylesheet" href="{% cdnUrl 'styles/color/' + page.fileSlug + '.css' %}" />
```
</wa-tab-panel>
<wa-tab-panel name="css">
Simply add the following code at the top of your CSS file:
```css
@import url('{% cdnUrl 'styles/color/' + page.fileSlug + '.css' %}');
```
</wa-tab-panel>
</wa-tab-group>
{% endmarkdown %}
{% endblock %}

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

@@ -333,6 +333,7 @@ wa-page > main:has(> .index-grid) {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(22ch, 100%), 1fr));
gap: var(--wa-space-2xl);
margin-block-end: var(--wa-space-3xl);
a {
border-radius: var(--wa-border-radius-l);
@@ -383,15 +384,22 @@ wa-page > main:has(> .index-grid) {
/* Swatches */
.swatch {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
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-m);
box-sizing: border-box;
line-height: 2.5;
height: 2.5em;
padding-inline: var(--wa-space-xs);
min-height: 2.5em;
padding: var(--wa-space-xs);
font-weight: var(--wa-font-weight-semibold);
&.color {
border-color: transparent;
}
wa-copy-button {
position: absolute;
@@ -421,6 +429,34 @@ wa-page > main:has(> .index-grid) {
}
}
table.colors {
thead {
th {
text-align: center;
padding-block: 0;
}
}
tbody {
tr {
border: none;
&:hover {
background: transparent;
}
}
th {
width: 0;
vertical-align: middle;
text-align: right;
}
td {
padding-inline: var(--wa-space-3xs);
padding-block: var(--wa-space-s);
}
}
}
/* Layout Examples */
.layout-example-boundary {
border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);

5
docs/docs/palettes/anodized.md Normal file
View File

@@ -0,0 +1,5 @@
---
title: Anodized
isPro: true
tags: pro
---

3
docs/docs/palettes/bright.md Normal file
View File

@@ -0,0 +1,3 @@
---
title: Bright
---

4
docs/docs/palettes/classic.md Normal file
View File

@@ -0,0 +1,4 @@
---
title: Classic
description: The original Shoelace color palette.
---

4
docs/docs/palettes/default.md Normal file
View File

@@ -0,0 +1,4 @@
---
title: Default
description: This is the palette used in the default theme.
---

5
docs/docs/palettes/elegant.md Normal file
View File

@@ -0,0 +1,5 @@
---
title: Elegant
isPro: true
tags: pro
---

10
docs/docs/palettes/index.njk Normal file
View File

@@ -0,0 +1,10 @@
---
title: Color Palettes
description: Palettes define [literal colors](/docs/tokens/colors) that are used in the design system.
layout: overview
override:tags: []
forTag: palette
categories:
other: Free
pro: Pro
---

5
docs/docs/palettes/natural.md Normal file
View File

@@ -0,0 +1,5 @@
---
title: Natural
isPro: true
tags: pro
---

7
docs/docs/palettes/palettes.json Normal file
View File

@@ -0,0 +1,7 @@
{
"layout": "palette.njk",
"tags": ["palettes", "palette"],
"eleventyComputed": {
"snippet": ".wa-palette-{{ page.fileSlug }}"
}
}

5
docs/docs/palettes/rudimentary.md Normal file
View File

@@ -0,0 +1,5 @@
---
title: Rudimentary
isPro: true
tags: pro
---

5
docs/docs/palettes/vogue.md Normal file
View File

@@ -0,0 +1,5 @@
---
title: Vogue
isPro: true
tags: pro
---

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

@@ -71,7 +71,9 @@ Web Awesome defines seven literal colors each with 11 lightness values using the
<ul class="color-group">
{% for tint in ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] -%}
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})"></div>
<div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
<wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
</div>
<small>{{ tint }}</small>
</li>
{%- endfor %}
@@ -187,23 +189,3 @@ Finally, each color is named according to how much attention it draws. Here, we
{%- endfor %}
{%- endfor %}
</table>
<script type="module">
const computedStyle = getComputedStyle(document.body)
document.querySelectorAll(".swatch").forEach((swatch) => {
let varName = swatch.getAttribute("value")
if (!varName) {
const bgColor = swatch.style.backgroundColor
varName = bgColor.replace(/^var\((--.*)\)$/, "$1")
}
const copyButton = Object.assign(document.createElement("wa-copy-button"), {
value: varName,
copyLabel: varName,
errorLabel: "Whoops, your browser doesn't support this!",
})
swatch.appendChild(copyButton)
})
</script>