Issue number: internal
---------
## What is the current behavior?
Avatar icon styles use `1em` width/height which makes them change size
based on the `font-size`
## What is the new behavior?
Updates the `ionic` theme only to:
- Set the `width` / `height` of icons in `ion-avatar` to use the scale
tokens based on the Figma design
- Removes the padding for avatars containing an icon
- Updates the existing screenshots to show the new icon sizes
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
[Preview](https://ionic-framework-git-rou-10732-ionic1.vercel.app/src/components/avatar/test/size?ionic:theme=ionic)
Issue number: Internal
---------
<!-- 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. -->
- On ionic.button.scss all dependencies to button.scss were removed, to
avoid the old native theme values being mixed on the new ionic theme
button.
- ionic.button.vars.scss partial was removed
- All values were changed to use tokens.
- Updated snapshots that bring slight differences due to now we are
totally using the ionic theme tokens.
- Tests with colors where the ionic button was being added also now have
differences, as the current ion-colors aren't affecting the ionic theme
button. This is expected, as the ionic theme should only work with the
colors from the new Design System, which is something being tacked on
this [PR](https://github.com/ionic-team/ionic-framework/pull/29557). in
the future, we should remove the ionic button from these color ctests
and create new ones that add the new set of colors to the ionic button.
## 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.
-->
Issue number: internal
---------
## What is the new behavior?
- Added scss for the `ion-item` for the Ionic theme
- Added test page
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
---------
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
Issue number: internal
---------
<!-- 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 intends to make sure all font-size related tokens are generated
suing the px-to-rem() scss function, so that the fonts correctly scale
in runtime to zoom/A11y preferences.
- Added new utility to generate the expected css and scss variable using
the px-to-rem()
- Added @use on generated scss and css foundations files.
## 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: Brandy Carney <brandyscarney@users.noreply.github.com>
Issue number: internal
---------
## What is the current behavior?
The input uses `md` styles on the `ionic` theme.
## What is the new behavior?
Adds the following for the `ionic` theme:
- The `--text-color-invalid` CSS variable
- The `size` property with support for the `large` size
- The `outline` fill styles for the input
- The `round` shape styles for the input
- The helper and error text styles
- The `focused`, `disabled` and `hover` styles
- The clear button styles
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
The outline fill & stacked label were the main priority here so some
screenshots may look plain. Floating label will be added in future work.
Issue number: internal
---------
<!-- 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. -->
- Replaced old fixed values with new tokens.
- Added theme="ionic" to ionic test page.
## 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.
-->
Issue number: internal
---------
## What is the current behavior?
Avatar does not have styles for the `"soft"` shape in the ionic theme.
## What is the new behavior?
- Adds the styles for the soft shape (border radius)
- The `xsmall` and `small` sizes have a different border radius than the
larger sizes
- Adds e2e tests for the soft shape
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
[Preview](https://ionic-framework-git-rou-10739-ionic1.vercel.app/src/components/avatar/test/shape?ionic:theme=ionic)
Issue number: internal
---------
## What is the current behavior?
Avatar does not have styles for the `"rectangular"` shape in the ionic
theme.
## What is the new behavior?
- Adds the styles for the rectangular shape (border radius)
- Adds e2e test for the rectangular shape
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
[Preview](https://ionic-framework-git-rou-10740-ionic1.vercel.app/src/components/avatar/test/shape?ionic:theme=ionic)
Issue number: internal
---------
## What is the current behavior?
Avatar does not have styles for the `"round"` shape in the ionic theme.
## What is the new behavior?
- Adds the styles for the default (round) shape (border radius)
- Adds e2e test for the round shape
- Updates the screenshots for the avatar `size` due to the new default
shape
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
[Preview](https://ionic-framework-git-rou-10738-ionic1.vercel.app/src/components/avatar/test/shape?ionic:theme=ionic)
Issue number: internal
---------
<!-- 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. -->
- Added new files to scripts/tokens for the html template and css to
style the generated preview
- Added Style Dictionary register for generating html elements for each
main token
## 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.
-->
Issue number: internal
---------
## What is the current behavior?
Avatar does not have styles for the `"xsmall"` size in the ionic theme.
## What is the new behavior?
- Adds the styles for the xsmall size (width, height, padding, font
size, font weight and line height)
- Adds e2e test for xsmall size to the existing avatar test for sizes
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
[Preview](https://ionic-framework-git-rou-10733-ionic1.vercel.app/src/components/avatar/test/size?ionic:theme=ionic)
Issue number: internal
---------
## What is the current behavior?
Avatar does not have styles for the `"large"` size in the ionic theme.
## What is the new behavior?
- Adds the styles for the large size (width, height, padding, font size)
- Adds e2e test for large size to the existing avatar test for sizes
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
[Preview](https://ionic-framework-git-rou-10736-ionic1.vercel.app/src/components/avatar/test/size?ionic:theme=ionic)
Issue number: internal
---------
## What is the current behavior?
Avatar does not have styles for the `"small"` size in the ionic theme.
## What is the new behavior?
- Adds the styles for the small size (width, height, padding, font size)
- Adds e2e test for small size to the existing avatar test for sizes
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
[Preview](https://ionic-framework-git-rou-10734-ionic1.vercel.app/src/components/avatar/test/size?ionic:theme=ionic)
Issue number: internal
---------
## What is the current behavior?
Avatar does not have any styles in the ionic theme.
## What is the new behavior?
- Adds background, border and font styles for avatar
- Adds the styles for the medium size and defaults the size to medium
- Adds e2e test for avatar sizes
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
## Other information
[Preview](https://ionic-framework-git-rou-10735-ionic1.vercel.app/src/components/avatar/test/size?ionic:theme=ionic)
Issue number: internal
---------
<!-- 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. -->
- Added new method to detect colors with eight characters
- Added logic to generate an rgba when the above is true. This is to
ensure better compatibility with older devices that don't support colors
with more than six characters.
## 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.
-->
Issue number: internal
---------
<!-- 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. -->
Added an update to Design Tokens, requested by UX/UI Team:
- New semantic colors added
- Guidelines token was removed
- Hover, disabled and pressed tokens now correctly appear on Theme JSON
- Removed _color.styles.tokens.json_ file, as it was now empty.
## 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.
-->
Issue number: internal
---------
<!-- 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. -->
- Added new structure of JSON files that are generated from Figma
Variables
- Adjusted tokens.js script to correctly translate the new JSON format
- Adjusted tokens usage on components and CSS files
- Added html template to auto-generate html preview based on Design
Tokens (wip)
- Updated snapshots, as some tokens values changed, specially colors.
## Does this introduce a breaking change?
- [x] Yes
- [ ] 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.
-->
## 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>
Issue number: internal
---------
## What is the current behavior?
The counter text for the ionic theme does not have added styles.
## What is the new behavior?
- Updates the `color` of the counter text to match the design
- Updates the screenshots that were changed with this update
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
Issue number: resolves#29479
---------
<!-- 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. -->
If an application includes a malformed URI, an Ionic Framework can
"crash" due to an uncaught exception in parsing the URI for the Ionic
config.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Handle the malformed URI fallback if the config cannot be determined
- Added unit tests for this case
## 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.
-->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
