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

Merge branch 'next' into custom-palettes

Browse Source
This commit is contained in:
Lea Verou
2025-03-21 19:02:11 -04:00
parent d64d75b3f4 59dcaaff83
commit 5a0b2da5a1
45 changed files with 569 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
docs/.eleventy.js
View File

@@ -1,3 +1,4 @@
import * as path from 'node:path';
import { anchorHeadingsPlugin } from './_utils/anchor-headings.js';
import { codeExamplesPlugin } from './_utils/code-examples.js';
import { copyCodePlugin } from './_utils/copy-code.js';
@@ -8,6 +9,7 @@ import { removeDataAlphaElements } from './_utils/remove-data-alpha-elements.js'
// import { formatCodePlugin } from './_utils/format-code.js';
import litPlugin from '@lit-labs/eleventy-plugin-lit';
import { readFile } from 'fs/promises';
import nunjucks from 'nunjucks';
import componentList from './_data/componentList.js';
import * as filters from './_utils/filters.js';
import { outlinePlugin } from './_utils/outline.js';
@@ -16,7 +18,10 @@ import { searchPlugin } from './_utils/search.js';
import process from 'process';
const packageData = JSON.parse(await readFile('./package.json', 'utf-8'));
import * as url from 'url';
const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
const packageData = JSON.parse(await readFile(path.join(__dirname, '..', 'package.json'), 'utf-8'));
const isAlpha = process.argv.includes('--alpha');
const isDev = process.argv.includes('--develop');
@@ -24,12 +29,23 @@ const globalData = {
package: packageData,
isAlpha,
layout: 'page.njk',
server: {
head: '',
loginOrAvatar: '',
flashes: '',
},
};
const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
const passThrough = [...passThroughExtensions.map(ext => 'docs/**/*.' + ext)];
export default function (eleventyConfig) {
/**
* This is the guard we use for now to make sure our final built files dont need a 2nd pass by the server. This keeps us able to still deploy the bare HTML files on Vercel until the app is ready.
*/
const serverBuild = process.env.WEBAWESOME_SERVER === 'true';
// NOTE - alpha setting removes certain pages
if (isAlpha) {
eleventyConfig.ignores.add('**/experimental/**');
@@ -55,7 +71,38 @@ export default function (eleventyConfig) {
// Shortcodes - {% shortCode arg1, arg2 %}
eleventyConfig.addShortcode('cdnUrl', location => {
return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + location.replace(/^\//, '');
return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + (location || '').replace(/^\//, '');
});
// Turns `{% server "foo" %} into `{{ server.foo | safe }}` when the WEBAWESOME_SERVER variable is set to "true"
eleventyConfig.addShortcode('server', function (property) {
if (serverBuild) {
return `{{ server.${property} | safe }}`;
}
return '';
});
eleventyConfig.addTransform('second-nunjucks-transform', function NunjucksTransform(content) {
// For a server build, we expect a server to run the second transform.
if (serverBuild) {
return content;
}
// Only run the transform on files nunjucks would transform.
if (!this.page.inputPath.match(/.(md|html|njk)$/)) {
return content;
}
/** This largely mimics what an app would do and just stubs out what we don't care about. */
return nunjucks.renderString(content, {
// Stub the server EJS shortcodes.
server: {
head: '',
loginOrAvatar: '',
flashes: '',
},
});
});
// Paired shortcodes - {% shortCode %}content{% endShortCode %}
@@ -117,29 +164,6 @@ export default function (eleventyConfig) {
]),
);
// SSR plugin
if (!isDev) {
//
// Problematic components in SSR land:
// - animation (breaks on navigation + ssr with Turbo)
// - mutation-observer (why SSR this?)
// - resize-observer (why SSR this?)
// - tooltip (why SSR this?)
//
const omittedModules = [];
const componentModules = componentList
.filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1]))
.map(component => {
const name = component.tagName.split(/wa-/)[1];
return `./dist/components/${name}/${name}.js`;
});
eleventyConfig.addPlugin(litPlugin, {
mode: 'worker',
componentModules,
});
}
// Build the search index
eleventyConfig.addPlugin(
searchPlugin({
@@ -166,6 +190,31 @@ export default function (eleventyConfig) {
eleventyConfig.addPassthroughCopy(glob);
}
// SSR plugin
// Make sure this is the last thing, we dont want to run the risk of accidentally transforming shadow roots with the nunjucks 2nd transform.
if (!isDev) {
//
// Problematic components in SSR land:
// - animation (breaks on navigation + ssr with Turbo)
// - mutation-observer (why SSR this?)
// - resize-observer (why SSR this?)
// - tooltip (why SSR this?)
//
const omittedModules = [];
const componentModules = componentList
.filter(component => !omittedModules.includes(component.tagName.split(/wa-/)[1]))
.map(component => {
const name = component.tagName.split(/wa-/)[1];
const componentDirectory = process.env.UNBUNDLED_DIST_DIRECTORY || path.join('.', 'dist');
return path.join(componentDirectory, 'components', name, `${name}.js`);
});
eleventyConfig.addPlugin(litPlugin, {
mode: 'worker',
componentModules,
});
}
return {
markdownTemplateEngine: 'njk',
dir: {

8
docs/_includes/base.njk
View File

@@ -50,6 +50,9 @@
Search
<kbd slot="suffix" class="only-desktop">/</kbd>
</wa-button>
{# Login #}
{% server "loginOrAvatar" %}
</div>
</header>
@@ -76,14 +79,19 @@
</aside>
{% endif %}
{# Main #}
<main id="content">
{# Expandable outline #}
{% if hasOutline %}
<nav id="outline-expandable">
<details class="outline-links">
<summary>On this page</summary>
</details>
</nav>
{% endif %}
<div id="flashes">{% server "flashes" %}</div>
{% block header %}
{% include 'breadcrumbs.njk' %}

11
docs/_includes/breadcrumbs.njk
View File

@@ -1,8 +1,11 @@
{% set breadcrumbs = page.url | breadcrumbs %}
{% if breadcrumbs.length > 0 %}
{% set ancestors = page.url | ancestors %}
{% if ancestors.length > 0 %}
<wa-breadcrumb id="docs-breadcrumbs">
{% for crumb in breadcrumbs %}
<wa-breadcrumb-item href="{{ crumb.url }}">{{ crumb.title }}</wa-breadcrumb-item>
{% for ancestor in ancestors %}
{% if ancestor.page.url != "/" %}
<wa-breadcrumb-item href="{{ ancestor.page.url }}">{{ ancestor.data.title }}</wa-breadcrumb-item>
{% endif %}
{% endfor %}
<wa-breadcrumb-item>{# Current page #}</wa-breadcrumb-item>
</wa-breadcrumb>

20
docs/_includes/grouped-pages.njk
View File

@@ -1,12 +1,18 @@
{# Cards for pages listed by category #}
<section id="grid" class="index-grid">
{% for category, pages in allPages | groupByTags(categories) -%}
<h2 class="index-category">{{ category | getCategoryTitle(categories) }}</h2>
{%- for page in pages -%}
{%- if not page.data.parent or listChildren -%}
{% include "page-card.njk" %}
{%- endif -%}
{%- endfor -%}
{% set groupedPages = allPages | groupPages(categories, page) %}
{% for category, pages in groupedPages -%}
{% if groupedPages.meta.groupCount > 1 %}
<h2 class="index-category">
{% if pages.meta.url %}<a href="{{ pages.meta.url }}">{{ pages.meta.title }}</a>
{% else %}
{{ pages.meta.title }}
{% endif %}
</h2>
{% endif %}
{%- for page in pages -%}
{% include "page-card.njk" %}
{%- endfor -%}
{%- endfor -%}
</section>

4
docs/_includes/head.njk
View File

@@ -47,3 +47,7 @@
<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" />
{# Used by Web Awesome App to inject other assets into the head. #}
{% server "head" %}

2
docs/_includes/page-card.njk
View File

@@ -2,7 +2,7 @@
<a href="{{ page.url }}"{{ page.data.keywords | attr('data-keywords') }}>
<wa-card with-header>
<div slot="header">
{% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" %}
{% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" ignore missing %}
</div>
<span class="page-name">{{ page.data.title }}</span>
{% if pageSubtitle -%}

9
docs/_includes/sidebar-group.njk
View File

@@ -1,9 +1,12 @@
{# 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] -%}
{% set groupUrl %}/docs/{{ tag }}/{% endset %}
{% set groupItem = groupUrl | getCollectionItemFromUrl %}
{% set children = groupItem.data.children if groupItem.data.children.length > 0 else (collections[tag] | sort) %}
<wa-details {{ ((tag in (tags or [])) or (groupUrl in page.url)) | attr('open') }}>
<h2 slot="summary">
{% if groupUrl | getCollectionItemFromUrl %}
{% if groupItem %}
<a href="{{ groupUrl }}" title="Overview">{{ title or (tag | capitalize) }}
<wa-icon name="grid-2"></wa-icon>
</a>
@@ -12,10 +15,8 @@
{% endif %}
</h2>
<ul>
{% for page in collections[tag] | sort %}
{% if not page.data.parent -%}
{% for page in children %}
{% include 'sidebar-link.njk' %}
{%- endif %}
{% endfor %}
</ul>
</wa-details>

2
docs/_includes/sidebar-link.njk
View File

@@ -1,4 +1,4 @@
{% if not (isAlpha and page.data.noAlpha) and page.fileSlug != tag and not page.data.unlisted -%}
{% if not (isAlpha and page.data.noAlpha) and not page.data.unlisted -%}
<li>
<a href="{{ page.url }}">{{ page.data.title }}</a>
{% if page.data.status == 'experimental' %}<wa-icon name="flask"></wa-icon>{% endif %}

5
docs/_layouts/overview.njk
View File

@@ -1,6 +1,5 @@
---
layout: page-outline
tags: ["overview"]
---
{% set forTag = forTag or (page.url | split('/') | last) %}
{% if description %}
@@ -13,8 +12,10 @@ tags: ["overview"]
</wa-input>
</div>
{% set allPages = collections[forTag] %}
{% set allPages = allPages or collections[forTag] %}
{% if allPages and allPages.length > 0 %}
{% include "grouped-pages.njk" %}
{% endif %}
<link href="/assets/styles/filter.css" rel="stylesheet">
<script type="module" src="/assets/scripts/filter.js"></script>

9
docs/_layouts/page.njk
View File

@@ -1,4 +1,9 @@
{% set hasSidebar = true %}
{% set hasOutline = false %}
{% if hasSidebar == undefined %}
{% set hasSidebar = true %}
{% endif %}
{% if hasOutline == undefined %}
{% set hasOutline = false %}
{% endif %}
{% extends "../_includes/base.njk" %}

2
docs/_layouts/theme.njk
View File

@@ -68,7 +68,7 @@ wa_data.palettes = {
<wa-option label="{{ palette.data.title }}" value="{{ palette.fileSlug if not currentPalette }}" {{ (palette.fileSlug if currentPalette) | attr('data-id') }}>
<wa-card with-header>
<div slot="header">
{% include "svgs/" + (palette.data.icon or "thumbnail-placeholder") + ".njk" %}
{% include "svgs/" + (palette.data.icon or "thumbnail-placeholder") + ".njk" ignore missing %}
</div>
<span class="page-name">
{{ palette.data.title }}

254
docs/_utils/filters.js
View File

@@ -29,6 +29,9 @@ function getCollection(name) {
}
export function getCollectionItemFromUrl(url, collection) {
if (!url) {
return null;
}
collection ??= getCollection.call(this, 'all') || [];
return collection.find(item => item.url === url);
}
@@ -42,35 +45,33 @@ export function split(text, separator) {
return (text + '').split(separator).filter(Boolean);
}
export function breadcrumbs(url, { withCurrent = false } = {}) {
const parts = split(url, '/');
const ret = [];
export function ancestors(url, { withCurrent = false, withRoot = false } = {}) {
let ret = [];
let currentUrl = url;
let currentItem = getCollectionItemFromUrl.call(this, url);
while (parts.length) {
let partialUrl = '/' + parts.join('/') + '/';
let item = getCollectionItemFromUrl.call(this, partialUrl);
if (item && (partialUrl !== url || withCurrent)) {
let title = item.data.title;
if (title) {
ret.unshift({ url: partialUrl, title });
}
}
parts.pop();
if (item?.data.parent) {
let parentURL = item.data.parent;
if (!item.data.parent.startsWith('/')) {
// Parent is in the same directory
parts.push(item.data.parent);
parentURL = '/' + parts.join('/') + '/';
}
let parentBreadcrumbs = breadcrumbs.call(this, parentURL, { withCurrent: true });
return [...parentBreadcrumbs, ...ret];
if (!currentItem) {
// Might have eleventyExcludeFromCollections, jump to parent
let parentUrl = this.ctx.parentUrl;
if (parentUrl) {
url = parentUrl;
}
}
for (let item; (item = getCollectionItemFromUrl.call(this, url)); url = item.data.parentUrl) {
ret.unshift(item);
}
if (!withRoot && ret[0]?.page.url === '/') {
// Remove root
ret.shift();
}
if (!withCurrent && ret.at(-1)?.page.url === currentUrl) {
// Remove current page
ret.pop();
}
return ret;
}
@@ -180,69 +181,178 @@ export function sort(arr, by = { 'data.order': 1, 'data.title': '' }) {
/**
* Group an 11ty collection (or any array of objects with a `data.tags` property) by certain tags.
* @param {object[]} collection
* @param { Object<string, string> | (string | Object<string, string>)[]} [tags] The tags to group by. If not provided/empty, defaults to grouping by all tags.
* @returns { Object.<string, object[]> } An object with keys for each tag, and an array of items for each tag.
* @param { Object<string, string> | string[]} [options] Options object or array of tags to group by.
* @param {string[] | true} [options.tags] Tags to group by. If true, groups by all tags.
* If not provided/empty, defaults to grouping by page hierarchy, with any pages with more than 1 children becoming groups.
* @param {string[]} [options.groups] The groups to use if only a subset or a specific order is desired. Defaults to `options.tags`.
* @param {string[]} [options.titles] Any title overrides for groups.
* @param {string | false} [options.other="Other"] The title to use for the "Other" group. If `false`, the "Other" group is removed..
* @returns { Object.<string, object[]> } An object of group ids to arrays of page objects.
*/
export function groupByTags(collection, tags) {
export function groupPages(collection, options = {}, page) {
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)));
} else if (Array.isArray(tags)) {
// May contain objects of one-off tag -> label mappings
tags = tags.map(tag => (typeof tag === 'object' ? Object.keys(tag)[0] : tag));
} else if (typeof tags === 'object') {
// tags is an object of tags to labels, so we just want the keys
tags = Object.keys(tags);
console.error(`Empty collection passed to groupPages() to group by ${JSON.stringify(options)}`);
}
let ret = Object.fromEntries(tags.map(tag => [tag, []]));
ret.other = [];
if (Array.isArray(options)) {
options = { tags: options };
}
let { tags, groups, titles = {}, other = 'Other' } = options;
if (groups === undefined && Array.isArray(tags)) {
groups = tags;
}
let grouping;
if (tags) {
grouping = {
isGroup: item => undefined,
getCandidateGroups: item => item.data.tags,
getGroupMeta: group => ({}),
};
} else {
grouping = {
isGroup: item => (item.data.children.length >= 2 ? item.page.url : undefined),
getCandidateGroups: item => {
let parentUrl = item.data.parentUrl;
if (page?.url === parentUrl) {
return [];
}
return [parentUrl];
},
getGroupMeta: group => {
let item = byUrl[group] || getCollectionItemFromUrl.call(this, group);
return {
title: item?.data.title,
url: group,
item,
};
},
sortGroups: groups => sort(groups.map(url => byUrl[url]).filter(Boolean)).map(item => item.page.url),
};
}
let byUrl = {};
let byParentUrl = {};
for (let item of collection) {
let categorized = false;
let url = item.page.url;
let parentUrl = item.data.parentUrl;
for (let tag of tags) {
if (item.data.tags.includes(tag)) {
ret[tag].push(item);
categorized = true;
}
}
byUrl[url] = item;
if (!categorized) {
ret.other.push(item);
if (parentUrl) {
byParentUrl[parentUrl] ??= [];
byParentUrl[parentUrl].push(item);
}
}
// Remove empty categories
for (let category in ret) {
if (ret[category].length === 0) {
delete ret[category];
let urlToGroups = {};
for (let item of collection) {
let url = item.page.url;
let parentUrl = item.data.parentUrl;
if (grouping.isGroup(item)) {
continue;
}
let parentItem = byUrl[parentUrl];
if (parentItem && !grouping.isGroup(parentItem)) {
// Their parent is also here and is not a group
continue;
}
let candidateGroups = grouping.getCandidateGroups(item);
if (groups) {
candidateGroups = candidateGroups.filter(group => groups.includes(group));
}
urlToGroups[url] ??= [];
for (let group of candidateGroups) {
urlToGroups[url].push(group);
}
}
let ret = {};
for (let url in urlToGroups) {
let groups = urlToGroups[url];
let item = byUrl[url];
if (groups.length === 0) {
// Not filtered out but also not categorized
groups = ['other'];
}
for (let group of groups) {
ret[group] ??= [];
ret[group].push(item);
if (!ret[group].meta) {
if (group === 'other') {
ret[group].meta = { title: other };
} else {
ret[group].meta = grouping.getGroupMeta(group);
ret[group].meta.title = titles[group] ?? ret[group].meta.title ?? capitalize(group);
}
}
}
}
if (other === false) {
delete ret.other;
}
// Sort
let sortedGroups = groups ?? grouping.sortGroups?.(Object.keys(ret));
if (sortedGroups) {
ret = sortObject(ret, sortedGroups);
}
Object.defineProperty(ret, 'meta', {
value: {
groupCount: Object.keys(ret).length,
},
enumerable: false,
});
return ret;
}
/**
* Sort an object by its keys
* @param {*} obj
* @param {function | string[]} order
*/
function sortObject(obj, order) {
let ret = {};
let sortedKeys = Array.isArray(order) ? order : Object.keys(obj).sort(order);
for (let key of sortedKeys) {
if (key in obj) {
ret[key] = obj[key];
}
}
// Add any keys that weren't in the order
for (let key in obj) {
if (!(key in ret)) {
ret[key] = obj[key];
}
}
return ret;
}
export function getCategoryTitle(category, categories) {
let title;
if (Array.isArray(categories)) {
// Find relevant entry
// [{id: "Title"}, id2, ...]
title = categories.find(entry => typeof entry === 'object' && entry?.[category])?.[category];
} else if (typeof categories === 'object') {
// {id: "Title", id2: "Title 2", ...}
title = categories[category];
}
if (title) {
return title;
}
// Capitalized
return category.charAt(0).toUpperCase() + category.slice(1);
function capitalize(str) {
str += '';
return str.charAt(0).toUpperCase() + str.slice(1);
}
const IDENTITY = x => x;

13
docs/docs/components/index.njk
View File

@@ -2,13 +2,10 @@
title: Components
description: Components are the essential building blocks to create intuitive, cohesive experiences. Browse the library of customizable, framework-friendly web components included in Web Awesome.
layout: overview
categories:
- actions
- feedback: 'Feedback & Status'
- imagery
- inputs
- navigation
- organization
- helpers: 'Utilities'
override:tags: []
categories:
tags: [actions, feedback, imagery, inputs, navigation, organization, helpers]
titles:
feedback: 'Feedback & Status'
helpers: 'Utilities'
---

78
docs/docs/docs.11tydata.js
View File

@@ -1,10 +1,80 @@
/**
* Global data for all pages
*/
import { sort } from '../_utils/filters.js';
export default {
eleventyComputed: {
children(data) {
let mainTag = data.tags?.[0];
let collection = data.collections[mainTag] ?? [];
// Default parent. Can be overridden by explicitly setting parent in the data.
// parent can refer to either an ancestor page in the URL or another page in the same directory
parent(data) {
let { parent, page } = data;
return collection.filter(item => item.data.parent === data.page.fileSlug);
if (parent) {
return parent;
}
return page.url.split('/').filter(Boolean).at(-2);
},
parentUrl(data) {
let { parent, page } = data;
return getParentUrl(page.url, parent);
},
parentItem(data) {
let { parentUrl } = data;
return data.collections.all.find(item => item.url === parentUrl);
},
children(data) {
let { collections, page, parentOf } = data;
if (parentOf) {
return collections[parentOf];
}
let collection = collections.all ?? [];
let url = page.url;
let ret = collection.filter(item => {
return item.data.parentUrl === url;
});
sort(ret);
return ret;
},
},
};
function getParentUrl(url, parent) {
let parts = url.split('/').filter(Boolean);
let ancestorIndex = parts.findLastIndex(part => part === parent);
let retParts = parts.slice();
if (ancestorIndex > -1) {
// parent is an ancestor
retParts.splice(ancestorIndex + 1);
} else {
// parent is a sibling in the same directory
retParts.splice(-1, 1, parent);
}
let ret = retParts.join('/');
if (url.startsWith('/')) {
ret = '/' + ret;
}
if (!retParts.at(-1).includes('.') && !ret.endsWith('/')) {
// If no extension, make sure to end with a slash
ret += '/';
}
if (ret === '/docs/') {
ret = '/';
}
return ret;
}

3
docs/docs/layout.njk
View File

@@ -2,6 +2,7 @@
title: Layout
description: Layout components and utility classes help you organize content that can adapt to any device or screen size. See the [installation instructions](#installation) to use Web Awesome's layout tools in your project.
layout: overview
parentOf: layout
categories: ["components", "utilities"]
override:tags: []
---
@@ -22,4 +23,4 @@ Or, you can choose to import _only_ the utilities:
```html
<link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
```
{% endmarkdown %}
{% endmarkdown %}

2
docs/docs/palettes/index.njk
View File

@@ -5,6 +5,6 @@ layout: overview
override:tags: []
forTag: palette
categories:
tags: [other, pro]
other: Free
pro: Pro
---

2
docs/docs/patterns/index.njk
View File

@@ -2,7 +2,5 @@
title: Patterns
description: Patterns are reusable solutions to common design problems.
layout: overview
categories: ["e-commerce"]
listChildren: true
override:tags: []
---

1
docs/docs/resources/changelog.md
View File

@@ -17,6 +17,7 @@ During the alpha period, things might break! We take breaking changes very serio
- Fixed `wa-pill` class for text fields
- Fixed `pill` style for `<wa-input>` elements
- Fixed a bug in `<wa-color-picker>` that prevented light dismiss from working when clicking immediately above the color picker dropdown
- Fixed a bug in `<wa-select multiple>` that sometimes resulted in empty `<div>` elements being output
## 3.0.0-alpha.11

3
docs/docs/themes/creating.md vendored
View File

@@ -31,8 +31,7 @@ If you're customizing the default dark styles, scope your styles to the followin
```css
.wa-dark,
.wa-invert,
:is(:host-context(.wa-dark)) {
.wa-invert {
/* your custom styles here */
}
```

9
docs/docs/themes/index.njk vendored
View File

@@ -1,13 +1,13 @@
---
title: Themes
description: Themes are collections of design tokens that thread through every Web Awesome component and pattern.
description: Themes are collections of design tokens that thread through every Web Awesome component and pattern.
Themes play a crucial role in [customizing Web Awesome](/docs/customizing).
layout: overview
override:tags: []
forTag: theme
categories:
tags: [other, pro]
other: Free
pro: Pro
---
<div class="max-line-length">
@@ -30,7 +30,7 @@ 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.
Finally, we scope themes to `:host` to ensure the styles are applied to the shadow roots of custom elements.
For example, the default theme is set up like this:
@@ -44,8 +44,7 @@ For example, the default theme is set up like this:
}
.wa-dark,
.wa-invert,
:host-context(.wa-dark) {
.wa-invert {
/* subset of CSS custom properties for a dark color scheme */
}
```

1
docs/docs/tokens/index.njk
View File

@@ -3,4 +3,5 @@ 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: []
categories: {tags: true}
---

4
docs/index.md
View File

@@ -4,8 +4,6 @@ description: Build better with Web Awesome, the open source library of web compo
layout: page
---
<style>
.title,
.anchor-heading a,
@@ -387,4 +385,4 @@ layout: page
&copy; Fonticons, Inc.
</div>
</footer>
</div>
</div>

8
scripts/build.js
View File

@@ -4,6 +4,7 @@ import { execSync } from 'child_process';
import { deleteAsync } from 'del';
import esbuild from 'esbuild';
import { replace } from 'esbuild-plugin-replace';
import { mkdir, readFile } from 'fs/promises';
import getPort, { portNumbers } from 'get-port';
import { globby } from 'globby';
@@ -266,6 +267,13 @@ async function regenerateBundle() {
* Generates the documentation site.
*/
async function generateDocs() {
/**
* Used by the webawesome-app to skip doc generation since it will do its own.
*/
if (process.env.SKIP_ELEVENTY === 'true') {
return;
}
spinner.start('Writing the docs');
const args = [];

2
src/components/button/button.ts
View File

@@ -109,7 +109,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
@property({ reflect: true }) value: string | null = null;
/** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
@property() href = '';
@property({ reflect: true }) href = null;
/** Tells the browser where to open the link. Only used when `href` is present. */
@property() target: '_blank' | '_parent' | '_self' | '_top';

40
src/components/select/select.ts
View File

@@ -291,7 +291,6 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
?pill=${this.pill}
size=${this.size}
removable
@wa-remove=${(event: WaRemoveEvent) => this.handleTagRemove(event, option)}
>
${option.label}
</wa-tag>
@@ -587,10 +586,33 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));
}
private handleTagRemove(event: WaRemoveEvent, option: WaOption) {
private handleTagRemove(event: WaRemoveEvent, directOption?: WaOption) {
event.stopPropagation();
if (!this.disabled) {
if (this.disabled) return;
// Use the directly provided option if available (from getTag method)
let option = directOption;
// If no direct option was provided, find the option from the event path
if (!option) {
const tagElement = (event.target as Element).closest('wa-tag[part~=tag]');
if (tagElement) {
// Find the index of this tag among all tags
const tagsContainer = this.shadowRoot?.querySelector('[part="tags"]');
if (tagsContainer) {
const allTags = Array.from(tagsContainer.children);
const index = allTags.indexOf(tagElement as HTMLElement);
if (index >= 0 && index < this.selectedOptions.length) {
option = this.selectedOptions[index];
}
}
}
}
if (option) {
this.toggleOptionSelection(option, false);
// Emit after updating
@@ -707,10 +729,8 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
return this.selectedOptions.map((option, index) => {
if (index < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
const tag = this.getTag(option, index);
// Wrap so we can handle the remove
return html`<div @wa-remove=${(e: WaRemoveEvent) => this.handleTagRemove(e, option)}>
${typeof tag === 'string' ? unsafeHTML(tag) : tag}
</div>`;
if (!tag) return null;
return typeof tag === 'string' ? unsafeHTML(tag) : tag;
} else if (index === this.maxOptionsVisible) {
// Hit tag limit
return html`
@@ -726,7 +746,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
>
`;
}
return html``;
return null;
});
}
@@ -926,7 +946,9 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
/>
<!-- Tags need to wait for first hydration before populating otherwise it will create a hydration mismatch. -->
${this.multiple && this.hasUpdated ? html`<div part="tags" class="tags">${this.tags}</div>` : ''}
${this.multiple && this.hasUpdated
? html`<div part="tags" class="tags" @wa-remove=${this.handleTagRemove}>${this.tags}</div>`
: ''}
<input
class="value-input"

22
src/styles/color/anodized.css
View File

@@ -18,17 +18,17 @@
--wa-color-red: var(--wa-color-red-70);
--wa-color-red-key: 70;
--wa-color-orange-95: oklch(96.462% 0.02077 52.138);
--wa-color-orange-90: oklch(92.556% 0.04363 51.242);
--wa-color-orange-80: #fdbb96 /* oklch(84.396% 0.09052 50.397) */;
--wa-color-orange-70: #eb9c74 /* oklch(76.151% 0.10953 47.299) */;
--wa-color-orange-60: #cf8162 /* oklch(67.86% 0.10698 42.148) */;
--wa-color-orange-50: #aa6248 /* oklch(57.281% 0.1014 40.415) */;
--wa-color-orange-40: #864834 /* oklch(47.233% 0.08958 39.166) */;
--wa-color-orange-30: #6b3727 /* oklch(39.974% 0.07776 38.975) */;
--wa-color-orange-20: #50271a /* oklch(32.519% 0.0649 38.022) */;
--wa-color-orange-10: #32160e /* oklch(23.873% 0.04713 38.423) */;
--wa-color-orange-05: #210c06 /* oklch(18.614% 0.03797 38.589) */;
--wa-color-orange-95: #ffefe8 /* oklch(96.287% 0.01978 45.262) */;
--wa-color-orange-90: #ffe0d2 /* oklch(92.854% 0.03927 45.816) */;
--wa-color-orange-80: #fbbc9e /* oklch(84.557% 0.08373 46.569) */;
--wa-color-orange-70: #f3976f /* oklch(76.236% 0.12363 43.995) */;
--wa-color-orange-60: #d67e59 /* oklch(68.046% 0.12088 43.174) */;
--wa-color-orange-50: #ae6140 /* oklch(57.433% 0.11041 43.333) */;
--wa-color-orange-40: #89472c /* oklch(47.39% 0.09837 42.278) */;
--wa-color-orange-30: #6f351e /* oklch(40.084% 0.08944 41.51) */;
--wa-color-orange-20: #542513 /* oklch(32.696% 0.07578 40.822) */;
--wa-color-orange-10: #341408 /* oklch(23.762% 0.05577 40.619) */;
--wa-color-orange-05: #230b04 /* oklch(18.679% 0.04417 39.815) */;
--wa-color-orange: var(--wa-color-orange-70);
--wa-color-orange-key: 70;

14
src/styles/color/bright.css
View File

@@ -22,13 +22,13 @@
--wa-color-orange-90: oklch(92.395% 0.07984 53.06);
--wa-color-orange-80: oklch(84.389% 0.12224 47.981);
--wa-color-orange-70: oklch(76.55% 0.16521 42.512);
--wa-color-orange-60: #ea7237 /* oklch(68.444% 0.16501 44.349) */;
--wa-color-orange-50: #c0561a /* oklch(57.844% 0.15254 45.085) */;
--wa-color-orange-40: #963e05 /* oklch(47.639% 0.13153 45.898) */;
--wa-color-orange-30: oklch(40.376% 0.11554 45.517);
--wa-color-orange-20: oklch(32.94% 0.09927 45.913);
--wa-color-orange-10: oklch(24.083% 0.07743 46.027);
--wa-color-orange-05: oklch(18.817% 0.06098 48.455);
--wa-color-orange-60: #e97331 /* oklch(68.357% 0.16507 46.504) */;
--wa-color-orange-50: #bf5712 /* oklch(57.834% 0.15197 47.326) */;
--wa-color-orange-40: oklch(47.62% 0.132 48.51);
--wa-color-orange-30: oklch(40.38% 0.11554 50);
--wa-color-orange-20: oklch(32.94% 0.09927 52);
--wa-color-orange-10: oklch(24.083% 0.07743 54);
--wa-color-orange-05: oklch(18.817% 0.06098 55);
--wa-color-orange: var(--wa-color-orange-70);
--wa-color-orange-key: 70;

60
src/styles/color/classic.css
View File

@@ -6,45 +6,45 @@
.wa-palette-classic {
--wa-color-red-95: #fff0ef /* oklch(96.667% 0.01632 22.08) */;
--wa-color-red-90: #ffdedc /* oklch(92.735% 0.03679 21.966) */;
--wa-color-red-80: #ffb8b4 /* oklch(84.753% 0.08313 22.598) */;
--wa-color-red-70: #fd908e /* oklch(76.913% 0.13219 21.705) */;
--wa-color-red-60: #f46766 /* oklch(68.945% 0.17423 23.179) */;
--wa-color-red-50: #df2f2e /* oklch(58.922% 0.21141 26.911) */;
--wa-color-red-40: #b60000 /* oklch(48.747% 0.20003 29.234) */;
--wa-color-red-30: #910000 /* oklch(41.235% 0.16921 29.234) */;
--wa-color-red-20: #6d0000 /* oklch(33.581% 0.1378 29.234) */;
--wa-color-red-10: #450000 /* oklch(24.517% 0.1006 29.234) */;
--wa-color-red-05: #2f0000 /* oklch(19.165% 0.07864 29.234) */;
--wa-color-red-80: #ffb8b5 /* oklch(84.778% 0.083 21.686) */;
--wa-color-red-70: #fe8f8d /* oklch(76.859% 0.13466 21.762) */;
--wa-color-red-60: #f56667 /* oklch(68.982% 0.17631 22.472) */;
--wa-color-red-50: #e02c2b /* oklch(58.861% 0.21461 27.156) */;
--wa-color-red-40: #b5051a /* oklch(48.833% 0.19611 25.68) */;
--wa-color-red-30: #900015 /* oklch(41.172% 0.16676 24.609) */;
--wa-color-red-20: #6c000d /* oklch(33.479% 0.1356 24.617) */;
--wa-color-red-10: #450005 /* oklch(24.598% 0.09968 24.835) */;
--wa-color-red-05: #2f0002 /* oklch(19.218% 0.07801 25.517) */;
--wa-color-red: var(--wa-color-red-50);
--wa-color-red-key: 50;
--wa-color-orange-95: oklch(96.245% 0.04153 59.224);
--wa-color-orange-90: oklch(92.468% 0.07656 58.647);
--wa-color-orange-80: oklch(84.375% 0.11283 54.179);
--wa-color-orange-70: #fb945a /* oklch(76.369% 0.14454 48.621) */;
--wa-color-orange-60: #f26b31 /* oklch(68.509% 0.18046 41.503) */;
--wa-color-orange-50: #cf4812 /* oklch(58.288% 0.18026 38.576) */;
--wa-color-orange-40: oklch(48.175% 0.16316 38.526);
--wa-color-orange-30: oklch(40.779% 0.13925 37.899);
--wa-color-orange-20: oklch(33.129% 0.11288 38.58);
--wa-color-orange-10: oklch(24.259% 0.0831 38.502);
--wa-color-orange-05: oklch(18.969% 0.06527 38.137);
--wa-color-orange-95: #fff0e4 /* oklch(96.374% 0.0228 61.238) */;
--wa-color-orange-90: #ffe0c8 /* oklch(92.611% 0.04689 59.917) */;
--wa-color-orange-80: #ffbb89 /* oklch(84.386% 0.10217 57.161) */;
--wa-color-orange-70: #ff9342 /* oklch(76.486% 0.15964 54.102) */;
--wa-color-orange-60: #f36d00 /* oklch(68.715% 0.18774 47.79) */;
--wa-color-orange-50: #c94e00 /* oklch(58.068% 0.17131 43.217) */;
--wa-color-orange-40: #9d3800 /* oklch(47.924% 0.14534 41.739) */;
--wa-color-orange-30: #7e2900 /* oklch(40.53% 0.1259 40.51) */;
--wa-color-orange-20: #5e1c00 /* oklch(32.874% 0.1027 40.228) */;
--wa-color-orange-10: #3b0f00 /* oklch(24.125% 0.07446 40.837) */;
--wa-color-orange-05: #280700 /* oklch(18.837% 0.05933 39.827) */;
--wa-color-orange: var(--wa-color-orange-60);
--wa-color-orange-key: 60;
--wa-color-yellow-95: #fef2bf /* oklch(95.823% 0.06674 96.369) */;
--wa-color-yellow-90: #fde588 /* oklch(92.2% 0.11633 95.327) */;
--wa-color-yellow-80: #f4c34e /* oklch(83.998% 0.14252 85.76) */;
--wa-color-yellow-80: #f5c24b /* oklch(83.879% 0.14445 85.083) */;
--wa-color-yellow-70: #e9a010 /* oklch(75.825% 0.15689 75.537) */;
--wa-color-yellow-60: #de7c00 /* oklch(68.073% 0.15991 59.827) */;
--wa-color-yellow-50: #bc5908 /* oklch(57.654% 0.1491 50.241) */;
--wa-color-yellow-40: #934107 /* oklch(47.603% 0.12628 47.819) */;
--wa-color-yellow-30: #763104 /* oklch(40.324% 0.1093 46.564) */;
--wa-color-yellow-20: #572301 /* oklch(32.677% 0.08796 47.926) */;
--wa-color-yellow-10: #371300 /* oklch(24.001% 0.06559 47.77) */;
--wa-color-yellow-05: #250a00 /* oklch(18.773% 0.0519 47.039) */;
--wa-color-yellow: var(--wa-color-yellow-60);
--wa-color-yellow-key: 60;
--wa-color-yellow-60: #d78000 /* oklch(67.839% 0.15287 64.455) */;
--wa-color-yellow-50: #b26000 /* oklch(57.324% 0.13672 58.338) */;
--wa-color-yellow-40: #8a4700 /* oklch(47.183% 0.11461 56.655) */;
--wa-color-yellow-30: #6e3700 /* oklch(40.03% 0.0976 56.323) */;
--wa-color-yellow-20: #522700 /* oklch(32.54% 0.07981 55.802) */;
--wa-color-yellow-10: #331600 /* oklch(23.846% 0.05834 56.02) */;
--wa-color-yellow-05: #210d00 /* oklch(18.619% 0.04431 58.553) */;
--wa-color-yellow: var(--wa-color-yellow-70);
--wa-color-yellow-key: 70;
--wa-color-green-95: #d4fce1 /* oklch(95.554% 0.05477 155.71) */;
--wa-color-green-90: #a4f8c2 /* oklch(91.11% 0.1107 155.35) */;

26
src/styles/color/default.css
View File

@@ -18,19 +18,19 @@
--wa-color-red: var(--wa-color-red-50);
--wa-color-red-key: 50;
--wa-color-orange-95: oklch(96.494% 0.0335 57.914);
--wa-color-orange-90: oklch(92.556% 0.06963 56.631);
--wa-color-orange-80: oklch(84.494% 0.12276 53.381);
--wa-color-orange-70: oklch(76.375% 0.17194 46.091);
--wa-color-orange-60: #eb713f /* oklch(68.398% 0.16422 41.446) */;
--wa-color-orange-50: #cb4b1d /* oklch(58.153% 0.17174 38.404) */;
--wa-color-orange-40: #a2310c /* oklch(48.028% 0.15488 36.538) */;
--wa-color-orange-30: #7f2810 /* oklch(40.591% 0.12506 35.663) */;
--wa-color-orange-20: #5d1d0e /* oklch(32.908% 0.09683 34.387) */;
--wa-color-orange-10: #3a1005 /* oklch(24.088% 0.06954 35.613) */;
--wa-color-orange-05: #270803 /* oklch(18.801% 0.05509 34.149) */;
--wa-color-orange: var(--wa-color-orange-70);
--wa-color-orange-key: 70;
--wa-color-orange-95: #fff0e6 /* oklch(96.426% 0.02105 56.133) */;
--wa-color-orange-90: #ffdfca /* oklch(92.468% 0.04529 55.325) */;
--wa-color-orange-80: #ffbb94 /* oklch(84.588% 0.09454 50.876) */;
--wa-color-orange-70: #ff9266 /* oklch(76.744% 0.14429 42.309) */;
--wa-color-orange-60: #f46a45 /* oklch(68.848% 0.17805 35.951) */;
--wa-color-orange-50: #cd491c /* oklch(58.195% 0.17597 37.577) */;
--wa-color-orange-40: #9f3501 /* oklch(47.889% 0.14981 39.957) */;
--wa-color-orange-30: #802700 /* oklch(40.637% 0.1298 39.149) */;
--wa-color-orange-20: #601b00 /* oklch(33.123% 0.10587 39.117) */;
--wa-color-orange-10: #3c0d00 /* oklch(24.043% 0.07768 38.607) */;
--wa-color-orange-05: #280600 /* oklch(18.644% 0.0607 38.252) */;
--wa-color-orange: var(--wa-color-orange-60);
--wa-color-orange-key: 60;
--wa-color-yellow-95: #fef3cd /* oklch(96.322% 0.05069 93.748) */;
--wa-color-yellow-90: #ffe495 /* oklch(92.377% 0.10246 91.296) */;

22
src/styles/color/elegant.css
View File

@@ -18,17 +18,17 @@
--wa-color-red: var(--wa-color-red-40);
--wa-color-red-key: 40;
--wa-color-orange-95: oklch(96.238% 0.02664 61.788);
--wa-color-orange-90: #fbe1cc /* oklch(92.512% 0.04019 60.45) */;
--wa-color-orange-80: #edc1a0 /* oklch(84.097% 0.06661 58.236) */;
--wa-color-orange-70: #dda178 /* oklch(75.734% 0.09064 55.123) */;
--wa-color-orange-60: #cd8351 /* oklch(67.646% 0.1134 53.172) */;
--wa-color-orange-50: #b65d22 /* oklch(57.437% 0.13446 49.881) */;
--wa-color-orange-40: oklch(47.576% 0.13426 46.452);
--wa-color-orange-30: oklch(40.382% 0.12087 47.003);
--wa-color-orange-20: oklch(32.846% 0.0965 46.227);
--wa-color-orange-10: oklch(24.06% 0.06873 45.849);
--wa-color-orange-05: #260900 /* oklch(18.727% 0.05359 44.791) */;
--wa-color-orange-95: #ffefe1 /* oklch(96.105% 0.02545 63.746) */;
--wa-color-orange-90: #fbe0cb /* oklch(92.334% 0.04096 60.142) */;
--wa-color-orange-80: #efc19f /* oklch(84.313% 0.06973 58.09) */;
--wa-color-orange-70: #e1a173 /* oklch(76.013% 0.09772 56.368) */;
--wa-color-orange-60: #d1824d /* oklch(67.937% 0.11938 53.195) */;
--wa-color-orange-50: #b65d22 /* oklch(57.543% 0.13444 49.914) */;
--wa-color-orange-40: #934107 /* oklch(47.603% 0.12628 47.819) */;
--wa-color-orange-30: #773001 /* oklch(40.317% 0.11198 46.326) */;
--wa-color-orange-20: #592100 /* oklch(32.692% 0.09239 45.689) */;
--wa-color-orange-10: #381200 /* oklch(24.015% 0.06777 45.771) */;
--wa-color-orange-05: #260900 /* oklch(18.789% 0.05427 44.405) */;
--wa-color-orange: var(--wa-color-orange-50);
--wa-color-orange-key: 50;

26
src/styles/color/mild.css
View File

@@ -18,19 +18,19 @@
--wa-color-red: var(--wa-color-red-40);
--wa-color-red-key: 40;
--wa-color-orange-95: oklch(96.126% 0.05417 66.333);
--wa-color-orange-90: oklch(92.413% 0.07898 62.545);
--wa-color-orange-80: #f9bd86 /* oklch(84.088% 0.09891 63.847) */;
--wa-color-orange-70: #e2a05f /* oklch(75.707% 0.11352 64.057) */;
--wa-color-orange-60: #d18228 /* oklch(67.572% 0.13809 64.146) */;
--wa-color-orange-50: oklch(57.202% 0.13583 64.309);
--wa-color-orange-40: oklch(47.462% 0.13789 64.939);
--wa-color-orange-30: oklch(40.049% 0.12025 65.207);
--wa-color-orange-20: oklch(32.552% 0.09777 64.859);
--wa-color-orange-10: oklch(23.884% 0.07141 64.246);
--wa-color-orange-05: oklch(18.698% 0.05597 65.589);
--wa-color-orange: var(--wa-color-orange-60);
--wa-color-orange-key: 60;
--wa-color-orange-95: #fff0e8 /* oklch(96.479% 0.01949 50.157) */;
--wa-color-orange-90: #ffdfc8 /* oklch(92.42% 0.04692 57.822) */;
--wa-color-orange-80: #ffbb84 /* oklch(84.3% 0.10585 59.641) */;
--wa-color-orange-70: #e79f64 /* oklch(76.075% 0.1143 59.207) */;
--wa-color-orange-60: #ca854c /* oklch(67.612% 0.11209 58.789) */;
--wa-color-orange-50: #a56732 /* oklch(57.133% 0.10488 58.75) */;
--wa-color-orange-40: #824c1a /* oklch(47.091% 0.09621 59.168) */;
--wa-color-orange-30: #6a3907 /* oklch(39.832% 0.09012 58.688) */;
--wa-color-orange-20: #512800 /* oklch(32.57% 0.07814 57.787) */;
--wa-color-orange-10: #331600 /* oklch(23.846% 0.05834 56.02) */;
--wa-color-orange-05: #220c00 /* oklch(18.585% 0.04625 54.588) */;
--wa-color-orange: var(--wa-color-orange-70);
--wa-color-orange-key: 70;
--wa-color-yellow-95: #fff4b3 /* oklch(96.064% 0.08319 99.657) */;
--wa-color-yellow-90: #fee58c /* oklch(92.346% 0.11242 94.205) */;

22
src/styles/color/natural.css
View File

@@ -18,17 +18,17 @@
--wa-color-red: var(--wa-color-red-50);
--wa-color-red-key: 50;
--wa-color-orange-95: #f8f0ec /* oklch(96.084% 0.01043 54.557) */;
--wa-color-orange-90: #f2e3d8 /* oklch(92.485% 0.02211 56.694) */;
--wa-color-orange-80: #e4c4ad /* oklch(84.166% 0.04799 57.553) */;
--wa-color-orange-70: #d3a583 /* oklch(75.674% 0.07148 57.481) */;
--wa-color-orange-60: #bc8a65 /* oklch(67.319% 0.08062 57.054) */;
--wa-color-orange-50: #9e6940 /* oklch(56.757% 0.08845 56.746) */;
--wa-color-orange-40: #7e4d27 /* oklch(46.949% 0.08447 57.382) */;
--wa-color-orange-30: #673a17 /* oklch(39.774% 0.0793 55.768) */;
--wa-color-orange-20: #4f2906 /* oklch(32.45% 0.0725 57.629) */;
--wa-color-orange-10: #311702 /* oklch(23.759% 0.05361 57.126) */;
--wa-color-orange-05: #200d01 /* oklch(18.517% 0.04211 57.178) */;
--wa-color-orange-95: #f9f2ed /* oklch(96.52% 0.01008 58.217) */;
--wa-color-orange-90: #f4e3d6 /* oklch(92.595% 0.02556 59.903) */;
--wa-color-orange-80: #e6c3aa /* oklch(84.087% 0.05242 57.474) */;
--wa-color-orange-70: #d3a685 /* oklch(75.824% 0.06976 57.703) */;
--wa-color-orange-60: #bf8962 /* oklch(67.428% 0.08515 56.553) */;
--wa-color-orange-50: #a26839 /* oklch(57.025% 0.09733 58.071) */;
--wa-color-orange-40: #824b20 /* oklch(46.959% 0.09366 55.634) */;
--wa-color-orange-30: #683a17 /* oklch(39.855% 0.08077 54.814) */;
--wa-color-orange-20: #4d2a0e /* oklch(32.469% 0.06563 55.984) */;
--wa-color-orange-10: #301705 /* oklch(23.621% 0.04968 54.306) */;
--wa-color-orange-05: #1f0e03 /* oklch(18.572% 0.03671 56.067) */;
--wa-color-orange: var(--wa-color-orange-50);
--wa-color-orange-key: 50;

26
src/styles/color/rudimentary.css
View File

@@ -18,19 +18,19 @@
--wa-color-red: var(--wa-color-red-50);
--wa-color-red-key: 50;
--wa-color-orange-95: oklch(96.488% 0.04965 58.92);
--wa-color-orange-90: oklch(92.244% 0.08759 57.789);
--wa-color-orange-80: oklch(84.32% 0.12702 56.232);
--wa-color-orange-70: oklch(76.31% 0.17967 50.95);
--wa-color-orange-60: #e87431 /* oklch(68.352% 0.16354 47.083) */;
--wa-color-orange-50: oklch(58.23% 0.17947 43.3);
--wa-color-orange-40: oklch(48.089% 0.16071 40.798);
--wa-color-orange-30: oklch(40.708% 0.13699 39.616);
--wa-color-orange-20: oklch(33.124% 0.1121 39.599);
--wa-color-orange-10: oklch(24.257% 0.08204 39.602);
--wa-color-orange-05: oklch(18.966% 0.06414 39.606);
--wa-color-orange: var(--wa-color-orange-70);
--wa-color-orange-key: 70;
--wa-color-orange-95: #fff1e4 /* oklch(96.567% 0.02297 65.466) */;
--wa-color-orange-90: #ffdfc4 /* oklch(92.327% 0.0504 62.301) */;
--wa-color-orange-80: #ffbc80 /* oklch(84.418% 0.10871 62.363) */;
--wa-color-orange-70: #ff9427 /* oklch(76.467% 0.1689 59.353) */;
--wa-color-orange-60: #f16e00 /* oklch(68.563% 0.18516 48.551) */;
--wa-color-orange-50: #c75003 /* oklch(58.025% 0.16741 44.08) */;
--wa-color-orange-40: #9e3702 /* oklch(47.974% 0.14693 40.809) */;
--wa-color-orange-30: #802700 /* oklch(40.637% 0.1298 39.149) */;
--wa-color-orange-20: #601a00 /* oklch(32.994% 0.10679 38.524) */;
--wa-color-orange-10: #3d0d00 /* oklch(24.253% 0.07888 38.298) */;
--wa-color-orange-05: #290600 /* oklch(18.868% 0.06197 37.848) */;
--wa-color-orange: var(--wa-color-orange-60);
--wa-color-orange-key: 60;
--wa-color-yellow-95: #fff5b4 /* oklch(96.281% 0.08306 100.4) */;
--wa-color-yellow-90: #fde572 /* oklch(91.915% 0.13738 97.724) */;

26
src/styles/color/vogue.css
View File

@@ -18,19 +18,19 @@
--wa-color-red: var(--wa-color-red-50);
--wa-color-red-key: 50;
--wa-color-orange-95: oklch(96.355% 0.05982 62.448);
--wa-color-orange-90: oklch(92.371% 0.10134 60.314);
--wa-color-orange-80: oklch(84.228% 0.13101 54.157);
--wa-color-orange-70: oklch(76.275% 0.16839 51.143);
--wa-color-orange-60: #e67530 /* oklch(68.22% 0.16179 47.997) */;
--wa-color-orange-50: oklch(58.011% 0.16819 44.953);
--wa-color-orange-40: #9b390d /* oklch(47.739% 0.14004 40.585) */;
--wa-color-orange-30: #7a2b17 /* oklch(40.323% 0.11475 35.602) */;
--wa-color-orange-20: #5c1e0f /* oklch(32.963% 0.09552 34.666) */;
--wa-color-orange-10: #3a0f06 /* oklch(24.042% 0.07066 34.715) */;
--wa-color-orange-05: #270803 /* oklch(18.867% 0.05444 34.696) */;
--wa-color-orange: var(--wa-color-orange-70);
--wa-color-orange-key: 70;
--wa-color-orange-95: #fff1de /* oklch(96.415% 0.02927 75.692) */;
--wa-color-orange-90: #fee0bc /* oklch(92.25% 0.05764 72.084) */;
--wa-color-orange-80: #fdbe7a /* oklch(84.485% 0.11179 67.463) */;
--wa-color-orange-70: #fb9641 /* oklch(76.472% 0.15504 57.097) */;
--wa-color-orange-60: #f56b11 /* oklch(68.77% 0.18951 45.673) */;
--wa-color-orange-50: #cf480e /* oklch(58.335% 0.18077 39.019) */;
--wa-color-orange-40: #a13308 /* oklch(48.025% 0.15268 37.837) */;
--wa-color-orange-30: #802604 /* oklch(40.538% 0.12998 37.701) */;
--wa-color-orange-20: #601a02 /* oklch(33.012% 0.10627 37.613) */;
--wa-color-orange-10: #3d0d01 /* oklch(24.269% 0.07841 37.157) */;
--wa-color-orange-05: #290600 /* oklch(18.868% 0.06197 37.848) */;
--wa-color-orange: var(--wa-color-orange-60);
--wa-color-orange-key: 60;
--wa-color-yellow-95: #fef6ab /* oklch(96.234% 0.09455 102.83) */;
--wa-color-yellow-90: #fde761 /* oklch(92.138% 0.15325 99.997) */;

3
src/styles/themes/active/color.css
View File

@@ -80,8 +80,7 @@
}
.wa-dark,
.wa-invert,
:is(:host-context(.wa-dark)) {
.wa-invert {
/**
* Foundational Colors
*/

3
src/styles/themes/awesome/color.css
View File

@@ -71,8 +71,7 @@
}
.wa-dark,
.wa-invert,
:is(:host-context(.wa-dark)) {
.wa-invert {
color-scheme: dark;
color: var(--wa-color-text-normal);

3
src/styles/themes/brutalist/color.css
View File

@@ -78,8 +78,7 @@
}
.wa-dark,
.wa-invert,
:is(:host-context(.wa-dark)) {
.wa-invert {
color-scheme: dark;
color: var(--wa-color-text-normal);

3
src/styles/themes/classic/color.css
View File

@@ -68,8 +68,7 @@
}
.wa-dark,
.wa-invert,
:is(:host-context(.wa-dark)) {
.wa-invert {
/**
* Foundational Colors
*/

4
src/styles/themes/default/color.css
View File

@@ -114,10 +114,8 @@
--wa-color-neutral-on-loud: white;
}
/** need to wrap :host-context() in an :is() selector for unsupported browsers */
.wa-dark,
.wa-invert,
:is(:host-context(.wa-dark)) {
.wa-invert {
color-scheme: dark;
color: var(--wa-color-text-normal);

3
src/styles/themes/matter/color.css
View File

@@ -85,8 +85,7 @@
}
.wa-dark,
.wa-invert,
:is(:host-context(.wa-dark)) {
.wa-invert {
/**
* Foundational Colors
*/

3
src/styles/themes/mellow/color.css
View File

@@ -83,8 +83,7 @@
}
.wa-dark,
.wa-invert,
:is(:host-context(.wa-dark)) {
.wa-invert {
/**
* Foundational Colors
*/

3
src/styles/themes/playful/color.css
View File

@@ -75,8 +75,7 @@
}
.wa-dark,
.wa-invert,
:is(:host-context(.wa-dark)) {
.wa-invert {
/**
* Foundational Colors
*/

3
src/styles/themes/premium/color.css
View File

@@ -74,8 +74,7 @@
}
.wa-dark,
.wa-invert,
:is(:host-context(.wa-dark)) {
.wa-invert {
/**
* Foundational Colors
*/

3
src/styles/themes/tailspin/color.css
View File

@@ -84,8 +84,7 @@
}
.wa-dark,
.wa-invert,
:is(:host-context(.wa-dark)) {
.wa-invert {
/**
* Foundational Colors
*/

3
src/styles/themes/tailspin/overrides.css
View File

@@ -1,7 +1,6 @@
:where(:root),
:host,
.wa-theme-tailspin,
:is(:host-context(.wa-theme-tailspin)) {
.wa-theme-tailspin {
h1,
h2,
h3,