Merge branch 'next' into themer-rework

* remove `:root` selector and imports from themes

* re-add `base.css` to free

packages/webawesome/docs/.eleventy.js

@@ -19,25 +19,24 @@ import { replaceTextPlugin } from './_utils/replace-text.js';
 import { searchPlugin } from './_utils/search.js';
 const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
 const isDev = process.argv.includes('--develop');
+const packageData = JSON.parse(await readFile(path.join(__dirname, '..', 'package.json'), 'utf-8'));
+const docsDir = path.join(process.env.BASE_DIR || '.', 'docs');
 const passThroughExtensions = ['js', 'css', 'png', 'svg', 'jpg', 'mp4'];
+const allComponents = getComponents();
+
+/**
+ * If you plan to add or remove any of these extensions, make sure to let either Konnor or Cory know as these
+ * passthrough extensions will also need to be updated in the Web Awesome App.
+ */
+const passThrough = [...passThroughExtensions.map(ext => path.join(docsDir, '**/*.' + ext))];
+
+/**
+ * This is the guard we use for now to make sure our final built files don't need a 2nd pass by the server. This keeps
+ * us able to still deploy the bare HTML files on Vercel until the app is ready.
+ */
+const serverBuild = process.env.WEBAWESOME_SERVER === 'true';
 
 export default async function (eleventyConfig) {
-  const packageData = JSON.parse(await readFile(path.join(__dirname, '..', 'package.json'), 'utf-8'));
-  const docsDir = path.join(process.env.BASE_DIR || '.', 'docs');
-  const allComponents = getComponents();
-
-  /**
-   * If you plan to add or remove any of these extensions, make sure to let either Konnor or Cory know as these
-   * passthrough extensions will also need to be updated in the Web Awesome App.
-   */
-  const passThrough = [...passThroughExtensions.map(ext => path.join(docsDir, '**/*.' + ext))];
-
-  /**
-   * This is the guard we use for now to make sure our final built files don't need a 2nd pass by the server. This keeps
-   * us able to still deploy the bare HTML files on Vercel until the app is ready.
-   */
-  const serverBuild = process.env.WEBAWESOME_SERVER === 'true';
-
   //
   // Set all global template data here
   //

packages/webawesome/docs/_includes/base.njk

@@ -58,7 +58,7 @@
             <span class="wa-mobile-only">{% include "logo-simple.njk" %}</span>
           </a>
           <small id="version-number" class="wa-desktop-only">{{ package.version }}</small>
-          <wa-badge variant="brand" appearance="filled" class="wa-desktop-only">Beta</wa-badge>
+          <wa-badge variant="warning" appearance="filled" class="wa-desktop-only">Alpha</wa-badge>
         </div>
 
         <div id="docs-toolbar" class="wa-cluster wa-gap-xs">

packages/webawesome/docs/_includes/sidebar.njk

@@ -11,7 +11,7 @@
 {# Resources #}
 <h2>Resources</h2>
 <ul>
-  <li><a href="https://github.com/shoelace-style/webawesome/discussions" target="_blank">Help &amp; Support</a></li>
+  <li><a href="https://github.com/shoelace-style/webawesome-alpha/discussions" target="_blank">Help &amp; Support</a></li>
   <li><a href="/docs/resources/community">Community</a></li>
   <li><a href="/docs/resources/accessibility">Accessibility</a></li>
   <li><a href="/docs/resources/browser-support">Browser Support</a></li>

packages/webawesome/docs/_includes/visual-tests/appearance.njk

@@ -8,6 +8,27 @@
     <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>

packages/webawesome/docs/_includes/visual-tests/native.njk

@@ -17,6 +17,27 @@
         <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>
@@ -444,8 +465,8 @@
         </wa-select>
       </td>
       <td>
-        <label>Select (filled) 
-          <select class="wa-filled" value="1">
+        <label class="wa-filled">Select (filled) 
+          <select value="1">
             <option value="1">Option</option>
           </select>
         </label>

packages/webawesome/docs/_layouts/component.njk

@@ -279,7 +279,7 @@
     </wa-tab-panel>
     <wa-tab-panel name="react">
       Coming soon!
-      {# NOTE - disabled for alpha/beta
+      {# NOTE - disabled for alpha
       <p>
         To manually import this component from React, use the following code.
       </p>
@@ -292,11 +292,11 @@
 
   <div class="component-help">
     <strong>Need a hand?</strong>
-    <wa-button size="small" appearance="filled" variant="neutral" href="https://github.com/shoelace-style/webawesome/issues" target="_blank">
+    <wa-button size="small" appearance="filled" variant="neutral" href="https://github.com/shoelace-style/webawesome-alpha/issues" target="_blank">
       <wa-icon slot="prefix" name="bug"></wa-icon>
       Report a bug
     </wa-button>
-    <wa-button size="small" appearance="filled" variant="neutral" href="https://github.com/shoelace-style/webawesome/discussions" target="_blank">
+    <wa-button size="small" appearance="filled" variant="neutral" href="https://github.com/shoelace-style/webawesome-alpha/discussions" target="_blank">
       <wa-icon slot="prefix" name="message-question"></wa-icon>
       Ask for help
     </wa-button>

packages/webawesome/docs/_utils/manifest.js

@@ -1,14 +1,14 @@
 import { readFileSync } from 'fs';
-import { dirname, join, resolve } from 'path';
+import { dirname, resolve } from 'path';
 import { fileURLToPath } from 'url';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const manifest = JSON.parse(readFileSync(resolve(__dirname, '../../dist/custom-elements.json'), 'utf-8'));
 /**
  * @returns Fetches components from custom-elements.json and returns them in more sane format.
  */
 export function getComponents() {
-  const distDir = process.env.UNBUNDLED_DIST_DIRECTORY || resolve(__dirname, '../../dist');
-  const manifest = JSON.parse(readFileSync(join(distDir, 'custom-elements.json'), 'utf-8'));
   const components = [];
 
   manifest.modules?.forEach(module => {

packages/webawesome/docs/docs/components/badge.md

@@ -29,32 +29,37 @@ 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">Filled + Outlined</wa-badge>
+  <wa-badge appearance="filled outlined" variant="neutral">F+O</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">Filled + Outlined</wa-badge>
+  <wa-badge appearance="filled outlined" variant="brand">F+O</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">Filled + Outlined</wa-badge>
+  <wa-badge appearance="filled outlined" variant="success">F+O</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">Filled + Outlined</wa-badge>
+  <wa-badge appearance="filled outlined" variant="warning">F+O</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">Filled + Outlined</wa-badge>
+  <wa-badge appearance="filled outlined" variant="danger">F+O</wa-badge>
   <wa-badge appearance="filled" variant="danger">Filled</wa-badge>
   <wa-badge appearance="outlined" variant="danger">Outlined</wa-badge>
 </div>

packages/webawesome/docs/docs/components/button.md

@@ -30,38 +30,43 @@ 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="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="filled outlined" variant="neutral">F + O</wa-button>
+    <wa-button appearance="filled" variant="neutral">Filled</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="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="filled outlined" variant="brand">F + O</wa-button>
+    <wa-button appearance="filled" variant="brand">Filled</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="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="filled outlined" variant="success">F + O</wa-button>
+    <wa-button appearance="filled" variant="success">Filled</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="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="filled outlined" variant="warning">F + O</wa-button>
+    <wa-button appearance="filled" variant="warning">Filled</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="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="filled outlined" variant="danger">F + O</wa-button>
+    <wa-button appearance="filled" variant="danger">Filled</wa-button>
     <wa-button appearance="plain" variant="danger">Plain</wa-button>
   </div>
 </div>
@@ -209,7 +214,6 @@ 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

packages/webawesome/docs/docs/components/callout.md

@@ -63,9 +63,16 @@ 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
+  This <strong>accent</strong> callout draws attention without an outline
 </wa-callout>
 
 <br />
@@ -106,16 +113,10 @@ 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!
@@ -132,4 +133,7 @@ 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.
+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

packages/webawesome/docs/docs/components/card.md

@@ -141,16 +141,18 @@ 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."
     />
-    Outlined (default)
+    <div slot="header">Outlined (default)</div>
+    Card content.
   </wa-card>
-  {% for appearance in ['outlined filled', 'plain', 'filled', 'accent'] -%}
+  {% for appearance in ['outlined filled', 'outlined accent', '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."
     />
-    {{ appearance | capitalize }}
+    <div slot="header">{{ appearance | capitalize }}</div>
+    Card content.
   </wa-card>
   {%- endfor %}
 </div>

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 appropriate contrast!"></wa-color-picker>
+<wa-color-picker label="Select a color" hint="Choose a color with appropate contrast!"></wa-color-picker>
 ```

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,
-  .custom-styles::part(success-icon),
-  .custom-styles::part(error-icon) {
+  .custom-styles {
+    --success-color: white;
+    --error-color: white;
     color: white;
   }
 

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)::part(indicator) {
-    border-radius: 0;
+  .skeleton-avatars wa-skeleton:nth-child(1) {
+    --border-radius: 0;
   }
 
-  .skeleton-avatars wa-skeleton:nth-child(2)::part(indicator) {
-    border-radius: var(--wa-border-radius-m);
+  .skeleton-avatars wa-skeleton:nth-child(2) {
+    --border-radius: var(--wa-border-radius-m);
   }
 </style>
 ```
 
 ### 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.
+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.
 
 ```html {.example}
 <div class="skeleton-shapes">
@@ -166,20 +166,20 @@ Set a `border-radius` on the `indicator` part to make circles, squares, and rect
   }
 
   .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 @@ Set a `border-radius` on the `indicator` part to make circles, squares, and rect
   }
 
   .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%);
   }
 

packages/webawesome/docs/docs/index.md

@@ -4,18 +4,18 @@ description: Choose the installation method that works best for you.
 layout: page-outline
 ---
 
-Welcome to your exclusive early access to Web Awesome Beta! 👋
+Welcome to the Web Awesome alpha release for early backers! 👋
 
-At this time, we're offering access to Web Awesome Free and Pro through a temporary CDN while we prepare for a public release. This beta is tried, true, and stable, but please be aware that things may change here and there before our production release to the public.
+==This is a very early alpha release!== For this preview, we're offering access to Web Awesome through a temporary CDN. Please be aware: Things can change. Things can break. You probably shouldn't be using this software in production yet! But fear not, we're working hard to polish up everything you see here _plus_ all the great stuff we have planned for Web Awesome Pro!
 
 Thank you so much for backing us!
 
-- [Report a bug](https://github.com/shoelace-style/webawesome/issues)
-- [Get help / ask a question](https://github.com/shoelace-style/webawesome/discussions)
+- [Report a bug](https://github.com/shoelace-style/webawesome-alpha/issues)
+- [Get help / ask a question](https://github.com/shoelace-style/webawesome-alpha/discussions)
 - [See what's new since the last version](/docs/resources/changelog)
 
 :::warning
-As a Web Awesome backer, this beta release is _just for you_. Please refrain from sharing it for the time being!
+As a Web Awesome backer, this early alpha release is _just for you_. Please refrain from sharing it for the time being!
 :::
 
 ---
@@ -62,7 +62,7 @@ The autoloader is the easiest way to use Web Awesome, but different projects (or
 
 ### Installing via npm
 
-An npm package isn't yet available, but we'll have one soon! For now, please enjoy [Web Awesome from the CDN](#quick-start-autoloading-via-cdn).
+An npm package isn't available in the early backer alpha release, but we'll have one soon! For now, please enjoy [Web Awesome from the CDN](#quick-start-autoloading-via-cdn).
 
 ### Cherry Picking
 

packages/webawesome/docs/docs/resources/changelog.md

@@ -4,9 +4,13 @@ description: Changes to each version of the project are documented here.
 layout: page-outline
 ---
 
-Web Awesome follows [Semantic Versioning](https://semver.org/). Breaking changes in components with the <wa-badge variant="brand">Stable</wa-badge> badge will not be accepted until the next major version. As such, all contributions must consider the project's roadmap and take this into consideration. Features that are deemed no longer necessary will be deprecated but not removed.
+Web Awesome follows [Semantic Versioning](https://semver.org/). Breaking changes in components with the <wa-badge variant="brand" pill>Stable</wa-badge> badge will not be accepted until the next major version. As such, all contributions must consider the project's roadmap and take this into consideration. Features that are deemed no longer necessary will be deprecated but not removed.
 
-Components with the <wa-badge variant="warning">Experimental</wa-badge> badge should not be used in production. They are made available as release candidates for development and testing purposes. As such, changes to experimental components will not be subject to semantic versioning.
+Components with the <wa-badge variant="warning" pill>Experimental</wa-badge> badge should not be used in production. They are made available as release candidates for development and testing purposes. As such, changes to experimental components will not be subject to semantic versioning.
+
+:::warning
+During the alpha period, things might break! We take breaking changes very seriously, but sometimes they're necessary to make the final product that much better. We appreciate your patience!
+:::
 
 ## 3.0.0-beta.1
 

packages/webawesome/docs/docs/resources/contributing.md

@@ -25,10 +25,10 @@ Please take a moment to review these guidelines to make the contribution process
 
 ## Using the Issue Tracker
 
-The [issue tracker](https://github.com/shoelace-style/webawesome/issues) is for bug reports, feature requests, and pull requests.
+The [issue tracker](https://github.com/shoelace-style/webawesome-alpha/issues) is for bug reports, feature requests, and pull requests.
 
-- Please **do not** use the issue tracker for personal support requests. Use [the discussion forum](https://github.com/shoelace-style/webawesome/discussions/categories/help-support) instead.
-- Please **do not** use the issue tracker for feature requests. Use [the discussion forum](https://github.com/shoelace-style/webawesome/discussions/categories/ideas) instead.
+- Please **do not** use the issue tracker for personal support requests. Use [the discussion forum](https://github.com/shoelace-style/webawesome-alpha/discussions/categories/help-support) instead.
+- Please **do not** use the issue tracker for feature requests. Use [the discussion forum](https://github.com/shoelace-style/webawesome-alpha/discussions/categories/ideas) instead.
 - Please **do not** derail, hijack, or troll issues. Keep the discussion on topic and be respectful of others.
 - Please **do not** post comments with "+1" or "👍". Use [reactions](https://github.blog/2016-03-10-add-reactions-to-pull-requests-issues-and-comments/) instead.
 - Please **do** use the issue tracker for bug reports and pull requests.
@@ -37,7 +37,7 @@ Issues that do not follow these guidelines are subject to closure. There simply
 
 ### Feature Requests
 
-Feature requests can be added using [the discussion forum](https://github.com/shoelace-style/webawesome/discussions/categories/ideas).
+Feature requests can be added using [the discussion forum](https://github.com/shoelace-style/webawesome-alpha/discussions/categories/ideas).
 
 - Please **do** search for an existing request before suggesting a new feature.
 - Please **do** use the voting buttons to vote for a feature.
@@ -164,7 +164,7 @@ This section can be a lot to digest in one sitting, so don't feel like you need
 
 Web Awesome is built with accessibility in mind. Creating generic components that are fully accessible to users with varying capabilities across a multitude of circumstances is a daunting challenge. Oftentimes, the solution to an a11y problem is not written in black and white and, therefore, we may not get it right the first time around. There are, however, guidelines we can follow in our effort to make Web Awesome an accessible foundation from which applications and websites can be built.
 
-We take this commitment seriously, so please ensure your contributions have this goal in mind. If you need help with anything a11y-related, please [reach out to the community](/resources/community) for assistance. If you discover an accessibility concern within the library, please file a bug on the [issue tracker](https://github.com/shoelace-style/webawesome/issues).
+We take this commitment seriously, so please ensure your contributions have this goal in mind. If you need help with anything a11y-related, please [reach out to the community](/resources/community) for assistance. If you discover an accessibility concern within the library, please file a bug on the [issue tracker](https://github.com/shoelace-style/webawesome-alpha/issues).
 
 It's important to remember that, although accessibility starts with foundational components, it doesn't end with them. It everyone's responsibility to encourage best practices and ensure we're providing an optimal experience for all of our users.
 

packages/webawesome/docs/index.md

@@ -84,14 +84,12 @@ layout: page
       flex: 1 1 67%;
     }
     & wa-button {
-      &::part(base) {
-        border-color: black;
-        border-width: 0.125rem;
-        box-shadow: 0 0.25rem 0 0 black;
-        flex: 1 1 auto;
-        height: 2.5rem;
-      }
-      &:active:not([disabled])::part(base) {
+      --border-color: black;
+      --border-width: 0.125rem;
+      box-shadow: 0 0.25rem 0 0 var(--border-color);
+      flex: 1 1 auto;
+      height: 2.5rem;
+      &:active:not([disabled]) {
         box-shadow: 0 0 0 0 transparent;
         transform: translateY(0.25rem);
       }
@@ -189,13 +187,13 @@ layout: page
         flex: 1 1 auto;
         gap: 0.5rem;
       }
-      & wa-button::part(base) {
+      & wa-button {
         height: 1.5rem;
         font-size: 0.75rem;
       }
     }
   }
-  .beta-notice {
+  .alpha-notice {
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
@@ -249,8 +247,8 @@ layout: page
     height: 100%;
 
     & .icon-heading wa-icon {
-      background-color: var(--wa-color-brand-fill-normal);
-      color: var(--wa-color-brand-on-normal);
+      background-color: var(--wa-color-warning-fill-normal);
+      color: var(--wa-color-warning-on-normal);
     }
 
     & p {
@@ -276,14 +274,14 @@ layout: page
 </div>
 
 <div class="home-wrapper">
-  <div class="beta-notice">
+  <div class="alpha-notice">
     <div>
-      <wa-callout variant="brand">
+      <wa-callout variant="warning">
         <div class="icon-heading">
-          <wa-icon name="sparkles" variant="regular" fixed-width></wa-icon>
-          <h3>Rise and shine, backers!</h3>
+          <wa-icon name="triangle-exclamation" variant="regular" fixed-width></wa-icon>
+          <h3>You're in alpha territory</h3>
         </div>
-        <p>Dig in to your exclusive Web Awesome Beta access. This beta is battle-tested and built to last, but if you see something, say something. Please <a href="https://github.com/shoelace-style/webawesome/issues">report bugs</a> or <a href="https://github.com/shoelace-style/webawesome/discussions">ask for help</a>!</p>
+        <p>What you see may not be perfect (we're only humans!) and is subject to change. We encourage you to <a href="https://github.com/shoelace-style/webawesome-alpha/issues">report bugs</a> or <a href="https://github.com/shoelace-style/webawesome-alpha/discussions">ask for help</a>!</p>
       </wa-callout>
     </div>
     <div>
@@ -354,7 +352,7 @@ layout: page
           <wa-icon name="hashtag" fixed-width></wa-icon>
           <h3>Follow us</h3>
         </div>
-        <p>Keep up with Web Awesome through updates, announcements, and polls. Find us on <a href="https://bsky.app/profile/webawesome.com">Bluesky</a>, <a href="https://x.com/webawesomer">Twitter (X)</a>, and <a href="https://www.threads.com/@web.awesome">Threads</a>.</p>
+        <p>Keep up with Web Awesome through updates, announcements, and polls. Find us on <a href="https://x.com/webawesomer">Twitter (X)</a> and <a href="https://www.instagram.com/web.awesome">Instagram</a>.</p>
       </div>
     </div>
   </div>

packages/webawesome/src/components/avatar/avatar.css

@@ -1,4 +1,6 @@
 :host {
+  --background-color: var(--wa-color-neutral-fill-normal);
+  --text-color: var(--wa-color-neutral-on-normal);
   --size: 3rem;
 
   display: inline-flex;
@@ -7,14 +9,14 @@
   position: relative;
   width: var(--size);
   height: var(--size);
-  color: var(--wa-color-neutral-on-normal);
+  background-color: var(--background-color);
   font: inherit;
   font-size: calc(var(--size) * 0.4);
-  vertical-align: middle;
-  background-color: var(--wa-color-neutral-fill-normal);
-  border-radius: var(--wa-border-radius-circle);
+  color: var(--text-color);
   user-select: none;
   -webkit-user-select: none;
+  vertical-align: middle;
+  border-radius: var(--wa-border-radius-circle);
 }
 
 :host([shape='square']) {

packages/webawesome/src/components/avatar/avatar.ts

@@ -23,6 +23,8 @@ 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')

packages/webawesome/src/components/badge/badge.css

@@ -2,51 +2,22 @@
   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;
-  white-space: nowrap;
-  background-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
-  border-color: transparent;
+  background-color: var(--background-color, var(--wa-color-fill-loud));
+  border-color: var(--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);

packages/webawesome/src/components/badge/badge.ts

@@ -1,6 +1,7 @@
 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';
 
@@ -14,10 +15,13 @@ 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, styles];
+  static css = [variantStyles, appearanceStyles, 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';

packages/webawesome/src/components/button/button.css

@@ -1,12 +1,30 @@
 @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 {
-  display: inline-flex;
+  border-radius: var(--wa-form-control-border-radius);
+  border-style: var(--wa-border-style);
+  border-width: var(--border-width);
+  box-shadow: var(--box-shadow);
   align-items: center;
   justify-content: center;
   text-decoration: none;
@@ -26,111 +44,25 @@
   height: var(--wa-form-control-height);
   width: 100%;
 
-  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);
+  display: inline-flex;
+  background-color: var(--background-color);
+  border-color: var(--border-color, var(--background-color));
+  color: 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)
-    );
+/* 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));
   }
 }
 
-: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)
-    );
-  }
+.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));
 }
 
 /* Focus states */
@@ -260,12 +192,12 @@ button ::slotted(wa-badge) {
 */
 
 slot[name='start']::slotted(*) {
-  margin-inline-end: 0.75em;
+  margin-inline-end: var(--wa-form-control-padding-inline);
 }
 
 slot[name='end']::slotted(*),
 .button:not(.visually-hidden-label) [part~='caret'] {
-  margin-inline-start: 0.75em;
+  margin-inline-start: var(--wa-form-control-padding-inline);
 }
 
 /*

packages/webawesome/src/components/button/button.ts

@@ -7,6 +7,7 @@ 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';
@@ -37,10 +38,22 @@ 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];
+  static css = [styles, variantStyles, sizeStyles, appearanceStyles];
 
   static get validators() {
     return [...super.validators, MirrorValidator()];

packages/webawesome/src/components/callout/callout.css

@@ -1,56 +1,31 @@
 :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(--wa-color-fill-quiet, var(--wa-color-brand-fill-quiet));
-  border-color: var(--wa-color-border-quiet, var(--wa-color-brand-border-quiet));
+  background-color: var(--background-color, var(--wa-color-fill-quiet));
+  border-color: var(--border-color, transparent);
   border-style: var(--wa-panel-border-style);
   border-width: var(--wa-panel-border-width);
   color: var(--wa-color-text-normal);
-  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));
-  }
+  gap: var(--spacing);
+  padding: var(--spacing);
 }
 
 :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;
-
-  [part~='icon'] {
-    color: currentColor;
-  }
+  color: var(--text-color, var(--wa-color-text-normal));
 }
 
 [part~='icon'] {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
-  color: var(--wa-color-on-quiet);
-  font-size: 1.25em;
-}
-
-::slotted([slot='icon']) {
-  margin-inline-end: var(--wa-form-control-padding-inline);
+  color: var(--icon-color);
+  font-size: var(--icon-size);
 }
 
 [part~='message'] {

packages/webawesome/src/components/callout/callout.ts

@@ -1,6 +1,7 @@
 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';
@@ -16,10 +17,14 @@ 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 = [styles, variantStyles, sizeStyles];
+  static css = [variantStyles, appearanceStyles, sizeStyles, styles];
 
   /** 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';

packages/webawesome/src/components/card/card.css

@@ -1,45 +1,34 @@
 :host {
   --spacing: var(--wa-space-l);
-
-  /* Internal calculated properties */
-  --inner-border-radius: calc(var(--wa-panel-border-radius) - var(--wa-panel-border-width));
+  --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);
 
   display: flex;
   flex-direction: column;
-  background-color: var(--wa-color-surface-default);
-  border-color: var(--wa-color-surface-border);
-  border-radius: var(--wa-panel-border-radius);
+  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);
   border-style: var(--wa-panel-border-style);
   box-shadow: var(--wa-shadow-s);
-  border-width: var(--wa-panel-border-width);
+  border-width: var(--border-width);
   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(:is([appearance~='accent'])) {
+  color: var(--text-color, var(--wa-color-text-normal));
 }
 
 :host([appearance~='filled']) {
-  background-color: var(--wa-color-neutral-fill-quiet);
-  border-color: transparent;
-
-  &:host([appearance~='outlined']) {
-    border-color: var(--wa-color-neutral-border-quiet);
-  }
+  --inner-border-color: oklab(from var(--outlined-border-color) l a b / 65%);
 }
 
-:host([appearance~='accent']) {
-  color: var(--wa-color-neutral-on-loud);
-  background-color: var(--wa-color-neutral-fill-loud);
-  border-color: transparent;
+:host([appearance='plain']) {
+  --inner-border-color: transparent;
+  box-shadow: none;
 }
 
 /* Take care of top and bottom radii */
@@ -58,12 +47,12 @@
 
 .media {
   display: flex;
-  overflow: hidden;
 
   &::slotted(*) {
     display: block;
     width: 100%;
-    border-radius: 0;
+    border-start-start-radius: inherit !important;
+    border-start-end-radius: inherit !important;
   }
 }
 
@@ -79,8 +68,8 @@
 .header {
   display: block;
   border-block-end-style: inherit;
-  border-block-end-color: var(--wa-color-surface-border);
-  border-block-end-width: var(--wa-panel-border-width);
+  border-block-end-color: var(--inner-border-color);
+  border-block-end-width: var(--border-width);
   padding: calc(var(--spacing) / 2) var(--spacing);
 }
 
@@ -92,8 +81,8 @@
 .footer {
   display: block;
   border-block-start-style: inherit;
-  border-block-start-color: var(--wa-color-surface-border);
-  border-block-start-width: var(--wa-panel-border-width);
+  border-block-start-color: var(--inner-border-color);
+  border-block-start-width: var(--border-width);
   padding: var(--spacing);
 }
 

packages/webawesome/src/components/card/card.ts

@@ -2,6 +2,7 @@ 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';
 
@@ -21,11 +22,15 @@ 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, styles];
+  static css = [sizeStyles, appearanceStyles, styles];
 
   private readonly hasSlotController = new HasSlotController(this, 'footer', 'header', 'media');
 

packages/webawesome/src/components/carousel/carousel.css

@@ -1,7 +1,10 @@
 :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); /* fallback value is necessary */
+  --slide-gap: var(--wa-space-m, 1rem);
 
   display: flex;
 }
@@ -100,7 +103,7 @@
   border: none;
   border-radius: var(--wa-border-radius-m);
   font-size: inherit;
-  color: var(--wa-color-text-quiet);
+  color: var(--navigation-color);
   padding: var(--wa-space-xs);
   cursor: pointer;
   transition: var(--wa-transition-normal) color;
@@ -134,14 +137,14 @@
   border-radius: var(--wa-border-radius-circle);
   width: var(--wa-space-s);
   height: var(--wa-space-s);
-  background-color: var(--wa-color-neutral-fill-normal);
+  background-color: var(--pagination-color);
   padding: 0;
   margin: 0;
   transition: transform var(--wa-transition-slow);
 }
 
 .pagination-item-active {
-  background-color: var(--wa-form-control-activated-color);
+  background-color: var(--pagination-color-active);
   transform: scale(1.25);
 }
 

packages/webawesome/src/components/carousel/carousel.ts

@@ -43,9 +43,12 @@ 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=var(--wa-space-m)] - The space between each slide.
+ * @cssproperty --slide-gap - The space between each slide.
  */
 @customElement('wa-carousel')
 export default class WaCarousel extends WebAwesomeElement {

packages/webawesome/src/components/checkbox/checkbox.css

@@ -1,9 +1,21 @@
 :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);
 
-  display: inline-flex;
   color: var(--wa-form-control-value-color);
+  display: inline-flex;
   font-family: inherit;
   font-weight: var(--wa-form-control-value-font-weight);
   line-height: var(--wa-form-control-value-line-height);
@@ -11,22 +23,20 @@
   -webkit-user-select: none;
 }
 
-[part~='control'] {
-  display: inline-flex;
+:host [part~='control'] {
   flex: 0 0 auto;
   position: relative;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  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);
+  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);
   transition:
     background var(--wa-transition-normal),
     border-color var(--wa-transition-fast),
@@ -37,24 +47,24 @@
   margin-inline-end: 0.5em;
 }
 
-[part~='base'] {
+:host [part~='base'] {
+  position: relative;
   display: flex;
   align-items: flex-start;
-  position: relative;
-  color: currentColor;
+  color: var(--wa-form-control-value-color);
   vertical-align: middle;
   cursor: pointer;
 }
 
 /* Checked */
-[part~='control']:has(:checked, :indeterminate) {
+[part~='base'] [part~="control"]:has(:checked, :indeterminate) /* scoping this rule to :host breaks in Firefox */ {
   color: var(--checked-icon-color);
-  border-color: var(--wa-form-control-activated-color);
-  background-color: var(--wa-form-control-activated-color);
+  border-color: var(--border-color-checked);
+  background-color: var(--background-color-checked);
 }
 
 /* Focus */
-[part~='control']:has(> input:focus-visible:not(:disabled)) {
+[part~='base'] [part~="control"]:has(> input:focus-visible:not(:disabled)) /* scoping this rule to :host breaks in Firefox */ {
   outline: var(--wa-focus-ring);
   outline-offset: var(--wa-focus-ring-offset);
 }

packages/webawesome/src/components/checkbox/checkbox.ts

@@ -37,8 +37,16 @@ import styles from './checkbox.css';
  * @csspart label - The container that wraps the checkbox's label.
  * @csspart hint - The hint's wrapper.
  *
- * @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.
+ * @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.
  *
  * @cssstate checked - Applied when the checkbox is checked.
  * @cssstate disabled - Applied when the checkbox is disabled.

packages/webawesome/src/components/color-picker/color-picker.css

@@ -1,21 +1,31 @@
 :host {
-  --grid-width: 17em;
-  --grid-height: 12em;
-  --grid-handle-size: 1.25em;
-  --slider-height: 1em;
-  --slider-handle-size: calc(var(--slider-height) + 0.25em);
+  --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);
 }
 
 .color-picker {
-  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);
+  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);
   color: var(--color);
   font: inherit;
-  font-size: inherit;
   user-select: none;
   width: var(--grid-width);
   -webkit-user-select: none;
@@ -27,8 +37,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(--wa-border-radius-m) - var(--wa-border-width-s));
-  border-top-right-radius: calc(var(--wa-border-radius-m) - var(--wa-border-width-s));
+  border-top-left-radius: calc(var(--border-radius) - var(--border-width));
+  border-top-right-radius: calc(var(--border-radius) - var(--border-width));
   cursor: crosshair;
   forced-color-adjust: none;
 }
@@ -55,7 +65,7 @@
 }
 
 .controls {
-  padding: 0.75em;
+  padding: var(--spacing);
   display: flex;
   align-items: center;
 }
@@ -73,7 +83,7 @@
 }
 
 .slider:not(:last-of-type) {
-  margin-bottom: 0.75em;
+  margin-bottom: var(--wa-space-s);
 }
 
 .slider-handle {
@@ -119,13 +129,12 @@
   align-items: center;
   justify-content: center;
   position: relative;
-  width: 3em;
-  height: 3em;
+  width: var(--preview-size);
+  height: var(--preview-size);
   border: none;
-  border-radius: var(--wa-border-radius-circle);
+  border-radius: var(--preview-border-radius);
   background: none;
-  font-size: inherit;
-  margin-inline-start: 0.75em;
+  margin-inline-start: var(--spacing);
   cursor: copy;
   forced-color-adjust: none;
 }
@@ -177,7 +186,7 @@
 .user-input {
   display: flex;
   align-items: center;
-  padding: 0 0.75em 0.75em 0.75em;
+  padding: 0 var(--spacing) var(--spacing) var(--spacing);
 }
 
 .user-input wa-input {
@@ -199,7 +208,7 @@
 }
 
 .user-input wa-button-group {
-  margin-inline-start: 0.75em;
+  margin-inline-start: var(--spacing);
 
   &::part(base) {
     flex-wrap: nowrap;
@@ -207,18 +216,18 @@
 }
 
 .user-input wa-button:first-of-type {
-  min-width: 3em;
-  max-width: 3em;
+  min-width: 3rem;
+  max-width: 3rem;
 }
 
 .swatches {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(1.5em, 100%), 1fr));
-  grid-gap: 0.5em;
+  grid-template-columns: repeat(auto-fit, minmax(min(var(--swatch-size), 100%), 1fr));
+  grid-gap: var(--wa-space-xs);
   justify-items: center;
   border-block-start: var(--wa-form-control-border-style) var(--wa-form-control-border-width)
     var(--wa-color-surface-border);
-  padding: 0.5em;
+  padding: var(--spacing);
   forced-color-adjust: none;
 }
 
@@ -226,7 +235,7 @@
   position: relative;
   aspect-ratio: 1 / 1;
   width: 100%;
-  border-radius: var(--wa-border-radius-s);
+  border-radius: var(--swatch-border-radius);
 }
 
 .swatch .swatch-color {
@@ -284,9 +293,9 @@
 
 .color-dropdown::part(panel) {
   max-height: none;
-  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);
+  background-color: var(--background-color);
+  border: var(--border-style) var(--border-width) var(--border-color);
+  border-radius: var(--border-radius);
   overflow: visible;
 }
 
@@ -300,7 +309,7 @@
   forced-color-adjust: none;
   width: var(--wa-form-control-height);
   height: var(--wa-form-control-height);
-  border-radius: var(--wa-form-control-border-radius);
+  border-radius: var(--trigger-border-radius);
 }
 
 .trigger:before {
@@ -313,8 +322,8 @@
   border-radius: inherit;
   background-color: currentColor;
   box-shadow:
-    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);
+    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);
 }
 
 .trigger-empty:before {

packages/webawesome/src/components/color-picker/color-picker.ts

@@ -85,11 +85,22 @@ 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 {

packages/webawesome/src/components/comparison/comparison.css

@@ -1,5 +1,7 @@
 :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;
@@ -49,7 +51,7 @@
   top: 0;
   width: var(--divider-width);
   height: 100%;
-  background-color: var(--wa-color-surface-default);
+  background-color: var(--divider-color);
   translate: calc(var(--divider-width) / -2);
   cursor: ew-resize;
 }
@@ -62,10 +64,10 @@
   top: calc(50% - (var(--handle-size) / 2));
   width: var(--handle-size);
   height: var(--handle-size);
-  background-color: var(--wa-color-surface-default);
+  background-color: var(--divider-color);
   border-radius: var(--wa-border-radius-circle);
   font-size: calc(var(--handle-size) * 0.4);
-  color: var(--wa-color-neutral-on-quiet);
+  color: var(--handle-color);
   cursor: inherit;
   z-index: 10;
 }

packages/webawesome/src/components/comparison/comparison.ts

@@ -29,7 +29,9 @@ 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.

packages/webawesome/src/components/copy-button/copy-button.css

@@ -1,15 +1,20 @@
 :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-neutral-on-quiet);
+  color: var(--wa-color-text-quiet);
 }
 
 .button {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
-  background-color: transparent;
+  background-color: var(--background-color);
   border: none;
-  border-radius: var(--wa-form-control-border-radius);
+  border-radius: var(--wa-border-radius-m);
   color: inherit;
   font-size: inherit;
   padding: 0.5em;
@@ -19,13 +24,13 @@
 
 @media (hover: hover) {
   .button:hover:not([disabled]) {
-    background-color: var(--wa-color-neutral-fill-quiet);
+    background-color: var(--background-color-hover);
     color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
   }
 }
 
 .button:focus-visible:not([disabled]) {
-  background-color: var(--wa-color-neutral-fill-quiet);
+  background-color: var(--background-color-hover);
   color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover));
 }
 
@@ -34,11 +39,11 @@
 }
 
 slot[name='success-icon'] {
-  color: var(--wa-color-success-on-quiet);
+  color: var(--success-color);
 }
 
 slot[name='error-icon'] {
-  color: var(--wa-color-danger-on-quiet);
+  color: var(--error-color);
 }
 
 .button:focus-visible {

packages/webawesome/src/components/copy-button/copy-button.ts

@@ -36,6 +36,11 @@ 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 {

packages/webawesome/src/components/details/details.css

@@ -1,11 +1,17 @@
 :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;
@@ -32,10 +38,10 @@
 details {
   display: block;
   overflow-anchor: none;
-  border: var(--wa-panel-border-width) var(--wa-color-surface-border) var(--wa-panel-border-style);
-  background-color: var(--wa-color-surface-default);
+  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-radius: var(--wa-panel-border-radius);
-  color: var(--wa-color-text-normal);
+  color: var(--text-color, inherit);
 
   /* Print styles */
   @media print {
@@ -48,36 +54,6 @@ 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;
@@ -111,7 +87,7 @@ details {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
-  color: var(--wa-color-text-quiet);
+  color: var(--icon-color);
   transition: rotate var(--wa-transition-normal) var(--wa-transition-easing);
 }
 

packages/webawesome/src/components/details/details.ts

@@ -8,6 +8,7 @@ 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';
@@ -37,13 +38,15 @@ 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 = styles;
+  static css = [appearanceStyles, styles];
 
   private detailsObserver: MutationObserver;
   private readonly localize = new LocalizeController(this);

packages/webawesome/src/components/dialog/dialog.css

@@ -1,4 +1,7 @@
 :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;
@@ -21,10 +24,10 @@
   width: var(--width);
   max-width: calc(100% - var(--wa-space-2xl));
   max-height: calc(100% - var(--wa-space-2xl));
-  background-color: var(--wa-color-surface-raised);
-  border-radius: var(--wa-panel-border-radius);
+  background-color: var(--background-color);
+  border-radius: var(--border-radius);
   border: none;
-  box-shadow: var(--wa-shadow-l);
+  box-shadow: var(--box-shadow);
   padding: 0;
   margin: auto;
 

packages/webawesome/src/components/dialog/dialog.ts

@@ -45,6 +45,9 @@ 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.

packages/webawesome/src/components/drawer/drawer.css

@@ -1,4 +1,6 @@
 :host {
+  --background-color: var(--wa-color-surface-raised);
+  --box-shadow: var(--wa-shadow-l);
   --size: 25rem;
   --spacing: var(--wa-space-l);
   --show-duration: 200ms;
@@ -21,9 +23,9 @@
   max-width: 100%;
   max-height: 100%;
   overflow: hidden;
-  background-color: var(--wa-color-surface-raised);
+  background-color: var(--background-color);
   border: none;
-  box-shadow: var(--wa-shadow-l);
+  box-shadow: var(--box-shadow);
   overflow: auto;
   padding: 0;
   margin: 0;

packages/webawesome/src/components/drawer/drawer.ts

@@ -46,6 +46,8 @@ 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.

packages/webawesome/src/components/dropdown/dropdown.ts

@@ -45,6 +45,13 @@ 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 {

packages/webawesome/src/components/input/input.css

@@ -1,4 +1,10 @@
 :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;
 }
 
@@ -10,10 +16,10 @@
   position: relative;
   transition: inherit;
   height: var(--wa-form-control-height);
-  border-color: var(--wa-form-control-border-color);
+  border-color: var(--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(--wa-form-control-border-width);
+  border-width: var(--border-width);
   cursor: text;
   color: var(--wa-form-control-value-color);
   font-size: var(--wa-form-control-value-font-size);
@@ -27,7 +33,7 @@
     border var(--wa-transition-normal),
     outline var(--wa-transition-fast);
   transition-timing-function: var(--wa-transition-easing);
-  background-color: var(--wa-form-control-background-color);
+  background-color: var(--background-color, var(--wa-form-control-background-color));
   box-shadow: var(--box-shadow);
   padding: 0 var(--wa-form-control-padding-inline);
 
@@ -43,25 +49,6 @@
   }
 }
 
-/* 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;
 }

packages/webawesome/src/components/input/input.ts

@@ -10,6 +10,7 @@ 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';
@@ -47,11 +48,16 @@ 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, formControlStyles, styles];
+  static css = [sizeStyles, appearanceStyles, formControlStyles, styles];
 
   static shadowRootOptions = { ...WebAwesomeFormAssociatedElement.shadowRootOptions, delegatesFocus: true };
 

packages/webawesome/src/components/option/option.css

@@ -1,4 +1,9 @@
 :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;
@@ -20,15 +25,15 @@
 
 @media (hover: hover) {
   :host(:not([disabled], :state(current)):is(:state(hover), :hover)) {
-    background-color: var(--wa-color-neutral-fill-normal);
-    color: var(--wa-color-neutral-on-normal);
+    background-color: var(--background-color-hover);
+    color: var(--text-color-hover);
   }
 }
 
 :host(:state(current)),
 :host([disabled]:state(current)) {
-  background-color: var(--wa-color-brand-fill-loud);
-  color: var(--wa-color-brand-on-loud);
+  background-color: var(--background-color-current);
+  color: var(--text-color-current);
   opacity: 1;
 }
 

packages/webawesome/src/components/option/option.ts

@@ -19,6 +19,11 @@ 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.

packages/webawesome/src/components/popover/popover.css

@@ -10,8 +10,8 @@
   display: contents;
 
   /** Defaults for inherited CSS properties */
-  font-size: var(--wa-font-size-m);
-  line-height: var(--wa-line-height-normal);
+  font-size: var(--wa-popover-font-size);
+  line-height: var(--wa-popover-line-height);
   text-align: start;
   white-space: normal;
 }

packages/webawesome/src/components/progress-bar/progress-bar.css

@@ -1,5 +1,4 @@
 :host {
-  --track-color: var(--wa-color-neutral-fill-normal);
   --indicator-color: var(--wa-color-brand-fill-loud);
 
   display: flex;
@@ -10,9 +9,9 @@
   display: flex;
   position: relative;
   overflow: hidden;
-  height: 1rem;
+  height: 1.25rem;
   border-radius: var(--wa-border-radius-pill);
-  background-color: var(--track-color);
+  background-color: var(--wa-color-neutral-fill-normal);
   color: var(--wa-color-brand-on-loud);
 }
 

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 {

packages/webawesome/src/components/radio/radio.css

@@ -1,6 +1,14 @@
 :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;
@@ -39,13 +47,14 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--wa-form-control-toggle-size);
-    height: var(--wa-form-control-toggle-size);
-    border-color: var(--wa-form-control-border-color);
+    width: var(--toggle-size);
+    height: var(--toggle-size);
+    border-color: var(--border-color);
     border-radius: 50%;
-    border-style: var(--wa-form-control-border-style);
-    border-width: var(--wa-form-control-border-width);
-    background-color: var(--wa-form-control-background-color);
+    border-style: var(--border-style);
+    border-width: var(--border-width);
+    background-color: var(--background-color);
+    box-shadow: var(--box-shadow);
     color: transparent;
     transition:
       background var(--wa-transition-normal),
@@ -60,8 +69,8 @@
   .checked-icon {
     display: flex;
     fill: currentColor;
-    width: var(--wa-form-control-toggle-size);
-    height: var(--wa-form-control-toggle-size);
+    width: var(--toggle-size);
+    height: var(--toggle-size);
     scale: var(--checked-icon-scale);
   }
 }
@@ -69,8 +78,8 @@
 /* Checked */
 :host(:state(checked)) .control {
   color: var(--checked-icon-color);
-  border-color: var(--wa-form-control-activated-color);
-  background-color: var(--wa-form-control-background-color);
+  border-color: var(--border-color-checked);
+  background-color: var(--background-color-checked);
 }
 
 /* Focus */
@@ -90,7 +99,7 @@
   align-items: center;
   min-height: var(--wa-form-control-height);
   background-color: var(--wa-color-surface-default);
-  border: var(--wa-form-control-border-width) var(--wa-form-control-border-style) var(--wa-form-control-border-color);
+  border: var(--border-width) var(--border-style) var(--wa-form-control-border-color);
   border-radius: var(--wa-border-radius-m);
   padding: 0 var(--wa-form-control-padding-inline);
   transition:
@@ -144,7 +153,7 @@
 }
 
 :host([appearance='button']:state(checked)) {
-  border-color: var(--wa-form-control-activated-color);
+  border-color: var(--border-color-checked);
   background-color: var(--wa-color-brand-fill-quiet);
 }
 
@@ -155,11 +164,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(--wa-form-control-border-width));
+  margin-inline-start: calc(-1 * var(--border-width));
 }
 
 :host([appearance='button'][data-wa-radio-vertical]:not([data-wa-radio-first])) {
-  margin-block-start: calc(-1 * var(--wa-form-control-border-width));
+  margin-block-start: calc(-1 * var(--border-width));
 }
 
 /* Ensure interactive states are visible above adjacent buttons */

packages/webawesome/src/components/radio/radio.ts

@@ -24,8 +24,16 @@ import styles from './radio.css';
  * @csspart checked-icon - The checked icon.
  * @csspart label - The container that wraps the radio's label.
  *
- * @cssproperty --checked-icon-color - The color of the checked icon.
+ * @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-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.

packages/webawesome/src/components/rating/rating.css

@@ -24,7 +24,6 @@
 
 .symbols {
   display: inline-flex;
-  gap: 0.125em;
   position: relative;
   line-height: 0;
   color: var(--symbol-color);

packages/webawesome/src/components/select/select.css

@@ -1,4 +1,11 @@
+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;
 }
 
@@ -54,11 +61,12 @@
 
   min-height: var(--wa-form-control-height);
 
-  background-color: var(--wa-form-control-background-color);
-  border-color: var(--wa-form-control-border-color);
+  background-color: var(--background-color, var(--wa-form-control-background-color));
+  border-color: var(--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(--wa-form-control-border-width);
+  border-width: var(--border-width);
+  box-shadow: var(--box-shadow);
   color: var(--wa-form-control-value-color);
   cursor: pointer;
   font-family: inherit;
@@ -86,25 +94,6 @@
   }
 }
 
-/* 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%;
@@ -245,7 +234,7 @@
   border-color: var(--wa-color-surface-border);
   border-radius: var(--wa-border-radius-m);
   border-style: var(--wa-border-style);
-  border-width: var(--wa-border-width-s);
+  border-width: var(--border-width);
   padding-block: 0.5em;
   padding-inline: 0;
   overflow: auto;

packages/webawesome/src/components/select/select.ts

@@ -17,6 +17,7 @@ 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';
@@ -74,13 +75,17 @@ 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 = [styles, formControlStyles, sizeStyles];
+  static css = [appearanceStyles, formControlStyles, sizeStyles, styles];
 
   static get validators() {
     const validators = isServer

packages/webawesome/src/components/skeleton/skeleton.css

@@ -1,4 +1,5 @@
 :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));
 
@@ -12,7 +13,7 @@
 .indicator {
   flex: 1 1 auto;
   background: var(--color);
-  border-radius: var(--wa-border-radius-pill);
+  border-radius: var(--border-radius);
 }
 
 :host([effect='sheen']) .indicator {

packages/webawesome/src/components/skeleton/skeleton.ts

@@ -11,6 +11,7 @@ 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.
  */

packages/webawesome/src/components/split-panel/split-panel.css

@@ -1,4 +1,5 @@
 :host {
+  --divider-color: var(--wa-color-neutral-border-normal);
   --divider-width: 0.25rem;
   --divider-hit-area: 0.75rem;
   --min: 0%;
@@ -18,7 +19,7 @@
   position: relative;
   align-items: center;
   justify-content: center;
-  background-color: var(--wa-color-neutral-border-normal);
+  background-color: var(--divider-color);
   color: var(--wa-color-neutral-on-normal);
   z-index: 1;
 }

packages/webawesome/src/components/split-panel/split-panel.ts

@@ -26,6 +26,7 @@ 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.

packages/webawesome/src/components/switch/switch.css

@@ -1,7 +1,17 @@
 :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);
@@ -25,22 +35,23 @@ label {
   justify-content: center;
   width: var(--width);
   height: var(--height);
-  background-color: var(--wa-form-control-background-color);
-  border-color: var(--wa-form-control-border-color);
+  background-color: var(--background-color);
+  border-color: var(--border-color);
   border-radius: var(--height);
-  border-style: var(--wa-form-control-border-style);
-  border-width: var(--wa-form-control-border-width);
+  border-style: var(--border-style);
+  border-width: var(--border-width);
+  box-shadow: var(--box-shadow);
   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(--wa-form-control-border-color);
+  background-color: var(--thumb-color);
   border-radius: 50%;
+  box-shadow: var(--thumb-shadow);
   translate: calc((var(--width) - var(--height)) / -2);
   transition: inherit;
 }
@@ -61,12 +72,12 @@ label:not(.disabled) .input:focus-visible ~ .switch .thumb {
 
 /* Checked */
 .checked .switch {
-  background-color: var(--wa-form-control-activated-color);
-  border-color: var(--wa-form-control-activated-color);
+  background-color: var(--background-color-checked);
+  border-color: var(--border-color-checked);
 }
 
 .checked .switch .thumb {
-  background-color: var(--wa-color-surface-default);
+  background-color: var(--thumb-color-checked);
   translate: calc((var(--width) - var(--height)) / 2);
 }
 

packages/webawesome/src/components/switch/switch.ts

@@ -33,9 +33,19 @@ import styles from './switch.css';
  * @csspart label - The switch's label.
  * @csspart hint - The hint's wrapper.
  *
- * @cssproperty --width - The width of the switch.
+ * @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.
  */
 @customElement('wa-switch')
 export default class WaSwitch extends WebAwesomeFormAssociatedElement {

packages/webawesome/src/components/tab/tab.css

@@ -1,4 +1,5 @@
 :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);
@@ -39,8 +40,8 @@
   outline-offset: calc(-1 * var(--wa-border-width-l) - var(--wa-focus-ring-offset));
 }
 
-:host([active]:not([disabled])) {
-  color: var(--wa-color-brand-on-quiet);
+:host([active]:not([disabled])) .tab {
+  color: var(--active-tab-color);
 }
 
 :host([disabled]) .tab {

packages/webawesome/src/components/tab/tab.ts

@@ -15,6 +15,8 @@ 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')

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(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
-    border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
+    background-color: var(--background-color, var(--wa-color-fill-quiet));
+    border-color: var(--border-color, transparent);
     border-style: var(--wa-border-style);
     border-width: var(--wa-border-width-s);
-    color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
+    color: var(--text-color, var(--wa-color-on-normal));
     font-size: inherit;
     line-height: 1;
     white-space: nowrap;
@@ -18,29 +18,6 @@
     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 {

packages/webawesome/src/components/tag/tag.ts

@@ -2,6 +2,7 @@ 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';
@@ -27,7 +28,7 @@ import styles from './tag.css';
  */
 @customElement('wa-tag')
 export default class WaTag extends WebAwesomeElement {
-  static css = [styles, variantStyles, sizeStyles];
+  static css = [styles, variantStyles, sizeStyles, appearanceStyles];
 
   private readonly localize = new LocalizeController(this);
 

packages/webawesome/src/components/textarea/textarea.css

@@ -1,4 +1,10 @@
 :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;
 }
 
@@ -11,11 +17,12 @@
   outline: none;
   cursor: inherit;
   font: inherit;
-  background-color: var(--wa-form-control-background-color);
-  border-color: var(--wa-form-control-border-color);
+  background-color: var(--background-color, var(--wa-form-control-background-color));
+  border-color: var(--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(--wa-form-control-border-width);
+  border-width: var(--border-width);
+  box-shadow: var(--box-shadow);
   -webkit-appearance: none;
 
   &:focus-within {
@@ -24,25 +31,6 @@
   }
 }
 
-/* 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%;

packages/webawesome/src/components/textarea/textarea.ts

@@ -9,6 +9,7 @@ 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';
 
@@ -33,11 +34,16 @@ 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 = [styles, formControlStyles, sizeStyles];
+  static css = [formControlStyles, appearanceStyles, sizeStyles, styles];
 
   static get validators() {
     return [...super.validators, MirrorValidator()];

packages/webawesome/src/components/tooltip/tooltip.css

@@ -1,5 +1,8 @@
 :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;
@@ -42,9 +45,9 @@
   display: block;
   width: max-content;
   max-width: var(--max-width);
-  border-radius: var(--wa-tooltip-border-radius);
-  background-color: var(--wa-tooltip-background-color);
-  padding: 0.25em 0.5em;
+  border-radius: var(--border-radius);
+  background-color: var(--background-color);
+  padding: var(--padding);
   user-select: none;
   -webkit-user-select: none;
 }

packages/webawesome/src/components/tooltip/tooltip.ts

@@ -33,7 +33,10 @@ 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 {

packages/webawesome/src/components/tree-item/tree-item.css

@@ -1,4 +1,7 @@
 :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;
 
@@ -54,7 +57,7 @@ slot:not([name])::slotted(wa-icon) {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--wa-color-text-quiet);
+  color: var(--expand-button-color);
   width: 2em;
   height: 2em;
   flex-shrink: 0;
@@ -105,12 +108,12 @@ slot:not([name])::slotted(wa-icon) {
 }
 
 :host(:not([aria-disabled='true'])) .tree-item-selected .item {
-  background-color: var(--wa-color-neutral-fill-quiet);
-  border-inline-start-color: var(--wa-color-brand-fill-loud);
+  background-color: var(--selection-background-color);
+  border-inline-start-color: var(--selection-indicator-color);
 }
 
 :host(:not([aria-disabled='true'])) .expand-button {
-  color: var(--wa-color-text-quiet);
+  color: var(--expand-button-color);
 }
 
 .label {

packages/webawesome/src/components/tree-item/tree-item.ts

@@ -57,6 +57,9 @@ 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.
  *

packages/webawesome/src/styles/native.css

@@ -557,6 +557,10 @@
   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;
@@ -565,7 +569,7 @@
     height: var(--wa-form-control-height);
     padding: 0 var(--wa-form-control-padding-inline);
 
-    color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
+    color: var(--text-color);
     font-family: inherit;
     font-size: var(--wa-form-control-value-font-size);
     font-weight: var(--wa-font-weight-action);
@@ -574,8 +578,8 @@
     vertical-align: middle;
     white-space: nowrap;
 
-    background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
-    border-color: transparent;
+    background-color: var(--background-color);
+    border-color: var(--border-color, var(--background-color));
     border-style: var(--wa-border-style);
     border-width: max(1px, var(--wa-form-control-border-width));
     border-radius: var(--wa-form-control-border-radius);
@@ -588,94 +592,18 @@
     user-select: none;
     -webkit-user-select: none;
 
-    &.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):hover {
+      background-color: var(
+        --background-color-hover,
+        color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover))
+      );
     }
 
-    &.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)
-        );
-      }
+    &:not(:disabled):active {
+      background-color: var(
+        --background-color-active,
+        color-mix(in oklab, var(--background-color), var(--wa-color-mix-active))
+      );
     }
 
     &:focus {
@@ -866,10 +794,10 @@
     line-height: var(--wa-form-control-value-line-height);
     vertical-align: middle;
 
-    background-color: var(--wa-form-control-background-color);
-    border-color: var(--wa-form-control-border-color);
+    background-color: var(--background-color, var(--wa-form-control-background-color));
+    border-color: var(--border-color, var(--wa-form-control-border-color));
     border-style: var(--wa-form-control-border-style);
-    border-width: var(--wa-form-control-border-width);
+    border-width: var(--border-width, var(--wa-form-control-border-width));
     border-radius: var(--wa-form-control-border-radius);
 
     transition:
@@ -902,20 +830,6 @@
       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);
     }
@@ -956,12 +870,10 @@
   input[type='color'] {
     display: block;
 
-    block-size: var(--wa-form-control-height);
-    inline-size: var(--wa-form-control-height);
+    width: var(--wa-form-control-height);
+    height: 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);

packages/webawesome/src/styles/themes/awesome.css

@@ -364,56 +364,60 @@
   .wa-theme-awesome {
     wa-button,
     button,
-    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;
+    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;
 
-      .wa-dark & {
+        --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-color-shadow: var(--wa-color-border-quiet);
       }
 
-      &[appearance='outlined'],
-      &.wa-outlined:not(.wa-filled) {
-        --wa-color-shadow: var(--wa-color-border-loud);
+      &[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);
+        }
       }
     }
 
-    wa-button,
-    button,
-    input[type='button'],
-    input[type='reset'],
-    input[type='submit'] {
-      &:not([appearance~='plain']):not(.wa-plain) {
+    :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 {
         &: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);
-          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);
-            }
-          }
+          box-shadow: none;
+          transform: translate(var(--wa-shadow-offset-x-s), var(--wa-shadow-offset-y-s));
         }
       }
     }
@@ -457,42 +461,27 @@
         wa-input,
         wa-select,
         wa-textarea
-      ):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);
-      }
+      ):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);
     }
   }
 }
 
 @layer wa-theme-overrides {
   .wa-theme-awesome {
-    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;
-        }
-      }
+    :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-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);
-          }
+        .wa-dark &,
+        .wa-invert & {
+          --border-color: var(--wa-color-border-quiet);
+          --text-color-active: var(--wa-color-on-quiet);
         }
       }
     }
@@ -507,6 +496,9 @@
       &:is([appearance~='outlined']) {
         border-color: var(--wa-color-border-normal);
       }
+      &:not([appearance~='accent']) {
+        --icon-color: var(--wa-color-border-normal);
+      }
     }
 
     wa-card {

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);
-      color: var(--wa-color-neutral-on-loud);
+      --background-color: var(--wa-color-neutral-fill-loud);
+      --text-color: var(--wa-color-neutral-on-loud);
     }
 
     wa-button::part(label),
@@ -387,13 +387,21 @@
     }
 
     wa-callout {
-      padding: var(--wa-space-m);
+      --spacing: 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);
       }
     }
 
@@ -401,6 +409,10 @@
       background-color: var(--wa-color-surface-raised);
     }
 
+    wa-carousel {
+      --pagination-color-active: var(--wa-color-neutral-fill-loud);
+    }
+
     :is(
         wa-input,
         wa-select,
@@ -443,26 +455,18 @@
     }
 
     wa-switch {
-      --height: calc(1em * var(--wa-form-control-value-line-height) - var(--wa-form-control-border-width) * 2);
-      --thumb-size: calc(var(--height) + 0.25em);
+      --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);
       --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) {
-        background-color: var(--wa-color-surface-default);
-        border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-gray-50);
+        border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color);
       }
       &[checked]::part(thumb) {
-        border-color: var(--wa-form-control-activated-color);
+        border-color: var(--background-color-checked);
       }
     }
 

packages/webawesome/src/styles/utilities.css

@@ -10,3 +10,4 @@
 
 @import url('utilities/size.css');
 @import url('utilities/variants.css');
+@import url('utilities/appearance.css');

packages/webawesome/src/styles/utilities/appearance.css

@@ -0,0 +1,59 @@
+@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);
+  }
+}