feat(theme): add new typography styles for the ionic theme (#29212)

Issue number: **ROU-4810**

---------
## Context
All the CSS for typography is temporarily added in the `text.scss` file
because the correct architecture for the new theme implementation isn’t
ready yet. In the future, all these **Sass variables** and **CSS**
created need to be placed at the theme level in terms of architecture.
The typography of an app needs to be divided into `iOS`, `Android (md)`,
and `Ionic` themes.

---------
## What is the new behavior?

- Added new typography styles;

## Does this introduce a breaking change?

- [ ] Yes
- [X] No


## Preview

![image](https://github.com/ionic-team/ionic-framework/assets/25321845/861a13c0-8ebf-43f4-a688-3b51a36d7b06)

---------

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Brandy Carney <brandy@ionic.io>
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>

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

@@ -0,0 +1,107 @@
+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('should apply the globals styles for each semantic tag', async ({ page }) => {
+      await page.setContent(
+        `
+        <link href="/css/typography.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-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-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
+      );
+
+      const div = page.locator('div');
+      await expect(div).toHaveScreenshot(screenshot(`ionic-semantic-global-styles`));
+    });
+
+    test('should apply the utility classes for each heading', async ({ page }) => {
+      await page.setContent(
+        `
+        <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>
+          <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>
+          <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>
+        </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/typography.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/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>
+        </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/typography.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/css/typography.ionic.scss

@@ -0,0 +1,173 @@
+: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;
+}
+
+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);
+}
+
+h1,
+.ionic-heading1,
+h2,
+.ionic-heading2,
+h3,
+.ionic-heading3,
+h4,
+.ionic-heading4,
+h5,
+.ionic-heading5,
+h6,
+.ionic-heading6 {
+  color: var(--ionic-color-base);
+
+  font-weight: var(--ionic-font-semibold);
+}
+
+h1,
+.ionic-heading1 {
+  font-size: var(--ionic-h1-font-size);
+
+  line-height: var(--ionic-line-height-xxl);
+}
+
+h2,
+.ionic-heading2 {
+  font-size: var(--ionic-h2-font-size);
+
+  line-height: var(--ionic-line-height-xl);
+}
+
+h3,
+.ionic-heading3 {
+  font-size: var(--ionic-h3-font-size);
+
+  line-height: var(--ionic-line-height-xl);
+}
+
+h4,
+.ionic-heading4 {
+  font-size: var(--ionic-h4-font-size);
+
+  line-height: var(--ionic-line-height-l);
+}
+
+h5,
+.ionic-heading5 {
+  font-size: var(--ionic-h5-font-size);
+
+  line-height: var(--ionic-line-height-l);
+}
+
+h6,
+.ionic-heading6 {
+  font-size: var(--ionic-h6-font-size);
+
+  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);
+}
+
+.ionic-display-s {
+  font-size: var(--ionic-display-s);
+
+  line-height: var(--ionic-line-height-display-s);
+}
+
+.ionic-display-m {
+  font-size: var(--ionic-display-m);
+
+  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);
+}
+
+/* Common */
+.ionic-font-italic {
+  font-style: italic;
+}