Getting started

Adding Palette

To bring Palette into your app, install it as a package:

$ yarn add @artsy/palette

And at the root of your component tree instantiate <GlobalStyles /> and add the <Theme> provider:

import { Theme, injectGlobalStyles } from "@artsy/palette"

const { GlobalStyles } = injectGlobalStyles(`
  // overrides and additions
`)

const App = props => {
  return (
    <Theme>
      <>
        <GlobalStyles />
        ...
      </>
    </Theme>
  )
}

From there you should be able to access the values from Palette's Theme.tsx file:

import { BorderBox, Flex, Sans, Serif } from '@artsy/palette

const Artworks = props => {
  return (
    <Flex>
      <BorderBox p={2}>
        <Sans size='3t'>
          Image
        </Sans>
      </BorderBox>

      <BorderBox ml={2}>
        <Serif size='4'>
          Details
        </Serif>
      </BorderBox>
    </Flex>
  )
}

In order to use Artsy's fonts, you'll also want to add our webfont file to the CSS in the header of your app. Here are a few examples:

Using react-head (see here for more examples)

import { HeadProvider, Link } from 'react-head';

const App = () => (
  <HeadProvider>
    <Link
      href="https://webfonts.artsy.net/all-webfonts.css"
      rel="stylesheet"
      type="text/css"
    />
  </HeadProvider>
);
import {Helmet} from "react-helmet";

<Helmet>
  <link
    href="https://webfonts.artsy.net/all-webfonts.css"
    rel="stylesheet"
    type="text/css"
  />
</Helmet>
import { createGlobalStyle } from "styled-components"

const GlobalStyles = createGlobalStyle`
  @import url("https://webfonts.artsy.net/all-webfonts.css");
`