show based on currentUser.hasPro

packages/webawesome/docs/docs/color-palettes.njk

@@ -2,7 +2,6 @@
 title: Color Palettes
 description: 'Color palettes give you a full spectrum of colors to add life to your project.'
 layout: page
-isPro: true
 ---
 
 <p>Color palettes give you a full spectrum of colors to add life to your project.</p>
@@ -13,10 +12,24 @@ isPro: true
   <link rel="stylesheet" href="/dist/styles/color/palettes/{{palette.filename}}" />
 {% endfor %}
 
+{% raw %}
 <div id="color-palettes">
+  {% if not currentUser.hasPro %}
+    <p>
+      Additional palettes are available to pro users. Please <a href="/login">login to view pro palettes</a>.
+    </p>
+  {% endif %}
+
   <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.name | lower }}">{{ palette.name }}</wa-radio>
+      {% if not palette.isPro or currentUser.hasPro %}
+        <wa-radio
+          class="palette-card"
+          value="{{ palette.name | lower }}"
+        >
+          {{ palette.name }}
+        </wa-radio>
+      {% endif %}
     {% endfor %}
   </wa-radio-group>
 
@@ -38,6 +51,7 @@ isPro: true
   </div>
   {% endfor %}
 </div>
+{% endraw %}
 
 <h2>Using This Palette</h2>
 <div id="import-code">
@@ -124,13 +138,16 @@ isPro: true
     border: 1px solid var(--wa-color-surface-border);
     border-radius: var(--border-radius);
     box-shadow: var(--wa-shadow-s);
-    cursor: pointer;
     transition: all 0.2s ease;
     text-align: center;
     font-weight: var(--wa-font-weight-action);
     text-transform: capitalize;
   }
 
+  .palette-card:not(:state(disabled)) {
+    cursor: pointer;
+  }
+
   .palette-card:state(checked) {
     border-color: var(--wa-color-brand-border-loud);
     background-color: var(--wa-color-brand-fill-quiet);

packages/webawesome/docs/docs/themes.njk

@@ -2,7 +2,6 @@
 title: Themes
 description: Themes galore
 layout: page
-isPro: true
 ---
 
 <div class="wa-stack wa-gap-3xl">
@@ -15,21 +14,31 @@ isPro: true
     </wa-button>
   </div>
 
+  {% raw %}
   <div id="theme-viewer">
+    {% if not currentUser.hasPro %}
+      <p>
+        Additional themes are available to pro users. Please <a href="/login">login to view pro themes</a>.
+      </p>
+    {% endif %}
+
     <wa-radio-group id="theme-picker" label="Theme Selector" value="default" orientation="horizontal">
       {% for theme in themer.themes %}
-        <wa-radio
-          class="theme-card"
-          value="{{ theme.filename | stripExtension }}"
-          data-description="{{ theme.description }}"
-          data-title="{{ theme.name }}"
-          {% if theme.isPro %}data-is-pro{% endif %}
-        >
-          {{ theme.name }}
-        </wa-radio>
+        {% if not theme.isPro or currentUser.hasPro %}
+          <wa-radio
+            class="theme-card"
+            value="{{ theme.filename | stripExtension }}"
+            data-description="{{ theme.description }}"
+            data-title="{{ theme.name }}"
+            {% if theme.isPro %}data-is-pro{% endif %}
+          >
+            {{ theme.name }}
+          </wa-radio>
+        {% endif %}
       {% endfor %}
     </wa-radio-group>
   </div>
+  {% endraw %}
 
   <div id="theme-preview" class="wa-stack">
     <header class="wa-stack">
@@ -218,12 +227,15 @@ isPro: true
       border: 1px solid var(--wa-color-surface-border);
       border-radius: var(--border-radius);
       box-shadow: var(--wa-shadow-s);
-      cursor: pointer;
       transition: all 0.2s ease;
       text-align: center;
       font-weight: var(--wa-font-weight-action);
       text-transform: capitalize;
 
+      &:not(:state(disabled)) {
+        cursor: pointer;
+      }
+
       &:state(checked) {
         border-color: var(--wa-color-brand-border-loud);
         background-color: var(--wa-color-brand-fill-quiet);