mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-14 04:59:15 +00:00
Compare commits
43 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
90c1417284 | ||
|
|
b512890f2a | ||
|
|
bc873afae8 | ||
|
|
6b07c9a040 | ||
|
|
24a76f6a7c | ||
|
|
89c0667e9c | ||
|
|
434084ea4e | ||
|
|
1738c6345b | ||
|
|
0ac7916a1b | ||
|
|
e7979991e3 | ||
|
|
07f70098f8 | ||
|
|
17146698db | ||
|
|
bf852b1296 | ||
|
|
e367c0ef29 | ||
|
|
01210ef364 | ||
|
|
40648e15fb | ||
|
|
ab67ecfad3 | ||
|
|
a07f6280a3 | ||
|
|
6822b25772 | ||
|
|
200188b0c3 | ||
|
|
bc6fe95f13 | ||
|
|
3a33fa208a | ||
|
|
3ec4e6de07 | ||
|
|
eb07dc1410 | ||
|
|
5bfeb8044e | ||
|
|
aa915c3e28 | ||
|
|
c79457a607 | ||
|
|
419f0610e4 | ||
|
|
7ab5ca8640 | ||
|
|
c39faff936 | ||
|
|
6d31db57f6 | ||
|
|
21ed4f82b0 | ||
|
|
844e374a72 | ||
|
|
e5f4c14608 | ||
|
|
1ad963f5ad | ||
|
|
4476117932 | ||
|
|
e52a7a5ce5 | ||
|
|
fa66f4262d | ||
|
|
a87f3627bb | ||
|
|
06e432589f | ||
|
|
b4c4074ae1 | ||
|
|
19042fcca4 | ||
|
|
8541369ae1 |
@@ -59,6 +59,8 @@ 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,6 +20,15 @@ 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) {
|
||||
@@ -32,8 +41,9 @@ export default function (eleventyConfig) {
|
||||
}
|
||||
|
||||
// Add template data
|
||||
eleventyConfig.addGlobalData('package', packageData);
|
||||
eleventyConfig.addGlobalData('isAlpha', isAlpha);
|
||||
for (let name in globalData) {
|
||||
eleventyConfig.addGlobalData(name, globalData[name]);
|
||||
}
|
||||
|
||||
// Template filters - {{ content | filter }}
|
||||
eleventyConfig.addFilter('inlineMarkdown', content => markdown.renderInline(content || ''));
|
||||
@@ -148,9 +158,18 @@ 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',
|
||||
},
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,91 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="{{ description }}">
|
||||
{% include 'head.njk' %}
|
||||
<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">
|
||||
<header slot="header" class="wa-split">
|
||||
{# Logo #}
|
||||
<div id="docs-branding">
|
||||
{# Nav toggle #}
|
||||
@@ -101,9 +35,9 @@
|
||||
<wa-badge variant="warning" appearance="filled" class="only-desktop">Alpha</wa-badge>
|
||||
</div>
|
||||
|
||||
<div id="docs-toolbar">
|
||||
<div id="docs-toolbar" class="wa-cluster wa-gap-xs">
|
||||
{# Desktop selectors #}
|
||||
<div class="only-desktop">
|
||||
<div class="only-desktop wa-cluster wa-gap-xs">
|
||||
{% include "preset-theme-selector.njk" %}
|
||||
{% include "color-scheme-selector.njk" %}
|
||||
</div>
|
||||
@@ -121,7 +55,7 @@
|
||||
{% if hasSidebar %}
|
||||
{# Mobile selectors #}
|
||||
<div class="wa-mobile-only" slot="navigation-header">
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));">
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
{% include "preset-theme-selector.njk" %}
|
||||
{% include "color-scheme-selector.njk" %}
|
||||
</div>
|
||||
@@ -149,22 +83,12 @@
|
||||
</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 beforeContent %}{% endblock %}
|
||||
{% block header %}
|
||||
{% include 'breadcrumbs.njk' %}
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
|
||||
{{ content | safe }}
|
||||
{% endblock %}
|
||||
|
||||
|
||||
10
docs/_includes/breadcrumbs.njk
Normal file
10
docs/_includes/breadcrumbs.njk
Normal file
@@ -0,0 +1,10 @@
|
||||
{% 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,15 +1,19 @@
|
||||
{# Color scheme selector #}
|
||||
<wa-dropdown id="color-scheme-selector">
|
||||
<wa-button slot="trigger" appearance="filled" size="small" pill caret title="Press \ to toggle">
|
||||
<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-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>
|
||||
<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>
|
||||
System
|
||||
</wa-option>
|
||||
</wa-select>
|
||||
|
||||
49
docs/_includes/head.njk
Normal file
49
docs/_includes/head.njk
Normal file
@@ -0,0 +1,49 @@
|
||||
<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 #}
|
||||
{% if forceTheme %}
|
||||
<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/{{ forceTheme }}.css" render="blocking" fetchpriority="high" />
|
||||
{% else %}
|
||||
<noscript><link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/default.css" render="blocking" fetchpriority="high" /></noscript>
|
||||
<script>
|
||||
{
|
||||
let preset = localStorage.presetTheme ?? 'default';
|
||||
let script = document.currentScript;
|
||||
script.insertAdjacentHTML('beforebegin', `<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/${ preset }.css" render="blocking" fetchpriority="high" />`);
|
||||
}
|
||||
</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,5 @@
|
||||
<div id="page_slots_demo">
|
||||
<link rel="stylesheet" href="/assets/examples/page-demo/demo.css">
|
||||
<link rel="stylesheet" href="./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(`/assets/examples/page-demo/demo.js?${cacheBust}`)
|
||||
import(`./demo.js?${cacheBust}`)
|
||||
</script>
|
||||
|
||||
@@ -1,19 +1,9 @@
|
||||
{# Preset theme selector #}
|
||||
<wa-dropdown class="preset-theme-selector">
|
||||
<wa-button slot="trigger" appearance="filled" size="small" pill caret>
|
||||
<wa-icon slot="prefix" name="paintbrush" variant="regular"></wa-icon>
|
||||
<span class="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 type="checkbox" value="awesome">Awesome</wa-menu-item>
|
||||
<wa-menu-item type="checkbox" value="active">Active</wa-menu-item>
|
||||
<wa-menu-item type="checkbox" value="brutalist">Brutalist</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="glassy">Glassy</wa-menu-item>
|
||||
<wa-menu-item type="checkbox" value="mellow">Mellow</wa-menu-item>
|
||||
<wa-menu-item 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>
|
||||
<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>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
{# 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 page.url) | attr('open') }}>
|
||||
{% set groupUrl %}/docs/{{ tag }}/{% endset %}
|
||||
<wa-details {{ ((tag in (tags or [])) or (groupUrl in page.url)) | 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>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% if not (isAlpha and page.data.noAlpha) and page.fileSlug != tag and not page.data.unlisted -%}
|
||||
<li>
|
||||
<a href="/docs/{{ tag }}/{{ page.fileSlug }}">{{ page.data.title }}</a>
|
||||
<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 %}
|
||||
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
<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>
|
||||
@@ -20,12 +19,13 @@
|
||||
</ul>
|
||||
|
||||
{% for tag, title in {
|
||||
'themes': 'Themes',
|
||||
'components': 'Components',
|
||||
'native': 'Native Styles',
|
||||
'utilities': 'Style Utilities',
|
||||
'layout': 'Layout',
|
||||
'patterns': 'Patterns',
|
||||
'theming': 'Theming'
|
||||
'tokens': 'Design Tokens'
|
||||
} %}
|
||||
{% include 'sidebar-group.njk' %}
|
||||
{% endfor %}
|
||||
|
||||
@@ -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: 596 B After Width: | Height: | Size: 596 B |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 502 B After Width: | Height: | Size: 502 B |
|
Before Width: | Height: | Size: 790 B After Width: | Height: | Size: 790 B |
|
Before Width: | Height: | Size: 697 B After Width: | Height: | Size: 697 B |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
144
docs/_includes/theme-showcase.njk
Normal file
144
docs/_includes/theme-showcase.njk
Normal file
@@ -0,0 +1,144 @@
|
||||
<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,62 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
|
||||
<head>
|
||||
<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>
|
||||
{% include 'head.njk' %}
|
||||
</head>
|
||||
<body class="layout-{{ layout | stripExtension }}">
|
||||
|
||||
{% block beforeContent %}{% endblock %}
|
||||
{% block header %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{{ content | safe }}
|
||||
|
||||
@@ -4,7 +4,8 @@
|
||||
{% extends '../_includes/base.njk' %}
|
||||
|
||||
{# Component header #}
|
||||
{% block beforeContent %}
|
||||
{% block header %}
|
||||
{% include 'breadcrumbs.njk' %}
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
<div class="block-info">
|
||||
{% set snippets = (elements or element or snippets or snippet) | dict %}
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
{% set hasSidebar = true %}
|
||||
{% set hasOutline = true %}
|
||||
|
||||
{% extends "../_includes/base-wide.njk" %}
|
||||
85
docs/_layouts/theme.njk
Normal file
85
docs/_layouts/theme.njk
Normal file
@@ -0,0 +1,85 @@
|
||||
{% 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 %}
|
||||
@@ -167,6 +167,9 @@ 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)));
|
||||
|
||||
|
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 |
@@ -1,59 +0,0 @@
|
||||
//
|
||||
// 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);
|
||||
})();
|
||||
68
docs/assets/scripts/preset-theme-picker.js
Normal file
68
docs/assets/scripts/preset-theme-picker.js
Normal file
@@ -0,0 +1,68 @@
|
||||
import { domChange, nextFrame, ThemeAspect } from './theme-picker.js';
|
||||
|
||||
const presetTheme = new ThemeAspect({
|
||||
defaultValue: 'default',
|
||||
key: 'presetTheme',
|
||||
picker: 'wa-select.preset-theme-selector',
|
||||
|
||||
applyChange(options = {}) {
|
||||
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', ...options },
|
||||
);
|
||||
},
|
||||
{ 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.addEventListener('turbo:render', e => {
|
||||
presetTheme.applyChange({ behavior: 'instant' });
|
||||
});
|
||||
|
||||
window.presetTheme = presetTheme;
|
||||
@@ -1,99 +0,0 @@
|
||||
(() => {
|
||||
function applyThemeChange(stylesheet, newStylesheet) {
|
||||
newStylesheet.rel = 'stylesheet';
|
||||
newStylesheet.id = stylesheet.id;
|
||||
requestAnimationFrame(() => {
|
||||
stylesheet.remove();
|
||||
});
|
||||
}
|
||||
|
||||
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',
|
||||
() => {
|
||||
const canUseViewTransitions =
|
||||
document.startViewTransition && !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
if (canUseViewTransitions) {
|
||||
document.startViewTransition(() => applyThemeChange(stylesheet, newStylesheet));
|
||||
} else {
|
||||
applyThemeChange(stylesheet, newStylesheet);
|
||||
}
|
||||
},
|
||||
{ once: true },
|
||||
);
|
||||
|
||||
document.head.append(newStylesheet);
|
||||
updateSelection();
|
||||
document.documentElement.classList.toggle(`wa-theme-${presetTheme}-dark`, window.isDark());
|
||||
}
|
||||
|
||||
function updateSelection(container = document) {
|
||||
const menus = container.querySelectorAll('.preset-theme-selector wa-menu');
|
||||
if (!menus) return;
|
||||
|
||||
[...menus].forEach(menu => {
|
||||
// Clear all checked states
|
||||
[...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
|
||||
await customElements.whenDefined(item.localName);
|
||||
await item.updateComplete;
|
||||
item.checked = false; // Reset all items to unchecked first
|
||||
});
|
||||
|
||||
// Then set only the selected item as checked
|
||||
const selectedItem = menu.querySelector(`wa-menu-item[value="${presetTheme}"]`);
|
||||
if (selectedItem) {
|
||||
customElements.whenDefined(selectedItem.localName).then(async () => {
|
||||
await selectedItem.updateComplete;
|
||||
selectedItem.checked = true;
|
||||
container.querySelector('.preset-theme-selector__text').textContent = selectedItem.innerText;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
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);
|
||||
});
|
||||
})();
|
||||
@@ -9,6 +9,7 @@ const icons = {
|
||||
component: 'puzzle-piece',
|
||||
document: 'file',
|
||||
home: 'house',
|
||||
native: 'code',
|
||||
theme: 'palette',
|
||||
};
|
||||
let searchTimeout;
|
||||
@@ -166,6 +167,7 @@ async function updateResults(query = '') {
|
||||
li.setAttribute('data-selected', index === 0 ? 'true' : 'false');
|
||||
|
||||
if (page.url === '/') icon = icons.home;
|
||||
if (page.url.startsWith('/docs/native')) icon = icons.native;
|
||||
if (page.url.startsWith('/docs/components')) icon = icons.component;
|
||||
if (page.url.startsWith('/docs/theme') || page.url.startsWith('/docs/restyle')) icon = icons.theme;
|
||||
|
||||
|
||||
37
docs/assets/scripts/sync-iframe-height.js
Normal file
37
docs/assets/scripts/sync-iframe-height.js
Normal file
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* 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';
|
||||
});
|
||||
}
|
||||
110
docs/assets/scripts/theme-picker.js
Normal file
110
docs/assets/scripts/theme-picker.js
Normal file
@@ -0,0 +1,110 @@
|
||||
// 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);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
// 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');
|
||||
}
|
||||
});
|
||||
@@ -1,6 +1,12 @@
|
||||
pre {
|
||||
background-color: var(--wa-color-gray-20);
|
||||
color: white;
|
||||
|
||||
/* Ensures a discernible background color in dark mode
|
||||
* Useful for themes that use gray-20 as --wa-color-surface-default */
|
||||
.wa-dark & {
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
}
|
||||
}
|
||||
.code-comment,
|
||||
.code-prolog,
|
||||
|
||||
@@ -10,8 +10,8 @@
|
||||
--wa-brand-grey: #30323b;
|
||||
}
|
||||
|
||||
html.wa-theme-default-dark .only-light,
|
||||
html:not(.wa-theme-default-dark) .only-dark {
|
||||
.wa-dark .only-light,
|
||||
.only-dark:not(.wa-dark, .wa-dark *) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -34,10 +34,6 @@ 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='/'] {
|
||||
@@ -215,6 +211,20 @@ 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;
|
||||
@@ -326,16 +336,18 @@ 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);
|
||||
--box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
|
||||
border-color: 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);
|
||||
@@ -370,6 +382,7 @@ wa-page > main:has(> .index-grid) {
|
||||
|
||||
/* Swatches */
|
||||
.swatch {
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
border-color: var(--wa-color-neutral-border-normal);
|
||||
border-style: var(--wa-border-style);
|
||||
@@ -379,6 +392,33 @@ wa-page > main:has(> .index-grid) {
|
||||
line-height: 2.5;
|
||||
height: 2.5em;
|
||||
padding-inline: var(--wa-space-xs);
|
||||
|
||||
wa-copy-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
--background-color-hover: transparent;
|
||||
font-family: var(--wa-font-family-code);
|
||||
|
||||
&::part(button) {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&::part(button):hover {
|
||||
cursor: copy;
|
||||
}
|
||||
|
||||
&::part(copy-icon),
|
||||
&::part(success-icon),
|
||||
&::part(error-icon) {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Layout Examples */
|
||||
@@ -443,3 +483,20 @@ 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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,6 +31,9 @@
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1199px) {
|
||||
wa-page [slot='aside'] {
|
||||
display: none;
|
||||
}
|
||||
#outline {
|
||||
padding-block: 0.25rem;
|
||||
margin-block-end: -1rem;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
*/
|
||||
|
||||
/* #region Default */
|
||||
html[class*='wa-theme-default'] .preview-container {
|
||||
html.wa-theme-default .preview-container {
|
||||
container-name: default-theme;
|
||||
}
|
||||
|
||||
@@ -58,12 +58,12 @@ html[class*='wa-theme-default'] .preview-container {
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Migration */
|
||||
html[class*='wa-theme-migration'] .preview-container {
|
||||
container-name: migration-theme;
|
||||
/* #region Tailspin */
|
||||
html.wa-theme-tailspin .preview-container {
|
||||
container-name: tailspin-theme;
|
||||
}
|
||||
|
||||
@container migration-theme (min-width: 0) {
|
||||
@container tailspin-theme (min-width: 0) {
|
||||
.project-header {
|
||||
background: var(--wa-color-surface-default);
|
||||
}
|
||||
@@ -139,7 +139,7 @@ html[class*='wa-theme-migration'] .preview-container {
|
||||
/* #endregion */
|
||||
|
||||
/* #region Brutalist */
|
||||
html[class*='wa-theme-brutalist'] .preview-container {
|
||||
html.wa-theme-brutalist .preview-container {
|
||||
container-name: brutalist-theme;
|
||||
}
|
||||
|
||||
@@ -268,7 +268,7 @@ html[class*='wa-theme-brutalist'] .preview-container {
|
||||
border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
|
||||
}
|
||||
|
||||
.wa-theme-brutalist-dark {
|
||||
.wa-theme-brutalist.wa-dark {
|
||||
& p a::before {
|
||||
background: var(--wa-color-yellow-40);
|
||||
}
|
||||
@@ -332,7 +332,7 @@ html[class*='wa-theme-brutalist'] .preview-container {
|
||||
/* #endregion */
|
||||
|
||||
/* #region Playful */
|
||||
html[class*='wa-theme-playful'] .preview-container {
|
||||
html.wa-theme-playful .preview-container {
|
||||
container-name: playful-theme;
|
||||
}
|
||||
|
||||
@@ -416,7 +416,7 @@ html[class*='wa-theme-playful'] .preview-container {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
}
|
||||
|
||||
&:not(.wa-theme-premium-dark) .message-composer wa-card {
|
||||
&:not(.wa-theme-premium.wa-dark) .message-composer wa-card {
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-gray-90);
|
||||
}
|
||||
|
||||
@@ -434,7 +434,7 @@ html[class*='wa-theme-playful'] .preview-container {
|
||||
}
|
||||
|
||||
.support-table wa-card {
|
||||
--background: var(--wa-color-surface-raised);
|
||||
background: var(--wa-color-surface-raised);
|
||||
}
|
||||
|
||||
.support-table th {
|
||||
@@ -469,13 +469,13 @@ html[class*='wa-theme-playful'] .preview-container {
|
||||
padding-block-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.wa-theme-playful-dark {
|
||||
.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);
|
||||
border-color: var(--wa-color-gray-30);
|
||||
}
|
||||
|
||||
& .message-composer wa-card::part(header) {
|
||||
@@ -505,7 +505,7 @@ html[class*='wa-theme-playful'] .preview-container {
|
||||
/* #endregion */
|
||||
|
||||
/* #region Active */
|
||||
html[class*='wa-theme-active'] .preview-container {
|
||||
html.wa-theme-active .preview-container {
|
||||
container-name: active-theme;
|
||||
}
|
||||
|
||||
@@ -578,7 +578,7 @@ html[class*='wa-theme-active'] .preview-container {
|
||||
/* #endregion */
|
||||
|
||||
/* #region Premium */
|
||||
html[class*='wa-theme-premium'] .preview-container {
|
||||
html.wa-theme-premium .preview-container {
|
||||
container-name: premium-theme;
|
||||
}
|
||||
|
||||
@@ -644,7 +644,7 @@ html[class*='wa-theme-premium'] .preview-container {
|
||||
}
|
||||
|
||||
.message-composer wa-card {
|
||||
--background: var(--wa-color-surface-raised);
|
||||
background: var(--wa-color-surface-raised);
|
||||
}
|
||||
|
||||
.message-composer wa-card::part(header) {
|
||||
@@ -652,7 +652,7 @@ html[class*='wa-theme-premium'] .preview-container {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
}
|
||||
|
||||
&:not(.wa-theme-premium-dark) .message-composer wa-card {
|
||||
&:not(.wa-theme-premium.wa-dark) .message-composer wa-card {
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-base-95);
|
||||
}
|
||||
|
||||
@@ -702,7 +702,7 @@ html[class*='wa-theme-premium'] .preview-container {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.wa-theme-premium-dark {
|
||||
.wa-theme-premium.wa-dark {
|
||||
& .message-composer .tools .grouped-buttons:not(:last-of-type) {
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-base-40);
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ title: Callout
|
||||
description: Callouts are used to display important messages inline.
|
||||
tags: [feedback, content]
|
||||
icon: callout
|
||||
native: callout
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -45,7 +45,7 @@ table code {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script type="module" src="/assets/scripts/cheatsheet.js"></script>
|
||||
<script type="module" src="./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") %}
|
||||
@@ -127,7 +127,7 @@ eleventyExcludeFromCollections: true
|
||||
</a>
|
||||
</nav>
|
||||
<header slot="main-header">
|
||||
<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-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-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-theme-default-dark">
|
||||
<wa-page class="wa-dark">
|
||||
<header slot="header">
|
||||
<div class="wa-cluster">
|
||||
<wa-icon-button name="bars" label="Menu" data-toggle-nav></wa-icon-button>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Page
|
||||
description: Pages offer an easy way to scaffold entire page layouts using minimal markup.
|
||||
tags: [organization, layout]
|
||||
tags: [pro, organization, layout]
|
||||
isPro: true
|
||||
order: 0
|
||||
# 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-theme-default-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-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-theme-default-dark">
|
||||
<wa-page class="wa-dark">
|
||||
<header slot="header">
|
||||
<div class="wa-cluster">
|
||||
<wa-icon-button name="bars" label="Menu" data-toggle-nav></wa-icon-button>
|
||||
|
||||
@@ -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="/assets/examples/page-demo/page.css">`;
|
||||
<link rel="stylesheet" href="./demo-page.css">`;
|
||||
|
||||
async function render() {
|
||||
await customElements.whenDefined('wa-checkbox');
|
||||
@@ -12,12 +12,12 @@ Web Awesome uses numerous CSS custom properties that make up a high-level themin
|
||||
|
||||
Because these custom properties live at the page level, they're prefixed with `--wa-` to avoid collisions with other libraries or your own custom properties.
|
||||
|
||||
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).
|
||||
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/tokens/color/#literal-colors).
|
||||
|
||||
```css
|
||||
:root,
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-default-light {
|
||||
.wa-theme-default {
|
||||
/* 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);
|
||||
|
||||
@@ -505,7 +505,7 @@ hasOutline: false
|
||||
<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="migration">Migration</wa-option>
|
||||
<wa-option data-alpha="remove" value="tailspin">Tailspin</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>
|
||||
@@ -876,7 +876,7 @@ hasOutline: false
|
||||
|
||||
switch(themeSelect.value) {
|
||||
case 'classic':
|
||||
case 'migration':
|
||||
case 'tailspin':
|
||||
colorPalette = 'classic';
|
||||
break;
|
||||
case 'awesome':
|
||||
@@ -1044,7 +1044,7 @@ hasOutline: false
|
||||
|
||||
switch(themeSelect.value) {
|
||||
case 'premium':
|
||||
case 'migration':
|
||||
case 'tailspin':
|
||||
case 'playful':
|
||||
case 'brutalist':
|
||||
case 'classic':
|
||||
@@ -1256,7 +1256,7 @@ hasOutline: false
|
||||
case 'brutalist':
|
||||
presetLogoIcons = ['leaf', 'mug-hot', 'book-open', 'landmark'];
|
||||
break;
|
||||
case 'migration':
|
||||
case 'tailspin':
|
||||
presetLogoIcons = ['wind', 'feather', 'lemon', 'wind-turbine'];
|
||||
break;
|
||||
case 'glassy':
|
||||
@@ -1490,7 +1490,7 @@ hasOutline: false
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'migration':
|
||||
case 'tailspin':
|
||||
iconFamily.value = 'fa-classic';
|
||||
iconStyle.value = 'solid';
|
||||
useFaIcons();
|
||||
@@ -1742,7 +1742,7 @@ hasOutline: false
|
||||
|
||||
/* strata product cards */
|
||||
|
||||
.products wa-card::part(base) {
|
||||
.products wa-card {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -2123,7 +2123,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-theme-default-dark">
|
||||
<code class="language-html"><html class="wa-dark">
|
||||
<head>
|
||||
<link rel="stylesheet" href="path/to/webawesome/dist/styles/themes/dark.css" />
|
||||
</head>
|
||||
|
||||
@@ -20,7 +20,7 @@ snippets:
|
||||
|
||||
### Variants
|
||||
|
||||
Use the variant utility classes to set the button's semantic variant.
|
||||
Use the [variant utility classes](../utilities/color.md) to set the button's semantic variant.
|
||||
|
||||
```html {.example}
|
||||
<button class="wa-neutral">Neutral</button>
|
||||
@@ -32,7 +32,7 @@ Use the variant utility classes to set the button's semantic variant.
|
||||
|
||||
### Appearance
|
||||
|
||||
Use the appearance utility classes to change the button's visual appearance:
|
||||
Use the [appearance utility classes](../utilities/appearance.md) to change the button's visual appearance:
|
||||
|
||||
```html {.example}
|
||||
<div style="margin-block-end: 1rem;">
|
||||
@@ -69,7 +69,7 @@ Use the appearance utility classes to change the button's visual appearance:
|
||||
|
||||
### Sizes
|
||||
|
||||
Use `wa-size-*` classes to change a button's size.
|
||||
Use the [size utility classes](../utilities/size.md) to change a button's size.
|
||||
|
||||
```html {.example}
|
||||
<button class="wa-size-s">Small</button>
|
||||
|
||||
116
docs/docs/native/callout.md
Normal file
116
docs/docs/native/callout.md
Normal file
@@ -0,0 +1,116 @@
|
||||
---
|
||||
title: Callout
|
||||
description: Callouts are used to display important messages inline.
|
||||
component: callout
|
||||
icon: callout
|
||||
snippets: '.wa-callout'
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<article class="wa-callout">
|
||||
This is a callout style, applied to a standard article element.
|
||||
</article>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Variants
|
||||
|
||||
Use the [variant utility classes](../utilities/color.md) to set the callout's color variant.
|
||||
|
||||
```html {.example}
|
||||
<article class="wa-callout wa-brand">
|
||||
<strong>This is super informative</strong><br />
|
||||
You can tell by how pretty the callout is.
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-success">
|
||||
<strong>Your changes have been saved</strong><br />
|
||||
You can safely exit the app now.
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-neutral">
|
||||
<strong>Your settings have been updated</strong><br />
|
||||
Settings will take effect on next login.
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-warning">
|
||||
<strong>Your session has ended</strong><br />
|
||||
Please login again to continue.
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-danger">
|
||||
<strong>Your account has been deleted</strong><br />
|
||||
We're very sorry to see you go!
|
||||
</article>
|
||||
```
|
||||
|
||||
### Appearance
|
||||
|
||||
Use the [appearance utility classes](../utilities/appearance.md) to change the callout's visual appearance (the default is `outlined filled`).
|
||||
|
||||
```html {.example}
|
||||
<article class="wa-callout wa-brand wa-outlined wa-accent">
|
||||
This <strong>accent</strong> callout is also <strong>outlined</strong>
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-brand wa-accent">
|
||||
This <strong>accent</strong> callout draws attention without an outline
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-brand wa-outlined wa-filled">
|
||||
This callout is both <strong>filled</strong> and <strong>outlined</strong>
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-brand wa-filled">
|
||||
This callout is only <strong>filled</strong>
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-brand wa-outlined">
|
||||
Here's an <strong>outlined</strong> callout
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-brand wa-plain">
|
||||
No bells and whistles on this <strong>plain</strong> callout
|
||||
</article>
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
Use the [size utility classes](../utilities/size.md) to change a callout's size.
|
||||
|
||||
```html {.example}
|
||||
<article class="wa-callout wa-brand wa-outlined wa-accent wa-size-l">
|
||||
This is meant to be very emphasized.
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout">
|
||||
Normal-sized callout.
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-plain wa-plain wa-size-s">
|
||||
Just a small tip!
|
||||
</article>
|
||||
```
|
||||
@@ -12,7 +12,14 @@ 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!
|
||||
:::
|
||||
|
||||
## Next
|
||||
|
||||
## 3.0.0-alpha.9
|
||||
|
||||
- Added `.wa-callout` utility class
|
||||
- Added new themes:
|
||||
- Premium
|
||||
|
||||
## 3.0.0-alpha.8
|
||||
|
||||
- Simplified the internal structure and CSS properties of `<wa-card>`, removed `base` part.
|
||||
- Added `appearance` to `<wa-callout>` and `<wa-tag>`
|
||||
@@ -29,8 +36,7 @@ During the alpha period, things might break! We take breaking changes very serio
|
||||
- Active
|
||||
- Brutalist
|
||||
- Mellow
|
||||
- Migration
|
||||
- Playful
|
||||
- Tailspin
|
||||
- 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
|
||||
|
||||
@@ -1,139 +0,0 @@
|
||||
---
|
||||
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.
|
||||
7
docs/docs/themes/active.md
vendored
Normal file
7
docs/docs/themes/active.md
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Active
|
||||
description: Energetic and tactile, always in motion.
|
||||
isPro: true
|
||||
tags: pro
|
||||
defaultPalette: rudimentary
|
||||
---
|
||||
6
docs/docs/themes/awesome.md
vendored
Normal file
6
docs/docs/themes/awesome.md
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Awesome
|
||||
description: Punchy and vibrant, the rockstar of themes.
|
||||
order: 0.2
|
||||
defaultPalette: bright
|
||||
---
|
||||
7
docs/docs/themes/brutalist.md
vendored
Normal file
7
docs/docs/themes/brutalist.md
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Brutalist
|
||||
description: Sharp, square, and unapologetically bold.
|
||||
isPro: true
|
||||
tags: pro
|
||||
defaultPalette: default
|
||||
---
|
||||
6
docs/docs/themes/classic.md
vendored
Normal file
6
docs/docs/themes/classic.md
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Classic
|
||||
description: Timeless elegance that never goes out of style.
|
||||
order: 0.1
|
||||
defaultPalette: classic
|
||||
---
|
||||
61
docs/docs/themes/creating.md
vendored
Normal file
61
docs/docs/themes/creating.md
vendored
Normal file
@@ -0,0 +1,61 @@
|
||||
---
|
||||
title: Creating Themes
|
||||
layout: page-outline
|
||||
order: 999
|
||||
override:tags: [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
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-default,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
/* your custom styles here */
|
||||
}
|
||||
```
|
||||
|
||||
If you're customizing the default dark styles, scope your styles to the following selectors.
|
||||
|
||||
```css
|
||||
.wa-dark,
|
||||
.wa-invert,
|
||||
:is(:host-context(.wa-dark)) {
|
||||
/* your custom styles here */
|
||||
}
|
||||
```
|
||||
|
||||
By customizing a built-in theme, you'll maintain a smaller stylesheet containing only your changes. 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
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-purple-power,
|
||||
.wa-light {
|
||||
/* 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.
|
||||
6
docs/docs/themes/default.md
vendored
Normal file
6
docs/docs/themes/default.md
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Default
|
||||
description: Your trusty companion, like a perfectly broken-in pair of jeans.
|
||||
order: 0
|
||||
defaultPalette: default
|
||||
---
|
||||
40
docs/docs/themes/demo.njk
vendored
Normal file
40
docs/docs/themes/demo.njk
vendored
Normal file
@@ -0,0 +1,40 @@
|
||||
---
|
||||
layout: blank
|
||||
pagination:
|
||||
data: collections.theme
|
||||
size: 1
|
||||
alias: theme
|
||||
permalink: '/docs/themes/{{ theme.fileSlug }}/demo.html'
|
||||
eleventyExcludeFromCollections: true
|
||||
override:tags: []
|
||||
eleventyComputed:
|
||||
forceTheme: "{{ theme.fileSlug }}"
|
||||
---
|
||||
<script>
|
||||
document.getElementById('theme-stylesheet').href = '/dist/styles/themes/{{ theme.fileSlug }}.css';
|
||||
</script>
|
||||
<script type=module>
|
||||
document.getElementById('theme-stylesheet').href = '/dist/styles/themes/{{ theme.fileSlug }}.css';
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet" href="/dist/styles/themes/{{ theme.fileSlug }}.css" />
|
||||
<link rel="stylesheet" href="/docs/themes/showcase.css" />
|
||||
|
||||
{% set content %}
|
||||
<header>
|
||||
{% include 'breadcrumbs.njk' %}
|
||||
<h1 class="title">{{ theme.data.title }}</h1>
|
||||
<p>{% include 'status.njk' %}</p>
|
||||
<p id="theme-showcase-description">{{ theme.data.description | inlineMarkdown | safe }}</p>
|
||||
</header>
|
||||
{% include 'theme-showcase.njk' %}
|
||||
{% endset %}
|
||||
|
||||
<wa-image-comparer style="width: 100%" position="90">
|
||||
<div slot="after" class="theme-showcase wa-gap-xl">
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
<div slot="before" class="theme-showcase wa-gap-xl wa-invert">
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
</wa-image-comparer>
|
||||
8
docs/docs/themes/glassy.md
vendored
Normal file
8
docs/docs/themes/glassy.md
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Glassy
|
||||
description: Smooth, sleek, and reflective.
|
||||
isPro: true
|
||||
tags: pro
|
||||
noAlpha: true
|
||||
defaultPalette: elegant
|
||||
---
|
||||
58
docs/docs/themes/index.njk
vendored
Normal file
58
docs/docs/themes/index.njk
vendored
Normal file
@@ -0,0 +1,58 @@
|
||||
---
|
||||
title: Themes
|
||||
description: Themes are collections of predefined CSS custom properties that thread through every Web Awesome component and pattern.
|
||||
layout: overview
|
||||
override:tags: []
|
||||
forTag: theme
|
||||
categories:
|
||||
other: Free
|
||||
pro: Pro
|
||||
---
|
||||
|
||||
<div class="max-line-length">
|
||||
{% markdown %}
|
||||
|
||||
## What's a Theme?
|
||||
|
||||
A theme is a collection of standardized [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*), also called "design tokens," that cover a range of styles from colors to transitions. We use these tokens throughout Web Awesome components for a cohesive look and feel. Our [Design Tokens pages](/docs/tokens/) document these styles so that you can use them freely throughout your project and customize them as needed.
|
||||
|
||||
Themes are scoped to unique classes, such as `wa-theme-default` or `wa-theme-classic`.
|
||||
Scoping to unique classes allows you to import multiple themes and use them interchangeably without collisions.
|
||||
Please note that if you import multiple themes, the last one will be the default that will apply if no class is used.
|
||||
|
||||
Each theme may also include both light and dark color schemes with the classes `wa-light` and `wa-dark`.
|
||||
You can use these classes to apply a specific color scheme to an entire page or just a section.
|
||||
You can also use `wa-invert` which behaves like `wa-dark` in light mode, and like `wa-light` in dark mode.
|
||||
In pre-made themes, we use a light color scheme by default.
|
||||
|
||||
|
||||
Additionally, styles may be scoped to the `:root` selector to be activated automatically.
|
||||
For pre-made themes, *all* custom properties are scoped to `:root`, the theme class, and `wa-light`.
|
||||
|
||||
Finally, we scope themes to `:host` and `:host-context()` to ensure the styles are applied to the shadow roots of custom elements.
|
||||
|
||||
For example, the default theme is set up like this:
|
||||
|
||||
```css
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-default,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
/* all CSS custom properties for color, typography, space, etc. */
|
||||
}
|
||||
|
||||
.wa-dark,
|
||||
.wa-invert,
|
||||
:host-context(.wa-dark) {
|
||||
/* subset of CSS custom properties for a dark color scheme */
|
||||
}
|
||||
```
|
||||
|
||||
## Using Themes
|
||||
|
||||
You can import pre-made themes from the Web Awesome CDN.
|
||||
Refer to each theme’s page for copyable code snippets.
|
||||
|
||||
{% endmarkdown %}
|
||||
</div>
|
||||
7
docs/docs/themes/mellow.md
vendored
Normal file
7
docs/docs/themes/mellow.md
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Mellow
|
||||
description: Soft and soothing, like a lazy Sunday morning.
|
||||
isPro: true
|
||||
tags: pro
|
||||
defaultPalette: natural
|
||||
---
|
||||
8
docs/docs/themes/playful.md
vendored
Normal file
8
docs/docs/themes/playful.md
vendored
Normal file
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Playful
|
||||
description: Fun, colorful, and full of personality.
|
||||
isPro: true
|
||||
tags: pro
|
||||
noAlpha: true
|
||||
defaultPalette: rudimentary
|
||||
---
|
||||
7
docs/docs/themes/premium.md
vendored
Normal file
7
docs/docs/themes/premium.md
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Premium
|
||||
description: The ultimate in sophistication and style.
|
||||
isPro: true
|
||||
tags: pro
|
||||
defaultPalette: anodized
|
||||
---
|
||||
90
docs/docs/themes/showcase.css
vendored
Normal file
90
docs/docs/themes/showcase.css
vendored
Normal file
@@ -0,0 +1,90 @@
|
||||
html {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
.theme-showcase {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.theme-showcase {
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
padding: var(--wa-space-xl);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
@media (width < 500px) {
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
header {
|
||||
min-width: min(25ch, 100vw);
|
||||
align-self: center;
|
||||
|
||||
h1 {
|
||||
margin-bottom: var(--wa-space-2xs);
|
||||
}
|
||||
|
||||
wa-breadcrumb-item:not(:first-of-type, :last-of-type) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
p:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.showcase-examples-wrapper {
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
}
|
||||
|
||||
.showcase-examples {
|
||||
column-gap: var(--wa-space-xl);
|
||||
|
||||
& wa-card {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
&:has(+ wa-card) {
|
||||
margin-block-end: var(--wa-space-xl);
|
||||
}
|
||||
}
|
||||
|
||||
@supports not (zoom: 1) {
|
||||
column-count: 1;
|
||||
|
||||
@media (width > 750px) {
|
||||
column-count: 2;
|
||||
}
|
||||
|
||||
@media (width > 950px) {
|
||||
column-count: 3;
|
||||
}
|
||||
}
|
||||
|
||||
@supports (zoom: 1) {
|
||||
column-count: 1;
|
||||
zoom: 40%;
|
||||
|
||||
@media (width > 350px) {
|
||||
column-count: 2;
|
||||
}
|
||||
|
||||
@media (width > 450px) {
|
||||
zoom: 55%;
|
||||
}
|
||||
|
||||
@media (width > 750px) {
|
||||
zoom: 70%;
|
||||
}
|
||||
|
||||
@media (width > 950px) {
|
||||
column-count: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
7
docs/docs/themes/tailspin.md
vendored
Normal file
7
docs/docs/themes/tailspin.md
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Tailspin
|
||||
description: Like a bird in flight, guiding you from there to here.
|
||||
isPro: true
|
||||
tags: pro
|
||||
defaultPalette: vogue
|
||||
---
|
||||
4
docs/docs/themes/themes.json
vendored
Normal file
4
docs/docs/themes/themes.json
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"layout": "theme.njk",
|
||||
"tags": ["themes", "theme"]
|
||||
}
|
||||
@@ -1,599 +0,0 @@
|
||||
---
|
||||
title: Color
|
||||
description: Ensure consistent use of color and readable contrast with Web Awesome's color properties.
|
||||
---
|
||||
|
||||
<style>
|
||||
td { vertical-align: middle; }
|
||||
|
||||
.color-name {
|
||||
font-weight: var(--wa-font-weight-semibold);
|
||||
margin-block-end: var(--wa-space-2xs);
|
||||
}
|
||||
ul.color-group {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.color-group {
|
||||
align-items: start;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 0.25em;
|
||||
}
|
||||
.color-group + * {
|
||||
margin-block-start: var(--wa-space-xl);
|
||||
}
|
||||
.color-preview {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.swatch {
|
||||
border-color: transparent;
|
||||
}
|
||||
.color-mix-example {
|
||||
background-image:
|
||||
linear-gradient(to right,
|
||||
color-mix(in oklab, transparent, var(--mix-color)) 25%,
|
||||
color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--mix-color)) 25%,
|
||||
color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--mix-color)) 75%,
|
||||
var(--wa-color-brand-fill-loud) 75%,
|
||||
var(--wa-color-brand-fill-loud))
|
||||
;
|
||||
border: none;
|
||||
color: var(--wa-color-brand-on-loud);
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Web Awesome's color system is made up of CSS custom properties to help with consistent color use throughout your project.
|
||||
|
||||
Color is organized by three main categories:
|
||||
|
||||
- [Literal colors](/#literal-colors) that give familiar names to your starting color palette
|
||||
- [Foundational colors](/#foundational-colors) that lay the groundwork for your theme
|
||||
- [Semantic colors](/#semantic-colors) that draw attention and convey meaning
|
||||
|
||||
|
||||
## Literal Colors
|
||||
|
||||
Literal colors are the lowest level color properties in your theme. Each color is identified by a name, like red or gray, and a number that roughly corresponds to the color's perceived lightness. On this scale, 100 is equal to pure white and 0 is equal to pure black.
|
||||
|
||||
Lightness values on this scale have a strong correlation to [relative luminance](https://www.w3.org/WAI/GL/wiki/Relative_luminance), which is used to calculate color contrast. To meet [WCAG 2.1 success criteria for minimum or enhanced contrast](https://www.w3.org/TR/WCAG21/#contrast-minimum), even across hues, calculate the difference between the lightness values of any two colors:
|
||||
|
||||
- A difference of 40 ensures a minimum 3:1 contrast ratio, suitable for large text and icons (AA)
|
||||
- A difference of 50 ensures a minimum 4.5:1 contrast ratio, suitable for normal text (AA) and large text (AAA)
|
||||
- A difference of 60 ensures a minimum 7:1 contrast ratio, suitable for all text (AAA)
|
||||
|
||||
Web Awesome defines seven literal colors each with 11 lightness values using the format `--wa-color-{hue}-{tint}`.
|
||||
|
||||
<div class="color-name">Red</div>
|
||||
<ul class="color-group">
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-red-95)"></div>
|
||||
<small>95</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-red-90)"></div>
|
||||
<small>90</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-red-80)"></div>
|
||||
<small>80</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-red-70)"></div>
|
||||
<small>70</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-red-60)"></div>
|
||||
<small>60</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-red-50)"></div>
|
||||
<small>50</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-red-40)"></div>
|
||||
<small>40</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-red-30)"></div>
|
||||
<small>30</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-red-20)"></div>
|
||||
<small>20</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-red-10)"></div>
|
||||
<small>10</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-red-05)"></div>
|
||||
<small>05</small>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="color-name">Yellow</div>
|
||||
<ul class="color-group">
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-yellow-95)"></div>
|
||||
<small>95</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-yellow-90)"></div>
|
||||
<small>90</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-yellow-80)"></div>
|
||||
<small>80</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-yellow-70)"></div>
|
||||
<small>70</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-yellow-60)"></div>
|
||||
<small>60</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-yellow-50)"></div>
|
||||
<small>50</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-yellow-40)"></div>
|
||||
<small>40</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-yellow-30)"></div>
|
||||
<small>30</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-yellow-20)"></div>
|
||||
<small>20</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-yellow-10)"></div>
|
||||
<small>10</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-yellow-05)"></div>
|
||||
<small>05</small>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="color-name">Green</div>
|
||||
<ul class="color-group">
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-green-95)"></div>
|
||||
<small>95</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-green-90)"></div>
|
||||
<small>90</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-green-80)"></div>
|
||||
<small>80</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-green-70)"></div>
|
||||
<small>70</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-green-60)"></div>
|
||||
<small>60</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-green-50)"></div>
|
||||
<small>50</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-green-40)"></div>
|
||||
<small>40</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-green-30)"></div>
|
||||
<small>30</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-green-20)"></div>
|
||||
<small>20</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-green-10)"></div>
|
||||
<small>10</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-green-05)"></div>
|
||||
<small>05</small>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="color-name">Teal</div>
|
||||
<ul class="color-group">
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-teal-95)"></div>
|
||||
<small>95</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-teal-90)"></div>
|
||||
<small>90</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-teal-80)"></div>
|
||||
<small>80</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-teal-70)"></div>
|
||||
<small>70</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-teal-60)"></div>
|
||||
<small>60</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-teal-50)"></div>
|
||||
<small>50</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-teal-40)"></div>
|
||||
<small>40</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-teal-30)"></div>
|
||||
<small>30</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-teal-20)"></div>
|
||||
<small>20</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-teal-10)"></div>
|
||||
<small>10</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-teal-05)"></div>
|
||||
<small>05</small>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="color-name">Blue</div>
|
||||
<ul class="color-group">
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-blue-95)"></div>
|
||||
<small>95</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-blue-90)"></div>
|
||||
<small>90</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-blue-80)"></div>
|
||||
<small>80</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-blue-70)"></div>
|
||||
<small>70</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-blue-60)"></div>
|
||||
<small>60</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-blue-50)"></div>
|
||||
<small>50</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-blue-40)"></div>
|
||||
<small>40</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-blue-30)"></div>
|
||||
<small>30</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-blue-20)"></div>
|
||||
<small>20</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-blue-10)"></div>
|
||||
<small>10</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-blue-05)"></div>
|
||||
<small>05</small>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="color-name">Indigo</div>
|
||||
<ul class="color-group">
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-indigo-95)"></div>
|
||||
<small>95</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-indigo-90)"></div>
|
||||
<small>90</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-indigo-80)"></div>
|
||||
<small>80</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-indigo-70)"></div>
|
||||
<small>70</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-indigo-60)"></div>
|
||||
<small>60</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-indigo-50)"></div>
|
||||
<small>50</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-indigo-40)"></div>
|
||||
<small>40</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-indigo-30)"></div>
|
||||
<small>30</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-indigo-20)"></div>
|
||||
<small>20</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-indigo-10)"></div>
|
||||
<small>10</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-indigo-05)"></div>
|
||||
<small>05</small>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="color-name">Violet</div>
|
||||
<ul class="color-group">
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-violet-95)"></div>
|
||||
<small>95</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-violet-90)"></div>
|
||||
<small>90</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-violet-80)"></div>
|
||||
<small>80</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-violet-70)"></div>
|
||||
<small>70</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-violet-60)"></div>
|
||||
<small>60</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-violet-50)"></div>
|
||||
<small>50</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-violet-40)"></div>
|
||||
<small>40</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-violet-30)"></div>
|
||||
<small>30</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-violet-20)"></div>
|
||||
<small>20</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-violet-10)"></div>
|
||||
<small>10</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-violet-05)"></div>
|
||||
<small>05</small>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="color-name">Gray</div>
|
||||
<ul class="color-group">
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-gray-95)"></div>
|
||||
<small>95</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-gray-90)"></div>
|
||||
<small>90</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-gray-80)"></div>
|
||||
<small>80</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-gray-70)"></div>
|
||||
<small>70</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-gray-60)"></div>
|
||||
<small>60</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-gray-50)"></div>
|
||||
<small>50</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-gray-40)"></div>
|
||||
<small>40</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-gray-30)"></div>
|
||||
<small>30</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-gray-20)"></div>
|
||||
<small>20</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-gray-10)"></div>
|
||||
<small>10</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-gray-05)"></div>
|
||||
<small>05</small>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
## Foundational Colors
|
||||
|
||||
Foundational colors lay the groundwork for the content and structure of your project. These colors are named according to their role in your theme.
|
||||
|
||||
### Surfaces
|
||||
|
||||
Surfaces are background layers that other content rests on. Surface colors help convey hierarchy through a sense of elevation, where `--wa-color-surface-raised` is the closest to the user (e.g., dialogs and popup menus) and `--wa-color-surface-lowered` is the farthest away (e.g., wells).
|
||||
|
||||
| Custom Property | Preview |
|
||||
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `--wa-color-surface-raised` | <div class="swatch" style="background-color: var(--wa-color-surface-raised); box-shadow:var(--wa-shadow-s)"></div> |
|
||||
| `--wa-color-surface-default` | <div class="swatch" style="background-color: var(--wa-color-surface-default)"></div> |
|
||||
| `--wa-color-surface-lowered` | <div class="swatch" style="background-color: var(--wa-color-surface-lowered); box-shadow: inset var(--wa-shadow-s)"></div> |
|
||||
| `--wa-color-surface-border` | <div class="swatch" style="border-color: var(--wa-color-surface-border)"></div> |
|
||||
|
||||
### Text
|
||||
|
||||
Text colors are used for standard text elements. We recommend a minimum 4.5:1 contrast ratio between text colors and surface colors.
|
||||
|
||||
| Custom Property | Preview |
|
||||
| ------------------------ | ---------------------------------------------------------- |
|
||||
| `--wa-color-text-normal` | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-normal); display: inline-block;">AaBb</div> |
|
||||
| `--wa-color-text-quiet` | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-quiet); display: inline-block;">AaBb</div> |
|
||||
| `--wa-color-text-link` | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-link); display: inline-block;">AaBb</div> |
|
||||
|
||||
### Overlays
|
||||
|
||||
Overlays provide a backdrop to isolate content, often allowing background context to show through.
|
||||
|
||||
| Custom Property | Preview |
|
||||
| --------------------------- | ----------------------------------------------------------------------------------- |
|
||||
| `--wa-color-overlay-modal` | <div class="swatch" style="background-color: var(--wa-color-overlay-modal)"></div> |
|
||||
| `--wa-color-overlay-inline` | <div class="swatch" style="background-color: var(--wa-color-overlay-inline)"></div> |
|
||||
|
||||
### Shadow
|
||||
|
||||
Web Awesome uses a single color for all shadows. This is used alongside other [shadow properties](/docs/theming/shadows) to construct your theme's shadows.
|
||||
|
||||
| Custom Property | Preview |
|
||||
| ------------------- | --------------------------------------------------------------------------- |
|
||||
| `--wa-color-shadow` | <div class="swatch" style="background-color: var(--wa-color-shadow)"></div> |
|
||||
|
||||
### Interactions
|
||||
|
||||
#### Focus
|
||||
|
||||
Web Awesome uses a single focus color for predictable keyboard navigation. This is used alongside other [focus properties](/docs/theming/focus) to construct `--wa-focus-ring`. We recommend a minimum 3:1 contrast ratio against surface colors and background colors wherever possible.
|
||||
|
||||
| Custom Property | Preview |
|
||||
| ------------------ | ----------------------------------------------------------------------------------------------------------------------- |
|
||||
| `--wa-color-focus` | <div class="swatch" value="--wa-color-focus" style="outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus)"></div> |
|
||||
|
||||
#### Hover and Active
|
||||
|
||||
Web Awesome leverages `color-mix()` to achieve consistent hover and active states across components without the need for untold numbers of handpicked colors. Through `color-mix()`, these custom properties contextually generate hover and active colors based on the color of the component.
|
||||
|
||||
| Custom Property | Preview |
|
||||
| ----------------------- | ---------------------------------------------------------------------------------------------------------------- |
|
||||
| `--wa-color-mix-hover` | <div class="swatch color-mix-example" value="--wa-color-mix-hover" style="--mix-color: var(--wa-color-mix-hover)"><small>mixed</small></div> |
|
||||
| `--wa-color-mix-active` | <div class="swatch color-mix-example" value="--wa-color-mix-active" style="--mix-color: var(--wa-color-mix-active)"><small>mixed</small></div> |
|
||||
|
||||
|
||||
## Semantic Colors
|
||||
|
||||
Semantic colors reinforce a specific message, intended usage, or expected results through familiar, meaningful hues. Each color is identified by its semantic group, role, and attention using the format `--wa-color-{group}-{role}-{attention}`. There are five groups of semantic colors:
|
||||
- **Brand** to emphasize your brand color
|
||||
- **Success** for validity or confirmation
|
||||
- **Neutral** for ordinary or inactive content
|
||||
- **Warning** for caution or uncertainty
|
||||
- **Danger** for errors or risk
|
||||
|
||||
Each group defines colors for specific roles so that colors can be easily assembled with predictable results and readable contrast. There are three roles:
|
||||
- **Fill** for background colors or areas larger than a few pixels
|
||||
- **Border** for borders, dividers, and other stroke-width elements
|
||||
- **On** for content displayed on a fill (e.g., pair `--wa-color-danger-on-loud` with `--wa-color-danger-fill-loud`)
|
||||
|
||||
Finally, each color is named according to how much attention it draws. Here, we use noise as an analogy: a loud noise draws more attention than a quiet one. There are three levels of attention:
|
||||
- **Quiet** draws the least attention
|
||||
- **Normal** draws some attention
|
||||
- **Loud** draws the most attention
|
||||
|
||||
| Custom Property | <code>brand</code> | <code>success</code> | <code>neutral</code> | <code>warning</code> | <code>danger</code> |
|
||||
| ---------------------------- | ------------------- | --------------------- | --------------------- | --------------------- | ------------------- |
|
||||
| `--wa-color-*-fill-quiet` | <div class="swatch" style="background-color: var(--wa-color-brand-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-quiet)"></div> |
|
||||
| `--wa-color-*-fill-normal` | <div class="swatch" style="background-color: var(--wa-color-brand-fill-normal)"></div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-normal)"></div> |<div class="swatch" style="background-color: var(--wa-color-neutral-fill-normal)"></div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-normal)"></div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-normal)"></div> |
|
||||
| `--wa-color-*-fill-loud` | <div class="swatch" style="background-color: var(--wa-color-brand-fill-loud)"></div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-loud)"></div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-loud)"></div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-loud)"></div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-loud)"></div> |
|
||||
| `--wa-color-*-border-quiet` | <div class="swatch" value="--wa-color-brand-border-quiet" style="border-color: var(--wa-color-brand-border-quiet)"></div> | <div class="swatch" value="--wa-color-success-border-quiet" style="border-color: var(--wa-color-success-border-quiet)"></div> | <div class="swatch" value="--wa-color-success-border-quiet" style="border-color: var(--wa-color-neutral-border-quiet)"></div> | <div class="swatch" value="--wa-color-warning-border-quiet" style="border-color: var(--wa-color-warning-border-quiet)"></div> | <div class="swatch" value="--wa-color-danger-border-quiet" style="border-color: var(--wa-color-danger-border-quiet)"></div> |
|
||||
| `--wa-color-*-border-normal` | <div class="swatch" value="--wa-color-brand-border-normal" style="border-color: var(--wa-color-brand-border-normal)"></div> | <div class="swatch" value="--wa-color-success-border-normal" style="border-color: var(--wa-color-success-border-normal)"></div> | <div class="swatch" value="--wa-color-success-border-normal" style="border-color: var(--wa-color-neutral-border-normal)"></div> | <div class="swatch" value="--wa-color-warning-border-normal" style="border-color: var(--wa-color-warning-border-normal)"></div> | <div class="swatch" value="--wa-color-danger-border-normal" style="border-color: var(--wa-color-danger-border-normal)"></div> |
|
||||
| `--wa-color-*-border-loud` | <div class="swatch" value="--wa-color-brand-border-loud" style="border-color: var(--wa-color-brand-border-loud)"></div> | <div class="swatch" value="--wa-color-success-border-loud" style="border-color: var(--wa-color-success-border-loud)"></div> | <div class="swatch" value="--wa-color-success-border-loud" style="border-color: var(--wa-color-neutral-border-loud)"></div> | <div class="swatch" value="--wa-color-warning-border-loud" style="border-color: var(--wa-color-warning-border-loud)"></div> | <div class="swatch" value="--wa-color-danger-border-loud" style="border-color: var(--wa-color-danger-border-loud)"></div> |
|
||||
| `--wa-color-*-on-quiet` | <div class="swatch" value="--wa-color-brand-on-quiet" style="background-color: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet)">AaBb</div> | <div class="swatch" value="--wa-color-success-on-quiet" style="background-color: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet)">AaBb</div> | <div class="swatch" value="--wa-color-neutral-on-quiet" style="background-color: var(--wa-color-neutral-fill-quiet); color: var(--wa-color-neutral-on-quiet)">AaBb</div> | <div class="swatch" value="--wa-color-warning-on-quiet" style="background-color: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet)">AaBb</div> | <div class="swatch" value="--wa-color-danger-on-quiet" style="background-color: var(--wa-color-danger-fill-quiet); color: var(--wa-color-danger-on-quiet)">AaBb</div> |
|
||||
| `--wa-color-*-on-normal` | <div class="swatch" value="--wa-color-brand-on-normal" style="background-color: var(--wa-color-brand-fill-normal); color: var(--wa-color-brand-on-normal)">AaBb</div> | <div class="swatch" value="--wa-color-success-on-normal" style="background-color: var(--wa-color-success-fill-normal); color: var(--wa-color-success-on-normal)">AaBb</div> | <div class="swatch" value="--wa-color-neutral-on-normal" style="background-color: var(--wa-color-neutral-fill-normal); color: var(--wa-color-neutral-on-normal)">AaBb</div> | <div class="swatch" value="--wa-color-warning-on-normal" style="background-color: var(--wa-color-warning-fill-normal); color: var(--wa-color-warning-on-normal)">AaBb</div> | <div class="swatch" value="--wa-color-warning-on-normal" style="background-color: var(--wa-color-danger-fill-normal); color: var(--wa-color-danger-on-normal)">AaBb</div> |
|
||||
| `--wa-color-*-on-loud` | <div class="swatch" value="--wa-color-brand-on-loud" style="background-color: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud)">AaBb</div> | <div class="swatch" value="--wa-color-success-on-loud" style="background-color: var(--wa-color-success-fill-loud); color: var(--wa-color-success-on-loud)">AaBb</div> | <div class="swatch" value="--wa-color-neutral-on-loud" style="background-color: var(--wa-color-neutral-fill-loud); color: var(--wa-color-neutral-on-loud)">AaBb</div> | <div class="swatch" value="--wa-color-warning-on-loud" style="background-color: var(--wa-color-warning-fill-loud); color: var(--wa-color-warning-on-loud)">AaBb</div> | <div class="swatch" value="--wa-color-danger-on-loud" style="background-color: var(--wa-color-danger-fill-loud); color: var(--wa-color-danger-on-loud)">AaBb</div> |
|
||||
|
||||
<style>
|
||||
.swatch {
|
||||
position: relative;
|
||||
}
|
||||
.swatch wa-copy-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.swatch wa-copy-button::part(button) {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.swatch wa-copy-button {
|
||||
--background-color-hover: transparent;
|
||||
font-family: var(--wa-font-family-code);
|
||||
}
|
||||
|
||||
.swatch wa-copy-button::part(button):hover {
|
||||
cursor: copy;
|
||||
}
|
||||
|
||||
.swatch wa-copy-button::part(copy-icon),
|
||||
.swatch wa-copy-button::part(success-icon),
|
||||
.swatch wa-copy-button::part(error-icon) {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="module">
|
||||
const computedStyle = getComputedStyle(document.body)
|
||||
document.querySelectorAll(".swatch").forEach((swatch) => {
|
||||
let varName = swatch.getAttribute("value")
|
||||
|
||||
if (!varName) {
|
||||
const bgColor = swatch.style.backgroundColor
|
||||
varName = bgColor.replace(/^var\((--.*)\)$/, "$1")
|
||||
}
|
||||
|
||||
const copyButton = Object.assign(document.createElement("wa-copy-button"), {
|
||||
value: varName,
|
||||
copyLabel: varName,
|
||||
errorLabel: "Whoops, your browser doesn't support this!",
|
||||
})
|
||||
|
||||
swatch.appendChild(copyButton)
|
||||
})
|
||||
</script>
|
||||
@@ -1,6 +0,0 @@
|
||||
---
|
||||
title: Theming
|
||||
description: A theme is a collection of pre-defined CSS custom properties that control global styles from color to shadows. These custom properties thread through all Web Awesome components for a consistent look and feel.
|
||||
layout: overview
|
||||
override:tags: []
|
||||
---
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"layout": "page-outline.njk",
|
||||
"tags": ["theming"],
|
||||
"eleventyComputed": {
|
||||
"icon": "theming/{{ page.fileSlug }}"
|
||||
}
|
||||
}
|
||||
@@ -21,7 +21,7 @@ Border widths use `rem` units in order to scale proportionately with the root fo
|
||||
| `--wa-border-width-m` | `0.125rem` <small>(2px)</small> | <div class="swatch" style="border-width: var(--wa-border-width-m)"></div> |
|
||||
| `--wa-border-width-l` | `0.1875rem` <small>(3px)</small> | <div class="swatch" style="border-width: var(--wa-border-width-l)"></div> |
|
||||
|
||||
To scale all borders at once, you can use the `--wa-border-width-scale` property which specifies a multiplier on `border-width`.
|
||||
To scale all borders at once, you can use the `--wa-border-width-scale` property which specifies a multiplier on `border-width`.
|
||||
Values < 1 make all borders uniformly thinner, while values > 1 make them thicker.
|
||||
|
||||
## Radius
|
||||
@@ -44,5 +44,5 @@ Size-based border radius properties allow you to customize the overall roundness
|
||||
| `--wa-border-radius-m` | `0.375rem` <small>(6px)</small> | <div class="swatch" style="border-radius: var(--wa-border-radius-m)"></div> |
|
||||
| `--wa-border-radius-l` | `0.75rem` <small>(12px)</small> | <div class="swatch" style="border-radius: var(--wa-border-radius-l)"></div> |
|
||||
|
||||
To scale all border radii at once, you can use the `--wa-border-radius-scale` property which specifies a multiplier on `border-radius`.
|
||||
Values < 1 make corners sharper, while values > 1 make them rounder.
|
||||
To scale all border radii at once, you can use the `--wa-border-radius-scale` property which specifies a multiplier on `border-radius`.
|
||||
Values < 1 make corners sharper, while values > 1 make them rounder.
|
||||
223
docs/docs/tokens/color.md
Normal file
223
docs/docs/tokens/color.md
Normal file
@@ -0,0 +1,223 @@
|
||||
---
|
||||
title: Color
|
||||
description: Ensure consistent use of color and readable contrast with Web Awesome's color properties.
|
||||
---
|
||||
|
||||
<style>
|
||||
td { vertical-align: middle; }
|
||||
|
||||
.color-name {
|
||||
font-weight: var(--wa-font-weight-semibold);
|
||||
margin-block-end: var(--wa-space-2xs);
|
||||
}
|
||||
ul.color-group {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.color-group {
|
||||
align-items: start;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 0.25em;
|
||||
}
|
||||
.color-group + * {
|
||||
margin-block-start: var(--wa-space-xl);
|
||||
}
|
||||
.color-preview {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.swatch {
|
||||
border-color: transparent;
|
||||
}
|
||||
.color-mix-example {
|
||||
background-image:
|
||||
linear-gradient(to right,
|
||||
color-mix(in oklab, transparent, var(--mix-color)) 25%,
|
||||
color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--mix-color)) 25%,
|
||||
color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--mix-color)) 75%,
|
||||
var(--wa-color-brand-fill-loud) 75%,
|
||||
var(--wa-color-brand-fill-loud))
|
||||
;
|
||||
border: none;
|
||||
color: var(--wa-color-brand-on-loud);
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Web Awesome's color system is made up of CSS custom properties to help with consistent color use throughout your project.
|
||||
|
||||
Color is organized by three main categories:
|
||||
|
||||
- [Literal colors](/#literal-colors) that give familiar names to your starting color palette
|
||||
- [Foundational colors](/#foundational-colors) that lay the groundwork for your theme
|
||||
- [Semantic colors](/#semantic-colors) that draw attention and convey meaning
|
||||
|
||||
|
||||
## Literal Colors
|
||||
|
||||
Literal colors are the lowest level color properties in your theme. Each color is identified by a name, like red or gray, and a number that roughly corresponds to the color's perceived lightness. On this scale, 100 is equal to pure white and 0 is equal to pure black.
|
||||
|
||||
Lightness values on this scale have a strong correlation to [relative luminance](https://www.w3.org/WAI/GL/wiki/Relative_luminance), which is used to calculate color contrast. To meet [WCAG 2.1 success criteria for minimum or enhanced contrast](https://www.w3.org/TR/WCAG21/#contrast-minimum), even across hues, calculate the difference between the lightness values of any two colors:
|
||||
|
||||
- A difference of 40 ensures a minimum 3:1 contrast ratio, suitable for large text and icons (AA)
|
||||
- A difference of 50 ensures a minimum 4.5:1 contrast ratio, suitable for normal text (AA) and large text (AAA)
|
||||
- A difference of 60 ensures a minimum 7:1 contrast ratio, suitable for all text (AAA)
|
||||
|
||||
Web Awesome defines seven literal colors each with 11 lightness values using the format `--wa-color-{hue}-{tint}`.
|
||||
|
||||
{% set hues = ["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"] %}
|
||||
{% set tints = ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] %}
|
||||
{% for hue in hues -%}
|
||||
<div class="color-name">{{ hue | capitalize }}</div>
|
||||
<ul class="color-group">
|
||||
{% for tint in tints -%}
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})"></div>
|
||||
<small>{{ tint }}</small>
|
||||
</li>
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
{%- endfor %}
|
||||
|
||||
You can also omit the lightness value to get the brightest, most intense color for each hue:
|
||||
|
||||
<div class="color-name">Accent colors</div>
|
||||
<ul class="color-group">
|
||||
{% for hue in hues -%}
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-{{ hue }})"></div>
|
||||
<small>{{ hue }}</small>
|
||||
</li>
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
|
||||
## Foundational Colors
|
||||
|
||||
Foundational colors lay the groundwork for the content and structure of your project. These colors are named according to their role in your theme.
|
||||
|
||||
### Surfaces
|
||||
|
||||
Surfaces are background layers that other content rests on. Surface colors help convey hierarchy through a sense of elevation, where `--wa-color-surface-raised` is the closest to the user (e.g., dialogs and popup menus) and `--wa-color-surface-lowered` is the farthest away (e.g., wells).
|
||||
|
||||
| Custom Property | Preview |
|
||||
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `--wa-color-surface-raised` | <div class="swatch" style="background-color: var(--wa-color-surface-raised); box-shadow:var(--wa-shadow-s)"></div> |
|
||||
| `--wa-color-surface-default` | <div class="swatch" style="background-color: var(--wa-color-surface-default)"></div> |
|
||||
| `--wa-color-surface-lowered` | <div class="swatch" style="background-color: var(--wa-color-surface-lowered); box-shadow: inset var(--wa-shadow-s)"></div> |
|
||||
| `--wa-color-surface-border` | <div class="swatch" style="border-color: var(--wa-color-surface-border)"></div> |
|
||||
|
||||
### Text
|
||||
|
||||
Text colors are used for standard text elements. We recommend a minimum 4.5:1 contrast ratio between text colors and surface colors.
|
||||
|
||||
| Custom Property | Preview |
|
||||
| ------------------------ | ---------------------------------------------------------- |
|
||||
| `--wa-color-text-normal` | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-normal); display: inline-block;">AaBb</div> |
|
||||
| `--wa-color-text-quiet` | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-quiet); display: inline-block;">AaBb</div> |
|
||||
| `--wa-color-text-link` | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-link); display: inline-block;">AaBb</div> |
|
||||
|
||||
### Overlays
|
||||
|
||||
Overlays provide a backdrop to isolate content, often allowing background context to show through.
|
||||
|
||||
| Custom Property | Preview |
|
||||
| --------------------------- | ----------------------------------------------------------------------------------- |
|
||||
| `--wa-color-overlay-modal` | <div class="swatch" style="background-color: var(--wa-color-overlay-modal)"></div> |
|
||||
| `--wa-color-overlay-inline` | <div class="swatch" style="background-color: var(--wa-color-overlay-inline)"></div> |
|
||||
|
||||
### Shadow
|
||||
|
||||
Web Awesome uses a single color for all shadows.
|
||||
This is used alongside other [shadow tokens](/docs/tokens/shadows) to construct your theme's shadows.
|
||||
|
||||
| Custom Property | Preview |
|
||||
| ------------------- | --------------------------------------------------------------------------- |
|
||||
| `--wa-color-shadow` | <div class="swatch" style="background-color: var(--wa-color-shadow)"></div> |
|
||||
|
||||
### Interactions
|
||||
|
||||
#### Focus
|
||||
|
||||
Web Awesome uses a single focus color for predictable keyboard navigation. This is used alongside other [focus tokens](/docs/tokens/focus) to construct `--wa-focus-ring`. We recommend a minimum 3:1 contrast ratio against surface colors and background colors wherever possible.
|
||||
|
||||
| Custom Property | Preview |
|
||||
| ------------------ | ----------------------------------------------------------------------------------------------------------------------- |
|
||||
| `--wa-color-focus` | <div class="swatch" value="--wa-color-focus" style="outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus)"></div> |
|
||||
|
||||
#### Hover and Active
|
||||
|
||||
Web Awesome leverages `color-mix()` to achieve consistent hover and active states across components without the need for untold numbers of handpicked colors. Through `color-mix()`, these custom properties contextually generate hover and active colors based on the color of the component.
|
||||
|
||||
| Custom Property | Preview |
|
||||
| ----------------------- | ---------------------------------------------------------------------------------------------------------------- |
|
||||
| `--wa-color-mix-hover` | <div class="swatch color-mix-example" value="--wa-color-mix-hover" style="--mix-color: var(--wa-color-mix-hover)"><small>mixed</small></div> |
|
||||
| `--wa-color-mix-active` | <div class="swatch color-mix-example" value="--wa-color-mix-active" style="--mix-color: var(--wa-color-mix-active)"><small>mixed</small></div> |
|
||||
|
||||
|
||||
## Semantic Colors
|
||||
|
||||
Semantic colors reinforce a specific message, intended usage, or expected results through familiar, meaningful hues. Each color is identified by its semantic group, role, and attention using the format `--wa-color-{group}-{role}-{attention}`. There are five groups of semantic colors:
|
||||
- **Brand** to emphasize your brand color
|
||||
- **Success** for validity or confirmation
|
||||
- **Neutral** for ordinary or inactive content
|
||||
- **Warning** for caution or uncertainty
|
||||
- **Danger** for errors or risk
|
||||
|
||||
Each group defines colors for specific roles so that colors can be easily assembled with predictable results and readable contrast. There are three roles:
|
||||
- **Fill** for background colors or areas larger than a few pixels
|
||||
- **Border** for borders, dividers, and other stroke-width elements
|
||||
- **On** for content displayed on a fill (e.g., pair `--wa-color-danger-on-loud` with `--wa-color-danger-fill-loud`)
|
||||
|
||||
Finally, each color is named according to how much attention it draws. Here, we use noise as an analogy: a loud noise draws more attention than a quiet one. There are three levels of attention:
|
||||
- **Quiet** draws the least attention
|
||||
- **Normal** draws some attention
|
||||
- **Loud** draws the most attention
|
||||
|
||||
{% set variants = ['brand', 'success', 'neutral', 'warning', 'danger'] %}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Custom Property</th>
|
||||
{% for variant in variants -%}
|
||||
<th><code>{{ variant }}</code></th>
|
||||
{%- endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
{% for type in ['fill', 'border', 'on'] -%}
|
||||
{% for attention in ['quiet', 'normal', 'loud'] -%}
|
||||
<tr>
|
||||
<td><code>--wa-color-*-{{ type }}-{{ attention }}</code></td>
|
||||
{% for variant in variants -%}
|
||||
<td>
|
||||
{%- if type == 'border' -%}
|
||||
<div class="swatch" style="border-color: var(--wa-color-{{ variant }}-{{ type }}-{{ attention }})"></div>
|
||||
{%- else -%}
|
||||
<div class="swatch" style="background-color: var(--wa-color-{{ variant }}-fill-{{ attention }}); color: var(--wa-color-{{ variant }}-on-{{ attention }})">{{ 'AaBb' if type == 'on' }}</div>
|
||||
{%- endif %}
|
||||
</td>
|
||||
{%- endfor %}
|
||||
</tr>
|
||||
{%- endfor %}
|
||||
{%- endfor %}
|
||||
</table>
|
||||
|
||||
<script type="module">
|
||||
const computedStyle = getComputedStyle(document.body)
|
||||
document.querySelectorAll(".swatch").forEach((swatch) => {
|
||||
let varName = swatch.getAttribute("value")
|
||||
|
||||
if (!varName) {
|
||||
const bgColor = swatch.style.backgroundColor
|
||||
varName = bgColor.replace(/^var\((--.*)\)$/, "$1")
|
||||
}
|
||||
|
||||
const copyButton = Object.assign(document.createElement("wa-copy-button"), {
|
||||
value: varName,
|
||||
copyLabel: varName,
|
||||
errorLabel: "Whoops, your browser doesn't support this!",
|
||||
})
|
||||
|
||||
swatch.appendChild(copyButton)
|
||||
})
|
||||
</script>
|
||||
@@ -3,7 +3,7 @@ title: Focus
|
||||
description: Configure recognizable focus states with Web Awesome's focus properties.
|
||||
---
|
||||
|
||||
A consistent focus ring helps with predictable keyboard navigation. Together with [`--wa-color-focus`](/docs/theming/color/#interactions), these custom properties create a uniform focus state for Web Awesome components.
|
||||
A consistent focus ring helps with predictable keyboard navigation. Together with [`--wa-color-focus`](/docs/tokens/color/#interactions), these tokens create a uniform focus state for Web Awesome components.
|
||||
|
||||
|
||||
| Custom Property | Default Value |
|
||||
6
docs/docs/tokens/index.njk
Normal file
6
docs/docs/tokens/index.njk
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Design Tokens
|
||||
description: A theme is a collection of predefined CSS custom properties that control global styles from color to shadows. These custom properties thread through all Web Awesome components for a consistent look and feel.
|
||||
layout: overview
|
||||
override:tags: []
|
||||
---
|
||||
@@ -3,7 +3,7 @@ title: Shadows
|
||||
description: Elevate your components with Web Awesome's shadow properties.
|
||||
---
|
||||
|
||||
Shadows indicate elevation and, often, interactivity. Web Awesome offers highly modular shadow properties to easily create custom shadow effects or transform elements based on specific shadow qualities. Together with [`--wa-color-shadow`](/docs/theming/color/#shadow), these custom properties create realistic shadows for Web Awesome components.
|
||||
Shadows indicate elevation and, often, interactivity. Web Awesome offers highly modular shadow properties to easily create custom shadow effects or transform elements based on specific shadow qualities. Together with [`--wa-color-shadow`](/docs/tokens/color/#shadow), these tokens create realistic shadows for Web Awesome components.
|
||||
|
||||
Shadows are constructed using corresponding offset-x, offset-y, blur, and spread properties, detailed in the sections below. In Web Awesome, shadows use a size-based scale where larger shadows have greater offset and blur values to indicate greater distance from the surface below.
|
||||
|
||||
7
docs/docs/tokens/tokens.json
Normal file
7
docs/docs/tokens/tokens.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"layout": "page-outline.njk",
|
||||
"tags": ["tokens"],
|
||||
"eleventyComputed": {
|
||||
"icon": "tokens/{{ page.fileSlug }}"
|
||||
}
|
||||
}
|
||||
@@ -69,7 +69,7 @@ Line heights control the distance between lines of text and are unitless to scal
|
||||
|
||||
## Links
|
||||
|
||||
Together with [`--wa-color-link`](/docs/theming/color/#text), these custom properties add text decoration to `<a>` elements to signal their role as hyperlinks.
|
||||
Together with [`--wa-color-link`](/docs/tokens/color/#text), these tokens add text decoration to `<a>` elements to signal their role as hyperlinks.
|
||||
|
||||
| Custom Property | Default Value |
|
||||
| ------------------------------ | ---------------------------------------------------------------------------------- |
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Color Variants
|
||||
description: Color utilities allow you to apply the brand, neutral, success, warning, and danger colors from your theme to any element.
|
||||
icon: theming/color
|
||||
icon: tokens/color
|
||||
snippets:
|
||||
- .wa-brand
|
||||
- .wa-neutral
|
||||
@@ -27,7 +27,7 @@ You can create the same effect on any element by using the color variant utility
|
||||
- `.wa-danger`
|
||||
|
||||
Using these classes is a two-way handshake:
|
||||
they do not directly apply styles, but define generic color tokens modeled after our [Semantic Colors](/docs/theming/color/#semantic-colors) but *without* the group identifier (`neutral`, `brand`, `success`, `warning`, `danger`), defaulting to `neutral`.
|
||||
they do not directly apply styles, but define generic color tokens modeled after our [Semantic Colors](/docs/tokens/color/#semantic-colors) but *without* the group identifier (`neutral`, `brand`, `success`, `warning`, `danger`), defaulting to `neutral`.
|
||||
This means that styles can be written to respond to variants by using e.g. `--wa-color-fill-loud` instead of e.g. `--wa-color-brand-fill-loud`,
|
||||
and all of our [native styles](/docs/native/) do so (where it made sense).
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@ tags: ["utilities", "layout"]
|
||||
Web Awesome includes classes to set the `gap` property of flex and grid containers. They can be used alongside other Web Awesome layout utilities, like [cluster](/docs/layout/cluster) and [stack](/docs/layout/stack), to change the space between items.
|
||||
Or even by themselves — all gap properties also set `display: flex` with a specificity of 0 so that it can be trivially overridden.
|
||||
|
||||
Besides `wa-gap-0`, which sets `gap` to zero, each class corresponds to one of the [`--wa-space-*`](/docs/theming/space) properties in your theme.
|
||||
Besides `wa-gap-0`, which sets `gap` to zero, each class corresponds to one of the [`--wa-space-*`](/docs/tokens/space) tokens in your theme.
|
||||
|
||||
| Class Name | `gap` Value | Preview |
|
||||
| ------------ | ---------------- | ----------------------------------------------------------------------------------------------------------- |
|
||||
|
||||
@@ -14,7 +14,7 @@ status: wip
|
||||
|
||||
Web Awesome includes classes to set an element's `border-radius` property. They can be used alongside Web Awesome layout utilities, like [frame](/docs/layout/frame), to round all corners of an element.
|
||||
|
||||
Each class corresponds to one of the [`--wa-border-radius-*`](/docs/theming/borders/#radius) properties in your theme.
|
||||
Each class corresponds to one of the [`--wa-border-radius-*`](/docs/tokens/borders/#radius) tokens in your theme.
|
||||
|
||||
| Class Name | `border-radius` Value | Preview |
|
||||
| ------------------------- | --------------------------- | --------------------------------------------------------------------------------------- |
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Size
|
||||
description: Size utilities give elements one of three preset sizes (small, medium, or large).
|
||||
icon: theming/space
|
||||
icon: tokens/space
|
||||
status: experimental
|
||||
snippets:
|
||||
- .wa-size-s
|
||||
@@ -22,7 +22,7 @@ You can create the same effect on any element by using the size utility classes:
|
||||
- `.wa-size-l`
|
||||
|
||||
Using these classes does two things:
|
||||
- It sets `font-size` to one of the [size tokens](/docs/theming/typography/#font-size).
|
||||
- It sets `font-size` to one of the [size tokens](/docs/tokens/typography/#font-size).
|
||||
You can use CSS `em` units to reference that size in other properties.
|
||||
- It calculates `--wa-form-control-height` based on the applied size, supporting consistent heights for elements like inputs and buttons.
|
||||
- It aliases a bunch of other properties that CSS can use:
|
||||
|
||||
@@ -13,7 +13,7 @@ Use body classes to style the main content of your pages. Each `wa-body-*` class
|
||||
- `font-weight: var(--wa-font-weight-body);`
|
||||
- `line-height: var(--wa-line-height-normal);`
|
||||
|
||||
Additionally, each class specifies a `font-size` that corresponds to a [`--wa-font-size-*`](/docs/theming/typography/#font-size) property from your theme.
|
||||
Additionally, each class specifies a `font-size` that corresponds to a [`--wa-font-size-*`](/docs/tokens/typography/#font-size) token from your theme.
|
||||
|
||||
| Class Name | `font-size` Value | Preview |
|
||||
| ------------------ | -------------------- | ------------------------------------------------------------------------- |
|
||||
@@ -31,7 +31,7 @@ Use heading classes to style section titles and headings in your content. Each `
|
||||
- `line-height: var(--wa-line-height-condensed);`
|
||||
- `text-wrap: balance;`
|
||||
|
||||
Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/theming/typography/#font-size) property from your theme. Heading classes are one font size larger than the corresponding `wa-body-*` class.
|
||||
Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/tokens/typography/#font-size) token from your theme. Heading classes are one font size larger than the corresponding `wa-body-*` class.
|
||||
|
||||
| Class Name | `font-size` Value | Preview |
|
||||
| ---------------- | -------------------- | ----------------------------------------------------- |
|
||||
@@ -51,7 +51,7 @@ Use caption classes to style descriptions or auxiliary text in your content. Eac
|
||||
- `font-weight: var(--wa-font-weight-body);`
|
||||
- `line-height: var(--wa-line-height-condensed);`
|
||||
|
||||
Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/theming/typography/#font-size) property from your theme. Caption classes are one font size smaller than the corresponding `wa-body-*` class.
|
||||
Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/tokens/typography/#font-size) token from your theme. Caption classes are one font size smaller than the corresponding `wa-body-*` class.
|
||||
|
||||
| Class Name | `font-size` Value | Preview |
|
||||
| ---------------- | -------------------- | ------------------------------------------------------------------------------ |
|
||||
|
||||
@@ -268,7 +268,7 @@ layout: page
|
||||
<h1 class="brand-font">Make something <span class="emphasis">awesome</span> with open-source web components</h1>
|
||||
<div class="hero-cta">
|
||||
<span><em>Psst!</em> You can pre-order Web Awesome Pro at a low, guaranteed-for-life price — but not for long. Get in while the gettin’s good.</span>
|
||||
<wa-button class="wa-theme-default-dark" size="small" href="https://www.kickstarter.com/projects/fontawesome/web-awesome">
|
||||
<wa-button class="wa-dark" size="small" href="https://www.kickstarter.com/projects/fontawesome/web-awesome">
|
||||
<wa-icon slot="prefix" name="person-running"></wa-icon>
|
||||
Pre-order WA Pro
|
||||
</wa-button>
|
||||
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "@shoelace-style/webawesome",
|
||||
"version": "3.0.0-alpha.7",
|
||||
"version": "3.0.0-alpha.8",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@shoelace-style/webawesome",
|
||||
"version": "3.0.0-alpha.7",
|
||||
"version": "3.0.0-alpha.8",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^4.1.0",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@shoelace-style/webawesome",
|
||||
"description": "A forward-thinking library of web components.",
|
||||
"version": "3.0.0-alpha.7",
|
||||
"version": "3.0.0-alpha.8",
|
||||
"homepage": "https://webawesome.com/",
|
||||
"author": "Web Awesome",
|
||||
"license": "MIT",
|
||||
@@ -46,7 +46,9 @@
|
||||
"scripts": {
|
||||
"start": "node scripts/build.js --develop",
|
||||
"build": "node scripts/build.js",
|
||||
"build:serve": "npm run build && npx http-server _site -p 4000",
|
||||
"build:alpha": "node scripts/build.js --alpha",
|
||||
"build:alpha:serve": "npm run build:alpha && npx http-server _site -p 4000",
|
||||
"start:alpha": "node scripts/build.js --alpha --develop",
|
||||
"publish-alpha-cdn": "./publish-alpha-cdn.sh",
|
||||
"create": "plop --plopfile scripts/plop/plopfile.js",
|
||||
|
||||
@@ -74,6 +74,10 @@ function generateManifest() {
|
||||
execSync('cem analyze --config "custom-elements-manifest.js"');
|
||||
} catch (error) {
|
||||
console.error(`\n\n${error.message}`);
|
||||
|
||||
if (!isDeveloping) {
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
spinner.succeed();
|
||||
@@ -91,6 +95,10 @@ function generateReactWrappers() {
|
||||
execSync(`node scripts/make-react.js --outdir "${cdnDir}"`, { stdio: 'inherit' });
|
||||
} catch (error) {
|
||||
console.error(`\n\n${error.message}`);
|
||||
|
||||
if (!isDeveloping) {
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
spinner.succeed();
|
||||
|
||||
@@ -119,7 +127,7 @@ async function generateStyles() {
|
||||
file.includes('themes/awesome') ||
|
||||
file.includes('themes/active') ||
|
||||
file.includes('themes/mellow') ||
|
||||
file.includes('themes/migration') ||
|
||||
file.includes('themes/tailspin') ||
|
||||
file.includes('themes/brutalist')
|
||||
) {
|
||||
return false;
|
||||
@@ -147,6 +155,9 @@ async function generateTypes() {
|
||||
try {
|
||||
execSync(`tsc --project ./tsconfig.prod.json --outdir "${cdnDir}"`);
|
||||
} catch (error) {
|
||||
if (!isDeveloping) {
|
||||
process.exit(1);
|
||||
}
|
||||
return Promise.reject(error.stdout);
|
||||
}
|
||||
|
||||
@@ -219,6 +230,9 @@ async function generateBundle() {
|
||||
} catch (error) {
|
||||
spinner.fail();
|
||||
console.log(chalk.red(`\n${error}`));
|
||||
if (!isDeveloping) {
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
spinner.succeed();
|
||||
@@ -235,6 +249,10 @@ async function regenerateBundle() {
|
||||
} catch (error) {
|
||||
spinner.fail();
|
||||
console.log(chalk.red(`\n${error}`));
|
||||
|
||||
if (!isDeveloping) {
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
spinner.succeed();
|
||||
@@ -250,24 +268,31 @@ async function generateDocs() {
|
||||
if (isAlpha) args.push('--alpha');
|
||||
if (isDeveloping) args.push('--develop');
|
||||
|
||||
// 11ty
|
||||
const output = (await runScript(join(__dirname, 'docs.js'), args))
|
||||
// Cleanup the output
|
||||
.replace('[11ty]', '')
|
||||
.replace(' seconds', 's')
|
||||
.replace(/\(.*?\)/, '')
|
||||
.toLowerCase()
|
||||
.trim();
|
||||
let output;
|
||||
try {
|
||||
// 11ty
|
||||
output = (await runScript(join(__dirname, 'docs.js'), args))
|
||||
// Cleanup the output
|
||||
.replace('[11ty]', '')
|
||||
.replace(' seconds', 's')
|
||||
.replace(/\(.*?\)/, '')
|
||||
.toLowerCase()
|
||||
.trim();
|
||||
|
||||
// Copy assets
|
||||
await copy(join(docsDir, 'assets'), join(siteDir, 'assets'), { overwrite: true });
|
||||
// Copy dist (production only)
|
||||
if (!isDeveloping) {
|
||||
await copy(cdnDir, join(siteDir, 'dist'));
|
||||
}
|
||||
|
||||
// Copy dist (production only)
|
||||
if (!isDeveloping) {
|
||||
await copy(cdnDir, join(siteDir, 'dist'));
|
||||
spinner.succeed(`Writing the docs ${chalk.gray(`(${output}`)})`);
|
||||
} catch (error) {
|
||||
console.error('\n\n' + chalk.red(error) + '\n');
|
||||
|
||||
spinner.fail(chalk.red(`Error while writing the docs.`));
|
||||
if (!isDeveloping) {
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
spinner.succeed(`Writing the docs ${chalk.gray(`(${output}`)})`);
|
||||
}
|
||||
|
||||
// Initial build
|
||||
@@ -368,6 +393,10 @@ if (isDeveloping) {
|
||||
reload();
|
||||
} catch (err) {
|
||||
console.error(chalk.red(err));
|
||||
|
||||
if (!isDeveloping) {
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -1,22 +1,8 @@
|
||||
:host {
|
||||
--icon-color: currentColor;
|
||||
--icon-size: var(--wa-font-size-l);
|
||||
--spacing: var(--wa-space-m);
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
border-radius: var(--wa-panel-border-radius);
|
||||
background-color: var(--background-color, var(--wa-color-fill-quiet));
|
||||
border-color: var(--border-color, transparent);
|
||||
border-style: var(--wa-panel-border-style);
|
||||
border-width: var(--wa-panel-border-width);
|
||||
color: var(--text-color, var(--wa-color-on-normal));
|
||||
padding: var(--spacing);
|
||||
}
|
||||
|
||||
:host([appearance~='accent']) {
|
||||
font-weight: var(--wa-font-weight-semibold);
|
||||
}
|
||||
|
||||
[part~='icon'] {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { html } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import nativeStyles from '../../styles/native/callout.css';
|
||||
import appearanceStyles from '../../styles/utilities/appearance.css';
|
||||
import sizeStyles from '../../styles/utilities/size.css';
|
||||
import variantStyles from '../../styles/utilities/variants.css';
|
||||
@@ -24,7 +25,7 @@ import styles from './callout.css';
|
||||
*/
|
||||
@customElement('wa-callout')
|
||||
export default class WaCallout extends WebAwesomeElement {
|
||||
static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, styles];
|
||||
static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, nativeStyles, styles];
|
||||
|
||||
/** The callout's theme variant. */
|
||||
@property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' = 'brand';
|
||||
|
||||
@@ -4,6 +4,36 @@ function dataUri(svg: string) {
|
||||
return `data:image/svg+xml,${encodeURIComponent(svg)}`;
|
||||
}
|
||||
|
||||
export const iconsByVariant: { [key: string]: { [key: string]: string } } = {
|
||||
solid: {
|
||||
check: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>`,
|
||||
'chevron-down': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>`,
|
||||
'chevron-left': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>`,
|
||||
'chevron-right': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>`,
|
||||
circle: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/></svg>`,
|
||||
'eye-dropper': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M341.6 29.2L240.1 130.8l-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L482.8 170.4c39-39 39-102.2 0-141.1s-102.2-39-141.1 0zM55.4 323.3c-15 15-23.4 35.4-23.4 56.6v42.4L5.4 462.2c-8.5 12.7-6.8 29.6 4 40.4s27.7 12.5 40.4 4L89.7 480h42.4c21.2 0 41.6-8.4 56.6-23.4L309.4 335.9l-45.3-45.3L143.4 411.3c-3 3-7.1 4.7-11.3 4.7H96V379.9c0-4.2 1.7-8.3 4.7-11.3L221.4 247.9l-45.3-45.3L55.4 323.3z"/></svg>`,
|
||||
'grip-vertical': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z"/></svg>`,
|
||||
indeterminate: `<svg part="indeterminate-icon" class="icon" viewBox="0 0 16 16"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"><g stroke="currentColor" stroke-width="2"><g transform="translate(2.285714, 6.857143)"><path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path></g></g></g></svg>`,
|
||||
minus: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>`,
|
||||
pause: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z"/></svg>`,
|
||||
play: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>`,
|
||||
star: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>`,
|
||||
user: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>`,
|
||||
xmark: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>`,
|
||||
},
|
||||
regular: {
|
||||
'circle-xmark': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"/></svg>`,
|
||||
copy: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg>`,
|
||||
eye: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/></svg>`,
|
||||
'eye-slash': `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"/></svg>`,
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Union of all icons, across variants
|
||||
*/
|
||||
export const icons: { [key: string]: string } = Object.assign({}, ...Object.values(iconsByVariant));
|
||||
|
||||
//
|
||||
// System icons are a separate library to ensure they're always available, regardless of how the default icon library is
|
||||
// configured or if its icons resolve properly. All Web Awesome components must use the system library instead of the
|
||||
@@ -12,107 +42,12 @@ function dataUri(svg: string) {
|
||||
const systemLibrary: IconLibrary = {
|
||||
name: 'system',
|
||||
resolver: (name: string, family = 'classic', variant = 'solid') => {
|
||||
//
|
||||
// Classic + Solid
|
||||
//
|
||||
if (family === 'classic' && variant === 'solid') {
|
||||
switch (name) {
|
||||
case 'check':
|
||||
return dataUri(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>`,
|
||||
);
|
||||
if (family === 'classic') {
|
||||
// Try given variant first, fall back to any variant
|
||||
let svg = iconsByVariant[variant]?.[name];
|
||||
|
||||
case 'chevron-down':
|
||||
return dataUri(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>`,
|
||||
);
|
||||
|
||||
case 'chevron-left':
|
||||
return dataUri(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>`,
|
||||
);
|
||||
|
||||
case 'chevron-right':
|
||||
return dataUri(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>`,
|
||||
);
|
||||
|
||||
case 'circle':
|
||||
return dataUri(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/></svg>`,
|
||||
);
|
||||
|
||||
case 'eye-dropper':
|
||||
return dataUri(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M341.6 29.2L240.1 130.8l-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L482.8 170.4c39-39 39-102.2 0-141.1s-102.2-39-141.1 0zM55.4 323.3c-15 15-23.4 35.4-23.4 56.6v42.4L5.4 462.2c-8.5 12.7-6.8 29.6 4 40.4s27.7 12.5 40.4 4L89.7 480h42.4c21.2 0 41.6-8.4 56.6-23.4L309.4 335.9l-45.3-45.3L143.4 411.3c-3 3-7.1 4.7-11.3 4.7H96V379.9c0-4.2 1.7-8.3 4.7-11.3L221.4 247.9l-45.3-45.3L55.4 323.3z"/></svg>`,
|
||||
);
|
||||
|
||||
case 'grip-vertical':
|
||||
return dataUri(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z"/></svg>`,
|
||||
);
|
||||
|
||||
case 'indeterminate':
|
||||
return dataUri(`
|
||||
<svg part="indeterminate-icon" class="icon" viewBox="0 0 16 16"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"><g stroke="currentColor" stroke-width="2"><g transform="translate(2.285714, 6.857143)"><path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path></g></g></g></svg>
|
||||
`);
|
||||
|
||||
case 'minus':
|
||||
return dataUri(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/></svg>`,
|
||||
);
|
||||
|
||||
case 'pause':
|
||||
return dataUri(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><path d="M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z"/></svg>`,
|
||||
);
|
||||
|
||||
case 'play':
|
||||
return dataUri(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>`,
|
||||
);
|
||||
|
||||
case 'star':
|
||||
return dataUri(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>`,
|
||||
);
|
||||
|
||||
case 'user':
|
||||
return dataUri(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>`,
|
||||
);
|
||||
|
||||
case 'xmark':
|
||||
return dataUri(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg`,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Classic + Regular
|
||||
//
|
||||
if (family === 'classic' && variant === 'regular') {
|
||||
switch (name) {
|
||||
case 'circle-xmark':
|
||||
return dataUri(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"/></svg>`,
|
||||
);
|
||||
|
||||
case 'copy':
|
||||
return dataUri(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg>`,
|
||||
);
|
||||
|
||||
case 'eye':
|
||||
return dataUri(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><path d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/></svg>`,
|
||||
);
|
||||
|
||||
case 'eye-slash':
|
||||
return dataUri(
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"/></svg>`,
|
||||
);
|
||||
if (svg) {
|
||||
return dataUri(svg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
--wa-color-red-20: #562317;
|
||||
--wa-color-red-10: #36130a;
|
||||
--wa-color-red-05: #240a05;
|
||||
--wa-color-red: var(--wa-color-red-50);
|
||||
|
||||
--wa-color-yellow-95: #fff2b8;
|
||||
--wa-color-yellow-90: #ffe578;
|
||||
@@ -23,6 +24,7 @@
|
||||
--wa-color-yellow-20: #482b21;
|
||||
--wa-color-yellow-10: #2c1912;
|
||||
--wa-color-yellow-05: #1d0e0a;
|
||||
--wa-color-yellow: var(--wa-color-yellow-90);
|
||||
|
||||
--wa-color-green-95: #dcf8ea;
|
||||
--wa-color-green-90: #bcf1d8;
|
||||
@@ -35,6 +37,7 @@
|
||||
--wa-color-green-20: #003a2d;
|
||||
--wa-color-green-10: #00231b;
|
||||
--wa-color-green-05: #001610;
|
||||
--wa-color-green: var(--wa-color-green-60);
|
||||
|
||||
--wa-color-teal-95: #cbfaf9;
|
||||
--wa-color-teal-90: #9ff4f3;
|
||||
@@ -47,6 +50,7 @@
|
||||
--wa-color-teal-20: #083936;
|
||||
--wa-color-teal-10: #04221f;
|
||||
--wa-color-teal-05: #021513;
|
||||
--wa-color-teal: var(--wa-color-teal-80);
|
||||
|
||||
--wa-color-blue-95: #ecf3ff;
|
||||
--wa-color-blue-90: #d9e7ff;
|
||||
@@ -59,6 +63,7 @@
|
||||
--wa-color-blue-20: #1b325b;
|
||||
--wa-color-blue-10: #101d35;
|
||||
--wa-color-blue-05: #0a1222;
|
||||
--wa-color-blue: var(--wa-color-blue-60);
|
||||
|
||||
--wa-color-indigo-95: #f5efff;
|
||||
--wa-color-indigo-90: #ede0ff;
|
||||
@@ -71,6 +76,7 @@
|
||||
--wa-color-indigo-20: #381d7f;
|
||||
--wa-color-indigo-10: #210e53;
|
||||
--wa-color-indigo-05: #150739;
|
||||
--wa-color-indigo: var(--wa-color-indigo-50);
|
||||
|
||||
--wa-color-violet-95: #fbedfd;
|
||||
--wa-color-violet-90: #f7defa;
|
||||
@@ -83,6 +89,7 @@
|
||||
--wa-color-violet-20: #561658;
|
||||
--wa-color-violet-10: #340d36;
|
||||
--wa-color-violet-05: #210822;
|
||||
--wa-color-violet: var(--wa-color-violet-50);
|
||||
|
||||
--wa-color-gray-95: #f1f2f4;
|
||||
--wa-color-gray-90: #e2e5e8;
|
||||
@@ -95,4 +102,5 @@
|
||||
--wa-color-gray-20: #18354a;
|
||||
--wa-color-gray-10: #012034;
|
||||
--wa-color-gray-05: #001421;
|
||||
--wa-color-gray: var(--wa-color-gray-10);
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user