The default (iOS/MD) bundle is removed from the tests for the `ionic` theme because it adds global component styles that the `ionic` theme does not need. The missing utility files are imported, and padding/margin classes are generated from the design tokens, as many tests rely on `ion-padding` and `ion-text-center` being available. This change ensures the `ionic` theme includes the same classes offered in our documentation: https://ionicframework.com/docs/layout/css-utilities.
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. -->
- Removed old tokens stored on foundations folder. Now the jsons with
the tokens come from the new dependency:
https://github.com/OutSystems/outsystems-design-tokens.
- The tokens from UX Team completely changed the structure and in some
cases the values. Everything was replaced on the project to use the new
tokens.
- Snapshots updated and differences reviewed with UX Team. A fix was
done on the testing css, to make sure the correct _Inter_ font-family
was actually used. This resulted in some differences on the text for
some componentes, that had snapshots with the native fonts.
- Removed generation of scss file on tokens script, that contained the
:root selector with the custom CSS properties, as they were not used on
the Ionic context.
- Removed generation of html file with tokens preview, as there wasn't a
great value on this (we have storybook on other contexts) and it allowed
to reduce a lot of code and complexity from the tokens script.
- The token command was adapted to use the command available from the
https://github.com/OutSystems/outsystems-design-tokens package, using
the `--config` prop, where we pass the path to our Ionic token script,
where we generate the needed scss variables and utility-classes (by
default the tokens repo tries to be as agnostic as possible, and only
generates the css variables, without the prefix and added details we
need on the Ionic side).
- Removed the token command from the npm run build, as it unnecessarily
added time on that command to run. Besides, it should not be common that
we need to run this command in the future.
- Updated reference to latest version of [Style Dictionary
4.1.3](https://v4.styledictionary.com/version-4/statement/). Version 4
comes with a lot of improvements, but also breaking-changes, so it was
needed to adapt the tokens script. The code on the script is also now
cleaner.
- Changed prefix from ionic to ion. The term ionic was used initially,
to help differentiate from the old ios/md stuff, but I feel with the
current scss architecture, that is no longer needed, and we can use the
same prefix across themes.
This requires to run `npm install ` again.
## 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.
-->
---------
Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Maria Hutt <thetaPC@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
---------
<!-- 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
---------
<!-- 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 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>
