mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-19 07:29:14 +00:00
Compare commits
3 Commits
detect-col
...
styling-at
| Author | SHA1 | Date | |
|---|---|---|---|
|
bc775fd2b9 | ||
|
|
96fd2941df | ||
|
|
6644288f2b |
@@ -31,13 +31,25 @@ const components = manifest.modules.flatMap(module => {
|
||||
return prop.kind === 'field' && prop.privacy !== 'private';
|
||||
});
|
||||
|
||||
return {
|
||||
let ret = {
|
||||
...declaration,
|
||||
slug: declaration.tagName.replace(/^wa-/, ''),
|
||||
methods,
|
||||
attributes,
|
||||
properties,
|
||||
};
|
||||
|
||||
// Add named keys to these arrays
|
||||
for (let thing of ['methods', 'attributes', 'properties', 'cssProperties', 'cssParts', 'cssStates', 'events']) {
|
||||
if (ret[thing]) {
|
||||
ret[thing] = ret[thing].reduce((acc, item) => {
|
||||
acc[item.name] = item;
|
||||
return acc;
|
||||
}, ret[thing]);
|
||||
}
|
||||
}
|
||||
|
||||
return ret;
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"]
|
||||
@@ -1 +0,0 @@
|
||||
export { default as default } from '../../src/styles/color/palettes.js';
|
||||
@@ -16,7 +16,7 @@
|
||||
{# Docs styles #}
|
||||
<link rel="stylesheet" href="/assets/styles/docs.css" />
|
||||
</head>
|
||||
<body class="layout-{{ layout | stripExtension }}{{ ' page-wide' if wide }}">
|
||||
<body class="layout-{{ layout | stripExtension }}">
|
||||
<!-- use view="desktop" as default to reduce layout jank on desktop site. -->
|
||||
<wa-page view="desktop" disable-navigation-toggle="">
|
||||
<header slot="header" class="wa-split">
|
||||
@@ -83,6 +83,8 @@
|
||||
</details>
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
{% block header %}
|
||||
{% include 'breadcrumbs.njk' %}
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
<table class="colors wa-palette-{{ paletteId }}">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
{% for tint_bg in tints -%}
|
||||
{% for tint_fg in tints | reverse -%}
|
||||
{% if (tint_fg - tint_bg) | abs == difference %}
|
||||
<th>{{ tint_fg }} on {{ tint_bg }}</th>
|
||||
{% endif %}
|
||||
{%- endfor -%}
|
||||
{%- endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
{% for hue in hues -%}
|
||||
<tr>
|
||||
<th>{{ hue | capitalize }}</th>
|
||||
{% for tint_bg in tints -%}
|
||||
{% set color_bg = palettes[paletteId][hue][tint_bg] %}
|
||||
{% for tint_fg in tints | reverse -%}
|
||||
{% set color_fg = palettes[paletteId][hue][tint_fg] %}
|
||||
{% if (tint_fg - tint_bg) | abs == difference %}
|
||||
<td>
|
||||
<div class="color swatch" style="background-color: var(--wa-color-{{ hue }}-{{ tint_bg }}); color: var(--wa-color-{{ hue }}-{{ tint_fg }})">
|
||||
{% set contrast_wcag = '' %}
|
||||
{% if color_fg and color_bg %}
|
||||
{% set contrast_wcag = color_bg.contrast(color_fg, 'WCAG21') %}
|
||||
{% endif %}
|
||||
{% if contrast_wcag %}
|
||||
{{ contrast_wcag | number({maximumSignificantDigits: 2}) }}
|
||||
{% else %}
|
||||
{{ tint_fg }} on {{ tint_bg }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
{% endif %}
|
||||
{%- endfor -%}
|
||||
{%- endfor -%}
|
||||
</tr>
|
||||
{%- endfor %}
|
||||
</table>
|
||||
@@ -30,15 +30,19 @@
|
||||
|
||||
<script type="module" src="/assets/scripts/theme-picker.js"></script>
|
||||
{# Preset Theme #}
|
||||
{% if forceTheme %}
|
||||
<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/{{ forceTheme }}.css" render="blocking" fetchpriority="high" />
|
||||
{% else %}
|
||||
<noscript><link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/default.css" render="blocking" fetchpriority="high" /></noscript>
|
||||
<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/{{ forceTheme or 'default' }}.css" render="blocking" fetchpriority="high" />
|
||||
{% if not forceTheme %}
|
||||
<script>
|
||||
{
|
||||
let preset = localStorage.presetTheme ?? 'default';
|
||||
if (localStorage.presetTheme) {
|
||||
let preset = localStorage.presetTheme;
|
||||
let script = document.currentScript;
|
||||
script.insertAdjacentHTML('beforebegin', `<link id="theme-stylesheet" rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/${ preset }.css" render="blocking" fetchpriority="high" />`);
|
||||
let link = script.previousElementSibling;
|
||||
let newLink = link.cloneNode();
|
||||
newLink.href = link.href.replace("/default.css", `/${preset}.css`);
|
||||
newLink.addEventListener('load', () => {
|
||||
link.remove();
|
||||
});
|
||||
link.after(newLink);
|
||||
}
|
||||
</script>
|
||||
<script type="module" src="/assets/scripts/preset-theme-picker.js"></script>
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
<wa-tab-group>
|
||||
<wa-tab panel="html">In HTML</wa-tab>
|
||||
<wa-tab panel="css">In CSS</wa-tab>
|
||||
<wa-tab-panel name="html">
|
||||
|
||||
Simply add the following code to the `<head>` of your page:
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl stylesheet %}" />
|
||||
```
|
||||
</wa-tab-panel>
|
||||
<wa-tab-panel name="css">
|
||||
|
||||
Simply add the following code at the top of your CSS file:
|
||||
```css
|
||||
@import url('{% cdnUrl stylesheet %}');
|
||||
```
|
||||
</wa-tab-panel>
|
||||
</wa-tab-group>
|
||||
@@ -1,8 +1,8 @@
|
||||
{# Some collections (like "patterns") will not have any items in the alpha build for example. So this checks to make sure the collection exists. #}
|
||||
{% if collections[tag] -%}
|
||||
{% set groupUrl %}/docs/{{ tag }}/{% endset %}
|
||||
<wa-details {{ ((tag in (tags or [])) or (groupUrl in page.url)) | attr('open') }}>
|
||||
<wa-details {{ (tag in (tags or [])) | attr('open') }}>
|
||||
<h2 slot="summary">
|
||||
{% set groupUrl %}/docs/{{ tag }}/{% endset %}
|
||||
{% if groupUrl | getCollectionItemFromUrl %}
|
||||
<a href="{{ groupUrl }}" title="Overview">{{ title or (tag | capitalize) }}
|
||||
<wa-icon name="grid-2"></wa-icon>
|
||||
|
||||
@@ -25,8 +25,7 @@
|
||||
'utilities': 'Style Utilities',
|
||||
'layout': 'Layout',
|
||||
'patterns': 'Patterns',
|
||||
'palettes': 'Color Palettes',
|
||||
'tokens': 'Design Tokens'
|
||||
'theming': 'Theming'
|
||||
} %}
|
||||
{% include 'sidebar-group.njk' %}
|
||||
{% endfor %}
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
{% set paletteId = page.fileSlug %}
|
||||
{% set tints = [80, 60, 40, 20] %}
|
||||
{% set width = 20 %}
|
||||
{% set height = 13 %}
|
||||
{% set gap_x = 3 %}
|
||||
{% set gap_y = 3 %}
|
||||
|
||||
<svg viewBox="0 0 {{ (width + gap_x) * hues|length }} {{ (height + gap_y) * tints|length }}" fill="none" xmlns="http://www.w3.org/2000/svg" class="wa-palette-{{ paletteId }} palette-icon">
|
||||
<style>
|
||||
@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});
|
||||
.palette-icon {
|
||||
height: 8ch;
|
||||
}
|
||||
</style>
|
||||
|
||||
{% for hue in hues -%}
|
||||
{% set hueIndex = loop.index0 %}
|
||||
{% for tint in tints -%}
|
||||
<rect x="{{ hueIndex * (width + gap_x) }}" y="{{ loop.index0 * (height + gap_y) }}"
|
||||
width="{{ width }}" height="{{ height }}"
|
||||
fill="var(--wa-color-{{ hue }}-{{ tint }})" rx="4" />
|
||||
{%- endfor %}
|
||||
{% endfor %}
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 596 B After Width: | Height: | Size: 596 B |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.8 KiB |
|
Before Width: | Height: | Size: 502 B After Width: | Height: | Size: 502 B |
|
Before Width: | Height: | Size: 790 B After Width: | Height: | Size: 790 B |
|
Before Width: | Height: | Size: 697 B After Width: | Height: | Size: 697 B |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
@@ -1,119 +0,0 @@
|
||||
{% set hasSidebar = true %}
|
||||
{% set hasOutline = true %}
|
||||
{# {% set forceTheme = page.fileSlug %} #}
|
||||
|
||||
{% extends '../_layouts/block.njk' %}
|
||||
|
||||
{% set paletteId = page.fileSlug %}
|
||||
|
||||
{% block afterContent %}
|
||||
<style>@import url('/dist/styles/color/{{ paletteId }}.css') layer(palette.{{ paletteId }});</style>
|
||||
|
||||
{% set tints = ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] %}
|
||||
|
||||
<table class="colors wa-palette-{{ paletteId }}">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
{% for tint in tints -%}
|
||||
<th>{{ tint }}</th>
|
||||
{%- endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
{% for hue in hues -%}
|
||||
<tr>
|
||||
<th>{{ hue | capitalize }}</th>
|
||||
{% for tint in tints -%}
|
||||
<td>
|
||||
<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 -%}
|
||||
</tr>
|
||||
{%- endfor %}
|
||||
</table>
|
||||
|
||||
<h2>Used By</h2>
|
||||
|
||||
<section class="index-grid">
|
||||
{% for page in collections.theme %}
|
||||
{%- if page.data.palette == paletteId -%}
|
||||
{% include "page-card.njk" %}
|
||||
{%- endif -%}
|
||||
{% endfor %}
|
||||
</section>
|
||||
|
||||
{% markdown %}
|
||||
## Color Contrast
|
||||
|
||||
Web Awesome color scales are designed to guarantee certain contrast ratios,
|
||||
both per [WCAG 2.1 success criteria](https://www.w3.org/TR/WCAG21/#contrast-minimum)
|
||||
as well as the emergent APCA specification _(planned)_,
|
||||
so you can ensure that text is both legible to all users, and legally conformant.
|
||||
|
||||
### Level 1
|
||||
|
||||
A difference of `40` ensures a minimum **3:1** contrast ratio, suitable for large text and icons (AA).
|
||||
{% endmarkdown %}
|
||||
|
||||
{% set difference = 40 %}
|
||||
{% include "contrast-table.njk" %}
|
||||
|
||||
{% markdown %}
|
||||
|
||||
This also goes for a difference of `45`:
|
||||
|
||||
{% endmarkdown %}
|
||||
|
||||
{% set difference = 45 %}
|
||||
{% include "contrast-table.njk" %}
|
||||
|
||||
{% markdown %}
|
||||
|
||||
### Level 2
|
||||
|
||||
A difference of `50` ensures a minimum **4.5:1** contrast ratio, suitable for normal text (AA) and large text (AAA)
|
||||
{% endmarkdown %}
|
||||
|
||||
{% set difference = 50 %}
|
||||
{% include "contrast-table.njk" %}
|
||||
|
||||
{% markdown %}
|
||||
|
||||
This also goes for a difference of `55`:
|
||||
|
||||
{% endmarkdown %}
|
||||
|
||||
{% set difference = 55 %}
|
||||
{% include "contrast-table.njk" %}
|
||||
|
||||
{% markdown %}
|
||||
### Level 3
|
||||
|
||||
A difference of `60` ensures a minimum **7:1** contrast ratio, suitable for all text (AAA)
|
||||
{% endmarkdown %}
|
||||
|
||||
{% set difference = 60 %}
|
||||
{% include "contrast-table.njk" %}
|
||||
|
||||
{% markdown %}
|
||||
|
||||
This also goes for a difference of `65`:
|
||||
|
||||
{% endmarkdown %}
|
||||
|
||||
{% set difference = 65 %}
|
||||
{% include "contrast-table.njk" %}
|
||||
|
||||
{% markdown %}
|
||||
## How to use this palette
|
||||
|
||||
If you are using a Web Awesome theme that uses this palette, it will already be included.
|
||||
To use a different palette than a theme default, or to use it in a custom theme, you can import this palette directly from the Web Awesome CDN.
|
||||
|
||||
{% set stylesheet = 'styles/color/' + page.fileSlug + '.css' %}
|
||||
{% include 'import-stylesheet-code.md.njk' %}
|
||||
|
||||
{% endmarkdown %}
|
||||
{% endblock %}
|
||||
@@ -5,71 +5,7 @@
|
||||
{% extends '../_includes/base.njk' %}
|
||||
|
||||
{% block header %}
|
||||
<iframe src='{{ page.url }}demo.html' id="demo"></iframe>
|
||||
|
||||
<p id="mix_and_match" class="wa-gap-m">
|
||||
<strong>
|
||||
<wa-icon name="merge" slot="prefix"></wa-icon>
|
||||
Remix
|
||||
<wa-icon-button href="#remixing" name="circle-question" slot="suffix" variant="regular" label="How to use?"></wa-icon-button>
|
||||
</strong>
|
||||
<wa-select name="colors" label="Colors from…" size="small">
|
||||
<wa-icon name="palette" slot="prefix" variant="regular"></wa-icon>
|
||||
<wa-option value="">(Theme default)</wa-option>
|
||||
<wa-divider></wa-divider>
|
||||
{% for theme in collections.theme | sort %}
|
||||
{% if theme.fileSlug !== page.fileSlug %}
|
||||
<wa-option value="{{ theme.fileSlug }}">{{ theme.data.title }}</wa-option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</wa-select>
|
||||
|
||||
<wa-select name="palette" label="Palette" size="small">
|
||||
<wa-icon name="swatchbook" slot="prefix" variant="regular"></wa-icon>
|
||||
<wa-option value="">(Theme default)</wa-option>
|
||||
<wa-divider></wa-divider>
|
||||
{% for p in collections.palette | sort %}
|
||||
{% if p.fileSlug !== palette %}
|
||||
<wa-option value="{{ p.fileSlug }}">{{ p.data.title }}</wa-option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</wa-select>
|
||||
|
||||
<wa-select name="typography" label="Typography from…" size="small">
|
||||
<wa-icon name="font-case" slot="prefix"></wa-icon>
|
||||
<wa-option value="">(Theme default)</wa-option>
|
||||
<wa-divider></wa-divider>
|
||||
{% for theme in collections.theme | sort %}
|
||||
{% if theme.fileSlug !== page.fileSlug %}
|
||||
<wa-option value="{{ theme.fileSlug }}">{{ theme.data.title }}</wa-option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</wa-select>
|
||||
|
||||
|
||||
</p>
|
||||
<script>
|
||||
document.querySelector('#mix_and_match').addEventListener('change', function(event) {
|
||||
let selects = document.querySelectorAll('#mix_and_match wa-select');
|
||||
let url = new URL(demo.src);
|
||||
|
||||
for (let select of selects) {
|
||||
url.searchParams.set(select.name, select.value);
|
||||
}
|
||||
|
||||
demo.src = url;
|
||||
});
|
||||
</script>
|
||||
|
||||
<h2>Default Color Palette</h2>
|
||||
{% set paletteURL = '/docs/palettes/' + palette + '/' %}
|
||||
{% set themePage = page %}
|
||||
{% set page = paletteURL | getCollectionItemFromUrl %}
|
||||
<div class="index-grid">
|
||||
{% include 'page-card.njk' %}
|
||||
</div>
|
||||
{% set page = themePage %}
|
||||
|
||||
<iframe src='{{ page.url }}demo.html'></iframe>
|
||||
{% endblock %}
|
||||
|
||||
{% block afterContent %}
|
||||
@@ -78,25 +14,24 @@
|
||||
|
||||
You can import this theme from the Web Awesome CDN.
|
||||
|
||||
{% set stylesheet = 'styles/themes/' + page.fileSlug + '.css' %}
|
||||
{% include 'import-stylesheet-code.md.njk' %}
|
||||
<wa-tab-group>
|
||||
<wa-tab panel="html">In HTML</wa-tab>
|
||||
<wa-tab panel="css">In CSS</wa-tab>
|
||||
<wa-tab-panel name="html">
|
||||
|
||||
### Remixing { #remixing }
|
||||
Simply add the following code to the `<head>` of your page:
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/themes/' + page.fileSlug + '.css' %}" />
|
||||
```
|
||||
</wa-tab-panel>
|
||||
<wa-tab-panel name="css">
|
||||
|
||||
If you want to combine the **colors** from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:
|
||||
|
||||
{% set stylesheet = 'styles/themes/' + page.fileSlug + '/color.css' %}
|
||||
{% include 'import-stylesheet-code.md.njk' %}
|
||||
|
||||
To use the **typography** from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:
|
||||
|
||||
{% set stylesheet = 'styles/themes/' + page.fileSlug + '/typography.css' %}
|
||||
{% include 'import-stylesheet-code.md.njk' %}
|
||||
|
||||
<wa-callout variant="warning">
|
||||
<wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
|
||||
Please note that not all combinations will look good — once you’re mixing and matching, you’re on your own!
|
||||
</wa-callout>
|
||||
Simply add the following code at the top of your CSS file:
|
||||
```css
|
||||
@import url('{% cdnUrl 'styles/themes/' + page.fileSlug + '.css' %}');
|
||||
```
|
||||
</wa-tab-panel>
|
||||
</wa-tab-group>
|
||||
|
||||
## Dark mode
|
||||
|
||||
@@ -138,7 +73,6 @@ You can apply the class to the `<html>` element on your page to activate the dar
|
||||
Web Awesome's themes have both light and dark styles built in.
|
||||
However, Web Awesome doesn't try to auto-detect the user's light/dark mode preference.
|
||||
This should be done at the application level.
|
||||
|
||||
As a best practice, to provide a dark theme in your app, you should:
|
||||
|
||||
- Check for [`prefers-color-scheme`](https://stackoverflow.com/a/57795495/567486) and use its value by default
|
||||
@@ -147,18 +81,5 @@ As a best practice, to provide a dark theme in your app, you should:
|
||||
|
||||
Web Awesome avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.
|
||||
|
||||
Assuming the user's preference is in a variable called `colorScheme` (values: `auto`, `light`, `dark`),
|
||||
you can use the following JS snippet to apply the `wa-dark` class to the `<html>` element accordingly:
|
||||
|
||||
```js
|
||||
const systemDark = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
const applyDark = function (event = systemDark) {
|
||||
const isDark = colorScheme === 'auto' ? event.matches : colorScheme === 'dark';
|
||||
document.documentElement.classList.toggle('wa-dark', isDark);
|
||||
};
|
||||
systemDark.addEventListener('change', applyDark);
|
||||
applyDark();
|
||||
```
|
||||
|
||||
{% endmarkdown %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -14,6 +14,18 @@ export function trimPipes(content) {
|
||||
return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
|
||||
}
|
||||
|
||||
export function stripQuotes(content) {
|
||||
return content.replace(/^(['"])(.+)\1$/g, '$2');
|
||||
}
|
||||
|
||||
export function getEnumValues(type) {
|
||||
return type
|
||||
.split('|')
|
||||
.map(value => value.trim())
|
||||
.filter(Boolean)
|
||||
.map(stripQuotes);
|
||||
}
|
||||
|
||||
export function keys(obj) {
|
||||
return Object.keys(obj);
|
||||
}
|
||||
@@ -105,23 +117,6 @@ export function deepValue(obj, key) {
|
||||
return key.reduce((subObj, property) => subObj?.[property], obj);
|
||||
}
|
||||
|
||||
export function number(value, options) {
|
||||
if (typeof value !== 'number' && isNaN(value)) {
|
||||
return value;
|
||||
}
|
||||
|
||||
let lang = options?.lang ?? 'en';
|
||||
if (options?.lang) {
|
||||
delete options.lang;
|
||||
}
|
||||
|
||||
if (!options || Object.keys(options).length === 0) {
|
||||
options = { maximumSignificantDigits: 3 };
|
||||
}
|
||||
|
||||
return Number(value).toLocaleString(lang, options);
|
||||
}
|
||||
|
||||
export function isNumeric(value) {
|
||||
return typeof value === 'number' || (typeof value === 'string' && !isNaN(value));
|
||||
}
|
||||
|
||||
@@ -18,7 +18,7 @@ function updateResults(input) {
|
||||
}
|
||||
}
|
||||
|
||||
document.documentElement.addEventListener('input', e => {
|
||||
document.documentElement.addEventListener('wa-input', e => {
|
||||
if (e.target?.matches('#block-filter wa-input')) {
|
||||
updateResults(e.target);
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ const presetTheme = new ThemeAspect({
|
||||
key: 'presetTheme',
|
||||
picker: 'wa-select.preset-theme-selector',
|
||||
|
||||
applyChange(options = {}) {
|
||||
applyChange() {
|
||||
const oldStylesheets = [...document.querySelectorAll('#theme-stylesheet')];
|
||||
const oldStylesheet = oldStylesheets.pop();
|
||||
|
||||
@@ -38,7 +38,7 @@ const presetTheme = new ThemeAspect({
|
||||
|
||||
oldStylesheet.remove();
|
||||
},
|
||||
{ behavior: 'smooth', ...options },
|
||||
{ behavior: 'smooth' },
|
||||
);
|
||||
},
|
||||
{ once: true },
|
||||
@@ -47,6 +47,18 @@ const presetTheme = new ThemeAspect({
|
||||
},
|
||||
});
|
||||
|
||||
window.addEventListener('turbo:render', e => {
|
||||
presetTheme.applyChange({ behavior: 'instant' });
|
||||
/**
|
||||
* Without this, there's a flash of the incorrect preset theme.
|
||||
*/
|
||||
function updateSelectionBeforeTurboLoad(e) {
|
||||
const newElement = e.detail.newBody || e.detail.newFrame || e.detail.newStream;
|
||||
if (newElement) {
|
||||
presetTheme.syncUI(newElement);
|
||||
}
|
||||
}
|
||||
|
||||
['turbo:before-render', 'turbo:before-stream-render', 'turbo:before-frame-render'].forEach(eventName => {
|
||||
document.addEventListener(eventName, updateSelectionBeforeTurboLoad);
|
||||
});
|
||||
|
||||
window.presetTheme = presetTheme;
|
||||
|
||||
@@ -9,7 +9,6 @@ const icons = {
|
||||
component: 'puzzle-piece',
|
||||
document: 'file',
|
||||
home: 'house',
|
||||
native: 'code',
|
||||
theme: 'palette',
|
||||
};
|
||||
let searchTimeout;
|
||||
@@ -167,7 +166,6 @@ async function updateResults(query = '') {
|
||||
li.setAttribute('data-selected', index === 0 ? 'true' : 'false');
|
||||
|
||||
if (page.url === '/') icon = icons.home;
|
||||
if (page.url.startsWith('/docs/native')) icon = icons.native;
|
||||
if (page.url.startsWith('/docs/components')) icon = icons.component;
|
||||
if (page.url.startsWith('/docs/theme') || page.url.startsWith('/docs/restyle')) icon = icons.theme;
|
||||
|
||||
|
||||
@@ -28,21 +28,12 @@ export class ThemeAspect {
|
||||
});
|
||||
|
||||
// Listen for selections
|
||||
document.addEventListener('change', event => {
|
||||
document.addEventListener('wa-change', event => {
|
||||
const picker = event.target.closest(this.picker);
|
||||
if (picker) {
|
||||
this.set(picker.value);
|
||||
}
|
||||
});
|
||||
|
||||
['turbo:before-render', 'turbo:before-stream-render', 'turbo:before-frame-render'].forEach(eventName => {
|
||||
document.addEventListener(eventName, e => {
|
||||
const newElement = e.detail.newBody || e.detail.newFrame || e.detail.newStream;
|
||||
if (newElement) {
|
||||
this.syncUI(newElement);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
get() {
|
||||
@@ -100,6 +91,11 @@ const colorScheme = new ThemeAspect({
|
||||
domChange(() => {
|
||||
let dark = this.computedValue === 'dark';
|
||||
document.documentElement.classList.toggle(`wa-dark`, dark);
|
||||
|
||||
for (let el of document.querySelectorAll('.wa-invert')) {
|
||||
el.classList.toggle('wa-dark', !dark);
|
||||
el.classList.toggle('wa-light', dark);
|
||||
}
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,12 +1,6 @@
|
||||
pre {
|
||||
background-color: var(--wa-color-gray-20);
|
||||
color: white;
|
||||
|
||||
/* Ensures a discernible background color in dark mode
|
||||
* Useful for themes that use gray-20 as --wa-color-surface-default */
|
||||
.wa-dark & {
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
}
|
||||
}
|
||||
.code-comment,
|
||||
.code-prolog,
|
||||
|
||||
@@ -333,7 +333,6 @@ wa-page > main:has(> .index-grid) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(22ch, 100%), 1fr));
|
||||
gap: var(--wa-space-2xl);
|
||||
margin-block-end: var(--wa-space-3xl);
|
||||
|
||||
a {
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
@@ -383,79 +382,15 @@ wa-page > main:has(> .index-grid) {
|
||||
|
||||
/* Swatches */
|
||||
.swatch {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
border-color: var(--wa-color-neutral-border-normal);
|
||||
border-style: var(--wa-border-style);
|
||||
border-width: var(--wa-border-width-s);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
box-sizing: border-box;
|
||||
min-height: 2.5em;
|
||||
padding: var(--wa-space-xs);
|
||||
font-weight: var(--wa-font-weight-semibold);
|
||||
line-height: var(--wa-line-height-condensed);
|
||||
|
||||
&.color {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
wa-copy-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
--background-color-hover: transparent;
|
||||
font-family: var(--wa-font-family-code);
|
||||
|
||||
&::part(button) {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&::part(button):hover {
|
||||
cursor: copy;
|
||||
}
|
||||
|
||||
&::part(copy-icon),
|
||||
&::part(success-icon),
|
||||
&::part(error-icon) {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table.colors {
|
||||
thead {
|
||||
th {
|
||||
text-align: center;
|
||||
padding-block: 0;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
border: none;
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
width: 0;
|
||||
vertical-align: middle;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
td {
|
||||
padding-inline: var(--wa-space-3xs);
|
||||
padding-block: var(--wa-space-s);
|
||||
}
|
||||
}
|
||||
line-height: 2.5;
|
||||
height: 2.5em;
|
||||
padding-inline: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
/* Layout Examples */
|
||||
@@ -521,7 +456,7 @@ table.colors {
|
||||
}
|
||||
}
|
||||
|
||||
.page-wide {
|
||||
.layout-theme {
|
||||
wa-page > main {
|
||||
max-width: 140ch;
|
||||
|
||||
@@ -529,32 +464,11 @@ table.colors {
|
||||
max-width: 80ch;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-theme {
|
||||
iframe {
|
||||
width: 100%;
|
||||
min-height: 16lh;
|
||||
height: 65vh;
|
||||
max-height: 21lh;
|
||||
}
|
||||
|
||||
#mix_and_match {
|
||||
strong {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--wa-space-2xs);
|
||||
margin-top: 1.2em;
|
||||
}
|
||||
|
||||
wa-select::part(label) {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
wa-select[value='']::part(display-input),
|
||||
wa-option[value=''] {
|
||||
font-style: italic;
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -77,9 +77,9 @@ This example demonstrates all of the baked-in animations and easings. Animations
|
||||
easingName.appendChild(option);
|
||||
});
|
||||
|
||||
animationName.addEventListener('change', () => (animation.name = animationName.value));
|
||||
easingName.addEventListener('change', () => (animation.easing = easingName.value));
|
||||
playbackRate.addEventListener('input', () => (animation.playbackRate = playbackRate.value));
|
||||
animationName.addEventListener('wa-change', () => (animation.name = animationName.value));
|
||||
easingName.addEventListener('wa-change', () => (animation.easing = easingName.value));
|
||||
playbackRate.addEventListener('wa-input', () => (animation.playbackRate = playbackRate.value));
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -3,7 +3,6 @@ title: Callout
|
||||
description: Callouts are used to display important messages inline.
|
||||
tags: [feedback, content]
|
||||
icon: callout
|
||||
native: callout
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -249,7 +249,7 @@ This example is best demonstrated using a mouse. Try clicking and dragging the s
|
||||
const carousel = container.querySelector('wa-carousel');
|
||||
const toggle = container.querySelector('wa-switch');
|
||||
|
||||
toggle.addEventListener('change', () => {
|
||||
toggle.addEventListener('wa-change', () => {
|
||||
carousel.toggleAttribute('mouse-dragging', toggle.checked);
|
||||
});
|
||||
</script>
|
||||
@@ -450,7 +450,7 @@ Use the `--aspect-ratio` custom property to customize the size of the carousel's
|
||||
const carousel = document.querySelector('wa-carousel.aspect-ratio');
|
||||
const aspectRatio = document.querySelector('wa-select[name="aspect"]');
|
||||
|
||||
aspectRatio.addEventlistener('change', () => {
|
||||
aspectRatio.addEventListener('wa-change', () => {
|
||||
carousel.style.setProperty('--aspect-ratio', aspectRatio.value);
|
||||
});
|
||||
})();
|
||||
|
||||
@@ -73,4 +73,4 @@ if (name_search.value) {
|
||||
filterByName(name_search.value);
|
||||
}
|
||||
|
||||
name_search_group.addEventListener('input', e => filterByName(name_search.value));
|
||||
name_search_group.addEventListener('wa-input', e => filterByName(name_search.value));
|
||||
|
||||
@@ -82,7 +82,7 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
|
||||
});
|
||||
|
||||
// Update validity on change
|
||||
checkbox.addEventlistener('change', () => {
|
||||
checkbox.addEventListener('wa-change', () => {
|
||||
checkbox.setCustomValidity(checkbox.checked ? '' : errorMessage);
|
||||
});
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@ icon: format-bytes
|
||||
const formatter = container.querySelector('wa-format-bytes');
|
||||
const input = container.querySelector('wa-input');
|
||||
|
||||
input.addEventListener('input', () => (formatter.value = input.value || 0));
|
||||
input.addEventListener('wa-input', () => (formatter.value = input.value || 0));
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
@@ -19,7 +19,7 @@ Localization is handled by the browser's [`Intl.NumberFormat` API](https://devel
|
||||
const formatter = container.querySelector('wa-format-number');
|
||||
const input = container.querySelector('wa-input');
|
||||
|
||||
input.addEventListener('input', () => (formatter.value = input.value || 0));
|
||||
input.addEventListener('wa-input', () => (formatter.value = input.value || 0));
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
@@ -54,11 +54,11 @@ Popup is a low-level utility built specifically for positioning elements. Do not
|
||||
const active = container.querySelector('wa-switch[name="active"]');
|
||||
const arrow = container.querySelector('wa-switch[name="arrow"]');
|
||||
|
||||
select.addEventListener('change', () => (popup.placement = select.value));
|
||||
distance.addEventListener('input', () => (popup.distance = distance.value));
|
||||
skidding.addEventListener('input', () => (popup.skidding = skidding.value));
|
||||
active.addEventListener('change', () => (popup.active = active.checked));
|
||||
arrow.addEventListener('change', () => (popup.arrow = arrow.checked));
|
||||
select.addEventListener('wa-change', () => (popup.placement = select.value));
|
||||
distance.addEventListener('wa-input', () => (popup.distance = distance.value));
|
||||
skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
|
||||
active.addEventListener('wa-change', () => (popup.active = active.checked));
|
||||
arrow.addEventListener('wa-change', () => (popup.arrow = arrow.checked));
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@@ -145,7 +145,7 @@ Popups are inactive and hidden until the `active` attribute is applied. Removing
|
||||
const popup = container.querySelector('wa-popup');
|
||||
const active = container.querySelector('wa-switch');
|
||||
|
||||
active.addEventListener('change', () => (popup.active = active.checked));
|
||||
active.addEventListener('wa-change', () => (popup.active = active.checked));
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -233,7 +233,7 @@ Since placement is preferred when using `flip`, you can observe the popup's curr
|
||||
const popup = container.querySelector('wa-popup');
|
||||
const select = container.querySelector('wa-select');
|
||||
|
||||
select.addEventListener('change', () => (popup.placement = select.value));
|
||||
select.addEventListener('wa-change', () => (popup.placement = select.value));
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -277,7 +277,7 @@ Use the `distance` attribute to change the distance between the popup and its an
|
||||
const popup = container.querySelector('wa-popup');
|
||||
const distance = container.querySelector('wa-slider');
|
||||
|
||||
distance.addEventListener('input', () => (popup.distance = distance.value));
|
||||
distance.addEventListener('wa-input', () => (popup.distance = distance.value));
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -321,7 +321,7 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
|
||||
const popup = container.querySelector('wa-popup');
|
||||
const skidding = container.querySelector('wa-slider');
|
||||
|
||||
skidding.addEventListener('input', () => (popup.skidding = skidding.value));
|
||||
skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -409,9 +409,9 @@ By default, the arrow will be aligned as close to the center of the _anchor_ as
|
||||
const arrowPlacement = container.querySelector('[name="arrow-placement"]');
|
||||
const arrow = container.querySelector('[name="arrow"]');
|
||||
|
||||
placement.addEventListener('change', () => (popup.placement = placement.value));
|
||||
arrowPlacement.addEventListener('change', () => (popup.arrowPlacement = arrowPlacement.value));
|
||||
arrow.addEventListener('change', () => (popup.arrow = arrow.checked));
|
||||
placement.addEventListener('wa-change', () => (popup.placement = placement.value));
|
||||
arrowPlacement.addEventListener('wa-change', () => (popup.arrowPlacement = arrowPlacement.value));
|
||||
arrow.addEventListener('wa-change', () => (popup.arrow = arrow.checked));
|
||||
</script>
|
||||
</div>
|
||||
```
|
||||
@@ -464,7 +464,7 @@ Use the `sync` attribute to make the popup the same width or height as the ancho
|
||||
const fixed = container.querySelector('wa-switch');
|
||||
const sync = container.querySelector('wa-select');
|
||||
|
||||
sync.addEventListener('change', () => (popup.sync = sync.value));
|
||||
sync.addEventListener('wa-change', () => (popup.sync = sync.value));
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -523,7 +523,7 @@ Toggle the switch and scroll the container to see the difference.
|
||||
const popup = container.querySelector('wa-popup');
|
||||
const fixed = container.querySelector('wa-switch');
|
||||
|
||||
fixed.addEventListener('change', () => (popup.strategy = fixed.checked ? 'fixed' : 'absolute'));
|
||||
fixed.addEventListener('wa-change', () => (popup.strategy = fixed.checked ? 'fixed' : 'absolute'));
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -575,7 +575,7 @@ Scroll the container to see how the popup flips to prevent clipping.
|
||||
const popup = container.querySelector('wa-popup');
|
||||
const flip = container.querySelector('wa-switch');
|
||||
|
||||
flip.addEventListener('change', () => (popup.flip = flip.checked));
|
||||
flip.addEventListener('wa-change', () => (popup.flip = flip.checked));
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -670,7 +670,7 @@ Toggle the switch to see the difference.
|
||||
const popup = container.querySelector('wa-popup');
|
||||
const shift = container.querySelector('wa-switch');
|
||||
|
||||
shift.addEventListener('change', () => (popup.shift = shift.checked));
|
||||
shift.addEventListener('wa-change', () => (popup.shift = shift.checked));
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -731,7 +731,7 @@ Scroll the container to see the popup resize as its available space changes.
|
||||
const popup = container.querySelector('wa-popup');
|
||||
const autoSize = container.querySelector('wa-switch');
|
||||
|
||||
autoSize.addEventListener('change', () => (popup.autoSize = autoSize.checked ? 'both' : ''));
|
||||
autoSize.addEventListener('wa-change', () => (popup.autoSize = autoSize.checked ? 'both' : ''));
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -782,9 +782,9 @@ When a gap exists between the anchor and the popup element, this option will add
|
||||
const hoverBridge = container.querySelector('wa-switch');
|
||||
const distance = container.querySelector('wa-slider[label="Distance"]');
|
||||
const skidding = container.querySelector('wa-slider[label="Skidding"]');
|
||||
distance.addEventListener('input', () => (popup.distance = distance.value));
|
||||
skidding.addEventListener('input', () => (popup.skidding = skidding.value));
|
||||
hoverBridge.addEventListener('change', () => (popup.hoverBridge = hoverBridge.checked));
|
||||
distance.addEventListener('wa-input', () => (popup.distance = distance.value));
|
||||
skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
|
||||
hoverBridge.addEventListener('wa-change', () => (popup.hoverBridge = hoverBridge.checked));
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -837,7 +837,7 @@ This example anchors a popup to the mouse cursor using a virtual element. As suc
|
||||
};
|
||||
|
||||
// Only activate the popup when the switch is checked
|
||||
enabled.addEventListener('change', () => {
|
||||
enabled.addEventListener('wa-change', () => {
|
||||
popup.active = enabled.checked;
|
||||
});
|
||||
|
||||
|
||||
@@ -24,7 +24,7 @@ QR codes are useful for providing small pieces of information to users who can q
|
||||
|
||||
customElements.whenDefined('wa-qr-code').then(() => {
|
||||
input.value = qrCode.value;
|
||||
input.addEventListener('input', () => (qrCode.value = input.value));
|
||||
input.addEventListener('wa-input', () => (qrCode.value = input.value));
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -7,8 +7,8 @@ icon: radio-group
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" name="a" value="1">
|
||||
<wa-radio value="1">Option 1</wa-radio><br>
|
||||
<wa-radio value="2">Option 2</wa-radio><br>
|
||||
<wa-radio value="1">Option 1</wa-radio>
|
||||
<wa-radio value="2">Option 2</wa-radio>
|
||||
<wa-radio value="3">Option 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
```
|
||||
@@ -21,8 +21,8 @@ Add descriptive hint to a radio group with the `hint` attribute. For hints that
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" hint="Choose the most appropriate option." name="a" value="1">
|
||||
<wa-radio value="1">Option 1</wa-radio><br>
|
||||
<wa-radio value="2">Option 2</wa-radio><br>
|
||||
<wa-radio value="1">Option 1</wa-radio>
|
||||
<wa-radio value="2">Option 2</wa-radio>
|
||||
<wa-radio value="3">Option 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
```
|
||||
@@ -45,8 +45,8 @@ Radios and radio buttons can be disabled by adding the `disabled` attribute to t
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" name="a" value="1">
|
||||
<wa-radio value="1">Option 1</wa-radio><br>
|
||||
<wa-radio value="2" disabled>Option 2</wa-radio><br>
|
||||
<wa-radio value="1">Option 1</wa-radio>
|
||||
<wa-radio value="2" disabled>Option 2</wa-radio>
|
||||
<wa-radio value="3">Option 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
```
|
||||
@@ -57,15 +57,15 @@ The size of [Radios](/docs/components/radio) and [Radio Buttons](/docs/component
|
||||
|
||||
```html preview
|
||||
<wa-radio-group label="Select an option" size="medium" value="medium" class="radio-group-size">
|
||||
<wa-radio value="small">Small</wa-radio><br>
|
||||
<wa-radio value="medium">Medium</wa-radio><br>
|
||||
<wa-radio value="small">Small</wa-radio>
|
||||
<wa-radio value="medium">Medium</wa-radio>
|
||||
<wa-radio value="large">Large</wa-radio>
|
||||
</wa-radio-group>
|
||||
|
||||
<script>
|
||||
const radioGroup = document.querySelector('.radio-group-size');
|
||||
|
||||
radioGroup.addEventlistener('change', () => {
|
||||
radioGroup.addEventListener('wa-change', () => {
|
||||
radioGroup.size = radioGroup.value;
|
||||
});
|
||||
</script>
|
||||
@@ -82,8 +82,8 @@ Setting the `required` attribute to make selecting an option mandatory. If a val
|
||||
```html {.example}
|
||||
<form class="validation">
|
||||
<wa-radio-group label="Select an option" name="a" required>
|
||||
<wa-radio value="1">Option 1</wa-radio><br>
|
||||
<wa-radio value="2">Option 2</wa-radio><br>
|
||||
<wa-radio value="1">Option 1</wa-radio>
|
||||
<wa-radio value="2">Option 2</wa-radio>
|
||||
<wa-radio value="3">Option 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
<br />
|
||||
@@ -108,8 +108,8 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
|
||||
```html {.example}
|
||||
<form class="custom-validity">
|
||||
<wa-radio-group label="Select an option" name="a" value="1">
|
||||
<wa-radio value="1">Not me</wa-radio><br>
|
||||
<wa-radio value="2">Me neither</wa-radio><br>
|
||||
<wa-radio value="1">Not me</wa-radio>
|
||||
<wa-radio value="2">Me neither</wa-radio>
|
||||
<wa-radio value="3">Choose me</wa-radio>
|
||||
</wa-radio-group>
|
||||
<br />
|
||||
@@ -127,7 +127,7 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
|
||||
});
|
||||
|
||||
// Update validity when a selection is made
|
||||
form.addEventlistener('change', () => {
|
||||
form.addEventListener('wa-change', () => {
|
||||
const isValid = radioGroup.value === '3';
|
||||
radioGroup.setCustomValidity(isValid ? '' : errorMessage);
|
||||
});
|
||||
|
||||
@@ -420,7 +420,5 @@ This can be hard to conceptualize, so heres a fairly large example showing how l
|
||||
//
|
||||
// TODO - remove once we switch to the Popover API
|
||||
//
|
||||
customElements.whenDefined('wa-select').then(() => {
|
||||
document.querySelectorAll('wa-code-demo [slot="preview"] wa-select').forEach(select => select.hoist = true);
|
||||
});
|
||||
document.querySelectorAll('wa-code-demo [slot="preview"] wa-select').forEach(select => select.hoist = true);
|
||||
</script>
|
||||
|
||||
@@ -208,7 +208,7 @@ Try resizing the example below with each option and notice how the panels respon
|
||||
const splitPanel = container.querySelector('wa-split-panel');
|
||||
const select = container.querySelector('wa-select');
|
||||
|
||||
select.addEventlistener('change', () => (splitPanel.primary = select.value));
|
||||
select.addEventListener('wa-change', () => (splitPanel.primary = select.value));
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
@@ -88,7 +88,7 @@ The `selection` attribute lets you change the selection behavior of the tree.
|
||||
const selectionMode = document.querySelector('#selection-mode');
|
||||
const tree = document.querySelector('.tree-selectable');
|
||||
|
||||
selectionMode.addEventlistener('change', () => {
|
||||
selectionMode.addEventListener('wa-change', () => {
|
||||
tree.querySelectorAll('wa-tree-item').forEach(item => (item.selected = false));
|
||||
tree.selection = selectionMode.value;
|
||||
});
|
||||
|
||||
@@ -12,7 +12,7 @@ Web Awesome uses numerous CSS custom properties that make up a high-level themin
|
||||
|
||||
Because these custom properties live at the page level, they're prefixed with `--wa-` to avoid collisions with other libraries or your own custom properties.
|
||||
|
||||
To customize a theme, simply override any of these custom properties in your own stylesheet by scoping your styles to `:root`, `:host`, and, if needed, the class for the specific theme you want to override. Here's an example that changes the default brand color (blue) to violet in the light theme using existing [literal colors](/docs/tokens/color/#literal-colors).
|
||||
To customize a theme, simply override any of these custom properties in your own stylesheet by scoping your styles to `:root`, `:host`, and, if needed, the class for the specific theme you want to override. Here's an example that changes the default brand color (blue) to violet in the light theme using existing [literal colors](/docs/theming/color/#literal-colors).
|
||||
|
||||
```css
|
||||
:where(:root),
|
||||
|
||||
@@ -506,7 +506,7 @@ hasOutline: false
|
||||
<wa-option data-alpha="remove" value="playful">Playful</wa-option>
|
||||
<wa-option data-alpha="remove" value="brutalist">Brutalist</wa-option>
|
||||
<wa-option data-alpha="remove" value="tailspin">Tailspin</wa-option>
|
||||
<wa-option data-alpha="remove" value="glossy">Glossy</wa-option>
|
||||
<wa-option data-alpha="remove" value="glassy">Glassy</wa-option>
|
||||
<wa-option data-alpha="remove" value="active">Active</wa-option>
|
||||
<wa-option value="classic">Classic</wa-option>
|
||||
</wa-select>
|
||||
@@ -803,7 +803,7 @@ hasOutline: false
|
||||
const queue = [];
|
||||
let inputTimeout;
|
||||
|
||||
variantInput.addEventlistener('change', () => {
|
||||
variantInput.addEventListener('wa-change', () => {
|
||||
iconList.dataset.variant = variantInput.value;
|
||||
});
|
||||
|
||||
@@ -823,7 +823,7 @@ hasOutline: false
|
||||
});
|
||||
|
||||
// Filter as the user types
|
||||
input.addEventListener('input', () => {
|
||||
input.addEventListener('wa-input', () => {
|
||||
clearTimeout(inputTimeout);
|
||||
inputTimeout = setTimeout(() => {
|
||||
[...iconList.children].map(item => {
|
||||
@@ -886,7 +886,7 @@ hasOutline: false
|
||||
case 'active':
|
||||
colorPalette = 'rudimentary';
|
||||
break;
|
||||
case 'glossy':
|
||||
case 'glassy':
|
||||
colorPalette = 'elegant';
|
||||
break;
|
||||
case 'premium':
|
||||
@@ -1049,7 +1049,7 @@ hasOutline: false
|
||||
case 'brutalist':
|
||||
case 'classic':
|
||||
case 'awesome':
|
||||
case 'glossy':
|
||||
case 'glassy':
|
||||
case 'active':
|
||||
assetFolder = themeSelect.value;
|
||||
break;
|
||||
@@ -1084,10 +1084,10 @@ hasOutline: false
|
||||
el.classList.add(`wa-theme-${theme}-${colorMode}`);
|
||||
}
|
||||
|
||||
colorModeSelect.addEventlistener('change', setColorMode);
|
||||
colorModeSelect.addEventListener('wa-change', setColorMode);
|
||||
|
||||
// Theme Switcher
|
||||
themeSelect.addEventlistener('change', event => {
|
||||
themeSelect.addEventListener('wa-change', event => {
|
||||
const theme = event.target.value
|
||||
const newStylesheet = Object.assign(document.createElement("link"), {
|
||||
// This media: "print" allows us to lazy load the stylesheet then hot swap it on load.
|
||||
@@ -1132,14 +1132,14 @@ hasOutline: false
|
||||
});
|
||||
|
||||
// Color Palette
|
||||
colorSelect.addEventlistener('change', event => {
|
||||
colorSelect.addEventListener('wa-change', event => {
|
||||
const colorPalette = event.target.value;
|
||||
|
||||
colorStylesheet.href = `/dist/styles/themes/color/${colorPalette}.css`;
|
||||
});
|
||||
|
||||
// Brand Color
|
||||
brandColor.addEventlistener('change', event => {
|
||||
brandColor.addEventListener('wa-change', event => {
|
||||
const documentStyles = document.documentElement.style
|
||||
documentStyles.setProperty('--wa-color-primary-95', `var(--wa-color-${event.target.value}-95)`);
|
||||
documentStyles.setProperty('--wa-color-primary-90', `var(--wa-color-${event.target.value}-90)`);
|
||||
@@ -1223,7 +1223,7 @@ hasOutline: false
|
||||
})
|
||||
|
||||
// Pre-generated logos
|
||||
logoSelector.addEventlistener('change', event => {
|
||||
logoSelector.addEventListener('wa-change', event => {
|
||||
const value = event.currentTarget.value
|
||||
|
||||
const projectLogo = previewContainer.querySelector("#project-logo");
|
||||
@@ -1259,7 +1259,7 @@ hasOutline: false
|
||||
case 'tailspin':
|
||||
presetLogoIcons = ['wind', 'feather', 'lemon', 'wind-turbine'];
|
||||
break;
|
||||
case 'glossy':
|
||||
case 'glassy':
|
||||
presetLogoIcons = ['raindrops', 'citrus-slice', 'lighthouse', 'kiwi-bird'];
|
||||
break;
|
||||
case 'active':
|
||||
@@ -1279,21 +1279,21 @@ hasOutline: false
|
||||
})
|
||||
}
|
||||
|
||||
themeSelect.addEventlistener('change', setLogoIcons);
|
||||
themeSelect.addEventListener('wa-change', setLogoIcons);
|
||||
|
||||
// Project Name
|
||||
container.querySelector('[name="project-name"]').addEventListener('input', event => {
|
||||
container.querySelector('[name="project-name"]').addEventListener('wa-input', event => {
|
||||
previewContainer.querySelector("#project-name").innerText = event.target.value || event.target.getAttribute("placeholder")
|
||||
})
|
||||
|
||||
// Heading font weight
|
||||
resetHeadingFontWeightValue()
|
||||
fontWeightHeading.addEventListener('input', event => {
|
||||
fontWeightHeading.addEventListener('wa-input', event => {
|
||||
document.documentElement.style.setProperty('--wa-font-weight-heading', event.target.value);
|
||||
});
|
||||
|
||||
// Heading text
|
||||
fontFamilyHeading.addEventlistener('change', event => {
|
||||
fontFamilyHeading.addEventListener('wa-change', event => {
|
||||
let fontFamily;
|
||||
switch (event.target.value) {
|
||||
case 'assistant':
|
||||
@@ -1351,7 +1351,7 @@ hasOutline: false
|
||||
})
|
||||
|
||||
// Body text
|
||||
fontFamilyBody.addEventlistener('change', event => {
|
||||
fontFamilyBody.addEventListener('wa-change', event => {
|
||||
let fontFamily;
|
||||
switch (event.target.value) {
|
||||
case 'assistant':
|
||||
@@ -1404,7 +1404,7 @@ hasOutline: false
|
||||
|
||||
// Body font weight
|
||||
resetBodyFontWeightValue()
|
||||
fontWeightBody.addEventListener('input', event => {
|
||||
fontWeightBody.addEventListener('wa-input', event => {
|
||||
document.documentElement.style.setProperty('--wa-font-weight-body', event.target.value);
|
||||
});
|
||||
|
||||
@@ -1580,7 +1580,7 @@ hasOutline: false
|
||||
}
|
||||
|
||||
// Swaps icons to the preferred set for the selected theme
|
||||
themeSelect.addEventlistener('change', event => {
|
||||
themeSelect.addEventListener('wa-change', event => {
|
||||
setPreferredIcons();
|
||||
showIconStyleOptions();
|
||||
syncLogoIcon();
|
||||
@@ -1599,32 +1599,32 @@ hasOutline: false
|
||||
});
|
||||
|
||||
// Changes available Icon Styles and swaps icons based on the selected Icon Family
|
||||
iconFamily.addEventlistener('change', event => {
|
||||
iconFamily.addEventListener('wa-change', event => {
|
||||
useFaIcons();
|
||||
showIconStyleOptions();
|
||||
});
|
||||
|
||||
// Swaps icons based on the selected Icon Style
|
||||
iconStyle.addEventlistener('change', useFaIcons);
|
||||
iconStyle.addEventListener('wa-change', useFaIcons);
|
||||
|
||||
|
||||
// Corners
|
||||
container.querySelector('[name="corners"]').addEventListener('input', event => {
|
||||
container.querySelector('[name="corners"]').addEventListener('wa-input', event => {
|
||||
document.documentElement.style.setProperty('--wa-border-radius-scale', `${event.target.value}`);
|
||||
});
|
||||
|
||||
// Border width
|
||||
container.querySelector('[name="border-width"]').addEventListener('input', event => {
|
||||
container.querySelector('[name="border-width"]').addEventListener('wa-input', event => {
|
||||
document.documentElement.style.setProperty('--wa-border-width-scale', `${event.target.value / 16}`);
|
||||
});
|
||||
|
||||
// Border style
|
||||
borderStyle.addEventListener('input', event => {
|
||||
borderStyle.addEventListener('wa-input', event => {
|
||||
document.documentElement.style.setProperty('--wa-border-style', event.target.value);
|
||||
});
|
||||
|
||||
// Spacing style
|
||||
spacing.addEventListener('input', event => {
|
||||
spacing.addEventListener('wa-input', event => {
|
||||
document.documentElement.style.setProperty('--wa-space-scale', `${event.target.value}`);
|
||||
});
|
||||
|
||||
|
||||
@@ -146,7 +146,7 @@ To create a custom validation error, pass a non-empty string to the `setCustomVa
|
||||
alert('All fields are valid!');
|
||||
});
|
||||
|
||||
input.addEventListener('input', () => {
|
||||
input.addEventListener('wa-input', () => {
|
||||
if (input.value === 'webawesome') {
|
||||
input.setCustomValidity('');
|
||||
} else {
|
||||
|
||||
@@ -20,7 +20,7 @@ snippets:
|
||||
|
||||
### Variants
|
||||
|
||||
Use the [variant utility classes](../utilities/color.md) to set the button's semantic variant.
|
||||
Use the variant utility classes to set the button's semantic variant.
|
||||
|
||||
```html {.example}
|
||||
<button class="wa-neutral">Neutral</button>
|
||||
@@ -32,7 +32,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 to change the button's visual appearance:
|
||||
|
||||
```html {.example}
|
||||
<div style="margin-block-end: 1rem;">
|
||||
@@ -69,7 +69,7 @@ Use the [appearance utility classes](../utilities/appearance.md) to change the b
|
||||
|
||||
### Sizes
|
||||
|
||||
Use the [size utility classes](../utilities/size.md) to change a button's size.
|
||||
Use `wa-size-*` classes to change a button's size.
|
||||
|
||||
```html {.example}
|
||||
<button class="wa-size-s">Small</button>
|
||||
|
||||
@@ -1,117 +0,0 @@
|
||||
---
|
||||
title: Callout
|
||||
description: Callouts are used to display important messages inline.
|
||||
component: callout
|
||||
icon: callout
|
||||
snippets: '.wa-callout'
|
||||
noAlpha: true
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<article class="wa-callout">
|
||||
This is a callout style, applied to a standard article element.
|
||||
</article>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Variants
|
||||
|
||||
Use the [variant utility classes](../utilities/color.md) to set the callout's color variant.
|
||||
|
||||
```html {.example}
|
||||
<article class="wa-callout wa-brand">
|
||||
<strong>This is super informative</strong><br />
|
||||
You can tell by how pretty the callout is.
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-success">
|
||||
<strong>Your changes have been saved</strong><br />
|
||||
You can safely exit the app now.
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-neutral">
|
||||
<strong>Your settings have been updated</strong><br />
|
||||
Settings will take effect on next login.
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-warning">
|
||||
<strong>Your session has ended</strong><br />
|
||||
Please login again to continue.
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-danger">
|
||||
<strong>Your account has been deleted</strong><br />
|
||||
We're very sorry to see you go!
|
||||
</article>
|
||||
```
|
||||
|
||||
### Appearance
|
||||
|
||||
Use the [appearance utility classes](../utilities/appearance.md) to change the callout's visual appearance (the default is `outlined filled`).
|
||||
|
||||
```html {.example}
|
||||
<article class="wa-callout wa-brand wa-outlined wa-accent">
|
||||
This <strong>accent</strong> callout is also <strong>outlined</strong>
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-brand wa-accent">
|
||||
This <strong>accent</strong> callout draws attention without an outline
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-brand wa-outlined wa-filled">
|
||||
This callout is both <strong>filled</strong> and <strong>outlined</strong>
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-brand wa-filled">
|
||||
This callout is only <strong>filled</strong>
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-brand wa-outlined">
|
||||
Here's an <strong>outlined</strong> callout
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-brand wa-plain">
|
||||
No bells and whistles on this <strong>plain</strong> callout
|
||||
</article>
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
Use the [size utility classes](../utilities/size.md) to change a callout's size.
|
||||
|
||||
```html {.example}
|
||||
<article class="wa-callout wa-brand wa-outlined wa-accent wa-size-l">
|
||||
This is meant to be very emphasized.
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout">
|
||||
Normal-sized callout.
|
||||
</article>
|
||||
|
||||
<br />
|
||||
|
||||
<article class="wa-callout wa-plain wa-plain wa-size-s">
|
||||
Just a small tip!
|
||||
</article>
|
||||
```
|
||||
@@ -33,39 +33,3 @@ Use the [appearance utilities](/docs/utilities/appearance/) to change the select
|
||||
</select>
|
||||
</label>
|
||||
```
|
||||
|
||||
### Grouping options
|
||||
|
||||
In [modern browsers](https://caniuse.com/mdn-html_elements_select_hr_in_select), you can use the `<hr>` element as a divider:
|
||||
|
||||
```html {.example}
|
||||
<select>
|
||||
<small>Section 1</small>
|
||||
<option value="option-1">Option 1</option>
|
||||
<option value="option-2">Option 2</option>
|
||||
<option value="option-3">Option 3</option>
|
||||
<hr />
|
||||
<small>Section 2</small>
|
||||
<option value="option-4">Option 4</option>
|
||||
<option value="option-5">Option 5</option>
|
||||
<option value="option-6">Option 6</option>
|
||||
</select>
|
||||
```
|
||||
|
||||
To provide labels, you can use the `<optgroup>` element (with or without dividers):
|
||||
|
||||
```html {.example}
|
||||
<select>
|
||||
<optgroup label="Section 1">
|
||||
<option value="option-1">Option 1</option>
|
||||
<option value="option-2">Option 2</option>
|
||||
<option value="option-3">Option 3</option>
|
||||
</optgroup>
|
||||
<optgroup label="Section 2">
|
||||
<option value="option-4">Option 4</option>
|
||||
<option value="option-5">Option 5</option>
|
||||
<hr />
|
||||
<option value="option-6">Option 6</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
```
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
title: Anodized
|
||||
isPro: true
|
||||
tags: pro
|
||||
---
|
||||
@@ -1,3 +0,0 @@
|
||||
---
|
||||
title: Bright
|
||||
---
|
||||
@@ -1,4 +0,0 @@
|
||||
---
|
||||
title: Classic
|
||||
description: The original Shoelace color palette.
|
||||
---
|
||||
@@ -1,4 +0,0 @@
|
||||
---
|
||||
title: Default
|
||||
description: This is the palette used in the default theme.
|
||||
---
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
title: Elegant
|
||||
isPro: true
|
||||
tags: pro
|
||||
---
|
||||
@@ -1,10 +0,0 @@
|
||||
---
|
||||
title: Color Palettes
|
||||
description: Palettes define [literal colors](/docs/tokens/colors) that are used in the design system.
|
||||
layout: overview
|
||||
override:tags: []
|
||||
forTag: palette
|
||||
categories:
|
||||
other: Free
|
||||
pro: Pro
|
||||
---
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
title: Mild
|
||||
isPro: true
|
||||
tags: pro
|
||||
---
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
title: Natural
|
||||
isPro: true
|
||||
tags: pro
|
||||
---
|
||||
@@ -1,8 +0,0 @@
|
||||
{
|
||||
"layout": "palette.njk",
|
||||
"tags": ["palettes", "palette"],
|
||||
"eleventyComputed": {
|
||||
"snippet": ".wa-palette-{{ page.fileSlug }}",
|
||||
"icon": "palette"
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
title: Rudimentary
|
||||
isPro: true
|
||||
tags: pro
|
||||
---
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
title: Vogue
|
||||
isPro: true
|
||||
tags: pro
|
||||
---
|
||||
@@ -1,6 +1,5 @@
|
||||
{
|
||||
"layout": "block.njk",
|
||||
"tags": ["patterns"],
|
||||
"wide": true,
|
||||
"noAlpha": true
|
||||
}
|
||||
|
||||
@@ -12,30 +12,6 @@ Components with the <wa-badge variant="warning" pill>Experimental</wa-badge> bad
|
||||
During the alpha period, things might break! We take breaking changes very seriously, but sometimes they're necessary to make the final product that much better. We appreciate your patience!
|
||||
:::
|
||||
|
||||
## Next
|
||||
|
||||
- 🚨 BREAKING: updated all components to use native events instead of `wa-` prefixed events. This will allow components to work more like native elements in your code, frameworks, third-party plugins, etc. To update your code, simply remove the prefix from your event listeners for the following events.
|
||||
- `wa-input` => `input`
|
||||
- `wa-change` => `change`
|
||||
- `wa-blur` => `blur` (this event will no longer bubble, use `focusout` for a bubbling version)
|
||||
- `wa-focus` => `focus` (this event will no longer bubble)
|
||||
- Added `.wa-callout` utility class
|
||||
- Fixed a bug in `<wa-tab-group>` that prevented nested tab groups from working properly
|
||||
- Fixed slot names for `show-password-icon` and `hide-password-icon` in `<wa-input>` to more intuitively represent their functions
|
||||
|
||||
## 3.0.0-alpha.9
|
||||
|
||||
- Added new themes:
|
||||
- Glossy
|
||||
- Matter
|
||||
- Premium
|
||||
- Playful
|
||||
- Added docs on themes and palettes
|
||||
- Separated colors and typography out from themes so they can be used independently
|
||||
- Added test suite to ensure all color palettes provide the color contrast they are supposed to
|
||||
- Added `.wa-invert` utility class to invert the current color scheme
|
||||
- Added `:state(blank)` to `<wa-input>`, `<wa-textarea>`, and `<wa-select>` to style form inputs differently when empty.
|
||||
|
||||
## 3.0.0-alpha.8
|
||||
|
||||
- Simplified the internal structure and CSS properties of `<wa-card>`, removed `base` part.
|
||||
@@ -54,6 +30,7 @@ During the alpha period, things might break! We take breaking changes very serio
|
||||
- Brutalist
|
||||
- Mellow
|
||||
- Tailspin
|
||||
- Playful
|
||||
- Renamed `--wa-form-control-resting-color` to `--wa-form-control-border-color` for familiarity and accuracy
|
||||
- Removed size-based `--wa-form-control-height-*` tokens in favor of `--wa-form-control-height` (see [size utilities](/docs/utilities/size/))
|
||||
- Updated the `--wa-border-width-*` and `--wa-border-radius-*` scale for better DX
|
||||
|
||||
36
docs/docs/test/styling.njk
Normal file
36
docs/docs/test/styling.njk
Normal file
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: Styling Tests
|
||||
---
|
||||
|
||||
<h2>Appearance and variant tests</h2>
|
||||
|
||||
{% for component in componentsBy.attribute.variant %}
|
||||
{%- if component.attributes.appearance -%}
|
||||
<h3><a href="../{{ component.url }}"><code><{{ component.tagName }}></code></a></h3>
|
||||
|
||||
{% set variantValues = component.attributes.variant.type.text | getEnumValues %}
|
||||
{% set appearanceValues = component.attributes.appearance.type.text | getEnumValues %}
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Variant</th>
|
||||
{% for appearance in appearanceValues %}
|
||||
<th>{{ appearance }}</th>
|
||||
{%- endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
{% for variant in variantValues %}
|
||||
<tr>
|
||||
<th>{{ variant }}</th>
|
||||
{% for appearance in appearanceValues %}
|
||||
<td>
|
||||
<{{ component.tagName }} variant={{ variant }} appearance={{ appearance }}>{{ variant }} {{ appearance }}</{{ component.tagName }}>
|
||||
</td>
|
||||
{%- endfor %}
|
||||
</tr>
|
||||
{%- endfor %}
|
||||
</table>
|
||||
|
||||
{% endif %}
|
||||
{%- endfor %}
|
||||
1
docs/docs/themes/active.md
vendored
1
docs/docs/themes/active.md
vendored
@@ -3,5 +3,4 @@ title: Active
|
||||
description: Energetic and tactile, always in motion.
|
||||
isPro: true
|
||||
tags: pro
|
||||
palette: rudimentary
|
||||
---
|
||||
|
||||
1
docs/docs/themes/awesome.md
vendored
1
docs/docs/themes/awesome.md
vendored
@@ -2,5 +2,4 @@
|
||||
title: Awesome
|
||||
description: Punchy and vibrant, the rockstar of themes.
|
||||
order: 0.2
|
||||
palette: bright
|
||||
---
|
||||
|
||||
1
docs/docs/themes/brutalist.md
vendored
1
docs/docs/themes/brutalist.md
vendored
@@ -3,5 +3,4 @@ title: Brutalist
|
||||
description: Sharp, square, and unapologetically bold.
|
||||
isPro: true
|
||||
tags: pro
|
||||
palette: default
|
||||
---
|
||||
|
||||
1
docs/docs/themes/classic.md
vendored
1
docs/docs/themes/classic.md
vendored
@@ -2,5 +2,4 @@
|
||||
title: Classic
|
||||
description: Timeless elegance that never goes out of style.
|
||||
order: 0.1
|
||||
palette: classic
|
||||
---
|
||||
|
||||
4
docs/docs/themes/creating.md
vendored
4
docs/docs/themes/creating.md
vendored
@@ -21,8 +21,7 @@ If you're customizing the default light styles, scope your styles to the followi
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-default,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
.wa-light {
|
||||
/* your custom styles here */
|
||||
}
|
||||
```
|
||||
@@ -31,7 +30,6 @@ If you're customizing the default dark styles, scope your styles to the followin
|
||||
|
||||
```css
|
||||
.wa-dark,
|
||||
.wa-invert,
|
||||
:is(:host-context(.wa-dark)) {
|
||||
/* your custom styles here */
|
||||
}
|
||||
|
||||
1
docs/docs/themes/default.md
vendored
1
docs/docs/themes/default.md
vendored
@@ -2,5 +2,4 @@
|
||||
title: Default
|
||||
description: Your trusty companion, like a perfectly broken-in pair of jeans.
|
||||
order: 0
|
||||
palette: default
|
||||
---
|
||||
|
||||
51
docs/docs/themes/demo.njk
vendored
51
docs/docs/themes/demo.njk
vendored
@@ -10,6 +10,12 @@ override:tags: []
|
||||
eleventyComputed:
|
||||
forceTheme: "{{ theme.fileSlug }}"
|
||||
---
|
||||
<script>
|
||||
document.getElementById('theme-stylesheet').href = '/dist/styles/themes/{{ theme.fileSlug }}.css';
|
||||
</script>
|
||||
<script type=module>
|
||||
document.getElementById('theme-stylesheet').href = '/dist/styles/themes/{{ theme.fileSlug }}.css';
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet" href="/dist/styles/themes/{{ theme.fileSlug }}.css" />
|
||||
<link rel="stylesheet" href="/docs/themes/showcase.css" />
|
||||
@@ -18,7 +24,6 @@ eleventyComputed:
|
||||
<header>
|
||||
{% include 'breadcrumbs.njk' %}
|
||||
<h1 class="title">{{ theme.data.title }}</h1>
|
||||
<p id="mix_and_match" hidden class="wa-size-s"></p>
|
||||
<p>{% include 'status.njk' %}</p>
|
||||
<p id="theme-showcase-description">{{ theme.data.description | inlineMarkdown | safe }}</p>
|
||||
</header>
|
||||
@@ -33,47 +38,3 @@ eleventyComputed:
|
||||
{{ content | safe }}
|
||||
</div>
|
||||
</wa-image-comparer>
|
||||
|
||||
<script>
|
||||
function updateTheme() {
|
||||
let params = new URLSearchParams(window.location.search);
|
||||
let script = document.currentScript;
|
||||
const stylesheetURLs = {
|
||||
colors: id => `/dist/styles/themes/${ id }/color.css`,
|
||||
palette: id => `/dist/styles/color/${ id }.css`,
|
||||
typography: id => `/dist/styles/themes/${ id }/typography.css`
|
||||
};
|
||||
const icons = {
|
||||
colors: 'palette',
|
||||
palette: 'swatchbook',
|
||||
typography: 'font-case'
|
||||
}
|
||||
|
||||
for (let link of document.querySelectorAll('link.mix-and-match')) {
|
||||
link.remove();
|
||||
}
|
||||
|
||||
let msgs = [];
|
||||
|
||||
for (let name in stylesheetURLs) {
|
||||
if (params.get(name)) {
|
||||
let url = stylesheetURLs[name](params.get(name));
|
||||
script.insertAdjacentHTML('afterend', `<link rel="stylesheet" href="${ url }" class="mix-and-match" />`);
|
||||
let docsURL = (name === 'palette' ? '/docs/palettes/' : '/docs/themes/') + params.get(name) + '/';
|
||||
let title = params.get(name).replace(/^[a-z]/g, c => c.toUpperCase());
|
||||
let icon = icons[name];
|
||||
msgs.push(`<wa-icon name="${icon}" variant="regular"></wa-icon> <a href="${ docsURL }">${ title }</a>`);
|
||||
}
|
||||
}
|
||||
|
||||
for (let p of mix_and_match) {
|
||||
p.hidden = msgs.length === 0;
|
||||
if (msgs.length) {
|
||||
let icon =
|
||||
p.innerHTML = `<strong><wa-icon name="merge"></wa-icon> Remixed</strong> ` + msgs.map(msg => `<wa-badge appearance=outlined>
|
||||
${ msg }</wa-badge>`).join(' ');
|
||||
}
|
||||
}
|
||||
}
|
||||
updateTheme();
|
||||
</script>
|
||||
|
||||
7
docs/docs/themes/glassy.md
vendored
Normal file
7
docs/docs/themes/glassy.md
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Glassy
|
||||
description: Smooth, sleek, and reflective.
|
||||
isPro: true
|
||||
tags: pro
|
||||
noAlpha: true
|
||||
---
|
||||
7
docs/docs/themes/glossy.md
vendored
7
docs/docs/themes/glossy.md
vendored
@@ -1,7 +0,0 @@
|
||||
---
|
||||
title: Glossy
|
||||
description: Bustling with plenty of luster and shine.
|
||||
isPro: true
|
||||
tags: pro
|
||||
palette: elegant
|
||||
---
|
||||
9
docs/docs/themes/index.njk
vendored
9
docs/docs/themes/index.njk
vendored
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Themes
|
||||
description: Themes are collections of predefined CSS custom properties that thread through every Web Awesome component and pattern.
|
||||
description: Themes are collections of pre-defined CSS custom properties that thread through every Web Awesome component and pattern.
|
||||
layout: overview
|
||||
override:tags: []
|
||||
forTag: theme
|
||||
@@ -14,7 +14,7 @@ categories:
|
||||
|
||||
## What's a Theme?
|
||||
|
||||
A theme is a collection of standardized [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*), also called "design tokens," that cover a range of styles from colors to transitions. We use these tokens throughout Web Awesome components for a cohesive look and feel. Our [Design Tokens pages](/docs/tokens/) document these styles so that you can use them freely throughout your project and customize them as needed.
|
||||
Themes are a collection of standardized [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) that cover a range of styles from colors to transitions. We use these custom properties throughout Web Awesome components for a cohesive look and feel. Our [Theming pages](/docs/theming/) document these styles so that you can use them freely throughout your project and customize them as needed.
|
||||
|
||||
Themes are scoped to unique classes, such as `wa-theme-default` or `wa-theme-classic`.
|
||||
Scoping to unique classes allows you to import multiple themes and use them interchangeably without collisions.
|
||||
@@ -22,7 +22,6 @@ Please note that if you import multiple themes, the last one will be the default
|
||||
|
||||
Each theme may also include both light and dark color schemes with the classes `wa-light` and `wa-dark`.
|
||||
You can use these classes to apply a specific color scheme to an entire page or just a section.
|
||||
You can also use `wa-invert` which behaves like `wa-dark` in light mode, and like `wa-light` in dark mode.
|
||||
In pre-made themes, we use a light color scheme by default.
|
||||
|
||||
|
||||
@@ -37,13 +36,11 @@ For example, the default theme is set up like this:
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-default,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
.wa-light {
|
||||
/* all CSS custom properties for color, typography, space, etc. */
|
||||
}
|
||||
|
||||
.wa-dark,
|
||||
.wa-invert,
|
||||
:host-context(.wa-dark) {
|
||||
/* subset of CSS custom properties for a dark color scheme */
|
||||
}
|
||||
|
||||
85
docs/docs/themes/matter.md
vendored
85
docs/docs/themes/matter.md
vendored
@@ -1,85 +0,0 @@
|
||||
---
|
||||
title: Matter
|
||||
description: Digital design inspired by the real world.
|
||||
isPro: true
|
||||
tags: pro
|
||||
palette: mild
|
||||
---
|
||||
|
||||
Set the page theme to "{{ title }}" from the top right to preview the following examples.
|
||||
|
||||
## Floating Labels
|
||||
|
||||
This theme implements "floating labels" for `wa-input`, `wa-textarea`, `wa-select`,
|
||||
which makes labels look like placeholders when the input is empty, does not have an actual placeholder, and is not focused.
|
||||
|
||||
```html {.example}
|
||||
<wa-input label="What is your name?"></wa-input>
|
||||
<br>
|
||||
<wa-input label="What is your name?" appearance="filled"></wa-input>
|
||||
```
|
||||
|
||||
## Ripple Effect
|
||||
|
||||
This theme implements a ripple effect for buttons, including native buttons.
|
||||
Click on the following buttons to observe it:
|
||||
|
||||
```html {.example}
|
||||
<wa-button variant="brand">Button</wa-button>
|
||||
<button class="wa-brand">Button</button>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Customization
|
||||
|
||||
You can use several properties to customize the ripple effect.
|
||||
|
||||
These properties can be set on any ancestor, including the root element:
|
||||
|
||||
| Property | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `--wa-ripple-start-radius` | `<length>` | `0.1em` | The starting radius of the ripple effect. |
|
||||
| `--wa-ripple-start-opacity` | `<number>` | `0.1` | The starting opacity of the ripple effect. |
|
||||
| `--wa-ripple-duration` | `<time>` | `calc(2 * var(--wa-transition-slow))` | The duration of the ripple effect transition. |
|
||||
|
||||
Any of these can be used to disable the ripple effect:
|
||||
|
||||
```css
|
||||
--wa-ripple-start-radius: 0em;
|
||||
```
|
||||
```css
|
||||
--wa-ripple-start-opacity: 0;
|
||||
```
|
||||
```css
|
||||
--wa-ripple-duration: 0s;
|
||||
```
|
||||
|
||||
These properties would only work on the button itself:
|
||||
|
||||
| Property | Type | Default | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| `--wa-ripple-center-x` | `<percentage>` | `50%` | The x-coordinate of the ripple center point as a percentage of the button width. |
|
||||
| `--wa-ripple-center-y` | `<percentage>` | `50%` | The y-coordinate of the ripple center point as a percentage of the button height. |
|
||||
|
||||
### Ripple Center Point
|
||||
|
||||
By default the ripple effect starts from the center of the button.
|
||||
If you want it to start from the position the button was clicked, you can use this JS snippet:
|
||||
|
||||
```js
|
||||
document.addEventListener("mousedown", evt => {
|
||||
let target = evt.target;
|
||||
|
||||
if (!target.matches?.('wa-button, button, .wa-button')) {
|
||||
return;
|
||||
}
|
||||
|
||||
let rect = target.getBoundingClientRect();
|
||||
let x = (evt.clientX - rect.left) / rect.width;
|
||||
let y = (evt.clientY - rect.top) / rect.height;
|
||||
|
||||
target.style.setProperty("--mouse-local-x", x);
|
||||
target.style.setProperty("--mouse-local-y", y);
|
||||
});
|
||||
```
|
||||
1
docs/docs/themes/mellow.md
vendored
1
docs/docs/themes/mellow.md
vendored
@@ -3,5 +3,4 @@ title: Mellow
|
||||
description: Soft and soothing, like a lazy Sunday morning.
|
||||
isPro: true
|
||||
tags: pro
|
||||
palette: natural
|
||||
---
|
||||
|
||||
4
docs/docs/themes/playful.md
vendored
4
docs/docs/themes/playful.md
vendored
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Playful
|
||||
description: Cheerful and engaging, like a playground on screen.
|
||||
description: Fun, colorful, and full of personality.
|
||||
isPro: true
|
||||
tags: pro
|
||||
palette: rudimentary
|
||||
noAlpha: true
|
||||
---
|
||||
|
||||
2
docs/docs/themes/premium.md
vendored
2
docs/docs/themes/premium.md
vendored
@@ -3,5 +3,5 @@ title: Premium
|
||||
description: The ultimate in sophistication and style.
|
||||
isPro: true
|
||||
tags: pro
|
||||
palette: anodized
|
||||
noAlpha: true
|
||||
---
|
||||
|
||||
10
docs/docs/themes/showcase.css
vendored
10
docs/docs/themes/showcase.css
vendored
@@ -9,17 +9,7 @@ body,
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#mix_and_match {
|
||||
font-weight: var(--wa-font-weight-semibold);
|
||||
color: var(--wa-color-text-quiet);
|
||||
|
||||
wa-icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-showcase {
|
||||
isolation: isolate;
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
padding: var(--wa-space-xl);
|
||||
|
||||
1
docs/docs/themes/tailspin.md
vendored
1
docs/docs/themes/tailspin.md
vendored
@@ -3,5 +3,4 @@ title: Tailspin
|
||||
description: Like a bird in flight, guiding you from there to here.
|
||||
isPro: true
|
||||
tags: pro
|
||||
palette: vogue
|
||||
---
|
||||
|
||||
1
docs/docs/themes/themes.json
vendored
1
docs/docs/themes/themes.json
vendored
@@ -1,5 +1,4 @@
|
||||
{
|
||||
"layout": "theme.njk",
|
||||
"wide": true,
|
||||
"tags": ["themes", "theme"]
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@ Border widths use `rem` units in order to scale proportionately with the root fo
|
||||
| `--wa-border-width-m` | `0.125rem` <small>(2px)</small> | <div class="swatch" style="border-width: var(--wa-border-width-m)"></div> |
|
||||
| `--wa-border-width-l` | `0.1875rem` <small>(3px)</small> | <div class="swatch" style="border-width: var(--wa-border-width-l)"></div> |
|
||||
|
||||
To scale all borders at once, you can use the `--wa-border-width-scale` property which specifies a multiplier on `border-width`.
|
||||
To scale all borders at once, you can use the `--wa-border-width-scale` property which specifies a multiplier on `border-width`.
|
||||
Values < 1 make all borders uniformly thinner, while values > 1 make them thicker.
|
||||
|
||||
## Radius
|
||||
@@ -44,5 +44,5 @@ Size-based border radius properties allow you to customize the overall roundness
|
||||
| `--wa-border-radius-m` | `0.375rem` <small>(6px)</small> | <div class="swatch" style="border-radius: var(--wa-border-radius-m)"></div> |
|
||||
| `--wa-border-radius-l` | `0.75rem` <small>(12px)</small> | <div class="swatch" style="border-radius: var(--wa-border-radius-l)"></div> |
|
||||
|
||||
To scale all border radii at once, you can use the `--wa-border-radius-scale` property which specifies a multiplier on `border-radius`.
|
||||
Values < 1 make corners sharper, while values > 1 make them rounder.
|
||||
To scale all border radii at once, you can use the `--wa-border-radius-scale` property which specifies a multiplier on `border-radius`.
|
||||
Values < 1 make corners sharper, while values > 1 make them rounder.
|
||||
599
docs/docs/theming/color.md
Normal file
599
docs/docs/theming/color.md
Normal file
@@ -0,0 +1,599 @@
|
||||
---
|
||||
title: Color
|
||||
description: Ensure consistent use of color and readable contrast with Web Awesome's color properties.
|
||||
---
|
||||
|
||||
<style>
|
||||
td { vertical-align: middle; }
|
||||
|
||||
.color-name {
|
||||
font-weight: var(--wa-font-weight-semibold);
|
||||
margin-block-end: var(--wa-space-2xs);
|
||||
}
|
||||
ul.color-group {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.color-group {
|
||||
align-items: start;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 0.25em;
|
||||
}
|
||||
.color-group + * {
|
||||
margin-block-start: var(--wa-space-xl);
|
||||
}
|
||||
.color-preview {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.swatch {
|
||||
border-color: transparent;
|
||||
}
|
||||
.color-mix-example {
|
||||
background-image:
|
||||
linear-gradient(to right,
|
||||
color-mix(in oklab, transparent, var(--mix-color)) 25%,
|
||||
color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--mix-color)) 25%,
|
||||
color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--mix-color)) 75%,
|
||||
var(--wa-color-brand-fill-loud) 75%,
|
||||
var(--wa-color-brand-fill-loud))
|
||||
;
|
||||
border: none;
|
||||
color: var(--wa-color-brand-on-loud);
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Web Awesome's color system is made up of CSS custom properties to help with consistent color use throughout your project.
|
||||
|
||||
Color is organized by three main categories:
|
||||
|
||||
- [Literal colors](/#literal-colors) that give familiar names to your starting color palette
|
||||
- [Foundational colors](/#foundational-colors) that lay the groundwork for your theme
|
||||
- [Semantic colors](/#semantic-colors) that draw attention and convey meaning
|
||||
|
||||
|
||||
## Literal Colors
|
||||
|
||||
Literal colors are the lowest level color properties in your theme. Each color is identified by a name, like red or gray, and a number that roughly corresponds to the color's perceived lightness. On this scale, 100 is equal to pure white and 0 is equal to pure black.
|
||||
|
||||
Lightness values on this scale have a strong correlation to [relative luminance](https://www.w3.org/WAI/GL/wiki/Relative_luminance), which is used to calculate color contrast. To meet [WCAG 2.1 success criteria for minimum or enhanced contrast](https://www.w3.org/TR/WCAG21/#contrast-minimum), even across hues, calculate the difference between the lightness values of any two colors:
|
||||
|
||||
- A difference of 40 ensures a minimum 3:1 contrast ratio, suitable for large text and icons (AA)
|
||||
- A difference of 50 ensures a minimum 4.5:1 contrast ratio, suitable for normal text (AA) and large text (AAA)
|
||||
- A difference of 60 ensures a minimum 7:1 contrast ratio, suitable for all text (AAA)
|
||||
|
||||
Web Awesome defines seven literal colors each with 11 lightness values using the format `--wa-color-{hue}-{tint}`.
|
||||
|
||||
<div class="color-name">Red</div>
|
||||
<ul class="color-group">
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-red-95)"></div>
|
||||
<small>95</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-red-90)"></div>
|
||||
<small>90</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-red-80)"></div>
|
||||
<small>80</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-red-70)"></div>
|
||||
<small>70</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-red-60)"></div>
|
||||
<small>60</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-red-50)"></div>
|
||||
<small>50</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-red-40)"></div>
|
||||
<small>40</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-red-30)"></div>
|
||||
<small>30</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-red-20)"></div>
|
||||
<small>20</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-red-10)"></div>
|
||||
<small>10</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-red-05)"></div>
|
||||
<small>05</small>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="color-name">Yellow</div>
|
||||
<ul class="color-group">
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-yellow-95)"></div>
|
||||
<small>95</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-yellow-90)"></div>
|
||||
<small>90</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-yellow-80)"></div>
|
||||
<small>80</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-yellow-70)"></div>
|
||||
<small>70</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-yellow-60)"></div>
|
||||
<small>60</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-yellow-50)"></div>
|
||||
<small>50</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-yellow-40)"></div>
|
||||
<small>40</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-yellow-30)"></div>
|
||||
<small>30</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-yellow-20)"></div>
|
||||
<small>20</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-yellow-10)"></div>
|
||||
<small>10</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-yellow-05)"></div>
|
||||
<small>05</small>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="color-name">Green</div>
|
||||
<ul class="color-group">
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-green-95)"></div>
|
||||
<small>95</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-green-90)"></div>
|
||||
<small>90</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-green-80)"></div>
|
||||
<small>80</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-green-70)"></div>
|
||||
<small>70</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-green-60)"></div>
|
||||
<small>60</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-green-50)"></div>
|
||||
<small>50</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-green-40)"></div>
|
||||
<small>40</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-green-30)"></div>
|
||||
<small>30</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-green-20)"></div>
|
||||
<small>20</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-green-10)"></div>
|
||||
<small>10</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-green-05)"></div>
|
||||
<small>05</small>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="color-name">Teal</div>
|
||||
<ul class="color-group">
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-teal-95)"></div>
|
||||
<small>95</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-teal-90)"></div>
|
||||
<small>90</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-teal-80)"></div>
|
||||
<small>80</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-teal-70)"></div>
|
||||
<small>70</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-teal-60)"></div>
|
||||
<small>60</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-teal-50)"></div>
|
||||
<small>50</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-teal-40)"></div>
|
||||
<small>40</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-teal-30)"></div>
|
||||
<small>30</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-teal-20)"></div>
|
||||
<small>20</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-teal-10)"></div>
|
||||
<small>10</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-teal-05)"></div>
|
||||
<small>05</small>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="color-name">Blue</div>
|
||||
<ul class="color-group">
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-blue-95)"></div>
|
||||
<small>95</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-blue-90)"></div>
|
||||
<small>90</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-blue-80)"></div>
|
||||
<small>80</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-blue-70)"></div>
|
||||
<small>70</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-blue-60)"></div>
|
||||
<small>60</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-blue-50)"></div>
|
||||
<small>50</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-blue-40)"></div>
|
||||
<small>40</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-blue-30)"></div>
|
||||
<small>30</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-blue-20)"></div>
|
||||
<small>20</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-blue-10)"></div>
|
||||
<small>10</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-blue-05)"></div>
|
||||
<small>05</small>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="color-name">Indigo</div>
|
||||
<ul class="color-group">
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-indigo-95)"></div>
|
||||
<small>95</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-indigo-90)"></div>
|
||||
<small>90</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-indigo-80)"></div>
|
||||
<small>80</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-indigo-70)"></div>
|
||||
<small>70</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-indigo-60)"></div>
|
||||
<small>60</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-indigo-50)"></div>
|
||||
<small>50</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-indigo-40)"></div>
|
||||
<small>40</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-indigo-30)"></div>
|
||||
<small>30</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-indigo-20)"></div>
|
||||
<small>20</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-indigo-10)"></div>
|
||||
<small>10</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-indigo-05)"></div>
|
||||
<small>05</small>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="color-name">Violet</div>
|
||||
<ul class="color-group">
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-violet-95)"></div>
|
||||
<small>95</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-violet-90)"></div>
|
||||
<small>90</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-violet-80)"></div>
|
||||
<small>80</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-violet-70)"></div>
|
||||
<small>70</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-violet-60)"></div>
|
||||
<small>60</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-violet-50)"></div>
|
||||
<small>50</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-violet-40)"></div>
|
||||
<small>40</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-violet-30)"></div>
|
||||
<small>30</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-violet-20)"></div>
|
||||
<small>20</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-violet-10)"></div>
|
||||
<small>10</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-violet-05)"></div>
|
||||
<small>05</small>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="color-name">Gray</div>
|
||||
<ul class="color-group">
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-gray-95)"></div>
|
||||
<small>95</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-gray-90)"></div>
|
||||
<small>90</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-gray-80)"></div>
|
||||
<small>80</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-gray-70)"></div>
|
||||
<small>70</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-gray-60)"></div>
|
||||
<small>60</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-gray-50)"></div>
|
||||
<small>50</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-gray-40)"></div>
|
||||
<small>40</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-gray-30)"></div>
|
||||
<small>30</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-gray-20)"></div>
|
||||
<small>20</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-gray-10)"></div>
|
||||
<small>10</small>
|
||||
</li>
|
||||
<li class="color-preview">
|
||||
<div class="swatch" style="background-color: var(--wa-color-gray-05)"></div>
|
||||
<small>05</small>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
## Foundational Colors
|
||||
|
||||
Foundational colors lay the groundwork for the content and structure of your project. These colors are named according to their role in your theme.
|
||||
|
||||
### Surfaces
|
||||
|
||||
Surfaces are background layers that other content rests on. Surface colors help convey hierarchy through a sense of elevation, where `--wa-color-surface-raised` is the closest to the user (e.g., dialogs and popup menus) and `--wa-color-surface-lowered` is the farthest away (e.g., wells).
|
||||
|
||||
| Custom Property | Preview |
|
||||
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `--wa-color-surface-raised` | <div class="swatch" style="background-color: var(--wa-color-surface-raised); box-shadow:var(--wa-shadow-s)"></div> |
|
||||
| `--wa-color-surface-default` | <div class="swatch" style="background-color: var(--wa-color-surface-default)"></div> |
|
||||
| `--wa-color-surface-lowered` | <div class="swatch" style="background-color: var(--wa-color-surface-lowered); box-shadow: inset var(--wa-shadow-s)"></div> |
|
||||
| `--wa-color-surface-border` | <div class="swatch" style="border-color: var(--wa-color-surface-border)"></div> |
|
||||
|
||||
### Text
|
||||
|
||||
Text colors are used for standard text elements. We recommend a minimum 4.5:1 contrast ratio between text colors and surface colors.
|
||||
|
||||
| Custom Property | Preview |
|
||||
| ------------------------ | ---------------------------------------------------------- |
|
||||
| `--wa-color-text-normal` | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-normal); display: inline-block;">AaBb</div> |
|
||||
| `--wa-color-text-quiet` | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-quiet); display: inline-block;">AaBb</div> |
|
||||
| `--wa-color-text-link` | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-link); display: inline-block;">AaBb</div> |
|
||||
|
||||
### Overlays
|
||||
|
||||
Overlays provide a backdrop to isolate content, often allowing background context to show through.
|
||||
|
||||
| Custom Property | Preview |
|
||||
| --------------------------- | ----------------------------------------------------------------------------------- |
|
||||
| `--wa-color-overlay-modal` | <div class="swatch" style="background-color: var(--wa-color-overlay-modal)"></div> |
|
||||
| `--wa-color-overlay-inline` | <div class="swatch" style="background-color: var(--wa-color-overlay-inline)"></div> |
|
||||
|
||||
### Shadow
|
||||
|
||||
Web Awesome uses a single color for all shadows. This is used alongside other [shadow properties](/docs/theming/shadows) to construct your theme's shadows.
|
||||
|
||||
| Custom Property | Preview |
|
||||
| ------------------- | --------------------------------------------------------------------------- |
|
||||
| `--wa-color-shadow` | <div class="swatch" style="background-color: var(--wa-color-shadow)"></div> |
|
||||
|
||||
### Interactions
|
||||
|
||||
#### Focus
|
||||
|
||||
Web Awesome uses a single focus color for predictable keyboard navigation. This is used alongside other [focus properties](/docs/theming/focus) to construct `--wa-focus-ring`. We recommend a minimum 3:1 contrast ratio against surface colors and background colors wherever possible.
|
||||
|
||||
| Custom Property | Preview |
|
||||
| ------------------ | ----------------------------------------------------------------------------------------------------------------------- |
|
||||
| `--wa-color-focus` | <div class="swatch" value="--wa-color-focus" style="outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus)"></div> |
|
||||
|
||||
#### Hover and Active
|
||||
|
||||
Web Awesome leverages `color-mix()` to achieve consistent hover and active states across components without the need for untold numbers of handpicked colors. Through `color-mix()`, these custom properties contextually generate hover and active colors based on the color of the component.
|
||||
|
||||
| Custom Property | Preview |
|
||||
| ----------------------- | ---------------------------------------------------------------------------------------------------------------- |
|
||||
| `--wa-color-mix-hover` | <div class="swatch color-mix-example" value="--wa-color-mix-hover" style="--mix-color: var(--wa-color-mix-hover)"><small>mixed</small></div> |
|
||||
| `--wa-color-mix-active` | <div class="swatch color-mix-example" value="--wa-color-mix-active" style="--mix-color: var(--wa-color-mix-active)"><small>mixed</small></div> |
|
||||
|
||||
|
||||
## Semantic Colors
|
||||
|
||||
Semantic colors reinforce a specific message, intended usage, or expected results through familiar, meaningful hues. Each color is identified by its semantic group, role, and attention using the format `--wa-color-{group}-{role}-{attention}`. There are five groups of semantic colors:
|
||||
- **Brand** to emphasize your brand color
|
||||
- **Success** for validity or confirmation
|
||||
- **Neutral** for ordinary or inactive content
|
||||
- **Warning** for caution or uncertainty
|
||||
- **Danger** for errors or risk
|
||||
|
||||
Each group defines colors for specific roles so that colors can be easily assembled with predictable results and readable contrast. There are three roles:
|
||||
- **Fill** for background colors or areas larger than a few pixels
|
||||
- **Border** for borders, dividers, and other stroke-width elements
|
||||
- **On** for content displayed on a fill (e.g., pair `--wa-color-danger-on-loud` with `--wa-color-danger-fill-loud`)
|
||||
|
||||
Finally, each color is named according to how much attention it draws. Here, we use noise as an analogy: a loud noise draws more attention than a quiet one. There are three levels of attention:
|
||||
- **Quiet** draws the least attention
|
||||
- **Normal** draws some attention
|
||||
- **Loud** draws the most attention
|
||||
|
||||
| Custom Property | <code>brand</code> | <code>success</code> | <code>neutral</code> | <code>warning</code> | <code>danger</code> |
|
||||
| ---------------------------- | ------------------- | --------------------- | --------------------- | --------------------- | ------------------- |
|
||||
| `--wa-color-*-fill-quiet` | <div class="swatch" style="background-color: var(--wa-color-brand-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-quiet)"></div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-quiet)"></div> |
|
||||
| `--wa-color-*-fill-normal` | <div class="swatch" style="background-color: var(--wa-color-brand-fill-normal)"></div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-normal)"></div> |<div class="swatch" style="background-color: var(--wa-color-neutral-fill-normal)"></div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-normal)"></div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-normal)"></div> |
|
||||
| `--wa-color-*-fill-loud` | <div class="swatch" style="background-color: var(--wa-color-brand-fill-loud)"></div> | <div class="swatch" style="background-color: var(--wa-color-success-fill-loud)"></div> | <div class="swatch" style="background-color: var(--wa-color-neutral-fill-loud)"></div> | <div class="swatch" style="background-color: var(--wa-color-warning-fill-loud)"></div> | <div class="swatch" style="background-color: var(--wa-color-danger-fill-loud)"></div> |
|
||||
| `--wa-color-*-border-quiet` | <div class="swatch" value="--wa-color-brand-border-quiet" style="border-color: var(--wa-color-brand-border-quiet)"></div> | <div class="swatch" value="--wa-color-success-border-quiet" style="border-color: var(--wa-color-success-border-quiet)"></div> | <div class="swatch" value="--wa-color-success-border-quiet" style="border-color: var(--wa-color-neutral-border-quiet)"></div> | <div class="swatch" value="--wa-color-warning-border-quiet" style="border-color: var(--wa-color-warning-border-quiet)"></div> | <div class="swatch" value="--wa-color-danger-border-quiet" style="border-color: var(--wa-color-danger-border-quiet)"></div> |
|
||||
| `--wa-color-*-border-normal` | <div class="swatch" value="--wa-color-brand-border-normal" style="border-color: var(--wa-color-brand-border-normal)"></div> | <div class="swatch" value="--wa-color-success-border-normal" style="border-color: var(--wa-color-success-border-normal)"></div> | <div class="swatch" value="--wa-color-success-border-normal" style="border-color: var(--wa-color-neutral-border-normal)"></div> | <div class="swatch" value="--wa-color-warning-border-normal" style="border-color: var(--wa-color-warning-border-normal)"></div> | <div class="swatch" value="--wa-color-danger-border-normal" style="border-color: var(--wa-color-danger-border-normal)"></div> |
|
||||
| `--wa-color-*-border-loud` | <div class="swatch" value="--wa-color-brand-border-loud" style="border-color: var(--wa-color-brand-border-loud)"></div> | <div class="swatch" value="--wa-color-success-border-loud" style="border-color: var(--wa-color-success-border-loud)"></div> | <div class="swatch" value="--wa-color-success-border-loud" style="border-color: var(--wa-color-neutral-border-loud)"></div> | <div class="swatch" value="--wa-color-warning-border-loud" style="border-color: var(--wa-color-warning-border-loud)"></div> | <div class="swatch" value="--wa-color-danger-border-loud" style="border-color: var(--wa-color-danger-border-loud)"></div> |
|
||||
| `--wa-color-*-on-quiet` | <div class="swatch" value="--wa-color-brand-on-quiet" style="background-color: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet)">AaBb</div> | <div class="swatch" value="--wa-color-success-on-quiet" style="background-color: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet)">AaBb</div> | <div class="swatch" value="--wa-color-neutral-on-quiet" style="background-color: var(--wa-color-neutral-fill-quiet); color: var(--wa-color-neutral-on-quiet)">AaBb</div> | <div class="swatch" value="--wa-color-warning-on-quiet" style="background-color: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet)">AaBb</div> | <div class="swatch" value="--wa-color-danger-on-quiet" style="background-color: var(--wa-color-danger-fill-quiet); color: var(--wa-color-danger-on-quiet)">AaBb</div> |
|
||||
| `--wa-color-*-on-normal` | <div class="swatch" value="--wa-color-brand-on-normal" style="background-color: var(--wa-color-brand-fill-normal); color: var(--wa-color-brand-on-normal)">AaBb</div> | <div class="swatch" value="--wa-color-success-on-normal" style="background-color: var(--wa-color-success-fill-normal); color: var(--wa-color-success-on-normal)">AaBb</div> | <div class="swatch" value="--wa-color-neutral-on-normal" style="background-color: var(--wa-color-neutral-fill-normal); color: var(--wa-color-neutral-on-normal)">AaBb</div> | <div class="swatch" value="--wa-color-warning-on-normal" style="background-color: var(--wa-color-warning-fill-normal); color: var(--wa-color-warning-on-normal)">AaBb</div> | <div class="swatch" value="--wa-color-warning-on-normal" style="background-color: var(--wa-color-danger-fill-normal); color: var(--wa-color-danger-on-normal)">AaBb</div> |
|
||||
| `--wa-color-*-on-loud` | <div class="swatch" value="--wa-color-brand-on-loud" style="background-color: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud)">AaBb</div> | <div class="swatch" value="--wa-color-success-on-loud" style="background-color: var(--wa-color-success-fill-loud); color: var(--wa-color-success-on-loud)">AaBb</div> | <div class="swatch" value="--wa-color-neutral-on-loud" style="background-color: var(--wa-color-neutral-fill-loud); color: var(--wa-color-neutral-on-loud)">AaBb</div> | <div class="swatch" value="--wa-color-warning-on-loud" style="background-color: var(--wa-color-warning-fill-loud); color: var(--wa-color-warning-on-loud)">AaBb</div> | <div class="swatch" value="--wa-color-danger-on-loud" style="background-color: var(--wa-color-danger-fill-loud); color: var(--wa-color-danger-on-loud)">AaBb</div> |
|
||||
|
||||
<style>
|
||||
.swatch {
|
||||
position: relative;
|
||||
}
|
||||
.swatch wa-copy-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.swatch wa-copy-button::part(button) {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.swatch wa-copy-button {
|
||||
--background-color-hover: transparent;
|
||||
font-family: var(--wa-font-family-code);
|
||||
}
|
||||
|
||||
.swatch wa-copy-button::part(button):hover {
|
||||
cursor: copy;
|
||||
}
|
||||
|
||||
.swatch wa-copy-button::part(copy-icon),
|
||||
.swatch wa-copy-button::part(success-icon),
|
||||
.swatch wa-copy-button::part(error-icon) {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="module">
|
||||
const computedStyle = getComputedStyle(document.body)
|
||||
document.querySelectorAll(".swatch").forEach((swatch) => {
|
||||
let varName = swatch.getAttribute("value")
|
||||
|
||||
if (!varName) {
|
||||
const bgColor = swatch.style.backgroundColor
|
||||
varName = bgColor.replace(/^var\((--.*)\)$/, "$1")
|
||||
}
|
||||
|
||||
const copyButton = Object.assign(document.createElement("wa-copy-button"), {
|
||||
value: varName,
|
||||
copyLabel: varName,
|
||||
errorLabel: "Whoops, your browser doesn't support this!",
|
||||
})
|
||||
|
||||
swatch.appendChild(copyButton)
|
||||
})
|
||||
</script>
|
||||
@@ -3,7 +3,7 @@ title: Focus
|
||||
description: Configure recognizable focus states with Web Awesome's focus properties.
|
||||
---
|
||||
|
||||
A consistent focus ring helps with predictable keyboard navigation. Together with [`--wa-color-focus`](/docs/tokens/color/#interactions), these tokens create a uniform focus state for Web Awesome components.
|
||||
A consistent focus ring helps with predictable keyboard navigation. Together with [`--wa-color-focus`](/docs/theming/color/#interactions), these custom properties create a uniform focus state for Web Awesome components.
|
||||
|
||||
|
||||
| Custom Property | Default Value |
|
||||
6
docs/docs/theming/index.njk
Normal file
6
docs/docs/theming/index.njk
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Theming
|
||||
description: A theme is a collection of pre-defined CSS custom properties that control global styles from color to shadows. These custom properties thread through all Web Awesome components for a consistent look and feel.
|
||||
layout: overview
|
||||
override:tags: []
|
||||
---
|
||||
@@ -3,7 +3,7 @@ title: Shadows
|
||||
description: Elevate your components with Web Awesome's shadow properties.
|
||||
---
|
||||
|
||||
Shadows indicate elevation and, often, interactivity. Web Awesome offers highly modular shadow properties to easily create custom shadow effects or transform elements based on specific shadow qualities. Together with [`--wa-color-shadow`](/docs/tokens/color/#shadow), these tokens create realistic shadows for Web Awesome components.
|
||||
Shadows indicate elevation and, often, interactivity. Web Awesome offers highly modular shadow properties to easily create custom shadow effects or transform elements based on specific shadow qualities. Together with [`--wa-color-shadow`](/docs/theming/color/#shadow), these custom properties create realistic shadows for Web Awesome components.
|
||||
|
||||
Shadows are constructed using corresponding offset-x, offset-y, blur, and spread properties, detailed in the sections below. In Web Awesome, shadows use a size-based scale where larger shadows have greater offset and blur values to indicate greater distance from the surface below.
|
||||
|
||||
7
docs/docs/theming/theming.json
Normal file
7
docs/docs/theming/theming.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"layout": "page-outline.njk",
|
||||
"tags": ["theming"],
|
||||
"eleventyComputed": {
|
||||
"icon": "theming/{{ page.fileSlug }}"
|
||||
}
|
||||
}
|
||||
@@ -69,7 +69,7 @@ Line heights control the distance between lines of text and are unitless to scal
|
||||
|
||||
## Links
|
||||
|
||||
Together with [`--wa-color-link`](/docs/tokens/color/#text), these tokens add text decoration to `<a>` elements to signal their role as hyperlinks.
|
||||
Together with [`--wa-color-link`](/docs/theming/color/#text), these custom properties add text decoration to `<a>` elements to signal their role as hyperlinks.
|
||||
|
||||
| Custom Property | Default Value |
|
||||
| ------------------------------ | ---------------------------------------------------------------------------------- |
|
||||
@@ -1,191 +0,0 @@
|
||||
---
|
||||
title: Color
|
||||
description: Ensure consistent use of color and readable contrast with Web Awesome's color properties.
|
||||
---
|
||||
|
||||
<style>
|
||||
td { vertical-align: middle; }
|
||||
|
||||
.color-name {
|
||||
font-weight: var(--wa-font-weight-semibold);
|
||||
margin-block-end: var(--wa-space-2xs);
|
||||
}
|
||||
ul.color-group {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.color-group {
|
||||
align-items: start;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 0.25em;
|
||||
}
|
||||
.color-group + * {
|
||||
margin-block-start: var(--wa-space-xl);
|
||||
}
|
||||
.color-preview {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.swatch {
|
||||
border-color: transparent;
|
||||
}
|
||||
.color-mix-example {
|
||||
background-image:
|
||||
linear-gradient(to right,
|
||||
color-mix(in oklab, transparent, var(--mix-color)) 25%,
|
||||
color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--mix-color)) 25%,
|
||||
color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--mix-color)) 75%,
|
||||
var(--wa-color-brand-fill-loud) 75%,
|
||||
var(--wa-color-brand-fill-loud))
|
||||
;
|
||||
border: none;
|
||||
color: var(--wa-color-brand-on-loud);
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
Web Awesome's color system is made up of CSS custom properties to help with consistent color use throughout your project.
|
||||
|
||||
Color is organized by three main categories:
|
||||
|
||||
- [Literal colors](/#literal-colors) that give familiar names to your starting [color palette](/docs/palettes/)
|
||||
- [Foundational colors](/#foundational-colors) that lay the groundwork for your theme
|
||||
- [Semantic colors](/#semantic-colors) that draw attention and convey meaning
|
||||
|
||||
|
||||
## Literal Colors
|
||||
|
||||
Literal colors are defined by your theme's [color palette](/docs/palettes/) and are the lowest level color tokens in your theme. Each token is identified by a name, like red or gray, and a number based on the color's lightness. On this scale, 100 is equal to pure white and 0 is equal to pure black.
|
||||
|
||||
You can use these numbers to ensure accessible color contrast per [WCAG 2.1 success criteria](https://www.w3.org/TR/WCAG21/#contrast-minimum):
|
||||
|
||||
- A difference of 40 ensures a minimum 3:1 contrast ratio, suitable for large text and icons (AA)
|
||||
- A difference of 50 ensures a minimum 4.5:1 contrast ratio, suitable for normal text (AA) and large text (AAA)
|
||||
- A difference of 60 ensures a minimum 7:1 contrast ratio, suitable for all text (AAA)
|
||||
|
||||
Each Web Awesome palette defines seven literal colors each with 11 lightness values using the format `--wa-color-{hue}-{tint}`.
|
||||
|
||||
{% for hue in ["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"] -%}
|
||||
<div class="color-name">{{ hue | capitalize }}</div>
|
||||
<ul class="color-group">
|
||||
{% for tint in ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] -%}
|
||||
<li class="color-preview">
|
||||
<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>
|
||||
<small>{{ tint }}</small>
|
||||
</li>
|
||||
{%- endfor %}
|
||||
</ul>
|
||||
{%- endfor %}
|
||||
|
||||
## Foundational Colors
|
||||
|
||||
Foundational colors lay the groundwork for the content and structure of your project. These colors are named according to their role in your theme.
|
||||
|
||||
### Surfaces
|
||||
|
||||
Surfaces are background layers that other content rests on. Surface colors help convey hierarchy through a sense of elevation, where `--wa-color-surface-raised` is the closest to the user (e.g., dialogs and popup menus) and `--wa-color-surface-lowered` is the farthest away (e.g., wells).
|
||||
|
||||
| Custom Property | Preview |
|
||||
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `--wa-color-surface-raised` | <div class="swatch" style="background-color: var(--wa-color-surface-raised); box-shadow:var(--wa-shadow-s)"></div> |
|
||||
| `--wa-color-surface-default` | <div class="swatch" style="background-color: var(--wa-color-surface-default)"></div> |
|
||||
| `--wa-color-surface-lowered` | <div class="swatch" style="background-color: var(--wa-color-surface-lowered); box-shadow: inset var(--wa-shadow-s)"></div> |
|
||||
| `--wa-color-surface-border` | <div class="swatch" style="border-color: var(--wa-color-surface-border)"></div> |
|
||||
|
||||
### Text
|
||||
|
||||
Text colors are used for standard text elements. We recommend a minimum 4.5:1 contrast ratio between text colors and surface colors.
|
||||
|
||||
| Custom Property | Preview |
|
||||
| ------------------------ | ---------------------------------------------------------- |
|
||||
| `--wa-color-text-normal` | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-normal); display: inline-block;">AaBb</div> |
|
||||
| `--wa-color-text-quiet` | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-quiet); display: inline-block;">AaBb</div> |
|
||||
| `--wa-color-text-link` | <div class="swatch" value="--wa-color-text-normal" style="color: var(--wa-color-text-link); display: inline-block;">AaBb</div> |
|
||||
|
||||
### Overlays
|
||||
|
||||
Overlays provide a backdrop to isolate content, often allowing background context to show through.
|
||||
|
||||
| Custom Property | Preview |
|
||||
| --------------------------- | ----------------------------------------------------------------------------------- |
|
||||
| `--wa-color-overlay-modal` | <div class="swatch" style="background-color: var(--wa-color-overlay-modal)"></div> |
|
||||
| `--wa-color-overlay-inline` | <div class="swatch" style="background-color: var(--wa-color-overlay-inline)"></div> |
|
||||
|
||||
### Shadow
|
||||
|
||||
Web Awesome uses a single color for all shadows.
|
||||
This is used alongside other [shadow tokens](/docs/tokens/shadows) to construct your theme's shadows.
|
||||
|
||||
| Custom Property | Preview |
|
||||
| ------------------- | --------------------------------------------------------------------------- |
|
||||
| `--wa-color-shadow` | <div class="swatch" style="background-color: var(--wa-color-shadow)"></div> |
|
||||
|
||||
### Interactions
|
||||
|
||||
#### Focus
|
||||
|
||||
Web Awesome uses a single focus color for predictable keyboard navigation. This is used alongside other [focus tokens](/docs/tokens/focus) to construct `--wa-focus-ring`. We recommend a minimum 3:1 contrast ratio against surface colors and background colors wherever possible.
|
||||
|
||||
| Custom Property | Preview |
|
||||
| ------------------ | ----------------------------------------------------------------------------------------------------------------------- |
|
||||
| `--wa-color-focus` | <div class="swatch" value="--wa-color-focus" style="outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus)"></div> |
|
||||
|
||||
#### Hover and Active
|
||||
|
||||
Web Awesome leverages `color-mix()` to achieve consistent hover and active states across components without the need for untold numbers of handpicked colors. Through `color-mix()`, these custom properties contextually generate hover and active colors based on the color of the component.
|
||||
|
||||
| Custom Property | Preview |
|
||||
| ----------------------- | ---------------------------------------------------------------------------------------------------------------- |
|
||||
| `--wa-color-mix-hover` | <div class="swatch color-mix-example" value="--wa-color-mix-hover" style="--mix-color: var(--wa-color-mix-hover)"><small>mixed</small></div> |
|
||||
| `--wa-color-mix-active` | <div class="swatch color-mix-example" value="--wa-color-mix-active" style="--mix-color: var(--wa-color-mix-active)"><small>mixed</small></div> |
|
||||
|
||||
|
||||
## Semantic Colors
|
||||
|
||||
Semantic colors reinforce a specific message, intended usage, or expected results through familiar, meaningful hues. Each color is identified by its semantic group, role, and attention using the format `--wa-color-{group}-{role}-{attention}`. There are five groups of semantic colors:
|
||||
- **Brand** to emphasize your brand color
|
||||
- **Success** for validity or confirmation
|
||||
- **Neutral** for ordinary or inactive content
|
||||
- **Warning** for caution or uncertainty
|
||||
- **Danger** for errors or risk
|
||||
|
||||
Each group defines colors for specific roles so that colors can be easily assembled with predictable results and readable contrast. There are three roles:
|
||||
- **Fill** for background colors or areas larger than a few pixels
|
||||
- **Border** for borders, dividers, and other stroke-width elements
|
||||
- **On** for content displayed on a fill (e.g., pair `--wa-color-danger-on-loud` with `--wa-color-danger-fill-loud`)
|
||||
|
||||
Finally, each color is named according to how much attention it draws. Here, we use noise as an analogy: a loud noise draws more attention than a quiet one. There are three levels of attention:
|
||||
- **Quiet** draws the least attention
|
||||
- **Normal** draws some attention
|
||||
- **Loud** draws the most attention
|
||||
|
||||
{% set variants = ['brand', 'success', 'neutral', 'warning', 'danger'] %}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Custom Property</th>
|
||||
{% for variant in variants -%}
|
||||
<th><code>{{ variant }}</code></th>
|
||||
{%- endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
{% for type in ['fill', 'border', 'on'] -%}
|
||||
{% for attention in ['quiet', 'normal', 'loud'] -%}
|
||||
<tr>
|
||||
<td><code>--wa-color-*-{{ type }}-{{ attention }}</code></td>
|
||||
{% for variant in variants -%}
|
||||
<td>
|
||||
{%- if type == 'border' -%}
|
||||
<div class="swatch" style="border-color: var(--wa-color-{{ variant }}-{{ type }}-{{ attention }})"></div>
|
||||
{%- else -%}
|
||||
<div class="swatch" style="background-color: var(--wa-color-{{ variant }}-fill-{{ attention }}); color: var(--wa-color-{{ variant }}-on-{{ attention }})">{{ 'AaBb' if type == 'on' }}</div>
|
||||
{%- endif %}
|
||||
</td>
|
||||
{%- endfor %}
|
||||
</tr>
|
||||
{%- endfor %}
|
||||
{%- endfor %}
|
||||
</table>
|
||||
@@ -1,6 +0,0 @@
|
||||
---
|
||||
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: []
|
||||
---
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"layout": "page-outline.njk",
|
||||
"tags": ["tokens"],
|
||||
"eleventyComputed": {
|
||||
"icon": "tokens/{{ page.fileSlug }}"
|
||||
}
|
||||
}
|
||||
@@ -24,9 +24,22 @@ Some properties are boolean, so they only have true/false values. To activate a
|
||||
|
||||
## Events
|
||||
|
||||
You can listen for standard events such as `click`, `mouseover`, etc. as you normally would. In addition, some components have their own custom events. For example, you might listen to `wa-after-show` to determine when a dialog has been shown.
|
||||
You can listen for standard events such as `click`, `mouseover`, etc. as you normally would. However, it's important to note that many events emitted within a component's shadow root will be [retargeted](https://dom.spec.whatwg.org/#retarget) to the host element. This may result in, for example, multiple `click` handlers executing even if the user clicks just once. Furthermore, `event.target` will point to the host element, making things even more confusing.
|
||||
|
||||
Custom Web Awesome events are prefixed with `wa-` to prevent collisions with standard events and other libraries. Refer to a component's documentation for a complete list of its events.
|
||||
As a result, you should almost always listen for Web Awesome events instead. For example, instead of listening to `click` to determine when an `<wa-checkbox>` gets toggled, listen to `wa-change`.
|
||||
|
||||
```html
|
||||
<wa-checkbox>Check me</wa-checkbox>
|
||||
|
||||
<script>
|
||||
const checkbox = document.querySelector('wa-checkbox');
|
||||
checkbox.addEventListener('wa-change', event => {
|
||||
console.log(event.target.checked ? 'checked' : 'not checked');
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
All Web Awesome events are prefixed with `wa-` to prevent collisions with standard events and other libraries. Refer to a component's documentation for a complete list of its events.
|
||||
|
||||
## Methods
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Color Variants
|
||||
description: Color utilities allow you to apply the brand, neutral, success, warning, and danger colors from your theme to any element.
|
||||
icon: tokens/color
|
||||
icon: theming/color
|
||||
snippets:
|
||||
- .wa-brand
|
||||
- .wa-neutral
|
||||
@@ -27,7 +27,7 @@ You can create the same effect on any element by using the color variant utility
|
||||
- `.wa-danger`
|
||||
|
||||
Using these classes is a two-way handshake:
|
||||
they do not directly apply styles, but define generic color tokens modeled after our [Semantic Colors](/docs/tokens/color/#semantic-colors) but *without* the group identifier (`neutral`, `brand`, `success`, `warning`, `danger`), defaulting to `neutral`.
|
||||
they do not directly apply styles, but define generic color tokens modeled after our [Semantic Colors](/docs/theming/color/#semantic-colors) but *without* the group identifier (`neutral`, `brand`, `success`, `warning`, `danger`), defaulting to `neutral`.
|
||||
This means that styles can be written to respond to variants by using e.g. `--wa-color-fill-loud` instead of e.g. `--wa-color-brand-fill-loud`,
|
||||
and all of our [native styles](/docs/native/) do so (where it made sense).
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@ tags: ["utilities", "layout"]
|
||||
Web Awesome includes classes to set the `gap` property of flex and grid containers. They can be used alongside other Web Awesome layout utilities, like [cluster](/docs/layout/cluster) and [stack](/docs/layout/stack), to change the space between items.
|
||||
Or even by themselves — all gap properties also set `display: flex` with a specificity of 0 so that it can be trivially overridden.
|
||||
|
||||
Besides `wa-gap-0`, which sets `gap` to zero, each class corresponds to one of the [`--wa-space-*`](/docs/tokens/space) tokens in your theme.
|
||||
Besides `wa-gap-0`, which sets `gap` to zero, each class corresponds to one of the [`--wa-space-*`](/docs/theming/space) properties in your theme.
|
||||
|
||||
| Class Name | `gap` Value | Preview |
|
||||
| ------------ | ---------------- | ----------------------------------------------------------------------------------------------------------- |
|
||||
|
||||
@@ -14,7 +14,7 @@ status: wip
|
||||
|
||||
Web Awesome includes classes to set an element's `border-radius` property. They can be used alongside Web Awesome layout utilities, like [frame](/docs/layout/frame), to round all corners of an element.
|
||||
|
||||
Each class corresponds to one of the [`--wa-border-radius-*`](/docs/tokens/borders/#radius) tokens in your theme.
|
||||
Each class corresponds to one of the [`--wa-border-radius-*`](/docs/theming/borders/#radius) properties in your theme.
|
||||
|
||||
| Class Name | `border-radius` Value | Preview |
|
||||
| ------------------------- | --------------------------- | --------------------------------------------------------------------------------------- |
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Size
|
||||
description: Size utilities give elements one of three preset sizes (small, medium, or large).
|
||||
icon: tokens/space
|
||||
icon: theming/space
|
||||
status: experimental
|
||||
snippets:
|
||||
- .wa-size-s
|
||||
@@ -22,7 +22,7 @@ You can create the same effect on any element by using the size utility classes:
|
||||
- `.wa-size-l`
|
||||
|
||||
Using these classes does two things:
|
||||
- It sets `font-size` to one of the [size tokens](/docs/tokens/typography/#font-size).
|
||||
- It sets `font-size` to one of the [size tokens](/docs/theming/typography/#font-size).
|
||||
You can use CSS `em` units to reference that size in other properties.
|
||||
- It calculates `--wa-form-control-height` based on the applied size, supporting consistent heights for elements like inputs and buttons.
|
||||
- It aliases a bunch of other properties that CSS can use:
|
||||
|
||||
@@ -13,7 +13,7 @@ Use body classes to style the main content of your pages. Each `wa-body-*` class
|
||||
- `font-weight: var(--wa-font-weight-body);`
|
||||
- `line-height: var(--wa-line-height-normal);`
|
||||
|
||||
Additionally, each class specifies a `font-size` that corresponds to a [`--wa-font-size-*`](/docs/tokens/typography/#font-size) token from your theme.
|
||||
Additionally, each class specifies a `font-size` that corresponds to a [`--wa-font-size-*`](/docs/theming/typography/#font-size) property from your theme.
|
||||
|
||||
| Class Name | `font-size` Value | Preview |
|
||||
| ------------------ | -------------------- | ------------------------------------------------------------------------- |
|
||||
@@ -31,7 +31,7 @@ Use heading classes to style section titles and headings in your content. Each `
|
||||
- `line-height: var(--wa-line-height-condensed);`
|
||||
- `text-wrap: balance;`
|
||||
|
||||
Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/tokens/typography/#font-size) token from your theme. Heading classes are one font size larger than the corresponding `wa-body-*` class.
|
||||
Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/theming/typography/#font-size) property from your theme. Heading classes are one font size larger than the corresponding `wa-body-*` class.
|
||||
|
||||
| Class Name | `font-size` Value | Preview |
|
||||
| ---------------- | -------------------- | ----------------------------------------------------- |
|
||||
@@ -51,7 +51,7 @@ Use caption classes to style descriptions or auxiliary text in your content. Eac
|
||||
- `font-weight: var(--wa-font-weight-body);`
|
||||
- `line-height: var(--wa-line-height-condensed);`
|
||||
|
||||
Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/tokens/typography/#font-size) token from your theme. Caption classes are one font size smaller than the corresponding `wa-body-*` class.
|
||||
Additionally, each class specifies a `font-size` using a [`--wa-font-size-*`](/docs/theming/typography/#font-size) property from your theme. Caption classes are one font size smaller than the corresponding `wa-body-*` class.
|
||||
|
||||
| Class Name | `font-size` Value | Preview |
|
||||
| ---------------- | -------------------- | ------------------------------------------------------------------------------ |
|
||||
|
||||
16
package-lock.json
generated
16
package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "@shoelace-style/webawesome",
|
||||
"version": "3.0.0-alpha.9",
|
||||
"version": "3.0.0-alpha.8",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@shoelace-style/webawesome",
|
||||
"version": "3.0.0-alpha.9",
|
||||
"version": "3.0.0-alpha.8",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^4.1.0",
|
||||
@@ -34,7 +34,6 @@
|
||||
"chalk": "^5.3.0",
|
||||
"change-case": "^4.1.2",
|
||||
"chokidar": "^3.5.3",
|
||||
"colorjs.io": "^0.6.0-alpha.1",
|
||||
"command-line-args": "^5.2.1",
|
||||
"comment-parser": "^1.4.1",
|
||||
"cspell": "^6.18.1",
|
||||
@@ -5079,17 +5078,6 @@
|
||||
"integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/colorjs.io": {
|
||||
"version": "0.6.0-alpha.1",
|
||||
"resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.6.0-alpha.1.tgz",
|
||||
"integrity": "sha512-c/h/8uAmPydQcriRdX8UTAFHj6SpSHFHBA8LvMikvYWAVApPTwg/pyOXNsGmaCBd6L/EeDlRHSNhTtnIFp/qsg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/color"
|
||||
}
|
||||
},
|
||||
"node_modules/command-line-args": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/command-line-args/-/command-line-args-5.2.1.tgz",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@shoelace-style/webawesome",
|
||||
"description": "A forward-thinking library of web components.",
|
||||
"version": "3.0.0-alpha.9",
|
||||
"version": "3.0.0-alpha.8",
|
||||
"homepage": "https://webawesome.com/",
|
||||
"author": "Web Awesome",
|
||||
"license": "MIT",
|
||||
@@ -54,7 +54,6 @@
|
||||
"create": "plop --plopfile scripts/plop/plopfile.js",
|
||||
"test": "web-test-runner --group default",
|
||||
"test:component": "web-test-runner -- --watch --group",
|
||||
"test:contrast": "cd src/styles/color && node contrast.test.js",
|
||||
"test:watch": "web-test-runner --watch --group default",
|
||||
"prettier": "prettier --check --log-level=warn .",
|
||||
"prettier:fix": "prettier --write --log-level=warn .",
|
||||
@@ -92,7 +91,6 @@
|
||||
"chalk": "^5.3.0",
|
||||
"change-case": "^4.1.2",
|
||||
"chokidar": "^3.5.3",
|
||||
"colorjs.io": "^0.6.0-alpha.1",
|
||||
"command-line-args": "^5.2.1",
|
||||
"comment-parser": "^1.4.1",
|
||||
"cspell": "^6.18.1",
|
||||
|
||||
@@ -126,11 +126,7 @@ async function generateStyles() {
|
||||
file.includes('themes/default') ||
|
||||
file.includes('themes/awesome') ||
|
||||
file.includes('themes/active') ||
|
||||
file.includes('themes/glossy') ||
|
||||
file.includes('themes/matter') ||
|
||||
file.includes('themes/mellow') ||
|
||||
file.includes('themes/playful') ||
|
||||
file.includes('themes/premium') ||
|
||||
file.includes('themes/tailspin') ||
|
||||
file.includes('themes/brutalist')
|
||||
) {
|
||||
|
||||
@@ -24,16 +24,14 @@ for await (const component of components) {
|
||||
const componentDir = path.join(reactDir, tagWithoutPrefix);
|
||||
const componentFile = path.join(componentDir, 'index.ts');
|
||||
const importPath = component.path.replace(/\.js$/, '.js');
|
||||
// We only want to wrap wa- prefixed events, because the others are native
|
||||
const eventsToWrap = component.events?.filter(event => event.name.startsWith('wa-')) || [];
|
||||
const eventImports = eventsToWrap
|
||||
const eventImports = (component.events || [])
|
||||
.map(event => `import type { ${event.eventName} } from '../../events/events.js';`)
|
||||
.join('\n');
|
||||
const eventExports = eventsToWrap
|
||||
const eventExports = (component.events || [])
|
||||
.map(event => `export type { ${event.eventName} } from '../../events/events.js';`)
|
||||
.join('\n');
|
||||
const eventNameImport = eventsToWrap.length > 0 ? `import { type EventName } from '@lit/react';` : ``;
|
||||
const events = eventsToWrap
|
||||
const eventNameImport = (component.events || []).length > 0 ? `import { type EventName } from '@lit/react';` : ``;
|
||||
const events = (component.events || [])
|
||||
.map(event => `${event.reactName}: '${event.name}' as EventName<${event.eventName}>`)
|
||||
.join(',\n');
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user