refactor(themes): correctly define font family tokens

Author: brandyscarney

core/scripts/testing/styles.css

@@ -7,16 +7,13 @@
 // Ionic Font Family
 // --------------------------------------------------
 
+// TODO(FW-6744): Remove this after adding the ios tokens
 html.ios {
-  --ion-default-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
-}
-html.md {
-  --ion-default-font: "Roboto", "Helvetica Neue", sans-serif;
+  --ion-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
 }
 
 html {
   --ion-dynamic-font: -apple-system-body;
-  --ion-font-family: var(--ion-default-font);
 }
 
 body {

core/src/css/core.scss

@@ -8,10 +8,6 @@
   --background: #{globals.$ion-bg-surface-default};
 }
 
-html {
-  --ionic-dynamic-font: -apple-system-body;
-}
-
 body {
   background: var(--ion-background-color, #{globals.$ion-bg-body});
   color: var(--ion-text-color, #{globals.$ion-text-default});

core/src/css/ionic/core.ionic.scss

@@ -2,7 +2,7 @@
 
 // TODO(ROU-10833): add font loading solution here, as a @font-face, base64 or cdn
 html {
-  font-family: globals.$ion-font-family;
+  font-family: var(--ion-font-family);
 }
 
 body {

core/src/css/ionic/typography.ionic.scss

@@ -18,8 +18,8 @@ export const defaultTheme: DefaultTheme = {
     formHighlight: true,
   },
 
-  // TODO(FW-6745): see if we can remove this after the md tokens are added
-  fontFamily: 'initial',
+  fontFamily:
+    '-apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
 
   spacing: {
     xxxxs: 'var(--ion-spacing-25)',

core/src/themes/ionic/default.tokens.ts

@@ -13,4 +13,6 @@ export const defaultTheme: DefaultTheme = {
     light: lightTheme,
     dark: darkTheme,
   },
+
+  fontFamily: '"Roboto", "Helvetica Neue", sans-serif',
 };