Wondering what’s next for npm?Check out our public roadmap! »

    @chaine/tokens
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.6 • Public • Published

    💰 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.

    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

    Install

    npm i @chaine/tokens

    DownloadsWeekly Downloads

    23

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    11.1 kB

    Total Files

    14

    Last publish

    Collaborators

    • avatar
    • avatar