- Updates the iOS buttons in a toolbar to use the proper global theming variables
- Updates the iOS segment to use the correct background variable when checked
- Updates the iOS back button and menu button to use the proper color in a toolbar
- Updates the iOS buttons in a toolbar w/ color to use the proper contrast colors (background, borders, text, hover, focus), mostly solid and outline buttons were affected
- Updates the CSS that applies the global toolbar variables so that it won't affect toolbars w/ a color
fixes#18184, fixes#17840
- removes mode-less component classes from the internal CSS, use element instead
- adds mode specific classes `md` or `ios` for styling inside of shadow components
- adds e2e test that verifies mode classes exist on all ionic components, plus checks for specific classes that the components need for internal styling
fixes#17608
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 |
- style all slotted content to order properly in a toolbar, not only buttons
- removes duplicated sass variables
- use current color in select so icon will inherit toolbar color
BREAKING CHANGES
- Removes `--icon-color` and `--placeholder-color` from select in favor of inheritance with opacity
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#15989Fixes#15559
- updates components to use shadow DOM or scoped if they require css variables
- moves global styles to an external stylesheet that needs to be imported
- adds support for additional colors and removes the Sass loops to generate colors for each component
- several property renames, bug fixes, and test updates
Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com>
Co-authored-by: Adam Bradley <adambradley25@gmail.com>
Co-authored-by: Cam Wiegert <cam@camwiegert.com>
