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

Merge pull request #5 from shoelace-style/lindsaym/theming-tune-up

Browse Source 
Theming tune up
This commit is contained in:
Lindsay M
2023-09-11 13:31:41 -04:00
committed by GitHub
parent df02aeef89 f89ef95d65
commit e02b36873e
39 changed files with 806 additions and 527 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
docs/assets/styles/code-previews.css
View File

@@ -8,19 +8,21 @@
.code-preview__preview {
position: relative;
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
border: var(--wa-border-style) var(--wa-border-width-thin)
var(--wa-color-surface-outline);
border-bottom: none;
border-top-left-radius: var(--wa-corners-1x);
border-top-right-radius: var(--wa-corners-1x);
background-color: var(--wa-color-surface-default);
min-width: 20rem;
max-width: 100%;
padding: var(--wa-space-xl) var(--wa-space-3xl) var(--wa-space-xl) var(--wa-space-xl);
padding: var(--wa-space-xl) var(--wa-space-3xl) var(--wa-space-xl)
var(--wa-space-xl);
}
/* Block the preview while dragging to prevent iframes from intercepting drag events */
.code-preview__preview--dragging:after {
content: '';
content: "";
position: absolute;
top: 0;
left: 0;
@@ -42,7 +44,8 @@
font-size: 20px;
color: var(--wa-color-text-quiet);
background-color: var(--wa-color-surface-default);
border-left: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
border-left: var(--wa-border-style) var(--wa-border-width-thin)
var(--wa-color-surface-outline);
border-top-right-radius: var(--wa-corners-1x);
cursor: ew-resize;
}
@@ -58,7 +61,8 @@
}
.code-preview__source {
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
border: var(--wa-border-style) var(--wa-border-width-thin)
var(--wa-color-surface-outline);
border-bottom: none;
border-radius: 0 !important;
display: none;
@@ -74,7 +78,8 @@
.code-preview__buttons {
position: relative;
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
border: var(--wa-border-style) var(--wa-border-width-thin)
var(--wa-color-surface-outline);
border-bottom-left-radius: var(--wa-corners-1x);
border-bottom-right-radius: var(--wa-corners-1x);
display: flex;
@@ -97,7 +102,8 @@
}
.code-preview__button:not(:last-of-type) {
border-right: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
border-right: var(--wa-border-style) var(--wa-border-width-thin)
var(--wa-color-surface-outline);
}
.code-preview__button--html,
@@ -129,9 +135,10 @@
.code-preview__button:hover,
.code-preview__button:active {
box-shadow: 0 0 0 var(--wa-border-width-thin) var(--wa-color-brand-container-outline-muted);
box-shadow: 0 0 0 var(--wa-border-width-thin)
var(--wa-color-brand-outline-muted);
border-right-color: transparent;
background-color: var(--wa-color-brand-container-fill-muted);
background-color: var(--wa-color-brand-fill-muted);
color: var(--wa-color-brand-text-on-surface);
z-index: 1;
}
@@ -164,10 +171,10 @@
}
/* We can apply data-flavor="html|react" to any element on the page to toggle it when the flavor changes */
.flavor-html [data-flavor]:not([data-flavor='html']) {
.flavor-html [data-flavor]:not([data-flavor="html"]) {
display: none;
}
.flavor-react [data-flavor]:not([data-flavor='react']) {
.flavor-react [data-flavor]:not([data-flavor="react"]) {
display: none;
}

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

@@ -128,7 +128,8 @@ h1 {
h2 {
font-size: 1.875rem;
border-bottom: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
border-bottom: solid var(--wa-border-width-thin)
var(--wa-color-surface-outline);
}
h3 {
@@ -202,9 +203,10 @@ code {
}
kbd {
background: var(--wa-color-neutral-container-fill-muted);
border: solid 1px var(--wa-color-neutral-container-outline-muted);
box-shadow: inset 0 1px 0 1px var(--wa-color-tint-white), 0 1px 0 0 var(--wa-color-tint-black);
background: var(--wa-color-neutral-fill-muted);
border: solid 1px var(--wa-color-neutral-outline-muted);
box-shadow: inset 0 1px 0 1px var(--wa-color-tint-white),
0 1px 0 0 var(--wa-color-tint-black);
font-family: var(--wa-font-family-code);
font-size: 0.9125em;
border-radius: var(--wa-corners-1x);
@@ -213,7 +215,7 @@ kbd {
}
ins {
background-color: var(--wa-color-success-container-fill-muted);
background-color: var(--wa-color-success-fill-muted);
color: var(--wa-color-success-text-on-muted);
border-radius: var(--wa-corners-1x);
text-decoration: none;
@@ -221,7 +223,7 @@ ins {
}
s {
background-color: var(--wa-color-danger-container-fill-muted);
background-color: var(--wa-color-danger-fill-muted);
color: var(--wa-color-danger-text-on-muted);
border-radius: var(--wa-corners-1x);
text-decoration: none;
@@ -229,7 +231,7 @@ s {
}
mark {
background-color: var(--wa-color-warning-container-fill-muted);
background-color: var(--wa-color-warning-fill-muted);
color: inherit;
border-radius: var(--wa-corners-1x);
padding: 0.125em 0.25em;
@@ -237,7 +239,8 @@ mark {
hr {
border: none;
border-bottom: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
border-bottom: solid var(--wa-border-width-thin)
var(--wa-color-surface-outline);
margin: calc(var(--docs-content-vertical-spacing) * 2) 0;
}
@@ -309,7 +312,7 @@ svg.wordmark {
}
.anchor-heading a::after {
content: '#';
content: "#";
color: color-mix(in oklch, var(--wa-color-text-link) 100%, black 12%);
margin-inline: 0.5rem;
opacity: 0;
@@ -340,7 +343,8 @@ table {
}
table tr {
border-bottom: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
border-bottom: solid var(--wa-border-width-thin)
var(--wa-color-surface-outline);
}
table th {
@@ -486,17 +490,25 @@ pre .token.italic {
}
.copy-code-button::part(button) {
background-color: var(--wa-color-neutral-element-fill-vivid);
background-color: var(--wa-color-neutral-fill-vivid);
border-radius: 0 var(--wa-corners-1x) 0 var(--wa-corners-1x);
padding: 0.75rem;
}
.copy-code-button::part(button):hover {
background-color: color-mix(in oklch, var(--wa-color-neutral-element-fill-vivid), black 4%);
background-color: color-mix(
in oklch,
var(--wa-color-neutral-fill-vivid),
black 4%
);
}
.copy-code-button::part(button):active {
background-color: color-mix(in oklch, var(--wa-color-neutral-element-fill-vivid), black 8%);
background-color: color-mix(
in oklch,
var(--wa-color-neutral-fill-vivid),
black 8%
);
}
pre .copy-code-button {
@@ -555,7 +567,8 @@ pre:hover .copy-code-button,
float: none;
width: calc(100% + (var(--docs-content-padding) * 2));
max-width: none;
margin: var(--docs-content-vertical-spacing) calc(-1 * var(--docs-content-padding));
margin: var(--docs-content-vertical-spacing)
calc(-1 * var(--docs-content-padding));
}
}
@@ -599,7 +612,9 @@ pre:hover .copy-code-button,
}
.content details + details {
margin-top: calc(-1 * var(--docs-content-vertical-spacing) + (2 * var(--wa-border-width-thin)));
margin-top: calc(
-1 * var(--docs-content-vertical-spacing) + (2 * var(--wa-border-width-thin))
);
}
/* Sidebar */
@@ -612,7 +627,8 @@ pre:hover .copy-code-button,
z-index: 20;
width: var(--docs-sidebar-width);
background-color: var(--docs-background-color);
border-right: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
border-right: solid var(--wa-border-width-thin)
var(--wa-color-surface-outline);
border-radius: 0;
padding: 2rem;
margin: 0;
@@ -657,7 +673,8 @@ pre:hover .copy-code-button,
#sidebar nav h2 {
font-size: var(--wa-font-size-m);
font-weight: var(--wa-font-weight-medium);
border-bottom: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
border-bottom: solid var(--wa-border-width-thin)
var(--wa-color-surface-outline);
margin: var(--wa-space-xl) 0 var(--wa-space-xs) 0;
}
@@ -757,8 +774,13 @@ main {
.content--with-toc {
/* There's a 2rem gap, so we need to remove it from the column */
grid-template-columns: calc(75% - 2rem) min(25%, var(--docs-content-toc-max-width));
max-width: calc(var(--docs-content-max-width) + var(--docs-content-toc-max-width));
grid-template-columns: calc(75% - 2rem) min(
25%,
var(--docs-content-toc-max-width)
);
max-width: calc(
var(--docs-content-max-width) + var(--docs-content-toc-max-width)
);
}
.content__body {
@@ -783,7 +805,8 @@ main {
max-height: calc(100vh - 6rem);
font-size: var(--wa-font-size-s);
line-height: 1.33;
border-left: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
border-left: var(--wa-border-style) var(--wa-border-width-thin)
var(--wa-color-surface-outline);
list-style: none;
padding: 1rem 0;
margin: 0;
@@ -796,14 +819,14 @@ main {
margin: 0;
}
.content__toc li[data-level='3'] {
.content__toc li[data-level="3"] {
margin-left: 1rem;
}
/* We don't use them, but just in case */
.content__toc li[data-level='4'],
.content__toc li[data-level='5'],
.content__toc li[data-level='6'] {
.content__toc li[data-level="4"],
.content__toc li[data-level="5"],
.content__toc li[data-level="6"] {
margin-left: 2rem;
}
@@ -855,13 +878,17 @@ main {
}
.content__toc ul::after {
content: '';
content: "";
position: absolute;
top: 0;
bottom: 1rem; /* don't cover the scrollbar */
right: 0;
width: 2rem;
background: linear-gradient(90deg, rgba(0 0 0 / 0) 0%, var(--wa-color-surface-default) 100%);
background: linear-gradient(
90deg,
rgba(0 0 0 / 0) 0%,
var(--wa-color-surface-default) 100%
);
}
.content__toc li {
@@ -872,7 +899,7 @@ main {
margin-bottom: 0;
}
.content__toc [data-level]:not([data-level='2']) {
.content__toc [data-level]:not([data-level="2"]) {
display: none;
}
@@ -890,7 +917,7 @@ main {
left: 0.25rem;
height: auto;
width: auto;
color: var(--wa-color-neutral-container-fill-vivid);
color: var(--wa-color-neutral-fill-vivid-alt);
border: none;
border-radius: 50%;
background: var(--wa-color-surface-default);
@@ -933,7 +960,7 @@ html.sidebar-open #menu-toggle {
/* Print styles */
@media print {
a:not(.anchor-heading)[href]::after {
content: ' (' attr(href) ')';
content: " (" attr(href) ")";
}
details,
@@ -1113,35 +1140,35 @@ html.sidebar-open #menu-toggle {
}
}
body[data-page^='/tokens/'] .table-wrapper td:first-child,
body[data-page^='/tokens/'] .table-wrapper td:first-child code {
body[data-page^="/tokens/"] .table-wrapper td:first-child,
body[data-page^="/tokens/"] .table-wrapper td:first-child code {
white-space: nowrap;
}
/* Border demos */
.border-demo {
height: 60px;
border-left: solid 1px var(--wa-color-brand-element-fill-vivid);
border-left: solid 1px var(--wa-color-brand-fill-vivid);
}
.corner-demo {
width: 3rem;
height: 3rem;
background: var(--wa-color-brand-element-fill-vivid);
background: var(--wa-color-brand-fill-vivid);
}
/* Transition demo */
.transition-demo {
position: relative;
background: var(--wa-color-neutral-container-fill-muted);
background: var(--wa-color-neutral-fill-muted);
width: 8rem;
height: 2rem;
}
.transition-demo:after {
content: '';
content: "";
position: absolute;
background-color: var(--wa-color-brand-element-fill-vivid);
background-color: var(--wa-color-brand-fill-vivid);
top: 0;
left: 0;
width: 0;
@@ -1156,7 +1183,7 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
/* Spacing demo */
.spacing-demo {
background: var(--wa-color-brand-element-fill-vivid);
background: var(--wa-color-brand-fill-vivid);
}
/* Shadow demo */

30
docs/assets/styles/search.css
View File

@@ -2,7 +2,7 @@
:root {
--docs-search-box-background: var(--wa-form-controls-background);
--docs-search-box-border-width: var(--wa-form-controls-border-width);
--docs-search-box-border-color: var(--wa-form-controls-color-resting);
--docs-search-box-border-color: var(--wa-form-controls-border-color-resting);
--docs-search-box-color: var(--wa-form-controls-placeholder-color);
--docs-search-dialog-background: var(--wa-color-surface-raised);
@@ -15,12 +15,16 @@
--docs-search-border-radius: calc(2 * var(--wa-corners-1x));
--docs-search-accent-color: var(--wa-color-brand-text-on-surface);
--docs-search-icon-color: var(--wa-color-neutral-element-fill-vivid);
--docs-search-icon-color-active: color-mix(in lch, var(--wa-color-neutral-element-fill-vivid), 8% black);
--docs-search-icon-color: var(--wa-color-neutral-fill-vivid);
--docs-search-icon-color-active: color-mix(
in lch,
var(--wa-color-neutral-fill-vivid),
8% black
);
--docs-search-shadow: var(--wa-shadow-level-3);
--docs-search-result-background-hover: var(--wa-color-neutral-element-fill-muted);
--docs-search-result-background-hover: var(--wa-color-neutral-fill-muted-alt);
--docs-search-result-color-hover: var(--wa-color-neutral-text-on-muted);
--docs-search-result-background-active: var(--wa-color-brand-element-fill-vivid);
--docs-search-result-background-active: var(--wa-color-brand-fill-vivid);
--docs-search-result-color-active: var(--wa-color-brand-text-on-vivid);
--docs-search-focus-ring: var(--wa-focus-ring);
--docs-search-overlay-background: rgb(0 0 0 / 0.33);
@@ -40,7 +44,8 @@ body.search-visible {
border: none;
border-radius: 9999px;
background: var(--docs-search-box-background);
border: solid var(--docs-search-box-border-width) var(--docs-search-box-border-color);
border: solid var(--docs-search-box-border-width)
var(--docs-search-box-border-color);
font: inherit;
color: var(--docs-search-box-color);
padding: 0.75rem 1rem;
@@ -208,7 +213,8 @@ body.search-visible {
}
.search--has-results .search__body {
border-top: solid var(--docs-search-border-width) var(--docs-search-border-color);
border-top: solid var(--docs-search-border-width)
var(--docs-search-border-color);
}
.search__results {
@@ -239,8 +245,8 @@ body.search-visible {
color: var(--docs-search-result-color-hover);
}
.search__results li[data-selected='true'] a,
.search__results li[data-selected='true'] a * {
.search__results li[data-selected="true"] a,
.search__results li[data-selected="true"] a * {
outline: none;
background-color: var(--docs-search-result-background-active);
color: var(--docs-search-result-color-active);
@@ -309,7 +315,8 @@ body.search-visible {
.search__empty {
display: none;
border-top: solid var(--docs-search-border-width) var(--docs-search-border-color);
border-top: solid var(--docs-search-border-width)
var(--docs-search-border-color);
text-align: center;
color: var(--docs-search-text-color-muted);
padding: 2rem;
@@ -323,7 +330,8 @@ body.search-visible {
display: flex;
justify-content: center;
gap: 2rem;
border-top: solid var(--docs-search-border-width) var(--docs-search-border-color);
border-top: solid var(--docs-search-border-width)
var(--docs-search-border-color);
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
padding: 1rem;

14
docs/pages/components/animation.md
View File

@@ -20,7 +20,7 @@ To animate an element, wrap it in `<wa-animation>` and set an animation `name`.
display: inline-block;
width: 100px;
height: 100px;
background-color: var(--wa-color-brand-element-fill-vivid);
background-color: var(--wa-color-brand-fill-vivid);
margin: 1.5rem;
}
</style>
@@ -34,7 +34,7 @@ const css = `
display: inline-block;
width: 100px;
height: 100px;
background-color: var(--wa-color-brand-element-fill-vivid);
background-color: var(--wa-color-brand-fill-vivid);
margin: 1.5rem;
}
`;
@@ -120,7 +120,7 @@ This example demonstrates all of the baked-in animations and easings. Animations
.animation-sandbox .box {
width: 100px;
height: 100px;
background-color: var(--wa-color-brand-element-fill-vivid);
background-color: var(--wa-color-brand-fill-vivid);
}
.animation-sandbox .controls {
@@ -166,7 +166,7 @@ Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/
display: inline-block;
width: 100px;
height: 100px;
background-color: var(--wa-color-brand-element-fill-vivid);
background-color: var(--wa-color-brand-fill-vivid);
}
</style>
```
@@ -184,7 +184,7 @@ const css = `
display: inline-block;
width: 100px;
height: 100px;
background-color: var(--wa-color-brand-element-fill-vivid);
background-color: var(--wa-color-brand-fill-vivid);
}
`;
@@ -256,7 +256,7 @@ Supply your own [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/
.animation-keyframes .box {
width: 100px;
height: 100px;
background-color: var(--wa-color-brand-element-fill-vivid);
background-color: var(--wa-color-brand-fill-vivid);
}
</style>
```
@@ -268,7 +268,7 @@ const css = `
.animation-keyframes .box {
width: 100px;
height: 100px;
background-color: var(--wa-color-brand-element-fill-vivid);
background-color: var(--wa-color-brand-fill-vivid);
}
`;

23
docs/pages/components/icon.md
View File

@@ -204,11 +204,11 @@ Here's an example that registers an icon library located in the `/assets/icons`
```html
<script type="module">
import { registerIconLibrary } from '/dist/utilities/icon-library.js';
import { registerIconLibrary } from "/dist/utilities/icon-library.js";
registerIconLibrary('my-icons', {
resolver: name => `/assets/icons/${name}.svg`,
mutator: svg => svg.setAttribute('fill', 'currentColor')
registerIconLibrary("my-icons", {
resolver: (name) => `/assets/icons/${name}.svg`,
mutator: (svg) => svg.setAttribute("fill", "currentColor"),
});
</script>
```
@@ -626,10 +626,11 @@ This example will load the same set of icons from the jsDelivr CDN instead of yo
```html
<script type="module">
import { registerIconLibrary } from '/dist/utilities/icon-library.js';
import { registerIconLibrary } from "/dist/utilities/icon-library.js";
registerIconLibrary('default', {
resolver: name => `https://cdn.jsdelivr.net/npm/bootstrap-icons@1.0.0/icons/${name}.svg`
registerIconLibrary("default", {
resolver: (name) =>
`https://cdn.jsdelivr.net/npm/bootstrap-icons@1.0.0/icons/${name}.svg`,
});
</script>
```
@@ -673,10 +674,10 @@ If you want to change the icons Web Awesome uses internally, you can register an
```html
<script type="module">
import { registerIconLibrary } from '/dist/utilities/icon-library.js';
import { registerIconLibrary } from "/dist/utilities/icon-library.js";
registerIconLibrary('system', {
resolver: name => `/path/to/custom/icons/${name}.svg`
registerIconLibrary("system", {
resolver: (name) => `/path/to/custom/icons/${name}.svg`,
});
</script>
```
@@ -824,7 +825,7 @@ If you want to change the icons Web Awesome uses internally, you can register an
}
.icon-list-item:hover {
background-color: var(--wa-color-brand-container-fill-muted);
background-color: var(--wa-color-brand-fill-muted);
color: var(--wa-color-brand-text-on-muted);
}

118
docs/pages/components/popup.md
View File

@@ -63,21 +63,21 @@ Popup is a low-level utility built specifically for positioning elements. Do not
<style>
.popup-overview wa-popup {
--arrow-color: var(--wa-color-brand-container-fill-vivid);
--arrow-color: var(--wa-color-brand-fill-vivid-alt);
}
.popup-overview span[slot='anchor'] {
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
border: dashed 2px var(--wa-color-neutral-outline-vivid);
margin: 50px;
}
.popup-overview .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-container-fill-vivid);
background: var(--wa-color-brand-fill-vivid-alt);
border-radius: var(--wa-corners-1x);
}
@@ -112,21 +112,21 @@ import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';
const css = `
.popup-overview wa-popup {
--arrow-color: var(--wa-color-brand-container-fill-vivid);
--arrow-color: var(--wa-color-brand-fill-vivid-alt);
}
.popup-overview span[slot='anchor'] {
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
border: dashed 2px var(--wa-color-neutral-outline-vivid);
margin: 50px;
}
.popup-overview .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-container-fill-vivid);
background: var(--wa-color-brand-fill-vivid-alt);
border-radius: var(--wa-corners-1x);
}
@@ -250,14 +250,14 @@ Popups are inactive and hidden until the `active` attribute is applied. Removing
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
border: dashed 2px var(--wa-color-neutral-outline-vivid);
margin: 50px;
}
.popup-active .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-container-fill-vivid);
background: var(--wa-color-brand-fill-vivid-alt);
border-radius: var(--wa-corners-1x);
}
</style>
@@ -281,14 +281,14 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
border: dashed 2px var(--wa-color-neutral-outline-vivid);
margin: 50px;
}
.popup-active .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-container-fill-vivid);
background: var(--wa-color-brand-fill-vivid-alt);
border-radius: var(--wa-corners-1x);
}
`;
@@ -332,14 +332,14 @@ By default, anchors are slotted into the popup using the `anchor` slot. If your
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
border: dashed 2px var(--wa-color-neutral-outline-vivid);
margin: 50px 0 0 50px;
}
#external-anchor ~ wa-popup .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-container-fill-vivid);
background: var(--wa-color-brand-fill-vivid-alt);
border-radius: var(--wa-corners-1x);
}
</style>
@@ -353,14 +353,14 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
border: dashed 2px var(--wa-color-neutral-outline-vivid);
margin: 50px 0 0 50px;
}
#external-anchor ~ wa-popup .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-container-fill-vivid);
background: var(--wa-color-brand-fill-vivid-alt);
border-radius: var(--wa-corners-1x);
}
`;
@@ -414,14 +414,14 @@ Since placement is preferred when using `flip`, you can observe the popup's curr
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
border: dashed 2px var(--wa-color-neutral-outline-vivid);
margin: 50px;
}
.popup-placement .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-container-fill-vivid);
background: var(--wa-color-brand-fill-vivid-alt);
border-radius: var(--wa-corners-1x);
}
@@ -450,14 +450,14 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
border: dashed 2px var(--wa-color-neutral-outline-vivid);
margin: 50px;
}
.popup-placement .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-container-fill-vivid);
background: var(--wa-color-brand-fill-vivid-alt);
border-radius: var(--wa-corners-1x);
}
@@ -518,14 +518,14 @@ Use the `distance` attribute to change the distance between the popup and its an
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
border: dashed 2px var(--wa-color-neutral-outline-vivid);
margin: 50px;
}
.popup-distance .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-container-fill-vivid);
background: var(--wa-color-brand-fill-vivid-alt);
border-radius: var(--wa-corners-1x);
}
@@ -553,14 +553,14 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
border: dashed 2px var(--wa-color-neutral-outline-vivid);
margin: 50px;
}
.popup-distance .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-container-fill-vivid);
background: var(--wa-color-brand-fill-vivid-alt);
border-radius: var(--wa-corners-1x);
}
@@ -615,14 +615,14 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
border: dashed 2px var(--wa-color-neutral-outline-vivid);
margin: 50px;
}
.popup-skidding .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-container-fill-vivid);
background: var(--wa-color-brand-fill-vivid-alt);
border-radius: var(--wa-corners-1x);
}
@@ -650,14 +650,14 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
border: dashed 2px var(--wa-color-neutral-outline-vivid);
margin: 50px;
}
.popup-skidding .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-container-fill-vivid);
background: var(--wa-color-brand-fill-vivid-alt);
border-radius: var(--wa-corners-1x);
}
@@ -736,21 +736,21 @@ By default, the arrow will be aligned as close to the center of the _anchor_ as
<style>
.popup-arrow wa-popup {
--arrow-color: var(--wa-color-brand-container-fill-vivid);
--arrow-color: var(--wa-color-brand-fill-vivid-alt);
}
.popup-arrow span[slot='anchor'] {
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
border: dashed 2px var(--wa-color-neutral-outline-vivid);
margin: 50px;
}
.popup-arrow .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-container-fill-vivid);
background: var(--wa-color-brand-fill-vivid-alt);
border-radius: var(--wa-corners-1x);
}
@@ -793,21 +793,21 @@ import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';
const css = `
.popup-arrow wa-popup {
--arrow-color: var(--wa-color-brand-container-fill-vivid);
--arrow-color: var(--wa-color-brand-fill-vivid-alt);
}
.popup-arrow span[slot='anchor'] {
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
border: dashed 2px var(--wa-color-neutral-outline-vivid);
margin: 50px;
}
.popup-arrow .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-container-fill-vivid);
background: var(--wa-color-brand-fill-vivid-alt);
border-radius: var(--wa-corners-1x);
}
@@ -912,7 +912,7 @@ Use the `sync` attribute to make the popup the same width or height as the ancho
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
border: dashed 2px var(--wa-color-neutral-outline-vivid);
margin: 50px;
}
@@ -921,7 +921,7 @@ Use the `sync` attribute to make the popup the same width or height as the ancho
height: 100%;
min-width: 50px;
min-height: 50px;
background: var(--wa-color-brand-container-fill-vivid);
background: var(--wa-color-brand-fill-vivid-alt);
border-radius: var(--wa-corners-1x);
}
@@ -951,7 +951,7 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
border: dashed 2px var(--wa-color-neutral-outline-vivid);
margin: 50px;
}
@@ -960,7 +960,7 @@ const css = `
height: 100%;
min-width: 50px;
min-height: 50px;
background: var(--wa-color-brand-container-fill-vivid);
background: var(--wa-color-brand-fill-vivid-alt);
border-radius: var(--wa-corners-1x);
}
@@ -1028,14 +1028,14 @@ Toggle the switch and scroll the container to see the difference.
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
border: dashed 2px var(--wa-color-neutral-outline-vivid);
margin: 150px 50px;
}
.popup-strategy .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-container-fill-vivid);
background: var(--wa-color-brand-fill-vivid-alt);
border-radius: var(--wa-corners-1x);
}
@@ -1070,14 +1070,14 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
border: dashed 2px var(--wa-color-neutral-outline-vivid);
margin: 150px 50px;
}
.popup-strategy .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-container-fill-vivid);
background: var(--wa-color-brand-fill-vivid-alt);
border-radius: var(--wa-corners-1x);
}
@@ -1141,14 +1141,14 @@ Scroll the container to see how the popup flips to prevent clipping.
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
border: dashed 2px var(--wa-color-neutral-outline-vivid);
margin: 150px 50px;
}
.popup-flip .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-container-fill-vivid);
background: var(--wa-color-brand-fill-vivid-alt);
border-radius: var(--wa-corners-1x);
}
</style>
@@ -1179,14 +1179,14 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
border: dashed 2px var(--wa-color-neutral-outline-vivid);
margin: 150px 50px;
}
.popup-flip .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-container-fill-vivid);
background: var(--wa-color-brand-fill-vivid-alt);
border-radius: var(--wa-corners-1x);
}
`;
@@ -1248,14 +1248,14 @@ Scroll the container to see how the popup changes it's fallback placement to pre
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
border: dashed 2px var(--wa-color-neutral-outline-vivid);
margin: 250px 50px;
}
.popup-flip-fallbacks .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-container-fill-vivid);
background: var(--wa-color-brand-fill-vivid-alt);
border-radius: var(--wa-corners-1x);
}
</style>
@@ -1276,14 +1276,14 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
border: dashed 2px var(--wa-color-neutral-outline-vivid);
margin: 250px 50px;
}
.popup-flip-fallbacks .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-container-fill-vivid);
background: var(--wa-color-brand-fill-vivid-alt);
border-radius: var(--wa-corners-1x);
}
`;
@@ -1335,14 +1335,14 @@ Toggle the switch to see the difference.
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
border: dashed 2px var(--wa-color-neutral-outline-vivid);
margin: 60px 0 0 10px;
}
.popup-shift .box {
width: 300px;
height: 50px;
background: var(--wa-color-brand-container-fill-vivid);
background: var(--wa-color-brand-fill-vivid-alt);
border-radius: var(--wa-corners-1x);
}
</style>
@@ -1372,14 +1372,14 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
border: dashed 2px var(--wa-color-neutral-outline-vivid);
margin: 60px 0 0 10px;
}
.popup-shift .box {
width: 300px;
height: 50px;
background: var(--wa-color-brand-container-fill-vivid);
background: var(--wa-color-brand-fill-vivid-alt);
border-radius: var(--wa-corners-1x);
}
`;
@@ -1441,12 +1441,12 @@ Scroll the container to see the popup resize as its available space changes.
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
border: dashed 2px var(--wa-color-neutral-outline-vivid);
margin: 250px 50px 100px 50px;
}
.popup-auto-size .box {
background: var(--wa-color-brand-container-fill-vivid);
background: var(--wa-color-brand-fill-vivid-alt);
border-radius: var(--wa-corners-1x);
/* This sets the preferred size of the popup's content */
@@ -1486,12 +1486,12 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
border: dashed 2px var(--wa-color-neutral-outline-vivid);
margin: 250px 50px 100px 50px;
}
.popup-auto-size .box {
background: var(--wa-color-brand-container-fill-vivid);
background: var(--wa-color-brand-fill-vivid-alt);
border-radius: var(--wa-corners-1x);
/* This sets the preferred size of the popup's content */
@@ -1539,7 +1539,7 @@ const virtualElement = {
getBoundingClientRect() {
// ...
return { width, height, x, y, top, left, right, bottom };
}
},
};
```
@@ -1608,7 +1608,7 @@ This example anchors a popup to the mouse cursor using a virtual element. As suc
.popup-virtual-element .circle {
width: 100px;
height: 100px;
border: solid 4px var(--wa-color-neutral-element-outline-vivid);
border: solid 4px var(--wa-color-neutral-outline-vivid);
border-radius: 50%;
translate: -50px -50px;
animation: 1s virtual-cursor infinite;
@@ -1636,7 +1636,7 @@ const css = `
.popup-virtual-element .circle {
width: 100px;
height: 100px;
border: solid 4px var(--wa-color-neutral-element-outline-vivid);
border: solid 4px var(--wa-color-neutral-outline-vivid);
border-radius: 50%;
translate: -50px -50px;
animation: 1s virtual-cursor infinite;

16
docs/pages/components/range.md
View File

@@ -112,8 +112,8 @@ You can customize the active and inactive portions of the track using the `--tra
```html:preview
<wa-range
style="
--track-color-active: var(--wa-color-brand-element-fill-vivid);
--track-color-inactive: var(--wa-color-brand-element-fill-muted);
--track-color-active: var(--wa-color-brand-fill-vivid);
--track-color-inactive: var(--wa-color-brand-fill-muted-alt);
"
></wa-range>
```
@@ -126,8 +126,8 @@ import WaRange from '@shoelace-style/shoelace/dist/react/range';
const App = () => (
<WaRange
style={{
'--track-color-active': 'var(--wa-color-brand-element-fill-vivid)',
'--track-color-inactive': 'var(--wa-color-brand-element-fill-muted)'
'--track-color-active': 'var(--wa-color-brand-fill-vivid)',
'--track-color-inactive': 'var(--wa-color-brand-fill-muted-alt)'
}}
/>
);
@@ -144,8 +144,8 @@ You can customize the initial offset of the active track using the `--track-acti
min="-100"
max="100"
style="
--track-color-active: var(--wa-color-brand-element-fill-vivid);
--track-color-inactive: var(--wa-color-brand-element-fill-muted);
--track-color-active: var(--wa-color-brand-fill-vivid);
--track-color-inactive: var(--wa-color-brand-fill-muted-alt);
--track-active-offset: 50%;
"
></wa-range>
@@ -161,8 +161,8 @@ const App = () => (
min={-100}
max={100}
style={{
'--track-color-active': 'var(--wa-color-brand-element-fill-vivid)',
'--track-color-inactive': 'var(--wa-color-brand-element-fill-muted)',
'--track-color-active': 'var(--wa-color-brand-fill-vivid)',
'--track-color-inactive': 'var(--wa-color-brand-fill-muted-alt)',
'--track-active-offset': '50%'
}}
/>

4
docs/pages/components/rating.md
View File

@@ -138,7 +138,7 @@ The event has a payload with `phase` and `value` properties. The `phase` propert
top: -4px;
left: 8px;
border-radius: var(--wa-corners-1x);
background: var(--wa-color-neutral-element-outline-vivid);
background: var(--wa-color-neutral-outline-vivid);
color: var(--wa-color-neutral-text-on-vivid);
text-align: center;
padding: 4px 6px;
@@ -161,7 +161,7 @@ const css = `
top: -4px;
left: 8px;
border-radius: var(--wa-corners-1x);
background: var(--wa-color-neutral-element-outline-vivid);
background: var(--wa-color-neutral-outline-vivid);
color: var(--wa-color-neutral-text-on-vivid);
text-align: center;
padding: 4px 6px;

4
docs/pages/components/split-panel.md
View File

@@ -249,7 +249,7 @@ To snap panels at specific positions while dragging, add the `snap` attribute wi
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--wa-color-neutral-container-fill-vivid);
background: var(--wa-color-neutral-fill-vivid-alt);
transform: translateX(-3px);
}
@@ -281,7 +281,7 @@ const css = `
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--wa-color-neutral-container-fill-vivid);
background: var(--wa-color-neutral-fill-vivid-alt);
transform: translateX(-3px);
}

22
docs/pages/tokens/more.md
View File

@@ -19,14 +19,14 @@ Focus ring tokens control the appearance of focus rings.
Form control tokens control the appearance of form controls such as [input](/components/input), [select](/components/select), [textarea](/components/textarea), etc.
| Token | Value |
| -------------------------------------- | ----------------------------------------------- |
| `--wa-form-controls-background` | `var(--wa-color-surface-raised)` |
| `--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-color-resting` | `var(--wa-color-neutral-element-outline-muted)` |
| `--wa-form-controls-color-activated` | `var(--wa-color-brand-action-vivid)` |
| `--wa-form-controls-font-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)` |
| Token | Value |
| ------------------------------------------- | ------------------------------------------- |
| `--wa-form-controls-background` | `var(--wa-color-surface-raised)` |
| `--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-action-vivid)` |
| `--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)` |

29
src/components/alert/alert.styles.ts
View File

@@ -1,5 +1,5 @@
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
export default css`
${componentStyles}
@@ -37,32 +37,37 @@ export default css`
}
.alert--brand {
background-color: var(--wa-color-brand-container-fill-muted);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-brand-container-outline-muted);
background-color: var(--wa-color-brand-fill-muted);
border: var(--wa-border-style) var(--wa-border-width-thin)
var(--wa-color-brand-outline-muted);
color: var(--wa-color-brand-text-on-muted);
}
.alert--success {
background-color: var(--wa-color-success-container-fill-muted);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-success-container-outline-muted);
background-color: var(--wa-color-success-fill-muted);
border: var(--wa-border-style) var(--wa-border-width-thin)
var(--wa-color-success-outline-muted);
color: var(--wa-color-success-text-on-muted);
}
.alert--neutral {
background-color: var(--wa-color-neutral-container-fill-muted);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-neutral-container-outline-muted);
background-color: var(--wa-color-neutral-fill-muted);
border: var(--wa-border-style) var(--wa-border-width-thin)
var(--wa-color-neutral-outline-muted);
color: var(--wa-color-neutral-text-on-muted);
}
.alert--warning {
background-color: var(--wa-color-warning-container-fill-muted);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-warning-container-outline-muted);
background-color: var(--wa-color-warning-fill-muted);
border: var(--wa-border-style) var(--wa-border-width-thin)
var(--wa-color-warning-outline-muted);
color: var(--wa-color-warning-text-on-muted);
}
.alert--danger {
background-color: var(--wa-color-danger-container-fill-muted);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-danger-container-outline-muted);
background-color: var(--wa-color-danger-fill-muted);
border: var(--wa-border-style) var(--wa-border-width-thin)
var(--wa-color-danger-outline-muted);
color: var(--wa-color-danger-text-on-muted);
}

6
src/components/avatar/avatar.styles.ts
View File

@@ -1,5 +1,5 @@
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
export default css`
${componentStyles}
@@ -17,7 +17,7 @@ export default css`
position: relative;
width: var(--size);
height: var(--size);
background-color: var(--wa-color-neutral-element-fill-vivid);
background-color: var(--wa-color-neutral-fill-vivid);
font-family: var(--wa-font-family-body);
font-size: calc(var(--size) * 0.5);
font-weight: var(--wa-font-weight-normal);

24
src/components/badge/badge.styles.ts
View File

@@ -1,5 +1,5 @@
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
export default css`
${componentStyles}
@@ -25,27 +25,27 @@ export default css`
/* Variant modifiers */
.badge--brand {
background-color: var(--wa-color-brand-element-fill-vivid);
background-color: var(--wa-color-brand-fill-vivid);
color: var(--wa-color-brand-text-on-vivid);
}
.badge--success {
background-color: var(--wa-color-success-element-fill-vivid);
background-color: var(--wa-color-success-fill-vivid);
color: var(--wa-color-success-text-on-vivid);
}
.badge--neutral {
background-color: var(--wa-color-neutral-element-fill-vivid);
background-color: var(--wa-color-neutral-fill-vivid);
color: var(--wa-color-neutral-text-on-vivid);
}
.badge--warning {
background-color: var(--wa-color-warning-element-fill-vivid);
background-color: var(--wa-color-warning-fill-vivid);
color: var(--wa-color-warning-text-on-vivid);
}
.badge--danger {
background-color: var(--wa-color-danger-element-fill-vivid);
background-color: var(--wa-color-danger-fill-vivid);
color: var(--wa-color-danger-text-on-vivid);
}
@@ -60,23 +60,23 @@ export default css`
}
.badge--pulse.badge--brand {
--pulse-color: var(--wa-color-brand-container-outline-vivid);
--pulse-color: var(--wa-color-brand-outline-vivid-alt);
}
.badge--pulse.badge--success {
--pulse-color: var(--wa-color-success-container-outline-vivid);
--pulse-color: var(--wa-color-success-outline-vivid-alt);
}
.badge--pulse.badge--neutral {
--pulse-color: var(--wa-color-neutral-container-outline-vivid);
--pulse-color: var(--wa-color-neutral-outline-vivid-alt);
}
.badge--pulse.badge--warning {
--pulse-color: var(--wa-color-warning-container-outline-vivid);
--pulse-color: var(--wa-color-warning-outline-vivid-alt);
}
.badge--pulse.badge--danger {
--pulse-color: var(--wa-color-danger-container-outline-vivid);
--pulse-color: var(--wa-color-danger-outline-vivid-alt);
}
@keyframes pulse {

257
src/components/button/button.styles.ts
View File

@@ -1,5 +1,5 @@
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
export default css`
${componentStyles}
@@ -18,14 +18,15 @@ export default css`
width: 100%;
border: none;
font-family: var(--wa-font-family-body);
font-weight: var(--wa-font-weight-normal);
font-weight: var(--wa-font-weight-action);
text-decoration: none;
user-select: none;
white-space: nowrap;
vertical-align: middle;
padding: 0;
transition: var(--wa-transition-faster) background-color, var(--wa-transition-faster) color,
var(--wa-transition-faster) border, var(--wa-transition-faster) box-shadow;
transition: var(--wa-transition-faster) background-color,
var(--wa-transition-faster) color, var(--wa-transition-faster) border,
var(--wa-transition-faster) box-shadow;
cursor: inherit;
}
@@ -43,23 +44,23 @@ export default css`
}
.button--brand:focus-visible {
outline-color: var(--wa-color-brand-element-fill-vivid);
outline-color: var(--wa-color-brand-fill-vivid);
}
.button--success:focus-visible {
outline-color: var(--wa-color-success-element-fill-vivid);
outline-color: var(--wa-color-success-fill-vivid);
}
.button--neutral:focus-visible {
outline-color: var(--wa-color-neutral-element-fill-vivid);
outline-color: var(--wa-color-neutral-fill-vivid);
}
.button--warning:focus-visible {
outline-color: var(--wa-color-warning-element-fill-vivid);
outline-color: var(--wa-color-warning-fill-vivid);
}
.button--danger:focus-visible {
outline-color: var(--wa-color-danger-element-fill-vivid);
outline-color: var(--wa-color-danger-fill-vivid);
}
.button--disabled {
@@ -94,71 +95,111 @@ export default css`
/* Brand */
.button--standard.button--brand {
background-color: var(--wa-color-brand-element-fill-vivid);
background-color: var(--wa-color-brand-fill-vivid);
color: var(--wa-color-brand-text-on-vivid);
}
.button--standard.button--brand:hover:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-brand-element-fill-vivid), white 6%);
background-color: color-mix(
in oklch,
var(--wa-color-brand-fill-vivid),
white 6%
);
}
.button--standard.button--brand:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-brand-element-fill-vivid), black 6%);
background-color: color-mix(
in oklch,
var(--wa-color-brand-fill-vivid),
black 6%
);
}
/* Success */
.button--standard.button--success {
background-color: var(--wa-color-success-element-fill-vivid);
background-color: var(--wa-color-success-fill-vivid);
color: var(--wa-color-success-text-on-vivid);
}
.button--standard.button--success:hover:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-success-element-fill-vivid), white 6%);
background-color: color-mix(
in oklch,
var(--wa-color-success-fill-vivid),
white 6%
);
}
.button--standard.button--success:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-success-element-fill-vivid), black 6%);
background-color: color-mix(
in oklch,
var(--wa-color-success-fill-vivid),
black 6%
);
}
/* Neutral */
.button--standard.button--neutral {
background-color: var(--wa-color-neutral-element-fill-vivid);
background-color: var(--wa-color-neutral-fill-vivid);
color: var(--wa-color-neutral-text-on-vivid);
}
.button--standard.button--neutral:hover:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-neutral-element-fill-vivid), white 6%);
background-color: color-mix(
in oklch,
var(--wa-color-neutral-fill-vivid),
white 6%
);
}
.button--standard.button--neutral:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-neutral-element-fill-vivid), black 6%);
background-color: color-mix(
in oklch,
var(--wa-color-neutral-fill-vivid),
black 6%
);
}
/* Warning */
.button--standard.button--warning {
background-color: var(--wa-color-warning-element-fill-vivid);
background-color: var(--wa-color-warning-fill-vivid);
color: var(--wa-color-warning-text-on-vivid);
}
.button--standard.button--warning:hover:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-warning-element-fill-vivid), white 6%);
background-color: color-mix(
in oklch,
var(--wa-color-warning-fill-vivid),
white 6%
);
}
.button--standard.button--warning:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-warning-element-fill-vivid), black 6%);
background-color: color-mix(
in oklch,
var(--wa-color-warning-fill-vivid),
black 6%
);
}
/* Danger */
.button--standard.button--danger {
background-color: var(--wa-color-danger-element-fill-vivid);
background-color: var(--wa-color-danger-fill-vivid);
color: var(--wa-color-danger-text-on-vivid);
}
.button--standard.button--danger:hover:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-danger-element-fill-vivid), white 6%);
background-color: color-mix(
in oklch,
var(--wa-color-danger-fill-vivid),
white 6%
);
}
.button--standard.button--danger:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-danger-element-fill-vivid), black 6%);
background-color: color-mix(
in oklch,
var(--wa-color-danger-fill-vivid),
black 6%
);
}
/*
@@ -172,104 +213,193 @@ export default css`
/* Brand */
.button--outline.button--brand {
border-color: var(--wa-color-brand-element-outline-vivid);
border-color: var(--wa-color-brand-outline-vivid);
color: var(--wa-color-brand-text-on-surface);
}
.button--outline.button--brand:hover:not(.button--disabled),
.button--outline.button--brand.button--checked:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-brand-element-fill-vivid), white 6%);
border-color: color-mix(in oklch, var(--wa-color-brand-element-fill-vivid), white 6%);
background-color: color-mix(
in oklch,
var(--wa-color-brand-fill-vivid),
white 6%
);
border-color: color-mix(
in oklch,
var(--wa-color-brand-fill-vivid),
white 6%
);
color: var(--wa-color-brand-text-on-vivid);
}
.button--outline.button--brand:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-brand-element-fill-vivid), black 6%);
border-color: color-mix(in oklch, var(--wa-color-brand-element-fill-vivid), black 6%);
background-color: color-mix(
in oklch,
var(--wa-color-brand-fill-vivid),
black 6%
);
border-color: color-mix(
in oklch,
var(--wa-color-brand-fill-vivid),
black 6%
);
}
/* Success */
.button--outline.button--success {
border-color: var(--wa-color-success-element-outline-vivid);
border-color: var(--wa-color-success-outline-vivid);
color: var(--wa-color-success-text-on-surface);
}
.button--outline.button--success:hover:not(.button--disabled),
.button--outline.button--success.button--checked:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-success-element-fill-vivid), white 6%);
border-color: color-mix(in oklch, var(--wa-color-success-element-fill-vivid), white 6%);
background-color: color-mix(
in oklch,
var(--wa-color-success-fill-vivid),
white 6%
);
border-color: color-mix(
in oklch,
var(--wa-color-success-fill-vivid),
white 6%
);
color: var(--wa-color-success-text-on-vivid);
}
.button--outline.button--success:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-success-element-fill-vivid), black 6%);
border-color: color-mix(in oklch, var(--wa-color-success-element-fill-vivid), black 6%);
background-color: color-mix(
in oklch,
var(--wa-color-success-fill-vivid),
black 6%
);
border-color: color-mix(
in oklch,
var(--wa-color-success-fill-vivid),
black 6%
);
}
.button--outline.button--small {
line-height: calc(var(--wa-form-controls-height-s) - max(1px, var(--wa-form-controls-border-width)) * 2);
line-height: calc(
var(--wa-form-controls-height-s) -
max(1px, var(--wa-form-controls-border-width)) * 2
);
}
.button--outline.button--medium {
line-height: calc(var(--wa-form-controls-height-m) - max(1px, var(--wa-form-controls-border-width)) * 2);
line-height: calc(
var(--wa-form-controls-height-m) -
max(1px, var(--wa-form-controls-border-width)) * 2
);
}
.button--outline.button--large {
line-height: calc(var(--wa-form-controls-height-l) - max(1px, var(--wa-form-controls-border-width)) * 2);
line-height: calc(
var(--wa-form-controls-height-l) -
max(1px, var(--wa-form-controls-border-width)) * 2
);
}
/* Neutral */
.button--outline.button--neutral {
border-color: var(--wa-color-neutral-element-outline-vivid);
border-color: var(--wa-color-neutral-outline-vivid);
color: var(--wa-color-neutral-text-on-surface);
}
.button--outline.button--neutral:hover:not(.button--disabled),
.button--outline.button--neutral.button--checked:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-neutral-element-fill-vivid), white 6%);
border-color: color-mix(in oklch, var(--wa-color-neutral-element-fill-vivid), white 6%);
background-color: color-mix(
in oklch,
var(--wa-color-neutral-fill-vivid),
white 6%
);
border-color: color-mix(
in oklch,
var(--wa-color-neutral-fill-vivid),
white 6%
);
color: var(--wa-color-neutral-text-on-vivid);
}
.button--outline.button--neutral:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-neutral-element-fill-vivid), black 6%);
border-color: color-mix(in oklch, var(--wa-color-neutral-element-fill-vivid), black 6%);
background-color: color-mix(
in oklch,
var(--wa-color-neutral-fill-vivid),
black 6%
);
border-color: color-mix(
in oklch,
var(--wa-color-neutral-fill-vivid),
black 6%
);
}
/* Warning */
.button--outline.button--warning {
border-color: var(--wa-color-warning-element-outline-vivid);
border-color: var(--wa-color-warning-outline-vivid);
color: var(--wa-color-warning-text-on-surface);
}
.button--outline.button--warning:hover:not(.button--disabled),
.button--outline.button--warning.button--checked:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-warning-element-fill-vivid), white 6%);
border-color: color-mix(in oklch, var(--wa-color-warning-element-fill-vivid), white 6%);
background-color: color-mix(
in oklch,
var(--wa-color-warning-fill-vivid),
white 6%
);
border-color: color-mix(
in oklch,
var(--wa-color-warning-fill-vivid),
white 6%
);
color: var(--wa-color-warning-text-on-vivid);
}
.button--outline.button--warning:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-warning-element-fill-vivid), black 6%);
border-color: color-mix(in oklch, var(--wa-color-warning-element-fill-vivid), black 6%);
background-color: color-mix(
in oklch,
var(--wa-color-warning-fill-vivid),
black 6%
);
border-color: color-mix(
in oklch,
var(--wa-color-warning-fill-vivid),
black 6%
);
}
/* Danger */
.button--outline.button--danger {
border-color: var(--wa-color-danger-element-outline-vivid);
border-color: var(--wa-color-danger-outline-vivid);
color: var(--wa-color-danger-text-on-surface);
}
.button--outline.button--danger:hover:not(.button--disabled),
.button--outline.button--danger.button--checked:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-danger-element-fill-vivid), white 6%);
border-color: color-mix(in oklch, var(--wa-color-danger-element-fill-vivid), white 6%);
background-color: color-mix(
in oklch,
var(--wa-color-danger-fill-vivid),
white 6%
);
border-color: color-mix(
in oklch,
var(--wa-color-danger-fill-vivid),
white 6%
);
color: var(--wa-color-danger-text-on-vivid);
}
.button--outline.button--danger:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-danger-element-fill-vivid), black 6%);
border-color: color-mix(in oklch, var(--wa-color-danger-element-fill-vivid), black 6%);
background-color: color-mix(
in oklch,
var(--wa-color-danger-fill-vivid),
black 6%
);
border-color: color-mix(
in oklch,
var(--wa-color-danger-fill-vivid),
black 6%
);
}
@media (forced-colors: active) {
@@ -305,21 +435,21 @@ export default css`
height: var(--wa-form-controls-height-s);
font-size: var(--wa-font-size-s);
line-height: var(--wa-form-controls-height-s);
border-radius: var(--wa-corners-1x);
border-radius: var(--wa-form-controls-corners);
}
.button--medium {
height: var(--wa-form-controls-height-m);
font-size: var(--wa-font-size-m);
line-height: var(--wa-form-controls-height-m);
border-radius: var(--wa-corners-1x);
border-radius: var(--wa-form-controls-corners);
}
.button--large {
height: var(--wa-form-controls-height-l);
font-size: var(--wa-font-size-l);
line-height: var(--wa-form-controls-height-l);
border-radius: var(--wa-corners-1x);
border-radius: var(--wa-form-controls-corners);
}
/*
@@ -472,7 +602,8 @@ export default css`
* buttons and we style them here instead.
*/
:host(.wa-button-group__button--first:not(.wa-button-group__button--last)) .button {
:host(.wa-button-group__button--first:not(.wa-button-group__button--last))
.button {
border-start-end-radius: 0;
border-end-end-radius: 0;
}
@@ -481,7 +612,8 @@ export default css`
border-radius: 0;
}
:host(.wa-button-group__button--last:not(.wa-button-group__button--first)) .button {
:host(.wa-button-group__button--last:not(.wa-button-group__button--first))
.button {
border-start-start-radius: 0;
border-end-start-radius: 0;
}
@@ -492,9 +624,14 @@ export default css`
}
/* Add a visual separator between solid buttons */
:host(.wa-button-group__button:not(.wa-button-group__button--first, .wa-button-group__button--radio):not(:hover))
:host(
.wa-button-group__button:not(
.wa-button-group__button--first,
.wa-button-group__button--radio
):not(:hover)
)
.button:after {
content: '';
content: "";
position: absolute;
top: 0;
inset-inline-start: 0;

17
src/components/carousel/carousel.styles.ts
View File

@@ -1,5 +1,5 @@
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
export default css`
${componentStyles}
@@ -17,8 +17,8 @@ export default css`
grid-template-columns: min-content 1fr min-content;
grid-template-rows: 1fr min-content;
grid-template-areas:
'. slides .'
'. pagination .';
". slides ."
". pagination .";
gap: var(--wa-space-m);
align-items: center;
min-height: 100%;
@@ -48,7 +48,10 @@ export default css`
aspect-ratio: calc(var(--aspect-ratio) * var(--slides-per-page));
border-radius: var(--wa-corners-1x);
--slide-size: calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));
--slide-size: calc(
(100% - (var(--slides-per-page) - 1) * var(--slide-gap)) /
var(--slides-per-page)
);
}
@media (prefers-reduced-motion) {
@@ -140,13 +143,13 @@ export default css`
border-radius: var(--wa-corners-circle);
width: var(--wa-space-s);
height: var(--wa-space-s);
background-color: var(--wa-color-neutral-element-fill-muted);
background-color: var(--wa-color-neutral-fill-muted-alt);
padding: 0;
margin: 0;
}
.carousel__pagination-item--active {
background-color: var(--wa-color-brand-element-fill-vivid);
background-color: var(--wa-color-brand-fill-vivid);
transform: scale(1.2);
}

32
src/components/checkbox/checkbox.styles.ts
View File

@@ -1,5 +1,5 @@
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
export default css`
${componentStyles}
@@ -14,7 +14,7 @@ export default css`
align-items: flex-start;
font-family: var(--wa-font-family-body);
font-weight: var(--wa-font-weight-normal);
color: var(--wa-form-controls-color-text);
color: var(--wa-form-controls-text-color);
vertical-align: middle;
cursor: pointer;
}
@@ -42,11 +42,13 @@ export default css`
justify-content: center;
width: var(--toggle-size);
height: var(--toggle-size);
border: var(--wa-border-style) var(--wa-form-controls-border-width) var(--wa-form-controls-color-resting);
border: var(--wa-border-style) var(--wa-form-controls-border-width)
var(--wa-form-controls-border-color-resting);
border-radius: 2px;
background-color: var(--wa-form-controls-background);
color: var(--wa-form-controls-color-text);
transition: var(--wa-transition-fast) border-color, var(--wa-transition-fast) background-color,
color: var(--wa-form-controls-text-color);
transition: var(--wa-transition-fast) border-color,
var(--wa-transition-fast) background-color,
var(--wa-transition-fast) color, var(--wa-transition-fast) box-shadow;
}
@@ -66,8 +68,10 @@ export default css`
}
/* Focus */
.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
border-color: var(--wa-form-controls-color-activated);
.checkbox:not(.checkbox--checked):not(.checkbox--disabled)
.checkbox__input:focus-visible
~ .checkbox__control {
border-color: var(--wa-form-controls-border-color-activated);
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
@@ -76,13 +80,17 @@ export default css`
.checkbox--checked .checkbox__control,
.checkbox--indeterminate .checkbox__control {
color: var(--wa-color-brand-text-on-vivid);
border-color: var(--wa-color-brand-element-fill-vivid);
background-color: var(--wa-color-brand-element-fill-vivid);
border-color: var(--wa-color-brand-fill-vivid);
background-color: var(--wa-color-brand-fill-vivid);
}
/* Checked/indeterminate + focus */
.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control,
.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
.checkbox.checkbox--checked:not(.checkbox--disabled)
.checkbox__input:focus-visible
~ .checkbox__control,
.checkbox.checkbox--indeterminate:not(.checkbox--disabled)
.checkbox__input:focus-visible
~ .checkbox__control {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}

50
src/components/color-picker/color-picker.styles.ts
View File

@@ -1,5 +1,5 @@
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
export default css`
${componentStyles}
@@ -27,7 +27,8 @@ export default css`
}
.color-picker--inline {
border: var(--wa-form-controls-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
border: var(--wa-form-controls-border-style) var(--wa-border-width-thin)
var(--wa-color-surface-outline);
}
.color-picker--inline:focus-visible {
@@ -38,7 +39,11 @@ export default css`
.color-picker__grid {
position: relative;
height: var(--grid-height);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 1) 100%
),
linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
border-top-left-radius: var(--wa-corners-1x);
border-top-right-radius: var(--wa-corners-1x);
@@ -143,7 +148,7 @@ export default css`
}
.color-picker__preview:before {
content: '';
content: "";
position: absolute;
top: 0;
left: 0;
@@ -176,7 +181,7 @@ export default css`
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 var(--wa-color-brand-container-fill-vivid);
box-shadow: 0 0 0 0 var(--wa-color-brand-fill-vivid-alt);
}
70% {
box-shadow: 0 0 0 0.5rem transparent;
@@ -240,10 +245,26 @@ export default css`
}
.color-picker__transparent-bg {
background-image: linear-gradient(45deg, var(--wa-color-neutral-element-fill-muted) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-element-fill-muted) 75%),
linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-element-fill-muted) 75%),
linear-gradient(45deg, var(--wa-color-neutral-element-fill-muted) 25%, transparent 25%);
background-image: linear-gradient(
45deg,
var(--wa-color-neutral-fill-muted-alt) 25%,
transparent 25%
),
linear-gradient(
45deg,
transparent 75%,
var(--wa-color-neutral-fill-muted-alt) 75%
),
linear-gradient(
45deg,
transparent 75%,
var(--wa-color-neutral-fill-muted-alt) 75%
),
linear-gradient(
45deg,
var(--wa-color-neutral-fill-muted-alt) 25%,
transparent 25%
);
background-size: 10px 10px;
background-position: 0 0, 0 0, -5px -5px, 5px 5px;
}
@@ -303,7 +324,7 @@ export default css`
}
.color-dropdown__trigger:before {
content: '';
content: "";
position: absolute;
top: 0;
left: 0;
@@ -311,7 +332,8 @@ export default css`
height: 100%;
border-radius: inherit;
background-color: currentColor;
box-shadow: inset 0 0 0 2px var(--wa-form-controls-color-resting), inset 0 0 0 4px var(--wa-color-white);
box-shadow: inset 0 0 0 2px var(--wa-form-controls-border-color-resting),
inset 0 0 0 4px var(--wa-color-white);
}
.color-dropdown__trigger--empty:before {
@@ -322,7 +344,9 @@ export default css`
outline: none;
}
.color-dropdown__trigger:focus-visible:not(.color-dropdown__trigger--disabled) {
.color-dropdown__trigger:focus-visible:not(
.color-dropdown__trigger--disabled
) {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}

8
src/components/copy-button/copy-button.styles.ts
View File

@@ -1,12 +1,12 @@
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
export default css`
${componentStyles}
:host {
--error-color: var(--wa-color-danger-container-fill-vivid);
--success-color: var(--wa-color-success-container-fill-vivid);
--error-color: var(--wa-color-danger-fill-vivid-alt);
--success-color: var(--wa-color-success-fill-vivid-alt);
display: inline-block;
}

8
src/components/image-comparer/image-comparer.styles.ts
View File

@@ -1,5 +1,5 @@
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
export default css`
${componentStyles}
@@ -49,7 +49,7 @@ export default css`
top: 0;
width: var(--divider-width);
height: 100%;
background-color: var(--wa-color-neutral-container-fill-muted);
background-color: var(--wa-color-neutral-fill-muted);
translate: calc(var(--divider-width) / -2);
cursor: ew-resize;
}
@@ -62,7 +62,7 @@ export default css`
top: calc(50% - (var(--handle-size) / 2));
width: var(--handle-size);
height: var(--handle-size);
background-color: var(--wa-color-neutral-container-fill-muted);
background-color: var(--wa-color-neutral-fill-muted);
border-radius: var(--wa-corners-circle);
font-size: calc(var(--handle-size) * 0.5);
color: var(--wa-color-neutral-text-on-muted);

55
src/components/input/input.styles.ts
View File

@@ -1,6 +1,6 @@
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import formControlStyles from '../../styles/form-control.styles.js';
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import formControlStyles from "../../styles/form-control.styles.js";
export default css`
${componentStyles}
@@ -22,20 +22,22 @@ export default css`
vertical-align: middle;
overflow: hidden;
cursor: text;
transition: var(--wa-transition-fast) border, var(--wa-transition-fast) background-color;
transition: var(--wa-transition-fast) border,
var(--wa-transition-fast) background-color;
}
/* Standard inputs */
.input--standard {
background-color: var(--wa-form-controls-background);
border: var(--wa-form-controls-border-style) var(--wa-form-controls-border-width)
var(--wa-form-controls-color-resting);
border: var(--wa-form-controls-border-style)
var(--wa-form-controls-border-width)
var(--wa-form-controls-border-color-resting);
}
.input--standard.input--focused:not(.input--disabled) {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
border-color: var(--wa-form-controls-color-activated);
border-color: var(--wa-form-controls-border-color-activated);
}
.input--standard.input--disabled {
@@ -46,7 +48,7 @@ export default css`
/* Filled inputs */
.input--filled {
border: none;
background-color: var(--wa-color-neutral-container-fill-muted);
background-color: var(--wa-color-neutral-fill-muted);
color: var(--wa-color-neutral-text-on-muted);
}
@@ -67,8 +69,8 @@ export default css`
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: var(--wa-form-controls-font-line-height);
color: var(--wa-form-controls-color-text);
line-height: var(--wa-form-controls-value-line-height);
color: var(--wa-form-controls-text-color);
border: none;
background: inherit;
box-shadow: none;
@@ -91,7 +93,7 @@ export default css`
.input__control:-webkit-autofill:active {
box-shadow: none;
-webkit-text-fill-color: var(--wa-color-brand-text-on-muted);
caret-color: var(--wa-form-controls-color-text);
caret-color: var(--wa-form-controls-text-color);
}
.input--filled .input__control:-webkit-autofill,
@@ -128,13 +130,16 @@ export default css`
*/
.input--small {
border-radius: var(--wa-corners-1x);
border-radius: var(--wa-form-controls-corners);
font-size: var(--wa-font-size-s);
height: var(--wa-form-controls-height-s);
}
.input--small .input__control {
height: calc(var(--wa-form-controls-height-s) - var(--wa-form-controls-border-width) * 2);
height: calc(
var(--wa-form-controls-height-s) - var(--wa-form-controls-border-width) *
2
);
padding: 0 var(--wa-space-s);
}
@@ -152,13 +157,16 @@ export default css`
}
.input--medium {
border-radius: var(--wa-corners-1x);
border-radius: var(--wa-form-controls-corners);
font-size: var(--wa-font-size-m);
height: var(--wa-form-controls-height-m);
}
.input--medium .input__control {
height: calc(var(--wa-form-controls-height-m) - var(--wa-form-controls-border-width) * 2);
height: calc(
var(--wa-form-controls-height-m) - var(--wa-form-controls-border-width) *
2
);
padding: 0 var(--wa-space-m);
}
@@ -176,13 +184,16 @@ export default css`
}
.input--large {
border-radius: var(--wa-corners-1x);
border-radius: var(--wa-form-controls-corners);
font-size: var(--wa-font-size-l);
height: var(--wa-form-controls-height-l);
}
.input--large .input__control {
height: calc(var(--wa-form-controls-height-l) - var(--wa-form-controls-border-width) * 2);
height: calc(
var(--wa-form-controls-height-l) - var(--wa-form-controls-border-width) *
2
);
padding: 0 var(--wa-space-l);
}
@@ -229,7 +240,7 @@ export default css`
align-items: center;
justify-content: center;
font-size: inherit;
color: var(--wa-color-neutral-element-fill-vivid);
color: var(--wa-color-neutral-fill-vivid);
border: none;
background: none;
padding: 0;
@@ -239,7 +250,7 @@ export default css`
.input__clear:active,
.input__password-toggle:active {
color: color-mix(in oklch, var(--wa-color-neutral-element-fill-vivid), black 12%);
color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 12%);
}
.input__clear:focus,
@@ -257,13 +268,13 @@ export default css`
}
/* Hide the built-in number spinner */
.input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,
.input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {
.input--no-spin-buttons input[type="number"]::-webkit-outer-spin-button,
.input--no-spin-buttons input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
.input--no-spin-buttons input[type='number'] {
.input--no-spin-buttons input[type="number"] {
-moz-appearance: textfield;
}
`;

18
src/components/menu-item/menu-item.styles.ts
View File

@@ -1,5 +1,5 @@
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
export default css`
${componentStyles}
@@ -22,7 +22,7 @@ export default css`
font-size: var(--wa-font-size-m);
font-weight: var(--wa-font-weight-normal);
line-height: var(--wa-line-height-regular);
color: var(--wa-color-neutral-text-on-surface);
color: var(--wa-color-text-normal);
padding: var(--wa-space-2xs) var(--wa-space-2xs);
transition: var(--wa-transition-fast) fill;
user-select: none;
@@ -67,15 +67,15 @@ export default css`
outline: none;
}
:host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,
:host(:hover:not([aria-disabled="true"], :focus-visible)) .menu-item,
.menu-item--submenu-expanded {
background-color: var(--wa-color-neutral-container-fill-muted);
color: var(--wa-color-neutral-text-on-muted);
background-color: var(--wa-color-neutral-fill-muted);
color: var(--wa-color-text-normal);
}
:host(:focus-visible) .menu-item {
outline: none;
background-color: var(--wa-color-brand-element-fill-vivid);
background-color: var(--wa-color-brand-fill-vivid);
color: var(--wa-color-brand-text-on-vivid);
opacity: 1;
}
@@ -97,7 +97,7 @@ export default css`
/* Add elevation and z-index to submenus */
wa-popup::part(popup) {
box-shadow: var(--wa-shadow-level-3);
box-shadow: var(--wa-shadow-level-2);
z-index: var(--wa-z-index-dropdown);
margin-left: var(--submenu-offset);
}
@@ -107,7 +107,7 @@ export default css`
}
@media (forced-colors: active) {
:host(:hover:not([aria-disabled='true'])) .menu-item,
:host(:hover:not([aria-disabled="true"])) .menu-item,
:host(:focus-visible) .menu-item {
outline: dashed 1px SelectedItem;
outline-offset: -1px;

13
src/components/option/option.styles.ts
View File

@@ -1,5 +1,5 @@
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
export default css`
${componentStyles}
@@ -22,19 +22,20 @@ export default css`
font-weight: var(--wa-font-weight-normal);
line-height: var(--wa-line-height-regular);
color: var(--wa-color-neutral-text-on-surface);
padding: var(--wa-space-xs) var(--wa-space-m) var(--wa-space-xs) var(--wa-space-xs);
padding: var(--wa-space-xs) var(--wa-space-m) var(--wa-space-xs)
var(--wa-space-xs);
transition: var(--wa-transition-fast) fill;
cursor: pointer;
}
.option--hover:not(.option--current):not(.option--disabled) {
background-color: var(--wa-color-neutral-element-fill-muted);
background-color: var(--wa-color-neutral-fill-muted-alt);
color: var(--wa-color-neutral-text-on-muted);
}
.option--current,
.option--current.option--disabled {
background-color: var(--wa-color-brand-element-fill-vivid);
background-color: var(--wa-color-brand-fill-vivid);
color: var(--wa-color-brand-text-on-vivid);
opacity: 1;
}
@@ -80,7 +81,7 @@ export default css`
}
@media (forced-colors: active) {
:host(:hover:not([aria-disabled='true'])) .option {
:host(:hover:not([aria-disabled="true"])) .option {
outline: dashed 1px SelectedItem;
outline-offset: -1px;
}

8
src/components/progress-bar/progress-bar.styles.ts
View File

@@ -1,13 +1,13 @@
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
export default css`
${componentStyles}
:host {
--height: 1rem;
--track-color: var(--wa-color-neutral-container-fill-muted);
--indicator-color: var(--wa-color-brand-element-fill-vivid);
--track-color: var(--wa-color-neutral-fill-muted);
--indicator-color: var(--wa-color-brand-fill-vivid);
--label-color: var(--wa-color-brand-text-on-vivid);
display: block;

16
src/components/progress-ring/progress-ring.styles.ts
View File

@@ -1,5 +1,5 @@
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
export default css`
${componentStyles}
@@ -7,9 +7,9 @@ export default css`
:host {
--size: 8rem;
--track-width: 0.25rem;
--track-color: var(--wa-color-neutral-container-fill-muted);
--track-color: var(--wa-color-neutral-fill-muted);
--indicator-width: var(--track-width);
--indicator-color: var(--wa-color-brand-element-fill-vivid);
--indicator-color: var(--wa-color-brand-fill-vivid);
--indicator-transition-duration: 0.35s;
display: inline-flex;
@@ -31,7 +31,9 @@ export default css`
.progress-ring__track,
.progress-ring__indicator {
--radius: calc(var(--size) / 2 - max(var(--track-width), var(--indicator-width)) * 0.5);
--radius: calc(
var(--size) / 2 - max(var(--track-width), var(--indicator-width)) * 0.5
);
--circumference: calc(var(--radius) * 2 * 3.141592654);
fill: none;
@@ -52,7 +54,9 @@ export default css`
transition-property: stroke-dashoffset;
transition-duration: var(--indicator-transition-duration);
stroke-dasharray: var(--circumference) var(--circumference);
stroke-dashoffset: calc(var(--circumference) - var(--percentage) * var(--circumference));
stroke-dashoffset: calc(
var(--circumference) - var(--percentage) * var(--circumference)
);
}
.progress-ring__label {

18
src/components/radio/radio.styles.ts
View File

@@ -1,5 +1,5 @@
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
export default css`
${componentStyles}
@@ -18,7 +18,7 @@ export default css`
font-family: var(--wa-font-family-body);
font-size: var(--wa-font-size-m);
font-weight: var(--wa-font-weight-normal);
color: var(--wa-form-controls-color-text);
color: var(--wa-form-controls-text-color);
vertical-align: middle;
cursor: pointer;
}
@@ -52,11 +52,13 @@ export default css`
justify-content: center;
width: var(--toggle-size);
height: var(--toggle-size);
border: var(--wa-border-style) var(--wa-form-controls-border-width) var(--wa-form-controls-color-resting);
border: var(--wa-border-style) var(--wa-form-controls-border-width)
var(--wa-form-controls-border-color-resting);
border-radius: 50%;
background-color: var(--wa-form-controls-background);
color: transparent;
transition: var(--wa-transition-fast) border-color, var(--wa-transition-fast) background-color,
transition: var(--wa-transition-fast) border-color,
var(--wa-transition-fast) background-color,
var(--wa-transition-fast) color, var(--wa-transition-fast) box-shadow;
}
@@ -71,8 +73,8 @@ export default css`
/* Checked */
.radio--checked .radio__control {
color: var(--wa-color-brand-text-on-vivid);
border-color: var(--wa-color-brand-element-fill-vivid);
background-color: var(--wa-color-brand-element-fill-vivid);
border-color: var(--wa-color-brand-fill-vivid);
background-color: var(--wa-color-brand-fill-vivid);
}
/* Checked + focus */
@@ -94,7 +96,7 @@ export default css`
.radio__label {
display: inline-block;
color: var(--wa-form-controls-color-text);
color: var(--wa-form-controls-text-color);
line-height: var(--toggle-size);
margin-inline-start: 0.5em;
user-select: none;

45
src/components/range/range.styles.ts
View File

@@ -1,6 +1,6 @@
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import formControlStyles from '../../styles/form-control.styles.js';
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import formControlStyles from "../../styles/form-control.styles.js";
export default css`
${componentStyles}
@@ -9,8 +9,8 @@ export default css`
:host {
--thumb-size: 20px;
--tooltip-offset: calc(var(--wa-tooltip-arrow-size) * 2.5);
--track-color-active: var(--wa-color-neutral-element-fill-muted);
--track-color-inactive: var(--wa-color-neutral-element-fill-muted);
--track-color-active: var(--wa-color-neutral-fill-muted-alt);
--track-color-inactive: var(--wa-color-neutral-fill-muted-alt);
--track-active-offset: 0%;
--track-height: 6px;
@@ -35,10 +35,12 @@ export default css`
background-image: linear-gradient(
to right,
var(--track-color-inactive) 0%,
var(--track-color-inactive) min(var(--percent), var(--track-active-offset)),
var(--track-color-inactive)
min(var(--percent), var(--track-active-offset)),
var(--track-color-active) min(var(--percent), var(--track-active-offset)),
var(--track-color-active) max(var(--percent), var(--track-active-offset)),
var(--track-color-inactive) max(var(--percent), var(--track-active-offset)),
var(--track-color-inactive)
max(var(--percent), var(--track-active-offset)),
var(--track-color-inactive) 100%
);
}
@@ -47,10 +49,12 @@ export default css`
background-image: linear-gradient(
to left,
var(--track-color-inactive) 0%,
var(--track-color-inactive) min(var(--percent), var(--track-active-offset)),
var(--track-color-inactive)
min(var(--percent), var(--track-active-offset)),
var(--track-color-active) min(var(--percent), var(--track-active-offset)),
var(--track-color-active) max(var(--percent), var(--track-active-offset)),
var(--track-color-inactive) max(var(--percent), var(--track-active-offset)),
var(--track-color-inactive)
max(var(--percent), var(--track-active-offset)),
var(--track-color-inactive) 100%
);
}
@@ -68,9 +72,9 @@ export default css`
width: var(--thumb-size);
height: var(--thumb-size);
border-radius: 50%;
background-color: var(--wa-color-brand-element-fill-vivid);
border: var(--wa-form-controls-border-style) var(--wa-form-controls-border-width)
var(--wa-color-brand-element-fill-vivid);
background-color: var(--wa-color-brand-fill-vivid);
border: var(--wa-form-controls-border-style)
var(--wa-form-controls-border-width) var(--wa-color-brand-fill-vivid);
-webkit-appearance: none;
margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);
cursor: pointer;
@@ -109,9 +113,10 @@ export default css`
height: var(--thumb-size);
width: var(--thumb-size);
border-radius: 50%;
background-color: var(--wa-color-brand-element-fill-vivid);
border-color: var(--wa-color-brand-element-fill-vivid);
transition: var(--wa-transition-fast) border-color, var(--wa-transition-fast) background-color,
background-color: var(--wa-color-brand-fill-vivid);
border-color: var(--wa-color-brand-fill-vivid);
transition: var(--wa-transition-fast) border-color,
var(--wa-transition-fast) background-color,
var(--wa-transition-fast) color, var(--wa-transition-fast) box-shadow;
cursor: pointer;
}
@@ -148,7 +153,7 @@ export default css`
z-index: var(--wa-z-index-tooltip);
left: 0;
border-radius: var(--wa-corners-1x);
background-color: var(--wa-color-neutral-element-fill-vivid);
background-color: var(--wa-color-neutral-fill-vivid);
font-family: var(--wa-font-family-body);
font-size: var(--wa-font-size-s);
font-weight: var(--wa-font-weight-regular);
@@ -161,7 +166,7 @@ export default css`
}
.range__tooltip:after {
content: '';
content: "";
position: absolute;
width: 0;
height: 0;
@@ -179,7 +184,8 @@ export default css`
}
.range--tooltip-top .range__tooltip:after {
border-top: var(--wa-tooltip-arrow-size) solid var(--wa-color-neutral-element-fill-vivid);
border-top: var(--wa-tooltip-arrow-size) solid
var(--wa-color-neutral-fill-vivid);
border-left: var(--wa-tooltip-arrow-size) solid transparent;
border-right: var(--wa-tooltip-arrow-size) solid transparent;
top: 100%;
@@ -191,7 +197,8 @@ export default css`
}
.range--tooltip-bottom .range__tooltip:after {
border-bottom: var(--wa-tooltip-arrow-size) solid var(--wa-color-neutral-element-fill-vivid);
border-bottom: var(--wa-tooltip-arrow-size) solid
var(--wa-color-neutral-fill-vivid);
border-left: var(--wa-tooltip-arrow-size) solid transparent;
border-right: var(--wa-tooltip-arrow-size) solid transparent;
bottom: 100%;

6
src/components/rating/rating.styles.ts
View File

@@ -1,11 +1,11 @@
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
export default css`
${componentStyles}
:host {
--symbol-color: var(--wa-color-neutral-element-fill-muted);
--symbol-color: var(--wa-color-neutral-fill-muted-alt);
--symbol-color-active: var(--wa-color-yellow-70);
--symbol-size: var(--wa-font-size-l);
--symbol-spacing: var(--wa-space-3xs);

50
src/components/select/select.styles.ts
View File

@@ -1,6 +1,6 @@
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import formControlStyles from '../../styles/form-control.styles.js';
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import formControlStyles from "../../styles/form-control.styles.js";
export default css`
${componentStyles}
@@ -23,11 +23,11 @@ export default css`
z-index: var(--wa-z-index-dropdown);
}
.select[data-current-placement^='top']::part(popup) {
.select[data-current-placement^="top"]::part(popup) {
transform-origin: bottom;
}
.select[data-current-placement^='bottom']::part(popup) {
.select[data-current-placement^="bottom"]::part(popup) {
transform-origin: top;
}
@@ -45,7 +45,8 @@ export default css`
vertical-align: middle;
overflow: hidden;
cursor: pointer;
transition: var(--wa-transition-fast) color, var(--wa-transition-fast) border, var(--wa-transition-fast) box-shadow,
transition: var(--wa-transition-fast) color,
var(--wa-transition-fast) border, var(--wa-transition-fast) box-shadow,
var(--wa-transition-fast) background-color;
}
@@ -55,8 +56,8 @@ export default css`
font: inherit;
border: none;
background: none;
line-height: var(--wa-form-controls-font-line-height);
color: var(--wa-form-controls-color-text);
line-height: var(--wa-form-controls-value-line-height);
color: var(--wa-form-controls-text-color);
cursor: inherit;
overflow: hidden;
padding: 0;
@@ -111,8 +112,9 @@ export default css`
/* Standard selects */
.select--standard .select__combobox {
background-color: var(--wa-form-controls-background);
border: var(--wa-form-controls-border-style) var(--wa-form-controls-border-width)
var(--wa-form-controls-color-resting);
border: var(--wa-form-controls-border-style)
var(--wa-form-controls-border-width)
var(--wa-form-controls-border-color-resting);
}
.select--standard.select--disabled .select__combobox {
@@ -130,7 +132,7 @@ export default css`
/* Filled selects */
.select--filled .select__combobox {
border: none;
background-color: var(--wa-color-neutral-container-fill-muted);
background-color: var(--wa-color-neutral-fill-muted);
color: var(--wa-color-neutral-text-on-muted);
}
@@ -141,13 +143,13 @@ export default css`
.select--filled:not(.select--disabled).select--open .select__combobox,
.select--filled:not(.select--disabled).select--focused .select__combobox {
background-color: var(--wa-color-neutral-container-fill-muted);
background-color: var(--wa-color-neutral-fill-muted);
color: var(--wa-color-neutral-text-on-muted);
}
/* Sizes */
.select--small .select__combobox {
border-radius: var(--wa-corners-1x);
border-radius: var(--wa-form-controls-corners);
font-size: var(--wa-font-size-s);
min-height: var(--wa-form-controls-height-s);
padding-block: 0;
@@ -162,7 +164,8 @@ export default css`
margin-inline-end: var(--wa-space-s);
}
.select--small.select--multiple:not(.select--placeholder-visible) .select__combobox {
.select--small.select--multiple:not(.select--placeholder-visible)
.select__combobox {
padding-block: 2px;
padding-inline-start: 0;
}
@@ -172,7 +175,7 @@ export default css`
}
.select--medium .select__combobox {
border-radius: var(--wa-corners-1x);
border-radius: var(--wa-form-controls-corners);
font-size: var(--wa-font-size-m);
min-height: var(--wa-form-controls-height-m);
padding-block: 0;
@@ -187,7 +190,8 @@ export default css`
margin-inline-end: var(--wa-space-m);
}
.select--medium.select--multiple:not(.select--placeholder-visible) .select__combobox {
.select--medium.select--multiple:not(.select--placeholder-visible)
.select__combobox {
padding-inline-start: 0;
padding-block: 3px;
}
@@ -197,7 +201,7 @@ export default css`
}
.select--large .select__combobox {
border-radius: var(--wa-corners-1x);
border-radius: var(--wa-form-controls-corners);
font-size: var(--wa-font-size-l);
min-height: var(--wa-form-controls-height-l);
padding-block: 0;
@@ -212,7 +216,8 @@ export default css`
margin-inline-end: var(--wa-space-l);
}
.select--large.select--multiple:not(.select--placeholder-visible) .select__combobox {
.select--large.select--multiple:not(.select--placeholder-visible)
.select__combobox {
padding-inline-start: 0;
padding-block: 4px;
}
@@ -239,7 +244,7 @@ export default css`
flex: 0;
display: inline-flex;
align-items: center;
color: var(--wa-form-controls-color-activated);
color: var(--wa-form-controls-border-color-activated);
}
/* Clear button */
@@ -248,7 +253,7 @@ export default css`
align-items: center;
justify-content: center;
font-size: inherit;
color: var(--wa-color-neutral-element-fill-vivid);
color: var(--wa-color-neutral-fill-vivid);
border: none;
background: none;
padding: 0;
@@ -261,7 +266,7 @@ export default css`
}
.select__clear:active {
color: color-mix(in oklch, var(--wa-color-neutral-element-fill-vivid), black 12%);
color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 12%);
}
/* Expand icon */
@@ -287,7 +292,8 @@ export default css`
font-weight: var(--wa-font-weight-normal);
box-shadow: var(--wa-shadow-level-3);
background: var(--wa-color-surface-raised);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
border: var(--wa-border-style) var(--wa-border-width-thin)
var(--wa-color-surface-outline);
border-radius: var(--wa-corners-1x);
padding-block: var(--wa-space-xs);
padding-inline: 0;

20
src/components/skeleton/skeleton.styles.ts
View File

@@ -1,13 +1,17 @@
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
export default css`
${componentStyles}
:host {
--border-radius: var(--wa-corners-pill);
--color: var(--wa-color-neutral-container-fill-muted);
--sheen-color: color-mix(in oklch, var(--wa-color-neutral-container-fill-muted), white 50%);
--color: var(--wa-color-neutral-fill-muted);
--sheen-color: color-mix(
in oklch,
var(--wa-color-neutral-fill-muted),
white 50%
);
display: block;
position: relative;
@@ -27,7 +31,13 @@ export default css`
}
.skeleton--sheen .skeleton__indicator {
background: linear-gradient(270deg, var(--sheen-color), var(--color), var(--color), var(--sheen-color));
background: linear-gradient(
270deg,
var(--sheen-color),
var(--color),
var(--color),
var(--sheen-color)
);
background-size: 400% 100%;
background-size: 400% 100%;
animation: sheen 8s ease-in-out infinite;

8
src/components/spinner/spinner.styles.ts
View File

@@ -1,13 +1,13 @@
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
export default css`
${componentStyles}
:host {
--track-width: 2px;
--track-color: var(--wa-color-neutral-container-fill-muted);
--indicator-color: var(--wa-color-brand-element-fill-vivid);
--track-color: var(--wa-color-neutral-fill-muted);
--indicator-color: var(--wa-color-brand-fill-vivid);
--speed: 2s;
display: inline-flex;

12
src/components/split-panel/split-panel.styles.ts
View File

@@ -1,5 +1,5 @@
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
export default css`
${componentStyles}
@@ -24,7 +24,7 @@ export default css`
position: relative;
align-items: center;
justify-content: center;
background-color: var(--wa-color-neutral-element-outline-muted);
background-color: var(--wa-color-neutral-outline-muted-alt);
color: var(--wa-color-neutral-text-on-muted);
z-index: 1;
}
@@ -34,7 +34,7 @@ export default css`
}
:host(:not([disabled])) .divider:focus-visible {
background-color: var(--wa-color-brand-element-outline-vivid);
background-color: var(--wa-color-brand-outline-vivid);
color: var(--wa-color-brand-text-on-vivid);
}
@@ -49,7 +49,7 @@ export default css`
:host(:not([vertical])) .divider::after {
display: flex;
content: '';
content: "";
position: absolute;
height: 100%;
left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
@@ -66,7 +66,7 @@ export default css`
}
:host([vertical]) .divider::after {
content: '';
content: "";
position: absolute;
width: 100%;
top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);

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

@@ -1,5 +1,5 @@
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
export default css`
${componentStyles}
@@ -8,7 +8,7 @@ export default css`
display: inline-block;
}
:host([size='small']) {
:host([size="small"]) {
--height: var(--wa-form-control-toggle-size-s);
--thumb-size: calc(var(--wa-form-control-toggle-size-s) + 4px);
--width: calc(var(--height) * 2);
@@ -16,7 +16,7 @@ export default css`
font-size: var(--wa-font-size-s);
}
:host([size='medium']) {
:host([size="medium"]) {
--height: var(--wa-form-control-toggle-size-m);
--thumb-size: calc(var(--wa-form-control-toggle-size-m) + 4px);
--width: calc(var(--height) * 2);
@@ -24,7 +24,7 @@ export default css`
font-size: var(--wa-font-size-m);
}
:host([size='large']) {
:host([size="large"]) {
--height: var(--wa-form-control-toggle-size-l);
--thumb-size: calc(var(--wa-form-control-toggle-size-l) + 4px);
--width: calc(var(--height) * 2);
@@ -39,7 +39,7 @@ export default css`
font-family: var(--wa-font-family-body);
font-weight: var(--wa-font-weight-normal);
font-size: inherit;
color: var(--wa-form-controls-color-text);
color: var(--wa-form-controls-text-color);
vertical-align: middle;
cursor: pointer;
}
@@ -52,10 +52,11 @@ export default css`
justify-content: center;
width: var(--width);
height: var(--height);
background-color: var(--wa-color-neutral-element-fill-vivid);
border: solid var(--wa-border-width-thin) var(--wa-color-neutral-container-fill-muted);
background-color: var(--wa-color-neutral-fill-vivid);
border: solid var(--wa-border-width-thin) var(--wa-color-neutral-fill-muted);
border-radius: var(--height);
transition: var(--wa-transition-fast) border-color, var(--wa-transition-fast) background-color;
transition: var(--wa-transition-fast) border-color,
var(--wa-transition-fast) background-color;
}
.switch__control .switch__thumb {
@@ -63,11 +64,13 @@ export default css`
height: var(--thumb-size);
background-color: var(--wa-form-controls-background);
border-radius: 50%;
border: var(--wa-form-controls-border-style) var(--wa-form-controls-border-width)
var(--wa-color-neutral-element-outline-vivid);
border: var(--wa-form-controls-border-style)
var(--wa-form-controls-border-width) var(--wa-color-neutral-outline-vivid);
translate: calc((var(--width) - var(--height)) / -2);
transition: var(--wa-transition-fast) translate ease, var(--wa-transition-fast) background-color,
var(--wa-transition-fast) border-color, var(--wa-transition-fast) box-shadow;
transition: var(--wa-transition-fast) translate ease,
var(--wa-transition-fast) background-color,
var(--wa-transition-fast) border-color,
var(--wa-transition-fast) box-shadow;
}
.switch__input {
@@ -79,19 +82,22 @@ export default css`
}
/* Focus */
.switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
.switch:not(.switch--checked):not(.switch--disabled)
.switch__input:focus-visible
~ .switch__control
.switch__thumb {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
/* Checked */
.switch--checked .switch__control {
background-color: var(--wa-color-brand-element-fill-vivid);
border-color: var(--wa-color-brand-element-fill-vivid);
background-color: var(--wa-color-brand-fill-vivid);
border-color: var(--wa-color-brand-fill-vivid);
}
.switch--checked .switch__control .switch__thumb {
border-color: var(--wa-color-brand-element-outline-vivid);
border-color: var(--wa-color-brand-outline-vivid);
translate: calc((var(--width) - var(--height)) / 2);
}
@@ -115,7 +121,9 @@ export default css`
}
@media (forced-colors: active) {
.switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb,
.switch.switch--checked:not(.switch--disabled)
.switch__control:hover
.switch__thumb,
.switch--checked .switch__control .switch__thumb {
background-color: ButtonText;
}

11
src/components/tab-group/tab-group.styles.ts
View File

@@ -1,12 +1,12 @@
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
export default css`
${componentStyles}
:host {
--indicator-color: var(--wa-color-brand-element-fill-vivid);
--track-color: var(--wa-color-neutral-element-fill-muted);
--indicator-color: var(--wa-color-brand-fill-vivid);
--track-color: var(--wa-color-neutral-fill-muted-alt);
--track-width: 2px;
display: block;
@@ -24,7 +24,8 @@ export default css`
.tab-group__indicator {
position: absolute;
transition: var(--wa-transition-fast) translate ease, var(--wa-transition-fast) width ease;
transition: var(--wa-transition-fast) translate ease,
var(--wa-transition-fast) width ease;
}
.tab-group--has-scroll-controls .tab-group__nav-container {

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

@@ -13,7 +13,7 @@ export default css`
align-items: center;
font-family: var(--wa-font-family-body);
font-size: var(--wa-font-size-s);
font-weight: var(--wa-font-weight-medium);
font-weight: var(--wa-font-weight-action);
border-radius: var(--wa-corners-1x);
color: var(--wa-color-neutral-text-on-surface);
padding: var(--wa-space-m) var(--wa-space-l);

24
src/components/tag/tag.styles.ts
View File

@@ -1,5 +1,5 @@
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
export default css`
${componentStyles}
@@ -27,8 +27,8 @@ export default css`
*/
.tag--brand {
background-color: var(--wa-color-brand-container-fill-muted);
border-color: var(--wa-color-brand-element-outline-muted);
background-color: var(--wa-color-brand-fill-muted);
border-color: var(--wa-color-brand-outline-muted-alt);
color: var(--wa-color-brand-text-on-muted);
}
@@ -37,8 +37,8 @@ export default css`
}
.tag--success {
background-color: var(--wa-color-success-container-fill-muted);
border-color: var(--wa-color-success-element-outline-muted);
background-color: var(--wa-color-success-fill-muted);
border-color: var(--wa-color-success-outline-muted-alt);
color: var(--wa-color-success-text-on-muted);
}
@@ -47,8 +47,8 @@ export default css`
}
.tag--neutral {
background-color: var(--wa-color-neutral-container-fill-muted);
border-color: var(--wa-color-neutral-element-outline-muted);
background-color: var(--wa-color-neutral-fill-muted);
border-color: var(--wa-color-neutral-outline-muted-alt);
color: var(--wa-color-neutral-text-on-muted);
}
@@ -57,8 +57,8 @@ export default css`
}
.tag--warning {
background-color: var(--wa-color-warning-container-fill-muted);
border-color: var(--wa-color-warning-element-outline-muted);
background-color: var(--wa-color-warning-fill-muted);
border-color: var(--wa-color-warning-outline-muted-alt);
color: var(--wa-color-warning-text-on-muted);
}
@@ -67,8 +67,8 @@ export default css`
}
.tag--danger {
background-color: var(--wa-color-danger-container-fill-muted);
border-color: var(--wa-color-danger-element-outline-muted);
background-color: var(--wa-color-danger-fill-muted);
border-color: var(--wa-color-danger-outline-muted-alt);
color: var(--wa-color-danger-text-on-muted);
}

30
src/components/textarea/textarea.styles.ts
View File

@@ -1,6 +1,6 @@
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import formControlStyles from '../../styles/form-control.styles.js';
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import formControlStyles from "../../styles/form-control.styles.js";
export default css`
${componentStyles}
@@ -17,24 +17,26 @@ export default css`
width: 100%;
font-family: var(--wa-font-family-body);
font-weight: var(--wa-font-weight-normal);
color: var(--wa-form-controls-color-text);
line-height: var(--wa-form-controls-font-line-height);
color: var(--wa-form-controls-text-color);
line-height: var(--wa-form-controls-value-line-height);
vertical-align: middle;
transition: var(--wa-transition-fast) border, var(--wa-transition-fast) background-color;
transition: var(--wa-transition-fast) border,
var(--wa-transition-fast) background-color;
cursor: text;
}
/* Standard textareas */
.textarea--standard {
background-color: var(--wa-form-controls-background);
border: var(--wa-form-controls-border-style) var(--wa-form-controls-border-width)
var(--wa-form-controls-color-resting);
border: var(--wa-form-controls-border-style)
var(--wa-form-controls-border-width)
var(--wa-form-controls-border-color-resting);
}
.textarea--standard.textarea--focused:not(.textarea--disabled) {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
border-color: var(--wa-form-controls-color-activated);
border-color: var(--wa-form-controls-border-color-activated);
}
.textarea--standard.textarea--disabled {
@@ -45,7 +47,7 @@ export default css`
/* Filled textareas */
.textarea--filled {
border: none;
background-color: var(--wa-color-neutral-container-fill-muted);
background-color: var(--wa-color-neutral-fill-muted);
color: var(--wa-color-neutral-text-on-muted);
}
@@ -65,7 +67,7 @@ export default css`
font-size: inherit;
font-weight: inherit;
line-height: 1.4;
color: var(--wa-form-controls-color-text);
color: var(--wa-form-controls-text-color);
border: none;
background: none;
box-shadow: none;
@@ -94,7 +96,7 @@ export default css`
*/
.textarea--small {
border-radius: var(--wa-corners-1x);
border-radius: var(--wa-form-controls-corners);
font-size: var(--wa-font-size-s);
}
@@ -103,7 +105,7 @@ export default css`
}
.textarea--medium {
border-radius: var(--wa-corners-1x);
border-radius: var(--wa-form-controls-corners);
font-size: var(--wa-font-size-m);
}
@@ -112,7 +114,7 @@ export default css`
}
.textarea--large {
border-radius: var(--wa-corners-1x);
border-radius: var(--wa-form-controls-corners);
font-size: var(--wa-font-size-l);
}

16
src/components/tooltip/tooltip.styles.ts
View File

@@ -1,5 +1,5 @@
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
export default css`
${componentStyles}
@@ -14,7 +14,7 @@ export default css`
.tooltip {
--arrow-size: var(--wa-tooltip-arrow-size);
--arrow-color: var(--wa-color-neutral-element-fill-vivid);
--arrow-color: var(--wa-color-neutral-fill-vivid-alt);
}
.tooltip::part(popup) {
@@ -22,19 +22,19 @@ export default css`
z-index: var(--wa-z-index-tooltip);
}
.tooltip[placement^='top']::part(popup) {
.tooltip[placement^="top"]::part(popup) {
transform-origin: bottom;
}
.tooltip[placement^='bottom']::part(popup) {
.tooltip[placement^="bottom"]::part(popup) {
transform-origin: top;
}
.tooltip[placement^='left']::part(popup) {
.tooltip[placement^="left"]::part(popup) {
transform-origin: right;
}
.tooltip[placement^='right']::part(popup) {
.tooltip[placement^="right"]::part(popup) {
transform-origin: left;
}
@@ -43,7 +43,7 @@ export default css`
width: max-content;
max-width: var(--max-width);
border-radius: var(--wa-corners-1x);
background-color: var(--wa-color-neutral-element-fill-vivid);
background-color: var(--wa-color-neutral-fill-vivid-alt);
font-family: var(--wa-font-family-body);
font-size: var(--wa-font-size-s);
font-weight: var(--wa-font-weight-regular);

27
src/components/tree-item/tree-item.styles.ts
View File

@@ -1,5 +1,5 @@
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
export default css`
${componentStyles}
@@ -57,7 +57,7 @@ export default css`
align-items: center;
justify-content: center;
box-sizing: content-box;
color: var(--wa-color-neutral-element-fill-vivid);
color: var(--wa-color-neutral-fill-vivid);
padding: var(--wa-space-xs);
width: 1rem;
height: 1rem;
@@ -77,8 +77,8 @@ export default css`
rotate: -90deg;
}
.tree-item--expanded slot[name='expand-icon'],
.tree-item:not(.tree-item--expanded) slot[name='collapse-icon'] {
.tree-item--expanded slot[name="expand-icon"],
.tree-item:not(.tree-item--expanded) slot[name="collapse-icon"] {
display: none;
}
@@ -108,13 +108,13 @@ export default css`
z-index: 2;
}
:host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
background-color: var(--wa-color-neutral-container-fill-muted);
border-inline-start-color: var(--wa-color-brand-element-outline-vivid);
:host(:not([aria-disabled="true"])) .tree-item--selected .tree-item__item {
background-color: var(--wa-color-neutral-fill-muted);
border-inline-start-color: var(--wa-color-brand-outline-vivid);
}
:host(:not([aria-disabled='true'])) .tree-item__expand-button {
color: var(--wa-color-neutral-element-fill-vivid);
:host(:not([aria-disabled="true"])) .tree-item__expand-button {
color: var(--wa-color-neutral-fill-vivid);
}
.tree-item__label {
@@ -134,12 +134,13 @@ export default css`
}
.tree-item__children::before {
content: '';
content: "";
position: absolute;
top: var(--indent-guide-offset);
bottom: var(--indent-guide-offset);
left: calc(1em - (var(--indent-guide-width) / 2) - 1px);
border-inline-end: var(--indent-guide-width) var(--indent-guide-style) var(--indent-guide-color);
border-inline-end: var(--indent-guide-width) var(--indent-guide-style)
var(--indent-guide-color);
z-index: 1;
}
@@ -149,7 +150,7 @@ export default css`
}
@media (forced-colors: active) {
:host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
:host(:not([aria-disabled="true"])) .tree-item--selected .tree-item__item {
outline: dashed 1px SelectedItem;
}
}

118
src/themes/default.css
View File

@@ -74,6 +74,7 @@
--wa-color-text-normal: var(--wa-color-neutral-10);
--wa-color-text-quiet: var(--wa-color-neutral-40);
--wa-color-text-inverse: var(--wa-color-white);
--wa-color-text-link: var(--wa-color-brand-text-on-surface);
@@ -88,63 +89,66 @@
/**
* Semantic color variants
*/
--wa-color-brand-container-fill-vivid: var(--wa-color-blue-40);
--wa-color-brand-container-fill-muted: var(--wa-color-blue-95);
--wa-color-brand-container-outline-vivid: var(--wa-color-blue-30);
--wa-color-brand-container-outline-muted: var(--wa-color-blue-90);
--wa-color-brand-element-fill-vivid: var(--wa-color-blue-50);
--wa-color-brand-element-fill-muted: var(--wa-color-blue-90);
--wa-color-brand-element-outline-vivid: var(--wa-color-blue-50);
--wa-color-brand-element-outline-muted: var(--wa-color-blue-80);
--wa-color-brand-text-on-vivid: var(--wa-color-white);
/* TODO: Add comments for semantic color tokens and usage expectations */
/* TODO: Add tokens for hover and active tints */
/* CONSIDER: Change -alt naming to -tint or -shade? */
--wa-color-brand-fill-vivid: var(--wa-color-blue-50);
--wa-color-brand-fill-vivid-alt: var(--wa-color-blue-40);
--wa-color-brand-fill-muted: var(--wa-color-blue-95);
--wa-color-brand-fill-muted-alt: var(--wa-color-blue-90);
--wa-color-brand-outline-vivid: var(--wa-color-blue-50);
--wa-color-brand-outline-vivid-alt: var(--wa-color-blue-30);
--wa-color-brand-outline-muted: var(--wa-color-blue-90);
--wa-color-brand-outline-muted-alt: var(--wa-color-blue-80);
--wa-color-brand-text-on-vivid: var(--wa-color-text-inverse);
--wa-color-brand-text-on-muted: var(--wa-color-blue-40);
--wa-color-brand-text-on-surface: var(--wa-color-blue-50);
--wa-color-success-container-fill-vivid: var(--wa-color-green-40);
--wa-color-success-container-fill-muted: var(--wa-color-green-95);
--wa-color-success-container-outline-vivid: var(--wa-color-green-30);
--wa-color-success-container-outline-muted: var(--wa-color-green-90);
--wa-color-success-element-fill-vivid: var(--wa-color-green-50);
--wa-color-success-element-fill-muted: var(--wa-color-green-90);
--wa-color-success-element-outline-vivid: var(--wa-color-green-50);
--wa-color-success-element-outline-muted: var(--wa-color-green-80);
--wa-color-success-text-on-vivid: var(--wa-color-white);
--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-50);
--wa-color-success-outline-vivid-alt: var(--wa-color-green-30);
--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-container-fill-vivid: var(--wa-color-yellow-40);
--wa-color-warning-container-fill-muted: var(--wa-color-yellow-95);
--wa-color-warning-container-outline-vivid: var(--wa-color-yellow-30);
--wa-color-warning-container-outline-muted: var(--wa-color-yellow-90);
--wa-color-warning-element-fill-vivid: var(--wa-color-yellow-50);
--wa-color-warning-element-fill-muted: var(--wa-color-yellow-90);
--wa-color-warning-element-outline-vivid: var(--wa-color-yellow-50);
--wa-color-warning-element-outline-muted: var(--wa-color-yellow-80);
--wa-color-warning-text-on-vivid: var(--wa-color-white);
--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-50);
--wa-color-warning-outline-vivid-alt: var(--wa-color-yellow-30);
--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-container-fill-vivid: var(--wa-color-red-40);
--wa-color-danger-container-fill-muted: var(--wa-color-red-95);
--wa-color-danger-container-outline-vivid: var(--wa-color-red-30);
--wa-color-danger-container-outline-muted: var(--wa-color-red-90);
--wa-color-danger-element-fill-vivid: var(--wa-color-red-50);
--wa-color-danger-element-fill-muted: var(--wa-color-red-90);
--wa-color-danger-element-outline-vivid: var(--wa-color-red-50);
--wa-color-danger-element-outline-muted: var(--wa-color-red-80);
--wa-color-danger-text-on-vivid: var(--wa-color-white);
--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-50);
--wa-color-danger-outline-vivid-alt: var(--wa-color-red-30);
--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-container-fill-vivid: var(--wa-color-neutral-40);
--wa-color-neutral-container-fill-muted: var(--wa-color-neutral-95);
--wa-color-neutral-container-outline-vivid: var(--wa-color-neutral-30);
--wa-color-neutral-container-outline-muted: var(--wa-color-neutral-90);
--wa-color-neutral-element-fill-vivid: var(--wa-color-neutral-50);
--wa-color-neutral-element-fill-muted: var(--wa-color-neutral-90);
--wa-color-neutral-element-outline-vivid: var(--wa-color-neutral-50);
--wa-color-neutral-element-outline-muted: var(--wa-color-neutral-80);
--wa-color-neutral-text-on-vivid: var(--wa-color-white);
--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-50);
--wa-color-neutral-outline-vivid-alt: var(--wa-color-neutral-30);
--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);
@@ -153,16 +157,18 @@
*/
--wa-font-family-heading: system-ui;
--wa-font-family-body: system-ui;
--wa-font-family-code: 'Noto Sans Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
--wa-font-family-longform: 'Lora', 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-medium);
--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 */
@@ -236,9 +242,9 @@
* Shadows
*/
--wa-shadow-level-0: none;
--wa-shadow-level-1: 0 0.0625rem 0.125rem rgb(0 0 0 / 0.2);
--wa-shadow-level-2: 0 0.125rem 0.25rem rgb(0 0 0 / 0.18);
--wa-shadow-level-3: 0 0.25rem 0.5rem rgb(0 0 0 / 0.16);
--wa-shadow-level-1: 0 0.0625rem 0.125rem rgb(0 0 0 / 0.08);
--wa-shadow-level-2: 0 0.125rem 0.25rem rgb(0 0 0 / 0.06);
--wa-shadow-level-3: 0 0.25rem 0.5rem rgb(0 0 0 / 0.04);
/**
* Z-index
@@ -264,11 +270,11 @@
--wa-form-controls-border-width: var(--wa-border-width-thin);
--wa-form-controls-corners: var(--wa-corners-1x);
/* prettier-ignore */
--wa-form-controls-color-resting: var(--wa-color-neutral-element-outline-muted); /* rename to --wa-form-controls-border-color-resting? */
--wa-form-controls-border-color-resting: var(--wa-color-neutral-outline-muted-alt);
/* prettier-ignore */
--wa-form-controls-color-activated: var(--wa-color-brand-action-vivid); /* rename to --wa-form-controls-border-color-activated? */
--wa-form-controls-color-text: var(--wa-color-neutral-text-on-surface);
--wa-form-controls-font-line-height: var(--wa-font-height-compact);
--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);
@@ -281,7 +287,7 @@
--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: "*";
--wa-form-controls-required-content-color: inherit;
--wa-form-controls-required-content-offset: -0.1em;