js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Docs: Add Free Badge (#1696)

Browse Source 
* adding Free Badge macro

* using semantic color value for Pro Badge's `color`

* removing unncessary `border-color` from Pro Badge's custom CSS

* adding `data-pro-badge` attr to Pro Badge

* using freeBadge and proBadge macros in themes.njk
This commit is contained in:
Brian Talbot
2025-11-06 13:12:57 -05:00
committed by GitHub
parent 20628a98eb
commit 3451255454
4 changed files with 29 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/webawesome/docs/_includes/free-badge.njk Normal file
View File

@@ -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))) %}
<wa-badge appearance="filled" variant="neutral" pill class="free" id="{{ badgeId }}" data-free-badge>Free</wa-badge>
<wa-tooltip for="{{ badgeId }}">{{ description }}</wa-tooltip>
{% endmacro %}

2
packages/webawesome/docs/_includes/pro-badge.njk
View File

@@ -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))) %}
<wa-badge appearance="accent" pill class="pro" id="{{ badgeId }}">Pro</wa-badge>
<wa-badge appearance="accent" pill class="pro" id="{{ badgeId }}" data-pro-badge>Pro</wa-badge>
<wa-tooltip for="{{ badgeId }}">{{ description }}</wa-tooltip>
{% endmacro %}

11
packages/webawesome/docs/assets/styles/utils.css
View File

@@ -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);

16
packages/webawesome/docs/docs/themes.njk
View File

@@ -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 %}
<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>
@@ -64,8 +67,9 @@ to create a project with any one of these themes.
<header class="wa-stack">
<div class="wa-cluster">
<h2 data-theme-name="name">Theme</h2>
<wa-badge data-free-badge appearance="outlined" variant="neutral" hidden>FREE</wa-badge>
<wa-badge data-pro-badge appearance="accent" hidden>PRO</wa-badge>
{{ 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." }) }}
</div>
<p data-theme-description>Description</p>
</header>
@@ -162,8 +166,12 @@ Then apply the following classes to the `<html>` 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