mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-19 07:29:14 +00:00
Compare commits
1 Commits
styling-at
...
kj/selecto
| Author | SHA1 | Date | |
|---|---|---|---|
|
e3dbe8c3f9 |
2
.github/workflows/client_tests.js.yml
vendored
2
.github/workflows/client_tests.js.yml
vendored
@@ -31,7 +31,7 @@ jobs:
|
||||
- name: Lint
|
||||
run: npm run prettier
|
||||
- name: Build
|
||||
run: npm run build:alpha
|
||||
run: npm run build
|
||||
- name: Install Playwright
|
||||
run: npx playwright install --with-deps
|
||||
- name: Run CSR tests
|
||||
|
||||
2
.github/workflows/ssr_tests.js.yml
vendored
2
.github/workflows/ssr_tests.js.yml
vendored
@@ -30,7 +30,7 @@ jobs:
|
||||
run: npm run prettier
|
||||
|
||||
- name: Build
|
||||
run: npm run build:alpha
|
||||
run: npm run build
|
||||
|
||||
- name: Install Playwright
|
||||
run: npx playwright install --with-deps
|
||||
|
||||
@@ -59,8 +59,6 @@ To generate a production build, run the following command.
|
||||
npm run build
|
||||
```
|
||||
|
||||
You can also run `npm run build:serve` to start an [`http-server`](https://www.npmjs.com/package/http-server) instance on `http://localhost:4000` after the build completes, so you can preview the production build.
|
||||
|
||||
### Creating New Components
|
||||
|
||||
To scaffold a new component, run the following command, replacing `wa-tag-name` with the desired tag name.
|
||||
|
||||
@@ -20,15 +20,6 @@ const packageData = JSON.parse(await readFile('./package.json', 'utf-8'));
|
||||
const isAlpha = process.argv.includes('--alpha');
|
||||
const isDev = process.argv.includes('--develop');
|
||||
|
||||
const globalData = {
|
||||
package: packageData,
|
||||
isAlpha,
|
||||
layout: 'page.njk',
|
||||
};
|
||||
|
||||
const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
|
||||
const passThrough = [...passThroughExtensions.map(ext => 'docs/**/*.' + ext)];
|
||||
|
||||
export default function (eleventyConfig) {
|
||||
// NOTE - alpha setting removes certain pages
|
||||
if (isAlpha) {
|
||||
@@ -41,9 +32,8 @@ export default function (eleventyConfig) {
|
||||
}
|
||||
|
||||
// Add template data
|
||||
for (let name in globalData) {
|
||||
eleventyConfig.addGlobalData(name, globalData[name]);
|
||||
}
|
||||
eleventyConfig.addGlobalData('package', packageData);
|
||||
eleventyConfig.addGlobalData('isAlpha', isAlpha);
|
||||
|
||||
// Template filters - {{ content | filter }}
|
||||
eleventyConfig.addFilter('inlineMarkdown', content => markdown.renderInline(content || ''));
|
||||
@@ -58,9 +48,6 @@ export default function (eleventyConfig) {
|
||||
return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + location.replace(/^\//, '');
|
||||
});
|
||||
|
||||
// Paired shortcodes - {% shortCode %}content{% endShortCode %}
|
||||
eleventyConfig.addPairedShortcode('markdown', content => markdown.render(content || ''));
|
||||
|
||||
// Helpers
|
||||
|
||||
// Remove elements that have [data-alpha="remove"]
|
||||
@@ -158,18 +145,9 @@ export default function (eleventyConfig) {
|
||||
// eleventyConfig.addPlugin(formatCodePlugin());
|
||||
// }
|
||||
|
||||
eleventyConfig.addPassthroughCopy({
|
||||
'docs/assets': 'assets',
|
||||
});
|
||||
|
||||
for (let glob of passThrough) {
|
||||
eleventyConfig.addPassthroughCopy(glob);
|
||||
}
|
||||
|
||||
return {
|
||||
markdownTemplateEngine: 'njk',
|
||||
dir: {
|
||||
input: 'docs',
|
||||
includes: '_includes',
|
||||
layouts: '_layouts',
|
||||
},
|
||||
|
||||
@@ -31,25 +31,13 @@ const components = manifest.modules.flatMap(module => {
|
||||
return prop.kind === 'field' && prop.privacy !== 'private';
|
||||
});
|
||||
|
||||
let ret = {
|
||||
return {
|
||||
...declaration,
|
||||
slug: declaration.tagName.replace(/^wa-/, ''),
|
||||
methods,
|
||||
attributes,
|
||||
properties,
|
||||
};
|
||||
|
||||
// Add named keys to these arrays
|
||||
for (let thing of ['methods', 'attributes', 'properties', 'cssProperties', 'cssParts', 'cssStates', 'events']) {
|
||||
if (ret[thing]) {
|
||||
ret[thing] = ret[thing].reduce((acc, item) => {
|
||||
acc[item.name] = item;
|
||||
return acc;
|
||||
}, ret[thing]);
|
||||
}
|
||||
}
|
||||
|
||||
return ret;
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
98
docs/_includes/base-wide.njk
Normal file
98
docs/_includes/base-wide.njk
Normal file
File diff suppressed because one or more lines are too long
@@ -1,25 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
|
||||
<head>
|
||||
{% include 'head.njk' %}
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="{{ description }}">
|
||||
<meta name="theme-color" content="#f36944">
|
||||
{% if noindex %}<meta name="robots" content="noindex">{% endif %}
|
||||
|
||||
<title>{{ title }}</title>
|
||||
|
||||
<link rel="icon" href="/assets/images/webawesome-logo.svg" />
|
||||
<link rel="apple-touch-icon" href="/assets/images/app-icon.png">
|
||||
|
||||
{# Scripts #}
|
||||
{# Hydration stuff #}
|
||||
<script src="/assets/scripts/hydration-errors.js"></script>
|
||||
<link rel="stylesheet" href="/assets/styles/hydration-errors.css">
|
||||
<link rel="preconnect" href="https://cdn.jsdelivr.net">
|
||||
<script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm"></script>
|
||||
|
||||
<script type="module" src="/assets/scripts/code-examples.js"></script>
|
||||
<script type="module" src="/assets/scripts/color-scheme.js"></script>
|
||||
<script type="module" src="/assets/scripts/copy-code.js"></script>
|
||||
|
||||
<script type="module" src="/assets/scripts/preset-theme.js"></script>
|
||||
<script type="module" src="/assets/scripts/scroll.js"></script>
|
||||
<script type="module" src="/assets/scripts/turbo.js"></script>
|
||||
<script type="module" src="/assets/scripts/search.js"></script>
|
||||
<script type="module" src="/assets/scripts/outline.js"></script>
|
||||
<script defer data-domain="backers.webawesome.com" src="https://plausible.io/js/script.js"></script>
|
||||
|
||||
{# Web Awesome #}
|
||||
<script type="module" src="/dist/webawesome.ssr-loader.js"></script>
|
||||
<link rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/default.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
|
||||
<link id="color-stylesheet" rel="stylesheet" href="/dist/styles/utilities.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/forms.css" />
|
||||
|
||||
{# Docs styles #}
|
||||
<link rel="stylesheet" href="/assets/styles/docs.css" />
|
||||
|
||||
{# Set the theme to prevent flashing #}
|
||||
<script>
|
||||
function getColorScheme() {
|
||||
return localStorage.getItem('colorScheme') || 'auto';
|
||||
}
|
||||
|
||||
function getPresetTheme () {
|
||||
return localStorage.getItem('presetTheme') || 'default';
|
||||
}
|
||||
|
||||
function isDark() {
|
||||
const colorScheme = getColorScheme()
|
||||
if (colorScheme === 'auto') {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
}
|
||||
return colorScheme === 'dark';
|
||||
}
|
||||
|
||||
const oldStylesheet = document.querySelector("#theme-stylesheet")
|
||||
|
||||
const newStylesheet = document.createElement("link")
|
||||
|
||||
let preset = getPresetTheme()
|
||||
newStylesheet.href = `/dist/styles/themes/${preset}.css`
|
||||
newStylesheet.rel = "preload"
|
||||
newStylesheet.as = "style"
|
||||
|
||||
document.head.append(newStylesheet)
|
||||
|
||||
function updateStylesheet () {
|
||||
newStylesheet.rel = "stylesheet"
|
||||
newStylesheet.id = "theme-stylesheet"
|
||||
requestAnimationFrame(() => oldStylesheet.remove())
|
||||
}
|
||||
|
||||
newStylesheet.addEventListener("load", updateStylesheet)
|
||||
|
||||
document.documentElement.classList.toggle(
|
||||
`wa-theme-${preset}-dark`,
|
||||
isDark()
|
||||
);
|
||||
</script>
|
||||
</head>
|
||||
<body class="layout-{{ layout | stripExtension }}">
|
||||
<!-- use view="desktop" as default to reduce layout jank on desktop site. -->
|
||||
<wa-page view="desktop" disable-navigation-toggle="">
|
||||
<header slot="header" class="wa-split">
|
||||
<header slot="header">
|
||||
{# Logo #}
|
||||
<div id="docs-branding">
|
||||
{# Nav toggle #}
|
||||
@@ -35,9 +101,9 @@
|
||||
<wa-badge variant="warning" appearance="filled" class="only-desktop">Alpha</wa-badge>
|
||||
</div>
|
||||
|
||||
<div id="docs-toolbar" class="wa-cluster wa-gap-xs">
|
||||
<div id="docs-toolbar">
|
||||
{# Desktop selectors #}
|
||||
<div class="only-desktop wa-cluster wa-gap-xs">
|
||||
<div class="only-desktop">
|
||||
{% include "preset-theme-selector.njk" %}
|
||||
{% include "color-scheme-selector.njk" %}
|
||||
</div>
|
||||
@@ -55,7 +121,7 @@
|
||||
{% if hasSidebar %}
|
||||
{# Mobile selectors #}
|
||||
<div class="wa-mobile-only" slot="navigation-header">
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));">
|
||||
{% include "preset-theme-selector.njk" %}
|
||||
{% include "color-scheme-selector.njk" %}
|
||||
</div>
|
||||
@@ -83,14 +149,22 @@
|
||||
</details>
|
||||
</nav>
|
||||
|
||||
{% set breadcrumbs = page.url | breadcrumbs %}
|
||||
{% if breadcrumbs.length > 0 %}
|
||||
<wa-breadcrumb id="docs-breadcrumbs">
|
||||
{% for crumb in breadcrumbs %}
|
||||
<wa-breadcrumb-item href="{{ crumb.url }}">{{ crumb.title }}</wa-breadcrumb-item>
|
||||
{% endfor %}
|
||||
<wa-breadcrumb-item>{# Current page #}</wa-breadcrumb-item>
|
||||
</wa-breadcrumb>
|
||||
{% else %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% block header %}
|
||||
{% include 'breadcrumbs.njk' %}
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
{% endblock %}
|
||||
{% block beforeContent %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
|
||||
{{ content | safe }}
|
||||
{% endblock %}
|
||||
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
{% set breadcrumbs = page.url | breadcrumbs %}
|
||||
{% if breadcrumbs.length > 0 %}
|
||||
<wa-breadcrumb id="docs-breadcrumbs">
|
||||
{% for crumb in breadcrumbs %}
|
||||
<wa-breadcrumb-item href="{{ crumb.url }}">{{ crumb.title }}</wa-breadcrumb-item>
|
||||
{% endfor %}
|
||||
<wa-breadcrumb-item>{# Current page #}</wa-breadcrumb-item>
|
||||
</wa-breadcrumb>
|
||||
{% else %}
|
||||
{% endif %}
|
||||
@@ -1,19 +1,15 @@
|
||||
{# Color scheme selector #}
|
||||
<wa-select class="color-scheme-selector" appearance="filled" size="small" value="auto" pill title="Press \ to toggle">
|
||||
<wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
|
||||
<wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
|
||||
<wa-option value="light">
|
||||
<wa-icon slot="prefix" name="sun" variant="regular"></wa-icon>
|
||||
Light
|
||||
</wa-option>
|
||||
<wa-option value="dark">
|
||||
<wa-icon slot="prefix" name="moon" variant="regular"></wa-icon>
|
||||
Dark
|
||||
</wa-option>
|
||||
<wa-divider></wa-divider>
|
||||
<wa-option value="auto">
|
||||
<wa-dropdown id="color-scheme-selector">
|
||||
<wa-button slot="trigger" appearance="filled" size="small" pill caret title="Press \ to toggle">
|
||||
<wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
|
||||
<wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
|
||||
System
|
||||
</wa-option>
|
||||
</wa-select>
|
||||
<span class="only-light">Light</span>
|
||||
<span class="only-dark">Dark</span>
|
||||
</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item type="checkbox" value="light">Light</wa-menu-item>
|
||||
<wa-menu-item type="checkbox" value="dark">Dark</wa-menu-item>
|
||||
<wa-divider></wa-divider>
|
||||
<wa-menu-item type="checkbox" value="auto">System</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
|
||||
@@ -4,9 +4,10 @@
|
||||
{% for category, pages in allPages | groupByTags(categories) -%}
|
||||
<h2 class="index-category">{{ category | getCategoryTitle(categories) }}</h2>
|
||||
{%- for page in pages -%}
|
||||
{%- if not page.data.parent or listChildren -%}
|
||||
{%- if not page.data.unlisted and not page.data.parent -%}
|
||||
{% include "page-card.njk" %}
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
{%- endfor -%}
|
||||
</section>
|
||||
|
||||
|
||||
@@ -1,53 +0,0 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="{{ description }}">
|
||||
{% if noindex %}<meta name="robots" content="noindex">{% endif %}
|
||||
|
||||
<title>{{ title }}</title>
|
||||
|
||||
{# Dark mode #}
|
||||
<script>
|
||||
let colorScheme = localStorage.colorScheme;
|
||||
let isDark = localStorage.colorScheme === "dark";
|
||||
if (!colorScheme || colorScheme === "auto") {
|
||||
isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
}
|
||||
document.documentElement.classList.toggle('wa-dark', isDark);
|
||||
</script>
|
||||
|
||||
<link rel="icon" href="/assets/images/webawesome-logo.svg" />
|
||||
<link rel="apple-touch-icon" href="/assets/images/app-icon.png">
|
||||
|
||||
{# Scripts #}
|
||||
{# Hydration stuff #}
|
||||
<script src="/assets/scripts/hydration-errors.js"></script>
|
||||
<link rel="stylesheet" href="/assets/styles/hydration-errors.css">
|
||||
<link rel="preconnect" href="https://cdn.jsdelivr.net">
|
||||
<script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm"></script>
|
||||
|
||||
{# Web Awesome #}
|
||||
<script type="module" src="/dist/webawesome.ssr-loader.js"></script>
|
||||
|
||||
<script type="module" src="/assets/scripts/theme-picker.js"></script>
|
||||
{# Preset Theme #}
|
||||
<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/{{ forceTheme or 'default' }}.css" render="blocking" fetchpriority="high" />
|
||||
{% if not forceTheme %}
|
||||
<script>
|
||||
if (localStorage.presetTheme) {
|
||||
let preset = localStorage.presetTheme;
|
||||
let script = document.currentScript;
|
||||
let link = script.previousElementSibling;
|
||||
let newLink = link.cloneNode();
|
||||
newLink.href = link.href.replace("/default.css", `/${preset}.css`);
|
||||
newLink.addEventListener('load', () => {
|
||||
link.remove();
|
||||
});
|
||||
link.after(newLink);
|
||||
}
|
||||
</script>
|
||||
<script type="module" src="/assets/scripts/preset-theme-picker.js"></script>
|
||||
{% endif %}
|
||||
|
||||
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
|
||||
<link id="color-stylesheet" rel="stylesheet" href="/dist/styles/utilities.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/forms.css" />
|
||||
@@ -1,5 +1,4 @@
|
||||
{%- if not page.data.unlisted -%}
|
||||
<a href="{{ page.url }}"{{ page.data.keywords | attr('data-keywords') }}>
|
||||
<a href="{{ page.url }}" data-keywords="{{ page.data.keywords }}">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" %}
|
||||
@@ -7,4 +6,3 @@
|
||||
<span class="page-name">{{ page.data.title }}</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<div id="page_slots_demo">
|
||||
<link rel="stylesheet" href="./demo.css">
|
||||
<link rel="stylesheet" href="/assets/examples/page-demo/demo.css">
|
||||
{% set slots = components.page.slots %}
|
||||
|
||||
<fieldset id="page_slots_fieldset">
|
||||
@@ -22,5 +22,5 @@
|
||||
|
||||
<script type="module">
|
||||
const cacheBust = new Date().toString()
|
||||
import(`./demo.js?${cacheBust}`)
|
||||
import(`/assets/examples/page-demo/demo.js?${cacheBust}`)
|
||||
</script>
|
||||
|
||||
@@ -1,9 +1,18 @@
|
||||
{# Preset theme selector #}
|
||||
<wa-select appearance="filled" size="small" value="default" pill class="preset-theme-selector">
|
||||
<wa-icon slot="prefix" name="paintbrush" variant="regular"></wa-icon>
|
||||
{% for theme in collections.theme | sort %}
|
||||
<wa-option value="{{ theme.page.fileSlug }}"{{ ' data-alpha="remove"' if theme.noAlpha }}>
|
||||
{{ theme.data.title }}
|
||||
</wa-option>
|
||||
{% endfor %}
|
||||
</wa-select>
|
||||
<wa-dropdown id="preset-theme-selector">
|
||||
<wa-button slot="trigger" appearance="filled" size="small" pill caret>
|
||||
<wa-icon slot="prefix" name="paintbrush" variant="regular"></wa-icon>
|
||||
<span id="preset-theme-selector__text">Default</span>
|
||||
</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item type="checkbox" value="default">Default</wa-menu-item>
|
||||
<wa-menu-item type="checkbox" value="classic">Classic</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="fa">Font Awesome</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="active">Active</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="brutalist">Brutalism</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="glassy">Glassy</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="migration">Migration</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="playful">Playful</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="premium">Premium</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
{# Some collections (like "patterns") will not have any items in the alpha build for example. So this checks to make sure the collection exists. #}
|
||||
{% if collections[tag] -%}
|
||||
<wa-details {{ (tag in (tags or [])) | attr('open') }}>
|
||||
<h2 slot="summary">
|
||||
{% set groupUrl %}/docs/{{ tag }}/{% endset %}
|
||||
{% if groupUrl | getCollectionItemFromUrl %}
|
||||
<a href="{{ groupUrl }}" title="Overview">{{ title or (tag | capitalize) }}
|
||||
<wa-icon name="grid-2"></wa-icon>
|
||||
</a>
|
||||
{% else %}
|
||||
{{ title or (tag | capitalize) }}
|
||||
{% endif %}
|
||||
</h2>
|
||||
<ul>
|
||||
{% for page in collections[tag] | sort %}
|
||||
{% if not page.data.parent -%}
|
||||
{% include 'sidebar-link.njk' %}
|
||||
{%- endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</wa-details>
|
||||
{%- endif %}
|
||||
@@ -1,16 +0,0 @@
|
||||
{% if not (isAlpha and page.data.noAlpha) and page.fileSlug != tag and not page.data.unlisted -%}
|
||||
<li>
|
||||
<a href="{{ page.url }}">{{ page.data.title }}</a>
|
||||
{% if page.data.status == 'experimental' %}<wa-icon name="flask"></wa-icon>{% endif %}
|
||||
{% if page.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
|
||||
|
||||
{% set children = page.data.children %}
|
||||
{% if children.length > 0 %}
|
||||
<ul>
|
||||
{% for page in children %}
|
||||
{% include 'sidebar-link.njk' %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</li>
|
||||
{%- endif %}
|
||||
@@ -3,6 +3,7 @@
|
||||
<ul>
|
||||
<li><a href="/docs/installation">Installation</a></li>
|
||||
<li><a href="/docs/usage">Usage</a></li>
|
||||
<li><a href="/docs/themes">Themes</a></li>
|
||||
<li><a href="/docs/customizing">Customizing</a></li>
|
||||
<li><a href="/docs/form-controls">Form Controls</a></li>
|
||||
<li><a href="/docs/localization">Localization</a></li>
|
||||
@@ -18,14 +19,121 @@
|
||||
<li><a href="/docs/resources/changelog">Changelog</a></li>
|
||||
</ul>
|
||||
|
||||
{% for tag, title in {
|
||||
'themes': 'Themes',
|
||||
'components': 'Components',
|
||||
'native': 'Native Styles',
|
||||
'utilities': 'Style Utilities',
|
||||
'layout': 'Layout',
|
||||
'patterns': 'Patterns',
|
||||
'theming': 'Theming'
|
||||
} %}
|
||||
{% include 'sidebar-group.njk' %}
|
||||
{# Components #}
|
||||
<wa-details {{ 'open' if '/components/' in page.url }}>
|
||||
<h2 slot=summary>
|
||||
<a href="/docs/components/" title="Overview">Components
|
||||
<wa-icon name="grid-2"></wa-icon>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<ul>
|
||||
{% for component in collections.components | sort %}
|
||||
{% if not component.data.parent and not (isAlpha and component.data.noAlpha) and not component.data.unlisted %}
|
||||
<li>
|
||||
<a href="/docs/components/{{ component.fileSlug }}">{{ component.data.title }}</a>
|
||||
|
||||
{% if components[component.fileSlug].status == 'experimental' %}<wa-icon name="flask"></wa-icon>{% endif %}
|
||||
{% if component.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
|
||||
<ul>
|
||||
{% for child in collections.components | sort %}
|
||||
{% if child.data.parent == component.fileSlug and not (isAlpha and child.data.noAlpha) %}
|
||||
<li>
|
||||
<a href="/docs/components/{{ child.fileSlug }}">{{ child.data.title }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</wa-details>
|
||||
|
||||
<wa-details {{ 'open' if '/native/' in page.url }}>
|
||||
<h2 slot=summary>
|
||||
<a href="/docs/native/" title="Overview">Native Styles
|
||||
<wa-icon name="grid-2"></wa-icon>
|
||||
</a>
|
||||
</h2>
|
||||
<ul>
|
||||
{% for page in collections.native | sort %}
|
||||
{% if page.fileSlug != 'native' and not page.unlisted %}
|
||||
<li>
|
||||
<a href="/docs/native/{{ page.fileSlug }}">{{ page.data.title }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</wa-details>
|
||||
|
||||
<wa-details {{ 'open' if '/utilities/' in page.url }}>
|
||||
<h2 slot=summary>
|
||||
<a href="/docs/utilities/" title="Overview">Style Utilities
|
||||
<wa-icon name="grid-2"></wa-icon>
|
||||
</a>
|
||||
</h2>
|
||||
<ul>
|
||||
{% for page in collections.utilities | sort %}
|
||||
{% if page.fileSlug != 'utilities' and not page.unlisted %}
|
||||
<li>
|
||||
<a href="/docs/utilities/{{ page.fileSlug }}">{{ page.data.title }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</wa-details>
|
||||
|
||||
{# Layout #}
|
||||
<h2>
|
||||
<a href="/docs/layout" title="Overview">Layout
|
||||
<wa-icon name="grid-2"></wa-icon>
|
||||
</a>
|
||||
</h2>
|
||||
<ul>
|
||||
{% for page in collections.layout | sort %}
|
||||
{% if page.fileSlug != 'layout' and not page.unlisted %}
|
||||
<li>
|
||||
<a href="{{ page.url }}">{{ page.data.title }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
{# Patterns #}
|
||||
{% if not isAlpha %}
|
||||
<h2>Patterns</h2>
|
||||
<ul>
|
||||
<li><a href="/docs/patterns/app">Web App</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce">E-commerce</a>
|
||||
<ul>
|
||||
<li><a href="/docs/patterns/ecommerce-product-review">Product Reviews</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-product-list">Product Lists</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-category-preview">Category Previews</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-shopping-cart">Shopping Carts</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-category-filter">Category Filters</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-product-detail">Product Detail</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-order-summary">Order Summaries</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-order-history">Order History</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="/docs/patterns/blog">Blog</a></li>
|
||||
<li><a href="/docs/patterns/news">News</a></li>
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
||||
{# Theming #}
|
||||
<h2>
|
||||
<a href="/docs/theming" title="Overview">Theming
|
||||
<wa-icon name="grid-2"></wa-icon>
|
||||
</a>
|
||||
</h2>
|
||||
<ul>
|
||||
{% for page in collections.theming | sort %}
|
||||
{% if page.fileSlug != 'theming' and not page.unlisted %}
|
||||
<li>
|
||||
<a href="/docs/theming/{{ page.fileSlug }}">{{ page.data.title }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
{% if since -%}
|
||||
<wa-badge variant="neutral">Since {{ since }}</wa-badge>
|
||||
{% endif -%}
|
||||
{%- endif %}
|
||||
|
||||
{%- if status %}
|
||||
{% if status -%}
|
||||
{%- if status == "wip" %}
|
||||
<wa-badge variant="danger">
|
||||
<wa-icon name="pickaxe"></wa-icon>
|
||||
Work In Progress
|
||||
</wa-badge>
|
||||
{%- elif status == "experimental" %}
|
||||
{%- elif status == "experimental" -%}
|
||||
<wa-badge variant="warning">
|
||||
<wa-icon name="flask"></wa-icon>
|
||||
Experimental
|
||||
</wa-badge>
|
||||
{%- elif status == "stable" %}
|
||||
{%- elif status == "stable" -%}
|
||||
<wa-badge variant="brand">Stable</wa-badge>
|
||||
{%- else %}
|
||||
<wa-badge>{{ status}}</wa-badge>
|
||||
{%- endif -%}
|
||||
{%- endif %}
|
||||
{%- endif %}
|
||||
|
||||
{%- if isPro %}
|
||||
{% if isPro -%}
|
||||
<wa-badge class="pro">PRO</wa-badge>
|
||||
{%- endif -%}
|
||||
{%- endif %}
|
||||
|
||||
|
Before Width: | Height: | Size: 337 B After Width: | Height: | Size: 337 B |
@@ -1,144 +0,0 @@
|
||||
<div class="showcase-examples-wrapper" aria-hidden="true" data-no-outline>
|
||||
<div class="showcase-examples">
|
||||
<wa-card with-header with-footer>
|
||||
<div slot="header" class="wa-split">
|
||||
<h3 class="wa-heading-m">Your Cart</h3>
|
||||
<wa-icon-button name="xmark" tabindex="-1"></wa-icon-button>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xl">
|
||||
<div class="wa-flank">
|
||||
<wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-green-60); --text-color: var(--wa-color-green-95);">
|
||||
<wa-icon slot="icon" name="sword-laser" family="duotone" style="font-size: 1.5em;"></wa-icon>
|
||||
</wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<div class="wa-split wa-gap-2xs">
|
||||
<strong>Initiate Saber</strong>
|
||||
<strong>$179.99</strong>
|
||||
</div>
|
||||
<div class="wa-split wa-gap-2xs wa-caption-m">
|
||||
<span>Green</span>
|
||||
<a href="#" tabindex="-1">Remove</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-teal-60); --text-color: var(--wa-color-teal-95);">
|
||||
<wa-icon slot="icon" name="robot-astromech" family="duotone" style="font-size: 1.5em;"></wa-icon>
|
||||
</wa-avatar>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<div class="wa-split wa-gap-2xs">
|
||||
<strong>Repair Droid</strong>
|
||||
<strong>$3,049.99</strong>
|
||||
</div>
|
||||
<div class="wa-split wa-gap-2xs wa-caption-m">
|
||||
<span>R-series</span>
|
||||
<a href="#" tabindex="-1">Remove</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="wa-stack">
|
||||
<div class="wa-split">
|
||||
<strong>Subtotal</strong>
|
||||
<strong>$3,229.98</strong>
|
||||
</div>
|
||||
<span class="wa-caption-m">Shipping and taxes calculated at checkout.</span>
|
||||
<wa-button tabindex="-1" variant="brand">
|
||||
<wa-icon slot="prefix" name="shopping-bag"></wa-icon>
|
||||
Checkout
|
||||
</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<wa-avatar shape="rounded" style="--size: 1.9lh; float: left; margin-right: var(--wa-space-m);">
|
||||
<wa-icon slot="icon" name="hat-wizard" family="duotone" style="font-size: 1.75em;"></wa-icon>
|
||||
</wa-avatar>
|
||||
<p class="wa-body-l" style="margin: 0;">“All we have to decide is what to do with the time that is given to us. There are other forces at work in this world, Frodo, besides the will of evil.”</p>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div class="wa-stack">
|
||||
<h3 class="wa-heading-m">Sign In</h3>
|
||||
<wa-input tabindex="-1" label="Email" placeholder="ddjarin@mandalore.gov">
|
||||
<wa-icon slot="prefix" name="envelope" variant="regular"></wa-icon>
|
||||
</wa-input>
|
||||
<wa-input tabindex="-1" label="Password" type="password">
|
||||
<wa-icon slot="prefix" name="lock" variant="regular"></wa-icon>
|
||||
</wa-input>
|
||||
<wa-button tabindex="-1" variant="brand">Sign In</wa-button>
|
||||
<a href="#" tabindex="-1" class="wa-body-s">I forgot my password</a>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-footer>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split">
|
||||
<h3 class="wa-heading-m">To-Do</h3>
|
||||
<wa-icon-button tabindex="-1" name="plus" label="Add task"></wa-icon-button>
|
||||
</div>
|
||||
<wa-checkbox tabindex="-1" checked>Umbrella for Adelard</wa-checkbox>
|
||||
<wa-checkbox tabindex="-1" checked>Waste-paper basket for Dora</wa-checkbox>
|
||||
<wa-checkbox tabindex="-1" checked>Pen and ink for Milo</wa-checkbox>
|
||||
<wa-checkbox tabindex="-1">Mirror for Angelica</wa-checkbox>
|
||||
<wa-checkbox tabindex="-1">Silver spoons for Lobelia</wa-checkbox>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<a href="" tabindex="-1">View all completed</a>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-frame wa-border-radius-m" style="align-self: center; max-inline-size: 25ch;">
|
||||
<img src="https://images.unsplash.com/photo-1667514627762-521b1c815a89?q=20" alt="Album art">
|
||||
</div>
|
||||
<div class="wa-flank:end wa-align-items-start">
|
||||
<div class="wa-stack wa-gap-3xs">
|
||||
<div class="wa-cluster wa-gap-xs" style="height: 2.25em;">
|
||||
<strong>The Stone Troll</strong>
|
||||
<small><wa-badge variant="neutral" appearance="filled">E</wa-badge></small>
|
||||
</div>
|
||||
<span class="wa-caption-m">Samwise G</span>
|
||||
</div>
|
||||
<wa-icon-button tabindex="-1" name="ellipsis" label="Options"></wa-icon-button>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<wa-progress-bar value="34" style="height: 0.5em"></wa-progress-bar>
|
||||
<div class="wa-split">
|
||||
<span class="wa-caption-xs">1:01</span>
|
||||
<span class="wa-caption-xs">-1:58</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-grid wa-align-items-center" style="--min-column-size: 1em; justify-items: center;">
|
||||
<wa-icon-button tabindex="-1" name="backward" label="Skip backward"></wa-icon-button>
|
||||
<wa-icon-button tabindex="-1" name="pause" style="font-size: var(--wa-font-size-2xl);" label="Pause"></wa-icon-button>
|
||||
<wa-icon-button tabindex="-1" name="forward" label="Skip forward"></wa-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div class="wa-stack">
|
||||
<h3 class="wa-heading-m">Chalmun's Spaceport Cantina</h3>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<wa-rating value="4.6" read-only></wa-rating>
|
||||
<strong>4.6</strong>
|
||||
<span>(419 reviews)</span>
|
||||
</div>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<div class="wa-cluster wa-gap-3xs">
|
||||
<wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
|
||||
<wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
|
||||
<wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
|
||||
</div>
|
||||
<span class="wa-caption-m">•</span>
|
||||
<wa-tag size="small">Cocktail Bar</wa-tag>
|
||||
<wa-tag size="small">Gastropub</wa-tag>
|
||||
<wa-tag size="small">Local Fare</wa-tag>
|
||||
<wa-tag size="small">Gluten Free</wa-tag>
|
||||
</div>
|
||||
<div class="wa-flank wa-gap-xs">
|
||||
<wa-icon name="location-dot"></wa-icon>
|
||||
<a href="#" class="wa-caption-m" tabindex="-1">Mos Eisley, Tatooine</a>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,11 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
|
||||
<head>
|
||||
{% include 'head.njk' %}
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="{{ description }}">
|
||||
{% if noindex %}<meta name="robots" content="noindex">{% endif %}
|
||||
|
||||
<title>{{ title }}</title>
|
||||
|
||||
<link rel="icon" href="/assets/images/webawesome-logo.svg" />
|
||||
<link rel="apple-touch-icon" href="/assets/images/app-icon.png">
|
||||
|
||||
{# Scripts #}
|
||||
{# Hydration stuff #}
|
||||
<script src="/assets/scripts/hydration-errors.js"></script>
|
||||
<link rel="stylesheet" href="/assets/styles/hydration-errors.css">
|
||||
<link rel="preconnect" href="https://cdn.jsdelivr.net">
|
||||
<script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm"></script>
|
||||
|
||||
{# Web Awesome #}
|
||||
<script type="module" src="/dist/webawesome.ssr-loader.js"></script>
|
||||
<link rel="stylesheet" id="theme-stylesheet" />
|
||||
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
|
||||
<link id="color-stylesheet" rel="stylesheet" href="/dist/styles/utilities.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/forms.css" />
|
||||
|
||||
{# Set the theme to prevent flashing #}
|
||||
<script>
|
||||
function getColorScheme() {
|
||||
return localStorage.getItem('colorScheme') || 'auto';
|
||||
}
|
||||
|
||||
function getPresetTheme () {
|
||||
return localStorage.getItem('presetTheme') || 'default';
|
||||
}
|
||||
|
||||
function isDark() {
|
||||
const colorScheme = getColorScheme()
|
||||
if (colorScheme === 'auto') {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
}
|
||||
return colorScheme === 'dark';
|
||||
}
|
||||
|
||||
const stylesheet = document.getElementById("theme-stylesheet")
|
||||
let preset = getPresetTheme()
|
||||
|
||||
stylesheet.href = `/dist/styles/themes/${preset}.css`
|
||||
|
||||
document.documentElement.classList.toggle(
|
||||
`wa-theme-${preset}-dark`,
|
||||
isDark()
|
||||
);
|
||||
</script>
|
||||
</head>
|
||||
<body class="layout-{{ layout | stripExtension }}">
|
||||
|
||||
{% block header %}{% endblock %}
|
||||
{% block beforeContent %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{{ content | safe }}
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
{% set hasSidebar = true %}
|
||||
{% set hasOutline = true %}
|
||||
|
||||
{% extends '../_includes/base.njk' %}
|
||||
|
||||
{# Component header #}
|
||||
{% block header %}
|
||||
{% include 'breadcrumbs.njk' %}
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
<div class="block-info">
|
||||
{% set snippets = (elements or element or snippets or snippet) | dict %}
|
||||
|
||||
{% for snippet, link in snippets %}
|
||||
{% if snippet %}
|
||||
<code class="class">
|
||||
{%- if link -%}
|
||||
<a href="{{ link }}">{{ snippet }}</a>
|
||||
{%- else -%}
|
||||
{{ snippet }}
|
||||
{%- endif-%}
|
||||
</code>
|
||||
{%- endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% include '../_includes/status.njk' %}
|
||||
</div>
|
||||
{% if description %}
|
||||
<p class="summary">
|
||||
{{ description | inlineMarkdown | safe }}
|
||||
</p>
|
||||
{% endif %}
|
||||
{% block notes %}{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
{# Content #}
|
||||
{% block content %}
|
||||
{{ content | safe }}
|
||||
{% endblock %}
|
||||
@@ -1,8 +1,23 @@
|
||||
{% extends '../_layouts/block.njk' %}
|
||||
{% set hasSidebar = true %}
|
||||
{% set hasOutline = true %}
|
||||
{% set component = components[page.fileSlug] %}
|
||||
{% set description = component.summary %}
|
||||
{% set status = component.status %}
|
||||
{% set since = component.since %}
|
||||
|
||||
{% extends '../_includes/base.njk' %}
|
||||
|
||||
{# Component header #}
|
||||
{% block notes %}
|
||||
{% block beforeContent %}
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
<div class="component-info">
|
||||
<code class="tag"><{{ component.tagName }}></code>
|
||||
|
||||
{% include '../_includes/status.njk' %}
|
||||
</div>
|
||||
<p class="summary">
|
||||
{{ component.summary | inlineMarkdown | safe }}
|
||||
</p>
|
||||
{% if native %}
|
||||
<wa-callout variant="success">
|
||||
<wa-icon slot="icon" name="lightbulb" variant="regular"></wa-icon>
|
||||
@@ -12,6 +27,11 @@
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{# Content #}
|
||||
{% block content %}
|
||||
{{ content | safe }}
|
||||
{% endblock %}
|
||||
|
||||
{# Component API #}
|
||||
{% block afterContent %}
|
||||
{# Slots #}
|
||||
|
||||
@@ -1,18 +1,37 @@
|
||||
{% extends '../_layouts/block.njk' %}
|
||||
{% set hasSidebar = true %}
|
||||
{% set hasOutline = true %}
|
||||
|
||||
{% extends '../_includes/base.njk' %}
|
||||
|
||||
{# Component header #}
|
||||
{% block notes %}
|
||||
{% block beforeContent %}
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
<div class="component-info">
|
||||
{% for tag, url in elements %}
|
||||
<code class="tag"><a href="{{ url }}">{{ tag }}</a></code>
|
||||
{% endfor %}
|
||||
{% include '../_includes/status.njk' %}
|
||||
</div>
|
||||
{% if description -%}
|
||||
<p class="summary">{{ description | inlineMarkdown | safe }}</p>
|
||||
{%- endif %}
|
||||
{% if component %}
|
||||
<wa-callout variant="success">
|
||||
<wa-icon slot="icon" name="lightbulb" variant="regular"></wa-icon>
|
||||
Want to do more?
|
||||
Check out the {% for name in (component | toList) -%}
|
||||
Check out the {% for name in (component | toArray) -%}
|
||||
{{ ' and ' if loop.last and not loop.first }}<a href="/docs/components/{{ name }}"><code><wa-{{ name }}></code></a>{{ ', ' if not loop.last }}
|
||||
{%- endfor %} component{{ 's' if (component | isList) }}</a>!
|
||||
{%- endfor %} component{{ 's' if (component | isArray) }}</a>!
|
||||
</wa-callout>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{# Content #}
|
||||
{% block content %}
|
||||
{{ content | safe }}
|
||||
{% endblock %}
|
||||
|
||||
{# Component API #}
|
||||
{% block afterContent %}
|
||||
{# Slots #}
|
||||
{% if css_file %}
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
---
|
||||
layout: page-outline
|
||||
tags: ["overview"]
|
||||
---
|
||||
{% set forTag = forTag or (page.url | split('/') | last) %}
|
||||
{% if description %}
|
||||
<div class="index-summary">{{ description | markdown | safe }}</div>
|
||||
{% endif %}
|
||||
|
||||
<div id="block-filter">
|
||||
<wa-input type="search" placeholder="Search {{ title }}" clearable autofocus>
|
||||
<wa-icon slot="prefix" name="search"></wa-icon>
|
||||
</wa-input>
|
||||
</div>
|
||||
|
||||
{% set allPages = collections[forTag] %}
|
||||
{% include "grouped-pages.njk" %}
|
||||
|
||||
<link href="/assets/styles/filter.css" rel="stylesheet">
|
||||
<script type="module" src="/assets/scripts/filter.js"></script>
|
||||
|
||||
{% if content | trim %}
|
||||
<br> {# Temp fix for spacing issue #}
|
||||
{{ content | safe }}
|
||||
{% endif %}
|
||||
4
docs/_layouts/page-wide.njk
Normal file
4
docs/_layouts/page-wide.njk
Normal file
@@ -0,0 +1,4 @@
|
||||
{% set hasSidebar = true %}
|
||||
{% set hasOutline = true %}
|
||||
|
||||
{% extends "../_includes/base-wide.njk" %}
|
||||
4
docs/_layouts/pattern.njk
Normal file
4
docs/_layouts/pattern.njk
Normal file
@@ -0,0 +1,4 @@
|
||||
{% set hasSidebar = true %}
|
||||
{% set hasOutline = true %}
|
||||
|
||||
{% extends "../_includes/base.njk" %}
|
||||
@@ -1,85 +0,0 @@
|
||||
{% set hasSidebar = true %}
|
||||
{% set hasOutline = true %}
|
||||
{# {% set forceTheme = page.fileSlug %} #}
|
||||
|
||||
{% extends '../_includes/base.njk' %}
|
||||
|
||||
{% block header %}
|
||||
<iframe src='{{ page.url }}demo.html'></iframe>
|
||||
{% endblock %}
|
||||
|
||||
{% block afterContent %}
|
||||
{% markdown %}
|
||||
## How to use this theme
|
||||
|
||||
You can import this theme from the Web Awesome CDN.
|
||||
|
||||
<wa-tab-group>
|
||||
<wa-tab panel="html">In HTML</wa-tab>
|
||||
<wa-tab panel="css">In CSS</wa-tab>
|
||||
<wa-tab-panel name="html">
|
||||
|
||||
Simply add the following code to the `<head>` of your page:
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/themes/' + page.fileSlug + '.css' %}" />
|
||||
```
|
||||
</wa-tab-panel>
|
||||
<wa-tab-panel name="css">
|
||||
|
||||
Simply add the following code at the top of your CSS file:
|
||||
```css
|
||||
@import url('{% cdnUrl 'styles/themes/' + page.fileSlug + '.css' %}');
|
||||
```
|
||||
</wa-tab-panel>
|
||||
</wa-tab-group>
|
||||
|
||||
## Dark mode
|
||||
|
||||
To activate the dark color scheme of the theme on any element and its contents, apply the class `wa-dark` to it.
|
||||
This means you can use different color schemes throughout the page.
|
||||
Here, we use the default theme with a dark sidebar:
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="wa-dark">
|
||||
<!-- dark-themed sidebar -->
|
||||
</nav>
|
||||
|
||||
<!-- light-themed content -->
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
You can apply the class to the `<html>` element on your page to activate the dark color scheme for the entire page.
|
||||
|
||||
```html
|
||||
<html class="wa-dark">
|
||||
<head>
|
||||
<link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/{{ page.fileSlug }}.css" />
|
||||
<!-- other links, scripts, and metadata -->
|
||||
</head>
|
||||
<body>
|
||||
<!-- page content -->
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
### Detecting Color Scheme Preference
|
||||
|
||||
Web Awesome's themes have both light and dark styles built in.
|
||||
However, Web Awesome doesn't try to auto-detect the user's light/dark mode preference.
|
||||
This should be done at the application level.
|
||||
As a best practice, to provide a dark theme in your app, you should:
|
||||
|
||||
- Check for [`prefers-color-scheme`](https://stackoverflow.com/a/57795495/567486) and use its value by default
|
||||
- Allow the user to override the setting in your app
|
||||
- Remember the user's preference and restore it on subsequent logins
|
||||
|
||||
Web Awesome avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.
|
||||
|
||||
{% endmarkdown %}
|
||||
{% endblock %}
|
||||
25
docs/_layouts/utilities.njk
Normal file
25
docs/_layouts/utilities.njk
Normal file
@@ -0,0 +1,25 @@
|
||||
{% set hasSidebar = true %}
|
||||
{% set hasOutline = true %}
|
||||
|
||||
{% extends '../_includes/base.njk' %}
|
||||
|
||||
{# Component header #}
|
||||
{% block beforeContent %}
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
<div class="component-info">
|
||||
|
||||
{% for className in classes %}
|
||||
<code class="class">.{{ className }}</code>
|
||||
{% endfor %}
|
||||
{% include '../_includes/status.njk' %}
|
||||
</div>
|
||||
{% if description -%}
|
||||
<p class="summary">{{ description | inlineMarkdown | safe }}</p>
|
||||
{%- endif %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{# Content #}
|
||||
{% block content %}
|
||||
{{ content | safe }}
|
||||
{% endblock %}
|
||||
@@ -14,18 +14,6 @@ export function trimPipes(content) {
|
||||
return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
|
||||
}
|
||||
|
||||
export function stripQuotes(content) {
|
||||
return content.replace(/^(['"])(.+)\1$/g, '$2');
|
||||
}
|
||||
|
||||
export function getEnumValues(type) {
|
||||
return type
|
||||
.split('|')
|
||||
.map(value => value.trim())
|
||||
.filter(Boolean)
|
||||
.map(stripQuotes);
|
||||
}
|
||||
|
||||
export function keys(obj) {
|
||||
return Object.keys(obj);
|
||||
}
|
||||
@@ -50,12 +38,8 @@ export function getTitleFromUrl(url, collection) {
|
||||
return item?.data.title || '';
|
||||
}
|
||||
|
||||
export function split(text, separator) {
|
||||
return (text + '').split(separator).filter(Boolean);
|
||||
}
|
||||
|
||||
export function breadcrumbs(url, { withCurrent = false } = {}) {
|
||||
const parts = split(url, '/');
|
||||
const parts = url.split('/').filter(Boolean);
|
||||
const ret = [];
|
||||
|
||||
while (parts.length) {
|
||||
@@ -86,30 +70,12 @@ export function breadcrumbs(url, { withCurrent = false } = {}) {
|
||||
return ret;
|
||||
}
|
||||
|
||||
export function isObject(value) {
|
||||
return typeof value === 'object' && value !== null && !Array.isArray(value);
|
||||
export function isArray(value) {
|
||||
return Array.isArray(value);
|
||||
}
|
||||
|
||||
export function isList(value) {
|
||||
return Array.isArray(value) || value instanceof Set;
|
||||
}
|
||||
|
||||
/** Get an Array or Set */
|
||||
export function toList(value) {
|
||||
return isList(value) ? value : [value];
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert any value to something that can be iterated over with a for key, value loop.
|
||||
* Arrays and sets will be converted to a Map of value -> undefined
|
||||
*/
|
||||
export function dict(value) {
|
||||
if (value instanceof Map || isObject(value)) {
|
||||
return value;
|
||||
}
|
||||
|
||||
let list = toList(value);
|
||||
return new Map([...list].map(item => [item, undefined]));
|
||||
export function toArray(value) {
|
||||
return isArray(value) ? value : [value];
|
||||
}
|
||||
|
||||
export function deepValue(obj, key) {
|
||||
@@ -117,15 +83,11 @@ export function deepValue(obj, key) {
|
||||
return key.reduce((subObj, property) => subObj?.[property], obj);
|
||||
}
|
||||
|
||||
export function isNumeric(value) {
|
||||
function isNumeric(value) {
|
||||
return typeof value === 'number' || (typeof value === 'string' && !isNaN(value));
|
||||
}
|
||||
|
||||
export function isString(value) {
|
||||
return typeof value === 'string';
|
||||
}
|
||||
|
||||
export function isEmpty(value) {
|
||||
function isEmpty(value) {
|
||||
return value === null || value === undefined || value === '';
|
||||
}
|
||||
|
||||
@@ -151,13 +113,13 @@ function compare(a, b) {
|
||||
return (a + '').localeCompare(b);
|
||||
}
|
||||
|
||||
/** Sort an array of objects by one or more of their properties */
|
||||
export function sort(arr, by = { 'data.order': 1, 'data.title': '' }) {
|
||||
let keys = Array.isArray(by) ? by : Object.keys(by);
|
||||
/** Sort an array of objects */
|
||||
export function sort(arr, keys = ['data.order', 'data.title']) {
|
||||
keys = toArray(keys);
|
||||
|
||||
return arr.sort((a, b) => {
|
||||
let aValues = keys.map(key => deepValue(a, key) ?? by[key]);
|
||||
let bValues = keys.map(key => deepValue(b, key) ?? by[key]);
|
||||
let aValues = keys.map(key => deepValue(a, key));
|
||||
let bValues = keys.map(key => deepValue(b, key));
|
||||
|
||||
for (let i = 0; i < aValues.length; i++) {
|
||||
let aVal = aValues[i];
|
||||
@@ -179,9 +141,6 @@ export function sort(arr, by = { 'data.order': 1, 'data.title': '' }) {
|
||||
* @returns { Object.<string, object[]> } An object with keys for each tag, and an array of items for each tag.
|
||||
*/
|
||||
export function groupByTags(collection, tags) {
|
||||
if (!collection) {
|
||||
console.error(`Empty collection passed to groupByTags() to group by ${JSON.stringify(tags)}`);
|
||||
}
|
||||
if (!tags) {
|
||||
// Default to grouping by union of all tags
|
||||
tags = Array.from(new Set(collection.flatMap(item => item.data.tags)));
|
||||
@@ -239,41 +198,3 @@ export function getCategoryTitle(category, categories) {
|
||||
// Capitalized
|
||||
return category.charAt(0).toUpperCase() + category.slice(1);
|
||||
}
|
||||
|
||||
const IDENTITY = x => x;
|
||||
|
||||
/**
|
||||
* Helper to print out one or more HTML attributes, especially conditional ones.
|
||||
* Usage in 11ty:
|
||||
* - Single attribute: `<foo{{ value | attr(name) }}>`
|
||||
* - Multiple attributes: `<foo{{ { name1: value1, name2: value2 } | attr }}>`
|
||||
*
|
||||
* @overload
|
||||
* @param {any} value - The attribute value If falsey, the attribute is not printed. If `true` the attribute is printed without a value.
|
||||
* @param {string} name - The name of the attribute
|
||||
*
|
||||
* @overload
|
||||
* @param {Object<string, any>} obj - Map of attribute names to values
|
||||
*
|
||||
* @returns {string} The attribute string. No `| safe` is needed.
|
||||
*/
|
||||
export function attr(value, name) {
|
||||
const safe = this?.env.filters.safe ?? IDENTITY;
|
||||
|
||||
if (arguments.length === 1 && value && typeof value === 'object') {
|
||||
// Called with a single object argument of names to values
|
||||
let ret = Object.entries(obj)
|
||||
.map(([name, value]) => attr(value, name))
|
||||
.join('');
|
||||
return safe(ret);
|
||||
}
|
||||
|
||||
if (!value) {
|
||||
// false, "", null, undefined
|
||||
return '';
|
||||
}
|
||||
|
||||
let ret = ' ' + name + (value === true ? '' : `="${value}"`);
|
||||
|
||||
return safe(ret);
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@ let stylesheets = Array.from(document.querySelectorAll("link[rel=stylesheet][hre
|
||||
.join('\n');
|
||||
let includes = `${stylesheets}
|
||||
<script src="/dist/webawesome.loader.js" type="module"></script>
|
||||
<link rel="stylesheet" href="./demo-page.css">`;
|
||||
<link rel="stylesheet" href="/assets/examples/page-demo/page.css">`;
|
||||
|
||||
async function render() {
|
||||
await customElements.whenDefined('wa-checkbox');
|
||||
|
Before Width: | Height: | Size: 698 KiB After Width: | Height: | Size: 698 KiB |
|
Before Width: | Height: | Size: 241 KiB After Width: | Height: | Size: 241 KiB |
|
Before Width: | Height: | Size: 786 KiB After Width: | Height: | Size: 786 KiB |
|
Before Width: | Height: | Size: 716 KiB After Width: | Height: | Size: 716 KiB |
|
Before Width: | Height: | Size: 148 KiB After Width: | Height: | Size: 148 KiB |
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 438 KiB After Width: | Height: | Size: 438 KiB |
59
docs/assets/scripts/color-scheme.js
Normal file
59
docs/assets/scripts/color-scheme.js
Normal file
@@ -0,0 +1,59 @@
|
||||
//
|
||||
// Color scheme selector
|
||||
//
|
||||
(() => {
|
||||
function setColorScheme(newColorScheme) {
|
||||
colorScheme = newColorScheme;
|
||||
localStorage.setItem('colorScheme', colorScheme);
|
||||
const presetTheme = window.getPresetTheme();
|
||||
|
||||
// Update the UI
|
||||
updateSelection();
|
||||
|
||||
// Toggle the dark mode class
|
||||
document.documentElement.classList.toggle(`wa-theme-${presetTheme}-dark`, window.isDark());
|
||||
}
|
||||
|
||||
function updateSelection() {
|
||||
const menu = document.querySelector('#color-scheme-selector wa-menu');
|
||||
if (!menu) return;
|
||||
[...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
|
||||
await customElements.whenDefined(item.localName);
|
||||
await item.updateComplete;
|
||||
item.checked = item.getAttribute('value') === colorScheme;
|
||||
});
|
||||
}
|
||||
|
||||
let colorScheme = window.getColorScheme();
|
||||
|
||||
// Selection is not preserved when changing page, so update when opening dropdown
|
||||
document.addEventListener('wa-show', event => {
|
||||
const colorSchemeSelector = event.target.closest('#color-scheme-selector');
|
||||
if (!colorSchemeSelector) return;
|
||||
updateSelection();
|
||||
});
|
||||
|
||||
// Listen for selections
|
||||
document.addEventListener('wa-select', event => {
|
||||
const menu = event.target.closest('#color-scheme-selector wa-menu');
|
||||
if (!menu) return;
|
||||
setColorScheme(event.detail.item.value);
|
||||
});
|
||||
|
||||
// Update the color scheme when the preference changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => setColorScheme(colorScheme));
|
||||
|
||||
// Toggle with backslash
|
||||
document.addEventListener('keydown', event => {
|
||||
if (
|
||||
event.key === '\\' &&
|
||||
!event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))
|
||||
) {
|
||||
event.preventDefault();
|
||||
setColorScheme(window.isDark() ? 'light' : 'dark');
|
||||
}
|
||||
});
|
||||
|
||||
// Set the initial color scheme and sync the UI
|
||||
setColorScheme(colorScheme);
|
||||
})();
|
||||
@@ -1,25 +0,0 @@
|
||||
function updateResults(input) {
|
||||
const filter = input.value.toLowerCase().trim();
|
||||
let filtered = Boolean(filter);
|
||||
|
||||
for (let grid of document.querySelectorAll('.index-grid')) {
|
||||
grid.classList.toggle('filtered', filtered);
|
||||
|
||||
for (let item of grid.querySelectorAll('a:has(> wa-card)')) {
|
||||
let isMatch = true;
|
||||
|
||||
if (filter) {
|
||||
const content = item.textContent.toLowerCase() + ' ' + (item.getAttribute('data-keywords') + ' ');
|
||||
isMatch = content.includes(filter);
|
||||
}
|
||||
|
||||
item.hidden = !isMatch;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.documentElement.addEventListener('wa-input', e => {
|
||||
if (e.target?.matches('#block-filter wa-input')) {
|
||||
updateResults(e.target);
|
||||
}
|
||||
});
|
||||
@@ -1,64 +0,0 @@
|
||||
import { domChange, nextFrame, ThemeAspect } from './theme-picker.js';
|
||||
|
||||
const presetTheme = new ThemeAspect({
|
||||
defaultValue: 'default',
|
||||
key: 'presetTheme',
|
||||
picker: 'wa-select.preset-theme-selector',
|
||||
|
||||
applyChange() {
|
||||
const oldStylesheets = [...document.querySelectorAll('#theme-stylesheet')];
|
||||
const oldStylesheet = oldStylesheets.pop();
|
||||
|
||||
if (oldStylesheets.length > 0) {
|
||||
// Remove all but the last one
|
||||
for (let stylesheet of oldStylesheets) {
|
||||
stylesheet.remove();
|
||||
}
|
||||
}
|
||||
|
||||
const href = `/dist/styles/themes/${this.value}.css`;
|
||||
|
||||
if (!oldStylesheet || oldStylesheet.getAttribute('href') !== href) {
|
||||
const newStylesheet = document.createElement('link');
|
||||
Object.assign(newStylesheet, { href, id: 'theme-stylesheet', rel: 'preload', as: 'style' });
|
||||
oldStylesheet.after(newStylesheet);
|
||||
|
||||
newStylesheet.addEventListener(
|
||||
'load',
|
||||
e => {
|
||||
domChange(
|
||||
async instant => {
|
||||
// Swap stylesheets
|
||||
newStylesheet.rel = 'stylesheet';
|
||||
|
||||
if (instant) {
|
||||
// If no VT, delay by 1 frame to make it smoother
|
||||
await nextFrame();
|
||||
}
|
||||
|
||||
oldStylesheet.remove();
|
||||
},
|
||||
{ behavior: 'smooth' },
|
||||
);
|
||||
},
|
||||
{ once: true },
|
||||
);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* Without this, there's a flash of the incorrect preset theme.
|
||||
*/
|
||||
function updateSelectionBeforeTurboLoad(e) {
|
||||
const newElement = e.detail.newBody || e.detail.newFrame || e.detail.newStream;
|
||||
if (newElement) {
|
||||
presetTheme.syncUI(newElement);
|
||||
}
|
||||
}
|
||||
|
||||
['turbo:before-render', 'turbo:before-stream-render', 'turbo:before-frame-render'].forEach(eventName => {
|
||||
document.addEventListener(eventName, updateSelectionBeforeTurboLoad);
|
||||
});
|
||||
|
||||
window.presetTheme = presetTheme;
|
||||
86
docs/assets/scripts/preset-theme.js
Normal file
86
docs/assets/scripts/preset-theme.js
Normal file
@@ -0,0 +1,86 @@
|
||||
//
|
||||
// Preset theme selector
|
||||
//
|
||||
(() => {
|
||||
function setPresetTheme(newPresetTheme) {
|
||||
presetTheme = newPresetTheme;
|
||||
localStorage.setItem('presetTheme', presetTheme);
|
||||
|
||||
const stylesheet = document.getElementById('theme-stylesheet');
|
||||
|
||||
const newStylesheet = Object.assign(document.createElement('link'), {
|
||||
href: `/dist/styles/themes/${presetTheme}.css`,
|
||||
rel: 'preload',
|
||||
as: 'style',
|
||||
});
|
||||
|
||||
newStylesheet.addEventListener(
|
||||
'load',
|
||||
() => {
|
||||
newStylesheet.rel = 'stylesheet';
|
||||
newStylesheet.id = stylesheet.id;
|
||||
requestAnimationFrame(() => {
|
||||
stylesheet.remove();
|
||||
});
|
||||
},
|
||||
{ once: true },
|
||||
);
|
||||
|
||||
document.head.append(newStylesheet);
|
||||
|
||||
// Update the UI
|
||||
updateSelection();
|
||||
|
||||
// Toggle the dark mode class
|
||||
document.documentElement.classList.toggle(`wa-theme-${presetTheme}-dark`, window.isDark());
|
||||
}
|
||||
|
||||
function updateSelection(container = document) {
|
||||
const menu = container.querySelector('#preset-theme-selector wa-menu');
|
||||
if (!menu) return;
|
||||
[...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
|
||||
const isChecked = item.getAttribute('value') === presetTheme;
|
||||
if (isChecked) {
|
||||
container.querySelector('#preset-theme-selector__text').textContent = item.innerText;
|
||||
}
|
||||
await customElements.whenDefined(item.localName);
|
||||
await item.updateComplete;
|
||||
item.checked = isChecked;
|
||||
});
|
||||
}
|
||||
|
||||
let presetTheme = window.getPresetTheme();
|
||||
|
||||
// Selection is not preserved when changing page, so update when opening dropdown
|
||||
document.addEventListener('wa-show', event => {
|
||||
const presetThemeSelector = event.target.closest('#preset-theme-selector');
|
||||
if (!presetThemeSelector) return;
|
||||
updateSelection();
|
||||
});
|
||||
|
||||
// Listen for selections
|
||||
document.addEventListener('wa-select', event => {
|
||||
const menu = event.target.closest('#preset-theme-selector wa-menu');
|
||||
if (!menu) return;
|
||||
setPresetTheme(event.detail.item.value);
|
||||
});
|
||||
|
||||
// Update the color scheme when the preference changes
|
||||
window.matchMedia('(prefers-preset-theme: dark)').addEventListener('change', () => setPresetTheme(presetTheme));
|
||||
updateSelection();
|
||||
|
||||
/**
|
||||
* Without this, there's a flash of the incorrect preset theme.
|
||||
*/
|
||||
function updateSelectionBeforeTurboLoad(e) {
|
||||
const newElement = e.detail.newBody || e.detail.newFrame || e.detail.newStream;
|
||||
if (!newElement) {
|
||||
return;
|
||||
}
|
||||
updateSelection(newElement);
|
||||
}
|
||||
|
||||
['turbo:before-render', 'turbo:before-stream-render', 'turbo:before-frame-render'].forEach(eventName => {
|
||||
document.addEventListener(eventName, updateSelectionBeforeTurboLoad);
|
||||
});
|
||||
})();
|
||||
@@ -1,37 +0,0 @@
|
||||
/**
|
||||
* Sync iframe height with its content page (for same-origin iframes)
|
||||
* NOT CURRENTLY USED ANYWHERE
|
||||
*/
|
||||
for (let iframe of document.querySelectorAll('iframe')) {
|
||||
if (iframe.contentDocument) {
|
||||
// Already loaded
|
||||
syncIframeHeight(iframe);
|
||||
}
|
||||
|
||||
iframe.onload = () => {
|
||||
console.log('iframe loaded');
|
||||
if (iframe.contentDocument) {
|
||||
// Same origin
|
||||
iframe.contentWindow.iframe = iframe;
|
||||
syncIframeHeight(iframe);
|
||||
const resizeObserver = new ResizeObserver(entries => {
|
||||
for (let entry of entries) {
|
||||
if (entry.target === iframe.contentDocument.body) {
|
||||
syncIframeHeight(iframe);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
resizeObserver.observe(iframe.contentDocument.body);
|
||||
window.addEventListener('turbo:render', syncIframeHeight(iframe));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function syncIframeHeight(iframe) {
|
||||
iframe.style.height = '0px';
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
iframe.style.height = iframe.contentDocument.body.scrollHeight + 'px';
|
||||
});
|
||||
}
|
||||
@@ -1,115 +0,0 @@
|
||||
// Helper for view transitions
|
||||
export function domChange(fn, { behavior = 'smooth' } = {}) {
|
||||
const canUseViewTransitions =
|
||||
document.startViewTransition && !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
if (canUseViewTransitions && behavior === 'smooth') {
|
||||
document.startViewTransition(fn);
|
||||
} else {
|
||||
fn(true);
|
||||
}
|
||||
}
|
||||
|
||||
export function nextFrame() {
|
||||
return new Promise(resolve => requestAnimationFrame(resolve));
|
||||
}
|
||||
|
||||
export class ThemeAspect {
|
||||
constructor(options) {
|
||||
Object.assign(this, options);
|
||||
this.set();
|
||||
|
||||
// Update when local storage changes.
|
||||
// That way changes in one window will propagate to others (including iframes).
|
||||
window.addEventListener('storage', event => {
|
||||
if (event.key === this.key) {
|
||||
this.set();
|
||||
}
|
||||
});
|
||||
|
||||
// Listen for selections
|
||||
document.addEventListener('wa-change', event => {
|
||||
const picker = event.target.closest(this.picker);
|
||||
if (picker) {
|
||||
this.set(picker.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
get() {
|
||||
return localStorage.getItem(this.key) ?? this.defaultValue;
|
||||
}
|
||||
|
||||
computed = {};
|
||||
|
||||
get computedValue() {
|
||||
if (this.value in this.computed) {
|
||||
return this.computed[this.value];
|
||||
}
|
||||
|
||||
return this.value;
|
||||
}
|
||||
|
||||
set(value = this.get()) {
|
||||
if (value === this.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.value = value;
|
||||
|
||||
if (this.value === this.defaultValue) {
|
||||
localStorage.removeItem(this.key);
|
||||
} else {
|
||||
localStorage.setItem(this.key, this.value);
|
||||
}
|
||||
|
||||
this.applyChange();
|
||||
this.syncUI();
|
||||
}
|
||||
|
||||
syncUI(container = document) {
|
||||
for (let picker of container.querySelectorAll(this.picker)) {
|
||||
picker.setAttribute('value', this.value);
|
||||
picker.value = this.value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const colorScheme = new ThemeAspect({
|
||||
defaultValue: 'auto',
|
||||
key: 'colorScheme',
|
||||
picker: 'wa-select.color-scheme-selector',
|
||||
|
||||
computed: {
|
||||
get auto() {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
},
|
||||
},
|
||||
|
||||
applyChange() {
|
||||
// Toggle the dark mode class
|
||||
domChange(() => {
|
||||
let dark = this.computedValue === 'dark';
|
||||
document.documentElement.classList.toggle(`wa-dark`, dark);
|
||||
|
||||
for (let el of document.querySelectorAll('.wa-invert')) {
|
||||
el.classList.toggle('wa-dark', !dark);
|
||||
el.classList.toggle('wa-light', dark);
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
// Update the color scheme when the preference changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => colorScheme.set());
|
||||
|
||||
// Toggle color scheme with backslash
|
||||
document.addEventListener('keydown', event => {
|
||||
if (
|
||||
event.key === '\\' &&
|
||||
!event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))
|
||||
) {
|
||||
event.preventDefault();
|
||||
colorScheme.set(theming.colorScheme.resolvedValue === 'dark' ? 'light' : 'dark');
|
||||
}
|
||||
});
|
||||
@@ -10,8 +10,8 @@
|
||||
--wa-brand-grey: #30323b;
|
||||
}
|
||||
|
||||
.wa-dark .only-light,
|
||||
.only-dark:not(.wa-dark, .wa-dark *) {
|
||||
html.wa-theme-default-dark .only-light,
|
||||
html:not(.wa-theme-default-dark) .only-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -22,7 +22,7 @@ wa-page {
|
||||
/* Header */
|
||||
wa-page::part(header) {
|
||||
background-color: var(--wa-color-surface-default);
|
||||
border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
|
||||
border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
|
||||
}
|
||||
|
||||
wa-page::part(body) {
|
||||
@@ -34,6 +34,10 @@ wa-page::part(header-actions) {
|
||||
}
|
||||
|
||||
wa-page > header {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-inline: var(--wa-space-xl);
|
||||
|
||||
a[href='/'] {
|
||||
@@ -77,7 +81,7 @@ wa-page > header {
|
||||
}
|
||||
wa-button#search-trigger {
|
||||
--background-color: var(--wa-form-control-background-color);
|
||||
--border-color: var(--wa-form-control-border-color);
|
||||
--border-color: var(--wa-form-control-resting-color);
|
||||
}
|
||||
#search-trigger kbd {
|
||||
font-size: var(--wa-font-size-2xs);
|
||||
@@ -211,20 +215,6 @@ wa-page::part(menu) {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
wa-page[view='mobile'] :is([slot='navigation-header'], [slot='navigation']) {
|
||||
padding: 0;
|
||||
|
||||
& wa-details::part(icon) {
|
||||
padding-inline: var(--wa-space-xs); /* aligns details icons with drawer close icon */
|
||||
}
|
||||
}
|
||||
|
||||
[slot='navigation-header'] wa-menu {
|
||||
font-family: var(--wa-font-family-body);
|
||||
font-size: var(--wa-font-size-m);
|
||||
font-weight: var(--wa-font-weight-normal);
|
||||
}
|
||||
|
||||
/* Main content */
|
||||
wa-page > main {
|
||||
max-width: 80ch;
|
||||
@@ -240,7 +230,7 @@ h1.title wa-badge {
|
||||
}
|
||||
}
|
||||
|
||||
.block-info {
|
||||
.component-info {
|
||||
margin-block-end: var(--wa-flow-spacing);
|
||||
}
|
||||
|
||||
@@ -336,18 +326,16 @@ wa-page > main:has(> .index-grid) {
|
||||
|
||||
a {
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
wa-card {
|
||||
box-shadow: none;
|
||||
--box-shadow: none;
|
||||
--spacing: var(--wa-space-m);
|
||||
inline-size: 100%;
|
||||
|
||||
&:hover {
|
||||
--border-color: var(--wa-color-brand-border-loud);
|
||||
border-color: var(--border-color);
|
||||
box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
|
||||
--box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
|
||||
|
||||
.page-name {
|
||||
color: var(--wa-color-brand-on-quiet);
|
||||
@@ -440,7 +428,7 @@ wa-page > main:has(> .index-grid) {
|
||||
@media screen and not (max-width: 768px) {
|
||||
/* Navigation sidebar */
|
||||
wa-page::part(navigation) {
|
||||
border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
|
||||
border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
|
||||
}
|
||||
|
||||
wa-page > #sidebar {
|
||||
@@ -455,20 +443,3 @@ wa-page > main:has(> .index-grid) {
|
||||
padding: var(--wa-space-3xl);
|
||||
}
|
||||
}
|
||||
|
||||
.layout-theme {
|
||||
wa-page > main {
|
||||
max-width: 140ch;
|
||||
|
||||
.max-line-length {
|
||||
max-width: 80ch;
|
||||
}
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
min-height: 16lh;
|
||||
height: 65vh;
|
||||
max-height: 21lh;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
wa-card#drawer-card::part(header) {
|
||||
--spacing: 0;
|
||||
justify-content: flex-end;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#block-filter {
|
||||
margin-block-end: var(--wa-space-xl);
|
||||
}
|
||||
|
||||
.index-grid.filtered {
|
||||
h2 {
|
||||
/* Hide headings while filtering */
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:not(:has(> a:not([hidden]))) {
|
||||
/* We’re filtering and there are no results */
|
||||
|
||||
&::before {
|
||||
content: var(--empty-message);
|
||||
grid-column: 1 / -1;
|
||||
color: var(--wa-color-on-quiet);
|
||||
font-style: italic;
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
}
|
||||
|
||||
/* Show empty state when there's a search filter and no results */
|
||||
&[data-empty] {
|
||||
--empty-message: attr(data-empty);
|
||||
}
|
||||
|
||||
&:not([data-empty]) {
|
||||
--empty-message: 'No results';
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -31,9 +31,6 @@
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1199px) {
|
||||
wa-page [slot='aside'] {
|
||||
display: none;
|
||||
}
|
||||
#outline {
|
||||
padding-block: 0.25rem;
|
||||
margin-block-end: -1rem;
|
||||
|
||||
@@ -1,14 +1,5 @@
|
||||
/* Theme Builder Headers
|
||||
* These styles control the appearance of the header of the theme builder,
|
||||
* allowing each theme to have a unique hero section.
|
||||
*/
|
||||
|
||||
/* #region Default */
|
||||
html.wa-theme-default .preview-container {
|
||||
container-name: default-theme;
|
||||
}
|
||||
|
||||
@container default-theme (min-width: 0) {
|
||||
/* #region Custom Styles */
|
||||
@container preview (min-width: 0) {
|
||||
.hero-background {
|
||||
height: 47rem;
|
||||
background-color: var(--wa-color-brand-fill-loud);
|
||||
@@ -31,7 +22,7 @@ html.wa-theme-default .preview-container {
|
||||
}
|
||||
|
||||
.hero wa-button[variant='brand'] {
|
||||
--background-color: var(--wa-color-neutral-fill-quiet);
|
||||
--background: var(--wa-color-neutral-fill-quiet);
|
||||
--text-color: var(--wa-color-neutral-on-normal);
|
||||
}
|
||||
|
||||
@@ -50,733 +41,10 @@ html.wa-theme-default .preview-container {
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
@container default-theme (min-width: 1040px) {
|
||||
@container preview (min-width: 1040px) {
|
||||
.hero-background::after {
|
||||
background-position: right bottom;
|
||||
background-size: 90%;
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Tailspin */
|
||||
html.wa-theme-tailspin .preview-container {
|
||||
container-name: tailspin-theme;
|
||||
}
|
||||
|
||||
@container tailspin-theme (min-width: 0) {
|
||||
.project-header {
|
||||
background: var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
.hero {
|
||||
--hero-background-color: var(--wa-color-surface-default);
|
||||
--hero-lines-color: color-mix(in oklab, var(--wa-color-neutral-fill-normal), transparent 30%);
|
||||
background: linear-gradient(to top, var(--wa-color-surface-lowered), transparent 40%),
|
||||
radial-gradient(circle at 10% 70%, color-mix(in oklab, var(--wa-color-red-50) 16%, transparent), transparent 30%),
|
||||
radial-gradient(
|
||||
circle at 40% 50%,
|
||||
color-mix(in oklab, var(--wa-color-indigo-40) 16%, transparent),
|
||||
transparent 40%
|
||||
),
|
||||
radial-gradient(circle at 80% 25%, color-mix(in oklab, var(--wa-color-red-50) 8%, transparent), transparent 20%),
|
||||
radial-gradient(
|
||||
circle at 80% 80%,
|
||||
color-mix(in oklab, var(--wa-color-indigo-40) 16%, transparent),
|
||||
transparent 40%
|
||||
),
|
||||
radial-gradient(circle at 90% 30%, color-mix(in oklab, var(--wa-color-red-60) 8%, transparent), transparent 10%),
|
||||
linear-gradient(176deg, var(--hero-background-color), transparent 6rem),
|
||||
linear-gradient(90deg, var(--hero-background-color), transparent),
|
||||
repeating-linear-gradient(
|
||||
var(--hero-lines-color),
|
||||
var(--hero-lines-color) 1px,
|
||||
transparent 1px,
|
||||
transparent 10rem,
|
||||
var(--hero-lines-color) 10rem
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--hero-lines-color),
|
||||
var(--hero-lines-color) 1px,
|
||||
transparent 1px,
|
||||
transparent 10rem,
|
||||
var(--hero-lines-color) 10rem
|
||||
),
|
||||
var(--hero-background-color);
|
||||
|
||||
& .title {
|
||||
padding-block: calc(var(--wa-space-3xl) * 2) calc(var(--wa-space-3xl) * 10);
|
||||
|
||||
& .hero-title {
|
||||
font-size: calc((var(--wa-font-size-4xl) * 1.125) * 1.125);
|
||||
margin-block: 0 var(--wa-space-3xl);
|
||||
}
|
||||
}
|
||||
}
|
||||
.badge-stock {
|
||||
position: absolute;
|
||||
top: var(--wa-space-l);
|
||||
left: var(--wa-space-l);
|
||||
}
|
||||
|
||||
.message-composer wa-card {
|
||||
&::part(footer) {
|
||||
border: none;
|
||||
}
|
||||
& wa-icon-button {
|
||||
color: var(--wa-color-base-50);
|
||||
}
|
||||
}
|
||||
|
||||
.products {
|
||||
margin-top: calc(var(--wa-space-3xl) * -8);
|
||||
}
|
||||
|
||||
pre.codeblock {
|
||||
background-color: var(--wa-color-neutral-fill-normal);
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Brutalist */
|
||||
html.wa-theme-brutalist .preview-container {
|
||||
container-name: brutalist-theme;
|
||||
}
|
||||
|
||||
@container brutalist-theme (min-width: 0) {
|
||||
.overlap {
|
||||
background: var(--wa-color-surface-lowered) url('/assets/images/themer/brutalist/hero.png') 50% 3% no-repeat;
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
height: 42rem;
|
||||
padding-top: 8rem;
|
||||
padding-right: 50%;
|
||||
--wa-font-weight-heading: var(--wa-font-weight-normal);
|
||||
}
|
||||
|
||||
.hero wa-button {
|
||||
--background: var(--wa-color-neutral-fill-loud);
|
||||
margin-block-start: var(--wa-space-xl);
|
||||
font-size: var(--wa-font-size-l);
|
||||
}
|
||||
|
||||
/* imitating the large button styles */
|
||||
.hero wa-button::part(label) {
|
||||
padding: 0 var(--wa-space-l);
|
||||
}
|
||||
|
||||
.strata.products {
|
||||
margin-top: -20rem;
|
||||
padding-top: 10rem;
|
||||
}
|
||||
|
||||
.product-card .badge-stock {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.product-card::part(footer) {
|
||||
--wa-shadow-offset-x-s: 0;
|
||||
--wa-shadow-offset-y-s: 0;
|
||||
border-width: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.product-card wa-button::part(prefix) {
|
||||
padding-inline-start: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.product-card wa-button::part(suffix) {
|
||||
padding-inline-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.product-card wa-button:not(:last-child) {
|
||||
margin-inline-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
/* imitating the rounded avatar */
|
||||
.blog wa-avatar {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.blog wa-avatar::part(image) {
|
||||
border: var(--wa-border-width-s) solid var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
}
|
||||
|
||||
.blog .landscape-frame {
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
|
||||
margin-block-end: var(--wa-shadow-offset-y-s);
|
||||
}
|
||||
|
||||
.post-meta .categories {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.message-composer wa-card::part(header) {
|
||||
background-color: var(--wa-color-neutral-fill-loud);
|
||||
}
|
||||
|
||||
.message-composer .grouped-buttons {
|
||||
--wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-gray-30), white 40%);
|
||||
}
|
||||
|
||||
.message-composer [slot='header'] wa-icon-button::part(base) {
|
||||
color: var(--wa-color-neutral-on-loud);
|
||||
}
|
||||
|
||||
.message-composer .grouped-buttons wa-icon-button::part(base):hover {
|
||||
background-color: var(--wa-color-neutral-fill-normal);
|
||||
color: var(--wa-color-text-normal);
|
||||
}
|
||||
|
||||
.message-composer wa-tooltip::part(body) {
|
||||
background-color: var(--wa-color-brand-fill-loud);
|
||||
color: var(--wa-color-brand-on-loud);
|
||||
}
|
||||
|
||||
.message-composer wa-tooltip::part(base__arrow) {
|
||||
--arrow-color: var(--wa-color-brand-fill-loud);
|
||||
}
|
||||
|
||||
.message-composer wa-card::part(footer) {
|
||||
border-width: 0;
|
||||
--padding: 0 var(--wa-space-s) var(--wa-space-s) var(--wa-space-s);
|
||||
}
|
||||
|
||||
.support-table th {
|
||||
background-color: var(--wa-color-neutral-fill-loud);
|
||||
color: var(--wa-color-neutral-on-loud);
|
||||
}
|
||||
|
||||
.support-table th wa-checkbox {
|
||||
--background: transparent;
|
||||
--border-color: var(--wa-color-neutral-on-loud);
|
||||
--border-color-checked: var(--wa-color-neutral-on-loud);
|
||||
}
|
||||
|
||||
.checkout-form {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
.checkout-form .square-frame {
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
|
||||
}
|
||||
|
||||
.wa-theme-brutalist.wa-dark {
|
||||
& p a::before {
|
||||
background: var(--wa-color-yellow-40);
|
||||
}
|
||||
|
||||
& wa-rating {
|
||||
--symbol-color: color-mix(in oklab, var(--wa-color-base-80), transparent 50%);
|
||||
--symbol-color-active: var(--wa-color-gray-80);
|
||||
}
|
||||
|
||||
& wa-alert {
|
||||
&[variant='brand'] {
|
||||
--icon-color: var(--wa-color-brand-on-quiet);
|
||||
}
|
||||
&[variant='success'] {
|
||||
--icon-color: var(--wa-color-success-on-quiet);
|
||||
}
|
||||
&[variant='warning'] {
|
||||
--icon-color: var(--wa-color-warning-on-quiet);
|
||||
}
|
||||
&[variant='danger'] {
|
||||
--icon-color: var(--wa-color-danger-on-quiet);
|
||||
}
|
||||
&[variant='neutral'] {
|
||||
--icon-color: var(--wa-color-neutral-on-quiet);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-container pre {
|
||||
border-inline-start: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-neutral-border-quiet);
|
||||
}
|
||||
|
||||
p a,
|
||||
a.highlite-link {
|
||||
position: relative;
|
||||
--wa-link-decoration-default: none;
|
||||
--wa-link-decoration-hover: none;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
content: '';
|
||||
background: var(--wa-color-yellow-80);
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
height: 50%;
|
||||
opacity: 0.7;
|
||||
transition: all var(--wa-transition-fast) ease-in-out;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@container brutalist-theme (min-width: 1040px) and (max-width: 1140px) {
|
||||
.product-card wa-button {
|
||||
font-size: 80%;
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Playful */
|
||||
html.wa-theme-playful .preview-container {
|
||||
container-name: playful-theme;
|
||||
}
|
||||
|
||||
@container playful-theme (min-width: 0) {
|
||||
.project-header {
|
||||
color: var(--wa-color-success-on-normal);
|
||||
}
|
||||
|
||||
.hero-background {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: -60rem;
|
||||
left: 50%;
|
||||
width: 250rem;
|
||||
height: 250rem;
|
||||
transform: translate(-50%, -50%);
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(180deg, var(--wa-color-green-90) 69.42%, var(--wa-color-green-80) 100%);
|
||||
}
|
||||
|
||||
.hero-background::after {
|
||||
background: url(/assets/images/themer/playful/hero.png) 0 50% no-repeat;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 520px;
|
||||
height: 600px;
|
||||
transform: translateX(-50%);
|
||||
left: 50%;
|
||||
bottom: 33rem;
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
padding-top: 19rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero .hero-title {
|
||||
color: var(--wa-color-success-on-normal);
|
||||
font-size: var(--wa-font-size-4xl);
|
||||
}
|
||||
|
||||
.hero .hero-cta {
|
||||
font-size: var(--wa-font-size-l);
|
||||
}
|
||||
|
||||
.product-card .badge-stock {
|
||||
position: absolute;
|
||||
top: var(--wa-space-xl);
|
||||
right: var(--wa-space-xl);
|
||||
}
|
||||
|
||||
.product-card {
|
||||
--wa-panel-border-radius: var(--wa-border-radius-l);
|
||||
}
|
||||
|
||||
.product-card::part(footer) {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.product-card wa-button {
|
||||
margin-inline-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.blog wa-avatar {
|
||||
--size: 2rem;
|
||||
}
|
||||
|
||||
.blog .landscape-frame {
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
}
|
||||
|
||||
.message-composer wa-card {
|
||||
--background: var(--wa-color-surface-raised);
|
||||
}
|
||||
|
||||
.message-composer wa-card::part(header) {
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-gray-70);
|
||||
border-width: 0;
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
}
|
||||
|
||||
&:not(.wa-theme-premium.wa-dark) .message-composer wa-card {
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-gray-90);
|
||||
}
|
||||
|
||||
.message-composer wa-icon-button {
|
||||
color: var(--wa-text-color-normal);
|
||||
font-size: var(--wa-font-size-l);
|
||||
}
|
||||
|
||||
.message-composer wa-card::part(footer) {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.product-detail .price {
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
}
|
||||
|
||||
.support-table wa-card {
|
||||
background: var(--wa-color-surface-raised);
|
||||
}
|
||||
|
||||
.support-table th {
|
||||
font-size: var(--wa-font-size-s);
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
}
|
||||
|
||||
.support-table tr {
|
||||
border-top-color: var(--wa-color-surface-lowered);
|
||||
}
|
||||
|
||||
.support-table .excerpt {
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
.order-item img {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
|
||||
.checkout-form {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
.checkout-form h2 {
|
||||
font-size: var(--wa-font-size-3xl);
|
||||
}
|
||||
|
||||
.checkout-form wa-input::part(form-control-label),
|
||||
.checkout-form wa-select::part(form-control-label) {
|
||||
font-size: var(--wa-font-size-s);
|
||||
padding-block-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.wa-theme-playful.wa-dark {
|
||||
& .hero-background {
|
||||
background: linear-gradient(180deg, var(--wa-color-green-60) 69.42%, var(--wa-color-green-30) 100%);
|
||||
}
|
||||
|
||||
& .message-composer wa-card {
|
||||
border-color: var(--wa-color-gray-30);
|
||||
}
|
||||
|
||||
& .message-composer wa-card::part(header) {
|
||||
background: var(--wa-color-gray-40);
|
||||
}
|
||||
|
||||
& .message-composer wa-card::part(footer) {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
& .message-composer .tools .grouped-buttons:not(:last-of-type) {
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-gray-40);
|
||||
}
|
||||
|
||||
& .support-table th {
|
||||
background: var(--wa-color-surface-lowered);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* responsive */
|
||||
@container playful-theme (min-width: 1040px) and (max-width: 1140px) {
|
||||
.product-card wa-button {
|
||||
font-size: 80%;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Active */
|
||||
html.wa-theme-active .preview-container {
|
||||
container-name: active-theme;
|
||||
}
|
||||
|
||||
@container active-theme (min-width: 0) {
|
||||
.hero-background::after {
|
||||
backdrop-filter: brightness(0.8);
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.hero-background {
|
||||
background: linear-gradient(
|
||||
var(--wa-color-green-80) 20%,
|
||||
var(--wa-color-primary-80) 80.5%,
|
||||
var(--wa-color-base-10) 80.5%,
|
||||
var(--wa-color-primary-80) 100%
|
||||
);
|
||||
background: url(/assets/images/themer/active/hero.png) 50% 0px / cover no-repeat;
|
||||
height: 40rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
height: 24rem;
|
||||
}
|
||||
|
||||
.hero .title {
|
||||
text-align: right;
|
||||
margin-inline-start: 55%;
|
||||
}
|
||||
|
||||
.hero .hero-title {
|
||||
font-style: italic;
|
||||
font-weight: var(--wa-font-weight-black);
|
||||
font-size: var(--wa-font-size-2xl);
|
||||
}
|
||||
|
||||
.hero wa-button[variant='brand'] {
|
||||
--background: var(--wa-color-neutral-fill-quiet);
|
||||
--text-color: var(--wa-color-neutral-on-normal);
|
||||
}
|
||||
|
||||
wa-rating {
|
||||
--symbol-color-active: var(--wa-color-brand-on-quiet);
|
||||
}
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
@container preview (min-width: 1100px) {
|
||||
.hero-background {
|
||||
height: 47rem;
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
height: 30rem;
|
||||
}
|
||||
|
||||
.hero .title {
|
||||
margin-block-start: 10%;
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Premium */
|
||||
html.wa-theme-premium .preview-container {
|
||||
container-name: premium-theme;
|
||||
}
|
||||
|
||||
@container premium-theme (min-width: 0) {
|
||||
.project-header {
|
||||
background-color: var(--wa-color-warning-fill-normal);
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
height: 60rem;
|
||||
background: var(--wa-color-warning-fill-normal) url('/assets/images/themer/premium/hero.png') -4rem 12rem no-repeat;
|
||||
background-size: cover;
|
||||
padding-top: var(--wa-space-2xl);
|
||||
padding-left: var(--wa-space-s);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.hero .hero-title {
|
||||
color: var(--wa-color-warning-on-normal);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.blog wa-avatar {
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.strata.products {
|
||||
margin-top: -25rem;
|
||||
padding-top: 10rem;
|
||||
background: linear-gradient(0deg, var(--wa-color-surface-lowered) 80%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
|
||||
.product-card .badge-stock {
|
||||
position: absolute;
|
||||
top: var(--wa-space-xl);
|
||||
right: var(--wa-space-xl);
|
||||
}
|
||||
|
||||
.product-card wa-rating {
|
||||
--symbol-size: var(--wa-font-size-m);
|
||||
}
|
||||
|
||||
.product-card .title {
|
||||
font-size: var(--wa-font-size-2xl);
|
||||
}
|
||||
|
||||
.product-card .description {
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
.product-card::part(footer) {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.product-card wa-button:not(:last-child) {
|
||||
margin-inline-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.blog .authors a {
|
||||
--wa-color-text-link: var(--wa-color-text-quiet);
|
||||
--wa-link-decoration-default: none;
|
||||
}
|
||||
|
||||
.message-composer wa-card {
|
||||
background: var(--wa-color-surface-raised);
|
||||
}
|
||||
|
||||
.message-composer wa-card::part(header) {
|
||||
border-width: 0;
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
}
|
||||
|
||||
&:not(.wa-theme-premium.wa-dark) .message-composer wa-card {
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-base-95);
|
||||
}
|
||||
|
||||
.message-composer wa-card::part(footer) {
|
||||
border-width: 0;
|
||||
--padding: var(--wa-space-s) var(--wa-space-xl);
|
||||
}
|
||||
|
||||
.message-composer .grouped-buttons wa-icon-button::part(base) {
|
||||
block-size: var(--wa-form-control-height-s);
|
||||
inline-size: var(--wa-form-control-height-s);
|
||||
justify-content: center;
|
||||
}
|
||||
.message-composer .grouped-buttons wa-icon-button::part(base):hover {
|
||||
background-color: var(--wa-color-neutral-fill-normal);
|
||||
color: var(--wa-color-text-normal);
|
||||
}
|
||||
|
||||
.support-table th {
|
||||
text-transform: uppercase;
|
||||
font-weight: var(--wa-font-weight-normal);
|
||||
color: var(--wa-color-text-quiet);
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
}
|
||||
|
||||
.support-table th:first-child {
|
||||
border-radius: var(--wa-border-radius-l) 0 0 0;
|
||||
}
|
||||
|
||||
.support-table th:last-child {
|
||||
border-radius: 0 var(--wa-border-radius-l) 0 0;
|
||||
}
|
||||
|
||||
.support-table tr {
|
||||
--wa-color-surface-border: var(--wa-color-surface-lowered);
|
||||
}
|
||||
|
||||
.checkout-form wa-input::part(form-control-label),
|
||||
.checkout-form wa-select::part(form-control-label) {
|
||||
font-size: var(--wa-font-size-s);
|
||||
margin-block-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.order-item .finish {
|
||||
color: var(--wa-color-text-quiet);
|
||||
font-size: var(--wa-font-size-s);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.wa-theme-premium.wa-dark {
|
||||
& .message-composer .tools .grouped-buttons:not(:last-of-type) {
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-base-40);
|
||||
}
|
||||
|
||||
& .preview-container pre,
|
||||
& .preview-container code {
|
||||
background-color: var(--wa-color-base-20);
|
||||
}
|
||||
|
||||
/* syntax highlighting */
|
||||
& .token {
|
||||
&.selector {
|
||||
color: var(--wa-color-green-80);
|
||||
}
|
||||
|
||||
&.tag {
|
||||
color: var(--wa-color-primary-80);
|
||||
}
|
||||
|
||||
&.punctuation {
|
||||
color: var(--wa-color-base-95);
|
||||
}
|
||||
|
||||
&.attr-name {
|
||||
color: var(--wa-color-green-80);
|
||||
}
|
||||
|
||||
&.attr-value {
|
||||
color: var(--wa-color-yellow-80);
|
||||
}
|
||||
}
|
||||
}
|
||||
.preview-container pre,
|
||||
.preview-container code {
|
||||
background-color: var(--wa-color-base-90);
|
||||
font-size: var(--font-size-m);
|
||||
}
|
||||
|
||||
/* syntax highlighting */
|
||||
.token {
|
||||
&.selector {
|
||||
color: var(--wa-color-green-30);
|
||||
}
|
||||
|
||||
&.tag {
|
||||
color: var(--wa-color-primary-30);
|
||||
}
|
||||
|
||||
&.punctuation {
|
||||
color: var(--wa-color-base-10);
|
||||
}
|
||||
|
||||
&.attr-name {
|
||||
color: var(--wa-color-green-30);
|
||||
}
|
||||
|
||||
&.attr-value {
|
||||
color: var(--wa-color-yellow-30);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
@container preview (min-width: 1040px) {
|
||||
.strata.hero {
|
||||
background: var(--wa-color-warning-fill-normal) url('/assets/images/themer/premium/hero.png') -4rem 35% no-repeat;
|
||||
padding-top: 15rem;
|
||||
padding-left: 50%;
|
||||
}
|
||||
|
||||
.strata.products {
|
||||
margin-top: -25rem;
|
||||
padding-top: 10rem;
|
||||
background: linear-gradient(0deg, var(--wa-color-surface-lowered) 60%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
@@ -58,71 +58,6 @@ Set the `variant` attribute to change the callout's variant.
|
||||
</wa-callout>
|
||||
```
|
||||
|
||||
### Appearance
|
||||
|
||||
Use the `appearance` attribute to change the callout's visual appearance (the default is `outlined filled`).
|
||||
|
||||
```html {.example}
|
||||
<wa-callout variant="brand" appearance="outlined accent">
|
||||
<wa-icon slot="icon" name="check-to-slot"></wa-icon>
|
||||
This <strong>accent</strong> callout is also <strong>outlined</strong>
|
||||
</wa-callout>
|
||||
|
||||
<br />
|
||||
|
||||
<wa-callout variant="brand" appearance="accent">
|
||||
<wa-icon slot="icon" name="square-check"></wa-icon>
|
||||
This <strong>accent</strong> callout draws attention without an outline
|
||||
</wa-callout>
|
||||
|
||||
<br />
|
||||
|
||||
<wa-callout variant="brand" appearance="outlined filled">
|
||||
<wa-icon slot="icon" name="fill-drip" variant="regular"></wa-icon>
|
||||
This callout is both <strong>filled</strong> and <strong>outlined</strong>
|
||||
</wa-callout>
|
||||
|
||||
<br />
|
||||
|
||||
<wa-callout variant="brand" appearance="filled">
|
||||
<wa-icon slot="icon" name="fill" variant="regular"></wa-icon>
|
||||
This callout is only <strong>filled</strong>
|
||||
</wa-callout>
|
||||
|
||||
<br />
|
||||
|
||||
<wa-callout variant="brand" appearance="outlined">
|
||||
<wa-icon slot="icon" name="lines-leaning" variant="regular"></wa-icon>
|
||||
Here's an <strong>outlined</strong> callout
|
||||
</wa-callout>
|
||||
|
||||
<br />
|
||||
|
||||
<wa-callout variant="brand" appearance="plain">
|
||||
<wa-icon slot="icon" name="font" variant="regular"></wa-icon>
|
||||
No bells and whistles on this <strong>plain</strong> callout
|
||||
</wa-callout>
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
Use the `size` attribute to change a callout's size.
|
||||
|
||||
```html {.example}
|
||||
<wa-callout variant="brand" appearance="outlined accent" size="large">
|
||||
<wa-icon slot="icon" name="circle-info" variant="solid"></wa-icon>
|
||||
This is meant to be very emphasized.
|
||||
</wa-callout>
|
||||
<wa-callout>
|
||||
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
|
||||
Normal-sized callout.
|
||||
</wa-callout>
|
||||
<wa-callout variant="plain" appearance="plain" size="small">
|
||||
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
|
||||
Just a small tip!
|
||||
</wa-callout>
|
||||
```
|
||||
|
||||
### Without Icons
|
||||
|
||||
Icons are optional. Simply omit the `icon` slot if you don't want them.
|
||||
|
||||
@@ -60,8 +60,7 @@ Basic cards aren't very exciting, but they can display any content you want them
|
||||
|
||||
### Card with Header
|
||||
|
||||
Headers can be used to display titles and more.
|
||||
If using SSR, you need to also use the `with-header` attribute to add a header to the card (if not, it is added automatically).
|
||||
Headers can be used to display titles and more. Use the `with-header` attribute to add a header to the card.
|
||||
|
||||
```html {.example}
|
||||
<wa-card with-header class="card-header">
|
||||
@@ -96,8 +95,7 @@ If using SSR, you need to also use the `with-header` attribute to add a header t
|
||||
|
||||
### Card with Footer
|
||||
|
||||
Footers can be used to display actions, summaries, or other relevant content.
|
||||
If using SSR, you need to also use the `with-footer` attribute to add a footer to the card (if not, it is added automatically).
|
||||
Footers can be used to display actions, summaries, or other relevant content. Use the `with-footer` attribute to add a footer to the card.
|
||||
|
||||
```html {.example}
|
||||
<wa-card with-footer class="card-footer">
|
||||
@@ -124,8 +122,7 @@ If using SSR, you need to also use the `with-footer` attribute to add a footer t
|
||||
|
||||
### Images
|
||||
|
||||
Card images are displayed atop the card and will stretch to fit.
|
||||
If using SSR, you need to also use the `with-image` attribute to add an image to the card (if not, it is added automatically).
|
||||
Card images are displayed atop the card and will stretch to fit. Use the `with-image` attribute to add an image to the card.
|
||||
|
||||
```html {.example}
|
||||
<wa-card with-image class="card-image">
|
||||
|
||||
@@ -45,7 +45,7 @@ table code {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script type="module" src="./cheatsheet.js"></script>
|
||||
<script type="module" src="/assets/scripts/cheatsheet.js"></script>
|
||||
|
||||
{% for type, all in componentsBy -%}
|
||||
{% set typeTitle = "CSS custom properties" if type == "cssProperty" else ("CSS parts" if type == "cssPart" else (type | title) + "s") %}
|
||||
@@ -1,11 +1,4 @@
|
||||
{
|
||||
"layout": "component.njk",
|
||||
"tags": ["components"],
|
||||
"eleventyComputed": {
|
||||
"component": "{{ components[page.fileSlug] }}",
|
||||
"description": "{{ components[page.fileSlug].summary }}",
|
||||
"status": "{{ components[page.fileSlug].status }}",
|
||||
"since": "{{ components[page.fileSlug].since }}",
|
||||
"element": "<{{ components[page.fileSlug].tagName }}>"
|
||||
}
|
||||
"tags": ["components"]
|
||||
}
|
||||
|
||||
81
docs/docs/components/index.md
Normal file
81
docs/docs/components/index.md
Normal file
@@ -0,0 +1,81 @@
|
||||
---
|
||||
title: Components
|
||||
description: Components are the essential building blocks to create intuitive, cohesive experiences. Browse the library of customizable, framework-friendly web components included in Web Awesome.
|
||||
layout: page-outline
|
||||
categories:
|
||||
- actions
|
||||
- feedback: 'Feedback & Status'
|
||||
- imagery
|
||||
- inputs
|
||||
- navigation
|
||||
- organization
|
||||
- helpers: 'Utilities'
|
||||
override:tags: []
|
||||
---
|
||||
|
||||
<div id="component-filter">
|
||||
<wa-input type="search" placeholder="Search components" clearable autofocus></wa-input>
|
||||
</div>
|
||||
|
||||
{% set allPages = collections.components %}
|
||||
{% include "grouped-pages.njk" %}
|
||||
|
||||
<div id="component-filter-empty" hidden>
|
||||
No results
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const container = document.getElementById('component-filter');
|
||||
const empty = document.getElementById('component-filter-empty');
|
||||
const grid = document.getElementById('content');
|
||||
const input = container.querySelector('wa-input');
|
||||
|
||||
function updateResults() {
|
||||
const filter = input.value.toLowerCase().trim();
|
||||
|
||||
// Hide headings while filtering
|
||||
grid.querySelectorAll('h2').forEach(heading => {
|
||||
heading.hidden = filter === '' ? false : true;
|
||||
});
|
||||
|
||||
// Show matching components
|
||||
grid.querySelectorAll('a:has(> wa-card)').forEach(link => {
|
||||
console.log(link);
|
||||
const content = link.textContent.toLowerCase();
|
||||
const keywords = link.getAttribute('data-keywords') || '';
|
||||
const isMatch = filter === '' || (content + keywords).includes(filter);
|
||||
link.hidden = !isMatch;
|
||||
});
|
||||
|
||||
// Show empty state when there's a search filter and no results
|
||||
if (filter !== '' && grid.querySelector('a:not([hidden])') === null) {
|
||||
empty.hidden = false;
|
||||
} else {
|
||||
empty.hidden = true;
|
||||
}
|
||||
}
|
||||
|
||||
input.addEventListener('wa-input', updateResults);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
wa-card#drawer-card::part(header) {
|
||||
--spacing: 0;
|
||||
justify-content: flex-end;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#component-filter {
|
||||
margin-block-end: var(--wa-space-xl);
|
||||
}
|
||||
|
||||
#component-filter-empty {
|
||||
border: dashed var(--wa-border-width-m) var(--wa-color-neutral-border-quiet);
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
font-size: var(--wa-font-size-l);
|
||||
color: var(--wa-color-text-quiet);
|
||||
text-align: center;
|
||||
padding-block: var(--wa-space-2xl);
|
||||
margin-block-start: 0
|
||||
}
|
||||
</style>
|
||||
@@ -1,14 +0,0 @@
|
||||
---
|
||||
title: Components
|
||||
description: Components are the essential building blocks to create intuitive, cohesive experiences. Browse the library of customizable, framework-friendly web components included in Web Awesome.
|
||||
layout: overview
|
||||
categories:
|
||||
- actions
|
||||
- feedback: 'Feedback & Status'
|
||||
- imagery
|
||||
- inputs
|
||||
- navigation
|
||||
- organization
|
||||
- helpers: 'Utilities'
|
||||
override:tags: []
|
||||
---
|
||||
@@ -127,7 +127,7 @@ eleventyExcludeFromCollections: true
|
||||
</a>
|
||||
</nav>
|
||||
<header slot="main-header">
|
||||
<div class="wa-flank:end wa-border-radius-l wa-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
|
||||
<div class="wa-flank:end wa-border-radius-l wa-theme-default-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
|
||||
<div class="wa-stack" style="margin: var(--wa-space-2xl);">
|
||||
<h1>Great Horned Owl</h1>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
@@ -5,7 +5,7 @@ layout: blank
|
||||
eleventyExcludeFromCollections: true
|
||||
---
|
||||
|
||||
<wa-page class="wa-dark">
|
||||
<wa-page class="wa-theme-default-dark">
|
||||
<header slot="header">
|
||||
<div class="wa-cluster">
|
||||
<wa-icon-button name="bars" label="Menu" data-toggle-nav></wa-icon-button>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
---
|
||||
title: Page
|
||||
description: Pages offer an easy way to scaffold entire page layouts using minimal markup.
|
||||
tags: [pro, organization, layout]
|
||||
tags: [organization, layout]
|
||||
isPro: true
|
||||
order: 0
|
||||
order: 1
|
||||
# icon: page
|
||||
---
|
||||
|
||||
@@ -119,7 +119,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
|
||||
</a>
|
||||
</nav>
|
||||
<header slot="main-header">
|
||||
<div class="wa-flank:end wa-border-radius-l wa-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
|
||||
<div class="wa-flank:end wa-border-radius-l wa-theme-default-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
|
||||
<div class="wa-stack" style="margin: var(--wa-space-2xl);">
|
||||
<h1>Great Horned Owl</h1>
|
||||
<wa-divider></wa-divider>
|
||||
@@ -299,7 +299,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
|
||||
A sample media app page using `header`, `navigation-header`, `main-header`, and `main-footer` along with the default slot. The navigation menu collapses into a drawer at the default `mobile-breakpoint` and can be opened using a button with `[data-toggle-nav]` that appears in the `header` slot.
|
||||
|
||||
```html {.example viewport="1600"}
|
||||
<wa-page class="wa-dark">
|
||||
<wa-page class="wa-theme-default-dark">
|
||||
<header slot="header">
|
||||
<div class="wa-cluster">
|
||||
<wa-icon-button name="bars" label="Menu" data-toggle-nav></wa-icon-button>
|
||||
|
||||
@@ -248,7 +248,7 @@ Use the `distance` attribute to change the distance between the popup and its an
|
||||
<div class="box"></div>
|
||||
</wa-popup>
|
||||
|
||||
<wa-slider min="-50" max="50" step="1" value="0" label="Distance"></wa-slider>
|
||||
<wa-range min="-50" max="50" step="1" value="0" label="Distance"></wa-range>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@@ -267,7 +267,7 @@ Use the `distance` attribute to change the distance between the popup and its an
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
|
||||
.popup-distance wa-slider {
|
||||
.popup-distance wa-range {
|
||||
max-width: 260px;
|
||||
}
|
||||
</style>
|
||||
@@ -275,7 +275,7 @@ Use the `distance` attribute to change the distance between the popup and its an
|
||||
<script>
|
||||
const container = document.querySelector('.popup-distance');
|
||||
const popup = container.querySelector('wa-popup');
|
||||
const distance = container.querySelector('wa-slider');
|
||||
const distance = container.querySelector('wa-range');
|
||||
|
||||
distance.addEventListener('wa-input', () => (popup.distance = distance.value));
|
||||
</script>
|
||||
@@ -292,7 +292,7 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
|
||||
<div class="box"></div>
|
||||
</wa-popup>
|
||||
|
||||
<wa-slider min="-50" max="50" step="1" value="0" label="Skidding"></wa-slider>
|
||||
<wa-range min="-50" max="50" step="1" value="0" label="Skidding"></wa-range>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@@ -311,7 +311,7 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
|
||||
.popup-skidding wa-slider {
|
||||
.popup-skidding wa-range {
|
||||
max-width: 260px;
|
||||
}
|
||||
</style>
|
||||
@@ -319,7 +319,7 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
|
||||
<script>
|
||||
const container = document.querySelector('.popup-skidding');
|
||||
const popup = container.querySelector('wa-popup');
|
||||
const skidding = container.querySelector('wa-slider');
|
||||
const skidding = container.querySelector('wa-range');
|
||||
|
||||
skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
|
||||
</script>
|
||||
@@ -747,8 +747,8 @@ When a gap exists between the anchor and the popup element, this option will add
|
||||
</wa-popup>
|
||||
<br>
|
||||
<wa-switch checked>Hover Bridge</wa-switch><br>
|
||||
<wa-slider min="0" max="50" step="1" value="10" label="Distance"></wa-slider>
|
||||
<wa-slider min="-50" max="50" step="1" value="0" label="Skidding"></wa-slider>
|
||||
<wa-range min="0" max="50" step="1" value="10" label="Distance"></wa-range>
|
||||
<wa-range min="-50" max="50" step="1" value="0" label="Skidding"></wa-range>
|
||||
</div>
|
||||
<style>
|
||||
.popup-hover-bridge span[slot='anchor'] {
|
||||
@@ -766,7 +766,7 @@ When a gap exists between the anchor and the popup element, this option will add
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
|
||||
.popup-hover-bridge wa-slider {
|
||||
.popup-hover-bridge wa-range {
|
||||
max-width: 260px;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
@@ -780,8 +780,8 @@ When a gap exists between the anchor and the popup element, this option will add
|
||||
const container = document.querySelector('.popup-hover-bridge');
|
||||
const popup = container.querySelector('wa-popup');
|
||||
const hoverBridge = container.querySelector('wa-switch');
|
||||
const distance = container.querySelector('wa-slider[label="Distance"]');
|
||||
const skidding = container.querySelector('wa-slider[label="Skidding"]');
|
||||
const distance = container.querySelector('wa-range[label="Distance"]');
|
||||
const skidding = container.querySelector('wa-range[label="Skidding"]');
|
||||
distance.addEventListener('wa-input', () => (popup.distance = distance.value));
|
||||
skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
|
||||
hoverBridge.addEventListener('wa-change', () => (popup.hoverBridge = hoverBridge.checked));
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
---
|
||||
title: Slider
|
||||
title: Range
|
||||
description: Ranges allow the user to select a single value within a given range using a slider.
|
||||
tags: [inputs, forms]
|
||||
native: slider
|
||||
icon: slider
|
||||
icon: range
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<wa-slider></wa-slider>
|
||||
<wa-range></wa-range>
|
||||
```
|
||||
|
||||
:::info
|
||||
@@ -21,7 +21,7 @@ This component works with standard `<form>` elements. Please refer to the sectio
|
||||
Use the `label` attribute to give the range an accessible label. For labels that contain HTML, use the `label` slot instead.
|
||||
|
||||
```html {.example}
|
||||
<wa-slider label="Volume" min="0" max="100"></wa-slider>
|
||||
<wa-range label="Volume" min="0" max="100"></wa-range>
|
||||
```
|
||||
|
||||
### Hint
|
||||
@@ -29,7 +29,7 @@ Use the `label` attribute to give the range an accessible label. For labels that
|
||||
Add descriptive hint to a range with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead.
|
||||
|
||||
```html {.example}
|
||||
<wa-slider label="Volume" hint="Controls the volume of the current song." min="0" max="100"></wa-slider>
|
||||
<wa-range label="Volume" hint="Controls the volume of the current song." min="0" max="100"></wa-range>
|
||||
```
|
||||
|
||||
### Min, Max, and Step
|
||||
@@ -37,7 +37,7 @@ Add descriptive hint to a range with the `hint` attribute. For hints that contai
|
||||
Use the `min` and `max` attributes to set the range's minimum and maximum values, respectively. The `step` attribute determines the value's interval when increasing and decreasing.
|
||||
|
||||
```html {.example}
|
||||
<wa-slider min="0" max="10" step="1"></wa-slider>
|
||||
<wa-range min="0" max="10" step="1"></wa-range>
|
||||
```
|
||||
|
||||
### Disabled
|
||||
@@ -45,7 +45,7 @@ Use the `min` and `max` attributes to set the range's minimum and maximum values
|
||||
Use the `disabled` attribute to disable a slider.
|
||||
|
||||
```html {.example}
|
||||
<wa-slider disabled></wa-slider>
|
||||
<wa-range disabled></wa-range>
|
||||
```
|
||||
|
||||
### Tooltip Placement
|
||||
@@ -53,7 +53,7 @@ Use the `disabled` attribute to disable a slider.
|
||||
By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it below the slider.
|
||||
|
||||
```html {.example}
|
||||
<wa-slider tooltip="bottom"></wa-slider>
|
||||
<wa-range tooltip="bottom"></wa-range>
|
||||
```
|
||||
|
||||
### Disable the Tooltip
|
||||
@@ -61,7 +61,7 @@ By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it be
|
||||
To disable the tooltip, set `tooltip` to `none`.
|
||||
|
||||
```html {.example}
|
||||
<wa-slider tooltip="none"></wa-slider>
|
||||
<wa-range tooltip="none"></wa-range>
|
||||
```
|
||||
|
||||
### Custom Track Colors
|
||||
@@ -69,12 +69,12 @@ To disable the tooltip, set `tooltip` to `none`.
|
||||
You can customize the active and inactive portions of the track using the `--track-color-active` and `--track-color-inactive` custom properties.
|
||||
|
||||
```html {.example}
|
||||
<wa-slider
|
||||
<wa-range
|
||||
style="
|
||||
--track-color-active: var(--wa-color-brand-fill-loud);
|
||||
--track-color-inactive: var(--wa-color-brand-fill-normal);
|
||||
"
|
||||
></wa-slider>
|
||||
></wa-range>
|
||||
```
|
||||
|
||||
### Custom Track Offset
|
||||
@@ -82,7 +82,7 @@ You can customize the active and inactive portions of the track using the `--tra
|
||||
You can customize the initial offset of the active track using the `--track-active-offset` custom property.
|
||||
|
||||
```html {.example}
|
||||
<wa-slider
|
||||
<wa-range
|
||||
min="-100"
|
||||
max="100"
|
||||
style="
|
||||
@@ -90,7 +90,7 @@ You can customize the initial offset of the active track using the `--track-acti
|
||||
--track-color-inactive: var(--wa-color-brand-fill-normal);
|
||||
--track-active-offset: 50%;
|
||||
"
|
||||
></wa-slider>
|
||||
></wa-range>
|
||||
```
|
||||
|
||||
### Custom Tooltip Formatter
|
||||
@@ -98,7 +98,7 @@ You can customize the initial offset of the active track using the `--track-acti
|
||||
You can change the tooltip's content by setting the `tooltipFormatter` property to a function that accepts the range's value as an argument.
|
||||
|
||||
```html {.example}
|
||||
<wa-slider min="0" max="100" step="1" class="range-with-custom-formatter"></wa-slider>
|
||||
<wa-range min="0" max="100" step="1" class="range-with-custom-formatter"></wa-range>
|
||||
|
||||
<script>
|
||||
const range = document.querySelector('.range-with-custom-formatter');
|
||||
@@ -111,8 +111,8 @@ You can change the tooltip's content by setting the `tooltipFormatter` property
|
||||
The component adapts to right-to-left (RTL) languages as you would expect.
|
||||
|
||||
```html {.example}
|
||||
<wa-slider dir="rtl"
|
||||
<wa-range dir="rtl"
|
||||
label="مقدار"
|
||||
hint="التحكم في مستوى صوت الأغنية الحالية."
|
||||
style="--track-color-active: var(--wa-color-brand-fill-loud)" value="10"></wa-slider>
|
||||
style="--track-color-active: var(--wa-color-brand-fill-loud)" value="10"></wa-range>
|
||||
```
|
||||
@@ -15,50 +15,9 @@ icon: tag
|
||||
|
||||
## Examples
|
||||
|
||||
### Appearance
|
||||
|
||||
Use the `size` attribute to change a tag's visual appearance.
|
||||
The default appearance is `outlined filled`.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<p>
|
||||
<wa-tag variant="brand" appearance="outlined accent">Outlined accent</wa-tag>
|
||||
<wa-tag variant="brand" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag variant="brand" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag variant="brand" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag variant="brand" appearance="outlined filled">Outlined Filled</wa-tag>
|
||||
</p>
|
||||
<p>
|
||||
<wa-tag variant="success" appearance="outlined accent">Outlined accent</wa-tag>
|
||||
<wa-tag variant="success" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag variant="success" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag variant="success" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag variant="success" appearance="outlined filled">Outlined Filled</wa-tag>
|
||||
<p>
|
||||
<wa-tag variant="neutral" appearance="outlined accent">Outlined accent</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="outlined filled">Outlined Filled</wa-tag>
|
||||
<p>
|
||||
<wa-tag variant="warning" appearance="outlined accent">Outlined accent</wa-tag>
|
||||
<wa-tag variant="warning" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag variant="warning" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag variant="warning" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag variant="warning" appearance="outlined filled">Outlined Filled</wa-tag>
|
||||
<p>
|
||||
<wa-tag variant="danger" appearance="outlined accent">Outlined accent</wa-tag>
|
||||
<wa-tag variant="danger" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag variant="danger" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag variant="danger" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag variant="danger" appearance="outlined filled">Outlined Filled</wa-tag>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
Use the `size` attribute to change a tag's size.
|
||||
Use the `size` attribute to change a tab's size.
|
||||
|
||||
```html {.example}
|
||||
<wa-tag size="small">Small</wa-tag>
|
||||
|
||||
@@ -15,9 +15,9 @@ Because these custom properties live at the page level, they're prefixed with `-
|
||||
To customize a theme, simply override any of these custom properties in your own stylesheet by scoping your styles to `:root`, `:host`, and, if needed, the class for the specific theme you want to override. Here's an example that changes the default brand color (blue) to violet in the light theme using existing [literal colors](/docs/theming/color/#literal-colors).
|
||||
|
||||
```css
|
||||
:where(:root),
|
||||
:root,
|
||||
:host,
|
||||
.wa-theme-default {
|
||||
.wa-theme-default-light {
|
||||
/* Changes the brand color to violet across the library */
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-violet-95);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-violet-90);
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
export default {
|
||||
eleventyComputed: {
|
||||
children(data) {
|
||||
let mainTag = data.tags?.[0];
|
||||
let collection = data.collections[mainTag] ?? [];
|
||||
|
||||
return collection.filter(item => item.data.parent === data.page.fileSlug);
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -15,7 +15,7 @@ Adding the `wa-valid` or `wa-invalid` class to a form control will change its ap
|
||||
<wa-option>Well, maybe two is OK</wa-option>
|
||||
</wa-select>
|
||||
<wa-textarea class="wa-valid" label="Bio" hint="Tell us about yourself" placeholder="Enter a bio"></wa-textarea><br>
|
||||
<wa-slider class="wa-valid" value="50" label="Volume" hint="Crank it up"></wa-slider><br>
|
||||
<wa-range class="wa-valid" value="50" label="Volume" hint="Crank it up"></wa-range><br>
|
||||
<wa-checkbox class="wa-valid" checked>I am awesome</wa-checkbox><br>
|
||||
<wa-checkbox class="wa-valid">So am I</wa-checkbox><br><br>
|
||||
<wa-switch class="wa-valid" checked>Still awesome</wa-switch><br>
|
||||
@@ -35,7 +35,7 @@ Adding the `wa-valid` or `wa-invalid` class to a form control will change its ap
|
||||
<wa-option>Well, maybe two is OK</wa-option>
|
||||
</wa-select>
|
||||
<wa-textarea class="wa-invalid" label="Bio" hint="Tell us about yourself" placeholder="Enter a bio"></wa-textarea><br>
|
||||
<wa-slider class="wa-invalid" value="50" label="Volume" hint="Crank it up"></wa-slider><br>
|
||||
<wa-range class="wa-invalid" value="50" label="Volume" hint="Crank it up"></wa-range><br>
|
||||
<wa-checkbox class="wa-invalid" checked>I am awesome</wa-checkbox><br>
|
||||
<wa-checkbox class="wa-invalid">So am I</wa-checkbox><br><br>
|
||||
<wa-switch class="wa-invalid" checked>Still awesome</wa-switch><br>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Theming Sandbox
|
||||
description: TODO
|
||||
layout: page-outline
|
||||
layout: page
|
||||
---
|
||||
|
||||
## Card
|
||||
@@ -132,7 +132,7 @@ layout: page-outline
|
||||
<br />
|
||||
<wa-switch checked>Switch on</wa-switch>
|
||||
<br /><br />
|
||||
<wa-slider label="Range" hint="Here's a bit of handy content." min="0" max="100"></wa-slider>
|
||||
<wa-range label="Range" hint="Here's a bit of handy content." min="0" max="100"></wa-range>
|
||||
<br /><br />
|
||||
<wa-input label="Label" hint="Super helpful and/or contextual content" placeholder="Placeholder"></wa-input>
|
||||
<br />
|
||||
@@ -172,7 +172,7 @@ layout: page-outline
|
||||
<div class="shadow" style="box-shadow: var(--wa-shadow-l);"></div>
|
||||
```
|
||||
|
||||
## Alignment Tests
|
||||
## Tests
|
||||
|
||||
```html {.example}
|
||||
<style>
|
||||
@@ -239,114 +239,17 @@ layout: page-outline
|
||||
<wa-badge>OCBS</wa-badge>
|
||||
<wa-avatar></wa-avatar>
|
||||
<wa-rating></wa-rating>
|
||||
<wa-slider></wa-slider>
|
||||
<wa-range></wa-range>
|
||||
<wa-icon-button name="gear" label="Settings"></wa-icon-button>
|
||||
<wa-progress-bar value="50" style="width: 8rem;"></wa-progress-bar>
|
||||
<wa-spinner></wa-spinner>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-input label="AaBbCc" hint="Ipsum"></wa-input>
|
||||
<wa-select label="AaBbCc" value="ocbs" multiple hint="Ipsum">
|
||||
<wa-input label="AaBbCc" hint="Lorem ipsum dolor"></wa-input>
|
||||
<wa-select label="AaBbCc" value="ocbs" multiple hint="Lorem ipsum dolor">
|
||||
<wa-option value="ocbs">OCBS</wa-option>
|
||||
</wa-select>
|
||||
<wa-color-picker label="AaBbCc" hint="Ipsum"></wa-color-picker>
|
||||
<wa-color-picker label="AaBbCc" hint="Lorem ipsum dolor"></wa-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Custom Property Tests
|
||||
|
||||
```html {.example}
|
||||
<style>
|
||||
.wa-theme-test {
|
||||
--wa-form-control-background-color: mistyrose;
|
||||
|
||||
--wa-form-control-border-style: dotted;
|
||||
--wa-form-control-border-width: 3px;
|
||||
--wa-form-control-border-radius: 12px;
|
||||
|
||||
--wa-form-control-activated-color: mediumvioletred;
|
||||
--wa-form-control-border-color: palevioletred;
|
||||
|
||||
--wa-form-control-label-color: rosybrown;
|
||||
--wa-form-control-label-font-weight: 900;
|
||||
--wa-form-control-label-line-height: 1;
|
||||
|
||||
--wa-form-control-value-color: brown;
|
||||
--wa-form-control-value-font-weight: 900;
|
||||
--wa-form-control-value-line-height: 2;
|
||||
|
||||
--wa-form-control-placeholder-color: lightpink;
|
||||
}
|
||||
</style>
|
||||
<div class="wa-theme-test" style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
|
||||
<label>Native Input <input type="text" placeholder="placeholder"></label>
|
||||
<wa-input label="WA Input" type="text" placeholder="placeholder"></wa-input>
|
||||
|
||||
<label>Native Input <input type="text" value="value"></label>
|
||||
<wa-input label="WA Input" type="text" value="value"></wa-input>
|
||||
|
||||
<label>Native Textarea <textarea placeholder="placeholder"></textarea></label>
|
||||
<wa-textarea label="WA Textarea" placeholder="placeholder"></wa-textarea>
|
||||
|
||||
<label>Native Textarea <textarea>value</textarea></label>
|
||||
<wa-textarea label="WA Textarea" value="value"></wa-textarea>
|
||||
|
||||
<label><input type="checkbox" checked> Native Checkbox</label>
|
||||
<wa-checkbox checked>WA Checkbox</wa-checkbox>
|
||||
|
||||
<label><input type="checkbox"> Native Checkbox</label>
|
||||
<wa-checkbox>WA Checkbox</wa-checkbox>
|
||||
|
||||
<label><input type="radio" checked> Native Radio</label>
|
||||
<wa-radio checked>WA Radio</wa-radio>
|
||||
|
||||
<label><input type="radio"> Native Radio</label>
|
||||
<wa-radio>WA Radio</wa-radio>
|
||||
|
||||
<label>
|
||||
Native Select
|
||||
<select value="option-1">
|
||||
<option value="option-1">Option 1</option>
|
||||
<option value="option-2">Option 2</option>
|
||||
<option value="option-3">Option 3</option>
|
||||
<option value="option-4">Option 4</option>
|
||||
</select>
|
||||
</label>
|
||||
<wa-select label="WA Select" value="option-1">
|
||||
<wa-option value="option-1">Option 1</wa-option>
|
||||
<wa-option value="option-2">Option 2</wa-option>
|
||||
<wa-option value="option-3">Option 3</wa-option>
|
||||
<wa-option value="option-4">Option 4</wa-option>
|
||||
</wa-select>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
## Text Controls Tests
|
||||
|
||||
```html {.example}
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
|
||||
<label>Native Input <input type="text" value="value"></label>
|
||||
<wa-input label="WA Input" type="text" value="value"></wa-input>
|
||||
|
||||
<label>
|
||||
Native Select
|
||||
<select value="option-1">
|
||||
<option value="option-1">Option 1</option>
|
||||
<option value="option-2">Option 2</option>
|
||||
<option value="option-3">Option 3</option>
|
||||
<option value="option-4">Option 4</option>
|
||||
</select>
|
||||
</label>
|
||||
<wa-select label="WA Select" value="option-1">
|
||||
<wa-option value="option-1">Option 1</wa-option>
|
||||
<wa-option value="option-2">Option 2</wa-option>
|
||||
<wa-option value="option-3">Option 3</wa-option>
|
||||
<wa-option value="option-4">Option 4</wa-option>
|
||||
</wa-select>
|
||||
|
||||
<label>Native Textarea <textarea>value</textarea></label>
|
||||
<wa-textarea label="WA Textarea" value="value"></wa-textarea>
|
||||
</div>
|
||||
```
|
||||
@@ -5,15 +5,6 @@ layout: page
|
||||
hasOutline: false
|
||||
---
|
||||
|
||||
<script>
|
||||
// Add stylesheet to set themed headers
|
||||
const themeHeadersLink = document.createElement("link");
|
||||
themeHeadersLink.type="text/css";
|
||||
themeHeadersLink.rel="stylesheet";
|
||||
themeHeadersLink.href="/assets/styles/theme-headers.css";
|
||||
document.getElementsByTagName("head")[0].appendChild(themeHeadersLink);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* turn off eleventy header anchors */
|
||||
.anchor-heading a {
|
||||
@@ -165,7 +156,7 @@ hasOutline: false
|
||||
--wa-form-control-border-radius: var(--wa-border-radius-m);
|
||||
|
||||
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
|
||||
--wa-form-control-border-color: var(--wa-color-neutral-border-normal);
|
||||
--wa-form-control-resting-color: var(--wa-color-neutral-border-normal);
|
||||
|
||||
--wa-form-control-label-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-label-font-weight: var(--wa-font-weight-normal);
|
||||
@@ -177,6 +168,16 @@ hasOutline: false
|
||||
|
||||
--wa-form-control-placeholder-color: color-mix(in oklab, var(--wa-color-text-normal), transparent);
|
||||
|
||||
--wa-form-control-height-s: calc(
|
||||
var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height)
|
||||
);
|
||||
--wa-form-control-height-m: calc(
|
||||
var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height)
|
||||
);
|
||||
--wa-form-control-height-l: calc(
|
||||
var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height)
|
||||
);
|
||||
|
||||
--wa-form-control-required-content: '*';
|
||||
--wa-form-control-required-content-color: inherit;
|
||||
--wa-form-control-required-content-offset: -0.1em;
|
||||
@@ -363,13 +364,13 @@ hasOutline: false
|
||||
/* file uploader styles */
|
||||
.file-uploader {
|
||||
position: relative;
|
||||
border: var(--wa-form-control-border-width) dashed var(--wa-form-control-border-color);
|
||||
border: var(--wa-form-control-border-width) dashed var(--wa-form-control-resting-color);
|
||||
border-radius: var(--wa-form-control-border-radius);
|
||||
background: var(--wa-form-control-background-color);
|
||||
cursor: pointer;
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
height: calc(var(--wa-form-control-height) + var(--wa-border-width-s) * 2);
|
||||
line-height: var(--wa-form-control-height);
|
||||
height: calc(var(--wa-form-control-height-m) + var(--wa-border-width-s) * 2);
|
||||
line-height: var(--wa-form-control-height-m);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -501,11 +502,11 @@ hasOutline: false
|
||||
</div>
|
||||
<wa-select name="theme" label="Pick a theme to start!" value="default">
|
||||
<wa-option value="default">Default</wa-option>
|
||||
<wa-option data-alpha="remove" value="awesome">Awesome</wa-option>
|
||||
<wa-option data-alpha="remove" value="fa">Font Awesome</wa-option>
|
||||
<wa-option data-alpha="remove" value="premium">Premium</wa-option>
|
||||
<wa-option data-alpha="remove" value="playful">Playful</wa-option>
|
||||
<wa-option data-alpha="remove" value="brutalist">Brutalist</wa-option>
|
||||
<wa-option data-alpha="remove" value="tailspin">Tailspin</wa-option>
|
||||
<wa-option data-alpha="remove" value="migration">Migration</wa-option>
|
||||
<wa-option data-alpha="remove" value="glassy">Glassy</wa-option>
|
||||
<wa-option data-alpha="remove" value="active">Active</wa-option>
|
||||
<wa-option value="classic">Classic</wa-option>
|
||||
@@ -660,10 +661,10 @@ hasOutline: false
|
||||
<wa-option value="dotted">Dotted</wa-option>
|
||||
<wa-option value="double">Double</wa-option>
|
||||
</wa-select>
|
||||
<wa-slider name="border-width" label="Border width" min="1" max="5" value="1" step="1" tooltip="none"></wa-slider>
|
||||
<wa-slider name="spacing" label="Spacing" min=".5" max="1.5" value="1" step="0.125" tooltip="none"></wa-slider>
|
||||
<wa-slider name="corners" label="Corners" min="0" max="1.5" value=".25" step=".125" tooltip="none"></wa-slider>
|
||||
<wa-slider name="depth" label="Depth" min="0" max="4" value="0" step="1" tooltip="none"></wa-slider>
|
||||
<wa-range name="border-width" label="Border width" min="1" max="5" value="1" step="1" tooltip="none"></wa-range>
|
||||
<wa-range name="spacing" label="Spacing" min=".5" max="1.5" value="1" step="0.125" tooltip="none"></wa-range>
|
||||
<wa-range name="corners" label="Corners" min="0" max="1.5" value=".25" step=".125" tooltip="none"></wa-range>
|
||||
<wa-range name="depth" label="Depth" min="0" max="4" value="0" step="1" tooltip="none"></wa-range>
|
||||
</wa-details>
|
||||
</form>
|
||||
|
||||
@@ -876,10 +877,10 @@ hasOutline: false
|
||||
|
||||
switch(themeSelect.value) {
|
||||
case 'classic':
|
||||
case 'tailspin':
|
||||
case 'migration':
|
||||
colorPalette = 'classic';
|
||||
break;
|
||||
case 'awesome':
|
||||
case 'fa':
|
||||
colorPalette = 'bright';
|
||||
break;
|
||||
case 'playful':
|
||||
@@ -1044,11 +1045,11 @@ hasOutline: false
|
||||
|
||||
switch(themeSelect.value) {
|
||||
case 'premium':
|
||||
case 'tailspin':
|
||||
case 'migration':
|
||||
case 'playful':
|
||||
case 'brutalist':
|
||||
case 'classic':
|
||||
case 'awesome':
|
||||
case 'fa':
|
||||
case 'glassy':
|
||||
case 'active':
|
||||
assetFolder = themeSelect.value;
|
||||
@@ -1244,7 +1245,7 @@ hasOutline: false
|
||||
let presetLogoIcons;
|
||||
|
||||
switch(themeSelect.value) {
|
||||
case 'awesome':
|
||||
case 'fa':
|
||||
presetLogoIcons = ['cupcake', 'camera-retro', 'rocket-launch', 'cookie-bite'];
|
||||
break;
|
||||
case 'premium':
|
||||
@@ -1256,7 +1257,7 @@ hasOutline: false
|
||||
case 'brutalist':
|
||||
presetLogoIcons = ['leaf', 'mug-hot', 'book-open', 'landmark'];
|
||||
break;
|
||||
case 'tailspin':
|
||||
case 'migration':
|
||||
presetLogoIcons = ['wind', 'feather', 'lemon', 'wind-turbine'];
|
||||
break;
|
||||
case 'glassy':
|
||||
@@ -1446,7 +1447,7 @@ hasOutline: false
|
||||
|
||||
function setPreferredIcons() {
|
||||
switch(themeSelect.value) {
|
||||
case 'awesome':
|
||||
case 'fa':
|
||||
iconFamily.value = 'fa-classic';
|
||||
iconStyle.value = 'solid';
|
||||
useFaIcons();
|
||||
@@ -1490,7 +1491,7 @@ hasOutline: false
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'tailspin':
|
||||
case 'migration':
|
||||
iconFamily.value = 'fa-classic';
|
||||
iconStyle.value = 'solid';
|
||||
useFaIcons();
|
||||
@@ -1663,7 +1664,7 @@ hasOutline: false
|
||||
|
||||
.preview-container {
|
||||
background: var(--wa-color-surface-lowered);
|
||||
container-type: inline-size;
|
||||
container: preview / inline-size;
|
||||
padding: 0;
|
||||
max-inline-size: 1400px;
|
||||
margin-inline: auto;
|
||||
@@ -1742,7 +1743,7 @@ hasOutline: false
|
||||
|
||||
/* strata product cards */
|
||||
|
||||
.products wa-card {
|
||||
.products wa-card::part(base) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -2123,7 +2124,7 @@ hasOutline: false
|
||||
<h3>Ontological Shock</h3>
|
||||
<p>The allegory is related to Plato's theory of Forms, which holds that the true essence of an object is not what we perceive with our senses, but rather its quality, and that most people perceive only the shadow of the object and are thus limited to false perception.</p>
|
||||
<pre class="codeblock">
|
||||
<code class="language-html"><html class="wa-dark">
|
||||
<code class="language-html"><html class="wa-theme-default-dark">
|
||||
<head>
|
||||
<link rel="stylesheet" href="path/to/webawesome/dist/styles/themes/dark.css" />
|
||||
</head>
|
||||
|
||||
27
docs/docs/layout.md
Normal file
27
docs/docs/layout.md
Normal file
@@ -0,0 +1,27 @@
|
||||
---
|
||||
title: Layout
|
||||
description: Browse Web Awesome's components and utilities for creating responsive web layouts.
|
||||
layout: page-outline
|
||||
categories: ["components", "utilities"]
|
||||
---
|
||||
|
||||
<style>
|
||||
wa-page > main {
|
||||
max-width: 120ch;
|
||||
margin-inline: auto;
|
||||
}
|
||||
.index-grid wa-card::part(header) {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-bottom: none;
|
||||
}
|
||||
wa-card .component-name,
|
||||
wa-card .page-name {
|
||||
font-size: var(--wa-font-size-s);
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
}
|
||||
</style>
|
||||
|
||||
<p style="max-width: 80ch">Layout components and utility classes help you organize content that can adapt to any device or screen size. Browse the collection of responsive layout tools included in Web Awesome Pro.</p>
|
||||
|
||||
{% set allPages = collections.layout %}
|
||||
{% include "grouped-pages.njk" %}
|
||||
@@ -1,7 +0,0 @@
|
||||
---
|
||||
title: Layout
|
||||
description: Layout components and utility classes help you organize content that can adapt to any device or screen size. Browse the collection of responsive layout tools included in Web Awesome Pro.
|
||||
layout: overview
|
||||
categories: ["components", "utilities"]
|
||||
override:tags: []
|
||||
---
|
||||
@@ -4,9 +4,6 @@ description: 'Button styles apply your Web Awesome theme to native HTML buttons.
|
||||
tags: forms
|
||||
component: button
|
||||
icon: button
|
||||
snippets:
|
||||
'<button>': https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
|
||||
'.wa-button': false
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,16 +1,20 @@
|
||||
---
|
||||
title: Native Styles
|
||||
description: Native Styles use your theme to style native HTML elements to match the look and feel of Web Awesome components.
|
||||
layout: overview
|
||||
layout: page-outline
|
||||
categories: ['forms', 'apps', 'content']
|
||||
override:tags: []
|
||||
---
|
||||
|
||||
{% markdown %}
|
||||
Web Awesome works _with_ the platform, rather than trying to reinvent it.
|
||||
If all you need is styles, you don’t need to use new `<wa-*>` elements!
|
||||
We also provide styles that make native HTML elements look good so you can continue using what you know and gradually adopt Web Awesome as you see fit.
|
||||
|
||||
{% set allPages = collections.native %}
|
||||
{% include "grouped-pages.njk" %}
|
||||
|
||||
<br> {# Temp fix for spacing issue #}
|
||||
|
||||
## Installation
|
||||
|
||||
To use all Web Awesome page styles (including [utilities](/docs/utilities/)), include the following stylesheet in your project:
|
||||
@@ -82,4 +86,3 @@ E.g. to opt-out of `<details>` styling:
|
||||
|
||||
If you find yourself opting out of entire element types too much, you could consider only including the parts of Native Styles you need instead of the whole thing.
|
||||
You can find instructions for how to do that on the individual Native Styles pages.
|
||||
{% endmarkdown %}
|
||||
@@ -3,8 +3,8 @@ title: Slider
|
||||
description: Sliders allow the user to select a single value within a given range using a slider.
|
||||
tags: forms
|
||||
layout: element
|
||||
icon: slider
|
||||
component: slider
|
||||
icon: range
|
||||
component: range
|
||||
elements:
|
||||
"<input type=range>": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
|
||||
---
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: App
|
||||
description: TODO
|
||||
layout: pattern.njk
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
@@ -1044,4 +1045,4 @@ TODO Page Description
|
||||
```
|
||||
### With templates
|
||||
|
||||
### With recommendations grid
|
||||
### With recommendations grid
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Blog
|
||||
description: TODO
|
||||
layout: pattern.njk
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
@@ -366,4 +367,4 @@ TODO Page Description
|
||||
}
|
||||
|
||||
</style>
|
||||
```
|
||||
```
|
||||
@@ -1,8 +1,9 @@
|
||||
---
|
||||
title: Business
|
||||
description: TODO
|
||||
layout: pattern.njk
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
|
||||
## Examples
|
||||
## Examples
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Category Filter
|
||||
title: E-commerce - Category Filter
|
||||
description: TODO
|
||||
parent: ecommerce
|
||||
tags: e-commerce
|
||||
layout: pattern.njk
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
@@ -10,4 +9,4 @@ TODO Page Description
|
||||
## With inline actions and expandable sidebar filters
|
||||
```html{.example}
|
||||
|
||||
```
|
||||
```
|
||||
@@ -1,12 +1,11 @@
|
||||
---
|
||||
title: Category Preview
|
||||
title: E-commerce - Category Preview
|
||||
description: TODO
|
||||
parent: ecommerce
|
||||
tags: e-commerce
|
||||
layout: pattern.njk
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
|
||||
## Three Column (WIP)
|
||||
|
||||
```
|
||||
```
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Order History
|
||||
title: E-commerce - Order History
|
||||
description: TODO
|
||||
parent: ecommerce
|
||||
tags: e-commerce
|
||||
layout: pattern.njk
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
@@ -11,4 +10,4 @@ TODO Page Description
|
||||
|
||||
```html{.example}
|
||||
|
||||
```
|
||||
```
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Product List
|
||||
title: E-commerce - Product List
|
||||
description: TODO
|
||||
parent: ecommerce
|
||||
tags: e-commerce
|
||||
layout: pattern.njk
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
@@ -10,4 +9,4 @@ TODO Page Description
|
||||
## With split image
|
||||
```html{.example}
|
||||
|
||||
```
|
||||
```
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Product Detail
|
||||
title: E-commerce - Product Detail
|
||||
description: TODO
|
||||
parent: ecommerce
|
||||
tags: e-commerce
|
||||
layout: pattern.njk
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Product Lists
|
||||
title: E-commerce - Product Lists
|
||||
description: TODO
|
||||
parent: ecommerce
|
||||
tags: e-commerce
|
||||
layout: pattern.njk
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Product Reviews
|
||||
title: E-commerce - Product Reviews
|
||||
description: TODO
|
||||
parent: ecommerce
|
||||
tags: e-commerce
|
||||
layout: pattern.njk
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
---
|
||||
title: Shopping Cart
|
||||
title: E-commerce - Shopping Cart
|
||||
description: TODO
|
||||
parent: ecommerce
|
||||
tags: e-commerce
|
||||
layout: pattern.njk
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
|
||||
## Examples
|
||||
## Examples
|
||||
@@ -2,7 +2,6 @@
|
||||
title: E-commerce
|
||||
description: TODO
|
||||
layout: page
|
||||
tags: e-commerce
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
---
|
||||
title: Business
|
||||
description: TODO
|
||||
layout: pattern.njk
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
|
||||
## Examples
|
||||
## Examples
|
||||
@@ -1,8 +1,9 @@
|
||||
---
|
||||
title: Entertainment
|
||||
description: TODO
|
||||
layout: pattern.njk
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
|
||||
## Examples
|
||||
## Examples
|
||||
5
docs/docs/patterns/index.md
Normal file
5
docs/docs/patterns/index.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
title: Patterns
|
||||
description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
|
||||
layout: page-outline
|
||||
---
|
||||
@@ -1,8 +0,0 @@
|
||||
---
|
||||
title: Patterns
|
||||
description: Patterns are reusable solutions to common design problems.
|
||||
layout: overview
|
||||
categories: ["e-commerce"]
|
||||
listChildren: true
|
||||
override:tags: []
|
||||
---
|
||||
@@ -1,8 +1,9 @@
|
||||
---
|
||||
title: Membership
|
||||
description: TODO
|
||||
layout: pattern.njk
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
|
||||
## Examples
|
||||
## Examples
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: News
|
||||
description: TODO
|
||||
layout: pattern.njk
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
@@ -156,4 +157,4 @@ TODO Page Description
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
```
|
||||
@@ -1,8 +1,9 @@
|
||||
---
|
||||
title: Non-profit
|
||||
description: TODO
|
||||
layout: pattern.njk
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
|
||||
## Examples
|
||||
## Examples
|
||||
@@ -1,5 +0,0 @@
|
||||
{
|
||||
"layout": "block.njk",
|
||||
"tags": ["patterns"],
|
||||
"noAlpha": true
|
||||
}
|
||||
@@ -1,8 +1,9 @@
|
||||
---
|
||||
title: Portfolio
|
||||
description: TODO
|
||||
layout: pattern.njk
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
|
||||
## Examples
|
||||
## Examples
|
||||
@@ -1,8 +1,9 @@
|
||||
---
|
||||
title: Product Landing
|
||||
description: TODO
|
||||
layout: pattern.njk
|
||||
---
|
||||
|
||||
TODO Page Description
|
||||
|
||||
## Examples
|
||||
## Examples
|
||||
@@ -12,27 +12,15 @@ Components with the <wa-badge variant="warning" pill>Experimental</wa-badge> bad
|
||||
During the alpha period, things might break! We take breaking changes very seriously, but sometimes they're necessary to make the final product that much better. We appreciate your patience!
|
||||
:::
|
||||
|
||||
## 3.0.0-alpha.8
|
||||
## Next
|
||||
|
||||
- Simplified the internal structure and CSS properties of `<wa-card>`, removed `base` part.
|
||||
- Added `appearance` to `<wa-callout>` and `<wa-tag>`
|
||||
- Fixed a bug in `<wa-switch>` where it would not properly change its "checked" state when its property changed.
|
||||
- Fixed a bug in `<wa-switch>` where the value would be incorrectly submitted as "on" when a value is provided and the switch is checked
|
||||
- Fixed a bug in the `wa-split` CSS utility that caused it to behave incorrectly
|
||||
- Improved performance of `<wa-select>` when using a large number of options
|
||||
- Updated the Japanese translation
|
||||
|
||||
### Theming
|
||||
|
||||
- Added new themes:
|
||||
- Awesome
|
||||
- Active
|
||||
- Brutalist
|
||||
- Mellow
|
||||
- Tailspin
|
||||
- Playful
|
||||
- Renamed `--wa-form-control-resting-color` to `--wa-form-control-border-color` for familiarity and accuracy
|
||||
- Removed size-based `--wa-form-control-height-*` tokens in favor of `--wa-form-control-height` (see [size utilities](/docs/utilities/size/))
|
||||
- Updated the `--wa-border-width-*` and `--wa-border-radius-*` scale for better DX
|
||||
- Changed the value of `--wa-border-width-scale` to `1` and updated calculations of size-based `--wa-border-width-*` tokens
|
||||
- Changed the value of `--wa-border-radius-scale` to `1` and updated calculations of size-based `--wa-border-radius-*` tokens
|
||||
@@ -159,4 +147,4 @@ Here's a list of some of the things that have changed since Shoelace v2. For que
|
||||
|
||||
Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome-alpha/discussions)
|
||||
|
||||
Are you coming from Shoelace? [The 2.x changelog can be found here.](https://shoelace.style/resources/changelog/)
|
||||
Are you coming from Shoelace? [The 2.x changelog can be found here.](https://shoelace.style/resources/changelog/)
|
||||
@@ -1,36 +0,0 @@
|
||||
---
|
||||
title: Styling Tests
|
||||
---
|
||||
|
||||
<h2>Appearance and variant tests</h2>
|
||||
|
||||
{% for component in componentsBy.attribute.variant %}
|
||||
{%- if component.attributes.appearance -%}
|
||||
<h3><a href="../{{ component.url }}"><code><{{ component.tagName }}></code></a></h3>
|
||||
|
||||
{% set variantValues = component.attributes.variant.type.text | getEnumValues %}
|
||||
{% set appearanceValues = component.attributes.appearance.type.text | getEnumValues %}
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Variant</th>
|
||||
{% for appearance in appearanceValues %}
|
||||
<th>{{ appearance }}</th>
|
||||
{%- endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
{% for variant in variantValues %}
|
||||
<tr>
|
||||
<th>{{ variant }}</th>
|
||||
{% for appearance in appearanceValues %}
|
||||
<td>
|
||||
<{{ component.tagName }} variant={{ variant }} appearance={{ appearance }}>{{ variant }} {{ appearance }}</{{ component.tagName }}>
|
||||
</td>
|
||||
{%- endfor %}
|
||||
</tr>
|
||||
{%- endfor %}
|
||||
</table>
|
||||
|
||||
{% endif %}
|
||||
{%- endfor %}
|
||||
139
docs/docs/themes.md
Normal file
139
docs/docs/themes.md
Normal file
@@ -0,0 +1,139 @@
|
||||
---
|
||||
title: Themes
|
||||
description: Everything you need to know about theming Web Awesome.
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
Themes are collections of pre-defined CSS custom properties that thread through every Web Awesome component and pattern.
|
||||
|
||||
Web Awesome includes two pre-made themes:
|
||||
- **Default** for a clean look that prioritizes accessibility and performance
|
||||
- **Classic** for the look and feel of Shoelace with more accessible color pairings
|
||||
|
||||
## What's a Theme?
|
||||
|
||||
Themes are a standard collection of [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) that cover all styles from colors to transitions. We use these custom properties throughout Web Awesome components to ensure a cohesive look and feel. Our [Theming pages](/docs/theming/) document these styles so that you can use them freely throughout your project and customize them as needed.
|
||||
|
||||
Themes are scoped to unique classes for each color scheme, such as `wa-theme-default-light` and `wa-theme-default-dark`, and the `:host` selector. Scoping to unique classes allows you to import multiple themes and use them interchangeably without collisions, while scoping to `:host` ensures the styles are applied to the shadow roots of custom elements.
|
||||
|
||||
Additionally, styles may be scoped to the `:root` selector to be activated automatically. For pre-made themes, *all* custom properties are scoped to both `:root` and the class for the light color scheme (`wa-theme-default-light` or `wa-theme-classic-light`), activating the light color scheme by default.
|
||||
|
||||
Other themes or color schemes must be activated with the corresponding class, like the dark color scheme for pre-made themes (`wa-theme-default-dark` or `wa-theme-classic-dark`), which only defines a subset of custom properties for colors. This ensures that non-color styles only need to be defined once for the theme, regardless of whether the color scheme is light or dark.
|
||||
|
||||
For example, the default theme is set up like this:
|
||||
|
||||
```css
|
||||
:root,
|
||||
:host,
|
||||
.wa-theme-default-light {
|
||||
/* all CSS custom properties for color, typography, space, etc. */
|
||||
}
|
||||
|
||||
.wa-theme-default-dark,
|
||||
.wa-theme-default-dark :host {
|
||||
/* subset of CSS custom properties for color */
|
||||
}
|
||||
```
|
||||
|
||||
## Using Themes
|
||||
|
||||
You can import the default and classic themes from the Web Awesome CDN. Simply add the following code to the `<head>` of your page to import the **default** theme:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/styles/themes/default.css" />
|
||||
```
|
||||
|
||||
Or import the **classic** theme:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/styles/themes/classic.css" />
|
||||
```
|
||||
|
||||
Both the default and classic themes include both light and dark color schemes. When importing either theme, the light color scheme is activated by default. To activate the dark color scheme, apply the appropriate class (`wa-theme-default-dark` or `wa-theme-classic-dark`, depending on theme) to the `<html>` element on your page, like this example for the default theme:
|
||||
```html
|
||||
<html class="wa-theme-default-dark">
|
||||
<head>
|
||||
<link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/default.css" />
|
||||
<!-- other links, scripts, and metadata -->
|
||||
</head>
|
||||
<body>
|
||||
<!-- page content -->
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Because themes are scoped to specific classes, you can activate different color schemes or entire themes on different containers throughout the page. This example uses the default theme with a dark sidebar.
|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/default.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="wa-theme-default-dark">
|
||||
<!-- dark-themed sidebar -->
|
||||
</nav>
|
||||
|
||||
<!-- light-themed content -->
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Creating Themes
|
||||
|
||||
There are two ways to create themes. The easiest way is to customize the default theme. The advanced way is to create a new theme from scratch. Which method you choose depends on your project's requirements and the amount of effort you're willing to invest.
|
||||
|
||||
### Customizing a Built-in Theme
|
||||
|
||||
Overriding the default theme is the easiest way to customize Web Awesome. You can do this by importing the default theme as-is, then creating a separate stylesheet that overrides [the theming API](/docs/customizing#design-tokens) and adds [component styles](/docs/customizing#css-parts) to your liking. You must import your theme _after_ the default theme.
|
||||
|
||||
If you're customizing the default light styles, scope your styles to the following selectors.
|
||||
|
||||
```css
|
||||
:root,
|
||||
:host,
|
||||
.wa-theme-default-light {
|
||||
/* your custom styles here */
|
||||
}
|
||||
```
|
||||
|
||||
If you're customizing the default dark styles, scope your styles to the following selectors.
|
||||
|
||||
```css
|
||||
:host,
|
||||
.wa-theme-default-dark {
|
||||
/* your custom styles here */
|
||||
}
|
||||
```
|
||||
|
||||
By customizing a built-in theme, you'll maintain a smaller stylesheet containing only the changes you've made. Contrast this to [creating a new theme](#creating-a-new-theme), where you need to explicitly define every custom property required by the library. This approach is more "future-proof," as new design tokens that emerge in subsequent versions of Web Awesome will be accounted for by built-in themes.
|
||||
|
||||
While this approach is easier to maintain, the drawback is that your theme can't be activated independently — it's tied to the built-in theme you're extending.
|
||||
|
||||
### Creating a New Theme
|
||||
|
||||
Creating a new theme is more of an undertaking than [customizing an existing one](#customizing-a-built-in-theme). At a minimum, you must implement all of the required custom properties. The easiest way to do this is by "forking" a built-in theme and modifying it from there.
|
||||
|
||||
Start by changing the selector to match your theme's name. Assuming your new theme is called "Purple Power", your theme should be scoped like this.
|
||||
|
||||
```css
|
||||
:host,
|
||||
.wa-theme-purple-power {
|
||||
/* your custom styles here */
|
||||
}
|
||||
```
|
||||
|
||||
By creating a new theme, you won't be relying on a built-in theme as a foundation. Because of this, you can activate it independently as an alternative to the default theme. This is the recommended approach if you're looking to open source your theme for others to use.
|
||||
|
||||
You will, however, need to maintain your theme more carefully, as new versions of Web Awesome change the theming API in ways that your theme won't have accounted for. It's recommended that you clearly specify which version(s) of Web Awesome your theme is designed to work with and keep it up to date as new versions of Web Awesome are released.
|
||||
|
||||
## Detecting Color Scheme Preference
|
||||
|
||||
Web Awesome's default theme has both light and dark styles built in. However, Web Awesome doesn't try to auto-detect the user's light/dark mode preference. This should be done at the application level. As a best practice, to provide a dark theme in your app, you should:
|
||||
|
||||
- Check for [`prefers-color-scheme`](https://stackoverflow.com/a/57795495/567486) and use its value by default
|
||||
- Allow the user to override the setting in your app
|
||||
- Remember the user's preference and restore it on subsequent logins
|
||||
|
||||
Web Awesome avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.
|
||||
6
docs/docs/themes/active.md
vendored
6
docs/docs/themes/active.md
vendored
@@ -1,6 +0,0 @@
|
||||
---
|
||||
title: Active
|
||||
description: Energetic and tactile, always in motion.
|
||||
isPro: true
|
||||
tags: pro
|
||||
---
|
||||
5
docs/docs/themes/awesome.md
vendored
5
docs/docs/themes/awesome.md
vendored
@@ -1,5 +0,0 @@
|
||||
---
|
||||
title: Awesome
|
||||
description: Punchy and vibrant, the rockstar of themes.
|
||||
order: 0.2
|
||||
---
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user