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

Merge branch 'next' into applied-styles

Browse Source
This commit is contained in:
Cory LaViska
2023-09-18 15:17:15 -04:00
parent 07ca5a45ae 88a8173178
commit 8e09db9d40
15 changed files with 462 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
docs/_includes/default.njk
View File

@@ -38,6 +38,15 @@
<link rel="stylesheet" href="/dist/themes/default.css" />
<script type="module" src="/dist/autoloader.js"></script>
{# Set the initial theme and menu states here to prevent flashing #}
<script>
(() => {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const theme = localStorage.getItem('theme') || 'auto';
document.documentElement.classList.toggle('wa-theme-default-dark', theme === 'dark' || (theme === 'auto' && prefersDark));
})();
</script>
{# Web Fonts #}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

11
docs/_includes/sidebar.njk
View File

@@ -4,6 +4,17 @@
<ul>
<li><a href="/experimental/style-guide">Style Guide</a></li>
<li><a href="/experimental/themer">Themer</a></li>
<li style="margin-top: .5rem;"><wa-switch id="theme-toggle">Dark mode</wa-switch></li>
<script type="module">
// Temporary dark toggle
const toggle = document.getElementById('theme-toggle');
toggle.checked = document.documentElement.classList.contains('wa-theme-default-dark');
toggle.addEventListener('wa-change', () => {
document.documentElement.classList.toggle('wa-theme-default-dark');
localStorage.setItem('theme', toggle.checked ? 'dark' : 'light');
});
</script>
</ul>
</li>
<li>

8
docs/assets/scripts/code-previews.js
View File

@@ -166,9 +166,6 @@
const htmlExample = codeBlock.querySelector('.code-preview__source--html > pre > code')?.textContent;
const reactExample = codeBlock.querySelector('.code-preview__source--react > pre > code')?.textContent;
const isReact = flavor === 'react' && typeof reactExample === 'string';
const theme = document.documentElement.classList.contains('wa-theme-dark') ? 'dark' : 'light';
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const isDark = theme === 'dark' || (theme === 'auto' && prefersDark);
const editors = isReact ? '0010' : '1000';
let htmlTemplate = '';
let jsTemplate = '';
@@ -204,9 +201,7 @@
// CSS templates
cssTemplate =
`@import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${waVersion}/${cdndir}/themes/${
isDark ? 'dark' : 'light'
}.css';\n` +
`@import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${waVersion}/${cdndir}/themes/default.css';\n` +
'\n' +
'body {\n' +
' font: var(--wa-font-size-root) sans-serif;\n' +
@@ -222,7 +217,6 @@
tags: ['web awesome', 'web components'],
editors,
head: `<meta name="viewport" content="width=device-width">`,
html_classes: `wa-theme-${isDark ? 'dark' : 'light'}`,
css_external: ``,
js_external: ``,
js_module: true,

12
docs/assets/styles/docs.css
View File

@@ -32,6 +32,18 @@ html:not(.wa-theme-dark) .only-dark {
white-space: nowrap;
}
.visually-hidden:not(:focus-within) {
position: absolute !important;
width: 1px !important;
height: 1px !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
border: none !important;
overflow: hidden !important;
white-space: nowrap !important;
padding: 0 !important;
}
@media screen and (max-width: 900px) {
:root {
--docs-content-padding: 1rem;

4
docs/pages/getting-started/installation.md
View File

@@ -43,7 +43,7 @@ The traditional CDN loader registers all Web Awesome elements up front. Note tha
### Dark Theme
The code above will load the light theme. If you want to use the [dark theme](/getting-started/themes#dark-theme) instead, update the stylesheet as shown below and add `<html class="wa-theme-dark">` to your page.
The code above will load the light theme. If you want to use the [dark theme](/getting-started/themes#dark-theme) instead, update the stylesheet as shown below and add `<html class="wa-theme-default-dark">` to your page.
<!-- prettier-ignore -->
```html
@@ -64,7 +64,7 @@ If you want to load the light or dark theme based on the user's `prefers-color-s
rel="stylesheet"
media="(prefers-color-scheme:dark)"
href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/dark.css"
onload="document.documentElement.classList.add('wa-theme-dark');"
onload="document.documentElement.classList.add('wa-theme-default-dark');"
/>
```

14
docs/pages/getting-started/themes.md
View File

@@ -16,7 +16,7 @@ For component developers, built-in themes are also available as JavaScript modul
## Theme Basics
All themes are scoped to classes using the `sl-theme-{name}` convention, where `{name}` is a lowercase, hyphen-delimited value representing the name of the theme. The included light and dark themes use `wa-theme-light` and `wa-theme-dark`, respectively. A custom theme called "Purple Power", for example, would use a class called `sl-theme-purple-power`
All themes are scoped to classes using the `sl-theme-{name}` convention, where `{name}` is a lowercase, hyphen-delimited value representing the name of the theme. The included light and dark themes use `wa-theme-default-light` and `wa-theme-default-dark`, respectively. A custom theme called "Purple Power", for example, would use a class called `sl-theme-purple-power`
All selectors must be scoped to the theme's class to ensure interoperability with other themes. You should also scope them to `:host` so they can be imported and applied to custom element shadow roots.
@@ -32,7 +32,7 @@ All selectors must be scoped to the theme's class to ensure interoperability wit
To activate a theme, import it and apply the theme's class to the `<html>` element. This example imports and activates the built-in dark theme.
```html
<html class="wa-theme-dark">
<html class="wa-theme-default-dark">
<head>
<link rel="stylesheet" href="path/to/shoelace/%NPMDIR%/themes/dark.css" />
</head>
@@ -59,7 +59,7 @@ You can activate themes on various containers throughout the page. This example
</head>
<body>
<nav class="wa-theme-dark">
<nav class="wa-theme-default-dark">
<!-- dark-themed sidebar -->
</nav>
@@ -83,7 +83,7 @@ If you're customizing the light theme, you should scope your styles to the follo
```css
:root,
:host,
.wa-theme-light {
.wa-theme-default-light {
/* your custom styles here */
}
```
@@ -92,7 +92,7 @@ If you're customizing the dark theme, you should scope your styles to the follow
```css
:host,
.wa-theme-dark {
.wa-theme-default-dark {
/* your custom styles here */
}
```
@@ -133,10 +133,10 @@ To install the dark theme, add the following to the `<head>` section of your pag
/>
```
To activate the theme, apply the `wa-theme-dark` class to the `<html>` element.
To activate the theme, apply the `wa-theme-default-dark` class to the `<html>` element.
```html
<html class="wa-theme-dark">
<html class="wa-theme-default-dark">
...
</html>
```

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

@@ -23,6 +23,7 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
- Fixed a bug in the autoloader causing it to register non-Shoelace elements [#1563]
- Fixed a bug in `<wa-switch>` that resulted in improper spacing between the label and the required asterisk [#1540]
- Removed error when a missing popup anchor is provided [#1548]
- Updated `@ctrl/tinycolor` to 4.0.1 [#1542]
- Updated Bootstrap Icons to 1.11.0

14
package-lock.json generated
View File

@@ -11,7 +11,7 @@
"dependencies": {
"@ctrl/tinycolor": "^4.0.1",
"@floating-ui/dom": "^1.2.1",
"@lit-labs/react": "^2.0.1",
"@lit-labs/react": "^2.0.3",
"@shoelace-style/animations": "^1.1.0",
"@shoelace-style/localize": "^3.1.1",
"composed-offset-position": "^0.0.4",
@@ -1470,9 +1470,9 @@
}
},
"node_modules/@lit-labs/react": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-2.0.1.tgz",
"integrity": "sha512-Nj+XB3HamqaWefN91lpFPJaqjJ78XzGkPWCedB4jyH22GBFEenpE9A/h8B/2dnIGXtNtd9D/RFpUdQ/dBtWFqA==",
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-2.0.3.tgz",
"integrity": "sha512-lSvWbTrbxWqYv/iiOwbAEJfFZrKjO/QjJ4IEXhg43sdD5fNFz4wRXpVsntfVn4DnxpQd+NVRnrsF2USgK0XCTw==",
"peerDependencies": {
"@types/react": "17 || 18"
}
@@ -18286,9 +18286,9 @@
}
},
"@lit-labs/react": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-2.0.1.tgz",
"integrity": "sha512-Nj+XB3HamqaWefN91lpFPJaqjJ78XzGkPWCedB4jyH22GBFEenpE9A/h8B/2dnIGXtNtd9D/RFpUdQ/dBtWFqA==",
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-2.0.3.tgz",
"integrity": "sha512-lSvWbTrbxWqYv/iiOwbAEJfFZrKjO/QjJ4IEXhg43sdD5fNFz4wRXpVsntfVn4DnxpQd+NVRnrsF2USgK0XCTw==",
"requires": {}
},
"@lit-labs/ssr-dom-shim": {

1
src/components/details/details.component.ts
View File

@@ -87,6 +87,7 @@ export default class WaDetails extends WebAwesomeElement {
}
disconnectedCallback() {
super.disconnectedCallback();
this.detailsObserver.disconnect();
}

1
src/components/mutation-observer/mutation-observer.component.ts
View File

@@ -52,6 +52,7 @@ export default class WaMutationObserver extends WebAwesomeElement {
}
disconnectedCallback() {
super.disconnectedCallback();
this.stopObserver();
}

10
src/components/popup/popup.component.ts
View File

@@ -198,6 +198,7 @@ export default class WaPopup extends WebAwesomeElement {
}
disconnectedCallback() {
super.disconnectedCallback();
this.stop();
}
@@ -246,13 +247,10 @@ export default class WaPopup extends WebAwesomeElement {
this.anchorEl = this.anchorEl.assignedElements({ flatten: true })[0] as HTMLElement;
}
if (!this.anchorEl) {
throw new Error(
'Invalid anchor element: no anchor could be found using the anchor slot or the anchor attribute.'
);
// If the anchor is valid, start it up
if (this.anchorEl) {
this.start();
}
this.start();
}
private start() {

2
src/components/switch/switch.styles.ts
View File

@@ -77,7 +77,7 @@ export default css`
}
/* Focus */
.switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
.switch:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}

1
src/components/tab-group/tab-group.component.ts
View File

@@ -117,6 +117,7 @@ export default class WaTabGroup extends WebAwesomeElement {
}
disconnectedCallback() {
super.disconnectedCallback();
this.mutationObserver.disconnect();
this.resizeObserver.unobserve(this.nav);
}

2
src/themes/default.css
View File

@@ -1,6 +1,6 @@
:root,
:host,
.wa-theme-default {
.wa-theme-default-light {
color-scheme: light;
/**

403
src/themes/mellow.css Normal file
View File

@@ -0,0 +1,403 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Lora:wght@100..900&display=swap');
:root,
:host,
.wa-theme-mellow {
color-scheme: light;
/**
* Primitives
*/
--wa-color-red-95: #fbf0ed;
--wa-color-red-90: #f7e1db;
--wa-color-red-80: #eebfb3;
--wa-color-red-70: #e69d8b;
--wa-color-red-60: #dd7961;
--wa-color-red-50: #b55c47;
--wa-color-red-40: #884535;
--wa-color-red-30: #6b372a;
--wa-color-red-20: #4e281f;
--wa-color-red-10: #2e1812;
--wa-color-yellow-95: #f6f2e8;
--wa-color-yellow-90: #ede5d2;
--wa-color-yellow-80: #dac89f;
--wa-color-yellow-70: #c9ab6f;
--wa-color-yellow-60: #b78f40;
--wa-color-yellow-50: #94702b;
--wa-color-yellow-40: #705320;
--wa-color-yellow-30: #59411a;
--wa-color-yellow-20: #412f13;
--wa-color-yellow-10: #261c0b;
--wa-color-green-95: #ecf4ef;
--wa-color-green-90: #d9eae0;
--wa-color-green-80: #afd2bd;
--wa-color-green-70: #87ba9b;
--wa-color-green-60: #5ea379;
--wa-color-green-50: #45825d;
--wa-color-green-40: #346246;
--wa-color-green-30: #294d37;
--wa-color-green-20: #1e3828;
--wa-color-green-10: #112117;
--wa-color-blue-95: #edf3f9;
--wa-color-blue-90: #dbe7f3;
--wa-color-blue-80: #b3cce6;
--wa-color-blue-70: #8cb3da;
--wa-color-blue-60: #6599cd;
--wa-color-blue-50: #4c79a6;
--wa-color-blue-40: #395b7d;
--wa-color-blue-30: #2d4762;
--wa-color-blue-20: #213448;
--wa-color-blue-10: #131f2a;
--wa-color-neutral-95: #f0f3f1;
--wa-color-neutral-90: #e2e7e3;
--wa-color-neutral-80: #c2ccc5;
--wa-color-neutral-70: #a4b3a8;
--wa-color-neutral-60: #869a8c;
--wa-color-neutral-50: #697a6e;
--wa-color-neutral-40: #4e5c52;
--wa-color-neutral-30: #3e4840;
--wa-color-neutral-20: #2d342f;
--wa-color-neutral-10: #1a1f1b;
--wa-color-white: white;
--wa-color-black: black;
/**
* App
*/
--wa-color-surface-raised: var(--wa-color-white);
--wa-color-surface-default: var(--wa-color-white);
--wa-color-surface-lowered: var(--wa-color-neutral-95);
--wa-color-surface-outline: var(--wa-color-neutral-90);
--wa-color-text-normal: var(--wa-color-neutral-30);
--wa-color-text-quiet: var(--wa-color-neutral-50);
--wa-color-text-inverse: var(--wa-color-white);
--wa-color-text-link: var(--wa-color-blue-50);
--wa-color-selection-background: var(--wa-color-green-80);
--wa-color-selection-text: var(--wa-color-black);
--wa-color-focus: var(--wa-color-green-60); /* semantic variants? */
--wa-color-tint-white: rgb(255 255 255 / 0.2);
--wa-color-tint-black: rgb(0 0 0 / 0.2);
--wa-color-tint-hover: black 8%;
--wa-color-tint-active: black 16%;
--wa-color-overlay: color-mix(in oklab, var(--wa-color-neutral-10) 25%, transparent);
--wa-color-shadow: color-mix(in oklab, var(--wa-color-neutral-10) 6%, transparent);
/**
* Semantic color variants
*/
/* TODO: Add comments for semantic color tokens and usage expectations */
/* CONSIDER: Change -alt naming to -tint or -shade? */
--wa-color-brand-fill-vivid: var(--wa-color-green-50);
--wa-color-brand-fill-vivid-alt: var(--wa-color-green-40);
--wa-color-brand-fill-muted: var(--wa-color-green-95);
--wa-color-brand-fill-muted-alt: var(--wa-color-green-90);
--wa-color-brand-outline-vivid: var(--wa-color-green-60);
--wa-color-brand-outline-vivid-alt: var(--wa-color-green-50);
--wa-color-brand-outline-muted: var(--wa-color-green-90);
--wa-color-brand-outline-muted-alt: var(--wa-color-green-80);
--wa-color-brand-text-on-vivid: var(--wa-color-text-inverse);
--wa-color-brand-text-on-muted: var(--wa-color-green-40);
--wa-color-brand-text-on-surface: var(--wa-color-green-50);
--wa-color-success-fill-vivid: var(--wa-color-green-50);
--wa-color-success-fill-vivid-alt: var(--wa-color-green-40);
--wa-color-success-fill-muted: var(--wa-color-green-95);
--wa-color-success-fill-muted-alt: var(--wa-color-green-90);
--wa-color-success-outline-vivid: var(--wa-color-green-60);
--wa-color-success-outline-vivid-alt: var(--wa-color-green-50);
--wa-color-success-outline-muted: var(--wa-color-green-90);
--wa-color-success-outline-muted-alt: var(--wa-color-green-80);
--wa-color-success-text-on-vivid: var(--wa-color-text-inverse);
--wa-color-success-text-on-muted: var(--wa-color-green-40);
--wa-color-success-text-on-surface: var(--wa-color-green-50);
--wa-color-warning-fill-vivid: var(--wa-color-yellow-50);
--wa-color-warning-fill-vivid-alt: var(--wa-color-yellow-40);
--wa-color-warning-fill-muted: var(--wa-color-yellow-95);
--wa-color-warning-fill-muted-alt: var(--wa-color-yellow-90);
--wa-color-warning-outline-vivid: var(--wa-color-yellow-60);
--wa-color-warning-outline-vivid-alt: var(--wa-color-yellow-50);
--wa-color-warning-outline-muted: var(--wa-color-yellow-90);
--wa-color-warning-outline-muted-alt: var(--wa-color-yellow-80);
--wa-color-warning-text-on-vivid: var(--wa-color-text-inverse);
--wa-color-warning-text-on-muted: var(--wa-color-yellow-40);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
--wa-color-danger-fill-vivid: var(--wa-color-red-50);
--wa-color-danger-fill-vivid-alt: var(--wa-color-red-40);
--wa-color-danger-fill-muted: var(--wa-color-red-95);
--wa-color-danger-fill-muted-alt: var(--wa-color-red-90);
--wa-color-danger-outline-vivid: var(--wa-color-red-60);
--wa-color-danger-outline-vivid-alt: var(--wa-color-red-50);
--wa-color-danger-outline-muted: var(--wa-color-red-90);
--wa-color-danger-outline-muted-alt: var(--wa-color-red-80);
--wa-color-danger-text-on-vivid: var(--wa-color-text-inverse);
--wa-color-danger-text-on-muted: var(--wa-color-red-40);
--wa-color-danger-text-on-surface: var(--wa-color-red-50);
--wa-color-neutral-fill-vivid: var(--wa-color-neutral-50);
--wa-color-neutral-fill-vivid-alt: var(--wa-color-neutral-40);
--wa-color-neutral-fill-muted: var(--wa-color-neutral-95);
--wa-color-neutral-fill-muted-alt: var(--wa-color-neutral-90);
--wa-color-neutral-outline-vivid: var(--wa-color-neutral-60);
--wa-color-neutral-outline-vivid-alt: var(--wa-color-neutral-50);
--wa-color-neutral-outline-muted: var(--wa-color-neutral-90);
--wa-color-neutral-outline-muted-alt: var(--wa-color-neutral-80);
--wa-color-neutral-text-on-vivid: var(--wa-color-text-inverse);
--wa-color-neutral-text-on-muted: var(--wa-color-neutral-40);
--wa-color-neutral-text-on-surface: var(--wa-color-neutral-50);
/**
* Typography
*/
--wa-font-family-heading: 'Lora', serif;
--wa-font-family-body: 'Inter', 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-medium: 500;
--wa-font-weight-heavy: 600;
--wa-font-weight-heading: var(--wa-font-weight-heavy);
--wa-font-weight-body: var(--wa-font-weight-normal);
--wa-font-weight-action: var(--wa-font-weight-medium);
--wa-font-size-root: 16px;
--wa-font-size-2xs: 0.625rem; /* 10 */
--wa-font-size-xs: 0.75rem; /* 12 */
--wa-font-size-s: 0.875rem; /* 14 */
--wa-font-size-m: 1rem; /* 16 */
--wa-font-size-l: 1.375rem; /* 22 */
--wa-font-size-xl: 1.875rem; /* 30 */
--wa-font-size-2xl: 2.625rem; /* 42 */
--wa-font-line-height-compact: 1.25;
--wa-font-line-height-regular: 1.625;
--wa-font-line-height-comfortable: 2;
/**
* Spacing
*/
--wa-space-3xs: 0.125rem; /* 2 */
--wa-space-2xs: 0.25rem; /* 4 */
--wa-space-xs: 0.5rem; /* 8 */
--wa-space-s: 0.75rem; /* 12 */
--wa-space-m: 1rem; /* 16 */
--wa-space-l: 1.25rem; /* 20 */
--wa-space-xl: 1.5rem; /* 24 */
--wa-space-2xl: 2rem; /* 32 */
--wa-space-3xl: 3rem; /* 48 */
--wa-space-square-xs: var(--wa-space-xs);
--wa-space-square-s: var(--wa-space-s);
--wa-space-square-m: var(--wa-space-m);
--wa-space-square-l: var(--wa-space-l);
--wa-space-square-xl: var(--wa-space-xl);
--wa-space-stretch-xs: var(--wa-space-xs) var(--wa-space-m);
--wa-space-stretch-s: var(--wa-space-s) var(--wa-space-l);
--wa-space-stretch-m: var(--wa-space-m) var(--wa-space-xl);
--wa-space-stretch-l: var(--wa-space-l) var(--wa-space-2xl);
--wa-space-stretch-xl: var(--wa-space-xl) var(--wa-space-3xl);
--wa-space-squish-xs: var(--wa-space-xs) var(--wa-space-3xs);
--wa-space-squish-s: var(--wa-space-s) var(--wa-space-2xs);
--wa-space-squish-m: var(--wa-space-m) var(--wa-space-xs);
--wa-space-squish-l: var(--wa-space-l) var(--wa-space-s);
--wa-space-squish-xl: var(--wa-space-xl) var(--wa-space-m);
/**
* Borders & corners
*/
--wa-border-width-thin: 0.0625rem; /* 1px */
--wa-border-width-medium: calc(var(--wa-border-width-thin) * 2);
--wa-border-width-thick: calc(var(--wa-border-width-thin) * 3);
--wa-border-style: solid;
--wa-corners-half: calc(var(--wa-corners-1x) * 0.5);
--wa-corners-1x: 0.125rem;
--wa-corners-2x: calc(var(--wa-corners-1x) * 2);
--wa-corners-3x: calc(var(--wa-corners-1x) * 3);
--wa-corners-pill: 9999px;
--wa-corners-circle: 50%;
--wa-corners-sharp: 0;
/**
* Focus
*/
--wa-focus-ring: solid var(--wa-border-width-thick) var(--wa-color-focus);
--wa-focus-ring-offset: 0.0625rem; /* 1px */
/**
* Shadows
*/
--wa-shadow-inset: none;
--wa-shadow-level-0: none;
--wa-shadow-level-1: 0 0.0625rem 0 var(--wa-color-shadow);
--wa-shadow-level-2: 0 0.125rem 0.125rem var(--wa-color-shadow);
--wa-shadow-level-3: 0 0.25rem 0.25rem var(--wa-color-shadow);
/**
* Z-index
*/
--wa-z-index-drawer: 700;
--wa-z-index-dialog: 800;
--wa-z-index-dropdown: 900;
--wa-z-index-alert-group: 950;
--wa-z-index-tooltip: 1000;
/**
* Transitions
*/
--wa-transition-normal: 250ms;
--wa-transition-fast: 150ms;
--wa-transition-faster: 50ms;
/**
* Form controls
*/
--wa-form-controls-background: var(--wa-color-surface-default);
--wa-form-controls-border-style: var(--wa-border-style);
--wa-form-controls-border-width: var(--wa-border-width-thin);
--wa-form-controls-corners: var(--wa-corners-1x);
--wa-form-controls-border-color-resting: var(--wa-color-neutral-outline-muted-alt);
--wa-form-controls-border-color-activated: var(--wa-color-brand-outline-vivid);
--wa-form-controls-text-color: var(--wa-color-text-normal);
--wa-form-controls-value-line-height: var(--wa-font-height-compact);
--wa-form-controls-padding: var(--wa-space-square-s);
--wa-form-controls-placeholder-color: var(--wa-color-neutral-60);
/**
* Panels
*/
--wa-panel-border-width: var(--wa-border-width-thin);
--wa-panel-corners: var(--wa-corners-2x);
/**
* From 2.x
*/
--wa-form-controls-height-s: 2rem;
--wa-form-controls-height-m: 2.75rem;
--wa-form-controls-height-l: 3.5rem;
--wa-form-control-toggle-size-s: 0.875rem;
--wa-form-control-toggle-size-m: 1.125rem;
--wa-form-control-toggle-size-l: 1.375rem;
--wa-form-controls-required-content: '*';
--wa-form-controls-required-content-color: inherit;
--wa-form-controls-required-content-offset: -0.1em;
--wa-tooltip-arrow-size: 0.375rem;
}
:root.wa-theme-mellow-dark {
color-scheme: dark;
/**
* App
*/
--wa-color-surface-raised: var(--wa-color-neutral-10);
--wa-color-surface-default: var(--wa-color-neutral-10);
--wa-color-surface-lowered: var(--wa-color-black);
--wa-color-surface-outline: var(--wa-color-neutral-20);
--wa-color-text-normal: var(--wa-color-neutral-80);
--wa-color-text-quiet: var(--wa-color-neutral-60);
--wa-color-text-inverse: var(--wa-color-neutral-10);
--wa-color-text-link: var(--wa-color-blue-60);
--wa-color-selection-background: var(--wa-color-green-40);
--wa-color-selection-text: var(--wa-color-white);
--wa-color-focus: var(--wa-color-blue-50);
--wa-color-tint-white: rgb(255 255 255 / 0.2);
--wa-color-tint-black: rgb(0 0 0 / 0.2);
--wa-color-tint-hover: black 8%;
--wa-color-tint-active: black 16%;
--wa-color-overlay: color-mix(in oklab, var(--wa-color-black) 50%, transparent);
--wa-color-shadow: color-mix(in oklab, var(--wa-color-black) 20%, transparent);
/**
* Semantic color variants
*/
--wa-color-brand-fill-vivid: var(--wa-color-green-50);
--wa-color-brand-fill-vivid-alt: var(--wa-color-green-30);
--wa-color-brand-fill-muted: var(--wa-color-green-10);
--wa-color-brand-fill-muted-alt: var(--wa-color-green-20);
--wa-color-brand-outline-vivid: var(--wa-color-green-50);
--wa-color-brand-outline-vivid-alt: var(--wa-color-green-40);
--wa-color-brand-outline-muted: var(--wa-color-green-20);
--wa-color-brand-outline-muted-alt: var(--wa-color-green-30);
--wa-color-brand-text-on-vivid: var(--wa-color-white);
--wa-color-brand-text-on-muted: var(--wa-color-green-70);
--wa-color-brand-text-on-surface: var(--wa-color-green-60);
--wa-color-success-fill-vivid: var(--wa-color-green-50);
--wa-color-success-fill-vivid-alt: var(--wa-color-green-30);
--wa-color-success-fill-muted: var(--wa-color-green-10);
--wa-color-success-fill-muted-alt: var(--wa-color-green-20);
--wa-color-success-outline-vivid: var(--wa-color-green-50);
--wa-color-success-outline-vivid-alt: var(--wa-color-green-40);
--wa-color-success-outline-muted: var(--wa-color-green-20);
--wa-color-success-outline-muted-alt: var(--wa-color-green-30);
--wa-color-success-text-on-vivid: var(--wa-color-white);
--wa-color-success-text-on-muted: var(--wa-color-green-70);
--wa-color-success-text-on-surface: var(--wa-color-green-60);
--wa-color-warning-fill-vivid: var(--wa-color-yellow-50);
--wa-color-warning-fill-vivid-alt: var(--wa-color-yellow-30);
--wa-color-warning-fill-muted: var(--wa-color-yellow-10);
--wa-color-warning-fill-muted-alt: var(--wa-color-yellow-20);
--wa-color-warning-outline-vivid: var(--wa-color-yellow-50);
--wa-color-warning-outline-vivid-alt: var(--wa-color-yellow-40);
--wa-color-warning-outline-muted: var(--wa-color-yellow-20);
--wa-color-warning-outline-muted-alt: var(--wa-color-yellow-30);
--wa-color-warning-text-on-vivid: var(--wa-color-white);
--wa-color-warning-text-on-muted: var(--wa-color-yellow-70);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-60);
--wa-color-danger-fill-vivid: var(--wa-color-red-50);
--wa-color-danger-fill-vivid-alt: var(--wa-color-red-30);
--wa-color-danger-fill-muted: var(--wa-color-red-10);
--wa-color-danger-fill-muted-alt: var(--wa-color-red-20);
--wa-color-danger-outline-vivid: var(--wa-color-red-50);
--wa-color-danger-outline-vivid-alt: var(--wa-color-red-40);
--wa-color-danger-outline-muted: var(--wa-color-red-20);
--wa-color-danger-outline-muted-alt: var(--wa-color-red-30);
--wa-color-danger-text-on-vivid: var(--wa-color-white);
--wa-color-danger-text-on-muted: var(--wa-color-red-70);
--wa-color-danger-text-on-surface: var(--wa-color-red-60);
--wa-color-neutral-fill-vivid: var(--wa-color-neutral-50);
--wa-color-neutral-fill-vivid-alt: var(--wa-color-neutral-30);
--wa-color-neutral-fill-muted: var(--wa-color-neutral-10);
--wa-color-neutral-fill-muted-alt: var(--wa-color-neutral-20);
--wa-color-neutral-outline-vivid: var(--wa-color-neutral-50);
--wa-color-neutral-outline-vivid-alt: var(--wa-color-neutral-40);
--wa-color-neutral-outline-muted: var(--wa-color-neutral-20);
--wa-color-neutral-outline-muted-alt: var(--wa-color-neutral-30);
--wa-color-neutral-text-on-vivid: var(--wa-color-white);
--wa-color-neutral-text-on-muted: var(--wa-color-neutral-70);
--wa-color-neutral-text-on-surface: var(--wa-color-neutral-60);
}
/* _utility.css */