Getting Setup With the Shopify Design System

To start using Shopify style assets we can leverage Polaris tokens. You can see all of the tokens here.

Installation

Using npm:

npm install @shopify/polaris-tokens --save

Using yarn:

yarn add @shopify/polaris-tokens

Define Your Theme

// In theme
import tokens from '@shopify/polaris-tokens';
import {createTheme} from '@shopify/restyle';

const pxToNumber = (px: string) => {
  return parseInt(px.replace('px', ''), 10);
};

const theme = createTheme({
  colors: {
    body: tokens.colorBlack,
    backgroundRegular: tokens.colorWhite,
    backgroundSubdued: tokens.colorSkyLighter,

    foregroundRegular: tokens.colorBlack,
    foregroundOff: tokens.colorInkLight,
    foregroundSubdued: tokens.colorInkLightest,
    foregroundContrasting: tokens.colorWhite,
    foregroundSuccess: tokens.colorGreenDark,

    highlightPrimary: tokens.colorIndigo,
    highlightPrimaryDisabled: tokens.colorIndigoLight,

    buttonBackgroundPlain: tokens.colorSky,
    errorPrimary: tokens.colorRed,

    iconBackgroundDark: tokens.colorBlueDarker,
  },
  spacing: {
    none: tokens.spacingNone,
    xxs: pxToNumber(tokens.spacingExtraTight),
    xs: pxToNumber(tokens.spacingTight),
    s: pxToNumber(tokens.spacingBaseTight),
    m: pxToNumber(tokens.spacingBase),
    l: pxToNumber(tokens.spacingLoose),
    xl: pxToNumber(tokens.spacingExtraLoose),
    xxl: 2 * pxToNumber(tokens.spacingExtraLoose),
  },
});

export type Theme = typeof theme;
export default theme;

Now you can easily style your components with Shopify Polaris.