diff --git a/cspell.json b/cspell.json
index 028a62671..5604aab40 100644
--- a/cspell.json
+++ b/cspell.json
@@ -109,6 +109,7 @@
     "novalidate",
     "npmdir",
     "Numberish",
+    "oklch",
     "outdir",
     "ParamagicDev",
     "peta",
diff --git a/docs/assets/styles/search.css b/docs/assets/styles/search.css
index ba8660492..5c6aa4f07 100644
--- a/docs/assets/styles/search.css
+++ b/docs/assets/styles/search.css
@@ -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;
 }
 
diff --git a/docs/pages/components/alert.md b/docs/pages/components/alert.md
index a2451e200..90c275e64 100644
--- a/docs/pages/components/alert.md
+++ b/docs/pages/components/alert.md
@@ -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);
   }
 `;
 
diff --git a/docs/pages/components/animation.md b/docs/pages/components/animation.md
index 6d99353da..07a96d14c 100644
--- a/docs/pages/components/animation.md
+++ b/docs/pages/components/animation.md
@@ -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);
   }
 `;
 
diff --git a/docs/pages/components/avatar.md b/docs/pages/components/avatar.md
index 9a3fc26f9..36a74aa3c 100644
--- a/docs/pages/components/avatar.md
+++ b/docs/pages/components/avatar.md
@@ -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);
   }
 `;
 
diff --git a/docs/pages/components/badge.md b/docs/pages/components/badge.md
index 1710eee4b..9e3640148 100644
--- a/docs/pages/components/badge.md
+++ b/docs/pages/components/badge.md
@@ -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>
diff --git a/docs/pages/components/button-group.md b/docs/pages/components/button-group.md
index 27e5c831d..8d624db5d 100644
--- a/docs/pages/components/button-group.md
+++ b/docs/pages/components/button-group.md
@@ -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);
   }
 `;
 
diff --git a/docs/pages/components/card.md b/docs/pages/components/card.md
index 4d3bb7f38..3108f9983 100644
--- a/docs/pages/components/card.md
+++ b/docs/pages/components/card.md
@@ -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);
   }
 `;
 
diff --git a/docs/pages/components/carousel.md b/docs/pages/components/carousel.md
index b1d612173..5736fdc42 100644
--- a/docs/pages/components/carousel.md
+++ b/docs/pages/components/carousel.md
@@ -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 {
diff --git a/docs/pages/components/details.md b/docs/pages/components/details.md
index 89d997321..b279b2d3e 100644
--- a/docs/pages/components/details.md
+++ b/docs/pages/components/details.md
@@ -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>
 ```
diff --git a/docs/pages/components/dropdown.md b/docs/pages/components/dropdown.md
index b1876056e..5d7d2ba99 100644
--- a/docs/pages/components/dropdown.md
+++ b/docs/pages/components/dropdown.md
@@ -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;
   }
 `;
diff --git a/docs/pages/components/icon.md b/docs/pages/components/icon.md
index 9a8b8bd46..f8a5e240a 100644
--- a/docs/pages/components/icon.md
+++ b/docs/pages/components/icon.md
@@ -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"] {
diff --git a/docs/pages/components/input.md b/docs/pages/components/input.md
index 2a60cbf0e..d6732c4ed 100644
--- a/docs/pages/components/input.md
+++ b/docs/pages/components/input.md
@@ -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;
   }
 
diff --git a/docs/pages/components/mutation-observer.md b/docs/pages/components/mutation-observer.md
index 52d0d9890..7f3cfb982 100644
--- a/docs/pages/components/mutation-observer.md
+++ b/docs/pages/components/mutation-observer.md
@@ -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>
     </>
   );
diff --git a/docs/pages/components/popup.md b/docs/pages/components/popup.md
index 168120904..cee08e377 100644
--- a/docs/pages/components/popup.md
+++ b/docs/pages/components/popup.md
@@ -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;
diff --git a/docs/pages/components/rating.md b/docs/pages/components/rating.md
index fac6a6d21..bd84ebd07 100644
--- a/docs/pages/components/rating.md
+++ b/docs/pages/components/rating.md
@@ -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;
   }
diff --git a/docs/pages/components/resize-observer.md b/docs/pages/components/resize-observer.md
index 593ff0a0a..f0c96d718 100644
--- a/docs/pages/components/resize-observer.md
+++ b/docs/pages/components/resize-observer.md
@@ -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;
diff --git a/docs/pages/components/skeleton.md b/docs/pages/components/skeleton.md
index 93a39ec63..bdc7866fa 100644
--- a/docs/pages/components/skeleton.md
+++ b/docs/pages/components/skeleton.md
@@ -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);
   }
 `;
 
diff --git a/docs/pages/components/split-panel.md b/docs/pages/components/split-panel.md
index c9063f8ec..6b22f3d10 100644
--- a/docs/pages/components/split-panel.md
+++ b/docs/pages/components/split-panel.md
@@ -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'
diff --git a/docs/pages/components/tag.md b/docs/pages/components/tag.md
index 4339ff58d..27696cdd3 100644
--- a/docs/pages/components/tag.md
+++ b/docs/pages/components/tag.md
@@ -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;
   }
 `;
 
diff --git a/docs/pages/components/tooltip.md b/docs/pages/components/tooltip.md
index 6d0177b43..bd2b27850 100644
--- a/docs/pages/components/tooltip.md
+++ b/docs/pages/components/tooltip.md
@@ -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;
   }
 `;
diff --git a/docs/pages/frameworks/vue.md b/docs/pages/frameworks/vue.md
index 5a63d32d6..1bf2d4bff 100644
--- a/docs/pages/frameworks/vue.md
+++ b/docs/pages/frameworks/vue.md
@@ -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>
 ```
diff --git a/docs/pages/getting-started/form-controls.md b/docs/pages/getting-started/form-controls.md
index 8cc04584e..9e743a36b 100644
--- a/docs/pages/getting-started/form-controls.md
+++ b/docs/pages/getting-started/form-controls.md
@@ -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 {
diff --git a/src/components/animated-image/animated-image.styles.ts b/src/components/animated-image/animated-image.styles.ts
index 3f326284b..0fb05c70c 100644
--- a/src/components/animated-image/animated-image.styles.ts
+++ b/src/components/animated-image/animated-image.styles.ts
@@ -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 {
diff --git a/src/components/avatar/avatar.styles.ts b/src/components/avatar/avatar.styles.ts
index 0d556b8f7..8ba9cbb4d 100644
--- a/src/components/avatar/avatar.styles.ts
+++ b/src/components/avatar/avatar.styles.ts
@@ -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 {
diff --git a/src/components/badge/badge.styles.ts b/src/components/badge/badge.styles.ts
index d1b1334a5..97f760ddc 100644
--- a/src/components/badge/badge.styles.ts
+++ b/src/components/badge/badge.styles.ts
@@ -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 {
diff --git a/src/components/breadcrumb-item/breadcrumb-item.styles.ts b/src/components/breadcrumb-item/breadcrumb-item.styles.ts
index df1a32721..92b017b13 100644
--- a/src/components/breadcrumb-item/breadcrumb-item.styles.ts
+++ b/src/components/breadcrumb-item/breadcrumb-item.styles.ts
@@ -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;
   }
 `;
diff --git a/src/components/card/card.styles.ts b/src/components/card/card.styles.ts
index b334c1265..1d6e1a826 100644
--- a/src/components/card/card.styles.ts
+++ b/src/components/card/card.styles.ts
@@ -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);
   }
diff --git a/src/components/icon-button/icon-button.styles.ts b/src/components/icon-button/icon-button.styles.ts
index fadb11d90..6e4e9af8e 100644
--- a/src/components/icon-button/icon-button.styles.ts
+++ b/src/components/icon-button/icon-button.styles.ts
@@ -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 {
diff --git a/src/components/popup/popup.styles.ts b/src/components/popup/popup.styles.ts
index 449f1576d..69ea09e4f 100644
--- a/src/components/popup/popup.styles.ts
+++ b/src/components/popup/popup.styles.ts
@@ -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
diff --git a/src/components/progress-bar/progress-bar.styles.ts b/src/components/progress-bar/progress-bar.styles.ts
index e4522d9f9..120dd25db 100644
--- a/src/components/progress-bar/progress-bar.styles.ts
+++ b/src/components/progress-bar/progress-bar.styles.ts
@@ -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 {
diff --git a/src/components/progress-ring/progress-ring.styles.ts b/src/components/progress-ring/progress-ring.styles.ts
index b0a0586d0..703f7179a 100644
--- a/src/components/progress-ring/progress-ring.styles.ts
+++ b/src/components/progress-ring/progress-ring.styles.ts
@@ -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;
diff --git a/src/components/rating/rating.styles.ts b/src/components/rating/rating.styles.ts
index d01360c2c..b30cc00ea 100644
--- a/src/components/rating/rating.styles.ts
+++ b/src/components/rating/rating.styles.ts
@@ -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 {
diff --git a/src/components/skeleton/skeleton.styles.ts b/src/components/skeleton/skeleton.styles.ts
index c25de4690..4b3193f6b 100644
--- a/src/components/skeleton/skeleton.styles.ts
+++ b/src/components/skeleton/skeleton.styles.ts
@@ -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;
diff --git a/src/components/spinner/spinner.styles.ts b/src/components/spinner/spinner.styles.ts
index fd69d41a8..ca9d4c0dd 100644
--- a/src/components/spinner/spinner.styles.ts
+++ b/src/components/spinner/spinner.styles.ts
@@ -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;
diff --git a/src/components/split-panel/split-panel.styles.ts b/src/components/split-panel/split-panel.styles.ts
index ff5ae2501..f6bb9bfa1 100644
--- a/src/components/split-panel/split-panel.styles.ts
+++ b/src/components/split-panel/split-panel.styles.ts
@@ -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 {
diff --git a/src/components/tag/tag.styles.ts b/src/components/tag/tag.styles.ts
index 07fd25d9a..0b78ffb10 100644
--- a/src/components/tag/tag.styles.ts
+++ b/src/components/tag/tag.styles.ts
@@ -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);
   }
 `;
diff --git a/src/components/tooltip/tooltip.styles.ts b/src/components/tooltip/tooltip.styles.ts
index c4d9d6db8..918e6751d 100644
--- a/src/components/tooltip/tooltip.styles.ts
+++ b/src/components/tooltip/tooltip.styles.ts
@@ -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;
   }
diff --git a/src/components/tree-item/tree-item.styles.ts b/src/components/tree-item/tree-item.styles.ts
index 5f8d1fab3..b0201c7d3 100644
--- a/src/components/tree-item/tree-item.styles.ts
+++ b/src/components/tree-item/tree-item.styles.ts
@@ -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 */
diff --git a/src/components/tree/tree.styles.ts b/src/components/tree/tree.styles.ts
index 0733fcbd5..d06e880f2 100644
--- a/src/components/tree/tree.styles.ts
+++ b/src/components/tree/tree.styles.ts
@@ -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;
diff --git a/src/styles/form-control.styles.ts b/src/styles/form-control.styles.ts
index 37e340ed8..ac8721542 100644
--- a/src/styles/form-control.styles.ts
+++ b/src/styles/form-control.styles.ts
@@ -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);
   }
 `;
diff --git a/src/themes/default.css b/src/themes/default.css
index a597050be..799f1f237 100644
--- a/src/themes/default.css
+++ b/src/themes/default.css
@@ -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 */