shoelace-style · LeaVerou · Jan 16, 2025 · Jan 16, 2025 · Jan 16, 2025 · Jan 16, 2025
diff --git a/docs/_data/hues.json b/docs/_data/hues.json
@@ -0,0 +1 @@
+["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"]
diff --git a/docs/_includes/contrast-table.njk b/docs/_includes/contrast-table.njk
@@ -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>
diff --git a/docs/_includes/sidebar.njk b/docs/_includes/sidebar.njk
@@ -25,6 +25,7 @@
   'utilities': 'Style Utilities',
   'layout': 'Layout',
   'patterns': 'Patterns',
+  'palettes': 'Color Palettes',
   'tokens': 'Design Tokens'
 } %}
   {% include 'sidebar-group.njk' %}

diff --git a/docs/_includes/svgs/palette.njk b/docs/_includes/svgs/palette.njk
@@ -0,0 +1,24 @@
+{% set paletteId = page.fileSlug %}
+{% set tints = [80, 60, 40, 20] %}
+{% set width = 20 %}
+{% set height = 13 %}
+{% set gap_x = 3 %}
+{% set gap_y = 3 %}
+
+<svg viewBox="0 0 {{ (width + gap_x) * hues|length }} {{ (height + gap_y) * tints|length }}" fill="none" xmlns="http://www.w3.org/2000/svg" class="wa-palette-{{ paletteId }} palette-icon">
+<style>
+	@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});
+	.palette-icon {
+		height: 8ch;
+	}
+</style>
+
+{% for hue in hues -%}
+  {% set hueIndex = loop.index0 %}
+  {% for tint in tints -%}
+    <rect x="{{ hueIndex * (width + gap_x) }}" y="{{ loop.index0 * (height + gap_y) }}"
+	      width="{{ width }}" height="{{ height }}"
+	      fill="var(--wa-color-{{ hue }}-{{ tint }})" rx="4" />
+  {%- endfor %}
+{% endfor %}
+</svg>
diff --git a/docs/_layouts/palette.njk b/docs/_layouts/palette.njk
@@ -0,0 +1,107 @@
+{% 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 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 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 %}
diff --git a/docs/_layouts/theme.njk b/docs/_layouts/theme.njk
@@ -6,6 +6,16 @@
 
 {% block header %}
 <iframe src='{{ page.url }}demo.html'></iframe>
+
+<h2>Default Color Palette</h2>
+{% set paletteURL = '/docs/palettes/' + palette + '/' %}
+{% set themePage = page %}
+{% set page = paletteURL | getCollectionItemFromUrl %}
+<div class="index-grid">
+{% include 'page-card.njk' %}
+</div>
+{% set page = themePage %}
+
 {% endblock %}
 
 {% block afterContent %}

diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
@@ -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,23 @@ 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);
+  line-height: var(--wa-line-height-condensed);
+
+  &.color {
+    border-color: transparent;
+  }
 
   wa-copy-button {
     position: absolute;
@@ -421,6 +430,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);

diff --git a/docs/docs/palettes/anodized.md b/docs/docs/palettes/anodized.md
@@ -0,0 +1,5 @@
+---
+title: Anodized
+isPro: true
+tags: pro
+---
diff --git a/docs/docs/palettes/bright.md b/docs/docs/palettes/bright.md
@@ -0,0 +1,3 @@
+---
+title: Bright
+---
diff --git a/docs/docs/palettes/classic.md b/docs/docs/palettes/classic.md
@@ -0,0 +1,4 @@
+---
+title: Classic
+description: The original Shoelace color palette.
+---
diff --git a/docs/docs/palettes/default.md b/docs/docs/palettes/default.md
@@ -0,0 +1,4 @@
+---
+title: Default
+description: This is the palette used in the default theme.
+---
diff --git a/docs/docs/palettes/elegant.md b/docs/docs/palettes/elegant.md
@@ -0,0 +1,5 @@
+---
+title: Elegant
+isPro: true
+tags: pro
+---
diff --git a/docs/docs/palettes/index.njk b/docs/docs/palettes/index.njk
@@ -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
+---
diff --git a/docs/docs/palettes/natural.md b/docs/docs/palettes/natural.md
@@ -0,0 +1,5 @@
+---
+title: Natural
+isPro: true
+tags: pro
+---
diff --git a/docs/docs/palettes/palettes.json b/docs/docs/palettes/palettes.json
@@ -0,0 +1,8 @@
+{
+  "layout": "palette.njk",
+  "tags": ["palettes", "palette"],
+  "eleventyComputed": {
+    "snippet": ".wa-palette-{{ page.fileSlug }}",
+    "icon": "palette"
+  }
+}
diff --git a/docs/docs/palettes/rudimentary.md b/docs/docs/palettes/rudimentary.md
@@ -0,0 +1,5 @@
+---
+title: Rudimentary
+isPro: true
+tags: pro
+---
diff --git a/docs/docs/palettes/vogue.md b/docs/docs/palettes/vogue.md
@@ -0,0 +1,5 @@
+---
+title: Vogue
+isPro: true
+tags: pro
+---
diff --git a/docs/docs/themes/active.md b/docs/docs/themes/active.md
@@ -3,5 +3,5 @@ title: Active
 description: Energetic and tactile, always in motion.
 isPro: true
 tags: pro
-defaultPalette: rudimentary
+palette: rudimentary
 ---
diff --git a/docs/docs/themes/awesome.md b/docs/docs/themes/awesome.md
@@ -2,5 +2,5 @@
 title: Awesome
 description: Punchy and vibrant, the rockstar of themes.
 order: 0.2
-defaultPalette: bright
+palette: bright
 ---
diff --git a/docs/docs/themes/brutalist.md b/docs/docs/themes/brutalist.md
@@ -3,5 +3,5 @@ title: Brutalist
 description: Sharp, square, and unapologetically bold.
 isPro: true
 tags: pro
-defaultPalette: default
+palette: default
 ---
diff --git a/docs/docs/themes/classic.md b/docs/docs/themes/classic.md
@@ -2,5 +2,5 @@
 title: Classic
 description: Timeless elegance that never goes out of style.
 order: 0.1
-defaultPalette: classic
+palette: classic
 ---
diff --git a/docs/docs/themes/default.md b/docs/docs/themes/default.md
@@ -2,5 +2,5 @@
 title: Default
 description: Your trusty companion, like a perfectly broken-in pair of jeans.
 order: 0
-defaultPalette: default
+palette: default
 ---
diff --git a/docs/docs/themes/glossy.md b/docs/docs/themes/glossy.md
@@ -3,5 +3,5 @@ title: Glossy
 description: Bustling with plenty of luster and shine.
 isPro: true
 tags: pro
-defaultPalette: elegant
+palette: elegant
 ---
diff --git a/docs/docs/themes/mellow.md b/docs/docs/themes/mellow.md
@@ -3,5 +3,5 @@ title: Mellow
 description: Soft and soothing, like a lazy Sunday morning.
 isPro: true
 tags: pro
-defaultPalette: natural
+palette: natural
 ---
diff --git a/docs/docs/themes/playful.md b/docs/docs/themes/playful.md
@@ -3,5 +3,5 @@ title: Playful
 description: Cheerful and engaging, like a playground on screen.
 isPro: true
 tags: pro
-defaultPalette: rudimentary
+palette: rudimentary
 ---
diff --git a/docs/docs/themes/premium.md b/docs/docs/themes/premium.md
@@ -3,5 +3,5 @@ title: Premium
 description: The ultimate in sophistication and style.
 isPro: true
 tags: pro
-defaultPalette: anodized
+palette: anodized
 ---
diff --git a/docs/docs/themes/tailspin.md b/docs/docs/themes/tailspin.md
@@ -3,5 +3,5 @@ title: Tailspin
 description: Like a bird in flight, guiding you from there to here.
 isPro: true
 tags: pro
-defaultPalette: vogue
+palette: vogue
 ---
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"]