@vtex/admin-styles
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.1 • Public • Published

    admin styles

    the vtex admin css-in-js style parser

    NPM

    Summary

    This package is responsible to:

    1. Define the VTEX admin theme structure
    2. Parse the StyleProp to the a emotion ObjectStyle

    Installation

    yarn add @vtex/admin-styles @emotion/css @emotion/react

    Usage

    Define a theme object that respect's the defined shape of the Theme type, and call the styles function:

    import { styles, Theme } from '@vtex/admin-styles'
    
    const theme: Theme = {
      colors: {
        dark: {
          primary: 'black',
          secondary: 'silver',
        },
      },
    }
    
    styles({
      bg: 'dark.primary',
      color: 'dark.secondary',
    })(theme)
    
    // returns { backgroundColor: 'black', color: 'silver' }

    You can also use emotion to style your react components after parse.

    import { css } from '@emotion/css'
    import { styles, Theme } from '@vtex/admin-styles'
    
    const theme: Theme = {
      colors: {
        dark: {
          primary: 'black',
          secondary: 'silver',
        },
      },
    }
    
    const styles = styles({
      bg: 'dark.primary',
      color: 'dark.secondary',
    })(theme)
    
    /** compiled className */
    const className = css(styles)
    
    render(<div className={className} />)

    Keywords

    none

    Install

    npm i @vtex/admin-styles

    DownloadsWeekly Downloads

    228

    Version

    0.3.1

    License

    none

    Unpacked Size

    151 kB

    Total Files

    33

    Last publish

    Collaborators

    • thiagof7
    • gleicy-vtex
    • rafael.sangalli.vtex
    • vtexlab-user
    • lenderson_morais
    • wender
    • natamelo
    • mairatma
    • vlagedo_vtex
    • samuelfgs
    • mayzabel
    • rafabac
    • augusto.lazaro
    • tergol
    • rafarubim
    • analuizamtg
    • gustavorosolem
    • arthurepc
    • jeymisson
    • marcosvcp
    • victorhmp
    • lurian
    • ericreis
    • lbebber
    • tlgimenes
    • arturpimentel
    • anitavincent
    • brunojdo
    • brunohq
    • lucasecdb
    • matheusps
    • emersonlaurentino
    • viniagostini
    • hugo.cabral
    • lucasaarcoverde
    • lariciamota
    • wdsrocha
    • icazevedo
    • edunmc
    • fabits
    • mateuspontes
    • gmantiqueira
    • vitorlgomes
    • rodolfoams
    • policarpo
    • marcelovicentegc
    • maianabt
    • jeffersontuc
    • hiagolcm
    • william.silva