feat(typography): support dynamic type (#28045)

Adds support for dynamic type by converting `font-size` to use `rem` units. Upgrades the `sass` version to `1.33.0` to support this change.

core/package-lock.json

@@ -44,7 +44,7 @@
         "jest-cli": "^27.5.1",
         "prettier": "^2.6.1",
         "rollup": "^2.26.4",
-        "sass": "^1.26.10",
+        "sass": "^1.33.0",
         "serve": "^14.0.1",
         "stylelint": "^13.13.1",
         "stylelint-order": "^4.1.0",
@@ -8811,12 +8811,12 @@
       "dev": true
     },
     "node_modules/sass": {
-      "version": "1.30.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.30.0.tgz",
-      "integrity": "sha512-26EUhOXRLaUY7+mWuRFqGeGGNmhB1vblpTENO1Z7mAzzIZeVxZr9EZoaY1kyGLFWdSOZxRMAufiN2mkbO6dAlw==",
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.33.0.tgz",
+      "integrity": "sha512-9v0MUXnSi62FtfjqcwZ+b8B9FIxdwFEb3FPUkjEPXWd0b5KcnPGSp2XF9WrzcH1ZxedfgJVTdA3A1j4eEj53xg==",
       "dev": true,
       "dependencies": {
-        "chokidar": ">=2.0.0 <4.0.0"
+        "chokidar": ">=3.0.0 <4.0.0"
       },
       "bin": {
         "sass": "sass.js"
@@ -16776,12 +16776,12 @@
       "dev": true
     },
     "sass": {
-      "version": "1.30.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.30.0.tgz",
-      "integrity": "sha512-26EUhOXRLaUY7+mWuRFqGeGGNmhB1vblpTENO1Z7mAzzIZeVxZr9EZoaY1kyGLFWdSOZxRMAufiN2mkbO6dAlw==",
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.33.0.tgz",
+      "integrity": "sha512-9v0MUXnSi62FtfjqcwZ+b8B9FIxdwFEb3FPUkjEPXWd0b5KcnPGSp2XF9WrzcH1ZxedfgJVTdA3A1j4eEj53xg==",
       "dev": true,
       "requires": {
-        "chokidar": ">=2.0.0 <4.0.0"
+        "chokidar": ">=3.0.0 <4.0.0"
       }
     },
     "saxes": {

core/package.json

@@ -66,7 +66,7 @@
     "jest-cli": "^27.5.1",
     "prettier": "^2.6.1",
     "rollup": "^2.26.4",
-    "sass": "^1.26.10",
+    "sass": "^1.33.0",
     "serve": "^14.0.1",
     "stylelint": "^13.13.1",
     "stylelint-order": "^4.1.0",

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

@@ -0,0 +1,35 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('typography: font scaling'), () => {
+    test('should scale text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <div>
+          <h1>Heading 1</h1>
+          <h2>Heading 2</h2>
+          <h3>Heading 3</h3>
+          <h4>Heading 4</h4>
+          <h5>Heading 5</h5>
+          <h6>Heading 6</h6>
+          <p>
+            The quick brown fox <ion-text><sup>jumps</sup></ion-text> over the <ion-text><sub>lazy dog</sub></ion-text>
+          </p>
+        </div>
+      `,
+        config
+      );
+
+      const div = page.locator('div');
+
+      await expect(div).toHaveScreenshot(screenshot(`typography-scale`));
+    });
+  });
+});

core/src/css/typography.scss

@@ -11,22 +11,22 @@ $headings-font-weight:         500 !default;
 $headings-line-height:         1.2 !default;
 
 /// @prop - Font size of heading level 1
-$h1-font-size:                 26px !default;
+$h1-font-size:                 dynamic-font(26px) !default;
 
 /// @prop - Font size of heading level 2
-$h2-font-size:                 24px !default;
+$h2-font-size:                 dynamic-font(24px) !default;
 
 /// @prop - Font size of heading level 3
-$h3-font-size:                 22px !default;
+$h3-font-size:                 dynamic-font(22px) !default;
 
 /// @prop - Font size of heading level 4
-$h4-font-size:                 20px !default;
+$h4-font-size:                 dynamic-font(20px) !default;
 
 /// @prop - Font size of heading level 5
-$h5-font-size:                 18px !default;
+$h5-font-size:                 dynamic-font(18px) !default;
 
 /// @prop - Font size of heading level 6
-$h6-font-size:                 16px !default;
+$h6-font-size:                 dynamic-font(16px) !default;
 
 html {
   font-family: var(--ion-font-family);