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

fix themes + palettes

Browse Source
This commit is contained in:
Cory LaViska
2025-07-02 15:39:20 -04:00
parent f63001f18e
commit ccd697e423
2 changed files with 97 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/webawesome/docs/docs/resources/changelog.md
View File

@@ -14,6 +14,10 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
- Added `.wa-hover-rows` to native styles to opt-in to highlighting table rows on hover.
### Bug Fixes and Improvements {data-no-outline}
- Fixed the themes page so it shows the correct palette and imports
## 3.0.0-beta.1
We're excited to share the first beta release of Web Awesome, which includes some breaking changes that make the library significantly more intuitive and consistent!

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

@@ -4,97 +4,98 @@ description: Themes galore
layout: page
---
<div class="wa-stack wa-gap-3xl">
<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>
<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>
<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 %}
<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 %}
<wa-radio-group id="theme-picker" label="Theme Selector" value="default" orientation="horizontal">
{% for theme in themer.themes %}
{% if not theme.isPro %}
<wa-radio
class="theme-card"
value="{{ theme.filename | stripExtension }}"
data-description="{{ theme.description }}"
data-title="{{ theme.name }}"
data-palette="{{ theme.palette.filename | stripExtension}}"
{% if theme.isPro %}data-is-pro{% endif %}
>
{{ theme.name }}
</wa-radio>
{% else %}
{% raw %}
{% if currentUser.hasPro %}
{% endraw %}
<wa-radio
class="theme-card"
value="{{ theme.filename | stripExtension }}"
data-description="{{ theme.description }}"
data-title="{{ theme.name }}"
data-palette="{{ theme.palette.filename | stripExtension}}"
{% if theme.isPro %}data-is-pro{% endif %}
>
{{ theme.name }}
</wa-radio>
{% else %}
{% raw %}
{% if currentUser.hasPro %}
{% endraw %}
<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>
{% raw %}
{% endif %}
{% endraw %}
{% endif %}
{% endfor %}
</wa-radio-group>
</div>
<div id="theme-preview" class="wa-stack">
<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>
</div>
<p data-theme-description>Description</p>
</header>
<wa-comparison position="80">
<wa-zoomable-frame
src="/examples/themes/showcase?color-scheme=dark"
slot="before"
without-controls
without-interaction
></wa-zoomable-frame>
<wa-zoomable-frame
src="/examples/themes/showcase"
slot="after"
without-controls
without-interaction
></wa-zoomable-frame>
</wa-comparison>
</div>
<h2>Using This Theme</h2>
<div id="import-code">
{% for theme in themer.themes %}
<div class="theme-instructions" data-theme="{{ theme.filename | stripExtension }}" {% if not loop.first %}hidden{% endif %}>
<p>
To import this theme, set <code>&lt;html class=&quot;wa-theme-{{ theme.filename | stripExtension }}&quot;&gt;</code> and import the following stylesheet:
</p>
<pre><code class="language-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;{% cdnUrl %}styles/themes/{{ theme.filename }}&quot; /&gt;</code></pre>
</div>
{% raw %}
{% endif %}
{% endraw %}
{% endif %}
{% endfor %}
</div>
</wa-radio-group>
</div>
<div id="theme-preview" class="wa-stack">
<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>
</div>
<p data-theme-description>Description</p>
</header>
<wa-comparison position="80">
<wa-zoomable-frame
src="/examples/themes/showcase?color-scheme=dark"
slot="before"
without-controls
without-interaction
></wa-zoomable-frame>
<wa-zoomable-frame
src="/examples/themes/showcase"
slot="after"
without-controls
without-interaction
></wa-zoomable-frame>
</wa-comparison>
</div>
<h2>Using This Theme</h2>
<div id="import-code">
{% for theme in themer.themes %}
<div class="theme-instructions" data-theme="{{ theme.filename | stripExtension }}" {% if not loop.first %}hidden{% endif %}>
<p>
To import this theme, apply the following classes to the <code>&lt;html&gt;</code> element and import the theme's stylesheet.
</p>
<pre><code class="language-html">&lt;html class=&quot;wa-theme-{{ theme.filename | stripExtension }} wa-palette-{{ theme.palette.filename | stripExtension }}&quot;&gt;
...
&lt;link rel=&quot;stylesheet&quot; href=&quot;{% cdnUrl %}styles/themes/{{ theme.filename }}&quot; /&gt;</code></pre>
</div>
{% endfor %}
</div>
<script type="module">
import { doViewTransition } from '/assets/scripts/view-transitions.js';
@@ -106,23 +107,24 @@ layout: page
const freeBadge = document.querySelector('[data-free-badge]');
const proBadge = document.querySelector('[data-pro-badge]');
function updateFrames(selectedValue, title, description, isPro) {
function updateFrames(selectedValue, title, description, isPro, palette) {
// Update theme classes on both frames
[afterFrame, beforeFrame].forEach(frame => {
if (frame.contentDocument) {
const html = frame.contentDocument.documentElement;
if (!html) return;
// Remove all existing wa-theme-* classes
html.classList.forEach(className => {
if (className.startsWith('wa-theme-')) {
// Remove all existing wa-theme-* and wa-palette-* classes
[...html.classList].forEach(className => {
if (className.startsWith('wa-theme-') || className.startsWith('wa-palette-')) {
html.classList.remove(className);
}
});
// Add new theme class if not default
// Add new theme and palette class
if (selectedValue !== 'default') {
html.classList.add(`wa-theme-${selectedValue}`);
html.classList.add(`wa-palette-${palette}`);
}
}
});
@@ -150,8 +152,9 @@ layout: page
defaultRadio.checked = true;
const title = defaultRadio.getAttribute('data-title');
const description = defaultRadio.getAttribute('data-description');
const palette = defaultRadio.getAttribute('data-palette');
const isPro = defaultRadio.hasAttribute('data-is-pro');
updateFrames('default', title, description, isPro);
updateFrames('default', title, description, isPro, palette);
}
// Listen for radio changes
@@ -159,9 +162,10 @@ layout: page
const selectedRadio = event.target.querySelector(':state(checked)');
const title = selectedRadio.getAttribute('data-title');
const description = selectedRadio.getAttribute('data-description');
const palette = selectedRadio.getAttribute('data-palette');
const isPro = selectedRadio.hasAttribute('data-is-pro');
doViewTransition(() => {
updateFrames(selectedRadio.value, title, description, isPro);
updateFrames(selectedRadio.value, title, description, isPro, palette);
});
});
</script>
@@ -171,6 +175,11 @@ layout: page
display: none !important;
}
#theme-preview,
#using-this-theme {
margin-block-start: var(--wa-space-3xl);
}
.title {
display: none;
}