Add light-mobile theme with text overrides

.changeset/shiny-moose-relate.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris-tokens': patch
+---
+
+POC to enable Inter variable `font-weight`s in React Native

polaris-tokens/src/themes/base/font.ts

@@ -34,6 +34,13 @@ export type FontLetterSpacingAlias = 'densest' | 'denser' | 'dense' | 'normal';
 export type FontWeightPrefix = 'font-weight';
 export type FontWeightAlias = 'regular' | 'medium' | 'semibold' | 'bold';
 
+export const fontWeightAliasMap: {[F in FontWeightAlias]: `${number}`} = {
+  regular: '450',
+  medium: '550',
+  semibold: '650',
+  bold: '700',
+};
+
 export type FontPrefix =
   | FontFamilyPrefix
   | FontLetterSpacingPrefix
@@ -94,16 +101,16 @@ export const font: {
     value: size[1000],
   },
   'font-weight-regular': {
-    value: '450',
+    value: fontWeightAliasMap.regular,
   },
   'font-weight-medium': {
-    value: '550',
+    value: fontWeightAliasMap.medium,
   },
   'font-weight-semibold': {
-    value: '650',
+    value: fontWeightAliasMap.semibold,
   },
   'font-weight-bold': {
-    value: '700',
+    value: fontWeightAliasMap.bold,
   },
   'font-letter-spacing-densest': {
     value: '-0.54px',

polaris-tokens/src/themes/constants.ts

@@ -3,5 +3,6 @@ export const themeNameDefault = themeNameLight;
 
 export const themeNames = [
   themeNameLight,
+  'light-mobile',
   'light-high-contrast-experimental',
 ] as const;

polaris-tokens/src/themes/index.ts

@@ -6,16 +6,22 @@ import {
   metaThemeLightHighContrast,
   metaThemeLightHighContrastPartial,
 } from './light-high-contrast';
+import {
+  metaThemeLightMobile,
+  metaThemeLightMobilePartial,
+} from './light-mobile';
 
 export {createMetaTheme} from './utils';
 
 export const metaThemes: MetaThemes = {
   light: metaThemeLight,
+  'light-mobile': metaThemeLightMobile,
   'light-high-contrast-experimental': metaThemeLightHighContrast,
 };
 
 export const metaThemePartials: MetaThemePartials = {
   light: metaThemeLightPartial,
+  'light-mobile': metaThemeLightMobilePartial,
   'light-high-contrast-experimental': metaThemeLightHighContrastPartial,
 };
 

polaris-tokens/src/themes/light-mobile.ts

@@ -0,0 +1,46 @@
+import type {FontWeightAlias} from './base/font';
+import {fontWeightAliasMap} from './base/font';
+import {createMetaTheme, createMetaThemePartial} from './utils';
+
+export const metaThemeLightMobilePartial = createMetaThemePartial({
+  text: {
+    'text-heading-3xl-font-family': {
+      value: getWeightedFontFamily('bold'),
+    },
+    'text-heading-2xl-font-family': {
+      value: getWeightedFontFamily('bold'),
+    },
+    'text-heading-xl-font-family': {
+      value: getWeightedFontFamily('bold'),
+    },
+    'text-heading-lg-font-family': {
+      value: getWeightedFontFamily('semibold'),
+    },
+    'text-heading-md-font-family': {
+      value: getWeightedFontFamily('semibold'),
+    },
+    'text-heading-sm-font-family': {
+      value: getWeightedFontFamily('semibold'),
+    },
+    'text-body-lg-font-family': {
+      value: getWeightedFontFamily('regular'),
+    },
+    'text-body-md-font-family': {
+      value: getWeightedFontFamily('regular'),
+    },
+    'text-body-sm-font-family': {
+      value: getWeightedFontFamily('regular'),
+    },
+    'text-body-xs-font-family': {
+      value: getWeightedFontFamily('regular'),
+    },
+  },
+});
+
+export const metaThemeLightMobile = createMetaTheme(
+  metaThemeLightMobilePartial,
+);
+
+function getWeightedFontFamily(fontWeightAlias: FontWeightAlias) {
+  return `Inter-${fontWeightAliasMap[fontWeightAlias]}, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif`;
+}