fix(design-tokens): Add missing tokens and update usage on Typography (#29283)

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

- Updated missing font tokens on `_designTokens.json`.
- Updated `tokens.js` script for building utility-classes for newly
added font tokens.
- Fixed space token typo.
- Updated ionic.typography file to start using design tokens and remove
duplicated code from the tokens generated files.
- Updated Ionic Typography tests

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

core/src/css/test/typography/basic/typography.e2e.ts

@@ -18,8 +18,8 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
           <h5>H5: The quick brown fox jumps over the lazy dog</h5>
           <h6>H6: The quick brown fox jumps over the lazy dog</h6>
           <p><ion-text class="ionic-font-size-l"><p>Tag_P FontLarge: The quick brown fox jumps over the lazy dog</p></ion-text><p>
+          <p><ion-text class="ionic-font-size-m">Tag_None FontMedium: The quick brown fox jumps over the lazydog</ion-text></p>
           <p><ion-text class="ionic-font-size-s"><span>Tag_Span FontSmall: The quick brown fox jumps over the lazy dog</span></ion-text></p>
-          <p><ion-text class="ionic-font-size-base">Tag_None FontBase: The quick brown fox jumps over the lazydog</ion-text></p>
         </div>
       `,
         config
@@ -34,12 +34,12 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
         `
         <link href="/css/typography.ionic.css" rel="stylesheet" />
         <div>
-          <h1 class="ionic-heading2 ionic-font-light">Tag H1 - Style Heading 2 - Font Light</h1>
-          <h2 class="ionic-heading3 ionic-font-light">Tag H2 - Style Heading 3 - Font Light</h2>
+          <h1 class="ionic-heading2 ionic-font-weight-light">Tag H1 - Style Heading 2 - Font Light</h1>
+          <h2 class="ionic-heading3 ionic-font-weight-light">Tag H2 - Style Heading 3 - Font Light</h2>
           <h3 class="ionic-heading4">Tag H3 - Style Heading 4 - Font Regular</h3>
-          <h4 class="ionic-heading5 ionic-font-medium">Tag H4 - Style Heading 5 - Font Medium</h4>
+          <h4 class="ionic-heading5 ionic-font-weight-medium">Tag H4 - Style Heading 5 - Font Medium</h4>
           <h5 class="ionic-heading6">Tag H5 - Style Heading 6 - Font Semibold</h5>
-          <h6 class="ionic-heading1 ionic-font-bold">Tag H6 - Style Heading 1 - Font Bold</h6>
+          <h6 class="ionic-heading1 ionic-font-weight-bold">Tag H6 - Style Heading 1 - Font Bold</h6>
         </div>
       `,
         config
@@ -74,11 +74,11 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
         `
         <link href="/css/typography.ionic.css" rel="stylesheet" />
         <div>
-          <p><ion-text class="ionic-font-light">Utility class 'ionic-font-light'</ion-text></p>
-          <p><ion-text class="ionic-font-regular">Utility class 'ionic-font-regular'</ion-text></p>
-          <p><ion-text class="ionic-font-medium">Utility class 'ionic-font-medium'</ion-text></p>
-          <p><ion-text class="ionic-font-semibold">Utility class 'ionic-font-semibold'</ion-text></p>
-          <p><ion-text class="ionic-font-bold">Utility class 'ionic-font-bold'</ion-text></p>
+          <p><ion-text class="ionic-font-weight-light">Utility class 'ionic-font-light'</ion-text></p>
+          <p><ion-text class="ionic-font-weight-regular">Utility class 'ionic-font-regular'</ion-text></p>
+          <p><ion-text class="ionic-font-weight-medium">Utility class 'ionic-font-medium'</ion-text></p>
+          <p><ion-text class="ionic-font-weight-semi-bold">Utility class 'ionic-font-semibold'</ion-text></p>
+          <p><ion-text class="ionic-font-weight-bold">Utility class 'ionic-font-bold'</ion-text></p>
         </div>
       `,
         config

core/src/css/typography.ionic.scss

@@ -1,55 +1,16 @@
-:root {
-  /* Font Family */
-  --ionic-font-family: "Inter", sans-serif;
-
-  /* Font sizes */
-  --ionic-font-size-s: 12px;
-  --ionic-font-size-m: 14px;
-  --ionic-font-size-l: 16px;
-
-  /* Font size displays */
-  --ionic-display-s: 32px;
-  --ionic-display-m: 36px;
-
-  /* Headings */
-  --ionic-h1-font-size: 28px;
-  --ionic-h2-font-size: 26px;
-  --ionic-h3-font-size: 24px;
-  --ionic-h4-font-size: 22px;
-  --ionic-h5-font-size: 20px;
-  --ionic-h6-font-size: 18px;
-
-  /* Font Weights */
-  --ionic-font-light: 300;
-  --ionic-font-regular: 400;
-  --ionic-font-medium: 500;
-  --ionic-font-semibold: 600;
-  --ionic-font-bold: 700;
-
-  /* Line heights */
-  --ionic-line-height-xs: 16px;
-  --ionic-line-height-s: 20px;
-  --ionic-line-height-m: 24px;
-  --ionic-line-height-l: 28px;
-  --ionic-line-height-xl: 32px;
-  --ionic-line-height-xxl: 36px;
-  --ionic-line-height-display-s: 44px;
-  --ionic-line-height-display-m: 48px;
-
-  /* Letter spacing */
-  --ionic-letter-spacing-none: 0em;
-  --ionic-letter-spacing-s: 0.1em;
-  --ionic-letter-spacing-m: 0.15em;
-}
+@use "../foundations/ionic.vars.scss" as tokens;
+/* This import below is temporary, to make sure basic tests have access to all utility-classes */
+@import "../foundations/ionic.utility.scss";
 
 html {
-  font-family: var(--ionic-font-family);
-  font-size: var(--ionic-font-size-m);
-  font-weight: var(--ionic-font-regular);
-  
-  line-height: var(--ionic-line-height-m);
+  font-family: #{tokens.$ionic-font-family};
+  font-size: #{tokens.$ionic-font-size-m};
+  font-weight: #{tokens.$ionic-font-weight-regular};
+
+  line-height: #{tokens.$ionic-font-line-height-m};
 }
 
+/* Composite utility classes for html headings and font classes, that aggregate size and weight, based on tokens*/
 h1,
 .ionic-heading1,
 h2,
@@ -62,109 +23,65 @@ h5,
 .ionic-heading5,
 h6,
 .ionic-heading6 {
-  color: var(--ionic-color-base);
+  color: #{tokens.$ionic-color-neutral-900};
 
-  font-weight: var(--ionic-font-semibold);
+  font-weight: #{tokens.$ionic-font-weight-semi-bold};
 }
 
 h1,
 .ionic-heading1 {
-  font-size: var(--ionic-h1-font-size);
+  font-size: #{tokens.$ionic-font-size-h1};
 
-  line-height: var(--ionic-line-height-xxl);
+  line-height: #{tokens.$ionic-font-line-height-xxl};
 }
 
 h2,
 .ionic-heading2 {
-  font-size: var(--ionic-h2-font-size);
+  font-size: #{tokens.$ionic-font-size-h2};
 
-  line-height: var(--ionic-line-height-xl);
+  line-height: #{tokens.$ionic-font-line-height-xl};
 }
 
 h3,
 .ionic-heading3 {
-  font-size: var(--ionic-h3-font-size);
+  font-size: #{tokens.$ionic-font-size-h3};
 
-  line-height: var(--ionic-line-height-xl);
+  line-height: #{tokens.$ionic-font-line-height-xl};
 }
 
 h4,
 .ionic-heading4 {
-  font-size: var(--ionic-h4-font-size);
+  font-size: #{tokens.$ionic-font-size-h4};
 
-  line-height: var(--ionic-line-height-l);
+  line-height: #{tokens.$ionic-font-line-height-l};
 }
 
 h5,
 .ionic-heading5 {
-  font-size: var(--ionic-h5-font-size);
+  font-size: #{tokens.$ionic-font-size-h5};
 
-  line-height: var(--ionic-line-height-l);
+  line-height: #{tokens.$ionic-font-line-height-l};
 }
 
 h6,
 .ionic-heading6 {
-  font-size: var(--ionic-h6-font-size);
+  font-size: #{tokens.$ionic-font-size-h6};
 
-  line-height: var(--ionic-line-height-m);
-}
-
-/* Utility Classes */
-/* Font size display */
-.ionic-font-display-s,
-.ionic-font-display-m {
-  font-weight: var(--ionic-font-regular);
+  line-height: #{tokens.$ionic-font-line-height-m};
 }
 
 .ionic-display-s {
-  font-size: var(--ionic-display-s);
+  font-size: #{tokens.$ionic-font-size-display-s};
+  font-weight: #{tokens.$ionic-font-weight-regular};
 
-  line-height: var(--ionic-line-height-display-s);
+  line-height: #{tokens.$ionic-font-line-height-s};
 }
 
 .ionic-display-m {
-  font-size: var(--ionic-display-m);
+  font-size: #{tokens.$ionic-font-size-display-m};
+  font-weight: #{tokens.$ionic-font-weight-regular};
 
-  line-height: var(--ionic-line-height-display-m);
-}
-
-/* Font sizes */
-.ionic-font-size-s {
-  font-size: var(--ionic-font-size-s);
-}
-.ionic-font-size-m {
-  font-size: var(--ionic-font-size-m);
-}
-.ionic-font-size-l {
-  font-size: var(--ionic-font-size-l);
-}
-
-/* Font weights */
-.ionic-font-light {
-  font-weight: var(--ionic-font-light);
-}
-.ionic-font-regular {
-  font-weight: var(--ionic-font-regular);
-}
-.ionic-font-medium {
-  font-weight: var(--ionic-font-medium);
-}
-.ionic-font-semibold {
-  font-weight: var(--ionic-font-semibold);
-}
-.ionic-font-bold {
-  font-weight: var(--ionic-font-bold);
-}
-
-/* Letter spacing */
-.ionic-letter-spacing-none {
-  letter-spacing: var(--ionic-letter-spacing-none);
-}
-.ionic-letter-spacing-s {
-  letter-spacing: var(--ionic-letter-spacing-s);
-}
-.ionic-letter-spacing-m {
-  letter-spacing: var(--ionic-letter-spacing-m);
+  line-height: #{tokens.$ionic-font-line-height-m};
 }
 
 /* Common */