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/scripts/tokens.js

@@ -71,7 +71,23 @@ StyleDictionary.registerFormat({
           utilityClass = `.${variablesPrefix}-${className} {\n  ${borderAttribute}: $ionic-${prop.name};\n}`;
           break;
         case 'font':
-          const fontAttribute = prop.attributes.type === 'size' ? 'font-size' : 'font-weight';
+          let fontAttribute;
+          switch (prop.attributes.type) {
+            case 'size':
+              fontAttribute = 'font-size';
+              break;
+            case 'weight':
+              fontAttribute = 'font-weight';
+              break;
+            case 'line-height':
+              fontAttribute = 'line-height';
+              break;
+            case 'letter-spacing':
+              fontAttribute = 'letter-spacing';
+              break;
+            case 'family':
+              return;
+          }
           utilityClass = `.${variablesPrefix}-${className} {\n  ${fontAttribute}: $ionic-${prop.name};\n}`;
           break;
         case 'elevation':

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>
+          <h1 class="ionic-heading2 ionic-font-weight-light">Tag H1 - Style Heading 2 - Font Light</h1>
-          <h2 class="ionic-heading3 ionic-font-light">Tag H2 - Style Heading 3 - Font Light</h2>
+          <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-weight-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-weight-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-weight-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-weight-semi-bold">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-bold">Utility class 'ionic-font-bold'</ion-text></p>
         </div>
       `,
         config

core/src/css/typography.ionic.scss

@@ -1,55 +1,16 @@
-:root {
+@use "../foundations/ionic.vars.scss" as tokens;
-  /* Font Family */
+/* This import below is temporary, to make sure basic tests have access to all utility-classes */
-  --ionic-font-family: "Inter", sans-serif;
+@import "../foundations/ionic.utility.scss";
-
-  /* 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;
-}
 
 html {
-  font-family: var(--ionic-font-family);
+  font-family: #{tokens.$ionic-font-family};
-  font-size: var(--ionic-font-size-m);
+  font-size: #{tokens.$ionic-font-size-m};
-  font-weight: var(--ionic-font-regular);
+  font-weight: #{tokens.$ionic-font-weight-regular};
-  
+
-  line-height: var(--ionic-line-height-m);
+  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);
+  line-height: #{tokens.$ionic-font-line-height-m};
-}
-
-/* Utility Classes */
-/* Font size display */
-.ionic-font-display-s,
-.ionic-font-display-m {
-  font-weight: var(--ionic-font-regular);
 }
 
 .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);
+  line-height: #{tokens.$ionic-font-line-height-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);
 }
 
 /* Common */

core/src/foundations/_design-tokens.json

@@ -232,15 +232,55 @@
   },
   "font": {
     "$type": "font",
-    "size": {
+    "family": {
-      "h1": {
+      "$value": "\"Inter\", sans-serif"
-        "$value": "32px"
+    },
+    "letter-spacing": {
+      "none": {
+        "$value": "0em"
       },
-      "h2": {
+      "s": {
+        "$value": "0.1em"
+      },
+      "m": {
+        "$value": "0.15em"
+      }
+    },
+    "line-height": {
+      "xs": {
+        "$value": "16px"
+      },
+      "s": {
+        "$value": "20px"
+      },
+      "m": {
+        "$value": "24px"
+      },
+      "l": {
         "$value": "28px"
       },
+      "xl": {
+        "$value": "32px"
+      },
+      "xxl": {
+        "$value": "36px"
+      },
+      "display-s": {
+        "$value": "44px"
+      },
+      "display-m": {
+        "$value": "48px"
+      }
+    },
+    "size": {
+      "h1": {
+        "$value": "28px"
+      },
+      "h2": {
+        "$value": "32px"
+      },
       "h3": {
-        "$value": "26px"
+        "$value": "24px"
       },
       "h4": {
         "$value": "22px"
@@ -251,30 +291,35 @@
       "h6": {
         "$value": "18px"
       },
-      "display": {
+      "display-s": {
+        "$value": "32px"
+      },
+      "display-m": {
         "$value": "36px"
       },
-      "base": {
-        "$value": "16px"
-      },
       "s": {
+        "$value": "12px"
+      },
+      "m": {
         "$value": "14px"
       },
-      "xs": {
+      "l": {
-        "$value": "12px"
+        "$value": "16px"
       }
     },
-    "light": {
+    "weight": {
-      "$value": "300"
+      "light": {
-    },
+        "$value": "300"
-    "regular": {
+      },
-      "$value": "400"
+      "regular": {
-    },
+        "$value": "400"
-    "semi-bold": {
+      },
-      "$value": "600"
+      "semi-bold": {
-    },
+        "$value": "600"
-    "bold": {
+      },
-      "$value": "700"
+      "bold": {
+        "$value": "700"
+      }
     }
   },
   "space": {
@@ -288,7 +333,7 @@
     "xxxs": {
       "$value": "4px"
     },
-    "xss": {
+    "xxs": {
       "$value": "6px"
     },
     "xs": {

core/src/foundations/ionic.root.scss

@@ -76,24 +76,37 @@
   --ionic-color-info-800: #02243c;
   --ionic-color-info-900: #020a0f;
   --ionic-color-info: #008bef;
-  --ionic-font-size-h1: 32px;
+  --ionic-font-family: "Inter", sans-serif;
-  --ionic-font-size-h2: 28px;
+  --ionic-font-letter-spacing-none: 0em;
-  --ionic-font-size-h3: 26px;
+  --ionic-font-letter-spacing-s: 0.1em;
+  --ionic-font-letter-spacing-m: 0.15em;
+  --ionic-font-line-height-xs: 16px;
+  --ionic-font-line-height-s: 20px;
+  --ionic-font-line-height-m: 24px;
+  --ionic-font-line-height-l: 28px;
+  --ionic-font-line-height-xl: 32px;
+  --ionic-font-line-height-xxl: 36px;
+  --ionic-font-line-height-display-s: 44px;
+  --ionic-font-line-height-display-m: 48px;
+  --ionic-font-size-h1: 28px;
+  --ionic-font-size-h2: 32px;
+  --ionic-font-size-h3: 24px;
   --ionic-font-size-h4: 22px;
   --ionic-font-size-h5: 20px;
   --ionic-font-size-h6: 18px;
-  --ionic-font-size-display: 36px;
+  --ionic-font-size-display-s: 32px;
-  --ionic-font-size-base: 16px;
+  --ionic-font-size-display-m: 36px;
-  --ionic-font-size-s: 14px;
+  --ionic-font-size-s: 12px;
-  --ionic-font-size-xs: 12px;
+  --ionic-font-size-m: 14px;
-  --ionic-font-light: 300;
+  --ionic-font-size-l: 16px;
-  --ionic-font-regular: 400;
+  --ionic-font-weight-light: 300;
-  --ionic-font-semi-bold: 600;
+  --ionic-font-weight-regular: 400;
-  --ionic-font-bold: 700;
+  --ionic-font-weight-semi-bold: 600;
+  --ionic-font-weight-bold: 700;
   --ionic-space-none: 0;
   --ionic-space-xxxxs: 2px;
   --ionic-space-xxxs: 4px;
-  --ionic-space-xss: 6px;
+  --ionic-space-xxs: 6px;
   --ionic-space-xs: 8px;
   --ionic-space-s: 12px;
   --ionic-space-base: 16px;

core/src/foundations/ionic.utility.scss

@@ -438,6 +438,40 @@
 .ionic-background-color-info {
   background-color: $ionic-color-info;
 }
+
+.ionic-font-letter-spacing-none {
+  letter-spacing: $ionic-font-letter-spacing-none;
+}
+.ionic-font-letter-spacing-s {
+  letter-spacing: $ionic-font-letter-spacing-s;
+}
+.ionic-font-letter-spacing-m {
+  letter-spacing: $ionic-font-letter-spacing-m;
+}
+.ionic-font-line-height-xs {
+  line-height: $ionic-font-line-height-xs;
+}
+.ionic-font-line-height-s {
+  line-height: $ionic-font-line-height-s;
+}
+.ionic-font-line-height-m {
+  line-height: $ionic-font-line-height-m;
+}
+.ionic-font-line-height-l {
+  line-height: $ionic-font-line-height-l;
+}
+.ionic-font-line-height-xl {
+  line-height: $ionic-font-line-height-xl;
+}
+.ionic-font-line-height-xxl {
+  line-height: $ionic-font-line-height-xxl;
+}
+.ionic-font-line-height-display-s {
+  line-height: $ionic-font-line-height-display-s;
+}
+.ionic-font-line-height-display-m {
+  line-height: $ionic-font-line-height-display-m;
+}
 .ionic-font-size-h1 {
   font-size: $ionic-font-size-h1;
 }
@@ -456,29 +490,32 @@
 .ionic-font-size-h6 {
   font-size: $ionic-font-size-h6;
 }
-.ionic-font-size-display {
+.ionic-font-size-display-s {
-  font-size: $ionic-font-size-display;
+  font-size: $ionic-font-size-display-s;
 }
-.ionic-font-size-base {
+.ionic-font-size-display-m {
-  font-size: $ionic-font-size-base;
+  font-size: $ionic-font-size-display-m;
 }
 .ionic-font-size-s {
   font-size: $ionic-font-size-s;
 }
-.ionic-font-size-xs {
+.ionic-font-size-m {
-  font-size: $ionic-font-size-xs;
+  font-size: $ionic-font-size-m;
 }
-.ionic-font-light {
+.ionic-font-size-l {
-  font-weight: $ionic-font-light;
+  font-size: $ionic-font-size-l;
 }
-.ionic-font-regular {
+.ionic-font-weight-light {
-  font-weight: $ionic-font-regular;
+  font-weight: $ionic-font-weight-light;
 }
-.ionic-font-semi-bold {
+.ionic-font-weight-regular {
-  font-weight: $ionic-font-semi-bold;
+  font-weight: $ionic-font-weight-regular;
 }
-.ionic-font-bold {
+.ionic-font-weight-semi-bold {
-  font-weight: $ionic-font-bold;
+  font-weight: $ionic-font-weight-semi-bold;
+}
+.ionic-font-weight-bold {
+  font-weight: $ionic-font-weight-bold;
 }
 .ionic-margin-space-none {
   margin: $ionic-space-none;
@@ -498,11 +535,11 @@
 .ionic-padding-space-xxxs {
   padding: $ionic-space-xxxs;
 }
-.ionic-margin-space-xss {
+.ionic-margin-space-xxs {
-  margin: $ionic-space-xss;
+  margin: $ionic-space-xxs;
 };
-.ionic-padding-space-xss {
+.ionic-padding-space-xxs {
-  padding: $ionic-space-xss;
+  padding: $ionic-space-xxs;
 }
 .ionic-margin-space-xs {
   margin: $ionic-space-xs;

core/src/foundations/ionic.vars.scss

@@ -75,24 +75,37 @@ $ionic-color-info-700: var(--ionic-color-info-700, #003d69);
 $ionic-color-info-800: var(--ionic-color-info-800, #02243c);
 $ionic-color-info-900: var(--ionic-color-info-900, #020a0f);
 $ionic-color-info: var(--ionic-color-info, #008bef);
-$ionic-font-size-h1: var(--ionic-font-size-h1, 32px);
+$ionic-font-family: var(--ionic-font-family, "Inter", sans-serif);
-$ionic-font-size-h2: var(--ionic-font-size-h2, 28px);
+$ionic-font-letter-spacing-none: var(--ionic-font-letter-spacing-none, 0em);
-$ionic-font-size-h3: var(--ionic-font-size-h3, 26px);
+$ionic-font-letter-spacing-s: var(--ionic-font-letter-spacing-s, 0.1em);
+$ionic-font-letter-spacing-m: var(--ionic-font-letter-spacing-m, 0.15em);
+$ionic-font-line-height-xs: var(--ionic-font-line-height-xs, 16px);
+$ionic-font-line-height-s: var(--ionic-font-line-height-s, 20px);
+$ionic-font-line-height-m: var(--ionic-font-line-height-m, 24px);
+$ionic-font-line-height-l: var(--ionic-font-line-height-l, 28px);
+$ionic-font-line-height-xl: var(--ionic-font-line-height-xl, 32px);
+$ionic-font-line-height-xxl: var(--ionic-font-line-height-xxl, 36px);
+$ionic-font-line-height-display-s: var(--ionic-font-line-height-display-s, 44px);
+$ionic-font-line-height-display-m: var(--ionic-font-line-height-display-m, 48px);
+$ionic-font-size-h1: var(--ionic-font-size-h1, 28px);
+$ionic-font-size-h2: var(--ionic-font-size-h2, 32px);
+$ionic-font-size-h3: var(--ionic-font-size-h3, 24px);
 $ionic-font-size-h4: var(--ionic-font-size-h4, 22px);
 $ionic-font-size-h5: var(--ionic-font-size-h5, 20px);
 $ionic-font-size-h6: var(--ionic-font-size-h6, 18px);
-$ionic-font-size-display: var(--ionic-font-size-display, 36px);
+$ionic-font-size-display-s: var(--ionic-font-size-display-s, 32px);
-$ionic-font-size-base: var(--ionic-font-size-base, 16px);
+$ionic-font-size-display-m: var(--ionic-font-size-display-m, 36px);
-$ionic-font-size-s: var(--ionic-font-size-s, 14px);
+$ionic-font-size-s: var(--ionic-font-size-s, 12px);
-$ionic-font-size-xs: var(--ionic-font-size-xs, 12px);
+$ionic-font-size-m: var(--ionic-font-size-m, 14px);
-$ionic-font-light: var(--ionic-font-light, 300);
+$ionic-font-size-l: var(--ionic-font-size-l, 16px);
-$ionic-font-regular: var(--ionic-font-regular, 400);
+$ionic-font-weight-light: var(--ionic-font-weight-light, 300);
-$ionic-font-semi-bold: var(--ionic-font-semi-bold, 600);
+$ionic-font-weight-regular: var(--ionic-font-weight-regular, 400);
-$ionic-font-bold: var(--ionic-font-bold, 700);
+$ionic-font-weight-semi-bold: var(--ionic-font-weight-semi-bold, 600);
+$ionic-font-weight-bold: var(--ionic-font-weight-bold, 700);
 $ionic-space-none: var(--ionic-space-none, 0);
 $ionic-space-xxxxs: var(--ionic-space-xxxxs, 2px);
 $ionic-space-xxxs: var(--ionic-space-xxxs, 4px);
-$ionic-space-xss: var(--ionic-space-xss, 6px);
+$ionic-space-xxs: var(--ionic-space-xxs, 6px);
 $ionic-space-xs: var(--ionic-space-xs, 8px);
 $ionic-space-s: var(--ionic-space-s, 12px);
 $ionic-space-base: var(--ionic-space-base, 16px);