From 67d4458e69466d4d8ce4240a009125ef827e09d5 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Wed, 6 Sep 2023 16:13:49 -0400
Subject: [PATCH] more stylez

---
 docs/pages/components/carousel.md             | 36 +++----
 docs/pages/components/checkbox.md             |  8 +-
 docs/pages/tokens/borders.md                  |  6 +-
 src/components/checkbox/checkbox.styles.ts    | 61 ++++++------
 .../color-picker/color-picker.styles.ts       | 94 +++++++++----------
 .../radio-button/radio-button.component.ts    |  3 +-
 src/themes/default.css                        | 15 ++-
 7 files changed, 114 insertions(+), 109 deletions(-)

diff --git a/docs/pages/components/carousel.md b/docs/pages/components/carousel.md
index 5736fdc42..b8d6b5c0f 100644
--- a/docs/pages/components/carousel.md
+++ b/docs/pages/components/carousel.md
@@ -518,12 +518,12 @@ The `slides-per-page` attribute makes it possible to display multiple slides at
 
 ```html:preview
 <sl-carousel navigation pagination slides-per-page="2" slides-per-move="2">
-  <sl-carousel-item style="background: var(--sl-color-red-200);">Slide 1</sl-carousel-item>
-  <sl-carousel-item style="background: var(--sl-color-orange-200);">Slide 2</sl-carousel-item>
-  <sl-carousel-item style="background: var(--sl-color-yellow-200);">Slide 3</sl-carousel-item>
-  <sl-carousel-item style="background: var(--sl-color-green-200);">Slide 4</sl-carousel-item>
-  <sl-carousel-item style="background: var(--sl-color-blue-200);">Slide 5</sl-carousel-item>
-  <sl-carousel-item style="background: var(--sl-color-violet-200);">Slide 6</sl-carousel-item>
+  <sl-carousel-item style="background: red;">Slide 1</sl-carousel-item>
+  <sl-carousel-item style="background: orange;">Slide 2</sl-carousel-item>
+  <sl-carousel-item style="background: yellow;">Slide 3</sl-carousel-item>
+  <sl-carousel-item style="background: green;">Slide 4</sl-carousel-item>
+  <sl-carousel-item style="background: blue;">Slide 5</sl-carousel-item>
+  <sl-carousel-item style="background: purple;">Slide 6</sl-carousel-item>
 </sl-carousel>
 ```
 
@@ -535,12 +535,12 @@ import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
 
 const App = () => (
   <SlCarousel navigation pagination slidesPerPage={2} slidesPerMove={2}>
-    <SlCarouselItem style={{ background: 'var(--sl-color-red-200)' }}>Slide 1</SlCarouselItem>
-    <SlCarouselItem style={{ background: 'var(--sl-color-orange-200)' }}>Slide 2</SlCarouselItem>
-    <SlCarouselItem style={{ background: 'var(--sl-color-yellow-200)' }}>Slide 3</SlCarouselItem>
-    <SlCarouselItem style={{ background: 'var(--sl-color-green-200)' }}>Slide 4</SlCarouselItem>
-    <SlCarouselItem style={{ background: 'var(--sl-color-blue-200)' }}>Slide 5</SlCarouselItem>
-    <SlCarouselItem style={{ background: 'var(--sl-color-violet-200)' }}>Slide 6</SlCarouselItem>
+    <SlCarouselItem style={{ background: 'red' }}>Slide 1</SlCarouselItem>
+    <SlCarouselItem style={{ background: 'orange' }}>Slide 2</SlCarouselItem>
+    <SlCarouselItem style={{ background: 'yellow' }}>Slide 3</SlCarouselItem>
+    <SlCarouselItem style={{ background: 'green' }}>Slide 4</SlCarouselItem>
+    <SlCarouselItem style={{ background: 'blue' }}>Slide 5</SlCarouselItem>
+    <SlCarouselItem style={{ background: 'purple' }}>Slide 6</SlCarouselItem>
   </SlCarousel>
 );
 ```
@@ -553,9 +553,9 @@ The content of the carousel can be changed by adding or removing carousel items.
 
 ```html:preview
 <sl-carousel class="dynamic-carousel" pagination navigation>
-  <sl-carousel-item style="background: var(--sl-color-red-200)">Slide 1</sl-carousel-item>
-  <sl-carousel-item style="background: var(--sl-color-orange-200)">Slide 2</sl-carousel-item>
-  <sl-carousel-item style="background: var(--sl-color-yellow-200)">Slide 3</sl-carousel-item>
+  <sl-carousel-item style="background: red">Slide 1</sl-carousel-item>
+  <sl-carousel-item style="background: orange">Slide 2</sl-carousel-item>
+  <sl-carousel-item style="background: yellow">Slide 3</sl-carousel-item>
 </sl-carousel>
 
 <div class="carousel-options">
@@ -589,14 +589,14 @@ The content of the carousel can be changed by adding or removing carousel items.
     const dynamicCarousel = document.querySelector('.dynamic-carousel');
     const dynamicAdd = document.querySelector('#dynamic-add');
     const dynamicRemove = document.querySelector('#dynamic-remove');
-    const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'violet'];
+    const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
     let colorIndex = 2;
 
     const addSlide = () => {
       const slide = document.createElement('sl-carousel-item');
       const color = colors[++colorIndex % colors.length];
       slide.innerText = `Slide ${dynamicCarousel.children.length + 1}`;
-      slide.style.setProperty('background', `var(--sl-color-${color}-200)`);
+      slide.style.setProperty('background', color);
       dynamicCarousel.appendChild(slide);
       dynamicRemove.disabled = false;
     };
@@ -649,7 +649,7 @@ const css = `
 
 const App = () => {
   const [slides, setSlides] = useState(['#204ed8', '#be133d', '#6e28d9']);
-  const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'violet'];
+  const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
 
   const addSlide = () => {
     setSlides([...slides, getRandomColor()]);
diff --git a/docs/pages/components/checkbox.md b/docs/pages/components/checkbox.md
index c1c41da60..763104c86 100644
--- a/docs/pages/components/checkbox.md
+++ b/docs/pages/components/checkbox.md
@@ -116,9 +116,11 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
   });
 
   // Handle submit
-  form.addEventListener('submit', event => {
-    event.preventDefault();
-    alert('All fields are valid!');
+  customElements.whenDefined('sl-checkbox').then(() => {
+    form.addEventListener('submit', event => {
+      event.preventDefault();
+      alert('All fields are valid!');
+    });
   });
 </script>
 ```
diff --git a/docs/pages/tokens/borders.md b/docs/pages/tokens/borders.md
index 5e98c8ccb..83842a3bc 100644
--- a/docs/pages/tokens/borders.md
+++ b/docs/pages/tokens/borders.md
@@ -11,9 +11,9 @@ Border radius tokens are used to give sharp edges a more subtle, rounded effect.
 | Token                      | Value                                         | Example                                                                              |
 | -------------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------ |
 | `--wa-border-style`        | `solid`                                       |                                                                                      |
-| `--sl-border-width-thin`   | 0.0625rem (1px)                               | <div class="border-demo" style="border-width: var(--wa-border-width-thin);"></div>   |
-| `--sl-border-width-medium` | `calc(var(--wa-border-width-thin) * 2)` (2px) | <div class="border-demo" style="border-width: var(--wa-border-width-medium);"></div> |
-| `--sl-border-width-thick`  | `calc(var(--wa-border-width-thin) * 3)` (3px) | <div class="border-demo" style="border-width: var(--wa-border-width-thick);"></div>  |
+| `--wa-border-width-thin`   | `0.0625rem` (1px)                             | <div class="border-demo" style="border-width: var(--wa-border-width-thin);"></div>   |
+| `--wa-border-width-medium` | `calc(var(--wa-border-width-thin) * 2)` (2px) | <div class="border-demo" style="border-width: var(--wa-border-width-medium);"></div> |
+| `--wa-border-width-thick`  | `calc(var(--wa-border-width-thin) * 3)` (3px) | <div class="border-demo" style="border-width: var(--wa-border-width-thick);"></div>  |
 
 ## Corners
 
diff --git a/src/components/checkbox/checkbox.styles.ts b/src/components/checkbox/checkbox.styles.ts
index ae741796b..55bbe4eb8 100644
--- a/src/components/checkbox/checkbox.styles.ts
+++ b/src/components/checkbox/checkbox.styles.ts
@@ -12,26 +12,26 @@ export default css`
     position: relative;
     display: inline-flex;
     align-items: flex-start;
-    font-family: var(--sl-input-font-family);
-    font-weight: var(--sl-input-font-weight);
-    color: var(--sl-input-label-color);
+    font-family: var(--wa-font-family-body);
+    font-weight: var(--wa-font-weight-normal);
+    color: var(--wa-form-controls-color-text);
     vertical-align: middle;
     cursor: pointer;
   }
 
   .checkbox--small {
-    --toggle-size: var(--sl-toggle-size-small);
-    font-size: var(--sl-input-font-size-small);
+    --toggle-size: var(--wa-form-control-toggle-size-s);
+    font-size: var(--wa-font-size-s);
   }
 
   .checkbox--medium {
-    --toggle-size: var(--sl-toggle-size-medium);
-    font-size: var(--sl-input-font-size-medium);
+    --toggle-size: var(--wa-form-control-toggle-size-m);
+    font-size: var(--wa-font-size-m);
   }
 
   .checkbox--large {
-    --toggle-size: var(--sl-toggle-size-large);
-    font-size: var(--sl-input-font-size-large);
+    --toggle-size: var(--wa-form-control-toggle-size-l);
+    font-size: var(--wa-font-size-l);
   }
 
   .checkbox__control {
@@ -42,12 +42,12 @@ export default css`
     justify-content: center;
     width: var(--toggle-size);
     height: var(--toggle-size);
-    border: solid var(--sl-input-border-width) var(--sl-input-border-color);
+    border: solid var(--wa-form-controls-border-width) var(--wa-form-controls-color-resting);
     border-radius: 2px;
-    background-color: var(--sl-input-background-color);
-    color: var(--sl-color-neutral-0);
-    transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
-      var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow;
+    background-color: var(--wa-form-controls-background);
+    color: var(--wa-form-controls-color-text);
+    transition: var(--wa-transition-fast) border-color, var(--wa-transition-fast) background-color,
+      var(--wa-transition-fast) color, var(--wa-transition-fast) box-shadow;
   }
 
   .checkbox__input {
@@ -65,37 +65,34 @@ export default css`
     height: var(--toggle-size);
   }
 
-  /* Hover */
-  .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {
-    border-color: var(--sl-input-border-color-hover);
-    background-color: var(--sl-input-background-color-hover);
-  }
-
   /* Focus */
   .checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
-    outline: var(--sl-focus-ring);
-    outline-offset: var(--sl-focus-ring-offset);
+    border-color: var(--wa-form-controls-color-activated);
+    outline: var(--wa-focus-ring);
+    outline-offset: var(--wa-focus-ring-offset);
   }
 
   /* Checked/indeterminate */
   .checkbox--checked .checkbox__control,
   .checkbox--indeterminate .checkbox__control {
-    border-color: var(--sl-color-primary-600);
-    background-color: var(--sl-color-primary-600);
+    color: var(--wa-color-brand-text-on-vivid);
+    border-color: var(--wa-color-brand-element-fill-vivid);
+    background-color: var(--wa-color-brand-element-fill-vivid);
   }
 
   /* Checked/indeterminate + hover */
   .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
   .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {
-    border-color: var(--sl-color-primary-500);
-    background-color: var(--sl-color-primary-500);
+    color: var(--wa-color-brand-text-on-vivid);
+    border-color: color-mix(in oklch, var(--wa-color-brand-element-fill-vivid), white 6%);
+    background-color: color-mix(in oklch, var(--wa-color-brand-element-fill-vivid), white 6%);
   }
 
   /* Checked/indeterminate + focus */
   .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control,
   .checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
-    outline: var(--sl-focus-ring);
-    outline-offset: var(--sl-focus-ring-offset);
+    outline: var(--wa-focus-ring);
+    outline-offset: var(--wa-focus-ring-offset);
   }
 
   /* Disabled */
@@ -106,14 +103,14 @@ export default css`
 
   .checkbox__label {
     display: inline-block;
-    color: var(--sl-input-label-color);
     line-height: var(--toggle-size);
-    margin-inline-start: 0.5em;
+    margin-inline-start: var(--wa-space-xs);
     user-select: none;
   }
 
   :host([required]) .checkbox__label::after {
-    content: var(--sl-input-required-content);
-    margin-inline-start: var(--sl-input-required-content-offset);
+    content: var(--wa-form-controls-required-content);
+    color: var(--wa-form-controls-required-content-color);
+    margin-inline-start: -0.2em;
   }
 `;
diff --git a/src/components/color-picker/color-picker.styles.ts b/src/components/color-picker/color-picker.styles.ts
index 6ebec95e7..878ef2b73 100644
--- a/src/components/color-picker/color-picker.styles.ts
+++ b/src/components/color-picker/color-picker.styles.ts
@@ -17,22 +17,22 @@ export default css`
 
   .color-picker {
     width: var(--grid-width);
-    font-family: var(--sl-font-sans);
-    font-size: var(--sl-font-size-medium);
-    font-weight: var(--sl-font-weight-normal);
+    font-family: var(--wa-font-family-body);
+    font-weight: var(--wa-font-weight-normal);
+    font-size: var(--wa-font-size-m);
     color: var(--color);
-    background-color: var(--sl-panel-background-color);
-    border-radius: var(--sl-border-radius-medium);
+    background-color: var(--wa-color-surface-raised);
+    border-radius: var(--wa-corners-1x);
     user-select: none;
   }
 
   .color-picker--inline {
-    border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
+    border: var(--wa-form-controls-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
   }
 
   .color-picker--inline: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);
   }
 
   .color-picker__grid {
@@ -40,8 +40,8 @@ export default css`
     height: var(--grid-height);
     background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),
       linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
-    border-top-left-radius: var(--sl-border-radius-medium);
-    border-top-right-radius: var(--sl-border-radius-medium);
+    border-top-left-radius: var(--wa-corners-1x);
+    border-top-right-radius: var(--wa-corners-1x);
     cursor: crosshair;
     forced-color-adjust: none;
   }
@@ -55,7 +55,7 @@ export default css`
     border: solid 2px white;
     margin-top: calc(var(--grid-handle-size) / -2);
     margin-left: calc(var(--grid-handle-size) / -2);
-    transition: var(--sl-transition-fast) scale;
+    transition: var(--wa-transition-fast) scale;
   }
 
   .color-picker__grid-handle--dragging {
@@ -64,11 +64,11 @@ export default css`
   }
 
   .color-picker__grid-handle:focus-visible {
-    outline: var(--sl-focus-ring);
+    outline: var(--wa-focus-ring);
   }
 
   .color-picker__controls {
-    padding: var(--sl-spacing-small);
+    padding: var(--wa-space-s);
     display: flex;
     align-items: center;
   }
@@ -80,13 +80,13 @@ export default css`
   .color-picker__slider {
     position: relative;
     height: var(--slider-height);
-    border-radius: var(--sl-border-radius-pill);
+    border-radius: var(--wa-corners-pill);
     box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
     forced-color-adjust: none;
   }
 
   .color-picker__slider:not(:last-of-type) {
-    margin-bottom: var(--sl-spacing-small);
+    margin-bottom: var(--wa-space-s);
   }
 
   .color-picker__slider-handle {
@@ -101,7 +101,7 @@ export default css`
   }
 
   .color-picker__slider-handle:focus-visible {
-    outline: var(--sl-focus-ring);
+    outline: var(--wa-focus-ring);
   }
 
   .color-picker__hue {
@@ -135,9 +135,9 @@ export default css`
     width: 2.25rem;
     height: 2.25rem;
     border: none;
-    border-radius: var(--sl-border-radius-circle);
+    border-radius: var(--wa-corners-circle);
     background: none;
-    margin-left: var(--sl-spacing-small);
+    margin-left: var(--wa-space-s);
     cursor: copy;
     forced-color-adjust: none;
   }
@@ -157,8 +157,8 @@ export default css`
   }
 
   .color-picker__preview: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);
   }
 
   .color-picker__preview-color {
@@ -176,7 +176,7 @@ export default css`
 
   @keyframes pulse {
     0% {
-      box-shadow: 0 0 0 0 var(--sl-color-primary-500);
+      box-shadow: 0 0 0 0 var(--wa-color-brand-container-fill-vivid);
     }
     70% {
       box-shadow: 0 0 0 0.5rem transparent;
@@ -188,7 +188,7 @@ export default css`
 
   .color-picker__user-input {
     display: flex;
-    padding: 0 var(--sl-spacing-small) var(--sl-spacing-small) var(--sl-spacing-small);
+    padding: 0 var(--wa-space-s) var(--wa-space-s) var(--wa-space-s);
   }
 
   .color-picker__user-input sl-input {
@@ -197,7 +197,7 @@ export default css`
   }
 
   .color-picker__user-input sl-button-group {
-    margin-left: var(--sl-spacing-small);
+    margin-left: var(--wa-space-s);
   }
 
   .color-picker__user-input sl-button {
@@ -211,8 +211,8 @@ export default css`
     grid-template-columns: repeat(8, 1fr);
     grid-gap: 0.5rem;
     justify-items: center;
-    border-top: solid 1px var(--sl-color-neutral-200);
-    padding: var(--sl-spacing-small);
+    border-top: solid 1px var(--wa-color-surface-outline);
+    padding: var(--wa-space-s);
     forced-color-adjust: none;
   }
 
@@ -220,7 +220,7 @@ export default css`
     position: relative;
     width: var(--swatch-size);
     height: var(--swatch-size);
-    border-radius: var(--sl-border-radius-small);
+    border-radius: var(--wa-corners-1x);
   }
 
   .color-picker__swatch .color-picker__swatch-color {
@@ -235,15 +235,15 @@ export default css`
   }
 
   .color-picker__swatch: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);
   }
 
   .color-picker__transparent-bg {
-    background-image: linear-gradient(45deg, var(--sl-color-neutral-300) 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, var(--sl-color-neutral-300) 75%),
-      linear-gradient(45deg, transparent 75%, var(--sl-color-neutral-300) 75%),
-      linear-gradient(45deg, var(--sl-color-neutral-300) 25%, transparent 25%);
+    background-image: linear-gradient(45deg, var(--wa-color-neutral-element-fill-muted) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-element-fill-muted) 75%),
+      linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-element-fill-muted) 75%),
+      linear-gradient(45deg, var(--wa-color-neutral-element-fill-muted) 25%, transparent 25%);
     background-size: 10px 10px;
     background-position: 0 0, 0 0, -5px -5px, 5px 5px;
   }
@@ -269,9 +269,9 @@ export default css`
 
   .color-dropdown::part(panel) {
     max-height: none;
-    background-color: var(--sl-panel-background-color);
-    border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
-    border-radius: var(--sl-border-radius-medium);
+    background-color: var(--wa-color-surface-raised);
+    border: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
+    border-radius: var(--wa-corners-1x);
     overflow: visible;
   }
 
@@ -285,21 +285,21 @@ export default css`
   }
 
   .color-dropdown__trigger.color-dropdown__trigger--small {
-    width: var(--sl-input-height-small);
-    height: var(--sl-input-height-small);
-    border-radius: var(--sl-border-radius-circle);
+    width: var(--wa-form-controls-height-s);
+    height: var(--wa-form-controls-height-s);
+    border-radius: var(--wa-corners-circle);
   }
 
   .color-dropdown__trigger.color-dropdown__trigger--medium {
-    width: var(--sl-input-height-medium);
-    height: var(--sl-input-height-medium);
-    border-radius: var(--sl-border-radius-circle);
+    width: var(--wa-form-controls-height-m);
+    height: var(--wa-form-controls-height-m);
+    border-radius: var(--wa-corners-circle);
   }
 
   .color-dropdown__trigger.color-dropdown__trigger--large {
-    width: var(--sl-input-height-large);
-    height: var(--sl-input-height-large);
-    border-radius: var(--sl-border-radius-circle);
+    width: var(--wa-form-controls-height-l);
+    height: var(--wa-form-controls-height-l);
+    border-radius: var(--wa-corners-circle);
   }
 
   .color-dropdown__trigger:before {
@@ -311,7 +311,7 @@ export default css`
     height: 100%;
     border-radius: inherit;
     background-color: currentColor;
-    box-shadow: inset 0 0 0 2px var(--sl-input-border-color), inset 0 0 0 4px var(--sl-color-neutral-0);
+    box-shadow: inset 0 0 0 2px var(--wa-form-controls-color-resting), inset 0 0 0 4px var(--wa-color-white);
   }
 
   .color-dropdown__trigger--empty:before {
@@ -323,8 +323,8 @@ export default css`
   }
 
   .color-dropdown__trigger:focus-visible:not(.color-dropdown__trigger--disabled) {
-    outline: var(--sl-focus-ring);
-    outline-offset: var(--sl-focus-ring-offset);
+    outline: var(--wa-focus-ring);
+    outline-offset: var(--wa-focus-ring-offset);
   }
 
   .color-dropdown__trigger.color-dropdown__trigger--disabled {
diff --git a/src/components/radio-button/radio-button.component.ts b/src/components/radio-button/radio-button.component.ts
index bfc1a65e4..784af7ee2 100644
--- a/src/components/radio-button/radio-button.component.ts
+++ b/src/components/radio-button/radio-button.component.ts
@@ -108,7 +108,8 @@ export default class SlRadioButton extends ShoelaceElement {
           aria-checked="${this.checked}"
           class=${classMap({
             button: true,
-            'button--default': true,
+            'button--neutral': !this.checked,
+            'button--brand': this.checked,
             'button--small': this.size === 'small',
             'button--medium': this.size === 'medium',
             'button--large': this.size === 'large',
diff --git a/src/themes/default.css b/src/themes/default.css
index 0046b76e1..55354cc05 100644
--- a/src/themes/default.css
+++ b/src/themes/default.css
@@ -263,21 +263,26 @@
   --wa-form-controls-border-style: var(--wa-border-style);
   --wa-form-controls-border-width: var(--wa-border-width-thin);
   --wa-form-controls-corners: var(--wa-corners-1x);
+  /* prettier-ignore */
+  --wa-form-controls-color-resting: var(--wa-color-neutral-element-outline-muted); /* rename to --wa-form-controls-border-color-resting? */
+  /* prettier-ignore */
+  --wa-form-controls-color-activated: var(--wa-color-brand-action-vivid); /* rename to --wa-form-controls-border-color-activated? */
   --wa-form-controls-color-text: var(--wa-color-neutral-text-on-surface);
-  --wa-form-controls-color-resting: var(--wa-color-neutral-element-outline-muted);
-  --wa-form-controls-color-activated: var(--wa-color-brand-action-vivid);
   --wa-form-controls-font-line-height: var(--wa-font-height-compact);
   --wa-form-controls-padding: var(--wa-space-square-s);
   --wa-form-controls-placeholder-color: var(--wa-color-neutral-60);
-  --wa-form-controls-height-s: 2rem;
-  --wa-form-controls-height-m: 2.75rem;
-  --wa-form-controls-height-l: 3.5rem;
 
   /**
   * From 2.x
   */
   --wa-form-controls-required-content: '*';
   --wa-form-controls-required-content-color: inherit;
+  --wa-form-controls-height-s: 2rem;
+  --wa-form-controls-height-m: 2.75rem;
+  --wa-form-controls-height-l: 3.5rem;
+  --wa-form-control-toggle-size-s: 0.875rem;
+  --wa-form-control-toggle-size-m: 1.125rem;
+  --wa-form-control-toggle-size-l: 1.375rem;
 
   --wa-overlay-color: hsl(240 3.8% 46.1% / 33%);