mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
Merge branch 'next' into dialog-fixes
This commit is contained in:
Cory LaViska
9
.github/workflows/ssr_tests.js.yml
vendored
9
.github/workflows/ssr_tests.js.yml
vendored
@@ -1,11 +1,12 @@
|
||||
# # This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
|
||||
# # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
|
||||
# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
|
||||
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
|
||||
|
||||
name: SSR Tests
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [next]
|
||||
# push:
|
||||
# branches: [next]
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
ssr_test:
|
||||
|
||||
@@ -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';
|
||||
@@ -6,9 +7,10 @@ import { highlightCodePlugin } from './_utils/highlight-code.js';
|
||||
import { markdown } from './_utils/markdown.js';
|
||||
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 litPlugin from '@lit-labs/eleventy-plugin-lit';
|
||||
import { readFile } from 'fs/promises';
|
||||
import componentList from './_data/componentList.js';
|
||||
import nunjucks from 'nunjucks';
|
||||
// import componentList from './_data/componentList.js';
|
||||
import * as filters from './_utils/filters.js';
|
||||
import { outlinePlugin } from './_utils/outline.js';
|
||||
import { replaceTextPlugin } from './_utils/replace-text.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,22 @@ 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 +70,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 +163,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 +189,31 @@ export default function (eleventyConfig) {
|
||||
eleventyConfig.addPassthroughCopy(glob);
|
||||
}
|
||||
|
||||
// // SSR plugin
|
||||
// // Make sure this is the last thing, we don't 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: {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}">
|
||||
<html lang="en" data-fa-kit-code="b10bfbde90" data-cdn-url="{% cdnUrl %}" class="wa-cloak">
|
||||
<head>
|
||||
{% include 'head.njk' %}
|
||||
<meta name="theme-color" content="#f36944">
|
||||
@@ -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' %}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 and pages.length > 0 %}
|
||||
<h2 class="index-category" id="{{ category | slugify }}">
|
||||
{% 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>
|
||||
|
||||
@@ -23,10 +23,12 @@
|
||||
<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>
|
||||
|
||||
{# Internal components #}
|
||||
<script type="module" src="/assets/components/scoped.js"></script>
|
||||
|
||||
{# Web Awesome #}
|
||||
<script type="module" src="/dist/webawesome.ssr-loader.js"></script>
|
||||
<script type="module" src="/dist/webawesome.loader.js"></script>
|
||||
|
||||
<script type="module" src="/assets/scripts/theme-picker.js"></script>
|
||||
{# Preset Theme #}
|
||||
@@ -47,3 +49,6 @@
|
||||
<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,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 -%}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{% if not (isAlpha and page.data.noAlpha) and page.fileSlug != tag and not page.data.unlisted -%}
|
||||
{% if page | show -%}
|
||||
<li>
|
||||
<a href="{{ page.url }}">{{ page.data.title }}</a>
|
||||
{% if page.data.status == 'experimental' %}<wa-icon name="flask"></wa-icon>{% endif %}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
{% set themeId = theme.fileSlug %}
|
||||
|
||||
<div>
|
||||
<template shadowrootmode="open">
|
||||
<wa-scoped class="theme-icon-host theme-color-icon-host">
|
||||
<template>
|
||||
<link rel="stylesheet" href="/dist/styles/utilities.css">
|
||||
<link rel="stylesheet" href="/dist/styles/themes/{{ page.fileSlug or 'default' }}.css">
|
||||
<link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}/color.css">
|
||||
<link rel="stylesheet" href="/assets/styles/theme-icons.css">
|
||||
|
||||
<div class="theme-color-icon wa-theme-{{ themeId }}">
|
||||
<div class="theme-icon theme-color-icon wa-theme-{{ themeId }}">
|
||||
<div class="wa-brand wa-accent">A</div>
|
||||
<div class="wa-brand wa-outlined">A</div>
|
||||
<div class="wa-brand wa-filled">A</div>
|
||||
@@ -21,4 +21,4 @@
|
||||
{# <div class="wa-warning wa-outlined wa-filled"><wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon></div> #}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</wa-scoped>
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
{% set themeId = theme.fileSlug %}
|
||||
{% set themeId = theme.fileSlug or page.fileSlug %}
|
||||
|
||||
<div>
|
||||
<template shadowrootmode="open">
|
||||
<wa-scoped class="theme-icon-host theme-typography-icon-host">
|
||||
<template>
|
||||
<link rel="stylesheet" href="/dist/styles/native/content.css">
|
||||
<link rel="stylesheet" href="/dist/styles/native/blockquote.css">
|
||||
<link rel="stylesheet" href="/dist/styles/themes/{{ page.fileSlug or 'default' }}.css">
|
||||
<link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}/typography.css">
|
||||
<link rel="stylesheet" href="/assets/styles/theme-icons.css">
|
||||
|
||||
<div class="theme-typography-icon wa-theme-{{ themeId }}" data-no-outline data-no-anchor role="presentation">
|
||||
<div class="theme-icon theme-typography-icon wa-theme-{{ themeId }}" data-no-outline data-no-anchor role="presentation">
|
||||
<h3>Title</h3>
|
||||
<p>Body text</p>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</wa-scoped>
|
||||
|
||||
29
docs/_includes/svgs/theme.njk
Normal file
29
docs/_includes/svgs/theme.njk
Normal file
@@ -0,0 +1,29 @@
|
||||
{% set themeId = theme.fileSlug or page.fileSlug %}
|
||||
|
||||
|
||||
<wa-scoped class="theme-icon-host theme-overall-icon-host">
|
||||
<template>
|
||||
<link rel="stylesheet" href="/dist/styles/utilities.css">
|
||||
<link rel="stylesheet" href="/dist/styles/native/content.css">
|
||||
<link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}.css">
|
||||
<link rel="stylesheet" href="/assets/styles/theme-icons.css">
|
||||
|
||||
<div class="theme-icon theme-overall-icon" role="presentation" data-no-anchor data-no-outline>
|
||||
<div class="row row-1">
|
||||
<h2>Aa</h2>
|
||||
<div class="swatches">
|
||||
<div class="wa-brand"></div>
|
||||
|
||||
<div class="wa-success"></div>
|
||||
<div class="wa-warning"></div>
|
||||
<div class="wa-danger"></div>
|
||||
<div class="wa-neutral"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row row-2">
|
||||
<wa-input value="Input" size="small"></wa-input>
|
||||
<wa-button size="small" variant="brand">Go</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</wa-scoped>
|
||||
@@ -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>
|
||||
|
||||
@@ -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" %}
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -177,72 +178,196 @@ export function sort(arr, by = { 'data.order': 1, 'data.title': '' }) {
|
||||
});
|
||||
}
|
||||
|
||||
export function show(page) {
|
||||
return !(page.data.noAlpha && page.data.isAlpha) && !page.data.unlisted;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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', filter = show } = 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 = {};
|
||||
|
||||
if (filter) {
|
||||
collection = collection.filter(filter);
|
||||
}
|
||||
|
||||
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);
|
||||
} else {
|
||||
// At least make sure other is last
|
||||
if (ret.other) {
|
||||
let otherGroup = ret.other;
|
||||
delete ret.other;
|
||||
ret.other = otherGroup;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
@@ -39,7 +39,7 @@ export function outlinePlugin(options = {}) {
|
||||
}
|
||||
|
||||
// Create a clone of the heading so we can remove links and [data-no-outline] elements from the text content
|
||||
clone.querySelectorAll('a').forEach(a => a.remove());
|
||||
clone.querySelectorAll('.wa-visually-hidden, [hidden], [aria-hidden="true"]').forEach(el => el.remove());
|
||||
clone.querySelectorAll('[data-no-outline]').forEach(el => el.remove());
|
||||
|
||||
// Generate the link
|
||||
|
||||
169
docs/assets/components/scoped.js
Normal file
169
docs/assets/components/scoped.js
Normal file
@@ -0,0 +1,169 @@
|
||||
/**
|
||||
* Low-level utility to encapsulate a bit of HTML (mainly to apply certain stylesheets to it without them leaking to the rest of the page)
|
||||
* Usage: <wa-scoped><template><!-- your HTML here --></template></wa-scoped>
|
||||
*/
|
||||
|
||||
// Map of <wa-scoped> elements to any global <style> elements they’ve created
|
||||
const imports = new Set();
|
||||
const fontFaceRules = new Set();
|
||||
|
||||
export default class WaScoped extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' });
|
||||
|
||||
this.observer = new MutationObserver(() => this.render());
|
||||
this.observer.observe(this, { childList: true, subtree: true, characterData: true });
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.render();
|
||||
this.ownerDocument.documentElement.addEventListener('wa-color-scheme-change', e =>
|
||||
this.#applyDarkMode(e.detail.dark),
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
this.observer.takeRecords();
|
||||
this.observer.disconnect();
|
||||
|
||||
this.shadowRoot.innerHTML = '';
|
||||
|
||||
// To avoid mutating this.childNodes while iterating over it
|
||||
let nodes = [];
|
||||
|
||||
for (let template of this.childNodes) {
|
||||
// Other solutions we can try if needed: <script type="text/html">, or comment nodes
|
||||
if (template instanceof HTMLTemplateElement) {
|
||||
if (template.content.childNodes.length > 0) {
|
||||
nodes.push(template.content.cloneNode(true));
|
||||
} else if (template.childNodes.length > 0) {
|
||||
// Fake template, suck its children out of the light DOM
|
||||
nodes.push(...template.childNodes);
|
||||
}
|
||||
} else {
|
||||
// Regular child, suck it out of the light DOM
|
||||
nodes.push(template);
|
||||
}
|
||||
}
|
||||
|
||||
this.shadowRoot.append(...nodes);
|
||||
|
||||
this.#fixStyles();
|
||||
this.#applyDarkMode();
|
||||
|
||||
this.observer.observe(this, { childList: true, subtree: true, characterData: true });
|
||||
}
|
||||
|
||||
#applyDarkMode(isDark = getComputedStyle(this).colorScheme === 'dark') {
|
||||
// Hack to make dark mode work
|
||||
// NOTE If any child nodes actually have .wa-dark, this will override it
|
||||
for (let node of this.shadowRoot.children) {
|
||||
node.classList.toggle('wa-dark', isDark);
|
||||
}
|
||||
this.classList.toggle('wa-dark', isDark);
|
||||
}
|
||||
|
||||
/**
|
||||
* @font-face does not work in shadow DOM in Chrome & FF, as of March 2025 https://issues.chromium.org/issues/41085401
|
||||
* This works around this issue by traversing the shadow DOM CSS looking
|
||||
* for @font-face rules or CSS imports to known font providers and copies them to the main document
|
||||
*/
|
||||
async #fixStyles() {
|
||||
let styleElements = [...this.shadowRoot.querySelectorAll('link[rel="stylesheet"], style')];
|
||||
|
||||
let loadStates = styleElements.map(element => {
|
||||
try {
|
||||
if (element.sheet?.cssRules) {
|
||||
// Already loaded
|
||||
return Promise.resolve(element.sheet);
|
||||
}
|
||||
} catch (e) {
|
||||
// CORS
|
||||
return Promise.resolve(null);
|
||||
}
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
element.addEventListener('load', e => resolve(element.sheet));
|
||||
element.addEventListener('error', e => reject(null));
|
||||
});
|
||||
});
|
||||
|
||||
await Promise.allSettled(loadStates);
|
||||
|
||||
let fontRules = findFontFaceRules(...this.shadowRoot.styleSheets);
|
||||
|
||||
if (!fontRules.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
let doc = this.ownerDocument;
|
||||
// Why not adoptedStyleSheets? Can't have @import in those yet
|
||||
let id = `wa-scoped-hoisted-fonts`;
|
||||
let style = doc.head.querySelector('style#' + id);
|
||||
if (!style) {
|
||||
style = Object.assign(doc.createElement('style'), { id, textContent: ' ' });
|
||||
doc.head.append(style);
|
||||
}
|
||||
let sheet = style.sheet;
|
||||
|
||||
for (let rule of fontRules) {
|
||||
let cssText = rule.cssText;
|
||||
if (rule.type === CSSRule.FONT_FACE_RULE) {
|
||||
if (fontFaceRules.has(cssText)) {
|
||||
continue;
|
||||
}
|
||||
fontFaceRules.add(cssText);
|
||||
sheet.insertRule(cssText);
|
||||
} else if (rule.type === CSSRule.IMPORT_RULE) {
|
||||
if (imports.has(rule.href)) {
|
||||
continue;
|
||||
}
|
||||
imports.add(rule.href);
|
||||
sheet.insertRule(cssText, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
static observedAttributes = [];
|
||||
}
|
||||
|
||||
customElements.define('wa-scoped', WaScoped);
|
||||
|
||||
export const WEB_FONT_HOSTS = [
|
||||
'fonts.googleapis.com',
|
||||
'fonts.gstatic.com',
|
||||
'use.typekit.net',
|
||||
'fonts.adobe.com',
|
||||
'kit.fontawesome.com',
|
||||
'pro.fontawesome.com',
|
||||
'cdn.materialdesignicons.com',
|
||||
];
|
||||
|
||||
function findFontFaceRules(...stylesheets) {
|
||||
let ret = [];
|
||||
|
||||
for (let sheet of stylesheets) {
|
||||
let rules;
|
||||
try {
|
||||
rules = sheet.cssRules;
|
||||
} catch (e) {
|
||||
// CORS
|
||||
continue;
|
||||
}
|
||||
|
||||
for (let rule of rules) {
|
||||
if (rule.type === CSSRule.FONT_FACE_RULE) {
|
||||
ret.push(rule);
|
||||
} else if (rule.type === CSSRule.IMPORT_RULE) {
|
||||
if (WEB_FONT_HOSTS.some(host => rule.href.includes(host))) {
|
||||
ret.push(rule);
|
||||
} else if (rule.styleSheet) {
|
||||
ret.push(...findFontFaceRules(rule.styleSheet));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
@@ -1,3 +1,11 @@
|
||||
function debounce(func, wait) {
|
||||
let timeout;
|
||||
return function (...args) {
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => func.apply(this, args), wait);
|
||||
};
|
||||
}
|
||||
|
||||
function updateResults(input) {
|
||||
const filter = input.value.toLowerCase().trim();
|
||||
let filtered = Boolean(filter);
|
||||
@@ -18,8 +26,10 @@ function updateResults(input) {
|
||||
}
|
||||
}
|
||||
|
||||
const debouncedUpdateResults = debounce(updateResults, 300);
|
||||
|
||||
document.documentElement.addEventListener('input', e => {
|
||||
if (e.target?.matches('#block-filter wa-input')) {
|
||||
updateResults(e.target);
|
||||
debouncedUpdateResults(e.target);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,12 +1,30 @@
|
||||
let initialPageLoadComplete = false;
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
initialPageLoadComplete = true;
|
||||
});
|
||||
|
||||
// Helper for view transitions
|
||||
export function domChange(fn, { behavior = 'smooth' } = {}) {
|
||||
export function domChange(fn, { behavior = 'smooth', ignoreInitialLoad = true } = {}) {
|
||||
const canUseViewTransitions =
|
||||
document.startViewTransition && !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
// Skip transitions on initial page load
|
||||
if (!initialPageLoadComplete && ignoreInitialLoad) {
|
||||
fn(false);
|
||||
return null;
|
||||
}
|
||||
|
||||
if (canUseViewTransitions && behavior === 'smooth') {
|
||||
document.startViewTransition(fn);
|
||||
const transition = document.startViewTransition(() => {
|
||||
fn(true);
|
||||
// Wait a brief delay before finishing the transition to prevent jumpiness
|
||||
return new Promise(resolve => setTimeout(resolve, 200));
|
||||
});
|
||||
return transition;
|
||||
} else {
|
||||
fn(true);
|
||||
fn(false);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -100,6 +118,7 @@ const colorScheme = new ThemeAspect({
|
||||
domChange(() => {
|
||||
let dark = this.computedValue === 'dark';
|
||||
document.documentElement.classList.toggle(`wa-dark`, dark);
|
||||
document.documentElement.dispatchEvent(new CustomEvent('wa-color-scheme-change', { detail: { dark } }));
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
import 'https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm';
|
||||
import { preventTurboFouce } from '/dist/webawesome.js';
|
||||
|
||||
if (!window.___turboScrollPositions___) {
|
||||
window.___turboScrollPositions___ = {};
|
||||
}
|
||||
@@ -70,3 +73,4 @@ function fixDSD(e) {
|
||||
window.addEventListener('turbo:before-cache', saveScrollPosition);
|
||||
window.addEventListener('turbo:before-render', restoreScrollPosition);
|
||||
window.addEventListener('turbo:render', restoreScrollPosition);
|
||||
preventTurboFouce();
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
@import 'outline.css';
|
||||
@import 'search.css';
|
||||
@import 'cera_typeface.css';
|
||||
@import 'theme-icons.css';
|
||||
|
||||
:root {
|
||||
--wa-brand-orange: #f36944;
|
||||
@@ -370,10 +371,22 @@ wa-page > main:has(> .index-grid) {
|
||||
|
||||
.index-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(22ch, 100%), 1fr));
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--wa-space-2xl);
|
||||
margin-block-end: var(--wa-space-3xl);
|
||||
|
||||
@media screen and (max-width: 1470px) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
grid-template-columns: repeat(1, 1fr);
|
||||
}
|
||||
|
||||
a {
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
text-decoration: none;
|
||||
@@ -400,7 +413,6 @@ wa-page > main:has(> .index-grid) {
|
||||
|
||||
&::part(header) {
|
||||
background-color: var(--header-background, var(--wa-color-neutral-fill-quiet));
|
||||
border-bottom: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@@ -1,3 +1,37 @@
|
||||
wa-card:has(> .theme-icon-host, > [slot='header'] > .theme-icon-host) {
|
||||
min-width: 22ch;
|
||||
|
||||
&::part(header) {
|
||||
/* We want to add a background color, so any spacing needs to go on .theme-icon */
|
||||
padding: 0;
|
||||
min-block-size: 0;
|
||||
}
|
||||
|
||||
[slot='header'] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-icon-host {
|
||||
display: block;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.theme-icon {
|
||||
padding: var(--wa-space-xs) var(--wa-space-m);
|
||||
border-radius: inherit;
|
||||
box-sizing: border-box;
|
||||
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
margin-block: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-color-icon {
|
||||
display: grid;
|
||||
gap: var(--wa-space-xs);
|
||||
@@ -25,10 +59,50 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
h3,
|
||||
p {
|
||||
margin-block: 0;
|
||||
padding: 0;
|
||||
.theme-overall-icon {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: var(--wa-space-xs);
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 7.5rem;
|
||||
box-sizing: border-box;
|
||||
background: var(--wa-color-surface-lowered);
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
gap: var(--wa-space-xs);
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.row-2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
contain: inline-size;
|
||||
width: 100%;
|
||||
|
||||
wa-input {
|
||||
min-width: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.swatches {
|
||||
display: flex;
|
||||
gap: var(--wa-space-3xs);
|
||||
|
||||
> div {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
background: var(--wa-color-fill-loud);
|
||||
color: var(--wa-color-on-loud);
|
||||
|
||||
&.wa-brand {
|
||||
width: 2.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,27 +15,17 @@ icon: card
|
||||
|
||||
<strong>Mittens</strong><br />
|
||||
This kitten is as cute as he is playful. Bring him home today!<br />
|
||||
<small>6 weeks old</small>
|
||||
<small class="wa-caption-m">6 weeks old</small>
|
||||
|
||||
<div slot="footer">
|
||||
<div slot="footer" class="wa-split">
|
||||
<wa-button variant="brand" pill>More Info</wa-button>
|
||||
<wa-rating></wa-rating>
|
||||
<wa-rating label="Rating"></wa-rating>
|
||||
</div>
|
||||
</wa-card>
|
||||
|
||||
<style>
|
||||
.card-overview {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.card-overview small {
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
.card-overview [slot='footer'] {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -65,9 +55,9 @@ If using SSR, you need to also use the `with-header` attribute to add a header t
|
||||
|
||||
```html {.example}
|
||||
<wa-card with-header class="card-header">
|
||||
<div slot="header">
|
||||
<div slot="header" class="wa-split">
|
||||
Header Title
|
||||
<wa-icon-button name="gear" variant="solid" label="Settings"></wa-icon-button>
|
||||
<wa-icon-button name="gear" variant="solid" label="Settings" class="wa-size-m"></wa-icon-button>
|
||||
</div>
|
||||
|
||||
This card has a header. You can put all sorts of things in it!
|
||||
@@ -78,19 +68,9 @@ If using SSR, you need to also use the `with-header` attribute to add a header t
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.card-header [slot='header'] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-header h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card-header wa-icon-button {
|
||||
font-size: var(--wa-font-size-m);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@@ -103,7 +83,7 @@ If using SSR, you need to also use the `with-footer` attribute to add a footer t
|
||||
<wa-card with-footer class="card-footer">
|
||||
This card has a footer. You can put all sorts of things in it!
|
||||
|
||||
<div slot="footer">
|
||||
<div slot="footer" class="wa-split">
|
||||
<wa-rating></wa-rating>
|
||||
<wa-button variant="brand">Preview</wa-button>
|
||||
</div>
|
||||
@@ -113,12 +93,6 @@ If using SSR, you need to also use the `with-footer` attribute to add a footer t
|
||||
.card-footer {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.card-footer [slot='footer'] {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@@ -153,7 +127,7 @@ Use the `size` attribute to change a card's size.
|
||||
<wa-card with-footer size="small">
|
||||
This is a small card.
|
||||
|
||||
<footer slot="footer" class="wa-flank">
|
||||
<footer slot="footer" class="wa-split">
|
||||
<wa-button variant="brand" pill>More Info</wa-button>
|
||||
<wa-rating></wa-rating>
|
||||
</footer>
|
||||
@@ -162,7 +136,7 @@ Use the `size` attribute to change a card's size.
|
||||
<wa-card with-footer size="medium">
|
||||
This is a medium card (default).
|
||||
|
||||
<footer slot="footer" class="wa-flank">
|
||||
<footer slot="footer" class="wa-split">
|
||||
<wa-button variant="brand" pill>More Info</wa-button>
|
||||
<wa-rating></wa-rating>
|
||||
</footer>
|
||||
@@ -171,14 +145,39 @@ Use the `size` attribute to change a card's size.
|
||||
<wa-card with-footer size="large">
|
||||
This is a large card.
|
||||
|
||||
<footer slot="footer" class="wa-flank">
|
||||
<footer slot="footer" class="wa-split">
|
||||
<wa-button variant="brand" pill>More Info</wa-button>
|
||||
<wa-rating></wa-rating>
|
||||
</footer>
|
||||
</wa-card>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
<style>
|
||||
</style>
|
||||
### Appearance
|
||||
|
||||
Use the `appearance` attribute to change the card's visual appearance.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-grid">
|
||||
<wa-card>
|
||||
<img
|
||||
slot="image"
|
||||
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
|
||||
alt="A kitten sits patiently between a terracotta pot and decorative grasses."
|
||||
/>
|
||||
<div slot="header">Outlined (default)</div>
|
||||
Card content.
|
||||
</wa-card>
|
||||
{% for appearance in ['outlined filled', 'outlined accent', 'plain', 'filled', 'accent'] -%}
|
||||
<wa-card appearance="{{ appearance }}">
|
||||
<img
|
||||
slot="image"
|
||||
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
|
||||
alt="A kitten sits patiently between a terracotta pot and decorative grasses."
|
||||
/>
|
||||
<div slot="header">{{ appearance | capitalize }}</div>
|
||||
Card content.
|
||||
</wa-card>
|
||||
{%- endfor %}
|
||||
</div>
|
||||
```
|
||||
|
||||
@@ -77,6 +77,31 @@ The details component automatically adapts to right-to-left languages:
|
||||
</wa-details>
|
||||
```
|
||||
|
||||
### Appearance
|
||||
|
||||
Use the `appearance` attribute to change the element’s visual appearance.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<wa-details summary="Outlined (default)">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</wa-details>
|
||||
<wa-details summary="Filled" appearance="filled">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</wa-details>
|
||||
<wa-details summary="Filled + Outlined" appearance="filled outlined">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</wa-details>
|
||||
<wa-details summary="Plain" appearance="plain">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</wa-details>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Grouping Details
|
||||
|
||||
Details are designed to function independently, but you can simulate a group or "accordion" where only one is shown at a time by listening for the `wa-show` event.
|
||||
|
||||
@@ -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'
|
||||
---
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -1,13 +1,10 @@
|
||||
---
|
||||
title: Clamped brand tokens
|
||||
title: Clamped Color Tokens
|
||||
layout: block
|
||||
---
|
||||
|
||||
{% set tints = ['40-max', '50-max', '60-max', '40-min', '50-min', '60-min'] %}
|
||||
|
||||
{% for hue in hues %}
|
||||
<link href="/dist/styles/brand/{{ hue }}.css" rel="stylesheet">
|
||||
{% endfor %}
|
||||
{% set tints = ['max-50', 'max-60', 'max-70', 'min-50', 'min-60', 'min-70'] %}
|
||||
{% set hues = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'] %}
|
||||
|
||||
<table class="colors">
|
||||
<thead>
|
||||
@@ -20,18 +17,18 @@ layout: block
|
||||
</tr>
|
||||
</thead>
|
||||
{% for hue in hues -%}
|
||||
<tr class="wa-brand-{{ hue }}">
|
||||
<tr class="wa-color-{{ hue }}">
|
||||
<th>{{ hue | capitalize }}</th>
|
||||
<td class="core-column">
|
||||
<div class="color swatch" style="background-color: var(--wa-color-brand); color: var(--wa-color-brand-on);">
|
||||
<div class="color swatch" style="background-color: var(--wa-color-{{ hue }}); color: var(--wa-color-{{ hue }}-on); --key: var(--wa-color-{{ hue }}-key);">
|
||||
{{ palettes[paletteId][hue].maxChromaTint }}
|
||||
<wa-copy-button value="--wa-color-brand" copy-label="--wa-color-brand"></wa-copy-button>
|
||||
<wa-copy-button value="--wa-color-{{ hue }}" copy-label="--wa-color-{{ hue }}"></wa-copy-button>
|
||||
</div>
|
||||
</td>
|
||||
{% for tint in tints -%}
|
||||
<td>
|
||||
<div class="color swatch" style="background-color: var(--wa-color-brand-{{ tint }})">
|
||||
<wa-copy-button value="--wa-color-brand-{{ tint }}" copy-label="--wa-color-brand-{{ tint }}"></wa-copy-button>
|
||||
<div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint }})">
|
||||
<wa-copy-button value="--wa-color-{{ hue }}-{{ tint }}" copy-label="--wa-color-{{ hue }}-{{ tint }}"></wa-copy-button>
|
||||
</div>
|
||||
</td>
|
||||
{%- endfor -%}
|
||||
@@ -41,7 +38,7 @@ layout: block
|
||||
|
||||
<style>
|
||||
.core-column .color.swatch::before {
|
||||
counter-reset: key var(--wa-color-brand-key);
|
||||
counter-reset: key var(--key);
|
||||
content: counter(key);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@@ -37,10 +37,6 @@ This snippet includes three parts:
|
||||
|
||||
Now you can [start using Web Awesome!](/docs/usage)
|
||||
|
||||
:::info
|
||||
While convenient, autoloading may lead to a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/). The linked article describes some ways to alleviate it.
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
## Using Font Awesome Kit Codes
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -33,7 +33,7 @@ Use the [variant utility classes](../utilities/color.md) to set the button's sem
|
||||
|
||||
### Appearance
|
||||
|
||||
Use the [appearance utility classes](../utilities/appearance.md) to change the button's visual appearance:
|
||||
Use the [appearance utility classes](/docs/utilities/appearance) to change the button's visual appearance:
|
||||
|
||||
```html {.example}
|
||||
<div style="margin-block-end: 1rem;">
|
||||
|
||||
@@ -57,7 +57,7 @@ Use the [variant utility classes](../utilities/color.md) to set the callout's co
|
||||
|
||||
### Appearance
|
||||
|
||||
Use the [appearance utility classes](../utilities/appearance.md) to change the callout's visual appearance (the default is `outlined filled`).
|
||||
Use the [appearance utility classes](/docs/utilities/appearance) to change the callout's visual appearance (the default is `outlined filled`).
|
||||
|
||||
```html {.example}
|
||||
<article class="wa-callout wa-brand wa-outlined wa-accent">
|
||||
|
||||
@@ -19,6 +19,35 @@ file: styles/native/details.css
|
||||
|
||||
## Examples
|
||||
|
||||
### Appearance
|
||||
|
||||
Use the [appearance utility classes](/docs/utilities/appearance) to change the element's visual appearance:
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<details>
|
||||
<summary>Outlined (default)</summary>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</details>
|
||||
<details class="wa-filled">
|
||||
<summary>Filled</summary>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</details>
|
||||
<details class="wa-filled wa-outlined">
|
||||
<summary>Filled + Outlined</summary>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</details>
|
||||
<details class="wa-plain">
|
||||
<summary>Plain</summary>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</details>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Right-to-Left Languages
|
||||
|
||||
The details styling automatically adapts to right-to-left languages:
|
||||
|
||||
@@ -42,6 +42,14 @@ wa-code-demo::part(preview) {
|
||||
<wa-input label="WA Input (url)" type="url"></wa-input>
|
||||
```
|
||||
|
||||
## Pill shaped text fields
|
||||
|
||||
Add the `wa-pill` class to an `<input>` to make it pill-shaped.
|
||||
|
||||
```html {.example}
|
||||
<label>Input <input type="text" placeholder="placeholder" class="wa-pill"></label>
|
||||
```
|
||||
|
||||
## Color Picker
|
||||
|
||||
Basic:
|
||||
|
||||
@@ -5,6 +5,6 @@ layout: overview
|
||||
override:tags: []
|
||||
forTag: palette
|
||||
categories:
|
||||
tags: [other, pro]
|
||||
other: Free
|
||||
pro: Pro
|
||||
---
|
||||
|
||||
@@ -2,7 +2,5 @@
|
||||
title: Patterns
|
||||
description: Patterns are reusable solutions to common design problems.
|
||||
layout: overview
|
||||
categories: ["e-commerce"]
|
||||
listChildren: true
|
||||
override:tags: []
|
||||
---
|
||||
|
||||
@@ -18,6 +18,22 @@ During the alpha period, things might break! We take breaking changes very serio
|
||||
- Removed close watcher logic to backdrop hide animation bugs in `<wa-dialog>` and `<wa-drawer>`; this logic is already handled and we'll revisit `CloseWatcher` when browser support is better and behaviors are consistent
|
||||
- Revert `<wa-dialog>` structure and CSS to fix clipped content in dialogs (WA-A #123) and light dismiss in iOS Safari (WA-A #201)
|
||||
|
||||
### Enhancements
|
||||
|
||||
- Added `appearance` to [`<wa-details>`](/docs/components/details) and [`<wa-card>`](/docs/components/card) and support for the [appearance utilities](/docs/utilities/appearance/) in the [`<details>` native styles](/docs/native/details).
|
||||
- Added an `orange` scale to all color palettes
|
||||
- Added the `.wa-cloak` utility to prevent FOUCE
|
||||
- Added the `allDefined()` utility for awaiting component registration
|
||||
|
||||
### Bugfixes
|
||||
|
||||
- Specifying inherited CSS properties on `<wa-tooltip>` now works as expected ([thanks Dennis!](https://github.com/shoelace-style/webawesome-alpha/discussions/203))
|
||||
- Fixed a bug in `<wa-select>` that made it hard to use with VueJS, Svelte, and many other frameworks
|
||||
- Fixed the `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
|
||||
|
||||
### Color Palettes
|
||||
@@ -26,6 +42,7 @@ During the alpha period, things might break! We take breaking changes very serio
|
||||
- Added a `pink` scale to all color palettes
|
||||
- Tweaked hues of all color palettes to make them more distinct and make their hues more intentional
|
||||
- Dropped `violet` and `teal`, instead using `purple` and `cyan` (this is not just a renaming, the colors have been adjusted too).
|
||||
- Fixed a bug in `<wa-switch>` that caused tooltips to work incorrectly when toggling the switch
|
||||
|
||||
### Design Tokens
|
||||
|
||||
|
||||
3
docs/docs/themes/creating.md
vendored
3
docs/docs/themes/creating.md
vendored
@@ -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
9
docs/docs/themes/index.njk
vendored
@@ -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/themes/themes.json
vendored
1
docs/docs/themes/themes.json
vendored
@@ -3,6 +3,7 @@
|
||||
"wide": true,
|
||||
"tags": ["themes", "theme"],
|
||||
"brand": "blue",
|
||||
"icon": "theme",
|
||||
"eleventyComputed": {
|
||||
"file": "styles/themes/{{ page.fileSlug }}.css"
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
---
|
||||
|
||||
@@ -8,6 +8,30 @@ Web Awesome components are just regular HTML elements, or [custom elements](http
|
||||
|
||||
If you're new to custom elements, often referred to as "web components," this section will familiarize you with how to use them.
|
||||
|
||||
## Awaiting Registration
|
||||
|
||||
Unlike traditional frameworks, custom elements don't have a centralized initialization phase. This means you need to verify that a custom element has been properly registered before attempting to interact with its properties or methods.
|
||||
|
||||
You can use the [`customElements.whenDefined()`](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined) method to ensure a specific component is ready:
|
||||
|
||||
```ts
|
||||
await customElements.whenDefined('wa-button');
|
||||
|
||||
// <wa-button> is ready to use!
|
||||
const button = document.querySelector('wa-button');
|
||||
```
|
||||
|
||||
When working with multiple components, checking each one individually can become tedious. For convenience, Web Awesome provides the `allDefined()` function which automatically detects and waits for all Web Awesome components in the DOM to be initialized before resolving.
|
||||
|
||||
```ts
|
||||
import { allDefined } from '/dist/webawesome.js';
|
||||
|
||||
// Waits for all Web Awesome components in the DOM to be registered
|
||||
await allDefined();
|
||||
|
||||
// All Web Awesome components on the page are ready!
|
||||
```
|
||||
|
||||
## Attributes & Properties
|
||||
|
||||
Many components have properties that can be set using attributes. For example, buttons accept a `size` attribute that maps to the `size` property which dictates the button's size.
|
||||
|
||||
32
docs/docs/utilities/fouce.md
Normal file
32
docs/docs/utilities/fouce.md
Normal file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
title: Reduce FOUCE
|
||||
description: Utility to improve the loading experience by hiding non-prerendered custom elements until they are registered.
|
||||
file: styles/utilities/fouce.css
|
||||
icon: spinner
|
||||
---
|
||||
|
||||
While convenient, autoloading can lead to a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/).
|
||||
The [FOUCE style utility](/docs/utilities/fouce/#opting-in) (which is automatically applied if you use the [Web Awesome utilities](/docs/utilities/)) takes care of hiding custom elements until they and their contents have been registered, up to a maximum of two seconds.
|
||||
|
||||
In many cases, this is not enough, and you may wish to hide a broader wrapper element or even the entire page until all WA elements within it have loaded. To do that, you can add the `wa-reduce-fouce` class to any element on the page or even apply it to the whole page by placing the class on the `<html>` element.
|
||||
|
||||
```html
|
||||
<html class="wa-cloak">
|
||||
...
|
||||
</html>
|
||||
```
|
||||
|
||||
As soon as all elements are registered _or_ after two seconds have elapsed, the autoloader will show the page. The two-second timeout prevents blank screens from persisting on slow networks and pages that have errors.
|
||||
|
||||
:::details Are you using Turbo in your app?
|
||||
|
||||
If you're using [Turbo](https://turbo.hotwired.dev/) to serve a multi-page application (MPA) as a single page application (SPA), you might notice FOUCE when navigating from page to page. This is because Turbo renders the new page's content before the autoloader has a change to register new components.
|
||||
|
||||
The following function acts as a middleware to ensure components are registered _before_ the page shows, eliminating FOUCE for page-to-page navigation with Turbo.
|
||||
|
||||
```js
|
||||
import { preventTurboFouce } from '/dist/webawesome.js';
|
||||
|
||||
preventTurboFouce();
|
||||
```
|
||||
:::
|
||||
@@ -1,131 +0,0 @@
|
||||
---
|
||||
title: Reduce FOUCE
|
||||
description: Utility to improve the loading experience by hiding non-prerendered custom elements until they are registered.
|
||||
file: styles/utilities/fouce.css
|
||||
icon: spinner
|
||||
---
|
||||
{% markdown %}
|
||||
No class is needed to use this utility, it will be applied automatically as long as it its CSS is included.
|
||||
|
||||
Here is a comparison of the loading experience with and without this utility,
|
||||
with a simulated slow loading time:
|
||||
|
||||
{% endmarkdown %}
|
||||
|
||||
|
||||
<div class="wa-split wa-align-items-end">
|
||||
<strong>Normal loading</strong>
|
||||
<wa-button onclick="document.querySelectorAll('iframe').forEach(iframe => iframe.srcdoc = iframe.srcdoc)">
|
||||
<wa-icon name="refresh"></wa-icon>
|
||||
Refresh
|
||||
</wa-button>
|
||||
<strong>With FOUCE reduction</strong>
|
||||
</div>
|
||||
|
||||
|
||||
{% set sample_card %}
|
||||
<link id="theme-stylesheet" rel="stylesheet" href="/dist/styles/themes/default.css" render="blocking" fetchpriority="high">
|
||||
<link rel="stylesheet" href="/dist/styles/webawesome.css">
|
||||
<link rel="stylesheet" href="/dist/styles/forms.css">
|
||||
<script type=module>
|
||||
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
|
||||
const loadScript = src => new Promise((resolve, reject) => {
|
||||
const script = document.createElement("script");
|
||||
script.src = src;
|
||||
script.type = "module";
|
||||
script.onload = resolve;
|
||||
script.onerror = reject;
|
||||
document.head.appendChild(script);
|
||||
});
|
||||
|
||||
await delay(500);
|
||||
await loadScript("/dist/components/button/button.js");
|
||||
await delay(500);
|
||||
await loadScript("/dist/components/card/card.js");
|
||||
await delay(500);
|
||||
await loadScript("/dist/components/rating/rating.js");
|
||||
</script>
|
||||
|
||||
<wa-card with-footer with-image class="card-overview">
|
||||
<img
|
||||
slot="image"
|
||||
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
|
||||
alt="A kitten sits patiently between a terracotta pot and decorative grasses."
|
||||
/>
|
||||
|
||||
<strong>Mittens</strong><br />
|
||||
This kitten is as cute as he is playful. Bring him home today!<br />
|
||||
<small>6 weeks old</small>
|
||||
|
||||
<div slot="footer">
|
||||
<wa-button variant="brand" pill>More Info</wa-button>
|
||||
<wa-rating></wa-rating>
|
||||
</div>
|
||||
</wa-card>
|
||||
|
||||
<style>
|
||||
.card-overview small {
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
.card-overview [slot=footer] {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
{% endset %}
|
||||
|
||||
|
||||
<div class="iframes">
|
||||
<iframe srcdoc='<body class="wa-fouce-off">{{ sample_card }}</body>'></iframe>
|
||||
<iframe srcdoc='{{ sample_card }}'></iframe>
|
||||
</div>
|
||||
<style>
|
||||
.iframes {
|
||||
display: flex;
|
||||
gap: var(--wa-space-m);
|
||||
margin-top: var(--wa-space-l);
|
||||
|
||||
iframe {
|
||||
flex: 1;
|
||||
height: 60ch;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{% markdown %}
|
||||
## How does it work?
|
||||
|
||||
The utility consists of a timeout (`2s` by default) and a fade duration (`200ms` by default).
|
||||
- If the element is _ready_ before the timeout, it will appear immediately.
|
||||
- If it takes longer than _timeout_ + _fade_, it will fade in over the fade duration.
|
||||
- If it takes somewhere between _timeout_ and _timeout_ + _fade_, you will get an interrupted fade.
|
||||
|
||||
An element is considered ready when both of these are true:
|
||||
1. Either It has been registered or has a `did-ssr` attribute (indicating it was pre-rendered)
|
||||
2. If it’s a Web Awesome component, its contents are also ready
|
||||
|
||||
## Customization
|
||||
|
||||
You can use the following CSS variables to customize the behavior:
|
||||
|
||||
| Variable | Description | Default |
|
||||
| --- | --- | --- |
|
||||
| `--wa-fouce-fade` | The transition duration for the fade effect. | `200ms` |
|
||||
| `--wa-fouce-timeout` | The timeout after which elements will appear even if not registered | `2s` |
|
||||
|
||||
The fade duration cannot be longer than the timeout.
|
||||
This means that you can disable FOUCE reduction on an element by setting `--wa-fouce-timeout: 0s`.
|
||||
|
||||
For example, if instead of `did-ssr` you used an `ssr` attribute to mark elements that were pre-rendered, you can do this to get them to appear immediately:
|
||||
|
||||
```css
|
||||
[ssr] {
|
||||
--wa-fouce-timeout: 0s;
|
||||
}
|
||||
```
|
||||
|
||||
You can also opt-out from FOUCE reduction for an element and its contents by adding the `.wa-fouce-off` class to it.
|
||||
Applying this class to the root element will disable the utility for the entire page.
|
||||
{% endmarkdown %}
|
||||
@@ -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
|
||||
© Fonticons, Inc.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
@@ -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 = [];
|
||||
|
||||
@@ -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';
|
||||
|
||||
@@ -5,15 +5,16 @@
|
||||
|
||||
--spacing: var(--wa-space);
|
||||
--border-width: var(--wa-panel-border-width);
|
||||
--border-color: var(--wa-color-surface-border);
|
||||
--outlined-background-color: var(--wa-color-surface-default);
|
||||
--outlined-border-color: var(--wa-color-surface-border);
|
||||
--border-radius: var(--wa-panel-border-radius);
|
||||
|
||||
--inner-border-radius: calc(var(--border-radius) - var(--border-width));
|
||||
--inner-border-color: var(--outlined-border-color);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--wa-color-surface-default);
|
||||
border-color: var(--border-color);
|
||||
background-color: var(--background-color, var(--wa-color-surface-default));
|
||||
border-color: var(--border-color, var(--wa-color-surface-border));
|
||||
border-radius: var(--border-radius);
|
||||
border-style: var(--wa-panel-border-style);
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
@@ -21,6 +22,20 @@
|
||||
color: var(--wa-color-text-normal);
|
||||
}
|
||||
|
||||
:host(:is([appearance~='accent'], .wa-accent)) {
|
||||
color: var(--text-color, var(--wa-color-text-normal));
|
||||
}
|
||||
|
||||
:host([appearance~='filled']),
|
||||
:host(.wa-filled) {
|
||||
--inner-border-color: oklab(from var(--outlined-border-color) l a b / 65%);
|
||||
}
|
||||
|
||||
:host([appearance='plain']) {
|
||||
--inner-border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Take care of top and bottom radii */
|
||||
.image,
|
||||
:host(:not([with-image])) .header,
|
||||
@@ -46,10 +61,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Round all corners for plain appearance */
|
||||
:host([appearance='plain']) .image {
|
||||
border-radius: var(--inner-border-radius);
|
||||
|
||||
&::slotted(img) {
|
||||
border-radius: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: block;
|
||||
border-block-end-style: inherit;
|
||||
border-block-end-color: var(--border-color);
|
||||
border-block-end-color: var(--inner-border-color);
|
||||
border-block-end-width: var(--border-width);
|
||||
padding: calc(var(--spacing) / 2) var(--spacing);
|
||||
}
|
||||
@@ -62,7 +86,7 @@
|
||||
.footer {
|
||||
display: block;
|
||||
border-block-start-style: inherit;
|
||||
border-block-start-color: var(--border-color);
|
||||
border-block-start-color: var(--inner-border-color);
|
||||
border-block-start-width: var(--border-width);
|
||||
padding: var(--spacing);
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ import { html } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { HasSlotController } from '../../internal/slot.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import appearanceStyles from '../../styles/utilities/appearance.css';
|
||||
import sizeStyles from '../../styles/utilities/size.css';
|
||||
import styles from './card.css';
|
||||
|
||||
@@ -22,19 +23,24 @@ import styles from './card.css';
|
||||
* @csspart footer - The container that wraps the card's footer.
|
||||
*
|
||||
* @cssproperty [--border-radius=var(--wa-panel-border-radius)] - The radius for the card's corners. Expects a single value.
|
||||
* @cssproperty [--border-color=var(--wa-color-surface-border)] - The color of the card's borders, including inner borders. Expects a single value.
|
||||
* @cssproperty [--border-color=var(--wa-color-surface-border)] - The color of the card's borders. Expects a single value.
|
||||
* @cssproperty [--inner-border-color=var(--wa-color-surface-border)] - The color of the card's inner borders, e.g. those separating headers and footers from the main content. Expects a single value.
|
||||
* @cssproperty [--border-width=var(--wa-panel-border-width)] - The width of the card's borders. Expects a single value.
|
||||
* @cssproperty [--spacing=var(--wa-space)] - The amount of space around and between sections of the card. Expects a single value.
|
||||
*/
|
||||
@customElement('wa-card')
|
||||
export default class WaCard extends WebAwesomeElement {
|
||||
static shadowStyle = [sizeStyles, styles];
|
||||
static shadowStyle = [sizeStyles, appearanceStyles, styles];
|
||||
|
||||
private readonly hasSlotController = new HasSlotController(this, 'footer', 'header', 'image');
|
||||
|
||||
/** The component's size. Will be inherited by any descendants with a `size` attribute. */
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
|
||||
/** The card's visual appearance. */
|
||||
@property({ reflect: true })
|
||||
appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'outlined';
|
||||
|
||||
/** Renders the card with a header. Only needed for SSR, otherwise is automatically added. */
|
||||
@property({ attribute: 'with-header', type: Boolean, reflect: true }) withHeader = false;
|
||||
|
||||
|
||||
@@ -278,11 +278,11 @@
|
||||
}
|
||||
|
||||
/*
|
||||
* Color dropdown
|
||||
*/
|
||||
* Color dropdown
|
||||
*/
|
||||
|
||||
.color-dropdown {
|
||||
display: flex;
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.color-dropdown::part(panel) {
|
||||
|
||||
@@ -9,6 +9,7 @@ import { getTargetElement, waitForEvent } from '../../internal/event.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import nativeStyles from '../../styles/native/details.css';
|
||||
import appearanceStyles from '../../styles/utilities/appearance.css';
|
||||
import { LocalizeController } from '../../utilities/localize.js';
|
||||
import '../icon/icon.js';
|
||||
import styles from './details.css';
|
||||
@@ -45,7 +46,7 @@ import styles from './details.css';
|
||||
*/
|
||||
@customElement('wa-details')
|
||||
export default class WaDetails extends WebAwesomeElement {
|
||||
static shadowStyle = [nativeStyles, styles];
|
||||
static shadowStyle = [appearanceStyles, nativeStyles, styles];
|
||||
|
||||
private detailsObserver: MutationObserver;
|
||||
private readonly localize = new LocalizeController(this);
|
||||
@@ -67,6 +68,9 @@ export default class WaDetails extends WebAwesomeElement {
|
||||
/** Disables the details so it can't be toggled. */
|
||||
@property({ type: Boolean, reflect: true }) disabled = false;
|
||||
|
||||
/** The element's visual appearance. */
|
||||
@property({ reflect: true }) appearance: 'filled' | 'outlined' | 'plain' = 'outlined';
|
||||
|
||||
firstUpdated() {
|
||||
this.body.style.height = this.open ? 'auto' : '0';
|
||||
if (this.open) {
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
:host {
|
||||
--background-color-hover: var(--wa-color-neutral-fill-quiet);
|
||||
--text-color-hover: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
|
||||
--background-color-active: transparent;
|
||||
--text-color-active: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
|
||||
|
||||
display: inline-block;
|
||||
color: var(--wa-color-text-quiet);
|
||||
@@ -22,12 +25,13 @@
|
||||
|
||||
:host(:not([disabled])) .icon-button:hover,
|
||||
:host(:not([disabled])) .icon-button:focus-visible {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
|
||||
background-color: var(--background-color-hover);
|
||||
color: var(--text-color-hover);
|
||||
}
|
||||
|
||||
:host(:not([disabled])) .icon-button:active {
|
||||
color: color-mix(in oklab, currentColor, var(--wa-color-mix-active));
|
||||
background-color: var(--background-color-active);
|
||||
color: var(--text-color-active);
|
||||
}
|
||||
|
||||
.icon-button:focus {
|
||||
|
||||
@@ -17,7 +17,10 @@ import styles from './icon-button.css';
|
||||
* @event blur - Emitted when the icon button loses focus.
|
||||
* @event focus - Emitted when the icon button gains focus.
|
||||
*
|
||||
* @cssproperty --background-color-hover - The color of the button's background on hover.
|
||||
* @cssproperty [--background-color-hover=var(--wa-color-neutral-fill-quiet)] - The color of the button's background on hover.
|
||||
* @cssproperty [--background-color-active=var(--wa-color-neutral-fill-quiet)] - The color of the button's background on `:active`.
|
||||
* @cssproperty --text-color-hover - The color of the button's background on hover.
|
||||
* @cssproperty --text-color-active - The color of the button's background on `:active`.
|
||||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
*/
|
||||
|
||||
@@ -647,6 +647,7 @@ describe('<wa-select>', () => {
|
||||
);
|
||||
const el = form.querySelector<WaSelect>('wa-select')!;
|
||||
|
||||
expect(el.defaultValue).to.equal('option-1');
|
||||
expect(el.value).to.equal('');
|
||||
expect(new FormData(form).get('select')).equal('');
|
||||
|
||||
@@ -657,6 +658,7 @@ describe('<wa-select>', () => {
|
||||
|
||||
await aTimeout(10);
|
||||
await el.updateComplete;
|
||||
expect(el.optionValues ? [...el.optionValues] : []).to.have.members(['option-1']);
|
||||
expect(el.value).to.equal('option-1');
|
||||
expect(new FormData(form).get('select')).equal('option-1');
|
||||
});
|
||||
@@ -745,6 +747,8 @@ describe('<wa-select>', () => {
|
||||
);
|
||||
|
||||
const el = form.querySelector<WaSelect>('wa-select')!;
|
||||
expect(el.optionValues ? [...el.optionValues] : []).to.have.members(['bar', 'baz']);
|
||||
expect(el.optionValues?.size).to.equal(2);
|
||||
expect(el.value).to.have.members(['bar', 'baz']);
|
||||
expect(el.value!.length).to.equal(2);
|
||||
expect(new FormData(form).getAll('select')).to.have.members(['bar', 'baz']);
|
||||
@@ -760,6 +764,36 @@ describe('<wa-select>', () => {
|
||||
expect(new FormData(form).getAll('select')).to.have.members(['foo', 'bar', 'baz']);
|
||||
});
|
||||
});
|
||||
|
||||
describe('With setting the value via JS', () => {
|
||||
it('Should preserve value even if not returned', async () => {
|
||||
const form = await fixture<HTMLFormElement>(
|
||||
html` <form>
|
||||
<wa-select name="select">
|
||||
<wa-option value="bar">Bar</wa-option>
|
||||
<wa-option value="baz">Baz</wa-option>
|
||||
</wa-select>
|
||||
</form>`,
|
||||
);
|
||||
|
||||
const el = form.querySelector<WaSelect>('wa-select')!;
|
||||
expect(el.value).to.equal('');
|
||||
|
||||
el.value = 'foo';
|
||||
await aTimeout(10);
|
||||
await el.updateComplete;
|
||||
expect(el.value).to.equal('');
|
||||
|
||||
const option = document.createElement('wa-option');
|
||||
option.value = 'foo';
|
||||
option.innerText = 'Foo';
|
||||
el.append(option);
|
||||
|
||||
await aTimeout(10);
|
||||
await el.updateComplete;
|
||||
expect(el.value).to.equal('foo');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@@ -117,6 +117,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
@state() displayLabel = '';
|
||||
@state() currentOption: WaOption;
|
||||
@state() selectedOptions: WaOption[] = [];
|
||||
@state() optionValues: Set<string> | undefined;
|
||||
|
||||
/** The name of the select, submitted as a name/value pair with form data. */
|
||||
@property() name = '';
|
||||
@@ -157,7 +158,47 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
return val;
|
||||
}
|
||||
|
||||
@property({ attribute: false }) value: string | string[] | null = null;
|
||||
private _value: string[] | undefined;
|
||||
@property({ attribute: false })
|
||||
set value(val: string | string[]) {
|
||||
let oldValue = this.value;
|
||||
|
||||
if (!Array.isArray(val)) {
|
||||
val = val.split(' ');
|
||||
}
|
||||
|
||||
if (!this._value || this._value.join(' ') !== val.join(' ')) {
|
||||
this._value = val;
|
||||
let newValue = this.value;
|
||||
|
||||
if (newValue != oldValue) {
|
||||
this.requestUpdate('value', oldValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
get value() {
|
||||
let value = this._value ?? this.defaultValue;
|
||||
value = Array.isArray(value) ? value : [value];
|
||||
let optionsChanged = !this.optionValues;
|
||||
|
||||
if (optionsChanged) {
|
||||
this.optionValues = new Set(
|
||||
this.getAllOptions()
|
||||
.filter(option => !option.disabled)
|
||||
.map(option => option.value),
|
||||
);
|
||||
}
|
||||
|
||||
// Drop values not in the DOM
|
||||
let ret: string | string[] = value.filter(v => this.optionValues!.has(v));
|
||||
ret = this.multiple ? ret : (ret[0] ?? '');
|
||||
|
||||
if (optionsChanged) {
|
||||
this.requestUpdate('value');
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
/** The select's size. */
|
||||
@property({ reflect: true, initial: 'medium' }) size: 'small' | 'medium' | 'large' | 'inherit' = 'inherit';
|
||||
@@ -249,7 +290,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>
|
||||
@@ -524,21 +564,41 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
}
|
||||
|
||||
const allOptions = this.getAllOptions();
|
||||
const val = this.valueHasChanged ? this.value : this.defaultValue;
|
||||
const value = Array.isArray(val) ? val : [val];
|
||||
const values: string[] = [];
|
||||
this.optionValues = undefined; // dirty the value so it gets recalculated
|
||||
|
||||
// Check for duplicate values in menu items
|
||||
allOptions.forEach(option => values.push(option.value));
|
||||
const value = this.value;
|
||||
|
||||
// Select only the options that match the new value
|
||||
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
|
||||
@@ -551,6 +611,9 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
// Gets an array of all `<wa-option>` elements
|
||||
private getAllOptions() {
|
||||
if (!this?.querySelectorAll) {
|
||||
return [];
|
||||
}
|
||||
return [...this.querySelectorAll<WaOption>('wa-option')];
|
||||
}
|
||||
|
||||
@@ -614,11 +677,24 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
// Update selected options cache
|
||||
this.selectedOptions = options.filter(el => el.selected);
|
||||
let selectedValues = new Set(this.selectedOptions.map(el => el.value));
|
||||
|
||||
// Toggle values present in the DOM from this.value, while preserving options NOT present in the DOM (for lazy loading)
|
||||
// Note that options NOT present in the DOM will be moved to the end after this
|
||||
if (selectedValues.size > 0 || this._value) {
|
||||
if (!this._value) {
|
||||
// First time it's set
|
||||
let value = this.defaultValue ?? [];
|
||||
this._value = Array.isArray(value) ? value : [value];
|
||||
}
|
||||
|
||||
// Filter out values that are in the DOM
|
||||
this._value = this._value.filter(value => !this.optionValues?.has(value));
|
||||
this._value.unshift(...selectedValues);
|
||||
}
|
||||
|
||||
// Update the value and display label
|
||||
if (this.multiple) {
|
||||
this.value = this.selectedOptions.map(el => el.value);
|
||||
|
||||
if (this.placeholder && this.value.length === 0) {
|
||||
// When no items are selected, keep the value empty so the placeholder shows
|
||||
this.displayLabel = '';
|
||||
@@ -627,7 +703,6 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
}
|
||||
} else {
|
||||
const selectedOption = this.selectedOptions[0];
|
||||
this.value = selectedOption?.value ?? '';
|
||||
this.displayLabel = selectedOption?.label ?? '';
|
||||
}
|
||||
|
||||
@@ -640,10 +715,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`
|
||||
@@ -659,7 +732,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
>
|
||||
`;
|
||||
}
|
||||
return html``;
|
||||
return null;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -859,7 +932,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"
|
||||
|
||||
@@ -49,6 +49,7 @@ import styles from './switch.css';
|
||||
*/
|
||||
@customElement('wa-switch')
|
||||
export default class WaSwitch extends WebAwesomeFormAssociatedElement {
|
||||
static shadowRootOptions = { ...WebAwesomeFormAssociatedElement.shadowRootOptions, delegatesFocus: true };
|
||||
static shadowStyle = [formControlStyles, sizeStyles, styles];
|
||||
|
||||
static get validators() {
|
||||
|
||||
@@ -1,74 +0,0 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']),
|
||||
:where([class^='wa-brand-'], [class*=' wa-brand-']) {
|
||||
/**
|
||||
* Conditional tokens for use in color-mix()
|
||||
* --wa-color-brand-if-lt-N ➡️ 100% if key < N, 0% otherwise
|
||||
* --wa-color-brand-if-gte-N ➡️ 100% if key >= N, 0% otherwise
|
||||
*/
|
||||
--wa-color-brand-if-lt-40: calc(clamp(0, 40 - var(--wa-color-brand-key), 1) * 100%);
|
||||
--wa-color-brand-if-lt-50: calc(clamp(0, 50 - var(--wa-color-brand-key), 1) * 100%);
|
||||
--wa-color-brand-if-lt-60: calc(clamp(0, 60 - var(--wa-color-brand-key), 1) * 100%);
|
||||
--wa-color-brand-if-lt-70: calc(clamp(0, 70 - var(--wa-color-brand-key), 1) * 100%);
|
||||
--wa-color-brand-if-lt-80: calc(clamp(0, 80 - var(--wa-color-brand-key), 1) * 100%);
|
||||
|
||||
--wa-color-brand-if-gte-40: calc(100% - var(--wa-color-brand-if-lt-40));
|
||||
--wa-color-brand-if-gte-50: calc(100% - var(--wa-color-brand-if-lt-50));
|
||||
--wa-color-brand-if-gte-60: calc(100% - var(--wa-color-brand-if-lt-60));
|
||||
--wa-color-brand-if-gte-70: calc(100% - var(--wa-color-brand-if-lt-70));
|
||||
--wa-color-brand-if-gte-80: calc(100% - var(--wa-color-brand-if-lt-80));
|
||||
|
||||
/*
|
||||
* Convenience tokens for common tint cutoffs
|
||||
* --wa-color-brand-N-max ➡️ var(--color-brand) if key <= N, var(--color-brand-N) otherwise
|
||||
* --wa-color-brand-N-min ➡️ var(--color-brand) if key >= N, var(--color-brand-N) otherwise
|
||||
*/
|
||||
--wa-color-brand-40-max: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-brand) var(--wa-color-brand-if-lt-40),
|
||||
var(--wa-color-brand-40)
|
||||
);
|
||||
--wa-color-brand-40-min: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-brand) var(--wa-color-brand-if-gte-40),
|
||||
var(--wa-color-brand-40)
|
||||
);
|
||||
|
||||
--wa-color-brand-50-max: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-brand) var(--wa-color-brand-if-lt-50),
|
||||
var(--wa-color-brand-50)
|
||||
);
|
||||
--wa-color-brand-50-min: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-brand) var(--wa-color-brand-if-gte-50),
|
||||
var(--wa-color-brand-50)
|
||||
);
|
||||
|
||||
--wa-color-brand-60-max: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-brand) var(--wa-color-brand-if-lt-60),
|
||||
var(--wa-color-brand-60)
|
||||
);
|
||||
--wa-color-brand-60-min: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-brand) var(--wa-color-brand-if-gte-60),
|
||||
var(--wa-color-brand-60)
|
||||
);
|
||||
|
||||
--wa-color-brand-70-max: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-brand) var(--wa-color-brand-if-lt-70),
|
||||
var(--wa-color-brand-70)
|
||||
);
|
||||
--wa-color-brand-70-min: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-brand) var(--wa-color-brand-if-gte-70),
|
||||
var(--wa-color-brand-70)
|
||||
);
|
||||
|
||||
/* Text color: white if key < 60, brand-10 otherwise */
|
||||
--wa-color-brand-on: color-mix(in oklab, var(--wa-color-brand-10) var(--wa-color-brand-if-gte-60), white);
|
||||
}
|
||||
@@ -1,5 +1,3 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -17,5 +15,22 @@
|
||||
--wa-color-brand-10: var(--wa-color-blue-10);
|
||||
--wa-color-brand-05: var(--wa-color-blue-05);
|
||||
--wa-color-brand: var(--wa-color-blue);
|
||||
--wa-color-brand-key: var(--wa-color-blue-key);
|
||||
|
||||
--wa-color-brand-lt-50: var(--wa-color-blue-lt-50);
|
||||
--wa-color-brand-gte-50: var(--wa-color-blue-gte-50);
|
||||
|
||||
--wa-color-brand-lt-60: var(--wa-color-blue-lt-60);
|
||||
--wa-color-brand-gte-60: var(--wa-color-blue-gte-60);
|
||||
|
||||
--wa-color-brand-lt-70: var(--wa-color-blue-lt-70);
|
||||
--wa-color-brand-gte-70: var(--wa-color-blue-gte-70);
|
||||
|
||||
--wa-color-brand-max-50: var(--wa-color-blue-max-50);
|
||||
--wa-color-brand-min-50: var(--wa-color-blue-min-50);
|
||||
--wa-color-brand-max-60: var(--wa-color-blue-max-60);
|
||||
--wa-color-brand-min-60: var(--wa-color-blue-min-60);
|
||||
--wa-color-brand-max-70: var(--wa-color-blue-max-70);
|
||||
--wa-color-brand-min-70: var(--wa-color-blue-min-70);
|
||||
|
||||
--wa-color-brand-on: var(--wa-color-blue-on);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -17,5 +15,22 @@
|
||||
--wa-color-brand-10: var(--wa-color-cyan-10);
|
||||
--wa-color-brand-05: var(--wa-color-cyan-05);
|
||||
--wa-color-brand: var(--wa-color-cyan);
|
||||
--wa-color-brand-key: var(--wa-color-cyan-key);
|
||||
|
||||
--wa-color-brand-lt-50: var(--wa-color-cyan-lt-50);
|
||||
--wa-color-brand-gte-50: var(--wa-color-cyan-gte-50);
|
||||
|
||||
--wa-color-brand-lt-60: var(--wa-color-cyan-lt-60);
|
||||
--wa-color-brand-gte-60: var(--wa-color-cyan-gte-60);
|
||||
|
||||
--wa-color-brand-lt-70: var(--wa-color-cyan-lt-70);
|
||||
--wa-color-brand-gte-70: var(--wa-color-cyan-gte-70);
|
||||
|
||||
--wa-color-brand-max-50: var(--wa-color-cyan-max-50);
|
||||
--wa-color-brand-min-50: var(--wa-color-cyan-min-50);
|
||||
--wa-color-brand-max-60: var(--wa-color-cyan-max-60);
|
||||
--wa-color-brand-min-60: var(--wa-color-cyan-min-60);
|
||||
--wa-color-brand-max-70: var(--wa-color-cyan-max-70);
|
||||
--wa-color-brand-min-70: var(--wa-color-cyan-min-70);
|
||||
|
||||
--wa-color-brand-on: var(--wa-color-cyan-on);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -17,5 +15,22 @@
|
||||
--wa-color-brand-10: var(--wa-color-gray-10);
|
||||
--wa-color-brand-05: var(--wa-color-gray-05);
|
||||
--wa-color-brand: var(--wa-color-gray);
|
||||
--wa-color-brand-key: var(--wa-color-gray-key);
|
||||
|
||||
--wa-color-brand-lt-50: var(--wa-color-gray-lt-50);
|
||||
--wa-color-brand-gte-50: var(--wa-color-gray-gte-50);
|
||||
|
||||
--wa-color-brand-lt-60: var(--wa-color-gray-lt-60);
|
||||
--wa-color-brand-gte-60: var(--wa-color-gray-gte-60);
|
||||
|
||||
--wa-color-brand-lt-70: var(--wa-color-gray-lt-70);
|
||||
--wa-color-brand-gte-70: var(--wa-color-gray-gte-70);
|
||||
|
||||
--wa-color-brand-max-50: var(--wa-color-gray-max-50);
|
||||
--wa-color-brand-min-50: var(--wa-color-gray-min-50);
|
||||
--wa-color-brand-max-60: var(--wa-color-gray-max-60);
|
||||
--wa-color-brand-min-60: var(--wa-color-gray-min-60);
|
||||
--wa-color-brand-max-70: var(--wa-color-gray-max-70);
|
||||
--wa-color-brand-min-70: var(--wa-color-gray-min-70);
|
||||
|
||||
--wa-color-brand-on: var(--wa-color-gray-on);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -17,5 +15,22 @@
|
||||
--wa-color-brand-10: var(--wa-color-green-10);
|
||||
--wa-color-brand-05: var(--wa-color-green-05);
|
||||
--wa-color-brand: var(--wa-color-green);
|
||||
--wa-color-brand-key: var(--wa-color-green-key);
|
||||
|
||||
--wa-color-brand-lt-50: var(--wa-color-green-lt-50);
|
||||
--wa-color-brand-gte-50: var(--wa-color-green-gte-50);
|
||||
|
||||
--wa-color-brand-lt-60: var(--wa-color-green-lt-60);
|
||||
--wa-color-brand-gte-60: var(--wa-color-green-gte-60);
|
||||
|
||||
--wa-color-brand-lt-70: var(--wa-color-green-lt-70);
|
||||
--wa-color-brand-gte-70: var(--wa-color-green-gte-70);
|
||||
|
||||
--wa-color-brand-max-50: var(--wa-color-green-max-50);
|
||||
--wa-color-brand-min-50: var(--wa-color-green-min-50);
|
||||
--wa-color-brand-max-60: var(--wa-color-green-max-60);
|
||||
--wa-color-brand-min-60: var(--wa-color-green-min-60);
|
||||
--wa-color-brand-max-70: var(--wa-color-green-max-70);
|
||||
--wa-color-brand-min-70: var(--wa-color-green-min-70);
|
||||
|
||||
--wa-color-brand-on: var(--wa-color-green-on);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -17,5 +15,22 @@
|
||||
--wa-color-brand-10: var(--wa-color-indigo-10);
|
||||
--wa-color-brand-05: var(--wa-color-indigo-05);
|
||||
--wa-color-brand: var(--wa-color-indigo);
|
||||
--wa-color-brand-key: var(--wa-color-indigo-key);
|
||||
|
||||
--wa-color-brand-lt-50: var(--wa-color-indigo-lt-50);
|
||||
--wa-color-brand-gte-50: var(--wa-color-indigo-gte-50);
|
||||
|
||||
--wa-color-brand-lt-60: var(--wa-color-indigo-lt-60);
|
||||
--wa-color-brand-gte-60: var(--wa-color-indigo-gte-60);
|
||||
|
||||
--wa-color-brand-lt-70: var(--wa-color-indigo-lt-70);
|
||||
--wa-color-brand-gte-70: var(--wa-color-indigo-gte-70);
|
||||
|
||||
--wa-color-brand-max-50: var(--wa-color-indigo-max-50);
|
||||
--wa-color-brand-min-50: var(--wa-color-indigo-min-50);
|
||||
--wa-color-brand-max-60: var(--wa-color-indigo-max-60);
|
||||
--wa-color-brand-min-60: var(--wa-color-indigo-min-60);
|
||||
--wa-color-brand-max-70: var(--wa-color-indigo-max-70);
|
||||
--wa-color-brand-min-70: var(--wa-color-indigo-min-70);
|
||||
|
||||
--wa-color-brand-on: var(--wa-color-indigo-on);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -17,5 +15,22 @@
|
||||
--wa-color-brand-10: var(--wa-color-orange-10);
|
||||
--wa-color-brand-05: var(--wa-color-orange-05);
|
||||
--wa-color-brand: var(--wa-color-orange);
|
||||
--wa-color-brand-key: var(--wa-color-orange-key);
|
||||
|
||||
--wa-color-brand-lt-50: var(--wa-color-orange-lt-50);
|
||||
--wa-color-brand-gte-50: var(--wa-color-orange-gte-50);
|
||||
|
||||
--wa-color-brand-lt-60: var(--wa-color-orange-lt-60);
|
||||
--wa-color-brand-gte-60: var(--wa-color-orange-gte-60);
|
||||
|
||||
--wa-color-brand-lt-70: var(--wa-color-orange-lt-70);
|
||||
--wa-color-brand-gte-70: var(--wa-color-orange-gte-70);
|
||||
|
||||
--wa-color-brand-max-50: var(--wa-color-orange-max-50);
|
||||
--wa-color-brand-min-50: var(--wa-color-orange-min-50);
|
||||
--wa-color-brand-max-60: var(--wa-color-orange-max-60);
|
||||
--wa-color-brand-min-60: var(--wa-color-orange-min-60);
|
||||
--wa-color-brand-max-70: var(--wa-color-orange-max-70);
|
||||
--wa-color-brand-min-70: var(--wa-color-orange-min-70);
|
||||
|
||||
--wa-color-brand-on: var(--wa-color-orange-on);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -17,5 +15,22 @@
|
||||
--wa-color-brand-10: var(--wa-color-pink-10);
|
||||
--wa-color-brand-05: var(--wa-color-pink-05);
|
||||
--wa-color-brand: var(--wa-color-pink);
|
||||
--wa-color-brand-key: var(--wa-color-pink-key);
|
||||
|
||||
--wa-color-brand-lt-50: var(--wa-color-pink-lt-50);
|
||||
--wa-color-brand-gte-50: var(--wa-color-pink-gte-50);
|
||||
|
||||
--wa-color-brand-lt-60: var(--wa-color-pink-lt-60);
|
||||
--wa-color-brand-gte-60: var(--wa-color-pink-gte-60);
|
||||
|
||||
--wa-color-brand-lt-70: var(--wa-color-pink-lt-70);
|
||||
--wa-color-brand-gte-70: var(--wa-color-pink-gte-70);
|
||||
|
||||
--wa-color-brand-max-50: var(--wa-color-pink-max-50);
|
||||
--wa-color-brand-min-50: var(--wa-color-pink-min-50);
|
||||
--wa-color-brand-max-60: var(--wa-color-pink-max-60);
|
||||
--wa-color-brand-min-60: var(--wa-color-pink-min-60);
|
||||
--wa-color-brand-max-70: var(--wa-color-pink-max-70);
|
||||
--wa-color-brand-min-70: var(--wa-color-pink-min-70);
|
||||
|
||||
--wa-color-brand-on: var(--wa-color-pink-on);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -17,5 +15,22 @@
|
||||
--wa-color-brand-10: var(--wa-color-purple-10);
|
||||
--wa-color-brand-05: var(--wa-color-purple-05);
|
||||
--wa-color-brand: var(--wa-color-purple);
|
||||
--wa-color-brand-key: var(--wa-color-purple-key);
|
||||
|
||||
--wa-color-brand-lt-50: var(--wa-color-purple-lt-50);
|
||||
--wa-color-brand-gte-50: var(--wa-color-purple-gte-50);
|
||||
|
||||
--wa-color-brand-lt-60: var(--wa-color-purple-lt-60);
|
||||
--wa-color-brand-gte-60: var(--wa-color-purple-gte-60);
|
||||
|
||||
--wa-color-brand-lt-70: var(--wa-color-purple-lt-70);
|
||||
--wa-color-brand-gte-70: var(--wa-color-purple-gte-70);
|
||||
|
||||
--wa-color-brand-max-50: var(--wa-color-purple-max-50);
|
||||
--wa-color-brand-min-50: var(--wa-color-purple-min-50);
|
||||
--wa-color-brand-max-60: var(--wa-color-purple-max-60);
|
||||
--wa-color-brand-min-60: var(--wa-color-purple-min-60);
|
||||
--wa-color-brand-max-70: var(--wa-color-purple-max-70);
|
||||
--wa-color-brand-min-70: var(--wa-color-purple-min-70);
|
||||
|
||||
--wa-color-brand-on: var(--wa-color-purple-on);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -17,5 +15,22 @@
|
||||
--wa-color-brand-10: var(--wa-color-red-10);
|
||||
--wa-color-brand-05: var(--wa-color-red-05);
|
||||
--wa-color-brand: var(--wa-color-red);
|
||||
--wa-color-brand-key: var(--wa-color-red-key);
|
||||
|
||||
--wa-color-brand-lt-50: var(--wa-color-red-lt-50);
|
||||
--wa-color-brand-gte-50: var(--wa-color-red-gte-50);
|
||||
|
||||
--wa-color-brand-lt-60: var(--wa-color-red-lt-60);
|
||||
--wa-color-brand-gte-60: var(--wa-color-red-gte-60);
|
||||
|
||||
--wa-color-brand-lt-70: var(--wa-color-red-lt-70);
|
||||
--wa-color-brand-gte-70: var(--wa-color-red-gte-70);
|
||||
|
||||
--wa-color-brand-max-50: var(--wa-color-red-max-50);
|
||||
--wa-color-brand-min-50: var(--wa-color-red-min-50);
|
||||
--wa-color-brand-max-60: var(--wa-color-red-max-60);
|
||||
--wa-color-brand-min-60: var(--wa-color-red-min-60);
|
||||
--wa-color-brand-max-70: var(--wa-color-red-max-70);
|
||||
--wa-color-brand-min-70: var(--wa-color-red-min-70);
|
||||
|
||||
--wa-color-brand-on: var(--wa-color-red-on);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -17,5 +15,22 @@
|
||||
--wa-color-brand-10: var(--wa-color-yellow-10);
|
||||
--wa-color-brand-05: var(--wa-color-yellow-05);
|
||||
--wa-color-brand: var(--wa-color-yellow);
|
||||
--wa-color-brand-key: var(--wa-color-yellow-key);
|
||||
|
||||
--wa-color-brand-lt-50: var(--wa-color-yellow-lt-50);
|
||||
--wa-color-brand-gte-50: var(--wa-color-yellow-gte-50);
|
||||
|
||||
--wa-color-brand-lt-60: var(--wa-color-yellow-lt-60);
|
||||
--wa-color-brand-gte-60: var(--wa-color-yellow-gte-60);
|
||||
|
||||
--wa-color-brand-lt-70: var(--wa-color-yellow-lt-70);
|
||||
--wa-color-brand-gte-70: var(--wa-color-yellow-gte-70);
|
||||
|
||||
--wa-color-brand-max-50: var(--wa-color-yellow-max-50);
|
||||
--wa-color-brand-min-50: var(--wa-color-yellow-min-50);
|
||||
--wa-color-brand-max-60: var(--wa-color-yellow-max-60);
|
||||
--wa-color-brand-min-60: var(--wa-color-yellow-min-60);
|
||||
--wa-color-brand-max-70: var(--wa-color-yellow-max-70);
|
||||
--wa-color-brand-min-70: var(--wa-color-yellow-min-70);
|
||||
|
||||
--wa-color-brand-on: var(--wa-color-yellow-on);
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -16,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;
|
||||
|
||||
|
||||
338
src/styles/color/base.css
Normal file
338
src/styles/color/base.css
Normal file
@@ -0,0 +1,338 @@
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']),
|
||||
:where([class^='wa-brand-'], [class*=' wa-brand-']),
|
||||
:where(:root),
|
||||
:host {
|
||||
/**
|
||||
* Conditional tokens for use in color-mix()
|
||||
* --wa-color-{hue}-lt-N ➡️ 100% if key < N, 0% otherwise
|
||||
* --wa-color-{hue}-gte-N ➡️ 100% if key >= N, 0% otherwise
|
||||
*/
|
||||
|
||||
--wa-color-red-lt-50: calc(clamp(0, 50 - var(--wa-color-red-key), 1) * 100%);
|
||||
--wa-color-red-gte-50: calc(100% - var(--wa-color-red-lt-50));
|
||||
--wa-color-red-lt-60: calc(clamp(0, 60 - var(--wa-color-red-key), 1) * 100%);
|
||||
--wa-color-red-gte-60: calc(100% - var(--wa-color-red-lt-60));
|
||||
--wa-color-red-lt-70: calc(clamp(0, 70 - var(--wa-color-red-key), 1) * 100%);
|
||||
--wa-color-red-gte-70: calc(100% - var(--wa-color-red-lt-70));
|
||||
|
||||
--wa-color-orange-lt-50: calc(clamp(0, 50 - var(--wa-color-orange-key), 1) * 100%);
|
||||
--wa-color-orange-gte-50: calc(100% - var(--wa-color-orange-lt-50));
|
||||
--wa-color-orange-lt-60: calc(clamp(0, 60 - var(--wa-color-orange-key), 1) * 100%);
|
||||
--wa-color-orange-gte-60: calc(100% - var(--wa-color-orange-lt-60));
|
||||
--wa-color-orange-lt-70: calc(clamp(0, 70 - var(--wa-color-orange-key), 1) * 100%);
|
||||
--wa-color-orange-gte-70: calc(100% - var(--wa-color-orange-lt-70));
|
||||
|
||||
--wa-color-yellow-lt-50: calc(clamp(0, 50 - var(--wa-color-yellow-key), 1) * 100%);
|
||||
--wa-color-yellow-gte-50: calc(100% - var(--wa-color-yellow-lt-50));
|
||||
--wa-color-yellow-lt-60: calc(clamp(0, 60 - var(--wa-color-yellow-key), 1) * 100%);
|
||||
--wa-color-yellow-gte-60: calc(100% - var(--wa-color-yellow-lt-60));
|
||||
--wa-color-yellow-lt-70: calc(clamp(0, 70 - var(--wa-color-yellow-key), 1) * 100%);
|
||||
--wa-color-yellow-gte-70: calc(100% - var(--wa-color-yellow-lt-70));
|
||||
|
||||
--wa-color-green-lt-50: calc(clamp(0, 50 - var(--wa-color-green-key), 1) * 100%);
|
||||
--wa-color-green-gte-50: calc(100% - var(--wa-color-green-lt-50));
|
||||
--wa-color-green-lt-60: calc(clamp(0, 60 - var(--wa-color-green-key), 1) * 100%);
|
||||
--wa-color-green-gte-60: calc(100% - var(--wa-color-green-lt-60));
|
||||
--wa-color-green-lt-70: calc(clamp(0, 70 - var(--wa-color-green-key), 1) * 100%);
|
||||
--wa-color-green-gte-70: calc(100% - var(--wa-color-green-lt-70));
|
||||
|
||||
--wa-color-cyan-lt-50: calc(clamp(0, 50 - var(--wa-color-cyan-key), 1) * 100%);
|
||||
--wa-color-cyan-gte-50: calc(100% - var(--wa-color-cyan-lt-50));
|
||||
--wa-color-cyan-lt-60: calc(clamp(0, 60 - var(--wa-color-cyan-key), 1) * 100%);
|
||||
--wa-color-cyan-gte-60: calc(100% - var(--wa-color-cyan-lt-60));
|
||||
--wa-color-cyan-lt-70: calc(clamp(0, 70 - var(--wa-color-cyan-key), 1) * 100%);
|
||||
--wa-color-cyan-gte-70: calc(100% - var(--wa-color-cyan-lt-70));
|
||||
|
||||
--wa-color-blue-lt-50: calc(clamp(0, 50 - var(--wa-color-blue-key), 1) * 100%);
|
||||
--wa-color-blue-gte-50: calc(100% - var(--wa-color-blue-lt-50));
|
||||
--wa-color-blue-lt-60: calc(clamp(0, 60 - var(--wa-color-blue-key), 1) * 100%);
|
||||
--wa-color-blue-gte-60: calc(100% - var(--wa-color-blue-lt-60));
|
||||
--wa-color-blue-lt-70: calc(clamp(0, 70 - var(--wa-color-blue-key), 1) * 100%);
|
||||
--wa-color-blue-gte-70: calc(100% - var(--wa-color-blue-lt-70));
|
||||
|
||||
--wa-color-indigo-lt-50: calc(clamp(0, 50 - var(--wa-color-indigo-key), 1) * 100%);
|
||||
--wa-color-indigo-gte-50: calc(100% - var(--wa-color-indigo-lt-50));
|
||||
--wa-color-indigo-lt-60: calc(clamp(0, 60 - var(--wa-color-indigo-key), 1) * 100%);
|
||||
--wa-color-indigo-gte-60: calc(100% - var(--wa-color-indigo-lt-60));
|
||||
--wa-color-indigo-lt-70: calc(clamp(0, 70 - var(--wa-color-indigo-key), 1) * 100%);
|
||||
--wa-color-indigo-gte-70: calc(100% - var(--wa-color-indigo-lt-70));
|
||||
|
||||
--wa-color-purple-lt-50: calc(clamp(0, 50 - var(--wa-color-purple-key), 1) * 100%);
|
||||
--wa-color-purple-gte-50: calc(100% - var(--wa-color-purple-lt-50));
|
||||
--wa-color-purple-lt-60: calc(clamp(0, 60 - var(--wa-color-purple-key), 1) * 100%);
|
||||
--wa-color-purple-gte-60: calc(100% - var(--wa-color-purple-lt-60));
|
||||
--wa-color-purple-lt-70: calc(clamp(0, 70 - var(--wa-color-purple-key), 1) * 100%);
|
||||
--wa-color-purple-gte-70: calc(100% - var(--wa-color-purple-lt-70));
|
||||
|
||||
--wa-color-pink-lt-50: calc(clamp(0, 50 - var(--wa-color-pink-key), 1) * 100%);
|
||||
--wa-color-pink-gte-50: calc(100% - var(--wa-color-pink-lt-50));
|
||||
--wa-color-pink-lt-60: calc(clamp(0, 60 - var(--wa-color-pink-key), 1) * 100%);
|
||||
--wa-color-pink-gte-60: calc(100% - var(--wa-color-pink-lt-60));
|
||||
--wa-color-pink-lt-70: calc(clamp(0, 70 - var(--wa-color-pink-key), 1) * 100%);
|
||||
--wa-color-pink-gte-70: calc(100% - var(--wa-color-pink-lt-70));
|
||||
|
||||
--wa-color-gray-lt-50: calc(clamp(0, 50 - var(--wa-color-gray-key), 1) * 100%);
|
||||
--wa-color-gray-gte-50: calc(100% - var(--wa-color-gray-lt-50));
|
||||
--wa-color-gray-lt-60: calc(clamp(0, 60 - var(--wa-color-gray-key), 1) * 100%);
|
||||
--wa-color-gray-gte-60: calc(100% - var(--wa-color-gray-lt-60));
|
||||
--wa-color-gray-lt-70: calc(clamp(0, 70 - var(--wa-color-gray-key), 1) * 100%);
|
||||
--wa-color-gray-gte-70: calc(100% - var(--wa-color-gray-lt-70));
|
||||
|
||||
/*
|
||||
* Convenience tokens for common tint cutoffs
|
||||
* --wa-color-{hue}-N-max ➡️ var(--color-{hue}) if key <= N, var(--color-{hue}-N) otherwise
|
||||
* --wa-color-{hue}-N-min ➡️ var(--color-{hue}) if key >= N, var(--color-{hue}-N) otherwise
|
||||
*/
|
||||
|
||||
--wa-color-red-max-50: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-lt-50), var(--wa-color-red-50));
|
||||
--wa-color-red-min-50: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-gte-50), var(--wa-color-red-50));
|
||||
--wa-color-red-max-60: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-lt-60), var(--wa-color-red-60));
|
||||
--wa-color-red-min-60: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-gte-60), var(--wa-color-red-60));
|
||||
--wa-color-red-max-70: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-lt-70), var(--wa-color-red-70));
|
||||
--wa-color-red-min-70: color-mix(in oklab, var(--wa-color-red) var(--wa-color-red-gte-70), var(--wa-color-red-70));
|
||||
|
||||
--wa-color-orange-max-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-orange) var(--wa-color-orange-lt-50),
|
||||
var(--wa-color-orange-50)
|
||||
);
|
||||
--wa-color-orange-min-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-orange) var(--wa-color-orange-gte-50),
|
||||
var(--wa-color-orange-50)
|
||||
);
|
||||
--wa-color-orange-max-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-orange) var(--wa-color-orange-lt-60),
|
||||
var(--wa-color-orange-60)
|
||||
);
|
||||
--wa-color-orange-min-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-orange) var(--wa-color-orange-gte-60),
|
||||
var(--wa-color-orange-60)
|
||||
);
|
||||
--wa-color-orange-max-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-orange) var(--wa-color-orange-lt-70),
|
||||
var(--wa-color-orange-70)
|
||||
);
|
||||
--wa-color-orange-min-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-orange) var(--wa-color-orange-gte-70),
|
||||
var(--wa-color-orange-70)
|
||||
);
|
||||
|
||||
--wa-color-yellow-max-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-yellow) var(--wa-color-yellow-lt-50),
|
||||
var(--wa-color-yellow-50)
|
||||
);
|
||||
--wa-color-yellow-min-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-yellow) var(--wa-color-yellow-gte-50),
|
||||
var(--wa-color-yellow-50)
|
||||
);
|
||||
--wa-color-yellow-max-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-yellow) var(--wa-color-yellow-lt-60),
|
||||
var(--wa-color-yellow-60)
|
||||
);
|
||||
--wa-color-yellow-min-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-yellow) var(--wa-color-yellow-gte-60),
|
||||
var(--wa-color-yellow-60)
|
||||
);
|
||||
--wa-color-yellow-max-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-yellow) var(--wa-color-yellow-lt-70),
|
||||
var(--wa-color-yellow-70)
|
||||
);
|
||||
--wa-color-yellow-min-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-yellow) var(--wa-color-yellow-gte-70),
|
||||
var(--wa-color-yellow-70)
|
||||
);
|
||||
|
||||
--wa-color-green-max-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-green) var(--wa-color-green-lt-50),
|
||||
var(--wa-color-green-50)
|
||||
);
|
||||
--wa-color-green-min-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-green) var(--wa-color-green-gte-50),
|
||||
var(--wa-color-green-50)
|
||||
);
|
||||
--wa-color-green-max-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-green) var(--wa-color-green-lt-60),
|
||||
var(--wa-color-green-60)
|
||||
);
|
||||
--wa-color-green-min-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-green) var(--wa-color-green-gte-60),
|
||||
var(--wa-color-green-60)
|
||||
);
|
||||
--wa-color-green-max-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-green) var(--wa-color-green-lt-70),
|
||||
var(--wa-color-green-70)
|
||||
);
|
||||
--wa-color-green-min-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-green) var(--wa-color-green-gte-70),
|
||||
var(--wa-color-green-70)
|
||||
);
|
||||
|
||||
--wa-color-cyan-max-50: color-mix(in oklab, var(--wa-color-cyan) var(--wa-color-cyan-lt-50), var(--wa-color-cyan-50));
|
||||
--wa-color-cyan-min-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-cyan) var(--wa-color-cyan-gte-50),
|
||||
var(--wa-color-cyan-50)
|
||||
);
|
||||
--wa-color-cyan-max-60: color-mix(in oklab, var(--wa-color-cyan) var(--wa-color-cyan-lt-60), var(--wa-color-cyan-60));
|
||||
--wa-color-cyan-min-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-cyan) var(--wa-color-cyan-gte-60),
|
||||
var(--wa-color-cyan-60)
|
||||
);
|
||||
--wa-color-cyan-max-70: color-mix(in oklab, var(--wa-color-cyan) var(--wa-color-cyan-lt-70), var(--wa-color-cyan-70));
|
||||
--wa-color-cyan-min-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-cyan) var(--wa-color-cyan-gte-70),
|
||||
var(--wa-color-cyan-70)
|
||||
);
|
||||
|
||||
--wa-color-blue-max-50: color-mix(in oklab, var(--wa-color-blue) var(--wa-color-blue-lt-50), var(--wa-color-blue-50));
|
||||
--wa-color-blue-min-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-blue) var(--wa-color-blue-gte-50),
|
||||
var(--wa-color-blue-50)
|
||||
);
|
||||
--wa-color-blue-max-60: color-mix(in oklab, var(--wa-color-blue) var(--wa-color-blue-lt-60), var(--wa-color-blue-60));
|
||||
--wa-color-blue-min-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-blue) var(--wa-color-blue-gte-60),
|
||||
var(--wa-color-blue-60)
|
||||
);
|
||||
--wa-color-blue-max-70: color-mix(in oklab, var(--wa-color-blue) var(--wa-color-blue-lt-70), var(--wa-color-blue-70));
|
||||
--wa-color-blue-min-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-blue) var(--wa-color-blue-gte-70),
|
||||
var(--wa-color-blue-70)
|
||||
);
|
||||
|
||||
--wa-color-indigo-max-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-indigo) var(--wa-color-indigo-lt-50),
|
||||
var(--wa-color-indigo-50)
|
||||
);
|
||||
--wa-color-indigo-min-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-indigo) var(--wa-color-indigo-gte-50),
|
||||
var(--wa-color-indigo-50)
|
||||
);
|
||||
--wa-color-indigo-max-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-indigo) var(--wa-color-indigo-lt-60),
|
||||
var(--wa-color-indigo-60)
|
||||
);
|
||||
--wa-color-indigo-min-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-indigo) var(--wa-color-indigo-gte-60),
|
||||
var(--wa-color-indigo-60)
|
||||
);
|
||||
--wa-color-indigo-max-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-indigo) var(--wa-color-indigo-lt-70),
|
||||
var(--wa-color-indigo-70)
|
||||
);
|
||||
--wa-color-indigo-min-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-indigo) var(--wa-color-indigo-gte-70),
|
||||
var(--wa-color-indigo-70)
|
||||
);
|
||||
|
||||
--wa-color-purple-max-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-purple) var(--wa-color-purple-lt-50),
|
||||
var(--wa-color-purple-50)
|
||||
);
|
||||
--wa-color-purple-min-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-purple) var(--wa-color-purple-gte-50),
|
||||
var(--wa-color-purple-50)
|
||||
);
|
||||
--wa-color-purple-max-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-purple) var(--wa-color-purple-lt-60),
|
||||
var(--wa-color-purple-60)
|
||||
);
|
||||
--wa-color-purple-min-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-purple) var(--wa-color-purple-gte-60),
|
||||
var(--wa-color-purple-60)
|
||||
);
|
||||
--wa-color-purple-max-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-purple) var(--wa-color-purple-lt-70),
|
||||
var(--wa-color-purple-70)
|
||||
);
|
||||
--wa-color-purple-min-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-purple) var(--wa-color-purple-gte-70),
|
||||
var(--wa-color-purple-70)
|
||||
);
|
||||
|
||||
--wa-color-pink-max-50: color-mix(in oklab, var(--wa-color-pink) var(--wa-color-pink-lt-50), var(--wa-color-pink-50));
|
||||
--wa-color-pink-min-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-pink) var(--wa-color-pink-gte-50),
|
||||
var(--wa-color-pink-50)
|
||||
);
|
||||
--wa-color-pink-max-60: color-mix(in oklab, var(--wa-color-pink) var(--wa-color-pink-lt-60), var(--wa-color-pink-60));
|
||||
--wa-color-pink-min-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-pink) var(--wa-color-pink-gte-60),
|
||||
var(--wa-color-pink-60)
|
||||
);
|
||||
--wa-color-pink-max-70: color-mix(in oklab, var(--wa-color-pink) var(--wa-color-pink-lt-70), var(--wa-color-pink-70));
|
||||
--wa-color-pink-min-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-pink) var(--wa-color-pink-gte-70),
|
||||
var(--wa-color-pink-70)
|
||||
);
|
||||
|
||||
--wa-color-gray-max-50: color-mix(in oklab, var(--wa-color-gray) var(--wa-color-gray-lt-50), var(--wa-color-gray-50));
|
||||
--wa-color-gray-min-50: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-gray) var(--wa-color-gray-gte-50),
|
||||
var(--wa-color-gray-50)
|
||||
);
|
||||
--wa-color-gray-max-60: color-mix(in oklab, var(--wa-color-gray) var(--wa-color-gray-lt-60), var(--wa-color-gray-60));
|
||||
--wa-color-gray-min-60: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-gray) var(--wa-color-gray-gte-60),
|
||||
var(--wa-color-gray-60)
|
||||
);
|
||||
--wa-color-gray-max-70: color-mix(in oklab, var(--wa-color-gray) var(--wa-color-gray-lt-70), var(--wa-color-gray-70));
|
||||
--wa-color-gray-min-70: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-gray) var(--wa-color-gray-gte-70),
|
||||
var(--wa-color-gray-70)
|
||||
);
|
||||
|
||||
/* Text color: white if key < 60, {hue}-10 otherwise */
|
||||
|
||||
--wa-color-red-on: color-mix(in oklab, var(--wa-color-red-10) var(--wa-color-red-gte-60), white);
|
||||
--wa-color-orange-on: color-mix(in oklab, var(--wa-color-orange-10) var(--wa-color-orange-gte-60), white);
|
||||
--wa-color-yellow-on: color-mix(in oklab, var(--wa-color-yellow-10) var(--wa-color-yellow-gte-60), white);
|
||||
--wa-color-green-on: color-mix(in oklab, var(--wa-color-green-10) var(--wa-color-green-gte-60), white);
|
||||
--wa-color-cyan-on: color-mix(in oklab, var(--wa-color-cyan-10) var(--wa-color-cyan-gte-60), white);
|
||||
--wa-color-blue-on: color-mix(in oklab, var(--wa-color-blue-10) var(--wa-color-blue-gte-60), white);
|
||||
--wa-color-indigo-on: color-mix(in oklab, var(--wa-color-indigo-10) var(--wa-color-indigo-gte-60), white);
|
||||
--wa-color-purple-on: color-mix(in oklab, var(--wa-color-purple-10) var(--wa-color-purple-gte-60), white);
|
||||
--wa-color-pink-on: color-mix(in oklab, var(--wa-color-pink-10) var(--wa-color-pink-gte-60), white);
|
||||
--wa-color-gray-on: color-mix(in oklab, var(--wa-color-gray-10) var(--wa-color-gray-gte-60), white);
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -20,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;
|
||||
|
||||
|
||||
@@ -1,48 +1,50 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
.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) */;
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -16,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) */;
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -16,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;
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -16,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) */;
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -16,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;
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -16,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) */;
|
||||
|
||||
@@ -8,7 +8,9 @@ import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { PALETTE_DIR } from './util.js';
|
||||
|
||||
export const paletteFiles = fs.readdirSync(PALETTE_DIR + '/').filter(file => file.endsWith('.css'));
|
||||
export const paletteFiles = fs
|
||||
.readdirSync(PALETTE_DIR + '/')
|
||||
.filter(file => file.endsWith('.css') && !file.endsWith('base.css'));
|
||||
export const declarationRegex =
|
||||
/^\s*--wa-color-(?<hue>[a-z]+)(?:-(?<level>[0-9]+|key))?:\s*(?<color>.+?)\s*(\/\*.+?\*\/)?\s*;$/gm;
|
||||
export const rawCSS = {};
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import url('base.css');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
@@ -16,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) */;
|
||||
|
||||
36
src/styles/danger/blue.css
Normal file
36
src/styles/danger/blue.css
Normal file
@@ -0,0 +1,36 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']),
|
||||
.wa-danger-blue {
|
||||
--wa-color-danger-95: var(--wa-color-blue-95);
|
||||
--wa-color-danger-90: var(--wa-color-blue-90);
|
||||
--wa-color-danger-80: var(--wa-color-blue-80);
|
||||
--wa-color-danger-70: var(--wa-color-blue-70);
|
||||
--wa-color-danger-60: var(--wa-color-blue-60);
|
||||
--wa-color-danger-50: var(--wa-color-blue-50);
|
||||
--wa-color-danger-40: var(--wa-color-blue-40);
|
||||
--wa-color-danger-30: var(--wa-color-blue-30);
|
||||
--wa-color-danger-20: var(--wa-color-blue-20);
|
||||
--wa-color-danger-10: var(--wa-color-blue-10);
|
||||
--wa-color-danger-05: var(--wa-color-blue-05);
|
||||
--wa-color-danger: var(--wa-color-blue);
|
||||
|
||||
--wa-color-danger-lt-50: var(--wa-color-blue-lt-50);
|
||||
--wa-color-danger-gte-50: var(--wa-color-blue-gte-50);
|
||||
|
||||
--wa-color-danger-lt-60: var(--wa-color-blue-lt-60);
|
||||
--wa-color-danger-gte-60: var(--wa-color-blue-gte-60);
|
||||
|
||||
--wa-color-danger-lt-70: var(--wa-color-blue-lt-70);
|
||||
--wa-color-danger-gte-70: var(--wa-color-blue-gte-70);
|
||||
|
||||
--wa-color-danger-max-50: var(--wa-color-blue-max-50);
|
||||
--wa-color-danger-min-50: var(--wa-color-blue-min-50);
|
||||
--wa-color-danger-max-60: var(--wa-color-blue-max-60);
|
||||
--wa-color-danger-min-60: var(--wa-color-blue-min-60);
|
||||
--wa-color-danger-max-70: var(--wa-color-blue-max-70);
|
||||
--wa-color-danger-min-70: var(--wa-color-blue-min-70);
|
||||
|
||||
--wa-color-danger-on: var(--wa-color-blue-on);
|
||||
}
|
||||
36
src/styles/danger/cyan.css
Normal file
36
src/styles/danger/cyan.css
Normal file
@@ -0,0 +1,36 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']),
|
||||
.wa-danger-cyan {
|
||||
--wa-color-danger-95: var(--wa-color-cyan-95);
|
||||
--wa-color-danger-90: var(--wa-color-cyan-90);
|
||||
--wa-color-danger-80: var(--wa-color-cyan-80);
|
||||
--wa-color-danger-70: var(--wa-color-cyan-70);
|
||||
--wa-color-danger-60: var(--wa-color-cyan-60);
|
||||
--wa-color-danger-50: var(--wa-color-cyan-50);
|
||||
--wa-color-danger-40: var(--wa-color-cyan-40);
|
||||
--wa-color-danger-30: var(--wa-color-cyan-30);
|
||||
--wa-color-danger-20: var(--wa-color-cyan-20);
|
||||
--wa-color-danger-10: var(--wa-color-cyan-10);
|
||||
--wa-color-danger-05: var(--wa-color-cyan-05);
|
||||
--wa-color-danger: var(--wa-color-cyan);
|
||||
|
||||
--wa-color-danger-lt-50: var(--wa-color-cyan-lt-50);
|
||||
--wa-color-danger-gte-50: var(--wa-color-cyan-gte-50);
|
||||
|
||||
--wa-color-danger-lt-60: var(--wa-color-cyan-lt-60);
|
||||
--wa-color-danger-gte-60: var(--wa-color-cyan-gte-60);
|
||||
|
||||
--wa-color-danger-lt-70: var(--wa-color-cyan-lt-70);
|
||||
--wa-color-danger-gte-70: var(--wa-color-cyan-gte-70);
|
||||
|
||||
--wa-color-danger-max-50: var(--wa-color-cyan-max-50);
|
||||
--wa-color-danger-min-50: var(--wa-color-cyan-min-50);
|
||||
--wa-color-danger-max-60: var(--wa-color-cyan-max-60);
|
||||
--wa-color-danger-min-60: var(--wa-color-cyan-min-60);
|
||||
--wa-color-danger-max-70: var(--wa-color-cyan-max-70);
|
||||
--wa-color-danger-min-70: var(--wa-color-cyan-min-70);
|
||||
|
||||
--wa-color-danger-on: var(--wa-color-cyan-on);
|
||||
}
|
||||
36
src/styles/danger/gray.css
Normal file
36
src/styles/danger/gray.css
Normal file
@@ -0,0 +1,36 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']),
|
||||
.wa-danger-gray {
|
||||
--wa-color-danger-95: var(--wa-color-gray-95);
|
||||
--wa-color-danger-90: var(--wa-color-gray-90);
|
||||
--wa-color-danger-80: var(--wa-color-gray-80);
|
||||
--wa-color-danger-70: var(--wa-color-gray-70);
|
||||
--wa-color-danger-60: var(--wa-color-gray-60);
|
||||
--wa-color-danger-50: var(--wa-color-gray-50);
|
||||
--wa-color-danger-40: var(--wa-color-gray-40);
|
||||
--wa-color-danger-30: var(--wa-color-gray-30);
|
||||
--wa-color-danger-20: var(--wa-color-gray-20);
|
||||
--wa-color-danger-10: var(--wa-color-gray-10);
|
||||
--wa-color-danger-05: var(--wa-color-gray-05);
|
||||
--wa-color-danger: var(--wa-color-gray);
|
||||
|
||||
--wa-color-danger-lt-50: var(--wa-color-gray-lt-50);
|
||||
--wa-color-danger-gte-50: var(--wa-color-gray-gte-50);
|
||||
|
||||
--wa-color-danger-lt-60: var(--wa-color-gray-lt-60);
|
||||
--wa-color-danger-gte-60: var(--wa-color-gray-gte-60);
|
||||
|
||||
--wa-color-danger-lt-70: var(--wa-color-gray-lt-70);
|
||||
--wa-color-danger-gte-70: var(--wa-color-gray-gte-70);
|
||||
|
||||
--wa-color-danger-max-50: var(--wa-color-gray-max-50);
|
||||
--wa-color-danger-min-50: var(--wa-color-gray-min-50);
|
||||
--wa-color-danger-max-60: var(--wa-color-gray-max-60);
|
||||
--wa-color-danger-min-60: var(--wa-color-gray-min-60);
|
||||
--wa-color-danger-max-70: var(--wa-color-gray-max-70);
|
||||
--wa-color-danger-min-70: var(--wa-color-gray-min-70);
|
||||
|
||||
--wa-color-danger-on: var(--wa-color-gray-on);
|
||||
}
|
||||
36
src/styles/danger/green.css
Normal file
36
src/styles/danger/green.css
Normal file
@@ -0,0 +1,36 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']),
|
||||
.wa-danger-green {
|
||||
--wa-color-danger-95: var(--wa-color-green-95);
|
||||
--wa-color-danger-90: var(--wa-color-green-90);
|
||||
--wa-color-danger-80: var(--wa-color-green-80);
|
||||
--wa-color-danger-70: var(--wa-color-green-70);
|
||||
--wa-color-danger-60: var(--wa-color-green-60);
|
||||
--wa-color-danger-50: var(--wa-color-green-50);
|
||||
--wa-color-danger-40: var(--wa-color-green-40);
|
||||
--wa-color-danger-30: var(--wa-color-green-30);
|
||||
--wa-color-danger-20: var(--wa-color-green-20);
|
||||
--wa-color-danger-10: var(--wa-color-green-10);
|
||||
--wa-color-danger-05: var(--wa-color-green-05);
|
||||
--wa-color-danger: var(--wa-color-green);
|
||||
|
||||
--wa-color-danger-lt-50: var(--wa-color-green-lt-50);
|
||||
--wa-color-danger-gte-50: var(--wa-color-green-gte-50);
|
||||
|
||||
--wa-color-danger-lt-60: var(--wa-color-green-lt-60);
|
||||
--wa-color-danger-gte-60: var(--wa-color-green-gte-60);
|
||||
|
||||
--wa-color-danger-lt-70: var(--wa-color-green-lt-70);
|
||||
--wa-color-danger-gte-70: var(--wa-color-green-gte-70);
|
||||
|
||||
--wa-color-danger-max-50: var(--wa-color-green-max-50);
|
||||
--wa-color-danger-min-50: var(--wa-color-green-min-50);
|
||||
--wa-color-danger-max-60: var(--wa-color-green-max-60);
|
||||
--wa-color-danger-min-60: var(--wa-color-green-min-60);
|
||||
--wa-color-danger-max-70: var(--wa-color-green-max-70);
|
||||
--wa-color-danger-min-70: var(--wa-color-green-min-70);
|
||||
|
||||
--wa-color-danger-on: var(--wa-color-green-on);
|
||||
}
|
||||
36
src/styles/danger/indigo.css
Normal file
36
src/styles/danger/indigo.css
Normal file
@@ -0,0 +1,36 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']),
|
||||
.wa-danger-indigo {
|
||||
--wa-color-danger-95: var(--wa-color-indigo-95);
|
||||
--wa-color-danger-90: var(--wa-color-indigo-90);
|
||||
--wa-color-danger-80: var(--wa-color-indigo-80);
|
||||
--wa-color-danger-70: var(--wa-color-indigo-70);
|
||||
--wa-color-danger-60: var(--wa-color-indigo-60);
|
||||
--wa-color-danger-50: var(--wa-color-indigo-50);
|
||||
--wa-color-danger-40: var(--wa-color-indigo-40);
|
||||
--wa-color-danger-30: var(--wa-color-indigo-30);
|
||||
--wa-color-danger-20: var(--wa-color-indigo-20);
|
||||
--wa-color-danger-10: var(--wa-color-indigo-10);
|
||||
--wa-color-danger-05: var(--wa-color-indigo-05);
|
||||
--wa-color-danger: var(--wa-color-indigo);
|
||||
|
||||
--wa-color-danger-lt-50: var(--wa-color-indigo-lt-50);
|
||||
--wa-color-danger-gte-50: var(--wa-color-indigo-gte-50);
|
||||
|
||||
--wa-color-danger-lt-60: var(--wa-color-indigo-lt-60);
|
||||
--wa-color-danger-gte-60: var(--wa-color-indigo-gte-60);
|
||||
|
||||
--wa-color-danger-lt-70: var(--wa-color-indigo-lt-70);
|
||||
--wa-color-danger-gte-70: var(--wa-color-indigo-gte-70);
|
||||
|
||||
--wa-color-danger-max-50: var(--wa-color-indigo-max-50);
|
||||
--wa-color-danger-min-50: var(--wa-color-indigo-min-50);
|
||||
--wa-color-danger-max-60: var(--wa-color-indigo-max-60);
|
||||
--wa-color-danger-min-60: var(--wa-color-indigo-min-60);
|
||||
--wa-color-danger-max-70: var(--wa-color-indigo-max-70);
|
||||
--wa-color-danger-min-70: var(--wa-color-indigo-min-70);
|
||||
|
||||
--wa-color-danger-on: var(--wa-color-indigo-on);
|
||||
}
|
||||
36
src/styles/danger/orange.css
Normal file
36
src/styles/danger/orange.css
Normal file
@@ -0,0 +1,36 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']),
|
||||
.wa-danger-orange {
|
||||
--wa-color-danger-95: var(--wa-color-orange-95);
|
||||
--wa-color-danger-90: var(--wa-color-orange-90);
|
||||
--wa-color-danger-80: var(--wa-color-orange-80);
|
||||
--wa-color-danger-70: var(--wa-color-orange-70);
|
||||
--wa-color-danger-60: var(--wa-color-orange-60);
|
||||
--wa-color-danger-50: var(--wa-color-orange-50);
|
||||
--wa-color-danger-40: var(--wa-color-orange-40);
|
||||
--wa-color-danger-30: var(--wa-color-orange-30);
|
||||
--wa-color-danger-20: var(--wa-color-orange-20);
|
||||
--wa-color-danger-10: var(--wa-color-orange-10);
|
||||
--wa-color-danger-05: var(--wa-color-orange-05);
|
||||
--wa-color-danger: var(--wa-color-orange);
|
||||
|
||||
--wa-color-danger-lt-50: var(--wa-color-orange-lt-50);
|
||||
--wa-color-danger-gte-50: var(--wa-color-orange-gte-50);
|
||||
|
||||
--wa-color-danger-lt-60: var(--wa-color-orange-lt-60);
|
||||
--wa-color-danger-gte-60: var(--wa-color-orange-gte-60);
|
||||
|
||||
--wa-color-danger-lt-70: var(--wa-color-orange-lt-70);
|
||||
--wa-color-danger-gte-70: var(--wa-color-orange-gte-70);
|
||||
|
||||
--wa-color-danger-max-50: var(--wa-color-orange-max-50);
|
||||
--wa-color-danger-min-50: var(--wa-color-orange-min-50);
|
||||
--wa-color-danger-max-60: var(--wa-color-orange-max-60);
|
||||
--wa-color-danger-min-60: var(--wa-color-orange-min-60);
|
||||
--wa-color-danger-max-70: var(--wa-color-orange-max-70);
|
||||
--wa-color-danger-min-70: var(--wa-color-orange-min-70);
|
||||
|
||||
--wa-color-danger-on: var(--wa-color-orange-on);
|
||||
}
|
||||
36
src/styles/danger/pink.css
Normal file
36
src/styles/danger/pink.css
Normal file
@@ -0,0 +1,36 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']),
|
||||
.wa-danger-pink {
|
||||
--wa-color-danger-95: var(--wa-color-pink-95);
|
||||
--wa-color-danger-90: var(--wa-color-pink-90);
|
||||
--wa-color-danger-80: var(--wa-color-pink-80);
|
||||
--wa-color-danger-70: var(--wa-color-pink-70);
|
||||
--wa-color-danger-60: var(--wa-color-pink-60);
|
||||
--wa-color-danger-50: var(--wa-color-pink-50);
|
||||
--wa-color-danger-40: var(--wa-color-pink-40);
|
||||
--wa-color-danger-30: var(--wa-color-pink-30);
|
||||
--wa-color-danger-20: var(--wa-color-pink-20);
|
||||
--wa-color-danger-10: var(--wa-color-pink-10);
|
||||
--wa-color-danger-05: var(--wa-color-pink-05);
|
||||
--wa-color-danger: var(--wa-color-pink);
|
||||
|
||||
--wa-color-danger-lt-50: var(--wa-color-pink-lt-50);
|
||||
--wa-color-danger-gte-50: var(--wa-color-pink-gte-50);
|
||||
|
||||
--wa-color-danger-lt-60: var(--wa-color-pink-lt-60);
|
||||
--wa-color-danger-gte-60: var(--wa-color-pink-gte-60);
|
||||
|
||||
--wa-color-danger-lt-70: var(--wa-color-pink-lt-70);
|
||||
--wa-color-danger-gte-70: var(--wa-color-pink-gte-70);
|
||||
|
||||
--wa-color-danger-max-50: var(--wa-color-pink-max-50);
|
||||
--wa-color-danger-min-50: var(--wa-color-pink-min-50);
|
||||
--wa-color-danger-max-60: var(--wa-color-pink-max-60);
|
||||
--wa-color-danger-min-60: var(--wa-color-pink-min-60);
|
||||
--wa-color-danger-max-70: var(--wa-color-pink-max-70);
|
||||
--wa-color-danger-min-70: var(--wa-color-pink-min-70);
|
||||
|
||||
--wa-color-danger-on: var(--wa-color-pink-on);
|
||||
}
|
||||
36
src/styles/danger/purple.css
Normal file
36
src/styles/danger/purple.css
Normal file
@@ -0,0 +1,36 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']),
|
||||
.wa-danger-purple {
|
||||
--wa-color-danger-95: var(--wa-color-purple-95);
|
||||
--wa-color-danger-90: var(--wa-color-purple-90);
|
||||
--wa-color-danger-80: var(--wa-color-purple-80);
|
||||
--wa-color-danger-70: var(--wa-color-purple-70);
|
||||
--wa-color-danger-60: var(--wa-color-purple-60);
|
||||
--wa-color-danger-50: var(--wa-color-purple-50);
|
||||
--wa-color-danger-40: var(--wa-color-purple-40);
|
||||
--wa-color-danger-30: var(--wa-color-purple-30);
|
||||
--wa-color-danger-20: var(--wa-color-purple-20);
|
||||
--wa-color-danger-10: var(--wa-color-purple-10);
|
||||
--wa-color-danger-05: var(--wa-color-purple-05);
|
||||
--wa-color-danger: var(--wa-color-purple);
|
||||
|
||||
--wa-color-danger-lt-50: var(--wa-color-purple-lt-50);
|
||||
--wa-color-danger-gte-50: var(--wa-color-purple-gte-50);
|
||||
|
||||
--wa-color-danger-lt-60: var(--wa-color-purple-lt-60);
|
||||
--wa-color-danger-gte-60: var(--wa-color-purple-gte-60);
|
||||
|
||||
--wa-color-danger-lt-70: var(--wa-color-purple-lt-70);
|
||||
--wa-color-danger-gte-70: var(--wa-color-purple-gte-70);
|
||||
|
||||
--wa-color-danger-max-50: var(--wa-color-purple-max-50);
|
||||
--wa-color-danger-min-50: var(--wa-color-purple-min-50);
|
||||
--wa-color-danger-max-60: var(--wa-color-purple-max-60);
|
||||
--wa-color-danger-min-60: var(--wa-color-purple-min-60);
|
||||
--wa-color-danger-max-70: var(--wa-color-purple-max-70);
|
||||
--wa-color-danger-min-70: var(--wa-color-purple-min-70);
|
||||
|
||||
--wa-color-danger-on: var(--wa-color-purple-on);
|
||||
}
|
||||
36
src/styles/danger/red.css
Normal file
36
src/styles/danger/red.css
Normal file
@@ -0,0 +1,36 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']),
|
||||
.wa-danger-red {
|
||||
--wa-color-danger-95: var(--wa-color-red-95);
|
||||
--wa-color-danger-90: var(--wa-color-red-90);
|
||||
--wa-color-danger-80: var(--wa-color-red-80);
|
||||
--wa-color-danger-70: var(--wa-color-red-70);
|
||||
--wa-color-danger-60: var(--wa-color-red-60);
|
||||
--wa-color-danger-50: var(--wa-color-red-50);
|
||||
--wa-color-danger-40: var(--wa-color-red-40);
|
||||
--wa-color-danger-30: var(--wa-color-red-30);
|
||||
--wa-color-danger-20: var(--wa-color-red-20);
|
||||
--wa-color-danger-10: var(--wa-color-red-10);
|
||||
--wa-color-danger-05: var(--wa-color-red-05);
|
||||
--wa-color-danger: var(--wa-color-red);
|
||||
|
||||
--wa-color-danger-lt-50: var(--wa-color-red-lt-50);
|
||||
--wa-color-danger-gte-50: var(--wa-color-red-gte-50);
|
||||
|
||||
--wa-color-danger-lt-60: var(--wa-color-red-lt-60);
|
||||
--wa-color-danger-gte-60: var(--wa-color-red-gte-60);
|
||||
|
||||
--wa-color-danger-lt-70: var(--wa-color-red-lt-70);
|
||||
--wa-color-danger-gte-70: var(--wa-color-red-gte-70);
|
||||
|
||||
--wa-color-danger-max-50: var(--wa-color-red-max-50);
|
||||
--wa-color-danger-min-50: var(--wa-color-red-min-50);
|
||||
--wa-color-danger-max-60: var(--wa-color-red-max-60);
|
||||
--wa-color-danger-min-60: var(--wa-color-red-min-60);
|
||||
--wa-color-danger-max-70: var(--wa-color-red-max-70);
|
||||
--wa-color-danger-min-70: var(--wa-color-red-min-70);
|
||||
|
||||
--wa-color-danger-on: var(--wa-color-red-on);
|
||||
}
|
||||
36
src/styles/danger/yellow.css
Normal file
36
src/styles/danger/yellow.css
Normal file
@@ -0,0 +1,36 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']),
|
||||
.wa-danger-yellow {
|
||||
--wa-color-danger-95: var(--wa-color-yellow-95);
|
||||
--wa-color-danger-90: var(--wa-color-yellow-90);
|
||||
--wa-color-danger-80: var(--wa-color-yellow-80);
|
||||
--wa-color-danger-70: var(--wa-color-yellow-70);
|
||||
--wa-color-danger-60: var(--wa-color-yellow-60);
|
||||
--wa-color-danger-50: var(--wa-color-yellow-50);
|
||||
--wa-color-danger-40: var(--wa-color-yellow-40);
|
||||
--wa-color-danger-30: var(--wa-color-yellow-30);
|
||||
--wa-color-danger-20: var(--wa-color-yellow-20);
|
||||
--wa-color-danger-10: var(--wa-color-yellow-10);
|
||||
--wa-color-danger-05: var(--wa-color-yellow-05);
|
||||
--wa-color-danger: var(--wa-color-yellow);
|
||||
|
||||
--wa-color-danger-lt-50: var(--wa-color-yellow-lt-50);
|
||||
--wa-color-danger-gte-50: var(--wa-color-yellow-gte-50);
|
||||
|
||||
--wa-color-danger-lt-60: var(--wa-color-yellow-lt-60);
|
||||
--wa-color-danger-gte-60: var(--wa-color-yellow-gte-60);
|
||||
|
||||
--wa-color-danger-lt-70: var(--wa-color-yellow-lt-70);
|
||||
--wa-color-danger-gte-70: var(--wa-color-yellow-gte-70);
|
||||
|
||||
--wa-color-danger-max-50: var(--wa-color-yellow-max-50);
|
||||
--wa-color-danger-min-50: var(--wa-color-yellow-min-50);
|
||||
--wa-color-danger-max-60: var(--wa-color-yellow-max-60);
|
||||
--wa-color-danger-min-60: var(--wa-color-yellow-min-60);
|
||||
--wa-color-danger-max-70: var(--wa-color-yellow-max-70);
|
||||
--wa-color-danger-min-70: var(--wa-color-yellow-min-70);
|
||||
|
||||
--wa-color-danger-on: var(--wa-color-yellow-on);
|
||||
}
|
||||
@@ -2,10 +2,12 @@ details:where(:not(:host *)),
|
||||
:host {
|
||||
--icon-color: var(--wa-color-text-quiet);
|
||||
--spacing: var(--wa-space-m);
|
||||
--outlined-border-color: var(--wa-color-surface-border);
|
||||
|
||||
background-color: var(--wa-color-surface-default);
|
||||
border: var(--wa-panel-border-width) var(--wa-color-surface-border) var(--wa-panel-border-style);
|
||||
background-color: var(--background-color, var(--wa-color-surface-default));
|
||||
border: var(--wa-panel-border-width) var(--border-color, var(--wa-color-surface-border)) var(--wa-panel-border-style);
|
||||
border-radius: var(--wa-panel-border-radius);
|
||||
color: var(--text-color, inherit);
|
||||
padding: var(--spacing);
|
||||
|
||||
/* Print styles */
|
||||
@@ -19,6 +21,12 @@ details:where(:not(:host *)),
|
||||
}
|
||||
}
|
||||
|
||||
details.wa-plain,
|
||||
:host(wa-details[appearance='plain']),
|
||||
:host(wa-details.wa-plain) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
details:where(:not(:host *)) summary,
|
||||
:host summary /* nesting these summary styles in the rule above breaks in Firefox and Safari */ {
|
||||
display: flex;
|
||||
|
||||
@@ -121,7 +121,8 @@ input:where(:not(
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.wa-pill,
|
||||
:host([pill]) {
|
||||
border-radius: var(--wa-border-radius-pill);
|
||||
input.wa-pill,
|
||||
textarea.wa-pill,
|
||||
:host([pill]) .wa-text-field {
|
||||
border-radius: var(--wa-border-radius-pill) !important;
|
||||
}
|
||||
|
||||
36
src/styles/neutral/blue.css
Normal file
36
src/styles/neutral/blue.css
Normal file
@@ -0,0 +1,36 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']),
|
||||
.wa-neutral-blue {
|
||||
--wa-color-neutral-95: var(--wa-color-blue-95);
|
||||
--wa-color-neutral-90: var(--wa-color-blue-90);
|
||||
--wa-color-neutral-80: var(--wa-color-blue-80);
|
||||
--wa-color-neutral-70: var(--wa-color-blue-70);
|
||||
--wa-color-neutral-60: var(--wa-color-blue-60);
|
||||
--wa-color-neutral-50: var(--wa-color-blue-50);
|
||||
--wa-color-neutral-40: var(--wa-color-blue-40);
|
||||
--wa-color-neutral-30: var(--wa-color-blue-30);
|
||||
--wa-color-neutral-20: var(--wa-color-blue-20);
|
||||
--wa-color-neutral-10: var(--wa-color-blue-10);
|
||||
--wa-color-neutral-05: var(--wa-color-blue-05);
|
||||
--wa-color-neutral: var(--wa-color-blue);
|
||||
|
||||
--wa-color-neutral-lt-50: var(--wa-color-blue-lt-50);
|
||||
--wa-color-neutral-gte-50: var(--wa-color-blue-gte-50);
|
||||
|
||||
--wa-color-neutral-lt-60: var(--wa-color-blue-lt-60);
|
||||
--wa-color-neutral-gte-60: var(--wa-color-blue-gte-60);
|
||||
|
||||
--wa-color-neutral-lt-70: var(--wa-color-blue-lt-70);
|
||||
--wa-color-neutral-gte-70: var(--wa-color-blue-gte-70);
|
||||
|
||||
--wa-color-neutral-max-50: var(--wa-color-blue-max-50);
|
||||
--wa-color-neutral-min-50: var(--wa-color-blue-min-50);
|
||||
--wa-color-neutral-max-60: var(--wa-color-blue-max-60);
|
||||
--wa-color-neutral-min-60: var(--wa-color-blue-min-60);
|
||||
--wa-color-neutral-max-70: var(--wa-color-blue-max-70);
|
||||
--wa-color-neutral-min-70: var(--wa-color-blue-min-70);
|
||||
|
||||
--wa-color-neutral-on: var(--wa-color-blue-on);
|
||||
}
|
||||
36
src/styles/neutral/cyan.css
Normal file
36
src/styles/neutral/cyan.css
Normal file
@@ -0,0 +1,36 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']),
|
||||
.wa-neutral-cyan {
|
||||
--wa-color-neutral-95: var(--wa-color-cyan-95);
|
||||
--wa-color-neutral-90: var(--wa-color-cyan-90);
|
||||
--wa-color-neutral-80: var(--wa-color-cyan-80);
|
||||
--wa-color-neutral-70: var(--wa-color-cyan-70);
|
||||
--wa-color-neutral-60: var(--wa-color-cyan-60);
|
||||
--wa-color-neutral-50: var(--wa-color-cyan-50);
|
||||
--wa-color-neutral-40: var(--wa-color-cyan-40);
|
||||
--wa-color-neutral-30: var(--wa-color-cyan-30);
|
||||
--wa-color-neutral-20: var(--wa-color-cyan-20);
|
||||
--wa-color-neutral-10: var(--wa-color-cyan-10);
|
||||
--wa-color-neutral-05: var(--wa-color-cyan-05);
|
||||
--wa-color-neutral: var(--wa-color-cyan);
|
||||
|
||||
--wa-color-neutral-lt-50: var(--wa-color-cyan-lt-50);
|
||||
--wa-color-neutral-gte-50: var(--wa-color-cyan-gte-50);
|
||||
|
||||
--wa-color-neutral-lt-60: var(--wa-color-cyan-lt-60);
|
||||
--wa-color-neutral-gte-60: var(--wa-color-cyan-gte-60);
|
||||
|
||||
--wa-color-neutral-lt-70: var(--wa-color-cyan-lt-70);
|
||||
--wa-color-neutral-gte-70: var(--wa-color-cyan-gte-70);
|
||||
|
||||
--wa-color-neutral-max-50: var(--wa-color-cyan-max-50);
|
||||
--wa-color-neutral-min-50: var(--wa-color-cyan-min-50);
|
||||
--wa-color-neutral-max-60: var(--wa-color-cyan-max-60);
|
||||
--wa-color-neutral-min-60: var(--wa-color-cyan-min-60);
|
||||
--wa-color-neutral-max-70: var(--wa-color-cyan-max-70);
|
||||
--wa-color-neutral-min-70: var(--wa-color-cyan-min-70);
|
||||
|
||||
--wa-color-neutral-on: var(--wa-color-cyan-on);
|
||||
}
|
||||
36
src/styles/neutral/gray.css
Normal file
36
src/styles/neutral/gray.css
Normal file
@@ -0,0 +1,36 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']),
|
||||
.wa-neutral-gray {
|
||||
--wa-color-neutral-95: var(--wa-color-gray-95);
|
||||
--wa-color-neutral-90: var(--wa-color-gray-90);
|
||||
--wa-color-neutral-80: var(--wa-color-gray-80);
|
||||
--wa-color-neutral-70: var(--wa-color-gray-70);
|
||||
--wa-color-neutral-60: var(--wa-color-gray-60);
|
||||
--wa-color-neutral-50: var(--wa-color-gray-50);
|
||||
--wa-color-neutral-40: var(--wa-color-gray-40);
|
||||
--wa-color-neutral-30: var(--wa-color-gray-30);
|
||||
--wa-color-neutral-20: var(--wa-color-gray-20);
|
||||
--wa-color-neutral-10: var(--wa-color-gray-10);
|
||||
--wa-color-neutral-05: var(--wa-color-gray-05);
|
||||
--wa-color-neutral: var(--wa-color-gray);
|
||||
|
||||
--wa-color-neutral-lt-50: var(--wa-color-gray-lt-50);
|
||||
--wa-color-neutral-gte-50: var(--wa-color-gray-gte-50);
|
||||
|
||||
--wa-color-neutral-lt-60: var(--wa-color-gray-lt-60);
|
||||
--wa-color-neutral-gte-60: var(--wa-color-gray-gte-60);
|
||||
|
||||
--wa-color-neutral-lt-70: var(--wa-color-gray-lt-70);
|
||||
--wa-color-neutral-gte-70: var(--wa-color-gray-gte-70);
|
||||
|
||||
--wa-color-neutral-max-50: var(--wa-color-gray-max-50);
|
||||
--wa-color-neutral-min-50: var(--wa-color-gray-min-50);
|
||||
--wa-color-neutral-max-60: var(--wa-color-gray-max-60);
|
||||
--wa-color-neutral-min-60: var(--wa-color-gray-min-60);
|
||||
--wa-color-neutral-max-70: var(--wa-color-gray-max-70);
|
||||
--wa-color-neutral-min-70: var(--wa-color-gray-min-70);
|
||||
|
||||
--wa-color-neutral-on: var(--wa-color-gray-on);
|
||||
}
|
||||
36
src/styles/neutral/green.css
Normal file
36
src/styles/neutral/green.css
Normal file
@@ -0,0 +1,36 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']),
|
||||
.wa-neutral-green {
|
||||
--wa-color-neutral-95: var(--wa-color-green-95);
|
||||
--wa-color-neutral-90: var(--wa-color-green-90);
|
||||
--wa-color-neutral-80: var(--wa-color-green-80);
|
||||
--wa-color-neutral-70: var(--wa-color-green-70);
|
||||
--wa-color-neutral-60: var(--wa-color-green-60);
|
||||
--wa-color-neutral-50: var(--wa-color-green-50);
|
||||
--wa-color-neutral-40: var(--wa-color-green-40);
|
||||
--wa-color-neutral-30: var(--wa-color-green-30);
|
||||
--wa-color-neutral-20: var(--wa-color-green-20);
|
||||
--wa-color-neutral-10: var(--wa-color-green-10);
|
||||
--wa-color-neutral-05: var(--wa-color-green-05);
|
||||
--wa-color-neutral: var(--wa-color-green);
|
||||
|
||||
--wa-color-neutral-lt-50: var(--wa-color-green-lt-50);
|
||||
--wa-color-neutral-gte-50: var(--wa-color-green-gte-50);
|
||||
|
||||
--wa-color-neutral-lt-60: var(--wa-color-green-lt-60);
|
||||
--wa-color-neutral-gte-60: var(--wa-color-green-gte-60);
|
||||
|
||||
--wa-color-neutral-lt-70: var(--wa-color-green-lt-70);
|
||||
--wa-color-neutral-gte-70: var(--wa-color-green-gte-70);
|
||||
|
||||
--wa-color-neutral-max-50: var(--wa-color-green-max-50);
|
||||
--wa-color-neutral-min-50: var(--wa-color-green-min-50);
|
||||
--wa-color-neutral-max-60: var(--wa-color-green-max-60);
|
||||
--wa-color-neutral-min-60: var(--wa-color-green-min-60);
|
||||
--wa-color-neutral-max-70: var(--wa-color-green-max-70);
|
||||
--wa-color-neutral-min-70: var(--wa-color-green-min-70);
|
||||
|
||||
--wa-color-neutral-on: var(--wa-color-green-on);
|
||||
}
|
||||
36
src/styles/neutral/indigo.css
Normal file
36
src/styles/neutral/indigo.css
Normal file
@@ -0,0 +1,36 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']),
|
||||
.wa-neutral-indigo {
|
||||
--wa-color-neutral-95: var(--wa-color-indigo-95);
|
||||
--wa-color-neutral-90: var(--wa-color-indigo-90);
|
||||
--wa-color-neutral-80: var(--wa-color-indigo-80);
|
||||
--wa-color-neutral-70: var(--wa-color-indigo-70);
|
||||
--wa-color-neutral-60: var(--wa-color-indigo-60);
|
||||
--wa-color-neutral-50: var(--wa-color-indigo-50);
|
||||
--wa-color-neutral-40: var(--wa-color-indigo-40);
|
||||
--wa-color-neutral-30: var(--wa-color-indigo-30);
|
||||
--wa-color-neutral-20: var(--wa-color-indigo-20);
|
||||
--wa-color-neutral-10: var(--wa-color-indigo-10);
|
||||
--wa-color-neutral-05: var(--wa-color-indigo-05);
|
||||
--wa-color-neutral: var(--wa-color-indigo);
|
||||
|
||||
--wa-color-neutral-lt-50: var(--wa-color-indigo-lt-50);
|
||||
--wa-color-neutral-gte-50: var(--wa-color-indigo-gte-50);
|
||||
|
||||
--wa-color-neutral-lt-60: var(--wa-color-indigo-lt-60);
|
||||
--wa-color-neutral-gte-60: var(--wa-color-indigo-gte-60);
|
||||
|
||||
--wa-color-neutral-lt-70: var(--wa-color-indigo-lt-70);
|
||||
--wa-color-neutral-gte-70: var(--wa-color-indigo-gte-70);
|
||||
|
||||
--wa-color-neutral-max-50: var(--wa-color-indigo-max-50);
|
||||
--wa-color-neutral-min-50: var(--wa-color-indigo-min-50);
|
||||
--wa-color-neutral-max-60: var(--wa-color-indigo-max-60);
|
||||
--wa-color-neutral-min-60: var(--wa-color-indigo-min-60);
|
||||
--wa-color-neutral-max-70: var(--wa-color-indigo-max-70);
|
||||
--wa-color-neutral-min-70: var(--wa-color-indigo-min-70);
|
||||
|
||||
--wa-color-neutral-on: var(--wa-color-indigo-on);
|
||||
}
|
||||
36
src/styles/neutral/orange.css
Normal file
36
src/styles/neutral/orange.css
Normal file
@@ -0,0 +1,36 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']),
|
||||
.wa-neutral-orange {
|
||||
--wa-color-neutral-95: var(--wa-color-orange-95);
|
||||
--wa-color-neutral-90: var(--wa-color-orange-90);
|
||||
--wa-color-neutral-80: var(--wa-color-orange-80);
|
||||
--wa-color-neutral-70: var(--wa-color-orange-70);
|
||||
--wa-color-neutral-60: var(--wa-color-orange-60);
|
||||
--wa-color-neutral-50: var(--wa-color-orange-50);
|
||||
--wa-color-neutral-40: var(--wa-color-orange-40);
|
||||
--wa-color-neutral-30: var(--wa-color-orange-30);
|
||||
--wa-color-neutral-20: var(--wa-color-orange-20);
|
||||
--wa-color-neutral-10: var(--wa-color-orange-10);
|
||||
--wa-color-neutral-05: var(--wa-color-orange-05);
|
||||
--wa-color-neutral: var(--wa-color-orange);
|
||||
|
||||
--wa-color-neutral-lt-50: var(--wa-color-orange-lt-50);
|
||||
--wa-color-neutral-gte-50: var(--wa-color-orange-gte-50);
|
||||
|
||||
--wa-color-neutral-lt-60: var(--wa-color-orange-lt-60);
|
||||
--wa-color-neutral-gte-60: var(--wa-color-orange-gte-60);
|
||||
|
||||
--wa-color-neutral-lt-70: var(--wa-color-orange-lt-70);
|
||||
--wa-color-neutral-gte-70: var(--wa-color-orange-gte-70);
|
||||
|
||||
--wa-color-neutral-max-50: var(--wa-color-orange-max-50);
|
||||
--wa-color-neutral-min-50: var(--wa-color-orange-min-50);
|
||||
--wa-color-neutral-max-60: var(--wa-color-orange-max-60);
|
||||
--wa-color-neutral-min-60: var(--wa-color-orange-min-60);
|
||||
--wa-color-neutral-max-70: var(--wa-color-orange-max-70);
|
||||
--wa-color-neutral-min-70: var(--wa-color-orange-min-70);
|
||||
|
||||
--wa-color-neutral-on: var(--wa-color-orange-on);
|
||||
}
|
||||
36
src/styles/neutral/pink.css
Normal file
36
src/styles/neutral/pink.css
Normal file
@@ -0,0 +1,36 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']),
|
||||
.wa-neutral-pink {
|
||||
--wa-color-neutral-95: var(--wa-color-pink-95);
|
||||
--wa-color-neutral-90: var(--wa-color-pink-90);
|
||||
--wa-color-neutral-80: var(--wa-color-pink-80);
|
||||
--wa-color-neutral-70: var(--wa-color-pink-70);
|
||||
--wa-color-neutral-60: var(--wa-color-pink-60);
|
||||
--wa-color-neutral-50: var(--wa-color-pink-50);
|
||||
--wa-color-neutral-40: var(--wa-color-pink-40);
|
||||
--wa-color-neutral-30: var(--wa-color-pink-30);
|
||||
--wa-color-neutral-20: var(--wa-color-pink-20);
|
||||
--wa-color-neutral-10: var(--wa-color-pink-10);
|
||||
--wa-color-neutral-05: var(--wa-color-pink-05);
|
||||
--wa-color-neutral: var(--wa-color-pink);
|
||||
|
||||
--wa-color-neutral-lt-50: var(--wa-color-pink-lt-50);
|
||||
--wa-color-neutral-gte-50: var(--wa-color-pink-gte-50);
|
||||
|
||||
--wa-color-neutral-lt-60: var(--wa-color-pink-lt-60);
|
||||
--wa-color-neutral-gte-60: var(--wa-color-pink-gte-60);
|
||||
|
||||
--wa-color-neutral-lt-70: var(--wa-color-pink-lt-70);
|
||||
--wa-color-neutral-gte-70: var(--wa-color-pink-gte-70);
|
||||
|
||||
--wa-color-neutral-max-50: var(--wa-color-pink-max-50);
|
||||
--wa-color-neutral-min-50: var(--wa-color-pink-min-50);
|
||||
--wa-color-neutral-max-60: var(--wa-color-pink-max-60);
|
||||
--wa-color-neutral-min-60: var(--wa-color-pink-min-60);
|
||||
--wa-color-neutral-max-70: var(--wa-color-pink-max-70);
|
||||
--wa-color-neutral-min-70: var(--wa-color-pink-min-70);
|
||||
|
||||
--wa-color-neutral-on: var(--wa-color-pink-on);
|
||||
}
|
||||
36
src/styles/neutral/purple.css
Normal file
36
src/styles/neutral/purple.css
Normal file
@@ -0,0 +1,36 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']),
|
||||
.wa-neutral-purple {
|
||||
--wa-color-neutral-95: var(--wa-color-purple-95);
|
||||
--wa-color-neutral-90: var(--wa-color-purple-90);
|
||||
--wa-color-neutral-80: var(--wa-color-purple-80);
|
||||
--wa-color-neutral-70: var(--wa-color-purple-70);
|
||||
--wa-color-neutral-60: var(--wa-color-purple-60);
|
||||
--wa-color-neutral-50: var(--wa-color-purple-50);
|
||||
--wa-color-neutral-40: var(--wa-color-purple-40);
|
||||
--wa-color-neutral-30: var(--wa-color-purple-30);
|
||||
--wa-color-neutral-20: var(--wa-color-purple-20);
|
||||
--wa-color-neutral-10: var(--wa-color-purple-10);
|
||||
--wa-color-neutral-05: var(--wa-color-purple-05);
|
||||
--wa-color-neutral: var(--wa-color-purple);
|
||||
|
||||
--wa-color-neutral-lt-50: var(--wa-color-purple-lt-50);
|
||||
--wa-color-neutral-gte-50: var(--wa-color-purple-gte-50);
|
||||
|
||||
--wa-color-neutral-lt-60: var(--wa-color-purple-lt-60);
|
||||
--wa-color-neutral-gte-60: var(--wa-color-purple-gte-60);
|
||||
|
||||
--wa-color-neutral-lt-70: var(--wa-color-purple-lt-70);
|
||||
--wa-color-neutral-gte-70: var(--wa-color-purple-gte-70);
|
||||
|
||||
--wa-color-neutral-max-50: var(--wa-color-purple-max-50);
|
||||
--wa-color-neutral-min-50: var(--wa-color-purple-min-50);
|
||||
--wa-color-neutral-max-60: var(--wa-color-purple-max-60);
|
||||
--wa-color-neutral-min-60: var(--wa-color-purple-min-60);
|
||||
--wa-color-neutral-max-70: var(--wa-color-purple-max-70);
|
||||
--wa-color-neutral-min-70: var(--wa-color-purple-min-70);
|
||||
|
||||
--wa-color-neutral-on: var(--wa-color-purple-on);
|
||||
}
|
||||
36
src/styles/neutral/red.css
Normal file
36
src/styles/neutral/red.css
Normal file
@@ -0,0 +1,36 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']),
|
||||
.wa-neutral-red {
|
||||
--wa-color-neutral-95: var(--wa-color-red-95);
|
||||
--wa-color-neutral-90: var(--wa-color-red-90);
|
||||
--wa-color-neutral-80: var(--wa-color-red-80);
|
||||
--wa-color-neutral-70: var(--wa-color-red-70);
|
||||
--wa-color-neutral-60: var(--wa-color-red-60);
|
||||
--wa-color-neutral-50: var(--wa-color-red-50);
|
||||
--wa-color-neutral-40: var(--wa-color-red-40);
|
||||
--wa-color-neutral-30: var(--wa-color-red-30);
|
||||
--wa-color-neutral-20: var(--wa-color-red-20);
|
||||
--wa-color-neutral-10: var(--wa-color-red-10);
|
||||
--wa-color-neutral-05: var(--wa-color-red-05);
|
||||
--wa-color-neutral: var(--wa-color-red);
|
||||
|
||||
--wa-color-neutral-lt-50: var(--wa-color-red-lt-50);
|
||||
--wa-color-neutral-gte-50: var(--wa-color-red-gte-50);
|
||||
|
||||
--wa-color-neutral-lt-60: var(--wa-color-red-lt-60);
|
||||
--wa-color-neutral-gte-60: var(--wa-color-red-gte-60);
|
||||
|
||||
--wa-color-neutral-lt-70: var(--wa-color-red-lt-70);
|
||||
--wa-color-neutral-gte-70: var(--wa-color-red-gte-70);
|
||||
|
||||
--wa-color-neutral-max-50: var(--wa-color-red-max-50);
|
||||
--wa-color-neutral-min-50: var(--wa-color-red-min-50);
|
||||
--wa-color-neutral-max-60: var(--wa-color-red-max-60);
|
||||
--wa-color-neutral-min-60: var(--wa-color-red-min-60);
|
||||
--wa-color-neutral-max-70: var(--wa-color-red-max-70);
|
||||
--wa-color-neutral-min-70: var(--wa-color-red-min-70);
|
||||
|
||||
--wa-color-neutral-on: var(--wa-color-red-on);
|
||||
}
|
||||
36
src/styles/neutral/yellow.css
Normal file
36
src/styles/neutral/yellow.css
Normal file
@@ -0,0 +1,36 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']),
|
||||
.wa-neutral-yellow {
|
||||
--wa-color-neutral-95: var(--wa-color-yellow-95);
|
||||
--wa-color-neutral-90: var(--wa-color-yellow-90);
|
||||
--wa-color-neutral-80: var(--wa-color-yellow-80);
|
||||
--wa-color-neutral-70: var(--wa-color-yellow-70);
|
||||
--wa-color-neutral-60: var(--wa-color-yellow-60);
|
||||
--wa-color-neutral-50: var(--wa-color-yellow-50);
|
||||
--wa-color-neutral-40: var(--wa-color-yellow-40);
|
||||
--wa-color-neutral-30: var(--wa-color-yellow-30);
|
||||
--wa-color-neutral-20: var(--wa-color-yellow-20);
|
||||
--wa-color-neutral-10: var(--wa-color-yellow-10);
|
||||
--wa-color-neutral-05: var(--wa-color-yellow-05);
|
||||
--wa-color-neutral: var(--wa-color-yellow);
|
||||
|
||||
--wa-color-neutral-lt-50: var(--wa-color-yellow-lt-50);
|
||||
--wa-color-neutral-gte-50: var(--wa-color-yellow-gte-50);
|
||||
|
||||
--wa-color-neutral-lt-60: var(--wa-color-yellow-lt-60);
|
||||
--wa-color-neutral-gte-60: var(--wa-color-yellow-gte-60);
|
||||
|
||||
--wa-color-neutral-lt-70: var(--wa-color-yellow-lt-70);
|
||||
--wa-color-neutral-gte-70: var(--wa-color-yellow-gte-70);
|
||||
|
||||
--wa-color-neutral-max-50: var(--wa-color-yellow-max-50);
|
||||
--wa-color-neutral-min-50: var(--wa-color-yellow-min-50);
|
||||
--wa-color-neutral-max-60: var(--wa-color-yellow-max-60);
|
||||
--wa-color-neutral-min-60: var(--wa-color-yellow-min-60);
|
||||
--wa-color-neutral-max-70: var(--wa-color-yellow-max-70);
|
||||
--wa-color-neutral-min-70: var(--wa-color-yellow-min-70);
|
||||
|
||||
--wa-color-neutral-on: var(--wa-color-yellow-on);
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user