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",
"npmdir",
"Numberish",
"oklch",
"outdir",
"ParamagicDev",
"peta",

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

@@ -44,7 +44,7 @@ body.search-visible {
font: inherit;
color: var(--docs-search-box-color);
padding: 0.75rem 1rem;
margin: var(--wa-spacing-l) 0;
margin: var(--wa-space-l) 0;
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>
.alert-duration sl-alert {
margin-top: var(--sl-spacing-medium);
margin-top: var(--wa-space-m);
}
</style>
```
@@ -221,7 +221,7 @@ import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
const css = `
.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;
width: 100px;
height: 100px;
background-color: var(--sl-color-primary-600);
background-color: var(--wa-color-brand-element-fill-vivid);
margin: 1.5rem;
}
</style>
@@ -34,7 +34,7 @@ const css = `
display: inline-block;
width: 100px;
height: 100px;
background-color: var(--sl-color-primary-600);
background-color: var(--wa-color-brand-element-fill-vivid);
margin: 1.5rem;
}
`;
@@ -120,7 +120,7 @@ This example demonstrates all of the baked-in animations and easings. Animations
.animation-sandbox .box {
width: 100px;
height: 100px;
background-color: var(--sl-color-primary-600);
background-color: var(--wa-color-brand-element-fill-vivid);
}
.animation-sandbox .controls {
@@ -166,7 +166,7 @@ Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/
display: inline-block;
width: 100px;
height: 100px;
background-color: var(--sl-color-primary-600);
background-color: var(--wa-color-brand-element-fill-vivid);
}
</style>
```
@@ -184,7 +184,7 @@ const css = `
display: inline-block;
width: 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 {
width: 100px;
height: 100px;
background-color: var(--sl-color-primary-600);
background-color: var(--wa-color-brand-element-fill-vivid);
}
</style>
```
@@ -268,7 +268,7 @@ const css = `
.animation-keyframes .box {
width: 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>
.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) {
border: solid 2px var(--sl-color-neutral-0);
border: solid 2px var(--wa-color-surface-default);
}
</style>
```
@@ -172,11 +172,11 @@ import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
const css = `
.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) {
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 = () => (
<SlMenu
style={{
maxWidth: '240px',
border: 'solid 1px var(--sl-panel-border-color)',
borderRadius: 'var(--sl-border-radius-medium)'
}}
style={{ maxWidth: '240px' }}
>
<SlMenuLabel>Messages</SlMenuLabel>
<SlMenuItem>

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

@@ -435,7 +435,7 @@ Create interactive toolbars with button groups.
<style>
.button-group-toolbar sl-button-group:not(:last-of-type) {
margin-right: var(--sl-spacing-x-small);
margin-right: var(--wa-space-xs);
}
</style>
```
@@ -448,7 +448,7 @@ import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
const css = `
.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 {
color: var(--sl-color-neutral-500);
color: var(--wa-color-text-quiet);
}
.card-overview [slot='footer'] {
@@ -51,7 +51,7 @@ const css = `
}
.card-overview small {
color: var(--sl-color-neutral-500);
color: var(--wa-color-text-quiet);
}
.card-overview [slot="footer"] {
@@ -155,7 +155,7 @@ Headers can be used to display titles and more.
}
.card-header sl-icon-button {
font-size: var(--sl-font-size-medium);
font-size: var(--wa-font-size-m);
}
</style>
```
@@ -180,7 +180,7 @@ const css = `
}
.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 {
display: flex;
justify-content: center;
gap: var(--sl-spacing-x-small);
margin-top: var(--sl-spacing-large);
gap: var(--wa-space-xs);
margin-top: var(--wa-space-l);
}
.dynamic-carousel sl-carousel-item {
@@ -634,7 +634,7 @@ const css = `
.dynamic-carousel ~ .carousel-options {
display: flex;
justify-content: center;
margin-top: var(--sl-spacing-large);
margin-top: var(--wa-space-l);
}
.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 {
display: flex;
gap: var(--sl-spacing-small);
gap: var(--wa-space-s);
overflow-x: auto;
scrollbar-width: none;
scroll-behavior: smooth;
scroll-padding: var(--sl-spacing-small);
scroll-padding: var(--wa-space-s);
}
.thumbnails__scroller::-webkit-scrollbar {
@@ -1154,11 +1154,11 @@ const css = `
.thumbnails__scroller {
display: flex;
gap: var(--sl-spacing-small);
gap: var(--wa-space-s);
overflow-x: auto;
scrollbar-width: none;
scroll-behavior: smooth;
scroll-padding: var(--sl-spacing-small);
scroll-padding: var(--wa-space-s);
}
.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>
.details-group-example sl-details:not(:last-of-type) {
margin-bottom: var(--sl-spacing-2x-small);
margin-bottom: var(--wa-space-2xs);
}
</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 = `
.dropdown-hoist {
border: solid 2px var(--sl-panel-border-color);
padding: var(--sl-spacing-medium);
padding: var(--wa-space-m);
overflow: hidden;
}
`;
@@ -429,7 +429,7 @@ Dropdown panels will be clipped if they're inside a container that has `overflow
.dropdown-hoist {
position: relative;
border: solid 2px var(--sl-panel-border-color);
padding: var(--sl-spacing-medium);
padding: var(--wa-space-m);
overflow: hidden;
}
</style>
@@ -445,7 +445,7 @@ import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
const css = `
.dropdown-hoist {
border: solid 2px var(--sl-panel-border-color);
padding: var(--sl-spacing-medium);
padding: var(--wa-space-m);
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>
.icon-search {
border: solid 1px var(--sl-panel-border-color);
border-radius: var(--sl-border-radius-medium);
padding: var(--sl-spacing-medium);
border: solid 1px var(--wa-color-surface-outline);
border-radius: var(--wa-corners-1x);
padding: var(--wa-space-m);
}
.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;
align-items: center;
justify-content: center;
border-radius: var(--sl-border-radius-medium);
border-radius: var(--wa-corners-1x);
font-size: 24px;
width: 2em;
height: 2em;
margin: 0 auto;
cursor: copy;
transition: var(--sl-transition-medium) all;
transition: var(--wa-transition-fast) all;
}
.icon-list-item:hover {
background-color: var(--sl-color-primary-50);
color: var(--sl-color-primary-600);
background-color: var(--wa-color-brand-container-fill-muted);
color: var(--wa-color-brand-text-on-muted);
}
.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 {
margin-top: var(--sl-spacing-medium);
margin-top: var(--wa-space-m);
}
.label-on-left::part(form-control) {
display: grid;
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;
}

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';
const css = `
.resize-observer-overview div {
display: flex;
border: solid 2px var(--sl-input-border-color);
align-items: center;
justify-content: center;
text-align: center;
padding: 4rem 2rem;
.mutation-overview sl-button {
margin-bottom: 1rem;
}
`;
@@ -78,6 +73,9 @@ const App = () => {
</SlButton>
</SlMutationObserver>
<br />
👆 Click the button and watch the console
<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>
.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'] {
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--sl-color-neutral-600);
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
margin: 50px;
}
.popup-overview .box {
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
background: var(--wa-color-brand-container-fill-vivid);
border-radius: var(--wa-corners-1x);
}
.popup-overview-options {
@@ -112,22 +112,22 @@ import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
const css = `
.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'] {
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--sl-color-neutral-600);
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
margin: 50px;
}
.popup-overview .box {
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
background: var(--wa-color-brand-container-fill-vivid);
border-radius: var(--wa-corners-1x);
}
.popup-overview-options {
@@ -250,15 +250,15 @@ Popups are inactive and hidden until the `active` attribute is applied. Removing
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--sl-color-neutral-600);
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
margin: 50px;
}
.popup-active .box {
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
background: var(--wa-color-brand-container-fill-vivid);
border-radius: var(--wa-corners-1x);
}
</style>
@@ -281,15 +281,15 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--sl-color-neutral-600);
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
margin: 50px;
}
.popup-active .box {
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
background: var(--wa-color-brand-container-fill-vivid);
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;
width: 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;
}
#external-anchor ~ sl-popup .box {
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
background: var(--wa-color-brand-container-fill-vivid);
border-radius: var(--wa-corners-1x);
}
</style>
```
@@ -353,15 +353,15 @@ const css = `
display: inline-block;
width: 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;
}
#external-anchor ~ sl-popup .box {
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
background: var(--wa-color-brand-container-fill-vivid);
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;
width: 150px;
height: 150px;
border: dashed 2px var(--sl-color-neutral-600);
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
margin: 50px;
}
.popup-placement .box {
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
background: var(--wa-color-brand-container-fill-vivid);
border-radius: var(--wa-corners-1x);
}
.popup-placement sl-select {
@@ -450,15 +450,15 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--sl-color-neutral-600);
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
margin: 50px;
}
.popup-placement .box {
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
background: var(--wa-color-brand-container-fill-vivid);
border-radius: var(--wa-corners-1x);
}
.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;
width: 150px;
height: 150px;
border: dashed 2px var(--sl-color-neutral-600);
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
margin: 50px;
}
.popup-distance .box {
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
background: var(--wa-color-brand-container-fill-vivid);
border-radius: var(--wa-corners-1x);
}
.popup-distance sl-range {
@@ -553,15 +553,15 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--sl-color-neutral-600);
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
margin: 50px;
}
.popup-distance .box {
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
background: var(--wa-color-brand-container-fill-vivid);
border-radius: var(--wa-corners-1x);
}
.popup-distance sl-range {
@@ -615,15 +615,15 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--sl-color-neutral-600);
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
margin: 50px;
}
.popup-skidding .box {
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
background: var(--wa-color-brand-container-fill-vivid);
border-radius: var(--wa-corners-1x);
}
.popup-skidding sl-range {
@@ -650,15 +650,15 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--sl-color-neutral-600);
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
margin: 50px;
}
.popup-skidding .box {
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
background: var(--wa-color-brand-container-fill-vivid);
border-radius: var(--wa-corners-1x);
}
.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>
.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'] {
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--sl-color-neutral-600);
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
margin: 50px;
}
.popup-arrow .box {
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
background: var(--wa-color-brand-container-fill-vivid);
border-radius: var(--wa-corners-1x);
}
.popup-arrow-options {
@@ -793,22 +793,22 @@ import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
const css = `
.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'] {
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--sl-color-neutral-600);
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
margin: 50px;
}
.popup-arrow .box {
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
background: var(--wa-color-brand-container-fill-vivid);
border-radius: var(--wa-corners-1x);
}
.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;
width: 150px;
height: 150px;
border: dashed 2px var(--sl-color-neutral-600);
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
margin: 50px;
}
@@ -921,8 +921,8 @@ Use the `sync` attribute to make the popup the same width or height as the ancho
height: 100%;
min-width: 50px;
min-height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
background: var(--wa-color-brand-container-fill-vivid);
border-radius: var(--wa-corners-1x);
}
.popup-sync sl-select {
@@ -951,7 +951,7 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--sl-color-neutral-600);
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
margin: 50px;
}
@@ -960,8 +960,8 @@ const css = `
height: 100%;
min-width: 50px;
min-height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
background: var(--wa-color-brand-container-fill-vivid);
border-radius: var(--wa-corners-1x);
}
.popup-sync sl-switch {
@@ -1020,7 +1020,7 @@ Toggle the switch and scroll the container to see the difference.
.popup-strategy .overflow {
position: relative;
height: 300px;
border: solid 2px var(--sl-color-neutral-200);
border: solid 2px var(--wa-color-surface-outline);
overflow: auto;
}
@@ -1028,15 +1028,15 @@ Toggle the switch and scroll the container to see the difference.
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--sl-color-neutral-600);
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
margin: 150px 50px;
}
.popup-strategy .box {
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
background: var(--wa-color-brand-container-fill-vivid);
border-radius: var(--wa-corners-1x);
}
.popup-strategy sl-switch {
@@ -1062,7 +1062,7 @@ const css = `
.popup-strategy .overflow {
position: relative;
height: 300px;
border: solid 2px var(--sl-color-neutral-200);
border: solid 2px var(--wa-color-surface-outline);
overflow: auto;
}
@@ -1070,15 +1070,15 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--sl-color-neutral-600);
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
margin: 150px 50px;
}
.popup-strategy .box {
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
background: var(--wa-color-brand-container-fill-vivid);
border-radius: var(--wa-corners-1x);
}
.popup-strategy sl-switch {
@@ -1133,7 +1133,7 @@ Scroll the container to see how the popup flips to prevent clipping.
.popup-flip .overflow {
position: relative;
height: 300px;
border: solid 2px var(--sl-color-neutral-200);
border: solid 2px var(--wa-color-surface-outline);
overflow: auto;
}
@@ -1141,15 +1141,15 @@ Scroll the container to see how the popup flips to prevent clipping.
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--sl-color-neutral-600);
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
margin: 150px 50px;
}
.popup-flip .box {
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
background: var(--wa-color-brand-container-fill-vivid);
border-radius: var(--wa-corners-1x);
}
</style>
@@ -1171,7 +1171,7 @@ const css = `
.popup-flip .overflow {
position: relative;
height: 300px;
border: solid 2px var(--sl-color-neutral-200);
border: solid 2px var(--wa-color-surface-outline);
overflow: auto;
}
@@ -1179,15 +1179,15 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--sl-color-neutral-600);
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
margin: 150px 50px;
}
.popup-flip .box {
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
background: var(--wa-color-brand-container-fill-vivid);
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 {
position: relative;
height: 300px;
border: solid 2px var(--sl-color-neutral-200);
border: solid 2px var(--wa-color-surface-outline);
overflow: auto;
}
@@ -1248,15 +1248,15 @@ Scroll the container to see how the popup changes it's fallback placement to pre
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--sl-color-neutral-600);
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
margin: 250px 50px;
}
.popup-flip-fallbacks .box {
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
background: var(--wa-color-brand-container-fill-vivid);
border-radius: var(--wa-corners-1x);
}
</style>
```
@@ -1268,7 +1268,7 @@ const css = `
.popup-flip-fallbacks .overflow {
position: relative;
height: 300px;
border: solid 2px var(--sl-color-neutral-200);
border: solid 2px var(--wa-color-surface-outline);
overflow: auto;
}
@@ -1276,15 +1276,15 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--sl-color-neutral-600);
border: dashed 2px var(--wa-color-neutral-element-outline-vivid);
margin: 250px 50px;
}
.popup-flip-fallbacks .box {
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
background: var(--wa-color-brand-container-fill-vivid);
border-radius: var(--wa-corners-1x);
}
`;
@@ -1327,7 +1327,7 @@ Toggle the switch to see the difference.
<style>
.popup-shift .overflow {
position: relative;
border: solid 2px var(--sl-color-neutral-200);
border: solid 2px var(--wa-color-surface-outline);
overflow: auto;
}
@@ -1335,15 +1335,15 @@ Toggle the switch to see the difference.
display: inline-block;
width: 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;
}
.popup-shift .box {
width: 300px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
background: var(--wa-color-brand-container-fill-vivid);
border-radius: var(--wa-corners-1x);
}
</style>
@@ -1364,7 +1364,7 @@ import SlSwitch from '@shoelace-style/shoelace/dist/react/switch';
const css = `
.popup-shift .overflow {
position: relative;
border: solid 2px var(--sl-color-neutral-200);
border: solid 2px var(--wa-color-surface-outline);
overflow: auto;
}
@@ -1372,15 +1372,15 @@ const css = `
display: inline-block;
width: 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;
}
.popup-shift .box {
width: 300px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
background: var(--wa-color-brand-container-fill-vivid);
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 {
position: relative;
height: 300px;
border: solid 2px var(--sl-color-neutral-200);
border: solid 2px var(--wa-color-surface-outline);
overflow: auto;
}
@@ -1441,13 +1441,13 @@ Scroll the container to see the popup resize as its available space changes.
display: inline-block;
width: 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;
}
.popup-auto-size .box {
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
background: var(--wa-color-brand-container-fill-vivid);
border-radius: var(--wa-corners-1x);
/* This sets the preferred size of the popup's content */
width: 100px;
@@ -1478,7 +1478,7 @@ const css = `
.popup-auto-size .overflow {
position: relative;
height: 300px;
border: solid 2px var(--sl-color-neutral-200);
border: solid 2px var(--wa-color-surface-outline);
overflow: auto;
}
@@ -1486,13 +1486,13 @@ const css = `
display: inline-block;
width: 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;
}
.popup-auto-size .box {
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
background: var(--wa-color-brand-container-fill-vivid);
border-radius: var(--wa-corners-1x);
/* This sets the preferred size of the popup's content */
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 {
width: 100px;
height: 100px;
border: solid 4px var(--sl-color-primary-600);
border: solid 4px var(--wa-color-neutral-element-outline-vivid);
border-radius: 50%;
translate: -50px -50px;
animation: 1s virtual-cursor infinite;
@@ -1636,7 +1636,7 @@ const css = `
.popup-virtual-element .circle {
width: 100px;
height: 100px;
border: solid 4px var(--sl-color-primary-600);
border: solid 4px var(--wa-color-neutral-element-outline-vivid);
border-radius: 50%;
translate: -50px -50px;
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;
top: -4px;
left: 8px;
border-radius: var(--sl-border-radius-small);
background: var(--sl-color-neutral-900);
color: var(--sl-color-neutral-0);
border-radius: var(--wa-corners-1x);
background: var(--wa-color-neutral-element-outline-vivid);
color: var(--wa-color-neutral-text-on-vivid);
text-align: center;
padding: 4px 6px;
}
@@ -160,9 +160,9 @@ const css = `
position: relative;
top: -4px;
left: 8px;
border-radius: var(--sl-border-radius-small);
background: var(--sl-color-neutral-900);
color: var(--sl-color-neutral-0);
border-radius: var(--wa-corners-1x);
background: var(--wa-color-neutral-element-outline-vivid);
color: var(--wa-color-neutral-text-on-vivid);
text-align: center;
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>
.resize-observer-overview div {
display: flex;
border: solid 2px var(--sl-input-border-color);
border: solid 2px var(--wa-color-surface-outline);
align-items: center;
justify-content: center;
text-align: center;
@@ -41,7 +41,7 @@ import SlResizeObserver from '@shoelace-style/shoelace/dist/react/resize-observe
const css = `
.resize-observer-overview div {
display: flex;
border: solid 2px var(--sl-input-border-color);
border: solid 2px var(--wa-color-surface-outline);
align-items: center;
justify-content: 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
<div class="skeleton-overview">
<header>
<sl-skeleton></sl-skeleton>
<sl-skeleton></sl-skeleton>
<sl-skeleton effect="sheen"></sl-skeleton>
<sl-skeleton effect="sheen"></sl-skeleton>
</header>
<sl-skeleton></sl-skeleton>
<sl-skeleton></sl-skeleton>
<sl-skeleton></sl-skeleton>
<sl-skeleton effect="sheen"></sl-skeleton>
<sl-skeleton effect="sheen"></sl-skeleton>
<sl-skeleton effect="sheen"></sl-skeleton>
</div>
<style>
@@ -129,7 +129,7 @@ There are two built-in effects, `sheen` and `pulse`. Effects are intentionally s
<style>
.skeleton-effects {
font-size: var(--sl-font-size-small);
font-size: var(--wa-font-size-s);
}
.skeleton-effects sl-skeleton:not(:first-child) {
@@ -143,7 +143,7 @@ import SlSkeleton from '@shoelace-style/shoelace/dist/react/skeleton';
const css = `
.skeleton-effects {
font-size: var(--sl-font-size-small);
font-size: var(--wa-font-size-s);
}
.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) {
--border-radius: var(--sl-border-radius-medium);
--border-radius: var(--wa-corners-1x);
}
</style>
```
@@ -280,7 +280,7 @@ const css = `
}
.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) {
--border-radius: var(--sl-border-radius-medium);
--border-radius: var(--wa-corners-1x);
}
.skeleton-shapes .circle::part(indicator) {
--border-radius: var(--sl-border-radius-circle);
--border-radius: var(--wa-corners-circle);
}
.skeleton-shapes .triangle::part(indicator) {
@@ -370,11 +370,11 @@ const css = `
}
.skeleton-shapes .square::part(indicator) {
--border-radius: var(--sl-border-radius-medium);
--border-radius: var(--wa-corners-1x);
}
.skeleton-shapes .circle::part(indicator) {
--border-radius: var(--sl-border-radius-circle);
--border-radius: var(--wa-corners-circle);
}
.skeleton-shapes .triangle::part(indicator) {
@@ -438,7 +438,7 @@ const css = `
}
.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>
<div
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
</div>
<div
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
</div>
@@ -33,7 +33,7 @@ const App = () => (
slot="start"
style={{
height: '200px',
background: 'var(--sl-color-neutral-50)',
background: 'var(--wa-color-surface-lowered)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
@@ -45,7 +45,7 @@ const App = () => (
slot="end"
style={{
height: '200px',
background: 'var(--sl-color-neutral-50)',
background: 'var(--wa-color-surface-lowered)',
display: 'flex',
alignItems: '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">
<div
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
</div>
<div
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
</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">
<div
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
</div>
<div
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
</div>
@@ -114,7 +128,7 @@ const App = () => (
slot="start"
style={{
height: '200px',
background: 'var(--sl-color-neutral-50)',
background: 'var(--wa-color-surface-lowered)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
@@ -126,7 +140,7 @@ const App = () => (
slot="end"
style={{
height: '200px',
background: 'var(--sl-color-neutral-50)',
background: 'var(--wa-color-surface-lowered)',
display: 'flex',
alignItems: '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;">
<div
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
</div>
<div
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
</div>
@@ -172,7 +186,7 @@ const App = () => (
slot="start"
style={{
height: '100%',
background: 'var(--sl-color-neutral-50)',
background: 'var(--wa-color-surface-lowered)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
@@ -184,7 +198,7 @@ const App = () => (
slot="end"
style={{
height: '100%',
background: 'var(--sl-color-neutral-50)',
background: 'var(--wa-color-surface-lowered)',
display: 'flex',
alignItems: '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%">
<div
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
</div>
<div
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
</div>
@@ -235,7 +249,7 @@ To snap panels at specific positions while dragging, add the `snap` attribute wi
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--sl-color-neutral-400);
background: var(--wa-color-neutral-container-fill-vivid);
transform: translateX(-3px);
}
@@ -267,7 +281,7 @@ const css = `
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--sl-color-neutral-400);
background: var(--wa-color-neutral-container-fill-vivid);
transform: translateX(-3px);
}
@@ -288,7 +302,7 @@ const App = () => (
slot="start"
style={{
height: '200px',
background: 'var(--sl-color-neutral-50)',
background: 'var(--wa-color-surface-lowered)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
@@ -300,7 +314,7 @@ const App = () => (
slot="end"
style={{
height: '200px',
background: 'var(--sl-color-neutral-50)',
background: 'var(--wa-color-surface-lowered)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
@@ -328,13 +342,13 @@ Add the `disabled` attribute to prevent the divider from being repositioned.
<sl-split-panel disabled>
<div
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
</div>
<div
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
</div>
@@ -352,7 +366,7 @@ const App = () => (
slot="start"
style={{
height: '200px',
background: 'var(--sl-color-neutral-50)',
background: 'var(--wa-color-surface-lowered)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
@@ -364,7 +378,7 @@ const App = () => (
slot="end"
style={{
height: '200px',
background: 'var(--sl-color-neutral-50)',
background: 'var(--wa-color-surface-lowered)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
@@ -389,13 +403,13 @@ Try resizing the example below with each option and notice how the panels respon
<sl-split-panel>
<div
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
</div>
<div
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
</div>
@@ -435,7 +449,7 @@ const App = () => {
slot="start"
style={{
height: '200px',
background: 'var(--sl-color-neutral-50)',
background: 'var(--wa-color-surface-lowered)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
@@ -447,7 +461,7 @@ const App = () => {
slot="end"
style={{
height: '200px',
background: 'var(--sl-color-neutral-50)',
background: 'var(--wa-color-surface-lowered)',
display: 'flex',
alignItems: '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);">
<div
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
</div>
<div
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
</div>
@@ -508,7 +522,7 @@ const App = () => (
slot="start"
style={{
height: '200px',
background: 'var(--sl-color-neutral-50)',
background: 'var(--wa-color-surface-lowered)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
@@ -520,7 +534,7 @@ const App = () => (
slot="end"
style={{
height: '200px',
background: 'var(--sl-color-neutral-50)',
background: 'var(--wa-color-surface-lowered)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
@@ -542,7 +556,7 @@ Create complex layouts that can be repositioned independently by nesting split p
<sl-split-panel>
<div
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
</div>
@@ -550,13 +564,13 @@ Create complex layouts that can be repositioned independently by nesting split p
<sl-split-panel vertical style="height: 400px;">
<div
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
</div>
<div
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
</div>
@@ -576,7 +590,7 @@ const App = () => (
slot="start"
style={{
height: '400px',
background: 'var(--sl-color-neutral-50)',
background: 'var(--wa-color-surface-lowered)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
@@ -590,7 +604,7 @@ const App = () => (
slot="start"
style={{
height: '100%',
background: 'var(--sl-color-neutral-50)',
background: 'var(--wa-color-surface-lowered)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
@@ -602,7 +616,7 @@ const App = () => (
slot="end"
style={{
height: '100%',
background: 'var(--sl-color-neutral-50)',
background: 'var(--wa-color-surface-lowered)',
display: 'flex',
alignItems: '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>
<div
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
</div>
<div
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
</div>
@@ -653,7 +681,7 @@ const App = () => (
slot="start"
style={{
height: '200px',
background: 'var(--sl-color-neutral-50)',
background: 'var(--wa-color-surface-lowered)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
@@ -665,7 +693,7 @@ const App = () => (
slot="end"
style={{
height: '200px',
background: 'var(--sl-color-neutral-50)',
background: 'var(--wa-color-surface-lowered)',
display: 'flex',
alignItems: '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>
<div
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
</div>
<div
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
</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) {
background-color: var(--sl-color-pink-600);
background-color: var(--wa-color-red-50);
}
.split-panel-divider sl-icon {
position: absolute;
border-radius: var(--sl-border-radius-small);
background: var(--sl-color-pink-600);
color: var(--sl-color-neutral-0);
border-radius: var(--wa-corners-3x);
background: var(--wa-color-red-50);
color: var(--wa-color-white);
padding: 0.5rem 0.125rem;
}
.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 {
background-color: var(--sl-color-primary-600);
color: var(--sl-color-neutral-0);
background-color: var(--wa-color-blue-50);
color: var(--wa-color-white);
}
</style>
```
@@ -740,24 +782,24 @@ const css = `
}
.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 {
position: absolute;
border-radius: var(--sl-border-radius-small);
background: var(--sl-color-pink-600);
color: var(--sl-color-neutral-0);
border-radius: var(--wa-corners-half);
background: var(--wa-color-red-50);
color: var(--wa-color-white);
padding: .5rem .125rem;
}
.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 {
background-color: var(--sl-color-primary-600);
color: var(--sl-color-neutral-0);
background-color: var(--wa-color-blue-50);
color: var(--wa-color-white);
}
`;
@@ -770,7 +812,7 @@ const App = () => (
slot="start"
style={{
height: '200px',
background: 'var(--sl-color-neutral-50)',
background: 'var(--wa-color-surface-lowered)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
@@ -782,7 +824,7 @@ const App = () => (
slot="end"
style={{
height: '200px',
background: 'var(--sl-color-neutral-50)',
background: 'var(--wa-color-surface-lowered)',
display: 'flex',
alignItems: '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>
.tags-removable sl-tag {
transition: var(--sl-transition-medium) opacity;
transition: var(--wa-transition-fast) opacity;
}
</style>
```
@@ -112,7 +112,7 @@ import SlTag from '@shoelace-style/shoelace/dist/react/tag';
const css = `
.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
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
<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-tooltip>
```
@@ -310,7 +310,7 @@ import SlButton from '@shoelace-style/shoelace/dist/react/button';
import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
const App = () => (
<div style={{ '--sl-tooltip-arrow-size': '0' }}>
<div style={{ '--wa-tooltip-arrow-size': '0' }}>
<SlTooltip content="This is a tooltip">
<SlButton>Above</SlButton>
</SlTooltip>
@@ -328,7 +328,7 @@ To override it globally, set it in a root block in your stylesheet after the Sho
```css
: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>
.tooltip-hoist {
position: relative;
border: solid 2px var(--sl-panel-border-color);
border: solid 2px var(--wa-color-surface-outline);
overflow: hidden;
padding: var(--sl-spacing-medium);
padding: var(--wa-space-m);
}
</style>
```
@@ -415,9 +415,9 @@ import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
const css = `
.tooltip-hoist {
border: solid 2px var(--sl-panel-border-color);
border: solid 2px var(--wa-color-surface-outline);
overflow: hidden;
padding: var(--sl-spacing-medium);
padding: var(--wa-space-m);
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 {
margin: var(--sl-spacing-large) 0;
margin: var(--wa-space-l) 0;
}
</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-checkbox {
display: block;
margin-bottom: var(--sl-spacing-medium);
margin-bottom: var(--wa-space-m);
}
/* 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 {
margin-top: var(--sl-spacing-medium);
margin-top: var(--wa-space-m);
}
.inline-validation sl-input {

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

@@ -36,10 +36,10 @@ export default css`
background: none;
border: solid 2px currentColor;
background-color: rgb(0 0 0 /50%);
border-radius: var(--sl-border-radius-circle);
color: white;
border-radius: var(--wa-corners-circle);
color: var(--wa-color-white);
pointer-events: none;
transition: var(--sl-transition-fast) opacity;
transition: var(--wa-transition-fast) opacity;
}
: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;
width: var(--size);
height: var(--size);
background-color: var(--sl-color-neutral-400);
font-family: var(--sl-font-sans);
background-color: var(--wa-color-neutral-element-fill-vivid);
font-family: var(--wa-font-family-body);
font-size: calc(var(--size) * 0.5);
font-weight: var(--sl-font-weight-normal);
color: var(--sl-color-neutral-0);
font-weight: var(--wa-font-weight-normal);
color: var(--wa-color-neutral-text-on-vivid);
user-select: none;
vertical-align: middle;
}
.avatar--circle,
.avatar--circle .avatar__image {
border-radius: var(--sl-border-radius-circle);
border-radius: var(--wa-corners-circle);
}
.avatar--rounded,
.avatar--rounded .avatar__image {
border-radius: var(--sl-border-radius-medium);
border-radius: var(--wa-corners-1x);
}
.avatar--square {

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

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

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

@@ -11,11 +11,11 @@ export default css`
.breadcrumb-item {
display: inline-flex;
align-items: center;
font-family: var(--sl-font-sans);
font-size: var(--sl-font-size-small);
font-weight: var(--sl-font-weight-semibold);
color: var(--sl-color-neutral-600);
line-height: var(--sl-line-height-normal);
font-family: var(--wa-font-family-body);
font-size: var(--wa-font-size-s);
font-weight: var(--wa-font-weight-medium);
color: var(--wa-color-neutral-text-on-surface);
line-height: var(--wa-line-height-regular);
white-space: nowrap;
}
@@ -29,23 +29,23 @@ export default css`
color: inherit;
background: none;
border: none;
border-radius: var(--sl-border-radius-medium);
border-radius: var(--wa-corners-1x);
padding: 0;
margin: 0;
cursor: pointer;
transition: var(--sl-transition-fast) --color;
transition: var(--wa-transition-fast) --color;
}
: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 {
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 {
color: var(--sl-color-primary-600);
color: var(--wa-color-brand-text-on-surface);
}
.breadcrumb-item__label:focus {
@@ -53,8 +53,8 @@ export default css`
}
.breadcrumb-item__label:focus-visible {
outline: var(--sl-focus-ring);
outline-offset: var(--sl-focus-ring-offset);
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
.breadcrumb-item__prefix,
@@ -67,12 +67,12 @@ export default css`
.breadcrumb-item--has-prefix .breadcrumb-item__prefix {
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 {
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 {
@@ -82,7 +82,7 @@ export default css`
.breadcrumb-item__separator {
display: inline-flex;
align-items: center;
margin: 0 var(--sl-spacing-x-small);
margin: 0 var(--wa-space-xs);
user-select: none;
}
`;

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

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

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

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

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

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

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

@@ -5,11 +5,11 @@ export default css`
${componentStyles}
:host {
--size: 128px;
--track-width: 4px;
--track-color: var(--sl-color-neutral-200);
--size: 8rem;
--track-width: 0.25rem;
--track-color: var(--wa-color-neutral-container-fill-muted);
--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;
display: inline-flex;

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

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

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

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

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

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

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

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

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

@@ -27,53 +27,53 @@ export default css`
*/
.tag--primary {
background-color: var(--sl-color-primary-50);
border-color: var(--sl-color-primary-200);
color: var(--sl-color-primary-800);
background-color: var(--wa-color-brand-container-fill-muted);
border-color: var(--wa-color-brand-element-outline-muted);
color: var(--wa-color-brand-text-on-muted);
}
.tag--primary:active > sl-icon-button {
color: var(--sl-color-primary-600);
color: var(--wa-color-brand-text-on-muted);
}
.tag--success {
background-color: var(--sl-color-success-50);
border-color: var(--sl-color-success-200);
color: var(--sl-color-success-800);
background-color: var(--wa-color-success-container-fill-muted);
border-color: var(--wa-color-success-element-outline-muted);
color: var(--wa-color-success-text-on-muted);
}
.tag--success:active > sl-icon-button {
color: var(--sl-color-success-600);
color: var(--wa-color-success-text-on-muted);
}
.tag--neutral {
background-color: var(--sl-color-neutral-50);
border-color: var(--sl-color-neutral-200);
color: var(--sl-color-neutral-800);
background-color: var(--wa-color-neutral-container-fill-muted);
border-color: var(--wa-color-neutral-element-outline-muted);
color: var(--wa-color-neutral-text-on-muted);
}
.tag--neutral:active > sl-icon-button {
color: var(--sl-color-neutral-600);
color: var(--wa-color-neutral-text-on-muted);
}
.tag--warning {
background-color: var(--sl-color-warning-50);
border-color: var(--sl-color-warning-200);
color: var(--sl-color-warning-800);
background-color: var(--wa-color-warning-container-fill-muted);
border-color: var(--wa-color-warning-element-outline-muted);
color: var(--wa-color-warning-text-on-muted);
}
.tag--warning:active > sl-icon-button {
color: var(--sl-color-warning-600);
color: var(--wa-color-warning-text-on-muted);
}
.tag--danger {
background-color: var(--sl-color-danger-50);
border-color: var(--sl-color-danger-200);
color: var(--sl-color-danger-800);
background-color: var(--wa-color-danger-container-fill-muted);
border-color: var(--wa-color-danger-element-outline-muted);
color: var(--wa-color-danger-text-on-muted);
}
.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 {
font-size: var(--sl-button-font-size-small);
height: calc(var(--sl-input-height-small) * 0.8);
line-height: calc(var(--sl-input-height-small) - var(--sl-input-border-width) * 2);
border-radius: var(--sl-input-border-radius-small);
padding: 0 var(--sl-spacing-x-small);
font-size: var(--wa-font-size-xs);
border-radius: var(--wa-corners-1x);
padding: var(--wa-space-3xs) var(--wa-space-2xs);
}
.tag--medium {
font-size: var(--sl-button-font-size-medium);
height: calc(var(--sl-input-height-medium) * 0.8);
line-height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2);
border-radius: var(--sl-input-border-radius-medium);
padding: 0 var(--sl-spacing-small);
font-size: var(--wa-font-size-s);
border-radius: var(--wa-corners-1x);
padding: var(--wa-space-2xs) var(--wa-space-xs);
}
.tag--large {
font-size: var(--sl-button-font-size-large);
height: calc(var(--sl-input-height-large) * 0.8);
line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
border-radius: var(--sl-input-border-radius-large);
padding: 0 var(--sl-spacing-medium);
font-size: var(--wa-font-size-m);
border-radius: var(--wa-corners-1x);
padding: var(--wa-space-2xs) var(--wa-space-xs);
}
.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 {
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 {
--arrow-size: var(--sl-tooltip-arrow-size);
--arrow-color: var(--sl-tooltip-background-color);
--arrow-size: var(--wa-tooltip-arrow-size);
--arrow-color: var(--wa-color-neutral-element-fill-vivid);
}
.tooltip::part(popup) {
pointer-events: none;
z-index: var(--sl-z-index-tooltip);
z-index: var(--wa-z-index-tooltip);
}
.tooltip[placement^='top']::part(popup) {
@@ -42,14 +42,14 @@ export default css`
display: block;
width: max-content;
max-width: var(--max-width);
border-radius: var(--sl-tooltip-border-radius);
background-color: var(--sl-tooltip-background-color);
font-family: var(--sl-tooltip-font-family);
font-size: var(--sl-tooltip-font-size);
font-weight: var(--sl-tooltip-font-weight);
line-height: var(--sl-tooltip-line-height);
color: var(--sl-tooltip-color);
padding: var(--sl-tooltip-padding);
border-radius: var(--wa-corners-1x);
background-color: var(--wa-color-neutral-element-fill-vivid);
font-family: var(--wa-font-family-body);
font-size: var(--wa-font-size-s);
font-weight: var(--wa-font-weight-regular);
line-height: var(--wa-line-height-regular);
color: var(--wa-color-neutral-text-on-vivid);
padding: var(--wa-space-2xs) var(--wa-space-xs);
pointer-events: 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) {
margin-inline-end: var(--sl-spacing-x-small);
margin-inline-end: var(--wa-space-xs);
}
.tree-item {
@@ -23,7 +23,7 @@ export default css`
display: flex;
align-items: stretch;
flex-direction: column;
color: var(--sl-color-neutral-700);
color: var(--wa-color-text-normal);
cursor: pointer;
user-select: none;
}
@@ -35,11 +35,10 @@ export default css`
.tree-item__expand-button,
.tree-item__checkbox,
.tree-item__label {
font-family: var(--sl-font-sans);
font-size: var(--sl-font-size-medium);
font-weight: var(--sl-font-weight-normal);
line-height: var(--sl-line-height-dense);
letter-spacing: var(--sl-letter-spacing-normal);
font-family: var(--wa-font-family-body);
font-size: var(--wa-font-size-m);
font-weight: var(--wa-font-weight-regular);
line-height: var(--wa-line-height-regular);
}
.tree-item__checkbox::part(base) {
@@ -58,8 +57,8 @@ export default css`
align-items: center;
justify-content: center;
box-sizing: content-box;
color: var(--sl-color-neutral-500);
padding: var(--sl-spacing-x-small);
color: var(--wa-color-neutral-element-fill-vivid);
padding: var(--wa-space-xs);
width: 1rem;
height: 1rem;
flex-shrink: 0;
@@ -67,7 +66,7 @@ export default css`
}
.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 {
@@ -104,29 +103,29 @@ export default css`
}
:host(:focus-visible) .tree-item__item {
outline: var(--sl-focus-ring);
outline-offset: var(--sl-focus-ring-offset);
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
z-index: 2;
}
:host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
background-color: var(--sl-color-neutral-100);
border-inline-start-color: var(--sl-color-primary-600);
background-color: var(--wa-color-neutral-container-fill-muted);
border-inline-start-color: var(--wa-color-brand-element-outline-vivid);
}
:host(:not([aria-disabled='true'])) .tree-item__expand-button {
color: var(--sl-color-neutral-600);
color: var(--wa-color-neutral-element-fill-vivid);
}
.tree-item__label {
display: flex;
align-items: center;
transition: var(--sl-transition-fast) color;
transition: var(--wa-transition-fast) color;
}
.tree-item__children {
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 */

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
* stay consistent.
*/
--indent-guide-color: var(--sl-color-neutral-200);
--indent-guide-color: var(--wa-color-surface-outline);
--indent-guide-offset: 0;
--indent-guide-style: solid;
--indent-guide-width: 0;
--indent-size: var(--sl-spacing-large);
--indent-size: var(--wa-space-l);
display: block;
isolation: isolate;

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

@@ -12,48 +12,48 @@ export default css`
/* Label */
.form-control--has-label .form-control__label {
display: inline-block;
color: var(--sl-input-label-color);
margin-bottom: var(--sl-spacing-3x-small);
color: inherit;
margin-bottom: var(--wa-space-3xs);
}
.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 {
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 {
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 {
content: var(--sl-input-required-content);
margin-inline-start: var(--sl-input-required-content-offset);
color: var(--sl-input-required-content-color);
content: var(--wa-form-controls-required-content);
margin-inline-start: var(--wa-space-2xs);
color: var(--wa-form-controls-required-content-color);
}
/* Help text */
.form-control--has-help-text .form-control__help-text {
display: block;
color: var(--sl-input-help-text-color);
margin-top: var(--sl-spacing-3x-small);
color: var(--wa-color-text-quiet);
margin-top: var(--wa-space-3xs);
}
.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 {
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 {
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 {
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-padding: var(--wa-space-square-s);
--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 */