Nifty Procrastination Machine

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

    2.0.0 • Public • Published

    @beatgig/synth-styled-components

    styled-components bindings for Synth.

    Installation

    yarn add @beatgig/synth-styled-components

    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 { withTokens } from '@beatgig/synth-css'
    
    const tokens = {
      '@coolWhite': 'white',
    
      color: {
        text: {
          button: '@coolWhite',
        },
    
        background: {
          button: 'red',
        },
      },
    }
    
    const Button = styled.button`
      ${backgroundColor('button')}
      ${color('button')}
    `
    
    ReactDOM.render(
      <SynthProvider value={{
        tokens,
        ...withTokens(tokens),
      }}>
        <Button>A Red Button<Button>
      </SynthProvider>,
      document.getElementById('root')
    )

    Keywords

    none

    Install

    npm i @beatgig/synth-styled-components

    DownloadsWeekly Downloads

    7

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    42.6 kB

    Total Files

    16

    Last publish

    Collaborators

    • fernandorojo
    • jerber8
    • elving
    • beatgigllc