@ionic/core 8.3.4-dev.11729775016.14d81c8f → 8.3.4-dev.11729882231.1b2e7f13

package/dist/collection/components/menu-button/menu-button.ios.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -59,12 +53,6 @@
  *   }
  * }
  */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -120,28 +108,6 @@
  *   }
  * }
  */
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
 :host {
   /**
    * @prop --border-radius: Border radius of the menu button
@@ -177,18 +143,18 @@
 
 .button-native {
   border-radius: var(--border-radius);
-  color: inherit;
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
-  text-align: inherit;
   text-decoration: inherit;
   text-indent: inherit;
   text-overflow: inherit;
   text-transform: inherit;
+  text-align: inherit;
   white-space: inherit;
+  color: inherit;
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
@@ -250,6 +216,12 @@ ion-icon {
   display: none;
 }
 
+:host(.menu-button-disabled) {
+  cursor: default;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
 :host(.ion-focused) .button-native {
   color: var(--color-focused);
 }
@@ -259,8 +231,8 @@ ion-icon {
 }
 
 .button-native::after {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -277,23 +249,17 @@ ion-icon {
     opacity: var(--background-hover-opacity, 0);
   }
 }
-:host(.in-toolbar:not(.in-toolbar-color)) {
-  color: var(--ion-toolbar-color, var(--color));
-}
-
-:host(.menu-button-disabled) {
-  cursor: default;
-  opacity: 0.5;
-  pointer-events: none;
-}
-
 :host(.ion-color) .button-native {
   color: var(--ion-color-base);
 }
 
+:host(.in-toolbar:not(.in-toolbar-color)) {
+  color: var(--ion-toolbar-color, var(--color));
+}
+
 :host {
   --background-focused: currentColor;
-  --background-focused-opacity: 0.1;
+  --background-focused-opacity: .1;
   --border-radius: 4px;
   --color: var(--ion-color-primary, #0054e9);
   --padding-start: 5px;

package/dist/collection/components/menu-button/menu-button.js

@@ -1,18 +1,16 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import listRegular from "@phosphor-icons/core/assets/regular/list.svg";
 import { Host, h } from "@stencil/core";
 import { inheritAriaAttributes } from "../../utils/helpers";
 import { menuController } from "../../utils/menu-controller/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { menuOutline, menuSharp } from "ionicons/icons";
 import { config } from "../../global/config";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { updateVisibility } from "../menu-toggle/menu-toggle-util";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @part native - The native HTML button element that wraps all child elements.
  * @part icon - The menu button icon (uses ion-icon).
@@ -39,29 +37,17 @@ export class MenuButton {
     async visibilityChanged() {
         this.visible = await updateVisibility(this.menu);
     }
-    get menuIcon() {
-        // Determine the theme and map to default icons
-        const theme = getIonTheme(this);
-        const defaultIcons = {
-            ios: menuOutline,
-            ionic: listRegular,
-            md: menuSharp,
-        };
-        // Get the default icon based on the theme, falling back to 'md' icon if necessary
-        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
-        // Return the configured menu icon or the default icon
-        return config.get('menuIcon', defaultIcon);
-    }
     render() {
-        const { color, disabled, inheritedAttributes, menuIcon } = this;
-        const theme = getIonTheme(this);
+        const { color, disabled, inheritedAttributes } = this;
+        const mode = getIonMode(this);
+        const menuIcon = config.get('menuIcon', mode === 'ios' ? menuOutline : menuSharp);
         const hidden = this.autoHide && !this.visible;
         const attrs = {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (h(Host, { key: '8debcdf5b236259af6e23623c07c545b29ec716d', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
-                [theme]: true,
+        return (h(Host, { key: '95a8b9f09c7fae9713a8dc003ed277f6f31403da', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
+                [mode]: true,
                 button: true, // ion-buttons target .button
                 'menu-button-hidden': hidden,
                 'menu-button-disabled': disabled,
@@ -69,22 +55,20 @@ export class MenuButton {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h("button", Object.assign({ key: '477feadcbc8dfbea019ef2f6bdef6f5943be76ca' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: '5064d465103cdd781b251d40802e8bb20e3d965d', class: "button-inner" }, h("slot", { key: 'd20bfb97c1546ce69c382af5ab48207e52ca1a5d' }, h("ion-icon", { key: '502d5519b75e288ecf77f992f2cb870f90f0c64e', part: "icon", icon: menuIcon, lazy: false, "aria-hidden": "true" }))), theme === 'md' && h("ion-ripple-effect", { key: '9fc6ec08f647b65db6baa6d03297153c0ad264b0', type: "unbounded" }))));
+            }) }, h("button", Object.assign({ key: '39f3ce20c400d2fac4890a042e8e44426709fca5' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: '310978dc1cdef668de6720cde2a2304253679176', class: "button-inner" }, h("slot", { key: '2a2b9de524c1fc3c526fe9559cb077b976852725' }, h("ion-icon", { key: '9c22d7ea9fc3d76c32ec1c1b4b13d982c60b8c2d', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && h("ion-ripple-effect", { key: 'c58c9e29c763070383472f65a9d322a684bcb564', type: "unbounded" }))));
     }
     static get is() { return "ion-menu-button"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["menu-button.ios.scss"],
-            "md": ["menu-button.md.scss"],
-            "ionic": ["menu-button.ionic.scss"]
+            "md": ["menu-button.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["menu-button.ios.css"],
-            "md": ["menu-button.md.css"],
-            "ionic": ["menu-button.ionic.css"]
+            "md": ["menu-button.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/menu-button/menu-button.md.css

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -59,12 +53,6 @@
  *   }
  * }
  */
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -120,28 +108,6 @@
  *   }
  * }
  */
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
 :host {
   /**
    * @prop --border-radius: Border radius of the menu button
@@ -177,18 +143,18 @@
 
 .button-native {
   border-radius: var(--border-radius);
-  color: inherit;
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
-  text-align: inherit;
   text-decoration: inherit;
   text-indent: inherit;
   text-overflow: inherit;
   text-transform: inherit;
+  text-align: inherit;
   white-space: inherit;
+  color: inherit;
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
@@ -250,6 +216,12 @@ ion-icon {
   display: none;
 }
 
+:host(.menu-button-disabled) {
+  cursor: default;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
 :host(.ion-focused) .button-native {
   color: var(--color-focused);
 }
@@ -259,8 +231,8 @@ ion-icon {
 }
 
 .button-native::after {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -277,25 +249,19 @@ ion-icon {
     opacity: var(--background-hover-opacity, 0);
   }
 }
-:host(.in-toolbar:not(.in-toolbar-color)) {
-  color: var(--ion-toolbar-color, var(--color));
-}
-
-:host(.menu-button-disabled) {
-  cursor: default;
-  opacity: 0.5;
-  pointer-events: none;
-}
-
 :host(.ion-color) .button-native {
   color: var(--ion-color-base);
 }
 
+:host(.in-toolbar:not(.in-toolbar-color)) {
+  color: var(--ion-toolbar-color, var(--color));
+}
+
 :host {
   --background-focused: currentColor;
-  --background-focused-opacity: 0.12;
+  --background-focused-opacity: .12;
   --background-hover: currentColor;
-  --background-hover-opacity: 0.04;
+  --background-hover-opacity: .04;
   --border-radius: 50%;
   --color: initial;
   --padding-start: 8px;

package/dist/collection/components/menu-toggle/menu-toggle.js

@@ -3,12 +3,9 @@
  */
 import { Host, h } from "@stencil/core";
 import { menuController } from "../../utils/menu-controller/index";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { updateVisibility } from "./menu-toggle-util";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
- *
  * @slot - Content is placed inside the toggle to act as the click target.
  */
 export class MenuToggle {
@@ -27,12 +24,12 @@ export class MenuToggle {
         this.visible = await updateVisibility(this.menu);
     }
     render() {
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         const hidden = this.autoHide && !this.visible;
-        return (h(Host, { key: '67420de69745897b0a7092d24983dcd42c29b6e6', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
-                [theme]: true,
+        return (h(Host, { key: '90e621f09792383f1badcc1b402b1ac7d08c5f98', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+                [mode]: true,
                 'menu-toggle-hidden': hidden,
-            } }, h("slot", { key: '2c4782f5bfbade9daa50a0dedb511bb7fda3bad5' })));
+            } }, h("slot", { key: 'c0abdd1d91e9d80ee3704e3e374ebe1f29078460' })));
     }
     static get is() { return "ion-menu-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/animations/sheet.js

@@ -4,20 +4,14 @@
 import { createAnimation } from "../../../utils/animation/animation";
 import { getBackdropValueForSheet } from "../utils";
 export const createSheetEnterAnimation = (opts) => {
-    const { currentBreakpoint, backdropBreakpoint, staticBackdropOpacity } = opts;
+    const { currentBreakpoint, backdropBreakpoint } = opts;
     /**
      * If the backdropBreakpoint is undefined, then the backdrop
      * should always fade in. If the backdropBreakpoint came before the
      * current breakpoint, then the backdrop should be fading in.
      */
     const shouldShowBackdrop = backdropBreakpoint === undefined || backdropBreakpoint < currentBreakpoint;
-    let initialBackdrop = '0';
-    if (staticBackdropOpacity) {
-        initialBackdrop = 'calc(var(--backdrop-opacity)';
-    }
-    else if (shouldShowBackdrop) {
-        initialBackdrop = `calc(var(--backdrop-opacity) * ${currentBreakpoint})`;
-    }
+    const initialBackdrop = shouldShowBackdrop ? `calc(var(--backdrop-opacity) * ${currentBreakpoint})` : '0';
     const backdropAnimation = createAnimation('backdropAnimation').fromTo('opacity', 0, initialBackdrop);
     if (shouldShowBackdrop) {
         backdropAnimation

package/dist/collection/components/modal/gestures/sheet.js

@@ -7,16 +7,16 @@ import { clamp, raf, getElementRoot } from "../../../utils/helpers";
 import { FOCUS_TRAP_DISABLE_CLASS } from "../../../utils/overlays";
 import { getBackdropValueForSheet } from "../utils";
 import { calculateSpringStep, handleCanDismiss } from "./utils";
-export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], getCurrentBreakpoint, onDismiss, onBreakpointChange, staticBackdropOpacity) => {
+export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], getCurrentBreakpoint, onDismiss, onBreakpointChange) => {
     // Defaults for the sheet swipe animation
     const defaultBackdrop = [
         { offset: 0, opacity: 'var(--backdrop-opacity)' },
-        { offset: 1, opacity: staticBackdropOpacity ? 'var(--backdrop-opacity)' : 0.01 },
+        { offset: 1, opacity: 0.01 },
     ];
     const customBackdrop = [
         { offset: 0, opacity: 'var(--backdrop-opacity)' },
-        { offset: 1 - backdropBreakpoint, opacity: staticBackdropOpacity ? 'var(--backdrop-opacity)' : 0 },
-        { offset: 1, opacity: staticBackdropOpacity ? 'var(--backdrop-opacity)' : 0 },
+        { offset: 1 - backdropBreakpoint, opacity: 0 },
+        { offset: 1, opacity: 0 },
     ];
     const SheetDefaults = {
         WRAPPER_KEYFRAMES: [
@@ -236,15 +236,11 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
             backdropAnimation.keyframes([
                 {
                     offset: 0,
-                    opacity: staticBackdropOpacity
-                        ? 'var(--backdrop-opacity)'
-                        : `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(1 - breakpointOffset, backdropBreakpoint)})`,
+                    opacity: `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(1 - breakpointOffset, backdropBreakpoint)})`,
                 },
                 {
                     offset: 1,
-                    opacity: staticBackdropOpacity
-                        ? 'var(--backdrop-opacity)'
-                        : `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(snapToBreakpoint, backdropBreakpoint)})`,
+                    opacity: `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(snapToBreakpoint, backdropBreakpoint)})`,
                 },
             ]);
             animation.progressStep(0);

package/dist/collection/components/modal/modal.ios.css

@@ -1,3 +1,36 @@
+/**
+ * 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.
+ */
+/**
+ * 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.
+ */
+/**
+ * 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.
+ */
+/**
+ * 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.
+ */
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -46,12 +79,15 @@
   --min-height: auto;
   --max-height: auto;
   --overflow: hidden;
+  --border-radius: 0;
   --border-width: 0;
   --border-style: none;
   --border-color: transparent;
+  --background: var(--ion-background-color, #fff);
   --box-shadow: none;
-  right: 0;
+  --backdrop-opacity: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   display: flex;
@@ -59,6 +95,7 @@
   align-items: center;
   justify-content: center;
   outline: none;
+  color: var(--ion-text-color, #000);
   contain: strict;
 }
 
@@ -94,22 +131,44 @@ ion-backdrop {
   background: transparent;
 }
 
+@media only screen and (min-width: 768px) and (min-height: 600px) {
+  :host {
+    --width: 600px;
+    --height: 500px;
+    --ion-safe-area-top: 0px;
+    --ion-safe-area-bottom: 0px;
+    --ion-safe-area-right: 0px;
+    --ion-safe-area-left: 0px;
+  }
+}
+@media only screen and (min-width: 768px) and (min-height: 768px) {
+  :host {
+    --width: 600px;
+    --height: 600px;
+  }
+}
 .modal-handle {
+  left: 0px;
+  right: 0px;
+  top: 5px;
+  border-radius: 8px;
   -webkit-margin-start: auto;
   margin-inline-start: auto;
   -webkit-margin-end: auto;
   margin-inline-end: auto;
   position: absolute;
+  width: 36px;
+  height: 5px;
   /**
    * This allows the handle to appear
    * on top of user content in WebKit.
    */
   transform: translateZ(0);
   border: 0;
+  background: var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));
   cursor: pointer;
   z-index: 11;
 }
-
 .modal-handle::before {
   /**
    * Adds a 4px tap area to the perimeter
@@ -122,6 +181,8 @@ ion-backdrop {
   padding-top: 4px;
   padding-bottom: 4px;
   position: absolute;
+  width: 36px;
+  height: 5px;
   transform: translate(-50%, -50%);
   content: "";
 }
@@ -140,110 +201,6 @@ ion-backdrop {
   bottom: 0;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
-/**
- * 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.
- */
-/**
- * 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.
- */
-/**
- * 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.
- */
-/**
- * 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.
- */
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
-:host {
-  --background: var(--ion-background-color, #fff);
-  --border-radius: 0;
-  --backdrop-opacity: 0;
-  color: var(--ion-text-color, #000);
-}
-
-@media only screen and (min-width: 768px) and (min-height: 600px) {
-  :host {
-    --width: 600px;
-    --height: 500px;
-    --ion-safe-area-top: 0px;
-    --ion-safe-area-bottom: 0px;
-    --ion-safe-area-right: 0px;
-    --ion-safe-area-left: 0px;
-  }
-}
-@media only screen and (min-width: 768px) and (min-height: 768px) {
-  :host {
-    --width: 600px;
-    --height: 600px;
-  }
-}
-.modal-handle {
-  right: 0px;
-  left: 0px;
-  top: 5px;
-  border-radius: 8px;
-  width: 36px;
-  height: 5px;
-  background: var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));
-}
-.modal-handle::before {
-  width: 36px;
-  height: 5px;
-}
-
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use