This repo contains values for color, spacing, and typography primitives for use with Primer, GitHub's design system.

This repository is distributed with npm. After installing npm, you can install @primer/primitives with this command.

$ npm install --save @primer/primitives

JSON is a highly interoperable format that can be used in many types of projects. You could write scripts to generate CSS, use with plugins for design tools, or import into a theme file for use with CSS-in-JS projects.

The Primer Primitives are exported as keys on the top-level export. colors, spacing, and typography are available:

import { colors, spacing, typography } from '@primer/primitives'

In addition, Primer Primitives exports a theme, which is a great way of sharing system styles and works with popular CSS-in-JS libraries such as styled-components and emotion.

Here's an example using styled-components.

import React from 'react'
import styled, { ThemeProvider } from 'styled-components'
import { theme } from '@primer/primitives'

const Alert = styled.div`
  color: ${props => props.theme.colors.green[9]};
  background-color: ${props => props.theme.colors.green[2]};
`

const App = props => (
  <ThemeProvider theme={theme}>
    <Alert />
  </ThemeProvider>
)

When used with libraries like styled-system, you can make Primer Primitives available to style functions. In this example, we've imported the color function to the component's styles argument. The color values are from the color JSON object in Primer Primitives.

import React from 'react'
import styled, { ThemeProvider } from 'styled-components'
import { theme } from '@primer/primitives'
import { color } from 'styled-system'

const Alert = styled.div`
  ${color}
`

const App = props => (
  <ThemeProvider theme={theme}>
    <Alert color='green.0' bg='green.2' />
  </ThemeProvider>
)

MIT © GitHub