From 6dd1d6263c46fbf2ce726d3e7f2dd5815adc7a6a Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 21 Oct 2025 22:55:55 -0400
Subject: [PATCH] Themer integration (#1635)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* remove themer from sidebar

* fix themes/palettes spacing

* suppress error in layouts without <wa-page>

* remove broken themer link, add more helpful deets

* make my last commit actually work 🙄

---------

Co-authored-by: lindsaym-fa <dev@lindsaym.design>
---
 .../webawesome/docs/_includes/sidebar.njk     |  6 ---
 .../webawesome/docs/assets/scripts/theme.js   |  2 +-
 .../webawesome/docs/docs/color-palettes.njk   |  1 -
 packages/webawesome/docs/docs/themes.njk      | 37 ++++++++++---------
 4 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/packages/webawesome/docs/_includes/sidebar.njk b/packages/webawesome/docs/_includes/sidebar.njk
index b83da39d7..d6a77aa48 100644
--- a/packages/webawesome/docs/_includes/sidebar.njk
+++ b/packages/webawesome/docs/_includes/sidebar.njk
@@ -383,12 +383,6 @@
 <ul>
   <li><a href="/docs/color-palettes">Color Palettes</a></li>
   <li><a href="/docs/themes">Themes</a></li>
-  <li>
-    <span class="wa-split">
-      <a href="/themer" data-turbo="false">Theme Builder</a>
-      {{ proBadge({ description: "This requires an active Web Awesome Pro subscription", shrink: true }) }}
-    </span>
-  </li>
 </ul>
 
 <!-- Design tokens -->
diff --git a/packages/webawesome/docs/assets/scripts/theme.js b/packages/webawesome/docs/assets/scripts/theme.js
index 1f8e1eeb4..3ce937679 100644
--- a/packages/webawesome/docs/assets/scripts/theme.js
+++ b/packages/webawesome/docs/assets/scripts/theme.js
@@ -38,7 +38,7 @@ async function updateTheme(value, isInitialLoad = false) {
   // Handle site theme vs regular theme
   let href = `/dist/styles/themes/${value}.css`;
 
-  if (document.querySelector('wa-page').dataset.pageType === 'site') {
+  if (document.querySelector('wa-page')?.dataset.pageType === 'site') {
     brand = 'orange';
     href = `/assets/styles/theme-site.css`;
     palette = 'default';
diff --git a/packages/webawesome/docs/docs/color-palettes.njk b/packages/webawesome/docs/docs/color-palettes.njk
index 74582f3eb..840ce738a 100644
--- a/packages/webawesome/docs/docs/color-palettes.njk
+++ b/packages/webawesome/docs/docs/color-palettes.njk
@@ -121,7 +121,6 @@ layout: page
       display: flex;
       flex-direction: row;
       flex-wrap: wrap;
-      gap: var(--wa-space-s);
     }
 
     &::part(form-control-label) {
diff --git a/packages/webawesome/docs/docs/themes.njk b/packages/webawesome/docs/docs/themes.njk
index cee4d4316..54f012862 100644
--- a/packages/webawesome/docs/docs/themes.njk
+++ b/packages/webawesome/docs/docs/themes.njk
@@ -1,26 +1,28 @@
 ---
 title: Themes
-description: Themes galore
+description: Style (and restyle) your website at will with any of Web Awesome's pre-built themes.
 layout: page
 ---
 
-<div class="wa-split">
-  <h1>{{ title }}</h1>
-  <wa-button variant="brand" href="/themer">
-    <wa-icon slot="start" name="plus" variant="regular"></wa-icon>
-    Create a Theme
-  </wa-button>
-</div>
+<h1>{{ title }}</h1>
+
+<p>Themes are collections of <a href="/docs/tokens">design tokens</a> that give a cohesive look and feel to the entire Web Awesome library. Style and restyle your website at will by loading any pre-built theme.</p>
+
+{% raw %}
+<p>See one you like?&nbsp;
+{%- if not session.isLoggedIn -%}
+  <a href="/login">Log in</a>&nbsp;
+{%- else -%}
+  Head over to <a href="/teams">your teams</a>&nbsp;
+{%- endif -%}
+to create a project with any one of these themes.
+{%- if not currentUser.hasPro -%}
+  &nbsp;(Plus, there are even more themes to love with Web Awesome Pro. <wa-icon name="heart" style="color: var(--wa-color-red-70);"></wa-icon>)
+{%- endif -%}
+</p>
+{% endraw %}
 
 <div id="theme-viewer">
-  {% raw %}
-    {% if not currentUser.hasPro %}
-      <p>
-        Additional themes are available to pro users. Please <a href="/login">login to view pro themes</a>.
-      </p>
-    {% endif %}
-  {% endraw %}
-
   <wa-radio-group id="theme-picker" label="Theme Selector" value="default" orientation="horizontal">
     {% for theme in themer.themes %}
       {% if not theme.isPro %}
@@ -223,13 +225,14 @@ layout: page
   }
 
   #theme-viewer {
+    margin-block-start: 2rem;
+
     #theme-picker {
 
       &::part(form-control-input) {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
-        gap: var(--wa-space-s);
       }
 
       &::part(form-control-label) {