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

Preview theme with different palettes

Browse Source
This commit is contained in:
Lea Verou
2025-01-14 17:08:06 -05:00
parent 1ad43b3b7d
commit be3b595e99
4 changed files with 77 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
docs/_includes/palette.njk Normal file
View File

@@ -0,0 +1,41 @@
<div class="color-palette">
<template shadowrootmode="open">
<link href="/assets/styles/docs.css" rel="stylesheet" />
<link id="theme" href="/dist/styles/themes/{{ themeId }}.css" rel="stylesheet" />
<link id="palette" href="/dist/styles/color/{{ palette }}.css" rel="stylesheet" />
<ul class="color-group">
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-brand-fill-loud)"></div>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-neutral-fill-loud)"></div>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-success-fill-loud)"></div>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-warning-fill-loud)"></div>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-danger-fill-loud)"></div>
</li>
</ul>
<ul class="color-group">
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-brand-fill-normal)"></div>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-neutral-fill-normal)"></div>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-success-fill-normal)"></div>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-warning-fill-normal)"></div>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-danger-fill-normal)"></div>
</li>
</ul>
</template>
</div>

62
docs/_layouts/theme.njk
View File

@@ -4,52 +4,24 @@
{% extends '../_includes/base.njk' %}
{% block header %}
<iframe src='{{ page.url }}demo.html'></iframe>
{% set themeId = page.fileSlug %}
{% set palette = defaultPalette %}
{% set palettes = ['default', 'classic', 'rudimentary', 'bright', 'anodized', 'elegant', 'vogue'] %}
{% block header %}
<iframe id="theme-demo" src='{{ page.url }}demo.html'></iframe>
<p>
<wa-select label="Color palette:" value="{{ defaultPalette }}" id="palette-picker">
{% for p in palettes -%}
<wa-option value="{{ p }}">{{ p | capitalize }}</wa-option>
{%- endfor %}
</wa-select>
<script type="module" src="/docs/themes/palette-picker.js"></script>
</p>
{% include 'palette.njk' %}
<div>
<template shadowrootmode="open">
<link href="/assets/styles/docs.css" rel="stylesheet" />
<link id="palette" href="/dist/styles/themes/{{ page.fileSlug }}.css" rel="stylesheet" />
<link id="palette" href="/dist/styles/color/{{ defaultPalette }}.css" rel="stylesheet" />
<slot></slot>
<ul class="color-group">
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-brand-fill-loud)"></div>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-neutral-fill-loud)"></div>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-success-fill-loud)"></div>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-warning-fill-loud)"></div>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-danger-fill-loud)"></div>
</li>
</ul>
<ul class="color-group">
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-brand-fill-normal)"></div>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-neutral-fill-normal)"></div>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-success-fill-normal)"></div>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-warning-fill-normal)"></div>
</li>
<li class="color-preview">
<div class="swatch" style="background-color: var(--wa-color-danger-fill-normal)"></div>
</li>
</ul>
</template>
<p>Color palette: <strong>{{ defaultPalette | capitalize }}</strong></p>
</div>
<br>
{% endblock %}

2
docs/docs/themes/demo.njk vendored
View File

@@ -17,7 +17,7 @@ eleventyComputed:
document.getElementById('theme-stylesheet').href = '/dist/styles/themes/{{ theme.fileSlug }}.css';
</script>
<link rel="stylesheet" href="/dist/styles/themes/{{ theme.fileSlug }}.css" />
<link id="theme" rel="stylesheet" href="/dist/styles/themes/{{ theme.fileSlug }}.css" />
<link rel="stylesheet" href="/docs/themes/showcase.css" />
{% set content %}

18
docs/docs/themes/palette-picker.js vendored Normal file
View File

@@ -0,0 +1,18 @@
let palettePicker = document.getElementById('palette-picker');
let paletteDisplay = palettePicker.parentNode.nextElementSibling;
let themeDemo = document.getElementById('theme-demo');
palettePicker.addEventListener('wa-change', function () {
let palette = palettePicker.value;
let paletteStylesheet = paletteDisplay.shadowRoot.getElementById('palette');
paletteStylesheet.href = paletteStylesheet.href.replace(/[a-z-]+.css/, palette + '.css');
let demoPaletteStylesheet = themeDemo.contentDocument.getElementById('palette');
let paletteUrl = `/dist/styles/color/${palette}.css`;
if (demoPaletteStylesheet) {
demoPaletteStylesheet.href = paletteUrl;
} else {
let themeStylesheet = themeDemo.contentDocument.getElementById('theme');
themeStylesheet.insertAdjacentHTML('afterend', `<link id="palette" rel="stylesheet" href="${paletteUrl}">`);
}
});