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

    2.1.1 • Public • Published

    @beatgig/synth-tokens

    Default token declarations used for building UI components at BeatGig.

    Installation

    yarn add @beatgig/synth-tokens

    Usage

    import React from 'react'
    import styled from 'styled-components'
    import ReactDOM from 'react-dom'
    import { backgroundColor, color } from '@beatgig/synth-styled-components'
    import { SynthProvider } from '@beatgig/synth-react'
    import { tokens } from '@beatgig/synth-tokens'
    import { withTokens } from '@beatgig/synth-css'
    
    const customTokens = {
      ...tokens,
    
      color: {
        text: {
          customButton: 'white',
        },
    
        background: {
          customButton: 'red',
        },
      },
    }
    
    const CustomButton = styled.button`
      ${backgroundColor('customButton')}
      ${color('customButton')}
    `
    
    ReactDOM.render(
      <SynthProvider value={{
        tokens: customTokens,
        ...withTokens(customTokens),
      }}>
        <CustomButton>A Custom Button<CustomButton>
      </SynthProvider>,
      document.getElementById('root')
    )

    Keywords

    none

    Install

    npm i @beatgig/synth-tokens

    DownloadsWeekly Downloads

    21

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    37.1 kB

    Total Files

    8

    Last publish

    Collaborators

    • fernandorojo
    • jerber8
    • elving
    • beatgigllc