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]};

core/src/css/ionic/core.ionic.scss

@@ -1,6 +1,6 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
 
-// Ionic Font Family
+// Ionic Font
 // --------------------------------------------------
 
 :root {
@@ -10,7 +10,6 @@
 
 html {
   --ionic-dynamic-font: -apple-system-body;
-  font-family: #{globals.$ionic-font-family};
 }
 
 body {

core/src/css/ionic/typography.ionic.scss

@@ -1,91 +1,35 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
 
+// TODO(ROU-10833): add font loading solution here, as a @font-face, base64 or cdn
 html {
   font-family: globals.$ionic-font-family;
 }
 
 body {
-  font-weight: globals.$ionic-font-weight-regular;
+  @include globals.typography(globals.$ionic-body-md-regular);
-  font-size: globals.$ionic-font-size-350;
-
-  line-height: globals.$ionic-line-height-600;
 }
 
-/* Composite utility classes for html headings and font classes, that aggregate size and weight, based on tokens*/
+/* Override html headings based on heading tokens */
-h1,
+h1 {
-.ionic-heading1,
+  @include globals.typography(globals.$ionic-heading-h1-regular);
-h2,
-.ionic-heading2,
-h3,
-.ionic-heading3,
-h4,
-.ionic-heading4,
-h5,
-.ionic-heading5,
-h6,
-.ionic-heading6 {
-  color: globals.$ionic-color-neutral-900;
-
-  font-weight: globals.$ionic-font-weight-semi-bold;
 }
 
-h1,
+h2 {
-.ionic-heading1 {
+  @include globals.typography(globals.$ionic-heading-h2-regular);
-  font-size: #{globals.$ionic-font-size-700};
-
-  line-height: globals.$ionic-line-height-900;
 }
 
-h2,
+h3 {
-.ionic-heading2 {
+  @include globals.typography(globals.$ionic-heading-h3-regular);
-  font-size: globals.$ionic-font-size-800;
-
-  line-height: globals.$ionic-line-height-800;
 }
 
-h3,
+h4 {
-.ionic-heading3 {
+  @include globals.typography(globals.$ionic-heading-h4-regular);
-  font-size: globals.$ionic-font-size-600;
-
-  line-height: globals.$ionic-line-height-800;
 }
 
-h4,
+h5 {
-.ionic-heading4 {
+  @include globals.typography(globals.$ionic-heading-h5-regular);
-  font-size: globals.$ionic-font-size-550;
-
-  line-height: globals.$ionic-line-height-700;
 }
 
-h5,
+h6 {
-.ionic-heading5 {
+  @include globals.typography(globals.$ionic-heading-h6-regular);
-  font-size: globals.$ionic-font-size-500;
-
-  line-height: globals.$ionic-line-height-700;
-}
-
-h6,
-.ionic-heading6 {
-  font-size: globals.$ionic-font-size-450;
-
-  line-height: globals.$ionic-line-height-600;
-}
-
-.ionic-display-s {
-  font-size: globals.$ionic-font-size-800;
-  font-weight: globals.$ionic-font-weight-regular;
-
-  line-height: globals.$ionic-line-height-500;
-}
-
-.ionic-display-m {
-  font-size: globals.$ionic-font-size-900;
-  font-weight: globals.$ionic-font-weight-regular;
-
-  line-height: globals.$ionic-line-height-600;
-}
-
-/* Common */
-.ionic-font-italic {
-  font-style: italic;
 }

core/src/css/test/typography/basic/index.html

@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr" theme="ionic">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Typography - Display Tokens</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic/bundle.ionic.css" rel="stylesheet" />
+    <!-- TODO(ROU-10833): remove this cdn for the font, when the font loading is solved -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <style>
+      ion-title {
+        margin: 10px 0;
+      }
+    </style>
+
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Typography - Display Tokens</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ionic-padding-space-400">
+        <div>
+          <ion-title>Display</ion-title>
+          <ion-title>lg</ion-title>
+          <p><ion-text class="ionic-display-lg-regular">display-lg-regular</ion-text></p>
+          <p><ion-text class="ionic-display-lg-light">display-lg-light</ion-text></p>
+          <ion-title>sm</ion-title>
+          <p><ion-text class="ionic-display-sm-regular">display-sm-regular</ion-text></p>
+          <p><ion-text class="ionic-display-sm-light">display-sm-light</ion-text></p>
+        </div>
+        <br />
+        <div>
+          <ion-title>Headings</ion-title>
+          <ion-title>h1</ion-title>
+          <p><ion-text class="ionic-heading-h1-regular">heading-h1-regular</ion-text></p>
+          <p><ion-text class="ionic-heading-h1-medium">heading-h1-medium</ion-text></p>
+          <p><ion-text class="ionic-heading-h1-semi-bold">heading-h1-semi-bold</ion-text></p>
+          <p><ion-text class="ionic-heading-h1-bold">heading-h1-bold</ion-text></p>
+          <ion-title>h2</ion-title>
+          <p><ion-text class="ionic-heading-h2-regular">heading-h2-regular</ion-text></p>
+          <p><ion-text class="ionic-heading-h2-medium">heading-h2-medium</ion-text></p>
+          <p><ion-text class="ionic-heading-h2-semi-bold">heading-h2-semi-bold</ion-text></p>
+          <p><ion-text class="ionic-heading-h2-bold">heading-h2-bold</ion-text></p>
+          <ion-title>h3</ion-title>
+          <p><ion-text class="ionic-heading-h3-regular">heading-h3-regular</ion-text></p>
+          <p><ion-text class="ionic-heading-h3-medium">heading-h3-medium</ion-text></p>
+          <p><ion-text class="ionic-heading-h3-semi-bold">heading-h3-semi-bold</ion-text></p>
+          <p><ion-text class="ionic-heading-h3-bold">heading-h3-bold</ion-text></p>
+          <ion-title>h4</ion-title>
+          <p><ion-text class="ionic-heading-h4-regular">heading-h4-regular</ion-text></p>
+          <p><ion-text class="ionic-heading-h4-medium">heading-h4-medium</ion-text></p>
+          <p><ion-text class="ionic-heading-h4-semi-bold">heading-h4-semi-bold</ion-text></p>
+          <p><ion-text class="ionic-heading-h4-bold">heading-h4-bold</ion-text></p>
+          <ion-title>h5</ion-title>
+          <p><ion-text class="ionic-heading-h5-regular">heading-h5-regular</ion-text></p>
+          <p><ion-text class="ionic-heading-h5-medium">heading-h5-medium</ion-text></p>
+          <p><ion-text class="ionic-heading-h5-semi-bold">heading-h5-semi-bold</ion-text></p>
+          <p><ion-text class="ionic-heading-h5-bold">heading-h5-bold</ion-text></p>
+          <ion-title>h6</ion-title>
+          <p><ion-text class="ionic-heading-h6-regular">heading-h6-regular</ion-text></p>
+          <p><ion-text class="ionic-heading-h6-medium">heading-h6-medium</ion-text></p>
+          <p><ion-text class="ionic-heading-h6-semi-bold">heading-h6-semi-bold</ion-text></p>
+          <p><ion-text class="ionic-heading-h6-bold">heading-h6-bold</ion-text></p>
+        </div>
+        <br />
+        <div>
+          <ion-title>Body</ion-title>
+          <ion-title>sm</ion-title>
+          <p><ion-text class="ionic-body-sm-regular">ionic-body-sm-regular</ion-text></p>
+          <p><ion-text class="ionic-body-sm-medium">ionic-body-sm-medium</ion-text></p>
+          <p><ion-text class="ionic-body-sm-semi-bold">ionic-body-sm-semi-bold</ion-text></p>
+          <p><ion-text class="ionic-body-sm-bold">ionic-body-sm-bold</ion-text></p>
+          <p><ion-text class="ionic-body-sm-link">ionic-body-sm-link</ion-text></p>
+          <p><ion-text class="ionic-body-sm-italic">ionic-body-sm-italic</ion-text></p>
+          <ion-title>md</ion-title>
+          <p><ion-text class="ionic-body-md-regular">ionic-body-md-regular</ion-text></p>
+          <p><ion-text class="ionic-body-md-medium">ionic-body-md-medium</ion-text></p>
+          <p><ion-text class="ionic-body-md-semi-bold">ionic-body-md-semi-bold</ion-text></p>
+          <p><ion-text class="ionic-body-md-bold">ionic-body-md-bold</ion-text></p>
+          <p><ion-text class="ionic-body-md-link">ionic-body-md-link</ion-text></p>
+          <p><ion-text class="ionic-body-md-italic">ionic-body-md-italic</ion-text></p>
+          <ion-title>lg</ion-title>
+          <p><ion-text class="ionic-body-lg-regular">ionic-body-lg-regular</ion-text></p>
+          <p><ion-text class="ionic-body-lg-medium">ionic-body-lg-medium</ion-text></p>
+          <p><ion-text class="ionic-body-lg-semi-bold">ionic-body-lg-semi-bold</ion-text></p>
+          <p><ion-text class="ionic-body-lg-bold">ionic-body-lg-bold</ion-text></p>
+          <p><ion-text class="ionic-body-lg-link">ionic-body-lg-link</ion-text></p>
+          <p><ion-text class="ionic-body-lg-italic">ionic-body-lg-italic</ion-text></p>
+        </div>
+        <br />
+        <div>
+          <ion-title>Action</ion-title>
+          <p><ion-text class="ionic-action-sm">ionic-action-sm</ion-text></p>
+          <p><ion-text class="ionic-action-md">ionic-action-md</ion-text></p>
+          <p><ion-text class="ionic-action-lg">ionic-action-lg</ion-text></p>
+          <p><ion-text class="ionic-action-xl">ionic-action-xl</ion-text></p>
+        </div>
+        <br />
+        <div>
+          <ion-title>Overline</ion-title>
+          <p><ion-text class="ionic-overline-regular">ionic-overline-regular</ion-text></p>
+          <p><ion-text class="ionic-overline-medium">ionic-overline-medium</ion-text></p>
+          <p><ion-text class="ionic-overline-semi-bold">ionic-overline-semi-bold</ion-text></p>
+          <p><ion-text class="ionic-overline-bold">ionic-overline-bold</ion-text></p>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>

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

@@ -1,112 +1,14 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-/**
- * Typography styles are only available in the Ionic theme
- */
 configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('typography: global styles'), () => {
+  test.describe(title('Typography: basic'), () => {
-    test('should apply the globals styles for each semantic tag', async ({ page }) => {
+    test('should not have visual regressions', async ({ page }) => {
-      await page.setContent(
+      await page.goto(`/src/css/test/typography/basic`, config);
-        `
-        <link href="/css/ionic/typography.ionic.css" rel="stylesheet" />
-        <link href="/css/ionic/utils.bundle.ionic.css" rel="stylesheet" />
-        <div>
-          <h1>H1: The quick brown fox jumps over the lazy dog</h1>
-          <h2>H2: The quick brown fox jumps over the lazy dog</h2>
-          <h3>H3: The quick brown fox jumps over the lazy dog</h3>
-          <h4>H4: The quick brown fox jumps over the lazy dog</h4>
-          <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-400"><p>Tag_P FontLarge: The quick brown fox jumps over the lazy dog</p></ion-text><p>
-          <p><ion-text class="ionic-font-size-350">Tag_None FontMedium: The quick brown fox jumps over the lazydog</ion-text></p>
-          <p><ion-text class="ionic-font-size-300"><span>Tag_Span FontSmall: The quick brown fox jumps over the lazy dog</span></ion-text></p>
-        </div>
-      `,
-        config
-      );
 
-      const div = page.locator('div');
+      await page.setIonViewport();
-      await expect(div).toHaveScreenshot(screenshot(`ionic-semantic-global-styles`));
-    });
 
-    test('should apply the utility classes for each heading', async ({ page }) => {
+      await expect(page).toHaveScreenshot(screenshot(`ionic-typography-basic-styles`));
-      await page.setContent(
-        `
-        <link href="/css/ionic/typography.ionic.css" rel="stylesheet" />
-        <link href="/css/ionic/utils.bundle.ionic.css" rel="stylesheet" />
-        <div>
-          <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-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-weight-bold">Tag H6 - Style Heading 1 - Font Bold</h6>
-        </div>
-      `,
-        config
-      );
-
-      const div = page.locator('div');
-      await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-semantic-tags`));
-    });
-
-    test('should apply the heading classes on ion-text element', async ({ page }) => {
-      await page.setContent(
-        `
-        <link href="/css/ionic/typography.ionic.css" rel="stylesheet" />
-        <link href="/css/ionic/utils.bundle.ionic.css" rel="stylesheet" />
-        <div>
-          <p><ion-text class="ionic-heading1">Utility class 'ionic-heading1'</ion-text></p>
-          <p><ion-text class="ionic-heading2">Utility class 'ionic-heading2'</ion-text></p>
-          <p><ion-text class="ionic-heading3">Utility class 'ionic-heading3'</ion-text></p>
-          <p><ion-text class="ionic-heading4">Utility class 'ionic-heading4'</ion-text></p>
-          <p><ion-text class="ionic-heading5">Utility class 'ionic-heading5'</ion-text></p>
-          <p><ion-text class="ionic-heading6">Utility class 'ionic-heading6'</ion-text></p>
-        </div>
-      `,
-        config
-      );
-
-      const div = page.locator('div');
-      await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-headings`));
-    });
-
-    test('should apply the utility classes for font weights', async ({ page }) => {
-      await page.setContent(
-        `
-        <link href="/css/ionic/typography.ionic.css" rel="stylesheet" />
-        <link href="/css/ionic/utils.bundle.ionic.css" rel="stylesheet" />
-        <div>
-          <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
-      );
-
-      const div = page.locator('div');
-      await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-font-weights`));
-    });
-
-    test('should apply the utility classes for font display', async ({ page }) => {
-      await page.setContent(
-        `
-        <link href="/css/ionic/typography.ionic.css" rel="stylesheet" />
-        <link href="/css/ionic/utils.bundle.ionic.css" rel="stylesheet" />
-        <div>
-          <p><ion-text class="ionic-display-s">Utility class 'ionic-display-s'</ion-text></p>
-          <p><ion-text class="ionic-display-m">Utility class 'ionic-display-m'</ion-text></p>
-        </div>
-      `,
-        config
-      );
-
-      const div = page.locator('div');
-      await expect(div).toHaveScreenshot(screenshot(`ionic-utility-classes-font-displays`));
     });
   });
 });

core/src/foundations/ionic.utility.scss

@@ -1961,8 +1961,8 @@
 }
 
 .ionic-display-sm-regular {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-800;
+  font-style: normal;
   font-weight: $ionic-font-weight-regular;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-1100;
@@ -1971,8 +1971,8 @@
 }
 
 .ionic-display-sm-light {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-800;
+  font-style: normal;
   font-weight: $ionic-font-weight-light;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-1100;
@@ -1980,19 +1980,9 @@
   text-decoration: none;
 }
 
-.ionic-display-lg-light {
-  font-family: $ionic-font-family;
-  font-size: $ionic-font-size-900;
-  font-weight: $ionic-font-weight-light;
-  letter-spacing: $ionic-letter-spacing-0;
-  line-height: $ionic-line-height-1200;
-  text-transform: none;
-  text-decoration: none;
-}
-
 .ionic-display-lg-regular {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-900;
+  font-style: normal;
   font-weight: $ionic-font-weight-regular;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-1200;
@@ -2000,9 +1990,19 @@
   text-decoration: none;
 }
 
+.ionic-display-lg-light {
+  font-size: $ionic-font-size-900;
+  font-style: normal;
+  font-weight: $ionic-font-weight-light;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-1200;
+  text-transform: none;
+  text-decoration: none;
+}
+
 .ionic-heading-h1-regular {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-700;
+  font-style: normal;
   font-weight: $ionic-font-weight-regular;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-900;
@@ -2011,9 +2011,9 @@
 }
 
 .ionic-heading-h1-medium {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-700;
-  font-weight: $ionic-font-weight-bold;
+  font-style: normal;
+  font-weight: $ionic-font-weight-medium;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-900;
   text-transform: none;
@@ -2021,9 +2021,9 @@
 }
 
 .ionic-heading-h1-semi-bold {
-  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-600;
-  font-size: $ionic-font-size-700;
+  font-style: normal;
-  font-weight: $ionic-font-weight-bold;
+  font-weight: $ionic-font-weight-semi-bold;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-900;
   text-transform: none;
@@ -2031,8 +2031,8 @@
 }
 
 .ionic-heading-h1-bold {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-700;
+  font-style: normal;
   font-weight: $ionic-font-weight-bold;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-900;
@@ -2041,8 +2041,8 @@
 }
 
 .ionic-heading-h2-regular {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-650;
+  font-style: normal;
   font-weight: $ionic-font-weight-regular;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-900;
@@ -2051,8 +2051,8 @@
 }
 
 .ionic-heading-h2-medium {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-650;
+  font-style: normal;
   font-weight: $ionic-font-weight-medium;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-900;
@@ -2061,9 +2061,9 @@
 }
 
 .ionic-heading-h2-semi-bold {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-650;
-  font-weight: $ionic-font-weight-bold;
+  font-style: normal;
+  font-weight: $ionic-font-weight-semi-bold;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-900;
   text-transform: none;
@@ -2071,8 +2071,8 @@
 }
 
 .ionic-heading-h2-bold {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-650;
+  font-style: normal;
   font-weight: $ionic-font-weight-bold;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-900;
@@ -2081,8 +2081,8 @@
 }
 
 .ionic-heading-h3-regular {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-600;
+  font-style: normal;
   font-weight: $ionic-font-weight-regular;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-800;
@@ -2090,19 +2090,9 @@
   text-decoration: none;
 }
 
-.ionic-heading-h3-semi-bold {
-  font-family: $ionic-font-family;
-  font-size: $ionic-font-size-600;
-  font-weight: $ionic-font-weight-bold;
-  letter-spacing: $ionic-letter-spacing-0;
-  line-height: $ionic-line-height-800;
-  text-transform: none;
-  text-decoration: none;
-}
-
 .ionic-heading-h3-medium {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-600;
+  font-style: normal;
   font-weight: $ionic-font-weight-medium;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-800;
@@ -2110,9 +2100,19 @@
   text-decoration: none;
 }
 
-.ionic-heading-h3-bold {
+.ionic-heading-h3-semi-bold {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-600;
+  font-style: normal;
+  font-weight: $ionic-font-weight-semi-bold;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-800;
+  text-transform: none;
+  text-decoration: none;
+}
+
+.ionic-heading-h3-bold {
+  font-size: $ionic-font-size-600;
+  font-style: normal;
   font-weight: $ionic-font-weight-bold;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-800;
@@ -2121,8 +2121,8 @@
 }
 
 .ionic-heading-h4-regular {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-550;
+  font-style: normal;
   font-weight: $ionic-font-weight-regular;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-700;
@@ -2131,8 +2131,8 @@
 }
 
 .ionic-heading-h4-medium {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-550;
+  font-style: normal;
   font-weight: $ionic-font-weight-medium;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-700;
@@ -2141,9 +2141,9 @@
 }
 
 .ionic-heading-h4-semi-bold {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-550;
-  font-weight: $ionic-font-weight-bold;
+  font-style: normal;
+  font-weight: $ionic-font-weight-semi-bold;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-700;
   text-transform: none;
@@ -2151,8 +2151,8 @@
 }
 
 .ionic-heading-h4-bold {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-550;
+  font-style: normal;
   font-weight: $ionic-font-weight-bold;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-700;
@@ -2161,8 +2161,8 @@
 }
 
 .ionic-heading-h5-regular {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-500;
+  font-style: normal;
   font-weight: $ionic-font-weight-regular;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-700;
@@ -2171,8 +2171,8 @@
 }
 
 .ionic-heading-h5-medium {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-500;
+  font-style: normal;
   font-weight: $ionic-font-weight-medium;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-700;
@@ -2181,9 +2181,9 @@
 }
 
 .ionic-heading-h5-semi-bold {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-500;
-  font-weight: $ionic-font-weight-bold;
+  font-style: normal;
+  font-weight: $ionic-font-weight-semi-bold;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-700;
   text-transform: none;
@@ -2191,8 +2191,8 @@
 }
 
 .ionic-heading-h5-bold {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-500;
+  font-style: normal;
   font-weight: $ionic-font-weight-bold;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-700;
@@ -2201,8 +2201,8 @@
 }
 
 .ionic-heading-h6-regular {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-450;
+  font-style: normal;
   font-weight: $ionic-font-weight-regular;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-700;
@@ -2211,8 +2211,8 @@
 }
 
 .ionic-heading-h6-medium {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-450;
+  font-style: normal;
   font-weight: $ionic-font-weight-medium;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-700;
@@ -2221,9 +2221,9 @@
 }
 
 .ionic-heading-h6-semi-bold {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-450;
-  font-weight: $ionic-font-weight-bold;
+  font-style: normal;
+  font-weight: $ionic-font-weight-semi-bold;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-700;
   text-transform: none;
@@ -2231,8 +2231,8 @@
 }
 
 .ionic-heading-h6-bold {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-450;
+  font-style: normal;
   font-weight: $ionic-font-weight-bold;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-700;
@@ -2240,129 +2240,9 @@
   text-decoration: none;
 }
 
-.ionic-body-sm-regular {
-  font-family: $ionic-font-family;
-  font-size: $ionic-font-size-300;
-  font-weight: $ionic-font-weight-regular;
-  letter-spacing: $ionic-letter-spacing-0;
-  line-height: $ionic-line-height-400;
-  text-transform: none;
-  text-decoration: none;
-}
-
-.ionic-body-sm-medium {
-  font-family: $ionic-font-family;
-  font-size: $ionic-font-size-300;
-  font-weight: $ionic-font-weight-medium;
-  letter-spacing: $ionic-letter-spacing-0;
-  line-height: $ionic-line-height-400;
-  text-transform: none;
-  text-decoration: none;
-}
-
-.ionic-body-sm-semi-bold {
-  font-family: $ionic-font-family;
-  font-size: $ionic-font-size-300;
-  font-weight: $ionic-font-weight-bold;
-  letter-spacing: $ionic-letter-spacing-0;
-  line-height: $ionic-line-height-400;
-  text-transform: none;
-  text-decoration: none;
-}
-
-.ionic-body-sm-bold {
-  font-family: $ionic-font-family;
-  font-size: $ionic-font-size-300;
-  font-weight: $ionic-font-weight-bold;
-  letter-spacing: $ionic-letter-spacing-0;
-  line-height: $ionic-line-height-400;
-  text-transform: none;
-  text-decoration: none;
-}
-
-.ionic-body-sm-link {
-  font-family: $ionic-font-family;
-  font-size: $ionic-font-size-300;
-  font-weight: $ionic-font-weight-regular;
-  letter-spacing: $ionic-letter-spacing-0;
-  line-height: $ionic-line-height-400;
-  text-transform: none;
-  text-decoration: underline;
-}
-
-.ionic-body-sm-italic {
-  font-family: $ionic-font-family;
-  font-size: $ionic-font-size-300;
-  font-weight: $ionic-font-weight-regular;
-  letter-spacing: $ionic-letter-spacing-0;
-  line-height: $ionic-line-height-400;
-  text-transform: none;
-  text-decoration: none;
-}
-
-.ionic-body-md-medium {
-  font-family: $ionic-font-family;
-  font-size: $ionic-font-size-350;
-  font-weight: $ionic-font-weight-medium;
-  letter-spacing: $ionic-letter-spacing-0;
-  line-height: $ionic-line-height-600;
-  text-transform: none;
-  text-decoration: none;
-}
-
-.ionic-body-md-semi-bold {
-  font-family: $ionic-font-family;
-  font-size: $ionic-font-size-350;
-  font-weight: $ionic-font-weight-bold;
-  letter-spacing: $ionic-letter-spacing-0;
-  line-height: $ionic-line-height-600;
-  text-transform: none;
-  text-decoration: none;
-}
-
-.ionic-body-md-bold {
-  font-family: $ionic-font-family;
-  font-size: $ionic-font-size-350;
-  font-weight: $ionic-font-weight-bold;
-  letter-spacing: $ionic-letter-spacing-0;
-  line-height: $ionic-line-height-600;
-  text-transform: none;
-  text-decoration: none;
-}
-
-.ionic-body-md-regular {
-  font-family: $ionic-font-family;
-  font-size: $ionic-font-size-350;
-  font-weight: $ionic-font-weight-regular;
-  letter-spacing: $ionic-letter-spacing-0;
-  line-height: $ionic-line-height-600;
-  text-transform: none;
-  text-decoration: none;
-}
-
-.ionic-body-md-link {
-  font-family: $ionic-font-family;
-  font-size: $ionic-font-size-350;
-  font-weight: $ionic-font-weight-regular;
-  letter-spacing: $ionic-letter-spacing-0;
-  line-height: $ionic-line-height-600;
-  text-transform: none;
-  text-decoration: underline;
-}
-
-.ionic-body-md-italic {
-  font-family: $ionic-font-family;
-  font-size: $ionic-font-size-350;
-  font-weight: $ionic-font-weight-regular;
-  letter-spacing: $ionic-letter-spacing-0;
-  line-height: $ionic-line-height-600;
-  text-transform: none;
-  text-decoration: none;
-}
-
 .ionic-body-lg-regular {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-400;
+  font-style: normal;
   font-weight: $ionic-font-weight-regular;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-600;
@@ -2371,8 +2251,8 @@
 }
 
 .ionic-body-lg-medium {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-400;
+  font-style: normal;
   font-weight: $ionic-font-weight-medium;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-600;
@@ -2381,9 +2261,9 @@
 }
 
 .ionic-body-lg-semi-bold {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-400;
-  font-weight: $ionic-font-weight-bold;
+  font-style: normal;
+  font-weight: $ionic-font-weight-semi-bold;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-600;
   text-transform: none;
@@ -2391,8 +2271,8 @@
 }
 
 .ionic-body-lg-bold {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-400;
+  font-style: normal;
   font-weight: $ionic-font-weight-bold;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-600;
@@ -2401,8 +2281,8 @@
 }
 
 .ionic-body-lg-link {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-400;
+  font-style: normal;
   font-weight: $ionic-font-weight-regular;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-600;
@@ -2411,8 +2291,8 @@
 }
 
 .ionic-body-lg-italic {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-400;
+  font-style: italic;
   font-weight: $ionic-font-weight-regular;
   letter-spacing: $ionic-letter-spacing-0;
   line-height: $ionic-line-height-600;
@@ -2420,19 +2300,129 @@
   text-decoration: none;
 }
 
-.ionic-action-sm {
+.ionic-body-md-regular {
-  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-350;
-  font-size: $ionic-font-size-300;
+  font-style: normal;
-  font-weight: $ionic-font-weight-medium;
+  font-weight: $ionic-font-weight-regular;
-  letter-spacing: $ionic-letter-spacing-1;
+  letter-spacing: $ionic-letter-spacing-0;
-  line-height: $ionic-line-height-400;
+  line-height: $ionic-line-height-600;
   text-transform: none;
   text-decoration: none;
 }
 
-.ionic-action-md {
+.ionic-body-md-medium {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-350;
+  font-style: normal;
+  font-weight: $ionic-font-weight-medium;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-600;
+  text-transform: none;
+  text-decoration: none;
+}
+
+.ionic-body-md-semi-bold {
+  font-size: $ionic-font-size-350;
+  font-style: normal;
+  font-weight: $ionic-font-weight-semi-bold;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-600;
+  text-transform: none;
+  text-decoration: none;
+}
+
+.ionic-body-md-bold {
+  font-size: $ionic-font-size-350;
+  font-style: normal;
+  font-weight: $ionic-font-weight-bold;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-600;
+  text-transform: none;
+  text-decoration: none;
+}
+
+.ionic-body-md-link {
+  font-size: $ionic-font-size-350;
+  font-style: normal;
+  font-weight: $ionic-font-weight-regular;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-600;
+  text-transform: none;
+  text-decoration: underline;
+}
+
+.ionic-body-md-italic {
+  font-size: $ionic-font-size-350;
+  font-style: italic;
+  font-weight: $ionic-font-weight-regular;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-600;
+  text-transform: none;
+  text-decoration: none;
+}
+
+.ionic-body-sm-regular {
+  font-size: $ionic-font-size-300;
+  font-style: normal;
+  font-weight: $ionic-font-weight-regular;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-500;
+  text-transform: none;
+  text-decoration: none;
+}
+
+.ionic-body-sm-medium {
+  font-size: $ionic-font-size-300;
+  font-style: normal;
+  font-weight: $ionic-font-weight-medium;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-500;
+  text-transform: none;
+  text-decoration: none;
+}
+
+.ionic-body-sm-semi-bold {
+  font-size: $ionic-font-size-300;
+  font-style: normal;
+  font-weight: $ionic-font-weight-semi-bold;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-500;
+  text-transform: none;
+  text-decoration: none;
+}
+
+.ionic-body-sm-bold {
+  font-size: $ionic-font-size-300;
+  font-style: normal;
+  font-weight: $ionic-font-weight-bold;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-500;
+  text-transform: none;
+  text-decoration: none;
+}
+
+.ionic-body-sm-link {
+  font-size: $ionic-font-size-300;
+  font-style: normal;
+  font-weight: $ionic-font-weight-regular;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-500;
+  text-transform: none;
+  text-decoration: underline;
+}
+
+.ionic-body-sm-italic {
+  font-size: $ionic-font-size-300;
+  font-style: italic;
+  font-weight: $ionic-font-weight-regular;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-500;
+  text-transform: none;
+  text-decoration: none;
+}
+
+.ionic-action-xl {
+  font-size: $ionic-font-size-500;
+  font-style: normal;
   font-weight: $ionic-font-weight-medium;
   letter-spacing: $ionic-letter-spacing-1;
   line-height: $ionic-line-height-600;
@@ -2441,8 +2431,8 @@
 }
 
 .ionic-action-lg {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-400;
+  font-style: normal;
   font-weight: $ionic-font-weight-medium;
   letter-spacing: $ionic-letter-spacing-1;
   line-height: $ionic-line-height-600;
@@ -2450,53 +2440,63 @@
   text-decoration: none;
 }
 
-.ionic-action-xl {
+.ionic-action-md {
-  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-350;
-  font-size: $ionic-font-size-500;
+  font-style: normal;
   font-weight: $ionic-font-weight-medium;
   letter-spacing: $ionic-letter-spacing-1;
-  line-height: $ionic-line-height-600;
+  line-height: $ionic-line-height-500;
+  text-transform: none;
+  text-decoration: none;
+}
+
+.ionic-action-sm {
+  font-size: $ionic-font-size-300;
+  font-style: normal;
+  font-weight: $ionic-font-weight-medium;
+  letter-spacing: $ionic-letter-spacing-1;
+  line-height: $ionic-line-height-500;
   text-transform: none;
   text-decoration: none;
 }
 
 .ionic-overline-regular {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-300;
+  font-style: normal;
   font-weight: $ionic-font-weight-regular;
   letter-spacing: $ionic-letter-spacing-2;
-  line-height: $ionic-line-height-400;
+  line-height: $ionic-line-height-500;
-  text-transform: none;
+  text-transform: uppercase;
   text-decoration: none;
 }
 
 .ionic-overline-medium {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-300;
+  font-style: normal;
   font-weight: $ionic-font-weight-medium;
   letter-spacing: $ionic-letter-spacing-2;
-  line-height: $ionic-line-height-400;
+  line-height: $ionic-line-height-500;
-  text-transform: none;
+  text-transform: uppercase;
   text-decoration: none;
 }
 
 .ionic-overline-semi-bold {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-300;
-  font-weight: $ionic-font-weight-bold;
+  font-style: normal;
+  font-weight: $ionic-font-weight-semi-bold;
   letter-spacing: $ionic-letter-spacing-2;
-  line-height: $ionic-line-height-400;
+  line-height: $ionic-line-height-500;
-  text-transform: none;
+  text-transform: uppercase;
   text-decoration: none;
 }
 
 .ionic-overline-bold {
-  font-family: $ionic-font-family;
   font-size: $ionic-font-size-300;
+  font-style: normal;
   font-weight: $ionic-font-weight-bold;
   letter-spacing: $ionic-letter-spacing-2;
-  line-height: $ionic-line-height-400;
+  line-height: $ionic-line-height-500;
-  text-transform: none;
+  text-transform: uppercase;
   text-decoration: none;
 }
 

core/src/foundations/ionic.vars.scss

@@ -653,8 +653,8 @@ $ionic-state-hover: var(--ionic-state-hover, rgba(36, 36, 36, 0.04));
 $ionic-state-pressed: var(--ionic-state-pressed, rgba(36, 36, 36, 0.08));
 
 $ionic-display-sm-regular: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-800,
+  font-style: normal,
   font-weight: $ionic-font-weight-regular,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-1100,
@@ -663,8 +663,8 @@ $ionic-display-sm-regular: (
 );
 
 $ionic-display-sm-light: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-800,
+  font-style: normal,
   font-weight: $ionic-font-weight-light,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-1100,
@@ -672,19 +672,9 @@ $ionic-display-sm-light: (
   text-decoration: none,
 );
 
-$ionic-display-lg-light: (
-  font-family: $ionic-font-family,
-  font-size: $ionic-font-size-900,
-  font-weight: $ionic-font-weight-light,
-  letter-spacing: $ionic-letter-spacing-0,
-  line-height: $ionic-line-height-1200,
-  text-transform: none,
-  text-decoration: none,
-);
-
 $ionic-display-lg-regular: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-900,
+  font-style: normal,
   font-weight: $ionic-font-weight-regular,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-1200,
@@ -692,9 +682,19 @@ $ionic-display-lg-regular: (
   text-decoration: none,
 );
 
+$ionic-display-lg-light: (
+  font-size: $ionic-font-size-900,
+  font-style: normal,
+  font-weight: $ionic-font-weight-light,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-1200,
+  text-transform: none,
+  text-decoration: none,
+);
+
 $ionic-heading-h1-regular: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-700,
+  font-style: normal,
   font-weight: $ionic-font-weight-regular,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-900,
@@ -703,9 +703,9 @@ $ionic-heading-h1-regular: (
 );
 
 $ionic-heading-h1-medium: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-700,
-  font-weight: $ionic-font-weight-bold,
+  font-style: normal,
+  font-weight: $ionic-font-weight-medium,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-900,
   text-transform: none,
@@ -713,9 +713,9 @@ $ionic-heading-h1-medium: (
 );
 
 $ionic-heading-h1-semi-bold: (
-  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-600,
-  font-size: $ionic-font-size-700,
+  font-style: normal,
-  font-weight: $ionic-font-weight-bold,
+  font-weight: $ionic-font-weight-semi-bold,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-900,
   text-transform: none,
@@ -723,8 +723,8 @@ $ionic-heading-h1-semi-bold: (
 );
 
 $ionic-heading-h1-bold: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-700,
+  font-style: normal,
   font-weight: $ionic-font-weight-bold,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-900,
@@ -733,8 +733,8 @@ $ionic-heading-h1-bold: (
 );
 
 $ionic-heading-h2-regular: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-650,
+  font-style: normal,
   font-weight: $ionic-font-weight-regular,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-900,
@@ -743,8 +743,8 @@ $ionic-heading-h2-regular: (
 );
 
 $ionic-heading-h2-medium: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-650,
+  font-style: normal,
   font-weight: $ionic-font-weight-medium,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-900,
@@ -753,9 +753,9 @@ $ionic-heading-h2-medium: (
 );
 
 $ionic-heading-h2-semi-bold: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-650,
-  font-weight: $ionic-font-weight-bold,
+  font-style: normal,
+  font-weight: $ionic-font-weight-semi-bold,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-900,
   text-transform: none,
@@ -763,8 +763,8 @@ $ionic-heading-h2-semi-bold: (
 );
 
 $ionic-heading-h2-bold: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-650,
+  font-style: normal,
   font-weight: $ionic-font-weight-bold,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-900,
@@ -773,8 +773,8 @@ $ionic-heading-h2-bold: (
 );
 
 $ionic-heading-h3-regular: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-600,
+  font-style: normal,
   font-weight: $ionic-font-weight-regular,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-800,
@@ -782,19 +782,9 @@ $ionic-heading-h3-regular: (
   text-decoration: none,
 );
 
-$ionic-heading-h3-semi-bold: (
-  font-family: $ionic-font-family,
-  font-size: $ionic-font-size-600,
-  font-weight: $ionic-font-weight-bold,
-  letter-spacing: $ionic-letter-spacing-0,
-  line-height: $ionic-line-height-800,
-  text-transform: none,
-  text-decoration: none,
-);
-
 $ionic-heading-h3-medium: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-600,
+  font-style: normal,
   font-weight: $ionic-font-weight-medium,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-800,
@@ -802,9 +792,19 @@ $ionic-heading-h3-medium: (
   text-decoration: none,
 );
 
-$ionic-heading-h3-bold: (
+$ionic-heading-h3-semi-bold: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-600,
+  font-style: normal,
+  font-weight: $ionic-font-weight-semi-bold,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-800,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-heading-h3-bold: (
+  font-size: $ionic-font-size-600,
+  font-style: normal,
   font-weight: $ionic-font-weight-bold,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-800,
@@ -813,8 +813,8 @@ $ionic-heading-h3-bold: (
 );
 
 $ionic-heading-h4-regular: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-550,
+  font-style: normal,
   font-weight: $ionic-font-weight-regular,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-700,
@@ -823,8 +823,8 @@ $ionic-heading-h4-regular: (
 );
 
 $ionic-heading-h4-medium: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-550,
+  font-style: normal,
   font-weight: $ionic-font-weight-medium,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-700,
@@ -833,9 +833,9 @@ $ionic-heading-h4-medium: (
 );
 
 $ionic-heading-h4-semi-bold: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-550,
-  font-weight: $ionic-font-weight-bold,
+  font-style: normal,
+  font-weight: $ionic-font-weight-semi-bold,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-700,
   text-transform: none,
@@ -843,8 +843,8 @@ $ionic-heading-h4-semi-bold: (
 );
 
 $ionic-heading-h4-bold: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-550,
+  font-style: normal,
   font-weight: $ionic-font-weight-bold,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-700,
@@ -853,8 +853,8 @@ $ionic-heading-h4-bold: (
 );
 
 $ionic-heading-h5-regular: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-500,
+  font-style: normal,
   font-weight: $ionic-font-weight-regular,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-700,
@@ -863,8 +863,8 @@ $ionic-heading-h5-regular: (
 );
 
 $ionic-heading-h5-medium: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-500,
+  font-style: normal,
   font-weight: $ionic-font-weight-medium,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-700,
@@ -873,9 +873,9 @@ $ionic-heading-h5-medium: (
 );
 
 $ionic-heading-h5-semi-bold: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-500,
-  font-weight: $ionic-font-weight-bold,
+  font-style: normal,
+  font-weight: $ionic-font-weight-semi-bold,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-700,
   text-transform: none,
@@ -883,8 +883,8 @@ $ionic-heading-h5-semi-bold: (
 );
 
 $ionic-heading-h5-bold: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-500,
+  font-style: normal,
   font-weight: $ionic-font-weight-bold,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-700,
@@ -893,8 +893,8 @@ $ionic-heading-h5-bold: (
 );
 
 $ionic-heading-h6-regular: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-450,
+  font-style: normal,
   font-weight: $ionic-font-weight-regular,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-700,
@@ -903,8 +903,8 @@ $ionic-heading-h6-regular: (
 );
 
 $ionic-heading-h6-medium: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-450,
+  font-style: normal,
   font-weight: $ionic-font-weight-medium,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-700,
@@ -913,9 +913,9 @@ $ionic-heading-h6-medium: (
 );
 
 $ionic-heading-h6-semi-bold: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-450,
-  font-weight: $ionic-font-weight-bold,
+  font-style: normal,
+  font-weight: $ionic-font-weight-semi-bold,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-700,
   text-transform: none,
@@ -923,8 +923,8 @@ $ionic-heading-h6-semi-bold: (
 );
 
 $ionic-heading-h6-bold: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-450,
+  font-style: normal,
   font-weight: $ionic-font-weight-bold,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-700,
@@ -932,129 +932,9 @@ $ionic-heading-h6-bold: (
   text-decoration: none,
 );
 
-$ionic-body-sm-regular: (
-  font-family: $ionic-font-family,
-  font-size: $ionic-font-size-300,
-  font-weight: $ionic-font-weight-regular,
-  letter-spacing: $ionic-letter-spacing-0,
-  line-height: $ionic-line-height-400,
-  text-transform: none,
-  text-decoration: none,
-);
-
-$ionic-body-sm-medium: (
-  font-family: $ionic-font-family,
-  font-size: $ionic-font-size-300,
-  font-weight: $ionic-font-weight-medium,
-  letter-spacing: $ionic-letter-spacing-0,
-  line-height: $ionic-line-height-400,
-  text-transform: none,
-  text-decoration: none,
-);
-
-$ionic-body-sm-semi-bold: (
-  font-family: $ionic-font-family,
-  font-size: $ionic-font-size-300,
-  font-weight: $ionic-font-weight-bold,
-  letter-spacing: $ionic-letter-spacing-0,
-  line-height: $ionic-line-height-400,
-  text-transform: none,
-  text-decoration: none,
-);
-
-$ionic-body-sm-bold: (
-  font-family: $ionic-font-family,
-  font-size: $ionic-font-size-300,
-  font-weight: $ionic-font-weight-bold,
-  letter-spacing: $ionic-letter-spacing-0,
-  line-height: $ionic-line-height-400,
-  text-transform: none,
-  text-decoration: none,
-);
-
-$ionic-body-sm-link: (
-  font-family: $ionic-font-family,
-  font-size: $ionic-font-size-300,
-  font-weight: $ionic-font-weight-regular,
-  letter-spacing: $ionic-letter-spacing-0,
-  line-height: $ionic-line-height-400,
-  text-transform: none,
-  text-decoration: underline,
-);
-
-$ionic-body-sm-italic: (
-  font-family: $ionic-font-family,
-  font-size: $ionic-font-size-300,
-  font-weight: $ionic-font-weight-regular,
-  letter-spacing: $ionic-letter-spacing-0,
-  line-height: $ionic-line-height-400,
-  text-transform: none,
-  text-decoration: none,
-);
-
-$ionic-body-md-medium: (
-  font-family: $ionic-font-family,
-  font-size: $ionic-font-size-350,
-  font-weight: $ionic-font-weight-medium,
-  letter-spacing: $ionic-letter-spacing-0,
-  line-height: $ionic-line-height-600,
-  text-transform: none,
-  text-decoration: none,
-);
-
-$ionic-body-md-semi-bold: (
-  font-family: $ionic-font-family,
-  font-size: $ionic-font-size-350,
-  font-weight: $ionic-font-weight-bold,
-  letter-spacing: $ionic-letter-spacing-0,
-  line-height: $ionic-line-height-600,
-  text-transform: none,
-  text-decoration: none,
-);
-
-$ionic-body-md-bold: (
-  font-family: $ionic-font-family,
-  font-size: $ionic-font-size-350,
-  font-weight: $ionic-font-weight-bold,
-  letter-spacing: $ionic-letter-spacing-0,
-  line-height: $ionic-line-height-600,
-  text-transform: none,
-  text-decoration: none,
-);
-
-$ionic-body-md-regular: (
-  font-family: $ionic-font-family,
-  font-size: $ionic-font-size-350,
-  font-weight: $ionic-font-weight-regular,
-  letter-spacing: $ionic-letter-spacing-0,
-  line-height: $ionic-line-height-600,
-  text-transform: none,
-  text-decoration: none,
-);
-
-$ionic-body-md-link: (
-  font-family: $ionic-font-family,
-  font-size: $ionic-font-size-350,
-  font-weight: $ionic-font-weight-regular,
-  letter-spacing: $ionic-letter-spacing-0,
-  line-height: $ionic-line-height-600,
-  text-transform: none,
-  text-decoration: underline,
-);
-
-$ionic-body-md-italic: (
-  font-family: $ionic-font-family,
-  font-size: $ionic-font-size-350,
-  font-weight: $ionic-font-weight-regular,
-  letter-spacing: $ionic-letter-spacing-0,
-  line-height: $ionic-line-height-600,
-  text-transform: none,
-  text-decoration: none,
-);
-
 $ionic-body-lg-regular: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-400,
+  font-style: normal,
   font-weight: $ionic-font-weight-regular,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-600,
@@ -1063,8 +943,8 @@ $ionic-body-lg-regular: (
 );
 
 $ionic-body-lg-medium: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-400,
+  font-style: normal,
   font-weight: $ionic-font-weight-medium,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-600,
@@ -1073,9 +953,9 @@ $ionic-body-lg-medium: (
 );
 
 $ionic-body-lg-semi-bold: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-400,
-  font-weight: $ionic-font-weight-bold,
+  font-style: normal,
+  font-weight: $ionic-font-weight-semi-bold,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-600,
   text-transform: none,
@@ -1083,8 +963,8 @@ $ionic-body-lg-semi-bold: (
 );
 
 $ionic-body-lg-bold: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-400,
+  font-style: normal,
   font-weight: $ionic-font-weight-bold,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-600,
@@ -1093,8 +973,8 @@ $ionic-body-lg-bold: (
 );
 
 $ionic-body-lg-link: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-400,
+  font-style: normal,
   font-weight: $ionic-font-weight-regular,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-600,
@@ -1103,8 +983,8 @@ $ionic-body-lg-link: (
 );
 
 $ionic-body-lg-italic: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-400,
+  font-style: italic,
   font-weight: $ionic-font-weight-regular,
   letter-spacing: $ionic-letter-spacing-0,
   line-height: $ionic-line-height-600,
@@ -1112,19 +992,129 @@ $ionic-body-lg-italic: (
   text-decoration: none,
 );
 
-$ionic-action-sm: (
+$ionic-body-md-regular: (
-  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-350,
-  font-size: $ionic-font-size-300,
+  font-style: normal,
-  font-weight: $ionic-font-weight-medium,
+  font-weight: $ionic-font-weight-regular,
-  letter-spacing: $ionic-letter-spacing-1,
+  letter-spacing: $ionic-letter-spacing-0,
-  line-height: $ionic-line-height-400,
+  line-height: $ionic-line-height-600,
   text-transform: none,
   text-decoration: none,
 );
 
-$ionic-action-md: (
+$ionic-body-md-medium: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-350,
+  font-style: normal,
+  font-weight: $ionic-font-weight-medium,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-600,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-body-md-semi-bold: (
+  font-size: $ionic-font-size-350,
+  font-style: normal,
+  font-weight: $ionic-font-weight-semi-bold,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-600,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-body-md-bold: (
+  font-size: $ionic-font-size-350,
+  font-style: normal,
+  font-weight: $ionic-font-weight-bold,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-600,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-body-md-link: (
+  font-size: $ionic-font-size-350,
+  font-style: normal,
+  font-weight: $ionic-font-weight-regular,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-600,
+  text-transform: none,
+  text-decoration: underline,
+);
+
+$ionic-body-md-italic: (
+  font-size: $ionic-font-size-350,
+  font-style: italic,
+  font-weight: $ionic-font-weight-regular,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-600,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-body-sm-regular: (
+  font-size: $ionic-font-size-300,
+  font-style: normal,
+  font-weight: $ionic-font-weight-regular,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-500,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-body-sm-medium: (
+  font-size: $ionic-font-size-300,
+  font-style: normal,
+  font-weight: $ionic-font-weight-medium,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-500,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-body-sm-semi-bold: (
+  font-size: $ionic-font-size-300,
+  font-style: normal,
+  font-weight: $ionic-font-weight-semi-bold,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-500,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-body-sm-bold: (
+  font-size: $ionic-font-size-300,
+  font-style: normal,
+  font-weight: $ionic-font-weight-bold,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-500,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-body-sm-link: (
+  font-size: $ionic-font-size-300,
+  font-style: normal,
+  font-weight: $ionic-font-weight-regular,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-500,
+  text-transform: none,
+  text-decoration: underline,
+);
+
+$ionic-body-sm-italic: (
+  font-size: $ionic-font-size-300,
+  font-style: italic,
+  font-weight: $ionic-font-weight-regular,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-500,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-action-xl: (
+  font-size: $ionic-font-size-500,
+  font-style: normal,
   font-weight: $ionic-font-weight-medium,
   letter-spacing: $ionic-letter-spacing-1,
   line-height: $ionic-line-height-600,
@@ -1133,8 +1123,8 @@ $ionic-action-md: (
 );
 
 $ionic-action-lg: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-400,
+  font-style: normal,
   font-weight: $ionic-font-weight-medium,
   letter-spacing: $ionic-letter-spacing-1,
   line-height: $ionic-line-height-600,
@@ -1142,52 +1132,62 @@ $ionic-action-lg: (
   text-decoration: none,
 );
 
-$ionic-action-xl: (
+$ionic-action-md: (
-  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-350,
-  font-size: $ionic-font-size-500,
+  font-style: normal,
   font-weight: $ionic-font-weight-medium,
   letter-spacing: $ionic-letter-spacing-1,
-  line-height: $ionic-line-height-600,
+  line-height: $ionic-line-height-500,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-action-sm: (
+  font-size: $ionic-font-size-300,
+  font-style: normal,
+  font-weight: $ionic-font-weight-medium,
+  letter-spacing: $ionic-letter-spacing-1,
+  line-height: $ionic-line-height-500,
   text-transform: none,
   text-decoration: none,
 );
 
 $ionic-overline-regular: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-300,
+  font-style: normal,
   font-weight: $ionic-font-weight-regular,
   letter-spacing: $ionic-letter-spacing-2,
-  line-height: $ionic-line-height-400,
+  line-height: $ionic-line-height-500,
-  text-transform: none,
+  text-transform: uppercase,
   text-decoration: none,
 );
 
 $ionic-overline-medium: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-300,
+  font-style: normal,
   font-weight: $ionic-font-weight-medium,
   letter-spacing: $ionic-letter-spacing-2,
-  line-height: $ionic-line-height-400,
+  line-height: $ionic-line-height-500,
-  text-transform: none,
+  text-transform: uppercase,
   text-decoration: none,
 );
 
 $ionic-overline-semi-bold: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-300,
-  font-weight: $ionic-font-weight-bold,
+  font-style: normal,
+  font-weight: $ionic-font-weight-semi-bold,
   letter-spacing: $ionic-letter-spacing-2,
-  line-height: $ionic-line-height-400,
+  line-height: $ionic-line-height-500,
-  text-transform: none,
+  text-transform: uppercase,
   text-decoration: none,
 );
 
 $ionic-overline-bold: (
-  font-family: $ionic-font-family,
   font-size: $ionic-font-size-300,
+  font-style: normal,
   font-weight: $ionic-font-weight-bold,
   letter-spacing: $ionic-letter-spacing-2,
-  line-height: $ionic-line-height-400,
+  line-height: $ionic-line-height-500,
-  text-transform: none,
+  text-transform: uppercase,
   text-decoration: none,
 );

core/src/themes/ionic/ionic.mixins.scss

@@ -22,3 +22,20 @@
 
   pointer-events: none;
 }
+
+// Typography mixin to be used with typography scss variables (ionic.vars.scss)
+//
+// ex: @include typography($ionic-heading-h3-medium);
+//
+// --------------------------------------------------
+@mixin typography($properties) {
+  font-family: map-get($properties, font-family);
+  font-size: map-get($properties, font-size);
+  font-weight: map-get($properties, font-weight);
+
+  letter-spacing: map-get($properties, letter-spacing);
+  line-height: map-get($properties, line-height);
+
+  text-decoration: map-get($properties, text-decoration);
+  text-transform: map-get($properties, text-transform);
+}

core/src/themes/mixins.scss

@@ -112,21 +112,6 @@
   opacity: 0;
 }
 
-// Typography mixin to be used with typography scss variables (ionic.vars.scss)
-//
-// ex: @include typography($ionic-heading-h3-medium);
-//
-// --------------------------------------------------
-@mixin typography($properties) {
-  font-family: map-get($properties, font-family);
-  font-size: map-get($properties, font-size);
-  font-weight: map-get($properties, font-weight);
-  letter-spacing: map-get($properties, letter-spacing);
-  line-height: map-get($properties, line-height);
-  text-transform: map-get($properties, text-transform);
-  text-decoration: map-get($properties, text-decoration);
-}
-
 // Font smoothing
 // --------------------------------------------------