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

more retheming

Browse Source
This commit is contained in:
Cory LaViska
2023-08-31 16:50:31 -04:00
parent b4c45b480b
commit 55be0a557f
42 changed files with 449 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
cspell.json
View File

@@ -109,6 +109,7 @@
"novalidate", "novalidate",
"npmdir", "npmdir",
"Numberish", "Numberish",
"oklch",
"outdir", "outdir",
"ParamagicDev", "ParamagicDev",
"peta", "peta",

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

@@ -44,7 +44,7 @@ body.search-visible {
font: inherit; font: inherit;
color: var(--docs-search-box-color); color: var(--docs-search-box-color);
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
margin: var(--wa-spacing-l) 0; margin: var(--wa-space-l) 0;
cursor: pointer; cursor: pointer;
} }

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

@@ -208,7 +208,7 @@ Set the `duration` attribute to automatically hide an alert after a period of ti
<style> <style>
.alert-duration sl-alert { .alert-duration sl-alert {
margin-top: var(--sl-spacing-medium); margin-top: var(--wa-space-m);
} }
</style> </style>
``` ```
@@ -221,7 +221,7 @@ import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
const css = ` const css = `
.alert-duration sl-alert { .alert-duration sl-alert {
margin-top: var(--sl-spacing-medium); margin-top: var(--wa-space-m);
} }
`; `;

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

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

8
docs/pages/components/avatar.md
View File

@@ -157,11 +157,11 @@ You can group avatars with a few lines of CSS.
<style> <style>
.avatar-group sl-avatar:not(:first-of-type) { .avatar-group sl-avatar:not(:first-of-type) {
margin-left: -1rem; margin-left: calc(-1 * var(--wa-space-m));
} }
.avatar-group sl-avatar::part(base) { .avatar-group sl-avatar::part(base) {
border: solid 2px var(--sl-color-neutral-0); border: solid 2px var(--wa-color-surface-default);
} }
</style> </style>
``` ```
@@ -172,11 +172,11 @@ import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
const css = ` const css = `
.avatar-group sl-avatar:not(:first-of-type) { .avatar-group sl-avatar:not(:first-of-type) {
margin-left: -1rem; margin-left: calc(-1 * var(--wa-space-m));
} }
.avatar-group sl-avatar::part(base) { .avatar-group sl-avatar::part(base) {
border: solid 2px var(--sl-color-neutral-0); border: solid 2px var(--wa-color-surface-default);
} }
`; `;

6
docs/pages/components/badge.md
View File

@@ -209,11 +209,7 @@ import SlMenuLabel from '@shoelace-style/shoelace/dist/react/menu-label';
const App = () => ( const App = () => (
<SlMenu <SlMenu
style={{ style={{ maxWidth: '240px' }}
maxWidth: '240px',
border: 'solid 1px var(--sl-panel-border-color)',
borderRadius: 'var(--sl-border-radius-medium)'
}}
> >
<SlMenuLabel>Messages</SlMenuLabel> <SlMenuLabel>Messages</SlMenuLabel>
<SlMenuItem> <SlMenuItem>

4
docs/pages/components/button-group.md
View File

@@ -435,7 +435,7 @@ Create interactive toolbars with button groups.
<style> <style>
.button-group-toolbar sl-button-group:not(:last-of-type) { .button-group-toolbar sl-button-group:not(:last-of-type) {
margin-right: var(--sl-spacing-x-small); margin-right: var(--wa-space-xs);
} }
</style> </style>
``` ```
@@ -448,7 +448,7 @@ import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
const css = ` const css = `
.button-group-toolbar sl-button-group:not(:last-of-type) { .button-group-toolbar sl-button-group:not(:last-of-type) {
margin-right: var(--sl-spacing-x-small); margin-right: var(--wa-space-xs);
} }
`; `;

8
docs/pages/components/card.md
View File

@@ -29,7 +29,7 @@ layout: component
} }
.card-overview small { .card-overview small {
color: var(--sl-color-neutral-500); color: var(--wa-color-text-quiet);
} }
.card-overview [slot='footer'] { .card-overview [slot='footer'] {
@@ -51,7 +51,7 @@ const css = `
} }
.card-overview small { .card-overview small {
color: var(--sl-color-neutral-500); color: var(--wa-color-text-quiet);
} }
.card-overview [slot="footer"] { .card-overview [slot="footer"] {
@@ -155,7 +155,7 @@ Headers can be used to display titles and more.
} }
.card-header sl-icon-button { .card-header sl-icon-button {
font-size: var(--sl-font-size-medium); font-size: var(--wa-font-size-m);
} }
</style> </style>
``` ```
@@ -180,7 +180,7 @@ const css = `
} }
.card-header sl-icon-button { .card-header sl-icon-button {
font-size: var(--sl-font-size-medium); font-size: var(--wa-font-size-m);
} }
`; `;

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

@@ -571,8 +571,8 @@ The content of the carousel can be changed by adding or removing carousel items.
.dynamic-carousel ~ .carousel-options { .dynamic-carousel ~ .carousel-options {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: var(--sl-spacing-x-small); gap: var(--wa-space-xs);
margin-top: var(--sl-spacing-large); margin-top: var(--wa-space-l);
} }
.dynamic-carousel sl-carousel-item { .dynamic-carousel sl-carousel-item {
@@ -634,7 +634,7 @@ const css = `
.dynamic-carousel ~ .carousel-options { .dynamic-carousel ~ .carousel-options {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-top: var(--sl-spacing-large); margin-top: var(--wa-space-l);
} }
.dynamic-carousel sl-carousel-item { .dynamic-carousel sl-carousel-item {
@@ -1076,11 +1076,11 @@ The carousel has a robust API that makes it possible to extend and customize. Th
.thumbnails__scroller { .thumbnails__scroller {
display: flex; display: flex;
gap: var(--sl-spacing-small); gap: var(--wa-space-s);
overflow-x: auto; overflow-x: auto;
scrollbar-width: none; scrollbar-width: none;
scroll-behavior: smooth; scroll-behavior: smooth;
scroll-padding: var(--sl-spacing-small); scroll-padding: var(--wa-space-s);
} }
.thumbnails__scroller::-webkit-scrollbar { .thumbnails__scroller::-webkit-scrollbar {
@@ -1154,11 +1154,11 @@ const css = `
.thumbnails__scroller { .thumbnails__scroller {
display: flex; display: flex;
gap: var(--sl-spacing-small); gap: var(--wa-space-s);
overflow-x: auto; overflow-x: auto;
scrollbar-width: none; scrollbar-width: none;
scroll-behavior: smooth; scroll-behavior: smooth;
scroll-padding: var(--sl-spacing-small); scroll-padding: var(--wa-space-s);
} }
.thumbnails__scroller::-webkit-scrollbar { .thumbnails__scroller::-webkit-scrollbar {

2
docs/pages/components/details.md
View File

@@ -129,7 +129,7 @@ Details are designed to function independently, but you can simulate a group or
<style> <style>
.details-group-example sl-details:not(:last-of-type) { .details-group-example sl-details:not(:last-of-type) {
margin-bottom: var(--sl-spacing-2x-small); margin-bottom: var(--wa-space-2xs);
} }
</style> </style>
``` ```

6
docs/pages/components/dropdown.md
View File

@@ -356,7 +356,7 @@ import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
const css = ` const css = `
.dropdown-hoist { .dropdown-hoist {
border: solid 2px var(--sl-panel-border-color); border: solid 2px var(--sl-panel-border-color);
padding: var(--sl-spacing-medium); padding: var(--wa-space-m);
overflow: hidden; overflow: hidden;
} }
`; `;
@@ -429,7 +429,7 @@ Dropdown panels will be clipped if they're inside a container that has `overflow
.dropdown-hoist { .dropdown-hoist {
position: relative; position: relative;
border: solid 2px var(--sl-panel-border-color); border: solid 2px var(--sl-panel-border-color);
padding: var(--sl-spacing-medium); padding: var(--wa-space-m);
overflow: hidden; overflow: hidden;
} }
</style> </style>
@@ -445,7 +445,7 @@ import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
const css = ` const css = `
.dropdown-hoist { .dropdown-hoist {
border: solid 2px var(--sl-panel-border-color); border: solid 2px var(--sl-panel-border-color);
padding: var(--sl-spacing-medium); padding: var(--wa-space-m);
overflow: hidden; overflow: hidden;
} }
`; `;

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

@@ -768,9 +768,9 @@ If you want to change the icons Shoelace uses internally, you can register an ic
<style> <style>
.icon-search { .icon-search {
border: solid 1px var(--sl-panel-border-color); border: solid 1px var(--wa-color-surface-outline);
border-radius: var(--sl-border-radius-medium); border-radius: var(--wa-corners-1x);
padding: var(--sl-spacing-medium); padding: var(--wa-space-m);
} }
.icon-search [hidden] { .icon-search [hidden] {
@@ -814,18 +814,18 @@ If you want to change the icons Shoelace uses internally, you can register an ic
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: var(--sl-border-radius-medium); border-radius: var(--wa-corners-1x);
font-size: 24px; font-size: 24px;
width: 2em; width: 2em;
height: 2em; height: 2em;
margin: 0 auto; margin: 0 auto;
cursor: copy; cursor: copy;
transition: var(--sl-transition-medium) all; transition: var(--wa-transition-fast) all;
} }
.icon-list-item:hover { .icon-list-item:hover {
background-color: var(--sl-color-primary-50); background-color: var(--wa-color-brand-container-fill-muted);
color: var(--sl-color-primary-600); color: var(--wa-color-brand-text-on-muted);
} }
.icon-list[data-type="outline"] .icon-list-item[data-name$="-fill"] { .icon-list[data-type="outline"] .icon-list-item[data-name$="-fill"] {

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

@@ -260,13 +260,13 @@ Use [CSS parts](#css-parts) to customize the way form controls are drawn. This e
} }
.label-on-left + .label-on-left { .label-on-left + .label-on-left {
margin-top: var(--sl-spacing-medium); margin-top: var(--wa-space-m);
} }
.label-on-left::part(form-control) { .label-on-left::part(form-control) {
display: grid; display: grid;
grid: auto / var(--label-width) 1fr; grid: auto / var(--label-width) 1fr;
gap: var(--sl-spacing-3x-small) var(--gap-width); gap: var(--wa-space-3xs) var(--gap-width);
align-items: center; align-items: center;
} }

12
docs/pages/components/mutation-observer.md
View File

@@ -49,13 +49,8 @@ import SlButton from '@shoelace-style/shoelace/dist/react/button';
import SlMutationObserver from '@shoelace-style/shoelace/dist/react/mutation-observer'; import SlMutationObserver from '@shoelace-style/shoelace/dist/react/mutation-observer';
const css = ` const css = `
.resize-observer-overview div { .mutation-overview sl-button {
display: flex; margin-bottom: 1rem;
border: solid 2px var(--sl-input-border-color);
align-items: center;
justify-content: center;
text-align: center;
padding: 4rem 2rem;
} }
`; `;
@@ -78,6 +73,9 @@ const App = () => {
</SlButton> </SlButton>
</SlMutationObserver> </SlMutationObserver>
<br />
👆 Click the button and watch the console
<style>{css}</style> <style>{css}</style>
</> </>
); );

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

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

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

@@ -137,9 +137,9 @@ The event has a payload with `phase` and `value` properties. The `phase` propert
position: relative; position: relative;
top: -4px; top: -4px;
left: 8px; left: 8px;
border-radius: var(--sl-border-radius-small); border-radius: var(--wa-corners-1x);
background: var(--sl-color-neutral-900); background: var(--wa-color-neutral-element-outline-vivid);
color: var(--sl-color-neutral-0); color: var(--wa-color-neutral-text-on-vivid);
text-align: center; text-align: center;
padding: 4px 6px; padding: 4px 6px;
} }
@@ -160,9 +160,9 @@ const css = `
position: relative; position: relative;
top: -4px; top: -4px;
left: 8px; left: 8px;
border-radius: var(--sl-border-radius-small); border-radius: var(--wa-corners-1x);
background: var(--sl-color-neutral-900); background: var(--wa-color-neutral-element-outline-vivid);
color: var(--sl-color-neutral-0); color: var(--wa-color-neutral-text-on-vivid);
text-align: center; text-align: center;
padding: 4px 6px; padding: 4px 6px;
} }

4
docs/pages/components/resize-observer.md
View File

@@ -26,7 +26,7 @@ The resize observer will report changes to the dimensions of the elements it wra
<style> <style>
.resize-observer-overview div { .resize-observer-overview div {
display: flex; display: flex;
border: solid 2px var(--sl-input-border-color); border: solid 2px var(--wa-color-surface-outline);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
@@ -41,7 +41,7 @@ import SlResizeObserver from '@shoelace-style/shoelace/dist/react/resize-observe
const css = ` const css = `
.resize-observer-overview div { .resize-observer-overview div {
display: flex; display: flex;
border: solid 2px var(--sl-input-border-color); border: solid 2px var(--wa-color-surface-outline);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;

28
docs/pages/components/skeleton.md
View File

@@ -12,13 +12,13 @@ Skeletons try not to be opinionated, as there are endless possibilities for desi
```html:preview ```html:preview
<div class="skeleton-overview"> <div class="skeleton-overview">
<header> <header>
<sl-skeleton></sl-skeleton> <sl-skeleton effect="sheen"></sl-skeleton>
<sl-skeleton></sl-skeleton> <sl-skeleton effect="sheen"></sl-skeleton>
</header> </header>
<sl-skeleton></sl-skeleton> <sl-skeleton effect="sheen"></sl-skeleton>
<sl-skeleton></sl-skeleton> <sl-skeleton effect="sheen"></sl-skeleton>
<sl-skeleton></sl-skeleton> <sl-skeleton effect="sheen"></sl-skeleton>
</div> </div>
<style> <style>
@@ -129,7 +129,7 @@ There are two built-in effects, `sheen` and `pulse`. Effects are intentionally s
<style> <style>
.skeleton-effects { .skeleton-effects {
font-size: var(--sl-font-size-small); font-size: var(--wa-font-size-s);
} }
.skeleton-effects sl-skeleton:not(:first-child) { .skeleton-effects sl-skeleton:not(:first-child) {
@@ -143,7 +143,7 @@ import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
const css = ` const css = `
.skeleton-effects { .skeleton-effects {
font-size: var(--sl-font-size-small); font-size: var(--wa-font-size-s);
} }
.skeleton-effects sl-skeleton:not(:first-child) { .skeleton-effects sl-skeleton:not(:first-child) {
@@ -259,7 +259,7 @@ Set a matching width and height to make a circle, square, or rounded avatar skel
} }
.skeleton-avatars sl-skeleton:nth-child(2) { .skeleton-avatars sl-skeleton:nth-child(2) {
--border-radius: var(--sl-border-radius-medium); --border-radius: var(--wa-corners-1x);
} }
</style> </style>
``` ```
@@ -280,7 +280,7 @@ const css = `
} }
.skeleton-avatars sl-skeleton:nth-child(2) { .skeleton-avatars sl-skeleton:nth-child(2) {
--border-radius: var(--sl-border-radius-medium); --border-radius: var(--wa-corners-1x);
} }
`; `;
@@ -318,11 +318,11 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl
} }
.skeleton-shapes .square::part(indicator) { .skeleton-shapes .square::part(indicator) {
--border-radius: var(--sl-border-radius-medium); --border-radius: var(--wa-corners-1x);
} }
.skeleton-shapes .circle::part(indicator) { .skeleton-shapes .circle::part(indicator) {
--border-radius: var(--sl-border-radius-circle); --border-radius: var(--wa-corners-circle);
} }
.skeleton-shapes .triangle::part(indicator) { .skeleton-shapes .triangle::part(indicator) {
@@ -370,11 +370,11 @@ const css = `
} }
.skeleton-shapes .square::part(indicator) { .skeleton-shapes .square::part(indicator) {
--border-radius: var(--sl-border-radius-medium); --border-radius: var(--wa-corners-1x);
} }
.skeleton-shapes .circle::part(indicator) { .skeleton-shapes .circle::part(indicator) {
--border-radius: var(--sl-border-radius-circle); --border-radius: var(--wa-corners-circle);
} }
.skeleton-shapes .triangle::part(indicator) { .skeleton-shapes .triangle::part(indicator) {
@@ -438,7 +438,7 @@ const css = `
} }
.skeleton-avatars sl-skeleton:nth-child(2) { .skeleton-avatars sl-skeleton:nth-child(2) {
--border-radius: var(--sl-border-radius-medium); --border-radius: var(--wa-corners-1x);
} }
`; `;

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

@@ -9,13 +9,13 @@ layout: component
<sl-split-panel> <sl-split-panel>
<div <div
slot="start" slot="start"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;" style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
> >
Start Start
</div> </div>
<div <div
slot="end" slot="end"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;" style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
> >
End End
</div> </div>
@@ -33,7 +33,7 @@ const App = () => (
slot="start" slot="start"
style={{ style={{
height: '200px', height: '200px',
background: 'var(--sl-color-neutral-50)', background: 'var(--wa-color-surface-lowered)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
@@ -45,7 +45,7 @@ const App = () => (
slot="end" slot="end"
style={{ style={{
height: '200px', height: '200px',
background: 'var(--sl-color-neutral-50)', background: 'var(--wa-color-surface-lowered)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
@@ -69,13 +69,27 @@ To set the initial position, use the `position` attribute. If no position is pro
<sl-split-panel position="75"> <sl-split-panel position="75">
<div <div
slot="start" slot="start"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;" style="
height: 200px;
background: var(--wa-color-surface-lowered);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
"
> >
Start Start
</div> </div>
<div <div
slot="end" slot="end"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;" style="
height: 200px;
background: var(--wa-color-surface-lowered);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
"
> >
End End
</div> </div>
@@ -90,13 +104,13 @@ To set the initial position in pixels instead of a percentage, use the `position
<sl-split-panel position-in-pixels="150"> <sl-split-panel position-in-pixels="150">
<div <div
slot="start" slot="start"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;" style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
> >
Start Start
</div> </div>
<div <div
slot="end" slot="end"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;" style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
> >
End End
</div> </div>
@@ -114,7 +128,7 @@ const App = () => (
slot="start" slot="start"
style={{ style={{
height: '200px', height: '200px',
background: 'var(--sl-color-neutral-50)', background: 'var(--wa-color-surface-lowered)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
@@ -126,7 +140,7 @@ const App = () => (
slot="end" slot="end"
style={{ style={{
height: '200px', height: '200px',
background: 'var(--sl-color-neutral-50)', background: 'var(--wa-color-surface-lowered)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
@@ -148,13 +162,13 @@ Add the `vertical` attribute to render the split panel in a vertical orientation
<sl-split-panel vertical style="height: 400px;"> <sl-split-panel vertical style="height: 400px;">
<div <div
slot="start" slot="start"
style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;" style="height: 100%; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
> >
Start Start
</div> </div>
<div <div
slot="end" slot="end"
style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;" style="height: 100%; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
> >
End End
</div> </div>
@@ -172,7 +186,7 @@ const App = () => (
slot="start" slot="start"
style={{ style={{
height: '100%', height: '100%',
background: 'var(--sl-color-neutral-50)', background: 'var(--wa-color-surface-lowered)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
@@ -184,7 +198,7 @@ const App = () => (
slot="end" slot="end"
style={{ style={{
height: '100%', height: '100%',
background: 'var(--sl-color-neutral-50)', background: 'var(--wa-color-surface-lowered)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
@@ -207,13 +221,13 @@ To snap panels at specific positions while dragging, add the `snap` attribute wi
<sl-split-panel snap="100px 50%"> <sl-split-panel snap="100px 50%">
<div <div
slot="start" slot="start"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;" style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
> >
Start Start
</div> </div>
<div <div
slot="end" slot="end"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;" style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
> >
End End
</div> </div>
@@ -235,7 +249,7 @@ To snap panels at specific positions while dragging, add the `snap` attribute wi
width: 6px; width: 6px;
height: 6px; height: 6px;
border-radius: 50%; border-radius: 50%;
background: var(--sl-color-neutral-400); background: var(--wa-color-neutral-container-fill-vivid);
transform: translateX(-3px); transform: translateX(-3px);
} }
@@ -267,7 +281,7 @@ const css = `
width: 6px; width: 6px;
height: 6px; height: 6px;
border-radius: 50%; border-radius: 50%;
background: var(--sl-color-neutral-400); background: var(--wa-color-neutral-container-fill-vivid);
transform: translateX(-3px); transform: translateX(-3px);
} }
@@ -288,7 +302,7 @@ const App = () => (
slot="start" slot="start"
style={{ style={{
height: '200px', height: '200px',
background: 'var(--sl-color-neutral-50)', background: 'var(--wa-color-surface-lowered)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
@@ -300,7 +314,7 @@ const App = () => (
slot="end" slot="end"
style={{ style={{
height: '200px', height: '200px',
background: 'var(--sl-color-neutral-50)', background: 'var(--wa-color-surface-lowered)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
@@ -328,13 +342,13 @@ Add the `disabled` attribute to prevent the divider from being repositioned.
<sl-split-panel disabled> <sl-split-panel disabled>
<div <div
slot="start" slot="start"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;" style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
> >
Start Start
</div> </div>
<div <div
slot="end" slot="end"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;" style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
> >
End End
</div> </div>
@@ -352,7 +366,7 @@ const App = () => (
slot="start" slot="start"
style={{ style={{
height: '200px', height: '200px',
background: 'var(--sl-color-neutral-50)', background: 'var(--wa-color-surface-lowered)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
@@ -364,7 +378,7 @@ const App = () => (
slot="end" slot="end"
style={{ style={{
height: '200px', height: '200px',
background: 'var(--sl-color-neutral-50)', background: 'var(--wa-color-surface-lowered)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
@@ -389,13 +403,13 @@ Try resizing the example below with each option and notice how the panels respon
<sl-split-panel> <sl-split-panel>
<div <div
slot="start" slot="start"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;" style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
> >
Start Start
</div> </div>
<div <div
slot="end" slot="end"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;" style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
> >
End End
</div> </div>
@@ -435,7 +449,7 @@ const App = () => {
slot="start" slot="start"
style={{ style={{
height: '200px', height: '200px',
background: 'var(--sl-color-neutral-50)', background: 'var(--wa-color-surface-lowered)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
@@ -447,7 +461,7 @@ const App = () => {
slot="end" slot="end"
style={{ style={{
height: '200px', height: '200px',
background: 'var(--sl-color-neutral-50)', background: 'var(--wa-color-surface-lowered)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
@@ -484,13 +498,13 @@ This examples demonstrates how you can ensure both panels are at least 150px usi
<sl-split-panel style="--min: 150px; --max: calc(100% - 150px);"> <sl-split-panel style="--min: 150px; --max: calc(100% - 150px);">
<div <div
slot="start" slot="start"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;" style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
> >
Start Start
</div> </div>
<div <div
slot="end" slot="end"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;" style="height: 200px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden;"
> >
End End
</div> </div>
@@ -508,7 +522,7 @@ const App = () => (
slot="start" slot="start"
style={{ style={{
height: '200px', height: '200px',
background: 'var(--sl-color-neutral-50)', background: 'var(--wa-color-surface-lowered)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
@@ -520,7 +534,7 @@ const App = () => (
slot="end" slot="end"
style={{ style={{
height: '200px', height: '200px',
background: 'var(--sl-color-neutral-50)', background: 'var(--wa-color-surface-lowered)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
@@ -542,7 +556,7 @@ Create complex layouts that can be repositioned independently by nesting split p
<sl-split-panel> <sl-split-panel>
<div <div
slot="start" slot="start"
style="height: 400px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden" style="height: 400px; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden"
> >
Start Start
</div> </div>
@@ -550,13 +564,13 @@ Create complex layouts that can be repositioned independently by nesting split p
<sl-split-panel vertical style="height: 400px;"> <sl-split-panel vertical style="height: 400px;">
<div <div
slot="start" slot="start"
style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden" style="height: 100%; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden"
> >
Top Top
</div> </div>
<div <div
slot="end" slot="end"
style="height: 100%; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden" style="height: 100%; background: var(--wa-color-surface-lowered); display: flex; align-items: center; justify-content: center; overflow: hidden"
> >
Bottom Bottom
</div> </div>
@@ -576,7 +590,7 @@ const App = () => (
slot="start" slot="start"
style={{ style={{
height: '400px', height: '400px',
background: 'var(--sl-color-neutral-50)', background: 'var(--wa-color-surface-lowered)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
@@ -590,7 +604,7 @@ const App = () => (
slot="start" slot="start"
style={{ style={{
height: '100%', height: '100%',
background: 'var(--sl-color-neutral-50)', background: 'var(--wa-color-surface-lowered)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
@@ -602,7 +616,7 @@ const App = () => (
slot="end" slot="end"
style={{ style={{
height: '100%', height: '100%',
background: 'var(--sl-color-neutral-50)', background: 'var(--wa-color-surface-lowered)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
@@ -627,13 +641,27 @@ You can target the `divider` part to apply CSS properties to the divider. To add
<sl-icon slot="divider" name="grip-vertical"></sl-icon> <sl-icon slot="divider" name="grip-vertical"></sl-icon>
<div <div
slot="start" slot="start"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;" style="
height: 200px;
background: var(--wa-color-surface-lowered);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
"
> >
Start Start
</div> </div>
<div <div
slot="end" slot="end"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;" style="
height: 200px;
background: var(--wa-color-surface-lowered);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
"
> >
End End
</div> </div>
@@ -653,7 +681,7 @@ const App = () => (
slot="start" slot="start"
style={{ style={{
height: '200px', height: '200px',
background: 'var(--sl-color-neutral-50)', background: 'var(--wa-color-surface-lowered)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
@@ -665,7 +693,7 @@ const App = () => (
slot="end" slot="end"
style={{ style={{
height: '200px', height: '200px',
background: 'var(--sl-color-neutral-50)', background: 'var(--wa-color-surface-lowered)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
@@ -687,13 +715,27 @@ Here's a more elaborate example that changes the divider's color and width and a
<sl-icon slot="divider" name="grip-vertical"></sl-icon> <sl-icon slot="divider" name="grip-vertical"></sl-icon>
<div <div
slot="start" slot="start"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;" style="
height: 200px;
background: var(--wa-color-surface-lowered);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
"
> >
Start Start
</div> </div>
<div <div
slot="end" slot="end"
style="height: 200px; background: var(--sl-color-neutral-50); display: flex; align-items: center; justify-content: center; overflow: hidden;" style="
height: 200px;
background: var(--wa-color-surface-lowered);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
"
> >
End End
</div> </div>
@@ -706,24 +748,24 @@ Here's a more elaborate example that changes the divider's color and width and a
} }
.split-panel-divider sl-split-panel::part(divider) { .split-panel-divider sl-split-panel::part(divider) {
background-color: var(--sl-color-pink-600); background-color: var(--wa-color-red-50);
} }
.split-panel-divider sl-icon { .split-panel-divider sl-icon {
position: absolute; position: absolute;
border-radius: var(--sl-border-radius-small); border-radius: var(--wa-corners-3x);
background: var(--sl-color-pink-600); background: var(--wa-color-red-50);
color: var(--sl-color-neutral-0); color: var(--wa-color-white);
padding: 0.5rem 0.125rem; padding: 0.5rem 0.125rem;
} }
.split-panel-divider sl-split-panel::part(divider):focus-visible { .split-panel-divider sl-split-panel::part(divider):focus-visible {
background-color: var(--sl-color-primary-600); background-color: var(--wa-color-blue-50);
} }
.split-panel-divider sl-split-panel:focus-within sl-icon { .split-panel-divider sl-split-panel:focus-within sl-icon {
background-color: var(--sl-color-primary-600); background-color: var(--wa-color-blue-50);
color: var(--sl-color-neutral-0); color: var(--wa-color-white);
} }
</style> </style>
``` ```
@@ -740,24 +782,24 @@ const css = `
} }
.split-panel-divider sl-split-panel::part(divider) { .split-panel-divider sl-split-panel::part(divider) {
background-color: var(--sl-color-pink-600); background-color: var(--wa-color-red-50);
} }
.split-panel-divider sl-icon { .split-panel-divider sl-icon {
position: absolute; position: absolute;
border-radius: var(--sl-border-radius-small); border-radius: var(--wa-corners-half);
background: var(--sl-color-pink-600); background: var(--wa-color-red-50);
color: var(--sl-color-neutral-0); color: var(--wa-color-white);
padding: .5rem .125rem; padding: .5rem .125rem;
} }
.split-panel-divider sl-split-panel::part(divider):focus-visible { .split-panel-divider sl-split-panel::part(divider):focus-visible {
background-color: var(--sl-color-primary-600); background-color: var(--wa-color-blue-50);
} }
.split-panel-divider sl-split-panel:focus-within sl-icon { .split-panel-divider sl-split-panel:focus-within sl-icon {
background-color: var(--sl-color-primary-600); background-color: var(--wa-color-blue-50);
color: var(--sl-color-neutral-0); color: var(--wa-color-white);
} }
`; `;
@@ -770,7 +812,7 @@ const App = () => (
slot="start" slot="start"
style={{ style={{
height: '200px', height: '200px',
background: 'var(--sl-color-neutral-50)', background: 'var(--wa-color-surface-lowered)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
@@ -782,7 +824,7 @@ const App = () => (
slot="end" slot="end"
style={{ style={{
height: '200px', height: '200px',
background: 'var(--sl-color-neutral-50)', background: 'var(--wa-color-surface-lowered)',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'

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

@@ -102,7 +102,7 @@ Use the `removable` attribute to add a remove button to the tag.
<style> <style>
.tags-removable sl-tag { .tags-removable sl-tag {
transition: var(--sl-transition-medium) opacity; transition: var(--wa-transition-fast) opacity;
} }
</style> </style>
``` ```
@@ -112,7 +112,7 @@ import SlTag from '@shoelace-style/shoelace/dist/react/tag';
const css = ` const css = `
.tags-removable sl-tag { .tags-removable sl-tag {
transition: var(--sl-transition-medium) opacity; transition: var(--wa-transition-fast) opacity;
} }
`; `;

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

@@ -295,10 +295,10 @@ const App = () => {
### Removing Arrows ### Removing Arrows
You can control the size of tooltip arrows by overriding the `--sl-tooltip-arrow-size` design token. To remove them, set the value to `0` as shown below. You can control the size of tooltip arrows by overriding the `--wa-tooltip-arrow-size` design token. To remove them, set the value to `0` as shown below.
```html:preview ```html:preview
<sl-tooltip content="This is a tooltip" style="--sl-tooltip-arrow-size: 0;"> <sl-tooltip content="This is a tooltip" style="--wa-tooltip-arrow-size: 0;">
<sl-button>No Arrow</sl-button> <sl-button>No Arrow</sl-button>
</sl-tooltip> </sl-tooltip>
``` ```
@@ -310,7 +310,7 @@ import SlButton from '@shoelace-style/shoelace/dist/react/button';
import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip'; import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
const App = () => ( const App = () => (
<div style={{ '--sl-tooltip-arrow-size': '0' }}> <div style={{ '--wa-tooltip-arrow-size': '0' }}>
<SlTooltip content="This is a tooltip"> <SlTooltip content="This is a tooltip">
<SlButton>Above</SlButton> <SlButton>Above</SlButton>
</SlTooltip> </SlTooltip>
@@ -328,7 +328,7 @@ To override it globally, set it in a root block in your stylesheet after the Sho
```css ```css
:root { :root {
--sl-tooltip-arrow-size: 0; --wa-tooltip-arrow-size: 0;
} }
``` ```
@@ -402,9 +402,9 @@ Tooltips will be clipped if they're inside a container that has `overflow: auto|
<style> <style>
.tooltip-hoist { .tooltip-hoist {
position: relative; position: relative;
border: solid 2px var(--sl-panel-border-color); border: solid 2px var(--wa-color-surface-outline);
overflow: hidden; overflow: hidden;
padding: var(--sl-spacing-medium); padding: var(--wa-space-m);
} }
</style> </style>
``` ```
@@ -415,9 +415,9 @@ import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
const css = ` const css = `
.tooltip-hoist { .tooltip-hoist {
border: solid 2px var(--sl-panel-border-color); border: solid 2px var(--wa-color-surface-outline);
overflow: hidden; overflow: hidden;
padding: var(--sl-spacing-medium); padding: var(--wa-space-m);
position: relative; position: relative;
} }
`; `;

2
docs/pages/frameworks/vue.md
View File

@@ -94,7 +94,7 @@ Now you can start using Shoelace components in your app!
} }
sl-input { sl-input {
margin: var(--sl-spacing-large) 0; margin: var(--wa-space-l) 0;
} }
</style> </style>
``` ```

4
docs/pages/getting-started/form-controls.md
View File

@@ -386,7 +386,7 @@ This example demonstrates custom validation styles using `data-user-invalid` and
.validity-styles sl-select, .validity-styles sl-select,
.validity-styles sl-checkbox { .validity-styles sl-checkbox {
display: block; display: block;
margin-bottom: var(--sl-spacing-medium); margin-bottom: var(--wa-space-m);
} }
/* user invalid styles */ /* user invalid styles */
@@ -509,7 +509,7 @@ To disable the browser's error messages, you need to cancel the `sl-invalid` eve
} }
#name-error ~ sl-button { #name-error ~ sl-button {
margin-top: var(--sl-spacing-medium); margin-top: var(--wa-space-m);
} }
.inline-validation sl-input { .inline-validation sl-input {

6
src/components/animated-image/animated-image.styles.ts
View File

@@ -36,10 +36,10 @@ export default css`
background: none; background: none;
border: solid 2px currentColor; border: solid 2px currentColor;
background-color: rgb(0 0 0 /50%); background-color: rgb(0 0 0 /50%);
border-radius: var(--sl-border-radius-circle); border-radius: var(--wa-corners-circle);
color: white; color: var(--wa-color-white);
pointer-events: none; pointer-events: none;
transition: var(--sl-transition-fast) opacity; transition: var(--wa-transition-fast) opacity;
} }
:host([play]:hover) .animated-image__control-box { :host([play]:hover) .animated-image__control-box {

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

@@ -17,23 +17,23 @@ export default css`
position: relative; position: relative;
width: var(--size); width: var(--size);
height: var(--size); height: var(--size);
background-color: var(--sl-color-neutral-400); background-color: var(--wa-color-neutral-element-fill-vivid);
font-family: var(--sl-font-sans); font-family: var(--wa-font-family-body);
font-size: calc(var(--size) * 0.5); font-size: calc(var(--size) * 0.5);
font-weight: var(--sl-font-weight-normal); font-weight: var(--wa-font-weight-normal);
color: var(--sl-color-neutral-0); color: var(--wa-color-neutral-text-on-vivid);
user-select: none; user-select: none;
vertical-align: middle; vertical-align: middle;
} }
.avatar--circle, .avatar--circle,
.avatar--circle .avatar__image { .avatar--circle .avatar__image {
border-radius: var(--sl-border-radius-circle); border-radius: var(--wa-corners-circle);
} }
.avatar--rounded, .avatar--rounded,
.avatar--rounded .avatar__image { .avatar--rounded .avatar__image {
border-radius: var(--sl-border-radius-medium); border-radius: var(--wa-corners-1x);
} }
.avatar--square { .avatar--square {

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

@@ -13,11 +13,10 @@ export default css`
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: max(12px, 0.75em); font-size: max(12px, 0.75em);
font-weight: var(--sl-font-weight-semibold); font-weight: var(--wa-font-weight-medium);
letter-spacing: var(--sl-letter-spacing-normal);
line-height: 1; line-height: 1;
border-radius: var(--sl-border-radius-small); border-radius: var(--wa-corners-1x);
border: solid 1px var(--sl-color-neutral-0); border: solid 1px var(--wa-color-surface-default);
white-space: nowrap; white-space: nowrap;
padding: 0.35em 0.6em; padding: 0.35em 0.6em;
user-select: none; user-select: none;
@@ -26,33 +25,33 @@ export default css`
/* Variant modifiers */ /* Variant modifiers */
.badge--primary { .badge--primary {
background-color: var(--sl-color-primary-600); background-color: var(--wa-color-brand-element-fill-vivid);
color: var(--sl-color-neutral-0); color: var(--wa-color-brand-text-on-vivid);
} }
.badge--success { .badge--success {
background-color: var(--sl-color-success-600); background-color: var(--wa-color-success-element-fill-vivid);
color: var(--sl-color-neutral-0); color: var(--wa-color-success-text-on-vivid);
} }
.badge--neutral { .badge--neutral {
background-color: var(--sl-color-neutral-600); background-color: var(--wa-color-neutral-element-fill-vivid);
color: var(--sl-color-neutral-0); color: var(--wa-color-neutral-text-on-vivid);
} }
.badge--warning { .badge--warning {
background-color: var(--sl-color-warning-600); background-color: var(--wa-color-warning-element-fill-vivid);
color: var(--sl-color-neutral-0); color: var(--wa-color-warning-text-on-vivid);
} }
.badge--danger { .badge--danger {
background-color: var(--sl-color-danger-600); background-color: var(--wa-color-danger-element-fill-vivid);
color: var(--sl-color-neutral-0); color: var(--wa-color-danger-text-on-vivid);
} }
/* Pill modifier */ /* Pill modifier */
.badge--pill { .badge--pill {
border-radius: var(--sl-border-radius-pill); border-radius: var(--wa-corners-pill);
} }
/* Pulse modifier */ /* Pulse modifier */
@@ -61,23 +60,23 @@ export default css`
} }
.badge--pulse.badge--primary { .badge--pulse.badge--primary {
--pulse-color: var(--sl-color-primary-600); --pulse-color: var(--wa-color-brand-container-outline-vivid);
} }
.badge--pulse.badge--success { .badge--pulse.badge--success {
--pulse-color: var(--sl-color-success-600); --pulse-color: var(--wa-color-success-container-outline-vivid);
} }
.badge--pulse.badge--neutral { .badge--pulse.badge--neutral {
--pulse-color: var(--sl-color-neutral-600); --pulse-color: var(--wa-color-neutral-container-outline-vivid);
} }
.badge--pulse.badge--warning { .badge--pulse.badge--warning {
--pulse-color: var(--sl-color-warning-600); --pulse-color: var(--wa-color-warning-container-outline-vivid);
} }
.badge--pulse.badge--danger { .badge--pulse.badge--danger {
--pulse-color: var(--sl-color-danger-600); --pulse-color: var(--wa-color-danger-container-outline-vivid);
} }
@keyframes pulse { @keyframes pulse {

30
src/components/breadcrumb-item/breadcrumb-item.styles.ts
View File

@@ -11,11 +11,11 @@ export default css`
.breadcrumb-item { .breadcrumb-item {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
font-family: var(--sl-font-sans); font-family: var(--wa-font-family-body);
font-size: var(--sl-font-size-small); font-size: var(--wa-font-size-s);
font-weight: var(--sl-font-weight-semibold); font-weight: var(--wa-font-weight-medium);
color: var(--sl-color-neutral-600); color: var(--wa-color-neutral-text-on-surface);
line-height: var(--sl-line-height-normal); line-height: var(--wa-line-height-regular);
white-space: nowrap; white-space: nowrap;
} }
@@ -29,23 +29,23 @@ export default css`
color: inherit; color: inherit;
background: none; background: none;
border: none; border: none;
border-radius: var(--sl-border-radius-medium); border-radius: var(--wa-corners-1x);
padding: 0; padding: 0;
margin: 0; margin: 0;
cursor: pointer; cursor: pointer;
transition: var(--sl-transition-fast) --color; transition: var(--wa-transition-fast) --color;
} }
:host(:not(:last-of-type)) .breadcrumb-item__label { :host(:not(:last-of-type)) .breadcrumb-item__label {
color: var(--sl-color-primary-600); color: var(--wa-color-brand-text-on-surface);
} }
:host(:not(:last-of-type)) .breadcrumb-item__label:hover { :host(:not(:last-of-type)) .breadcrumb-item__label:hover {
color: var(--sl-color-primary-500); color: color-mix(in oklch, var(--wa-color-brand-text-on-surface), black 8%);
} }
:host(:not(:last-of-type)) .breadcrumb-item__label:active { :host(:not(:last-of-type)) .breadcrumb-item__label:active {
color: var(--sl-color-primary-600); color: var(--wa-color-brand-text-on-surface);
} }
.breadcrumb-item__label:focus { .breadcrumb-item__label:focus {
@@ -53,8 +53,8 @@ export default css`
} }
.breadcrumb-item__label:focus-visible { .breadcrumb-item__label:focus-visible {
outline: var(--sl-focus-ring); outline: var(--wa-focus-ring);
outline-offset: var(--sl-focus-ring-offset); outline-offset: var(--wa-focus-ring-offset);
} }
.breadcrumb-item__prefix, .breadcrumb-item__prefix,
@@ -67,12 +67,12 @@ export default css`
.breadcrumb-item--has-prefix .breadcrumb-item__prefix { .breadcrumb-item--has-prefix .breadcrumb-item__prefix {
display: inline-flex; display: inline-flex;
margin-inline-end: var(--sl-spacing-x-small); margin-inline-end: var(--wa-space-xs);
} }
.breadcrumb-item--has-suffix .breadcrumb-item__suffix { .breadcrumb-item--has-suffix .breadcrumb-item__suffix {
display: inline-flex; display: inline-flex;
margin-inline-start: var(--sl-spacing-x-small); margin-inline-start: var(--wa-space-xs);
} }
:host(:last-of-type) .breadcrumb-item__separator { :host(:last-of-type) .breadcrumb-item__separator {
@@ -82,7 +82,7 @@ export default css`
.breadcrumb-item__separator { .breadcrumb-item__separator {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
margin: 0 var(--sl-spacing-x-small); margin: 0 var(--wa-space-xs);
user-select: none; user-select: none;
} }
`; `;

12
src/components/card/card.styles.ts
View File

@@ -5,10 +5,10 @@ export default css`
${componentStyles} ${componentStyles}
:host { :host {
--border-color: var(--sl-color-neutral-200); --border-color: var(--wa-color-surface-outline);
--border-radius: var(--sl-border-radius-medium); --border-radius: var(--wa-corners-1x);
--border-width: 1px; --border-width: var(--wa-border-width-thin);
--padding: var(--sl-spacing-large); --padding: var(--wa-space-l);
display: inline-block; display: inline-block;
} }
@@ -16,8 +16,8 @@ export default css`
.card { .card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: var(--sl-panel-background-color); background-color: var(--wa-color-surface-raised);
box-shadow: var(--sl-shadow-x-small); box-shadow: var(--wa-shadow-level-1);
border: solid var(--border-width) var(--border-color); border: solid var(--border-width) var(--border-color);
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }

16
src/components/icon-button/icon-button.styles.ts
View File

@@ -6,7 +6,7 @@ export default css`
:host { :host {
display: inline-block; display: inline-block;
color: var(--sl-color-neutral-600); color: var(--wa-color-text-quiet);
} }
.icon-button { .icon-button {
@@ -15,22 +15,22 @@ export default css`
align-items: center; align-items: center;
background: none; background: none;
border: none; border: none;
border-radius: var(--sl-border-radius-medium); border-radius: var(--wa-corners-1x);
font-size: inherit; font-size: inherit;
color: inherit; color: inherit;
padding: var(--sl-spacing-x-small); padding: var(--wa-space-xs);
cursor: pointer; cursor: pointer;
transition: var(--sl-transition-x-fast) color; transition: var(--wa-transition-faster) color;
-webkit-appearance: none; -webkit-appearance: none;
} }
.icon-button:hover:not(.icon-button--disabled), .icon-button:hover:not(.icon-button--disabled),
.icon-button:focus-visible:not(.icon-button--disabled) { .icon-button:focus-visible:not(.icon-button--disabled) {
color: var(--sl-color-primary-600); color: var(--wa-color-brand-text-on-surface);
} }
.icon-button:active:not(.icon-button--disabled) { .icon-button:active:not(.icon-button--disabled) {
color: var(--sl-color-primary-700); color: color-mix(in oklch, var(--wa-color-brand-text-on-surface), black 8%);
} }
.icon-button:focus { .icon-button:focus {
@@ -43,8 +43,8 @@ export default css`
} }
.icon-button:focus-visible { .icon-button:focus-visible {
outline: var(--sl-focus-ring); outline: var(--wa-focus-ring);
outline-offset: var(--sl-focus-ring-offset); outline-offset: var(--wa-focus-ring-offset);
} }
.icon-button__icon { .icon-button__icon {

4
src/components/popup/popup.styles.ts
View File

@@ -5,8 +5,8 @@ export default css`
${componentStyles} ${componentStyles}
:host { :host {
--arrow-color: var(--sl-color-neutral-1000); --arrow-color: var(--wa-color-black);
--arrow-size: 6px; --arrow-size: var(--wa-tooltip-arrow-size);
/* /*
* These properties are computed to account for the arrow's dimensions after being rotated 45º. The constant * These properties are computed to account for the arrow's dimensions after being rotated 45º. The constant

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

@@ -6,9 +6,9 @@ export default css`
:host { :host {
--height: 1rem; --height: 1rem;
--track-color: var(--sl-color-neutral-200); --track-color: var(--wa-color-neutral-container-fill-muted);
--indicator-color: var(--sl-color-primary-600); --indicator-color: var(--wa-color-brand-element-fill-vivid);
--label-color: var(--sl-color-neutral-0); --label-color: var(--wa-color-brand-text-on-vivid);
display: block; display: block;
} }
@@ -17,16 +17,16 @@ export default css`
position: relative; position: relative;
background-color: var(--track-color); background-color: var(--track-color);
height: var(--height); height: var(--height);
border-radius: var(--sl-border-radius-pill); border-radius: var(--wa-corners-pill);
box-shadow: inset var(--sl-shadow-small); box-shadow: inset var(--wa-shadow-level-1);
overflow: hidden; overflow: hidden;
} }
.progress-bar__indicator { .progress-bar__indicator {
height: 100%; height: 100%;
font-family: var(--sl-font-sans); font-family: var(--wa-font-family-body);
font-size: 12px; font-size: var(--wa-font-size-xs);
font-weight: var(--sl-font-weight-normal); font-weight: var(--wa-font-weight-regular);
background-color: var(--indicator-color); background-color: var(--indicator-color);
color: var(--label-color); color: var(--label-color);
text-align: center; text-align: center;
@@ -50,7 +50,7 @@ export default css`
@media (forced-colors: active) { @media (forced-colors: active) {
.progress-bar { .progress-bar {
outline: solid 1px SelectedItem; outline: solid 1px SelectedItem;
background-color: var(--sl-color-neutral-0); background-color: var(--wa-color-surface-default);
} }
.progress-bar__indicator { .progress-bar__indicator {

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

@@ -5,11 +5,11 @@ export default css`
${componentStyles} ${componentStyles}
:host { :host {
--size: 128px; --size: 8rem;
--track-width: 4px; --track-width: 0.25rem;
--track-color: var(--sl-color-neutral-200); --track-color: var(--wa-color-neutral-container-fill-muted);
--indicator-width: var(--track-width); --indicator-width: var(--track-width);
--indicator-color: var(--sl-color-primary-600); --indicator-color: var(--wa-color-brand-element-fill-vivid);
--indicator-transition-duration: 0.35s; --indicator-transition-duration: 0.35s;
display: inline-flex; display: inline-flex;

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

@@ -5,10 +5,10 @@ export default css`
${componentStyles} ${componentStyles}
:host { :host {
--symbol-color: var(--sl-color-neutral-300); --symbol-color: var(--wa-color-neutral-element-fill-muted);
--symbol-color-active: var(--sl-color-amber-500); --symbol-color-active: var(--wa-color-yellow-70);
--symbol-size: 1.2rem; --symbol-size: var(--wa-font-size-l);
--symbol-spacing: var(--sl-spacing-3x-small); --symbol-spacing: var(--wa-space-3xs);
display: inline-flex; display: inline-flex;
} }
@@ -16,7 +16,7 @@ export default css`
.rating { .rating {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
border-radius: var(--sl-border-radius-medium); border-radius: var(--wa-corners-1x);
vertical-align: middle; vertical-align: middle;
} }
@@ -25,8 +25,8 @@ export default css`
} }
.rating:focus-visible { .rating:focus-visible {
outline: var(--sl-focus-ring); outline: var(--wa-focus-ring);
outline-offset: var(--sl-focus-ring-offset); outline-offset: var(--wa-focus-ring-offset);
} }
.rating__symbols { .rating__symbols {
@@ -59,7 +59,7 @@ export default css`
} }
.rating__symbol { .rating__symbol {
transition: var(--sl-transition-fast) scale; transition: var(--wa-transition-fast) scale;
} }
.rating__symbol--hover { .rating__symbol--hover {

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

@@ -5,9 +5,9 @@ export default css`
${componentStyles} ${componentStyles}
:host { :host {
--border-radius: var(--sl-border-radius-pill); --border-radius: var(--wa-corners-pill);
--color: var(--sl-color-neutral-200); --color: var(--wa-color-neutral-container-fill-muted);
--sheen-color: var(--sl-color-neutral-300); --sheen-color: color-mix(in oklch, var(--wa-color-neutral-container-fill-muted), white 50%);
display: block; display: block;
position: relative; position: relative;

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

@@ -6,8 +6,8 @@ export default css`
:host { :host {
--track-width: 2px; --track-width: 2px;
--track-color: rgb(128 128 128 / 25%); --track-color: var(--wa-color-neutral-container-fill-muted);
--indicator-color: var(--sl-color-primary-600); --indicator-color: var(--wa-color-brand-element-fill-vivid);
--speed: 2s; --speed: 2s;
display: inline-flex; display: inline-flex;

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

@@ -24,8 +24,8 @@ export default css`
position: relative; position: relative;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: var(--sl-color-neutral-200); background-color: var(--wa-color-neutral-element-outline-muted);
color: var(--sl-color-neutral-900); color: var(--wa-color-neutral-text-on-muted);
z-index: 1; z-index: 1;
} }
@@ -34,8 +34,8 @@ export default css`
} }
:host(:not([disabled])) .divider:focus-visible { :host(:not([disabled])) .divider:focus-visible {
background-color: var(--sl-color-primary-600); background-color: var(--wa-color-brand-element-outline-vivid);
color: var(--sl-color-neutral-0); color: var(--wa-color-brand-text-on-vivid);
} }
:host([disabled]) .divider { :host([disabled]) .divider {

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

@@ -27,53 +27,53 @@ export default css`
*/ */
.tag--primary { .tag--primary {
background-color: var(--sl-color-primary-50); background-color: var(--wa-color-brand-container-fill-muted);
border-color: var(--sl-color-primary-200); border-color: var(--wa-color-brand-element-outline-muted);
color: var(--sl-color-primary-800); color: var(--wa-color-brand-text-on-muted);
} }
.tag--primary:active > sl-icon-button { .tag--primary:active > sl-icon-button {
color: var(--sl-color-primary-600); color: var(--wa-color-brand-text-on-muted);
} }
.tag--success { .tag--success {
background-color: var(--sl-color-success-50); background-color: var(--wa-color-success-container-fill-muted);
border-color: var(--sl-color-success-200); border-color: var(--wa-color-success-element-outline-muted);
color: var(--sl-color-success-800); color: var(--wa-color-success-text-on-muted);
} }
.tag--success:active > sl-icon-button { .tag--success:active > sl-icon-button {
color: var(--sl-color-success-600); color: var(--wa-color-success-text-on-muted);
} }
.tag--neutral { .tag--neutral {
background-color: var(--sl-color-neutral-50); background-color: var(--wa-color-neutral-container-fill-muted);
border-color: var(--sl-color-neutral-200); border-color: var(--wa-color-neutral-element-outline-muted);
color: var(--sl-color-neutral-800); color: var(--wa-color-neutral-text-on-muted);
} }
.tag--neutral:active > sl-icon-button { .tag--neutral:active > sl-icon-button {
color: var(--sl-color-neutral-600); color: var(--wa-color-neutral-text-on-muted);
} }
.tag--warning { .tag--warning {
background-color: var(--sl-color-warning-50); background-color: var(--wa-color-warning-container-fill-muted);
border-color: var(--sl-color-warning-200); border-color: var(--wa-color-warning-element-outline-muted);
color: var(--sl-color-warning-800); color: var(--wa-color-warning-text-on-muted);
} }
.tag--warning:active > sl-icon-button { .tag--warning:active > sl-icon-button {
color: var(--sl-color-warning-600); color: var(--wa-color-warning-text-on-muted);
} }
.tag--danger { .tag--danger {
background-color: var(--sl-color-danger-50); background-color: var(--wa-color-danger-container-fill-muted);
border-color: var(--sl-color-danger-200); border-color: var(--wa-color-danger-element-outline-muted);
color: var(--sl-color-danger-800); color: var(--wa-color-danger-text-on-muted);
} }
.tag--danger:active > sl-icon-button { .tag--danger:active > sl-icon-button {
color: var(--sl-color-danger-600); color: var(--wa-color-danger-text-on-muted);
} }
/* /*
@@ -81,31 +81,25 @@ export default css`
*/ */
.tag--small { .tag--small {
font-size: var(--sl-button-font-size-small); font-size: var(--wa-font-size-xs);
height: calc(var(--sl-input-height-small) * 0.8); border-radius: var(--wa-corners-1x);
line-height: calc(var(--sl-input-height-small) - var(--sl-input-border-width) * 2); padding: var(--wa-space-3xs) var(--wa-space-2xs);
border-radius: var(--sl-input-border-radius-small);
padding: 0 var(--sl-spacing-x-small);
} }
.tag--medium { .tag--medium {
font-size: var(--sl-button-font-size-medium); font-size: var(--wa-font-size-s);
height: calc(var(--sl-input-height-medium) * 0.8); border-radius: var(--wa-corners-1x);
line-height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2); padding: var(--wa-space-2xs) var(--wa-space-xs);
border-radius: var(--sl-input-border-radius-medium);
padding: 0 var(--sl-spacing-small);
} }
.tag--large { .tag--large {
font-size: var(--sl-button-font-size-large); font-size: var(--wa-font-size-m);
height: calc(var(--sl-input-height-large) * 0.8); border-radius: var(--wa-corners-1x);
line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2); padding: var(--wa-space-2xs) var(--wa-space-xs);
border-radius: var(--sl-input-border-radius-large);
padding: 0 var(--sl-spacing-medium);
} }
.tag__remove { .tag__remove {
margin-inline-start: var(--sl-spacing-x-small); margin-inline-start: var(--wa-space-2xs);
} }
/* /*
@@ -113,6 +107,6 @@ export default css`
*/ */
.tag--pill { .tag--pill {
border-radius: var(--sl-border-radius-pill); border-radius: var(--wa-corners-pill);
} }
`; `;

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

@@ -13,13 +13,13 @@ export default css`
} }
.tooltip { .tooltip {
--arrow-size: var(--sl-tooltip-arrow-size); --arrow-size: var(--wa-tooltip-arrow-size);
--arrow-color: var(--sl-tooltip-background-color); --arrow-color: var(--wa-color-neutral-element-fill-vivid);
} }
.tooltip::part(popup) { .tooltip::part(popup) {
pointer-events: none; pointer-events: none;
z-index: var(--sl-z-index-tooltip); z-index: var(--wa-z-index-tooltip);
} }
.tooltip[placement^='top']::part(popup) { .tooltip[placement^='top']::part(popup) {
@@ -42,14 +42,14 @@ export default css`
display: block; display: block;
width: max-content; width: max-content;
max-width: var(--max-width); max-width: var(--max-width);
border-radius: var(--sl-tooltip-border-radius); border-radius: var(--wa-corners-1x);
background-color: var(--sl-tooltip-background-color); background-color: var(--wa-color-neutral-element-fill-vivid);
font-family: var(--sl-tooltip-font-family); font-family: var(--wa-font-family-body);
font-size: var(--sl-tooltip-font-size); font-size: var(--wa-font-size-s);
font-weight: var(--sl-tooltip-font-weight); font-weight: var(--wa-font-weight-regular);
line-height: var(--sl-tooltip-line-height); line-height: var(--wa-line-height-regular);
color: var(--sl-tooltip-color); color: var(--wa-color-neutral-text-on-vivid);
padding: var(--sl-tooltip-padding); padding: var(--wa-space-2xs) var(--wa-space-xs);
pointer-events: none; pointer-events: none;
user-select: none; user-select: none;
} }

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

@@ -15,7 +15,7 @@ export default css`
} }
slot:not([name])::slotted(sl-icon) { slot:not([name])::slotted(sl-icon) {
margin-inline-end: var(--sl-spacing-x-small); margin-inline-end: var(--wa-space-xs);
} }
.tree-item { .tree-item {
@@ -23,7 +23,7 @@ export default css`
display: flex; display: flex;
align-items: stretch; align-items: stretch;
flex-direction: column; flex-direction: column;
color: var(--sl-color-neutral-700); color: var(--wa-color-text-normal);
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
} }
@@ -35,11 +35,10 @@ export default css`
.tree-item__expand-button, .tree-item__expand-button,
.tree-item__checkbox, .tree-item__checkbox,
.tree-item__label { .tree-item__label {
font-family: var(--sl-font-sans); font-family: var(--wa-font-family-body);
font-size: var(--sl-font-size-medium); font-size: var(--wa-font-size-m);
font-weight: var(--sl-font-weight-normal); font-weight: var(--wa-font-weight-regular);
line-height: var(--sl-line-height-dense); line-height: var(--wa-line-height-regular);
letter-spacing: var(--sl-letter-spacing-normal);
} }
.tree-item__checkbox::part(base) { .tree-item__checkbox::part(base) {
@@ -58,8 +57,8 @@ export default css`
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-sizing: content-box; box-sizing: content-box;
color: var(--sl-color-neutral-500); color: var(--wa-color-neutral-element-fill-vivid);
padding: var(--sl-spacing-x-small); padding: var(--wa-space-xs);
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
flex-shrink: 0; flex-shrink: 0;
@@ -67,7 +66,7 @@ export default css`
} }
.tree-item__expand-button { .tree-item__expand-button {
transition: var(--sl-transition-medium) rotate ease; transition: var(--wa-transition-fast) rotate ease;
} }
.tree-item--expanded .tree-item__expand-button { .tree-item--expanded .tree-item__expand-button {
@@ -104,29 +103,29 @@ export default css`
} }
:host(:focus-visible) .tree-item__item { :host(:focus-visible) .tree-item__item {
outline: var(--sl-focus-ring); outline: var(--wa-focus-ring);
outline-offset: var(--sl-focus-ring-offset); outline-offset: var(--wa-focus-ring-offset);
z-index: 2; z-index: 2;
} }
:host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item { :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
background-color: var(--sl-color-neutral-100); background-color: var(--wa-color-neutral-container-fill-muted);
border-inline-start-color: var(--sl-color-primary-600); border-inline-start-color: var(--wa-color-brand-element-outline-vivid);
} }
:host(:not([aria-disabled='true'])) .tree-item__expand-button { :host(:not([aria-disabled='true'])) .tree-item__expand-button {
color: var(--sl-color-neutral-600); color: var(--wa-color-neutral-element-fill-vivid);
} }
.tree-item__label { .tree-item__label {
display: flex; display: flex;
align-items: center; align-items: center;
transition: var(--sl-transition-fast) color; transition: var(--wa-transition-fast) color;
} }
.tree-item__children { .tree-item__children {
display: block; display: block;
font-size: calc(1em + var(--indent-size, var(--sl-spacing-medium))); font-size: calc(1em + var(--indent-size, var(--wa-space-m)));
} }
/* Indentation lines */ /* Indentation lines */

4
src/components/tree/tree.styles.ts
View File

@@ -9,11 +9,11 @@ export default css`
* These are actually used by tree item, but we define them here so they can more easily be set and all tree items * These are actually used by tree item, but we define them here so they can more easily be set and all tree items
* stay consistent. * stay consistent.
*/ */
--indent-guide-color: var(--sl-color-neutral-200); --indent-guide-color: var(--wa-color-surface-outline);
--indent-guide-offset: 0; --indent-guide-offset: 0;
--indent-guide-style: solid; --indent-guide-style: solid;
--indent-guide-width: 0; --indent-guide-width: 0;
--indent-size: var(--sl-spacing-large); --indent-size: var(--wa-space-l);
display: block; display: block;
isolation: isolate; isolation: isolate;

28
src/styles/form-control.styles.ts
View File

@@ -12,48 +12,48 @@ export default css`
/* Label */ /* Label */
.form-control--has-label .form-control__label { .form-control--has-label .form-control__label {
display: inline-block; display: inline-block;
color: var(--sl-input-label-color); color: inherit;
margin-bottom: var(--sl-spacing-3x-small); margin-bottom: var(--wa-space-3xs);
} }
.form-control--has-label.form-control--small .form-control__label { .form-control--has-label.form-control--small .form-control__label {
font-size: var(--sl-input-label-font-size-small); font-size: var(--wa-font-size-s);
} }
.form-control--has-label.form-control--medium .form-control__label { .form-control--has-label.form-control--medium .form-control__label {
font-size: var(--sl-input-label-font-size-medium); font-size: var(--wa-font-size-m);
} }
.form-control--has-label.form-control--large .form-control__label { .form-control--has-label.form-control--large .form-control__label {
font-size: var(--sl-input-label-font-size-large); font-size: var(--wa-font-size-l);
} }
:host([required]) .form-control--has-label .form-control__label::after { :host([required]) .form-control--has-label .form-control__label::after {
content: var(--sl-input-required-content); content: var(--wa-form-controls-required-content);
margin-inline-start: var(--sl-input-required-content-offset); margin-inline-start: var(--wa-space-2xs);
color: var(--sl-input-required-content-color); color: var(--wa-form-controls-required-content-color);
} }
/* Help text */ /* Help text */
.form-control--has-help-text .form-control__help-text { .form-control--has-help-text .form-control__help-text {
display: block; display: block;
color: var(--sl-input-help-text-color); color: var(--wa-color-text-quiet);
margin-top: var(--sl-spacing-3x-small); margin-top: var(--wa-space-3xs);
} }
.form-control--has-help-text.form-control--small .form-control__help-text { .form-control--has-help-text.form-control--small .form-control__help-text {
font-size: var(--sl-input-help-text-font-size-small); font-size: var(--wa-font-size-xs);
} }
.form-control--has-help-text.form-control--medium .form-control__help-text { .form-control--has-help-text.form-control--medium .form-control__help-text {
font-size: var(--sl-input-help-text-font-size-medium); font-size: var(--wa-font-size-s);
} }
.form-control--has-help-text.form-control--large .form-control__help-text { .form-control--has-help-text.form-control--large .form-control__help-text {
font-size: var(--sl-input-help-text-font-size-large); font-size: var(--wa-font-size-m);
} }
.form-control--has-help-text.form-control--radio-group .form-control__help-text { .form-control--has-help-text.form-control--radio-group .form-control__help-text {
margin-top: var(--sl-spacing-2x-small); margin-top: var(--wa-space-2xs);
} }
`; `;

8
src/themes/default.css
View File

@@ -268,6 +268,14 @@
--wa-form-controls-font-line-height: var(--wa-font-height-compact); --wa-form-controls-font-line-height: var(--wa-font-height-compact);
--wa-form-controls-padding: var(--wa-space-square-s); --wa-form-controls-padding: var(--wa-space-square-s);
--wa-form-controls-placeholder-color: var(--wa-color-neutral-60); --wa-form-controls-placeholder-color: var(--wa-color-neutral-60);
/**
* From 2.x
*/
--wa-form-controls-required-content: '*';
--wa-form-controls-required-content-color: inherit;
--wa-tooltip-arrow-size: 0.375rem;
} }
/* _utility.css */ /* _utility.css */