From 21243729c6a8487fe6787877109cf5a1df3a1c27 Mon Sep 17 00:00:00 2001
From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Date: Fri, 27 Jun 2025 12:48:40 -0400
Subject: [PATCH] Remove custom properties that are easily styled with CSS
 parts (#1080)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* progress, components A – C

* left behind tweaks for A – C

* all the rest

* tweaks

* remove 'accent + outlined' appearances and other tweaks

* fix overlooked docs + scouts rule

* re-add `--checked-icon-color` to radio and checkbox

* revert to `--thumb-size`

* fix theme overrides

---------

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>
---
 .../_includes/visual-tests/appearance.njk     |  21 ---
 .../docs/_includes/visual-tests/native.njk    |  25 +---
 .../webawesome/docs/docs/components/badge.md  |  15 +-
 .../webawesome/docs/docs/components/button.md |  26 ++--
 .../docs/docs/components/callout.md           |  20 +--
 .../webawesome/docs/docs/components/card.md   |   8 +-
 .../docs/docs/components/color-picker.md      |   2 +-
 .../docs/docs/components/copy-button.md       |   6 +-
 .../docs/docs/components/skeleton.md          |  20 +--
 .../src/components/avatar/avatar.css          |  10 +-
 .../src/components/avatar/avatar.ts           |   2 -
 .../webawesome/src/components/badge/badge.css |  39 ++++-
 .../webawesome/src/components/badge/badge.ts  |   6 +-
 .../src/components/button/button.css          | 138 +++++++++++++-----
 .../src/components/button/button.ts           |  15 +-
 .../src/components/callout/callout.css        |  47 ++++--
 .../src/components/callout/callout.ts         |   7 +-
 .../webawesome/src/components/card/card.css   |  55 ++++---
 .../webawesome/src/components/card/card.ts    |   7 +-
 .../src/components/carousel/carousel.css      |  11 +-
 .../src/components/carousel/carousel.ts       |   5 +-
 .../src/components/checkbox/checkbox.css      |  50 +++----
 .../src/components/checkbox/checkbox.ts       |  12 +-
 .../components/color-picker/color-picker.css  |  79 +++++-----
 .../components/color-picker/color-picker.ts   |  11 --
 .../src/components/comparison/comparison.css  |   8 +-
 .../src/components/comparison/comparison.ts   |   2 -
 .../components/copy-button/copy-button.css    |  19 +--
 .../src/components/copy-button/copy-button.ts |   5 -
 .../src/components/details/details.css        |  44 ++++--
 .../src/components/details/details.ts         |   5 +-
 .../src/components/dialog/dialog.css          |   9 +-
 .../src/components/dialog/dialog.ts           |   3 -
 .../src/components/drawer/drawer.css          |   6 +-
 .../src/components/drawer/drawer.ts           |   2 -
 .../src/components/dropdown/dropdown.ts       |   7 -
 .../webawesome/src/components/input/input.css |  31 ++--
 .../webawesome/src/components/input/input.ts  |   8 +-
 .../src/components/option/option.css          |  13 +-
 .../src/components/option/option.ts           |   5 -
 .../src/components/popover/popover.css        |   4 +-
 .../components/progress-bar/progress-bar.css  |   5 +-
 .../components/progress-bar/progress-bar.ts   |   2 +-
 .../webawesome/src/components/radio/radio.css |  37 ++---
 .../webawesome/src/components/radio/radio.ts  |  10 +-
 .../src/components/rating/rating.css          |   1 +
 .../src/components/select/select.css          |  35 +++--
 .../src/components/select/select.ts           |   7 +-
 .../src/components/skeleton/skeleton.css      |   3 +-
 .../src/components/skeleton/skeleton.ts       |   1 -
 .../components/split-panel/split-panel.css    |   3 +-
 .../src/components/split-panel/split-panel.ts |   1 -
 .../src/components/switch/switch.css          |  31 ++--
 .../src/components/switch/switch.ts           |  14 +-
 .../webawesome/src/components/tab/tab.css     |   5 +-
 packages/webawesome/src/components/tab/tab.ts |   2 -
 .../webawesome/src/components/tag/tag.css     |  29 +++-
 packages/webawesome/src/components/tag/tag.ts |   3 +-
 .../src/components/textarea/textarea.css      |  32 ++--
 .../src/components/textarea/textarea.ts       |   8 +-
 .../src/components/tooltip/tooltip.css        |   9 +-
 .../src/components/tooltip/tooltip.ts         |   3 -
 .../src/components/tree-item/tree-item.css    |  11 +-
 .../src/components/tree-item/tree-item.ts     |   3 -
 packages/webawesome/src/styles/native.css     | 132 ++++++++++++++---
 .../webawesome/src/styles/themes/awesome.css  | 132 +++++++++--------
 .../webawesome/src/styles/themes/shoelace.css |  40 +++--
 packages/webawesome/src/styles/utilities.css  |   1 -
 .../src/styles/utilities/appearance.css       |  59 --------
 69 files changed, 713 insertions(+), 714 deletions(-)
 delete mode 100644 packages/webawesome/src/styles/utilities/appearance.css

diff --git a/packages/webawesome/docs/_includes/visual-tests/appearance.njk b/packages/webawesome/docs/_includes/visual-tests/appearance.njk
index 9fe1134de..5cece090c 100644
--- a/packages/webawesome/docs/_includes/visual-tests/appearance.njk
+++ b/packages/webawesome/docs/_includes/visual-tests/appearance.njk
@@ -8,27 +8,6 @@
     <th><code>.wa-[appearance]</code></th>
   </thead>
   <tbody>
-    <tr>
-      <th><code>accent</code> + <code>outlined</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="brand" appearance="accent outlined">Brand</wa-badge>
-          <wa-badge variant="neutral" appearance="accent outlined">Neutral</wa-badge>
-          <wa-badge variant="success" appearance="accent outlined">Success</wa-badge>
-          <wa-badge variant="warning" appearance="accent outlined">Warning</wa-badge>
-          <wa-badge variant="danger" appearance="accent outlined">Danger</wa-badge>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-badge variant="brand" class="wa-accent wa-outlined">Brand</wa-badge>
-          <wa-badge variant="neutral" class="wa-accent wa-outlined">Neutral</wa-badge>
-          <wa-badge variant="success" class="wa-accent wa-outlined">Success</wa-badge>
-          <wa-badge variant="warning" class="wa-accent wa-outlined">Warning</wa-badge>
-          <wa-badge variant="danger" class="wa-accent wa-outlined">Danger</wa-badge>
-        </div>
-      </td>
-    </tr>
     <tr>
       <th><code>accent</code></th>
       <td>
diff --git a/packages/webawesome/docs/_includes/visual-tests/native.njk b/packages/webawesome/docs/_includes/visual-tests/native.njk
index 891457013..f479bc338 100644
--- a/packages/webawesome/docs/_includes/visual-tests/native.njk
+++ b/packages/webawesome/docs/_includes/visual-tests/native.njk
@@ -17,27 +17,6 @@
         <button>Button</button>
       </td>
     </tr>
-    <tr>
-      <th><code>accent</code> + <code>outlined</code></th>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <wa-button variant="brand" appearance="accent outlined">Brand</wa-button>
-          <wa-button variant="neutral" appearance="accent outlined">Neutral</wa-button>
-          <wa-button variant="success" appearance="accent outlined">Success</wa-button>
-          <wa-button variant="warning" appearance="accent outlined">Warning</wa-button>
-          <wa-button variant="danger" appearance="accent outlined">Danger</wa-button>
-        </div>
-      </td>
-      <td>
-        <div class="wa-cluster wa-gap-2xs">
-          <button class="wa-brand wa-accent wa-outlined">Brand</button>
-          <button class="wa-neutral wa-accent wa-outlined">Neutral</button>
-          <button class="wa-success wa-accent wa-outlined">Success</button>
-          <button class="wa-warning wa-accent wa-outlined">Warning</button>
-          <button class="wa-danger wa-accent wa-outlined">Danger</button>
-        </div>
-      </td>
-    </tr>
     <tr>
       <th><code>accent</code></th>
       <td>
@@ -465,8 +444,8 @@
         </wa-select>
       </td>
       <td>
-        <label class="wa-filled">Select (filled) 
-          <select value="1">
+        <label>Select (filled) 
+          <select class="wa-filled" value="1">
             <option value="1">Option</option>
           </select>
         </label>
diff --git a/packages/webawesome/docs/docs/components/badge.md b/packages/webawesome/docs/docs/components/badge.md
index 86488c7cb..04cacb033 100644
--- a/packages/webawesome/docs/docs/components/badge.md
+++ b/packages/webawesome/docs/docs/components/badge.md
@@ -29,37 +29,32 @@ Use the `appearance` attribute to change the badge's visual appearance.
 
 ```html {.example}
 <div style="margin-block-end: 1rem;">
-  <wa-badge appearance="accent outlined" variant="neutral">A+O</wa-badge>
   <wa-badge appearance="accent" variant="neutral">Accent</wa-badge>
-  <wa-badge appearance="filled outlined" variant="neutral">F+O</wa-badge>
+  <wa-badge appearance="filled outlined" variant="neutral">Filled + Outlined</wa-badge>
   <wa-badge appearance="filled" variant="neutral">Filled</wa-badge>
   <wa-badge appearance="outlined" variant="neutral">Outlined</wa-badge>
 </div>
 <div style="margin-block-end: 1rem;">
-  <wa-badge appearance="accent outlined" variant="brand">A+O</wa-badge>
   <wa-badge appearance="accent" variant="brand">Accent</wa-badge>
-  <wa-badge appearance="filled outlined" variant="brand">F+O</wa-badge>
+  <wa-badge appearance="filled outlined" variant="brand">Filled + Outlined</wa-badge>
   <wa-badge appearance="filled" variant="brand">Filled</wa-badge>
   <wa-badge appearance="outlined" variant="brand">Outlined</wa-badge>
 </div>
 <div style="margin-block-end: 1rem;">
-  <wa-badge appearance="accent outlined" variant="success">A+O</wa-badge>
   <wa-badge appearance="accent" variant="success">Accent</wa-badge>
-  <wa-badge appearance="filled outlined" variant="success">F+O</wa-badge>
+  <wa-badge appearance="filled outlined" variant="success">Filled + Outlined</wa-badge>
   <wa-badge appearance="filled" variant="success">Filled</wa-badge>
   <wa-badge appearance="outlined" variant="success">Outlined</wa-badge>
 </div>
 <div style="margin-block-end: 1rem;">
-  <wa-badge appearance="accent outlined" variant="warning">A+O</wa-badge>
   <wa-badge appearance="accent" variant="warning">Accent</wa-badge>
-  <wa-badge appearance="filled outlined" variant="warning">F+O</wa-badge>
+  <wa-badge appearance="filled outlined" variant="warning">Filled + Outlined</wa-badge>
   <wa-badge appearance="filled" variant="warning">Filled</wa-badge>
   <wa-badge appearance="outlined" variant="warning">Outlined</wa-badge>
 </div>
 <div>
-  <wa-badge appearance="accent outlined" variant="danger">A+O</wa-badge>
   <wa-badge appearance="accent" variant="danger">Accent</wa-badge>
-  <wa-badge appearance="filled outlined" variant="danger">F+O</wa-badge>
+  <wa-badge appearance="filled outlined" variant="danger">Filled + Outlined</wa-badge>
   <wa-badge appearance="filled" variant="danger">Filled</wa-badge>
   <wa-badge appearance="outlined" variant="danger">Outlined</wa-badge>
 </div>
diff --git a/packages/webawesome/docs/docs/components/button.md b/packages/webawesome/docs/docs/components/button.md
index c112a55bc..fc2c2b7ed 100644
--- a/packages/webawesome/docs/docs/components/button.md
+++ b/packages/webawesome/docs/docs/components/button.md
@@ -30,43 +30,38 @@ Use the `appearance` attribute to change the button's visual appearance.
 ```html {.example}
 <div class="wa-stack">
   <div class="wa-gap-2xs">
-    <wa-button appearance="accent outlined" variant="neutral">A + O</wa-button>
     <wa-button appearance="accent" variant="neutral">Accent</wa-button>
-    <wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
-    <wa-button appearance="filled outlined" variant="neutral">F + O</wa-button>
+    <wa-button appearance="filled outlined" variant="neutral">Filled + Outlined</wa-button>
     <wa-button appearance="filled" variant="neutral">Filled</wa-button>
+    <wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
     <wa-button appearance="plain" variant="neutral">Plain</wa-button>
   </div>
   <div class="wa-gap-2xs">
-    <wa-button appearance="accent outlined" variant="brand">A + O</wa-button>
     <wa-button appearance="accent" variant="brand">Accent</wa-button>
-    <wa-button appearance="outlined" variant="brand">Outlined</wa-button>
-    <wa-button appearance="filled outlined" variant="brand">F + O</wa-button>
+    <wa-button appearance="filled outlined" variant="brand">Filled + Outlined</wa-button>
     <wa-button appearance="filled" variant="brand">Filled</wa-button>
+    <wa-button appearance="outlined" variant="brand">Outlined</wa-button>
     <wa-button appearance="plain" variant="brand">Plain</wa-button>
   </div>
   <div class="wa-gap-2xs">
-    <wa-button appearance="accent outlined" variant="success">A + O</wa-button>
     <wa-button appearance="accent" variant="success">Accent</wa-button>
-    <wa-button appearance="outlined" variant="success">Outlined</wa-button>
-    <wa-button appearance="filled outlined" variant="success">F + O</wa-button>
+    <wa-button appearance="filled outlined" variant="success">Filled + Outlined</wa-button>
     <wa-button appearance="filled" variant="success">Filled</wa-button>
+    <wa-button appearance="outlined" variant="success">Outlined</wa-button>
     <wa-button appearance="plain" variant="success">Plain</wa-button>
   </div>
   <div class="wa-gap-2xs">
-    <wa-button appearance="accent outlined" variant="warning">A + O</wa-button>
     <wa-button appearance="accent" variant="warning">Accent</wa-button>
-    <wa-button appearance="outlined" variant="warning">Outlined</wa-button>
-    <wa-button appearance="filled outlined" variant="warning">F + O</wa-button>
+    <wa-button appearance="filled outlined" variant="warning">Filled + Outlined</wa-button>
     <wa-button appearance="filled" variant="warning">Filled</wa-button>
+    <wa-button appearance="outlined" variant="warning">Outlined</wa-button>
     <wa-button appearance="plain" variant="warning">Plain</wa-button>
   </div>
   <div class="wa-gap-2xs">
-    <wa-button appearance="accent outlined" variant="danger">A + O</wa-button>
     <wa-button appearance="accent" variant="danger">Accent</wa-button>
-    <wa-button appearance="outlined" variant="danger">Outlined</wa-button>
-    <wa-button appearance="filled outlined" variant="danger">F + O</wa-button>
+    <wa-button appearance="filled outlined" variant="danger">Filled + Outlined</wa-button>
     <wa-button appearance="filled" variant="danger">Filled</wa-button>
+    <wa-button appearance="outlined" variant="danger">Outlined</wa-button>
     <wa-button appearance="plain" variant="danger">Plain</wa-button>
   </div>
 </div>
@@ -214,6 +209,7 @@ Use the `disabled` attribute to disable a button.
 <wa-button variant="success" disabled>Success</wa-button>
 <wa-button variant="neutral" disabled>Neutral</wa-button>
 <wa-button variant="warning" disabled>Warning</wa-button>
+<wa-button variant="danger" disabled>Danger</wa-button>
 ```
 
 ### Styling Buttons
diff --git a/packages/webawesome/docs/docs/components/callout.md b/packages/webawesome/docs/docs/components/callout.md
index 8e77fd497..234069fea 100644
--- a/packages/webawesome/docs/docs/components/callout.md
+++ b/packages/webawesome/docs/docs/components/callout.md
@@ -63,16 +63,9 @@ Set the `variant` attribute to change the callout's variant.
 Use the `appearance` attribute to change the callout's visual appearance (the default is `outlined filled`).
 
 ```html {.example}
-<wa-callout variant="brand" appearance="outlined accent">
-  <wa-icon slot="icon" name="check-to-slot"></wa-icon>
-  This <strong>accent</strong> callout is also <strong>outlined</strong>
-</wa-callout>
-
-<br />
-
 <wa-callout variant="brand" appearance="accent">
   <wa-icon slot="icon" name="square-check"></wa-icon>
-  This <strong>accent</strong> callout draws attention without an outline
+  This <strong>accent</strong> callout draws attention
 </wa-callout>
 
 <br />
@@ -113,10 +106,16 @@ Use the `size` attribute to change a callout's size.
   <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
   This is meant to be very emphasized.
 </wa-callout>
+
+<br />
+
 <wa-callout size="medium">
   <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
   Normal-sized callout.
 </wa-callout>
+
+<br />
+
 <wa-callout size="small">
   <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
   Just a small tip!
@@ -133,7 +132,4 @@ Icons are optional. Simply omit the `icon` slot if you don't want them.
 
 ### Styling
 
-You can customize the callout's appearance mostly by setting regular CSS properties:
-
-- `background`, `border`, `border-radius`, `color`, `padding`, `margin`, etc. work as expected
-- `gap` sets the space between the icon and the content
+You can customize the callout's appearance mostly by setting regular CSS properties. `background`, `border`, `border-radius`, `color`, `padding`, `margin`, etc. work as expected.
diff --git a/packages/webawesome/docs/docs/components/card.md b/packages/webawesome/docs/docs/components/card.md
index 55306eaf8..0baa5c6ad 100644
--- a/packages/webawesome/docs/docs/components/card.md
+++ b/packages/webawesome/docs/docs/components/card.md
@@ -141,18 +141,16 @@ Use the `appearance` attribute to change the card's visual appearance.
       src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
       alt="A kitten sits patiently between a terracotta pot and decorative grasses."
     />
-    <div slot="header">Outlined (default)</div>
-    Card content.
+    Outlined (default)
   </wa-card>
-  {% for appearance in ['outlined filled', 'outlined accent', 'plain', 'filled', 'accent'] -%}
+  {% for appearance in ['outlined filled', 'plain', 'filled', 'accent'] -%}
   <wa-card appearance="{{ appearance }}">
     <img
       slot="media"
       src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
       alt="A kitten sits patiently between a terracotta pot and decorative grasses."
     />
-    <div slot="header">{{ appearance | capitalize }}</div>
-    Card content.
+    {{ appearance | capitalize }}
   </wa-card>
   {%- endfor %}
 </div>
diff --git a/packages/webawesome/docs/docs/components/color-picker.md b/packages/webawesome/docs/docs/components/color-picker.md
index 97e7e7e54..7063a0725 100644
--- a/packages/webawesome/docs/docs/components/color-picker.md
+++ b/packages/webawesome/docs/docs/components/color-picker.md
@@ -85,5 +85,5 @@ The color picker can be rendered as disabled.
 Add descriptive hint to a color picker with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead.
 
 ```html {.example}
-<wa-color-picker label="Select a color" hint="Choose a color with appropate contrast!"></wa-color-picker>
+<wa-color-picker label="Select a color" hint="Choose a color with appropriate contrast!"></wa-color-picker>
 ```
diff --git a/packages/webawesome/docs/docs/components/copy-button.md b/packages/webawesome/docs/docs/components/copy-button.md
index 60abe0b0e..7a92cc693 100644
--- a/packages/webawesome/docs/docs/components/copy-button.md
+++ b/packages/webawesome/docs/docs/components/copy-button.md
@@ -104,9 +104,9 @@ You can customize the button to your liking with CSS.
 </wa-copy-button>
 
 <style>
-  .custom-styles {
-    --success-color: white;
-    --error-color: white;
+  .custom-styles,
+  .custom-styles::part(success-icon),
+  .custom-styles::part(error-icon) {
     color: white;
   }
 
diff --git a/packages/webawesome/docs/docs/components/skeleton.md b/packages/webawesome/docs/docs/components/skeleton.md
index 518ebb6ab..52164aebd 100644
--- a/packages/webawesome/docs/docs/components/skeleton.md
+++ b/packages/webawesome/docs/docs/components/skeleton.md
@@ -135,19 +135,19 @@ Set a matching width and height to make a circle, square, or rounded avatar skel
     margin-right: 0.5rem;
   }
 
-  .skeleton-avatars wa-skeleton:nth-child(1) {
-    --border-radius: 0;
+  .skeleton-avatars wa-skeleton:nth-child(1)::part(indicator) {
+    border-radius: 0;
   }
 
-  .skeleton-avatars wa-skeleton:nth-child(2) {
-    --border-radius: var(--wa-border-radius-m);
+  .skeleton-avatars wa-skeleton:nth-child(2)::part(indicator) {
+    border-radius: var(--wa-border-radius-m);
   }
 </style>
 ```
 
 ### Custom Shapes
 
-Use the `--border-radius` custom property to make circles, squares, and rectangles. For more complex shapes, you can apply `clip-path` to the `indicator` part. [Try Clippy](https://bennettfeely.com/clippy/) if you need help generating custom shapes.
+Set a `border-radius` on the `indicator` part to make circles, squares, and rectangles. For more complex shapes, you can apply `clip-path` to the `indicator` part. [Try Clippy](https://bennettfeely.com/clippy/) if you need help generating custom shapes.
 
 ```html {.example}
 <div class="skeleton-shapes">
@@ -166,20 +166,20 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl
   }
 
   .skeleton-shapes .square::part(indicator) {
-    --border-radius: var(--wa-border-radius-m);
+    border-radius: var(--wa-border-radius-m);
   }
 
   .skeleton-shapes .circle::part(indicator) {
-    --border-radius: var(--wa-border-radius-circle);
+    border-radius: var(--wa-border-radius-circle);
   }
 
   .skeleton-shapes .triangle::part(indicator) {
-    --border-radius: 0;
+    border-radius: 0;
     clip-path: polygon(50% 0, 0 100%, 100% 100%);
   }
 
   .skeleton-shapes .cross::part(indicator) {
-    --border-radius: 0;
+    border-radius: 0;
     clip-path: polygon(
       20% 0%,
       0% 20%,
@@ -197,7 +197,7 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl
   }
 
   .skeleton-shapes .comment::part(indicator) {
-    --border-radius: 0;
+    border-radius: 0;
     clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
   }
 
diff --git a/packages/webawesome/src/components/avatar/avatar.css b/packages/webawesome/src/components/avatar/avatar.css
index 38b793700..2c071cb5c 100644
--- a/packages/webawesome/src/components/avatar/avatar.css
+++ b/packages/webawesome/src/components/avatar/avatar.css
@@ -1,6 +1,4 @@
 :host {
-  --background-color: var(--wa-color-neutral-fill-normal);
-  --text-color: var(--wa-color-neutral-on-normal);
   --size: 3rem;
 
   display: inline-flex;
@@ -9,14 +7,14 @@
   position: relative;
   width: var(--size);
   height: var(--size);
-  background-color: var(--background-color);
+  color: var(--wa-color-neutral-on-normal);
   font: inherit;
   font-size: calc(var(--size) * 0.4);
-  color: var(--text-color);
+  vertical-align: middle;
+  background-color: var(--wa-color-neutral-fill-normal);
+  border-radius: var(--wa-border-radius-circle);
   user-select: none;
   -webkit-user-select: none;
-  vertical-align: middle;
-  border-radius: var(--wa-border-radius-circle);
 }
 
 :host([shape='square']) {
diff --git a/packages/webawesome/src/components/avatar/avatar.ts b/packages/webawesome/src/components/avatar/avatar.ts
index cf6a06981..8b60a0aa5 100644
--- a/packages/webawesome/src/components/avatar/avatar.ts
+++ b/packages/webawesome/src/components/avatar/avatar.ts
@@ -23,8 +23,6 @@ import styles from './avatar.css';
  * @csspart initials - The container that wraps the avatar's initials.
  * @csspart image - The avatar image. Only shown when the `image` attribute is set.
  *
- * @cssproperty --background-color - The avatar's background color.
- * @cssproperty --text-color - The color of the avatar's content.
  * @cssproperty --size - The size of the avatar.
  */
 @customElement('wa-avatar')
diff --git a/packages/webawesome/src/components/badge/badge.css b/packages/webawesome/src/components/badge/badge.css
index dd1a2da39..5da735b40 100644
--- a/packages/webawesome/src/components/badge/badge.css
+++ b/packages/webawesome/src/components/badge/badge.css
@@ -2,22 +2,51 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  padding: 0.375em 0.625em;
+  color: var(--wa-color-on-loud, var(--wa-color-brand-on-loud));
   font-size: max(var(--wa-font-size-2xs), 0.75em);
   font-weight: var(--wa-font-weight-semibold);
   line-height: 1;
-  background-color: var(--background-color, var(--wa-color-fill-loud));
-  border-color: var(--border-color, transparent);
+  white-space: nowrap;
+  background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
+  border-color: transparent;
   border-radius: var(--wa-border-radius-s);
   border-style: var(--wa-border-style);
   border-width: var(--wa-border-width-s);
-  color: var(--text-color, var(--wa-color-on-loud));
-  white-space: nowrap;
-  padding: 0.375em 0.625em;
   user-select: none;
   -webkit-user-select: none;
   cursor: inherit;
 }
 
+/* Appearance modifiers */
+:host([appearance~='plain']) {
+  color: var(--wa-color-on-quiet, var(--wa-color-brand-on-quiet));
+  background-color: transparent;
+  border-color: transparent;
+}
+
+:host([appearance~='outlined']) {
+  color: var(--wa-color-on-quiet, var(--wa-color-brand-on-quiet));
+  background-color: transparent;
+  border-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));
+}
+
+:host([appearance~='filled']) {
+  color: var(--wa-color-on-normal, var(--wa-color-brand-on-normal));
+  background-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));
+  border-color: transparent;
+
+  &:host([appearance~='outlined']) {
+    border-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal));
+  }
+}
+
+:host([appearance~='accent']) {
+  color: var(--wa-color-on-loud, var(--wa-color-brand-on-loud));
+  background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
+  border-color: transparent;
+}
+
 /* Pill modifier */
 :host([pill]) {
   border-radius: var(--wa-border-radius-pill);
diff --git a/packages/webawesome/src/components/badge/badge.ts b/packages/webawesome/src/components/badge/badge.ts
index 32491182f..078a72c84 100644
--- a/packages/webawesome/src/components/badge/badge.ts
+++ b/packages/webawesome/src/components/badge/badge.ts
@@ -1,7 +1,6 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import appearanceStyles from '../../styles/utilities/appearance.css';
 import variantStyles from '../../styles/utilities/variants.css';
 import styles from './badge.css';
 
@@ -15,13 +14,10 @@ import styles from './badge.css';
  *
  * @csspart base - The component's base wrapper.
  *
- * @cssproperty --background-color - The badge's background color.
- * @cssproperty --border-color - The color of the badge's border.
- * @cssproperty --text-color - The color of the badge's content.
  */
 @customElement('wa-badge')
 export default class WaBadge extends WebAwesomeElement {
-  static css = [variantStyles, appearanceStyles, styles];
+  static css = [variantStyles, styles];
 
   /** The badge's theme variant. Defaults to `brand` if not within another element with a variant. */
   @property({ reflect: true }) variant: 'brand' | 'neutral' | 'success' | 'warning' | 'danger' = 'brand';
diff --git a/packages/webawesome/src/components/button/button.css b/packages/webawesome/src/components/button/button.css
index 5406c91cb..aa67751d6 100644
--- a/packages/webawesome/src/components/button/button.css
+++ b/packages/webawesome/src/components/button/button.css
@@ -1,30 +1,12 @@
 @layer wa-component {
   :host {
-    --background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
-    --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover));
-    --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active));
-
-    --border-color: transparent;
-    --border-color-hover: var(--border-color);
-    --border-color-active: var(--border-color);
-    --border-width: max(1px, var(--wa-form-control-border-width));
-
-    --box-shadow: initial;
-
-    --text-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
-    --text-color-hover: var(--text-color);
-    --text-color-active: var(--text-color);
-
     display: inline-block;
     position: relative;
   }
 }
 
 .button {
-  border-radius: var(--wa-form-control-border-radius);
-  border-style: var(--wa-border-style);
-  border-width: var(--border-width);
-  box-shadow: var(--box-shadow);
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
@@ -44,25 +26,111 @@
   height: var(--wa-form-control-height);
   width: 100%;
 
-  display: inline-flex;
-  background-color: var(--background-color);
-  border-color: var(--border-color, var(--background-color));
-  color: var(--text-color);
+  background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
+  border-color: transparent;
+  color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
+  border-radius: var(--wa-form-control-border-radius);
+  border-style: var(--wa-border-style);
+  border-width: var(--wa-border-width-s);
 }
 
-/* Interactive states */
-@media (hover: hover) {
-  .button:not(.disabled):not(.loading):hover {
-    background-color: var(--background-color-hover, var(--background-color));
-    border-color: var(--border-color-hover, var(--border-color, var(--background-color-hover)));
-    color: var(--text-color-hover, var(--text-color));
+/* Appearance modifiers */
+:host([appearance~='plain']) {
+  .button {
+    color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+    background-color: transparent;
+    border-color: transparent;
+  }
+  @media (hover: hover) {
+    .button:not(.disabled):not(.loading):hover {
+      color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+      background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
+    }
+  }
+  .button:not(.disabled):not(.loading):active {
+    color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+    background-color: color-mix(
+      in oklab,
+      var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
+      var(--wa-color-mix-active)
+    );
   }
 }
 
-.button:not(.disabled):not(.loading):active {
-  background-color: var(--background-color-active, var(--background-color));
-  border-color: var(--border-color-active, var(--border-color, var(--background-color-active)));
-  color: var(--text-color-active, var(--text-color));
+:host([appearance~='outlined']) {
+  .button {
+    color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+    background-color: transparent;
+    border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud));
+  }
+  @media (hover: hover) {
+    .button:not(.disabled):not(.loading):hover {
+      color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+      background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
+    }
+  }
+  .button:not(.disabled):not(.loading):active {
+    color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+    background-color: color-mix(
+      in oklab,
+      var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
+      var(--wa-color-mix-active)
+    );
+  }
+}
+
+:host([appearance~='filled']) {
+  .button {
+    color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
+    background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
+    border-color: transparent;
+  }
+  @media (hover: hover) {
+    .button:not(.disabled):not(.loading):hover {
+      color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
+      background-color: color-mix(
+        in oklab,
+        var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
+        var(--wa-color-mix-hover)
+      );
+    }
+  }
+  .button:not(.disabled):not(.loading):active {
+    color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
+    background-color: color-mix(
+      in oklab,
+      var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
+      var(--wa-color-mix-active)
+    );
+  }
+
+  &:host([appearance~='outlined']) .button {
+    border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
+  }
+}
+
+:host([appearance~='accent']) {
+  .button {
+    color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
+    background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
+    border-color: transparent;
+  }
+  @media (hover: hover) {
+    .button:not(.disabled):not(.loading):hover {
+      background-color: color-mix(
+        in oklab,
+        var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
+        var(--wa-color-mix-hover)
+      );
+    }
+  }
+  .button:not(.disabled):not(.loading):active {
+    background-color: color-mix(
+      in oklab,
+      var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
+      var(--wa-color-mix-active)
+    );
+  }
 }
 
 /* Focus states */
@@ -192,12 +260,12 @@ button ::slotted(wa-badge) {
 */
 
 slot[name='start']::slotted(*) {
-  margin-inline-end: var(--wa-form-control-padding-inline);
+  margin-inline-end: 0.75em;
 }
 
 slot[name='end']::slotted(*),
 .button:not(.visually-hidden-label) [part~='caret'] {
-  margin-inline-start: var(--wa-form-control-padding-inline);
+  margin-inline-start: 0.75em;
 }
 
 /*
diff --git a/packages/webawesome/src/components/button/button.ts b/packages/webawesome/src/components/button/button.ts
index 61d096ea9..f265a30c7 100644
--- a/packages/webawesome/src/components/button/button.ts
+++ b/packages/webawesome/src/components/button/button.ts
@@ -7,7 +7,6 @@ import { HasSlotController } from '../../internal/slot.js';
 import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
-import appearanceStyles from '../../styles/utilities/appearance.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import variantStyles from '../../styles/utilities/variants.css';
 import { LocalizeController } from '../../utilities/localize.js';
@@ -38,22 +37,10 @@ import styles from './button.css';
  * @csspart end - The container that wraps the `end` slot.
  * @csspart caret - The button's caret icon, a `<wa-icon>` element.
  * @csspart spinner - The spinner that shows when the button is in the loading state.
- *
- * @cssproperty --display - Set to `none` to hide the element, or any other valid `display` value to override the internal `display` value of the `base` part.
- * @cssproperty --background-color - The button's background color when the button is not being interacted with.
- * @cssproperty --background-color-active - The button's background color when active.
- * @cssproperty --background-color-hover - The button's background color on hover.
- * @cssproperty --border-color - The color of the button's border when the button is not being interacted with.
- * @cssproperty --border-color-active - The color of the button's border when active.
- * @cssproperty --border-color-hover - The color of the button's border on hover.
- * @cssproperty --box-shadow - The shadow effects around the edges of the button.
- * @cssproperty --text-color - The color of the button's label when the button is not being interacted with.
- * @cssproperty --text-color-active - The color of the button's label when active.
- * @cssproperty --text-color-hover - The color of the button's label on hover.
  */
 @customElement('wa-button')
 export default class WaButton extends WebAwesomeFormAssociatedElement {
-  static css = [styles, variantStyles, sizeStyles, appearanceStyles];
+  static css = [styles, variantStyles, sizeStyles];
 
   static get validators() {
     return [...super.validators, MirrorValidator()];
diff --git a/packages/webawesome/src/components/callout/callout.css b/packages/webawesome/src/components/callout/callout.css
index 00512ef17..3426b227f 100644
--- a/packages/webawesome/src/components/callout/callout.css
+++ b/packages/webawesome/src/components/callout/callout.css
@@ -1,31 +1,56 @@
 :host {
-  --icon-color: var(--text-color);
-  --icon-size: var(--wa-font-size-l);
-  --spacing: var(--wa-space-m);
-
   display: flex;
   position: relative;
   align-items: stretch;
   border-radius: var(--wa-panel-border-radius);
-  background-color: var(--background-color, var(--wa-color-fill-quiet));
-  border-color: var(--border-color, transparent);
+  background-color: var(--wa-color-fill-quiet, var(--wa-color-brand-fill-quiet));
+  border-color: var(--wa-color-border-quiet, var(--wa-color-brand-border-quiet));
   border-style: var(--wa-panel-border-style);
   border-width: var(--wa-panel-border-width);
   color: var(--wa-color-text-normal);
-  gap: var(--spacing);
-  padding: var(--spacing);
+  padding: 1em;
+}
+
+/* Appearance modifiers */
+:host([appearance~='plain']) {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+:host([appearance~='outlined']) {
+  background-color: transparent;
+  border-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));
+}
+
+:host([appearance~='filled']) {
+  background-color: var(--wa-color-fill-quiet, var(--wa-color-brand-fill-quiet));
+  border-color: transparent;
+
+  &:host([appearance~='outlined']) {
+    border-color: var(--wa-color-border-quiet, var(--wa-color-brand-border-quiet));
+  }
 }
 
 :host([appearance~='accent']) {
-  color: var(--text-color, var(--wa-color-text-normal));
+  color: var(--wa-color-on-loud, var(--wa-color-brand-on-loud));
+  background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
+  border-color: transparent;
+
+  [part~='icon'] {
+    color: currentColor;
+  }
 }
 
 [part~='icon'] {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
-  color: var(--icon-color);
-  font-size: var(--icon-size);
+  color: var(--wa-color-on-quiet);
+  font-size: 1.25em;
+}
+
+::slotted([slot='icon']) {
+  margin-inline-end: var(--wa-form-control-padding-inline);
 }
 
 [part~='message'] {
diff --git a/packages/webawesome/src/components/callout/callout.ts b/packages/webawesome/src/components/callout/callout.ts
index a8f2bd066..e49c1cae9 100644
--- a/packages/webawesome/src/components/callout/callout.ts
+++ b/packages/webawesome/src/components/callout/callout.ts
@@ -1,7 +1,6 @@
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import appearanceStyles from '../../styles/utilities/appearance.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import variantStyles from '../../styles/utilities/variants.css';
 import styles from './callout.css';
@@ -17,14 +16,10 @@ import styles from './callout.css';
  *
  * @csspart icon - The container that wraps the optional icon.
  * @csspart message - The container that wraps the callout's main content.
- *
- * @cssproperty --icon-color - The color of the callout's icon.
- * @cssproperty --icon-size - The size of the callout's icon.
- * @cssproperty --spacing - The amount of space around and between the callout's content. Expects a single value. If you want different spacing around and between the content, use `padding` on the callout itself.
  */
 @customElement('wa-callout')
 export default class WaCallout extends WebAwesomeElement {
-  static css = [variantStyles, appearanceStyles, sizeStyles, styles];
+  static css = [styles, variantStyles, sizeStyles];
 
   /** The callout's theme variant. Defaults to `brand` if not within another element with a variant. */
   @property({ reflect: true }) variant: 'brand' | 'neutral' | 'success' | 'warning' | 'danger' | 'brand' = 'brand';
diff --git a/packages/webawesome/src/components/card/card.css b/packages/webawesome/src/components/card/card.css
index 5697a358e..8b4c50ad4 100644
--- a/packages/webawesome/src/components/card/card.css
+++ b/packages/webawesome/src/components/card/card.css
@@ -1,34 +1,45 @@
 :host {
   --spacing: var(--wa-space-l);
-  --border-width: var(--wa-panel-border-width);
-  --outlined-background-color: var(--wa-color-surface-default);
-  --outlined-border-color: var(--wa-color-surface-border);
-  --border-radius: var(--wa-panel-border-radius);
-  --inner-border-radius: calc(var(--border-radius) - var(--border-width));
-  --inner-border-color: var(--outlined-border-color);
+
+  /* Internal calculated properties */
+  --inner-border-radius: calc(var(--wa-panel-border-radius) - var(--wa-panel-border-width));
 
   display: flex;
   flex-direction: column;
-  background-color: var(--background-color, var(--wa-color-surface-default));
-  border-color: var(--border-color, var(--wa-color-surface-border));
-  border-radius: var(--border-radius);
+  background-color: var(--wa-color-surface-default);
+  border-color: var(--wa-color-surface-border);
+  border-radius: var(--wa-panel-border-radius);
   border-style: var(--wa-panel-border-style);
   box-shadow: var(--wa-shadow-s);
-  border-width: var(--border-width);
+  border-width: var(--wa-panel-border-width);
   color: var(--wa-color-text-normal);
 }
 
-:host(:is([appearance~='accent'])) {
-  color: var(--text-color, var(--wa-color-text-normal));
+/* Appearance modifiers */
+:host([appearance~='plain']) {
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+
+:host([appearance~='outlined']) {
+  background-color: var(--wa-color-surface-default);
+  border-color: var(--wa-color-surface-border);
 }
 
 :host([appearance~='filled']) {
-  --inner-border-color: oklab(from var(--outlined-border-color) l a b / 65%);
+  background-color: var(--wa-color-neutral-fill-quiet);
+  border-color: transparent;
+
+  &:host([appearance~='outlined']) {
+    border-color: var(--wa-color-neutral-border-quiet);
+  }
 }
 
-:host([appearance='plain']) {
-  --inner-border-color: transparent;
-  box-shadow: none;
+:host([appearance~='accent']) {
+  color: var(--wa-color-neutral-on-loud);
+  background-color: var(--wa-color-neutral-fill-loud);
+  border-color: transparent;
 }
 
 /* Take care of top and bottom radii */
@@ -47,12 +58,12 @@
 
 .media {
   display: flex;
+  overflow: hidden;
 
   &::slotted(*) {
     display: block;
     width: 100%;
-    border-start-start-radius: inherit !important;
-    border-start-end-radius: inherit !important;
+    border-radius: 0;
   }
 }
 
@@ -68,8 +79,8 @@
 .header {
   display: block;
   border-block-end-style: inherit;
-  border-block-end-color: var(--inner-border-color);
-  border-block-end-width: var(--border-width);
+  border-block-end-color: var(--wa-color-surface-border);
+  border-block-end-width: var(--wa-panel-border-width);
   padding: calc(var(--spacing) / 2) var(--spacing);
 }
 
@@ -81,8 +92,8 @@
 .footer {
   display: block;
   border-block-start-style: inherit;
-  border-block-start-color: var(--inner-border-color);
-  border-block-start-width: var(--border-width);
+  border-block-start-color: var(--wa-color-surface-border);
+  border-block-start-width: var(--wa-panel-border-width);
   padding: var(--spacing);
 }
 
diff --git a/packages/webawesome/src/components/card/card.ts b/packages/webawesome/src/components/card/card.ts
index 4206ce82e..03bf1d150 100644
--- a/packages/webawesome/src/components/card/card.ts
+++ b/packages/webawesome/src/components/card/card.ts
@@ -2,7 +2,6 @@ import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { HasSlotController } from '../../internal/slot.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import appearanceStyles from '../../styles/utilities/appearance.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import styles from './card.css';
 
@@ -22,15 +21,11 @@ import styles from './card.css';
  * @csspart body - The container that wraps the card's main content.
  * @csspart footer - The container that wraps the card's footer.
  *
- * @cssproperty [--border-radius=var(--wa-panel-border-radius)] - The radius for the card's corners. Expects a single value.
- * @cssproperty [--border-color=var(--wa-color-surface-border)] - The color of the card's borders. Expects a single value.
- * @cssproperty [--inner-border-color=var(--wa-color-surface-border)] - The color of the card's inner borders, e.g. those separating headers and footers from the main content. Expects a single value.
- * @cssproperty [--border-width=var(--wa-panel-border-width)] - The width of the card's borders. Expects a single value.
  * @cssproperty [--spacing=var(--wa-space-l)] - The amount of space around and between sections of the card. Expects a single value.
  */
 @customElement('wa-card')
 export default class WaCard extends WebAwesomeElement {
-  static css = [sizeStyles, appearanceStyles, styles];
+  static css = [sizeStyles, styles];
 
   private readonly hasSlotController = new HasSlotController(this, 'footer', 'header', 'media');
 
diff --git a/packages/webawesome/src/components/carousel/carousel.css b/packages/webawesome/src/components/carousel/carousel.css
index 848583cd6..f1fd7b113 100644
--- a/packages/webawesome/src/components/carousel/carousel.css
+++ b/packages/webawesome/src/components/carousel/carousel.css
@@ -1,10 +1,7 @@
 :host {
   --aspect-ratio: 16 / 9;
-  --navigation-color: var(--wa-color-text-quiet);
-  --pagination-color: var(--wa-form-control-border-color);
-  --pagination-color-active: var(--wa-form-control-activated-color);
   --scroll-hint: 0px;
-  --slide-gap: var(--wa-space-m, 1rem);
+  --slide-gap: var(--wa-space-m);
 
   display: flex;
 }
@@ -103,7 +100,7 @@
   border: none;
   border-radius: var(--wa-border-radius-m);
   font-size: inherit;
-  color: var(--navigation-color);
+  color: var(--wa-color-text-quiet);
   padding: var(--wa-space-xs);
   cursor: pointer;
   transition: var(--wa-transition-normal) color;
@@ -137,14 +134,14 @@
   border-radius: var(--wa-border-radius-circle);
   width: var(--wa-space-s);
   height: var(--wa-space-s);
-  background-color: var(--pagination-color);
+  background-color: var(--wa-color-neutral-fill-normal);
   padding: 0;
   margin: 0;
   transition: transform var(--wa-transition-slow);
 }
 
 .pagination-item-active {
-  background-color: var(--pagination-color-active);
+  background-color: var(--wa-form-control-activated-color);
   transform: scale(1.25);
 }
 
diff --git a/packages/webawesome/src/components/carousel/carousel.ts b/packages/webawesome/src/components/carousel/carousel.ts
index ff6acea9e..a3f369dc7 100644
--- a/packages/webawesome/src/components/carousel/carousel.ts
+++ b/packages/webawesome/src/components/carousel/carousel.ts
@@ -43,12 +43,9 @@ import styles from './carousel.css';
  * @csspart navigation-button-next - Applied to the next button.
  *
  * @cssproperty [--aspect-ratio=16/9] - The aspect ratio of each slide.
- * @cssproperty --navigation-color - The color of the navigation arrows.
- * @cssproperty --pagination-color - The color of the dots indicating the number of slides.
- * @cssproperty --pagination-color-active - The color of the dot indicating the active slide.
  * @cssproperty --scroll-hint - The amount of padding to apply to the scroll area, allowing adjacent slides to become
  *  partially visible as a scroll hint.
- * @cssproperty --slide-gap - The space between each slide.
+ * @cssproperty [--slide-gap=var(--wa-space-m)] - The space between each slide.
  */
 @customElement('wa-carousel')
 export default class WaCarousel extends WebAwesomeElement {
diff --git a/packages/webawesome/src/components/checkbox/checkbox.css b/packages/webawesome/src/components/checkbox/checkbox.css
index 0f716e940..3b928d9b2 100644
--- a/packages/webawesome/src/components/checkbox/checkbox.css
+++ b/packages/webawesome/src/components/checkbox/checkbox.css
@@ -1,21 +1,9 @@
 :host {
-  --background-color: var(--wa-form-control-background-color);
-  --background-color-checked: var(--wa-form-control-activated-color);
-  --border-color: var(--wa-form-control-border-color);
-  --border-color-checked: var(--wa-form-control-activated-color);
-  --border-radius: min(
-    calc(var(--toggle-size) * 0.375),
-    var(--wa-border-radius-s)
-  ); /* min prevents entirely circular checkbox */
-  --border-style: var(--wa-border-style);
-  --border-width: var(--wa-form-control-border-width);
-  --box-shadow: none;
   --checked-icon-color: var(--wa-color-brand-on-loud);
   --checked-icon-scale: 0.8;
-  --toggle-size: var(--wa-form-control-toggle-size);
 
-  color: var(--wa-form-control-value-color);
   display: inline-flex;
+  color: var(--wa-form-control-value-color);
   font-family: inherit;
   font-weight: var(--wa-form-control-value-font-weight);
   line-height: var(--wa-form-control-value-line-height);
@@ -23,20 +11,22 @@
   -webkit-user-select: none;
 }
 
-:host [part~='control'] {
+[part~='control'] {
+  display: inline-flex;
   flex: 0 0 auto;
   position: relative;
-  display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--toggle-size);
-  height: var(--toggle-size);
-  border-color: var(--border-color);
-  border-radius: var(--border-radius);
-  border-style: var(--border-style);
-  border-width: var(--border-width);
-  background-color: var(--background-color);
-  box-shadow: var(--box-shadow);
+  width: var(--wa-form-control-toggle-size);
+  height: var(--wa-form-control-toggle-size);
+  border-color: var(--wa-form-control-border-color);
+  border-radius: min(
+    calc(var(--wa-form-control-toggle-size) * 0.375),
+    var(--wa-border-radius-s)
+  ); /* min prevents entirely circular checkbox */
+  border-style: var(--wa-border-style);
+  border-width: var(--wa-form-control-border-width);
+  background-color: var(--wa-form-control-background-color);
   transition:
     background var(--wa-transition-normal),
     border-color var(--wa-transition-fast),
@@ -47,24 +37,24 @@
   margin-inline-end: 0.5em;
 }
 
-:host [part~='base'] {
-  position: relative;
+[part~='base'] {
   display: flex;
   align-items: flex-start;
-  color: var(--wa-form-control-value-color);
+  position: relative;
+  color: currentColor;
   vertical-align: middle;
   cursor: pointer;
 }
 
 /* Checked */
-[part~='base'] [part~="control"]:has(:checked, :indeterminate) /* scoping this rule to :host breaks in Firefox */ {
+[part~='control']:has(:checked, :indeterminate) {
   color: var(--checked-icon-color);
-  border-color: var(--border-color-checked);
-  background-color: var(--background-color-checked);
+  border-color: var(--wa-form-control-activated-color);
+  background-color: var(--wa-form-control-activated-color);
 }
 
 /* Focus */
-[part~='base'] [part~="control"]:has(> input:focus-visible:not(:disabled)) /* scoping this rule to :host breaks in Firefox */ {
+[part~='control']:has(> input:focus-visible:not(:disabled)) {
   outline: var(--wa-focus-ring);
   outline-offset: var(--wa-focus-ring-offset);
 }
diff --git a/packages/webawesome/src/components/checkbox/checkbox.ts b/packages/webawesome/src/components/checkbox/checkbox.ts
index 8b9b2790d..9e5611caf 100644
--- a/packages/webawesome/src/components/checkbox/checkbox.ts
+++ b/packages/webawesome/src/components/checkbox/checkbox.ts
@@ -37,16 +37,8 @@ import styles from './checkbox.css';
  * @csspart label - The container that wraps the checkbox's label.
  * @csspart hint - The hint's wrapper.
  *
- * @cssproperty --background-color - The checkbox's background color.
- * @cssproperty --background-color-checked - The checkbox's background color when checked.
- * @cssproperty --border-color - The color of the checkbox's borders.
- * @cssproperty --border-color-checked - The color of the checkbox's borders when checked.
- * @cssproperty --border-radius - The radius of the checkbox's corners.
- * @cssproperty --border-style - The style of the checkbox's borders.
- * @cssproperty --border-width - The width of the checkbox's borders. Expects a single value.
- * @cssproperty --box-shadow - The shadow effects around the edges of the checkbox.
- * @cssproperty --checked-icon-color - The color of the checkbox's icon.
- * @cssproperty --toggle-size - The size of the checkbox.
+ * @cssproperty --checked-icon-color - The color of the checked and indeterminate icons.
+ * @cssproperty --checked-icon-scale - The size of the checked and indeterminate icons relative to the checkbox.
  *
  * @cssstate checked - Applied when the checkbox is checked.
  * @cssstate disabled - Applied when the checkbox is disabled.
diff --git a/packages/webawesome/src/components/color-picker/color-picker.css b/packages/webawesome/src/components/color-picker/color-picker.css
index da1cb9878..f9cd5283e 100644
--- a/packages/webawesome/src/components/color-picker/color-picker.css
+++ b/packages/webawesome/src/components/color-picker/color-picker.css
@@ -1,31 +1,21 @@
 :host {
-  --background-color: var(--wa-color-surface-raised);
-  --border-color: var(--wa-color-surface-border);
-  --border-radius: var(--wa-form-control-border-radius);
-  --border-style: var(--wa-form-control-border-style);
-  --border-width: var(--wa-form-control-border-width);
-  --grid-width: 17rem;
-  --grid-height: 12rem;
-  --grid-handle-size: 1.25rem;
-  --spacing: var(--wa-space-s);
-  --preview-size: 2.25rem;
-  --preview-border-radius: var(--wa-border-radius-circle);
-  --slider-height: 1rem;
-  --slider-handle-size: calc(var(--slider-height) + 0.25rem);
-  --swatch-border-radius: var(--wa-border-radius-m);
-  --swatch-size: 1.5rem;
-  --trigger-border-radius: var(--wa-form-control-border-radius);
+  --grid-width: 17em;
+  --grid-height: 12em;
+  --grid-handle-size: 1.25em;
+  --slider-height: 1em;
+  --slider-handle-size: calc(var(--slider-height) + 0.25em);
 }
 
 .color-picker {
-  background-color: var(--background-color);
-  border-radius: var(--border-radius);
-  border-style: var(--border-style);
-  border-width: var(--border-width);
-  border-color: var(--border-color);
-  box-shadow: var(--wa-shadow-l);
+  background-color: var(--wa-color-surface-raised);
+  border-radius: var(--wa-border-radius-m);
+  border-style: var(--wa-border-style);
+  border-width: var(--wa-border-width-s);
+  border-color: var(--wa-color-surface-border);
+  box-shadow: var(--wa-shadow-m);
   color: var(--color);
   font: inherit;
+  font-size: inherit;
   user-select: none;
   width: var(--grid-width);
   -webkit-user-select: none;
@@ -37,8 +27,8 @@
   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: calc(var(--border-radius) - var(--border-width));
-  border-top-right-radius: calc(var(--border-radius) - var(--border-width));
+  border-top-left-radius: calc(var(--wa-border-radius-m) - var(--wa-border-width-s));
+  border-top-right-radius: calc(var(--wa-border-radius-m) - var(--wa-border-width-s));
   cursor: crosshair;
   forced-color-adjust: none;
 }
@@ -65,7 +55,7 @@
 }
 
 .controls {
-  padding: var(--spacing);
+  padding: 0.75em;
   display: flex;
   align-items: center;
 }
@@ -83,7 +73,7 @@
 }
 
 .slider:not(:last-of-type) {
-  margin-bottom: var(--wa-space-s);
+  margin-bottom: 0.75em;
 }
 
 .slider-handle {
@@ -129,12 +119,13 @@
   align-items: center;
   justify-content: center;
   position: relative;
-  width: var(--preview-size);
-  height: var(--preview-size);
+  width: 3em;
+  height: 3em;
   border: none;
-  border-radius: var(--preview-border-radius);
+  border-radius: var(--wa-border-radius-circle);
   background: none;
-  margin-inline-start: var(--spacing);
+  font-size: inherit;
+  margin-inline-start: 0.75em;
   cursor: copy;
   forced-color-adjust: none;
 }
@@ -186,7 +177,7 @@
 .user-input {
   display: flex;
   align-items: center;
-  padding: 0 var(--spacing) var(--spacing) var(--spacing);
+  padding: 0 0.75em 0.75em 0.75em;
 }
 
 .user-input wa-input {
@@ -208,7 +199,7 @@
 }
 
 .user-input wa-button-group {
-  margin-inline-start: var(--spacing);
+  margin-inline-start: 0.75em;
 
   &::part(base) {
     flex-wrap: nowrap;
@@ -216,18 +207,18 @@
 }
 
 .user-input wa-button:first-of-type {
-  min-width: 3rem;
-  max-width: 3rem;
+  min-width: 3em;
+  max-width: 3em;
 }
 
 .swatches {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(var(--swatch-size), 100%), 1fr));
-  grid-gap: var(--wa-space-xs);
+  grid-template-columns: repeat(auto-fit, minmax(min(1.5em, 100%), 1fr));
+  grid-gap: 0.5em;
   justify-items: center;
   border-block-start: var(--wa-form-control-border-style) var(--wa-form-control-border-width)
     var(--wa-color-surface-border);
-  padding: var(--spacing);
+  padding: 0.5em;
   forced-color-adjust: none;
 }
 
@@ -235,7 +226,7 @@
   position: relative;
   aspect-ratio: 1 / 1;
   width: 100%;
-  border-radius: var(--swatch-border-radius);
+  border-radius: var(--wa-border-radius-s);
 }
 
 .swatch .swatch-color {
@@ -293,9 +284,9 @@
 
 .color-dropdown::part(panel) {
   max-height: none;
-  background-color: var(--background-color);
-  border: var(--border-style) var(--border-width) var(--border-color);
-  border-radius: var(--border-radius);
+  background-color: var(--wa-color-surface-raised);
+  border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
+  border-radius: var(--wa-border-radius-m);
   overflow: visible;
 }
 
@@ -309,7 +300,7 @@
   forced-color-adjust: none;
   width: var(--wa-form-control-height);
   height: var(--wa-form-control-height);
-  border-radius: var(--trigger-border-radius);
+  border-radius: var(--wa-form-control-border-radius);
 }
 
 .trigger:before {
@@ -322,8 +313,8 @@
   border-radius: inherit;
   background-color: currentColor;
   box-shadow:
-    inset 0 0 0 var(--border-width) var(--wa-form-control-border-color),
-    inset 0 0 0 calc(var(--border-width) * 3) var(--wa-color-surface-default);
+    inset 0 0 0 var(--wa-form-control-border-width) var(--wa-form-control-border-color),
+    inset 0 0 0 calc(var(--wa-form-control-border-width) * 3) var(--wa-color-surface-default);
 }
 
 .trigger-empty:before {
diff --git a/packages/webawesome/src/components/color-picker/color-picker.ts b/packages/webawesome/src/components/color-picker/color-picker.ts
index a15d9ef94..76d6c73bc 100644
--- a/packages/webawesome/src/components/color-picker/color-picker.ts
+++ b/packages/webawesome/src/components/color-picker/color-picker.ts
@@ -85,22 +85,11 @@ declare const EyeDropper: EyeDropperConstructor;
  * @csspart format-button__end - The format button's exported `end` part.
  * @csspart format-button__caret - The format button's exported `caret` part.
  *
- * @cssproperty --background-color - The color picker's background color.
- * @cssproperty --border-color - The color of the color picker's borders.
- * @cssproperty --border-radius - The radius of the color picker's corners.
- * @cssproperty --border-style - The style of the color picker's borders.
- * @cssproperty --border-width - The width of the color picker's borders.
  * @cssproperty --grid-width - The width of the color grid.
  * @cssproperty --grid-height - The height of the color grid.
  * @cssproperty --grid-handle-size - The size of the color grid's handle.
- * @cssproperty --preview-size - The size of the preview color.
- * @cssproperty --preview-border-radius - The corners of the preview color.
  * @cssproperty --slider-height - The height of the hue and alpha sliders.
  * @cssproperty --slider-handle-size - The diameter of the slider's handle.
- * @cssproperty --spacing - The amount of space around and between the color picker's controls.
- * @cssproperty --swatch-border-radius - The corners of each predefined color swatch.
- * @cssproperty --swatch-size - The size of each predefined color swatch.
- * @cssproperty --trigger-border-radius - The corners of the color picker's dropdown trigger.
  */
 @customElement('wa-color-picker')
 export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
diff --git a/packages/webawesome/src/components/comparison/comparison.css b/packages/webawesome/src/components/comparison/comparison.css
index 1341e36f2..139cb3dd9 100644
--- a/packages/webawesome/src/components/comparison/comparison.css
+++ b/packages/webawesome/src/components/comparison/comparison.css
@@ -1,7 +1,5 @@
 :host {
-  --divider-color: var(--wa-color-neutral-fill-quiet);
   --divider-width: 0.125rem;
-  --handle-color: var(--wa-color-neutral-on-quiet);
   --handle-size: 2.5rem;
 
   display: block;
@@ -51,7 +49,7 @@
   top: 0;
   width: var(--divider-width);
   height: 100%;
-  background-color: var(--divider-color);
+  background-color: var(--wa-color-surface-default);
   translate: calc(var(--divider-width) / -2);
   cursor: ew-resize;
 }
@@ -64,10 +62,10 @@
   top: calc(50% - (var(--handle-size) / 2));
   width: var(--handle-size);
   height: var(--handle-size);
-  background-color: var(--divider-color);
+  background-color: var(--wa-color-surface-default);
   border-radius: var(--wa-border-radius-circle);
   font-size: calc(var(--handle-size) * 0.4);
-  color: var(--handle-color);
+  color: var(--wa-color-neutral-on-quiet);
   cursor: inherit;
   z-index: 10;
 }
diff --git a/packages/webawesome/src/components/comparison/comparison.ts b/packages/webawesome/src/components/comparison/comparison.ts
index df8d5f42c..9d862465c 100644
--- a/packages/webawesome/src/components/comparison/comparison.ts
+++ b/packages/webawesome/src/components/comparison/comparison.ts
@@ -29,9 +29,7 @@ import styles from './comparison.css';
  * @csspart divider - The divider that separates the before and after content.
  * @csspart handle - The handle that the user drags to expose the after content.
  *
- * @cssproperty --divider-color - The color of the divider.
  * @cssproperty --divider-width - The width of the dividing line.
- * @cssproperty --handle-color - The color of the icon used inside the handle.
  * @cssproperty --handle-size - The size of the compare handle.
  *
  * @cssstate dragging - Applied when the comparison is being dragged.
diff --git a/packages/webawesome/src/components/copy-button/copy-button.css b/packages/webawesome/src/components/copy-button/copy-button.css
index e52a72b17..7d7be5126 100644
--- a/packages/webawesome/src/components/copy-button/copy-button.css
+++ b/packages/webawesome/src/components/copy-button/copy-button.css
@@ -1,20 +1,15 @@
 :host {
-  --background-color: transparent;
-  --background-color-hover: var(--wa-color-neutral-fill-quiet);
-  --error-color: var(--wa-color-danger-fill-loud);
-  --success-color: var(--wa-color-success-fill-loud);
-
   display: inline-block;
-  color: var(--wa-color-text-quiet);
+  color: var(--wa-color-neutral-on-quiet);
 }
 
 .button {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
-  background-color: var(--background-color);
+  background-color: transparent;
   border: none;
-  border-radius: var(--wa-border-radius-m);
+  border-radius: var(--wa-form-control-border-radius);
   color: inherit;
   font-size: inherit;
   padding: 0.5em;
@@ -24,13 +19,13 @@
 
 @media (hover: hover) {
   .button:hover:not([disabled]) {
-    background-color: var(--background-color-hover);
+    background-color: var(--wa-color-neutral-fill-quiet);
     color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
   }
 }
 
 .button:focus-visible:not([disabled]) {
-  background-color: var(--background-color-hover);
+  background-color: var(--wa-color-neutral-fill-quiet);
   color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
 }
 
@@ -39,11 +34,11 @@
 }
 
 slot[name='success-icon'] {
-  color: var(--success-color);
+  color: var(--wa-color-success-on-quiet);
 }
 
 slot[name='error-icon'] {
-  color: var(--error-color);
+  color: var(--wa-color-danger-on-quiet);
 }
 
 .button:focus-visible {
diff --git a/packages/webawesome/src/components/copy-button/copy-button.ts b/packages/webawesome/src/components/copy-button/copy-button.ts
index 0b06d5101..ba4e63502 100644
--- a/packages/webawesome/src/components/copy-button/copy-button.ts
+++ b/packages/webawesome/src/components/copy-button/copy-button.ts
@@ -36,11 +36,6 @@ import styles from './copy-button.css';
  * @csspart tooltip__base__popup - The tooltip's exported `popup` part.
  * @csspart tooltip__base__arrow - The tooltip's exported `arrow` part.
  * @csspart tooltip__body - The tooltip's exported `body` part.
- *
- * @cssproperty --background-color - The color of the button's background.
- * @cssproperty --background-color-hover - The color of the button's background on hover.
- * @cssproperty --success-color - The color to use for success feedback.
- * @cssproperty --error-color - The color to use for error feedback.
  */
 @customElement('wa-copy-button')
 export default class WaCopyButton extends WebAwesomeElement {
diff --git a/packages/webawesome/src/components/details/details.css b/packages/webawesome/src/components/details/details.css
index 370fc7ecc..069778cea 100644
--- a/packages/webawesome/src/components/details/details.css
+++ b/packages/webawesome/src/components/details/details.css
@@ -1,17 +1,11 @@
 :host {
-  --icon-color: var(--wa-color-text-quiet);
   --spacing: var(--wa-space-m);
   --show-duration: 200ms;
   --hide-duration: 200ms;
-  --outlined-border-color: var(--wa-color-surface-border);
 
   display: block;
 }
 
-:host([appearance='plain']) {
-  border-radius: 0;
-}
-
 :host summary {
   display: flex;
   align-items: center;
@@ -38,10 +32,10 @@
 details {
   display: block;
   overflow-anchor: none;
-  border: var(--wa-panel-border-width) var(--border-color) var(--wa-panel-border-style);
-  background-color: var(--background-color, var(--wa-color-surface-default));
+  border: var(--wa-panel-border-width) var(--wa-color-surface-border) var(--wa-panel-border-style);
+  background-color: var(--wa-color-surface-default);
   border-radius: var(--wa-panel-border-radius);
-  color: var(--text-color, inherit);
+  color: var(--wa-color-text-normal);
 
   /* Print styles */
   @media print {
@@ -54,6 +48,36 @@ details {
   }
 }
 
+/* Appearance modifiers */
+:host([appearance~='plain']) {
+  details {
+    background-color: transparent;
+    border-color: transparent;
+  }
+}
+
+:host([appearance~='outlined']) {
+  details {
+    background-color: var(--wa-color-surface-default);
+    border-color: var(--wa-color-surface-border);
+  }
+}
+
+:host([appearance~='filled']) {
+  details {
+    background-color: var(--wa-color-neutral-fill-quiet);
+    border-color: transparent;
+  }
+
+  &:host([appearance~='outlined']) details {
+    border-color: var(--wa-color-neutral-border-quiet);
+  }
+}
+
+:host([appearance='plain']) {
+  border-radius: 0;
+}
+
 :host([disabled]) details {
   opacity: 0.5;
   cursor: not-allowed;
@@ -87,7 +111,7 @@ details {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
-  color: var(--icon-color);
+  color: var(--wa-color-text-quiet);
   transition: rotate var(--wa-transition-normal) var(--wa-transition-easing);
 }
 
diff --git a/packages/webawesome/src/components/details/details.ts b/packages/webawesome/src/components/details/details.ts
index 2cc9a554f..1a5cc0782 100644
--- a/packages/webawesome/src/components/details/details.ts
+++ b/packages/webawesome/src/components/details/details.ts
@@ -8,7 +8,6 @@ import { animate, parseDuration } from '../../internal/animate.js';
 import { getTargetElement, waitForEvent } from '../../internal/event.js';
 import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import appearanceStyles from '../../styles/utilities/appearance.css';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
 import styles from './details.css';
@@ -38,15 +37,13 @@ import styles from './details.css';
  * @csspart icon - The container that wraps the expand/collapse icons.
  * @csspart content - The details content.
  *
- * @cssproperty --icon-color - The color of the details' icon.
  * @cssproperty --spacing - The amount of space around and between the details' content. Expects a single value.
  * @cssproperty [--show-duration=200ms] - The show duration to use when applying built-in animation classes.
  * @cssproperty [--hide-duration=200ms] - The hide duration to use when applying built-in animation classes.
- * @cssproperty --display - Set to `none` to hide the element, or any other valid `display` value to override the internal `display` value of the `base` part.
  */
 @customElement('wa-details')
 export default class WaDetails extends WebAwesomeElement {
-  static css = [appearanceStyles, styles];
+  static css = styles;
 
   private detailsObserver: MutationObserver;
   private readonly localize = new LocalizeController(this);
diff --git a/packages/webawesome/src/components/dialog/dialog.css b/packages/webawesome/src/components/dialog/dialog.css
index 4b9b8a7ed..e787f3475 100644
--- a/packages/webawesome/src/components/dialog/dialog.css
+++ b/packages/webawesome/src/components/dialog/dialog.css
@@ -1,7 +1,4 @@
 :host {
-  --background-color: var(--wa-color-surface-raised);
-  --border-radius: var(--wa-panel-border-radius);
-  --box-shadow: var(--wa-shadow-l);
   --width: 31rem;
   --spacing: var(--wa-space-l);
   --show-duration: 200ms;
@@ -24,10 +21,10 @@
   width: var(--width);
   max-width: calc(100% - var(--wa-space-2xl));
   max-height: calc(100% - var(--wa-space-2xl));
-  background-color: var(--background-color);
-  border-radius: var(--border-radius);
+  background-color: var(--wa-color-surface-raised);
+  border-radius: var(--wa-panel-border-radius);
   border: none;
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--wa-shadow-l);
   padding: 0;
   margin: auto;
 
diff --git a/packages/webawesome/src/components/dialog/dialog.ts b/packages/webawesome/src/components/dialog/dialog.ts
index de94effca..031244ec5 100644
--- a/packages/webawesome/src/components/dialog/dialog.ts
+++ b/packages/webawesome/src/components/dialog/dialog.ts
@@ -45,9 +45,6 @@ import styles from './dialog.css';
  * @csspart body - The dialog's body.
  * @csspart footer - The dialog's footer.
  *
- * @cssproperty --background-color - The dialog's background color.
- * @cssproperty --border-radius - The radius of the dialog's corners.
- * @cssproperty --box-shadow - The shadow effects around the edges of the dialog.
  * @cssproperty --spacing - The amount of space around and between the dialog's content.
  * @cssproperty --width - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
  * @cssproperty [--show-duration=200ms] - The animation duration when showing the dialog.
diff --git a/packages/webawesome/src/components/drawer/drawer.css b/packages/webawesome/src/components/drawer/drawer.css
index 9501b72ce..01637d687 100644
--- a/packages/webawesome/src/components/drawer/drawer.css
+++ b/packages/webawesome/src/components/drawer/drawer.css
@@ -1,6 +1,4 @@
 :host {
-  --background-color: var(--wa-color-surface-raised);
-  --box-shadow: var(--wa-shadow-l);
   --size: 25rem;
   --spacing: var(--wa-space-l);
   --show-duration: 200ms;
@@ -23,9 +21,9 @@
   max-width: 100%;
   max-height: 100%;
   overflow: hidden;
-  background-color: var(--background-color);
+  background-color: var(--wa-color-surface-raised);
   border: none;
-  box-shadow: var(--box-shadow);
+  box-shadow: var(--wa-shadow-l);
   overflow: auto;
   padding: 0;
   margin: 0;
diff --git a/packages/webawesome/src/components/drawer/drawer.ts b/packages/webawesome/src/components/drawer/drawer.ts
index e5b40b007..2341c89e8 100644
--- a/packages/webawesome/src/components/drawer/drawer.ts
+++ b/packages/webawesome/src/components/drawer/drawer.ts
@@ -46,8 +46,6 @@ import styles from './drawer.css';
  * @csspart body - The drawer's body.
  * @csspart footer - The drawer's footer.
  *
- * @cssproperty --background-color - The drawer's background color.
- * @cssproperty --box-shadow - The shadow effects around the edges of the drawer.
  * @cssproperty --spacing - The amount of space around and between the drawer's content.
  * @cssproperty --size - The preferred size of the drawer. This will be applied to the drawer's width or height
  *   depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens.
diff --git a/packages/webawesome/src/components/dropdown/dropdown.ts b/packages/webawesome/src/components/dropdown/dropdown.ts
index b82b63a07..337697827 100644
--- a/packages/webawesome/src/components/dropdown/dropdown.ts
+++ b/packages/webawesome/src/components/dropdown/dropdown.ts
@@ -45,13 +45,6 @@ const openDropdowns = new Set<WaDropdown>();
  *
  * @cssproperty --show-duration - The duration of the show animation.
  * @cssproperty --hide-duration - The duration of the hide animation.
- * @cssproperty --menu-background-color - The background color of the dropdown menu.
- * @cssproperty --menu-border-color - The border color of the dropdown menu.
- * @cssproperty --menu-border-width - The border width of the dropdown menu.
- * @cssproperty --menu-border-radius - The border radius of the dropdown menu.
- * @cssproperty --menu-box-shadow - The box shadow of the dropdown menu.
- * @cssproperty --menu-text-color - The text color of the dropdown menu items.
- * @cssproperty --menu-padding - The padding of the dropdown menu.
  */
 @customElement('wa-dropdown')
 export default class WaDropdown extends WebAwesomeElement {
diff --git a/packages/webawesome/src/components/input/input.css b/packages/webawesome/src/components/input/input.css
index a38b82149..a30c6615a 100644
--- a/packages/webawesome/src/components/input/input.css
+++ b/packages/webawesome/src/components/input/input.css
@@ -1,10 +1,4 @@
 :host {
-  --border-width: var(--wa-form-control-border-width);
-  --box-shadow: initial;
-  --outlined-background-color: var(--wa-form-control-background-color);
-  --outlined-border-color: var(--wa-form-control-border-color);
-  --outlined-text-color: var(--wa-form-control-value-color);
-
   border-width: 0;
 }
 
@@ -16,10 +10,10 @@
   position: relative;
   transition: inherit;
   height: var(--wa-form-control-height);
-  border-color: var(--border-color, var(--wa-form-control-border-color));
+  border-color: var(--wa-form-control-border-color);
   border-radius: var(--wa-form-control-border-radius);
   border-style: var(--wa-form-control-border-style);
-  border-width: var(--border-width);
+  border-width: var(--wa-form-control-border-width);
   cursor: text;
   color: var(--wa-form-control-value-color);
   font-size: var(--wa-form-control-value-font-size);
@@ -33,7 +27,7 @@
     border var(--wa-transition-normal),
     outline var(--wa-transition-fast);
   transition-timing-function: var(--wa-transition-easing);
-  background-color: var(--background-color, var(--wa-form-control-background-color));
+  background-color: var(--wa-form-control-background-color);
   box-shadow: var(--box-shadow);
   padding: 0 var(--wa-form-control-padding-inline);
 
@@ -49,6 +43,25 @@
   }
 }
 
+/* Appearance modifiers */
+:host([appearance~='outlined']) {
+  .text-field {
+    background-color: var(--wa-form-control-background-color);
+    border-color: var(--wa-form-control-border-color);
+  }
+}
+
+:host([appearance~='filled']) {
+  .text-field {
+    background-color: var(--wa-color-neutral-fill-quiet);
+    border-color: var(--wa-color-neutral-fill-quiet);
+  }
+
+  &:host([appearance~='outlined']) .text-field {
+    border-color: var(--wa-form-control-border-color);
+  }
+}
+
 :host([pill]) .text-field {
   border-radius: var(--wa-border-radius-pill) !important;
 }
diff --git a/packages/webawesome/src/components/input/input.ts b/packages/webawesome/src/components/input/input.ts
index c4a3b1994..fefb358f3 100644
--- a/packages/webawesome/src/components/input/input.ts
+++ b/packages/webawesome/src/components/input/input.ts
@@ -10,7 +10,6 @@ import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
 import formControlStyles from '../../styles/component/form-control.css';
-import appearanceStyles from '../../styles/utilities/appearance.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
@@ -48,16 +47,11 @@ import styles from './input.css';
  * @csspart password-toggle-button - The password toggle button.
  * @csspart end - The container that wraps the `end` slot.
  *
- * @cssproperty --background-color - The input's background color.
- * @cssproperty --border-color - The color of the input's borders.
- * @cssproperty --border-width - The width of the input's borders. Expects a single value.
- * @cssproperty --box-shadow - The shadow effects around the edges of the input.
- *
  * @cssstate blank - The input is empty.
  */
 @customElement('wa-input')
 export default class WaInput extends WebAwesomeFormAssociatedElement {
-  static css = [sizeStyles, appearanceStyles, formControlStyles, styles];
+  static css = [sizeStyles, formControlStyles, styles];
 
   static shadowRootOptions = { ...WebAwesomeFormAssociatedElement.shadowRootOptions, delegatesFocus: true };
 
diff --git a/packages/webawesome/src/components/option/option.css b/packages/webawesome/src/components/option/option.css
index 43c49d90a..31ec2647a 100644
--- a/packages/webawesome/src/components/option/option.css
+++ b/packages/webawesome/src/components/option/option.css
@@ -1,9 +1,4 @@
 :host {
-  --background-color-current: var(--wa-color-brand-fill-loud);
-  --background-color-hover: var(--wa-color-neutral-fill-normal);
-  --text-color-current: var(--wa-color-brand-on-loud);
-  --text-color-hover: var(--wa-color-neutral-on-normal);
-
   display: block;
   color: var(--wa-color-text-normal);
   -webkit-user-select: none;
@@ -25,15 +20,15 @@
 
 @media (hover: hover) {
   :host(:not([disabled], :state(current)):is(:state(hover), :hover)) {
-    background-color: var(--background-color-hover);
-    color: var(--text-color-hover);
+    background-color: var(--wa-color-neutral-fill-normal);
+    color: var(--wa-color-neutral-on-normal);
   }
 }
 
 :host(:state(current)),
 :host([disabled]:state(current)) {
-  background-color: var(--background-color-current);
-  color: var(--text-color-current);
+  background-color: var(--wa-color-brand-fill-loud);
+  color: var(--wa-color-brand-on-loud);
   opacity: 1;
 }
 
diff --git a/packages/webawesome/src/components/option/option.ts b/packages/webawesome/src/components/option/option.ts
index b8b826fcb..40ef35787 100644
--- a/packages/webawesome/src/components/option/option.ts
+++ b/packages/webawesome/src/components/option/option.ts
@@ -19,11 +19,6 @@ import styles from './option.css';
  * @slot start - An element, such as `<wa-icon>`, placed before the label.
  * @slot end - An element, such as `<wa-icon>`, placed after the label.
  *
- * @cssproperty --background-color-current - The current option's background color.
- * @cssproperty --background-color-hover - The options's background color on hover.
- * @cssproperty --text-color-current - The current option's label color.
- * @cssproperty --text-color-hover - The label color on hover.
- *
  * @csspart checked-icon - The checked icon, a `<wa-icon>` element.
  * @csspart label - The option's label.
  * @csspart start - The container that wraps the `start` slot.
diff --git a/packages/webawesome/src/components/popover/popover.css b/packages/webawesome/src/components/popover/popover.css
index 6f72a414b..1afa32574 100644
--- a/packages/webawesome/src/components/popover/popover.css
+++ b/packages/webawesome/src/components/popover/popover.css
@@ -10,8 +10,8 @@
   display: contents;
 
   /** Defaults for inherited CSS properties */
-  font-size: var(--wa-popover-font-size);
-  line-height: var(--wa-popover-line-height);
+  font-size: var(--wa-font-size-m);
+  line-height: var(--wa-line-height-normal);
   text-align: start;
   white-space: normal;
 }
diff --git a/packages/webawesome/src/components/progress-bar/progress-bar.css b/packages/webawesome/src/components/progress-bar/progress-bar.css
index dccd274f9..22e7fca60 100644
--- a/packages/webawesome/src/components/progress-bar/progress-bar.css
+++ b/packages/webawesome/src/components/progress-bar/progress-bar.css
@@ -1,4 +1,5 @@
 :host {
+  --track-color: var(--wa-color-neutral-fill-normal);
   --indicator-color: var(--wa-color-brand-fill-loud);
 
   display: flex;
@@ -9,9 +10,9 @@
   display: flex;
   position: relative;
   overflow: hidden;
-  height: 1.25rem;
+  height: 1rem;
   border-radius: var(--wa-border-radius-pill);
-  background-color: var(--wa-color-neutral-fill-normal);
+  background-color: var(--track-color);
   color: var(--wa-color-brand-on-loud);
 }
 
diff --git a/packages/webawesome/src/components/progress-bar/progress-bar.ts b/packages/webawesome/src/components/progress-bar/progress-bar.ts
index c61210d91..d21423d1e 100644
--- a/packages/webawesome/src/components/progress-bar/progress-bar.ts
+++ b/packages/webawesome/src/components/progress-bar/progress-bar.ts
@@ -19,8 +19,8 @@ import styles from './progress-bar.css';
  * @csspart indicator - The progress bar's indicator.
  * @csspart label - The progress bar's label.
  *
+ * @cssproperty --track-color - The color of the track.
  * @cssproperty --indicator-color - The color of the indicator.
- * @cssproperty --display - Set to `none` to hide the element, or any other valid `display` value to override the internal `display` value of the `base` part.
  */
 @customElement('wa-progress-bar')
 export default class WaProgressBar extends WebAwesomeElement {
diff --git a/packages/webawesome/src/components/radio/radio.css b/packages/webawesome/src/components/radio/radio.css
index 12ab57deb..4a7d7493a 100644
--- a/packages/webawesome/src/components/radio/radio.css
+++ b/packages/webawesome/src/components/radio/radio.css
@@ -1,14 +1,6 @@
 :host {
-  --background-color: var(--wa-form-control-background-color);
-  --background-color-checked: var(--background-color);
-  --border-color: var(--wa-form-control-border-color);
-  --border-color-checked: var(--wa-form-control-activated-color);
-  --border-style: var(--wa-border-style);
-  --border-width: var(--wa-form-control-border-width);
-  --box-shadow: none;
   --checked-icon-color: var(--wa-form-control-activated-color);
   --checked-icon-scale: 0.7;
-  --toggle-size: var(--wa-form-control-toggle-size);
 
   color: var(--wa-form-control-value-color);
   display: inline-flex;
@@ -47,14 +39,13 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--toggle-size);
-    height: var(--toggle-size);
-    border-color: var(--border-color);
+    width: var(--wa-form-control-toggle-size);
+    height: var(--wa-form-control-toggle-size);
+    border-color: var(--wa-form-control-border-color);
     border-radius: 50%;
-    border-style: var(--border-style);
-    border-width: var(--border-width);
-    background-color: var(--background-color);
-    box-shadow: var(--box-shadow);
+    border-style: var(--wa-form-control-border-style);
+    border-width: var(--wa-form-control-border-width);
+    background-color: var(--wa-form-control-background-color);
     color: transparent;
     transition:
       background var(--wa-transition-normal),
@@ -69,8 +60,8 @@
   .checked-icon {
     display: flex;
     fill: currentColor;
-    width: var(--toggle-size);
-    height: var(--toggle-size);
+    width: var(--wa-form-control-toggle-size);
+    height: var(--wa-form-control-toggle-size);
     scale: var(--checked-icon-scale);
   }
 }
@@ -78,8 +69,8 @@
 /* Checked */
 :host(:state(checked)) .control {
   color: var(--checked-icon-color);
-  border-color: var(--border-color-checked);
-  background-color: var(--background-color-checked);
+  border-color: var(--wa-form-control-activated-color);
+  background-color: var(--wa-form-control-background-color);
 }
 
 /* Focus */
@@ -99,7 +90,7 @@
   align-items: center;
   min-height: var(--wa-form-control-height);
   background-color: var(--wa-color-surface-default);
-  border: var(--border-width) var(--border-style) var(--wa-form-control-border-color);
+  border: var(--wa-form-control-border-width) var(--wa-form-control-border-style) var(--wa-form-control-border-color);
   border-radius: var(--wa-border-radius-m);
   padding: 0 var(--wa-form-control-padding-inline);
   transition:
@@ -153,7 +144,7 @@
 }
 
 :host([appearance='button']:state(checked)) {
-  border-color: var(--border-color-checked);
+  border-color: var(--wa-form-control-activated-color);
   background-color: var(--wa-color-brand-fill-quiet);
 }
 
@@ -164,11 +155,11 @@
 
 /* Remove inner borders and handle overlap */
 :host([appearance='button'][data-wa-radio-horizontal]:not([data-wa-radio-first])) {
-  margin-inline-start: calc(-1 * var(--border-width));
+  margin-inline-start: calc(-1 * var(--wa-form-control-border-width));
 }
 
 :host([appearance='button'][data-wa-radio-vertical]:not([data-wa-radio-first])) {
-  margin-block-start: calc(-1 * var(--border-width));
+  margin-block-start: calc(-1 * var(--wa-form-control-border-width));
 }
 
 /* Ensure interactive states are visible above adjacent buttons */
diff --git a/packages/webawesome/src/components/radio/radio.ts b/packages/webawesome/src/components/radio/radio.ts
index a6dca2ea5..effb8cedc 100644
--- a/packages/webawesome/src/components/radio/radio.ts
+++ b/packages/webawesome/src/components/radio/radio.ts
@@ -24,16 +24,8 @@ import styles from './radio.css';
  * @csspart checked-icon - The checked icon.
  * @csspart label - The container that wraps the radio's label.
  *
- * @cssproperty --background-color - The radio's background color.
- * @cssproperty --background-color-checked - The radio's background color when checked.
- * @cssproperty --border-color - The color of the radio's borders.
- * @cssproperty --border-color-checked - The color of the radio's borders when checked.
- * @cssproperty --border-style - The style of the radio's borders.
- * @cssproperty --border-width - The width of the radio's borders. Expects a single value.
- * @cssproperty --box-shadow - The shadow effects around the edges of the radio.
- * @cssproperty --checked-icon-color - The color of the radio's checked icon.
+ * @cssproperty --checked-icon-color - The color of the checked icon.
  * @cssproperty --checked-icon-scale - The size of the checked icon relative to the radio.
- * @cssproperty --toggle-size - The size of the radio.
  *
  * @cssstate checked - Applied when the control is checked.
  * @cssstate disabled - Applied when the control is disabled.
diff --git a/packages/webawesome/src/components/rating/rating.css b/packages/webawesome/src/components/rating/rating.css
index c97c9ded0..606a2f263 100644
--- a/packages/webawesome/src/components/rating/rating.css
+++ b/packages/webawesome/src/components/rating/rating.css
@@ -24,6 +24,7 @@
 
 .symbols {
   display: inline-flex;
+  gap: 0.125em;
   position: relative;
   line-height: 0;
   color: var(--symbol-color);
diff --git a/packages/webawesome/src/components/select/select.css b/packages/webawesome/src/components/select/select.css
index b62486adf..097f25af3 100644
--- a/packages/webawesome/src/components/select/select.css
+++ b/packages/webawesome/src/components/select/select.css
@@ -1,11 +1,4 @@
-label:has(select),
 :host {
-  /* Defaults for root element. */
-  --outlined-background-color: var(--wa-form-control-background-color);
-  --outlined-border-color: var(--wa-form-control-border-color);
-  --outlined-text-color: var(--wa-form-control-value-color);
-  --border-width: var(--wa-form-control-border-width);
-  --box-shadow: initial;
   --tag-max-size: 10ch;
 }
 
@@ -61,12 +54,11 @@ label:has(select),
 
   min-height: var(--wa-form-control-height);
 
-  background-color: var(--background-color, var(--wa-form-control-background-color));
-  border-color: var(--border-color, var(--wa-form-control-border-color));
+  background-color: var(--wa-form-control-background-color);
+  border-color: var(--wa-form-control-border-color);
   border-radius: var(--wa-form-control-border-radius);
   border-style: var(--wa-form-control-border-style);
-  border-width: var(--border-width);
-  box-shadow: var(--box-shadow);
+  border-width: var(--wa-form-control-border-width);
   color: var(--wa-form-control-value-color);
   cursor: pointer;
   font-family: inherit;
@@ -94,6 +86,25 @@ label:has(select),
   }
 }
 
+/* Appearance modifiers */
+:host([appearance~='outlined']) {
+  .combobox {
+    background-color: var(--wa-form-control-background-color);
+    border-color: var(--wa-form-control-border-color);
+  }
+}
+
+:host([appearance~='filled']) {
+  .combobox {
+    background-color: var(--wa-color-neutral-fill-quiet);
+    border-color: var(--wa-color-neutral-fill-quiet);
+  }
+
+  &:host([appearance~='outlined']) .combobox {
+    border-color: var(--wa-form-control-border-color);
+  }
+}
+
 .display-input {
   position: relative;
   width: 100%;
@@ -234,7 +245,7 @@ label:has(select),
   border-color: var(--wa-color-surface-border);
   border-radius: var(--wa-border-radius-m);
   border-style: var(--wa-border-style);
-  border-width: var(--border-width);
+  border-width: var(--wa-border-width-s);
   padding-block: 0.5em;
   padding-inline: 0;
   overflow: auto;
diff --git a/packages/webawesome/src/components/select/select.ts b/packages/webawesome/src/components/select/select.ts
index ba6d37209..fe067a686 100644
--- a/packages/webawesome/src/components/select/select.ts
+++ b/packages/webawesome/src/components/select/select.ts
@@ -17,7 +17,6 @@ import { RequiredValidator } from '../../internal/validators/required-validator.
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
 import formControlStyles from '../../styles/component/form-control.css';
-import appearanceStyles from '../../styles/utilities/appearance.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import { LocalizeController } from '../../utilities/localize.js';
 import '../icon/icon.js';
@@ -75,17 +74,13 @@ import styles from './select.css';
  * @csspart clear-button - The clear button.
  * @csspart expand-icon - The container that wraps the expand icon.
  *
- * @cssproperty --background-color - The background color of the select's combobox.
- * @cssproperty --border-color - The border color of the select's combobox.
- * @cssproperty --border-width - The width of the select's borders, including the listbox.
- * @cssproperty --box-shadow - The shadow effects around the edges of the select's combobox.
  * @cssproperty [--tag-max-size=10ch] - When using `multiple`, the max size of tags before their content is truncated.
  *
  * @cssstate blank - The select is empty.
  */
 @customElement('wa-select')
 export default class WaSelect extends WebAwesomeFormAssociatedElement {
-  static css = [appearanceStyles, formControlStyles, sizeStyles, styles];
+  static css = [styles, formControlStyles, sizeStyles];
 
   static get validators() {
     const validators = isServer
diff --git a/packages/webawesome/src/components/skeleton/skeleton.css b/packages/webawesome/src/components/skeleton/skeleton.css
index 0132e8928..65a7f794a 100644
--- a/packages/webawesome/src/components/skeleton/skeleton.css
+++ b/packages/webawesome/src/components/skeleton/skeleton.css
@@ -1,5 +1,4 @@
 :host {
-  --border-radius: var(--wa-border-radius-pill);
   --color: var(--wa-color-neutral-fill-normal);
   --sheen-color: color-mix(in oklab, var(--color), var(--wa-color-surface-raised));
 
@@ -13,7 +12,7 @@
 .indicator {
   flex: 1 1 auto;
   background: var(--color);
-  border-radius: var(--border-radius);
+  border-radius: var(--wa-border-radius-pill);
 }
 
 :host([effect='sheen']) .indicator {
diff --git a/packages/webawesome/src/components/skeleton/skeleton.ts b/packages/webawesome/src/components/skeleton/skeleton.ts
index b0ec24066..7d2d08ed9 100644
--- a/packages/webawesome/src/components/skeleton/skeleton.ts
+++ b/packages/webawesome/src/components/skeleton/skeleton.ts
@@ -11,7 +11,6 @@ import styles from './skeleton.css';
  *
  * @csspart indicator - The skeleton's indicator which is responsible for its color and animation.
  *
- * @cssproperty --border-radius - The skeleton's border radius.
  * @cssproperty --color - The color of the skeleton.
  * @cssproperty --sheen-color - The sheen color when the skeleton is in its loading state.
  */
diff --git a/packages/webawesome/src/components/split-panel/split-panel.css b/packages/webawesome/src/components/split-panel/split-panel.css
index f520feef3..4c9187b7e 100644
--- a/packages/webawesome/src/components/split-panel/split-panel.css
+++ b/packages/webawesome/src/components/split-panel/split-panel.css
@@ -1,5 +1,4 @@
 :host {
-  --divider-color: var(--wa-color-neutral-border-normal);
   --divider-width: 0.25rem;
   --divider-hit-area: 0.75rem;
   --min: 0%;
@@ -19,7 +18,7 @@
   position: relative;
   align-items: center;
   justify-content: center;
-  background-color: var(--divider-color);
+  background-color: var(--wa-color-neutral-border-normal);
   color: var(--wa-color-neutral-on-normal);
   z-index: 1;
 }
diff --git a/packages/webawesome/src/components/split-panel/split-panel.ts b/packages/webawesome/src/components/split-panel/split-panel.ts
index 157775913..2b7fdcf61 100644
--- a/packages/webawesome/src/components/split-panel/split-panel.ts
+++ b/packages/webawesome/src/components/split-panel/split-panel.ts
@@ -26,7 +26,6 @@ import styles from './split-panel.css';
  * @csspart panel - Targets both the start and end panels.
  * @csspart divider - The divider that separates the start and end panels.
  *
- * @cssproperty --divider-color - The color of the divider.
  * @cssproperty [--divider-width=4px] - The width of the visible divider.
  * @cssproperty [--divider-hit-area=12px] - The invisible region around the divider where dragging can occur. This is
  *  usually wider than the divider to facilitate easier dragging.
diff --git a/packages/webawesome/src/components/switch/switch.css b/packages/webawesome/src/components/switch/switch.css
index 8289e89ad..941bf017c 100644
--- a/packages/webawesome/src/components/switch/switch.css
+++ b/packages/webawesome/src/components/switch/switch.css
@@ -1,17 +1,7 @@
 :host {
-  --background-color: var(--wa-form-control-background-color);
-  --background-color-checked: var(--wa-form-control-activated-color);
-  --border-color: var(--wa-form-control-border-color);
-  --border-color-checked: var(--background-color-checked);
-  --border-style: var(--wa-form-control-border-style);
-  --border-width: var(--wa-form-control-border-width);
-  --box-shadow: initial;
   --height: var(--wa-form-control-toggle-size);
-  --thumb-color: var(--wa-form-control-border-color);
-  --thumb-color-checked: var(--wa-form-control-background-color);
-  --thumb-shadow: initial;
-  --thumb-size: calc((var(--height) - var(--border-width) * 2) * 0.75);
   --width: calc(var(--height) * 1.75);
+  --thumb-size: 0.75em;
 
   display: inline-flex;
   line-height: var(--wa-form-control-value-line-height);
@@ -35,23 +25,22 @@ label {
   justify-content: center;
   width: var(--width);
   height: var(--height);
-  background-color: var(--background-color);
-  border-color: var(--border-color);
+  background-color: var(--wa-form-control-background-color);
+  border-color: var(--wa-form-control-border-color);
   border-radius: var(--height);
-  border-style: var(--border-style);
-  border-width: var(--border-width);
-  box-shadow: var(--box-shadow);
+  border-style: var(--wa-form-control-border-style);
+  border-width: var(--wa-form-control-border-width);
   transition-property: translate, background, border-color, box-shadow;
   transition-duration: var(--wa-transition-normal);
   transition-timing-function: var(--wa-transition-easing);
 }
 
 .switch .thumb {
+  aspect-ratio: 1 / 1;
   width: var(--thumb-size);
   height: var(--thumb-size);
-  background-color: var(--thumb-color);
+  background-color: var(--wa-form-control-border-color);
   border-radius: 50%;
-  box-shadow: var(--thumb-shadow);
   translate: calc((var(--width) - var(--height)) / -2);
   transition: inherit;
 }
@@ -72,12 +61,12 @@ label:not(.disabled) .input:focus-visible ~ .switch .thumb {
 
 /* Checked */
 .checked .switch {
-  background-color: var(--background-color-checked);
-  border-color: var(--border-color-checked);
+  background-color: var(--wa-form-control-activated-color);
+  border-color: var(--wa-form-control-activated-color);
 }
 
 .checked .switch .thumb {
-  background-color: var(--thumb-color-checked);
+  background-color: var(--wa-color-surface-default);
   translate: calc((var(--width) - var(--height)) / 2);
 }
 
diff --git a/packages/webawesome/src/components/switch/switch.ts b/packages/webawesome/src/components/switch/switch.ts
index 1297f3db2..8b2080c7b 100644
--- a/packages/webawesome/src/components/switch/switch.ts
+++ b/packages/webawesome/src/components/switch/switch.ts
@@ -33,19 +33,9 @@ import styles from './switch.css';
  * @csspart label - The switch's label.
  * @csspart hint - The hint's wrapper.
  *
- * @cssproperty --background-color - The switch's background color.
- * @cssproperty --background-color-checked - The switch's background color when checked.
- * @cssproperty --border-color - The color of the switch's borders.
- * @cssproperty --border-color-checked - The color of the switch's borders when checked.
- * @cssproperty --border-style - The style of the switch's borders.
- * @cssproperty --border-width - The width of the switch's borders. Expects a single value.
- * @cssproperty --box-shadow - The shadow effects around the edges of the switch.
- * @cssproperty --height - The height of the switch.
- * @cssproperty --thumb-color - The color of the thumb.
- * @cssproperty --thumb-color-checked - The color of the thumb when checked.
- * @cssproperty --thumb-shadow - The shadow effects around the edges of the thumb.
- * @cssproperty --thumb-size - The size of the thumb.
  * @cssproperty --width - The width of the switch.
+ * @cssproperty --height - The height of the switch.
+ * @cssproperty --thumb-size - The size of the thumb.
  */
 @customElement('wa-switch')
 export default class WaSwitch extends WebAwesomeFormAssociatedElement {
diff --git a/packages/webawesome/src/components/tab/tab.css b/packages/webawesome/src/components/tab/tab.css
index c782ca0d3..ef87dd807 100644
--- a/packages/webawesome/src/components/tab/tab.css
+++ b/packages/webawesome/src/components/tab/tab.css
@@ -1,5 +1,4 @@
 :host {
-  --active-tab-color: var(--wa-color-brand-on-quiet);
   display: inline-block;
   color: var(--wa-color-neutral-on-quiet);
   font-weight: var(--wa-font-weight-action);
@@ -40,8 +39,8 @@
   outline-offset: calc(-1 * var(--wa-border-width-l) - var(--wa-focus-ring-offset));
 }
 
-:host([active]:not([disabled])) .tab {
-  color: var(--active-tab-color);
+:host([active]:not([disabled])) {
+  color: var(--wa-color-brand-on-quiet);
 }
 
 :host([disabled]) .tab {
diff --git a/packages/webawesome/src/components/tab/tab.ts b/packages/webawesome/src/components/tab/tab.ts
index fd2fe2929..1be438780 100644
--- a/packages/webawesome/src/components/tab/tab.ts
+++ b/packages/webawesome/src/components/tab/tab.ts
@@ -15,8 +15,6 @@ let id = 0;
  *
  * @slot - The tab's label.
  *
- * @cssproperty --active-tab-color - The color of the active tab's label.
- *
  * @csspart base - The component's base wrapper.
  */
 @customElement('wa-tab')
diff --git a/packages/webawesome/src/components/tag/tag.css b/packages/webawesome/src/components/tag/tag.css
index 2775dcc91..8c877faaf 100644
--- a/packages/webawesome/src/components/tag/tag.css
+++ b/packages/webawesome/src/components/tag/tag.css
@@ -4,11 +4,11 @@
     gap: 0.5em;
     border-radius: var(--wa-border-radius-m);
     align-items: center;
-    background-color: var(--background-color, var(--wa-color-fill-quiet));
-    border-color: var(--border-color, transparent);
+    background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
+    border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
     border-style: var(--wa-border-style);
     border-width: var(--wa-border-width-s);
-    color: var(--text-color, var(--wa-color-on-normal));
+    color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
     font-size: inherit;
     line-height: 1;
     white-space: nowrap;
@@ -18,6 +18,29 @@
     line-height: calc(var(--wa-form-control-height) - var(--wa-form-control-border-width) * 2);
     padding: 0 0.75em;
   }
+
+  /* Appearance modifiers */
+  :host([appearance~='outlined']) {
+    color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+    background-color: transparent;
+    border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud));
+  }
+
+  :host([appearance~='filled']) {
+    color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+    background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
+    border-color: transparent;
+
+    &:host([appearance~='outlined']) {
+      border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
+    }
+  }
+
+  :host([appearance~='accent']) {
+    color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
+    background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
+    border-color: transparent;
+  }
 }
 
 .content {
diff --git a/packages/webawesome/src/components/tag/tag.ts b/packages/webawesome/src/components/tag/tag.ts
index 849b3c92c..a4ed239b7 100644
--- a/packages/webawesome/src/components/tag/tag.ts
+++ b/packages/webawesome/src/components/tag/tag.ts
@@ -2,7 +2,6 @@ import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { WaRemoveEvent } from '../../events/remove.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import appearanceStyles from '../../styles/utilities/appearance.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import variantStyles from '../../styles/utilities/variants.css';
 import { LocalizeController } from '../../utilities/localize.js';
@@ -28,7 +27,7 @@ import styles from './tag.css';
  */
 @customElement('wa-tag')
 export default class WaTag extends WebAwesomeElement {
-  static css = [styles, variantStyles, sizeStyles, appearanceStyles];
+  static css = [styles, variantStyles, sizeStyles];
 
   private readonly localize = new LocalizeController(this);
 
diff --git a/packages/webawesome/src/components/textarea/textarea.css b/packages/webawesome/src/components/textarea/textarea.css
index f7cdd9a1d..df5f93863 100644
--- a/packages/webawesome/src/components/textarea/textarea.css
+++ b/packages/webawesome/src/components/textarea/textarea.css
@@ -1,10 +1,4 @@
 :host {
-  --border-width: var(--wa-form-control-border-width);
-  --box-shadow: initial;
-  --outlined-background-color: var(--wa-form-control-background-color);
-  --outlined-border-color: var(--wa-form-control-border-color);
-  --outlined-text-color: var(--wa-form-control-value-color);
-
   border-width: 0;
 }
 
@@ -17,12 +11,11 @@
   outline: none;
   cursor: inherit;
   font: inherit;
-  background-color: var(--background-color, var(--wa-form-control-background-color));
-  border-color: var(--border-color, var(--wa-form-control-border-color));
+  background-color: var(--wa-form-control-background-color);
+  border-color: var(--wa-form-control-border-color);
   border-radius: var(--wa-form-control-border-radius);
   border-style: var(--wa-form-control-border-style);
-  border-width: var(--border-width);
-  box-shadow: var(--box-shadow);
+  border-width: var(--wa-form-control-border-width);
   -webkit-appearance: none;
 
   &:focus-within {
@@ -31,6 +24,25 @@
   }
 }
 
+/* Appearance modifiers */
+:host([appearance~='outlined']) {
+  .textarea {
+    background-color: var(--wa-form-control-background-color);
+    border-color: var(--wa-form-control-border-color);
+  }
+}
+
+:host([appearance~='filled']) {
+  .textarea {
+    background-color: var(--wa-color-neutral-fill-quiet);
+    border-color: var(--wa-color-neutral-fill-quiet);
+  }
+
+  &:host([appearance~='outlined']) .textarea {
+    border-color: var(--wa-form-control-border-color);
+  }
+}
+
 textarea {
   display: block;
   width: 100%;
diff --git a/packages/webawesome/src/components/textarea/textarea.ts b/packages/webawesome/src/components/textarea/textarea.ts
index 27b920b12..352abb4ca 100644
--- a/packages/webawesome/src/components/textarea/textarea.ts
+++ b/packages/webawesome/src/components/textarea/textarea.ts
@@ -9,7 +9,6 @@ import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
 import formControlStyles from '../../styles/component/form-control.css';
-import appearanceStyles from '../../styles/utilities/appearance.css';
 import sizeStyles from '../../styles/utilities/size.css';
 import styles from './textarea.css';
 
@@ -34,16 +33,11 @@ import styles from './textarea.css';
  * @csspart textarea - The internal `<textarea>` control.
  * @csspart base - The wrapper around the `<textarea>` control.
  *
- * @cssproperty --background-color - The textarea's background color.
- * @cssproperty --border-color - The color of the textarea's borders.
- * @cssproperty --border-width - The width of the textarea's borders.
- * @cssproperty --box-shadow - The shadow effects around the edges of the textarea.
- *
  * @cssstate blank - The textarea is empty.
  */
 @customElement('wa-textarea')
 export default class WaTextarea extends WebAwesomeFormAssociatedElement {
-  static css = [formControlStyles, appearanceStyles, sizeStyles, styles];
+  static css = [styles, formControlStyles, sizeStyles];
 
   static get validators() {
     return [...super.validators, MirrorValidator()];
diff --git a/packages/webawesome/src/components/tooltip/tooltip.css b/packages/webawesome/src/components/tooltip/tooltip.css
index b4506cbf6..da122d150 100644
--- a/packages/webawesome/src/components/tooltip/tooltip.css
+++ b/packages/webawesome/src/components/tooltip/tooltip.css
@@ -1,8 +1,5 @@
 :host {
-  --background-color: var(--wa-tooltip-background-color);
-  --border-radius: var(--wa-tooltip-border-radius);
   --max-width: 30ch;
-  --padding: 0.25em 0.5em;
 
   /** These styles are added so we don't interfere in the DOM. */
   display: inline-block;
@@ -45,9 +42,9 @@
   display: block;
   width: max-content;
   max-width: var(--max-width);
-  border-radius: var(--border-radius);
-  background-color: var(--background-color);
-  padding: var(--padding);
+  border-radius: var(--wa-tooltip-border-radius);
+  background-color: var(--wa-tooltip-background-color);
+  padding: 0.25em 0.5em;
   user-select: none;
   -webkit-user-select: none;
 }
diff --git a/packages/webawesome/src/components/tooltip/tooltip.ts b/packages/webawesome/src/components/tooltip/tooltip.ts
index de585cea6..75ca56b8e 100644
--- a/packages/webawesome/src/components/tooltip/tooltip.ts
+++ b/packages/webawesome/src/components/tooltip/tooltip.ts
@@ -33,10 +33,7 @@ import styles from './tooltip.css';
  * @csspart base__arrow - The popup's exported `arrow` part. Use this to target the tooltip's arrow.
  * @csspart body - The tooltip's body where its content is rendered.
  *
- * @cssproperty --background-color - The tooltip's background color.
- * @cssproperty --border-radius - The radius of the tooltip's corners.
  * @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
- * @cssproperty --padding - The padding within the tooltip.
  */
 @customElement('wa-tooltip')
 export default class WaTooltip extends WebAwesomeElement {
diff --git a/packages/webawesome/src/components/tree-item/tree-item.css b/packages/webawesome/src/components/tree-item/tree-item.css
index 98de13c4c..11b3c9bb8 100644
--- a/packages/webawesome/src/components/tree-item/tree-item.css
+++ b/packages/webawesome/src/components/tree-item/tree-item.css
@@ -1,7 +1,4 @@
 :host {
-  --selection-background-color: var(--wa-color-neutral-fill-quiet);
-  --selection-indicator-color: var(--wa-color-brand-fill-loud);
-  --expand-button-color: var(--wa-color-text-quiet);
   --show-duration: 200ms;
   --hide-duration: 200ms;
 
@@ -57,7 +54,7 @@ slot:not([name])::slotted(wa-icon) {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--expand-button-color);
+  color: var(--wa-color-text-quiet);
   width: 2em;
   height: 2em;
   flex-shrink: 0;
@@ -108,12 +105,12 @@ slot:not([name])::slotted(wa-icon) {
 }
 
 :host(:not([aria-disabled='true'])) .tree-item-selected .item {
-  background-color: var(--selection-background-color);
-  border-inline-start-color: var(--selection-indicator-color);
+  background-color: var(--wa-color-neutral-fill-quiet);
+  border-inline-start-color: var(--wa-color-brand-fill-loud);
 }
 
 :host(:not([aria-disabled='true'])) .expand-button {
-  color: var(--expand-button-color);
+  color: var(--wa-color-text-quiet);
 }
 
 .label {
diff --git a/packages/webawesome/src/components/tree-item/tree-item.ts b/packages/webawesome/src/components/tree-item/tree-item.ts
index d9c4f1464..4dd7271a5 100644
--- a/packages/webawesome/src/components/tree-item/tree-item.ts
+++ b/packages/webawesome/src/components/tree-item/tree-item.ts
@@ -57,9 +57,6 @@ import styles from './tree-item.css';
  * @csspart checkbox__indeterminate-icon - The checkbox's exported `indeterminate-icon` part.
  * @csspart checkbox__label - The checkbox's exported `label` part.
  *
- * @cssproperty --selection-background-color - The background color of selected tree items.
- * @cssproperty --selection-indicator-color - The color the indicator for selected tree items.
- * @cssproperty --expand-button-color - The color of the expand button.
  * @cssproperty [--show-duration=200ms] - The animation duration when expanding tree items.
  * @cssproperty [--hide-duration=200ms] - The animation duration when collapsing tree items.
  *
diff --git a/packages/webawesome/src/styles/native.css b/packages/webawesome/src/styles/native.css
index 58beff260..89c9931e3 100644
--- a/packages/webawesome/src/styles/native.css
+++ b/packages/webawesome/src/styles/native.css
@@ -557,10 +557,6 @@
   input[type='button'],
   input[type='reset'],
   input[type='submit'] {
-    --background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
-    --border-color: transparent;
-    --text-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
-
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -569,7 +565,7 @@
     height: var(--wa-form-control-height);
     padding: 0 var(--wa-form-control-padding-inline);
 
-    color: var(--text-color);
+    color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
     font-family: inherit;
     font-size: var(--wa-form-control-value-font-size);
     font-weight: var(--wa-font-weight-action);
@@ -578,8 +574,8 @@
     vertical-align: middle;
     white-space: nowrap;
 
-    background-color: var(--background-color);
-    border-color: var(--border-color, var(--background-color));
+    background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
+    border-color: transparent;
     border-style: var(--wa-border-style);
     border-width: max(1px, var(--wa-form-control-border-width));
     border-radius: var(--wa-form-control-border-radius);
@@ -592,18 +588,94 @@
     user-select: none;
     -webkit-user-select: none;
 
-    &:not(:disabled):hover {
-      background-color: var(
-        --background-color-hover,
-        color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover))
-      );
+    &.wa-plain {
+      color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+      background-color: transparent;
+      border-color: transparent;
+
+      &:not(:disabled):hover {
+        color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+        background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
+      }
+
+      &:not(:disabled):active {
+        color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+        background-color: color-mix(
+          in oklab,
+          var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
+          var(--wa-color-mix-active)
+        );
+      }
     }
 
-    &:not(:disabled):active {
-      background-color: var(
-        --background-color-active,
-        color-mix(in oklab, var(--background-color), var(--wa-color-mix-active))
-      );
+    &.wa-outlined {
+      color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+      background-color: transparent;
+      border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud));
+
+      &:not(:disabled):hover {
+        color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+        background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
+      }
+
+      &:not(:disabled):active {
+        color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+        background-color: color-mix(
+          in oklab,
+          var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
+          var(--wa-color-mix-active)
+        );
+      }
+    }
+
+    &.wa-filled {
+      color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
+      background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
+      border-color: transparent;
+
+      &:not(:disabled):hover {
+        color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
+        background-color: color-mix(
+          in oklab,
+          var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
+          var(--wa-color-mix-hover)
+        );
+      }
+
+      &:not(:disabled):active {
+        color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
+        background-color: color-mix(
+          in oklab,
+          var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
+          var(--wa-color-mix-active)
+        );
+      }
+
+      &.wa-outlined {
+        border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
+      }
+    }
+
+    &.wa-accent {
+      color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
+      background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
+      border-color: transparent;
+
+      &:not(:disabled):hover {
+        background-color: color-mix(
+          in oklab,
+          var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
+          var(--wa-color-mix-hover)
+        );
+      }
+
+      &:not(:disabled):active {
+        background-color: color-mix(
+          in oklab,
+          var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
+          var(--wa-color-mix-active)
+        );
+      }
     }
 
     &:focus {
@@ -794,10 +866,10 @@
     line-height: var(--wa-form-control-value-line-height);
     vertical-align: middle;
 
-    background-color: var(--background-color, var(--wa-form-control-background-color));
-    border-color: var(--border-color, var(--wa-form-control-border-color));
+    background-color: var(--wa-form-control-background-color);
+    border-color: var(--wa-form-control-border-color);
     border-style: var(--wa-form-control-border-style);
-    border-width: var(--border-width, var(--wa-form-control-border-width));
+    border-width: var(--wa-form-control-border-width);
     border-radius: var(--wa-form-control-border-radius);
 
     transition:
@@ -830,6 +902,20 @@
       cursor: not-allowed;
     }
 
+    &.wa-outlined {
+      background-color: var(--wa-form-control-background-color);
+      border-color: var(--wa-form-control-border-color);
+    }
+
+    &.wa-filled {
+      background-color: var(--wa-color-neutral-fill-quiet);
+      border-color: var(--wa-color-neutral-fill-quiet);
+
+      &.wa-outlined {
+        border-color: var(--wa-form-control-border-color);
+      }
+    }
+
     &.wa-pill {
       border-radius: var(--wa-border-radius-pill);
     }
@@ -870,10 +956,12 @@
   input[type='color'] {
     display: block;
 
-    width: var(--wa-form-control-height);
-    height: var(--wa-form-control-height);
+    block-size: var(--wa-form-control-height);
+    inline-size: var(--wa-form-control-height);
     padding: calc(var(--wa-form-control-border-width) * 2);
 
+    font-size: 1em;
+
     background: transparent;
     border: var(--wa-form-control-border-width) var(--wa-border-style) var(--wa-form-control-border-color);
     border-radius: var(--wa-form-control-border-radius);
diff --git a/packages/webawesome/src/styles/themes/awesome.css b/packages/webawesome/src/styles/themes/awesome.css
index c523fa71d..9584bc0e3 100644
--- a/packages/webawesome/src/styles/themes/awesome.css
+++ b/packages/webawesome/src/styles/themes/awesome.css
@@ -364,60 +364,56 @@
   .wa-theme-awesome {
     wa-button,
     button,
-    input:where([type='button'], [type='reset'], [type='submit']) {
-      &:not([appearance='plain'], .wa-plain) {
-        --wa-color-shadow: var(--wa-color-border-normal);
-        --wa-transition-slow: 0;
-        --wa-transition-normal: 0;
-        --wa-transition-fast: 0;
+    input[type='button'],
+    input[type='reset'],
+    input[type='submit'] {
+      --wa-color-shadow: var(--wa-color-border-normal);
+      --wa-transition-slow: 0;
+      --wa-transition-normal: 0;
+      --wa-transition-fast: 0;
 
-        --background-color-active: var(--border-color-active);
-        --border-color-hover: var(--wa-color-shadow);
-        --border-color-active: var(--wa-color-shadow);
-        --box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) 0 0 var(--wa-color-shadow);
-
-        .wa-dark &,
-        .wa-invert & {
-          --wa-color-shadow: var(--wa-color-border-quiet);
-        }
-      }
-
-      &[appearance='filled'],
-      &.wa-filled {
+      .wa-dark & {
         --wa-color-shadow: var(--wa-color-border-quiet);
       }
 
-      &[appearance~='outlined'],
-      &.wa-outlined {
-        --wa-color-shadow: var(--border-color);
-
-        --border-color: oklab(from var(--background-color) calc(l - 0.07) a b);
-        --text-color-active: var(--background-color);
-        --outlined-background-color: var(--wa-color-surface-default);
-
-        .wa-dark &,
-        .wa-invert & {
-          --border-color: var(--wa-color-border-quiet);
-          --text-color-active: var(--wa-color-on-quiet);
-        }
+      &[appearance='outlined'],
+      &.wa-outlined:not(.wa-filled) {
+        --wa-color-shadow: var(--wa-color-border-loud);
       }
     }
 
-    :is(wa-button, button, input:where([type='button'], [type='reset'], [type='submit'])):not(
-        [appearance='plain'],
-        .wa-plain
-      ) {
-      &:where(:not(wa-button)),
-      &::part(base) {
-        height: calc(var(--wa-form-control-height) - var(--wa-shadow-offset-y-s));
-        margin-bottom: var(--wa-shadow-offset-y-s);
-        margin-right: var(--wa-shadow-offset-x-s);
-      }
-      &:not([disabled], [loading]):active {
+    wa-button,
+    button,
+    input[type='button'],
+    input[type='reset'],
+    input[type='submit'] {
+      &:not([appearance~='plain']):not(.wa-plain) {
         &:where(:not(wa-button)),
         &::part(base) {
-          box-shadow: none;
-          transform: translate(var(--wa-shadow-offset-x-s), var(--wa-shadow-offset-y-s));
+          height: calc(var(--wa-form-control-height) - var(--wa-shadow-offset-y-s));
+          margin-bottom: var(--wa-shadow-offset-y-s);
+          margin-right: var(--wa-shadow-offset-x-s);
+          box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) 0 0 var(--wa-color-shadow);
+        }
+        &:not([disabled]):not(:disabled):active {
+          &:where(:not(wa-button)),
+          &::part(base) {
+            color: var(--wa-color-fill-normal);
+            background-color: var(--wa-color-shadow);
+            border-color: var(--wa-color-shadow);
+            box-shadow: none;
+            transform: translate(var(--wa-shadow-offset-x-s), var(--wa-shadow-offset-y-s));
+          }
+        }
+      }
+      .wa-dark & {
+        &:not([appearance~='plain']):not(.wa-plain) {
+          &:not([disabled]):not(:disabled):active {
+            &:where(:not(wa-button)),
+            &::part(base) {
+              color: var(--wa-color-fill-loud);
+            }
+          }
         }
       }
     }
@@ -461,27 +457,42 @@
         wa-input,
         wa-select,
         wa-textarea
-      ):not(:focus, [appearance='filled']) {
-      --box-shadow: inset var(--wa-shadow-offset-x-s) max(var(--wa-shadow-offset-y-s), var(--border-width)) 0 0
-        var(--wa-color-shadow);
+      ):not(:focus):not([appearance='filled']) {
+      &:where(:not(wa-input):not(wa-select):not(wa-textarea)),
+      &:where(wa-input)::part(input),
+      &:where(wa-select)::part(combobox),
+      &:where(wa-textarea)::part(base) {
+        box-shadow: inset var(--wa-shadow-offset-x-s)
+          max(var(--wa-shadow-offset-y-s), var(--wa-form-control-border-width)) 0 0 var(--wa-color-shadow);
+      }
     }
   }
 }
 
 @layer wa-theme-overrides {
   .wa-theme-awesome {
-    :is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button):not(
-        [appearance='plain'],
-        .wa-plain
-      ) {
-      &[appearance~='outlined'],
-      &.wa-outlined {
-        --border-color: var(--text-color);
+    wa-button,
+    button,
+    input[type='button'],
+    input[type='reset'],
+    input[type='submit'] {
+      &[appearance='accent'],
+      &.wa-accent {
+        &:where(:not(wa-button)),
+        &::part(base) {
+          --wa-color-shadow: currentColor;
+          border-color: currentColor;
+        }
+      }
 
-        .wa-dark &,
-        .wa-invert & {
-          --border-color: var(--wa-color-border-quiet);
-          --text-color-active: var(--wa-color-on-quiet);
+      .wa-dark & {
+        &[appearance='accent'],
+        &.wa-accent {
+          &:where(:not(wa-button)),
+          &::part(base) {
+            --wa-color-shadow: var(--wa-color-border-quiet);
+            border-color: var(--wa-color-border-quiet);
+          }
         }
       }
     }
@@ -496,9 +507,6 @@
       &:is([appearance~='outlined']) {
         border-color: var(--wa-color-border-normal);
       }
-      &:not([appearance~='accent']) {
-        --icon-color: var(--wa-color-border-normal);
-      }
     }
 
     wa-card {
diff --git a/packages/webawesome/src/styles/themes/shoelace.css b/packages/webawesome/src/styles/themes/shoelace.css
index ceb162371..5deaad561 100644
--- a/packages/webawesome/src/styles/themes/shoelace.css
+++ b/packages/webawesome/src/styles/themes/shoelace.css
@@ -362,8 +362,8 @@
 @layer wa-theme-overrides {
   .wa-theme-shoelace {
     wa-avatar {
-      --background-color: var(--wa-color-neutral-fill-loud);
-      --text-color: var(--wa-color-neutral-on-loud);
+      background-color: var(--wa-color-neutral-fill-loud);
+      color: var(--wa-color-neutral-on-loud);
     }
 
     wa-button::part(label),
@@ -387,21 +387,13 @@
     }
 
     wa-callout {
-      --spacing: var(--wa-space-m);
+      padding: var(--wa-space-m);
       font-size: var(--wa-font-size-smaller);
 
       &:is([appearance~='outlined']) {
         border-top-width: var(--wa-border-width-l);
         border-color: var(--wa-color-surface-border);
         border-top-color: var(--border-color, var(--wa-color-border-loud));
-
-        &:not([appearance~='accent']) {
-          --border-color: var(--wa-color-fill-loud);
-        }
-      }
-      &:not([appearance~='accent']) {
-        --icon-color: var(--wa-color-fill-loud);
-        --text-color: var(--wa-color-text-normal);
       }
     }
 
@@ -409,10 +401,6 @@
       background-color: var(--wa-color-surface-raised);
     }
 
-    wa-carousel {
-      --pagination-color-active: var(--wa-color-neutral-fill-loud);
-    }
-
     :is(
         wa-input,
         wa-select,
@@ -455,18 +443,26 @@
     }
 
     wa-switch {
-      --background-color: var(--wa-color-gray-50);
-      --border-color: var(--background-color);
-      --height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2);
-      --thumb-color: var(--wa-color-surface-default);
-      --thumb-size: calc(var(--height) + 4px);
+      --height: calc(1em * var(--wa-form-control-value-line-height) - var(--wa-form-control-border-width) * 2);
+      --thumb-size: calc(var(--height) + 0.25em);
       --width: calc(var(--height) * 2);
 
+      &::part(control) {
+        background-color: var(--wa-color-gray-50);
+        border-color: var(--wa-color-gray-50);
+      }
+
+      &[checked]::part(control) {
+        background-color: var(--wa-form-control-activated-color);
+        border-color: var(--wa-form-control-activated-color);
+      }
+
       &::part(thumb) {
-        border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color);
+        background-color: var(--wa-color-surface-default);
+        border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-gray-50);
       }
       &[checked]::part(thumb) {
-        border-color: var(--background-color-checked);
+        border-color: var(--wa-form-control-activated-color);
       }
     }
 
diff --git a/packages/webawesome/src/styles/utilities.css b/packages/webawesome/src/styles/utilities.css
index 465e49220..8fdea0f71 100644
--- a/packages/webawesome/src/styles/utilities.css
+++ b/packages/webawesome/src/styles/utilities.css
@@ -10,4 +10,3 @@
 
 @import url('utilities/size.css');
 @import url('utilities/variants.css');
-@import url('utilities/appearance.css');
diff --git a/packages/webawesome/src/styles/utilities/appearance.css b/packages/webawesome/src/styles/utilities/appearance.css
deleted file mode 100644
index b63a4362c..000000000
--- a/packages/webawesome/src/styles/utilities/appearance.css
+++ /dev/null
@@ -1,59 +0,0 @@
-@layer wa-utilities {
-  /* :where() has no specificity, ensuring these initial values can be overridden by the intended class */
-  :is(button, input, select, textarea):where(.wa-filled, .wa-plain, .wa-accent, .wa-outlined),
-  :host {
-    --border-color: transparent;
-    --outlined-border-color: initial;
-    --outlined-border-color-hover: initial;
-    --outlined-text-color: initial;
-    --outlined-text-color-hover: initial;
-  }
-
-  :is(button, input, select, textarea).wa-outlined,
-  :host([appearance~='outlined']) {
-    --background-color: var(--outlined-background-color, transparent);
-    --background-color-hover: var(--outlined-background-color-hover, var(--wa-color-fill-quiet));
-    --background-color-active: var(
-      --outlined-background-color-active,
-      color-mix(in oklab, var(--background-color-hover), transparent 20%)
-    );
-
-    --border-color: var(--outlined-border-color, var(--wa-color-border-loud));
-    --border-color-hover: var(--outlined-border-color-hover, var(--wa-color-border-loud));
-
-    --text-color: var(--outlined-text-color, var(--wa-color-on-quiet));
-    --text-color-hover: var(--outlined-text-color-hover, var(--text-color));
-  }
-
-  :is(button, input[type='button'], input[type='reset'], input[type='submit']).wa-accent,
-  :host([appearance~='accent']) {
-    --background-color: var(--wa-color-fill-loud);
-    --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover));
-    --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active));
-
-    --outlined-border-color: color-mix(in oklab, var(--wa-color-fill-loud), oklab(0% none none / none) 20%);
-
-    --text-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
-  }
-
-  :is(button, input, select, textarea).wa-filled,
-  :host([appearance~='filled']) {
-    --background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
-    --background-color-hover: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
-    --background-color-active: color-mix(in oklab, var(--background-color), transparent 20%);
-
-    --outlined-border-color: var(--wa-color-border-normal);
-
-    --text-color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
-    --text-color-hover: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
-  }
-
-  :is(button, input[type='button'], input[type='reset'], input[type='submit']).wa-plain,
-  :host([appearance~='plain']) {
-    --background-color: transparent;
-    --background-color-hover: var(--wa-color-fill-quiet);
-    --background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
-
-    --text-color: var(--wa-color-on-quiet);
-  }
-}