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/loading/loading.tsx

@@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Me
 
 import { Animation, AnimationBuilder, Config, Mode, OverlayEventDetail, OverlayInterface, SpinnerTypes } from '../../interface';
 import { BACKDROP, dismiss, eventMethod, present } from '../../utils/overlays';
-import { createThemedClasses, getClassMap } from '../../utils/theme';
+import { getClassMap } from '../../utils/theme';
 
 import { iosEnterAnimation } from './animations/ios.enter';
 import { iosLeaveAnimation } from './animations/ios.leave';
@@ -14,7 +14,8 @@ import { mdLeaveAnimation } from './animations/md.leave';
   styleUrls: {
     ios: 'loading.ios.scss',
     md: 'loading.md.scss'
-  }
+  },
+  scoped: true
 })
 export class Loading implements ComponentInterface, OverlayInterface {
   private durationTimeout: any;
@@ -183,18 +184,13 @@ export class Loading implements ComponentInterface, OverlayInterface {
   }
 
   hostData() {
-    const themedClasses = this.translucent
-      ? createThemedClasses(this.mode, 'loading-translucent')
-      : {};
-
     return {
       style: {
         zIndex: 40000 + this.overlayIndex
       },
       class: {
-        ...createThemedClasses(this.mode, 'loading'),
-        ...themedClasses,
-        ...getClassMap(this.cssClass)
+        ...getClassMap(this.cssClass),
+        'loading-translucent': this.translucent
       }
     };
   }