Merge branch 'next' into themer-rework

* remove `:root` selector and imports from themes

* re-add `base.css` to free

package-lock.json

@@ -13975,7 +13975,7 @@
     },
     "packages/webawesome": {
       "name": "@shoelace-style/webawesome",
-      "version": "3.0.0-beta.1",
+      "version": "3.0.0-alpha.13",
       "license": "MIT",
       "dependencies": {
         "@ctrl/tinycolor": "^4.1.0",
@@ -13994,7 +13994,7 @@
     },
     "packages/webawesome-pro": {
       "name": "@shoelace-style/webawesome-pro",
-      "version": "3.0.0-beta.1",
+      "version": "3.0.0-alpha.13",
       "license": "TODO",
       "dependencies": {
         "@ctrl/tinycolor": "^4.1.0",

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/_data/themer.js

@@ -715,10 +715,7 @@ export const elementPresets = themes.map(theme => ({
  * All palettes used by themes in a simple array.
  */
 export const palettes = themes
-  .map(theme => ({
-    ...theme.palette,
-    isPro: theme.isPro,
-  }))
+  .map(theme => theme.palette)
   .filter(
     (palette, index, array) =>
       array.findIndex(p => p.name === palette.name && p.filename === palette.filename) === index,

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>
@@ -315,15 +315,12 @@
   </ul>
 </wa-details>
 
-<!-- Theming -->
-<h2>Theming</h2>
+<!-- Color Palettes & Themes -->
+<h2>Color Palettes &amp; Themes</h2>
 <ul>
   <li><a href="/docs/color-palettes">Color Palettes</a></li>
   <li><a href="/docs/themes">Themes</a></li>
-  <li>
-    <a href="/themer" data-turbo="false">Theme Builder</a>
-    <wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
-  </li>
+  <li><a href="/themer" data-turbo="false">Theme Builder</a></li>
 </ul>
 
 <!-- Design tokens -->

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/assets/styles/docs.css

@@ -99,7 +99,7 @@ wa-page > header {
 #sidebar,
 #outline {
   h2 {
-    font-size: var(--wa-font-size-s);
+    font-size: var(--wa-font-size-m);
     margin: 0;
   }
 
@@ -108,16 +108,7 @@ wa-page > header {
   }
 
   wa-details {
-    --spacing: 0;
-
-    &::part(header) {
-      padding: 0;
-      padding-block-start: var(--wa-space-xs);
-    }
-
-    &::part(content) {
-      padding-block-start: var(--wa-space-m);
-    }
+    --spacing: var(--wa-space-xs);
 
     &::part(base) {
       border: none;
@@ -180,7 +171,6 @@ wa-page > header {
 
 /* Pro badges */
 wa-badge.pro {
-  color: white;
   background-color: var(--wa-brand-orange);
   border-color: var(--wa-brand-orange);
 }
@@ -415,7 +405,6 @@ wa-page > main:has(> .search-list) {
 
     wa-card {
       --spacing: var(--wa-space-m);
-      box-shadow: none;
 
       [slot='header'] {
         display: flex;
@@ -428,11 +417,6 @@ wa-page > main:has(> .search-list) {
         justify-content: center;
         min-block-size: calc(6rem + var(--spacing));
       }
-
-      &:hover {
-        border-color: var(--wa-color-brand-border-loud);
-        box-shadow: 0 0 0 0.0625rem var(--wa-color-brand-border-loud);
-      }
     }
   }
 }

packages/webawesome/docs/docs/color-palettes.njk

@@ -2,6 +2,7 @@
 title: Color Palettes
 description: 'Color palettes give you a full spectrum of colors to add life to your project.'
 layout: page
+isPro: true
 ---
 
 <p>Color palettes give you a full spectrum of colors to add life to your project.</p>
@@ -13,36 +14,9 @@ layout: page
 {% endfor %}
 
 <div id="color-palettes">
-  {% raw %}
-    {% if not currentUser.hasPro %}
-      <p>
-        Additional palettes are available to pro users. Please <a href="/login">login to view pro palettes</a>.
-      </p>
-    {% endif %}
-  {% endraw %}
   <wa-radio-group id="palette-picker" label="Color Palette" value="default" orientation="horizontal">
     {% for palette in themer.palettes %}
-      {% if not palette.isPro %}
-        <wa-radio
-          class="palette-card"
-          value="{{ palette.name | lower }}"
-        >
-          {{ palette.name }}
-        </wa-radio>
-      {% else %}
-        {% raw %}
-          {% if currentUser.hasPro %}
-        {% endraw %}
-            <wa-radio
-              class="palette-card"
-              value="{{ palette.name | lower }}"
-            >
-              {{ palette.name }}
-            </wa-radio>
-        {% raw %}
-          {% endif %}
-        {% endraw %}
-      {% endif %}
+      <wa-radio class="palette-card" value="{{ palette.name | lower }}">{{ palette.name }}</wa-radio>
     {% endfor %}
   </wa-radio-group>
 
@@ -150,16 +124,13 @@ layout: page
     border: 1px solid var(--wa-color-surface-border);
     border-radius: var(--border-radius);
     box-shadow: var(--wa-shadow-s);
+    cursor: pointer;
     transition: all 0.2s ease;
     text-align: center;
     font-weight: var(--wa-font-weight-action);
     text-transform: capitalize;
   }
 
-  .palette-card:not(:state(disabled)) {
-    cursor: pointer;
-  }
-
   .palette-card:state(checked) {
     border-color: var(--wa-color-brand-border-loud);
     background-color: var(--wa-color-brand-fill-quiet);

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/layout.njk

@@ -4,46 +4,6 @@ description: Layout components and utility classes help you organize content tha
 layout: docs
 ---
 
-<p>
-{% markdown %}
-  {{ description }}
-{% endmarkdown %}
-</p>
-
-<div class="search-list">
-  <wa-input class="search-list-input" type="search" placeholder="Search layout utilities" autofocus>
-    <wa-icon name="search" slot="start"></wa-icon>
-  </wa-input>
-
-  <section class="search-list-grid">
-    {% for page in collections.layoutUtilities | sort(false, false, 'data.title') %}
-      <a href="{{ page.url }}">
-        <wa-card with-header="" appearance="outlined">
-          <div slot="header">
-            {# Look for an icon based on the page name #}
-            {% set iconPath = "svgs/layout/" + page.fileSlug + ".njk" %}
-            {% set iconContent %}{% include iconPath ignore missing %}{% endset %}
-            {% if iconContent.trim() %}
-              {# An icon exists! Show it #}
-              {{ iconContent | safe }}
-            {% else %}
-              {# Fallback to the placeholder #}
-              {% include 'svgs/thumbnail-placeholder.njk' %}
-            {% endif %}
-          </div>
-          <span class="page-name">{{ page.data.title }}</span>
-        </wa-card>
-      </a>
-    {% endfor %}
-  </section>
-  <div class="search-list-empty" hidden>
-    No results found
-  </div>
-</div>
-
-<wa-divider style="--spacing: var(--wa-space-3xl);"></wa-divider>
-
-<div class="max-line-length">
 {% markdown %}
 ## Installation
 
@@ -61,4 +21,3 @@ Or, you can choose to import _only_ the utilities:
 <link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
 ```
 {% endmarkdown %}
-</div>

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
 
@@ -25,12 +29,11 @@ Many of these changes and improvements were the direct result of feedback from u
   - Removed `.wa-button`, `.wa-callout` classes
   - Removed `themes/native/*.css` files; use `native.css` to opt into native styles
   - Clarified which utilities classes can be applied to which native elements
-- Renamed the `classic` theme to `shoelace`
-- Removed `:root` selector from all theme, color palette, and semantic color stylesheets except for the default theme and colors. All of these styles are now solely scoped to classes, such as `.wa-theme-awesome`, `.wa-palette-bright`, and `.wa-brand-orange`.
-- Removed most custom properties from components that can otherwise be styled with `::part()` selectors and standard CSS properties.
-- Renamed `pulse` attribute in `<wa-badge>` to `attention="pulse"` and added `attention="bounce"` [issue:#940]
-- Renamed the `vertical` attribute to `orientation="vertical"` in `<wa-split-panel>` and `<wa-divider>` to align with other components and the platform [issue:674]
-- Renamed certain boolean attributes to be consistent using the `with-*` and `without-*` pattern:
+- 🚨 BREAKING: Removed the extra dash in the `<wa-carousel>` CSS part name `pagination-item--active` => `pagination-item-active`
+- 🚨 BREAKING: Renamed the `classic` theme to `shoelace`
+- 🚨 BREAKING: Renamed `pulse` attribute in `<wa-badge>` to `attention="pulse"` and added `attention="bounce"` [issue:#940]
+- 🚨 BREAKING: Renamed the `vertical` attribute to `orientation="vertical"` in `<wa-split-panel>` and `<wa-divider>` to align with other components and the platform [issue:674]
+- 🚨 BREAKING: Renamed certain boolean attributes to be consistent using the `with-*` and `without-*` pattern:
   - `<wa-button caret>` => `<wa-button with-caret>`
   - `<wa-color-picker no-format-toggle>` => `<wa-color-picker without-format-toggle>`
   - `<wa-format-number no-grouping>` => `<wa-format-number without-grouping>`

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/docs/themes.njk

@@ -2,6 +2,7 @@
 title: Themes
 description: Themes galore
 layout: page
+isPro: true
 ---
 
 <div class="wa-stack wa-gap-3xl">
@@ -15,41 +16,17 @@ layout: page
   </div>
 
   <div id="theme-viewer">
-    {% if not currentUser.hasPro %}
-      <p>
-        Additional themes are available to pro users. Please <a href="/login">login to view pro themes</a>.
-      </p>
-    {% endif %}
-
     <wa-radio-group id="theme-picker" label="Theme Selector" value="default" orientation="horizontal">
       {% for theme in themer.themes %}
-        {% if not theme.isPro %}
-          <wa-radio
-            class="theme-card"
-            value="{{ theme.filename | stripExtension }}"
-            data-description="{{ theme.description }}"
-            data-title="{{ theme.name }}"
-            {% if theme.isPro %}data-is-pro{% endif %}
-          >
-            {{ theme.name }}
-          </wa-radio>
-        {% else %}
-          {% raw %}
-            {% if currentUser.hasPro %}
-          {% endraw %}
-            <wa-radio
-              class="theme-card"
-              value="{{ theme.filename | stripExtension }}"
-              data-description="{{ theme.description }}"
-              data-title="{{ theme.name }}"
-              {% if theme.isPro %}data-is-pro{% endif %}
-            >
-              {{ theme.name }}
-            </wa-radio>
-          {% raw %}
-            {% endif %}
-          {% endraw %}
-        {% endif %}
+        <wa-radio
+          class="theme-card"
+          value="{{ theme.filename | stripExtension }}"
+          data-description="{{ theme.description }}"
+          data-title="{{ theme.name }}"
+          {% if theme.isPro %}data-is-pro{% endif %}
+        >
+          {{ theme.name }}
+        </wa-radio>
       {% endfor %}
     </wa-radio-group>
   </div>
@@ -241,15 +218,12 @@ layout: page
       border: 1px solid var(--wa-color-surface-border);
       border-radius: var(--border-radius);
       box-shadow: var(--wa-shadow-s);
+      cursor: pointer;
       transition: all 0.2s ease;
       text-align: center;
       font-weight: var(--wa-font-weight-action);
       text-transform: capitalize;
 
-      &:not(:state(disabled)) {
-        cursor: pointer;
-      }
-
       &:state(checked) {
         border-color: var(--wa-color-brand-border-loud);
         background-color: var(--wa-color-brand-fill-quiet);

packages/webawesome/docs/docs/tokens/index.md

@@ -0,0 +1,7 @@
+---
+title: Design Tokens
+description: These custom properties thread through all of Web Awesome's components, giving things a consistent look and feel.
+layout: docs
+---
+
+TODO

packages/webawesome/docs/docs/tokens/index.njk

@@ -1,43 +0,0 @@
----
-title: Design Tokens
-description: These custom properties thread through all of Web Awesome's components, giving things a consistent look and feel.
-layout: docs
-override:tags: []
----
-
-<p>
-{% markdown %}
-  {{ description }}
-{% endmarkdown %}
-</p>
-
-<div class="search-list">
-  <wa-input class="search-list-input" type="search" placeholder="Search design tokens" autofocus>
-    <wa-icon name="search" slot="start"></wa-icon>
-  </wa-input>
-
-  <section class="search-list-grid">
-    {% for page in collections.tokens | sort(false, false, 'data.title') %}
-      <a href="{{ page.url }}">
-        <wa-card with-header="" appearance="outlined">
-          <div slot="header">
-            {# Look for an icon based on the page name #}
-            {% set iconPath = "svgs/tokens/" + page.fileSlug + ".njk" %}
-            {% set iconContent %}{% include iconPath ignore missing %}{% endset %}
-            {% if iconContent.trim() %}
-              {# An icon exists! Show it #}
-              {{ iconContent | safe }}
-            {% else %}
-              {# Fallback to the placeholder #}
-              {% include 'svgs/thumbnail-placeholder.njk' %}
-            {% endif %}
-          </div>
-          <span class="page-name">{{ page.data.title }}</span>
-        </wa-card>
-      </a>
-    {% endfor %}
-  </section>
-  <div class="search-list-empty" hidden>
-    No results found
-  </div>
-</div>

packages/webawesome/docs/docs/tokens/tokens.json

@@ -1,3 +0,0 @@
-{
-  "tags": ["tokens"]
-}

packages/webawesome/docs/docs/utilities/align-items.md

@@ -2,7 +2,6 @@
 title: Align Items
 description: Align items utilities set the gap property of flex and grid containers, like other Web Awesome layout utilities.
 layout: docs
-tags: layoutUtilities
 ---
 
 <style>

packages/webawesome/docs/docs/utilities/cluster.md

@@ -2,7 +2,6 @@
 title: Cluster
 description: 'Use the `wa-cluster` class to arrange elements inline with even spacing, allowing items to wrap when space is limited.'
 layout: docs
-tags: layoutUtilities
 ---
 
 <style>

packages/webawesome/docs/docs/utilities/color.md

@@ -2,7 +2,6 @@
 title: Color Variants
 description: Color utilities allow you to apply the brand, neutral, success, warning, and danger colors from your theme to any element.
 layout: docs
-tags: styleUtilities
 ---
 
 Some Web Awesome components, like `<wa-button>`, allow you to change the color by using a `variant` attribute:

packages/webawesome/docs/docs/utilities/flank.md

@@ -2,7 +2,6 @@
 title: Flank
 description: 'Use the `wa-flank` class to position two items side-by-side, with one item positioned alongside, or _flanking_, content that stretches to fill the available space.'
 layout: docs
-tags: layoutUtilities
 ---
 
 <style>

packages/webawesome/docs/docs/utilities/fouce.md

@@ -2,7 +2,6 @@
 title: Reducing FOUCE
 description: Utility to improve the loading experience by hiding non-prerendered custom elements until they are registered.
 layout: docs
-tags: styleUtilities
 ---
 
 Often, components are shown before their logic and styles have had a chance to load, also known as a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/).

packages/webawesome/docs/docs/utilities/frame.md

@@ -2,7 +2,6 @@
 title: Frame
 description: 'Use the `wa-frame` class to create a responsive container with consistent proportions to enclose content.'
 layout: docs
-tags: layoutUtilities
 ---
 
 <style>

packages/webawesome/docs/docs/utilities/gap.md

@@ -2,7 +2,6 @@
 title: Gap
 description: Gap utilities set the gap property of flex and grid containers, like other Web Awesome layout utilities.
 layout: docs
-tags: layoutUtilities
 ---
 
 <style>

packages/webawesome/docs/docs/utilities/grid.md

@@ -2,7 +2,6 @@
 title: Grid
 description: 'Use the `wa-grid` class to arrange elements into rows and columns that automatically adapt to the available space.'
 layout: docs
-tags: layoutUtilities
 ---
 
 <style>

packages/webawesome/docs/docs/utilities/index.md

@@ -0,0 +1,21 @@
+---
+title: Style Utilities
+description:
+  Style utilities are preset rules that let you efficiently customize styles for components and native elements alike.
+  See the [installation instructions](#installation) to use style utilities in your project.
+layout: docs
+---
+
+## Installation
+
+To use all Web Awesome page styles (including [native styles](/docs/utilities/native/)), include the following stylesheet in your project:
+
+```html
+<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
+```
+
+Or, to _only_ include utilities:
+
+```html
+<link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
+```

packages/webawesome/docs/docs/utilities/index.njk

@@ -1,66 +0,0 @@
----
-title: Style Utilities
-description:
-  Style utilities are preset rules that let you efficiently customize styles for components and native elements alike.
-  See the [installation instructions](#installation) to use style utilities in your project.
-layout: docs
----
-
-<p>
-{% markdown %}
-  {{ description }}
-{% endmarkdown %}
-</p>
-
-<div class="search-list">
-  <wa-input class="search-list-input" type="search" placeholder="Search style utilities" autofocus>
-    <wa-icon name="search" slot="start"></wa-icon>
-  </wa-input>
-
-  <section class="search-list-grid">
-    {% for page in collections.styleUtilities | sort(false, false, 'data.title') %}
-      <a href="{{ page.url }}">
-        <wa-card with-header="" appearance="outlined">
-          <div slot="header">
-            {# Look for an icon based on the page name #}
-            {% set iconPath = "svgs/tokens/" + page.fileSlug + ".njk" %}
-            {% set iconContent %}{% include iconPath ignore missing %}{% endset %}
-            {% if iconContent.trim() %}
-              {# An icon exists! Show it #}
-              {{ iconContent | safe }}
-            {% else %}
-              {# Fallback to the placeholder #}
-              {% include 'svgs/thumbnail-placeholder.njk' %}
-            {% endif %}
-          </div>
-          <span class="page-name">{{ page.data.title }}</span>
-        </wa-card>
-      </a>
-    {% endfor %}
-  </section>
-  <div class="search-list-empty" hidden>
-    No results found
-  </div>
-</div>
-
-<wa-divider style="--spacing: var(--wa-space-3xl);"></wa-divider>
-
-<div class="max-line-length">
-{% markdown %}
-## Installation
-
-To use all Web Awesome page styles (including [native styles](/docs/utilities/native/)), include the following stylesheet in your project:
-
-```html
-<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
-```
-
-Or, to _only_ include utilities:
-
-```html
-<link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
-```
-
-{% endmarkdown %}
-
-</div>

packages/webawesome/docs/docs/utilities/native.md

@@ -2,7 +2,6 @@
 title: Native Styles
 description: Native styles apply your theme to native HTML elements so they match the look and feel of Web Awesome components.
 layout: page-outline
-tags: styleUtilities
 ---
 
 Web Awesome provides optional Native Styles that make native HTML elements look good so you can continue using what you know and gradually adopt Web Awesome as you see fit.

packages/webawesome/docs/docs/utilities/rounding.md

@@ -2,7 +2,6 @@
 title: Rounding Utilities
 description: Border radius utilities set an element's border radius property.
 layout: docs
-tags: styleUtilities
 ---
 
 <style>

packages/webawesome/docs/docs/utilities/split.md

@@ -2,7 +2,6 @@
 title: Split
 description: 'Use the `wa-split` class to distribute two or more items evenly across available space, either in a row or a column.'
 layout: docs
-tags: layoutUtilities
 ---
 
 <style>

packages/webawesome/docs/docs/utilities/stack.md

@@ -2,7 +2,6 @@
 title: Stack
 description: 'Use `wa-stack` to arrange elements in the block direction with even spacing.'
 layout: docs
-tags: layoutUtilities
 ---
 
 <style>

packages/webawesome/docs/docs/utilities/text.md

@@ -2,7 +2,6 @@
 title: Text
 description: Text utility classes combine custom properties from your Web Awesome theme to conveniently style text content.
 layout: docs
-tags: styleUtilities
 ---
 
 Web Awesome includes classes to set multiple text properties at once to style body text, headings, and captions.

packages/webawesome/docs/docs/utilities/visually-hidden.md

@@ -2,7 +2,6 @@
 title: Visually Hidden
 description: The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
 layout: docs
-tags: styleUtilities
 ---
 
 > "There are real world situations where visually hiding content may be appropriate, while the content should remain available to assistive technologies, such as screen readers. For instance, hiding a search field's label as a common magnifying glass icon is used in its stead."

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shoelace-style/webawesome",
   "description": "A forward-thinking library of web components.",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-alpha.13",
   "homepage": "https://webawesome.com/",
   "author": "Web Awesome",
   "license": "MIT",
@@ -58,10 +58,7 @@
     "spellcheck": "cspell \"**/*.{js,ts,json,html,css,md}\" --no-progress --config=\"../../cspell.json\"",
     "verify": "npm run prettier && npm run build && npm run test",
     "prepublishOnly": "npm run verify",
-    "check-updates": "npx npm-check-updates --interactive --format group",
-    "print-version": "echo $npm_package_version",
-    "tag-version": "git tag -a \"v$(npm run print-version | tail -n1)\" -m \"tag v$(npm run print-version | tail -n1)\"",
-    "postversion": "npm run tag-version"
+    "check-updates": "npx npm-check-updates --interactive --format group"
   },
   "engines": {
     "node": ">=14.17.0"

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);