Remove font-family() function follow-up

UNRELEASED-v8.md

@@ -34,6 +34,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t
 - Removed the border-radius() function and replaced any instances with tokens ([#4793](https://github.com/Shopify/polaris-react/pull/4793))
 - Removed the shadow() function (replaced any instances with tokens) and renamed shadow legacy tokens ([#4823](https://github.com/Shopify/polaris-react/pull/4823))
 - Removed the ms-high-contrast-color() function and replaced any instances with values ([#4938](https://github.com/Shopify/polaris-react/pull/4938))
+- Removed the font-family() function and replaced any instances with tokens ([#4940](https://github.com/Shopify/polaris-react/pull/4940))
 
 ### New components
 

src/components/AppProvider/AppProvider.scss

@@ -17,7 +17,7 @@ body {
 html,
 body,
 button {
-  font-family: font-family();
+  font-family: var(--p-font-family-sans);
 }
 
 html {

src/components/CustomProperties/tests/CustomProperties.test.tsx

@@ -39,9 +39,7 @@ const mockTokens: Tokens = {
   motion: mockTokenGroup,
   // Note: We don't need to assign mock values to the remaining static tokens.
   depth: {},
-  fontSize: {},
   legacyTokens: {},
-  lineHeight: {},
   shape: {},
   spacing: {},
   typography: {},

src/components/KeyboardKey/KeyboardKey.scss

@@ -12,7 +12,7 @@ $key-base-height: 24px;
     0 var(--p-space-05) 0 0 var(--p-surface),
     0 var(--p-space-05) 0 1px var(--p-border-subdued);
   border-radius: var(--p-border-radius-1);
-  font-family: font-family();
+  font-family: var(--p-font-family-sans);
   font-size: 12px;
   font-weight: var(--p-font-weight-medium);
   line-height: $key-base-height;

src/components/TextField/TextField.scss

@@ -97,7 +97,7 @@ $prefix-horizontal-spacing: var(--p-space-2);
   padding: control-vertical-padding() $backdrop-horizontal-spacing;
   background: none;
   border: border(transparent);
-  font-family: font-family();
+  font-family: var(--p-font-family-sans);
   appearance: none;
   caret-color: var(--p-text);
   color: var(--p-text);
@@ -302,5 +302,5 @@ $prefix-horizontal-spacing: var(--p-space-2);
 }
 
 .monospaced {
-  font-family: font-family($family: 'monospace');
+  font-family: var(--p-font-family-mono);
 }

src/styles/_common.scss

@@ -7,7 +7,6 @@
 @import './foundation/utilities';
 @import './foundation/borders';
 @import './foundation/layout';
-@import './foundation/typography';
 @import './foundation/focus-ring';
 @import './foundation/accessibility';
 

src/styles/_public-api.scss

@@ -19,7 +19,6 @@
 @import './foundation/utilities';
 @import './foundation/borders';
 @import './foundation/layout';
-@import './foundation/typography';
 @import './foundation/focus-ring';
 
 @import './shared/accessibility';

src/tokens/token-groups/typography.json

@@ -1,6 +1,31 @@
 {
+  "font-family-sans": "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
+  "font-family-mono": "ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace",
+
+  "font-size-1": "12px",
+  "font-size-2": "13px",
+  "font-size-3": "14px",
+  "font-size-4": "15px",
+  "font-size-5": "16px",
+  "font-size-6": "17px",
+  "font-size-7": "20px",
+  "font-size-8": "21px",
+  "font-size-9": "24px",
+  "font-size-10": "26px",
+  "font-size-11": "27px",
+  "font-size-12": "28px",
+  "font-size-13": "42px",
+
   "font-weight-regular": "400",
   "font-weight-medium": "500",
   "font-weight-semibold": "600",
-  "font-weight-bold": "700"
+  "font-weight-bold": "700",
+
+  "line-height-1": "16px",
+  "line-height-2": "20px",
+  "line-height-3": "24px",
+  "line-height-4": "28px",
+  "line-height-5": "32px",
+  "line-height-6": "36px",
+  "line-height-7": "44px"
 }

src/tokens/tokens.ts

@@ -1,9 +1,7 @@
 import depth from './token-groups/depth.json';
 import legacyTokens from './token-groups/legacy-tokens.json';
 import darkColorScheme from './token-groups/color.dark.json';
-import fontSize from './token-groups/font-size.json';
 import lightColorScheme from './token-groups/color.light.json';
-import lineHeight from './token-groups/line-height.json';
 import motion from './token-groups/motion.json';
 import shape from './token-groups/shape.json';
 import spacing from './token-groups/spacing.json';
@@ -51,9 +49,7 @@ const colorSchemes: ColorSchemes = {
 export interface Tokens {
   depth: TokenGroup;
   colorSchemes: ColorSchemes;
-  fontSize: TokenGroup;
   legacyTokens: TokenGroup;
-  lineHeight: TokenGroup;
   motion: TokenGroup;
   shape: TokenGroup;
   spacing: TokenGroup;
@@ -64,12 +60,10 @@ export interface Tokens {
 export const tokens: Tokens = {
   colorSchemes,
   depth,
-  fontSize: tokensToRems(fontSize),
   legacyTokens: tokensToRems(legacyTokens),
-  lineHeight: tokensToRems(lineHeight),
   motion,
   shape: tokensToRems(shape),
   spacing: tokensToRems(spacing),
-  typography,
+  typography: tokensToRems(typography),
   zIndex,
 };