refactor(components): consistent css variables for size (#16600)

Reviews the `--width` and `--height` variables in each component to either remove or add them based on need.

- fixes a bug where the spinner color wasn't being set properly in loading
- adds css variables for customizing background, color, some borders in overlays
- fixes a bug where prefix, suffix are taking up too much width in picker

closes #16097
references ionic-team/ionic-docs#228

BREAKING CHANGES

## Core Components

Removes the `--width` and `--height` variables from the following components, in favor of CSS:

- Button
- FAB Button
- Checkbox
  - Removes the `--width`/`--height` and adds a `--size` variable that is set on the width and height, allowing width and height to still be set and border-radius to still use it as a variable
- Radio
  - Removes the `--width`/`--height` and `--inner-width`/`--inner-height` variables. Calculates inner values based on parent element size.

## Overlay Components

The following components have all be converted to shadow (or scoped) and have CSS variables for width/height:

- Action Sheet _(scoped)_
- Alert  _(scoped)_
- Loading  _(scoped)_
- Menu _(shadow)_
- Modal  _(scoped)_
- Picker _(scoped)_
- Popover  _(scoped)_
- Toast _(shadow)_

The above components will now have the following CSS variables for consistency among overlays:

| Name              |
| ----------------- |
| `--height`        |
| `--max-height`    |
| `--max-width`     |
| `--min-height`    |
| `--min-width`     |
| `--width`         |

If the component does not set the value, it will default to `auto`.

## Removed CSS Variables

The following CSS properties have been removed:

| Component      | Property            | Reason                          |
| ---------------| --------------------| --------------------------------|
| **Button**     | `--height`          | Use CSS instead                 |
| **Button**     | `--margin-bottom`   | Use CSS instead                 |
| **Button**     | `--margin-end`      | Use CSS instead                 |
| **Button**     | `--margin-start`    | Use CSS instead                 |
| **Button**     | `--margin-top`      | Use CSS instead                 |
| **Button**     | `--width`           | Use CSS instead                 |
| **Checkbox**   | `--height`          | Use CSS or `--size`             |
| **Checkbox**   | `--width`           | Use CSS or `--size`             |
| **FAB Button** | `--width`           | Use CSS instead                 |
| **FAB Button** | `--height`          | Use CSS instead                 |
| **FAB Button** | `--margin-bottom`   | Use CSS instead                 |
| **FAB Button** | `--margin-end`      | Use CSS instead                 |
| **FAB Button** | `--margin-start`    | Use CSS instead                 |
| **FAB Button** | `--margin-top       | Use CSS instead                 |
| **Menu**       | `--width-small`     | Use a media query and `--width` |
| **Radio**      | `--width`           | Use CSS instead                 |
| **Radio**      | `--height`          | Use CSS instead                 |
| **Radio**      | `--inner-height`    | Calculated based on parent      |
| **Radio**      | `--inner-width`     | Calculated based on parent      |

core/src/components/checkbox/checkbox.ios.scss

@@ -5,9 +5,6 @@
 // --------------------------------------------------
 
 :host {
-  --height: #{$checkbox-ios-icon-size};
-  --width: #{$checkbox-ios-icon-size};
-
   // Border
   --border-radius: #{$checkbox-ios-icon-border-radius};
   --border-width: #{$checkbox-ios-icon-border-width};
@@ -16,6 +13,12 @@
 
   // Background
   --background: #{$checkbox-ios-background-color-off};
+
+  // Size
+  --size: #{$checkbox-ios-icon-size};
+  width: var(--size);
+
+  height: var(--size);
 }
 
 

core/src/components/checkbox/checkbox.md.scss

@@ -5,11 +5,8 @@
 // --------------------------------------------------
 
 :host {
-  --height: #{$checkbox-md-icon-size};
-  --width: #{$checkbox-md-icon-size};
-
   // Border
-  --border-radius: calc(var(--height) * .125);
+  --border-radius: calc(var(--size) * .125);
   --border-width: #{$checkbox-md-icon-border-width};
   --border-style: #{$checkbox-md-icon-border-style};
   --border-color: #{$checkbox-md-icon-border-color-off};
@@ -17,6 +14,12 @@
   // Background
   --background: #{$checkbox-md-icon-background-color-off};
   --transition: #{background $checkbox-md-transition-duration $checkbox-md-transition-easing};
+
+  // Size
+  --size: #{$checkbox-md-icon-size};
+  width: var(--size);
+
+  height: var(--size);
 }
 
 

core/src/components/checkbox/checkbox.scss

@@ -5,6 +5,7 @@
 
 :host {
   /**
+   * @prop --size: Size of the checkbox icon
    * @prop --background: Background of the checkbox icon
    * @prop --border-color: Border color of the checkbox icon
    * @prop --border-radius: Border radius of the checkbox icon
@@ -14,8 +15,6 @@
    * @prop --background-checked: Background of the checkbox icon when checked
    * @prop --border-color-checked: Border color of the checkbox icon when checked
    * @prop --checkmark-color: Color of the checkbox checkmark when checked
-   * @prop --height: Height of the checkbox icon
-   * @prop --width: Width of the checkbox icon
    */
   --background-checked: #{ion-color(primary, base)};
   --border-color-checked: #{ion-color(primary, base)};
@@ -45,8 +44,8 @@ button {
   display: block;
   position: relative;
 
-  width: var(--width);
-  height: var(--height);
+  width: 100%;
+  height: 100%;
 
   transition: var(--transition);
 

core/src/components/checkbox/readme.md

@@ -129,9 +129,8 @@ export class HomePage {
 | `--border-style`         | Border style of the checkbox icon              |
 | `--border-width`         | Border width of the checkbox icon              |
 | `--checkmark-color`      | Color of the checkbox checkmark when checked   |
-| `--height`               | Height of the checkbox icon                    |
+| `--size`                 | Size of the checkbox icon                      |
 | `--transition`           | Transition of the checkbox icon                |
-| `--width`                | Width of the checkbox icon                     |
 
 
 ----------------------------------------------

core/src/components/checkbox/test/basic/index.html

@@ -52,7 +52,7 @@
 
       <ion-item>
         <ion-label>Dark</ion-label>
-        <ion-checkbox checked color="dark" style="--height: 100px; --width: 100px;"></ion-checkbox>
+        <ion-checkbox checked color="dark" style="--size: 100px;"></ion-checkbox>
       </ion-item>
 
       <ion-item>
@@ -72,7 +72,7 @@
 
       <ion-item>
         <ion-label>Dark</ion-label>
-        <ion-checkbox checked color="dark" slot="start" style="--height: 100px; --width: 100px;"></ion-checkbox>
+        <ion-checkbox checked color="dark" slot="start" style="--size: 100px;"></ion-checkbox>
       </ion-item>
 
       <ion-item>