Rudimentary palette icons

Author: LeaVerou

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>

docs/_layouts/palette.njk

@@ -9,7 +9,6 @@
 {% 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 }}">

docs/docs/palettes/palettes.json

@@ -1,7 +1,9 @@
 {
   "layout": "palette.njk",
   "tags": ["palettes", "palette"],
+  "hues": ["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"],
   "eleventyComputed": {
-    "snippet": ".wa-palette-{{ page.fileSlug }}"
+    "snippet": ".wa-palette-{{ page.fileSlug }}",
+    "icon": "palette"
   }
 }