diff --git a/packages/webawesome/docs/_includes/free-badge.njk b/packages/webawesome/docs/_includes/free-badge.njk
new file mode 100644
index 000000000..5ec8823f8
--- /dev/null
+++ b/packages/webawesome/docs/_includes/free-badge.njk
@@ -0,0 +1,7 @@
+{% macro freeBadge(params) %}
+ {% set description = params.description or "This feature is available in the free version of Web Awesome" %}
+ {% set badgeId = params.id or ("free-badge-" + ("" | uniqueId(8))) %}
+ Free
+ {{ description }}
+{% endmacro %}
+
diff --git a/packages/webawesome/docs/_includes/pro-badge.njk b/packages/webawesome/docs/_includes/pro-badge.njk
index d67d37372..6c5b782db 100644
--- a/packages/webawesome/docs/_includes/pro-badge.njk
+++ b/packages/webawesome/docs/_includes/pro-badge.njk
@@ -1,6 +1,6 @@
{% macro proBadge(params) %}
{% set description = params.description or "This requires access to Web Awesome Pro" %}
{% set badgeId = params.id or ("pro-badge-" + ("" | uniqueId(8))) %}
- Pro
+ Pro
{{ description }}
{% endmacro %}
diff --git a/packages/webawesome/docs/assets/styles/utils.css b/packages/webawesome/docs/assets/styles/utils.css
index 2fe92fb0b..deb71148e 100644
--- a/packages/webawesome/docs/assets/styles/utils.css
+++ b/packages/webawesome/docs/assets/styles/utils.css
@@ -70,9 +70,8 @@
/* #region shared UI */
/* pro badge */
wa-badge.pro {
- color: white;
+ color: var(--wa-color-brand-on-loud);
background-color: var(--wa-brand-orange);
- border-color: var(--wa-brand-orange);
+ wa-tooltip {
font-size: var(--wa-font-size-xs);
@@ -80,6 +79,14 @@
}
}
+ /* free badge */
+ wa-badge.free {
+ + wa-tooltip {
+ font-size: var(--wa-font-size-xs);
+ --max-width: unset;
+ }
+ }
+
/* planned badge */
wa-badge.planned {
background-color: var(--wa-color-neutral-fill-quiet);
diff --git a/packages/webawesome/docs/docs/themes.njk b/packages/webawesome/docs/docs/themes.njk
index be6e20eae..103ecdb14 100644
--- a/packages/webawesome/docs/docs/themes.njk
+++ b/packages/webawesome/docs/docs/themes.njk
@@ -4,6 +4,9 @@ description: Style (and restyle) your website at will with any of Web Awesome's
layout: page
---
+{% from "pro-badge.njk" import proBadge %}
+{% from "free-badge.njk" import freeBadge %}
+
{{ title }}
Themes are collections of design tokens 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.
@@ -64,8 +67,9 @@ to create a project with any one of these themes.
Theme
- FREE
- PRO
+ {{ freeBadge({ id: "free-badge", description: "This theme is available in the free version of Web Awesome." }) }}
+ {{ proBadge({ id: "pro-badge", description: "This theme requires access to Web Awesome Pro." }) }}
+
Description
@@ -162,8 +166,12 @@ Then apply the following classes to the `` element:
const beforeFrame = document.querySelector('wa-zoomable-frame[slot="before"]');
const nameElement = document.querySelector('[data-theme-name]');
const descriptionElement = document.querySelector('[data-theme-description]');
- const freeBadge = document.querySelector('[data-free-badge]');
- const proBadge = document.querySelector('[data-pro-badge]');
+ const freeBadge = document.getElementById('free-badge');
+ const proBadge = document.getElementById('pro-badge');
+
+ // Hide both badges initially
+ if (freeBadge) freeBadge.hidden = true;
+ if (proBadge) proBadge.hidden = true;
function updateFrames(selectedValue, title, description, isPro, palette, brand) {
// Update theme classes on both frames