Refactor form control sizing (#1005)

* visual test setup

* fix improper class placement in visual tests

* add `wa-form-control-*-font-size` and `-wa-form-control-hint-*` custom properties

* use new custom properties

* dump of component sizing improvements

* fix native color picker styles

* update menu with relative sizes

* tidy up menu, select, and tag sizing

* use relative sizing across components

* touch up custom properties

* update docs and comments

* update changelog

* revert changes to visual tests to simplify PR

* revert leftover change to visual tests

* tidy up space doc markdown

* fix default card spacing

* fix card docs

* wrap up new `--tag-max-size` for `<wa-select>`

* change default `--tag-max-size`

* prettier

* touch up

* clean up leftovers

* fix native form control margins

* set default toggle size relative to font size

* correct toggle size in docs

* Konnorrogers/lm form control sizing (#1025)

* try a second updateComplete??

* try a second updateComplete??

* more timeouts?

* try logging

* more logging
gp

* maybe now

* radio group test

* add todo note'

* add workflow dispatch for client tests

---------

Co-authored-by: Konnor Rogers <konnor5456@gmail.com>

.github/workflows/client_tests.yml

@@ -4,6 +4,7 @@
 name: Client Tests
 
 on:
+  workflow_dispatch:
   push:
     branches: [next]
   pull_request:

package-lock.json

@@ -2488,6 +2488,10 @@
       "resolved": "packages/webawesome",
       "link": true
     },
+    "node_modules/@shoelace-style/webawesome-pro": {
+      "resolved": "packages/webawesome-pro",
+      "link": true
+    },
     "node_modules/@sindresorhus/is": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz",
@@ -13987,6 +13991,25 @@
       "engines": {
         "node": ">=14.17.0"
       }
+    },
+    "packages/webawesome-pro": {
+      "name": "@shoelace-style/webawesome-pro",
+      "version": "3.0.0-alpha.13",
+      "license": "TODO",
+      "dependencies": {
+        "@ctrl/tinycolor": "^4.1.0",
+        "@floating-ui/dom": "^1.6.13",
+        "@shoelace-style/animations": "^1.2.0",
+        "@shoelace-style/localize": "^3.2.1",
+        "composed-offset-position": "^0.0.6",
+        "lit": "^3.2.1",
+        "qr-creator": "^1.0.0",
+        "style-observer": "^0.0.7"
+      },
+      "devDependencies": {},
+      "engines": {
+        "node": ">=14.17.0"
+      }
     }
   }
 }

packages/webawesome/docs/assets/styles/ui.css

@@ -127,7 +127,7 @@
 
   > input {
     font: inherit;
-    margin-block: calc(-1 * var(--wa-space-smaller));
+    margin-block: 0.75em;
     field-sizing: content;
   }
 

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

@@ -31,14 +31,23 @@ During the alpha period, things might break! We take breaking changes very serio
   - `<wa-tab-group no-scroll-controls>` => `<wa-tab-group without-scroll-controls>`
   - `<wa-tag removable>` => `<wa-tag with-remove>`
 - 🚨 BREAKING: removed the `size` attribute from `<wa-card>`; please set the size of child elements on the children directly
+- 🚨 BREAKING: Greatly simplified the sizing strategy across components and utilities
+  - Removed `--wa-size`, `--wa-size-smaller`, `--wa-size-larger`, `--wa-space`, `--wa-space-smaller`, and `--wa-space-larger`
+  - Added tokens for `--wa-form-control-padding-inline`, `--wa-form-control-padding-block`, and `--wa-form-control-toggle-size`
+  - Refactored default `--wa-font-size-*` values to use an apparent 1.125 ratio and round rendered values to the nearest whole pixel
+  - Added convenience tokens for `--wa-font-size-smaller` and `--wa-font-size-larger`
+  - Updated components to use relative `em` values for internal padding and margin wherever appropriate
 - 🚨 BREAKING: removed the `hint` property and slot from `<wa-radio>`; please apply hints directly to `<wa-radio-group>` instead
 - Added a new free component: `<wa-popover>` (#2 of 14 per stretch goals)
 - Added a `min-block-size` to `<wa-divider orientation="vertical">` to ensure the divider is visible regardless of container height [issue:675]
 - Added support for `name` in `<wa-details>` for exclusively opening one in a group
+- Added `--checked-icon-scale` to `<wa-checkbox>`
+- Added `--tag-max-size` to `<wa-select>` when using `multiple`
 - Fixed a bug in `<wa-radio-group>` that caused radios to uncheck when assigning a numeric value [issue:924]
 - Fixed `<wa-button-group>` so dividers properly show between buttons
 - Fixed the tooltip position in `<wa-slider>` when using RTL
 - Fixed a bug in `<wa-details>` and native `<details>` styles that made the summary hard to click [issue:684]
+- Fixed a handful of bugs unify form control height across components and native elements
 - Improved CSS utilities and Native Styles to use [CSS layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) for easier end user customization (no more specificity conflicts — your CSS wins!)
 - Improved native `<button>` styles to properly space icons
 - Improved button appearances in `<wa-color-picker>`

packages/webawesome/docs/docs/tokens/component-groups.md

@@ -8,31 +8,38 @@ For components that share similar qualities, Web Awesome includes custom propert
 
 ## Form Controls
 
-Components such as [input](/docs/components/input), [select](/docs/components/select), [textarea](/docs/components/textarea), [checkbox](/docs/components/checkbox), etc. share a number of styles to give your forms a cohesive appearance. Web Awesome defines custom properties for these styles using the format `--wa-form-control-{style}`.
+Components such as [input](/docs/components/input), [select](/docs/components/select), [textarea](/docs/components/textarea), [checkbox](/docs/components/checkbox), and others share a number of styles to give your forms a cohesive appearance. Web Awesome defines custom properties for these styles using the format `--wa-form-control-{style}`.
 
 Not every form control uses all of these custom properties. For example, `<wa-radio>` defines its own height and border radius to achieve its familiar shape but shares many other styles with other components for a cohesive look and feel. Similarly, `<wa-button>` defines many of its own styles but matches the height and border width of other form controls.
 
-| Custom Property                             | Default Value                                                                                     |
+| Custom Property                             | Default Value                         |
-| ------------------------------------------- | ------------------------------------------------------------------------------------------------- |
+| ------------------------------------------- | ------------------------------------- |
-| `--wa-form-control-background-color`        | `var(--wa-color-surface-default)`                                                                 |
+| `--wa-form-control-background-color`        | `var(--wa-color-surface-default)`     |
-| `--wa-form-control-border-color`            | `var(--wa-color-neutral-border-loud)`                                                             |
+| `--wa-form-control-border-color`            | `var(--wa-color-neutral-border-loud)` |
-| `--wa-form-control-border-style`            | `var(--wa-border-style)`                                                                          |
+| `--wa-form-control-border-style`            | `var(--wa-border-style)`              |
-| `--wa-form-control-border-width`            | `var(--wa-border-width-s)`                                                                        |
+| `--wa-form-control-border-width`            | `var(--wa-border-width-s)`            |
-| `--wa-form-control-border-radius`           | `var(--wa-border-radius-m)`                                                                       |
+| `--wa-form-control-border-radius`           | `var(--wa-border-radius-m)`           |
-| `--wa-form-control-activated-color`         | `var(--wa-color-brand-fill-loud)`                                                                 |
+| `--wa-form-control-activated-color`         | `var(--wa-color-brand-fill-loud)`     |
-| `--wa-form-control-label-color`             | `var(--wa-color-neutral-border-loud)`                                                             |
+| `--wa-form-control-label-color`             | `var(--wa-color-neutral-border-loud)` |
-| `--wa-form-control-label-font-weight`       | `var(--wa-font-weight-normal)`                                                                    |
+| `--wa-form-control-label-font-weight`       | `var(--wa-font-weight-normal)`        |
-| `--wa-form-control-label-line-height`       | `var(--wa-line-height-normal)`                                                                    |
+| `--wa-form-control-label-line-height`       | `var(--wa-line-height-normal)`        |
-| `--wa-form-control-value-color`             | `var(--wa-color-text-normal)`                                                                     |
+| `--wa-form-control-value-color`             | `var(--wa-color-text-normal)`         |
-| `--wa-form-control-value-font-weight`       | `var(--wa-font-weight-body)`                                                                      |
+| `--wa-form-control-value-font-weight`       | `var(--wa-font-weight-body)`          |
-| `--wa-form-control-value-line-height`       | `var(--wa-line-height-condensed)`                                                                 |
+| `--wa-form-control-value-line-height`       | `var(--wa-line-height-condensed)`     |
-| `--wa-form-control-placeholder-color`       | `var(--wa-color-gray-60)`                                                                         |
+| `--wa-form-control-hint-color`              | `var(--wa-color-text-quiet)`          |
-| `--wa-form-control-required-content`        | `'*'`                                                                                             |
+| `--wa-form-control-hint-font-weight`        | `var(--wa-font-weight-body)`          |
-| `--wa-form-control-required-content-color`  | `inherit`                                                                                         |
+| `--wa-form-control-hint-line-height`        | `var(--wa-line-height-normal)`        |
-| `--wa-form-control-required-content-offset` | `-0.1em`                                                                                          |
+| `--wa-form-control-placeholder-color`       | `var(--wa-color-gray-60)`             |
+| `--wa-form-control-required-content`        | `'*'`                                 |
+| `--wa-form-control-required-content-color`  | `inherit`                             |
+| `--wa-form-control-required-content-offset` | `-0.1em`                              |
+| `--wa-form-control-padding-block`           | `0.75em`                              |
+| `--wa-form-control-padding-inline`          | `1em`                                 |
+| `--wa-form-control-height`                  | `round(calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)), 1px)` |
+| `--wa-form-control-toggle-size`             | `round(1.25em, 1px)`                  |
 
 ```html {.example}
-<form class="wa-block-spacing-l">
+<form class="wa-stack">
   <wa-input label="Input" placeholder="Placeholder"></wa-input>
   <wa-select label="Select" value="option-1">
     <wa-option value="option-1">Option 1</wa-option>
@@ -50,19 +57,6 @@ Not every form control uses all of these custom properties. For example, `<wa-ra
   <wa-slider label="Range"></wa-slider>
   <wa-button>Button</wa-button>
 </form>
-
-<style>
-  .wa-block-spacing-l > * + *, wa-radio {
-    display: block;
-    margin-block-start: var(--wa-space-l);
-  }
-  wa-radio {
-    margin-block-start: var(--wa-space-2xs);
-  }
-  wa-radio, wa-checkbox, wa-switch, wa-button {
-    width: fit-content;
-  }
-</style>
 ```
 
 ## Panels
@@ -76,7 +70,7 @@ Panels consist of components with larger, contained surface areas like [callout]
 | `--wa-panel-border-radius` | `var(--wa-border-radius-l)` |
 
 ```html {.example}
-<div class="wa-block-spacing-l">
+<div class="wa-stack">
   <wa-callout>
     <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
     This is a simple callout with an icon.
@@ -86,13 +80,6 @@ Panels consist of components with larger, contained surface areas like [callout]
     <code>wa-details</code>, at your service.
   </wa-details>
 </div>
-
-<style>
-  .wa-block-spacing-l > * + * {
-    display: block;
-    margin-block-start: var(--wa-space-l);
-  }
-</style>
 ```
 
 ## Tooltips

packages/webawesome/docs/docs/tokens/space.md

@@ -35,21 +35,19 @@ description: Lock down consistent spacing Web Awesome's space properties.
 
 Space properties are used intentionally throughout Web Awesome to create predictable rhythm and meaningful proximity. These properties use `rem` units in order to scale proportionately with the root font size.
 
-Each space property uses a `calc()` function with `--wa-space-scale` to scale all spacing at once. By default, this multiplier is `1`. The table below lists the result of the calculation.
+You can use `--wa-space-scale` to increase or decrease all spacing at once. By default, this multiplier is `1`.
 
-| Custom Property  | Default Value                   | Preview                                                               |
+The calculations for each size and the resulting pixel value (assuming a 16px root font size) are listed below.
-| ---------------- | ------------------------------- | --------------------------------------------------------------------- |
-| `--wa-space-3xs` | `0.125rem` <small>(2px)</small> | <div class="spacing-example" style="width: var(--wa-space-3xs)"></div> |
-| `--wa-space-2xs` | `0.25rem` <small>(4px)</small>  | <div class="spacing-example" style="width: var(--wa-space-2xs)"></div> |
-| `--wa-space-xs`  | `0.5rem` <small>(8px)</small>   | <div class="spacing-example" style="width: var(--wa-space-xs)"></div>  |
-| `--wa-space-s`   | `0.75rem` <small>(12px)</small> | <div class="spacing-example" style="width: var(--wa-space-s)"></div>   |
-| `--wa-space-m`   | `1rem` <small>(16px)</small>    | <div class="spacing-example" style="width: var(--wa-space-m)"></div>   |
-| `--wa-space-l`   | `1.25rem` <small>(20px)</small> | <div class="spacing-example" style="width: var(--wa-space-l)"></div>   |
-| `--wa-space-xl`  | `1.5rem` <small>(24px)</small>  | <div class="spacing-example" style="width: var(--wa-space-xl)"></div>  |
-| `--wa-space-2xl` | `2rem` <small>(32px)</small>    | <div class="spacing-example" style="width: var(--wa-space-2xl)"></div> |
-| `--wa-space-3xl` | `3rem` <small>(48px)</small>    | <div class="spacing-example" style="width: var(--wa-space-3xl)"></div> |
 
-When using space properties, it may be helpful to consider three distinct groups:
+| Custom Property  | Default Value                                                 | Preview                                                      -         |
-- Small-scale space (`3xs`, `2xs`, and `xs`) can be used for gaps between cooperating elements, such as a dropdown button and its menu, and padding within small components, such as badges and tooltips
+| ---------------- | ------------------------------------------------------------- | ---------------------------------------------------------------------- |
-- Normal space (`s`, `m`, and `l`) can be used for gaps between related elements with distinct touch targets and padding within typical interface elements, such as buttons and inputs
+| `--wa-space-3xs` | `calc(var(--wa-space-scale) * 0.125rem)` <small>(2px)</small> | <div class="spacing-example" style="width: var(--wa-space-3xs)"></div> |
-- Large-scale space (`xl`, `2xl`, and `3xl`) can be used for gaps between unrelated elements and padding within larger components, such as cards and dialogs
+| `--wa-space-2xs` | `calc(var(--wa-space-scale) * 0.25rem)` <small>(4px)</small>  | <div class="spacing-example" style="width: var(--wa-space-2xs)"></div> |
+| `--wa-space-xs`  | `calc(var(--wa-space-scale) * 0.5rem)` <small>(8px)</small>   | <div class="spacing-example" style="width: var(--wa-space-xs)"></div>  |
+| `--wa-space-s`   | `calc(var(--wa-space-scale) * 0.75rem)` <small>(12px)</small> | <div class="spacing-example" style="width: var(--wa-space-s)"></div>   |
+| `--wa-space-m`   | `calc(var(--wa-space-scale) * 1rem)` <small>(16px)</small>    | <div class="spacing-example" style="width: var(--wa-space-m)"></div>   |
+| `--wa-space-l`   | `calc(var(--wa-space-scale) * 1.5rem)` <small>(24px)</small>  | <div class="spacing-example" style="width: var(--wa-space-l)"></div>   |
+| `--wa-space-xl`  | `calc(var(--wa-space-scale) * 2rem)` <small>(32px)</small>    | <div class="spacing-example" style="width: var(--wa-space-xl)"></div>  |
+| `--wa-space-2xl` | `calc(var(--wa-space-scale) * 2.5rem)` <small>(40px)</small>  | <div class="spacing-example" style="width: var(--wa-space-2xl)"></div> |
+| `--wa-space-3xl` | `calc(var(--wa-space-scale) * 3rem)` <small>(48px)</small>    | <div class="spacing-example" style="width: var(--wa-space-3xl)"></div> |
+| `--wa-space-4xl` | `calc(var(--wa-space-scale) * 4rem)` <small>(64px)</small>    | <div class="spacing-example" style="width: var(--wa-space-4xl)"></div> |

packages/webawesome/docs/docs/tokens/typography.md

@@ -17,21 +17,32 @@ Font families are assigned specific roles — like heading or code — t
 
 ## Font Size
 
-Font sizes use the Major Second type scale, rounded to the nearest whole pixel assuming a 16px root font size. To maximize variation in larger font sizes, every other step on the scale is skipped.
+Font sizes use a ratio of 1.125 to scale sizes proportionally. Starting with the medium (`m`) font size, smaller sizes (`s` through `2xs`) are 1.125x smaller as the sizes decrease, and larger sizes (`l` through `4xl`) are _twice_ 1.125x larger as sizes increase — here, the ratio is doubled to maximize impact between sizes.
 
-Each font size uses a `calc()` function with `--wa-font-size-scale` to scale all font sizes at once. By default, this multiplier is `1`. The table below lists the result of the calculation.
+Each value uses `rem` units and is rounded to the nearest whole pixel when rendered with [`round()`](https://developer.mozilla.org/en-US/docs/Web/CSS/round).
+
+You can use `--wa-font-size-scale` to increase or decrease all font sizes at once. By default, this multiplier is `1`. 
+
+The calculations for each size and the resulting pixel value (assuming a 16px root font size) are listed below.
 
 | Custom Property      | Default Value                     | Preview                                                    |
 | -------------------- | --------------------------------- | ---------------------------------------------------------- |
-| `--wa-font-size-2xs` | `0.6875rem` <small>(11px)</small> | <div style="font-size: var(--wa-font-size-2xs)">AaBb</div> |
+| `--wa-font-size-2xs` | `round(calc(var(--wa-font-size-xs) / 1.125), 1px)` <small>(11px)</small> | <div style="font-size: var(--wa-font-size-2xs)">AaBb</div> |
-| `--wa-font-size-xs`  | `0.75rem` <small>(12px)</small>   | <div style="font-size: var(--wa-font-size-xs)">AaBb</div>  |
+| `--wa-font-size-xs`  | `round(calc(var(--wa-font-size-s) / 1.125), 1px)` <small>(12px)</small>   | <div style="font-size: var(--wa-font-size-xs)">AaBb</div>  |
-| `--wa-font-size-s`   | `0.875rem` <small>(14px)</small>  | <div style="font-size: var(--wa-font-size-s)">AaBb</div>   |
+| `--wa-font-size-s`   | `round(calc(var(--wa-font-size-m) / 1.125), 1px)` <small>(14px)</small>  | <div style="font-size: var(--wa-font-size-s)">AaBb</div>   |
-| `--wa-font-size-m`   | `1rem` <small>(16px)</small>      | <div style="font-size: var(--wa-font-size-m)">AaBb</div>   |
+| `--wa-font-size-m`   | `calc(1rem * var(--wa-font-size-scale))` <small>(16px)</small>      | <div style="font-size: var(--wa-font-size-m)">AaBb</div>   |
-| `--wa-font-size-l`   | `1.25rem` <small>(20px)</small>   | <div style="font-size: var(--wa-font-size-l)">AaBb</div>   |
+| `--wa-font-size-l`   | `round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px)` <small>(20px)</small>   | <div style="font-size: var(--wa-font-size-l)">AaBb</div>   |
-| `--wa-font-size-xl`  | `1.625rem` <small>(26px)</small>  | <div style="font-size: var(--wa-font-size-xl)">AaBb</div>  |
+| `--wa-font-size-xl`  | `round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px)` <small>(25px)</small>  | <div style="font-size: var(--wa-font-size-xl)">AaBb</div>  |
-| `--wa-font-size-2xl` | `2rem` <small>(32px)</small>      | <div style="font-size: var(--wa-font-size-2xl)">AaBb</div> |
+| `--wa-font-size-2xl` | `round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px)` <small>(32px)</small>      | <div style="font-size: var(--wa-font-size-2xl)">AaBb</div> |
-| `--wa-font-size-3xl` | `2.5625rem` <small>(41px)</small> | <div style="font-size: var(--wa-font-size-3xl)">AaBb</div> |
+| `--wa-font-size-3xl` | `round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px)` <small>(41px)</small> | <div style="font-size: var(--wa-font-size-3xl)">AaBb</div> |
-| `--wa-font-size-4xl` | `3.25rem` <small>(52px)</small>   | <div style="font-size: var(--wa-font-size-4xl)">AaBb</div> |
+| `--wa-font-size-4xl` | `round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125)` <small>(52px)</small>   | <div style="font-size: var(--wa-font-size-4xl)">AaBb</div> |
+
+You can also use these two custom properties make any font size proportionally smaller or larger to its parent.
+
+| Custom Property          | Default Value                           |
+| ------------------------ | --------------------------------------- |
+| `--wa-font-size-smaller` | `round(calc(1em / 1.125), 1px)`         |
+| `--wa-font-size-larger`  | `round(calc(1em * 1.125 * 1.125), 1px)` |
 
 ## Font Weight
 

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

@@ -36,9 +36,9 @@
   transition-duration: var(--wa-transition-fast);
   transition-timing-function: var(--wa-transition-easing);
   cursor: pointer;
-  padding: 0 var(--wa-space, var(--wa-space-m));
+  padding: 0 var(--wa-form-control-padding-inline);
   font-family: inherit;
-  font-size: var(--wa-size, var(--wa-font-size-m));
+  font-size: inherit;
   font-weight: var(--wa-font-weight-action);
   line-height: calc(var(--wa-form-control-height) - var(--border-width) * 2);
   height: var(--wa-form-control-height);
@@ -182,12 +182,12 @@ button ::slotted(wa-badge) {
 */
 
 slot[name='prefix']::slotted(*) {
-  margin-inline-end: var(--wa-space);
+  margin-inline-end: var(--wa-form-control-padding-inline);
 }
 
 slot[name='suffix']::slotted(*),
 .button:not(.visually-hidden-label) [part~='caret'] {
-  margin-inline-start: var(--wa-space);
+  margin-inline-start: var(--wa-form-control-padding-inline);
 }
 
 /*

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

@@ -1,9 +1,5 @@
 :host {
-  --space-s: var(--wa-space-l);
+  --spacing: var(--wa-space-l);
-  --space-m: var(--wa-space-xl);
-  --space-l: var(--wa-space-2xl);
-
-  --spacing: var(--wa-space);
   --border-width: var(--wa-panel-border-width);
   --outlined-background-color: var(--wa-color-surface-default);
   --outlined-border-color: var(--wa-color-surface-border);

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

@@ -26,7 +26,7 @@ import styles from './card.css';
  * @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)] - The amount of space around and between sections of the card. 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 {

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

@@ -11,7 +11,8 @@
   --border-width: var(--wa-form-control-border-width);
   --box-shadow: none;
   --checked-icon-color: var(--wa-color-brand-on-loud);
-  --toggle-size: 1lh;
+  --checked-icon-scale: 0.8;
+  --toggle-size: var(--wa-form-control-toggle-size);
 
   color: var(--wa-form-control-value-color);
   display: inline-flex;
@@ -43,7 +44,7 @@
     color var(--wa-transition-fast);
   transition-timing-function: var(--wa-transition-easing);
 
-  margin-inline-end: var(--wa-space-xs);
+  margin-inline-end: 0.5em;
 }
 
 :host [part~='base'] {
@@ -86,6 +87,7 @@ input {
 
 [part~='icon'] {
   display: flex;
+  scale: var(--checked-icon-scale);
 
   /* Without this, Safari renders the icon slightly to the left */
   &::part(svg) {

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

@@ -14,7 +14,7 @@
   --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-border-radius-circle);
+  --trigger-border-radius: var(--wa-form-control-border-radius);
 }
 
 .color-picker {
@@ -301,6 +301,7 @@
   background-color: transparent;
   border: none;
   cursor: pointer;
+  font-size: inherit;
   forced-color-adjust: none;
   width: var(--wa-form-control-height);
   height: var(--wa-form-control-height);
@@ -318,7 +319,7 @@
   background-color: currentColor;
   box-shadow:
     inset 0 0 0 var(--border-width) var(--wa-form-control-border-color),
-    inset 0 0 0 calc(var(--border-width) * 2) var(--wa-color-surface-default);
+    inset 0 0 0 calc(var(--border-width) * 3) var(--wa-color-surface-default);
 }
 
 .trigger-empty:before {

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

@@ -17,7 +17,7 @@
   border-radius: var(--wa-border-radius-m);
   color: inherit;
   font-size: inherit;
-  padding: var(--wa-space-xs);
+  padding: 0.5em;
   cursor: pointer;
   transition: color var(--wa-transition-fast) var(--wa-transition-easing);
 }

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

@@ -17,7 +17,7 @@
   border-radius: var(--wa-border-radius-m);
   font-size: inherit;
   color: inherit;
-  padding: var(--wa-space-xs);
+  padding: 0.5em;
   cursor: pointer;
   transition: color var(--wa-transition-fast) var(--wa-transition-easing);
   -webkit-appearance: none;

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

@@ -22,7 +22,7 @@
   border-width: var(--border-width);
   cursor: text;
   color: var(--wa-form-control-value-color);
-  font-size: var(--wa-size);
+  font-size: var(--wa-form-control-value-font-size);
   font-family: inherit;
   font-weight: var(--wa-form-control-value-font-weight);
   line-height: var(--wa-form-control-value-line-height);
@@ -35,7 +35,7 @@
   transition-timing-function: var(--wa-transition-easing);
   background-color: var(--background-color, var(--wa-form-control-background-color));
   box-shadow: var(--box-shadow);
-  padding: var(--wa-space-smaller) var(--wa-space);
+  padding: 0 var(--wa-form-control-padding-inline);
 
   &:focus-within {
     outline: var(--wa-focus-ring);
@@ -142,11 +142,11 @@ textarea {
 }
 
 .prefix::slotted(*) {
-  margin-inline-end: var(--wa-space);
+  margin-inline-end: var(--wa-form-control-padding-inline);
 }
 
 .suffix::slotted(*) {
-  margin-inline-start: var(--wa-space);
+  margin-inline-start: var(--wa-form-control-padding-inline);
 }
 
 /*

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

@@ -9,7 +9,7 @@
   display: flex;
   align-items: stretch;
   font: inherit;
-  padding: var(--wa-space-xs) var(--wa-space-2xs);
+  padding: 0.5em 0.25em;
   line-height: var(--wa-line-height-condensed);
   transition: fill var(--wa-transition-normal) var(--wa-transition-easing);
   user-select: none;
@@ -39,11 +39,11 @@
 
 :host([loading]) wa-spinner {
   --indicator-color: currentColor;
-  --track-width: 0.0625rem;
+  --track-width: round(0.0625em, 1px);
   position: absolute;
-  font-size: 0.8em;
+  font-size: var(--wa-font-size-smaller);
   top: calc(50% - 0.5em);
-  left: 0.5rem;
+  left: 0.6em;
   opacity: 1;
 }
 
@@ -61,7 +61,7 @@
 }
 
 .prefix::slotted(*) {
-  margin-inline-end: var(--wa-space-xs);
+  margin-inline-end: 0.5em;
 }
 
 .suffix {
@@ -71,7 +71,7 @@
 }
 
 .suffix::slotted(*) {
-  margin-inline-start: var(--wa-space-xs);
+  margin-inline-start: 0.5em;
 }
 
 /* Safe triangle */
@@ -114,8 +114,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.875em;
+  font-size: var(--wa-font-size-smaller);
-  width: var(--wa-space-xl);
+  width: 2em;
   visibility: hidden;
 }
 

packages/webawesome/src/components/menu-label/menu-label.css

@@ -1,9 +1,9 @@
 :host {
   display: block;
   color: var(--wa-color-text-quiet);
-  font-size: var(--wa-font-size-s);
+  font-size: var(--wa-font-size-smaller);
   font-weight: var(--wa-font-weight-semibold);
-  padding: var(--wa-space-2xs) calc(var(--wa-space-2xs) + var(--wa-space-xl));
+  padding: 0.5em 2.25em;
   -webkit-user-select: none;
   user-select: none;
 }

packages/webawesome/src/components/menu/menu.css

@@ -5,11 +5,11 @@
   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);
-  padding: var(--wa-space-xs) 0;
+  padding: 0.5em 0;
   overflow: auto;
   overscroll-behavior: none;
 }
 
 ::slotted(wa-divider) {
-  --spacing: var(--wa-space-xs);
+  --spacing: 0.5em;
 }

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

@@ -13,7 +13,7 @@
   display: flex;
   align-items: center;
   font: inherit;
-  padding: var(--wa-space-xs) var(--wa-space-m) var(--wa-space-xs) var(--wa-space-2xs);
+  padding: 0.5em 1em 0.5em 0.25em;
   line-height: var(--wa-line-height-condensed);
   transition: fill var(--wa-transition-normal) var(--wa-transition-easing);
   cursor: pointer;
@@ -51,9 +51,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.875em;
+  font-size: var(--wa-font-size-smaller);
   visibility: hidden;
-  width: var(--wa-space-xl);
+  width: 2em;
 }
 
 :host(:state(selected)) .check {
@@ -68,11 +68,11 @@
 }
 
 .prefix::slotted(*) {
-  margin-inline-end: var(--wa-space-xs);
+  margin-inline-end: 0.5em;
 }
 
 .suffix::slotted(*) {
-  margin-inline-start: var(--wa-space-xs);
+  margin-inline-start: 0.5em;
 }
 
 @media (forced-colors: active) {

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

@@ -79,7 +79,7 @@
   flex-direction: column;
   width: max-content;
   max-width: var(--max-width);
-  padding: var(--wa-space);
+  padding: var(--wa-space-l);
   background-color: var(--wa-color-surface-default);
   border: var(--wa-panel-border-width) solid var(--wa-color-surface-border);
   border-radius: var(--wa-panel-border-radius);

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

@@ -26,18 +26,18 @@
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
-  gap: var(--wa-space-s);
+  gap: 0.75em;
 }
 
 /* Horizontal */
 :host([orientation='horizontal']) [part~='form-control-input'] {
   flex-direction: row;
-  gap: var(--wa-space-m);
+  gap: 1em;
 }
 
 /* Help text */
 [part~='hint'] {
-  margin-block-start: var(--wa-space-xs);
+  margin-block-start: 0.5em;
 }
 
 /* Radios have the "button" appearance */

packages/webawesome/src/components/radio-group/radio-group.test.ts

@@ -2,7 +2,7 @@ import { aTimeout, expect, oneEvent } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { html } from 'lit';
 import sinon from 'sinon';
-import { clickOnElement } from '../../internal/test.js';
+// import { clickOnElement } from '../../internal/test.js';
 import { fixtures } from '../../internal/test/fixture.js';
 import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
 import type WaRadio from '../radio/radio.js';
@@ -106,8 +106,11 @@ describe('<wa-radio-group>', () => {
           expect(radioGroup.hasCustomState('user-invalid')).to.be.false;
           expect(radioGroup.hasCustomState('user-valid')).to.be.false;
 
-          await clickOnElement(secondRadio);
+          // TODO: Go back to clickOnElement when we can determine why CI is not cleaning up elements.
+          // await clickOnElement(secondRadio);
+          secondRadio.click()
           await secondRadio.updateComplete;
+          await radioGroup.updateComplete
 
           expect(radioGroup.checkValidity()).to.be.true;
           expect(radioGroup.hasCustomState('user-invalid')).to.be.false;
@@ -130,7 +133,10 @@ describe('<wa-radio-group>', () => {
           expect(radioGroup.hasCustomState('user-invalid')).to.be.false;
           expect(radioGroup.hasCustomState('user-valid')).to.be.false;
 
-          await clickOnElement(secondRadio);
+          // TODO: Go back to clickOnElement when we can determine why CI is not cleaning up elements.
+          // await clickOnElement(secondRadio);
+          secondRadio.click()
+          await radioGroup.updateComplete;
           radioGroup.value = '';
           await radioGroup.updateComplete;
 

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

@@ -7,8 +7,8 @@
   --border-width: var(--wa-form-control-border-width);
   --box-shadow: none;
   --checked-icon-color: var(--wa-form-control-activated-color);
-  --checked-icon-scale: 0.75;
+  --checked-icon-scale: 0.7;
-  --toggle-size: round(1lh, 1px);
+  --toggle-size: var(--wa-form-control-toggle-size);
 
   color: var(--wa-form-control-value-color);
   display: inline-flex;
@@ -36,7 +36,7 @@
 }
 
 [part~='hint'] {
-  margin-block-start: var(--wa-space-3xs);
+  margin-block-start: 0.5em;
 }
 
 /* Default appearance */
@@ -63,7 +63,7 @@
       color var(--wa-transition-fast);
     transition-timing-function: var(--wa-transition-easing);
 
-    margin-inline-end: var(--wa-space-xs);
+    margin-inline-end: 0.5em;
   }
 
   .checked-icon {
@@ -101,7 +101,7 @@
   background-color: var(--wa-color-surface-default);
   border: var(--border-width) var(--border-style) var(--wa-form-control-border-color);
   border-radius: var(--wa-border-radius-m);
-  padding: 0 var(--wa-space);
+  padding: 0 var(--wa-form-control-padding-inline);
   transition:
     background-color var(--wa-transition-fast),
     border-color var(--wa-transition-fast);

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

@@ -1,13 +1,7 @@
 :host {
-  --size-xs: var(--wa-space-s);
-  --size-s: var(--wa-space-m);
-  --size-m: var(--wa-space-l);
-  --size-l: var(--wa-space-xl);
-
   --symbol-color: var(--wa-color-neutral-on-quiet);
   --symbol-color-active: var(--wa-color-yellow-70);
-  --symbol-size: var(--wa-size);
+  --symbol-spacing: 0.125em;
-  --symbol-spacing: var(--wa-space-3xs);
 
   display: inline-flex;
 }

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

@@ -6,32 +6,7 @@ label:has(select),
   --outlined-text-color: var(--wa-form-control-value-color);
   --border-width: var(--wa-form-control-border-width);
   --box-shadow: initial;
-}
+  --tag-max-size: 10ch;
-
-:host [part~='combobox'] {
-  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(--border-width);
-  box-shadow: var(--box-shadow);
-  color: var(--wa-form-control-value-color);
-  cursor: pointer;
-  font-family: inherit;
-  font-size: var(--wa-size);
-  font-weight: var(--wa-form-control-value-font-weight);
-  line-height: var(--wa-form-control-value-line-height);
-  min-width: 0;
-  overflow: hidden;
-  padding: var(--wa-space-smaller) var(--wa-space);
-  position: relative;
-  vertical-align: middle;
-  width: 100%;
-  transition:
-    background-color var(--wa-transition-normal),
-    border var(--wa-transition-normal),
-    outline var(--wa-transition-fast);
-  transition-timing-function: var(--wa-transition-easing);
 }
 
 /* Add ellipses to multi select options */
@@ -40,7 +15,7 @@ label:has(select),
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  max-width: 7ch;
+  max-width: var(--tag-max-size);
 }
 
 :host .disabled [part~='combobox'] {
@@ -86,21 +61,31 @@ label:has(select),
 
   min-height: var(--wa-form-control-height);
 
-  :host([size='small']) & {
+  background-color: var(--background-color, var(--wa-form-control-background-color));
-    &:not(.placeholder-visible *) {
+  border-color: var(--border-color, var(--wa-form-control-border-color));
-      padding-block: 2px;
+  border-radius: var(--wa-form-control-border-radius);
-    }
+  border-style: var(--wa-form-control-border-style);
-  }
+  border-width: var(--border-width);
+  box-shadow: var(--box-shadow);
+  color: var(--wa-form-control-value-color);
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: var(--wa-form-control-value-font-weight);
+  line-height: var(--wa-form-control-value-line-height);
+  overflow: hidden;
+  padding: 0 var(--wa-form-control-padding-inline);
+  position: relative;
+  vertical-align: middle;
+  width: 100%;
+  transition:
+    background-color var(--wa-transition-normal),
+    border var(--wa-transition-normal),
+    outline var(--wa-transition-fast);
+  transition-timing-function: var(--wa-transition-easing);
 
-  :host([size='large']) & {
+  :host([multiple]) .select:not(.placeholder-visible) & {
-    &:not(.placeholder-visible *) {
-      padding-block: 4px;
-    }
-  }
-
-  :host([multiple]) .select:not(.placeholder-visible) {
     padding-inline-start: 0;
-    padding-block: 3px;
+    padding-block: calc(var(--wa-form-control-height) * 0.1 - var(--wa-form-control-border-width));
   }
 
   /* Pills */
@@ -160,16 +145,8 @@ label:has(select),
   flex: 1;
   align-items: center;
   flex-wrap: wrap;
-  margin-inline-start: var(--wa-space-2xs);
+  margin-inline-start: 0.25em;
-  gap: 3px;
+  gap: 0.25em;
-
-  :host([size='small']) & {
-    gap: 2px;
-  }
-
-  :host([size='large']) & {
-    gap: 4px;
-  }
 
   &::slotted(wa-tag) {
     cursor: pointer !important;
@@ -192,15 +169,15 @@ label:has(select),
 }
 
 .suffix::slotted(*) {
-  margin-inline-start: var(--wa-space-s);
+  margin-inline-start: var(--wa-form-control-padding-inline);
 }
 
 .prefix::slotted(*) {
-  margin-inline-end: var(--wa-space);
+  margin-inline-end: var(--wa-form-control-padding-inline);
 }
 
 :host([multiple]) .prefix::slotted(*) {
-  margin-inline: var(--wa-space);
+  margin-inline: var(--wa-form-control-padding-inline);
 }
 
 /* Clear button */
@@ -215,7 +192,7 @@ label:has(select),
   padding: 0;
   transition: color var(--wa-transition-normal);
   cursor: pointer;
-  margin-inline-start: var(--wa-space);
+  margin-inline-start: var(--wa-form-control-padding-inline);
 
   &:focus {
     outline: none;
@@ -238,7 +215,7 @@ label:has(select),
   color: var(--wa-color-neutral-on-quiet);
   transition: rotate var(--wa-transition-slow) ease;
   rotate: 0deg;
-  margin-inline-start: var(--wa-space-s);
+  margin-inline-start: var(--wa-form-control-padding-inline);
 
   .open & {
     rotate: -180deg;
@@ -256,7 +233,7 @@ label:has(select),
   border-radius: var(--wa-border-radius-m);
   border-style: var(--wa-border-style);
   border-width: var(--border-width);
-  padding-block: var(--wa-space-xs);
+  padding-block: 0.5em;
   padding-inline: 0;
   overflow: auto;
   overscroll-behavior: none;
@@ -266,15 +243,15 @@ label:has(select),
   max-height: var(--auto-size-available-height);
 
   &::slotted(wa-divider) {
-    --spacing: var(--wa-space-xs);
+    --spacing: 0.5em;
   }
 }
 
 slot:not([name])::slotted(small) {
   display: block;
-  font-size: var(--wa-font-size-s);
+  font-size: var(--wa-font-size-smaller);
   font-weight: var(--wa-font-weight-semibold);
   color: var(--wa-color-text-quiet);
-  padding-block: var(--wa-space-xs);
+  padding-block: 0.5em;
-  padding-inline: var(--wa-space-xl);
+  padding-inline: 2.25em;
 }

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

@@ -79,6 +79,7 @@ import styles from './select.css';
  * @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.
  */

packages/webawesome/src/components/slider/slider.css

@@ -2,7 +2,7 @@
   --thumb-color: var(--wa-form-control-activated-color);
   --thumb-gap: calc(var(--thumb-size) * 0.125);
   --thumb-shadow: initial;
-  --thumb-size: calc(1rem * var(--wa-form-control-value-line-height));
+  --thumb-size: calc(1em * var(--wa-form-control-value-line-height));
 
   --track-color-active: var(--wa-color-neutral-fill-normal);
   --track-color-inactive: var(--wa-color-neutral-fill-normal);
@@ -22,6 +22,7 @@ input[type='range'] {
   border-radius: calc(var(--track-height) / 2);
   width: 100%;
   height: var(--track-height);
+  font-size: inherit;
   line-height: var(--wa-form-control-height);
   vertical-align: middle;
   margin: 0;
@@ -152,7 +153,7 @@ input[type='range']:focus {
   line-height: var(--wa-tooltip-line-height);
   color: var(--wa-tooltip-content-color);
   opacity: 0;
-  padding: var(--wa-space-2xs) var(--wa-space-xs);
+  padding: 0.25em 0.5em;
   transition: var(--wa-transition-normal) opacity;
   pointer-events: none;
 

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

@@ -6,7 +6,7 @@
   --border-style: var(--wa-form-control-border-style);
   --border-width: var(--wa-form-control-border-width);
   --box-shadow: initial;
-  --height: calc(1em * var(--wa-form-control-value-line-height));
+  --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;
@@ -14,6 +14,7 @@
   --width: calc(var(--height) * 1.75);
 
   display: inline-flex;
+  line-height: var(--wa-form-control-value-line-height);
 }
 
 label {

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

@@ -22,7 +22,7 @@
 
 .tab-group-has-scroll-controls .nav-container {
   position: relative;
-  padding: 0 var(--wa-space-xl);
+  padding: 0 1.5em;
 }
 
 .body {
@@ -37,7 +37,7 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  width: var(--wa-space-xl);
+  width: 1.5em;
 }
 
 .scroll-button-start {
@@ -96,7 +96,7 @@
 }
 
 .tab-group-top ::slotted(wa-tab-panel) {
-  --padding: var(--wa-space-m) 0;
+  --padding: var(--wa-space-xl) 0;
 }
 
 /*
@@ -147,7 +147,7 @@
 }
 
 .tab-group-bottom ::slotted(wa-tab-panel) {
-  --padding: var(--wa-space-m) 0;
+  --padding: var(--wa-space-xl) 0;
 }
 
 /*
@@ -184,7 +184,7 @@
 }
 
 .tab-group-start ::slotted(wa-tab-panel) {
-  --padding: 0 var(--wa-space-m);
+  --padding: 0 var(--wa-space-xl);
 }
 
 /*
@@ -221,5 +221,5 @@
 }
 
 .tab-group-end ::slotted(wa-tab-panel) {
-  --padding: 0 var(--wa-space-m);
+  --padding: 0 var(--wa-space-xl);
 }

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

@@ -9,7 +9,7 @@
   display: inline-flex;
   align-items: center;
   font: inherit;
-  padding: var(--wa-space-m) var(--wa-space-l);
+  padding: 1em 1.5em;
   white-space: nowrap;
   user-select: none;
   -webkit-user-select: none;
@@ -17,11 +17,11 @@
   transition: color var(--wa-transition-fast) var(--wa-transition-easing);
 
   ::slotted(wa-icon:first-child) {
-    margin-inline-end: var(--wa-space-xs);
+    margin-inline-end: 0.5em;
   }
 
   ::slotted(wa-icon:last-child) {
-    margin-inline-start: var(--wa-space-xs);
+    margin-inline-start: 0.5em;
   }
 }
 

packages/webawesome/src/components/tag/tag.css

@@ -1,10 +1,6 @@
 :host {
-  --size-s: var(--wa-font-size-xs);
-  --size-m: var(--wa-font-size-s);
-  --size-l: var(--wa-font-size-m);
-
   display: inline-flex;
-  gap: 0.33em;
+  gap: 0.5em;
   border-radius: var(--wa-border-radius-m);
   align-items: center;
   background-color: var(--background-color, var(--wa-color-fill-quiet));
@@ -12,19 +8,23 @@
   border-style: var(--wa-border-style);
   border-width: var(--wa-border-width-s);
   color: var(--text-color, var(--wa-color-on-normal));
+  font-size: inherit;
   line-height: 1;
   white-space: nowrap;
   user-select: none;
   -webkit-user-select: none;
   height: calc(var(--wa-form-control-height) * 0.8);
   line-height: calc(var(--wa-form-control-height) - var(--wa-form-control-border-width) * 2);
-  padding: 0 var(--wa-space-smaller);
+  padding: 0 0.75em;
+}
+
+.content {
+  font-size: var(--wa-font-size-smaller);
 }
 
 [part='remove-button'] {
   color: inherit;
   padding: 0;
-  margin-inline-start: 0.75em;
 }
 
 [part='remove-button']::part(base) {

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

@@ -38,8 +38,8 @@ textarea {
   background: transparent;
   font: inherit;
   color: inherit;
-  padding: var(--wa-space-smaller) var(--wa-space);
+  padding: calc(var(--wa-form-control-padding-block) - ((1lh - 1em) / 2)) var(--wa-form-control-padding-inline); /* accounts for the larger line height of textarea content */
-  min-height: calc(var(--wa-form-control-height) - var(--border-width) * 2 - (var(--wa-space-smaller) * 2));
+  min-height: calc(var(--wa-form-control-height) - var(--border-width) * 2);
   box-shadow: none;
   margin: 0;
 

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

@@ -2,7 +2,7 @@
   --background-color: var(--wa-tooltip-background-color);
   --border-radius: var(--wa-tooltip-border-radius);
   --max-width: 30ch;
-  --padding: var(--wa-space-2xs) var(--wa-space-xs);
+  --padding: 0.25em 0.5em;
 
   /** These styles are added so we don't interfere in the DOM. */
   display: inline-block;

packages/webawesome/src/styles/component/form-control.css

@@ -9,7 +9,7 @@
   color: var(--wa-form-control-label-color);
   font-weight: var(--wa-form-control-label-font-weight);
   line-height: var(--wa-form-control-label-line-height);
-  margin-block-end: var(--wa-space-xs);
+  margin-block-end: 0.5em;
 
   :host([required]) &::after {
     content: var(--wa-form-control-required-content);
@@ -21,9 +21,11 @@
 /* Help text */
 [part~='hint'] {
   display: block;
-  color: var(--wa-color-text-quiet);
+  color: var(--wa-form-control-hint-color);
-  margin-block-start: var(--wa-space-xs);
+  font-weight: var(--wa-form-control-hint-font-weight);
-  font-size: var(--wa-size-smaller, 85%);
+  line-height: var(--wa-form-control-hint-line-height);
+  margin-block-start: 0.5em;
+  font-size: var(--wa-font-size-smaller);
   line-height: var(--wa-form-control-label-line-height);
 
   &:not(.has-slotted) {

packages/webawesome/src/styles/native.css

@@ -435,7 +435,7 @@
 
     & + :is(input:not([type='checkbox'], [type='radio']), textarea, select),
     & > :is(input:not([type='checkbox'], [type='radio']), textarea, select) {
-      margin-block-start: var(--wa-space-xs);
+      margin-block-start: 0.5em;
     }
   }
 
@@ -500,11 +500,13 @@
     --border-width: var(--wa-form-control-border-width);
     --box-shadow: none;
     --checked-icon-color: var(--wa-color-brand-on-loud);
-    --toggle-size: 1lh;
+    --checked-icon-scale: 0.8;
+    --toggle-size: var(--wa-form-control-toggle-size);
 
     color: var(--wa-form-control-value-color);
     display: inline-flex;
     font-family: inherit;
+    font-size: var(--wa-form-control-value-font-size);
     font-weight: var(--wa-form-control-value-font-weight);
     line-height: var(--wa-form-control-value-line-height);
     user-select: none;
@@ -519,11 +521,12 @@
     &:checked::after {
       background-color: currentColor;
       content: '';
-      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>')
+      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>')
         center no-repeat;
       position: absolute;
       height: 100%;
       width: 100%;
+      scale: var(--checked-icon-scale);
     }
 
     &:indeterminate::after {
@@ -558,7 +561,7 @@
       color var(--wa-transition-fast);
     transition-timing-function: var(--wa-transition-easing);
 
-    margin-inline-end: var(--wa-space-xs);
+    margin-inline-end: 0.5em;
   }
 
   /* Set cursor for input and labels */
@@ -600,7 +603,7 @@
     --box-shadow: none;
     --checked-icon-color: var(--wa-form-control-activated-color);
     --checked-icon-scale: 0.75;
-    --toggle-size: round(1lh, 1px);
+    --toggle-size: var(--wa-form-control-toggle-size);
 
     color: var(--wa-form-control-value-color);
     display: inline-flex;
@@ -648,7 +651,7 @@
       color var(--wa-transition-fast);
     transition-timing-function: var(--wa-transition-easing);
 
-    margin-inline-end: var(--wa-space-xs);
+    margin-inline-end: 0.5em;
   }
 
   /* Set cursor for input and labels */
@@ -699,14 +702,14 @@
     color: var(--wa-form-control-value-color);
     cursor: pointer;
     font-family: inherit;
-    font-size: var(--wa-size);
     font-weight: var(--wa-form-control-value-font-weight);
     line-height: var(--wa-form-control-value-line-height);
     min-width: 0;
     overflow: hidden;
-    padding: var(--wa-space-smaller) var(--wa-space);
+    padding: 0 var(--wa-form-control-padding-inline);
     position: relative;
     vertical-align: middle;
+    min-height: var(--wa-form-control-height);
     width: 100%;
     transition:
       background-color var(--wa-transition-normal),
@@ -734,10 +737,14 @@
 
     background-image: var(--icon-caret), var(--icon-caret);
     background-repeat: no-repeat;
-    background-position: center right var(--wa-space);
+    background-position: center right var(--wa-form-control-padding-inline);
     background-blend-mode: hue, difference;
   }
 
+  select.wa-pill {
+    border-radius: var(--wa-border-radius-pill) !important;
+  }
+
   /* Buttons */
   button,
   input[type='button'],
@@ -758,7 +765,6 @@
     --text-color-hover: var(--text-color);
     --text-color-active: var(--text-color);
 
-    display: flex; /* Display flex with gap for icon spacing */
     gap: 0.5em;
     border-radius: var(--wa-form-control-border-radius);
     border-style: var(--wa-border-style);
@@ -775,9 +781,8 @@
     transition-duration: var(--wa-transition-fast);
     transition-timing-function: var(--wa-transition-easing);
     cursor: pointer;
-    padding: 0 var(--wa-space, var(--wa-space-m));
+    padding: 0 var(--wa-form-control-padding-inline);
     font-family: inherit;
-    font-size: var(--wa-size, var(--wa-font-size-m));
     font-weight: var(--wa-font-weight-action);
     height: var(--wa-form-control-height);
     line-height: calc(var(--wa-form-control-height) - var(--border-width) * 2);
@@ -877,11 +882,12 @@
     border-style: var(--wa-form-control-border-style);
     cursor: text;
     color: var(--wa-form-control-value-color);
-    font-size: var(--wa-size);
+    font-size: var(--wa-form-control-value-size);
     font-family: inherit;
     font-weight: var(--wa-form-control-value-font-weight);
     line-height: var(--wa-form-control-value-line-height);
     vertical-align: middle;
+    height: var(--wa-form-control-height);
     width: 100%;
     transition:
       background-color var(--wa-transition-normal),
@@ -892,7 +898,15 @@
     background-color: var(--background-color, var(--wa-form-control-background-color));
     border-width: var(--border-width, var(--wa-form-control-border-width));
     box-shadow: var(--box-shadow, initial);
-    padding: var(--wa-space-smaller) var(--wa-space);
+    padding: 0 var(--wa-form-control-padding-inline);
+
+    /* Textareas only */
+    &:not(input) {
+      line-height: var(--wa-line-height-normal);
+      height: auto;
+      min-height: var(--wa-form-control-height);
+      padding: calc(var(--wa-form-control-padding-block) - ((1lh - 1em) / 2)) var(--wa-form-control-padding-inline); /* accounts for the larger line height of textarea content */
+    }
 
     /* Style focused inputs */
     &:focus-within {
@@ -962,13 +976,15 @@
 
   /* Color picker */
   input[type='color'] {
+    --border-width: var(--wa-form-control-border-width);
+    --trigger-border-radius: var(--wa-form-control-border-radius);
     display: block;
-    border-radius: calc(infinity * 1px);
+    border-radius: var(--trigger-border-radius);
     background: transparent;
-    padding: var(--wa-form-control-border-width);
+    padding: calc(var(--border-width) * 2);
-    width: calc(var(--wa-form-control-height) - 2px);
+    width: var(--wa-form-control-height);
-    height: calc(var(--wa-form-control-height) - 2px);
+    height: var(--wa-form-control-height);
-    border: var(--wa-form-control-border-width) var(--wa-border-style) var(--wa-form-control-border-color);
+    border: var(--border-width) var(--wa-border-style) var(--wa-form-control-border-color);
     cursor: pointer;
     forced-color-adjust: none;
 
@@ -979,12 +995,12 @@
 
     &::-webkit-color-swatch {
       border: none;
-      border-radius: inherit;
+      border-radius: calc(var(--trigger-border-radius) - var(--border-width) * 3);
     }
 
     &::-moz-color-swatch {
       border: none;
-      border-radius: inherit;
+      border-radius: calc(var(--trigger-border-radius) - var(--border-width) * 3);
     }
 
     &:focus-visible {

packages/webawesome/src/styles/themes/active/dimension.css

@@ -20,7 +20,7 @@
         box-shadow:
           var(--wa-theme-active-shadow-pop-out),
           inset 0 0 0 var(--border-width) var(--border-color, var(--background-color, transparent));
-        padding-inline: calc(var(--wa-space) + var(--border-width));
+        padding-inline: calc(var(--wa-form-control-padding-inline) + var(--border-width));
       }
 
       &:not([disabled], [loading]):active {

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

@@ -16,11 +16,6 @@
   .wa-dark,
   .wa-light,
   .wa-invert {
-    /**
-   * Spacing
-   */
-    --wa-space-scale: 1.25;
-
     /**
    * Borders
    */
@@ -53,5 +48,8 @@
     --wa-form-control-label-color: var(--wa-color-text-normal);
     --wa-form-control-label-font-weight: var(--wa-font-weight-bold);
     --wa-form-control-label-line-height: var(--wa-line-height-normal);
+
+    --wa-form-control-padding-block: 1em;
+    --wa-form-control-padding-inline: 1.25em;
   }
 }

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

@@ -14,8 +14,7 @@
         --background-color-active: var(--border-color-active);
         --border-color-hover: var(--wa-color-shadow);
         --border-color-active: var(--wa-color-shadow);
-        --box-shadow: var(--wa-shadow-offset-x-s) max(var(--wa-shadow-offset-y-s), var(--border-width)) 0 0
+        --box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) 0 0 var(--wa-color-shadow);
-          var(--wa-color-shadow);
 
         .wa-dark &,
         .wa-invert & {
@@ -50,6 +49,7 @@
       ) {
       &:where(:not(wa-button)),
       &::part(base) {
+        height: calc(var(--wa-form-control-height) - var(--wa-shadow-offset-y-s));
         margin-bottom: var(--wa-shadow-offset-y-s);
         margin-right: var(--wa-shadow-offset-x-s);
       }
@@ -57,7 +57,7 @@
         &:where(:not(wa-button)),
         &::part(base) {
           box-shadow: none;
-          transform: translate(var(--wa-shadow-offset-x-s), max(var(--wa-shadow-offset-y-s), var(--border-width)));
+          transform: translate(var(--wa-shadow-offset-x-s), var(--wa-shadow-offset-y-s));
         }
       }
     }

packages/webawesome/src/styles/themes/default/groups.css

@@ -21,18 +21,30 @@
 
     --wa-form-control-label-color: var(--wa-color-text-normal);
     --wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
-    --wa-form-control-label-line-height: var(--wa-line-height-normal);
+    --wa-form-control-label-line-height: var(--wa-line-height-condensed);
 
     --wa-form-control-value-color: var(--wa-color-text-normal);
     --wa-form-control-value-font-weight: var(--wa-font-weight-body);
     --wa-form-control-value-line-height: var(--wa-line-height-condensed);
 
-    --wa-form-control-placeholder-color: var(--wa-color-gray-60);
+    --wa-form-control-hint-color: var(--wa-color-text-quiet);
+    --wa-form-control-hint-font-weight: var(--wa-font-weight-body);
+    --wa-form-control-hint-line-height: var(--wa-line-height-normal);
+
+    --wa-form-control-placeholder-color: var(--wa-color-gray-50);
 
     --wa-form-control-required-content: '*';
     --wa-form-control-required-content-color: inherit;
     --wa-form-control-required-content-offset: -0.1em;
 
+    --wa-form-control-padding-block: 0.75em;
+    --wa-form-control-padding-inline: 1em;
+    --wa-form-control-height: round(
+      calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
+      1px
+    );
+    --wa-form-control-toggle-size: round(1.25em, 1px);
+
     /* Panels */
     --wa-panel-border-style: var(--wa-border-style);
     --wa-panel-border-width: var(--wa-border-width-s);

packages/webawesome/src/styles/themes/default/space.css

@@ -11,9 +11,9 @@
     --wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
     --wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
     --wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
-    --wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
+    --wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
-    --wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
+    --wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
-    --wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
+    --wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 40px */
     --wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
     --wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */
   }

packages/webawesome/src/styles/themes/default/typography.css

@@ -10,20 +10,23 @@
     --wa-font-family-code: ui-monospace, monospace;
     --wa-font-family-longform: ui-serif, serif;
 
-    /* The default type scale is roughly based on the Major Second scale (x1.125),
+    /* Font sizes use a ratio of 1.125 to scale sizes proportionally.
-   * with each value rounded to the nearest whole pixel based on a 16px root font size.
+   * For larger font sizes, each size is twice 1.125x larger to maximize impact.
-   * For larger font sizes, every other step on the scale is skipped in order to maximize variation.
+   * Each value uses `rem` units and is rounded to the nearest whole pixel when rendered.
    * A multiplier is provided to uniformly increase or decrease all font sizes. */
     --wa-font-size-scale: 1;
-    --wa-font-size-2xs: calc(0.6875rem * var(--wa-font-size-scale)); /* 11px */
+    --wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */
-    --wa-font-size-xs: calc(0.75rem * var(--wa-font-size-scale)); /* 12px */
+    --wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */
-    --wa-font-size-s: calc(0.875rem * var(--wa-font-size-scale)); /* 14px */
+    --wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */
     --wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
-    --wa-font-size-l: calc(1.25rem * var(--wa-font-size-scale)); /* 20px */
+    --wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */
-    --wa-font-size-xl: calc(1.625rem * var(--wa-font-size-scale)); /* 26px */
+    --wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */
-    --wa-font-size-2xl: calc(2rem * var(--wa-font-size-scale)); /* 32px */
+    --wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */
-    --wa-font-size-3xl: calc(2.5625rem * var(--wa-font-size-scale)); /* 41px */
+    --wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */
-    --wa-font-size-4xl: calc(3.25rem * var(--wa-font-size-scale)); /* 52px */
+    --wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */
+
+    --wa-font-size-smaller: round(calc(1em / 1.125), 1px);
+    --wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
 
     --wa-font-weight-light: 300;
     --wa-font-weight-normal: 400;

packages/webawesome/src/styles/themes/glossy/dimension.css

@@ -28,7 +28,7 @@
       &::part(base) {
         border-width: 0px;
         margin-bottom: var(--wa-shadow-offset-y-s);
-        padding-inline: calc(var(--wa-space) + var(--border-width));
+        padding-inline: calc(var(--wa-form-control-padding-inline) + var(--border-width));
         transition: all var(--wa-transition-fast);
       }
 

packages/webawesome/src/styles/themes/matter/overrides.css

@@ -24,7 +24,7 @@
       &:not([appearance~='plain']) {
         &:where(:not(wa-button)),
         &::part(base) {
-          padding-inline: calc(var(--wa-space) * 1.5);
+          padding-inline: calc(var(--wa-form-control-padding-inline) * 1.5);
         }
       }
 
@@ -128,12 +128,12 @@
         pointer-events: none;
 
         position: absolute;
-        left: calc(var(--wa-space) - 0.25em);
+        left: calc(var(--wa-form-control-padding-inline) - 0.25em);
         z-index: 1;
 
         /* State: out of the way by default */
         top: -0.5lh;
-        font-size: var(--wa-size-smaller);
+        font-size: var(--wa-font-size-smaller);
 
         background-color: var(--wa-form-control-background-color);
         padding-inline: 0.25em;

packages/webawesome/src/styles/themes/playful/dimension.css

@@ -52,7 +52,7 @@
         &:not([appearance~='outlined']) {
           &:where(:not(wa-button)),
           &::part(base) {
-            padding-inline: calc(var(--wa-space) + var(--border-width));
+            padding-inline: calc(var(--wa-form-control-padding-inline) + var(--border-width));
             border-width: 0px;
           }
         }

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

@@ -30,6 +30,7 @@
    */
     --wa-form-control-activated-color: var(--wa-color-neutral-fill-loud);
     --wa-form-control-background-color: transparent;
-    --wa-form-control-value-line-height: var(--wa-line-height-normal);
+
+    --wa-form-control-toggle-size: round(1.5em, 1px);
   }
 }

packages/webawesome/src/styles/themes/premium/overrides.css

@@ -6,15 +6,15 @@
       --symbol-color-active: var(--wa-color-text-quiet);
     }
 
-    wa-button::part(base),
+    wa-button::part(label),
     button,
     input:where([type='button'], [type='reset'], [type='submit']) {
-      font-size: var(--wa-size-smaller);
+      font-size: var(--wa-font-size-smaller);
       text-transform: uppercase;
     }
 
     wa-callout {
-      font-size: var(--wa-size-smaller);
+      font-size: var(--wa-font-size-smaller);
     }
 
     input[type='checkbox'],

packages/webawesome/src/styles/themes/shoelace/overrides.css

@@ -7,11 +7,11 @@
       --text-color: var(--wa-color-neutral-on-loud);
     }
 
-    wa-button::part(base),
+    wa-button::part(label),
     wa-radio[appearance='button'],
     button,
     input:where([type='button'], [type='reset'], [type='submit']) {
-      font-size: var(--wa-size-smaller);
+      font-size: var(--wa-font-size-smaller);
     }
 
     wa-radio[appearance='button'] {
@@ -29,7 +29,7 @@
 
     wa-callout {
       --spacing: var(--wa-space-l);
-      font-size: var(--wa-size-smaller);
+      font-size: var(--wa-font-size-smaller);
 
       &:is([appearance~='outlined']) {
         border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s)

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

@@ -1,92 +1,16 @@
 @layer wa-utilities {
-  /**
- * Shadow styles for elements that have a size attribute and for the size utility classes.
- */
-
-  :host,
-  :where(.wa-size-s, .wa-size-m, .wa-size-l) {
-    font-size: var(--wa-size, var(--wa-font-size-m));
-  }
-
-  :host {
-    /* Components are meant to override these */
-    --size-xs: var(--wa-font-size-xs);
-    --size-s: var(--wa-font-size-s);
-    --size-m: var(--wa-font-size-m);
-    --size-l: var(--wa-font-size-l);
-
-    --space-xs: var(--wa-space-xs);
-    --space-s: var(--wa-space-s);
-    --space-m: var(--wa-space-m);
-    --space-l: var(--wa-space-l);
-  }
-
-  :where(:root),
-  :host,
-  .wa-size-s,
-  .wa-size-m,
-  .wa-size-l {
-    --_wa-is-small: var(--wa-is-small, 0);
-    --_wa-is-medium: var(--wa-is-medium, 1);
-    --_wa-is-large: var(--wa-is-large, 0);
-
-    --_size-xs: var(--size-xs, var(--wa-font-size-xs));
-    --_size-s: var(--size-s, var(--wa-font-size-s));
-    --_size-m: var(--size-m, var(--wa-font-size-m));
-    --_size-l: var(--size-l, var(--wa-font-size-l));
-
-    --_space-xs: var(--space-xs, var(--wa-space-xs));
-    --_space-s: var(--space-s, var(--wa-space-s));
-    --_space-m: var(--space-m, var(--wa-space-m));
-    --_space-l: var(--space-l, var(--wa-space-l));
-
-    --wa-size: calc(
-      var(--_wa-is-small) * var(--_size-s) + var(--_wa-is-medium) * var(--_size-m) + var(--_wa-is-large) *
-        var(--_size-l)
-    );
-    --wa-size-smaller: calc(
-      var(--_wa-is-small) * var(--_size-xs) + var(--_wa-is-medium) * var(--_size-s) + var(--_wa-is-large) *
-        var(--_size-m)
-    );
-    --wa-space: calc(
-      var(--_wa-is-small) * var(--_space-s) + var(--_wa-is-medium) * var(--_space-m) + var(--_wa-is-large) *
-        var(--_space-l)
-    );
-    --wa-space-smaller: calc(
-      var(--_wa-is-small) * var(--_space-xs) + var(--_wa-is-medium) * var(--_space-s) + var(--_wa-is-large) *
-        var(--_space-m)
-    );
-
-    --_wa-form-control-height: calc(2 * var(--wa-space-smaller) + 1em * var(--wa-form-control-value-line-height));
-    --wa-form-control-height: var(--_wa-form-control-height);
-
-    @supports (height: round(1.2px, 1px)) {
-      --wa-form-control-height: round(var(--_wa-form-control-height), 1px);
-    }
-  }
-
-  :host([size]),
-  .wa-size-s,
-  .wa-size-m,
-  .wa-size-l {
-    --wa-is-small: 0;
-    --wa-is-medium: 0;
-    --wa-is-large: 0;
-  }
-
   :host([size='small']),
   .wa-size-s {
-    --wa-is-small: 1;
+    font-size: var(--wa-font-size-s);
   }
 
-  :where(:root), /* Medium size is the default */
+  :host([size='medium']),
-:host([size='medium']),
+  .wa-size-m {
-.wa-size-m {
+    font-size: var(--wa-font-size-m);
-    --wa-is-medium: 1;
   }
 
   :host([size='large']),
   .wa-size-l {
-    --wa-is-large: 1;
+    font-size: var(--wa-font-size-l);
   }
 }