fix(typography): improve ionic global typography (#29628)

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 current behavior?
<!-- Please describe the current behavior that you are modifying. -->

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Updated tokens utilities to no longer add font-family to
utillity-classes. That is something that should only be set at a global
layer, no sense to have that on a utility-class.
- Updated text token JSON as received by UX/UI Team.
- Improved tokens utilities to correctly set font-style to italic with
italic font tokens.
- Adjusted typography Ionic scss to use the new typography classes and
mixins based on tokens.
- Removed old basic typography test, as it was testing utility-classes
that do not exist anymore.
- Added new typography test for ionic display tokens.
- Added a TODO to tackle the Inter font loading scenario, as it envolves
research that impact other contexts as well.

## 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. -->

[Sample Typography
Screen](https://ionic-framework-e2le05h3a-ionic1.vercel.app/src/css/test/typography/basic)

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>

core/scripts/tokens/utilities.js

@@ -69,12 +69,13 @@ function generateTypographyValue(prop, dictionary) {
   const fontWeightMap = getTypeMap(dictionary, 'font-weight');
   const lineHeightMap = getTypeMap(dictionary, 'line-height');
   const letterSpacingMap = getTypeMap(dictionary, 'letter-spacing');
+  const fontStyle = prop.attributes.item?.toLowerCase() === 'italic' ? 'italic' : 'normal';
 
   // This exact format is needed so that it compiles the tokens with the expected lint rules
   return `
   $${variablesPrefix}-${prop.name}: (
-    font-family: $ionic-font-family,
     font-size: $ionic-font-size-${fontSizeMap[typography.fontSize]},
+    font-style: ${fontStyle},
     font-weight: $ionic-font-weight-${fontWeightMap[typography.fontWeight]},
     letter-spacing: $ionic-letter-spacing-${letterSpacingMap[typography.letterSpacing] || 0},
     line-height: $ionic-line-height-${lineHeightMap[typography.lineHeight]},
@@ -114,12 +115,13 @@ function generateTypographyUtilityClass(prop, dictionary) {
   const fontWeightMap = getTypeMap(dictionary, 'font-weight');
   const lineHeightMap = getTypeMap(dictionary, 'line-height');
   const letterSpacingMap = getTypeMap(dictionary, 'letter-spacing');
+  const fontStyle = prop.attributes.item?.toLowerCase() === 'italic' ? 'italic' : 'normal';
 
   // This exact format is needed so that it compiles the tokens with the expected lint rules
   return `
   .${variablesPrefix}-${prop.name} {
-    font-family: $ionic-font-family;
     font-size: $ionic-font-size-${fontSizeMap[typography.fontSize]};
+    font-style: ${fontStyle};
     font-weight: $ionic-font-weight-${fontWeightMap[typography.fontWeight]};
     letter-spacing: $ionic-letter-spacing-${letterSpacingMap[typography.letterSpacing] || 0};
     line-height: $ionic-line-height-${lineHeightMap[typography.lineHeight]};