From 7b458b6a87e4f4cafe38fbe2adc95400b98711f1 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 8 Aug 2023 10:05:24 -0500
Subject: [PATCH] refactor: add dynamic type sass functions (#27934)

---
 .../action-sheet/action-sheet.ios.vars.scss   |  8 +--
 .../action-sheet/action-sheet.md.vars.scss    |  8 +--
 .../back-button/back-button.ios.scss          |  4 +-
 .../back-button/back-button.md.scss           |  4 +-
 core/src/components/badge/badge.ios.scss      |  2 +-
 core/src/components/badge/badge.vars.scss     |  5 +-
 .../components/breadcrumb/breadcrumb.ios.scss |  6 +-
 .../components/breadcrumb/breadcrumb.md.scss  |  2 +-
 .../src/components/breadcrumb/breadcrumb.scss |  2 +-
 .../breadcrumb/breadcrumb.vars.scss           |  4 +-
 .../components/button/button.ios.vars.scss    |  8 +--
 .../src/components/button/button.md.vars.scss |  6 +-
 .../card-content/card-content.ios.scss        | 10 +--
 .../card-content/card-content.ios.vars.scss   |  2 +-
 .../card-content/card-content.md.scss         |  8 +--
 .../card-content/card-content.md.vars.scss    |  2 +-
 .../card-subtitle/card-subtitle.ios.vars.scss |  2 +-
 .../card-subtitle/card-subtitle.md.vars.scss  |  2 +-
 .../card-title/card-title.ios.vars.scss       |  2 +-
 .../card-title/card-title.md.vars.scss        |  2 +-
 core/src/components/card/card.ios.vars.scss   |  2 +-
 core/src/components/card/card.md.vars.scss    |  2 +-
 .../datetime-button/datetime-button.scss      |  2 +-
 .../components/loading/loading.ios.vars.scss  |  2 +-
 .../components/loading/loading.md.vars.scss   |  2 +-
 .../components/reorder/reorder.ios.vars.scss  |  2 +-
 .../components/reorder/reorder.md.vars.scss   |  2 +-
 core/src/components/reorder/reorder.scss      |  2 +-
 core/src/themes/ionic.functions.font.scss     | 63 +++++++++++++++++++
 core/src/themes/ionic.globals.scss            |  3 +
 30 files changed, 122 insertions(+), 49 deletions(-)
 create mode 100644 core/src/themes/ionic.functions.font.scss

diff --git a/core/src/components/action-sheet/action-sheet.ios.vars.scss b/core/src/components/action-sheet/action-sheet.ios.vars.scss
index 722683a71c..5990489da3 100644
--- a/core/src/components/action-sheet/action-sheet.ios.vars.scss
+++ b/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:                                max(13px, 0.8125rem) !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:                           max(13px, 0.8125rem) !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;
@@ -103,13 +103,13 @@ $action-sheet-ios-button-padding:                                 14px !default;
 $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:                          max(28px, 1.75rem) !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:                               max(20px, 1.25rem) !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;
diff --git a/core/src/components/action-sheet/action-sheet.md.vars.scss b/core/src/components/action-sheet/action-sheet.md.vars.scss
index 7da925c8f3..64e3c2da5f 100644
--- a/core/src/components/action-sheet/action-sheet.md.vars.scss
+++ b/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:                       1rem !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:                   0.875rem !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,7 +70,7 @@ $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:                      1rem !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:                    12px !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:                        1.5rem !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;
diff --git a/core/src/components/back-button/back-button.ios.scss b/core/src/components/back-button/back-button.ios.scss
index c2775f7046..6419c8518b 100644
--- a/core/src/components/back-button/back-button.ios.scss
+++ b/core/src/components/back-button/back-button.ios.scss
@@ -29,8 +29,10 @@
    * 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: clamp(17px, 1.0625rem, 22px);
+  font-size: dynamic-font-clamp(1, 17px, 1.294);
 }
 
 .button-native {
diff --git a/core/src/components/back-button/back-button.md.scss b/core/src/components/back-button/back-button.md.scss
index 5b886f87bb..e6699c6096 100644
--- a/core/src/components/back-button/back-button.md.scss
+++ b/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: 1.5rem;
+  --icon-font-size: #{dynamic-font(24px)};
   --icon-font-weight: normal;
   --min-height: 32px;
   --min-width: 44px;
   --padding-start: 12px;
   --padding-end: 12px;
 
-  font-size: 0.875rem;
+  font-size: dynamic-font(14px);
   font-weight: 500;
 
   text-transform: uppercase;
diff --git a/core/src/components/badge/badge.ios.scss b/core/src/components/badge/badge.ios.scss
index 41c79ef52d..68183d96fb 100644
--- a/core/src/components/badge/badge.ios.scss
+++ b/core/src/components/badge/badge.ios.scss
@@ -14,5 +14,5 @@
    * with other components and in case "-apple-system-body" does
    * go smaller than 14px in the future.
    */
-  font-size: max(13px, $badge-font-size);
+  font-size: dynamic-font-min(1, $badge-baseline-font-size);
 }
diff --git a/core/src/components/badge/badge.vars.scss b/core/src/components/badge/badge.vars.scss
index 5f05427650..ebaa3490a5 100644
--- a/core/src/components/badge/badge.vars.scss
+++ b/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:                 0.8125rem !default;
+$badge-font-size:                 dynamic-font($badge-baseline-font-size) !default;
 
 /// @prop - Font weight of the badge
 $badge-font-weight:               bold !default;
diff --git a/core/src/components/breadcrumb/breadcrumb.ios.scss b/core/src/components/breadcrumb/breadcrumb.ios.scss
index dc94d42d48..8520b3d3ee 100644
--- a/core/src/components/breadcrumb/breadcrumb.ios.scss
+++ b/core/src/components/breadcrumb/breadcrumb.ios.scss
@@ -17,7 +17,7 @@
    * Breadcrumbs can be placed in the content too, so
    * we add a min font size to keep the text legible.
    */
-  font-size: clamp(16px, #{$breadcrumb-font-size}, 22px);
+  font-size: dynamic-font-clamp(1, $breadcrumb-baseline-font-size, 1.375);
 }
 
 :host(.breadcrumb-active) {
@@ -66,7 +66,7 @@
 ::slotted(ion-icon) {
   color: $breadcrumb-ios-icon-color;
 
-  font-size: min(1.125rem, 22px);
+  font-size: dynamic-font-max(18px, 1.2);
 }
 
 ::slotted(ion-icon[slot="start"]) {
@@ -102,5 +102,5 @@
 }
 
 .breadcrumbs-collapsed-indicator ion-icon {
-  font-size: min(1.375rem, 22px);
+  font-size: dynamic-font-max(22px, 1);
 }
diff --git a/core/src/components/breadcrumb/breadcrumb.md.scss b/core/src/components/breadcrumb/breadcrumb.md.scss
index e231e6b11e..b73ca670e7 100644
--- a/core/src/components/breadcrumb/breadcrumb.md.scss
+++ b/core/src/components/breadcrumb/breadcrumb.md.scss
@@ -53,7 +53,7 @@
 ::slotted(ion-icon) {
   color: $breadcrumb-md-icon-color;
 
-  font-size: 1.125rem;
+  font-size: dynamic-font(18px);
 }
 
 ::slotted(ion-icon[slot="start"]) {
diff --git a/core/src/components/breadcrumb/breadcrumb.scss b/core/src/components/breadcrumb/breadcrumb.scss
index 8f57fb2ad5..bf867f7ab9 100644
--- a/core/src/components/breadcrumb/breadcrumb.scss
+++ b/core/src/components/breadcrumb/breadcrumb.scss
@@ -156,5 +156,5 @@
 .breadcrumbs-collapsed-indicator ion-icon {
   margin-top: 1px;
 
-  font-size: 1.375rem;
+  font-size: dynamic-font(22px);
 }
diff --git a/core/src/components/breadcrumb/breadcrumb.vars.scss b/core/src/components/breadcrumb/breadcrumb.vars.scss
index 0a70ebe34b..3322672a5b 100644
--- a/core/src/components/breadcrumb/breadcrumb.vars.scss
+++ b/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:           1rem !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;
diff --git a/core/src/components/button/button.ios.vars.scss b/core/src/components/button/button.ios.vars.scss
index eada67d4c2..b994ce5846 100644
--- a/core/src/components/button/button.ios.vars.scss
+++ b/core/src/components/button/button.ios.vars.scss
@@ -36,7 +36,7 @@ $button-ios-border-radius:                            14px !default;
 /// @prop - Font size of the button text
 /// 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:                                min(1rem, 48px) !default;
+$button-ios-font-size:                                dynamic-font-max(16px, 3) !default;
 
 /// @prop - Font weight of the button text
 $button-ios-font-weight:                              500 !default;
@@ -87,7 +87,7 @@ $button-ios-large-border-radius:                      16px !default;
 /// @prop - Font size of the large button
 /// 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:                          min(1.25rem, 60px) !default;
+$button-ios-large-font-size:                          dynamic-font-max(20px, 3) !default;
 
 
 // iOS Small Button
@@ -114,7 +114,7 @@ $button-ios-small-border-radius:                      6px !default;
 /// @prop - Font size of the small button
 /// 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:                          min(0.8125rem, 39px) !default;
+$button-ios-small-font-size:                          dynamic-font-max(13px, 3) !default;
 
 
 // iOS Outline Button
@@ -159,7 +159,7 @@ $button-ios-outline-background-color-focused:         ion-color(primary, base, $
 /// @prop - Font size of the clear button
 /// 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:                          min(1.0625rem, 51px) !default;
+$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;
diff --git a/core/src/components/button/button.md.vars.scss b/core/src/components/button/button.md.vars.scss
index 198f94e214..8387efbc2f 100644
--- a/core/src/components/button/button.md.vars.scss
+++ b/core/src/components/button/button.md.vars.scss
@@ -34,7 +34,7 @@ $button-md-height:                                      36px !default;
 $button-md-border-radius:                               4px !default;
 
 /// @prop - Font size of the button text
-$button-md-font-size:                                   0.875rem !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-height:                                2.8em !default;
 
 /// @prop - Font size of the large button
-$button-md-large-font-size:                             1.25rem !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-height:                                2.1em !default;
 
 /// @prop - Font size of the small button
-$button-md-small-font-size:                             0.8125rem !default;
+$button-md-small-font-size:                             dynamic-font(13px) !default;
 
 
 // Material Design Outline Button
diff --git a/core/src/components/card-content/card-content.ios.scss b/core/src/components/card-content/card-content.ios.scss
index 2e0a061a9b..6efcbc03d2 100644
--- a/core/src/components/card-content/card-content.ios.scss
+++ b/core/src/components/card-content/card-content.ios.scss
@@ -14,14 +14,14 @@
   h1 {
     @include margin(0, 0, 2px);
 
-    font-size: 1.5rem;
+    font-size: dynamic-font(24px);
     font-weight: normal;
   }
 
   h2 {
     @include margin(2px, 0);
 
-    font-size: 1rem;
+    font-size: dynamic-font(16px);
     font-weight: normal;
   }
 
@@ -31,17 +31,17 @@
   h6 {
     @include margin(2px, 0);
 
-    font-size: 0.875rem;
+    font-size: dynamic-font(14px);
     font-weight: normal;
   }
 
   p {
     @include margin(0, 0, 2px);
 
-    font-size: 0.875rem;
+    font-size: dynamic-font(14px);
   }
 }
 
 ion-card-header + .card-content-ios {
   padding-top: 0;
-}
\ No newline at end of file
+}
diff --git a/core/src/components/card-content/card-content.ios.vars.scss b/core/src/components/card-content/card-content.ios.vars.scss
index e68b9f4cf5..8bb5fa0383 100644
--- a/core/src/components/card-content/card-content.ios.vars.scss
+++ b/core/src/components/card-content/card-content.ios.vars.scss
@@ -16,4 +16,4 @@ $card-ios-padding-bottom:              $card-ios-padding-top !default;
 $card-ios-padding-start:               $card-ios-padding-top !default;
 
 /// @prop - Font size of the card
-$card-ios-font-size:                   1rem !default;
+$card-ios-font-size:                   dynamic-font(16px) !default;
diff --git a/core/src/components/card-content/card-content.md.scss b/core/src/components/card-content/card-content.md.scss
index d7ae6aba0d..67376230f5 100644
--- a/core/src/components/card-content/card-content.md.scss
+++ b/core/src/components/card-content/card-content.md.scss
@@ -14,14 +14,14 @@
   h1 {
     @include margin(0, 0, 2px);
 
-    font-size: 1.5rem;
+    font-size: dynamic-font(24px);
     font-weight: normal;
   }
 
   h2 {
     @include margin(2px, 0);
 
-    font-size: 1rem;
+    font-size: dynamic-font(16px);
     font-weight: normal;
   }
 
@@ -31,14 +31,14 @@
   h6 {
     @include margin(2px, 0);
 
-    font-size: 0.875rem;
+    font-size: dynamic-font(14px);
     font-weight: normal;
   }
 
   p {
     @include margin(0, 0, 2px);
 
-    font-size: 0.875rem;
+    font-size: dynamic-font(14px);
     font-weight: normal;
 
     line-height: 1.5;
diff --git a/core/src/components/card-content/card-content.md.vars.scss b/core/src/components/card-content/card-content.md.vars.scss
index 3dbe9d3228..8d436c15c9 100644
--- a/core/src/components/card-content/card-content.md.vars.scss
+++ b/core/src/components/card-content/card-content.md.vars.scss
@@ -16,7 +16,7 @@ $card-md-padding-bottom:              13px !default;
 $card-md-padding-start:               16px !default;
 
 /// @prop - Font size of the card
-$card-md-font-size:                   0.875rem !default;
+$card-md-font-size:                   dynamic-font(14px) !default;
 
 /// @prop - Line height of the card
 $card-md-line-height:                 1.5 !default;
diff --git a/core/src/components/card-subtitle/card-subtitle.ios.vars.scss b/core/src/components/card-subtitle/card-subtitle.ios.vars.scss
index ca9fd043dd..86f221d011 100644
--- a/core/src/components/card-subtitle/card-subtitle.ios.vars.scss
+++ b/core/src/components/card-subtitle/card-subtitle.ios.vars.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Font size of the card subtitle
-$card-ios-subtitle-font-size:            0.75rem !default;
+$card-ios-subtitle-font-size:            dynamic-font(12px) !default;
 
 /// @prop - Font weight of the card subtitle
 $card-ios-subtitle-font-weight:          700 !default;
diff --git a/core/src/components/card-subtitle/card-subtitle.md.vars.scss b/core/src/components/card-subtitle/card-subtitle.md.vars.scss
index 1b43bb5f39..1a0c4f69c8 100644
--- a/core/src/components/card-subtitle/card-subtitle.md.vars.scss
+++ b/core/src/components/card-subtitle/card-subtitle.md.vars.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Font size of the card subtitle
-$card-md-subtitle-font-size:            0.875rem !default;
+$card-md-subtitle-font-size:            dynamic-font(14px) !default;
 
 /// @prop - Padding top of the card subtitle
 $card-md-subtitle-padding-top:          0 !default;
diff --git a/core/src/components/card-title/card-title.ios.vars.scss b/core/src/components/card-title/card-title.ios.vars.scss
index 93f9adeb33..43d4c74143 100644
--- a/core/src/components/card-title/card-title.ios.vars.scss
+++ b/core/src/components/card-title/card-title.ios.vars.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Font size of the card title
-$card-ios-title-font-size:             1.75rem !default;
+$card-ios-title-font-size:             dynamic-font(28px) !default;
 
 /// @prop - Font weight of the card title
 $card-ios-title-font-weight:           700 !default;
diff --git a/core/src/components/card-title/card-title.md.vars.scss b/core/src/components/card-title/card-title.md.vars.scss
index 264fb42d59..31914b32b8 100644
--- a/core/src/components/card-title/card-title.md.vars.scss
+++ b/core/src/components/card-title/card-title.md.vars.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Font size of the card title
-$card-md-title-font-size:             1.25rem !default;
+$card-md-title-font-size:             dynamic-font(20px) !default;
 
 /// @prop - Padding top of the card title
 $card-md-title-padding-top:           0 !default;
diff --git a/core/src/components/card/card.ios.vars.scss b/core/src/components/card/card.ios.vars.scss
index a88f78e452..ce9876ea26 100755
--- a/core/src/components/card/card.ios.vars.scss
+++ b/core/src/components/card/card.ios.vars.scss
@@ -25,7 +25,7 @@ $card-ios-box-shadow:                  0 4px 16px $card-ios-box-shadow-color !de
 $card-ios-border-radius:               8px !default;
 
 /// @prop - Font size of the card
-$card-ios-font-size:                   0.875rem !default;
+$card-ios-font-size:                   dynamic-font(14px) !default;
 
 /// @prop - Transition timing function of the card
 $card-ios-transition-timing-function:  cubic-bezier(0.12, 0.72, 0.29, 1) !default;
diff --git a/core/src/components/card/card.md.vars.scss b/core/src/components/card/card.md.vars.scss
index 6c6ce3bcee..cb13c43aee 100755
--- a/core/src/components/card/card.md.vars.scss
+++ b/core/src/components/card/card.md.vars.scss
@@ -22,7 +22,7 @@ $card-md-box-shadow:                  0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0
 $card-md-border-radius:               4px !default;
 
 /// @prop - Font size of the card
-$card-md-font-size:                   0.875rem !default;
+$card-md-font-size:                   dynamic-font(14px) !default;
 
 /// @prop - Line height of the card
 $card-md-line-height:                 1.5 !default;
diff --git a/core/src/components/datetime-button/datetime-button.scss b/core/src/components/datetime-button/datetime-button.scss
index e0eccae814..78d125f062 100644
--- a/core/src/components/datetime-button/datetime-button.scss
+++ b/core/src/components/datetime-button/datetime-button.scss
@@ -29,7 +29,7 @@
   color: $text-color;
 
   font-family: inherit;
-  font-size: 1rem;
+  font-size: dynamic-font(16px);
 
   cursor: pointer;
 
diff --git a/core/src/components/loading/loading.ios.vars.scss b/core/src/components/loading/loading.ios.vars.scss
index 5b84f413d8..92d1946bc2 100644
--- a/core/src/components/loading/loading.ios.vars.scss
+++ b/core/src/components/loading/loading.ios.vars.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Font size of the loading wrapper
-$loading-ios-font-size:                             0.875rem !default;
+$loading-ios-font-size:                             dynamic-font(14px) !default;
 
 /// @prop - Padding top of the loading wrapper
 $loading-ios-padding-top:                           24px !default;
diff --git a/core/src/components/loading/loading.md.vars.scss b/core/src/components/loading/loading.md.vars.scss
index 263eaa52b1..ec8611debe 100644
--- a/core/src/components/loading/loading.md.vars.scss
+++ b/core/src/components/loading/loading.md.vars.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Font size of the loading wrapper
-$loading-md-font-size:                 0.875rem !default;
+$loading-md-font-size:                 dynamic-font(14px) !default;
 
 /// @prop - Padding top of the loading wrapper
 $loading-md-padding-top:               24px !default;
diff --git a/core/src/components/reorder/reorder.ios.vars.scss b/core/src/components/reorder/reorder.ios.vars.scss
index de6a0c757b..723f9324d7 100644
--- a/core/src/components/reorder/reorder.ios.vars.scss
+++ b/core/src/components/reorder/reorder.ios.vars.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Font size of the reorder icon
-$reorder-ios-icon-font-size:      2.125rem !default;
+$reorder-ios-icon-font-size:      dynamic-font(34px) !default;
 
 /// @prop - Opacity of the reorder icon
 $reorder-ios-icon-opacity:        .4 !default;
diff --git a/core/src/components/reorder/reorder.md.vars.scss b/core/src/components/reorder/reorder.md.vars.scss
index add522168d..ebf7214b28 100644
--- a/core/src/components/reorder/reorder.md.vars.scss
+++ b/core/src/components/reorder/reorder.md.vars.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Font size of the reorder icon
-$reorder-md-icon-font-size:      1.9375rem !default;
+$reorder-md-icon-font-size:      dynamic-font(31px) !default;
 
 /// @prop - Opacity of the reorder icon
 $reorder-md-icon-opacity:        .3 !default;
diff --git a/core/src/components/reorder/reorder.scss b/core/src/components/reorder/reorder.scss
index a1b6c36845..8159aae0d4 100644
--- a/core/src/components/reorder/reorder.scss
+++ b/core/src/components/reorder/reorder.scss
@@ -24,5 +24,5 @@
  * icons resize with Dynamic Type.
  */
 ::slotted(ion-icon) {
-  font-size: 1rem;
+  font-size: dynamic-font(16px);
 }
diff --git a/core/src/themes/ionic.functions.font.scss b/core/src/themes/ionic.functions.font.scss
new file mode 100644
index 0000000000..81adff90e7
--- /dev/null
+++ b/core/src/themes/ionic.functions.font.scss
@@ -0,0 +1,63 @@
+@use "sass:math";
+
+$baselineSize: 16px !default;
+$baselineUnit: 1rem !default;
+
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+@function dynamic-font($size, $unit: $baselineUnit) {
+  @return (math.div($size, $baselineSize)) * $unit;
+}
+
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+@function dynamic-font-max($size, $maxScale, $unit: $baselineUnit) {
+  $baseScale: dynamic-font($size, $unit);
+  $maxScale: $size * $maxScale;
+
+  @return min($baseScale, $maxScale);
+}
+
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+@function dynamic-font-min($minScale, $size, $unit: $baselineUnit) {
+  $baseScale: dynamic-font($size, $unit);
+  $minScale: $size * $minScale;
+
+  @return max($minScale, $baseScale);
+}
+
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+@function dynamic-font-clamp($minScale, $baseSize, $maxScale, $unit: $baselineUnit) {
+  $baseScale: dynamic-font($baseSize, $unit);
+  $maxScale: $baseSize * $maxScale;
+  $minScale: $baseSize * $minScale;
+
+  @return clamp($minScale, $baseScale, $maxScale);
+}
diff --git a/core/src/themes/ionic.globals.scss b/core/src/themes/ionic.globals.scss
index e1495fabd0..bc76a62f72 100644
--- a/core/src/themes/ionic.globals.scss
+++ b/core/src/themes/ionic.globals.scss
@@ -5,6 +5,9 @@
 // Global Color Functions
 @import "./ionic.functions.color";
 
+// Global Font Functions
+@import "./ionic.functions.font";
+
 // Global Mixins
 @import "./ionic.mixins";