💰 Welcome to Tokens

Tokens

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

Credit: Huge shoutout to GitHub's design team. Most of our design system architecture is based off their work and credit goes to them. This package is influenced by Github's Primer/Primitives and our design system has a crush on @BinaryMuse @broccolini @smockle

Install

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

$ npm install --save @chaine/tokens

Usage

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.

Example

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

import {colors, spacing, typography} from '@chaine/tokens'

In addition, Tokens 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 '@chaine/tokens'

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 Keychaine Tokens 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 Keychaine Tokens. Additionally, you can take advantage of light and dark mode.

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

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

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

License

MIT © Chaine