Merge remote-tracking branch 'origin/FW-4146' into sp/dynamic-type-standalone

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",
@@ -8825,12 +8825,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"
@@ -16798,12 +16798,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/components/action-sheet/action-sheet.ios.scss

@@ -131,11 +131,11 @@
 .action-sheet-button {
   @include padding($action-sheet-ios-button-padding);
 
-  height: $action-sheet-ios-button-height;
+  min-height: $action-sheet-ios-button-height;
 
   font-size: $action-sheet-ios-button-font-size;
 
-  contain: strict;
+  contain: content;
 }
 
 .action-sheet-button .action-sheet-icon {

core/src/components/action-sheet/action-sheet.ios.vars.scss

@@ -50,7 +50,7 @@ $action-sheet-ios-title-padding-start:                            $action-sheet-
 $action-sheet-ios-title-color:                                    $text-color-step-600 !default;
 
 /// @prop - Font size of the action sheet title
-$action-sheet-ios-title-font-size:                                13px !default;
+$action-sheet-ios-title-font-size:                                dynamic-font-min(1, 13px) !default;
 
 /// @prop - Font weight of the action sheet title
 $action-sheet-ios-title-font-weight:                              400 !default;
@@ -75,7 +75,7 @@ $action-sheet-ios-title-border-color:                             rgba($text-col
 // --------------------------------------------------
 
 /// @prop - Font size of the action sheet sub title
-$action-sheet-ios-sub-title-font-size:                            13px !default;
+$action-sheet-ios-sub-title-font-size:                            dynamic-font-min(1, 13px) !default;
 
 /// @prop - Padding top of the action sheet sub title
 $action-sheet-ios-sub-title-padding-top:                          6px !default;
@@ -97,19 +97,19 @@ $action-sheet-ios-sub-title-padding-start:                        $action-sheet-
 $action-sheet-ios-button-height:                                  56px !default;
 
 /// @prop - Padding of the action sheet button
-$action-sheet-ios-button-padding:                                 18px !default;
+$action-sheet-ios-button-padding:                                 14px !default;
 
 /// @prop - Text color of the action sheet button
 $action-sheet-ios-button-text-color:                              ion-color(primary, base) !default;
 
 /// @prop - Font size of the action sheet button icon
-$action-sheet-ios-button-icon-font-size:                          28px !default;
+$action-sheet-ios-button-icon-font-size:                          dynamic-font-min(1, 28px) !default;
 
 /// @prop - Padding right of the action sheet button icon
 $action-sheet-ios-button-icon-padding-right:                      .3em !default;
 
 /// @prop - Font size of the action sheet button
-$action-sheet-ios-button-font-size:                               20px !default;
+$action-sheet-ios-button-font-size:                               dynamic-font-min(1, 20px) !default;
 
 /// @prop - Border color alpha of the action sheet button
 $action-sheet-ios-button-border-color-alpha:                      .08 !default;

core/src/components/action-sheet/action-sheet.md.scss

@@ -67,13 +67,13 @@
 
   position: relative;
 
-  height: $action-sheet-md-button-height;
+  min-height: $action-sheet-md-button-height;
 
   font-size: $action-sheet-md-button-font-size;
 
   text-align: $action-sheet-md-text-align;
 
-  contain: strict;
+  contain: content;
   overflow: hidden;
 }
 

core/src/components/action-sheet/action-sheet.md.vars.scss

@@ -26,7 +26,7 @@ $action-sheet-md-title-height:                          60px !default;
 $action-sheet-md-title-color:                           rgba($text-color-rgb, 0.54) !default;
 
 /// @prop - Font size of the action sheet title
-$action-sheet-md-title-font-size:                       16px !default;
+$action-sheet-md-title-font-size:                       dynamic-font(16px) !default;
 
 /// @prop - Padding top of the action sheet title
 $action-sheet-md-title-padding-top:                     20px !default;
@@ -45,7 +45,7 @@ $action-sheet-md-title-padding-start:                   $action-sheet-md-title-p
 // --------------------------------------------------
 
 /// @prop - Font size of the action sheet sub title
-$action-sheet-md-sub-title-font-size:                   14px !default;
+$action-sheet-md-sub-title-font-size:                   dynamic-font(14px) !default;
 
 /// @prop - Padding top of the action sheet sub title
 $action-sheet-md-sub-title-padding-top:                 16px !default;
@@ -70,10 +70,10 @@ $action-sheet-md-button-height:                         52px !default;
 $action-sheet-md-button-text-color:                     $text-color-step-150 !default;
 
 /// @prop - Font size of the action sheet button
-$action-sheet-md-button-font-size:                      16px !default;
+$action-sheet-md-button-font-size:                      dynamic-font(16px) !default;
 
 /// @prop - Padding top of the action sheet button
-$action-sheet-md-button-padding-top:                    0 !default;
+$action-sheet-md-button-padding-top:                    12px !default;
 
 /// @prop - Padding end of the action sheet button
 $action-sheet-md-button-padding-end:                    16px !default;
@@ -91,7 +91,7 @@ $action-sheet-md-button-background:                     transparent !default;
 // --------------------------------------------------
 
 /// @prop - Font size of the icon in the action sheet button
-$action-sheet-md-icon-font-size:                        24px !default;
+$action-sheet-md-icon-font-size:                        dynamic-font(24px) !default;
 
 /// @prop - Margin top of the icon in the action sheet button
 $action-sheet-md-icon-margin-top:                       0 !default;

core/src/components/action-sheet/action-sheet.scss

@@ -126,7 +126,10 @@
   justify-content: flex-end;
 
   height: 100%;
+
+  /* Fallback for browsers that do not support dvh */
   max-height: 100vh;
+  max-height: 100dvh;
 }
 
 .action-sheet-group {

core/src/components/action-sheet/test/a11y/action-sheet.e2e.ts

@@ -86,3 +86,37 @@ configs({ directions: ['ltr'] }).forEach(({ config, title }) => {
     });
   });
 });
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('action-sheet: font scaling'), () => {
+    test('should scale text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 36px;
+          }
+        </style>
+
+        <ion-action-sheet></ion-action-sheet>
+
+        <script>
+          const actionSheet = document.querySelector('ion-action-sheet');
+          actionSheet.header = 'Header';
+          actionSheet.subHeader = 'Sub Header';
+          actionSheet.buttons = ['Ok', { role: 'cancel', text: 'Cancel' }];
+        </script>
+      `,
+        config
+      );
+
+      const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+      const actionSheet = page.locator('ion-action-sheet');
+
+      await actionSheet.evaluate((el: HTMLIonActionSheetElement) => el.present());
+      await ionActionSheetDidPresent.next();
+
+      await expect(actionSheet).toHaveScreenshot(screenshot(`action-sheet-scale`));
+    });
+  });
+});

core/src/components/back-button/back-button.ios.scss

@@ -13,10 +13,26 @@
   --color: #{$back-button-ios-color};
   --icon-margin-end: 1px;
   --icon-margin-start: -4px;
+  /**
+   * The icon should be sized relative
+   * to the size of the text which is
+   * why we use em here instead of rem.
+   * This allows developers to override
+   * the text font size while ensuring that
+   * the icon is sized relative to that.
+   */
   --icon-font-size: 1.6em;
   --min-height: 32px;
 
-  font-size: 17px;
+  /**
+   * Main content should be prioritized over the back
+   * button which is why a maximum font size is applied.
+   * Also, we want the text to remain readable
+   * so a minimum font size is applied.
+   * Using 1.294 instead of 1.3 aligns the text
+   * with the icon a bit nicer in Firefox.
+   */
+  font-size: dynamic-font-clamp(1, 17px, 1.294);
 }
 
 .button-native {

core/src/components/back-button/back-button.md.scss

@@ -13,14 +13,14 @@
   --color: #{$back-button-md-color};
   --icon-margin-end: 0;
   --icon-margin-start: 0;
-  --icon-font-size: 24px;
+  --icon-font-size: #{dynamic-font(24px)};
   --icon-font-weight: normal;
   --min-height: 32px;
   --min-width: 44px;
   --padding-start: 12px;
   --padding-end: 12px;
 
-  font-size: 14px;
+  font-size: dynamic-font(14px);
   font-weight: 500;
 
   text-transform: uppercase;
@@ -30,7 +30,14 @@
   --border-radius: 50%;
 
   min-width: 48px;
-  height: 48px;
+  min-height: 48px;
+
+  /**
+   * This allows the icon only button to
+   * keep its circular shape even when the
+   * text scales up.
+   */
+  aspect-ratio: 1 / 1;
 }
 
 .button-native {

core/src/components/back-button/test/a11y/back-button.e2e.ts

@@ -0,0 +1,29 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('back-button: font scaling'), () => {
+    test('should scale text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 36px;
+          }
+        </style>
+
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            <ion-back-button default-href="/" text="Back"></ion-back-button>
+          </ion-buttons>
+        </ion-toolbar>
+      `,
+        config
+      );
+
+      const backButton = page.locator('ion-back-button');
+
+      await expect(backButton).toHaveScreenshot(screenshot(`back-button-scale`));
+    });
+  });
+});

core/src/components/badge/badge.ios.scss

@@ -6,4 +6,13 @@
 
 :host {
   @include border-radius($badge-ios-border-radius);
+
+  /**
+   * "-apple-system-body" on iOS never goes smaller than
+   * 14px according to https://developer.apple.com/design/human-interface-guidelines/typography#Specifications.
+   * However, we still keep the max() usage here for consistency
+   * with other components and in case "-apple-system-body" does
+   * go smaller than 14px in the future.
+   */
+  font-size: dynamic-font-min(1, $badge-baseline-font-size);
 }

core/src/components/badge/badge.vars.scss

@@ -18,8 +18,11 @@ $badge-padding-start:             $badge-padding-end !default;
 /// @prop - Minimum width of the badge
 $badge-min-width:                 10px !default;
 
+/// @prop - Baseline font size of the badge
+$badge-baseline-font-size: 13px !default;
+
 /// @prop - Font size of the badge
-$badge-font-size:                 13px !default;
+$badge-font-size:                 dynamic-font($badge-baseline-font-size) !default;
 
 /// @prop - Font weight of the badge
 $badge-font-weight:               bold !default;

core/src/components/badge/test/a11y/badge.e2e.ts

@@ -0,0 +1,25 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('badge: font scaling'), () => {
+    test('should scale text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 36px;
+          }
+        </style>
+
+        <ion-badge>123</ion-badge>
+      `,
+        config
+      );
+
+      const badge = page.locator('ion-badge');
+
+      await expect(badge).toHaveScreenshot(screenshot(`badge-scale`));
+    });
+  });
+});

core/src/components/breadcrumb/breadcrumb.ios.scss

@@ -10,6 +10,14 @@
   --color-hover: #{$breadcrumb-ios-color-active};
   --color-focused: var(--color-active);
   --background-focused: #{$breadcrumb-ios-background-focused};
+
+  /**
+   * Main content should be prioritized
+   * on iOS, so we set max font size for breadcrumbs.
+   * Breadcrumbs can be placed in the content too, so
+   * we add a min font size to keep the text legible.
+   */
+  font-size: dynamic-font-clamp(1, $breadcrumb-baseline-font-size, 1.375);
 }
 
 :host(.breadcrumb-active) {
@@ -58,7 +66,7 @@
 ::slotted(ion-icon) {
   color: $breadcrumb-ios-icon-color;
 
-  font-size: 18px;
+  font-size: dynamic-font-max(18px, 1.2);
 }
 
 ::slotted(ion-icon[slot="start"]) {
@@ -92,3 +100,7 @@
 .breadcrumbs-collapsed-indicator:focus {
   background: $breadcrumb-ios-indicator-background-focused;
 }
+
+.breadcrumbs-collapsed-indicator ion-icon {
+  font-size: dynamic-font-max(22px, 1);
+}

core/src/components/breadcrumb/breadcrumb.md.scss

@@ -53,7 +53,7 @@
 ::slotted(ion-icon) {
   color: $breadcrumb-md-icon-color;
 
-  font-size: 18px;
+  font-size: dynamic-font(18px);
 }
 
 ::slotted(ion-icon[slot="start"]) {

core/src/components/breadcrumb/breadcrumb.scss

@@ -156,5 +156,5 @@
 .breadcrumbs-collapsed-indicator ion-icon {
   margin-top: 1px;
 
-  font-size: 22px;
+  font-size: dynamic-font(22px);
 }

core/src/components/breadcrumb/breadcrumb.vars.scss

@@ -6,8 +6,10 @@
 /// @prop - Font weight of the breadcrumb
 $breadcrumb-font-weight:         400 !default;
 
+$breadcrumb-baseline-font-size: 16px !default;
+
 /// @prop - Font size of the breadcrumb
-$breadcrumb-font-size:           16px !default;
+$breadcrumb-font-size:           dynamic-font($breadcrumb-baseline-font-size) !default;
 
 /// @prop - Color of the breadcrumb separator
 $breadcrumb-separator-color:     var(--ion-color-step-550, #73849a) !default;

core/src/components/breadcrumbs/test/a11y/breadcrumbs.e2e.ts

@@ -12,3 +12,30 @@ configs().forEach(({ config, title }) => {
     });
   });
 });
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('breadcrumbs: font scaling'), () => {
+    test('should scale text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 36px;
+          }
+        </style>
+
+        <ion-breadcrumbs max-items="2" items-before-collapse="1">
+          <ion-breadcrumb>Home</ion-breadcrumb>
+          <ion-breadcrumb>Electronics</ion-breadcrumb>
+          <ion-breadcrumb>Photography</ion-breadcrumb>
+        </ion-breadcrumbs>
+      `,
+        config
+      );
+
+      const breadcrumbs = page.locator('ion-breadcrumbs');
+
+      await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-scale`));
+    });
+  });
+});

core/src/components/button/button.ios.scss

@@ -24,20 +24,6 @@
   letter-spacing: #{$button-ios-letter-spacing};
 }
 
-/**
- * The default buttons in a toolbar
- * have a different font size/weight
- * than buttons outside of a toolbar on iOS.
- * However, we still want the "size"/"strong"
- * properties to be usable in a toolbar, so we add
- * the .in-buttons selector such that we
- * can add the different font size/weight in a toolbar
- * but still let "size"/"strong" override it.
- */
-:host(.in-buttons) {
-  font-size: #{$toolbar-ios-button-font-size};
-  font-weight: 400;
-}
 
 // iOS Solid Button
 // --------------------------------------------------
@@ -82,6 +68,25 @@
 }
 
 
+// iOS Toolbar Buttons
+// --------------------------------------------------
+
+/**
+ * The default buttons in a toolbar
+ * have a different font size/weight
+ * than buttons outside of a toolbar on iOS.
+ * However, we still want the "size"/"strong"
+ * properties to be usable in a toolbar, so we add
+ * the .in-buttons selector such that we
+ * can add the different font size/weight in a toolbar
+ * but still let "size"/"strong" override it.
+ */
+ :host(.in-buttons) {
+   font-size: #{$toolbar-ios-button-font-size};
+   font-weight: 400;
+ }
+
+
 // iOS Button Sizes
 // --------------------------------------------------
 
@@ -127,7 +132,7 @@
 }
 
 
-// iOS strong Button
+// iOS Strong Button
 // --------------------------------------------------
 
 :host(.button-strong) {

core/src/components/button/button.ios.vars.scss

@@ -34,7 +34,9 @@ $button-ios-min-height:                               3.1em !default;
 $button-ios-border-radius:                            14px !default;
 
 /// @prop - Font size of the button text
-$button-ios-font-size:                                16px !default;
+/// The maximum font size is calculated by taking the default font size
+/// and multiplying it by 3, since 310% of the default is the maximum
+$button-ios-font-size:                                dynamic-font-max(16px, 3) !default;
 
 /// @prop - Font weight of the button text
 $button-ios-font-weight:                              500 !default;
@@ -83,7 +85,9 @@ $button-ios-large-min-height:                         3.1em !default;
 $button-ios-large-border-radius:                      16px !default;
 
 /// @prop - Font size of the large button
-$button-ios-large-font-size:                          20px !default;
+/// The maximum font size is calculated by taking the default font size
+/// and multiplying it by 3, since 310% of the default is the maximum
+$button-ios-large-font-size:                          dynamic-font-max(20px, 3) !default;
 
 
 // iOS Small Button
@@ -108,7 +112,9 @@ $button-ios-small-min-height:                         2.1em !default;
 $button-ios-small-border-radius:                      6px !default;
 
 /// @prop - Font size of the small button
-$button-ios-small-font-size:                          13px !default;
+/// The maximum font size is calculated by taking the default font size
+/// and multiplying it by 3, since 310% of the default is the maximum
+$button-ios-small-font-size:                          dynamic-font-max(13px, 3) !default;
 
 
 // iOS Outline Button
@@ -151,13 +157,15 @@ $button-ios-outline-background-color-focused:         ion-color(primary, base, $
 // --------------------------------------------------
 
 /// @prop - Font size of the clear button
-$button-ios-clear-font-size:                          17px !default;
+/// The maximum font size is calculated by taking the default font size
+/// and multiplying it by 3, since 310% of the default is the maximum
+$button-ios-clear-font-size:                          dynamic-font-max(17px, 3) !default;
 
 /// @prop - Font weight of the clear button
 $button-ios-clear-font-weight:                        normal !default;
 
 /// @prop - Letter spacing of the button
-$button-ios-letter-spacing:                     0 !default;
+$button-ios-letter-spacing:                           0 !default;
 
 /// @prop - Border color of the clear button
 $button-ios-clear-border-color:                       transparent !default;

core/src/components/button/button.md.vars.scss

@@ -34,7 +34,7 @@ $button-md-min-height:                                  36px !default;
 $button-md-border-radius:                               4px !default;
 
 /// @prop - Font size of the button text
-$button-md-font-size:                                   14px !default;
+$button-md-font-size:                                   dynamic-font(14px) !default;
 
 /// @prop - Font weight of the button text
 $button-md-font-weight:                                 500 !default;
@@ -78,7 +78,7 @@ $button-md-large-padding-start:                         $button-md-large-padding
 $button-md-large-min-height:                            2.8em !default;
 
 /// @prop - Font size of the large button
-$button-md-large-font-size:                             20px !default;
+$button-md-large-font-size:                             dynamic-font(20px) !default;
 
 
 // Material Design Small Button
@@ -100,7 +100,7 @@ $button-md-small-padding-start:                         $button-md-small-padding
 $button-md-small-min-height:                            2.1em !default;
 
 /// @prop - Font size of the small button
-$button-md-small-font-size:                             13px !default;
+$button-md-small-font-size:                             dynamic-font(13px) !default;
 
 
 // Material Design Outline Button

core/src/components/button/test/a11y/button.e2e.ts

@@ -0,0 +1,82 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('button: font scaling'), () => {
+    test('should scale default button text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-button>Default</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-default-scale`));
+    });
+
+    test('should scale clear button text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-button fill="clear">Clear</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-clear-scale`));
+    });
+
+    test('should scale small button text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-button size="small">Small</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-small-scale`));
+    });
+
+    test('should scale large button text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 310%;
+          }
+        </style>
+
+        <ion-button size="large">Large</ion-button>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`button-large-scale`));
+    });
+  });
+});

core/src/components/buttons/buttons.ios.scss

@@ -88,7 +88,10 @@
   @include margin(0);
   @include margin-horizontal(null, .3em);
 
-  font-size: 24px;
+  // This value is calculated by dividing the font size the
+  // icon should be in px (24px) by the font size of its
+  // parent button (17px). e.g. 24 / 17 = 1.4117
+  font-size: 1.41em;
 
   line-height: .67;
 }
@@ -97,7 +100,10 @@
   @include margin(0);
   @include margin-horizontal(.4em, null);
 
-  font-size: 24px;
+  // This value is calculated by dividing the font size the
+  // icon should be in px (24px) by the font size of its
+  // parent button (17px). e.g. 24 / 17 = 1.4117
+  font-size: 1.41em;
 
   line-height: .67;
 }
@@ -106,7 +112,10 @@
   @include padding(0);
   @include margin(0);
 
-  font-size: 28px;
+  // This value is calculated by dividing the font size the
+  // icon should be in px (28px) by the font size of its
+  // parent button (17px). e.g. 28 / 17 = 1.647
+  font-size: 1.65em;
 
   line-height: .67;
 }

core/src/components/buttons/buttons.md.scss

@@ -65,8 +65,8 @@
 
   @include margin(0);
 
-  width: 48px;
-  height: 48px;
+  width: 3rem;
+  height: 3rem;
 }
 
 

core/src/components/buttons/test/a11y/buttons.e2e.ts

@@ -0,0 +1,95 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('buttons: font scaling'), () => {
+    test('should scale default button text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 135%;
+          }
+        </style>
+
+        <ion-buttons>
+          <ion-button>Default</ion-button>
+        </ion-buttons>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`buttons-default-scale`));
+    });
+
+    test('should scale clear button text on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 135%;
+          }
+        </style>
+
+        <ion-buttons>
+          <ion-button fill="clear">Clear</ion-button>
+        </ion-buttons>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`buttons-clear-scale`));
+    });
+
+    test('should scale button with icon on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 135%;
+          }
+        </style>
+
+        <ion-buttons>
+          <ion-button>
+            <ion-icon slot="start" name="star"></ion-icon>
+            Default
+          </ion-button>
+        </ion-buttons>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`buttons-icon-scale`));
+    });
+
+    test('should scale button with icon only on larger font sizes', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          html {
+            font-size: 135%;
+          }
+        </style>
+
+        <ion-buttons>
+          <ion-button>
+            <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+      `,
+        config
+      );
+
+      const button = page.locator('ion-button');
+
+      await expect(button).toHaveScreenshot(screenshot(`buttons-icon-only-scale`));
+    });
+  });
+});