mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-19 07:29:14 +00:00
Compare commits
27 Commits
wa-fa-elem
...
kj/app-pat
| Author | SHA1 | Date | |
|---|---|---|---|
|
e0038c3125 | ||
|
|
aa915c3e28 | ||
|
|
c79457a607 | ||
|
|
419f0610e4 | ||
|
|
7ab5ca8640 | ||
|
|
c39faff936 | ||
|
|
6d31db57f6 | ||
|
|
21ed4f82b0 | ||
|
|
844e374a72 | ||
|
|
e5f4c14608 | ||
|
|
1ad963f5ad | ||
|
|
4476117932 | ||
|
|
e52a7a5ce5 | ||
|
|
fa66f4262d | ||
|
|
a87f3627bb | ||
|
|
06e432589f | ||
|
|
b4c4074ae1 | ||
|
|
19042fcca4 | ||
|
|
8541369ae1 | ||
|
|
31cfdf5704 | ||
|
|
3511a60b93 | ||
|
|
e55e091192 | ||
|
|
09df23dff8 | ||
|
|
f4a88c3b3a | ||
|
|
559efcd1d2 | ||
|
|
e046015ed5 | ||
|
|
44dbdd14cc |
@@ -20,6 +20,12 @@ const packageData = JSON.parse(await readFile('./package.json', 'utf-8'));
|
||||
const isAlpha = process.argv.includes('--alpha');
|
||||
const isDev = process.argv.includes('--develop');
|
||||
|
||||
const globalData = {
|
||||
package: packageData,
|
||||
isAlpha,
|
||||
layout: 'page.njk',
|
||||
};
|
||||
|
||||
export default function (eleventyConfig) {
|
||||
// NOTE - alpha setting removes certain pages
|
||||
if (isAlpha) {
|
||||
@@ -32,8 +38,9 @@ export default function (eleventyConfig) {
|
||||
}
|
||||
|
||||
// Add template data
|
||||
eleventyConfig.addGlobalData('package', packageData);
|
||||
eleventyConfig.addGlobalData('isAlpha', isAlpha);
|
||||
for (let name in globalData) {
|
||||
eleventyConfig.addGlobalData(name, globalData[name]);
|
||||
}
|
||||
|
||||
// Template filters - {{ content | filter }}
|
||||
eleventyConfig.addFilter('inlineMarkdown', content => markdown.renderInline(content || ''));
|
||||
|
||||
@@ -24,7 +24,6 @@
|
||||
<script type="module" src="/dist/webawesome.loader.js"></script>
|
||||
<link rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/default.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
|
||||
<link id="color-stylesheet" rel="stylesheet" href="/dist/styles/color/standard.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/forms.css" />
|
||||
|
||||
{# Docs styles #}
|
||||
@@ -80,11 +79,12 @@
|
||||
</details>
|
||||
</nav>
|
||||
|
||||
{% block beforeContent %}{% endblock %}
|
||||
{% block header %}
|
||||
{% include 'breadcrumbs.njk' %}
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
|
||||
{{ content | safe }}
|
||||
{% endblock %}
|
||||
|
||||
|
||||
@@ -76,16 +76,13 @@
|
||||
|
||||
newStylesheet.addEventListener("load", updateStylesheet)
|
||||
|
||||
document.documentElement.classList.toggle(
|
||||
`wa-theme-${preset}-dark`,
|
||||
isDark()
|
||||
);
|
||||
document.documentElement.classList.toggle(`wa-dark`, isDark());
|
||||
</script>
|
||||
</head>
|
||||
<body class="layout-{{ layout | stripExtension }}">
|
||||
<!-- use view="desktop" as default to reduce layout jank on desktop site. -->
|
||||
<wa-page view="desktop" disable-navigation-toggle="">
|
||||
<header slot="header">
|
||||
<header slot="header" class="wa-split">
|
||||
{# Logo #}
|
||||
<div id="docs-branding">
|
||||
{# Nav toggle #}
|
||||
@@ -101,9 +98,9 @@
|
||||
<wa-badge variant="warning" appearance="filled" class="only-desktop">Alpha</wa-badge>
|
||||
</div>
|
||||
|
||||
<div id="docs-toolbar">
|
||||
<div id="docs-toolbar" class="wa-cluster wa-gap-xs">
|
||||
{# Desktop selectors #}
|
||||
<div class="only-desktop">
|
||||
<div class="only-desktop wa-cluster wa-gap-xs">
|
||||
{% include "preset-theme-selector.njk" %}
|
||||
{% include "color-scheme-selector.njk" %}
|
||||
</div>
|
||||
@@ -121,7 +118,7 @@
|
||||
{% if hasSidebar %}
|
||||
{# Mobile selectors #}
|
||||
<div class="wa-mobile-only" slot="navigation-header">
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));">
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
{% include "preset-theme-selector.njk" %}
|
||||
{% include "color-scheme-selector.njk" %}
|
||||
</div>
|
||||
@@ -149,22 +146,14 @@
|
||||
</details>
|
||||
</nav>
|
||||
|
||||
{% set breadcrumbs = page.url | breadcrumbs %}
|
||||
{% if breadcrumbs.length > 0 %}
|
||||
<wa-breadcrumb id="docs-breadcrumbs">
|
||||
{% for crumb in breadcrumbs %}
|
||||
<wa-breadcrumb-item href="{{ crumb.url }}">{{ crumb.title }}</wa-breadcrumb-item>
|
||||
{% endfor %}
|
||||
<wa-breadcrumb-item>{# Current page #}</wa-breadcrumb-item>
|
||||
</wa-breadcrumb>
|
||||
{% else %}
|
||||
{% endif %}
|
||||
|
||||
{% block beforeContent %}{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
{% include 'breadcrumbs.njk' %}
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
|
||||
{{ content | safe }}
|
||||
{% endblock %}
|
||||
|
||||
|
||||
10
docs/_includes/breadcrumbs.njk
Normal file
10
docs/_includes/breadcrumbs.njk
Normal file
@@ -0,0 +1,10 @@
|
||||
{% set breadcrumbs = page.url | breadcrumbs %}
|
||||
{% if breadcrumbs.length > 0 %}
|
||||
<wa-breadcrumb id="docs-breadcrumbs">
|
||||
{% for crumb in breadcrumbs %}
|
||||
<wa-breadcrumb-item href="{{ crumb.url }}">{{ crumb.title }}</wa-breadcrumb-item>
|
||||
{% endfor %}
|
||||
<wa-breadcrumb-item>{# Current page #}</wa-breadcrumb-item>
|
||||
</wa-breadcrumb>
|
||||
{% else %}
|
||||
{% endif %}
|
||||
@@ -1,5 +1,5 @@
|
||||
{# Color scheme selector #}
|
||||
<wa-dropdown id="color-scheme-selector">
|
||||
<wa-dropdown class="color-scheme-selector">
|
||||
<wa-button slot="trigger" appearance="filled" size="small" pill caret title="Press \ to toggle">
|
||||
<wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
|
||||
<wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
|
||||
|
||||
@@ -1,18 +1,19 @@
|
||||
{# Preset theme selector #}
|
||||
<wa-dropdown id="preset-theme-selector">
|
||||
<wa-dropdown class="preset-theme-selector">
|
||||
<wa-button slot="trigger" appearance="filled" size="small" pill caret>
|
||||
<wa-icon slot="prefix" name="paintbrush" variant="regular"></wa-icon>
|
||||
<span id="preset-theme-selector__text">Default</span>
|
||||
<span class="preset-theme-selector__text">Default</span>
|
||||
</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item type="checkbox" value="default">Default</wa-menu-item>
|
||||
<wa-menu-item type="checkbox" value="classic">Classic</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="fa">Font Awesome</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="active">Active</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="brutalist">Brutalism</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="glassy">Glassy</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="migration">Migration</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="playful">Playful</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="premium">Premium</wa-menu-item>
|
||||
<wa-menu-item type="checkbox" value="default" data-description="Your trusty companion, like a perfectly broken-in pair of jeans.">Default</wa-menu-item>
|
||||
<wa-menu-item type="checkbox" value="classic" data-description="Timeless elegance that never goes out of style.">Classic</wa-menu-item>
|
||||
<wa-menu-item type="checkbox" value="awesome" data-description="Punchy and vibrant, the rockstar of themes.">Awesome</wa-menu-item>
|
||||
<wa-menu-item type="checkbox" value="active" data-description="Energetic and tactile, always in motion.">Active</wa-menu-item>
|
||||
<wa-menu-item type="checkbox" value="brutalist" data-description="Sharp, raw, and unapologetically bold.">Brutalist</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="glassy" data-description="TODO">Glassy</wa-menu-item>
|
||||
<wa-menu-item type="checkbox" value="mellow" data-description="Soft and soothing, like a lazy Sunday morning.">Mellow</wa-menu-item>
|
||||
<wa-menu-item type="checkbox" value="tailspin" data-description="Like a bird in flight, guiding you from there to here.">Tailspin</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="playful" data-description="TODO">Playful</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="premium" data-description="TODO">Premium</wa-menu-item>
|
||||
</wa-menu>
|
||||
</wa-dropdown>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{# Some collections (like "patterns") will not have any items in the alpha build for example. So this checks to make sure the collection exists. #}
|
||||
{% if collections[tag] -%}
|
||||
<wa-details {{ (('/' + tag + '/') in page.url) | attr('open') }}>
|
||||
<wa-details {{ (tag in (tags or [])) | attr('open') }}>
|
||||
<h2 slot="summary">
|
||||
{% set groupUrl %}/docs/{{ tag }}/{% endset %}
|
||||
{% if groupUrl | getCollectionItemFromUrl %}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% if not (isAlpha and page.data.noAlpha) and page.fileSlug != tag and not page.data.unlisted -%}
|
||||
<li>
|
||||
<a href="/docs/{{ tag }}/{{ page.fileSlug }}">{{ page.data.title }}</a>
|
||||
<a href="{{ page.url }}">{{ page.data.title }}</a>
|
||||
{% if page.data.status == 'experimental' %}<wa-icon name="flask"></wa-icon>{% endif %}
|
||||
{% if page.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
|
||||
|
||||
|
||||
@@ -48,15 +48,12 @@
|
||||
|
||||
stylesheet.href = `/dist/styles/themes/${preset}.css`
|
||||
|
||||
document.documentElement.classList.toggle(
|
||||
`wa-theme-${preset}-dark`,
|
||||
isDark()
|
||||
);
|
||||
document.documentElement.classList.toggle(`wa-dark`, isDark());
|
||||
</script>
|
||||
</head>
|
||||
<body class="layout-{{ layout | stripExtension }}">
|
||||
|
||||
{% block beforeContent %}{% endblock %}
|
||||
{% block header %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{{ content | safe }}
|
||||
|
||||
@@ -4,7 +4,8 @@
|
||||
{% extends '../_includes/base.njk' %}
|
||||
|
||||
{# Component header #}
|
||||
{% block beforeContent %}
|
||||
{% block header %}
|
||||
{% include 'breadcrumbs.njk' %}
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
<div class="block-info">
|
||||
{% set snippets = (elements or element or snippets or snippet) | dict %}
|
||||
|
||||
|
Before Width: | Height: | Size: 698 KiB After Width: | Height: | Size: 698 KiB |
|
Before Width: | Height: | Size: 241 KiB After Width: | Height: | Size: 241 KiB |
|
Before Width: | Height: | Size: 786 KiB After Width: | Height: | Size: 786 KiB |
|
Before Width: | Height: | Size: 716 KiB After Width: | Height: | Size: 716 KiB |
|
Before Width: | Height: | Size: 148 KiB After Width: | Height: | Size: 148 KiB |
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 438 KiB After Width: | Height: | Size: 438 KiB |
@@ -5,22 +5,24 @@
|
||||
function setColorScheme(newColorScheme) {
|
||||
colorScheme = newColorScheme;
|
||||
localStorage.setItem('colorScheme', colorScheme);
|
||||
const presetTheme = window.getPresetTheme();
|
||||
|
||||
// Update the UI
|
||||
updateSelection();
|
||||
|
||||
// Toggle the dark mode class
|
||||
document.documentElement.classList.toggle(`wa-theme-${presetTheme}-dark`, window.isDark());
|
||||
document.documentElement.classList.toggle(`wa-dark`, window.isDark());
|
||||
}
|
||||
|
||||
function updateSelection() {
|
||||
const menu = document.querySelector('#color-scheme-selector wa-menu');
|
||||
if (!menu) return;
|
||||
[...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
|
||||
await customElements.whenDefined(item.localName);
|
||||
await item.updateComplete;
|
||||
item.checked = item.getAttribute('value') === colorScheme;
|
||||
const menus = document.querySelectorAll('.color-scheme-selector wa-menu');
|
||||
|
||||
menus.forEach(menu => {
|
||||
if (!menu) return;
|
||||
[...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
|
||||
await customElements.whenDefined(item.localName);
|
||||
await item.updateComplete;
|
||||
item.checked = item.getAttribute('value') === colorScheme;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@@ -28,14 +30,16 @@
|
||||
|
||||
// Selection is not preserved when changing page, so update when opening dropdown
|
||||
document.addEventListener('wa-show', event => {
|
||||
const colorSchemeSelector = event.target.closest('#color-scheme-selector');
|
||||
const colorSchemeSelector = event.target.closest('.color-scheme-selector');
|
||||
if (!colorSchemeSelector) return;
|
||||
updateSelection();
|
||||
});
|
||||
|
||||
// Listen for selections
|
||||
document.addEventListener('wa-select', event => {
|
||||
const menu = event.target.closest('#color-scheme-selector wa-menu');
|
||||
const selector = event.target.closest('.color-scheme-selector');
|
||||
const menu = selector?.querySelector('wa-menu');
|
||||
console.log(menu);
|
||||
if (!menu) return;
|
||||
setColorScheme(event.detail.item.value);
|
||||
});
|
||||
|
||||
@@ -1,13 +1,17 @@
|
||||
//
|
||||
// Preset theme selector
|
||||
//
|
||||
(() => {
|
||||
function applyThemeChange(stylesheet, newStylesheet) {
|
||||
newStylesheet.rel = 'stylesheet';
|
||||
newStylesheet.id = stylesheet.id;
|
||||
requestAnimationFrame(() => {
|
||||
stylesheet.remove();
|
||||
});
|
||||
}
|
||||
|
||||
function setPresetTheme(newPresetTheme) {
|
||||
presetTheme = newPresetTheme;
|
||||
localStorage.setItem('presetTheme', presetTheme);
|
||||
|
||||
const stylesheet = document.getElementById('theme-stylesheet');
|
||||
|
||||
const newStylesheet = Object.assign(document.createElement('link'), {
|
||||
href: `/dist/styles/themes/${presetTheme}.css`,
|
||||
rel: 'preload',
|
||||
@@ -17,54 +21,78 @@
|
||||
newStylesheet.addEventListener(
|
||||
'load',
|
||||
() => {
|
||||
newStylesheet.rel = 'stylesheet';
|
||||
newStylesheet.id = stylesheet.id;
|
||||
requestAnimationFrame(() => {
|
||||
stylesheet.remove();
|
||||
});
|
||||
const canUseViewTransitions =
|
||||
document.startViewTransition && !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
if (canUseViewTransitions) {
|
||||
document.startViewTransition(() => applyThemeChange(stylesheet, newStylesheet));
|
||||
} else {
|
||||
applyThemeChange(stylesheet, newStylesheet);
|
||||
}
|
||||
},
|
||||
{ once: true },
|
||||
);
|
||||
|
||||
document.head.append(newStylesheet);
|
||||
|
||||
// Update the UI
|
||||
updateSelection();
|
||||
|
||||
// Toggle the dark mode class
|
||||
document.documentElement.classList.toggle(`wa-theme-${presetTheme}-dark`, window.isDark());
|
||||
document.documentElement.classList.toggle(`wa-dark`, window.isDark());
|
||||
}
|
||||
|
||||
function updateSelection(container = document) {
|
||||
const menu = container.querySelector('#preset-theme-selector wa-menu');
|
||||
if (!menu) return;
|
||||
[...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
|
||||
const isChecked = item.getAttribute('value') === presetTheme;
|
||||
if (isChecked) {
|
||||
container.querySelector('#preset-theme-selector__text').textContent = item.innerText;
|
||||
const menus = container.querySelectorAll('.preset-theme-selector wa-menu');
|
||||
if (!menus) return;
|
||||
|
||||
[...menus].forEach(menu => {
|
||||
// Clear all checked states
|
||||
[...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
|
||||
await customElements.whenDefined(item.localName);
|
||||
await item.updateComplete;
|
||||
item.checked = false; // Reset all items to unchecked first
|
||||
});
|
||||
|
||||
// Then set only the selected item as checked
|
||||
const selectedItem = menu.querySelector(`wa-menu-item[value="${presetTheme}"]`);
|
||||
if (selectedItem) {
|
||||
customElements.whenDefined(selectedItem.localName).then(async () => {
|
||||
await selectedItem.updateComplete;
|
||||
selectedItem.checked = true;
|
||||
container.querySelectorAll('.preset-theme-selector__text').forEach(themeSelector => {
|
||||
themeSelector.textContent = selectedItem.innerText;
|
||||
});
|
||||
});
|
||||
}
|
||||
await customElements.whenDefined(item.localName);
|
||||
await item.updateComplete;
|
||||
item.checked = isChecked;
|
||||
});
|
||||
}
|
||||
|
||||
// Updates any element on the page with [data-theme-name] and [data-theme-description] with the current themes info
|
||||
function updateThemeNameAndDescription(name, description) {
|
||||
document.querySelectorAll('[data-theme-name]').forEach(el => (el.textContent = name));
|
||||
document.querySelectorAll('[data-theme-description]').forEach(el => (el.textContent = description));
|
||||
}
|
||||
|
||||
let presetTheme = window.getPresetTheme();
|
||||
|
||||
// Selection is not preserved when changing page, so update when opening dropdown
|
||||
document.addEventListener('wa-show', event => {
|
||||
const presetThemeSelector = event.target.closest('#preset-theme-selector');
|
||||
const presetThemeSelector = event.target.closest('.preset-theme-selector');
|
||||
if (!presetThemeSelector) return;
|
||||
updateSelection();
|
||||
});
|
||||
|
||||
// Listen for selections
|
||||
document.addEventListener('wa-select', event => {
|
||||
const menu = event.target.closest('#preset-theme-selector wa-menu');
|
||||
const menu = event.target.closest('.preset-theme-selector wa-menu');
|
||||
if (!menu) return;
|
||||
setPresetTheme(event.detail.item.value);
|
||||
updateThemeNameAndDescription(event.detail.item.textContent, event.detail.item.getAttribute('data-description'));
|
||||
});
|
||||
|
||||
// Set the initial preset name/description in the UI by grabbing it from the dropdown (ugly, but quick)
|
||||
const currentTheme = document.querySelector(`.preset-theme-selector wa-menu-item[value="${presetTheme}"]`);
|
||||
if (currentTheme) {
|
||||
updateThemeNameAndDescription(currentTheme.textContent, currentTheme.getAttribute('data-description'));
|
||||
}
|
||||
|
||||
// Update the color scheme when the preference changes
|
||||
window.matchMedia('(prefers-preset-theme: dark)').addEventListener('change', () => setPresetTheme(presetTheme));
|
||||
updateSelection();
|
||||
|
||||
@@ -10,8 +10,8 @@
|
||||
--wa-brand-grey: #30323b;
|
||||
}
|
||||
|
||||
html.wa-theme-default-dark .only-light,
|
||||
html:not(.wa-theme-default-dark) .only-dark {
|
||||
.wa-dark .only-light,
|
||||
.only-dark:not(.wa-dark, .wa-dark *) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -22,7 +22,7 @@ wa-page {
|
||||
/* Header */
|
||||
wa-page::part(header) {
|
||||
background-color: var(--wa-color-surface-default);
|
||||
border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
|
||||
border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
|
||||
}
|
||||
|
||||
wa-page::part(body) {
|
||||
@@ -34,10 +34,6 @@ wa-page::part(header-actions) {
|
||||
}
|
||||
|
||||
wa-page > header {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-inline: var(--wa-space-xl);
|
||||
|
||||
a[href='/'] {
|
||||
@@ -81,7 +77,7 @@ wa-page > header {
|
||||
}
|
||||
wa-button#search-trigger {
|
||||
--background-color: var(--wa-form-control-background-color);
|
||||
--border-color: var(--wa-form-control-resting-color);
|
||||
--border-color: var(--wa-form-control-border-color);
|
||||
}
|
||||
#search-trigger kbd {
|
||||
font-size: var(--wa-font-size-2xs);
|
||||
@@ -215,6 +211,20 @@ wa-page::part(menu) {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
wa-page[view='mobile'] :is([slot='navigation-header'], [slot='navigation']) {
|
||||
padding: 0;
|
||||
|
||||
& wa-details::part(icon) {
|
||||
padding-inline: var(--wa-space-xs); /* aligns details icons with drawer close icon */
|
||||
}
|
||||
}
|
||||
|
||||
[slot='navigation-header'] wa-menu {
|
||||
font-family: var(--wa-font-family-body);
|
||||
font-size: var(--wa-font-size-m);
|
||||
font-weight: var(--wa-font-weight-normal);
|
||||
}
|
||||
|
||||
/* Main content */
|
||||
wa-page > main {
|
||||
max-width: 80ch;
|
||||
@@ -326,16 +336,18 @@ wa-page > main:has(> .index-grid) {
|
||||
|
||||
a {
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
wa-card {
|
||||
--box-shadow: none;
|
||||
box-shadow: none;
|
||||
--spacing: var(--wa-space-m);
|
||||
inline-size: 100%;
|
||||
|
||||
&:hover {
|
||||
--border-color: var(--wa-color-brand-border-loud);
|
||||
--box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
|
||||
border-color: var(--border-color);
|
||||
box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
|
||||
|
||||
.page-name {
|
||||
color: var(--wa-color-brand-on-quiet);
|
||||
@@ -428,7 +440,7 @@ wa-page > main:has(> .index-grid) {
|
||||
@media screen and not (max-width: 768px) {
|
||||
/* Navigation sidebar */
|
||||
wa-page::part(navigation) {
|
||||
border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
|
||||
border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
|
||||
}
|
||||
|
||||
wa-page > #sidebar {
|
||||
|
||||
@@ -31,6 +31,9 @@
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1199px) {
|
||||
wa-page [slot='aside'] {
|
||||
display: none;
|
||||
}
|
||||
#outline {
|
||||
padding-block: 0.25rem;
|
||||
margin-block-end: -1rem;
|
||||
|
||||
@@ -1,5 +1,14 @@
|
||||
/* #region Custom Styles */
|
||||
@container preview (min-width: 0) {
|
||||
/* Theme Builder Headers
|
||||
* These styles control the appearance of the header of the theme builder,
|
||||
* allowing each theme to have a unique hero section.
|
||||
*/
|
||||
|
||||
/* #region Default */
|
||||
html.wa-theme-default .preview-container {
|
||||
container-name: default-theme;
|
||||
}
|
||||
|
||||
@container default-theme (min-width: 0) {
|
||||
.hero-background {
|
||||
height: 47rem;
|
||||
background-color: var(--wa-color-brand-fill-loud);
|
||||
@@ -22,7 +31,7 @@
|
||||
}
|
||||
|
||||
.hero wa-button[variant='brand'] {
|
||||
--background: var(--wa-color-neutral-fill-quiet);
|
||||
--background-color: var(--wa-color-neutral-fill-quiet);
|
||||
--text-color: var(--wa-color-neutral-on-normal);
|
||||
}
|
||||
|
||||
@@ -41,10 +50,733 @@
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
@container preview (min-width: 1040px) {
|
||||
@container default-theme (min-width: 1040px) {
|
||||
.hero-background::after {
|
||||
background-position: right bottom;
|
||||
background-size: 90%;
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Tailspin */
|
||||
html.wa-theme-tailspin .preview-container {
|
||||
container-name: tailspin-theme;
|
||||
}
|
||||
|
||||
@container tailspin-theme (min-width: 0) {
|
||||
.project-header {
|
||||
background: var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
.hero {
|
||||
--hero-background-color: var(--wa-color-surface-default);
|
||||
--hero-lines-color: color-mix(in oklab, var(--wa-color-neutral-fill-normal), transparent 30%);
|
||||
background: linear-gradient(to top, var(--wa-color-surface-lowered), transparent 40%),
|
||||
radial-gradient(circle at 10% 70%, color-mix(in oklab, var(--wa-color-red-50) 16%, transparent), transparent 30%),
|
||||
radial-gradient(
|
||||
circle at 40% 50%,
|
||||
color-mix(in oklab, var(--wa-color-indigo-40) 16%, transparent),
|
||||
transparent 40%
|
||||
),
|
||||
radial-gradient(circle at 80% 25%, color-mix(in oklab, var(--wa-color-red-50) 8%, transparent), transparent 20%),
|
||||
radial-gradient(
|
||||
circle at 80% 80%,
|
||||
color-mix(in oklab, var(--wa-color-indigo-40) 16%, transparent),
|
||||
transparent 40%
|
||||
),
|
||||
radial-gradient(circle at 90% 30%, color-mix(in oklab, var(--wa-color-red-60) 8%, transparent), transparent 10%),
|
||||
linear-gradient(176deg, var(--hero-background-color), transparent 6rem),
|
||||
linear-gradient(90deg, var(--hero-background-color), transparent),
|
||||
repeating-linear-gradient(
|
||||
var(--hero-lines-color),
|
||||
var(--hero-lines-color) 1px,
|
||||
transparent 1px,
|
||||
transparent 10rem,
|
||||
var(--hero-lines-color) 10rem
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--hero-lines-color),
|
||||
var(--hero-lines-color) 1px,
|
||||
transparent 1px,
|
||||
transparent 10rem,
|
||||
var(--hero-lines-color) 10rem
|
||||
),
|
||||
var(--hero-background-color);
|
||||
|
||||
& .title {
|
||||
padding-block: calc(var(--wa-space-3xl) * 2) calc(var(--wa-space-3xl) * 10);
|
||||
|
||||
& .hero-title {
|
||||
font-size: calc((var(--wa-font-size-4xl) * 1.125) * 1.125);
|
||||
margin-block: 0 var(--wa-space-3xl);
|
||||
}
|
||||
}
|
||||
}
|
||||
.badge-stock {
|
||||
position: absolute;
|
||||
top: var(--wa-space-l);
|
||||
left: var(--wa-space-l);
|
||||
}
|
||||
|
||||
.message-composer wa-card {
|
||||
&::part(footer) {
|
||||
border: none;
|
||||
}
|
||||
& wa-icon-button {
|
||||
color: var(--wa-color-base-50);
|
||||
}
|
||||
}
|
||||
|
||||
.products {
|
||||
margin-top: calc(var(--wa-space-3xl) * -8);
|
||||
}
|
||||
|
||||
pre.codeblock {
|
||||
background-color: var(--wa-color-neutral-fill-normal);
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Brutalist */
|
||||
html.wa-theme-brutalist .preview-container {
|
||||
container-name: brutalist-theme;
|
||||
}
|
||||
|
||||
@container brutalist-theme (min-width: 0) {
|
||||
.overlap {
|
||||
background: var(--wa-color-surface-lowered) url('/assets/images/themer/brutalist/hero.png') 50% 3% no-repeat;
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
height: 42rem;
|
||||
padding-top: 8rem;
|
||||
padding-right: 50%;
|
||||
--wa-font-weight-heading: var(--wa-font-weight-normal);
|
||||
}
|
||||
|
||||
.hero wa-button {
|
||||
--background: var(--wa-color-neutral-fill-loud);
|
||||
margin-block-start: var(--wa-space-xl);
|
||||
font-size: var(--wa-font-size-l);
|
||||
}
|
||||
|
||||
/* imitating the large button styles */
|
||||
.hero wa-button::part(label) {
|
||||
padding: 0 var(--wa-space-l);
|
||||
}
|
||||
|
||||
.strata.products {
|
||||
margin-top: -20rem;
|
||||
padding-top: 10rem;
|
||||
}
|
||||
|
||||
.product-card .badge-stock {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.product-card::part(footer) {
|
||||
--wa-shadow-offset-x-s: 0;
|
||||
--wa-shadow-offset-y-s: 0;
|
||||
border-width: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.product-card wa-button::part(prefix) {
|
||||
padding-inline-start: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.product-card wa-button::part(suffix) {
|
||||
padding-inline-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.product-card wa-button:not(:last-child) {
|
||||
margin-inline-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
/* imitating the rounded avatar */
|
||||
.blog wa-avatar {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.blog wa-avatar::part(image) {
|
||||
border: var(--wa-border-width-s) solid var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
}
|
||||
|
||||
.blog .landscape-frame {
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
|
||||
margin-block-end: var(--wa-shadow-offset-y-s);
|
||||
}
|
||||
|
||||
.post-meta .categories {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.message-composer wa-card::part(header) {
|
||||
background-color: var(--wa-color-neutral-fill-loud);
|
||||
}
|
||||
|
||||
.message-composer .grouped-buttons {
|
||||
--wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-gray-30), white 40%);
|
||||
}
|
||||
|
||||
.message-composer [slot='header'] wa-icon-button::part(base) {
|
||||
color: var(--wa-color-neutral-on-loud);
|
||||
}
|
||||
|
||||
.message-composer .grouped-buttons wa-icon-button::part(base):hover {
|
||||
background-color: var(--wa-color-neutral-fill-normal);
|
||||
color: var(--wa-color-text-normal);
|
||||
}
|
||||
|
||||
.message-composer wa-tooltip::part(body) {
|
||||
background-color: var(--wa-color-brand-fill-loud);
|
||||
color: var(--wa-color-brand-on-loud);
|
||||
}
|
||||
|
||||
.message-composer wa-tooltip::part(base__arrow) {
|
||||
--arrow-color: var(--wa-color-brand-fill-loud);
|
||||
}
|
||||
|
||||
.message-composer wa-card::part(footer) {
|
||||
border-width: 0;
|
||||
--padding: 0 var(--wa-space-s) var(--wa-space-s) var(--wa-space-s);
|
||||
}
|
||||
|
||||
.support-table th {
|
||||
background-color: var(--wa-color-neutral-fill-loud);
|
||||
color: var(--wa-color-neutral-on-loud);
|
||||
}
|
||||
|
||||
.support-table th wa-checkbox {
|
||||
--background: transparent;
|
||||
--border-color: var(--wa-color-neutral-on-loud);
|
||||
--border-color-checked: var(--wa-color-neutral-on-loud);
|
||||
}
|
||||
|
||||
.checkout-form {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
.checkout-form .square-frame {
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
|
||||
}
|
||||
|
||||
.wa-theme-brutalist.wa-dark {
|
||||
& p a::before {
|
||||
background: var(--wa-color-yellow-40);
|
||||
}
|
||||
|
||||
& wa-rating {
|
||||
--symbol-color: color-mix(in oklab, var(--wa-color-base-80), transparent 50%);
|
||||
--symbol-color-active: var(--wa-color-gray-80);
|
||||
}
|
||||
|
||||
& wa-alert {
|
||||
&[variant='brand'] {
|
||||
--icon-color: var(--wa-color-brand-on-quiet);
|
||||
}
|
||||
&[variant='success'] {
|
||||
--icon-color: var(--wa-color-success-on-quiet);
|
||||
}
|
||||
&[variant='warning'] {
|
||||
--icon-color: var(--wa-color-warning-on-quiet);
|
||||
}
|
||||
&[variant='danger'] {
|
||||
--icon-color: var(--wa-color-danger-on-quiet);
|
||||
}
|
||||
&[variant='neutral'] {
|
||||
--icon-color: var(--wa-color-neutral-on-quiet);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-container pre {
|
||||
border-inline-start: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-neutral-border-quiet);
|
||||
}
|
||||
|
||||
p a,
|
||||
a.highlite-link {
|
||||
position: relative;
|
||||
--wa-link-decoration-default: none;
|
||||
--wa-link-decoration-hover: none;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
content: '';
|
||||
background: var(--wa-color-yellow-80);
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
height: 50%;
|
||||
opacity: 0.7;
|
||||
transition: all var(--wa-transition-fast) ease-in-out;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@container brutalist-theme (min-width: 1040px) and (max-width: 1140px) {
|
||||
.product-card wa-button {
|
||||
font-size: 80%;
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Playful */
|
||||
html.wa-theme-playful .preview-container {
|
||||
container-name: playful-theme;
|
||||
}
|
||||
|
||||
@container playful-theme (min-width: 0) {
|
||||
.project-header {
|
||||
color: var(--wa-color-success-on-normal);
|
||||
}
|
||||
|
||||
.hero-background {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: -60rem;
|
||||
left: 50%;
|
||||
width: 250rem;
|
||||
height: 250rem;
|
||||
transform: translate(-50%, -50%);
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(180deg, var(--wa-color-green-90) 69.42%, var(--wa-color-green-80) 100%);
|
||||
}
|
||||
|
||||
.hero-background::after {
|
||||
background: url(/assets/images/themer/playful/hero.png) 0 50% no-repeat;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 520px;
|
||||
height: 600px;
|
||||
transform: translateX(-50%);
|
||||
left: 50%;
|
||||
bottom: 33rem;
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
padding-top: 19rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero .hero-title {
|
||||
color: var(--wa-color-success-on-normal);
|
||||
font-size: var(--wa-font-size-4xl);
|
||||
}
|
||||
|
||||
.hero .hero-cta {
|
||||
font-size: var(--wa-font-size-l);
|
||||
}
|
||||
|
||||
.product-card .badge-stock {
|
||||
position: absolute;
|
||||
top: var(--wa-space-xl);
|
||||
right: var(--wa-space-xl);
|
||||
}
|
||||
|
||||
.product-card {
|
||||
--wa-panel-border-radius: var(--wa-border-radius-l);
|
||||
}
|
||||
|
||||
.product-card::part(footer) {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.product-card wa-button {
|
||||
margin-inline-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.blog wa-avatar {
|
||||
--size: 2rem;
|
||||
}
|
||||
|
||||
.blog .landscape-frame {
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
}
|
||||
|
||||
.message-composer wa-card {
|
||||
--background: var(--wa-color-surface-raised);
|
||||
}
|
||||
|
||||
.message-composer wa-card::part(header) {
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-gray-70);
|
||||
border-width: 0;
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
}
|
||||
|
||||
&:not(.wa-theme-premium.wa-dark) .message-composer wa-card {
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-gray-90);
|
||||
}
|
||||
|
||||
.message-composer wa-icon-button {
|
||||
color: var(--wa-text-color-normal);
|
||||
font-size: var(--wa-font-size-l);
|
||||
}
|
||||
|
||||
.message-composer wa-card::part(footer) {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.product-detail .price {
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
}
|
||||
|
||||
.support-table wa-card {
|
||||
background: var(--wa-color-surface-raised);
|
||||
}
|
||||
|
||||
.support-table th {
|
||||
font-size: var(--wa-font-size-s);
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
}
|
||||
|
||||
.support-table tr {
|
||||
border-top-color: var(--wa-color-surface-lowered);
|
||||
}
|
||||
|
||||
.support-table .excerpt {
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
.order-item img {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
|
||||
.checkout-form {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
.checkout-form h2 {
|
||||
font-size: var(--wa-font-size-3xl);
|
||||
}
|
||||
|
||||
.checkout-form wa-input::part(form-control-label),
|
||||
.checkout-form wa-select::part(form-control-label) {
|
||||
font-size: var(--wa-font-size-s);
|
||||
padding-block-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.wa-theme-playful.wa-dark {
|
||||
& .hero-background {
|
||||
background: linear-gradient(180deg, var(--wa-color-green-60) 69.42%, var(--wa-color-green-30) 100%);
|
||||
}
|
||||
|
||||
& .message-composer wa-card {
|
||||
border-color: var(--wa-color-gray-30);
|
||||
}
|
||||
|
||||
& .message-composer wa-card::part(header) {
|
||||
background: var(--wa-color-gray-40);
|
||||
}
|
||||
|
||||
& .message-composer wa-card::part(footer) {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
& .message-composer .tools .grouped-buttons:not(:last-of-type) {
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-gray-40);
|
||||
}
|
||||
|
||||
& .support-table th {
|
||||
background: var(--wa-color-surface-lowered);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* responsive */
|
||||
@container playful-theme (min-width: 1040px) and (max-width: 1140px) {
|
||||
.product-card wa-button {
|
||||
font-size: 80%;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Active */
|
||||
html.wa-theme-active .preview-container {
|
||||
container-name: active-theme;
|
||||
}
|
||||
|
||||
@container active-theme (min-width: 0) {
|
||||
.hero-background::after {
|
||||
backdrop-filter: brightness(0.8);
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.hero-background {
|
||||
background: linear-gradient(
|
||||
var(--wa-color-green-80) 20%,
|
||||
var(--wa-color-primary-80) 80.5%,
|
||||
var(--wa-color-base-10) 80.5%,
|
||||
var(--wa-color-primary-80) 100%
|
||||
);
|
||||
background: url(/assets/images/themer/active/hero.png) 50% 0px / cover no-repeat;
|
||||
height: 40rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
height: 24rem;
|
||||
}
|
||||
|
||||
.hero .title {
|
||||
text-align: right;
|
||||
margin-inline-start: 55%;
|
||||
}
|
||||
|
||||
.hero .hero-title {
|
||||
font-style: italic;
|
||||
font-weight: var(--wa-font-weight-black);
|
||||
font-size: var(--wa-font-size-2xl);
|
||||
}
|
||||
|
||||
.hero wa-button[variant='brand'] {
|
||||
--background: var(--wa-color-neutral-fill-quiet);
|
||||
--text-color: var(--wa-color-neutral-on-normal);
|
||||
}
|
||||
|
||||
wa-rating {
|
||||
--symbol-color-active: var(--wa-color-brand-on-quiet);
|
||||
}
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
@container preview (min-width: 1100px) {
|
||||
.hero-background {
|
||||
height: 47rem;
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
height: 30rem;
|
||||
}
|
||||
|
||||
.hero .title {
|
||||
margin-block-start: 10%;
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Premium */
|
||||
html.wa-theme-premium .preview-container {
|
||||
container-name: premium-theme;
|
||||
}
|
||||
|
||||
@container premium-theme (min-width: 0) {
|
||||
.project-header {
|
||||
background-color: var(--wa-color-warning-fill-normal);
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
height: 60rem;
|
||||
background: var(--wa-color-warning-fill-normal) url('/assets/images/themer/premium/hero.png') -4rem 12rem no-repeat;
|
||||
background-size: cover;
|
||||
padding-top: var(--wa-space-2xl);
|
||||
padding-left: var(--wa-space-s);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.hero .hero-title {
|
||||
color: var(--wa-color-warning-on-normal);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.blog wa-avatar {
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.strata.products {
|
||||
margin-top: -25rem;
|
||||
padding-top: 10rem;
|
||||
background: linear-gradient(0deg, var(--wa-color-surface-lowered) 80%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
|
||||
.product-card .badge-stock {
|
||||
position: absolute;
|
||||
top: var(--wa-space-xl);
|
||||
right: var(--wa-space-xl);
|
||||
}
|
||||
|
||||
.product-card wa-rating {
|
||||
--symbol-size: var(--wa-font-size-m);
|
||||
}
|
||||
|
||||
.product-card .title {
|
||||
font-size: var(--wa-font-size-2xl);
|
||||
}
|
||||
|
||||
.product-card .description {
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
.product-card::part(footer) {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.product-card wa-button:not(:last-child) {
|
||||
margin-inline-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.blog .authors a {
|
||||
--wa-color-text-link: var(--wa-color-text-quiet);
|
||||
--wa-link-decoration-default: none;
|
||||
}
|
||||
|
||||
.message-composer wa-card {
|
||||
background: var(--wa-color-surface-raised);
|
||||
}
|
||||
|
||||
.message-composer wa-card::part(header) {
|
||||
border-width: 0;
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
}
|
||||
|
||||
&:not(.wa-theme-premium.wa-dark) .message-composer wa-card {
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-base-95);
|
||||
}
|
||||
|
||||
.message-composer wa-card::part(footer) {
|
||||
border-width: 0;
|
||||
--padding: var(--wa-space-s) var(--wa-space-xl);
|
||||
}
|
||||
|
||||
.message-composer .grouped-buttons wa-icon-button::part(base) {
|
||||
block-size: var(--wa-form-control-height-s);
|
||||
inline-size: var(--wa-form-control-height-s);
|
||||
justify-content: center;
|
||||
}
|
||||
.message-composer .grouped-buttons wa-icon-button::part(base):hover {
|
||||
background-color: var(--wa-color-neutral-fill-normal);
|
||||
color: var(--wa-color-text-normal);
|
||||
}
|
||||
|
||||
.support-table th {
|
||||
text-transform: uppercase;
|
||||
font-weight: var(--wa-font-weight-normal);
|
||||
color: var(--wa-color-text-quiet);
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
}
|
||||
|
||||
.support-table th:first-child {
|
||||
border-radius: var(--wa-border-radius-l) 0 0 0;
|
||||
}
|
||||
|
||||
.support-table th:last-child {
|
||||
border-radius: 0 var(--wa-border-radius-l) 0 0;
|
||||
}
|
||||
|
||||
.support-table tr {
|
||||
--wa-color-surface-border: var(--wa-color-surface-lowered);
|
||||
}
|
||||
|
||||
.checkout-form wa-input::part(form-control-label),
|
||||
.checkout-form wa-select::part(form-control-label) {
|
||||
font-size: var(--wa-font-size-s);
|
||||
margin-block-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.order-item .finish {
|
||||
color: var(--wa-color-text-quiet);
|
||||
font-size: var(--wa-font-size-s);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.wa-theme-premium.wa-dark {
|
||||
& .message-composer .tools .grouped-buttons:not(:last-of-type) {
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-base-40);
|
||||
}
|
||||
|
||||
& .preview-container pre,
|
||||
& .preview-container code {
|
||||
background-color: var(--wa-color-base-20);
|
||||
}
|
||||
|
||||
/* syntax highlighting */
|
||||
& .token {
|
||||
&.selector {
|
||||
color: var(--wa-color-green-80);
|
||||
}
|
||||
|
||||
&.tag {
|
||||
color: var(--wa-color-primary-80);
|
||||
}
|
||||
|
||||
&.punctuation {
|
||||
color: var(--wa-color-base-95);
|
||||
}
|
||||
|
||||
&.attr-name {
|
||||
color: var(--wa-color-green-80);
|
||||
}
|
||||
|
||||
&.attr-value {
|
||||
color: var(--wa-color-yellow-80);
|
||||
}
|
||||
}
|
||||
}
|
||||
.preview-container pre,
|
||||
.preview-container code {
|
||||
background-color: var(--wa-color-base-90);
|
||||
font-size: var(--font-size-m);
|
||||
}
|
||||
|
||||
/* syntax highlighting */
|
||||
.token {
|
||||
&.selector {
|
||||
color: var(--wa-color-green-30);
|
||||
}
|
||||
|
||||
&.tag {
|
||||
color: var(--wa-color-primary-30);
|
||||
}
|
||||
|
||||
&.punctuation {
|
||||
color: var(--wa-color-base-10);
|
||||
}
|
||||
|
||||
&.attr-name {
|
||||
color: var(--wa-color-green-30);
|
||||
}
|
||||
|
||||
&.attr-value {
|
||||
color: var(--wa-color-yellow-30);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
@container preview (min-width: 1040px) {
|
||||
.strata.hero {
|
||||
background: var(--wa-color-warning-fill-normal) url('/assets/images/themer/premium/hero.png') -4rem 35% no-repeat;
|
||||
padding-top: 15rem;
|
||||
padding-left: 50%;
|
||||
}
|
||||
|
||||
.strata.products {
|
||||
margin-top: -25rem;
|
||||
padding-top: 10rem;
|
||||
background: linear-gradient(0deg, var(--wa-color-surface-lowered) 60%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
@@ -127,7 +127,7 @@ eleventyExcludeFromCollections: true
|
||||
</a>
|
||||
</nav>
|
||||
<header slot="main-header">
|
||||
<div class="wa-flank:end wa-border-radius-l wa-theme-default-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
|
||||
<div class="wa-flank:end wa-border-radius-l wa-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
|
||||
<div class="wa-stack" style="margin: var(--wa-space-2xl);">
|
||||
<h1>Great Horned Owl</h1>
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
@@ -5,7 +5,7 @@ layout: blank
|
||||
eleventyExcludeFromCollections: true
|
||||
---
|
||||
|
||||
<wa-page class="wa-theme-default-dark">
|
||||
<wa-page class="wa-dark">
|
||||
<header slot="header">
|
||||
<div class="wa-cluster">
|
||||
<wa-icon-button name="bars" label="Menu" data-toggle-nav></wa-icon-button>
|
||||
|
||||
@@ -119,7 +119,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
|
||||
</a>
|
||||
</nav>
|
||||
<header slot="main-header">
|
||||
<div class="wa-flank:end wa-border-radius-l wa-theme-default-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
|
||||
<div class="wa-flank:end wa-border-radius-l wa-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
|
||||
<div class="wa-stack" style="margin: var(--wa-space-2xl);">
|
||||
<h1>Great Horned Owl</h1>
|
||||
<wa-divider></wa-divider>
|
||||
@@ -299,7 +299,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
|
||||
A sample media app page using `header`, `navigation-header`, `main-header`, and `main-footer` along with the default slot. The navigation menu collapses into a drawer at the default `mobile-breakpoint` and can be opened using a button with `[data-toggle-nav]` that appears in the `header` slot.
|
||||
|
||||
```html {.example viewport="1600"}
|
||||
<wa-page class="wa-theme-default-dark">
|
||||
<wa-page class="wa-dark">
|
||||
<header slot="header">
|
||||
<div class="wa-cluster">
|
||||
<wa-icon-button name="bars" label="Menu" data-toggle-nav></wa-icon-button>
|
||||
|
||||
@@ -17,7 +17,7 @@ To customize a theme, simply override any of these custom properties in your own
|
||||
```css
|
||||
:root,
|
||||
:host,
|
||||
.wa-theme-default-light {
|
||||
.wa-theme-default {
|
||||
/* Changes the brand color to violet across the library */
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-violet-95);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-violet-90);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Theming Sandbox
|
||||
description: TODO
|
||||
layout: page
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
## Card
|
||||
@@ -172,7 +172,7 @@ layout: page
|
||||
<div class="shadow" style="box-shadow: var(--wa-shadow-l);"></div>
|
||||
```
|
||||
|
||||
## Tests
|
||||
## Alignment Tests
|
||||
|
||||
```html {.example}
|
||||
<style>
|
||||
@@ -245,11 +245,108 @@ layout: page
|
||||
<wa-spinner></wa-spinner>
|
||||
</div>
|
||||
<div class="alignment">
|
||||
<wa-input label="AaBbCc" hint="Lorem ipsum dolor"></wa-input>
|
||||
<wa-select label="AaBbCc" value="ocbs" multiple hint="Lorem ipsum dolor">
|
||||
<wa-input label="AaBbCc" hint="Ipsum"></wa-input>
|
||||
<wa-select label="AaBbCc" value="ocbs" multiple hint="Ipsum">
|
||||
<wa-option value="ocbs">OCBS</wa-option>
|
||||
</wa-select>
|
||||
<wa-color-picker label="AaBbCc" hint="Lorem ipsum dolor"></wa-color-picker>
|
||||
<wa-color-picker label="AaBbCc" hint="Ipsum"></wa-color-picker>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Custom Property Tests
|
||||
|
||||
```html {.example}
|
||||
<style>
|
||||
.wa-theme-test {
|
||||
--wa-form-control-background-color: mistyrose;
|
||||
|
||||
--wa-form-control-border-style: dotted;
|
||||
--wa-form-control-border-width: 3px;
|
||||
--wa-form-control-border-radius: 12px;
|
||||
|
||||
--wa-form-control-activated-color: mediumvioletred;
|
||||
--wa-form-control-border-color: palevioletred;
|
||||
|
||||
--wa-form-control-label-color: rosybrown;
|
||||
--wa-form-control-label-font-weight: 900;
|
||||
--wa-form-control-label-line-height: 1;
|
||||
|
||||
--wa-form-control-value-color: brown;
|
||||
--wa-form-control-value-font-weight: 900;
|
||||
--wa-form-control-value-line-height: 2;
|
||||
|
||||
--wa-form-control-placeholder-color: lightpink;
|
||||
}
|
||||
</style>
|
||||
<div class="wa-theme-test" style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
|
||||
<label>Native Input <input type="text" placeholder="placeholder"></label>
|
||||
<wa-input label="WA Input" type="text" placeholder="placeholder"></wa-input>
|
||||
|
||||
<label>Native Input <input type="text" value="value"></label>
|
||||
<wa-input label="WA Input" type="text" value="value"></wa-input>
|
||||
|
||||
<label>Native Textarea <textarea placeholder="placeholder"></textarea></label>
|
||||
<wa-textarea label="WA Textarea" placeholder="placeholder"></wa-textarea>
|
||||
|
||||
<label>Native Textarea <textarea>value</textarea></label>
|
||||
<wa-textarea label="WA Textarea" value="value"></wa-textarea>
|
||||
|
||||
<label><input type="checkbox" checked> Native Checkbox</label>
|
||||
<wa-checkbox checked>WA Checkbox</wa-checkbox>
|
||||
|
||||
<label><input type="checkbox"> Native Checkbox</label>
|
||||
<wa-checkbox>WA Checkbox</wa-checkbox>
|
||||
|
||||
<label><input type="radio" checked> Native Radio</label>
|
||||
<wa-radio checked>WA Radio</wa-radio>
|
||||
|
||||
<label><input type="radio"> Native Radio</label>
|
||||
<wa-radio>WA Radio</wa-radio>
|
||||
|
||||
<label>
|
||||
Native Select
|
||||
<select value="option-1">
|
||||
<option value="option-1">Option 1</option>
|
||||
<option value="option-2">Option 2</option>
|
||||
<option value="option-3">Option 3</option>
|
||||
<option value="option-4">Option 4</option>
|
||||
</select>
|
||||
</label>
|
||||
<wa-select label="WA Select" value="option-1">
|
||||
<wa-option value="option-1">Option 1</wa-option>
|
||||
<wa-option value="option-2">Option 2</wa-option>
|
||||
<wa-option value="option-3">Option 3</wa-option>
|
||||
<wa-option value="option-4">Option 4</wa-option>
|
||||
</wa-select>
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
## Text Controls Tests
|
||||
|
||||
```html {.example}
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
|
||||
<label>Native Input <input type="text" value="value"></label>
|
||||
<wa-input label="WA Input" type="text" value="value"></wa-input>
|
||||
|
||||
<label>
|
||||
Native Select
|
||||
<select value="option-1">
|
||||
<option value="option-1">Option 1</option>
|
||||
<option value="option-2">Option 2</option>
|
||||
<option value="option-3">Option 3</option>
|
||||
<option value="option-4">Option 4</option>
|
||||
</select>
|
||||
</label>
|
||||
<wa-select label="WA Select" value="option-1">
|
||||
<wa-option value="option-1">Option 1</wa-option>
|
||||
<wa-option value="option-2">Option 2</wa-option>
|
||||
<wa-option value="option-3">Option 3</wa-option>
|
||||
<wa-option value="option-4">Option 4</wa-option>
|
||||
</wa-select>
|
||||
|
||||
<label>Native Textarea <textarea>value</textarea></label>
|
||||
<wa-textarea label="WA Textarea" value="value"></wa-textarea>
|
||||
</div>
|
||||
```
|
||||
@@ -5,6 +5,15 @@ layout: page
|
||||
hasOutline: false
|
||||
---
|
||||
|
||||
<script>
|
||||
// Add stylesheet to set themed headers
|
||||
const themeHeadersLink = document.createElement("link");
|
||||
themeHeadersLink.type="text/css";
|
||||
themeHeadersLink.rel="stylesheet";
|
||||
themeHeadersLink.href="/assets/styles/theme-headers.css";
|
||||
document.getElementsByTagName("head")[0].appendChild(themeHeadersLink);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* turn off eleventy header anchors */
|
||||
.anchor-heading a {
|
||||
@@ -156,7 +165,7 @@ hasOutline: false
|
||||
--wa-form-control-border-radius: var(--wa-border-radius-m);
|
||||
|
||||
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
|
||||
--wa-form-control-resting-color: var(--wa-color-neutral-border-normal);
|
||||
--wa-form-control-border-color: var(--wa-color-neutral-border-normal);
|
||||
|
||||
--wa-form-control-label-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-label-font-weight: var(--wa-font-weight-normal);
|
||||
@@ -168,16 +177,6 @@ hasOutline: false
|
||||
|
||||
--wa-form-control-placeholder-color: color-mix(in oklab, var(--wa-color-text-normal), transparent);
|
||||
|
||||
--wa-form-control-height-s: calc(
|
||||
var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height)
|
||||
);
|
||||
--wa-form-control-height-m: calc(
|
||||
var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height)
|
||||
);
|
||||
--wa-form-control-height-l: calc(
|
||||
var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height)
|
||||
);
|
||||
|
||||
--wa-form-control-required-content: '*';
|
||||
--wa-form-control-required-content-color: inherit;
|
||||
--wa-form-control-required-content-offset: -0.1em;
|
||||
@@ -364,13 +363,13 @@ hasOutline: false
|
||||
/* file uploader styles */
|
||||
.file-uploader {
|
||||
position: relative;
|
||||
border: var(--wa-form-control-border-width) dashed var(--wa-form-control-resting-color);
|
||||
border: var(--wa-form-control-border-width) dashed var(--wa-form-control-border-color);
|
||||
border-radius: var(--wa-form-control-border-radius);
|
||||
background: var(--wa-form-control-background-color);
|
||||
cursor: pointer;
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
height: calc(var(--wa-form-control-height-m) + var(--wa-border-width-s) * 2);
|
||||
line-height: var(--wa-form-control-height-m);
|
||||
height: calc(var(--wa-form-control-height) + var(--wa-border-width-s) * 2);
|
||||
line-height: var(--wa-form-control-height);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -502,11 +501,11 @@ hasOutline: false
|
||||
</div>
|
||||
<wa-select name="theme" label="Pick a theme to start!" value="default">
|
||||
<wa-option value="default">Default</wa-option>
|
||||
<wa-option data-alpha="remove" value="fa">Font Awesome</wa-option>
|
||||
<wa-option data-alpha="remove" value="awesome">Awesome</wa-option>
|
||||
<wa-option data-alpha="remove" value="premium">Premium</wa-option>
|
||||
<wa-option data-alpha="remove" value="playful">Playful</wa-option>
|
||||
<wa-option data-alpha="remove" value="brutalist">Brutalist</wa-option>
|
||||
<wa-option data-alpha="remove" value="migration">Migration</wa-option>
|
||||
<wa-option data-alpha="remove" value="tailspin">Tailspin</wa-option>
|
||||
<wa-option data-alpha="remove" value="glassy">Glassy</wa-option>
|
||||
<wa-option data-alpha="remove" value="active">Active</wa-option>
|
||||
<wa-option value="classic">Classic</wa-option>
|
||||
@@ -877,10 +876,10 @@ hasOutline: false
|
||||
|
||||
switch(themeSelect.value) {
|
||||
case 'classic':
|
||||
case 'migration':
|
||||
case 'tailspin':
|
||||
colorPalette = 'classic';
|
||||
break;
|
||||
case 'fa':
|
||||
case 'awesome':
|
||||
colorPalette = 'bright';
|
||||
break;
|
||||
case 'playful':
|
||||
@@ -1045,11 +1044,11 @@ hasOutline: false
|
||||
|
||||
switch(themeSelect.value) {
|
||||
case 'premium':
|
||||
case 'migration':
|
||||
case 'tailspin':
|
||||
case 'playful':
|
||||
case 'brutalist':
|
||||
case 'classic':
|
||||
case 'fa':
|
||||
case 'awesome':
|
||||
case 'glassy':
|
||||
case 'active':
|
||||
assetFolder = themeSelect.value;
|
||||
@@ -1245,7 +1244,7 @@ hasOutline: false
|
||||
let presetLogoIcons;
|
||||
|
||||
switch(themeSelect.value) {
|
||||
case 'fa':
|
||||
case 'awesome':
|
||||
presetLogoIcons = ['cupcake', 'camera-retro', 'rocket-launch', 'cookie-bite'];
|
||||
break;
|
||||
case 'premium':
|
||||
@@ -1257,7 +1256,7 @@ hasOutline: false
|
||||
case 'brutalist':
|
||||
presetLogoIcons = ['leaf', 'mug-hot', 'book-open', 'landmark'];
|
||||
break;
|
||||
case 'migration':
|
||||
case 'tailspin':
|
||||
presetLogoIcons = ['wind', 'feather', 'lemon', 'wind-turbine'];
|
||||
break;
|
||||
case 'glassy':
|
||||
@@ -1447,7 +1446,7 @@ hasOutline: false
|
||||
|
||||
function setPreferredIcons() {
|
||||
switch(themeSelect.value) {
|
||||
case 'fa':
|
||||
case 'awesome':
|
||||
iconFamily.value = 'fa-classic';
|
||||
iconStyle.value = 'solid';
|
||||
useFaIcons();
|
||||
@@ -1491,7 +1490,7 @@ hasOutline: false
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'migration':
|
||||
case 'tailspin':
|
||||
iconFamily.value = 'fa-classic';
|
||||
iconStyle.value = 'solid';
|
||||
useFaIcons();
|
||||
@@ -1664,7 +1663,7 @@ hasOutline: false
|
||||
|
||||
.preview-container {
|
||||
background: var(--wa-color-surface-lowered);
|
||||
container: preview / inline-size;
|
||||
container-type: inline-size;
|
||||
padding: 0;
|
||||
max-inline-size: 1400px;
|
||||
margin-inline: auto;
|
||||
@@ -1743,7 +1742,7 @@ hasOutline: false
|
||||
|
||||
/* strata product cards */
|
||||
|
||||
.products wa-card::part(base) {
|
||||
.products wa-card {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -2124,7 +2123,7 @@ hasOutline: false
|
||||
<h3>Ontological Shock</h3>
|
||||
<p>The allegory is related to Plato's theory of Forms, which holds that the true essence of an object is not what we perceive with our senses, but rather its quality, and that most people perceive only the shadow of the object and are thus limited to false perception.</p>
|
||||
<pre class="codeblock">
|
||||
<code class="language-html"><html class="wa-theme-default-dark">
|
||||
<code class="language-html"><html class="wa-dark">
|
||||
<head>
|
||||
<link rel="stylesheet" href="path/to/webawesome/dist/styles/themes/dark.css" />
|
||||
</head>
|
||||
|
||||
@@ -12,17 +12,27 @@ Components with the <wa-badge variant="warning" pill>Experimental</wa-badge> bad
|
||||
During the alpha period, things might break! We take breaking changes very seriously, but sometimes they're necessary to make the final product that much better. We appreciate your patience!
|
||||
:::
|
||||
|
||||
## Next
|
||||
## 3.0.0-alpha.8
|
||||
|
||||
- Simplified the internal structure and CSS properties of `<wa-card>`, removed `base` part.
|
||||
- Added `appearance` to `<wa-callout>` and `<wa-tag>`
|
||||
- Fixed a bug in `<wa-switch>` where it would not properly change its "checked" state when its property changed.
|
||||
- Fixed a bug in `<wa-switch>` where the value would be incorrectly submitted as "on" when a value is provided and the switch is checked
|
||||
- Fixed a bug in the `wa-split` CSS utility that caused it to behave incorrectly
|
||||
- Improved performance of `<wa-select>` when using a large number of options
|
||||
- Updated the Japanese translation
|
||||
|
||||
### Theming
|
||||
|
||||
- Added new themes:
|
||||
- Awesome
|
||||
- Active
|
||||
- Brutalist
|
||||
- Mellow
|
||||
- Tailspin
|
||||
- Playful
|
||||
- Renamed `--wa-form-control-resting-color` to `--wa-form-control-border-color` for familiarity and accuracy
|
||||
- Removed size-based `--wa-form-control-height-*` tokens in favor of `--wa-form-control-height` (see [size utilities](/docs/utilities/size/))
|
||||
- Updated the `--wa-border-width-*` and `--wa-border-radius-*` scale for better DX
|
||||
- Changed the value of `--wa-border-width-scale` to `1` and updated calculations of size-based `--wa-border-width-*` tokens
|
||||
- Changed the value of `--wa-border-radius-scale` to `1` and updated calculations of size-based `--wa-border-radius-*` tokens
|
||||
|
||||
@@ -3,55 +3,327 @@ title: Themes
|
||||
description: Everything you need to know about theming Web Awesome.
|
||||
layout: page-outline
|
||||
---
|
||||
<style>
|
||||
wa-page > main {
|
||||
max-width: 140ch;
|
||||
|
||||
.max-line-length {
|
||||
max-width: 80ch;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-showcase {
|
||||
container: showcase / inline-size;
|
||||
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
min-height: 16lh;
|
||||
height: 65vh;
|
||||
max-height: 21lh;
|
||||
padding: var(--wa-space-xl);
|
||||
overflow: hidden;
|
||||
margin-block-end: var(--wa-space-xl);
|
||||
|
||||
&.wa-flank {
|
||||
--content-percentage: 55%;
|
||||
--flank-size: 20ch;
|
||||
}
|
||||
}
|
||||
|
||||
.showcase-examples-wrapper {
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
}
|
||||
|
||||
.showcase-examples {
|
||||
column-gap: var(--wa-space-xl);
|
||||
|
||||
& wa-card {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
&:has(+ wa-card) {
|
||||
margin-block-end: var(--wa-space-xl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@supports not (zoom: 1) {
|
||||
.showcase-examples {
|
||||
column-count: 1;
|
||||
}
|
||||
|
||||
@container showcase (width > 700px) {
|
||||
.showcase-examples {
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@container showcase (width > 900px) {
|
||||
.showcase-examples {
|
||||
column-count: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@supports (zoom: 1) {
|
||||
.showcase-examples {
|
||||
column-count: 2;
|
||||
zoom: 40%;
|
||||
}
|
||||
|
||||
@container showcase (width > 400px) {
|
||||
.showcase-examples {
|
||||
zoom: 55%;
|
||||
}
|
||||
}
|
||||
|
||||
@container showcase (width > 700px) {
|
||||
.showcase-examples {
|
||||
zoom: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
@container showcase (width > 800px) {
|
||||
.showcase-examples {
|
||||
column-count: 3;
|
||||
zoom: 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="theme-showcase wa-flank wa-gap-xl">
|
||||
<div>
|
||||
<h2 id="theme-showcase-name" data-theme-name></h2>
|
||||
<p id="theme-showcase-description" data-theme-description></p>
|
||||
</div>
|
||||
<div class="showcase-examples-wrapper">
|
||||
<div class="showcase-examples">
|
||||
<wa-card with-header with-footer>
|
||||
<div slot="header" class="wa-split">
|
||||
<h3 class="wa-heading-m">Your Cart</h3>
|
||||
<wa-icon-button name="xmark"></wa-icon-button>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xl">
|
||||
<div class="wa-flank">
|
||||
<wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-green-60); --text-color: var(--wa-color-green-95);">
|
||||
<wa-icon slot="icon" name="sword-laser" family="duotone" style="font-size: 1.5em;"></wa-icon>
|
||||
</wa-avatar>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<div class="wa-split wa-gap-xs">
|
||||
<strong>Initiate Saber</strong>
|
||||
<strong>$179.99</strong>
|
||||
</div>
|
||||
<div class="wa-split wa-gap-xs wa-caption-m">
|
||||
<span>Green</span>
|
||||
<a href="#">Remove</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-flank">
|
||||
<wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-teal-60); --text-color: var(--wa-color-teal-95);">
|
||||
<wa-icon slot="icon" name="robot-astromech" family="duotone" style="font-size: 1.5em;"></wa-icon>
|
||||
</wa-avatar>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<div class="wa-split wa-gap-xs">
|
||||
<strong>Repair Droid</strong>
|
||||
<strong>$3,049.99</strong>
|
||||
</div>
|
||||
<div class="wa-split wa-gap-xs wa-caption-m">
|
||||
<span>R-series</span>
|
||||
<a href="#">Remove</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="wa-stack">
|
||||
<div class="wa-split">
|
||||
<strong>Subtotal</strong>
|
||||
<strong>$3,229.98</strong>
|
||||
</div>
|
||||
<span class="wa-caption-m">Shipping and taxes calculated at checkout.</span>
|
||||
<wa-button variant="brand">
|
||||
<wa-icon slot="prefix" name="shopping-bag"></wa-icon>
|
||||
Checkout
|
||||
</wa-button>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<wa-avatar shape="rounded" style="--size: 1.9lh; float: left; margin-right: var(--wa-space-m);">
|
||||
<wa-icon slot="icon" name="hat-wizard" family="duotone" style="font-size: 1.75em;"></wa-icon>
|
||||
</wa-avatar>
|
||||
<p class="wa-body-l" style="margin: 0;">“All we have to decide is what to do with the time that is given to us. There are other forces at work in this world, Frodo, besides the will of evil.”</p>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div class="wa-stack">
|
||||
<h3 class="wa-heading-m">Sign In</h3>
|
||||
<wa-input label="Email" placeholder="ddjarin@mandalore.gov">
|
||||
<wa-icon slot="prefix" name="envelope" variant="regular"></wa-icon>
|
||||
</wa-input>
|
||||
<wa-input label="Password" type="password">
|
||||
<wa-icon slot="prefix" name="lock" variant="regular"></wa-icon>
|
||||
</wa-input>
|
||||
<wa-button variant="brand">Sign In</wa-button>
|
||||
<a href="#" class="wa-body-s">I forgot my password</a>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card with-footer>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split">
|
||||
<h3 class="wa-heading-m">To-Do</h3>
|
||||
<wa-icon-button name="plus" label="Add task"></wa-icon-button>
|
||||
</div>
|
||||
<wa-checkbox checked>Umbrella for Adelard</wa-checkbox>
|
||||
<wa-checkbox checked>Waste-paper basket for Dora</wa-checkbox>
|
||||
<wa-checkbox checked>Pen and ink for Milo</wa-checkbox>
|
||||
<wa-checkbox>Mirror for Angelica</wa-checkbox>
|
||||
<wa-checkbox>Silver spoons for Lobelia</wa-checkbox>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<a href="">View all completed</a>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-frame wa-border-radius-m" style="align-self: center; max-inline-size: 25ch;">
|
||||
<img src="https://images.unsplash.com/photo-1667514627762-521b1c815a89?q=20" alt="Album art">
|
||||
</div>
|
||||
<div class="wa-flank:end wa-align-items-start">
|
||||
<div class="wa-stack wa-gap-3xs">
|
||||
<div class="wa-cluster wa-gap-xs" style="height: 2.25em;">
|
||||
<strong>The Stone Troll</strong>
|
||||
<small><wa-badge variant="neutral" appearance="filled">E</wa-badge></small>
|
||||
</div>
|
||||
<span class="wa-caption-m">Samwise G</span>
|
||||
</div>
|
||||
<wa-icon-button name="ellipsis" label="Options"></wa-icon-button>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-2xs">
|
||||
<wa-progress-bar value="34" style="height: 0.5em"></wa-progress-bar>
|
||||
<div class="wa-split">
|
||||
<span class="wa-caption-xs">1:01</span>
|
||||
<span class="wa-caption-xs">-1:58</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-grid wa-align-items-center" style="--min-column-size: 1em; justify-items: center;">
|
||||
<wa-icon-button name="backward" label="Skip backward"></wa-icon-button>
|
||||
<wa-icon-button name="pause" style="font-size: var(--wa-font-size-2xl);" label="Pause"></wa-icon-button>
|
||||
<wa-icon-button name="forward" label="Skip forward"></wa-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
<wa-card>
|
||||
<div class="wa-stack">
|
||||
<h3 class="wa-heading-m">Chalmun's Spaceport Cantina</h3>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<wa-rating value="4.6" read-only></wa-rating>
|
||||
<strong>4.6</strong>
|
||||
<span>(419 reviews)</span>
|
||||
</div>
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
<div class="wa-cluster wa-gap-3xs">
|
||||
<wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
|
||||
<wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
|
||||
<wa-icon name="dollar" style="color: var(--wa-color-green-60);"></wa-icon>
|
||||
</div>
|
||||
<span class="wa-caption-m">•</span>
|
||||
<wa-tag size="small">Cocktail Bar</wa-tag>
|
||||
<wa-tag size="small">Gastropub</wa-tag>
|
||||
<wa-tag size="small">Local Fare</wa-tag>
|
||||
<wa-tag size="small">Gluten Free</wa-tag>
|
||||
</div>
|
||||
<div class="wa-flank wa-gap-xs">
|
||||
<wa-icon name="location-dot"></wa-icon>
|
||||
<a href="#" class="wa-caption-m">Mos Eisley, Tatooine</a>
|
||||
</div>
|
||||
</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-line-length">
|
||||
|
||||
Themes are collections of pre-defined CSS custom properties that thread through every Web Awesome component and pattern.
|
||||
|
||||
Web Awesome includes two pre-made themes:
|
||||
- **Default** for a clean look that prioritizes accessibility and performance
|
||||
- **Classic** for the look and feel of Shoelace with more accessible color pairings
|
||||
Web Awesome Free includes these pre-made themes:
|
||||
- **Default** (`default.css`) for a clean look that prioritizes accessibility and performance
|
||||
- **Classic** (`classic.css`) for the look and feel of Shoelace with more accessible color pairings
|
||||
- **Awesome** (`awesome.css`) for the familiar, vibrant styles from your friends at Font Awesome
|
||||
|
||||
Even more themes are available with Web Awesome <wa-badge>Pro</wa-badge>:
|
||||
- **Active** (`active.css`)
|
||||
- **Brutalist** (`brutalist.css`)
|
||||
- **Mellow** (`mellow.css`)
|
||||
- **Tailspin** (`tailspin.css`)
|
||||
|
||||
To get started right away, include the following in your project, replacing `default.css` at the end with your preferred pre-made theme:
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/themes/default.css' %}" />
|
||||
```
|
||||
|
||||
|
||||
## What's a Theme?
|
||||
|
||||
Themes are a standard collection of [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) that cover all styles from colors to transitions. We use these custom properties throughout Web Awesome components to ensure a cohesive look and feel. Our [Theming pages](/docs/theming/) document these styles so that you can use them freely throughout your project and customize them as needed.
|
||||
Themes are 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 for each color scheme, such as `wa-theme-default-light` and `wa-theme-default-dark`, and the `:host` selector. Scoping to unique classes allows you to import multiple themes and use them interchangeably without collisions, while scoping to `:host` ensures the styles are applied to the shadow roots of custom elements.
|
||||
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.
|
||||
|
||||
Additionally, styles may be scoped to the `:root` selector to be activated automatically. For pre-made themes, *all* custom properties are scoped to both `:root` and the class for the light color scheme (`wa-theme-default-light` or `wa-theme-classic-light`), activating the light color scheme by default.
|
||||
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.
|
||||
In pre-made themes, we use a light color scheme by default.
|
||||
|
||||
Other themes or color schemes must be activated with the corresponding class, like the dark color scheme for pre-made themes (`wa-theme-default-dark` or `wa-theme-classic-dark`), which only defines a subset of custom properties for colors. This ensures that non-color styles only need to be defined once for the theme, regardless of whether the color scheme is light or dark.
|
||||
|
||||
Additionally, styles may be scope to the `:root` selector to be activated automatically.
|
||||
For pre-made themes, *all* custom properties are scoped to `:where(:root)`, the theme class, and `wa-light`.
|
||||
|
||||
:::info
|
||||
We use `:where(:root)` to give these styles 0 [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) so that they can be easily overridden. If you plan on using multiple themes in your project, we recommend doing the same for your custom themes.
|
||||
:::
|
||||
|
||||
Finally, we scope themes to `:host` and `:host-context()` to ensure the styles are applied to the shadow roots of custom elements.
|
||||
|
||||
For example, the default theme is set up like this:
|
||||
|
||||
```css
|
||||
:root,
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-default-light {
|
||||
.wa-theme-default,
|
||||
.wa-light {
|
||||
/* all CSS custom properties for color, typography, space, etc. */
|
||||
}
|
||||
|
||||
.wa-theme-default-dark,
|
||||
.wa-theme-default-dark :host {
|
||||
/* subset of CSS custom properties for color */
|
||||
.wa-dark,
|
||||
:host-context(.wa-dark) {
|
||||
/* subset of CSS custom properties for a dark color scheme */
|
||||
}
|
||||
```
|
||||
|
||||
## Using Themes
|
||||
|
||||
You can import the default and classic themes from the Web Awesome CDN. Simply add the following code to the `<head>` of your page to import the **default** theme:
|
||||
You can import pre-made themes from the Web Awesome CDN. Simply add the following code to the `<head>` of your page to import the **default** theme:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/styles/themes/default.css" />
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/themes/default.css' %}" />
|
||||
```
|
||||
|
||||
Or import the **classic** theme:
|
||||
Or the **Classic** theme:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/styles/themes/classic.css" />
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/themes/classic.css' %}" />
|
||||
```
|
||||
|
||||
Both the default and classic themes include both light and dark color schemes. When importing either theme, the light color scheme is activated by default. To activate the dark color scheme, apply the appropriate class (`wa-theme-default-dark` or `wa-theme-classic-dark`, depending on theme) to the `<html>` element on your page, like this example for the default theme:
|
||||
Or any of our Pro themes, like **Brutalist**:
|
||||
|
||||
```html
|
||||
<html class="wa-theme-default-dark">
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/themes/brutalist.css' %}" />
|
||||
```
|
||||
|
||||
To activate the dark color scheme of any theme, apply the class `wa-dark` to the `<html>` element on your page, like this example for the default theme:
|
||||
```html
|
||||
<html class="wa-theme-default wa-dark">
|
||||
<head>
|
||||
<link rel="stylesheet" href="path/to/web-awesome/dist/styles/themes/default.css" />
|
||||
<!-- other links, scripts, and metadata -->
|
||||
@@ -62,7 +334,7 @@ Both the default and classic themes include both light and dark color schemes. W
|
||||
</html>
|
||||
```
|
||||
|
||||
Because themes are scoped to specific classes, you can activate different color schemes or entire themes on different containers throughout the page. This example uses the default theme with a dark sidebar.
|
||||
Because themes are scoped to specific classes, you can use different color schemes or even different themes throughout the page. Here, we use the default theme with a dark sidebar:
|
||||
|
||||
```html
|
||||
<html>
|
||||
@@ -71,7 +343,7 @@ Because themes are scoped to specific classes, you can activate different color
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="wa-theme-default-dark">
|
||||
<nav class="wa-dark">
|
||||
<!-- dark-themed sidebar -->
|
||||
</nav>
|
||||
|
||||
@@ -93,7 +365,8 @@ If you're customizing the default light styles, scope your styles to the followi
|
||||
```css
|
||||
:root,
|
||||
:host,
|
||||
.wa-theme-default-light {
|
||||
.wa-theme-default,
|
||||
.wa-light {
|
||||
/* your custom styles here */
|
||||
}
|
||||
```
|
||||
@@ -101,13 +374,13 @@ If you're customizing the default light styles, scope your styles to the followi
|
||||
If you're customizing the default dark styles, scope your styles to the following selectors.
|
||||
|
||||
```css
|
||||
:host,
|
||||
.wa-theme-default-dark {
|
||||
.wa-dark,
|
||||
:is(:host-context(.wa-dark)) {
|
||||
/* your custom styles here */
|
||||
}
|
||||
```
|
||||
|
||||
By customizing a built-in theme, you'll maintain a smaller stylesheet containing only the changes you've made. Contrast this to [creating a new theme](#creating-a-new-theme), where you need to explicitly define every custom property required by the library. This approach is more "future-proof," as new design tokens that emerge in subsequent versions of Web Awesome will be accounted for by built-in themes.
|
||||
By customizing a built-in theme, you'll maintain a smaller stylesheet containing only your changes. Contrast this to [creating a new theme](#creating-a-new-theme), where you need to explicitly define every custom property required by the library. This approach is more "future-proof," as new design tokens that emerge in subsequent versions of Web Awesome will be accounted for by built-in themes.
|
||||
|
||||
While this approach is easier to maintain, the drawback is that your theme can't be activated independently — it's tied to the built-in theme you're extending.
|
||||
|
||||
@@ -118,8 +391,10 @@ Creating a new theme is more of an undertaking than [customizing an existing one
|
||||
Start by changing the selector to match your theme's name. Assuming your new theme is called "Purple Power", your theme should be scoped like this.
|
||||
|
||||
```css
|
||||
:root,
|
||||
:host,
|
||||
.wa-theme-purple-power {
|
||||
.wa-theme-purple-power,
|
||||
.wa-light {
|
||||
/* your custom styles here */
|
||||
}
|
||||
```
|
||||
@@ -137,3 +412,4 @@ Web Awesome's default theme has both light and dark styles built in. However, We
|
||||
- Remember the user's preference and restore it on subsequent logins
|
||||
|
||||
Web Awesome avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.
|
||||
</div>
|
||||
@@ -15,14 +15,15 @@ Border style controls the standard line shape of borders throughout Web Awesome.
|
||||
|
||||
Border widths use `rem` units in order to scale proportionately with the root font size.
|
||||
|
||||
Each border width value uses a `calc()` function with `--wa-border-width-scale` to scale all border widths at once. By default, this multiplier is `0.0625`. The table below lists the result of the calculation.
|
||||
|
||||
| Custom Property | Default Value | Preview |
|
||||
| --------------------- | -------------------------------- | ------------------------------------------------------------------------- |
|
||||
| `--wa-border-width-s` | `0.0625rem` <small>(1px)</small> | <div class="swatch" style="border-width: var(--wa-border-width-s)"></div> |
|
||||
| `--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`.
|
||||
Values < 1 make all borders uniformly thinner, while values > 1 make them thicker.
|
||||
|
||||
## Radius
|
||||
|
||||
Border radius controls the corners of Web Awesome components.
|
||||
@@ -37,10 +38,11 @@ Common border radius properties allow you to achieve specific shapes beyond your
|
||||
|
||||
Size-based border radius properties allow you to customize the overall roundness of Web Awesome components. These use `rem` units in order to scale proportionately with the root font size.
|
||||
|
||||
Each property uses a `calc()` function with `--wa-border-radius-scale` to uniformly scale all border radii. By default, this multiplier is `1`. The table below lists the result of the calculation.
|
||||
| Custom Property | Default Value | Preview |
|
||||
| ----------------------- | -------------------------------- | --------------------------------------------------------------------------- |
|
||||
| `--wa-border-radius-s` | `0.1875rem` <small>(3px)</small> | <div class="swatch" style="border-radius: var(--wa-border-radius-s)"></div> |
|
||||
| `--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> |
|
||||
|
||||
| Custom Property | Default Value | Preview |
|
||||
| ----------------------- | -------------------------------- | ---------------------------------------------------------------------------- |
|
||||
| `--wa-border-radius-s` | `0.1875rem` <small>(3px)</small> | <div class="swatch" style="border-radius: var(--wa-border-radius-s)"></div> |
|
||||
| `--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.
|
||||
@@ -210,6 +210,54 @@ Web Awesome defines seven literal colors each with 11 lightness values using the
|
||||
</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">
|
||||
|
||||
@@ -15,11 +15,11 @@ Not every form control uses all of these custom properties. For example, `<wa-ra
|
||||
| Custom Property | Default Value |
|
||||
| ------------------------------------------- | ------------------------------------------------------------------------------------------------- |
|
||||
| `--wa-form-control-background-color` | `var(--wa-color-surface-default)` |
|
||||
| `--wa-form-control-border-color` | `var(--wa-color-neutral-border-loud)` |
|
||||
| `--wa-form-control-border-style` | `var(--wa-border-style)` |
|
||||
| `--wa-form-control-border-width` | `var(--wa-border-width-s)` |
|
||||
| `--wa-form-control-border-radius` | `var(--wa-border-radius-m)` |
|
||||
| `--wa-form-control-activated-color` | `var(--wa-color-brand-fill-loud)` |
|
||||
| `--wa-form-control-resting-color` | `var(--wa-color-neutral-border-loud)` |
|
||||
| `--wa-form-control-label-color` | `var(--wa-color-neutral-border-loud)` |
|
||||
| `--wa-form-control-label-font-weight` | `var(--wa-font-weight-normal)` |
|
||||
| `--wa-form-control-label-line-height` | `var(--wa-line-height-normal)` |
|
||||
@@ -27,9 +27,6 @@ Not every form control uses all of these custom properties. For example, `<wa-ra
|
||||
| `--wa-form-control-value-font-weight` | `var(--wa-font-weight-body)` |
|
||||
| `--wa-form-control-value-line-height` | `var(--wa-line-height-condensed)` |
|
||||
| `--wa-form-control-placeholder-color` | `var(--wa-color-gray-60)` |
|
||||
| `--wa-form-control-height-s` | `calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height))` |
|
||||
| `--wa-form-control-height-m` | `calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height))` |
|
||||
| `--wa-form-control-height-l` | `calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height))` |
|
||||
| `--wa-form-control-required-content` | `'*'` |
|
||||
| `--wa-form-control-required-content-color` | `inherit` |
|
||||
| `--wa-form-control-required-content-offset` | `-0.1em` |
|
||||
|
||||
@@ -24,6 +24,7 @@ You can create the same effect on any element by using the size utility classes:
|
||||
Using these classes does two things:
|
||||
- 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:
|
||||
|
||||
| Custom Property | Small | Medium | Large |
|
||||
@@ -32,7 +33,6 @@ You can use CSS `em` units to reference that size in other properties.
|
||||
| `--wa-size-smaller` | `--wa-font-size-xs` | `--wa-font-size-s` | `--wa-font-size-m` |
|
||||
| `--wa-space` | `--wa-space-s` | `--wa-space-m` | `--wa-space-l` |
|
||||
| `--wa-space-smaller` | `--wa-space-xs` | `--wa-space-s` | `--wa-space-m` |
|
||||
| `--wa-form-control-height` | `--wa-form-control-height-s` | `--wa-form-control-height-m` | `--wa-form-control-height-l` |
|
||||
|
||||
For example, assume we wanted to make a custom `.tag` class with size variants.
|
||||
|
||||
|
||||
@@ -268,7 +268,7 @@ layout: page
|
||||
<h1 class="brand-font">Make something <span class="emphasis">awesome</span> with open-source web components</h1>
|
||||
<div class="hero-cta">
|
||||
<span><em>Psst!</em> You can pre-order Web Awesome Pro at a low, guaranteed-for-life price — but not for long. Get in while the gettin’s good.</span>
|
||||
<wa-button class="wa-theme-default-dark" size="small" href="https://www.kickstarter.com/projects/fontawesome/web-awesome">
|
||||
<wa-button class="wa-dark" size="small" href="https://www.kickstarter.com/projects/fontawesome/web-awesome">
|
||||
<wa-icon slot="prefix" name="person-running"></wa-icon>
|
||||
Pre-order WA Pro
|
||||
</wa-button>
|
||||
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "@shoelace-style/webawesome",
|
||||
"version": "3.0.0-alpha.7",
|
||||
"version": "3.0.0-alpha.8",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@shoelace-style/webawesome",
|
||||
"version": "3.0.0-alpha.7",
|
||||
"version": "3.0.0-alpha.8",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^4.1.0",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@shoelace-style/webawesome",
|
||||
"description": "A forward-thinking library of web components.",
|
||||
"version": "3.0.0-alpha.7",
|
||||
"version": "3.0.0-alpha.8",
|
||||
"homepage": "https://webawesome.com/",
|
||||
"author": "Web Awesome",
|
||||
"license": "MIT",
|
||||
|
||||
@@ -113,7 +113,15 @@ async function generateStyles() {
|
||||
// Remove pro themes
|
||||
const allThemes = await globby(join(cdnDir, 'styles/themes/**/*.css'));
|
||||
const proThemes = allThemes.filter(file => {
|
||||
if (file.includes('themes/classic') || file.includes('themes/default')) {
|
||||
if (
|
||||
file.includes('themes/classic') ||
|
||||
file.includes('themes/default') ||
|
||||
file.includes('themes/awesome') ||
|
||||
file.includes('themes/active') ||
|
||||
file.includes('themes/mellow') ||
|
||||
file.includes('themes/tailspin') ||
|
||||
file.includes('themes/brutalist')
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import type { PropertyValues } from 'lit';
|
||||
import { html } from 'lit';
|
||||
import { customElement, property, query, state } from 'lit/decorators.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
@@ -32,8 +33,10 @@ export default class WaButtonGroup extends WebAwesomeElement {
|
||||
/** The button group's orientation. */
|
||||
@property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';
|
||||
|
||||
updated(changedProps: Map<string, unknown>) {
|
||||
if (changedProps.has('orientation')) {
|
||||
updated(changedProperties: PropertyValues<this>) {
|
||||
super.updated(changedProperties);
|
||||
|
||||
if (changedProperties.has('orientation')) {
|
||||
this.setAttribute('aria-orientation', this.orientation);
|
||||
this.updateClassNames();
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
:host {
|
||||
--aspect-ratio: 16 / 9;
|
||||
--navigation-color: var(--wa-color-text-quiet);
|
||||
--pagination-color: var(--wa-form-control-resting-color);
|
||||
--pagination-color: var(--wa-form-control-border-color);
|
||||
--pagination-color-active: var(--wa-form-control-activated-color);
|
||||
--scroll-hint: 0px;
|
||||
--slide-gap: var(--wa-space-m, 1rem);
|
||||
|
||||
@@ -317,8 +317,8 @@
|
||||
border-radius: inherit;
|
||||
background-color: currentColor;
|
||||
box-shadow:
|
||||
inset 0 0 0 0.0625rem var(--wa-form-control-resting-color),
|
||||
inset 0 0 0 0.25rem var(--wa-color-surface-default);
|
||||
inset 0 0 0 var(--border-width) var(--wa-form-control-border-color),
|
||||
inset 0 0 0 calc(var(--border-width) * 2) var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
.trigger--empty:before {
|
||||
|
||||
@@ -54,6 +54,7 @@ import styles from './input.css';
|
||||
* @csspart suffix - The container that wraps the suffix.
|
||||
*
|
||||
* @cssproperty --background-color - The input's background color.
|
||||
* @cssproperty --border-color - The color of the input's borders.
|
||||
* @cssproperty --border-width - The width of the input's borders. Expects a single value.
|
||||
* @cssproperty --box-shadow - The shadow effects around the edges of the input.
|
||||
*/
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { arrow, autoUpdate, computePosition, flip, offset, platform, shift, size } from '@floating-ui/dom';
|
||||
import { offsetParent } from 'composed-offset-position';
|
||||
import type { PropertyValues } from 'lit';
|
||||
import { html } from 'lit';
|
||||
import { customElement, property, query } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
@@ -222,11 +223,11 @@ export default class WaPopup extends WebAwesomeElement {
|
||||
this.stop();
|
||||
}
|
||||
|
||||
async updated(changedProps: Map<string, unknown>) {
|
||||
super.updated(changedProps);
|
||||
async updated(changedProperties: PropertyValues<this>) {
|
||||
super.updated(changedProperties);
|
||||
|
||||
// Start or stop the positioner when active changes
|
||||
if (changedProps.has('active')) {
|
||||
if (changedProperties.has('active')) {
|
||||
if (this.active) {
|
||||
this.start();
|
||||
} else {
|
||||
@@ -235,7 +236,7 @@ export default class WaPopup extends WebAwesomeElement {
|
||||
}
|
||||
|
||||
// Update the anchor when anchor changes
|
||||
if (changedProps.has('anchor')) {
|
||||
if (changedProperties.has('anchor')) {
|
||||
this.handleAnchorChange();
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import type { PropertyValues } from 'lit';
|
||||
import { html } from 'lit';
|
||||
import { customElement, property, query, state } from 'lit/decorators.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
@@ -38,15 +39,15 @@ export default class WaProgressRing extends WebAwesomeElement {
|
||||
/** A custom label for assistive devices. */
|
||||
@property() label = '';
|
||||
|
||||
updated(changedProps: Map<string, unknown>) {
|
||||
super.updated(changedProps);
|
||||
updated(changedProperties: PropertyValues<this>) {
|
||||
super.updated(changedProperties);
|
||||
|
||||
//
|
||||
// This block is only required for Safari because it doesn't transition the circle when the custom properties
|
||||
// change, possibly because of a mix of pixel + unit-less values in the calc() function. It seems like a Safari bug,
|
||||
// but I couldn't pinpoint it so this works around the problem.
|
||||
//
|
||||
if (changedProps.has('value')) {
|
||||
if (changedProperties.has('value')) {
|
||||
const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue('r'));
|
||||
const circumference = 2 * Math.PI * radius;
|
||||
const offset = circumference - (this.value / 100) * circumference;
|
||||
|
||||
@@ -34,14 +34,12 @@
|
||||
*/
|
||||
|
||||
:host([checked]) {
|
||||
--background-color: var(--wa-color-brand-fill-quiet);
|
||||
--background-color-hover: var(--background-color);
|
||||
--border-color: var(--wa-form-control-activated-color);
|
||||
--text-color: var(--wa-color-brand-on-normal);
|
||||
--indicator-color: var(--border-color);
|
||||
--indicator-color: var(--wa-form-control-activated-color);
|
||||
--indicator-width: var(--wa-border-width-s);
|
||||
|
||||
box-shadow:
|
||||
var(--box-shadow, 0 0 transparent),
|
||||
inset 0 0 0 var(--indicator-width) var(--indicator-color);
|
||||
box-shadow: inset 0 0 0 var(--indicator-width) var(--indicator-color);
|
||||
|
||||
& button {
|
||||
--border-color: var(--indicator-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,6 +8,7 @@ import { HasSlotController } from '../../internal/slot.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
|
||||
import nativeStyles from '../../styles/native/button.css';
|
||||
import appearanceStyles from '../../styles/utilities/appearance.css';
|
||||
import sizeStyles from '../../styles/utilities/size.css';
|
||||
import variantStyles from '../../styles/utilities/variants.css';
|
||||
import buttonStyles from '../button/button.css';
|
||||
@@ -50,7 +51,7 @@ import styles from './radio-button.css';
|
||||
*/
|
||||
@customElement('wa-radio-button')
|
||||
export default class WaRadioButton extends WebAwesomeFormAssociatedElement {
|
||||
static shadowStyle = [variantStyles, sizeStyles, nativeStyles, buttonStyles, styles];
|
||||
static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, nativeStyles, buttonStyles, styles];
|
||||
|
||||
private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
|
||||
|
||||
|
||||
@@ -81,8 +81,6 @@ import styles from './select.css';
|
||||
*
|
||||
* @cssproperty --background-color - The background color of the select's combobox.
|
||||
* @cssproperty --border-color - The border color of the select's combobox.
|
||||
* @cssproperty --border-radius - The border radius of the select's combobox.
|
||||
* @cssproperty --border-style - The style of the select's borders, including the listbox.
|
||||
* @cssproperty --border-width - The width of the select's borders, including the listbox.
|
||||
* @cssproperty --box-shadow - The shadow effects around the edges of the select's combobox.
|
||||
*/
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
}
|
||||
|
||||
--inset-block: calc(50% + (var(--thumb-size) / 2) + var(--tooltip-offset));
|
||||
--border-block: var(--wa-tooltip-arrow-size) solid var(--wa-color-neutral-fill-loud);
|
||||
--border-block: var(--wa-tooltip-arrow-size) solid var(--wa-tooltip-background-color);
|
||||
|
||||
@media (forced-colors: active) {
|
||||
border: solid 1px transparent;
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
:host {
|
||||
--background-color: var(--wa-form-control-background-color);
|
||||
--background-color-checked: var(--wa-form-control-activated-color);
|
||||
--border-color: var(--wa-form-control-resting-color);
|
||||
--border-color: var(--wa-form-control-border-color);
|
||||
--border-color-checked: var(--background-color-checked);
|
||||
--border-style: var(--wa-form-control-border-style);
|
||||
--border-width: var(--wa-form-control-border-width);
|
||||
--box-shadow: initial;
|
||||
--height: calc(1em * var(--wa-form-control-value-line-height));
|
||||
--thumb-color: var(--wa-form-control-resting-color);
|
||||
--thumb-color: var(--wa-form-control-border-color);
|
||||
--thumb-color-checked: var(--wa-form-control-background-color);
|
||||
--thumb-shadow: initial;
|
||||
--thumb-size: calc((var(--height) - var(--border-width) * 2) * 0.75);
|
||||
|
||||
@@ -20,8 +20,7 @@ describe('<wa-switch>', () => {
|
||||
const el = await fixture<WaSwitch>(html` <wa-switch></wa-switch> `);
|
||||
|
||||
expect(el.name).to.equal(null);
|
||||
// TODO - fix default value
|
||||
// expect(el.value).to.be.null;
|
||||
expect(el.value).to.equal('on');
|
||||
expect(el.title).to.equal('');
|
||||
expect(el.disabled).to.be.false;
|
||||
expect(el.required).to.be.false;
|
||||
@@ -138,10 +137,7 @@ describe('<wa-switch>', () => {
|
||||
});
|
||||
|
||||
describe('when submitting a form', () => {
|
||||
//
|
||||
// TODO - this test should pass, so this is likely a bug in the component
|
||||
//
|
||||
it.skip('should submit the correct value when a value is provided', async () => {
|
||||
it('should submit the correct value when a value is provided', async () => {
|
||||
const form = await fixture<HTMLFormElement>(html`
|
||||
<form>
|
||||
<wa-switch name="a" value="1" checked></wa-switch>
|
||||
@@ -215,10 +211,7 @@ describe('<wa-switch>', () => {
|
||||
expect(waSwitch.checkValidity()).to.be.true;
|
||||
});
|
||||
|
||||
//
|
||||
// TODO - this test should pass, so this is likely a bug in the component
|
||||
//
|
||||
it.skip('should be present in form data when using the form attribute and located outside of a <form>', async () => {
|
||||
it('should be present in form data when using the form attribute and located outside of a <form>', async () => {
|
||||
const el = await fixture<HTMLFormElement>(html`
|
||||
<div>
|
||||
<form id="f">
|
||||
|
||||
@@ -212,16 +212,11 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
setValue(value: string | File | FormData | null, stateValue?: string | File | FormData | null | undefined): void {
|
||||
if (!this.checked) {
|
||||
this.value = null;
|
||||
this.internals.setFormValue(null, null);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!value) {
|
||||
value = 'on';
|
||||
}
|
||||
|
||||
this.internals.setFormValue(value, stateValue);
|
||||
this.internals.setFormValue(value ?? 'on', stateValue);
|
||||
}
|
||||
|
||||
formResetCallback(): void {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { html, type PropertyValues } from 'lit';
|
||||
import type { PropertyValues } from 'lit';
|
||||
import { html } from 'lit';
|
||||
import { customElement, property, query, state } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { ifDefined } from 'lit/directives/if-defined.js';
|
||||
@@ -40,8 +41,6 @@ import styles from './textarea.css';
|
||||
*
|
||||
* @cssproperty --background-color - The textarea's background color.
|
||||
* @cssproperty --border-color - The color of the textarea's borders.
|
||||
* @cssproperty --border-radius - The border radius of the textarea's corners.
|
||||
* @cssproperty --border-style - The style of the textarea's borders.
|
||||
* @cssproperty --border-width - The width of the textarea's borders.
|
||||
* @cssproperty --box-shadow - The shadow effects around the edges of the textarea.
|
||||
*/
|
||||
@@ -272,7 +271,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
|
||||
this.setTextareaDimensions();
|
||||
}
|
||||
|
||||
protected updated(changedProperties: PropertyValues<this>) {
|
||||
updated(changedProperties: PropertyValues<this>) {
|
||||
if (changedProperties.has('resize')) {
|
||||
this.setTextareaDimensions();
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import type { PropertyValues } from 'lit';
|
||||
import { html } from 'lit';
|
||||
import { customElement, property, query, state } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
@@ -281,14 +282,14 @@ export default class WaViewportDemo extends WebAwesomeElement {
|
||||
}
|
||||
}
|
||||
|
||||
updated(changedProperties: Map<string | number | symbol, unknown>) {
|
||||
updated(changedProperties: PropertyValues<this>) {
|
||||
super.updated(changedProperties);
|
||||
|
||||
if (changedProperties.has('iframe')) {
|
||||
if (changedProperties.has('iframe' as keyof WaViewportDemo)) {
|
||||
this.observeResize();
|
||||
}
|
||||
|
||||
if (['zoomLevel', 'availableWidth', 'viewport'].some(p => changedProperties.has(p))) {
|
||||
if (['zoomLevel', 'availableWidth', 'viewport'].some(p => changedProperties.has(p as keyof WaViewportDemo))) {
|
||||
this.updateZoom();
|
||||
}
|
||||
|
||||
|
||||
@@ -1,17 +1,5 @@
|
||||
:root,
|
||||
:host {
|
||||
--wa-color-rose-95: #ffecf9;
|
||||
--wa-color-rose-90: #ffdcf3;
|
||||
--wa-color-rose-80: #ffb2db;
|
||||
--wa-color-rose-70: #ea95bf;
|
||||
--wa-color-rose-60: #ca7da3;
|
||||
--wa-color-rose-50: #a36282;
|
||||
--wa-color-rose-40: #7c4963;
|
||||
--wa-color-rose-30: #63384e;
|
||||
--wa-color-rose-20: #492839;
|
||||
--wa-color-rose-10: #2d1722;
|
||||
--wa-color-rose-05: #1d0d15;
|
||||
|
||||
--wa-color-red-95: #fbeeeb;
|
||||
--wa-color-red-90: #f8e0d9;
|
||||
--wa-color-red-80: #efbdb1;
|
||||
@@ -36,18 +24,6 @@
|
||||
--wa-color-yellow-10: #2c1912;
|
||||
--wa-color-yellow-05: #1d0e0a;
|
||||
|
||||
--wa-color-lime-95: #defe88;
|
||||
--wa-color-lime-90: #d1f376;
|
||||
--wa-color-lime-80: #b0d65f;
|
||||
--wa-color-lime-70: #95bc54;
|
||||
--wa-color-lime-60: #7ba04a;
|
||||
--wa-color-lime-50: #5e803c;
|
||||
--wa-color-lime-40: #45612c;
|
||||
--wa-color-lime-30: #354c21;
|
||||
--wa-color-lime-20: #253716;
|
||||
--wa-color-lime-10: #15210b;
|
||||
--wa-color-lime-05: #0b1405;
|
||||
|
||||
--wa-color-green-95: #dcf8ea;
|
||||
--wa-color-green-90: #bcf1d8;
|
||||
--wa-color-green-80: #6dddad;
|
||||
@@ -72,18 +48,6 @@
|
||||
--wa-color-teal-10: #04221f;
|
||||
--wa-color-teal-05: #021513;
|
||||
|
||||
--wa-color-gray-95: #f1f2f4;
|
||||
--wa-color-gray-90: #e2e5e8;
|
||||
--wa-color-gray-80: #c2c9d0;
|
||||
--wa-color-gray-70: #a6b0ba;
|
||||
--wa-color-gray-60: #8897a3;
|
||||
--wa-color-gray-50: #657888;
|
||||
--wa-color-gray-40: #435c6f;
|
||||
--wa-color-gray-30: #2d485d;
|
||||
--wa-color-gray-20: #18354a;
|
||||
--wa-color-gray-10: #012034;
|
||||
--wa-color-gray-05: #001421;
|
||||
|
||||
--wa-color-blue-95: #ecf3ff;
|
||||
--wa-color-blue-90: #d9e7ff;
|
||||
--wa-color-blue-80: #abcaff;
|
||||
@@ -119,4 +83,16 @@
|
||||
--wa-color-violet-20: #561658;
|
||||
--wa-color-violet-10: #340d36;
|
||||
--wa-color-violet-05: #210822;
|
||||
|
||||
--wa-color-gray-95: #f1f2f4;
|
||||
--wa-color-gray-90: #e2e5e8;
|
||||
--wa-color-gray-80: #c2c9d0;
|
||||
--wa-color-gray-70: #a6b0ba;
|
||||
--wa-color-gray-60: #8897a3;
|
||||
--wa-color-gray-50: #657888;
|
||||
--wa-color-gray-40: #435c6f;
|
||||
--wa-color-gray-30: #2d485d;
|
||||
--wa-color-gray-20: #18354a;
|
||||
--wa-color-gray-10: #012034;
|
||||
--wa-color-gray-05: #001421;
|
||||
}
|
||||
|
||||
@@ -1,64 +1,40 @@
|
||||
:root,
|
||||
:host {
|
||||
--wa-color-rose-95: #fdeef4;
|
||||
--wa-color-rose-90: #fddde9;
|
||||
--wa-color-rose-80: #fbb6cf;
|
||||
--wa-color-rose-70: #f88fb4;
|
||||
--wa-color-rose-60: #ea6997;
|
||||
--wa-color-rose-50: #ca4171;
|
||||
--wa-color-rose-40: #a7204f;
|
||||
--wa-color-rose-30: #85183e;
|
||||
--wa-color-rose-20: #60112d;
|
||||
--wa-color-rose-10: #3b0b1c;
|
||||
--wa-color-rose-05: #240611;
|
||||
--wa-color-red-95: #ffefef;
|
||||
--wa-color-red-90: #ffdddd;
|
||||
--wa-color-red-80: #ffb7b7;
|
||||
--wa-color-red-70: #ff8e8e;
|
||||
--wa-color-red-60: #fd5f5f;
|
||||
--wa-color-red-50: #de3131;
|
||||
--wa-color-red-40: #b40917;
|
||||
--wa-color-red-30: #910000;
|
||||
--wa-color-red-20: #6d0000;
|
||||
--wa-color-red-10: #450000;
|
||||
--wa-color-red-05: #300000;
|
||||
|
||||
--wa-color-red-95: #ffeeef;
|
||||
--wa-color-red-90: #fdd;
|
||||
--wa-color-red-80: #ffb2b2;
|
||||
--wa-color-red-70: #ff8585;
|
||||
--wa-color-red-60: #ff5c5c;
|
||||
--wa-color-red-50: #e12124;
|
||||
--wa-color-red-40: #aa1d00;
|
||||
--wa-color-red-30: #8a0b00;
|
||||
--wa-color-red-20: #700000;
|
||||
--wa-color-red-10: #46000c;
|
||||
--wa-color-red-05: #2e0008;
|
||||
--wa-color-yellow-95: #fef3c1;
|
||||
--wa-color-yellow-90: #fee682;
|
||||
--wa-color-yellow-80: #fbc217;
|
||||
--wa-color-yellow-70: #f39b00;
|
||||
--wa-color-yellow-60: #e67700;
|
||||
--wa-color-yellow-50: #b75d00;
|
||||
--wa-color-yellow-40: #8c4600;
|
||||
--wa-color-yellow-30: #6f3600;
|
||||
--wa-color-yellow-20: #532600;
|
||||
--wa-color-yellow-10: #341500;
|
||||
--wa-color-yellow-05: #220c00;
|
||||
|
||||
--wa-color-yellow-95: #fff3bf;
|
||||
--wa-color-yellow-90: #f8e695;
|
||||
--wa-color-yellow-80: #eec637;
|
||||
--wa-color-yellow-70: #d8a815;
|
||||
--wa-color-yellow-60: #ce8500;
|
||||
--wa-color-yellow-50: #aa6300;
|
||||
--wa-color-yellow-40: #824c00;
|
||||
--wa-color-yellow-30: #663b00;
|
||||
--wa-color-yellow-20: #492b00;
|
||||
--wa-color-yellow-10: #2c1a00;
|
||||
--wa-color-yellow-05: #1b0e00;
|
||||
|
||||
--wa-color-lime-95: #e8f9c7;
|
||||
--wa-color-lime-90: #d2f19c;
|
||||
--wa-color-lime-80: #9edc41;
|
||||
--wa-color-lime-70: #7dc11d;
|
||||
--wa-color-lime-60: #68a514;
|
||||
--wa-color-lime-50: #50810b;
|
||||
--wa-color-lime-40: #3a630c;
|
||||
--wa-color-lime-30: #2b4e0b;
|
||||
--wa-color-lime-20: #1e3808;
|
||||
--wa-color-lime-10: #122206;
|
||||
--wa-color-lime-05: #081404;
|
||||
|
||||
--wa-color-green-95: #dbfadf;
|
||||
--wa-color-green-90: #bbf3c3;
|
||||
--wa-color-green-80: #79df8a;
|
||||
--wa-color-green-70: #4dc661;
|
||||
--wa-color-green-60: #35aa4a;
|
||||
--wa-color-green-50: #298539;
|
||||
--wa-color-green-40: #20652d;
|
||||
--wa-color-green-30: #165025;
|
||||
--wa-color-green-20: #0d391c;
|
||||
--wa-color-green-10: #062312;
|
||||
--wa-color-green-05: #03140c;
|
||||
--wa-color-green-95: #e0fae4;
|
||||
--wa-color-green-90: #baf4c2;
|
||||
--wa-color-green-80: #73e085;
|
||||
--wa-color-green-70: #46c65c;
|
||||
--wa-color-green-60: #33aa49;
|
||||
--wa-color-green-50: #2a863c;
|
||||
--wa-color-green-40: #20662e;
|
||||
--wa-color-green-30: #194f24;
|
||||
--wa-color-green-20: #123a1a;
|
||||
--wa-color-green-10: #0b2210;
|
||||
--wa-color-green-05: #07150a;
|
||||
|
||||
--wa-color-teal-95: #cafae6;
|
||||
--wa-color-teal-90: #aaf3d7;
|
||||
@@ -72,51 +48,51 @@
|
||||
--wa-color-teal-10: #00312b;
|
||||
--wa-color-teal-05: #001613;
|
||||
|
||||
--wa-color-blue-95: #e4f1ff;
|
||||
--wa-color-blue-90: #cee6ff;
|
||||
--wa-color-blue-80: #96ccff;
|
||||
--wa-color-blue-70: #53b4ff;
|
||||
--wa-color-blue-60: #349bf1;
|
||||
--wa-color-blue-50: #0079cd;
|
||||
--wa-color-blue-40: #005aa8;
|
||||
--wa-color-blue-30: #00458c;
|
||||
--wa-color-blue-20: #003073;
|
||||
--wa-color-blue-10: #00175c;
|
||||
--wa-color-blue-05: #000e39;
|
||||
--wa-color-blue-95: #e7f5ff;
|
||||
--wa-color-blue-90: #ceeaff;
|
||||
--wa-color-blue-80: #94d0fe;
|
||||
--wa-color-blue-70: #60b5f9;
|
||||
--wa-color-blue-60: #3299f0;
|
||||
--wa-color-blue-50: #1a77cc;
|
||||
--wa-color-blue-40: #165a9b;
|
||||
--wa-color-blue-30: #11477a;
|
||||
--wa-color-blue-20: #0d3459;
|
||||
--wa-color-blue-10: #071f35;
|
||||
--wa-color-blue-05: #051321;
|
||||
|
||||
--wa-color-indigo-95: #f4f0fe;
|
||||
--wa-color-indigo-90: #e9e2fe;
|
||||
--wa-color-indigo-80: #d0c1fc;
|
||||
--wa-color-indigo-70: #b8a2fa;
|
||||
--wa-color-indigo-60: #9f81f9;
|
||||
--wa-color-indigo-50: #7d59ea;
|
||||
--wa-color-indigo-40: #5f3dc4;
|
||||
--wa-color-indigo-30: #4b309b;
|
||||
--wa-color-indigo-20: #36236f;
|
||||
--wa-color-indigo-10: #211543;
|
||||
--wa-color-indigo-05: #130c27;
|
||||
--wa-color-indigo-95: #edf2ff;
|
||||
--wa-color-indigo-90: #dce5ff;
|
||||
--wa-color-indigo-80: #bac8ff;
|
||||
--wa-color-indigo-70: #96abff;
|
||||
--wa-color-indigo-60: #738efc;
|
||||
--wa-color-indigo-50: #486af1;
|
||||
--wa-color-indigo-40: #354dc3;
|
||||
--wa-color-indigo-30: #293c98;
|
||||
--wa-color-indigo-20: #1e2c70;
|
||||
--wa-color-indigo-10: #121a43;
|
||||
--wa-color-indigo-05: #0b102a;
|
||||
|
||||
--wa-color-violet-95: #fbeefe;
|
||||
--wa-color-violet-90: #f6defc;
|
||||
--wa-color-violet-80: #ecb8f8;
|
||||
--wa-color-violet-70: #e191f4;
|
||||
--wa-color-violet-60: #cd70e3;
|
||||
--wa-color-violet-50: #a84ebe;
|
||||
--wa-color-violet-40: #892f9f;
|
||||
--wa-color-violet-30: #6c257e;
|
||||
--wa-color-violet-20: #4e1b5a;
|
||||
--wa-color-violet-10: #2f1037;
|
||||
--wa-color-violet-05: #1c0920;
|
||||
--wa-color-violet-95: #f3f0ff;
|
||||
--wa-color-violet-90: #eae2ff;
|
||||
--wa-color-violet-80: #d1c0ff;
|
||||
--wa-color-violet-70: #b8a0fd;
|
||||
--wa-color-violet-60: #a080fb;
|
||||
--wa-color-violet-50: #7f57f5;
|
||||
--wa-color-violet-40: #603dc7;
|
||||
--wa-color-violet-30: #4c309c;
|
||||
--wa-color-violet-20: #372372;
|
||||
--wa-color-violet-10: #211544;
|
||||
--wa-color-violet-05: #150d2a;
|
||||
|
||||
--wa-color-gray-95: #f1f2f5;
|
||||
--wa-color-gray-90: #e3e6eb;
|
||||
--wa-color-gray-80: #c5cad4;
|
||||
--wa-color-gray-70: #a8afbf;
|
||||
--wa-color-gray-60: #8b95aa;
|
||||
--wa-color-gray-50: #677490;
|
||||
--wa-color-gray-40: #4a5877;
|
||||
--wa-color-gray-30: #3a455d;
|
||||
--wa-color-gray-20: #2a3142;
|
||||
--wa-color-gray-10: #191e28;
|
||||
--wa-color-gray-05: #0e1117;
|
||||
--wa-color-gray-95: #f1f2f4;
|
||||
--wa-color-gray-90: #e3e5ea;
|
||||
--wa-color-gray-80: #c7cad4;
|
||||
--wa-color-gray-70: #a9afbe;
|
||||
--wa-color-gray-60: #8d95a8;
|
||||
--wa-color-gray-50: #6a7591;
|
||||
--wa-color-gray-40: #4b5977;
|
||||
--wa-color-gray-30: #344566;
|
||||
--wa-color-gray-20: #1a3356;
|
||||
--wa-color-gray-10: #0e1e35;
|
||||
--wa-color-gray-05: #081220;
|
||||
}
|
||||
|
||||
@@ -1,17 +1,5 @@
|
||||
:root,
|
||||
:host {
|
||||
--wa-color-rose-95: #fdeff0;
|
||||
--wa-color-rose-90: #fadfe1;
|
||||
--wa-color-rose-80: #ecbec4;
|
||||
--wa-color-rose-70: #eb98a2;
|
||||
--wa-color-rose-60: #ed6b7e;
|
||||
--wa-color-rose-50: #d53752;
|
||||
--wa-color-rose-40: #ae1638;
|
||||
--wa-color-rose-30: #8b0d2c;
|
||||
--wa-color-rose-20: #620e30;
|
||||
--wa-color-rose-10: #3d0919;
|
||||
--wa-color-rose-05: #29030d;
|
||||
|
||||
--wa-color-red-95: #feeeee;
|
||||
--wa-color-red-90: #fedede;
|
||||
--wa-color-red-80: #fdb8b8;
|
||||
@@ -36,18 +24,6 @@
|
||||
--wa-color-yellow-10: #321606;
|
||||
--wa-color-yellow-05: #1f0c01;
|
||||
|
||||
--wa-color-lime-95: #e4fbb9;
|
||||
--wa-color-lime-90: #c9f47f;
|
||||
--wa-color-lime-80: #9cdc33;
|
||||
--wa-color-lime-70: #7dc115;
|
||||
--wa-color-lime-60: #6ba512;
|
||||
--wa-color-lime-50: #50810a;
|
||||
--wa-color-lime-40: #3d6208;
|
||||
--wa-color-lime-30: #304d09;
|
||||
--wa-color-lime-20: #23370a;
|
||||
--wa-color-lime-10: #152108;
|
||||
--wa-color-lime-05: #0b1302;
|
||||
|
||||
--wa-color-green-95: #e9f5ed;
|
||||
--wa-color-green-90: #cfedd9;
|
||||
--wa-color-green-80: #a2d5b4;
|
||||
@@ -108,15 +84,15 @@
|
||||
--wa-color-violet-10: #2e054e;
|
||||
--wa-color-violet-05: #1d0331;
|
||||
|
||||
--wa-color-gray-95: #f1f2f3;
|
||||
--wa-color-gray-90: #e5e6e7;
|
||||
--wa-color-gray-80: #c8c9cd;
|
||||
--wa-color-gray-70: #acafb4;
|
||||
--wa-color-gray-60: #8f95a0;
|
||||
--wa-color-gray-50: #6e7482;
|
||||
--wa-color-gray-40: #4f5967;
|
||||
--wa-color-gray-30: #3c4655;
|
||||
--wa-color-gray-20: #293240;
|
||||
--wa-color-gray-10: #171d2c;
|
||||
--wa-color-gray-05: #0d111b;
|
||||
--wa-color-gray-95: #f2f2f3;
|
||||
--wa-color-gray-90: #e5e5e8;
|
||||
--wa-color-gray-80: #c9c9cc;
|
||||
--wa-color-gray-70: #aeafb1;
|
||||
--wa-color-gray-60: #94959b;
|
||||
--wa-color-gray-50: #72747d;
|
||||
--wa-color-gray-40: #565861;
|
||||
--wa-color-gray-30: #43454d;
|
||||
--wa-color-gray-20: #313134;
|
||||
--wa-color-gray-10: #1d1d20;
|
||||
--wa-color-gray-05: #101113;
|
||||
}
|
||||
|
||||
@@ -1,17 +1,5 @@
|
||||
:root,
|
||||
:host {
|
||||
--wa-color-rose-95: #faeff6;
|
||||
--wa-color-rose-90: #f5e0ed;
|
||||
--wa-color-rose-80: #eabcd8;
|
||||
--wa-color-rose-70: #e09ac3;
|
||||
--wa-color-rose-60: #d476ae;
|
||||
--wa-color-rose-50: #c54490;
|
||||
--wa-color-rose-40: #ad0066;
|
||||
--wa-color-rose-30: #8a0051;
|
||||
--wa-color-rose-20: #67003d;
|
||||
--wa-color-rose-10: #410026;
|
||||
--wa-color-rose-05: #2a0019;
|
||||
|
||||
--wa-color-red-95: #fdeeef;
|
||||
--wa-color-red-90: #fcdfe0;
|
||||
--wa-color-red-80: #f8b9bc;
|
||||
@@ -36,18 +24,6 @@
|
||||
--wa-color-yellow-10: #2b1a02;
|
||||
--wa-color-yellow-05: #191008;
|
||||
|
||||
--wa-color-lime-95: #f1f3ec;
|
||||
--wa-color-lime-90: #e3e7da;
|
||||
--wa-color-lime-80: #c4cdb1;
|
||||
--wa-color-lime-70: #a6b48b;
|
||||
--wa-color-lime-60: #899c65;
|
||||
--wa-color-lime-50: #667e36;
|
||||
--wa-color-lime-40: #476017;
|
||||
--wa-color-lime-30: #384c12;
|
||||
--wa-color-lime-20: #29370d;
|
||||
--wa-color-lime-10: #182008;
|
||||
--wa-color-lime-05: #0e1304;
|
||||
|
||||
--wa-color-green-95: #ecf4f1;
|
||||
--wa-color-green-90: #dae9e3;
|
||||
--wa-color-green-80: #b0d1c4;
|
||||
|
||||
@@ -1,17 +1,5 @@
|
||||
:root,
|
||||
:host {
|
||||
--wa-color-rose-95: #f9f0f2;
|
||||
--wa-color-rose-90: #f3e2e7;
|
||||
--wa-color-rose-80: #e4bfca;
|
||||
--wa-color-rose-70: #d5a1b1;
|
||||
--wa-color-rose-60: #c28397;
|
||||
--wa-color-rose-50: #a76179;
|
||||
--wa-color-rose-40: #85455b;
|
||||
--wa-color-rose-30: #6b3448;
|
||||
--wa-color-rose-20: #512435;
|
||||
--wa-color-rose-10: #32131f;
|
||||
--wa-color-rose-05: #210b13;
|
||||
|
||||
--wa-color-red-95: #f9f0ee;
|
||||
--wa-color-red-90: #f5e2dd;
|
||||
--wa-color-red-80: #e8bfb5;
|
||||
@@ -36,18 +24,6 @@
|
||||
--wa-color-yellow-10: #2a1b00;
|
||||
--wa-color-yellow-05: #1b1000;
|
||||
|
||||
--wa-color-lime-95: #f0f2eb;
|
||||
--wa-color-lime-90: #e3e8da;
|
||||
--wa-color-lime-80: #c2ccaf;
|
||||
--wa-color-lime-70: #a6b48b;
|
||||
--wa-color-lime-60: #8a9b68;
|
||||
--wa-color-lime-50: #6b7c45;
|
||||
--wa-color-lime-40: #505e2d;
|
||||
--wa-color-lime-30: #3e4a20;
|
||||
--wa-color-lime-20: #2c3614;
|
||||
--wa-color-lime-10: #192008;
|
||||
--wa-color-lime-05: #0f1404;
|
||||
|
||||
--wa-color-green-95: #edf2ee;
|
||||
--wa-color-green-90: #dde8df;
|
||||
--wa-color-green-80: #b8cebc;
|
||||
|
||||
@@ -1,17 +1,5 @@
|
||||
:root,
|
||||
:host {
|
||||
--wa-color-rose-95: #ffecf8;
|
||||
--wa-color-rose-90: #ffdcf1;
|
||||
--wa-color-rose-80: #ffb2de;
|
||||
--wa-color-rose-70: #fe88c4;
|
||||
--wa-color-rose-60: #fa57a7;
|
||||
--wa-color-rose-50: #e30084;
|
||||
--wa-color-rose-40: #ae0068;
|
||||
--wa-color-rose-30: #890057;
|
||||
--wa-color-rose-20: #660043;
|
||||
--wa-color-rose-10: #400029;
|
||||
--wa-color-rose-05: #2c001b;
|
||||
|
||||
--wa-color-red-95: #ffeeee;
|
||||
--wa-color-red-90: #ffdddd;
|
||||
--wa-color-red-80: #ffb6b8;
|
||||
@@ -36,18 +24,6 @@
|
||||
--wa-color-yellow-10: #311613;
|
||||
--wa-color-yellow-05: #1f0d0b;
|
||||
|
||||
--wa-color-lime-95: #daff92;
|
||||
--wa-color-lime-90: #c1f759;
|
||||
--wa-color-lime-80: #9bdc1a;
|
||||
--wa-color-lime-70: #7ec200;
|
||||
--wa-color-lime-60: #60a600;
|
||||
--wa-color-lime-50: #3e8600;
|
||||
--wa-color-lime-40: #216600;
|
||||
--wa-color-lime-30: #135100;
|
||||
--wa-color-lime-20: #083b00;
|
||||
--wa-color-lime-10: #022400;
|
||||
--wa-color-lime-05: #011600;
|
||||
|
||||
--wa-color-green-95: #dafadc;
|
||||
--wa-color-green-90: #b9f4bc;
|
||||
--wa-color-green-80: #64e177;
|
||||
|
||||
@@ -1,86 +0,0 @@
|
||||
:root,
|
||||
:host {
|
||||
--wa-color-red-95: #ffefef;
|
||||
--wa-color-red-90: #ffdddc;
|
||||
--wa-color-red-80: #ffb7b6;
|
||||
--wa-color-red-70: #fc9090;
|
||||
--wa-color-red-60: #f2676c;
|
||||
--wa-color-red-50: #de2d44;
|
||||
--wa-color-red-40: #b11036;
|
||||
--wa-color-red-30: #861a2f;
|
||||
--wa-color-red-20: #641122;
|
||||
--wa-color-red-10: #400712;
|
||||
--wa-color-red-05: #2a030a;
|
||||
|
||||
--wa-color-yellow-95: #fdf3ba;
|
||||
--wa-color-yellow-90: #fee590;
|
||||
--wa-color-yellow-80: #fcc041;
|
||||
--wa-color-yellow-70: #f39b00;
|
||||
--wa-color-yellow-60: #e07b00;
|
||||
--wa-color-yellow-50: #bb5a00;
|
||||
--wa-color-yellow-40: #924200;
|
||||
--wa-color-yellow-30: #743200;
|
||||
--wa-color-yellow-20: #572300;
|
||||
--wa-color-yellow-10: #361300;
|
||||
--wa-color-yellow-05: #240b00;
|
||||
|
||||
--wa-color-green-95: #e2f9e2;
|
||||
--wa-color-green-90: #c2f2c1;
|
||||
--wa-color-green-80: #92da97;
|
||||
--wa-color-green-70: #5dc36f;
|
||||
--wa-color-green-60: #00ac49;
|
||||
--wa-color-green-50: #008825;
|
||||
--wa-color-green-40: #006800;
|
||||
--wa-color-green-30: #005300;
|
||||
--wa-color-green-20: #003c00;
|
||||
--wa-color-green-10: #002400;
|
||||
--wa-color-green-05: #001700;
|
||||
|
||||
--wa-color-blue-95: #e8f3ff;
|
||||
--wa-color-blue-90: #d1e8ff;
|
||||
--wa-color-blue-80: #9fceff;
|
||||
--wa-color-blue-70: #6eb3ff;
|
||||
--wa-color-blue-60: #3e96ff;
|
||||
--wa-color-blue-50: #0071ec;
|
||||
--wa-color-blue-40: #0053c0;
|
||||
--wa-color-blue-30: #003f9c;
|
||||
--wa-color-blue-20: #002d77;
|
||||
--wa-color-blue-10: #001a4e;
|
||||
--wa-color-blue-05: #000f35;
|
||||
|
||||
--wa-color-indigo-95: #f0f2fe;
|
||||
--wa-color-indigo-90: #e2e4fc;
|
||||
--wa-color-indigo-80: #c2c6f8;
|
||||
--wa-color-indigo-70: #a5a9f2;
|
||||
--wa-color-indigo-60: #8a8beb;
|
||||
--wa-color-indigo-50: #6b65e2;
|
||||
--wa-color-indigo-40: #5246c1;
|
||||
--wa-color-indigo-30: #412eaa;
|
||||
--wa-color-indigo-20: #321393;
|
||||
--wa-color-indigo-10: #1c006a;
|
||||
--wa-color-indigo-05: #130049;
|
||||
|
||||
--wa-color-violet-95: #f9effd;
|
||||
--wa-color-violet-90: #f4defb;
|
||||
--wa-color-violet-80: #e7baf7;
|
||||
--wa-color-violet-70: #d996ef;
|
||||
--wa-color-violet-60: #c674e1;
|
||||
--wa-color-violet-50: #a94dc6;
|
||||
--wa-color-violet-40: #8732a1;
|
||||
--wa-color-violet-30: #6d2283;
|
||||
--wa-color-violet-20: #521564;
|
||||
--wa-color-violet-10: #330940;
|
||||
--wa-color-violet-05: #22042b;
|
||||
|
||||
--wa-color-gray-95: #f1f2f3;
|
||||
--wa-color-gray-90: #e4e5e9;
|
||||
--wa-color-gray-80: #c7c9d0;
|
||||
--wa-color-gray-70: #abaeb9;
|
||||
--wa-color-gray-60: #9194a2;
|
||||
--wa-color-gray-50: #717584;
|
||||
--wa-color-gray-40: #545868;
|
||||
--wa-color-gray-30: #424554;
|
||||
--wa-color-gray-20: #2f323f;
|
||||
--wa-color-gray-10: #1b1d26;
|
||||
--wa-color-gray-05: #101219;
|
||||
}
|
||||
98
src/styles/color/vogue.css
Normal file
98
src/styles/color/vogue.css
Normal file
@@ -0,0 +1,98 @@
|
||||
:root,
|
||||
:host {
|
||||
--wa-color-red-95: #feeeee;
|
||||
--wa-color-red-90: #fedddd;
|
||||
--wa-color-red-80: #fdb8b8;
|
||||
--wa-color-red-70: #fb9191;
|
||||
--wa-color-red-60: #f66565;
|
||||
--wa-color-red-50: #e12b2b;
|
||||
--wa-color-red-40: #af1b1b;
|
||||
--wa-color-red-30: #851e1e;
|
||||
--wa-color-red-20: #641414;
|
||||
--wa-color-red-10: #400809;
|
||||
--wa-color-red-05: #2b0404;
|
||||
|
||||
--wa-color-yellow-95: #fef6ab;
|
||||
--wa-color-yellow-90: #ffe759;
|
||||
--wa-color-yellow-80: #f3c41a;
|
||||
--wa-color-yellow-70: #e0a502;
|
||||
--wa-color-yellow-60: #c88804;
|
||||
--wa-color-yellow-50: #a76706;
|
||||
--wa-color-yellow-40: #834b0f;
|
||||
--wa-color-yellow-30: #693910;
|
||||
--wa-color-yellow-20: #502809;
|
||||
--wa-color-yellow-10: #311704;
|
||||
--wa-color-yellow-05: #1f0e02;
|
||||
|
||||
--wa-color-green-95: #d6fbe3;
|
||||
--wa-color-green-90: #acf5c6;
|
||||
--wa-color-green-80: #58e38b;
|
||||
--wa-color-green-70: #25c861;
|
||||
--wa-color-green-60: #17ab4e;
|
||||
--wa-color-green-50: #158740;
|
||||
--wa-color-green-40: #166635;
|
||||
--wa-color-green-30: #13502b;
|
||||
--wa-color-green-20: #093a1d;
|
||||
--wa-color-green-10: #032311;
|
||||
--wa-color-green-05: #02160a;
|
||||
|
||||
--wa-color-teal-95: #d1fbf2;
|
||||
--wa-color-teal-90: #9bf6e4;
|
||||
--wa-color-teal-80: #43e0ca;
|
||||
--wa-color-teal-70: #1ac4b0;
|
||||
--wa-color-teal-60: #0ea798;
|
||||
--wa-color-teal-50: #0e837a;
|
||||
--wa-color-teal-40: #11635e;
|
||||
--wa-color-teal-30: #134d49;
|
||||
--wa-color-teal-20: #073938;
|
||||
--wa-color-teal-10: #022222;
|
||||
--wa-color-teal-05: #011515;
|
||||
|
||||
--wa-color-blue-95: #ebf3ff;
|
||||
--wa-color-blue-90: #d6e7fe;
|
||||
--wa-color-blue-80: #a4cefe;
|
||||
--wa-color-blue-70: #73b2fb;
|
||||
--wa-color-blue-60: #4d95f9;
|
||||
--wa-color-blue-50: #2b6df0;
|
||||
--wa-color-blue-40: #1d4bd3;
|
||||
--wa-color-blue-30: #1e3d9c;
|
||||
--wa-color-blue-20: #1c2e69;
|
||||
--wa-color-blue-10: #101b41;
|
||||
--wa-color-blue-05: #09102c;
|
||||
|
||||
--wa-color-indigo-95: #eef2ff;
|
||||
--wa-color-indigo-90: #dde5ff;
|
||||
--wa-color-indigo-80: #bbc8fd;
|
||||
--wa-color-indigo-70: #9caafb;
|
||||
--wa-color-indigo-60: #818bf8;
|
||||
--wa-color-indigo-50: #6164f0;
|
||||
--wa-color-indigo-40: #493fd8;
|
||||
--wa-color-indigo-30: #3932aa;
|
||||
--wa-color-indigo-20: #2b2871;
|
||||
--wa-color-indigo-10: #1b1842;
|
||||
--wa-color-indigo-05: #100f29;
|
||||
|
||||
--wa-color-violet-95: #f7efff;
|
||||
--wa-color-violet-90: #efe0ff;
|
||||
--wa-color-violet-80: #dcbdfe;
|
||||
--wa-color-violet-70: #cb99fd;
|
||||
--wa-color-violet-60: #b875fb;
|
||||
--wa-color-violet-50: #9e44f3;
|
||||
--wa-color-violet-40: #7e22cd;
|
||||
--wa-color-violet-30: #63209a;
|
||||
--wa-color-violet-20: #4b1079;
|
||||
--wa-color-violet-10: #2f0451;
|
||||
--wa-color-violet-05: #1e0238;
|
||||
|
||||
--wa-color-gray-95: #f1f2f4;
|
||||
--wa-color-gray-90: #e3e5e9;
|
||||
--wa-color-gray-80: #c5cad1;
|
||||
--wa-color-gray-70: #a9afba;
|
||||
--wa-color-gray-60: #8e95a2;
|
||||
--wa-color-gray-50: #6e7583;
|
||||
--wa-color-gray-40: #505968;
|
||||
--wa-color-gray-30: #3c4656;
|
||||
--wa-color-gray-20: #293342;
|
||||
--wa-color-gray-10: #161e2d;
|
||||
--wa-color-gray-05: #0c1220;
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
:root {
|
||||
/**
|
||||
* Shadows
|
||||
* Shadow effects indicate elevation and, at times, interactivity.
|
||||
* Elevation is defined by levels relative to the surface where the element rests -
|
||||
* * Inset sits below the surface for a punched-in effect
|
||||
* * Level 0 is the surface level
|
||||
* * Level 1 is slightly raised above the surface and often signifies that an element is interactive, such as a card
|
||||
* * Level 2 is raised above all other elements on the same surface, such as dropdown menus
|
||||
* * Level 3 is raised above all elements on all surfaces, such as dialogs and drawers
|
||||
*/
|
||||
/* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
|
||||
* The base value is intended for calculations and is not used by components directly. */
|
||||
--wa-shadow-blur-scale: 0;
|
||||
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-scale) * 0.75rem);
|
||||
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 1rem);
|
||||
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 1.5rem);
|
||||
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 2rem);
|
||||
|
||||
/* Offset values are used in pre-constructed shadows and may be used when creating custom shadows
|
||||
* or transforming elements with shadows. */
|
||||
--wa-shadow-offset-y-scale: 0;
|
||||
--wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-scale) * 0.75rem);
|
||||
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 1rem);
|
||||
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 1.5rem);
|
||||
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 2rem);
|
||||
|
||||
--wa-shadow-offset-x-scale: 0;
|
||||
--wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-scale) * 0.75rem);
|
||||
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 1rem);
|
||||
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 1.5rem);
|
||||
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 2rem);
|
||||
|
||||
--wa-shadow-xs: inset var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
|
||||
var(--wa-color-shadow);
|
||||
--wa-shadow-level-0: none;
|
||||
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--wa-color-shadow);
|
||||
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m) var(--wa-color-shadow);
|
||||
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l) var(--wa-color-shadow);
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
:root {
|
||||
/**
|
||||
* Shadows
|
||||
* Shadow effects indicate elevation and, at times, interactivity.
|
||||
* Elevation is defined by levels relative to the surface where the element rests -
|
||||
* * Inset sits below the surface for a punched-in effect
|
||||
* * Level 0 is the surface level
|
||||
* * Level 1 is slightly raised above the surface and often signifies that an element is interactive, such as a card
|
||||
* * Level 2 is raised above all other elements on the same surface, such as dropdown menus
|
||||
* * Level 3 is raised above all elements on all surfaces, such as dialogs and drawers
|
||||
*/
|
||||
/* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
|
||||
* The base value is intended for calculations and is not used by components directly. */
|
||||
--wa-shadow-blur-scale: 0.125;
|
||||
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-scale) * 0.75rem);
|
||||
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 1rem);
|
||||
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 1.5rem);
|
||||
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 2rem);
|
||||
|
||||
/* Offset values are used in pre-constructed shadows and may be used when creating custom shadows
|
||||
* or transforming elements with shadows. */
|
||||
--wa-shadow-offset-y-scale: 0.1;
|
||||
--wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-scale) * 0.75rem);
|
||||
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 1rem);
|
||||
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 1.5rem);
|
||||
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 2rem);
|
||||
|
||||
--wa-shadow-offset-x-scale: 0;
|
||||
--wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-scale) * 0.75rem);
|
||||
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 1rem);
|
||||
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 1.5rem);
|
||||
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 2rem);
|
||||
|
||||
--wa-shadow-xs: inset var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
|
||||
var(--wa-color-shadow);
|
||||
--wa-shadow-level-0: none;
|
||||
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--wa-color-shadow);
|
||||
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m) var(--wa-color-shadow);
|
||||
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l) var(--wa-color-shadow);
|
||||
}
|
||||
@@ -1,95 +0,0 @@
|
||||
:root {
|
||||
/**
|
||||
* Shadows
|
||||
* Shadow effects indicate elevation and, at times, interactivity.
|
||||
* Elevation is defined by levels relative to the surface where the element rests -
|
||||
* * Inset sits below the surface for a punched-in effect
|
||||
* * Level 0 is the surface level
|
||||
* * Level 1 is slightly raised above the surface and often signifies that an element is interactive, such as a card
|
||||
* * Level 2 is raised above all other elements on the same surface, such as dropdown menus
|
||||
* * Level 3 is raised above all elements on all surfaces, such as dialogs and drawers
|
||||
*/
|
||||
/* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
|
||||
* The base value is intended for calculations and is not used by components directly. */
|
||||
--wa-shadow-blur-scale: 0;
|
||||
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-scale) * 0.75rem);
|
||||
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 1rem);
|
||||
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 1.5rem);
|
||||
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 2rem);
|
||||
|
||||
/* Offset values are used in pre-constructed shadows and may be used when creating custom shadows
|
||||
* or transforming elements with shadows. */
|
||||
--wa-shadow-offset-y-scale: 0.25;
|
||||
--wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-scale) * 0.75rem);
|
||||
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 1rem);
|
||||
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 1.5rem);
|
||||
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 2rem);
|
||||
|
||||
--wa-shadow-offset-x-scale: 0.25;
|
||||
--wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-scale) * 0.75rem);
|
||||
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 1rem);
|
||||
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 1.5rem);
|
||||
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 2rem);
|
||||
|
||||
--wa-shadow-xs: inset var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
|
||||
var(--wa-color-shadow);
|
||||
--wa-shadow-level-0: none;
|
||||
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--wa-color-shadow);
|
||||
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m) var(--wa-color-shadow);
|
||||
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l) var(--wa-color-shadow);
|
||||
}
|
||||
|
||||
/* #region Buttons */
|
||||
wa-button {
|
||||
--wa-transition-slow: 0ms;
|
||||
--wa-transition-normal: 0ms;
|
||||
--wa-transition-fast: 0ms;
|
||||
|
||||
&:not([appearance='plain']) {
|
||||
--box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
|
||||
var(--box-shadow-color);
|
||||
margin-bottom: var(--wa-shadow-offset-y-s);
|
||||
margin-right: var(--wa-shadow-offset-x-s);
|
||||
|
||||
&:active {
|
||||
--box-shadow: none;
|
||||
transform: translateX(var(--wa-shadow-offset-x-s)) translateY(var(--wa-shadow-offset-y-s));
|
||||
}
|
||||
}
|
||||
&[variant='brand'] {
|
||||
--box-shadow-color: var(--wa-color-brand-border-loud);
|
||||
}
|
||||
|
||||
&[variant='success'] {
|
||||
--box-shadow-color: var(--wa-color-success-border-loud);
|
||||
}
|
||||
|
||||
&[variant='neutral'] {
|
||||
--box-shadow-color: var(--wa-color-neutral-border-loud);
|
||||
}
|
||||
|
||||
&[variant='warning'] {
|
||||
--box-shadow-color: var(--wa-color-warning-border-loud);
|
||||
}
|
||||
|
||||
&[variant='danger'] {
|
||||
--box-shadow-color: var(--wa-color-danger-border-loud);
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Inputs */
|
||||
wa-input,
|
||||
wa-select,
|
||||
wa-textarea {
|
||||
&:not([appearance='filled']):not([disabled]) {
|
||||
--box-shadow: var(--wa-shadow-xs);
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Progress bar */
|
||||
wa-progress-bar {
|
||||
--box-shadow: var(--wa-shadow-xs);
|
||||
}
|
||||
/* #endregion */
|
||||
@@ -1,92 +0,0 @@
|
||||
:root {
|
||||
/**
|
||||
* Shadows
|
||||
* Shadow effects indicate elevation and, at times, interactivity.
|
||||
* Elevation is defined by levels relative to the surface where the element rests -
|
||||
* * Inset sits below the surface for a punched-in effect
|
||||
* * Level 0 is the surface level
|
||||
* * Level 1 is slightly raised above the surface and often signifies that an element is interactive, such as a card
|
||||
* * Level 2 is raised above all other elements on the same surface, such as dropdown menus
|
||||
* * Level 3 is raised above all elements on all surfaces, such as dialogs and drawers
|
||||
*/
|
||||
/* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
|
||||
* The base value is intended for calculations and is not used by components directly. */
|
||||
--wa-shadow-blur-scale: 0.125;
|
||||
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-scale) * 0.75rem);
|
||||
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 1rem);
|
||||
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 1.5rem);
|
||||
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 2rem);
|
||||
|
||||
/* Offset values are used in pre-constructed shadows and may be used when creating custom shadows
|
||||
* or transforming elements with shadows. */
|
||||
--wa-shadow-offset-y-scale: 0.125;
|
||||
--wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-scale) * 0.75rem);
|
||||
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 1rem);
|
||||
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 1.5rem);
|
||||
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 2rem);
|
||||
|
||||
--wa-shadow-offset-x-scale: 0;
|
||||
--wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-scale) * 0.75rem);
|
||||
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 1rem);
|
||||
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 1.5rem);
|
||||
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 2rem);
|
||||
|
||||
--wa-shadow-xs: inset var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
|
||||
var(--wa-color-shadow);
|
||||
--wa-shadow-level-0: none;
|
||||
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--wa-color-shadow);
|
||||
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m) var(--wa-color-shadow);
|
||||
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l) var(--wa-color-shadow);
|
||||
}
|
||||
|
||||
/* #region Buttons */
|
||||
wa-button:not([appearance='plain']) {
|
||||
--box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
|
||||
inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.2) /* inner highlight */,
|
||||
inset 0 -0.0625rem 0.0625rem 0 rgb(0 0 0 / 0.2) /* inner shadow */, var(--wa-shadow-s) /* outer shadow */;
|
||||
|
||||
margin-bottom: var(--wa-shadow-offset-y-s);
|
||||
|
||||
&:not([disabled]) {
|
||||
&:active {
|
||||
--box-shadow: inset 0 0 0 0 transparent /* shine */,
|
||||
inset 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.1) /* inner highlight */,
|
||||
inset 0 -0.0625rem 0.25rem 0 rgb(0 0 0 / 0.1) /* inner shadow */, 0 0 0 0 transparent /* outer shadow */;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Inputs */
|
||||
wa-input,
|
||||
wa-select,
|
||||
wa-textarea {
|
||||
&:not([appearance='filled']):not([disabled]) {
|
||||
--box-shadow: var(--wa-shadow-xs);
|
||||
}
|
||||
}
|
||||
|
||||
wa-checkbox {
|
||||
--background-checked: linear-gradient(
|
||||
to bottom,
|
||||
var(--wa-form-control-activated-color),
|
||||
var(--wa-color-brand-border-loud)
|
||||
);
|
||||
|
||||
&:not([checked]):not([indeterminate]) {
|
||||
--box-shadow: var(--wa-shadow-xs);
|
||||
}
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--thumb-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
|
||||
inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.1) /* inner highlight */,
|
||||
inset 0 -0.0625rem 0.0625rem 0 rgb(0 0 0 / 0.1) /* inner shadow */, var(--wa-shadow-s) /* outer shadow */;
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Progress bar */
|
||||
wa-progress-bar {
|
||||
--box-shadow: var(--wa-shadow-xs);
|
||||
}
|
||||
/* #endregion */
|
||||
@@ -1,296 +0,0 @@
|
||||
:root {
|
||||
/**
|
||||
* Shadows
|
||||
* Shadow effects indicate elevation and, at times, interactivity.
|
||||
* Elevation is defined by levels relative to the surface where the element rests -
|
||||
* * Inset sits below the surface for a punched-in effect
|
||||
* * Level 0 is the surface level
|
||||
* * Level 1 is slightly raised above the surface and often signifies that an element is interactive, such as a card
|
||||
* * Level 2 is raised above all other elements on the same surface, such as dropdown menus
|
||||
* * Level 3 is raised above all elements on all surfaces, such as dialogs and drawers
|
||||
*/
|
||||
/* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
|
||||
* The base value is intended for calculations and is not used by components directly. */
|
||||
--wa-shadow-blur-scale: 0.375;
|
||||
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-scale) * 0.75rem);
|
||||
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 1rem);
|
||||
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 1.5rem);
|
||||
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 2rem);
|
||||
|
||||
/* Offset values are used in pre-constructed shadows and may be used when creating custom shadows
|
||||
* or transforming elements with shadows. */
|
||||
--wa-shadow-offset-y-scale: 0.25;
|
||||
--wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-scale) * 0.75rem);
|
||||
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 1rem);
|
||||
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 1.5rem);
|
||||
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 2rem);
|
||||
|
||||
--wa-shadow-offset-x-scale: 0;
|
||||
--wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-scale) * 0.75rem);
|
||||
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 1rem);
|
||||
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 1.5rem);
|
||||
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 2rem);
|
||||
|
||||
--wa-shadow-xs: inset var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
|
||||
var(--wa-color-shadow);
|
||||
--wa-shadow-level-0: none;
|
||||
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--wa-color-shadow);
|
||||
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m) var(--wa-color-shadow);
|
||||
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l) var(--wa-color-shadow);
|
||||
|
||||
/**
|
||||
* Background effects
|
||||
*/
|
||||
--wa-background-transparency-percent: 12%;
|
||||
--wa-filter-blur: blur(0.3125rem);
|
||||
}
|
||||
|
||||
/* #region Alerts */
|
||||
@supports (backdrop-filter: blur()) or (-webkit-backdrop-filter: blur()) {
|
||||
wa-alert {
|
||||
&::part(base) {
|
||||
-webkit-backdrop-filter: var(--wa-filter-blur);
|
||||
backdrop-filter: var(--wa-filter-blur);
|
||||
}
|
||||
|
||||
&[variant='brand'] {
|
||||
--background: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-brand-fill-quiet),
|
||||
transparent var(--wa-background-transparency-percent)
|
||||
);
|
||||
}
|
||||
|
||||
&[variant='success'] {
|
||||
--background: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-success-fill-quiet),
|
||||
transparent var(--wa-background-transparency-percent)
|
||||
);
|
||||
}
|
||||
|
||||
&[variant='neutral'] {
|
||||
--background: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-neutral-fill-quiet),
|
||||
transparent var(--wa-background-transparency-percent)
|
||||
);
|
||||
}
|
||||
|
||||
&[variant='warning'] {
|
||||
--background: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-warning-fill-quiet),
|
||||
transparent var(--wa-background-transparency-percent)
|
||||
);
|
||||
}
|
||||
|
||||
&[variant='danger'] {
|
||||
--background: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-danger-fill-quiet),
|
||||
transparent var(--wa-background-transparency-percent)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Buttons */
|
||||
wa-button:not([appearance='plain']) {
|
||||
--box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
|
||||
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
|
||||
inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
|
||||
inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
|
||||
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
|
||||
|
||||
margin-bottom: var(--wa-shadow-offset-y-xs);
|
||||
transition: transform var(--wa-transition-fast);
|
||||
|
||||
&:not([disabled]) {
|
||||
&:hover {
|
||||
--box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
|
||||
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
|
||||
inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
|
||||
inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
|
||||
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.1) /* bottom highlight */, var(--wa-shadow-m) /* outer shadow */;
|
||||
}
|
||||
|
||||
&:active {
|
||||
--box-shadow: inset 0 -0.0625rem 0 0 rgb(255 255 255 / 0.1) /* shine */,
|
||||
inset 0 0.125rem 0 0 rgb(0 0 0 / 0.1) /* top highlight */,
|
||||
inset 0 1.25em 0 0 rgb(255 255 255 / 0.08) /* upper tint */,
|
||||
inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
|
||||
inset 0 -0.125rem 0 0 rgb(255 255 255 / 0.04) /* bottom highlight */, 0 0 0 0 transparent /* outer shadow */;
|
||||
|
||||
transform: translateY(var(--wa-shadow-offset-y-xs));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
wa-button:not([appearance='outlined']) {
|
||||
&[variant='brand'] {
|
||||
--background: linear-gradient(var(--wa-color-brand-fill-loud) 25%, var(--wa-color-brand-fill-loud));
|
||||
--background-hover: linear-gradient(
|
||||
color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-hover)) 25%,
|
||||
color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-hover))
|
||||
);
|
||||
--background-active: linear-gradient(
|
||||
color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-active)),
|
||||
var(--wa-color-brand-fill-loud)
|
||||
);
|
||||
--border-color: var(--wa-color-brand-fill-loud)
|
||||
color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-brand-fill-loud))
|
||||
var(--wa-color-brand-fill-loud);
|
||||
--border-color-hover: var(--border-color);
|
||||
--border-color-active: var(--wa-color-brand-fill-loud);
|
||||
}
|
||||
|
||||
&[variant='success'] {
|
||||
--background: linear-gradient(var(--wa-color-success-fill-loud) 25%, var(--wa-color-success-fill-loud));
|
||||
--background-hover: linear-gradient(
|
||||
color-mix(in oklab, var(--wa-color-success-fill-loud), var(--wa-color-mix-hover)) 25%,
|
||||
color-mix(in oklab, var(--wa-color-success-fill-loud), var(--wa-color-mix-hover))
|
||||
);
|
||||
--background-active: linear-gradient(
|
||||
color-mix(in oklab, var(--wa-color-success-fill-loud), var(--wa-color-mix-active)),
|
||||
var(--wa-color-success-fill-loud)
|
||||
);
|
||||
--border-color: var(--wa-color-success-fill-loud)
|
||||
color-mix(in oklab, var(--wa-color-success-fill-loud), var(--wa-color-success-fill-loud))
|
||||
var(--wa-color-success-fill-loud);
|
||||
--border-color-hover: var(--border-color);
|
||||
--border-color-active: var(--wa-color-success-fill-loud);
|
||||
}
|
||||
|
||||
&[variant='neutral'] {
|
||||
--background: linear-gradient(var(--wa-color-neutral-fill-loud) 25%, var(--wa-color-neutral-fill-loud));
|
||||
--background-hover: linear-gradient(
|
||||
color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-mix-hover)) 25%,
|
||||
color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-mix-hover))
|
||||
);
|
||||
--background-active: linear-gradient(
|
||||
color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-mix-active)),
|
||||
var(--wa-color-neutral-fill-loud)
|
||||
);
|
||||
--border-color: var(--wa-color-neutral-fill-loud)
|
||||
color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-neutral-fill-loud))
|
||||
var(--wa-color-neutral-fill-loud);
|
||||
--border-color-hover: var(--border-color);
|
||||
--border-color-active: var(--wa-color-neutral-fill-loud);
|
||||
}
|
||||
|
||||
&[variant='warning'] {
|
||||
--background: linear-gradient(var(--wa-color-warning-fill-loud) 25%, var(--wa-color-warning-fill-loud));
|
||||
--background-hover: linear-gradient(
|
||||
color-mix(in oklab, var(--wa-color-warning-fill-loud), var(--wa-color-mix-hover)) 25%,
|
||||
color-mix(in oklab, var(--wa-color-warning-fill-loud), var(--wa-color-mix-hover))
|
||||
);
|
||||
--background-active: linear-gradient(
|
||||
color-mix(in oklab, var(--wa-color-warning-fill-loud), var(--wa-color-mix-active)),
|
||||
var(--wa-color-warning-fill-loud)
|
||||
);
|
||||
--border-color: var(--wa-color-warning-fill-loud)
|
||||
color-mix(in oklab, var(--wa-color-warning-fill-loud), var(--wa-color-warning-fill-loud))
|
||||
var(--wa-color-warning-fill-loud);
|
||||
--border-color-hover: var(--border-color);
|
||||
--border-color-active: var(--wa-color-warning-fill-loud);
|
||||
}
|
||||
|
||||
&[variant='danger'] {
|
||||
--background: linear-gradient(var(--wa-color-danger-fill-loud) 25%, var(--wa-color-danger-fill-loud));
|
||||
--background-hover: linear-gradient(
|
||||
color-mix(in oklab, var(--wa-color-danger-fill-loud), var(--wa-color-mix-hover)) 25%,
|
||||
color-mix(in oklab, var(--wa-color-danger-fill-loud), var(--wa-color-mix-hover))
|
||||
);
|
||||
--background-active: linear-gradient(
|
||||
color-mix(in oklab, var(--wa-color-danger-fill-loud), var(--wa-color-mix-active)),
|
||||
var(--wa-color-danger-fill-loud)
|
||||
);
|
||||
--border-color: var(--wa-color-danger-fill-loud)
|
||||
color-mix(in oklab, var(--wa-color-danger-fill-loud), var(--wa-color-danger-fill-loud))
|
||||
var(--wa-color-danger-fill-loud);
|
||||
--border-color-hover: var(--border-color);
|
||||
--border-color-active: var(--wa-color-danger-fill-loud);
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Cards */
|
||||
@supports (backdrop-filter: blur()) or (-webkit-backdrop-filter: blur()) {
|
||||
wa-card {
|
||||
--background: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-surface-raised),
|
||||
transparent var(--wa-background-transparency-percent)
|
||||
);
|
||||
|
||||
/* &::part(base) {
|
||||
-webkit-backdrop-filter: var(--wa-filter-blur);
|
||||
backdrop-filter: var(--wa-filter-blur);
|
||||
} */
|
||||
/* causes popups descendants (e.g. tooltips and dropdowns) to be mispositioned */
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Inputs */
|
||||
wa-input:not(:focus),
|
||||
wa-select {
|
||||
&:not([appearance='filled']):not([disabled]) {
|
||||
--box-shadow: var(--wa-shadow-xs), inset 0 1.25em 0 0 rgb(0 0 0 / 0.02) /* upper tint */,
|
||||
inset 0 -1.125em 0 0 rgb(255 255 255 / 0.05) /* lower shade */;
|
||||
}
|
||||
}
|
||||
|
||||
wa-textarea:not(:focus) {
|
||||
&:not([appearance='filled']):not([disabled]) {
|
||||
--box-shadow: var(--wa-shadow-xs);
|
||||
}
|
||||
}
|
||||
|
||||
@supports (backdrop-filter: blur()) or (-webkit-backdrop-filter: blur()) {
|
||||
wa-select::part(listbox) {
|
||||
background: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-surface-raised),
|
||||
transparent var(--wa-background-transparency-percent)
|
||||
);
|
||||
-webkit-backdrop-filter: var(--wa-filter-blur);
|
||||
backdrop-filter: var(--wa-filter-blur);
|
||||
}
|
||||
}
|
||||
|
||||
wa-checkbox {
|
||||
--background-checked: linear-gradient(
|
||||
to bottom,
|
||||
var(--wa-form-control-activated-color),
|
||||
var(--wa-color-brand-border-loud)
|
||||
);
|
||||
|
||||
&:not([checked]):not([indeterminate]) {
|
||||
--box-shadow: var(--wa-shadow-xs);
|
||||
}
|
||||
|
||||
&[checked] {
|
||||
--box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
|
||||
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
|
||||
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
|
||||
}
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--box-shadow: var(--wa-shadow-xs);
|
||||
--thumb-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
|
||||
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
|
||||
inset 0 calc(var(--height) * 0.25) 0 0 rgb(255 255 255 / 0.04) /* upper tint */,
|
||||
inset 0 calc(var(--height) * -0.25) 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
|
||||
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Progress bar */
|
||||
wa-progress-bar {
|
||||
--box-shadow: var(--wa-shadow-xs);
|
||||
}
|
||||
/* #endregion */
|
||||
@@ -1,5 +1,5 @@
|
||||
.wa-invalid {
|
||||
--wa-form-control-resting-color: var(--wa-color-danger-border-loud);
|
||||
--wa-form-control-border-color: var(--wa-color-danger-border-loud);
|
||||
--wa-form-control-activated-color: var(--wa-color-danger-fill-loud);
|
||||
--wa-form-control-value-color: var(--wa-color-danger-on-quiet);
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
}
|
||||
|
||||
.wa-valid {
|
||||
--wa-form-control-resting-color: var(--wa-color-success-border-loud);
|
||||
--wa-form-control-border-color: var(--wa-color-success-border-loud);
|
||||
--wa-form-control-activated-color: var(--wa-color-success-fill-loud);
|
||||
--wa-form-control-value-color: var(--wa-color-success-on-quiet);
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@ label:has(input[type='checkbox']):where(:not(:host *)),
|
||||
:host {
|
||||
--background-color: var(--wa-form-control-background-color);
|
||||
--background-color-checked: var(--wa-form-control-activated-color);
|
||||
--border-color: var(--wa-form-control-resting-color);
|
||||
--border-color: var(--wa-form-control-border-color);
|
||||
--border-color-checked: var(--wa-form-control-activated-color);
|
||||
--border-radius: min(
|
||||
calc(var(--toggle-size) * 0.375),
|
||||
|
||||
@@ -2,12 +2,11 @@ input[type='color'] {
|
||||
display: block;
|
||||
border-radius: calc(infinity * 1px);
|
||||
background: transparent;
|
||||
padding: 3px;
|
||||
padding: var(--wa-form-control-border-width);
|
||||
width: calc(var(--wa-form-control-height) - 2px);
|
||||
height: calc(var(--wa-form-control-height) - 2px);
|
||||
border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-form-control-resting-color);
|
||||
border: var(--wa-form-control-border-width) var(--wa-border-style) var(--wa-form-control-border-color);
|
||||
cursor: pointer;
|
||||
margin-block-start: 3px;
|
||||
forced-color-adjust: none;
|
||||
|
||||
&::-webkit-color-swatch-wrapper {
|
||||
|
||||
@@ -14,13 +14,22 @@ input:where(:not(
|
||||
[type='reset'],
|
||||
[type='submit']
|
||||
)) {
|
||||
&:not(:host *) {
|
||||
/* Styling root, i.e. excluding elements within a host.
|
||||
This is so that these properties can be overridden.
|
||||
*/
|
||||
&:not(:host *),
|
||||
/* Safari and FF don't like :host:not(:host *) or :where(:host) so we need to add :host explicitly.
|
||||
However, we can't just specify :host, because then it would become & :host which matches nothing.
|
||||
:host(*) is the same as :host and the & prevents it from becoming a descendant selector.
|
||||
*/
|
||||
:host(:is(&, *)) {
|
||||
/* Defaults for root element. */
|
||||
--outlined-background-color: var(--wa-form-control-background-color);
|
||||
--outlined-border-color: var(--wa-form-control-resting-color);
|
||||
--outlined-border-color: var(--wa-form-control-border-color);
|
||||
--outlined-text-color: var(--wa-form-control-value-color);
|
||||
|
||||
:where(&) {
|
||||
:where(&),
|
||||
:host(:where(&, *)) {
|
||||
/* Defaults with 0 specificity.
|
||||
* Do NOT reset --background-color and --border-color here so they trickle in from the appearance utils
|
||||
* Instead we provide the fallback when setting
|
||||
@@ -32,7 +41,7 @@ input:where(:not(
|
||||
|
||||
/* Style native inputs and <wa-input>'s visible container */
|
||||
&:not(.wa-text-field *, :host input, :host textarea) {
|
||||
border-color: var(--border-color, var(--wa-form-control-resting-color));
|
||||
border-color: var(--border-color, var(--wa-form-control-border-color));
|
||||
border-radius: var(--wa-form-control-border-radius);
|
||||
border-style: var(--wa-form-control-border-style);
|
||||
cursor: text;
|
||||
|
||||
@@ -3,7 +3,7 @@ label:has(input[type='radio']),
|
||||
:host {
|
||||
--background-color: var(--wa-form-control-background-color);
|
||||
--background-color-checked: var(--background-color);
|
||||
--border-color: var(--wa-form-control-resting-color);
|
||||
--border-color: var(--wa-form-control-border-color);
|
||||
--border-color-checked: var(--wa-form-control-activated-color);
|
||||
--border-style: var(--wa-border-style);
|
||||
--border-width: var(--wa-form-control-border-width);
|
||||
|
||||
@@ -1,41 +1,51 @@
|
||||
select,
|
||||
label:has(select),
|
||||
:host {
|
||||
--background-color: var(--wa-form-control-background-color);
|
||||
--border-color: var(--wa-form-control-resting-color);
|
||||
--border-radius: var(--wa-form-control-border-radius);
|
||||
--border-style: var(--wa-form-control-border-style);
|
||||
--border-width: var(--wa-form-control-border-width);
|
||||
--box-shadow: initial;
|
||||
/* Defaults for root element. */
|
||||
--outlined-background-color: var(--wa-form-control-background-color);
|
||||
--outlined-border-color: var(--wa-form-control-border-color);
|
||||
--outlined-text-color: var(--wa-form-control-value-color);
|
||||
|
||||
/* Safari and FF don't like :where(:host) so we need to add :host explicitly.
|
||||
However, we can't just specify :host, because then it would become & :host which matches nothing.
|
||||
:host(*) is the same as :host and the & prevents it from becoming a descendant selector.
|
||||
*/
|
||||
:where(&),
|
||||
:host(:where(&, *)) {
|
||||
/* Defaults with 0 specificity.
|
||||
* Do NOT reset --background-color and --border-color here so they trickle in from the appearance utils
|
||||
* Instead we provide the fallback when setting
|
||||
*/
|
||||
--border-width: var(--wa-form-control-border-width);
|
||||
--box-shadow: initial;
|
||||
}
|
||||
}
|
||||
|
||||
select,
|
||||
:host [part~='combobox'] {
|
||||
background-color: var(--background-color);
|
||||
border-color: var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
border-style: var(--border-style);
|
||||
background-color: var(--background-color, var(--wa-form-control-background-color));
|
||||
border-color: var(--border-color, var(--wa-form-control-border-color));
|
||||
border-radius: var(--wa-form-control-border-radius);
|
||||
border-style: var(--wa-form-control-border-style);
|
||||
border-width: var(--border-width);
|
||||
box-shadow: var(--box-shadow);
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
color: var(--wa-form-control-value-color);
|
||||
font-size: var(--wa-size);
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
font-size: var(--wa-size);
|
||||
font-weight: var(--wa-form-control-value-font-weight);
|
||||
line-height: var(--wa-form-control-value-line-height);
|
||||
vertical-align: middle;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
padding: var(--wa-space-smaller) var(--wa-space);
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
transition:
|
||||
background var(--wa-transition-normal),
|
||||
background-color var(--wa-transition-normal),
|
||||
border var(--wa-transition-normal),
|
||||
box-shadow var(--wa-transition-normal),
|
||||
color var(--wa-transition-normal),
|
||||
outline var(--wa-transition-fast);
|
||||
transition-timing-function: var(--wa-transition-easing);
|
||||
|
||||
padding: var(--wa-space-smaller) var(--wa-space);
|
||||
}
|
||||
|
||||
/* Add ellipses to multi select options */
|
||||
@@ -66,15 +76,16 @@ select {
|
||||
}
|
||||
label:has(select) {
|
||||
position: relative;
|
||||
--icon-caret: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
background-color: var(--wa-color-neutral-on-quiet);
|
||||
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>')
|
||||
center no-repeat;
|
||||
mask: var(--icon-caret) 50% 50% no-repeat;
|
||||
width: 1rem;
|
||||
height: var(--wa-form-control-height);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
bottom: var(--wa-form-control-border-width);
|
||||
right: var(--wa-space);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,487 +1,243 @@
|
||||
@import '../depth/3_punchy.css'; /* depth_0_flat.css, depth_1_semiflat.css, depth_2_chunky.css, depth_3_punchy.css, depth_4_glossy.css */
|
||||
@import url('../color/rudimentary.css');
|
||||
@import url('default/color-semantic.css');
|
||||
@import url('default/space.css');
|
||||
@import url('default/outlines.css');
|
||||
@import url('default/typography.css');
|
||||
@import url('default/rounding.css');
|
||||
@import url('default/shadows.css');
|
||||
@import url('default/transitions.css');
|
||||
@import url('default/groups.css');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
|
||||
|
||||
:root,
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-active-light {
|
||||
.wa-theme-active,
|
||||
.wa-light {
|
||||
color-scheme: light;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/**
|
||||
* Primitive colors
|
||||
* Each color is identified by a number that corresponds to its lightness value, where 100 is lightest (white) and 0 is darkest (black).
|
||||
* Lightness on this scale is directly related to relative luminance, so each lightness value has uniform WCAG 2.1 contrast across hues.
|
||||
* A difference of 40 between lightness values guarantees a minimum 3:1 contrast ratio.
|
||||
* A difference of 50 between lightness values guarantees a minimum 4.5:1 contrast ratio.
|
||||
* A difference of 60 between lightness values guarantees a minimum 7:1 contrast ratio.
|
||||
* Foundational Colors
|
||||
*/
|
||||
--wa-color-red-95: #ffeeee;
|
||||
--wa-color-red-90: #ffdddd;
|
||||
--wa-color-red-80: #ffb6b8;
|
||||
--wa-color-red-70: #fb9191;
|
||||
--wa-color-red-60: #f16b5e;
|
||||
--wa-color-red-50: #da3c06;
|
||||
--wa-color-red-40: #a62c00;
|
||||
--wa-color-red-30: #812500;
|
||||
--wa-color-red-20: #601a00;
|
||||
--wa-color-red-10: #3d0d00;
|
||||
--wa-color-red-05: #290600;
|
||||
--wa-color-text-normal: var(--wa-color-gray-05);
|
||||
--wa-color-text-link: var(--wa-color-green-40);
|
||||
|
||||
--wa-color-yellow-95: #fff497;
|
||||
--wa-color-yellow-90: #ffe571;
|
||||
--wa-color-yellow-80: #ffbd31;
|
||||
--wa-color-yellow-70: #f09d27;
|
||||
--wa-color-yellow-60: #d67f31;
|
||||
--wa-color-yellow-50: #b1612d;
|
||||
--wa-color-yellow-40: #8b4527;
|
||||
--wa-color-yellow-30: #703422;
|
||||
--wa-color-yellow-20: #53251c;
|
||||
--wa-color-yellow-10: #311613;
|
||||
--wa-color-yellow-05: #1f0d0b;
|
||||
--wa-color-focus: var(--wa-color-blue-60);
|
||||
|
||||
--wa-color-lime-95: #daff92;
|
||||
--wa-color-lime-90: #c1f759;
|
||||
--wa-color-lime-80: #9bdc1a;
|
||||
--wa-color-lime-70: #7ec200;
|
||||
--wa-color-lime-60: #60a600;
|
||||
--wa-color-lime-50: #3e8600;
|
||||
--wa-color-lime-40: #216600;
|
||||
--wa-color-lime-30: #135100;
|
||||
--wa-color-lime-20: #083b00;
|
||||
--wa-color-lime-10: #022400;
|
||||
--wa-color-lime-05: #011600;
|
||||
|
||||
--wa-color-green-95: #dafadc;
|
||||
--wa-color-green-90: #b9f4bc;
|
||||
--wa-color-green-80: #64e177;
|
||||
--wa-color-green-70: #2ec859;
|
||||
--wa-color-green-60: #00ac4a;
|
||||
--wa-color-green-50: #008840;
|
||||
--wa-color-green-40: #006734;
|
||||
--wa-color-green-30: #005128;
|
||||
--wa-color-green-20: #003b1c;
|
||||
--wa-color-green-10: #00230e;
|
||||
--wa-color-green-05: #001607;
|
||||
|
||||
--wa-color-gray-95: #f2f2f2;
|
||||
--wa-color-gray-90: #e6e6e6;
|
||||
--wa-color-gray-80: #c9c9c9;
|
||||
--wa-color-gray-70: #afafaf;
|
||||
--wa-color-gray-60: #959595;
|
||||
--wa-color-gray-50: #747474;
|
||||
--wa-color-gray-40: #585858;
|
||||
--wa-color-gray-30: #454545;
|
||||
--wa-color-gray-20: #313131;
|
||||
--wa-color-gray-10: #1d1d1d;
|
||||
--wa-color-gray-05: #131313;
|
||||
|
||||
--wa-color-primary-95: var(--wa-color-lime-95);
|
||||
--wa-color-primary-90: var(--wa-color-lime-90);
|
||||
--wa-color-primary-80: var(--wa-color-lime-80);
|
||||
--wa-color-primary-70: var(--wa-color-lime-70);
|
||||
--wa-color-primary-60: var(--wa-color-lime-60);
|
||||
--wa-color-primary-50: var(--wa-color-lime-50);
|
||||
--wa-color-primary-40: var(--wa-color-lime-40);
|
||||
--wa-color-primary-30: var(--wa-color-lime-30);
|
||||
--wa-color-primary-20: var(--wa-color-lime-20);
|
||||
--wa-color-primary-10: var(--wa-color-lime-10);
|
||||
--wa-color-primary-05: var(--wa-color-lime-05);
|
||||
|
||||
--wa-color-base-95: var(--wa-color-gray-95);
|
||||
--wa-color-base-90: var(--wa-color-gray-90);
|
||||
--wa-color-base-80: var(--wa-color-gray-80);
|
||||
--wa-color-base-70: var(--wa-color-gray-70);
|
||||
--wa-color-base-60: var(--wa-color-gray-60);
|
||||
--wa-color-base-50: var(--wa-color-gray-50);
|
||||
--wa-color-base-40: var(--wa-color-gray-40);
|
||||
--wa-color-base-30: var(--wa-color-gray-30);
|
||||
--wa-color-base-20: var(--wa-color-gray-20);
|
||||
--wa-color-base-10: var(--wa-color-gray-10);
|
||||
--wa-color-base-05: var(--wa-color-gray-05);
|
||||
|
||||
/**
|
||||
* Foundational theme colors
|
||||
*/
|
||||
|
||||
/* Surfaces are background layers that UI components and other content rest on.
|
||||
* Surface colors support elevation, where raised is closest to the user and lowered is farthest away. */
|
||||
--wa-color-surface-raised: white;
|
||||
--wa-color-surface-default: white;
|
||||
--wa-color-surface-lowered: var(--wa-color-base-95);
|
||||
--wa-color-surface-border: var(--wa-color-base-90);
|
||||
|
||||
/* Text colors are used for standard text elements.
|
||||
* Text should have a minimum 4.5:1 contrast ratio against surfaces.
|
||||
* Inverse text should support appropriate contrast against background colors with opposing lightness. */
|
||||
--wa-color-text-normal: var(--wa-color-base-05);
|
||||
--wa-color-text-quiet: var(--wa-color-base-40);
|
||||
--wa-color-text-link: var(--wa-color-brand-on-quiet);
|
||||
|
||||
/* Focus specifies the default color of the focus ring for predictable keyboard navigation.
|
||||
* Focus should have a minimum 3:1 contrast ratio against surfaces and background colors whenever possible. */
|
||||
--wa-color-focus: color-mix(in oklab, var(--wa-color-primary-60) 96%, transparent);
|
||||
|
||||
/* Overlays provide a backdrop for isolated content, often allowing background colors or content to show through. */
|
||||
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-base-10) 32%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-base-50) 8%, transparent);
|
||||
|
||||
/* Shadow specifies the default color for box shadows that indicate elevation. */
|
||||
--wa-color-shadow: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-base-05) calc(var(--wa-shadow-blur-scale) * 8% + 6%),
|
||||
transparent
|
||||
);
|
||||
|
||||
/* Mix colors are used in color-mix() to achieve consistent interaction effects across components. */
|
||||
--wa-color-mix-hover: white 10%;
|
||||
--wa-color-mix-active: black 5%;
|
||||
|
||||
/**
|
||||
* Semantic theme colors
|
||||
* Five semantic groups reinforce a component's message, intended usage, or expected results through meaningful hues -
|
||||
* * Brand to reinforce product branding
|
||||
* * Success to express validity or confirmation
|
||||
* * Warning to express caution or uncertainty
|
||||
* * Danger to express errors or risk
|
||||
* * Neutral for elements that are innocuous or inert
|
||||
* Each semantic group specifies colors to use as surfaces, fills, borders, and text with varying degrees of emphasis.
|
||||
* Accent colors are the most noticeable against surfaces, whereas subtle colors draw less attention.
|
||||
* Accent colors should have a minimum 3:1 contrast ratio against surfaces when possible.
|
||||
* Subtle colors have no contrast requirements.
|
||||
* Text colors should have a minimum 4.5:1 contrast ratio on the intended background - surface, subtle, or accent.
|
||||
*/
|
||||
--wa-color-brand-fill-loud: var(--wa-color-primary-80);
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-primary-95);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-primary-90);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-primary-90);
|
||||
--wa-color-brand-border-normal: var(--wa-color-primary-80);
|
||||
* Semantic Colors
|
||||
*/
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-green-95);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-green-90);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-green-80);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-green-90);
|
||||
--wa-color-brand-border-normal: var(--wa-color-green-80);
|
||||
--wa-color-brand-border-loud: var(--wa-color-green-70);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-green-40);
|
||||
--wa-color-brand-on-normal: var(--wa-color-green-30);
|
||||
--wa-color-brand-on-loud: black;
|
||||
--wa-color-brand-on-normal: var(--wa-color-primary-40);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-primary-50);
|
||||
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-80);
|
||||
--wa-color-success-fill-quiet: var(--wa-color-green-95);
|
||||
--wa-color-success-fill-normal: var(--wa-color-green-90);
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-80);
|
||||
--wa-color-success-border-quiet: var(--wa-color-green-90);
|
||||
--wa-color-success-border-normal: var(--wa-color-green-80);
|
||||
--wa-color-success-border-loud: var(--wa-color-green-70);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-40);
|
||||
--wa-color-success-on-normal: var(--wa-color-green-30);
|
||||
--wa-color-success-on-loud: black;
|
||||
--wa-color-success-on-normal: var(--wa-color-green-40);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-50);
|
||||
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-yellow-90);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-yellow-90);
|
||||
--wa-color-warning-border-normal: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-border-loud: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-30);
|
||||
--wa-color-warning-on-loud: black;
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-yellow-50);
|
||||
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-80);
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-red-95);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-red-90);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-70);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-red-90);
|
||||
--wa-color-danger-border-normal: var(--wa-color-red-80);
|
||||
--wa-color-danger-border-loud: var(--wa-color-red-70);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-40);
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-30);
|
||||
--wa-color-danger-on-loud: black;
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-40);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-50);
|
||||
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-base-80);
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-base-95);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-base-90);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-base-90);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-base-80);
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-gray-90);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-gray-80);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-gray-90);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-gray-80);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-gray-70);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-gray-40);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-gray-30);
|
||||
--wa-color-neutral-on-loud: black;
|
||||
--wa-color-neutral-on-normal: var(--wa-color-base-40);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-base-50);
|
||||
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
--wa-font-family-heading: Inter, sans-serif;
|
||||
--wa-font-family-body: Inter, sans-serif;
|
||||
--wa-font-family-code: 'Noto Sans Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
||||
--wa-font-family-longform: 'Lora', serif;
|
||||
--wa-font-family-body: 'Inter', sans-serif;
|
||||
|
||||
--wa-font-weight-light: 300;
|
||||
--wa-font-weight-normal: 400;
|
||||
--wa-font-weight-semibold: 550;
|
||||
--wa-font-weight-bold: 650;
|
||||
--wa-font-weight-black: 900;
|
||||
|
||||
--wa-font-weight-heading: var(--wa-font-weight-bold);
|
||||
--wa-font-weight-body: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-action: var(--wa-font-weight-semibold);
|
||||
|
||||
/* The default typescale is based on the Major Second scale (x1.125).
|
||||
* Every other step on the scale is skipped for larger sizes in order to maximize variation. */
|
||||
--wa-font-size-root: 16px;
|
||||
--wa-font-size-2xs: 0.6875rem; /* 11px */
|
||||
--wa-font-size-xs: 0.75rem; /* 12px */
|
||||
--wa-font-size-s: 0.875rem; /* 14px */
|
||||
--wa-font-size-m: 1rem; /* 16px */
|
||||
--wa-font-size-l: 1.25rem; /* 20px */
|
||||
--wa-font-size-xl: 1.625rem; /* 26px */
|
||||
--wa-font-size-2xl: 2rem; /* 32px */
|
||||
--wa-font-size-3xl: 2.5625rem; /* 41px */
|
||||
--wa-font-size-4xl: 3.25rem; /* 52px */
|
||||
|
||||
--wa-line-height-condensed: 1.25;
|
||||
--wa-line-height-normal: 1.6;
|
||||
--wa-line-height-expanded: 2;
|
||||
|
||||
/**
|
||||
* Spacing
|
||||
* Used intentionally, space properties yield a predictable rhythm and support effective implementation of the proximity principle.
|
||||
* Space can be organized into three groups with distinct usage -
|
||||
* * Small-scale space (3xs, 2xs, and xs) is used for gaps between closely related elements, such as a dropdown button and its menu,
|
||||
* and padding within small components, such as badges and tooltips
|
||||
* * Normal space (s, m, and l) is used for gaps between related elements with distinct purposes or touch targets and padding within
|
||||
* typical interface elements, such as buttons and inputs
|
||||
* * Large-scale space (xl, 2xl, and 3xl) is used for gaps between unrelated elements and padding within larger components,
|
||||
* such as cards and dialogs
|
||||
* Rounding
|
||||
*/
|
||||
/* Space is designed to scale according to a single base value.
|
||||
* The base value is intended for calculations and is not used by components directly. */
|
||||
--wa-space-scale: 1;
|
||||
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
|
||||
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
|
||||
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
|
||||
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
|
||||
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
|
||||
--wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
|
||||
--wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
|
||||
--wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
|
||||
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
|
||||
--wa-border-radius-scale: 2;
|
||||
|
||||
/**
|
||||
* Borders
|
||||
* Component Groups
|
||||
*/
|
||||
--wa-border-style: solid;
|
||||
|
||||
/* Border widths are designed to scale according to a single base value.
|
||||
* The base value is intended for calculations and is not used by components directly. */
|
||||
--wa-border-width-scale: 0.0625;
|
||||
--wa-border-width-s: calc(var(--wa-border-width-scale) * 1rem);
|
||||
--wa-border-width-m: calc(var(--wa-border-width-scale) * 2rem);
|
||||
--wa-border-width-l: calc(var(--wa-border-width-scale) * 3rem);
|
||||
|
||||
--wa-form-control-border-style: var(--wa-border-style);
|
||||
--wa-form-control-border-width: var(--wa-border-width-s);
|
||||
|
||||
--wa-panel-border-style: var(--wa-border-style);
|
||||
--wa-panel-border-width: var(--wa-border-width-s);
|
||||
|
||||
/**
|
||||
* Corners
|
||||
*/
|
||||
/* Corners are designed to scale according to a single base value.
|
||||
* The base value is intended for calculations and is not used by components directly. */
|
||||
--wa-border-radius-scale: 0.75;
|
||||
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.75rem);
|
||||
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 1rem);
|
||||
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 2rem);
|
||||
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 3rem);
|
||||
|
||||
/* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
|
||||
--wa-border-radius-pill: 9999px;
|
||||
--wa-border-radius-circle: 50%;
|
||||
--wa-border-radius-square: 0;
|
||||
|
||||
/**
|
||||
* Focus
|
||||
*/
|
||||
--wa-focus-ring-style: solid;
|
||||
--wa-focus-ring-width: 0.1875rem; /* 3px */
|
||||
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
|
||||
--wa-focus-ring-offset: 0.0625rem; /* 1px */
|
||||
|
||||
/**
|
||||
* Links
|
||||
*/
|
||||
--wa-link-decoration-default: underline var(--wa-color-brand-border-normal) dotted;
|
||||
--wa-link-decoration-hover: underline;
|
||||
|
||||
/**
|
||||
* Transitions
|
||||
*/
|
||||
--wa-transition-slow: 250ms;
|
||||
--wa-transition-normal: 150ms;
|
||||
--wa-transition-fast: 50ms;
|
||||
|
||||
/**
|
||||
* Component groups
|
||||
*/
|
||||
--wa-form-control-background-color: var(--wa-color-surface-default);
|
||||
|
||||
--wa-form-control-border-radius: var(--wa-border-radius-m);
|
||||
|
||||
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
|
||||
--wa-form-control-resting-color: var(--wa-color-neutral-border-normal);
|
||||
|
||||
--wa-form-control-label-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-label-font-weight: var(--wa-font-weight-normal);
|
||||
--wa-form-control-label-line-height: var(--wa-line-height-normal);
|
||||
|
||||
--wa-form-control-value-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
|
||||
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
|
||||
|
||||
--wa-form-control-placeholder-color: var(--wa-color-base-60);
|
||||
|
||||
--wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
|
||||
--wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
|
||||
--wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
|
||||
|
||||
--wa-form-control-required-content: '*';
|
||||
--wa-form-control-required-content-color: inherit;
|
||||
--wa-form-control-required-content-offset: -0.1em;
|
||||
|
||||
--wa-panel-border-radius: var(--wa-border-radius-l);
|
||||
|
||||
/**
|
||||
* From 2.x
|
||||
*/
|
||||
--wa-tooltip-arrow-size: 0.375rem;
|
||||
--wa-form-control-border-color: var(--wa-color-neutral-border-normal);
|
||||
}
|
||||
|
||||
.wa-theme-active-dark,
|
||||
.wa-theme-active-dark :host {
|
||||
.wa-dark,
|
||||
:is(:host-context(.wa-dark)) {
|
||||
color-scheme: dark;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/**
|
||||
* Base theme colors
|
||||
* Foundational Colors
|
||||
*/
|
||||
--wa-color-surface-raised: var(--wa-color-base-10);
|
||||
--wa-color-surface-default: var(--wa-color-base-05);
|
||||
--wa-color-surface-raised: var(--wa-color-gray-10);
|
||||
--wa-color-surface-default: var(--wa-color-gray-05);
|
||||
--wa-color-surface-lowered: black;
|
||||
--wa-color-surface-border: var(--wa-color-base-20);
|
||||
--wa-color-surface-border: var(--wa-color-gray-20);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-base-95);
|
||||
--wa-color-text-quiet: var(--wa-color-base-60);
|
||||
--wa-color-text-link: var(--wa-color-brand-on-quiet);
|
||||
--wa-color-text-normal: var(--wa-color-gray-95);
|
||||
--wa-color-text-quiet: var(--wa-color-gray-60);
|
||||
--wa-color-text-link: var(--wa-color-green-70);
|
||||
|
||||
--wa-color-focus: color-mix(in oklab, var(--wa-color-primary-60) 90%, transparent);
|
||||
|
||||
--wa-color-overlay-modal: color-mix(in oklab, black 50%, transparent);
|
||||
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
|
||||
|
||||
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-scale) * 32% + 40%), transparent);
|
||||
|
||||
--wa-color-focus: var(--wa-color-blue-60);
|
||||
|
||||
--wa-color-mix-hover: black 8%;
|
||||
--wa-color-mix-active: black 16%;
|
||||
|
||||
/**
|
||||
* Semantic theme colors
|
||||
* Semantic Colors
|
||||
*/
|
||||
--wa-color-brand-fill-loud: var(--wa-color-primary-80);
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-primary-10);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-primary-20);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-primary-20);
|
||||
--wa-color-brand-border-normal: var(--wa-color-primary-30);
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-green-10);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-green-20);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-green-80);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-green-20);
|
||||
--wa-color-brand-border-normal: var(--wa-color-green-30);
|
||||
--wa-color-brand-border-loud: var(--wa-color-green-60);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-green-80);
|
||||
--wa-color-brand-on-normal: var(--wa-color-green-90);
|
||||
--wa-color-brand-on-loud: black;
|
||||
--wa-color-brand-on-normal: var(--wa-color-primary-90);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-primary-80);
|
||||
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-80);
|
||||
--wa-color-success-fill-quiet: var(--wa-color-green-10);
|
||||
--wa-color-success-fill-normal: var(--wa-color-green-20);
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-80);
|
||||
--wa-color-success-border-quiet: var(--wa-color-green-20);
|
||||
--wa-color-success-border-normal: var(--wa-color-green-30);
|
||||
--wa-color-success-on-loud: black;
|
||||
--wa-color-success-on-normal: var(--wa-color-green-90);
|
||||
--wa-color-success-border-loud: var(--wa-color-green-40);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-80);
|
||||
--wa-color-success-on-normal: var(--wa-color-green-90);
|
||||
--wa-color-success-on-loud: black;
|
||||
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-yellow-20);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-yellow-20);
|
||||
--wa-color-warning-border-normal: var(--wa-color-yellow-30);
|
||||
--wa-color-warning-on-loud: black;
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-90);
|
||||
--wa-color-warning-border-loud: var(--wa-color-yellow-60);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-90);
|
||||
--wa-color-warning-on-loud: black;
|
||||
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-70);
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-red-10);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-red-20);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-70);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-red-20);
|
||||
--wa-color-danger-border-normal: var(--wa-color-red-30);
|
||||
--wa-color-danger-border-loud: var(--wa-color-red-60);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-80);
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-90);
|
||||
--wa-color-danger-on-loud: black;
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-80);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-70);
|
||||
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-base-80);
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-base-10);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-base-20);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-base-20);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-base-30);
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-gray-20);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-gray-80);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-gray-20);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-gray-30);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-gray-60);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-gray-80);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-gray-90);
|
||||
--wa-color-neutral-on-loud: black;
|
||||
--wa-color-neutral-on-normal: var(--wa-color-base-80);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-base-70);
|
||||
|
||||
.hero-background::after {
|
||||
backdrop-filter: brightness(0.8);
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* #region Custom Styles */
|
||||
@container preview (min-width: 0) {
|
||||
.hero-background {
|
||||
background: linear-gradient(
|
||||
var(--wa-color-green-80) 20%,
|
||||
var(--wa-color-primary-80) 80.5%,
|
||||
var(--wa-color-base-10) 80.5%,
|
||||
var(--wa-color-primary-80) 100%
|
||||
);
|
||||
background: url(/assets/images/themer/active/hero.png) 50% 0px / cover no-repeat;
|
||||
height: 40rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
/**
|
||||
* Component Styles
|
||||
*/
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-active {
|
||||
--wa-theme-active-shadow-pop-out: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
|
||||
inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.2) /* inner highlight */,
|
||||
inset 0 -0.0625rem 0.0625rem 0 rgb(0 0 0 / 0.2) /* inner shadow */, var(--wa-shadow-s) /* outer shadow */;
|
||||
--wa-theme-active-shadow-punch-in: inset 0 0 0 0 transparent /* shine */,
|
||||
inset 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.1) /* inner highlight */,
|
||||
inset 0 -0.0625rem 0.25rem 0 rgb(0 0 0 / 0.1) /* inner shadow */, 0 0 0 0 transparent /* outer shadow */;
|
||||
|
||||
:is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button, .wa-button):not(
|
||||
[appearance='plain'],
|
||||
.wa-plain
|
||||
) {
|
||||
box-shadow: var(--wa-theme-active-shadow-pop-out);
|
||||
|
||||
&:not([disabled], [loading]):active {
|
||||
box-shadow: var(--wa-theme-active-shadow-punch-in);
|
||||
}
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
height: 24rem;
|
||||
wa-card {
|
||||
box-shadow: var(--wa-theme-active-shadow-pop-out);
|
||||
}
|
||||
|
||||
.hero .title {
|
||||
text-align: right;
|
||||
margin-inline-start: 55%;
|
||||
input:not([type='button'], [type='reset'], [type='submit'], :checked),
|
||||
select,
|
||||
textarea,
|
||||
:is(wa-checkbox, wa-radio, wa-switch):not(:state(checked)),
|
||||
wa-input,
|
||||
wa-select,
|
||||
wa-textarea {
|
||||
&:not([appearance='filled']):not([disabled]) {
|
||||
--box-shadow: inset var(--wa-shadow-s);
|
||||
}
|
||||
}
|
||||
|
||||
.hero .hero-title {
|
||||
font-style: italic;
|
||||
font-weight: var(--wa-font-weight-black);
|
||||
font-size: var(--wa-font-size-2xl);
|
||||
input[type='radio'],
|
||||
wa-radio {
|
||||
--background-color-checked: var(--wa-form-control-activated-color);
|
||||
--checked-icon-color: var(--wa-color-brand-on-loud);
|
||||
--checked-icon-scale: 0.4;
|
||||
}
|
||||
|
||||
.hero wa-button[variant='brand'] {
|
||||
--background: var(--wa-color-neutral-fill-quiet);
|
||||
--text-color: var(--wa-color-neutral-on-normal);
|
||||
input[type='range'],
|
||||
wa-slider,
|
||||
wa-switch {
|
||||
--thumb-shadow: var(--wa-theme-active-shadow-pop-out);
|
||||
}
|
||||
|
||||
wa-rating {
|
||||
--symbol-color-active: var(--wa-color-brand-on-quiet);
|
||||
wa-progress-bar {
|
||||
box-shadow: inset var(--wa-shadow-s);
|
||||
|
||||
&::part(indicator) {
|
||||
box-shadow: inset 0 -0.5em 1em -0.5em oklch(from var(--indicator-color) calc(l - 0.1) c h);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
@container preview (min-width: 1100px) {
|
||||
.hero-background {
|
||||
height: 47rem;
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
height: 30rem;
|
||||
}
|
||||
|
||||
.hero .title {
|
||||
margin-block-start: 10%;
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
360
src/styles/themes/awesome.css
Normal file
360
src/styles/themes/awesome.css
Normal file
@@ -0,0 +1,360 @@
|
||||
@import url('../color/bright.css');
|
||||
@import url('default/color-semantic.css');
|
||||
@import url('default/space.css');
|
||||
@import url('default/outlines.css');
|
||||
@import url('default/typography.css');
|
||||
@import url('default/rounding.css');
|
||||
@import url('default/shadows.css');
|
||||
@import url('default/transitions.css');
|
||||
@import url('default/groups.css');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-awesome,
|
||||
.wa-light {
|
||||
color-scheme: light;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/**
|
||||
* Foundational Colors
|
||||
*/
|
||||
--wa-color-text-normal: var(--wa-color-gray-20);
|
||||
|
||||
/**
|
||||
* Semantic Colors
|
||||
*/
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-blue-95);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-blue-90);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-blue-70);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-blue-70);
|
||||
--wa-color-brand-border-normal: var(--wa-color-blue-50);
|
||||
--wa-color-brand-border-loud: var(--wa-color-blue-30);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-blue-40);
|
||||
--wa-color-brand-on-normal: var(--wa-color-blue-40);
|
||||
--wa-color-brand-on-loud: var(--wa-color-text-normal);
|
||||
|
||||
--wa-color-success-fill-quiet: var(--wa-color-teal-95);
|
||||
--wa-color-success-fill-normal: var(--wa-color-teal-90);
|
||||
--wa-color-success-fill-loud: var(--wa-color-teal-80);
|
||||
--wa-color-success-border-quiet: var(--wa-color-teal-70);
|
||||
--wa-color-success-border-normal: var(--wa-color-teal-50);
|
||||
--wa-color-success-border-loud: var(--wa-color-teal-30);
|
||||
--wa-color-success-on-quiet: var(--wa-color-teal-40);
|
||||
--wa-color-success-on-normal: var(--wa-color-teal-40);
|
||||
--wa-color-success-on-loud: var(--wa-color-text-normal);
|
||||
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-yellow-90);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-border-normal: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-border-loud: var(--wa-color-yellow-30);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-on-loud: var(--wa-color-text-normal);
|
||||
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-red-95);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-red-90);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-70);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-red-70);
|
||||
--wa-color-danger-border-normal: var(--wa-color-red-50);
|
||||
--wa-color-danger-border-loud: var(--wa-color-red-30);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-40);
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-40);
|
||||
--wa-color-danger-on-loud: var(--wa-color-text-normal);
|
||||
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-gray-90);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-gray-80);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-gray-70);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-gray-50);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-gray-30);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-gray-40);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-gray-40);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-text-normal);
|
||||
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
--wa-font-family-body: Quicksand, sans-serif;
|
||||
--wa-font-family-heading: var(--wa-font-family-body);
|
||||
--wa-font-family-code: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
--wa-font-family-longform: ui-serif, serif;
|
||||
|
||||
--wa-font-weight-light: 400;
|
||||
--wa-font-weight-normal: 500;
|
||||
--wa-font-weight-semibold: 600;
|
||||
--wa-font-weight-bold: 700;
|
||||
|
||||
--wa-font-weight-body: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-heading: var(--wa-font-weight-bold);
|
||||
--wa-font-weight-action: var(--wa-font-weight-bold);
|
||||
|
||||
/**
|
||||
* Spacing
|
||||
*/
|
||||
--wa-space-scale: 1.25;
|
||||
|
||||
/**
|
||||
* Borders
|
||||
*/
|
||||
--wa-border-width-scale: 2;
|
||||
|
||||
/**
|
||||
* Rounding
|
||||
*/
|
||||
--wa-border-radius-scale: 1.5;
|
||||
|
||||
/**
|
||||
* Shadows
|
||||
*/
|
||||
--wa-shadow-offset-y-scale: 2;
|
||||
--wa-shadow-blur-scale: 0;
|
||||
--wa-shadow-spread-scale: 0;
|
||||
|
||||
/**
|
||||
* Transitions
|
||||
*/
|
||||
--wa-transition-easing: ease-in;
|
||||
|
||||
/**
|
||||
* Component Groups
|
||||
*/
|
||||
|
||||
/* Form controls */
|
||||
--wa-form-control-activated-color: var(--wa-color-neutral-border-loud);
|
||||
--wa-form-control-border-color: var(--wa-color-neutral-border-normal);
|
||||
|
||||
--wa-form-control-label-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-label-font-weight: var(--wa-font-weight-bold);
|
||||
--wa-form-control-label-line-height: var(--wa-line-height-normal);
|
||||
|
||||
/* Tooltips */
|
||||
--wa-tooltip-arrow-size: 0.375rem;
|
||||
|
||||
--wa-tooltip-background-color: var(--wa-color-text-normal);
|
||||
|
||||
--wa-tooltip-border-radius: var(--wa-border-radius-s);
|
||||
|
||||
--wa-tooltip-content-color: var(--wa-color-surface-default);
|
||||
--wa-tooltip-font-size: var(--wa-font-size-s);
|
||||
--wa-tooltip-line-height: var(--wa-line-height-normal);
|
||||
}
|
||||
|
||||
.wa-dark,
|
||||
:is(:host-context(.wa-dark)) {
|
||||
color-scheme: dark;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/**
|
||||
* Foundational Colors
|
||||
*/
|
||||
--wa-color-surface-raised: var(--wa-color-gray-10);
|
||||
--wa-color-surface-default: var(--wa-color-gray-05);
|
||||
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
|
||||
--wa-color-surface-border: var(--wa-color-gray-20);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-gray-95);
|
||||
--wa-color-text-quiet: var(--wa-color-gray-60);
|
||||
--wa-color-text-link: var(--wa-color-blue-70);
|
||||
|
||||
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
|
||||
|
||||
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-scale) * 32% + 40%), transparent);
|
||||
|
||||
--wa-color-focus: var(--wa-color-blue-60);
|
||||
|
||||
--wa-color-mix-hover: black 8%;
|
||||
--wa-color-mix-active: black 16%;
|
||||
|
||||
/**
|
||||
* Semantic Colors
|
||||
*/
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-blue-10);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-blue-20);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-blue-50);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-blue-30);
|
||||
--wa-color-brand-border-normal: var(--wa-color-blue-50);
|
||||
--wa-color-brand-border-loud: var(--wa-color-blue-80);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-blue-70);
|
||||
--wa-color-brand-on-normal: var(--wa-color-blue-80);
|
||||
--wa-color-brand-on-loud: white;
|
||||
|
||||
--wa-color-success-fill-quiet: var(--wa-color-teal-10);
|
||||
--wa-color-success-fill-normal: var(--wa-color-teal-20);
|
||||
--wa-color-success-fill-loud: var(--wa-color-teal-50);
|
||||
--wa-color-success-border-quiet: var(--wa-color-teal-30);
|
||||
--wa-color-success-border-normal: var(--wa-color-teal-50);
|
||||
--wa-color-success-border-loud: var(--wa-color-teal-80);
|
||||
--wa-color-success-on-quiet: var(--wa-color-teal-70);
|
||||
--wa-color-success-on-normal: var(--wa-color-teal-80);
|
||||
--wa-color-success-on-loud: white;
|
||||
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-yellow-20);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-yellow-30);
|
||||
--wa-color-warning-border-normal: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-border-loud: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-on-loud: var(--wa-color-yellow-05);
|
||||
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-red-10);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-red-20);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-50);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-red-30);
|
||||
--wa-color-danger-border-normal: var(--wa-color-red-50);
|
||||
--wa-color-danger-border-loud: var(--wa-color-red-80);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-70);
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-80);
|
||||
--wa-color-danger-on-loud: white;
|
||||
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-gray-20);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-gray-50);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-gray-30);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-gray-50);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-gray-80);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-gray-70);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-gray-80);
|
||||
--wa-color-neutral-on-loud: white;
|
||||
|
||||
/**
|
||||
* Component Groups
|
||||
*/
|
||||
|
||||
/* Form controls */
|
||||
--wa-form-control-background-color: var(--wa-color-surface-default);
|
||||
|
||||
--wa-form-control-activated-color: var(--wa-color-neutral-border-loud);
|
||||
--wa-form-control-border-color: var(--wa-color-neutral-border-normal);
|
||||
|
||||
--wa-form-control-label-color: var(--wa-color-text-normal);
|
||||
|
||||
--wa-form-control-value-color: var(--wa-color-text-normal);
|
||||
|
||||
--wa-form-control-placeholder-color: var(--wa-color-gray-60);
|
||||
|
||||
--wa-form-control-required-content-color: inherit;
|
||||
}
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-awesome {
|
||||
/* #region Custom Styles */
|
||||
wa-badge {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
:is(
|
||||
button,
|
||||
input:where([type='button'], [type='reset'], [type='submit']),
|
||||
wa-button,
|
||||
wa-radio-group > wa-radio-button,
|
||||
.wa-button
|
||||
):not([appearance='plain'], .wa-plain) {
|
||||
--wa-transition-slow: 0;
|
||||
--wa-transition-normal: 0;
|
||||
--wa-transition-fast: 0;
|
||||
|
||||
--border-color: var(--text-color);
|
||||
--border-color-hover: var(--border-color);
|
||||
--border-color-active: var(--border-color);
|
||||
box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
|
||||
var(--wa-shadow-spread-s) var(--border-color);
|
||||
--background-color-active: var(--border-color);
|
||||
--text-color-active: var(--background-color);
|
||||
|
||||
margin-bottom: var(--wa-shadow-offset-y-s);
|
||||
|
||||
&:is([appearance='outlined'], .wa-outlined) {
|
||||
--background-color: var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
&:not([disabled], [loading]):active,
|
||||
&::part(checked) {
|
||||
box-shadow: none;
|
||||
transform: translateY(var(--wa-shadow-offset-y-s));
|
||||
}
|
||||
|
||||
.wa-dark & {
|
||||
--border-color: var(--wa-color-border-quiet);
|
||||
}
|
||||
}
|
||||
|
||||
wa-callout {
|
||||
&:is([appearance~='outlined'], .wa-outlined) {
|
||||
border-color: var(--wa-color-border-normal);
|
||||
}
|
||||
&:not([appearance~='accent'], .wa-accent) {
|
||||
color: var(--wa-color-text-normal);
|
||||
}
|
||||
&:not([appearance~='accent'], .wa-accent) {
|
||||
--icon-color: var(--wa-color-border-normal);
|
||||
}
|
||||
}
|
||||
|
||||
wa-card {
|
||||
background-color: var(--wa-color-surface-raised);
|
||||
}
|
||||
wa-card::part(header) {
|
||||
border-bottom-style: dotted;
|
||||
}
|
||||
wa-card::part(footer) {
|
||||
border-top-style: dotted;
|
||||
}
|
||||
|
||||
input[type='checkbox'],
|
||||
wa-checkbox {
|
||||
--checked-icon-color: var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
wa-radio-group > wa-radio-button {
|
||||
&::part(base):active,
|
||||
&::part(checked) {
|
||||
--background-color: var(--border-color);
|
||||
--background-color-hover: var(--border-color);
|
||||
--border-color: var(--wa-color-neutral-border-loud);
|
||||
--text-color: var(--wa-color-surface-default);
|
||||
}
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--height: 1.5em;
|
||||
}
|
||||
|
||||
wa-tag {
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
}
|
||||
|
||||
:is(
|
||||
input:where(
|
||||
:not(
|
||||
[type='button'],
|
||||
[type='checkbox'],
|
||||
[type='color'],
|
||||
[type='file'],
|
||||
[type='hidden'],
|
||||
[type='image'],
|
||||
[type='radio'],
|
||||
[type='range'],
|
||||
[type='reset'],
|
||||
[type='submit']
|
||||
)
|
||||
),
|
||||
select,
|
||||
textarea,
|
||||
wa-input,
|
||||
wa-select,
|
||||
wa-textarea,
|
||||
.wa-text-field
|
||||
):not(:focus, [appearance='filled'], .wa-filled) {
|
||||
--box-shadow: inset var(--wa-shadow-s);
|
||||
}
|
||||
/* #endregion */
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,153 +1,22 @@
|
||||
@import url('default/typography.css');
|
||||
@import url('../color/classic.css');
|
||||
@import url('default/color-semantic.css');
|
||||
@import url('default/space.css');
|
||||
@import url('default/outlines.css');
|
||||
@import url('default/typography.css');
|
||||
@import url('default/rounding.css');
|
||||
@import url('default/shadows.css');
|
||||
@import url('default/transitions.css');
|
||||
@import url('default/groups.css');
|
||||
|
||||
:root,
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-classic-light {
|
||||
.wa-theme-classic,
|
||||
.wa-light {
|
||||
color-scheme: light;
|
||||
|
||||
/**
|
||||
* Literal Colors
|
||||
* Each color is identified by a number that corresponds to its perceived lightness, where 100 is equal to white and 0 is equal to black.
|
||||
* Each lightness value has nearly uniform WCAG 2.1 contrast across hues.
|
||||
* A difference of 40 between lightness values ensures a minimum 3:1 contrast ratio.
|
||||
* A difference of 50 between lightness values ensures a minimum 4.5:1 contrast ratio.
|
||||
* A difference of 60 between lightness values ensures a minimum 7:1 contrast ratio.
|
||||
*/
|
||||
--wa-color-red-95: #feeeee;
|
||||
--wa-color-red-90: #fedede;
|
||||
--wa-color-red-80: #fdb8b8;
|
||||
--wa-color-red-70: #fa9292;
|
||||
--wa-color-red-60: #ee6c6c;
|
||||
--wa-color-red-50: #d43c3c;
|
||||
--wa-color-red-40: #ac1e1e;
|
||||
--wa-color-red-30: #640f0f;
|
||||
--wa-color-red-20: #631111;
|
||||
--wa-color-red-10: #3b0d0d;
|
||||
--wa-color-red-05: #260606;
|
||||
|
||||
--wa-color-yellow-95: #fef2c4;
|
||||
--wa-color-yellow-90: #fde494;
|
||||
--wa-color-yellow-80: #fbc129;
|
||||
--wa-color-yellow-70: #f29c0b;
|
||||
--wa-color-yellow-60: #db7e13;
|
||||
--wa-color-yellow-50: #af6005;
|
||||
--wa-color-yellow-40: #904207;
|
||||
--wa-color-yellow-30: #713406;
|
||||
--wa-color-yellow-20: #532408;
|
||||
--wa-color-yellow-10: #321606;
|
||||
--wa-color-yellow-05: #1f0c01;
|
||||
|
||||
--wa-color-green-95: #e9f5ed;
|
||||
--wa-color-green-90: #cfedd9;
|
||||
--wa-color-green-80: #a2d5b4;
|
||||
--wa-color-green-70: #6cc08a;
|
||||
--wa-color-green-60: #38a961;
|
||||
--wa-color-green-50: #178640;
|
||||
--wa-color-green-40: #3d6208;
|
||||
--wa-color-green-30: #0d5026;
|
||||
--wa-color-green-20: #0c391d;
|
||||
--wa-color-green-10: #082213;
|
||||
--wa-color-green-05: #02140a;
|
||||
|
||||
--wa-color-blue-95: #e5f4fe;
|
||||
--wa-color-blue-90: #c8ebfd;
|
||||
--wa-color-blue-80: #80d4fc;
|
||||
--wa-color-blue-70: #37bbf5;
|
||||
--wa-color-blue-60: #0d9ee0;
|
||||
--wa-color-blue-50: #027ab9;
|
||||
--wa-color-blue-40: #015d8d;
|
||||
--wa-color-blue-30: #024970;
|
||||
--wa-color-blue-20: #04354f;
|
||||
--wa-color-blue-10: #05202f;
|
||||
--wa-color-blue-05: #04121b;
|
||||
|
||||
--wa-color-indigo-95: #eef2ff;
|
||||
--wa-color-indigo-90: #dee5fd;
|
||||
--wa-color-indigo-80: #bec8f2;
|
||||
--wa-color-indigo-70: #9dabf0;
|
||||
--wa-color-indigo-60: #818cf7;
|
||||
--wa-color-indigo-50: #6063eb;
|
||||
--wa-color-indigo-40: #4941d3;
|
||||
--wa-color-indigo-30: #3930ad;
|
||||
--wa-color-indigo-20: #29247a;
|
||||
--wa-color-indigo-10: #191843;
|
||||
--wa-color-indigo-05: #0f0e26;
|
||||
|
||||
--wa-color-violet-95: #f7efff;
|
||||
--wa-color-violet-90: #efe0ff;
|
||||
--wa-color-violet-80: #dcbdfe;
|
||||
--wa-color-violet-70: #cb9afd;
|
||||
--wa-color-violet-60: #b976f9;
|
||||
--wa-color-violet-50: #9d46ec;
|
||||
--wa-color-violet-40: #7d22cc;
|
||||
--wa-color-violet-30: #631f9c;
|
||||
--wa-color-violet-20: #48176e;
|
||||
--wa-color-violet-10: #2e054e;
|
||||
--wa-color-violet-05: #1d0331;
|
||||
|
||||
--wa-color-gray-95: #f2f2f3;
|
||||
--wa-color-gray-90: #e5e5e8;
|
||||
--wa-color-gray-80: #c9c9cc;
|
||||
--wa-color-gray-70: #aeafb1;
|
||||
--wa-color-gray-60: #94959b;
|
||||
--wa-color-gray-50: #72747d;
|
||||
--wa-color-gray-40: #565861;
|
||||
--wa-color-gray-30: #43454d;
|
||||
--wa-color-gray-20: #313134;
|
||||
--wa-color-gray-10: #1d1d20;
|
||||
--wa-color-gray-05: #101113;
|
||||
|
||||
/**
|
||||
* Foundational Colors
|
||||
*/
|
||||
|
||||
/* Surfaces are background layers that other content rests on.
|
||||
* Surface colors help convey hierarchy through elevation, where raised is closest to the user and lowered is farthest away. */
|
||||
--wa-color-surface-raised: white;
|
||||
--wa-color-surface-default: white;
|
||||
--wa-color-surface-lowered: var(--wa-color-gray-95);
|
||||
--wa-color-surface-border: var(--wa-color-gray-90);
|
||||
|
||||
/* Text colors are used for standard text elements.
|
||||
* Recommended: minimum 4.5:1 contrast ratio between text colors and surface colors. */
|
||||
--wa-color-text-normal: var(--wa-color-gray-10);
|
||||
--wa-color-text-quiet: var(--wa-color-gray-40);
|
||||
--wa-color-text-link: var(--wa-color-blue-50);
|
||||
|
||||
/* Overlays provide a backdrop for isolated content, often allowing background context to show through. */
|
||||
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-gray-10) 32%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 8%, transparent);
|
||||
|
||||
/* Shadows indicate elevation. Shadow color is used in your theme's shadow properties.
|
||||
* By default, the opacity of your shadow color is tied to the blur of shadows in your theme.
|
||||
* Because solid shadows appear stronger in color than diffused shadows, this helps keep consistent color intensity. */
|
||||
--wa-color-shadow: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-gray-40) calc(var(--wa-shadow-blur-scale) * 24% + 8%),
|
||||
transparent
|
||||
);
|
||||
|
||||
/* Focus color provides the default color of the focus ring for predictable keyboard navigation.
|
||||
* Recommended: minimum 3:1 contrast ratio against surfaces and background colors. */
|
||||
--wa-color-focus: var(--wa-color-blue-60);
|
||||
|
||||
/* Hover and active colors are intended to be used in color-mix() to achieve consistent effects across components. */
|
||||
--wa-color-mix-hover: black 10%;
|
||||
--wa-color-mix-active: black 20%;
|
||||
|
||||
/**
|
||||
* Semantic Colors
|
||||
* Five semantic groups - brand, success, neutral, warning, and danger - reinforce a component's message, intended usage, or expected results.
|
||||
* Within these groups, each color specifies a role -
|
||||
* * Fill for background colors or areas larger than a few pixels
|
||||
* * Border for borders, dividers, and other stroke-like elements
|
||||
* * On for content displayed on a fill with the corresponding attention
|
||||
* Each role has three options for attention - quiet, normal, and loud - where quiet draws the least attention and loud draws the most.
|
||||
*/
|
||||
*/
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-blue-95);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-blue-90);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-blue-50);
|
||||
@@ -207,7 +76,7 @@
|
||||
--wa-font-family-code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
|
||||
--wa-font-family-longform: Georgia, 'Times New Roman', serif;
|
||||
|
||||
--wa-link-decoration-default: underline color-mix(in oklab, var(--wa-color-text-link) 70%, transparent) dotted;
|
||||
--wa-link-decoration-default: underline;
|
||||
|
||||
/**
|
||||
* Focus
|
||||
@@ -215,10 +84,13 @@
|
||||
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
|
||||
color-mix(in oklab, var(--wa-color-focus) 60%, transparent);
|
||||
|
||||
/**
|
||||
* Rounding
|
||||
*/
|
||||
--wa-border-radius-scale: 0.7;
|
||||
|
||||
/**
|
||||
* Shadows
|
||||
* Shadow properties are highly modular to make it easy to create custom shadow effects or transform elements based on specific shadow qualities.
|
||||
* A multiplier is provided for each shadow quality to uniformly scale all related values.
|
||||
*/
|
||||
--wa-shadow-offset-y-scale: 0.0625;
|
||||
--wa-shadow-spread-scale: 0;
|
||||
@@ -226,8 +98,6 @@
|
||||
/**
|
||||
* Transitions
|
||||
*/
|
||||
--wa-transition-easing: ease;
|
||||
|
||||
--wa-transition-slow: 250ms;
|
||||
--wa-transition-normal: 150ms;
|
||||
--wa-transition-fast: 50ms;
|
||||
@@ -237,12 +107,7 @@
|
||||
*/
|
||||
|
||||
/* Form controls */
|
||||
--wa-form-control-resting-color: var(--wa-color-neutral-border-normal);
|
||||
--wa-form-control-label-line-height: var(--wa-line-height-normal);
|
||||
|
||||
--wa-form-control-height-s: 1.875rem;
|
||||
--wa-form-control-height-m: 2.5rem;
|
||||
--wa-form-control-height-l: 3.125rem;
|
||||
--wa-form-control-border-color: var(--wa-color-neutral-border-normal);
|
||||
|
||||
/* Panels */
|
||||
--wa-panel-border-radius: var(--wa-border-radius-m);
|
||||
@@ -252,16 +117,17 @@
|
||||
--wa-tooltip-content-color: var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
.wa-theme-classic-dark,
|
||||
.wa-theme-classic-dark :host {
|
||||
.wa-dark,
|
||||
:is(:host-context(.wa-dark)) {
|
||||
color-scheme: dark;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/**
|
||||
* Foundational Colors
|
||||
*/
|
||||
--wa-color-surface-raised: var(--wa-color-gray-10);
|
||||
--wa-color-surface-default: var(--wa-color-gray-05);
|
||||
--wa-color-surface-lowered: var(--wa-color-gray-05);
|
||||
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
|
||||
--wa-color-surface-border: var(--wa-color-gray-20);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-gray-80);
|
||||
@@ -337,141 +203,138 @@
|
||||
}
|
||||
|
||||
/**
|
||||
* Component style overrides
|
||||
* Component Styles
|
||||
*/
|
||||
wa-avatar {
|
||||
--background-color: var(--wa-color-neutral-fill-loud);
|
||||
--text-color: var(--wa-color-neutral-on-loud);
|
||||
}
|
||||
|
||||
wa-button,
|
||||
wa-radio-button {
|
||||
&[size='small'] {
|
||||
font-size: var(--wa-font-size-xs);
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-classic {
|
||||
wa-avatar {
|
||||
--background-color: var(--wa-color-neutral-fill-loud);
|
||||
--text-color: var(--wa-color-neutral-on-loud);
|
||||
}
|
||||
|
||||
&[size='medium'] {
|
||||
button,
|
||||
input:where([type='button'], [type='reset'], [type='submit']),
|
||||
wa-button,
|
||||
.wa-button,
|
||||
wa-radio-button {
|
||||
font-size: var(--wa-size-smaller);
|
||||
}
|
||||
|
||||
wa-radio-button {
|
||||
--background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-mix-active));
|
||||
--background-color-hover: var(--wa-form-control-activated-color);
|
||||
--border-color: var(--wa-form-control-border-color);
|
||||
--border-color-active: var(--background-color-active);
|
||||
--border-color-hover: var(--background-color-hover);
|
||||
--text-color-active: var(--text-color-hover);
|
||||
--text-color-hover: var(--wa-color-brand-on-loud);
|
||||
--indicator-color: var(--wa-background-color);
|
||||
|
||||
&[checked] {
|
||||
--background-color: var(--wa-form-control-activated-color);
|
||||
--border-color: var(--background-color);
|
||||
--text-color: var(--wa-color-brand-on-loud);
|
||||
}
|
||||
}
|
||||
|
||||
wa-breadcrumb {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
&[size='large'] {
|
||||
font-size: var(--wa-font-size-m);
|
||||
wa-callout {
|
||||
--spacing: var(--wa-space-l);
|
||||
font-size: var(--wa-size-smaller);
|
||||
|
||||
&:is([appearance~='outlined'], .wa-outlined) {
|
||||
border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
|
||||
border-color: var(--border-color, var(--wa-color-border-loud)) var(--wa-color-surface-border)
|
||||
var(--wa-color-surface-border) var(--wa-color-surface-border);
|
||||
|
||||
&:not([appearance~='accent'], .wa-accent) {
|
||||
--border-color: var(--wa-color-fill-loud);
|
||||
}
|
||||
}
|
||||
&:not([appearance~='accent'], .wa-accent) {
|
||||
--icon-color: var(--wa-color-fill-loud);
|
||||
--text-color: var(--wa-color-text-normal);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
wa-radio-button {
|
||||
--background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-mix-active));
|
||||
--background-color-hover: var(--wa-form-control-activated-color);
|
||||
--border-color: var(--wa-form-control-resting-color);
|
||||
--border-color-active: var(--background-color-active);
|
||||
--border-color-hover: var(--background-color-hover);
|
||||
--text-color-active: var(--text-color-hover);
|
||||
--text-color-hover: var(--wa-color-brand-on-loud);
|
||||
--indicator-color: var(--wa-background-color);
|
||||
wa-card {
|
||||
background-color: var(--wa-color-surface-raised);
|
||||
}
|
||||
|
||||
&[checked] {
|
||||
--background-color: var(--wa-form-control-activated-color);
|
||||
wa-carousel {
|
||||
--box-shadow: var(--wa-shadow-s);
|
||||
--pagination-color-active: var(--wa-color-neutral-fill-loud);
|
||||
}
|
||||
|
||||
wa-dialog,
|
||||
wa-drawer {
|
||||
--spacing: var(--wa-space-l);
|
||||
}
|
||||
|
||||
:is(
|
||||
input:where(
|
||||
:not(
|
||||
[type='button'],
|
||||
[type='checkbox'],
|
||||
[type='color'],
|
||||
[type='file'],
|
||||
[type='hidden'],
|
||||
[type='image'],
|
||||
[type='radio'],
|
||||
[type='range'],
|
||||
[type='reset'],
|
||||
[type='submit']
|
||||
)
|
||||
),
|
||||
select,
|
||||
textarea,
|
||||
wa-input,
|
||||
wa-select,
|
||||
wa-textarea,
|
||||
.wa-text-field
|
||||
):not([appearance='filled'], .wa-filled) {
|
||||
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
|
||||
color-mix(in oklab, var(--wa-color-focus), transparent 50%);
|
||||
--wa-focus-ring-offset: 0;
|
||||
}
|
||||
|
||||
input[type='radio'],
|
||||
wa-radio {
|
||||
--background-color-checked: var(--border-color-checked);
|
||||
--checked-icon-color: var(--wa-color-surface-default);
|
||||
--checked-icon-scale: 0.4;
|
||||
}
|
||||
|
||||
input[type='range'],
|
||||
wa-slider {
|
||||
--thumb-gap: 0;
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--background-color: var(--wa-color-gray-50);
|
||||
--border-color: var(--background-color);
|
||||
--text-color: var(--wa-color-brand-on-loud);
|
||||
}
|
||||
}
|
||||
--height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2);
|
||||
--thumb-color: var(--wa-color-surface-default);
|
||||
--thumb-size: calc(var(--height) + 4px);
|
||||
--width: calc(var(--height) * 2);
|
||||
|
||||
wa-breadcrumb {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
/* #region Callouts */
|
||||
wa-callout {
|
||||
--background-color: var(--wa-color-surface-raised);
|
||||
--border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
|
||||
--text-color: var(--wa-color-text-normal);
|
||||
--spacing: var(--wa-space-l);
|
||||
|
||||
font-size: var(--wa-font-size-s);
|
||||
|
||||
&[variant='brand'] {
|
||||
--border-color: var(--wa-color-brand-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
|
||||
var(--wa-color-surface-border);
|
||||
--icon-color: var(--wa-color-brand-fill-loud);
|
||||
&::part(thumb) {
|
||||
border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color);
|
||||
}
|
||||
&[checked]::part(thumb) {
|
||||
border-color: var(--background-color-checked);
|
||||
}
|
||||
}
|
||||
|
||||
&[variant='success'] {
|
||||
--border-color: var(--wa-color-success-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
|
||||
var(--wa-color-surface-border);
|
||||
--icon-color: var(--wa-color-success-fill-loud);
|
||||
wa-progress-bar {
|
||||
--height: 1rem;
|
||||
}
|
||||
|
||||
&[variant='neutral'] {
|
||||
--border-color: var(--wa-color-neutral-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
|
||||
var(--wa-color-surface-border);
|
||||
--icon-color: var(--wa-color-neutral-fill-loud);
|
||||
}
|
||||
|
||||
&[variant='warning'] {
|
||||
--border-color: var(--wa-color-warning-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
|
||||
var(--wa-color-surface-border);
|
||||
--icon-color: var(--wa-color-warning-fill-loud);
|
||||
}
|
||||
|
||||
&[variant='danger'] {
|
||||
--border-color: var(--wa-color-danger-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
|
||||
var(--wa-color-surface-border);
|
||||
--icon-color: var(--wa-color-danger-fill-loud);
|
||||
wa-tab {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
}
|
||||
|
||||
wa-card {
|
||||
--background-color: var(--wa-color-surface-raised);
|
||||
}
|
||||
|
||||
wa-carousel {
|
||||
--box-shadow: var(--wa-shadow-s);
|
||||
--pagination-color-active: var(--wa-color-neutral-fill-loud);
|
||||
}
|
||||
|
||||
wa-dialog,
|
||||
wa-drawer {
|
||||
--spacing: var(--wa-space-l);
|
||||
}
|
||||
|
||||
wa-input:not([appearance='filled']),
|
||||
wa-select:not([appearance='filled']),
|
||||
wa-textarea:not([appearance='filled']) {
|
||||
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
|
||||
color-mix(in oklab, var(--wa-color-focus), transparent 50%);
|
||||
--wa-focus-ring-offset: 0;
|
||||
}
|
||||
|
||||
wa-radio {
|
||||
--background-color-checked: var(--border-color-checked);
|
||||
--checked-icon-color: var(--wa-color-surface-default);
|
||||
--checked-icon-scale: 0.4;
|
||||
}
|
||||
|
||||
wa-slider {
|
||||
--thumb-gap: 0;
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--background-color: var(--wa-color-gray-50);
|
||||
--border-color: var(--background-color);
|
||||
--height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2);
|
||||
--thumb-color: var(--wa-color-surface-default);
|
||||
--thumb-size: calc(var(--height) + 4px);
|
||||
--width: calc(var(--height) * 2);
|
||||
|
||||
&::part(thumb) {
|
||||
border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color);
|
||||
}
|
||||
&[checked]::part(thumb) {
|
||||
border-color: var(--background-color-checked);
|
||||
}
|
||||
}
|
||||
|
||||
wa-progress-bar {
|
||||
--height: 1rem;
|
||||
}
|
||||
|
||||
wa-tab {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
@@ -8,15 +8,16 @@
|
||||
@import url('default/transitions.css');
|
||||
@import url('default/groups.css');
|
||||
|
||||
:root,
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-default-light {
|
||||
.wa-theme-default,
|
||||
.wa-light {
|
||||
color-scheme: light;
|
||||
color: var(--wa-color-text-normal);
|
||||
}
|
||||
|
||||
.wa-theme-default-dark,
|
||||
.wa-theme-default-dark :host {
|
||||
.wa-dark,
|
||||
:is(:host-context(.wa-dark)) {
|
||||
color-scheme: dark;
|
||||
color: var(--wa-color-text-normal);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
/**
|
||||
* Foundational Colors and Semantic Colors
|
||||
*/
|
||||
:where(:root, :host),
|
||||
.wa-theme-default-light {
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-default,
|
||||
.wa-light {
|
||||
/**
|
||||
* Foundational Colors
|
||||
*/
|
||||
@@ -49,7 +51,7 @@
|
||||
* * Border for borders, dividers, and other stroke-like elements
|
||||
* * On for content displayed on a fill with the corresponding attention
|
||||
* Each role has three options for attention - quiet, normal, and loud - where quiet draws the least attention and loud draws the most.
|
||||
*/
|
||||
*/
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-blue-95);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-blue-90);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-blue-50);
|
||||
@@ -102,14 +104,14 @@
|
||||
}
|
||||
|
||||
/** need to wrap :host-context() in an :is() selector for unsupported browsers */
|
||||
.wa-theme-default-dark,
|
||||
:is(:host-context(.wa-theme-default-dark)) {
|
||||
.wa-dark,
|
||||
:is(:host-context(.wa-dark)) {
|
||||
/**
|
||||
* Foundational Colors
|
||||
*/
|
||||
--wa-color-surface-raised: var(--wa-color-gray-10);
|
||||
--wa-color-surface-default: var(--wa-color-gray-05);
|
||||
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 10%);
|
||||
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
|
||||
--wa-color-surface-border: var(--wa-color-gray-20);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-gray-95);
|
||||
|
||||
@@ -6,7 +6,8 @@
|
||||
* A difference of 50 between lightness values ensures a minimum 4.5:1 contrast ratio.
|
||||
* A difference of 60 between lightness values ensures a minimum 7:1 contrast ratio.
|
||||
*/
|
||||
:where(:root, :host) {
|
||||
:where(:root),
|
||||
:host {
|
||||
--wa-color-red-95: #ffefef;
|
||||
--wa-color-red-90: #ffdddc;
|
||||
--wa-color-red-80: #ffb7b6;
|
||||
@@ -43,6 +44,18 @@
|
||||
--wa-color-green-10: #002400;
|
||||
--wa-color-green-05: #001700;
|
||||
|
||||
--wa-color-teal-95: #e3f7f5;
|
||||
--wa-color-teal-90: #c6eeeb;
|
||||
--wa-color-teal-80: #81d9d3;
|
||||
--wa-color-teal-70: #34c2b9;
|
||||
--wa-color-teal-60: #10a69d;
|
||||
--wa-color-teal-50: #00837c;
|
||||
--wa-color-teal-40: #00645e;
|
||||
--wa-color-teal-30: #004e49;
|
||||
--wa-color-teal-20: #003935;
|
||||
--wa-color-teal-10: #002220;
|
||||
--wa-color-teal-05: #001513;
|
||||
|
||||
--wa-color-blue-95: #ebf4ff;
|
||||
--wa-color-blue-90: #d4e7ff;
|
||||
--wa-color-blue-80: #a6ccff;
|
||||
|
||||
@@ -1,21 +1,23 @@
|
||||
/**
|
||||
* Component Groups
|
||||
*/
|
||||
:where(:root, :host),
|
||||
.wa-theme-default-light {
|
||||
* Component Groups
|
||||
*/
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-default,
|
||||
.wa-light {
|
||||
/* Form controls */
|
||||
--wa-form-control-background-color: var(--wa-color-surface-default);
|
||||
|
||||
--wa-form-control-border-color: var(--wa-color-neutral-border-loud);
|
||||
--wa-form-control-border-style: var(--wa-border-style);
|
||||
--wa-form-control-border-width: var(--wa-border-width-s);
|
||||
--wa-form-control-border-radius: var(--wa-border-radius-m);
|
||||
|
||||
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
|
||||
--wa-form-control-resting-color: var(--wa-color-neutral-border-loud);
|
||||
|
||||
--wa-form-control-label-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-label-font-weight: var(--wa-font-weight-normal);
|
||||
--wa-form-control-label-line-height: var(--wa-line-height-condensed);
|
||||
--wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
|
||||
--wa-form-control-label-line-height: var(--wa-line-height-normal);
|
||||
|
||||
--wa-form-control-value-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
|
||||
@@ -23,10 +25,6 @@
|
||||
|
||||
--wa-form-control-placeholder-color: var(--wa-color-gray-60);
|
||||
|
||||
--wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
|
||||
--wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
|
||||
--wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
|
||||
|
||||
--wa-form-control-required-content: '*';
|
||||
--wa-form-control-required-content-color: inherit;
|
||||
--wa-form-control-required-content-offset: -0.1em;
|
||||
@@ -49,13 +47,13 @@
|
||||
}
|
||||
|
||||
/** need to wrap :host-context() in an :is() selector for unsupported browsers */
|
||||
.wa-theme-default-dark,
|
||||
:is(:host-context(.wa-theme-default-dark)) {
|
||||
.wa-dark,
|
||||
:is(:host-context(.wa-dark)) {
|
||||
/* Form controls */
|
||||
--wa-form-control-background-color: var(--wa-color-surface-default);
|
||||
|
||||
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
|
||||
--wa-form-control-resting-color: var(--wa-color-neutral-border-loud);
|
||||
--wa-form-control-border-color: var(--wa-color-neutral-border-loud);
|
||||
|
||||
--wa-form-control-label-color: var(--wa-color-text-normal);
|
||||
|
||||
|
||||
@@ -1,14 +1,15 @@
|
||||
/**
|
||||
* Borders and outlines
|
||||
*/
|
||||
:where(:root, :host) {
|
||||
:where(:root),
|
||||
:host {
|
||||
--wa-border-style: solid;
|
||||
|
||||
/* A multiplier is provided to uniformly increase or decrease all border widths. */
|
||||
--wa-border-width-scale: 1;
|
||||
--wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
|
||||
--wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
|
||||
--wa-border-width-l: calc(var(--wa-border-width-scale) * 0.25rem);
|
||||
--wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
|
||||
|
||||
/**
|
||||
* Focus
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
/**
|
||||
* Rounding tokens
|
||||
* Rounding
|
||||
*/
|
||||
:where(:root, :host) {
|
||||
:where(:root),
|
||||
:host {
|
||||
/* A multiplier is provided to uniformly increase or decrease all border radii. */
|
||||
--wa-border-radius-scale: 1;
|
||||
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
|
||||
|
||||
@@ -3,7 +3,8 @@
|
||||
* Shadow properties are highly modular to make it easy to create custom shadow effects or transform elements based on specific shadow qualities.
|
||||
* A multiplier is provided for each shadow quality to uniformly scale all related values.
|
||||
*/
|
||||
:where(:root, :host) {
|
||||
:where(:root),
|
||||
:host {
|
||||
--wa-shadow-offset-x-scale: 0;
|
||||
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
|
||||
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
/**
|
||||
* Spacing
|
||||
*/
|
||||
:where(:root, :host) {
|
||||
:where(:root),
|
||||
:host {
|
||||
/* A multiplier is provided to uniformly increase or decrease all spacing. */
|
||||
--wa-space-scale: 1;
|
||||
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
/**
|
||||
* Transitions
|
||||
*/
|
||||
:where(:root, :host) {
|
||||
:where(:root),
|
||||
:host {
|
||||
--wa-transition-easing: ease;
|
||||
--wa-transition-slow: 300ms;
|
||||
--wa-transition-normal: 150ms;
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
:where(:root, :host) {
|
||||
:where(:root),
|
||||
:host {
|
||||
--wa-font-family-body: ui-sans-serif, system-ui, sans-serif;
|
||||
--wa-font-family-heading: var(--wa-font-family-body);
|
||||
--wa-font-family-code: ui-monospace, monospace;
|
||||
|
||||
@@ -1,613 +0,0 @@
|
||||
@import '../depth/2_chunky.css';
|
||||
@import 'cera_typeface.css';
|
||||
|
||||
:root,
|
||||
:host,
|
||||
.wa-theme-fa-light {
|
||||
color-scheme: light;
|
||||
|
||||
/**
|
||||
* Primitive colors
|
||||
* Each color is identified by a number that corresponds to its lightness value, where 100 is lightest (white) and 0 is darkest (black).
|
||||
* Lightness on this scale is directly related to relative luminance, so each lightness value has uniform WCAG 2.1 contrast across hues.
|
||||
* A difference of 40 between lightness values guarantees a minimum 3:1 contrast ratio.
|
||||
* A difference of 50 between lightness values guarantees a minimum 4.5:1 contrast ratio.
|
||||
* A difference of 60 between lightness values guarantees a minimum 7:1 contrast ratio.
|
||||
*/
|
||||
--wa-color-red-95: #ffeeef;
|
||||
--wa-color-red-90: #fdd;
|
||||
--wa-color-red-80: #ffb2b2;
|
||||
--wa-color-red-70: #ff8585;
|
||||
--wa-color-red-60: #ff5c5c;
|
||||
--wa-color-red-50: #e12124;
|
||||
--wa-color-red-40: #aa1d00;
|
||||
--wa-color-red-30: #8a0b00;
|
||||
--wa-color-red-20: #700000;
|
||||
--wa-color-red-10: #46000c;
|
||||
--wa-color-red-05: #2e0008;
|
||||
|
||||
--wa-color-yellow-95: #fff3bf;
|
||||
--wa-color-yellow-90: #f8e695;
|
||||
--wa-color-yellow-80: #eec637;
|
||||
--wa-color-yellow-70: #d8a815;
|
||||
--wa-color-yellow-60: #ce8500;
|
||||
--wa-color-yellow-50: #aa6300;
|
||||
--wa-color-yellow-40: #824c00;
|
||||
--wa-color-yellow-30: #663b00;
|
||||
--wa-color-yellow-20: #492b00;
|
||||
--wa-color-yellow-10: #2c1a00;
|
||||
--wa-color-yellow-05: #1b0e00;
|
||||
|
||||
--wa-color-green-95: #dbfadf;
|
||||
--wa-color-green-90: #bbf3c3;
|
||||
--wa-color-green-80: #79df8a;
|
||||
--wa-color-green-70: #4dc661;
|
||||
--wa-color-green-60: #35aa4a;
|
||||
--wa-color-green-50: #298539;
|
||||
--wa-color-green-40: #20652d;
|
||||
--wa-color-green-30: #165025;
|
||||
--wa-color-green-20: #0d391c;
|
||||
--wa-color-green-10: #062312;
|
||||
--wa-color-green-05: #03140c;
|
||||
|
||||
--wa-color-blue-95: #e4f1ff;
|
||||
--wa-color-blue-90: #cee6ff;
|
||||
--wa-color-blue-80: #96ccff;
|
||||
--wa-color-blue-70: #53b4ff;
|
||||
--wa-color-blue-60: #349bf1;
|
||||
--wa-color-blue-50: #0079cd;
|
||||
--wa-color-blue-40: #005aa8;
|
||||
--wa-color-blue-30: #00458c;
|
||||
--wa-color-blue-20: #003073;
|
||||
--wa-color-blue-10: #00175c;
|
||||
--wa-color-blue-05: #000e39;
|
||||
|
||||
--wa-color-gray-95: #f1f2f5;
|
||||
--wa-color-gray-90: #e3e6eb;
|
||||
--wa-color-gray-80: #c5cad4;
|
||||
--wa-color-gray-70: #a8afbf;
|
||||
--wa-color-gray-60: #8b95aa;
|
||||
--wa-color-gray-50: #677490;
|
||||
--wa-color-gray-40: #4a5877;
|
||||
--wa-color-gray-30: #3a455d;
|
||||
--wa-color-gray-20: #2a3142;
|
||||
--wa-color-gray-10: #191e28;
|
||||
--wa-color-gray-05: #0e1117;
|
||||
|
||||
--wa-color-primary-95: var(--wa-color-blue-95);
|
||||
--wa-color-primary-90: var(--wa-color-blue-90);
|
||||
--wa-color-primary-80: var(--wa-color-blue-80);
|
||||
--wa-color-primary-70: var(--wa-color-blue-70);
|
||||
--wa-color-primary-60: var(--wa-color-blue-60);
|
||||
--wa-color-primary-50: var(--wa-color-blue-50);
|
||||
--wa-color-primary-40: var(--wa-color-blue-40);
|
||||
--wa-color-primary-30: var(--wa-color-blue-30);
|
||||
--wa-color-primary-20: var(--wa-color-blue-20);
|
||||
--wa-color-primary-10: var(--wa-color-blue-10);
|
||||
--wa-color-primary-05: var(--wa-color-blue-05);
|
||||
|
||||
--wa-color-base-95: var(--wa-color-gray-95);
|
||||
--wa-color-base-90: var(--wa-color-gray-90);
|
||||
--wa-color-base-80: var(--wa-color-gray-80);
|
||||
--wa-color-base-70: var(--wa-color-gray-70);
|
||||
--wa-color-base-60: var(--wa-color-gray-60);
|
||||
--wa-color-base-50: var(--wa-color-gray-50);
|
||||
--wa-color-base-40: var(--wa-color-gray-40);
|
||||
--wa-color-base-30: var(--wa-color-gray-30);
|
||||
--wa-color-base-20: var(--wa-color-gray-20);
|
||||
--wa-color-base-10: var(--wa-color-gray-10);
|
||||
--wa-color-base-05: var(--wa-color-gray-05);
|
||||
|
||||
/**
|
||||
* Foundational theme colors
|
||||
*/
|
||||
|
||||
/* Surfaces are background layers that UI components and other content rest on.
|
||||
* Surface colors support elevation, where raised is closest to the user and lowered is farthest away. */
|
||||
--wa-color-surface-raised: white;
|
||||
--wa-color-surface-default: white;
|
||||
--wa-color-surface-lowered: var(--wa-color-base-95);
|
||||
--wa-color-surface-border: var(--wa-color-base-90);
|
||||
|
||||
/* Text colors are used for standard text elements.
|
||||
* Text should have a minimum 4.5:1 contrast ratio against surfaces.
|
||||
* Inverse text should support appropriate contrast against background colors with opposing lightness. */
|
||||
--wa-color-text-normal: var(--wa-color-base-20);
|
||||
--wa-color-text-quiet: var(--wa-color-base-40);
|
||||
--wa-color-text-link: var(--wa-color-brand-on-quiet);
|
||||
|
||||
/* Focus specifies the default color of the focus ring for predictable keyboard navigation.
|
||||
* Focus should have a minimum 3:1 contrast ratio against surfaces and background colors whenever possible. */
|
||||
--wa-color-focus: var(--wa-color-primary-60);
|
||||
|
||||
/* Overlays provide a backdrop for isolated content, often allowing background colors or content to show through. */
|
||||
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-base-10) 32%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-base-50) 8%, transparent);
|
||||
|
||||
/* Shadow specifies the default color for box shadows that indicate elevation. */
|
||||
--wa-color-shadow: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-base-05) calc(var(--wa-shadow-blur-scale) * 8% + 6%),
|
||||
transparent
|
||||
);
|
||||
|
||||
--wa-shadow-offset-x-scale: 0;
|
||||
--wa-shadow-offset-y-scale: 0.35;
|
||||
|
||||
/* Mix colors are used in color-mix() to achieve consistent interaction effects across components. */
|
||||
--wa-color-mix-hover: black 8%;
|
||||
--wa-color-mix-active: black 20%;
|
||||
|
||||
/**
|
||||
* Semantic theme colors
|
||||
* Five semantic groups reinforce a component's message, intended usage, or expected results through meaningful hues -
|
||||
* * Brand to reinforce product branding
|
||||
* * Success to express validity or confirmation
|
||||
* * Warning to express caution or uncertainty
|
||||
* * Danger to express errors or risk
|
||||
* * Neutral for elements that are innocuous or inert
|
||||
* Each semantic group specifies colors to use as fills, outlines, and text content with vivid and muted variations.
|
||||
* Vivid colors are the most noticeable against base theme colors, whereas muted colors draw less attention.
|
||||
* Vivid colors should have a minimum 3:1 contrast ratio against surfaces when possible.
|
||||
* Muted colors have no contrast requirements.
|
||||
* Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
|
||||
*/
|
||||
|
||||
--wa-color-brand-fill-loud: var(--wa-color-primary-70);
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-primary-95);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-primary-90);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-primary-70);
|
||||
--wa-color-brand-border-normal: var(--wa-color-primary-50);
|
||||
--wa-color-brand-on-loud: var(--wa-color-text-normal);
|
||||
--wa-color-brand-on-normal: var(--wa-color-primary-40);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-primary-50);
|
||||
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-80);
|
||||
--wa-color-success-fill-quiet: var(--wa-color-green-95);
|
||||
--wa-color-success-fill-normal: var(--wa-color-green-90);
|
||||
--wa-color-success-border-quiet: var(--wa-color-green-70);
|
||||
--wa-color-success-border-normal: var(--wa-color-green-50);
|
||||
--wa-color-success-on-loud: var(--wa-color-text-normal);
|
||||
--wa-color-success-on-normal: var(--wa-color-green-40);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-50);
|
||||
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-yellow-90);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-border-normal: var(--wa-color-yellow-60);
|
||||
--wa-color-warning-on-loud: var(--wa-color-text-normal);
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-yellow-50);
|
||||
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-70);
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-red-95);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-red-90);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-red-70);
|
||||
--wa-color-danger-border-normal: var(--wa-color-red-50);
|
||||
--wa-color-danger-on-loud: var(--wa-color-text-normal);
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-40);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-50);
|
||||
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-base-80);
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-base-95);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-base-90);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-base-60);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-base-40);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-text-normal);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-base-40);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-text-normal);
|
||||
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
--wa-font-family-heading: 'cera-round-pro', sans-serif;
|
||||
--wa-font-family-body: 'cera-round-pro', sans-serif;
|
||||
--wa-font-family-code: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
--wa-font-family-longform: 'Lora', serif;
|
||||
|
||||
--wa-font-weight-light: 300;
|
||||
--wa-font-weight-normal: 400;
|
||||
--wa-font-weight-semibold: 500;
|
||||
--wa-font-weight-bold: 700;
|
||||
|
||||
--wa-font-weight-heading: var(--wa-font-weight-bold);
|
||||
--wa-font-weight-body: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-action: var(--wa-font-weight-bold);
|
||||
|
||||
/* The default typescale is based on the Major Second scale (x1.125).
|
||||
* Every other step on the scale is skipped for larger sizes in order to maximize variation. */
|
||||
--wa-font-size-root: 16px;
|
||||
--wa-font-size-2xs: 0.6875rem; /* 11px */
|
||||
--wa-font-size-xs: 0.75rem; /* 12px */
|
||||
--wa-font-size-s: 0.875rem; /* 14px */
|
||||
--wa-font-size-m: 1rem; /* 16px */
|
||||
--wa-font-size-l: 1.25rem; /* 20px */
|
||||
--wa-font-size-xl: 1.625rem; /* 26px */
|
||||
--wa-font-size-2xl: 2rem; /* 32px */
|
||||
--wa-font-size-3xl: 2.5625rem; /* 41px */
|
||||
--wa-font-size-4xl: 3.25rem; /* 52px */
|
||||
|
||||
--wa-line-height-condensed: 1.25;
|
||||
--wa-line-height-normal: 1.75;
|
||||
--wa-line-height-expanded: 2;
|
||||
|
||||
/**
|
||||
* Spacing
|
||||
* Used intentionally, space properties yield a predictable rhythm and support effective implementation of the proximity principle.
|
||||
* Space can be organized into three groups with distinct usage -
|
||||
* * Small-scale space (3xs, 2xs, and xs) is used for gaps between closely related elements, such as a dropdown button and its menu,
|
||||
* and padding within small components, such as badges and tooltips
|
||||
* * Normal space (s, m, and l) is used for gaps between related elements with distinct purposes or touch targets and padding within
|
||||
* typical interface elements, such as buttons and inputs
|
||||
* * Large-scale space (xl, 2xl, and 3xl) is used for gaps between unrelated elements and padding within larger components,
|
||||
* such as cards and dialogs
|
||||
*/
|
||||
/* Space is designed to scale according to a single base value.
|
||||
* The base value is intended for calculations and is not used by components directly. */
|
||||
--wa-space-scale: 1;
|
||||
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
|
||||
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
|
||||
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
|
||||
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
|
||||
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
|
||||
--wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
|
||||
--wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
|
||||
--wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
|
||||
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
|
||||
|
||||
/**
|
||||
* Borders
|
||||
*/
|
||||
--wa-border-style: solid;
|
||||
|
||||
/* Border widths are designed to scale according to a single base value.
|
||||
* The base value is intended for calculations and is not used by components directly. */
|
||||
--wa-border-width-scale: 0.125;
|
||||
--wa-border-width-s: calc(var(--wa-border-width-scale) * 1rem);
|
||||
--wa-border-width-m: calc(var(--wa-border-width-scale) * 2rem);
|
||||
--wa-border-width-l: calc(var(--wa-border-width-scale) * 3rem);
|
||||
|
||||
--wa-form-control-border-style: var(--wa-border-style);
|
||||
--wa-form-control-border-width: var(--wa-border-width-s);
|
||||
|
||||
--wa-panel-border-style: var(--wa-border-style);
|
||||
--wa-panel-border-width: var(--wa-border-width-s);
|
||||
|
||||
/**
|
||||
* Corners
|
||||
*/
|
||||
/* Corners are designed to scale according to a single base value.
|
||||
* The base value is intended for calculations and is not used by components directly. */
|
||||
--wa-border-radius-scale: 0.5;
|
||||
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.75rem);
|
||||
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 1rem);
|
||||
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 2rem);
|
||||
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 3rem);
|
||||
|
||||
/* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
|
||||
--wa-border-radius-pill: 9999px;
|
||||
--wa-border-radius-circle: 50%;
|
||||
--wa-border-radius-square: 0;
|
||||
|
||||
/**
|
||||
* Focus
|
||||
*/
|
||||
--wa-focus-ring-style: solid;
|
||||
--wa-focus-ring-width: 0.1875rem; /* 3px */
|
||||
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
|
||||
color-mix(in oklab, var(--wa-color-focus) 98%, transparent);
|
||||
--wa-focus-ring-offset: 0.0625rem; /* 1px */
|
||||
|
||||
/**
|
||||
* Links
|
||||
*/
|
||||
--wa-link-decoration-default: underline var(--wa-color-text-link) dotted;
|
||||
--wa-link-decoration-hover: underline;
|
||||
|
||||
/**
|
||||
* Transitions
|
||||
*/
|
||||
--wa-transition-slow: 250ms;
|
||||
--wa-transition-normal: 150ms;
|
||||
--wa-transition-fast: 50ms;
|
||||
|
||||
/**
|
||||
* Component groups
|
||||
*/
|
||||
--wa-form-control-background-color: var(--wa-color-surface-default);
|
||||
|
||||
--wa-form-control-border-radius: var(--wa-border-radius-m);
|
||||
|
||||
--wa-form-control-activated-color: var(--wa-color-neutral-border-normal);
|
||||
--wa-form-control-resting-color: var(--wa-color-neutral-border-normal);
|
||||
|
||||
--wa-form-control-label-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-label-font-weight: var(--wa-font-weight-bold);
|
||||
--wa-form-control-label-line-height: var(--wa-line-height-normal);
|
||||
|
||||
--wa-form-control-value-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
|
||||
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
|
||||
|
||||
--wa-form-control-placeholder-color: var(--wa-color-base-60);
|
||||
|
||||
--wa-form-control-height-s: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
|
||||
--wa-form-control-height-m: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
|
||||
--wa-form-control-height-l: calc(var(--wa-space-l) * 2 + 1em * var(--wa-form-control-value-line-height));
|
||||
|
||||
--wa-form-control-required-content: '*';
|
||||
--wa-form-control-required-content-color: inherit;
|
||||
--wa-form-control-required-content-offset: -0.1em;
|
||||
|
||||
--wa-panel-border-radius: var(--wa-border-radius-l);
|
||||
|
||||
/**
|
||||
* From 2.x
|
||||
*/
|
||||
--wa-tooltip-arrow-size: 0.375rem;
|
||||
}
|
||||
|
||||
.wa-theme-fa-dark,
|
||||
.wa-theme-fa-dark :host {
|
||||
color-scheme: dark;
|
||||
|
||||
/**
|
||||
* Base theme colors
|
||||
*/
|
||||
--wa-color-surface-raised: var(--wa-color-base-30);
|
||||
--wa-color-surface-default: var(--wa-color-base-20);
|
||||
--wa-color-surface-lowered: var(--wa-color-base-10);
|
||||
--wa-color-surface-border: var(--wa-color-base-30);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-base-95);
|
||||
--wa-color-text-quiet: var(--wa-color-base-60);
|
||||
--wa-color-text-link: var(--wa-color-brand-on-quiet);
|
||||
|
||||
--wa-color-focus: var(--wa-color-primary-60);
|
||||
|
||||
--wa-color-overlay-modal: color-mix(in oklab, black 50%, transparent);
|
||||
|
||||
--wa-color-shadow: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-base-05) calc(var(--wa-shadow-blur-scale) * 16% + 40%),
|
||||
transparent
|
||||
);
|
||||
|
||||
--wa-color-mix-hover: black 8%;
|
||||
--wa-color-mix-active: black 16%;
|
||||
|
||||
/**
|
||||
* Semantic theme colors
|
||||
*/
|
||||
--wa-color-brand-fill-loud: var(--wa-color-primary-80);
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-primary-10);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-primary-20);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-primary-60);
|
||||
--wa-color-brand-border-normal: var(--wa-color-primary-70);
|
||||
--wa-color-brand-on-loud: var(--wa-color-primary-10);
|
||||
--wa-color-brand-on-normal: var(--wa-color-primary-80);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-primary-70);
|
||||
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-80);
|
||||
--wa-color-success-fill-quiet: var(--wa-color-green-10);
|
||||
--wa-color-success-fill-normal: var(--wa-color-green-20);
|
||||
--wa-color-success-border-quiet: var(--wa-color-green-60);
|
||||
--wa-color-success-border-normal: var(--wa-color-green-70);
|
||||
--wa-color-success-on-loud: var(--wa-color-green-10);
|
||||
--wa-color-success-on-normal: var(--wa-color-green-80);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-70);
|
||||
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-yellow-20);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-yellow-60);
|
||||
--wa-color-warning-border-normal: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-on-loud: var(--wa-color-yellow-10);
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-yellow-70);
|
||||
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-80);
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-red-10);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-red-20);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-red-60);
|
||||
--wa-color-danger-border-normal: var(--wa-color-red-70);
|
||||
--wa-color-danger-on-loud: var(--wa-color-red-10);
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-80);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-70);
|
||||
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-base-80);
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-base-20);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-base-30);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-base-60);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-base-70);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-base-10);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-base-80);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-base-70);
|
||||
}
|
||||
|
||||
/* #region Custom Styles */
|
||||
@container preview (min-width: 0) {
|
||||
.project-header h1 {
|
||||
font-size: var(--wa-font-size-xl);
|
||||
}
|
||||
|
||||
.hero {
|
||||
color: var(--wa-color-brand-on-normal);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero .title {
|
||||
background:
|
||||
url('/assets/images/themer/fa/hero.png') center center / cover no-repeat,
|
||||
var(--wa-color-brand-fill-normal);
|
||||
padding: calc(var(--wa-space-3xl) * 5) calc(var(--wa-space-3xl) * 2) calc(var(--wa-space-3xl) * 4);
|
||||
margin: calc(var(--wa-space-3xl) * -1) 0;
|
||||
border-radius: var(--wa-panel-border-radius);
|
||||
}
|
||||
|
||||
h1.hero-title {
|
||||
font-size: var(--wa-font-size-4xl);
|
||||
}
|
||||
|
||||
.badge-stock {
|
||||
position: absolute;
|
||||
top: -0.75rem;
|
||||
right: var(--wa-space-l);
|
||||
}
|
||||
|
||||
pre.codeblock,
|
||||
.post-body code {
|
||||
background-color: color-mix(in oklab, var(--wa-color-base-50), transparent 90%);
|
||||
}
|
||||
|
||||
.message-composer wa-card::part(header) {
|
||||
background-color: var(--wa-color-neutral-fill-normal);
|
||||
color: var(--wa-color-neutral-on-normal);
|
||||
|
||||
& wa-icon-button {
|
||||
color: var(--wa-color-text-normal);
|
||||
}
|
||||
}
|
||||
|
||||
wa-alert {
|
||||
--text-color: var(--wa-color-text-normal);
|
||||
--icon-color: var(--border-color);
|
||||
|
||||
.wa-theme-fa-dark & {
|
||||
--background: var(--wa-color-surface-lowered);
|
||||
}
|
||||
|
||||
&[variant='brand'] {
|
||||
--border-color: var(--wa-color-brand-border-normal);
|
||||
}
|
||||
&[variant='success'] {
|
||||
--border-color: var(--wa-color-success-border-normal);
|
||||
}
|
||||
&[variant='warning'] {
|
||||
--border-color: var(--wa-color-warning-border-normal);
|
||||
}
|
||||
&[variant='danger'] {
|
||||
--border-color: var(--wa-color-danger-border-normal);
|
||||
}
|
||||
&[variant='neutral'] {
|
||||
--border-color: var(--wa-color-neutral-border-normal);
|
||||
}
|
||||
}
|
||||
|
||||
wa-badge {
|
||||
--border-color: var(--background);
|
||||
text-transform: uppercase;
|
||||
|
||||
&::part(base) {
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
}
|
||||
}
|
||||
|
||||
wa-button:not([appearance='plain']) {
|
||||
--border-color: var(--text-color);
|
||||
--border-color-hover: var(--border-color);
|
||||
--border-color-active: var(--border-color);
|
||||
--box-shadow-color: var(--border-color);
|
||||
--background-active: var(--border-color);
|
||||
--text-color-active: var(--background);
|
||||
|
||||
&[appearance='outlined'] {
|
||||
--background: var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
.wa-theme-fa-dark & {
|
||||
&[variant='brand'] {
|
||||
--border-color: var(--wa-color-brand-border-loud);
|
||||
}
|
||||
&[variant='success'] {
|
||||
--border-color: var(--wa-color-success-border-loud);
|
||||
}
|
||||
&[variant='warning'] {
|
||||
--border-color: var(--wa-color-warning-border-loud);
|
||||
}
|
||||
&[variant='danger'] {
|
||||
--border-color: var(--wa-color-danger-border-loud);
|
||||
}
|
||||
&[variant='neutral'] {
|
||||
--border-color: var(--wa-color-neutral-border-loud);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
wa-card {
|
||||
--border-width: 0px;
|
||||
|
||||
& .title {
|
||||
font-size: var(--wa-font-size-xl);
|
||||
}
|
||||
|
||||
& wa-rating {
|
||||
--symbol-size: var(--wa-font-size-m);
|
||||
}
|
||||
}
|
||||
|
||||
wa-carousel {
|
||||
--pagination-color-activated: var(--wa-color-brand-fill-loud);
|
||||
--pagination-color-resting: var(--wa-color-neutral-fill-loud);
|
||||
}
|
||||
|
||||
wa-checkbox,
|
||||
wa-radio {
|
||||
--checked-icon-color: var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
wa-radio-group > wa-radio-button {
|
||||
--wa-transition-slow: 0ms;
|
||||
--wa-transition-normal: 0ms;
|
||||
--wa-transition-fast: 0ms;
|
||||
--background-active: var(--wa-color-neutral-on-quiet);
|
||||
--border-color-active: var(--background-active);
|
||||
--box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--border-color);
|
||||
--text-color-active: var(--wa-color-surface-default);
|
||||
|
||||
&:active,
|
||||
&[checked] {
|
||||
--background: var(--wa-color-neutral-on-quiet);
|
||||
--box-shadow: none;
|
||||
--text-color: var(--wa-color-surface-default);
|
||||
transform: translateX(var(--wa-shadow-offset-x-s)) translateY(var(--wa-shadow-offset-y-s));
|
||||
}
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--background: transparent;
|
||||
--border-color: var(--wa-form-control-activated-color);
|
||||
--thumb-color: var(--border-color);
|
||||
--thumb-color-checked: var(--wa-color-neutral-fill-quiet);
|
||||
--thumb-size: 1em;
|
||||
--height: 1.5em;
|
||||
--width: calc(var(--thumb-size) * 2.5);
|
||||
}
|
||||
|
||||
wa-tag {
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
}
|
||||
|
||||
wa-input,
|
||||
wa-select {
|
||||
--wa-form-control-height-s: calc(
|
||||
var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height) + var(--wa-shadow-offset-y-s)
|
||||
);
|
||||
--wa-form-control-height-m: calc(
|
||||
var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height) + var(--wa-shadow-offset-y-s)
|
||||
);
|
||||
--wa-form-control-height-l: calc(
|
||||
var(--wa-space-l) * 2 + 1em * var(--wa-form-control-value-line-height) + var(--wa-shadow-offset-y-s)
|
||||
);
|
||||
|
||||
& > wa-icon {
|
||||
color: var(--wa-color-base-30);
|
||||
|
||||
.wa-theme-fa-dark & {
|
||||
color: var(--wa-color-base-80);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
@@ -1,488 +1,204 @@
|
||||
@import '../depth/4_glossy.css';
|
||||
@import url('../color/elegant.css');
|
||||
@import url('default/color-semantic.css');
|
||||
@import url('default/space.css');
|
||||
@import url('default/outlines.css');
|
||||
@import url('default/typography.css');
|
||||
@import url('default/rounding.css');
|
||||
@import url('default/shadows.css');
|
||||
@import url('default/transitions.css');
|
||||
@import url('default/groups.css');
|
||||
|
||||
:root,
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-glassy-light {
|
||||
.wa-theme-glassy,
|
||||
.wa-light {
|
||||
color-scheme: light;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/**
|
||||
* Primitive colors
|
||||
* Each color is identified by a number that corresponds to its lightness value, where 100 is lightest (white) and 0 is darkest (black).
|
||||
* Lightness on this scale is directly related to relative luminance, so each lightness value has uniform WCAG 2.1 contrast across hues.
|
||||
* A difference of 40 between lightness values guarantees a minimum 3:1 contrast ratio.
|
||||
* A difference of 50 between lightness values guarantees a minimum 4.5:1 contrast ratio.
|
||||
* A difference of 60 between lightness values guarantees a minimum 7:1 contrast ratio.
|
||||
* Semantic Colors
|
||||
*/
|
||||
--wa-color-red-95: #fdeeef;
|
||||
--wa-color-red-90: #fcdfe0;
|
||||
--wa-color-red-80: #f8b9bc;
|
||||
--wa-color-red-70: #f0969c;
|
||||
--wa-color-red-60: #e3727d;
|
||||
--wa-color-red-50: #cc465a;
|
||||
--wa-color-red-40: #ac1d3d;
|
||||
--wa-color-red-30: #8f012c;
|
||||
--wa-color-red-20: #6b001c;
|
||||
--wa-color-red-10: #44000d;
|
||||
--wa-color-red-05: #2e0006;
|
||||
|
||||
--wa-color-yellow-95: #f5f2e5;
|
||||
--wa-color-yellow-90: #ece6cc;
|
||||
--wa-color-yellow-80: #dac992;
|
||||
--wa-color-yellow-70: #c9ac5c;
|
||||
--wa-color-yellow-60: #b98f27;
|
||||
--wa-color-yellow-50: #9b6d09;
|
||||
--wa-color-yellow-40: #785007;
|
||||
--wa-color-yellow-30: #613e06;
|
||||
--wa-color-yellow-20: #492c05;
|
||||
--wa-color-yellow-10: #2b1a02;
|
||||
--wa-color-yellow-05: #191008;
|
||||
|
||||
--wa-color-green-95: #ecf4f1;
|
||||
--wa-color-green-90: #dae9e3;
|
||||
--wa-color-green-80: #b0d1c4;
|
||||
--wa-color-green-70: #88b9a6;
|
||||
--wa-color-green-60: #5fa288;
|
||||
--wa-color-green-50: #2d8462;
|
||||
--wa-color-green-40: #00663e;
|
||||
--wa-color-green-30: #005031;
|
||||
--wa-color-green-20: #003b24;
|
||||
--wa-color-green-10: #002316;
|
||||
--wa-color-green-05: #00160d;
|
||||
|
||||
--wa-color-teal-95: #ebf4f4;
|
||||
--wa-color-teal-90: #d9e9e9;
|
||||
--wa-color-teal-80: #add0d1;
|
||||
--wa-color-teal-70: #84b8ba;
|
||||
--wa-color-teal-60: #5aa0a3;
|
||||
--wa-color-teal-50: #268285;
|
||||
--wa-color-teal-40: #006366;
|
||||
--wa-color-teal-30: #004e51;
|
||||
--wa-color-teal-20: #00393b;
|
||||
--wa-color-teal-10: #002223;
|
||||
--wa-color-teal-05: #001415;
|
||||
|
||||
--wa-color-gray-95: #f2f2f3;
|
||||
--wa-color-gray-90: #e6e5e8;
|
||||
--wa-color-gray-80: #cbc8ce;
|
||||
--wa-color-gray-70: #b1adb6;
|
||||
--wa-color-gray-60: #98939f;
|
||||
--wa-color-gray-50: #7a7382;
|
||||
--wa-color-gray-40: #5d5568;
|
||||
--wa-color-gray-30: #494352;
|
||||
--wa-color-gray-20: #35313c;
|
||||
--wa-color-gray-10: #1f1c23;
|
||||
--wa-color-gray-05: #131115;
|
||||
|
||||
--wa-color-primary-95: var(--wa-color-teal-95);
|
||||
--wa-color-primary-90: var(--wa-color-teal-90);
|
||||
--wa-color-primary-80: var(--wa-color-teal-80);
|
||||
--wa-color-primary-70: var(--wa-color-teal-70);
|
||||
--wa-color-primary-60: var(--wa-color-teal-60);
|
||||
--wa-color-primary-50: var(--wa-color-teal-50);
|
||||
--wa-color-primary-40: var(--wa-color-teal-40);
|
||||
--wa-color-primary-30: var(--wa-color-teal-30);
|
||||
--wa-color-primary-20: var(--wa-color-teal-20);
|
||||
--wa-color-primary-10: var(--wa-color-teal-10);
|
||||
--wa-color-primary-05: var(--wa-color-teal-05);
|
||||
|
||||
--wa-color-base-95: var(--wa-color-gray-95);
|
||||
--wa-color-base-90: var(--wa-color-gray-90);
|
||||
--wa-color-base-80: var(--wa-color-gray-80);
|
||||
--wa-color-base-70: var(--wa-color-gray-70);
|
||||
--wa-color-base-60: var(--wa-color-gray-60);
|
||||
--wa-color-base-50: var(--wa-color-gray-50);
|
||||
--wa-color-base-40: var(--wa-color-gray-40);
|
||||
--wa-color-base-30: var(--wa-color-gray-30);
|
||||
--wa-color-base-20: var(--wa-color-gray-20);
|
||||
--wa-color-base-10: var(--wa-color-gray-10);
|
||||
--wa-color-base-05: var(--wa-color-gray-05);
|
||||
|
||||
/**
|
||||
* Base theme colors
|
||||
*/
|
||||
|
||||
/* Surfaces are background layers that UI components and other content rest on.
|
||||
* Surface colors support elevation, where raised is closest to the user and lowered is farthest away. */
|
||||
--wa-color-surface-raised: white;
|
||||
--wa-color-surface-default: white;
|
||||
--wa-color-surface-lowered: var(--wa-color-base-95);
|
||||
--wa-color-surface-border: var(--wa-color-base-90);
|
||||
|
||||
/* Text colors are used for standard text elements.
|
||||
* Text should have a minimum 4.5:1 contrast ratio against surfaces.
|
||||
* Inverse text should support appropriate contrast against background colors with opposing lightness. */
|
||||
--wa-color-text-normal: var(--wa-color-base-10);
|
||||
--wa-color-text-quiet: var(--wa-color-base-40);
|
||||
--wa-color-text-link: var(--wa-color-brand-on-quiet);
|
||||
|
||||
/* Focus specifies the default color of the focus ring for predictable keyboard navigation.
|
||||
* Focus should have a minimum 3:1 contrast ratio against surfaces and background colors whenever possible. */
|
||||
--wa-color-focus: color-mix(in oklab, var(--wa-color-primary-60) 96%, transparent);
|
||||
|
||||
/* Overlays provide a backdrop for isolated content, often allowing background colors or content to show through. */
|
||||
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-base-30) 32%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-base-50) 8%, transparent);
|
||||
|
||||
/* Shadow specifies the default color for box shadows that indicate elevation. */
|
||||
--wa-color-shadow: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-base-05) calc(var(--wa-shadow-blur-scale) * 8% + 6%),
|
||||
transparent
|
||||
);
|
||||
|
||||
/* Mix colors are used in color-mix() to achieve consistent interaction effects across components. */
|
||||
--wa-color-mix-hover: white 6%;
|
||||
--wa-color-mix-active: black 12%;
|
||||
|
||||
/**
|
||||
* Semantic theme colors
|
||||
* Five semantic groups reinforce a component's message, intended usage, or expected results through meaningful hues -
|
||||
* * Brand to reinforce product branding
|
||||
* * Success to express validity or confirmation
|
||||
* * Warning to express caution or uncertainty
|
||||
* * Danger to express errors or risk
|
||||
* * Neutral for elements that are innocuous or inert
|
||||
* Each semantic group specifies colors to use as fills, outlines, and text content with vivid and muted variations.
|
||||
* Vivid colors are the most noticeable against base theme colors, whereas muted colors draw less attention.
|
||||
* Vivid colors should have a minimum 3:1 contrast ratio against surfaces when possible.
|
||||
* Muted colors have no contrast requirements.
|
||||
* Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
|
||||
*/
|
||||
--wa-color-brand-fill-loud: var(--wa-color-primary-50);
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-primary-90);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-primary-90);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-primary-90);
|
||||
--wa-color-brand-border-normal: var(--wa-color-primary-80);
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-teal-95);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-teal-90);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-teal-50);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-teal-90);
|
||||
--wa-color-brand-border-normal: var(--wa-color-teal-80);
|
||||
--wa-color-brand-border-loud: var(--wa-color-teal-60);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-teal-40);
|
||||
--wa-color-brand-on-normal: var(--wa-color-teal-30);
|
||||
--wa-color-brand-on-loud: white;
|
||||
--wa-color-brand-on-normal: var(--wa-color-primary-40);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-primary-50);
|
||||
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-50);
|
||||
--wa-color-success-fill-quiet: var(--wa-color-green-95);
|
||||
--wa-color-success-fill-normal: var(--wa-color-green-90);
|
||||
--wa-color-success-border-quiet: var(--wa-color-green-90);
|
||||
--wa-color-success-border-normal: var(--wa-color-green-80);
|
||||
--wa-color-success-on-loud: white;
|
||||
--wa-color-success-on-normal: var(--wa-color-green-40);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-50);
|
||||
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-yellow-90);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-yellow-90);
|
||||
--wa-color-warning-border-normal: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-on-loud: white;
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-yellow-50);
|
||||
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-50);
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-red-95);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-red-90);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-red-90);
|
||||
--wa-color-danger-border-normal: var(--wa-color-red-80);
|
||||
--wa-color-danger-on-loud: white;
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-40);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-50);
|
||||
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-base-50);
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-base-95);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-base-90);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-base-90);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-base-80);
|
||||
--wa-color-neutral-on-loud: white;
|
||||
--wa-color-neutral-on-normal: var(--wa-color-base-40);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-base-50);
|
||||
|
||||
/**
|
||||
* Typography
|
||||
* Shadows
|
||||
*/
|
||||
--wa-font-family-heading: 'Quicksand', sans-serif;
|
||||
--wa-font-family-body: 'Inter', sans-serif;
|
||||
--wa-font-family-code: 'Noto Sans Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
||||
--wa-font-family-longform: 'Lora', serif;
|
||||
|
||||
--wa-font-weight-light: 300;
|
||||
--wa-font-weight-normal: 400;
|
||||
--wa-font-weight-semibold: 500;
|
||||
--wa-font-weight-bold: 600;
|
||||
|
||||
--wa-font-weight-heading: var(--wa-font-weight-bold);
|
||||
--wa-font-weight-body: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-action: var(--wa-font-weight-semibold);
|
||||
|
||||
/* The default typescale is based on the Major Second scale (x1.125).
|
||||
* Every other step on the scale is skipped for larger sizes in order to maximize variation. */
|
||||
--wa-font-size-root: 16px;
|
||||
--wa-font-size-2xs: 0.6875rem; /* 11px */
|
||||
--wa-font-size-xs: 0.75rem; /* 12px */
|
||||
--wa-font-size-s: 0.875rem; /* 14px */
|
||||
--wa-font-size-m: 1rem; /* 16px */
|
||||
--wa-font-size-l: 1.25rem; /* 20px */
|
||||
--wa-font-size-xl: 1.625rem; /* 26px */
|
||||
--wa-font-size-2xl: 2rem; /* 32px */
|
||||
--wa-font-size-3xl: 2.5625rem; /* 41px */
|
||||
--wa-font-size-4xl: 3.25rem; /* 52px */
|
||||
|
||||
--wa-line-height-condensed: 1.25;
|
||||
--wa-line-height-normal: 1.6;
|
||||
--wa-line-height-expanded: 2;
|
||||
|
||||
/**
|
||||
* Spacing
|
||||
* Used intentionally, space properties yield a predictable rhythm and support effective implementation of the proximity principle.
|
||||
* Space can be organized into three groups with distinct usage -
|
||||
* * Small-scale space (3xs, 2xs, and xs) is used for gaps between closely related elements, such as a dropdown button and its menu,
|
||||
* and padding within small components, such as badges and tooltips
|
||||
* * Normal space (s, m, and l) is used for gaps between related elements with distinct purposes or touch targets and padding within
|
||||
* typical interface elements, such as buttons and inputs
|
||||
* * Large-scale space (xl, 2xl, and 3xl) is used for gaps between unrelated elements and padding within larger components,
|
||||
* such as cards and dialogs
|
||||
*/
|
||||
/* Space is designed to scale according to a single base value.
|
||||
* The base value is intended for calculations and is not used by components directly. */
|
||||
--wa-space-scale: 1;
|
||||
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
|
||||
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
|
||||
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
|
||||
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
|
||||
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
|
||||
--wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
|
||||
--wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
|
||||
--wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
|
||||
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
|
||||
|
||||
/**
|
||||
* Borders
|
||||
*/
|
||||
--wa-border-style: solid;
|
||||
|
||||
/* Border widths are designed to scale according to a single base value.
|
||||
* The base value is intended for calculations and is not used by components directly. */
|
||||
--wa-border-width-scale: 0.0625;
|
||||
--wa-border-width-s: calc(var(--wa-border-width-scale) * 1rem);
|
||||
--wa-border-width-m: calc(var(--wa-border-width-scale) * 2rem);
|
||||
--wa-border-width-l: calc(var(--wa-border-width-scale) * 3rem);
|
||||
|
||||
--wa-form-control-border-style: var(--wa-border-style);
|
||||
--wa-form-control-border-width: var(--wa-border-width-s);
|
||||
|
||||
--wa-panel-border-style: hidden;
|
||||
--wa-panel-border-width: var(--wa-border-width-s);
|
||||
|
||||
/**
|
||||
* Corners
|
||||
*/
|
||||
/* Corners are designed to scale according to a single base value.
|
||||
* The base value is intended for calculations and is not used by components directly. */
|
||||
--wa-border-radius-scale: 0.375;
|
||||
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.75rem);
|
||||
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 1rem);
|
||||
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 2rem);
|
||||
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 3rem);
|
||||
|
||||
/* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
|
||||
--wa-border-radius-pill: 9999px;
|
||||
--wa-border-radius-circle: 50%;
|
||||
--wa-border-radius-square: 0;
|
||||
|
||||
/**
|
||||
* Focus
|
||||
*/
|
||||
--wa-focus-ring-style: solid;
|
||||
--wa-focus-ring-width: 0.1875rem; /* 3px */
|
||||
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
|
||||
--wa-focus-ring-offset: 0.0625rem; /* 1px */
|
||||
|
||||
/**
|
||||
* Links
|
||||
*/
|
||||
--wa-link-decoration-default: underline var(--wa-color-brand-border-normal) dotted;
|
||||
--wa-link-decoration-hover: underline;
|
||||
|
||||
/**
|
||||
* Transitions
|
||||
*/
|
||||
--wa-transition-slow: 250ms;
|
||||
--wa-transition-normal: 150ms;
|
||||
--wa-transition-fast: 100ms;
|
||||
|
||||
/**
|
||||
* Component groups
|
||||
*/
|
||||
--wa-form-control-background-color: var(--wa-color-surface-default);
|
||||
|
||||
--wa-form-control-border-radius: var(--wa-border-radius-m);
|
||||
|
||||
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
|
||||
--wa-form-control-resting-color: var(--wa-color-neutral-border-normal);
|
||||
|
||||
--wa-form-control-label-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-label-font-weight: var(--wa-font-weight-normal);
|
||||
--wa-form-control-label-line-height: var(--wa-line-height-normal);
|
||||
|
||||
--wa-form-control-value-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
|
||||
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
|
||||
|
||||
--wa-form-control-placeholder-color: var(--wa-color-base-60);
|
||||
|
||||
--wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
|
||||
--wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
|
||||
--wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
|
||||
|
||||
--wa-form-control-required-content: '*';
|
||||
--wa-form-control-required-content-color: inherit;
|
||||
--wa-form-control-required-content-offset: -0.1em;
|
||||
|
||||
--wa-panel-border-radius: var(--wa-border-radius-l);
|
||||
|
||||
/**
|
||||
* From 2.x
|
||||
*/
|
||||
--wa-tooltip-arrow-size: 0.375rem;
|
||||
--wa-shadow-blur-scale: 3;
|
||||
}
|
||||
|
||||
.wa-theme-glassy-dark,
|
||||
.wa-theme-glassy-dark :host {
|
||||
.wa-dark,
|
||||
:is(:host-context(.wa-dark)) {
|
||||
color-scheme: dark;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/**
|
||||
* Base theme colors
|
||||
* Foundational Colors
|
||||
*/
|
||||
--wa-color-surface-raised: var(--wa-color-base-20);
|
||||
--wa-color-surface-default: var(--wa-color-base-10);
|
||||
--wa-color-surface-lowered: var(--wa-color-base-05);
|
||||
--wa-color-surface-border: var(--wa-color-base-30);
|
||||
--wa-color-surface-raised: var(--wa-color-gray-10);
|
||||
--wa-color-surface-default: var(--wa-color-gray-05);
|
||||
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 10%);
|
||||
--wa-color-surface-border: var(--wa-color-gray-20);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-base-95);
|
||||
--wa-color-text-quiet: var(--wa-color-base-60);
|
||||
--wa-color-text-link: var(--wa-color-brand-on-quiet);
|
||||
--wa-color-text-normal: var(--wa-color-gray-95);
|
||||
--wa-color-text-quiet: var(--wa-color-gray-60);
|
||||
--wa-color-text-link: var(--wa-color-teal-70);
|
||||
|
||||
--wa-color-focus: color-mix(in oklab, var(--wa-color-primary-60) 90%, transparent);
|
||||
|
||||
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-primary-05) 30%, transparent);
|
||||
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
|
||||
|
||||
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-scale) * 32% + 40%), transparent);
|
||||
|
||||
--wa-color-mix-hover: white 6%;
|
||||
--wa-color-mix-active: black 12%;
|
||||
--wa-color-focus: var(--wa-color-teal-60);
|
||||
|
||||
--wa-color-mix-hover: black 8%;
|
||||
--wa-color-mix-active: black 16%;
|
||||
|
||||
/**
|
||||
* Semantic theme colors
|
||||
* Semantic Colors
|
||||
*/
|
||||
--wa-color-brand-fill-loud: var(--wa-color-primary-50);
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-primary-20);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-primary-30);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-primary-20);
|
||||
--wa-color-brand-border-normal: var(--wa-color-primary-30);
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-teal-10);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-teal-20);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-teal-50);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-teal-20);
|
||||
--wa-color-brand-border-normal: var(--wa-color-teal-30);
|
||||
--wa-color-brand-border-loud: var(--wa-color-teal-40);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-teal-60);
|
||||
--wa-color-brand-on-normal: var(--wa-color-teal-70);
|
||||
--wa-color-brand-on-loud: white;
|
||||
--wa-color-brand-on-normal: var(--wa-color-primary-70);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-primary-60);
|
||||
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-50);
|
||||
--wa-color-success-fill-quiet: var(--wa-color-green-10);
|
||||
--wa-color-success-fill-normal: var(--wa-color-green-20);
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-50);
|
||||
--wa-color-success-border-quiet: var(--wa-color-green-20);
|
||||
--wa-color-success-border-normal: var(--wa-color-green-30);
|
||||
--wa-color-success-on-loud: white;
|
||||
--wa-color-success-on-normal: var(--wa-color-green-70);
|
||||
--wa-color-success-border-loud: var(--wa-color-green-40);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-60);
|
||||
--wa-color-success-on-normal: var(--wa-color-green-70);
|
||||
--wa-color-success-on-loud: white;
|
||||
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-yellow-20);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-yellow-20);
|
||||
--wa-color-warning-border-normal: var(--wa-color-yellow-30);
|
||||
--wa-color-warning-on-loud: white;
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-border-loud: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-yellow-60);
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-on-loud: white;
|
||||
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-50);
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-red-10);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-red-20);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-50);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-red-20);
|
||||
--wa-color-danger-border-normal: var(--wa-color-red-30);
|
||||
--wa-color-danger-on-loud: white;
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-70);
|
||||
--wa-color-danger-border-loud: var(--wa-color-red-40);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-60);
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-70);
|
||||
--wa-color-danger-on-loud: white;
|
||||
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-base-50);
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-base-10);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-base-20);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-base-20);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-base-30);
|
||||
--wa-color-neutral-on-loud: white;
|
||||
--wa-color-neutral-on-normal: var(--wa-color-base-70);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-base-60);
|
||||
|
||||
.hero-background::after {
|
||||
height: 50rem;
|
||||
-webkit-backdrop-filter: brightness(0.5);
|
||||
backdrop-filter: brightness(0.5);
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-gray-20);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-gray-90);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-gray-20);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-gray-30);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-gray-40);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-gray-60);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-gray-70);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-gray-05);
|
||||
}
|
||||
|
||||
/* #region Custom styles */
|
||||
@container preview (min-width: 0) {
|
||||
wa-button[appearance='outlined'] {
|
||||
&[variant='brand'] {
|
||||
--border-color: var(--wa-color-brand-border-normal);
|
||||
}
|
||||
/**
|
||||
* Component Styles
|
||||
*/
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-glassy {
|
||||
wa-button:not([appearance='plain']) {
|
||||
box-shadow:
|
||||
inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
|
||||
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
|
||||
inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
|
||||
inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
|
||||
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */,
|
||||
var(--wa-shadow-s) /* outer shadow */;
|
||||
|
||||
&[variant='success'] {
|
||||
--border-color: var(--wa-color-success-border-normal);
|
||||
}
|
||||
margin-bottom: var(--wa-shadow-offset-y-s);
|
||||
transition: transform var(--wa-transition-fast);
|
||||
|
||||
&[variant='neutral'] {
|
||||
--border-color: var(--wa-color-neutral-border-normal);
|
||||
}
|
||||
&:not([disabled]) {
|
||||
&:hover {
|
||||
box-shadow:
|
||||
inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
|
||||
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
|
||||
inset 0 1.25em 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
|
||||
inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
|
||||
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.1) /* bottom highlight */,
|
||||
var(--wa-shadow-m) /* outer shadow */;
|
||||
}
|
||||
|
||||
&[variant='warning'] {
|
||||
--border-color: var(--wa-color-warning-border-normal);
|
||||
}
|
||||
&:active {
|
||||
box-shadow:
|
||||
inset 0 -0.0625rem 0 0 rgb(255 255 255 / 0.1) /* shine */,
|
||||
inset 0 0.125rem 0 0 rgb(0 0 0 / 0.1) /* top highlight */,
|
||||
inset 0 1.25em 0 0 rgb(255 255 255 / 0.08) /* upper tint */,
|
||||
inset 0 -1.125em 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
|
||||
inset 0 -0.125rem 0 0 rgb(255 255 255 / 0.04) /* bottom highlight */,
|
||||
0 0 0 0 transparent /* outer shadow */;
|
||||
|
||||
&[variant='danger'] {
|
||||
--border-color: var(--wa-color-danger-border-normal);
|
||||
transform: translateY(var(--wa-shadow-offset-y-s));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
wa-rating {
|
||||
--symbol-size: var(--wa-font-size-m);
|
||||
--symbol-color-active: var(--wa-color-neutral-on-quiet);
|
||||
wa-checkbox,
|
||||
wa-input:not(:focus),
|
||||
wa-radio,
|
||||
wa-select {
|
||||
--box-shadow: inset var(--wa-shadow-s), inset 0 1.25em 0 0 rgb(0 0 0 / 0.02) /* upper tint */,
|
||||
inset 0 -1.125em 0 0 rgb(255 255 255 / 0.05) /* lower shade */;
|
||||
}
|
||||
|
||||
.hero-background {
|
||||
height: 50rem;
|
||||
background: url(/assets/images/themer/glassy/hero.jpg) 0px 0px / cover no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
wa-checkbox:state(checked),
|
||||
wa-radio:state(checked) {
|
||||
--box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
|
||||
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
|
||||
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
height: 25rem;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
margin: 8rem;
|
||||
wa-textarea:not(:focus) {
|
||||
&:not([appearance='filled']):not([disabled]) {
|
||||
--box-shadow: var(--wa-shadow-s);
|
||||
}
|
||||
}
|
||||
|
||||
.hero .title {
|
||||
text-align: right;
|
||||
color: var(--wa-color-text-normal);
|
||||
wa-switch {
|
||||
--box-shadow: inset var(--wa-shadow-s);
|
||||
--thumb-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
|
||||
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
|
||||
inset 0 calc(var(--height) * 0.25) 0 0 rgb(255 255 255 / 0.04) /* upper tint */,
|
||||
inset 0 calc(var(--height) * -0.25) 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
|
||||
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-s) /* outer shadow */;
|
||||
}
|
||||
|
||||
wa-progress-bar {
|
||||
box-shadow: inset var(--wa-shadow-s);
|
||||
|
||||
&::part(indicator) {
|
||||
box-shadow:
|
||||
inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
|
||||
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1) /* top highlight */,
|
||||
inset 0 0.625rem 0 0 rgb(255 255 255 / 0.1) /* upper tint */,
|
||||
inset 0 -0.5rem 0 0 rgb(0 0 0 / 0.04) /* lower shade */,
|
||||
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */,
|
||||
var(--wa-shadow-s) /* outer shadow */;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@container preview (min-width: 720px) {
|
||||
.strata.hero {
|
||||
padding-left: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
/* #endregion */
|
||||
|
||||
@@ -1,366 +1,144 @@
|
||||
@import '../depth/0_flat.css';
|
||||
@import url('../color/natural.css');
|
||||
@import url('default/color-semantic.css');
|
||||
@import url('default/space.css');
|
||||
@import url('default/outlines.css');
|
||||
@import url('default/typography.css');
|
||||
@import url('default/rounding.css');
|
||||
@import url('default/shadows.css');
|
||||
@import url('default/transitions.css');
|
||||
@import url('default/groups.css');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
|
||||
|
||||
:root,
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-mellow-light {
|
||||
.wa-theme-mellow,
|
||||
.wa-light {
|
||||
color-scheme: light;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/**
|
||||
* Primitive colors
|
||||
* Each color is identified by a number that corresponds to its lightness value, where 100 is lightest (white) and 0 is darkest (black).
|
||||
* Lightness on this scale is directly related to relative luminance, so each lightness value has uniform WCAG 2.1 contrast across hues.
|
||||
* A difference of 40 between lightness values guarantees a minimum 3:1 contrast ratio.
|
||||
* A difference of 50 between lightness values guarantees a minimum 4.5:1 contrast ratio.
|
||||
* A difference of 60 between lightness values guarantees a minimum 7:1 contrast ratio.
|
||||
* Foundational Colors
|
||||
*/
|
||||
--wa-color-red-95: #f9f0ee;
|
||||
--wa-color-red-90: #f5e2dd;
|
||||
--wa-color-red-80: #e8bfb5;
|
||||
--wa-color-red-70: #dba294;
|
||||
--wa-color-red-60: #c98373;
|
||||
--wa-color-red-50: #ae6150;
|
||||
--wa-color-red-40: #8c4434;
|
||||
--wa-color-red-30: #713225;
|
||||
--wa-color-red-20: #562318;
|
||||
--wa-color-red-10: #36130b;
|
||||
--wa-color-red-05: #240a05;
|
||||
|
||||
--wa-color-yellow-95: #f5f0e8;
|
||||
--wa-color-yellow-90: #ede4d5;
|
||||
--wa-color-yellow-80: #dac6a4;
|
||||
--wa-color-yellow-70: #c7ab7b;
|
||||
--wa-color-yellow-60: #b29054;
|
||||
--wa-color-yellow-50: #94702b;
|
||||
--wa-color-yellow-40: #735310;
|
||||
--wa-color-yellow-30: #5c4003;
|
||||
--wa-color-yellow-20: #442f00;
|
||||
--wa-color-yellow-10: #2a1b00;
|
||||
--wa-color-yellow-05: #1b1000;
|
||||
|
||||
--wa-color-green-95: #edf2ee;
|
||||
--wa-color-green-90: #dde8df;
|
||||
--wa-color-green-80: #b8cebc;
|
||||
--wa-color-green-70: #98b79e;
|
||||
--wa-color-green-60: #779e7f;
|
||||
--wa-color-green-50: #53805d;
|
||||
--wa-color-green-40: #366241;
|
||||
--wa-color-green-30: #264d31;
|
||||
--wa-color-green-20: #193922;
|
||||
--wa-color-green-10: #0c2212;
|
||||
--wa-color-green-05: #051509;
|
||||
|
||||
--wa-color-blue-95: #eef1f5;
|
||||
--wa-color-blue-90: #e1e6ef;
|
||||
--wa-color-blue-80: #bdc9dc;
|
||||
--wa-color-blue-70: #9fb0ca;
|
||||
--wa-color-blue-60: #8196b8;
|
||||
--wa-color-blue-50: #5f779e;
|
||||
--wa-color-blue-40: #415981;
|
||||
--wa-color-blue-30: #2f466a;
|
||||
--wa-color-blue-20: #203351;
|
||||
--wa-color-blue-10: #101e34;
|
||||
--wa-color-blue-05: #081223;
|
||||
|
||||
--wa-color-gray-95: #f1f1f0;
|
||||
--wa-color-gray-90: #e7e6e4;
|
||||
--wa-color-gray-80: #cac8c3;
|
||||
--wa-color-gray-70: #b2afa8;
|
||||
--wa-color-gray-60: #98958c;
|
||||
--wa-color-gray-50: #7a766a;
|
||||
--wa-color-gray-40: #5c594f;
|
||||
--wa-color-gray-30: #49453e;
|
||||
--wa-color-gray-20: #35322d;
|
||||
--wa-color-gray-10: #1f1d1a;
|
||||
--wa-color-gray-05: #131210;
|
||||
|
||||
--wa-color-primary-95: var(--wa-color-green-95);
|
||||
--wa-color-primary-90: var(--wa-color-green-90);
|
||||
--wa-color-primary-80: var(--wa-color-green-80);
|
||||
--wa-color-primary-70: var(--wa-color-green-70);
|
||||
--wa-color-primary-60: var(--wa-color-green-60);
|
||||
--wa-color-primary-50: var(--wa-color-green-50);
|
||||
--wa-color-primary-40: var(--wa-color-green-40);
|
||||
--wa-color-primary-30: var(--wa-color-green-30);
|
||||
--wa-color-primary-20: var(--wa-color-green-20);
|
||||
--wa-color-primary-10: var(--wa-color-green-10);
|
||||
--wa-color-primary-05: var(--wa-color-green-05);
|
||||
|
||||
--wa-color-base-95: var(--wa-color-gray-95);
|
||||
--wa-color-base-90: var(--wa-color-gray-90);
|
||||
--wa-color-base-80: var(--wa-color-gray-80);
|
||||
--wa-color-base-70: var(--wa-color-gray-70);
|
||||
--wa-color-base-60: var(--wa-color-gray-60);
|
||||
--wa-color-base-50: var(--wa-color-gray-50);
|
||||
--wa-color-base-40: var(--wa-color-gray-40);
|
||||
--wa-color-base-30: var(--wa-color-gray-30);
|
||||
--wa-color-base-20: var(--wa-color-gray-20);
|
||||
--wa-color-base-10: var(--wa-color-gray-10);
|
||||
--wa-color-base-05: var(--wa-color-gray-05);
|
||||
|
||||
/**
|
||||
* Base theme colors
|
||||
*/
|
||||
|
||||
/* Surfaces are background layers that UI components and other content rest on.
|
||||
* Surface colors support elevation, where raised is closest to the user and lowered is farthest away. */
|
||||
--wa-color-surface-raised: white;
|
||||
--wa-color-surface-default: white;
|
||||
--wa-color-surface-lowered: var(--wa-color-base-95);
|
||||
--wa-color-surface-border: var(--wa-color-base-90);
|
||||
--wa-color-surface-default: var(--wa-color-gray-95);
|
||||
--wa-color-surface-lowered: var(--wa-color-gray-90);
|
||||
--wa-color-surface-border: color-mix(in oklab, var(--wa-color-gray-80), transparent);
|
||||
|
||||
/* Text colors are used for standard text elements.
|
||||
* Text should have a minimum 4.5:1 contrast ratio against surfaces.
|
||||
* Inverse text should support appropriate contrast against background colors with opposing lightness. */
|
||||
--wa-color-text-normal: var(--wa-color-base-40);
|
||||
--wa-color-text-quiet: var(--wa-color-base-50);
|
||||
--wa-color-text-link: var(--wa-color-blue-50);
|
||||
--wa-color-text-normal: var(--wa-color-blue-20);
|
||||
--wa-color-text-quiet: var(--wa-color-blue-40);
|
||||
--wa-color-text-link: var(--wa-color-blue-40);
|
||||
|
||||
/* Focus specifies the default color of the focus ring for predictable keyboard navigation.
|
||||
* Focus should have a minimum 3:1 contrast ratio against surfaces and background colors whenever possible. */
|
||||
--wa-color-focus: color-mix(in oklab, var(--wa-color-green-60) 96%, transparent);
|
||||
|
||||
/* Overlays provide a backdrop for isolated content, often allowing background colors or content to show through. */
|
||||
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-base-10) 32%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-base-50) 8%, transparent);
|
||||
|
||||
/* Shadow specifies the default color for box shadows that indicate elevation. */
|
||||
--wa-color-shadow: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-base-05) calc(var(--wa-shadow-blur-scale) * 8% + 6%),
|
||||
transparent
|
||||
);
|
||||
|
||||
/* Mix colors are used in color-mix() to achieve consistent interaction effects across components. */
|
||||
--wa-color-mix-hover: black 12%;
|
||||
--wa-color-mix-active: black 20%;
|
||||
--wa-color-focus: var(--wa-color-blue-50);
|
||||
|
||||
/**
|
||||
* Semantic theme colors
|
||||
* Five semantic groups reinforce a component's message, intended usage, or expected results through meaningful hues -
|
||||
* * Brand to reinforce product branding
|
||||
* * Success to express validity or confirmation
|
||||
* * Warning to express caution or uncertainty
|
||||
* * Danger to express errors or risk
|
||||
* * Neutral for elements that are innocuous or inert
|
||||
* Each semantic group specifies colors to use as fills, outlines, and text content with vivid and muted variations.
|
||||
* Vivid colors are the most noticeable against base theme colors, whereas muted colors draw less attention.
|
||||
* Vivid colors should have a minimum 3:1 contrast ratio against surfaces when possible.
|
||||
* Muted colors have no contrast requirements.
|
||||
* Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
|
||||
*/
|
||||
--wa-color-brand-fill-loud: var(--wa-color-green-50);
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-green-95);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-green-90);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-green-90);
|
||||
--wa-color-brand-border-normal: var(--wa-color-green-80);
|
||||
* Semantic Colors
|
||||
*/
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-blue-90);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-blue-80);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-blue-40);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-blue-80);
|
||||
--wa-color-brand-border-normal: var(--wa-color-blue-70);
|
||||
--wa-color-brand-border-loud: var(--wa-color-blue-60);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-blue-40);
|
||||
--wa-color-brand-on-normal: var(--wa-color-blue-30);
|
||||
--wa-color-brand-on-loud: white;
|
||||
--wa-color-brand-on-normal: var(--wa-color-green-40);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-green-50);
|
||||
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-50);
|
||||
--wa-color-success-fill-quiet: var(--wa-color-green-95);
|
||||
--wa-color-success-fill-normal: var(--wa-color-green-90);
|
||||
--wa-color-success-border-quiet: var(--wa-color-green-90);
|
||||
--wa-color-success-border-normal: var(--wa-color-green-80);
|
||||
--wa-color-success-fill-quiet: var(--wa-color-green-90);
|
||||
--wa-color-success-fill-normal: var(--wa-color-green-80);
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-40);
|
||||
--wa-color-success-border-quiet: var(--wa-color-green-80);
|
||||
--wa-color-success-border-normal: var(--wa-color-green-70);
|
||||
--wa-color-success-border-loud: var(--wa-color-green-60);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-40);
|
||||
--wa-color-success-on-normal: var(--wa-color-green-30);
|
||||
--wa-color-success-on-loud: white;
|
||||
--wa-color-success-on-normal: var(--wa-color-green-40);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-50);
|
||||
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-yellow-90);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-yellow-90);
|
||||
--wa-color-warning-border-normal: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-90);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-border-normal: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-border-loud: var(--wa-color-yellow-60);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-30);
|
||||
--wa-color-warning-on-loud: white;
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-yellow-50);
|
||||
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-50);
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-red-95);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-red-90);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-red-90);
|
||||
--wa-color-danger-border-normal: var(--wa-color-red-80);
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-red-90);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-red-80);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-40);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-red-80);
|
||||
--wa-color-danger-border-normal: var(--wa-color-red-70);
|
||||
--wa-color-danger-border-loud: var(--wa-color-red-60);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-40);
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-30);
|
||||
--wa-color-danger-on-loud: white;
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-40);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-50);
|
||||
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-base-50);
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-base-95);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-base-90);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-base-90);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-base-80);
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-gray-90);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-gray-80);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-gray-40);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-gray-80);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-gray-70);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-gray-60);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-gray-40);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-gray-30);
|
||||
--wa-color-neutral-on-loud: white;
|
||||
--wa-color-neutral-on-normal: var(--wa-color-base-40);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-base-50);
|
||||
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
--wa-font-family-heading: 'Lora', serif;
|
||||
--wa-font-family-body: 'Mulish', sans-serif;
|
||||
--wa-font-family-code: 'Noto Sans Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
|
||||
--wa-font-family-heading: 'Lora', serif;
|
||||
--wa-font-family-code: ui-monospace, monospace;
|
||||
--wa-font-family-longform: 'Lora', serif;
|
||||
|
||||
--wa-font-weight-light: 300;
|
||||
--wa-font-weight-normal: 400;
|
||||
--wa-font-weight-semibold: 500;
|
||||
--wa-font-weight-bold: 600;
|
||||
|
||||
--wa-font-weight-heading: var(--wa-font-weight-semibold);
|
||||
--wa-font-weight-body: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-action: var(--wa-font-weight-semibold);
|
||||
|
||||
/* The default typescale is based on the Major Second scale (x1.125).
|
||||
* Every other step on the scale is skipped for larger sizes in order to maximize variation. */
|
||||
--wa-font-size-root: 16px;
|
||||
--wa-font-size-2xs: 0.6875rem; /* 11px */
|
||||
--wa-font-size-xs: 0.75rem; /* 12px */
|
||||
--wa-font-size-s: 0.875rem; /* 14px */
|
||||
--wa-font-size-m: 1rem; /* 16px */
|
||||
--wa-font-size-l: 1.25rem; /* 20px */
|
||||
--wa-font-size-xl: 1.625rem; /* 26px */
|
||||
--wa-font-size-2xl: 2rem; /* 32px */
|
||||
--wa-font-size-3xl: 2.5625rem; /* 41px */
|
||||
--wa-font-size-4xl: 3.25rem; /* 52px */
|
||||
|
||||
--wa-line-height-condensed: 1.25;
|
||||
--wa-line-height-normal: 1.6;
|
||||
--wa-line-height-expanded: 2;
|
||||
--wa-font-weight-semibold: 600;
|
||||
--wa-font-weight-bold: 700;
|
||||
|
||||
/**
|
||||
* Spacing
|
||||
* Used intentionally, space properties yield a predictable rhythm and support effective implementation of the proximity principle.
|
||||
* Space can be organized into three groups with distinct usage -
|
||||
* * Small-scale space (3xs, 2xs, and xs) is used for gaps between closely related elements, such as a dropdown button and its menu,
|
||||
* and padding within small components, such as badges and tooltips
|
||||
* * Normal space (s, m, and l) is used for gaps between related elements with distinct purposes or touch targets and padding within
|
||||
* typical interface elements, such as buttons and inputs
|
||||
* * Large-scale space (xl, 2xl, and 3xl) is used for gaps between unrelated elements and padding within larger components,
|
||||
* such as cards and dialogs
|
||||
*/
|
||||
/* Space is designed to scale according to a single base value.
|
||||
* The base value is intended for calculations and is not used by components directly. */
|
||||
--wa-space-scale: 1;
|
||||
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
|
||||
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
|
||||
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
|
||||
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
|
||||
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
|
||||
--wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
|
||||
--wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
|
||||
--wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
|
||||
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
|
||||
--wa-space-scale: 1.125;
|
||||
|
||||
/**
|
||||
* Borders
|
||||
*/
|
||||
--wa-border-style: dotted;
|
||||
|
||||
/* Border widths are designed to scale according to a single base value.
|
||||
* The base value is intended for calculations and is not used by components directly. */
|
||||
--wa-border-width-scale: 0.0625;
|
||||
--wa-border-width-s: calc(var(--wa-border-width-scale) * 1rem);
|
||||
--wa-border-width-m: calc(var(--wa-border-width-scale) * 2rem);
|
||||
--wa-border-width-l: calc(var(--wa-border-width-scale) * 3rem);
|
||||
|
||||
--wa-form-control-border-style: var(--wa-border-style);
|
||||
--wa-form-control-border-width: var(--wa-border-width-s);
|
||||
|
||||
--wa-panel-border-style: var(--wa-border-style);
|
||||
--wa-panel-border-width: var(--wa-border-width-s);
|
||||
|
||||
/**
|
||||
* Corners
|
||||
*/
|
||||
/* Corners are designed to scale according to a single base value.
|
||||
* The base value is intended for calculations and is not used by components directly. */
|
||||
--wa-border-radius-scale: 0.06125;
|
||||
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.75rem);
|
||||
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 1rem);
|
||||
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 2rem);
|
||||
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 3rem);
|
||||
|
||||
/* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
|
||||
--wa-border-radius-pill: 9999px;
|
||||
--wa-border-radius-circle: 50%;
|
||||
--wa-border-radius-square: 0;
|
||||
--wa-border-width-scale: 1.5;
|
||||
|
||||
/**
|
||||
* Focus
|
||||
*/
|
||||
--wa-focus-ring-style: solid;
|
||||
--wa-focus-ring-width: 0.1875rem; /* 3px */
|
||||
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
|
||||
--wa-focus-ring-offset: 0.0625rem; /* 1px */
|
||||
--wa-focus-ring-width: 0.25rem;
|
||||
|
||||
/**
|
||||
* Links
|
||||
* Shadows
|
||||
*/
|
||||
--wa-link-decoration-default: underline var(--wa-color-brand-border-normal) dotted;
|
||||
--wa-link-decoration-hover: underline;
|
||||
--wa-shadow-offset-y-scale: 0;
|
||||
|
||||
/**
|
||||
* Transitions
|
||||
* Component Groups
|
||||
*/
|
||||
--wa-transition-slow: 250ms;
|
||||
--wa-transition-normal: 150ms;
|
||||
--wa-transition-fast: 50ms;
|
||||
|
||||
/**
|
||||
* Component groups
|
||||
*/
|
||||
--wa-form-control-background-color: var(--wa-color-surface-default);
|
||||
|
||||
--wa-form-control-border-radius: var(--wa-border-radius-m);
|
||||
|
||||
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
|
||||
--wa-form-control-resting-color: var(--wa-color-neutral-border-normal);
|
||||
|
||||
--wa-form-control-label-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-label-font-weight: var(--wa-font-weight-normal);
|
||||
--wa-form-control-label-line-height: var(--wa-line-height-normal);
|
||||
|
||||
--wa-form-control-value-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
|
||||
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
|
||||
|
||||
--wa-form-control-placeholder-color: var(--wa-color-base-60);
|
||||
|
||||
--wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
|
||||
--wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
|
||||
--wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
|
||||
|
||||
--wa-form-control-required-content: '*';
|
||||
--wa-form-control-required-content-color: inherit;
|
||||
--wa-form-control-required-content-offset: -0.1em;
|
||||
|
||||
--wa-panel-border-radius: var(--wa-border-radius-l);
|
||||
|
||||
/**
|
||||
* From 2.x
|
||||
*/
|
||||
--wa-tooltip-arrow-size: 0.375rem;
|
||||
--wa-form-control-border-color: var(--wa-color-neutral-border-normal);
|
||||
}
|
||||
|
||||
.wa-theme-mellow-dark,
|
||||
.wa-theme-mellow-dark :host {
|
||||
.wa-dark,
|
||||
:is(:host-context(.wa-dark)) {
|
||||
color-scheme: dark;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/**
|
||||
* Base theme colors
|
||||
* Foundational Colors
|
||||
*/
|
||||
--wa-color-surface-raised: var(--wa-color-base-10);
|
||||
--wa-color-surface-default: var(--wa-color-base-05);
|
||||
--wa-color-surface-lowered: black;
|
||||
--wa-color-surface-border: var(--wa-color-base-20);
|
||||
--wa-color-surface-raised: var(--wa-color-gray-10);
|
||||
--wa-color-surface-default: var(--wa-color-gray-05);
|
||||
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
|
||||
--wa-color-surface-border: color-mix(in oklab, var(--wa-color-gray-30), transparent);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-base-80);
|
||||
--wa-color-text-quiet: var(--wa-color-base-60);
|
||||
--wa-color-text-link: var(--wa-color-blue-60);
|
||||
--wa-color-text-normal: var(--wa-color-blue-90);
|
||||
--wa-color-text-quiet: var(--wa-color-blue-70);
|
||||
--wa-color-text-link: var(--wa-color-blue-70);
|
||||
|
||||
--wa-color-focus: color-mix(in oklab, var(--wa-color-blue-60) 90%, transparent);
|
||||
|
||||
--wa-color-overlay-modal: color-mix(in oklab, black 50%, transparent);
|
||||
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
|
||||
|
||||
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-scale) * 32% + 40%), transparent);
|
||||
|
||||
@@ -368,74 +146,88 @@
|
||||
--wa-color-mix-active: black 16%;
|
||||
|
||||
/**
|
||||
* Semantic theme colors
|
||||
* Semantic Colors
|
||||
*/
|
||||
--wa-color-brand-fill-loud: var(--wa-color-green-50);
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-green-10);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-green-20);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-green-20);
|
||||
--wa-color-brand-border-normal: var(--wa-color-green-30);
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-blue-10);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-blue-20);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-blue-50);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-blue-20);
|
||||
--wa-color-brand-border-normal: var(--wa-color-blue-30);
|
||||
--wa-color-brand-border-loud: var(--wa-color-blue-40);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-blue-60);
|
||||
--wa-color-brand-on-normal: var(--wa-color-blue-70);
|
||||
--wa-color-brand-on-loud: white;
|
||||
--wa-color-brand-on-normal: var(--wa-color-green-70);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-green-60);
|
||||
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-50);
|
||||
--wa-color-success-fill-quiet: var(--wa-color-green-10);
|
||||
--wa-color-success-fill-normal: var(--wa-color-green-20);
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-50);
|
||||
--wa-color-success-border-quiet: var(--wa-color-green-20);
|
||||
--wa-color-success-border-normal: var(--wa-color-green-30);
|
||||
--wa-color-success-on-loud: white;
|
||||
--wa-color-success-on-normal: var(--wa-color-green-70);
|
||||
--wa-color-success-border-loud: var(--wa-color-green-40);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-60);
|
||||
--wa-color-success-on-normal: var(--wa-color-green-70);
|
||||
--wa-color-success-on-loud: white;
|
||||
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-yellow-20);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-yellow-20);
|
||||
--wa-color-warning-border-normal: var(--wa-color-yellow-30);
|
||||
--wa-color-warning-on-loud: white;
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-border-loud: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-yellow-60);
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-on-loud: white;
|
||||
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-50);
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-red-10);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-red-20);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-50);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-red-20);
|
||||
--wa-color-danger-border-normal: var(--wa-color-red-30);
|
||||
--wa-color-danger-on-loud: white;
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-70);
|
||||
--wa-color-danger-border-loud: var(--wa-color-red-40);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-60);
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-70);
|
||||
--wa-color-danger-on-loud: white;
|
||||
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-base-50);
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-base-10);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-base-20);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-base-20);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-base-30);
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-gray-20);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-gray-50);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-gray-20);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-gray-30);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-gray-40);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-gray-60);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-gray-70);
|
||||
--wa-color-neutral-on-loud: white;
|
||||
--wa-color-neutral-on-normal: var(--wa-color-base-70);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-base-60);
|
||||
}
|
||||
|
||||
/* #region Custom styles */
|
||||
wa-button[appearance='outlined'] {
|
||||
&[variant='brand'] {
|
||||
--border-color: var(--wa-color-brand-border-normal);
|
||||
/**
|
||||
* Component Styles
|
||||
*/
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-mellow {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
letter-spacing: calc(1em * -0.02);
|
||||
}
|
||||
|
||||
&[variant='success'] {
|
||||
--border-color: var(--wa-color-success-border-normal);
|
||||
wa-callout {
|
||||
border-width: var(--wa-panel-border-width) var(--wa-panel-border-width) var(--wa-panel-border-width)
|
||||
calc(var(--wa-panel-border-width) * 4);
|
||||
}
|
||||
|
||||
&[variant='neutral'] {
|
||||
--border-color: var(--wa-color-neutral-border-normal);
|
||||
wa-card::part(header) {
|
||||
border-bottom-style: dotted;
|
||||
}
|
||||
wa-card::part(footer) {
|
||||
border-top-style: dotted;
|
||||
}
|
||||
|
||||
&[variant='warning'] {
|
||||
--border-color: var(--wa-color-warning-border-normal);
|
||||
}
|
||||
|
||||
&[variant='danger'] {
|
||||
--border-color: var(--wa-color-danger-border-normal);
|
||||
input[type='radio'],
|
||||
wa-radio {
|
||||
--checked-icon-scale: 0.6;
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
@@ -1,567 +0,0 @@
|
||||
@import '../depth/1_semiflat.css';
|
||||
|
||||
:root,
|
||||
:host,
|
||||
.wa-theme-migration-light {
|
||||
color-scheme: light;
|
||||
|
||||
/**
|
||||
* Primitive colors
|
||||
* Each color is identified by a number that corresponds to its lightness value, where 100 is lightest (white) and 0 is darkest (black).
|
||||
* Lightness on this scale is directly related to relative luminance, so each lightness value has uniform WCAG 2.1 contrast across hues.
|
||||
* A difference of 40 between lightness values guarantees a minimum 3:1 contrast ratio.
|
||||
* A difference of 50 between lightness values guarantees a minimum 4.5:1 contrast ratio.
|
||||
* A difference of 60 between lightness values guarantees a minimum 7:1 contrast ratio.
|
||||
*/
|
||||
--wa-color-red-95: #feeeee;
|
||||
--wa-color-red-90: #fedede;
|
||||
--wa-color-red-80: #fdb8b8;
|
||||
--wa-color-red-70: #fa9292;
|
||||
--wa-color-red-60: #ee6c6c;
|
||||
--wa-color-red-50: #d43c3c;
|
||||
--wa-color-red-40: #ac1e1e;
|
||||
--wa-color-red-30: #640f0f;
|
||||
--wa-color-red-20: #631111;
|
||||
--wa-color-red-10: #3b0d0d;
|
||||
--wa-color-red-05: #260606;
|
||||
|
||||
--wa-color-yellow-95: #fef2c4;
|
||||
--wa-color-yellow-90: #fde494;
|
||||
--wa-color-yellow-80: #fbc129;
|
||||
--wa-color-yellow-70: #f29c0b;
|
||||
--wa-color-yellow-60: #db7e13;
|
||||
--wa-color-yellow-50: #af6005;
|
||||
--wa-color-yellow-40: #904207;
|
||||
--wa-color-yellow-30: #713406;
|
||||
--wa-color-yellow-20: #532408;
|
||||
--wa-color-yellow-10: #321606;
|
||||
--wa-color-yellow-05: #1f0c01;
|
||||
|
||||
--wa-color-green-95: #e9f5ed;
|
||||
--wa-color-green-90: #cfedd9;
|
||||
--wa-color-green-80: #a2d5b4;
|
||||
--wa-color-green-70: #6cc08a;
|
||||
--wa-color-green-60: #38a961;
|
||||
--wa-color-green-50: #178640;
|
||||
--wa-color-green-40: #0e662e;
|
||||
--wa-color-green-30: #0d5026;
|
||||
--wa-color-green-20: #0c391d;
|
||||
--wa-color-green-10: #082213;
|
||||
--wa-color-green-05: #02140a;
|
||||
|
||||
--wa-color-indigo-95: #eef2ff;
|
||||
--wa-color-indigo-90: #dee5fd;
|
||||
--wa-color-indigo-80: #bec8f2;
|
||||
--wa-color-indigo-70: #9dabf0;
|
||||
--wa-color-indigo-60: #818cf7;
|
||||
--wa-color-indigo-50: #6063eb;
|
||||
--wa-color-indigo-40: #4941d3;
|
||||
--wa-color-indigo-30: #3930ad;
|
||||
--wa-color-indigo-20: #29247a;
|
||||
--wa-color-indigo-10: #191843;
|
||||
--wa-color-indigo-05: #0f0e26;
|
||||
|
||||
--wa-color-gray-95: #f1f2f3;
|
||||
--wa-color-gray-90: #e5e6e7;
|
||||
--wa-color-gray-80: #c8c9cd;
|
||||
--wa-color-gray-70: #acafb4;
|
||||
--wa-color-gray-60: #8f95a0;
|
||||
--wa-color-gray-50: #6e7482;
|
||||
--wa-color-gray-40: #4f5967;
|
||||
--wa-color-gray-30: #3c4655;
|
||||
--wa-color-gray-20: #293240;
|
||||
--wa-color-gray-10: #171d2c;
|
||||
--wa-color-gray-05: #0d111b;
|
||||
|
||||
--wa-color-primary-95: var(--wa-color-indigo-95);
|
||||
--wa-color-primary-90: var(--wa-color-indigo-90);
|
||||
--wa-color-primary-80: var(--wa-color-indigo-80);
|
||||
--wa-color-primary-70: var(--wa-color-indigo-70);
|
||||
--wa-color-primary-60: var(--wa-color-indigo-60);
|
||||
--wa-color-primary-50: var(--wa-color-indigo-50);
|
||||
--wa-color-primary-40: var(--wa-color-indigo-40);
|
||||
--wa-color-primary-30: var(--wa-color-indigo-30);
|
||||
--wa-color-primary-20: var(--wa-color-indigo-20);
|
||||
--wa-color-primary-10: var(--wa-color-indigo-10);
|
||||
--wa-color-primary-05: var(--wa-color-indigo-05);
|
||||
|
||||
--wa-color-base-95: var(--wa-color-gray-95);
|
||||
--wa-color-base-90: var(--wa-color-gray-90);
|
||||
--wa-color-base-80: var(--wa-color-gray-80);
|
||||
--wa-color-base-70: var(--wa-color-gray-70);
|
||||
--wa-color-base-60: var(--wa-color-gray-60);
|
||||
--wa-color-base-50: var(--wa-color-gray-50);
|
||||
--wa-color-base-40: var(--wa-color-gray-40);
|
||||
--wa-color-base-30: var(--wa-color-gray-30);
|
||||
--wa-color-base-20: var(--wa-color-gray-20);
|
||||
--wa-color-base-10: var(--wa-color-gray-10);
|
||||
--wa-color-base-05: var(--wa-color-gray-05);
|
||||
|
||||
/**
|
||||
* Foundational theme colors
|
||||
*/
|
||||
|
||||
/* Surfaces are background layers that UI components and other content rest on.
|
||||
* Surface colors support elevation, where raised is closest to the user and lowered is farthest away. */
|
||||
--wa-color-surface-raised: white;
|
||||
--wa-color-surface-default: white;
|
||||
--wa-color-surface-lowered: var(--wa-color-base-95);
|
||||
--wa-color-surface-border: var(--wa-color-base-90);
|
||||
|
||||
/* Text colors are used for standard text elements.
|
||||
* Text should have a minimum 4.5:1 contrast ratio against surfaces.
|
||||
* Inverse text should support appropriate contrast against background colors with opposing lightness. */
|
||||
--wa-color-text-normal: var(--wa-color-base-10);
|
||||
--wa-color-text-quiet: var(--wa-color-base-40);
|
||||
--wa-color-text-link: var(--wa-color-brand-on-quiet);
|
||||
|
||||
/* Focus specifies the default color of the focus ring for predictable keyboard navigation.
|
||||
* Focus should have a minimum 3:1 contrast ratio against surfaces and background colors whenever possible. */
|
||||
--wa-color-focus: var(--wa-color-primary-50);
|
||||
|
||||
/* Overlays provide a backdrop for isolated content, often allowing background colors or content to show through. */
|
||||
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-base-20) 32%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-base-50) 8%, transparent);
|
||||
|
||||
/* Shadow specifies the default color for box shadows that indicate elevation. */
|
||||
--wa-color-shadow: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-base-05) calc(var(--wa-shadow-blur-scale) * 8% + 6%),
|
||||
transparent
|
||||
);
|
||||
|
||||
/* Mix colors are used in color-mix() to achieve consistent interaction effects across components. */
|
||||
--wa-color-mix-hover: var(--wa-color-base-80) 20%;
|
||||
--wa-color-mix-active: var(--wa-color-base-80) 10%;
|
||||
|
||||
/**
|
||||
* Semantic theme colors
|
||||
* Five semantic groups reinforce a component's message, intended usage, or expected results through meaningful hues -
|
||||
* * Brand to reinforce product branding
|
||||
* * Success to express validity or confirmation
|
||||
* * Warning to express caution or uncertainty
|
||||
* * Danger to express errors or risk
|
||||
* * Neutral for elements that are innocuous or inert
|
||||
* Each semantic group specifies colors to use as fills, outlines, and text content with vivid and muted variations.
|
||||
* Vivid colors are the most noticeable against base theme colors, whereas muted colors draw less attention.
|
||||
* Vivid colors should have a minimum 3:1 contrast ratio against surfaces when possible.
|
||||
* Muted colors have no contrast requirements.
|
||||
* Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
|
||||
*/
|
||||
|
||||
--wa-color-brand-fill-loud: var(--wa-color-primary-40);
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-primary-95);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-primary-90);
|
||||
--wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-primary-80), transparent);
|
||||
--wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-primary-70), transparent);
|
||||
--wa-color-brand-on-loud: white;
|
||||
--wa-color-brand-on-normal: var(--wa-color-primary-40);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-primary-40);
|
||||
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-50);
|
||||
--wa-color-success-fill-quiet: var(--wa-color-green-95);
|
||||
--wa-color-success-fill-normal: var(--wa-color-green-90);
|
||||
--wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-green-80), transparent);
|
||||
--wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-green-70), transparent);
|
||||
--wa-color-success-on-loud: white;
|
||||
--wa-color-success-on-normal: var(--wa-color-green-40);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-50);
|
||||
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-yellow-90);
|
||||
--wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-yellow-80), transparent);
|
||||
--wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-yellow-70), transparent);
|
||||
--wa-color-warning-on-loud: white;
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-yellow-50);
|
||||
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-50);
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-red-95);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-red-90);
|
||||
--wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-red-80), transparent);
|
||||
--wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-red-70), transparent);
|
||||
--wa-color-danger-on-loud: white;
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-40);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-50);
|
||||
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-base-10);
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-base-95);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-base-90);
|
||||
--wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-base-80), transparent 50%);
|
||||
--wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-base-70), transparent 50%);
|
||||
--wa-color-neutral-on-loud: white;
|
||||
--wa-color-neutral-on-normal: var(--wa-color-base-40);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-base-40);
|
||||
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
--wa-font-family-heading: 'Inter', sans-serif;
|
||||
--wa-font-family-body: 'Inter', sans-serif;
|
||||
--wa-font-family-code: ui-monospace, monospace;
|
||||
--wa-font-family-longform: ui-serif, serif;
|
||||
|
||||
--wa-font-weight-light: 300;
|
||||
--wa-font-weight-normal: 400;
|
||||
--wa-font-weight-semibold: 500;
|
||||
--wa-font-weight-bold: 600;
|
||||
--wa-font-weight-black: 700;
|
||||
|
||||
--wa-font-weight-heading: var(--wa-font-weight-black);
|
||||
--wa-font-weight-body: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-action: var(--wa-font-weight-bold);
|
||||
|
||||
/* The default typescale is based on the Major Second scale (x1.125).
|
||||
* Every other step on the scale is skipped for larger sizes in order to maximize variation. */
|
||||
--wa-font-size-root: 14px;
|
||||
--wa-font-size-2xs: 0.6875rem; /* 11px */
|
||||
--wa-font-size-xs: 0.75rem; /* 12px */
|
||||
--wa-font-size-s: 0.875rem; /* 14px */
|
||||
--wa-font-size-m: 1rem; /* 16px */
|
||||
--wa-font-size-l: 1.25rem; /* 20px */
|
||||
--wa-font-size-xl: 1.625rem; /* 26px */
|
||||
--wa-font-size-2xl: 2rem; /* 32px */
|
||||
--wa-font-size-3xl: 2.5625rem; /* 41px */
|
||||
--wa-font-size-4xl: 3.25rem; /* 52px */
|
||||
|
||||
--wa-line-height-condensed: 1.25;
|
||||
--wa-line-height-normal: 1.6;
|
||||
--wa-line-height-expanded: 2;
|
||||
|
||||
/**
|
||||
* Spacing
|
||||
* Used intentionally, space properties yield a predictable rhythm and support effective implementation of the proximity principle.
|
||||
* Space can be organized into three groups with distinct usage -
|
||||
* * Small-scale space (3xs, 2xs, and xs) is used for gaps between closely related elements, such as a dropdown button and its menu,
|
||||
* and padding within small components, such as badges and tooltips
|
||||
* * Normal space (s, m, and l) is used for gaps between related elements with distinct purposes or touch targets and padding within
|
||||
* typical interface elements, such as buttons and inputs
|
||||
* * Large-scale space (xl, 2xl, and 3xl) is used for gaps between unrelated elements and padding within larger components,
|
||||
* such as cards and dialogs
|
||||
*/
|
||||
/* Space is designed to scale according to a single base value.
|
||||
* The base value is intended for calculations and is not used by components directly. */
|
||||
--wa-space-scale: 1;
|
||||
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
|
||||
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
|
||||
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
|
||||
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
|
||||
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
|
||||
--wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
|
||||
--wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
|
||||
--wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
|
||||
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
|
||||
|
||||
/**
|
||||
* Borders
|
||||
*/
|
||||
--wa-border-style: solid;
|
||||
|
||||
/* Border widths are designed to scale according to a single base value.
|
||||
* The base value is intended for calculations and is not used by components directly. */
|
||||
--wa-border-width-scale: calc(1 / 14);
|
||||
--wa-border-width-s: calc(var(--wa-border-width-scale) * 1rem);
|
||||
--wa-border-width-m: calc(var(--wa-border-width-scale) * 2rem);
|
||||
--wa-border-width-l: calc(var(--wa-border-width-scale) * 3rem);
|
||||
|
||||
--wa-form-control-border-style: var(--wa-border-style);
|
||||
--wa-form-control-border-width: var(--wa-border-width-s);
|
||||
|
||||
--wa-panel-border-style: var(--wa-border-style);
|
||||
--wa-panel-border-width: var(--wa-border-width-s);
|
||||
|
||||
/**
|
||||
* Corners
|
||||
*/
|
||||
/* Corners are designed to scale according to a single base value.
|
||||
* The base value is intended for calculations and is not used by components directly. */
|
||||
--wa-border-radius-scale: 0.375;
|
||||
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.75rem);
|
||||
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 1rem);
|
||||
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 2rem);
|
||||
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 3rem);
|
||||
|
||||
/* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
|
||||
--wa-border-radius-pill: 9999px;
|
||||
--wa-border-radius-circle: 50%;
|
||||
--wa-border-radius-square: 0;
|
||||
|
||||
/**
|
||||
* Focus
|
||||
*/
|
||||
--wa-focus-ring-style: solid;
|
||||
--wa-focus-ring-width: calc((2 / 14) * 1rem);
|
||||
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
|
||||
color-mix(in oklab, var(--wa-color-focus) 98%, transparent);
|
||||
--wa-focus-ring-offset: 0;
|
||||
|
||||
/**
|
||||
* Links
|
||||
*/
|
||||
--wa-link-decoration-default: none;
|
||||
--wa-link-decoration-hover: underline;
|
||||
|
||||
/**
|
||||
* Transitions
|
||||
*/
|
||||
--wa-transition-slow: 250ms;
|
||||
--wa-transition-normal: 150ms;
|
||||
--wa-transition-fast: 50ms;
|
||||
|
||||
/**
|
||||
* Component groups
|
||||
*/
|
||||
--wa-form-control-background-color: var(--wa-color-surface-default);
|
||||
|
||||
--wa-form-control-border-radius: var(--wa-border-radius-m);
|
||||
|
||||
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
|
||||
--wa-form-control-resting-color: var(--wa-color-neutral-border-normal);
|
||||
|
||||
--wa-form-control-label-color: var(--wa-color-text-quiet);
|
||||
--wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
|
||||
--wa-form-control-label-line-height: var(--wa-line-height-normal);
|
||||
|
||||
--wa-form-control-value-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
|
||||
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
|
||||
|
||||
--wa-form-control-placeholder-color: var(--wa-color-base-60);
|
||||
|
||||
--wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
|
||||
--wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
|
||||
--wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
|
||||
|
||||
--wa-form-control-required-content: '*';
|
||||
--wa-form-control-required-content-color: inherit;
|
||||
--wa-form-control-required-content-offset: -0.1em;
|
||||
|
||||
--wa-panel-border-radius: var(--wa-border-radius-l);
|
||||
|
||||
/**
|
||||
* From 2.x
|
||||
*/
|
||||
--wa-tooltip-arrow-size: 0.375rem;
|
||||
}
|
||||
|
||||
.wa-theme-migration-dark,
|
||||
.wa-theme-migration-dark :host {
|
||||
color-scheme: dark;
|
||||
|
||||
/**
|
||||
* Base theme colors
|
||||
*/
|
||||
--wa-color-surface-raised: color-mix(in oklab, var(--wa-color-base-10) 60%, var(--wa-color-base-20));
|
||||
--wa-color-surface-default: var(--wa-color-base-10);
|
||||
--wa-color-surface-lowered: var(--wa-color-base-05);
|
||||
--wa-color-surface-border: rgb(255 255 255 / 0.1);
|
||||
|
||||
--wa-color-text-normal: white;
|
||||
--wa-color-text-quiet: var(--wa-color-base-60);
|
||||
--wa-color-text-link: var(--wa-color-brand-on-quiet);
|
||||
|
||||
--wa-color-focus: var(--wa-color-primary-60);
|
||||
|
||||
--wa-color-overlay-modal: color-mix(in oklab, black 50%, transparent);
|
||||
|
||||
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-scale) * 16% + 40%), transparent);
|
||||
|
||||
--wa-color-mix-hover: var(--wa-color-base-70) 20%;
|
||||
--wa-color-mix-active: var(--wa-color-base-70) 10%;
|
||||
|
||||
/**
|
||||
* Semantic theme colors
|
||||
*/
|
||||
--wa-color-brand-fill-loud: var(--wa-color-primary-50);
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-primary-10);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-primary-20);
|
||||
--wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-primary-20), transparent);
|
||||
--wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-primary-30), transparent);
|
||||
--wa-color-brand-on-loud: white;
|
||||
--wa-color-brand-on-normal: var(--wa-color-primary-70);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-primary-60);
|
||||
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-50);
|
||||
--wa-color-success-fill-quiet: var(--wa-color-green-10);
|
||||
--wa-color-success-fill-normal: var(--wa-color-green-20);
|
||||
--wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-green-20), transparent);
|
||||
--wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-green-30), transparent);
|
||||
--wa-color-success-on-loud: white;
|
||||
--wa-color-success-on-normal: var(--wa-color-green-70);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-60);
|
||||
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-yellow-20);
|
||||
--wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-yellow-20), transparent);
|
||||
--wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-yellow-30), transparent);
|
||||
--wa-color-warning-on-loud: white;
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-yellow-60);
|
||||
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-50);
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-red-10);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-red-20);
|
||||
--wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-red-20), transparent);
|
||||
--wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-red-30), transparent);
|
||||
--wa-color-danger-on-loud: white;
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-70);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-60);
|
||||
|
||||
--wa-color-neutral-fill-loud: white;
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-base-10);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-base-20);
|
||||
--wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-base-20), transparent);
|
||||
--wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-base-30), transparent);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-base-10);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-base-70);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-base-60);
|
||||
}
|
||||
|
||||
/* #region Custom Styles */
|
||||
@container preview (min-width: 0) {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
letter-spacing: calc(1em * -0.03);
|
||||
}
|
||||
|
||||
.project-header {
|
||||
background: var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
.hero {
|
||||
--hero-background-color: var(--wa-color-surface-default);
|
||||
--hero-lines-color: color-mix(in oklab, var(--wa-color-neutral-fill-normal), transparent 30%);
|
||||
background: linear-gradient(to top, var(--wa-color-surface-lowered), transparent 40%),
|
||||
radial-gradient(circle at 10% 70%, color-mix(in oklab, var(--wa-color-red-50) 16%, transparent), transparent 30%),
|
||||
radial-gradient(
|
||||
circle at 40% 50%,
|
||||
color-mix(in oklab, var(--wa-color-primary-40) 16%, transparent),
|
||||
transparent 40%
|
||||
),
|
||||
radial-gradient(circle at 80% 25%, color-mix(in oklab, var(--wa-color-red-50) 8%, transparent), transparent 20%),
|
||||
radial-gradient(
|
||||
circle at 80% 80%,
|
||||
color-mix(in oklab, var(--wa-color-primary-40) 16%, transparent),
|
||||
transparent 40%
|
||||
),
|
||||
radial-gradient(circle at 90% 30%, color-mix(in oklab, var(--wa-color-red-60) 8%, transparent), transparent 10%),
|
||||
linear-gradient(176deg, var(--hero-background-color), transparent 6rem),
|
||||
linear-gradient(90deg, var(--hero-background-color), transparent),
|
||||
repeating-linear-gradient(
|
||||
var(--hero-lines-color),
|
||||
var(--hero-lines-color) 1px,
|
||||
transparent 1px,
|
||||
transparent 10rem,
|
||||
var(--hero-lines-color) 10rem
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--hero-lines-color),
|
||||
var(--hero-lines-color) 1px,
|
||||
transparent 1px,
|
||||
transparent 10rem,
|
||||
var(--hero-lines-color) 10rem
|
||||
),
|
||||
var(--hero-background-color);
|
||||
|
||||
& .title {
|
||||
padding-block: calc(var(--wa-space-3xl) * 2) calc(var(--wa-space-3xl) * 10);
|
||||
|
||||
& .hero-title {
|
||||
font-size: calc((var(--wa-font-size-4xl) * 1.125) * 1.125);
|
||||
margin-block: 0 var(--wa-space-3xl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge-stock {
|
||||
position: absolute;
|
||||
top: var(--wa-space-l);
|
||||
left: var(--wa-space-l);
|
||||
}
|
||||
|
||||
.message-composer wa-card {
|
||||
&::part(footer) {
|
||||
border: none;
|
||||
}
|
||||
& wa-icon-button {
|
||||
color: var(--wa-color-base-50);
|
||||
}
|
||||
}
|
||||
|
||||
.products {
|
||||
margin-top: calc(var(--wa-space-3xl) * -8);
|
||||
}
|
||||
|
||||
pre.codeblock {
|
||||
background-color: var(--wa-color-neutral-fill-normal);
|
||||
}
|
||||
|
||||
wa-avatar {
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-base-50);
|
||||
}
|
||||
|
||||
a,
|
||||
wa-badge,
|
||||
wa-tag {
|
||||
font-weight: var(--wa-font-weight-semibold);
|
||||
}
|
||||
|
||||
wa-badge {
|
||||
--border-color: transparent;
|
||||
|
||||
&[variant='brand'] {
|
||||
--background: var(--wa-color-brand-fill-normal);
|
||||
--text-color: var(--wa-color-brand-on-normal);
|
||||
}
|
||||
&[variant='success'] {
|
||||
--background: var(--wa-color-success-fill-normal);
|
||||
--text-color: var(--wa-color-success-on-normal);
|
||||
}
|
||||
&[variant='warning'] {
|
||||
--background: var(--wa-color-warning-fill-normal);
|
||||
--text-color: var(--wa-color-warning-on-normal);
|
||||
}
|
||||
&[variant='danger'] {
|
||||
--background: var(--wa-color-danger-fill-normal);
|
||||
--text-color: var(--wa-color-danger-on-normal);
|
||||
}
|
||||
&[variant='neutral'] {
|
||||
--background: var(--wa-color-neutral-fill-normal);
|
||||
--text-color: var(--wa-color-neutral-on-normal);
|
||||
}
|
||||
}
|
||||
|
||||
wa-button[appearance='outline'] {
|
||||
--border-color: color-mix(in oklab, var(--text-color), transparent 75%);
|
||||
}
|
||||
|
||||
wa-input,
|
||||
wa-select {
|
||||
--box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) -0.08em
|
||||
var(--wa-color-shadow);
|
||||
& wa-icon {
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
}
|
||||
|
||||
wa-radio-button:not([checked]) {
|
||||
--border-color: var(--wa-color-neutral-border-normal);
|
||||
--text-color: var(--wa-color-text-normal);
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--border-color: transparent;
|
||||
--height: calc(var(--thumb-size) * (18 / 14));
|
||||
--thumb-color: white;
|
||||
--thumb-color-checked: var(--thumb-color);
|
||||
--thumb-size: 1em;
|
||||
--thumb-shadow: var(--wa-shadow-m);
|
||||
--width: calc(var(--thumb-size) * (32 / 14));
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,199 +1,79 @@
|
||||
@import '../depth/1_semiflat.css';
|
||||
@import url('../color/anodized.css');
|
||||
@import url('default/color-semantic.css');
|
||||
@import url('default/space.css');
|
||||
@import url('default/outlines.css');
|
||||
@import url('default/typography.css');
|
||||
@import url('default/rounding.css');
|
||||
@import url('default/shadows.css');
|
||||
@import url('default/transitions.css');
|
||||
@import url('default/groups.css');
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
|
||||
|
||||
:root,
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-premium-light {
|
||||
.wa-theme-premium,
|
||||
.wa-light {
|
||||
color-scheme: light;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/**
|
||||
* Primitive colors
|
||||
* Each color is identified by a number that corresponds to its lightness value, where 100 is lightest (white) and 0 is darkest (black).
|
||||
* Lightness on this scale is directly related to relative luminance, so each lightness value has uniform WCAG 2.1 contrast across hues.
|
||||
* A difference of 40 between lightness values guarantees a minimum 3:1 contrast ratio.
|
||||
* A difference of 50 between lightness values guarantees a minimum 4.5:1 contrast ratio.
|
||||
* A difference of 60 between lightness values guarantees a minimum 7:1 contrast ratio.
|
||||
* Foundational Colors
|
||||
*/
|
||||
--wa-color-red-95: #fbeeeb;
|
||||
--wa-color-red-90: #f8e0d9;
|
||||
--wa-color-red-80: #efbdb1;
|
||||
--wa-color-red-70: #e39f8d;
|
||||
--wa-color-red-60: #d1806b;
|
||||
--wa-color-red-50: #b35e49;
|
||||
--wa-color-red-40: #8e4330;
|
||||
--wa-color-red-30: #733223;
|
||||
--wa-color-red-20: #562317;
|
||||
--wa-color-red-10: #36130a;
|
||||
--wa-color-red-05: #240a05;
|
||||
|
||||
--wa-color-yellow-95: #fff2b8;
|
||||
--wa-color-yellow-90: #ffe578;
|
||||
--wa-color-yellow-80: #eac46c;
|
||||
--wa-color-yellow-70: #d5a766;
|
||||
--wa-color-yellow-60: #bd8a5e;
|
||||
--wa-color-yellow-50: #9d6a4f;
|
||||
--wa-color-yellow-40: #794f3c;
|
||||
--wa-color-yellow-30: #603d2f;
|
||||
--wa-color-yellow-20: #482b21;
|
||||
--wa-color-yellow-10: #2c1912;
|
||||
--wa-color-yellow-05: #1d0e0a;
|
||||
|
||||
--wa-color-green-95: #dcf8ea;
|
||||
--wa-color-green-90: #bcf1d8;
|
||||
--wa-color-green-80: #6dddad;
|
||||
--wa-color-green-70: #33c685;
|
||||
--wa-color-green-60: #00aa66;
|
||||
--wa-color-green-50: #008754;
|
||||
--wa-color-green-40: #006646;
|
||||
--wa-color-green-30: #00503b;
|
||||
--wa-color-green-20: #003a2d;
|
||||
--wa-color-green-10: #00231b;
|
||||
--wa-color-green-05: #001610;
|
||||
|
||||
--wa-color-teal-95: #cbfaf9;
|
||||
--wa-color-teal-90: #9ff4f3;
|
||||
--wa-color-teal-80: #1adfdb;
|
||||
--wa-color-teal-70: #00c3be;
|
||||
--wa-color-teal-60: #1aa6a0;
|
||||
--wa-color-teal-50: #15837e;
|
||||
--wa-color-teal-40: #10635e;
|
||||
--wa-color-teal-30: #0c4e4a;
|
||||
--wa-color-teal-20: #083936;
|
||||
--wa-color-teal-10: #04221f;
|
||||
--wa-color-teal-05: #021513;
|
||||
|
||||
--wa-color-gray-95: #f1f2f4;
|
||||
--wa-color-gray-90: #e3e6e9;
|
||||
--wa-color-gray-80: #c3cad1;
|
||||
--wa-color-gray-70: #a6b0ba;
|
||||
--wa-color-gray-60: #8897a3;
|
||||
--wa-color-gray-50: #637787;
|
||||
--wa-color-gray-40: #435b6e;
|
||||
--wa-color-gray-30: #2c485d;
|
||||
--wa-color-gray-20: #11344c;
|
||||
--wa-color-gray-10: #002034;
|
||||
--wa-color-gray-05: #0f1310;
|
||||
|
||||
--wa-color-primary-95: var(--wa-color-teal-95);
|
||||
--wa-color-primary-90: var(--wa-color-teal-90);
|
||||
--wa-color-primary-80: var(--wa-color-teal-80);
|
||||
--wa-color-primary-70: var(--wa-color-teal-70);
|
||||
--wa-color-primary-60: var(--wa-color-teal-60);
|
||||
--wa-color-primary-50: var(--wa-color-teal-50);
|
||||
--wa-color-primary-40: var(--wa-color-teal-40);
|
||||
--wa-color-primary-30: var(--wa-color-teal-30);
|
||||
--wa-color-primary-20: var(--wa-color-teal-20);
|
||||
--wa-color-primary-10: var(--wa-color-teal-10);
|
||||
--wa-color-primary-05: var(--wa-color-teal-05);
|
||||
|
||||
--wa-color-base-95: var(--wa-color-gray-95);
|
||||
--wa-color-base-90: var(--wa-color-gray-90);
|
||||
--wa-color-base-80: var(--wa-color-gray-80);
|
||||
--wa-color-base-70: var(--wa-color-gray-70);
|
||||
--wa-color-base-60: var(--wa-color-gray-60);
|
||||
--wa-color-base-50: var(--wa-color-gray-50);
|
||||
--wa-color-base-40: var(--wa-color-gray-40);
|
||||
--wa-color-base-30: var(--wa-color-gray-30);
|
||||
--wa-color-base-20: var(--wa-color-gray-20);
|
||||
--wa-color-base-10: var(--wa-color-gray-10);
|
||||
--wa-color-base-05: var(--wa-color-gray-05);
|
||||
--wa-color-surface-border: var(--wa-color-gray-80);
|
||||
|
||||
/**
|
||||
* Base theme colors
|
||||
* Semantic Colors
|
||||
*/
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-teal-90);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-teal-80);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-teal-40);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-teal-80);
|
||||
--wa-color-brand-border-normal: var(--wa-color-teal-70);
|
||||
--wa-color-brand-border-loud: var(--wa-color-teal-50);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-teal-40);
|
||||
--wa-color-brand-on-normal: var(--wa-color-teal-30);
|
||||
--wa-color-brand-on-loud: var(--wa-color-teal-95);
|
||||
|
||||
/* Surfaces are background layers that UI components and other content rest on.
|
||||
* Surface colors support elevation, where raised is closest to the user and lowered is farthest away. */
|
||||
--wa-color-surface-raised: white;
|
||||
--wa-color-surface-default: white;
|
||||
--wa-color-surface-lowered: var(--wa-color-base-95);
|
||||
--wa-color-surface-border: var(--wa-color-base-80);
|
||||
|
||||
/* Text colors are used for standard text elements.
|
||||
* Text should have a minimum 4.5:1 contrast ratio against surfaces.
|
||||
* Inverse text should support appropriate contrast against background colors with opposing lightness. */
|
||||
--wa-color-text-normal: var(--wa-color-base-10);
|
||||
--wa-color-text-quiet: var(--wa-color-base-50);
|
||||
--wa-color-text-link: var(--wa-color-primary-50);
|
||||
|
||||
/* Focus specifies the default color of the focus ring for predictable keyboard navigation.
|
||||
* Focus should have a minimum 3:1 contrast ratio against surfaces and background colors whenever possible. */
|
||||
--wa-color-focus: color-mix(in oklab, var(--wa-color-primary-70) 76%, transparent);
|
||||
|
||||
/* Overlays provide a backdrop for isolated content, often allowing background colors or content to show through. */
|
||||
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-base-10) 32%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-base-50) 8%, transparent);
|
||||
|
||||
/* Shadow specifies the default color for box shadows that indicate elevation. */
|
||||
--wa-color-shadow: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-base-10) calc(var(--wa-shadow-blur-scale) * 8% + 16%),
|
||||
transparent
|
||||
);
|
||||
|
||||
/* Mix colors are used in color-mix() to achieve consistent interaction effects across components. */
|
||||
--wa-color-mix-hover: black 12%;
|
||||
--wa-color-mix-active: black 20%;
|
||||
|
||||
/**
|
||||
* Semantic theme colors
|
||||
* Five semantic groups reinforce a component's message, intended usage, or expected results through meaningful hues -
|
||||
* * Brand to reinforce product branding
|
||||
* * Success to express validity or confirmation
|
||||
* * Warning to express caution or uncertainty
|
||||
* * Danger to express errors or risk
|
||||
* * Neutral for elements that are innocuous or inert
|
||||
* Each semantic group specifies colors to use as fills, outlines, and text content with vivid and muted variations.
|
||||
* Vivid colors are the most noticeable against base theme colors, whereas muted colors draw less attention.
|
||||
* Vivid colors should have a minimum 3:1 contrast ratio against surfaces when possible.
|
||||
* Muted colors have no contrast requirements.
|
||||
* Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
|
||||
*/
|
||||
--wa-color-brand-fill-loud: var(--wa-color-primary-50);
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-primary-90);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-primary-80);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-primary-80);
|
||||
--wa-color-brand-border-normal: var(--wa-color-primary-50);
|
||||
--wa-color-brand-on-loud: var(--wa-color-primary-95);
|
||||
--wa-color-brand-on-normal: var(--wa-color-primary-20);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-primary-50);
|
||||
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-50);
|
||||
--wa-color-success-fill-quiet: var(--wa-color-green-90);
|
||||
--wa-color-success-fill-normal: var(--wa-color-green-80);
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-40);
|
||||
--wa-color-success-border-quiet: var(--wa-color-green-80);
|
||||
--wa-color-success-border-normal: var(--wa-color-green-50);
|
||||
--wa-color-success-border-normal: var(--wa-color-green-70);
|
||||
--wa-color-success-border-loud: var(--wa-color-green-50);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-40);
|
||||
--wa-color-success-on-normal: var(--wa-color-green-30);
|
||||
--wa-color-success-on-loud: var(--wa-color-green-95);
|
||||
--wa-color-success-on-normal: var(--wa-color-green-20);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-50);
|
||||
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-90);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-border-normal: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-border-normal: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-border-loud: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-30);
|
||||
--wa-color-warning-on-loud: var(--wa-color-yellow-95);
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-20);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-yellow-50);
|
||||
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-50);
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-red-90);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-red-80);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-40);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-red-80);
|
||||
--wa-color-danger-border-normal: var(--wa-color-red-50);
|
||||
--wa-color-danger-border-normal: var(--wa-color-red-70);
|
||||
--wa-color-danger-border-loud: var(--wa-color-red-50);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-40);
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-30);
|
||||
--wa-color-danger-on-loud: var(--wa-color-red-95);
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-20);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-50);
|
||||
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-base-50);
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-base-90);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-base-80);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-base-80);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-base-50);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-base-95);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-base-20);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-base-50);
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-gray-90);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-gray-80);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-gray-40);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-gray-80);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-gray-70);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-gray-50);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-gray-40);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-gray-30);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-gray-95);
|
||||
|
||||
/**
|
||||
* Typography
|
||||
@@ -204,260 +84,112 @@
|
||||
monospace;
|
||||
--wa-font-family-longform: 'Lora', serif;
|
||||
|
||||
--wa-font-weight-light: 300;
|
||||
--wa-font-weight-normal: 400;
|
||||
--wa-font-weight-semibold: 500;
|
||||
--wa-font-weight-bold: 600;
|
||||
|
||||
--wa-font-weight-heading: var(--wa-font-weight-semibold);
|
||||
--wa-font-weight-body: var(--wa-font-weight-normal);
|
||||
--wa-font-weight-action: var(--wa-font-weight-normal);
|
||||
|
||||
/* The default typescale is based on the Major Second scale (x1.125).
|
||||
* Every other step on the scale is skipped for larger sizes in order to maximize variation. */
|
||||
--wa-font-size-root: 16px;
|
||||
--wa-font-size-2xs: 0.6875rem; /* 11px */
|
||||
--wa-font-size-xs: 0.75rem; /* 12px */
|
||||
--wa-font-size-s: 0.875rem; /* 14px */
|
||||
--wa-font-size-m: 1rem; /* 16px */
|
||||
--wa-font-size-l: 1.25rem; /* 20px */
|
||||
--wa-font-size-xl: 1.625rem; /* 26px */
|
||||
--wa-font-size-2xl: 2rem; /* 32px */
|
||||
--wa-font-size-3xl: 2.5625rem; /* 41px */
|
||||
--wa-font-size-4xl: 3.25rem; /* 52px */
|
||||
|
||||
--wa-line-height-condensed: 1.25;
|
||||
--wa-line-height-normal: 1.6;
|
||||
--wa-line-height-expanded: 2;
|
||||
|
||||
/**
|
||||
* Spacing
|
||||
* Used intentionally, space properties yield a predictable rhythm and support effective implementation of the proximity principle.
|
||||
* Space can be organized into three groups with distinct usage -
|
||||
* * Small-scale space (3xs, 2xs, and xs) is used for gaps between closely related elements, such as a dropdown button and its menu,
|
||||
* and padding within small components, such as badges and tooltips
|
||||
* * Normal space (s, m, and l) is used for gaps between related elements with distinct purposes or touch targets and padding within
|
||||
* typical interface elements, such as buttons and inputs
|
||||
* * Large-scale space (xl, 2xl, and 3xl) is used for gaps between unrelated elements and padding within larger components,
|
||||
* such as cards and dialogs
|
||||
*/
|
||||
/* Space is designed to scale according to a single base value.
|
||||
* The base value is intended for calculations and is not used by components directly. */
|
||||
--wa-space-scale: 1;
|
||||
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
|
||||
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
|
||||
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
|
||||
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
|
||||
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
|
||||
--wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
|
||||
--wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
|
||||
--wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
|
||||
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
|
||||
|
||||
/**
|
||||
* Borders
|
||||
*/
|
||||
--wa-border-style: solid;
|
||||
|
||||
/* Border widths are designed to scale according to a single base value.
|
||||
* The base value is intended for calculations and is not used by components directly. */
|
||||
--wa-border-width-scale: 0.09375;
|
||||
--wa-border-width-s: calc(var(--wa-border-width-scale) * 1rem);
|
||||
--wa-border-width-m: calc(var(--wa-border-width-scale) * 2rem);
|
||||
--wa-border-width-l: calc(var(--wa-border-width-scale) * 3rem);
|
||||
|
||||
--wa-form-control-border-style: var(--wa-border-style);
|
||||
--wa-form-control-border-width: var(--wa-border-width-s);
|
||||
|
||||
--wa-panel-border-style: var(--wa-border-style);
|
||||
--wa-panel-border-width: var(--wa-border-width-s);
|
||||
--wa-border-width-scale: 1.5;
|
||||
|
||||
/**
|
||||
* Corners
|
||||
*/
|
||||
/* Corners are designed to scale according to a single base value.
|
||||
* The base value is intended for calculations and is not used by components directly. */
|
||||
--wa-border-radius-scale: 0.25;
|
||||
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.75rem);
|
||||
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 1rem);
|
||||
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 2rem);
|
||||
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 3rem);
|
||||
|
||||
/* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
|
||||
--wa-border-radius-pill: 9999px;
|
||||
--wa-border-radius-circle: 50%;
|
||||
--wa-border-radius-square: 0;
|
||||
* Rounding
|
||||
*/
|
||||
--wa-border-radius-scale: 1.33;
|
||||
|
||||
/**
|
||||
* Focus
|
||||
*/
|
||||
--wa-focus-ring-style: solid;
|
||||
--wa-focus-ring-width: 0.1875rem; /* 3px */
|
||||
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
|
||||
--wa-focus-ring-offset: 0.0625rem; /* 1px */
|
||||
|
||||
/**
|
||||
* Links
|
||||
*/
|
||||
--wa-link-decoration-default: underline var(--wa-color-brand-border-normal) dotted;
|
||||
--wa-link-decoration-hover: underline;
|
||||
|
||||
/**
|
||||
* Transitions
|
||||
*/
|
||||
--wa-transition-slow: 250ms;
|
||||
--wa-transition-normal: 150ms;
|
||||
--wa-transition-fast: 50ms;
|
||||
|
||||
/**
|
||||
* Component groups
|
||||
* Component Groups
|
||||
*/
|
||||
--wa-form-control-background-color: transparent;
|
||||
|
||||
--wa-form-control-border-radius: var(--wa-border-radius-m);
|
||||
|
||||
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
|
||||
--wa-form-control-resting-color: var(--wa-color-neutral-border-normal);
|
||||
|
||||
--wa-form-control-label-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-label-font-weight: var(--wa-font-weight-normal);
|
||||
--wa-form-control-label-line-height: var(--wa-line-height-normal);
|
||||
|
||||
--wa-form-control-value-color: var(--wa-color-text-normal);
|
||||
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
|
||||
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
|
||||
|
||||
--wa-form-control-placeholder-color: var(--wa-color-base-60);
|
||||
|
||||
--wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
|
||||
--wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
|
||||
--wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
|
||||
|
||||
--wa-form-control-required-content: '*';
|
||||
--wa-form-control-required-content-color: inherit;
|
||||
--wa-form-control-required-content-offset: -0.1em;
|
||||
|
||||
--wa-panel-border-radius: var(--wa-border-radius-m);
|
||||
|
||||
/**
|
||||
* From 2.x
|
||||
*/
|
||||
--wa-tooltip-arrow-size: 0.375rem;
|
||||
|
||||
/* Depth */
|
||||
--wa-shadow-blur-scale: 0.375;
|
||||
--wa-shadow-offset-y-scale: 0.1875;
|
||||
--wa-form-control-border-color: var(--wa-color-neutral-border-normal);
|
||||
}
|
||||
|
||||
.wa-theme-premium-dark,
|
||||
.wa-theme-premium-dark :host {
|
||||
.wa-dark,
|
||||
:is(:host-context(.wa-dark)) {
|
||||
color-scheme: dark;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/**
|
||||
* Base theme colors
|
||||
* Foundational Colors
|
||||
*/
|
||||
--wa-color-surface-raised: var(--wa-color-base-30);
|
||||
--wa-color-surface-default: var(--wa-color-base-20);
|
||||
--wa-color-surface-lowered: var(--wa-color-base-10);
|
||||
--wa-color-surface-border: var(--wa-color-base-30);
|
||||
--wa-color-surface-raised: var(--wa-color-gray-30);
|
||||
--wa-color-surface-default: var(--wa-color-gray-20);
|
||||
--wa-color-surface-lowered: var(--wa-color-gray-10);
|
||||
--wa-color-surface-border: var(--wa-color-gray-30);
|
||||
|
||||
--wa-color-text-normal: var(--wa-color-base-95);
|
||||
--wa-color-text-quiet: var(--wa-color-base-80);
|
||||
--wa-color-text-link: var(--wa-color-primary-80);
|
||||
--wa-color-text-normal: var(--wa-color-gray-95);
|
||||
--wa-color-text-quiet: var(--wa-color-gray-80);
|
||||
--wa-color-text-link: var(--wa-color-blue-80);
|
||||
|
||||
--wa-color-focus: color-mix(in oklab, var(--wa-color-primary-60) 90%, transparent);
|
||||
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
|
||||
|
||||
--wa-color-overlay-modal: color-mix(in oklab, black 50%, transparent);
|
||||
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-scale) * 32% + 40%), transparent);
|
||||
|
||||
--wa-color-shadow: color-mix(
|
||||
in oklab,
|
||||
var(--wa-color-base-10) calc(var(--wa-shadow-blur-scale) * 16% + 40%),
|
||||
transparent
|
||||
);
|
||||
--wa-color-focus: var(--wa-color-blue-60);
|
||||
|
||||
--wa-color-mix-hover: black 8%;
|
||||
--wa-color-mix-active: black 16%;
|
||||
|
||||
/**
|
||||
* Semantic theme colors
|
||||
*/
|
||||
--wa-color-brand-fill-loud: var(--wa-color-primary-80);
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-primary-30);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-primary-40);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-primary-30);
|
||||
--wa-color-brand-border-normal: var(--wa-color-primary-40);
|
||||
--wa-color-brand-on-loud: var(--wa-color-primary-20);
|
||||
--wa-color-brand-on-normal: var(--wa-color-primary-90);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-primary-70);
|
||||
* Semantic Colors
|
||||
*/
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-blue-30);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-blue-40);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-blue-80);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-blue-30);
|
||||
--wa-color-brand-border-normal: var(--wa-color-blue-40);
|
||||
--wa-color-brand-border-loud: var(--wa-color-blue-70);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-blue-70);
|
||||
--wa-color-brand-on-normal: var(--wa-color-blue-90);
|
||||
--wa-color-brand-on-loud: var(--wa-color-blue-20);
|
||||
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-80);
|
||||
--wa-color-success-fill-quiet: var(--wa-color-green-30);
|
||||
--wa-color-success-fill-normal: var(--wa-color-green-40);
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-80);
|
||||
--wa-color-success-border-quiet: var(--wa-color-green-30);
|
||||
--wa-color-success-border-normal: var(--wa-color-green-40);
|
||||
--wa-color-success-on-loud: var(--wa-color-green-20);
|
||||
--wa-color-success-on-normal: var(--wa-color-green-90);
|
||||
--wa-color-success-border-loud: var(--wa-color-green-70);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-70);
|
||||
--wa-color-success-on-normal: var(--wa-color-green-90);
|
||||
--wa-color-success-on-loud: var(--wa-color-green-20);
|
||||
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-30);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-80);
|
||||
--wa-color-warning-border-quiet: var(--wa-color-yellow-30);
|
||||
--wa-color-warning-border-normal: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-on-loud: var(--wa-color-yellow-20);
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-90);
|
||||
--wa-color-warning-border-loud: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-90);
|
||||
--wa-color-warning-on-loud: var(--wa-color-yellow-20);
|
||||
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-70);
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-red-30);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-red-40);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-80);
|
||||
--wa-color-danger-border-quiet: var(--wa-color-red-30);
|
||||
--wa-color-danger-border-normal: var(--wa-color-red-40);
|
||||
--wa-color-danger-on-loud: var(--wa-color-red-20);
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-90);
|
||||
--wa-color-danger-border-loud: var(--wa-color-red-70);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-70);
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-90);
|
||||
--wa-color-danger-on-loud: var(--wa-color-red-20);
|
||||
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-base-40);
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-base-20);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-base-30);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-base-30);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-base-70);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-base-95);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-base-90);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-base-70);
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-gray-20);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-gray-30);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-gray-40);
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-gray-30);
|
||||
--wa-color-neutral-border-normal: var(--wa-color-gray-40);
|
||||
--wa-color-neutral-border-loud: var(--wa-color-gray-70);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-gray-70);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-gray-90);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-gray-95);
|
||||
}
|
||||
|
||||
/* #region Custom Styles */
|
||||
@container preview (min-width: 0) {
|
||||
.preview-container pre,
|
||||
.preview-container code {
|
||||
background-color: var(--wa-color-base-90);
|
||||
font-size: var(--font-size-m);
|
||||
}
|
||||
|
||||
/* syntax highlighting */
|
||||
.token {
|
||||
&.selector {
|
||||
color: var(--wa-color-green-30);
|
||||
}
|
||||
|
||||
&.tag {
|
||||
color: var(--wa-color-primary-30);
|
||||
}
|
||||
|
||||
&.punctuation {
|
||||
color: var(--wa-color-base-10);
|
||||
}
|
||||
|
||||
&.attr-name {
|
||||
color: var(--wa-color-green-30);
|
||||
}
|
||||
|
||||
&.attr-value {
|
||||
color: var(--wa-color-yellow-30);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Component Styles
|
||||
*/
|
||||
.wa-theme-premium {
|
||||
wa-rating {
|
||||
--symbol-size: var(--wa-font-size-l);
|
||||
--symbol-color-active: var(--wa-color-text-quiet);
|
||||
@@ -483,7 +215,7 @@
|
||||
}
|
||||
|
||||
wa-card {
|
||||
--border-radius: var(--wa-border-radius-l);
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
}
|
||||
|
||||
wa-alert {
|
||||
@@ -492,8 +224,8 @@
|
||||
}
|
||||
|
||||
wa-carousel {
|
||||
--pagination-color-activated: var(--wa-color-brand-fill-loud);
|
||||
--pagination-color-resting: var(--wa-color-neutral-fill-normal);
|
||||
--pagination-color-active: var(--wa-color-brand-fill-loud);
|
||||
--pagination-color: var(--wa-color-neutral-fill-normal);
|
||||
}
|
||||
|
||||
wa-badge,
|
||||
@@ -504,10 +236,10 @@
|
||||
|
||||
wa-badge,
|
||||
wa-tag {
|
||||
--border-width: 0;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
&:not(.wa-theme-premium-dark) wa-alert {
|
||||
&:not(.wa-dark) wa-alert {
|
||||
&[variant='brand'] {
|
||||
--background: var(--wa-color-primary-95);
|
||||
}
|
||||
@@ -544,174 +276,4 @@
|
||||
--text-color: var(--wa-color-base-30);
|
||||
}
|
||||
}
|
||||
|
||||
.project-header {
|
||||
background-color: var(--wa-color-warning-fill-normal);
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
height: 60rem;
|
||||
background: var(--wa-color-warning-fill-normal) url('/assets/images/themer/premium/hero.png') -4rem 12rem no-repeat;
|
||||
background-size: cover;
|
||||
padding-top: var(--wa-space-2xl);
|
||||
padding-left: var(--wa-space-s);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.hero .hero-title {
|
||||
color: var(--wa-color-warning-on-normal);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.blog wa-avatar {
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.strata.products {
|
||||
margin-top: -25rem;
|
||||
padding-top: 10rem;
|
||||
background: linear-gradient(0deg, var(--wa-color-surface-lowered) 80%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
|
||||
.product-card .badge-stock {
|
||||
position: absolute;
|
||||
top: var(--wa-space-xl);
|
||||
right: var(--wa-space-xl);
|
||||
}
|
||||
|
||||
.product-card wa-rating {
|
||||
--symbol-size: var(--wa-font-size-m);
|
||||
}
|
||||
|
||||
.product-card .title {
|
||||
font-size: var(--wa-font-size-2xl);
|
||||
}
|
||||
|
||||
.product-card .description {
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
.product-card::part(footer) {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.product-card wa-button:not(:last-child) {
|
||||
margin-inline-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.blog .authors a {
|
||||
--wa-color-text-link: var(--wa-color-text-quiet);
|
||||
--wa-link-decoration-default: none;
|
||||
}
|
||||
|
||||
.message-composer wa-card {
|
||||
--background: var(--wa-color-surface-raised);
|
||||
}
|
||||
|
||||
.message-composer wa-card::part(header) {
|
||||
border-width: 0;
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
}
|
||||
|
||||
&:not(.wa-theme-premium-dark) .message-composer wa-card {
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-base-95);
|
||||
}
|
||||
|
||||
.message-composer wa-card::part(footer) {
|
||||
border-width: 0;
|
||||
--padding: var(--wa-space-s) var(--wa-space-xl);
|
||||
}
|
||||
|
||||
.message-composer .grouped-buttons wa-icon-button::part(base) {
|
||||
block-size: var(--wa-form-control-height-s);
|
||||
inline-size: var(--wa-form-control-height-s);
|
||||
justify-content: center;
|
||||
}
|
||||
.message-composer .grouped-buttons wa-icon-button::part(base):hover {
|
||||
background-color: var(--wa-color-neutral-fill-normal);
|
||||
color: var(--wa-color-text-normal);
|
||||
}
|
||||
|
||||
.support-table th {
|
||||
text-transform: uppercase;
|
||||
font-weight: var(--wa-font-weight-normal);
|
||||
color: var(--wa-color-text-quiet);
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
}
|
||||
|
||||
.support-table th:first-child {
|
||||
border-radius: var(--wa-border-radius-l) 0 0 0;
|
||||
}
|
||||
|
||||
.support-table th:last-child {
|
||||
border-radius: 0 var(--wa-border-radius-l) 0 0;
|
||||
}
|
||||
|
||||
.support-table tr {
|
||||
--wa-color-surface-border: var(--wa-color-surface-lowered);
|
||||
}
|
||||
|
||||
.checkout-form wa-input::part(form-control-label),
|
||||
.checkout-form wa-select::part(form-control-label) {
|
||||
font-size: var(--wa-font-size-s);
|
||||
margin-block-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.order-item .finish {
|
||||
color: var(--wa-color-text-quiet);
|
||||
font-size: var(--wa-font-size-s);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.wa-theme-premium-dark {
|
||||
& .message-composer .tools .grouped-buttons:not(:last-of-type) {
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-base-40);
|
||||
}
|
||||
|
||||
& .preview-container pre,
|
||||
& .preview-container code {
|
||||
background-color: var(--wa-color-base-20);
|
||||
}
|
||||
|
||||
/* syntax highlighting */
|
||||
& .token {
|
||||
&.selector {
|
||||
color: var(--wa-color-green-80);
|
||||
}
|
||||
|
||||
&.tag {
|
||||
color: var(--wa-color-primary-80);
|
||||
}
|
||||
|
||||
&.punctuation {
|
||||
color: var(--wa-color-base-95);
|
||||
}
|
||||
|
||||
&.attr-name {
|
||||
color: var(--wa-color-green-80);
|
||||
}
|
||||
|
||||
&.attr-value {
|
||||
color: var(--wa-color-yellow-80);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
@container preview (min-width: 1040px) {
|
||||
.strata.hero {
|
||||
background: var(--wa-color-warning-fill-normal) url('/assets/images/themer/premium/hero.png') -4rem 35% no-repeat;
|
||||
padding-top: 15rem;
|
||||
padding-left: 50%;
|
||||
}
|
||||
|
||||
.strata.products {
|
||||
margin-top: -25rem;
|
||||
padding-top: 10rem;
|
||||
background: linear-gradient(0deg, var(--wa-color-surface-lowered) 60%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* #endregion */
|
||||
|
||||
270
src/styles/themes/tailspin.css
Normal file
270
src/styles/themes/tailspin.css
Normal file
@@ -0,0 +1,270 @@
|
||||
@import url('../color/vogue.css');
|
||||
@import url('default/color-semantic.css');
|
||||
@import url('default/space.css');
|
||||
@import url('default/outlines.css');
|
||||
@import url('default/typography.css');
|
||||
@import url('default/rounding.css');
|
||||
@import url('default/shadows.css');
|
||||
@import url('default/transitions.css');
|
||||
@import url('default/groups.css');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
|
||||
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-tailspin,
|
||||
.wa-light {
|
||||
color-scheme: light;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/**
|
||||
* Foundational Colors
|
||||
*/
|
||||
--wa-color-text-link: var(--wa-color-indigo-40);
|
||||
|
||||
--wa-color-shadow: rgb(0 0 0 / 0.05);
|
||||
|
||||
--wa-color-focus: var(--wa-color-indigo-50);
|
||||
|
||||
--wa-color-mix-hover: var(--wa-color-gray-80) 20%;
|
||||
--wa-color-mix-active: var(--wa-color-gray-80) 10%;
|
||||
|
||||
/**
|
||||
* Semantic Colors
|
||||
*/
|
||||
--wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-indigo-95) 85%, transparent);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-indigo-90);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-indigo-40);
|
||||
--wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-indigo-80), transparent);
|
||||
--wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-indigo-70) 60%, transparent);
|
||||
--wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-indigo-60) 70%, transparent);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-indigo-40);
|
||||
--wa-color-brand-on-normal: var(--wa-color-indigo-30);
|
||||
--wa-color-brand-on-loud: white;
|
||||
|
||||
--wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-green-95) 85%, transparent);
|
||||
--wa-color-success-fill-normal: var(--wa-color-green-90);
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-50);
|
||||
--wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-green-80), transparent);
|
||||
--wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-green-70) 60%, transparent);
|
||||
--wa-color-success-border-loud: color-mix(in oklab, var(--wa-color-green-60) 70%, transparent);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-40);
|
||||
--wa-color-success-on-normal: var(--wa-color-green-30);
|
||||
--wa-color-success-on-loud: white;
|
||||
|
||||
--wa-color-warning-fill-quiet: color-mix(in oklab, var(--wa-color-yellow-95) 85%, transparent);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-yellow-90);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-yellow-80), transparent);
|
||||
--wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-yellow-70) 60%, transparent);
|
||||
--wa-color-warning-border-loud: color-mix(in oklab, var(--wa-color-yellow-60) 70%, transparent);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-yellow-40);
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-30);
|
||||
--wa-color-warning-on-loud: white;
|
||||
|
||||
--wa-color-danger-fill-quiet: color-mix(in oklab, var(--wa-color-red-95) 85%, transparent);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-red-90);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-50);
|
||||
--wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-red-80), transparent);
|
||||
--wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-red-70) 60%, transparent);
|
||||
--wa-color-danger-border-loud: color-mix(in oklab, var(--wa-color-red-60) 70%, transparent);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-40);
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-30);
|
||||
--wa-color-danger-on-loud: white;
|
||||
|
||||
--wa-color-neutral-fill-quiet: color-mix(in oklab, var(--wa-color-gray-95) 85%, transparent);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-gray-90);
|
||||
--wa-color-neutral-fill-loud: var(--wa-color-gray-10);
|
||||
--wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-gray-80), transparent);
|
||||
--wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-gray-70) 60%, transparent);
|
||||
--wa-color-neutral-border-loud: color-mix(in oklab, var(--wa-color-gray-60) 70%, transparent);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-gray-30);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-gray-30);
|
||||
--wa-color-neutral-on-loud: white;
|
||||
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
--wa-font-family-body: 'Inter', sans-serif;
|
||||
--wa-font-family-heading: var(--wa-font-family-body);
|
||||
|
||||
--wa-font-weight-light: 300;
|
||||
--wa-font-weight-normal: 400;
|
||||
--wa-font-weight-semibold: 500;
|
||||
--wa-font-weight-bold: 700;
|
||||
|
||||
--wa-font-size-scale: 0.875;
|
||||
|
||||
--wa-link-decoration-default: none;
|
||||
--wa-link-decoration-hover: none;
|
||||
|
||||
/**
|
||||
* Spacing
|
||||
*/
|
||||
--wa-space-scale: 0.875;
|
||||
|
||||
/**
|
||||
* Focus
|
||||
*/
|
||||
--wa-focus-ring-width: 0.125rem;
|
||||
--wa-focus-ring-offset: 0;
|
||||
|
||||
/**
|
||||
* Shadows
|
||||
*/
|
||||
--wa-shadow-offset-y-scale: 0.5;
|
||||
--wa-shadow-offset-blur-scale: 0.5;
|
||||
--wa-shadow-spread-scale: 0;
|
||||
|
||||
/**
|
||||
* Component Groups
|
||||
*/
|
||||
--wa-form-control-background-color: color-mix(in oklab, var(--wa-color-surface-raised), transparent);
|
||||
--wa-form-control-border-color: var(--wa-color-neutral-border-normal);
|
||||
|
||||
--wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
|
||||
--wa-form-control-label-line-height: var(--wa-line-height-normal);
|
||||
}
|
||||
|
||||
.wa-dark,
|
||||
:is(:host-context(.wa-dark)) {
|
||||
color-scheme: dark;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/**
|
||||
* Foundational Colors
|
||||
*/
|
||||
--wa-color-surface-raised: var(--wa-color-gray-10);
|
||||
--wa-color-surface-default: var(--wa-color-gray-05);
|
||||
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
|
||||
--wa-color-surface-border: rgb(255 255 255 / 0.1);
|
||||
|
||||
--wa-color-text-normal: white;
|
||||
--wa-color-text-quiet: var(--wa-color-gray-60);
|
||||
--wa-color-text-link: var(--wa-color-indigo-70);
|
||||
|
||||
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
|
||||
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
|
||||
|
||||
--wa-color-shadow: rgb(0 0 0 / 0.2);
|
||||
|
||||
--wa-color-focus: var(--wa-color-indigo-60);
|
||||
|
||||
--wa-color-mix-hover: var(--wa-color-gray-70) 20%;
|
||||
--wa-color-mix-active: var(--wa-color-gray-70) 10%;
|
||||
|
||||
/**
|
||||
* Semantic Colors
|
||||
*/
|
||||
--wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-indigo-10) 90%, transparent);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-indigo-20);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-indigo-50);
|
||||
--wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-indigo-20), transparent);
|
||||
--wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-indigo-30), transparent);
|
||||
--wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-indigo-40), transparent);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-indigo-60);
|
||||
--wa-color-brand-on-normal: var(--wa-color-indigo-70);
|
||||
--wa-color-brand-on-loud: white;
|
||||
|
||||
--wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-green-10) 90%, transparent);
|
||||
--wa-color-success-fill-normal: var(--wa-color-green-20);
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-50);
|
||||
--wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-green-20), transparent);
|
||||
--wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-green-30) 60%, transparent);
|
||||
--wa-color-success-border-loud: color-mix(in oklab, var(--wa-color-green-40) 70%, transparent);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-60);
|
||||
--wa-color-success-on-normal: var(--wa-color-green-70);
|
||||
--wa-color-success-on-loud: white;
|
||||
|
||||
--wa-color-warning-fill-quiet: color-mix(in oklab, var(--wa-color-yellow-10) 90%, transparent);
|
||||
--wa-color-warning-fill-normal: var(--wa-color-yellow-20);
|
||||
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-yellow-20), transparent);
|
||||
--wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-yellow-30) 60%, transparent);
|
||||
--wa-color-warning-border-loud: color-mix(in oklab, var(--wa-color-yellow-40) 70%, transparent);
|
||||
--wa-color-warning-on-quiet: var(--wa-color-yellow-60);
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-70);
|
||||
--wa-color-warning-on-loud: white;
|
||||
|
||||
--wa-color-danger-fill-quiet: color-mix(in oklab, var(--wa-color-red-10) 90%, transparent);
|
||||
--wa-color-danger-fill-normal: var(--wa-color-red-20);
|
||||
--wa-color-danger-fill-loud: var(--wa-color-red-50);
|
||||
--wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-red-20), transparent);
|
||||
--wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-red-30) 60%, transparent);
|
||||
--wa-color-danger-border-loud: color-mix(in oklab, var(--wa-color-red-40) 70%, transparent);
|
||||
--wa-color-danger-on-quiet: var(--wa-color-red-60);
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-70);
|
||||
--wa-color-danger-on-loud: white;
|
||||
|
||||
--wa-color-neutral-fill-quiet: color-mix(in oklab, var(--wa-color-gray-10) 90%, transparent);
|
||||
--wa-color-neutral-fill-normal: var(--wa-color-gray-20);
|
||||
--wa-color-neutral-fill-loud: white;
|
||||
--wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-gray-20), transparent);
|
||||
--wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-gray-30) 60%, transparent);
|
||||
--wa-color-neutral-border-loud: color-mix(in oklab, var(--wa-color-gray-40) 70%, transparent);
|
||||
--wa-color-neutral-on-quiet: var(--wa-color-gray-60);
|
||||
--wa-color-neutral-on-normal: var(--wa-color-gray-70);
|
||||
--wa-color-neutral-on-loud: var(--wa-color-gray-10);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component Styles
|
||||
*/
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-theme-tailspin,
|
||||
:is(:host-context(.wa-theme-tailspin)) {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
letter-spacing: calc(1em * -0.03);
|
||||
}
|
||||
|
||||
wa-avatar {
|
||||
--background-color: var(--wa-color-neutral-fill-quiet);
|
||||
--text-color: var(--wa-color-neutral-on-quiet);
|
||||
}
|
||||
|
||||
a,
|
||||
wa-badge,
|
||||
wa-tag {
|
||||
font-weight: var(--wa-font-weight-semibold);
|
||||
}
|
||||
|
||||
:is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button, .wa-button):not(
|
||||
[appearance='plain'],
|
||||
.wa-plain
|
||||
) {
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
}
|
||||
|
||||
wa-callout {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
|
||||
&::part(icon) {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='radio'],
|
||||
wa-radio {
|
||||
--background-color-checked: var(--wa-form-control-activated-color);
|
||||
--checked-icon-color: var(--wa-color-brand-on-loud);
|
||||
--checked-icon-scale: 0.4;
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--background-color: var(--wa-color-neutral-fill-normal);
|
||||
--border-color: transparent;
|
||||
--height: calc(var(--thumb-size) * (18 / 14));
|
||||
--thumb-color: white;
|
||||
--thumb-color-checked: var(--thumb-color);
|
||||
--thumb-size: 1.25em;
|
||||
--thumb-shadow: var(--wa-shadow-s);
|
||||
--width: calc(var(--thumb-size) * (32 / 14));
|
||||
}
|
||||
|
||||
wa-tab {
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
}
|
||||
@@ -36,6 +36,12 @@
|
||||
--text-color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
|
||||
}
|
||||
|
||||
/* 0 specificity. Safari doesn't like :where(:host()) so we need a separate rule. */
|
||||
:where(.wa-filled),
|
||||
:host(:where([appearance~='filled'])) {
|
||||
--border-color: transparent;
|
||||
}
|
||||
|
||||
.wa-plain,
|
||||
:host([appearance~='plain']) {
|
||||
--background-color: transparent;
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
font-size: var(--wa-size);
|
||||
}
|
||||
|
||||
:root,
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-size-s,
|
||||
.wa-size-m,
|
||||
|
||||
Reference in New Issue
Block a user