Add color palette to theme pages

docs/_data/hues.json

@@ -0,0 +1 @@
+["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"]

docs/_layouts/palette.njk

@@ -36,7 +36,7 @@
 
 <h2>Used By</h2>
 
-<section id="grid" class="index-grid">
+<section class="index-grid">
 {% for page in collections.theme %}
   {%- if page.data.palette == paletteId -%}
     {% include "page-card.njk" %}

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 %}

docs/docs/palettes/palettes.json

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