Add light-mobile theme with text overrides

[aaronccasanova]

WIP to enable variable Inter font-weights in React Native. TL;DR React Native doesn't support setting custom font-weights (such as 450, 550, and 650), however, we can potentially work around this limitation by:

• Exporting new font assets at the desired weights
• Adding them to the React Native stylesheet, and
• Overriding the text variant font-familys to include the custom weight in the name
  e.g. font-family: Inter becomes font-family: Inter-450

Example usage

import {AppProvider} from '@shopify/polaris';
import {themes} from '@shopify/polaris-tokens';

const theme = themes['light-mobile'];

const styles = StyleSheet.create({
  text: {
    fontFamily: theme.text['text-heading-lg-font-family'], // 'Inter-650'
    fontSize: theme.text['text-heading-lg-font-size'],
  },
});

const App = () => (
  <AppProvider theme="light-mobile">
    <Text style={styles.text}>Hello</Text>
  </AppProvider>
);

[aaronccasanova]

/snapit

[github-actions]

🫰✨ Thanks @aaronccasanova! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

[github-actions]

Hi! We noticed there hasn’t been activity on this PR in a while. After 30 days, it will close automatically.

If it’s still relevant, or you have updates, comment and let us know. And don’t worry, you can always re-open later if needed.