fix(theming): update global css variable naming and default values (#…

…16003)

Updates all of the global variables to make sure their naming is consistent, their default values are correct, they are used properly by the related components, and remove any that are not used.

- removes some of the non mode-specific global Sass variables
- updates the md and ios values so that the default is the css variable
with different fallbacks
- removes non-color related css variables from the global file
- fixes item so it uses the background color that is set by the global
file

# Breaking Changes

## Removed Global CSS Variables

The following global CSS variables have been removed for the reasons listed.

| Variable Name                     | Reason                                          |
| ----------------------------------| ------------------------------------------------|
| `--ion-toolbar-color-inactive`    | Unused                                          |
| `--ion-ripple-background-color`   | Unused / Ripple color is based on component     |
| `--ion-header-size`               | Removed in favor of using CSS for h1-h6         |
| `--ion-header-step`               | Removed in favor of using CSS for h1-h6         |

## Renamed Global CSS Variables

The following global CSS variables have been renamed for the reasons listed.

| Old Variable Name                        | New Variable Name                  | Reason                                                                        |
| -----------------------------------------| -----------------------------------| ------------------------------------------------------------------------------|
| `--ion-toolbar-text-color`               | `--ion-toolbar-color`              | Variable is not limited to text color                                         |
| `--ion-toolbar-color-active`             | `--ion-toolbar-color-activated`    | Consistency with our component variables                                      |
| `--ion-tabbar-text-color`                | `--ion-tab-bar-color`              | Variable is not limited to text color                                         |
| `--ion-tabbar-text-color-active`         | `--ion-tab-bar-color-activated`    | Consistency with our component variables                                      |
| `--ion-tabbar-background-color`          | `--ion-tab-bar-background`         | Applies to the background property                                            |
| `--ion-tabbar-background-color-focused`  | `--ion-tab-bar-background-focused` | Applies to the background property                                            |
| `--ion-item-background-color`            | `--ion-item-background`            | Applies to the background property                                            |
| `--ion-item-background-color-active`     | `--ion-item-background-activated`  | Applies to the background property / Consistency with our component variables |
| `--ion-item-text-color`                  | `--ion-item-color`                 | Variable is not limited to text color                                         |
| `--ion-placeholder-text-color`           | `--ion-placeholder-color`          | Consistency with other variables                                              |

Fixes #15989 
Fixes #15559

core/scripts/theme-builder/src/theme-variables.js

@@ -1,24 +1,4 @@
 export const THEME_VARIABLES = [
-    {
-        property: '--ion-alpha-lowest',
-        type: 'percent'
-    },
-    {
-        property: '--ion-alpha-low',
-        type: 'percent'
-    },
-    {
-        property: '--ion-alpha-medium',
-        type: 'percent'
-    },
-    {
-        property: '--ion-alpha-high',
-        type: 'percent'
-    },
-    {
-        property: '--ion-alpha-highest',
-        type: 'percent'
-    },
     {
         property: '--ion-color-primary'
     },
@@ -266,45 +246,42 @@ export const THEME_VARIABLES = [
         property: '--ion-text-color-step-400'
     },
     {
-        property: '--ion-tabbar-background-color'
+        property: '--ion-tab-bar-background'
     },
     {
-        property: '--ion-tabbar-border-color'
+        property: '--ion-tab-bar-border-color'
     },
     {
-        property: '--ion-tabbar-text-color'
+        property: '--ion-tab-bar-color'
     },
     {
-        property: '--ion-tabbar-text-color-active'
+        property: '--ion-tab-bar-color-activated'
     },
     {
-        property: '--ion-toolbar-background-color'
+        property: '--ion-toolbar-background'
     },
     {
         property: '--ion-toolbar-border-color'
     },
     {
-        property: '--ion-toolbar-color-active'
-    },
-    {
-        property: '--ion-toolbar-color-inactive'
+        property: '--ion-toolbar-color-activated'
     },
     {
-        property: '--ion-toolbar-text-color'
+        property: '--ion-toolbar-color'
     },
     {
-        property: '--ion-item-background-color'
+        property: '--ion-item-background'
     },
     {
-        property: '--ion-item-background-color-active'
+        property: '--ion-item-background-activated'
     },
     {
         property: '--ion-item-border-color'
     },
     {
-        property: '--ion-item-text-color'
+        property: '--ion-item-color'
     },
     {
-        property: '--ion-placeholder-text-color'
+        property: '--ion-placeholder-color'
     }
 ];