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/button/button.ios.scss

@@ -7,17 +7,16 @@
 
 :host {
   --border-radius: #{$button-ios-border-radius};
-  --margin-top: #{$button-ios-margin-top};
-  --margin-bottom: #{$button-ios-margin-bottom};
-  --margin-start: #{$button-ios-margin-start};
-  --margin-end: #{$button-ios-margin-end};
   --padding-top: #{$button-ios-padding-top};
   --padding-bottom: #{$button-ios-padding-bottom};
   --padding-start: #{$button-ios-padding-start};
   --padding-end: #{$button-ios-padding-end};
-  --height: #{$button-ios-height};
   --transition: background-color, opacity 100ms linear;
 
+  @include margin($button-ios-margin-top, $button-ios-margin-end, $button-ios-margin-bottom, $button-ios-margin-start);
+
+  height: #{$button-ios-height};
+
   font-size: #{$button-ios-font-size};
   font-weight: #{$button-ios-font-weight};
 
@@ -89,7 +88,8 @@
   --padding-start: #{$button-ios-large-padding-start};
   --padding-end: #{$button-ios-large-padding-end};
   --padding-bottom: #{$button-ios-large-padding-bottom};
-  --height: #{$button-ios-large-height};
+
+  height: #{$button-ios-large-height};
 
   font-size: #{$button-ios-large-font-size};
 }
@@ -100,7 +100,8 @@
   --padding-start: #{$button-ios-small-padding-start};
   --padding-end: #{$button-ios-small-padding-end};
   --padding-bottom: #{$button-ios-small-padding-bottom};
-  --height: #{$button-ios-small-height};
+
+  height: #{$button-ios-small-height};
 
   font-size: #{$button-ios-small-font-size};
 }

core/src/components/button/button.md.scss

@@ -6,19 +6,18 @@
 
 :host {
   --border-radius: #{$button-md-border-radius};
-  --margin-top: #{$button-md-margin-top};
-  --margin-bottom: #{$button-md-margin-bottom};
-  --margin-start: #{$button-md-margin-start};
-  --margin-end: #{$button-md-margin-end};
   --padding-top: #{$button-md-padding-top};
   --padding-bottom: #{$button-md-padding-bottom};
   --padding-start: #{$button-md-padding-start};
   --padding-end: #{$button-md-padding-end};
-  --height: #{$button-md-height};
   --transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),
                 background-color 15ms linear,
                 color 15ms linear;
 
+  @include margin($button-md-margin-top, $button-md-margin-end, $button-md-margin-bottom, $button-md-margin-start);
+
+  height: #{$button-md-height};
+
   font-size: #{$button-md-font-size};
   font-weight: #{$button-md-font-weight};
 
@@ -88,7 +87,8 @@
   --padding-start: #{$button-md-large-padding-start};
   --padding-end: #{$button-md-large-padding-end};
   --padding-bottom: #{$button-md-large-padding-bottom};
-  --height: #{$button-md-large-height};
+
+  height: #{$button-md-large-height};
 
   font-size: #{$button-md-large-font-size};
 }
@@ -98,7 +98,8 @@
   --padding-start: #{$button-md-small-padding-start};
   --padding-end: #{$button-md-small-padding-end};
   --padding-bottom: #{$button-md-small-padding-bottom};
-  --height: #{$button-md-small-height};
+
+  height: #{$button-md-small-height};
 
   font-size: #{$button-md-small-font-size};
 }

core/src/components/button/button.scss

@@ -13,9 +13,6 @@
    * @prop --color-activated: Text color of the button when activated
    * @prop --color-focused: Text color of the button when focused
    *
-   * @prop --width: Width of the button
-   * @prop --height: Height of the button
-   *
    * @prop --transition: Transition of the button
    *
    * @prop --border-radius: Border radius of the button
@@ -28,17 +25,11 @@
    * @prop --box-shadow: Box shadow of the button
    * @prop --opacity: Opacity of the button
    *
-   * @prop --margin-top: Margin top of the button
-   * @prop --margin-end: Margin end of the button
-   * @prop --margin-bottom: Margin bottom of the button
-   * @prop --margin-start: Margin start of the button
-   *
    * @prop --padding-top: Padding top of the button
    * @prop --padding-end: Padding end of the button
    * @prop --padding-bottom: Padding bottom of the button
    * @prop --padding-start: Padding start of the button
    */
-  --width: auto;
   --overflow: hidden;
   --ripple-color: currentColor;
   --border-width: initial;
@@ -48,10 +39,11 @@
 
   display: inline-block;
 
+  width: auto;
+
   color: var(--color);
 
   font-family: $font-family-base;
-  pointer-events: auto;
 
   text-align: center;
   text-decoration: none;
@@ -62,6 +54,7 @@
   user-select: none;
   vertical-align: top; // the better option for most scenarios
   vertical-align: -webkit-baseline-middle; // the best for those that support it
+  pointer-events: auto;
 
   font-kerning: none;
 }
@@ -199,15 +192,15 @@
 .button-native {
   @include border-radius(var(--border-radius));
   @include font-smoothing();
-  @include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
+  @include margin(0);
   @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
   @include text-inherit();
 
   display: block;
   position: relative;
 
-  width: var(--width);
-  height: var(--height);
+  width: 100%;
+  height: 100%;
 
   transition: var(--transition);
 

core/src/components/button/readme.md

@@ -133,11 +133,6 @@ This attribute specifies the size of the button. Setting this attribute will cha
 | `--color`                | Text color of the button                |
 | `--color-activated`      | Text color of the button when activated |
 | `--color-focused`        | Text color of the button when focused   |
-| `--height`               | Height of the button                    |
-| `--margin-bottom`        | Margin bottom of the button             |
-| `--margin-end`           | Margin end of the button                |
-| `--margin-start`         | Margin start of the button              |
-| `--margin-top`           | Margin top of the button                |
 | `--opacity`              | Opacity of the button                   |
 | `--padding-bottom`       | Padding bottom of the button            |
 | `--padding-end`          | Padding end of the button               |
@@ -145,7 +140,6 @@ This attribute specifies the size of the button. Setting this attribute will cha
 | `--padding-top`          | Padding top of the button               |
 | `--ripple-color`         | Color of the button ripple effect       |
 | `--transition`           | Transition of the button                |
-| `--width`                | Width of the button                     |
 
 
 ----------------------------------------------

core/src/components/button/test/standalone/index.html

@@ -71,7 +71,7 @@
 
   <style>
     .wide {
-      --width: 100px;
+      width: 100px;
     }
 
     .large {
@@ -80,8 +80,8 @@
     }
 
     .round {
-      --width: 60px;
-      --height: 60px;
+      width: 60px;
+      height: 60px;
       --border-radius: 50%;
       --vertical-align: middle;