From 7ecdb10487d7653ab1a04bc5faa5b868662ee0fe Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 18 Jun 2025 14:49:41 -0400
Subject: [PATCH] update themer data

---
 packages/webawesome/docs/.eleventy.js         | 296 --------
 packages/webawesome/docs/_data/themer.js      | 702 ++++++++++++++++++
 .../webawesome/docs/docs/color-palettes.njk   |  16 +-
 3 files changed, 710 insertions(+), 304 deletions(-)
 create mode 100644 packages/webawesome/docs/_data/themer.js

diff --git a/packages/webawesome/docs/.eleventy.js b/packages/webawesome/docs/.eleventy.js
index 7144d5776..90e035288 100644
--- a/packages/webawesome/docs/.eleventy.js
+++ b/packages/webawesome/docs/.eleventy.js
@@ -17,7 +17,6 @@ import * as url from 'url';
 import { outlinePlugin } from './_utils/outline.js';
 import { replaceTextPlugin } from './_utils/replace-text.js';
 import { searchPlugin } from './_utils/search.js';
-
 const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
 const isDev = process.argv.includes('--develop');
 const packageData = JSON.parse(await readFile(path.join(__dirname, '..', 'package.json'), 'utf-8'));
@@ -49,301 +48,6 @@ export default async function (eleventyConfig) {
     flashes: '',
   });
 
-  //
-  // Themer data
-  //
-  eleventyConfig.addGlobalData('themer', {
-    colors: ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'gray'],
-    hues: ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'],
-    tints: ['95', '90', '80', '70', '60', '50', '40', '30', '20', '10', '05'],
-    fonts: [
-      {
-        name: 'OS Default',
-        css: 'ui-sans-serif, system-ui, sans-serif',
-        href: null,
-      },
-      {
-        name: 'Quicksand',
-        css: 'Quicksand, sans-serif',
-        href: 'https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap',
-      },
-      {
-        name: 'Inter',
-        css: `'Inter', sans-serif`,
-        href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap',
-      },
-      {
-        name: 'Space Grotesk',
-        css: `'Space Grotesk', sans-serif`,
-        href: 'https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500&display=swap',
-      },
-      {
-        name: 'Figtree',
-        css: `'Figtree', sans-serif`,
-        href: 'https://fonts.googleapis.com/css2?family=Figtree:wght@400;800&display=swap',
-      },
-      {
-        name: 'Wix Madefor Text',
-        css: `'Wix Madefor Text', sans-serif`,
-        href: 'https://fonts.googleapis.com/css2?family=Wix+Madefor+Text:wght@400;500&display=swap',
-      },
-      {
-        name: 'Mulish',
-        css: `'Mulish', sans-serif`,
-        href: 'https://fonts.googleapis.com/css2?family=Mulish:wght@400;700&display=swap',
-      },
-      {
-        name: 'Nunito',
-        css: `'Nunito', sans-serif`,
-        href: 'https://fonts.googleapis.com/css2?family=Nunito:wght@500;600&display=swap',
-      },
-      {
-        name: 'DM Sans',
-        css: `'DM Sans', sans-serif`,
-        href: 'https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500&display=swap',
-      },
-    ],
-    elementPresets: [
-      { name: 'Default', borderRadiusScale: 1, spaceScale: 1, borderWidthScale: 1 },
-      { name: 'Awesome', borderRadiusScale: 1.5, spaceScale: 1, borderWidthScale: 2 },
-      { name: 'Shoelace', borderRadiusScale: 0.7, spaceScale: 1, borderWidthScale: 1 },
-      { name: 'Active', borderRadiusScale: 1.75, spaceScale: 1, borderWidthScale: 1 },
-      { name: 'Brutalist', borderRadiusScale: 0, spaceScale: 1.125, borderWidthScale: 2 },
-      { name: 'Glossy', borderRadiusScale: 1.33, spaceScale: 1.125, borderWidthScale: 1 },
-      { name: 'Matter', borderRadiusScale: 1.33, spaceScale: 1, borderWidthScale: 1 },
-      { name: 'Mellow', borderRadiusScale: 1, spaceScale: 1.125, borderWidthScale: 1.5 },
-      { name: 'Playful', borderRadiusScale: 2, spaceScale: 1, borderWidthScale: 3 },
-      { name: 'Premium', borderRadiusScale: 0.5, spaceScale: 1, borderWidthScale: 1.5 },
-      { name: 'Tailspin', borderRadiusScale: 1, spaceScale: 0.875, borderWidthScale: 1 },
-    ],
-    fontPresets: [
-      {
-        name: 'OS Default',
-        fontFamilyBody: 'ui-sans-serif, system-ui, sans-serif',
-        fontFamilyHeading: 'ui-sans-serif, system-ui, sans-serif',
-        fontFamilyCode: 'ui-monospace, monospace',
-        fontFamilyLongform: 'ui-serif, serif',
-        fontWeightBody: 400,
-        fontWeightHeading: 600,
-        fontWeightCode: 400,
-        fontWeightLongform: 400,
-      },
-      {
-        name: 'Quicksand',
-        fontFamilyBody: 'Quicksand, sans-serif',
-        fontFamilyHeading: 'Quicksand, sans-serif',
-        fontFamilyCode: 'ui-monospace, monospace',
-        fontFamilyLongform: 'ui-serif, serif',
-        fontWeightBody: 500,
-        fontWeightHeading: 700,
-        fontWeightCode: 500,
-        fontWeightLongform: 500,
-      },
-      {
-        name: 'Inter',
-        fontFamilyBody: `'Inter', sans-serif`,
-        fontFamilyHeading: `'Inter', sans-serif`,
-        fontFamilyCode: 'ui-monospace, monospace',
-        fontFamilyLongform: 'ui-serif, serif',
-        fontWeightBody: 400,
-        fontWeightHeading: 650,
-        fontWeightCode: 400,
-        fontWeightLongform: 400,
-      },
-      {
-        name: 'Space Grotesk',
-        fontFamilyBody: `'Space Grotesk', sans-serif`,
-        fontFamilyHeading: `'IBM Plex Sans Condensed', sans-serif`,
-        fontFamilyCode: `'Space Mono', monospace`,
-        fontFamilyLongform: 'ui-serif, serif',
-        fontWeightBody: 400,
-        fontWeightHeading: 500,
-        fontWeightCode: 400,
-        fontWeightLongform: 400,
-      },
-      {
-        name: 'Figtree',
-        fontFamilyBody: `'Figtree', sans-serif`,
-        fontFamilyHeading: `'Figtree', sans-serif`,
-        fontFamilyCode: 'ui-monospace, monospace',
-        fontFamilyLongform: 'ui-serif, serif',
-        fontWeightBody: 400,
-        fontWeightHeading: 800,
-        fontWeightCode: 400,
-        fontWeightLongform: 400,
-      },
-      {
-        name: 'Wix Madefor Text',
-        fontFamilyBody: `'Wix Madefor Text', sans-serif`,
-        fontFamilyHeading: `'Wix Madefor Text', sans-serif`,
-        fontFamilyCode: `'Roboto Mono', monospace`,
-        fontFamilyLongform: `'Roboto Serif', serif`,
-        fontWeightBody: 400,
-        fontWeightHeading: 500,
-        fontWeightCode: 400,
-        fontWeightLongform: 400,
-      },
-      {
-        name: 'Mulish',
-        fontFamilyBody: `'Mulish', sans-serif`,
-        fontFamilyHeading: `'Lora', serif`,
-        fontFamilyCode: 'ui-monospace, monospace',
-        fontFamilyLongform: `'Lora', serif`,
-        fontWeightBody: 400,
-        fontWeightHeading: 700,
-        fontWeightCode: 400,
-        fontWeightLongform: 400,
-      },
-      {
-        name: 'Nunito',
-        fontFamilyBody: `'Nunito', sans-serif`,
-        fontFamilyHeading: `'Fredoka', sans-serif`,
-        fontFamilyCode: `'Azeret Mono', monospace`,
-        fontFamilyLongform: 'ui-serif, serif',
-        fontWeightBody: 500,
-        fontWeightHeading: 600,
-        fontWeightCode: 500,
-        fontWeightLongform: 500,
-      },
-      {
-        name: 'DM Sans',
-        fontFamilyBody: `'DM Sans', sans-serif`,
-        fontFamilyHeading: `'Playfair Display', serif`,
-        fontFamilyCode: 'ui-monospace, monospace',
-        fontFamilyLongform: `'Playfair', serif`,
-        fontWeightBody: 400,
-        fontWeightHeading: 500,
-        fontWeightCode: 400,
-        fontWeightLongform: 400,
-      },
-    ],
-    icons: [
-      { name: 'Classic', libraryName: 'classic' },
-      { name: 'Sharp', libraryName: 'sharp' },
-      { name: 'Duotone', libraryName: 'duotone' },
-      { name: 'Sharp-duotone', libraryName: 'sharp-duotone' },
-    ],
-    themes: [
-      // Free
-      {
-        name: 'Default',
-        description: 'Your trusty companion, like a perfectly broken-in pair of jeans.',
-        filename: 'default.css',
-        isPro: false,
-      },
-      {
-        name: 'Awesome',
-        description: 'Punchy and vibrant, the rock star of themes.',
-        filename: 'awesome.css',
-        isPro: false,
-      },
-      {
-        name: 'Shoelace',
-        description: 'The original, familiar look you know and love from Shoelace.',
-        filename: 'shoelace.css',
-        isPro: false,
-      },
-      // Pro
-      {
-        name: 'Active',
-        description: 'The original, familiar look you know and love from Shoelace.',
-        filename: 'active.css',
-        isPro: true,
-      },
-      {
-        name: 'Brutalist',
-        description: 'The original, familiar look you know and love from Shoelace.',
-        filename: 'brutalist.css',
-        isPro: true,
-      },
-      {
-        name: 'Glossy',
-        description: 'The original, familiar look you know and love from Shoelace.',
-        filename: 'glossy.css',
-        isPro: true,
-      },
-      {
-        name: 'Matter',
-        description: 'The original, familiar look you know and love from Shoelace.',
-        filename: 'matter.css',
-        isPro: true,
-      },
-      {
-        name: 'Mellow',
-        description: 'The original, familiar look you know and love from Shoelace.',
-        filename: 'mellow.css',
-        isPro: true,
-      },
-      {
-        name: 'Playful',
-        description: 'The original, familiar look you know and love from Shoelace.',
-        filename: 'playful.css',
-        isPro: true,
-      },
-      {
-        name: 'Premium',
-        description: 'The original, familiar look you know and love from Shoelace.',
-        filename: 'premium.css',
-        isPro: true,
-      },
-      {
-        name: 'Tailspin',
-        description: 'Like a bird in flight, guiding you from there to here.',
-        filename: 'tailspin.css',
-        isPro: true,
-      },
-    ],
-    palettes: [
-      // Free
-      {
-        name: 'Default',
-        filename: 'default.css',
-        isPro: false,
-      },
-      {
-        name: 'Shoelace',
-        filename: 'shoelace.css',
-        isPro: false,
-      },
-      // Pro
-      {
-        name: 'Anodized',
-        filename: 'anodized.css',
-        isPro: true,
-      },
-      {
-        name: 'Bright',
-        filename: 'bright.css',
-        isPro: true,
-      },
-      {
-        name: 'Elegant',
-        filename: 'elegant.css',
-        isPro: true,
-      },
-      {
-        name: 'Mild',
-        filename: 'mild.css',
-        isPro: true,
-      },
-      {
-        name: 'Natural',
-        filename: 'natural.css',
-        isPro: true,
-      },
-      {
-        name: 'Rudimentary',
-        filename: 'rudimentary.css',
-        isPro: true,
-      },
-      {
-        name: 'Vogue',
-        filename: 'vogue.css',
-        isPro: true,
-      },
-    ],
-  });
-
   // Template filters - {{ content | filter }}
   eleventyConfig.addFilter('inlineMarkdown', content => markdown.renderInline(content || ''));
   eleventyConfig.addFilter('markdown', content => markdown.render(content || ''));
diff --git a/packages/webawesome/docs/_data/themer.js b/packages/webawesome/docs/_data/themer.js
new file mode 100644
index 000000000..99748f396
--- /dev/null
+++ b/packages/webawesome/docs/_data/themer.js
@@ -0,0 +1,702 @@
+/**
+ * All themes used in the themer.
+ */
+export const themes = [
+  {
+    //
+    // #region Default
+    //
+    name: 'Default',
+    description: 'Your trusty companion, like a perfectly broken-in pair of jeans.',
+    filename: 'default.css',
+    isPro: false,
+    fonts: {
+      body: {
+        name: 'OS Default',
+        css: 'ui-sans-serif, system-ui, sans-serif',
+        href: null,
+      },
+      heading: {
+        name: 'OS Default',
+        css: 'ui-sans-serif, system-ui, sans-serif',
+        href: null,
+      },
+      code: {
+        name: 'OS Default',
+        css: 'ui-monospace, monospace',
+        href: null,
+      },
+      longform: {
+        name: 'OS Default',
+        css: 'ui-serif, serif',
+        href: null,
+      },
+    },
+    icons: {
+      family: 'classic',
+      weight: 1,
+    },
+    palette: {
+      name: 'Default',
+      filename: 'default.css',
+    },
+    tokens: {
+      // Fonts
+      '--wa-font-family-body': 'ui-sans-serif, system-ui, sans-serif',
+      '--wa-font-family-heading': 'var(--wa-font-family-body)',
+      '--wa-font-family-code': 'ui-monospace, monospace',
+      '--wa-font-family-longform': 'ui-serif, serif',
+      '--wa-font-weight-body': 400,
+      '--wa-font-weight-heading': 600,
+      '--wa-font-weight-code': 400,
+      '--wa-font-weight-longform': 400,
+
+      // Elements
+      '--wa-border-radius-scale': 1,
+      '--wa-space-scale': 1,
+      '--wa-border-width-scale': 1,
+    },
+  },
+  // #endregion
+
+  //
+  // #region Awesome
+  //
+  {
+    name: 'Awesome',
+    description: 'Punchy and vibrant, the rock star of themes.',
+    filename: 'awesome.css',
+    isPro: false,
+    fonts: {
+      body: {
+        name: 'Quicksand',
+        css: 'Quicksand, sans-serif',
+        href: 'https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap',
+      },
+      heading: {
+        name: 'Quicksand',
+        css: 'Quicksand, sans-serif',
+        href: 'https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap',
+      },
+      code: {
+        name: 'OS Default',
+        css: 'ui-monospace, monospace',
+        href: null,
+      },
+      longform: {
+        name: 'OS Default',
+        css: 'ui-serif, serif',
+        href: null,
+      },
+    },
+    icons: {
+      family: 'classic',
+      weight: 2,
+    },
+    palette: {
+      name: 'Bright',
+      filename: 'bright.css',
+    },
+    tokens: {
+      // Fonts
+      '--wa-font-family-body': 'Quicksand, sans-serif',
+      '--wa-font-family-heading': 'var(--wa-font-family-body)',
+      '--wa-font-family-code': 'ui-monospace, monospace',
+      '--wa-font-family-longform': 'ui-serif, serif',
+      '--wa-font-weight-body': 500,
+      '--wa-font-weight-heading': 700,
+      '--wa-font-weight-code': 500,
+      '--wa-font-weight-longform': 500,
+
+      // Elements
+      '--wa-border-radius-scale': 1.5,
+      '--wa-space-scale': 1,
+      '--wa-border-width-scale': 2,
+    },
+  },
+  // #endregion
+
+  //
+  // #region Shoelace
+  //
+  {
+    name: 'Shoelace',
+    description: 'The original, familiar look you know and love from Shoelace.',
+    filename: 'shoelace.css',
+    isPro: false,
+    fonts: {
+      body: {
+        name: 'OS Default',
+        css: 'ui-sans-serif, system-ui, sans-serif',
+        href: null,
+      },
+      heading: {
+        name: 'OS Default',
+        css: 'ui-sans-serif, system-ui, sans-serif',
+        href: null,
+      },
+      code: {
+        name: 'OS Default',
+        css: 'ui-monospace, monospace',
+        href: null,
+      },
+      longform: {
+        name: 'OS Default',
+        css: 'ui-serif, serif',
+        href: null,
+      },
+    },
+    icons: {
+      family: 'classic',
+      weight: 1,
+    },
+    palette: {
+      name: 'Shoelace',
+      filename: 'shoelace.css',
+    },
+    tokens: {
+      // Fonts
+      '--wa-font-family-body': 'ui-sans-serif, system-ui, sans-serif',
+      '--wa-font-family-heading': 'var(--wa-font-family-body)',
+      '--wa-font-family-code': 'ui-monospace, monospace',
+      '--wa-font-family-longform': 'ui-serif, serif',
+      '--wa-font-weight-body': 400,
+      '--wa-font-weight-heading': 600,
+      '--wa-font-weight-code': 400,
+      '--wa-font-weight-longform': 400,
+
+      // Elements
+      '--wa-border-radius-scale': 0.7,
+      '--wa-space-scale': 1,
+      '--wa-border-width-scale': 1,
+    },
+  },
+  // #endregion
+
+  //
+  // #region Active
+  //
+  {
+    name: 'Active',
+    description: 'The original, familiar look you know and love from Shoelace.',
+    filename: 'active.css',
+    isPro: true,
+    fonts: {
+      body: {
+        name: 'Inter',
+        css: 'Inter, sans-serif',
+        href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+      },
+      heading: {
+        name: 'Inter',
+        css: 'Inter, sans-serif',
+        href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+      },
+      code: {
+        name: 'OS Default',
+        css: 'ui-monospace, monospace',
+        href: null,
+      },
+      longform: {
+        name: 'OS Default',
+        css: 'ui-serif, serif',
+        href: null,
+      },
+    },
+    icons: {
+      family: 'classic',
+      weight: 1,
+    },
+    palette: {
+      name: 'Anodized',
+      filename: 'anodized.css',
+    },
+    tokens: {
+      // Fonts
+      '--wa-font-family-body': 'Inter, sans-serif',
+      '--wa-font-family-heading': 'var(--wa-font-family-body)',
+      '--wa-font-family-code': 'ui-monospace, monospace',
+      '--wa-font-family-longform': 'ui-serif, serif',
+      '--wa-font-weight-body': 400,
+      '--wa-font-weight-heading': 650,
+      '--wa-font-weight-code': 400,
+      '--wa-font-weight-longform': 400,
+
+      // Elements
+      '--wa-border-radius-scale': 1.75,
+      '--wa-space-scale': 1,
+      '--wa-border-width-scale': 1,
+    },
+  },
+  // #endregion
+
+  //
+  // #region Brutalist
+  //
+  {
+    name: 'Brutalist',
+    description: 'The original, familiar look you know and love from Shoelace.',
+    filename: 'brutalist.css',
+    isPro: true,
+    fonts: {
+      body: {
+        name: 'Space Grotesk',
+        css: '"Space Grotesk", sans-serif',
+        href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@100;200;300;400;500;600;700&family=Space+Grotesk:wght@300..700&family=Space+Mono:wght@400;700&display=swap',
+      },
+      heading: {
+        name: 'IBM Plex Sans Condensed',
+        css: '"IBM Plex Sans Condensed", sans-serif',
+        href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@100;200;300;400;500;600;700&family=Space+Grotesk:wght@300..700&family=Space+Mono:wght@400;700&display=swap',
+      },
+      code: {
+        name: 'Space Mono',
+        css: '"Space Mono", monospace',
+        href: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@100;200;300;400;500;600;700&family=Space+Grotesk:wght@300..700&family=Space+Mono:wght@400;700&display=swap',
+      },
+      longform: {
+        name: 'OS Default',
+        css: 'ui-serif, serif',
+        href: null,
+      },
+    },
+    icons: {
+      family: 'classic',
+      weight: 2,
+    },
+    palette: {
+      name: 'Rudimentary',
+      filename: 'rudimentary.css',
+    },
+    tokens: {
+      // Fonts
+      '--wa-font-family-body': 'Space Grotesk, sans-serif',
+      '--wa-font-family-heading': 'IBM Plex Sans Condensed, sans-serif',
+      '--wa-font-family-code': 'Space Mono, monospace',
+      '--wa-font-family-longform': 'ui-serif, serif',
+      '--wa-font-weight-body': 400,
+      '--wa-font-weight-heading': 500,
+      '--wa-font-weight-code': 400,
+      '--wa-font-weight-longform': 400,
+
+      // Elements
+      '--wa-border-radius-scale': 0,
+      '--wa-space-scale': 1.125,
+      '--wa-border-width-scale': 2,
+    },
+  },
+  // #endregion
+
+  //
+  // #region Glossy
+  //
+  {
+    name: 'Glossy',
+    description: 'The original, familiar look you know and love from Shoelace.',
+    filename: 'glossy.css',
+    isPro: true,
+    fonts: {
+      body: {
+        name: 'Figtree',
+        css: 'Figtree, sans-serif',
+        href: 'https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap',
+      },
+      heading: {
+        name: 'Figtree',
+        css: 'Figtree, sans-serif',
+        href: 'https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap',
+      },
+      code: {
+        name: 'OS Default',
+        css: 'ui-monospace, monospace',
+        href: null,
+      },
+      longform: {
+        name: 'OS Default',
+        css: 'ui-serif, serif',
+        href: null,
+      },
+    },
+    icons: {
+      family: 'classic',
+      weight: 1,
+    },
+    palette: {
+      name: 'Elegant',
+      filename: 'elegant.css',
+    },
+    tokens: {
+      // Fonts
+      '--wa-font-family-body': 'Figtree, sans-serif',
+      '--wa-font-family-heading': 'var(--wa-font-family-body)',
+      '--wa-font-family-code': 'ui-monospace, monospace',
+      '--wa-font-family-longform': 'ui-serif, serif',
+      '--wa-font-weight-body': 400,
+      '--wa-font-weight-heading': 800,
+      '--wa-font-weight-code': 400,
+      '--wa-font-weight-longform': 400,
+
+      // Elements
+      '--wa-border-radius-scale': 1.33,
+      '--wa-space-scale': 1.125,
+      '--wa-border-width-scale': 1,
+    },
+  },
+  // #endregion
+
+  //
+  // #region Matter
+  //
+  {
+    name: 'Matter',
+    description: 'The original, familiar look you know and love from Shoelace.',
+    filename: 'matter.css',
+    isPro: true,
+    fonts: {
+      body: {
+        name: 'Wix Madefor Text',
+        css: '"Wix Madefor Text", sans-serif',
+        href: 'https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap',
+      },
+      heading: {
+        name: 'Wix Madefor Text',
+        css: '"Wix Madefor Text", sans-serif',
+        href: 'https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap',
+      },
+      code: {
+        name: 'Roboto Mono',
+        css: '"Roboto Mono", monospace',
+        href: 'https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap',
+      },
+      longform: {
+        name: 'Roboto Serif',
+        css: '"Roboto Serif", serif',
+        href: 'https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap',
+      },
+    },
+    icons: {
+      family: 'classic',
+      weight: 1,
+    },
+    palette: {
+      name: 'Natural',
+      filename: 'natural.css',
+    },
+    tokens: {
+      // Fonts
+      '--wa-font-family-body': 'Wix Madefor Text, sans-serif',
+      '--wa-font-family-heading': 'var(--wa-font-family-body)',
+      '--wa-font-family-code': 'Roboto Mono, monospace',
+      '--wa-font-family-longform': 'Roboto Serif, serif',
+      '--wa-font-weight-body': 400,
+      '--wa-font-weight-heading': 500,
+      '--wa-font-weight-code': 400,
+      '--wa-font-weight-longform': 400,
+
+      // Elements
+      '--wa-border-radius-scale': 1.33,
+      '--wa-space-scale': 1,
+      '--wa-border-width-scale': 1,
+    },
+  },
+  // #endregion
+
+  //
+  // #region Mellow
+  //
+  {
+    name: 'Mellow',
+    description: 'The original, familiar look you know and love from Shoelace.',
+    filename: 'mellow.css',
+    isPro: true,
+    fonts: {
+      body: {
+        name: 'Mulish',
+        css: 'Mulish, sans-serif',
+        href: 'https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap',
+      },
+      heading: {
+        name: 'Lora',
+        css: 'Lora, serif',
+        href: 'https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap',
+      },
+      code: {
+        name: 'OS Default',
+        css: 'ui-monospace, monospace',
+        href: null,
+      },
+      longform: {
+        name: 'Lora',
+        css: 'Lora, serif',
+        href: 'https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap',
+      },
+    },
+    icons: {
+      family: 'classic',
+      weight: 1.5,
+    },
+    palette: {
+      name: 'Mild',
+      filename: 'mild.css',
+    },
+    tokens: {
+      // Fonts
+      '--wa-font-family-body': 'Mulish, sans-serif',
+      '--wa-font-family-heading': 'Lora, serif',
+      '--wa-font-family-code': 'ui-monospace, monospace',
+      '--wa-font-family-longform': 'Lora, serif',
+      '--wa-font-weight-body': 400,
+      '--wa-font-weight-heading': 700,
+      '--wa-font-weight-code': 400,
+      '--wa-font-weight-longform': 400,
+
+      // Elements
+      '--wa-border-radius-scale': 1,
+      '--wa-space-scale': 1.125,
+      '--wa-border-width-scale': 1.5,
+    },
+  },
+  // #endregion
+
+  //
+  // #region Playful
+  //
+  {
+    name: 'Playful',
+    description: 'The original, familiar look you know and love from Shoelace.',
+    filename: 'playful.css',
+    isPro: true,
+    fonts: {
+      body: {
+        name: 'Nunito',
+        css: 'Nunito, sans-serif',
+        href: 'https://fonts.googleapis.com/css2?family=Azeret+Mono:ital@0;1&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap',
+      },
+      heading: {
+        name: 'Fredoka',
+        css: 'Fredoka, sans-serif',
+        href: 'https://fonts.googleapis.com/css2?family=Azeret+Mono:ital@0;1&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap',
+      },
+      code: {
+        name: 'Azeret Mono',
+        css: '"Azeret Mono", monospace',
+        href: 'https://fonts.googleapis.com/css2?family=Azeret+Mono:ital@0;1&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap',
+      },
+      longform: {
+        name: 'OS Default',
+        css: 'ui-serif, serif',
+        href: null,
+      },
+    },
+    icons: {
+      family: 'classic',
+      weight: 3,
+    },
+    palette: {
+      name: 'Bright',
+      filename: 'bright.css',
+    },
+    tokens: {
+      // Fonts
+      '--wa-font-family-body': 'Nunito, sans-serif',
+      '--wa-font-family-heading': 'Fredoka, sans-serif',
+      '--wa-font-family-code': 'Azeret Mono, monospace',
+      '--wa-font-family-longform': 'ui-serif, serif',
+      '--wa-font-weight-body': 500,
+      '--wa-font-weight-heading': 600,
+      '--wa-font-weight-code': 500,
+      '--wa-font-weight-longform': 500,
+
+      // Elements
+      '--wa-border-radius-scale': 2,
+      '--wa-space-scale': 1,
+      '--wa-border-width-scale': 3,
+    },
+  },
+  // #endregion
+
+  //
+  // #region Premium
+  //
+  {
+    name: 'Premium',
+    description: 'The original, familiar look you know and love from Shoelace.',
+    filename: 'premium.css',
+    isPro: true,
+    fonts: {
+      body: {
+        name: 'DM Sans',
+        css: '"DM Sans", sans-serif',
+        href: 'https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap',
+      },
+      heading: {
+        name: 'Playfair Display',
+        css: '"Playfair Display", serif',
+        href: 'https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap',
+      },
+      code: {
+        name: 'OS Default',
+        css: 'ui-monospace, monospace',
+        href: null,
+      },
+      longform: {
+        name: 'Playfair',
+        css: 'Playfair, serif',
+        href: 'https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap',
+      },
+    },
+    icons: {
+      family: 'classic',
+      weight: 1.5,
+    },
+    palette: {
+      name: 'Elegant',
+      filename: 'elegant.css',
+    },
+    tokens: {
+      // Fonts
+      '--wa-font-family-body': 'DM Sans, sans-serif',
+      '--wa-font-family-heading': 'Playfair Display, serif',
+      '--wa-font-family-code': 'ui-monospace, monospace',
+      '--wa-font-family-longform': 'Playfair, serif',
+      '--wa-font-weight-body': 400,
+      '--wa-font-weight-heading': 500,
+      '--wa-font-weight-code': 400,
+      '--wa-font-weight-longform': 400,
+
+      // Elements
+      '--wa-border-radius-scale': 0.5,
+      '--wa-space-scale': 1,
+      '--wa-border-width-scale': 1.5,
+    },
+  },
+  // #endregion
+
+  //
+  // #region Tailspin
+  //
+  {
+    name: 'Tailspin',
+    description: 'Like a bird in flight, guiding you from there to here.',
+    filename: 'tailspin.css',
+    isPro: true,
+    fonts: {
+      body: {
+        name: 'Inter',
+        css: 'Inter, sans-serif',
+        href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+      },
+      heading: {
+        name: 'Inter',
+        css: 'Inter, sans-serif',
+        href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
+      },
+      code: {
+        name: 'OS Default',
+        css: 'ui-monospace, monospace',
+        href: null,
+      },
+      longform: {
+        name: 'OS Default',
+        css: 'ui-serif, serif',
+        href: null,
+      },
+    },
+    icons: {
+      family: 'classic',
+      weight: 1,
+    },
+    palette: {
+      name: 'Vogue',
+      filename: 'vogue.css',
+    },
+    tokens: {
+      // Fonts
+      '--wa-font-family-body': 'Inter, sans-serif',
+      '--wa-font-family-heading': 'var(--wa-font-family-body)',
+      '--wa-font-family-code': 'ui-monospace, monospace',
+      '--wa-font-family-longform': 'ui-serif, serif',
+      '--wa-font-weight-body': 400,
+      '--wa-font-weight-heading': 700,
+      '--wa-font-weight-code': 400,
+      '--wa-font-weight-longform': 400,
+
+      // Elements
+      '--wa-border-radius-scale': 1,
+      '--wa-space-scale': 0.875,
+      '--wa-border-width-scale': 1,
+    },
+  },
+  // #endregion
+];
+
+/**
+ * All fonts used by themes, collected from the four font categories.
+ */
+export const fonts = themes
+  .flatMap(theme => [theme.fonts.body, theme.fonts.heading, theme.fonts.code, theme.fonts.longform])
+  .filter(
+    (font, index, array) =>
+      array.findIndex(f => f.name === font.name && f.css === font.css && f.href === font.href) === index,
+  );
+
+/**
+ * Font presets derived from themes, with unique font names in order: heading > body > code > longform
+ */
+export const fontPresets = themes
+  .map(theme => {
+    const fontNames = [
+      theme.fonts.heading.name,
+      theme.fonts.body.name,
+      theme.fonts.code.name,
+      theme.fonts.longform.name,
+    ];
+    const uniqueFonts = fontNames.filter((name, index) => fontNames.indexOf(name) === index);
+
+    return {
+      name: theme.name,
+      displayName: uniqueFonts.join(' · '),
+      fontFamilyBody: theme.fonts.body.css,
+      fontFamilyHeading: theme.fonts.heading.css,
+      fontFamilyCode: theme.fonts.code.css,
+      fontFamilyLongform: theme.fonts.longform.css,
+      fontWeightBody: theme.tokens['--wa-font-weight-body'],
+      fontWeightHeading: theme.tokens['--wa-font-weight-heading'],
+      fontWeightCode: theme.tokens['--wa-font-weight-code'],
+      fontWeightLongform: theme.tokens['--wa-font-weight-longform'],
+    };
+  })
+  .filter((preset, index, array) => array.findIndex(p => p.displayName === preset.displayName) === index);
+
+/**
+ * Element presets derived from themes.
+ */
+export const elementPresets = themes.map(theme => ({
+  name: theme.name,
+  borderRadiusScale: theme.tokens['--wa-border-radius-scale'],
+  spaceScale: theme.tokens['--wa-space-scale'],
+  borderWidthScale: theme.tokens['--wa-border-width-scale'],
+}));
+
+/**
+ * All palettes used by themes in a simple array.
+ */
+export const palettes = themes
+  .map(theme => theme.palette)
+  .filter(
+    (palette, index, array) =>
+      array.findIndex(p => p.name === palette.name && p.filename === palette.filename) === index,
+  );
+
+/**
+ * Available icons.
+ */
+export const icons = [
+  { name: 'Classic', libraryName: 'classic' },
+  { name: 'Sharp', libraryName: 'sharp' },
+  { name: 'Duotone', libraryName: 'duotone' },
+  { name: 'Sharp-duotone', libraryName: 'sharp-duotone' },
+];
+
+export const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'];
+export const tints = ['95', '90', '80', '70', '60', '50', '40', '30', '20', '10', '05'];
diff --git a/packages/webawesome/docs/docs/color-palettes.njk b/packages/webawesome/docs/docs/color-palettes.njk
index 5f3f368ef..a744321bb 100644
--- a/packages/webawesome/docs/docs/color-palettes.njk
+++ b/packages/webawesome/docs/docs/color-palettes.njk
@@ -7,7 +7,7 @@ isPro: true
 
 <p>Color palettes give you a full spectrum of colors to add life to your project.</p>
 
-<p>Each palette defines 10 hues with a scale of 11 tints. While the tints have consistent lightness values across palettes, each palette has unique hue shifts and chroma to give it unique character so you can find just the right vibe to your project.</p>
+<p>Each palette defines 10 color hues with a scale of 11 tints. While the tints have consistent lightness values across palettes, each palette has unique hue shifts and chroma to give it unique character so you can find just the right vibe to your project.</p>
 
 {% for palette in themer.palettes %}
   <link rel="stylesheet" href="/dist/styles/color/palettes/{{palette.filename}}" />
@@ -16,22 +16,22 @@ isPro: true
 <div id="color-palettes">
   <wa-radio-group id="palette-picker" label="Color Palette" value="default" orientation="horizontal">
     {% for palette in themer.palettes %}
-      <wa-radio class="palette-card" value="{{ palette.filename | stripExtension }}">{{ palette.name }}</wa-radio>
+      <wa-radio class="palette-card" value="{{ palette.name | lower }}">{{ palette.name }}</wa-radio>
     {% endfor %}
   </wa-radio-group>
 
-  {% for hue in themer.hues %}
+  {% for color in themer.colors %}
   <div class="palette">
-    <div class="palette-label">{{ hue }}</div>
+    <div class="palette-label">{{ color }}</div>
     <div class="palette-swatches">
       {% for tint in themer.tints %}
       <wa-copy-button
         class="palette-swatch"
-        copy-label="{{ hue }} {{ tint }}"
-        value="var(--wa-color-{{ hue }}-{{ tint }})"
-        style="--color: var(--wa-color-{{ hue }}-{{ tint }}); --tint: '{{ tint }}'"
+        copy-label="{{ color }} {{ tint }}"
+        value="var(--wa-color-{{ color }}-{{ tint }})"
+        style="--color: var(--wa-color-{{ color }}-{{ tint }}); --tint: '{{ tint }}'"
       >
-        <span class="sr-only">--wa-color-{{ hue }}-{{ tint }}</span>
+        <span class="sr-only">--wa-color-{{ color }}-{{ tint }}</span>
       </wa-copy-button>
       {% endfor %}
     </div>