Introduce size shadow utils and use them with checkbox (more to come)

src/components/checkbox/checkbox.css

@@ -16,28 +16,13 @@
   display: inline-block;
 }
 
-:host([size='small']) {
-  font-size: var(--wa-font-size-s);
-}
-
-:host([size='medium']),
-:host(:not([size])) {
-  font-size: var(--wa-font-size-m);
-}
-
-:host([size='large']) {
-  font-size: var(--wa-font-size-l);
-}
-
 [part~='base'] {
   position: relative;
   display: flex;
   align-items: flex-start;
-  font: inherit;
   color: var(--wa-form-control-value-color);
   vertical-align: middle;
   cursor: pointer;
-  font-size: inherit;
 
   /* Disabled */
   &:has(input:disabled) {
@@ -90,12 +75,12 @@
 
 input {
   position: absolute;
-  opacity: 0;
   padding: 0;
   margin: 0;
-  pointer-events: none;
   height: 100%;
   width: 100%;
+  opacity: 0;
+  pointer-events: none;
 }
 
 [part~='icon'] {

src/components/checkbox/checkbox.ts

@@ -13,6 +13,7 @@ import { WaInputEvent } from '../../events/input.js';
 import { watch } from '../../internal/watch.js';
 import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
 import formControlStyles from '../../styles/shadow/form-control.css';
+import sizeStyles from '../../styles/shadow/size.css';
 import styles from './checkbox.css';
 import type { PropertyValues } from 'lit';
 
@@ -55,7 +56,7 @@ import type { PropertyValues } from 'lit';
  */
 @customElement('wa-checkbox')
 export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
-  static shadowStyle = [formControlStyles, styles];
+  static shadowStyle = [formControlStyles, sizeStyles, styles];
 
   static shadowRootOptions = { ...WebAwesomeFormAssociatedElement.shadowRootOptions, delegatesFocus: true };
 
@@ -221,11 +222,8 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
     return html`
       <div
         class=${classMap({
-          'form-control': true,
-          'form-control--small': this.size === 'small',
-          'form-control--medium': this.size === 'medium',
-          'form-control--large': this.size === 'large',
           'form-control--has-hint': hasHint
+          'form-control': true
         })}
       >
         <label part="base">

src/styles/shadow/form-control.css

@@ -38,6 +38,7 @@
   display: block;
   color: var(--wa-color-text-quiet);
   margin-top: var(--wa-space-3xs);
+  font-size: var(--size-smaller, 85%);
 
   &:is(.form-control--small *) {
     font-size: var(--wa-font-size-xs);

src/styles/shadow/size.css

@@ -0,0 +1,36 @@
+/* Shadow styles for elements that have a size attribute. */
+
+:host,
+.wa-size-s,
+.wa-size-m,
+.wa-size-l {
+  /* Defaults. Components are expected to override these */
+  --size-xs: var(--wa-font-size-xs, 0.75rem); /* Used for hints etc */
+  --size-s: var(--wa-font-size-s, 0.875rem); /* size=small */
+  --size-m: var(--wa-font-size-m, 1rem); /* default */
+  --size-l: var(--wa-font-size-l, 1.25rem); /* size=large */
+
+  --space-xs: var(--wa-space-xs, 0.5rem);
+  --space-s: var(--wa-space-s, 0.75rem);
+  --space-m: var(--wa-space-m, 1rem);
+  --space-l: var(--wa-space-l, 1.25rem);
+
+  /* Medium size is the default */
+  font-size: var(--size-m);
+  --size-smaller: var(--size-s);
+  --space: var(--space-m);
+}
+
+:host([size='small']),
+.wa-size-s {
+  font-size: var(--size-s);
+  --size-smaller: var(--size-xs);
+  --space: var(--space-s);
+}
+
+:host([size='large']),
+.wa-size-l {
+  font-size: var(--size-l);
+  --size-smaller: var(--size-m);
+  --space: var(--space-l);
+}