Issue number: None
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
This PR follows the architectural changes defined on the _SCSS
Architecture Design Doc_. Due to some of the developments done in the
meantime, not everything that was defined on that document was followed
and some sections were simplified.
Overall, there were two guidelines that supported the work on this PR:
- Have no impact on the current scss partials & CSS architecture for the
`md/iOS` themes.
- Make everything related to the new `Ionic` Theme separated.
Based on these, here're the changes made:
**On Themes folder (private):**
- Renamed current internal scss partials on src/themes, related to
md/iOS, to `native.*.scss` and move them to a new folder, called
`native`. Updated imports on all framework.
- Removed the ionic prefix from the name of the mixins and function
partials on src/themes. Updated imports on all framework.
- Created new folder, named ionic, inside src/themes. This holds the
`ionic.globals.scss`, with all the mixins and functions forwarded, to be
used on other scopes.
- Replaced on already created Ionic theme files, the usage of tokens and
mixins with @use, to instead _@use
"../../themes/ionic/ionic.globals.scss" as globals;_. This ensures an
equal approach is followed everywhere and also makes it easier to change
the files imported or paths, in the future, as its all in the same
global file.
- Updated the foundations `readMe` file, with the new process for using
globals.
**On css folder (public):**
- Created new folder, named `ionic`, inside src/css. This holds all the
files related exclusively to Ionic Theme, following the same structure
as exists now for md/iOS, with a core, a bundle, utils, etc. Some files
were a bit duplicated, to eliminate imports from ios or md theme
partials. The only file common to both Themes is the `normalize.scss`.
- No folder structure or renamings were done on the existing output, to
prevent breaking-changes for developers already making imports from this
folder.
- Updated typography and link partials to use globals instead of tokens.
- Changed `font-size` styles on typography to be on `body`, instead of
`html`, to enable correct support of accessibility features on browsers
and devices, related to `font-size`.
**Other changes related to global styles new architecture:**
- Updated margin & padding utility-classed generated by token, to
include css variables and padding/margin mixins.
- Updated link test to use new global Ionic bundle, correct
utility-class on ion-content and updated snapshots. The font-size
changed to 16, as its now the default on the body.
- Updated typography snapshots.
- Updated prettier format on all scss files. Later on we should make
sure this is equal for all team members.
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!--
If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->
---------
Co-authored-by: Sean Perkins <sean@ionic.io>
BREAKING CHANGE:
The `legacy` property and support for the legacy syntax, which involved placing an `ion-checkbox` inside of an `ion-item` with an `ion-label`, have been removed from checkbox. For more information on migrating from the legacy checkbox syntax, refer to the [Checkbox documentation](https://ionicframework.com/docs/api/checkbox#migrating-from-legacy-checkbox-syntax).
Issue number: N/A
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
This project has several unused Sass variables still in the code base.
The team would like to remove these.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Removed unused Sass variables
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
The original scope of this ticket was for checkbox only, but many other
components had unused sass variables, so I decided to tackle everything
all at once.
Since these variables are not used anywhere:
1. The build should pass
2. There should be no screenshot diffs
Issue number: resolves#24638, resolves#18592
---------
<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->
<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->
## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Developers have requested that Ionic Framework support the dynamic type
feature on iOS for accessibility purposes. Ionic applications do not
respond to font scaling on iOS which can create inaccessible
applications particularly for users with low vision. Ionic apps on
Android devices currently support the Android equivalent due to
functionality in the Chromium webview.
Developers have also requested a way of adjusting the fonts in their
Ionic UI components consistently.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Ionic components now use `rem` instead of `px` where appropriate. This
means devs can change the font size on `html` and the text in supported
Ionic components will scale up/down appropriately
- Add support for Dynamic Type on iOS (the iOS version of Dynamic Font
Scaling)
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---------
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Co-authored-by: Shawn Taylor <shawn@ionic.io>
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Sean Perkins <sean@ionic.io>
Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com>
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>
Issue number: resolves#27184
---------
## What is the current behavior?
The modern form controls do not use the same opacity for their labels
when disabled, resulting in inconsistent UI when using two different
types in the same view (select vs checkbox, for example).
## What is the new behavior?
The checkbox, input, radio, range, select, textarea and toggle labels
have been updated on both modes to use the same opacity as each other
when disabled. The checkbox and radio icons have been updated to use a
different opacity than the label for `md` mode.
- Updates `ios` mode so all form controls use the same opacity of `0.3`
- I could not find any guidelines by Apple for what color these should
be, so I decided to just make them the same as what is most commonly
used & match item
- Updates `md` mode so all form control labels use the same opacity of
`0.38`
- I used the [Material Design 3
documentation](https://m2.material.io/components) to get this number as
well as the opacity of the disabled selection controls in the [Material
Design 2 figma design
kit](https://www.figma.com/community/file/778763161265841481). The
Material Design 2 documentation does not mention the opacity, but this
is also the number used by Material Design 1 so it's safe to assume it
is what the disabled form labels should also use for Material Design 2.
- Updates the `md` range so the slotted elements are also included when
setting the opacity on the label
- Updates the range, radio & checkbox tests to make sure there are
screenshots in the different disabled states
- Updates the item/disabled test to include radio & textarea so you can
see all form controls side by side
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
I downloaded screenshots of the item disabled tests and put them side by
side for `main` and this branch in order to see the differences in the
labels. The grey boxes to the left of each item are just a bigger
version of the label color for that item, so it's easier to see when
they aren't the same.
---------
Co-authored-by: ionitron <hi@ionicframework.com>
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>
