mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
Theme cleanup (#414)
* formatting, docs tweaks * FA theme cleanup * Revert removal of `--wa-form-control-height-*` * Classic theme cleanup * Use consistent selectors for dark mode * Clean slate for additional themes * Retire depth stylesheets * Move header styles for themer out of themes * Missed instance of dark mode selector * Migration theme cleanup * Brutalist theme cleanup * Changelog for new themes * Playful theme cleanup * Formatting * Default theme update * Add tests for form theming * Fix test typo * Change misnamed `multiplier` properties to `scale` * Active theme cleanup * Mellow theme cleanup * Cleanup unused FA styles * Glassy theme progress * Add checked styles to glassy * Fix typo * Final FA theme cleanup * Rename FA theme to 'Awesome', allow in alpha * Final brutalist theme cleanup * A few more brutalist tweaks * One last brutalist tweak * Final mellow theme cleanup * Final Tailwind theme cleanup * Final active theme cleanup * Some classic theme cleanup * Remove unused `--wa-form-control-height-*` * Rename `--wa-form-control-resting-color` to `border-color` * Touch up callout `appearance` styles * Add more themes to alpha * Add changelog for removal of `--wa-form-control-height-*` * Clean up colors * Final classic theme cleanup * Add new themes to alpha build * Re-add teal (used by Awesome theme) * sync mobile/desktop theme pickers and don't dup IDs * Remove `color/standard.css` (duplicates `/themes/default/color.css`) * add view transition * Add premium theme for later cleanup * Accommodate new tag `appearance` styles * Revise `--wa-form-control-height-*` changelog entry Co-authored-by: Lea Verou <lea@verou.me> * Improve `--wa-border-width-scale` description Co-authored-by: Lea Verou <lea@verou.me> * Better border docs * Premium tweaks --------- Co-authored-by: Cory LaViska <cory@abeautifulsite.net> Co-authored-by: Lea Verou <lea@verou.me>
This commit is contained in:
Lindsay M
@@ -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 #}
|
||||
|
||||
@@ -1,17 +1,18 @@
|
||||
{# 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 type="checkbox" value="awesome">Awesome</wa-menu-item>
|
||||
<wa-menu-item type="checkbox" value="active">Active</wa-menu-item>
|
||||
<wa-menu-item type="checkbox" value="brutalist">Brutalist</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="glassy">Glassy</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="migration">Migration</wa-menu-item>
|
||||
<wa-menu-item type="checkbox" value="mellow">Mellow</wa-menu-item>
|
||||
<wa-menu-item type="checkbox" value="migration">Migration</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="playful">Playful</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="premium">Premium</wa-menu-item>
|
||||
</wa-menu>
|
||||
|
||||
@@ -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,35 +21,44 @@
|
||||
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());
|
||||
}
|
||||
|
||||
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.querySelector('.preset-theme-selector__text').textContent = selectedItem.innerText;
|
||||
});
|
||||
}
|
||||
await customElements.whenDefined(item.localName);
|
||||
await item.updateComplete;
|
||||
item.checked = isChecked;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -53,14 +66,14 @@
|
||||
|
||||
// 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);
|
||||
});
|
||||
|
||||
@@ -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) {
|
||||
@@ -81,7 +81,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);
|
||||
@@ -428,7 +428,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 {
|
||||
|
||||
@@ -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[class*='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 Migration */
|
||||
html[class*='wa-theme-migration'] .preview-container {
|
||||
container-name: migration-theme;
|
||||
}
|
||||
|
||||
@container migration-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[class*='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-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[class*='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-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-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[class*='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[class*='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-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);
|
||||
}
|
||||
}
|
||||
}
|
||||
.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 */
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Theming Sandbox
|
||||
description: TODO
|
||||
layout: page
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
## Card
|
||||
@@ -245,11 +245,78 @@ 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>
|
||||
```
|
||||
|
||||
```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>
|
||||
|
||||
```
|
||||
@@ -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,7 +501,7 @@ 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>
|
||||
@@ -880,7 +879,7 @@ hasOutline: false
|
||||
case 'migration':
|
||||
colorPalette = 'classic';
|
||||
break;
|
||||
case 'fa':
|
||||
case 'awesome':
|
||||
colorPalette = 'bright';
|
||||
break;
|
||||
case 'playful':
|
||||
@@ -1049,7 +1048,7 @@ hasOutline: false
|
||||
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':
|
||||
@@ -1447,7 +1446,7 @@ hasOutline: false
|
||||
|
||||
function setPreferredIcons() {
|
||||
switch(themeSelect.value) {
|
||||
case 'fa':
|
||||
case 'awesome':
|
||||
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;
|
||||
|
||||
@@ -23,6 +23,15 @@ During the alpha period, things might break! We take breaking changes very serio
|
||||
|
||||
### Theming
|
||||
|
||||
- Added new themes:
|
||||
- Awesome
|
||||
- Active
|
||||
- Brutalist
|
||||
- Mellow
|
||||
- Migration
|
||||
- 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
|
||||
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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/migration') ||
|
||||
file.includes('themes/brutalist')
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
|
||||
@@ -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,7 +317,7 @@
|
||||
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.0625rem var(--wa-form-control-border-color),
|
||||
inset 0 0 0 0.25rem var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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),
|
||||
|
||||
@@ -5,7 +5,7 @@ input[type='color'] {
|
||||
padding: 3px;
|
||||
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-border-width-s) var(--wa-border-style) var(--wa-form-control-border-color);
|
||||
cursor: pointer;
|
||||
margin-block-start: 3px;
|
||||
forced-color-adjust: none;
|
||||
|
||||
@@ -17,7 +17,7 @@ input:where(:not(
|
||||
&:not(:host *) {
|
||||
/* 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(&) {
|
||||
@@ -32,7 +32,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);
|
||||
|
||||
@@ -2,7 +2,7 @@ select,
|
||||
label:has(select),
|
||||
:host {
|
||||
--background-color: var(--wa-form-control-background-color);
|
||||
--border-color: var(--wa-form-control-resting-color);
|
||||
--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(--wa-form-control-border-width);
|
||||
|
||||
@@ -1,487 +1,240 @@
|
||||
@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,
|
||||
:host,
|
||||
.wa-theme-active-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 {
|
||||
:is(:host-context(.wa-theme-active-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;
|
||||
/**
|
||||
* Component Styles
|
||||
*/
|
||||
:root {
|
||||
--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);
|
||||
}
|
||||
}
|
||||
|
||||
/* #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;
|
||||
}
|
||||
wa-card {
|
||||
--box-shadow: var(--wa-theme-active-shadow-pop-out);
|
||||
}
|
||||
|
||||
.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);
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
@container preview (min-width: 1100px) {
|
||||
.hero-background {
|
||||
height: 47rem;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
height: 30rem;
|
||||
}
|
||||
input[type='range'],
|
||||
wa-slider,
|
||||
wa-switch {
|
||||
--thumb-shadow: var(--wa-theme-active-shadow-pop-out);
|
||||
}
|
||||
|
||||
.hero .title {
|
||||
margin-block-start: 10%;
|
||||
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);
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
358
src/styles/themes/awesome.css
Normal file
358
src/styles/themes/awesome.css
Normal file
@@ -0,0 +1,358 @@
|
||||
@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');
|
||||
|
||||
:root,
|
||||
:host,
|
||||
.wa-theme-awesome-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-theme-awesome-dark,
|
||||
:is(:host-context(.wa-theme-awesome-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-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;
|
||||
}
|
||||
|
||||
/* #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-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 {
|
||||
box-shadow: none;
|
||||
transform: translateY(var(--wa-shadow-offset-y-s));
|
||||
}
|
||||
|
||||
.wa-theme-awesome-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);
|
||||
--border-style: none;
|
||||
}
|
||||
wa-card::part(header) {
|
||||
border-bottom: var(--border-width) dotted var(--border-color);
|
||||
}
|
||||
wa-card::part(footer) {
|
||||
border-top: var(--border-width) dotted var(--border-color);
|
||||
}
|
||||
|
||||
input[type='checkbox'],
|
||||
wa-checkbox {
|
||||
--checked-icon-color: var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
wa-radio-group > wa-radio-button {
|
||||
--background-color-active: var(--border-color);
|
||||
--border-color-active: var(--background-color-active);
|
||||
--box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--border-color);
|
||||
--label-color-active: var(--wa-color-surface-default);
|
||||
|
||||
&:active,
|
||||
&[checked] {
|
||||
--background-color: var(--border-color);
|
||||
--border-color: var(--wa-color-neutral-border-loud);
|
||||
--box-shadow: none;
|
||||
--label-color: var(--wa-color-surface-default);
|
||||
transform: translate(var(--wa-shadow-offset-x-s), var(--wa-shadow-offset-y-s));
|
||||
}
|
||||
}
|
||||
|
||||
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,7 +1,11 @@
|
||||
@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,
|
||||
@@ -9,145 +13,9 @@
|
||||
.wa-theme-classic-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 +75,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 +83,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 +97,6 @@
|
||||
/**
|
||||
* Transitions
|
||||
*/
|
||||
--wa-transition-easing: ease;
|
||||
|
||||
--wa-transition-slow: 250ms;
|
||||
--wa-transition-normal: 150ms;
|
||||
--wa-transition-fast: 50ms;
|
||||
@@ -237,12 +106,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);
|
||||
@@ -253,8 +117,9 @@
|
||||
}
|
||||
|
||||
.wa-theme-classic-dark,
|
||||
.wa-theme-classic-dark :host {
|
||||
:is(:host-context(.wa-theme-classic-dark)) {
|
||||
color-scheme: dark;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/**
|
||||
* Foundational Colors
|
||||
@@ -337,32 +202,25 @@
|
||||
}
|
||||
|
||||
/**
|
||||
* Component style overrides
|
||||
* Component Styles
|
||||
*/
|
||||
wa-avatar {
|
||||
--background-color: var(--wa-color-neutral-fill-loud);
|
||||
--text-color: var(--wa-color-neutral-on-loud);
|
||||
}
|
||||
|
||||
button,
|
||||
input:where([type='button'], [type='reset'], [type='submit']),
|
||||
wa-button,
|
||||
.wa-button,
|
||||
wa-radio-button {
|
||||
&[size='small'] {
|
||||
font-size: var(--wa-font-size-xs);
|
||||
}
|
||||
|
||||
&[size='medium'] {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
&[size='large'] {
|
||||
font-size: var(--wa-font-size-m);
|
||||
}
|
||||
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-resting-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);
|
||||
@@ -380,43 +238,22 @@ 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-size-smaller);
|
||||
|
||||
font-size: var(--wa-font-size-s);
|
||||
&: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);
|
||||
|
||||
&[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);
|
||||
&:not([appearance~='accent'], .wa-accent) {
|
||||
--border-color: var(--wa-color-fill-loud);
|
||||
}
|
||||
}
|
||||
|
||||
&[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);
|
||||
}
|
||||
|
||||
&[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);
|
||||
&:not([appearance~='accent'], .wa-accent) {
|
||||
--icon-color: var(--wa-color-fill-loud);
|
||||
--text-color: var(--wa-color-text-normal);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -434,20 +271,41 @@ wa-drawer {
|
||||
--spacing: var(--wa-space-l);
|
||||
}
|
||||
|
||||
wa-input:not([appearance='filled']),
|
||||
wa-select:not([appearance='filled']),
|
||||
wa-textarea:not([appearance='filled']) {
|
||||
: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;
|
||||
}
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
}
|
||||
|
||||
.wa-theme-default-dark,
|
||||
.wa-theme-default-dark :host {
|
||||
:is(:host-context(.wa-theme-migration-dark)) {
|
||||
color-scheme: dark;
|
||||
color: var(--wa-color-text-normal);
|
||||
}
|
||||
|
||||
@@ -49,7 +49,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);
|
||||
|
||||
@@ -43,6 +43,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,21 @@
|
||||
/**
|
||||
* Component Groups
|
||||
*/
|
||||
* Component Groups
|
||||
*/
|
||||
:where(:root, :host),
|
||||
.wa-theme-default-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 +23,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;
|
||||
@@ -55,7 +51,7 @@
|
||||
--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);
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
--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,5 +1,5 @@
|
||||
/**
|
||||
* Rounding tokens
|
||||
* Rounding
|
||||
*/
|
||||
:where(:root, :host) {
|
||||
/* A multiplier is provided to uniformly increase or decrease all border radii. */
|
||||
|
||||
@@ -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,199 @@
|
||||
@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,
|
||||
:host,
|
||||
.wa-theme-glassy-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 {
|
||||
:is(:host-context(.wa-theme-glassy-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);
|
||||
--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);
|
||||
}
|
||||
|
||||
.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;
|
||||
/**
|
||||
* Component Styles
|
||||
*/
|
||||
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-s);
|
||||
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-s));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* #region Custom styles */
|
||||
@container preview (min-width: 0) {
|
||||
wa-button[appearance='outlined'] {
|
||||
&[variant='brand'] {
|
||||
--border-color: var(--wa-color-brand-border-normal);
|
||||
}
|
||||
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 */;
|
||||
}
|
||||
|
||||
&[variant='success'] {
|
||||
--border-color: var(--wa-color-success-border-normal);
|
||||
}
|
||||
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 */;
|
||||
}
|
||||
|
||||
&[variant='neutral'] {
|
||||
--border-color: var(--wa-color-neutral-border-normal);
|
||||
}
|
||||
|
||||
&[variant='warning'] {
|
||||
--border-color: var(--wa-color-warning-border-normal);
|
||||
}
|
||||
|
||||
&[variant='danger'] {
|
||||
--border-color: var(--wa-color-danger-border-normal);
|
||||
}
|
||||
}
|
||||
|
||||
wa-rating {
|
||||
--symbol-size: var(--wa-font-size-m);
|
||||
--symbol-color-active: var(--wa-color-neutral-on-quiet);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
height: 25rem;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
margin: 8rem;
|
||||
}
|
||||
|
||||
.hero .title {
|
||||
text-align: right;
|
||||
color: var(--wa-color-text-normal);
|
||||
wa-textarea:not(:focus) {
|
||||
&:not([appearance='filled']):not([disabled]) {
|
||||
--box-shadow: var(--wa-shadow-s);
|
||||
}
|
||||
}
|
||||
|
||||
@container preview (min-width: 720px) {
|
||||
.strata.hero {
|
||||
padding-left: 25%;
|
||||
}
|
||||
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 */;
|
||||
}
|
||||
|
||||
/* #endregion */
|
||||
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 */;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,366 +1,143 @@
|
||||
@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,
|
||||
:host,
|
||||
.wa-theme-mellow-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 {
|
||||
:is(:host-context(.wa-theme-mellow-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: var(--wa-color-gray-05);
|
||||
--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 +145,84 @@
|
||||
--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);
|
||||
}
|
||||
|
||||
&[variant='success'] {
|
||||
--border-color: var(--wa-color-success-border-normal);
|
||||
}
|
||||
|
||||
&[variant='neutral'] {
|
||||
--border-color: var(--wa-color-neutral-border-normal);
|
||||
}
|
||||
|
||||
&[variant='warning'] {
|
||||
--border-color: var(--wa-color-warning-border-normal);
|
||||
}
|
||||
|
||||
&[variant='danger'] {
|
||||
--border-color: var(--wa-color-danger-border-normal);
|
||||
}
|
||||
/**
|
||||
* Component Styles
|
||||
*/
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
letter-spacing: calc(1em * -0.02);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
wa-card::part(header) {
|
||||
border-bottom: var(--border-width) dotted var(--border-color);
|
||||
}
|
||||
wa-card::part(footer) {
|
||||
border-top: var(--border-width) dotted var(--border-color);
|
||||
}
|
||||
|
||||
input[type='radio'],
|
||||
wa-radio {
|
||||
--checked-icon-scale: 0.6;
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
@@ -1,567 +1,264 @@
|
||||
@import '../depth/1_semiflat.css';
|
||||
@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');
|
||||
|
||||
:root,
|
||||
:host,
|
||||
.wa-theme-migration-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: #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-text-link: var(--wa-color-indigo-40);
|
||||
|
||||
--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-shadow: rgb(0 0 0 / 0.05);
|
||||
|
||||
--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-focus: var(--wa-color-indigo-50);
|
||||
|
||||
--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);
|
||||
--wa-color-mix-hover: var(--wa-color-gray-80) 20%;
|
||||
--wa-color-mix-active: var(--wa-color-gray-80) 10%;
|
||||
|
||||
/**
|
||||
* Foundational theme colors
|
||||
* Semantic 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-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-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-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), 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-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-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), 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-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-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), 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-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-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;
|
||||
--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-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: 600;
|
||||
--wa-font-weight-black: 700;
|
||||
--wa-font-weight-bold: 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);
|
||||
--wa-font-size-scale: 0.875;
|
||||
|
||||
/* 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;
|
||||
--wa-link-decoration-default: none;
|
||||
--wa-link-decoration-hover: none;
|
||||
|
||||
/**
|
||||
* 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;
|
||||
--wa-space-scale: 0.875;
|
||||
|
||||
/**
|
||||
* 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-width: 0.125rem;
|
||||
--wa-focus-ring-offset: 0;
|
||||
|
||||
/**
|
||||
* Links
|
||||
* Shadows
|
||||
*/
|
||||
--wa-link-decoration-default: none;
|
||||
--wa-link-decoration-hover: underline;
|
||||
--wa-shadow-offset-y-scale: 0.5;
|
||||
--wa-shadow-offset-blur-scale: 0.5;
|
||||
--wa-shadow-spread-scale: 0;
|
||||
|
||||
/**
|
||||
* Transitions
|
||||
* Component Groups
|
||||
*/
|
||||
--wa-transition-slow: 250ms;
|
||||
--wa-transition-normal: 150ms;
|
||||
--wa-transition-fast: 50ms;
|
||||
--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);
|
||||
|
||||
/**
|
||||
* 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 {
|
||||
:is(:host-context(.wa-theme-migration-dark)) {
|
||||
color-scheme: dark;
|
||||
color: var(--wa-color-text-normal);
|
||||
|
||||
/**
|
||||
* Base theme colors
|
||||
* Foundational 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-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: 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-text-quiet: var(--wa-color-gray-60);
|
||||
--wa-color-text-link: var(--wa-color-indigo-70);
|
||||
|
||||
--wa-color-focus: var(--wa-color-primary-60);
|
||||
--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: rgb(0 0 0 / 0.2);
|
||||
|
||||
--wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-scale) * 16% + 40%), transparent);
|
||||
--wa-color-focus: var(--wa-color-indigo-60);
|
||||
|
||||
--wa-color-mix-hover: var(--wa-color-base-70) 20%;
|
||||
--wa-color-mix-active: var(--wa-color-base-70) 10%;
|
||||
--wa-color-mix-hover: var(--wa-color-gray-70) 20%;
|
||||
--wa-color-mix-active: var(--wa-color-gray-70) 10%;
|
||||
|
||||
/**
|
||||
* Semantic theme colors
|
||||
* Semantic 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-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-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-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), transparent);
|
||||
--wa-color-success-on-loud: white;
|
||||
--wa-color-success-on-normal: var(--wa-color-green-70);
|
||||
--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-loud: var(--wa-color-yellow-50);
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
|
||||
--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), transparent);
|
||||
--wa-color-warning-on-loud: white;
|
||||
--wa-color-warning-on-normal: var(--wa-color-yellow-70);
|
||||
--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-loud: var(--wa-color-red-50);
|
||||
--wa-color-danger-fill-quiet: var(--wa-color-red-10);
|
||||
--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), transparent);
|
||||
--wa-color-danger-on-loud: white;
|
||||
--wa-color-danger-on-normal: var(--wa-color-red-70);
|
||||
--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-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);
|
||||
--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);
|
||||
}
|
||||
|
||||
/* #region Custom Styles */
|
||||
@container preview (min-width: 0) {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
letter-spacing: calc(1em * -0.03);
|
||||
}
|
||||
/**
|
||||
* Component Styles
|
||||
*/
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
letter-spacing: calc(1em * -0.03);
|
||||
}
|
||||
|
||||
.project-header {
|
||||
background: var(--wa-color-surface-default);
|
||||
}
|
||||
wa-avatar {
|
||||
--background-color: var(--wa-color-neutral-fill-quiet);
|
||||
--text-color: var(--wa-color-neutral-on-quiet);
|
||||
}
|
||||
|
||||
.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);
|
||||
a,
|
||||
wa-badge,
|
||||
wa-tag {
|
||||
font-weight: var(--wa-font-weight-semibold);
|
||||
}
|
||||
|
||||
& .title {
|
||||
padding-block: calc(var(--wa-space-3xl) * 2) calc(var(--wa-space-3xl) * 10);
|
||||
: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);
|
||||
}
|
||||
|
||||
& .hero-title {
|
||||
font-size: calc((var(--wa-font-size-4xl) * 1.125) * 1.125);
|
||||
margin-block: 0 var(--wa-space-3xl);
|
||||
}
|
||||
}
|
||||
}
|
||||
wa-callout {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
|
||||
.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));
|
||||
&::part(icon) {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,4 +1,12 @@
|
||||
@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');
|
||||
|
||||
@@ -6,194 +14,65 @@
|
||||
:host,
|
||||
.wa-theme-premium-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,514 +83,194 @@
|
||||
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 {
|
||||
:is(:host-context(.wa-theme-premium-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);
|
||||
/**
|
||||
* Component Styles
|
||||
*/
|
||||
wa-rating {
|
||||
--symbol-size: var(--wa-font-size-l);
|
||||
--symbol-color-active: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--background: transparent;
|
||||
--border-color: var(--wa-color-neutral-border-normal);
|
||||
--thumb-color: var(--border-color);
|
||||
--thumb-color-checked: var(--wa-color-brand-fill-quiet);
|
||||
--thumb-size: 1em;
|
||||
--height: 1.5em;
|
||||
--width: calc(var(--thumb-size) * 2.5);
|
||||
}
|
||||
|
||||
wa-button {
|
||||
--box-shadow: inset 0 0.03125rem 0 0 rgb(255 255 255 / 0.5), inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1),
|
||||
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2), var(--wa-shadow-s);
|
||||
}
|
||||
|
||||
wa-button[appearance='outlined'] {
|
||||
--box-shadow: none;
|
||||
}
|
||||
|
||||
wa-card {
|
||||
--border-radius: var(--wa-border-radius-l);
|
||||
}
|
||||
|
||||
wa-alert {
|
||||
font-size: var(--wa-font-size-s);
|
||||
--border-color: var(--background);
|
||||
}
|
||||
|
||||
wa-carousel {
|
||||
--pagination-color-active: var(--wa-color-brand-fill-loud);
|
||||
--pagination-color: var(--wa-color-neutral-fill-normal);
|
||||
}
|
||||
|
||||
wa-badge,
|
||||
wa-button::part(label),
|
||||
wa-tag {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
wa-badge,
|
||||
wa-tag {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
&:not(.wa-theme-premium-dark) wa-alert {
|
||||
&[variant='brand'] {
|
||||
--background: var(--wa-color-primary-95);
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
&[variant='success'] {
|
||||
--background: var(--wa-color-green-95);
|
||||
}
|
||||
|
||||
wa-rating {
|
||||
--symbol-size: var(--wa-font-size-l);
|
||||
--symbol-color-active: var(--wa-color-text-quiet);
|
||||
&[variant='warning'] {
|
||||
--background: var(--wa-color-yellow-95);
|
||||
}
|
||||
|
||||
wa-switch {
|
||||
--background: transparent;
|
||||
--border-color: var(--wa-color-neutral-border-normal);
|
||||
--thumb-color: var(--border-color);
|
||||
--thumb-color-checked: var(--wa-color-brand-fill-quiet);
|
||||
--thumb-size: 1em;
|
||||
--height: 1.5em;
|
||||
--width: calc(var(--thumb-size) * 2.5);
|
||||
}
|
||||
|
||||
wa-button {
|
||||
--box-shadow: inset 0 0.03125rem 0 0 rgb(255 255 255 / 0.5), inset 0 0.125rem 0 0 rgb(255 255 255 / 0.1),
|
||||
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2), var(--wa-shadow-s);
|
||||
}
|
||||
|
||||
wa-button[appearance='outlined'] {
|
||||
--box-shadow: none;
|
||||
}
|
||||
|
||||
wa-card {
|
||||
--border-radius: var(--wa-border-radius-l);
|
||||
}
|
||||
|
||||
wa-alert {
|
||||
font-size: var(--wa-font-size-s);
|
||||
--border-color: var(--background);
|
||||
}
|
||||
|
||||
wa-carousel {
|
||||
--pagination-color-activated: var(--wa-color-brand-fill-loud);
|
||||
--pagination-color-resting: var(--wa-color-neutral-fill-normal);
|
||||
}
|
||||
|
||||
wa-badge,
|
||||
wa-button::part(label),
|
||||
wa-tag {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
wa-badge,
|
||||
wa-tag {
|
||||
--border-width: 0;
|
||||
}
|
||||
|
||||
&:not(.wa-theme-premium-dark) wa-alert {
|
||||
&[variant='brand'] {
|
||||
--background: var(--wa-color-primary-95);
|
||||
}
|
||||
&[variant='success'] {
|
||||
--background: var(--wa-color-green-95);
|
||||
}
|
||||
&[variant='warning'] {
|
||||
--background: var(--wa-color-yellow-95);
|
||||
}
|
||||
&[variant='danger'] {
|
||||
--background: var(--wa-color-red-95);
|
||||
}
|
||||
}
|
||||
|
||||
wa-badge {
|
||||
&[variant='brand'] {
|
||||
--background: var(--wa-color-primary-80);
|
||||
--text-color: var(--wa-color-primary-20);
|
||||
}
|
||||
&[variant='success'] {
|
||||
--background: var(--wa-color-green-80);
|
||||
--text-color: var(--wa-color-green-20);
|
||||
}
|
||||
&[variant='warning'] {
|
||||
--background: var(--wa-color-yellow-80);
|
||||
--text-color: var(--wa-color-yellow-20);
|
||||
}
|
||||
&[variant='danger'] {
|
||||
--background: var(--wa-color-red-80);
|
||||
--text-color: var(--wa-color-red-20);
|
||||
}
|
||||
&[variant='neutral'] {
|
||||
--background: white;
|
||||
--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);
|
||||
}
|
||||
}
|
||||
&[variant='danger'] {
|
||||
--background: var(--wa-color-red-95);
|
||||
}
|
||||
}
|
||||
|
||||
/* 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%;
|
||||
wa-badge {
|
||||
&[variant='brand'] {
|
||||
--background: var(--wa-color-primary-80);
|
||||
--text-color: var(--wa-color-primary-20);
|
||||
}
|
||||
|
||||
.strata.products {
|
||||
margin-top: -25rem;
|
||||
padding-top: 10rem;
|
||||
background: linear-gradient(0deg, var(--wa-color-surface-lowered) 60%, rgba(255, 255, 255, 0) 100%);
|
||||
&[variant='success'] {
|
||||
--background: var(--wa-color-green-80);
|
||||
--text-color: var(--wa-color-green-20);
|
||||
}
|
||||
&[variant='warning'] {
|
||||
--background: var(--wa-color-yellow-80);
|
||||
--text-color: var(--wa-color-yellow-20);
|
||||
}
|
||||
&[variant='danger'] {
|
||||
--background: var(--wa-color-red-80);
|
||||
--text-color: var(--wa-color-red-20);
|
||||
}
|
||||
&[variant='neutral'] {
|
||||
--background: white;
|
||||
--text-color: var(--wa-color-base-30);
|
||||
}
|
||||
}
|
||||
|
||||
/* #endregion */
|
||||
|
||||
Reference in New Issue
Block a user