Nearly Perfect Mediocracy

    @theme-ui/css
    TypeScript icon, indicating that this package has built-in type declarations

    0.14.7 • Public • Published

    @theme-ui/css

    Minified Size on Bundlephobia

    @theme-ui/css contains the framework-agnostic core logic of Theme UI. It lets you write style objects with responsive, theme-aware ergonomic shortcuts.

    npm i @theme-ui/css @emotion/react

    Usage

    import { css as transformStyleObject } from '@theme-ui/css'
    import { css as createClassName } from '@emotion/css'
    
    const root = document.getElementById('root')
    
    /** @type {import("@theme-ui/css").Theme} */
    const theme = {
      colors: {
        text: '#222',
      },
      fonts: {
        mono: 'monospace',
      },
      space: {
        sm: '1rem',
        md: '2rem',
      },
    }
    
    const styles = transformStyleObject({
      padding: ['sm', 'md'],
      border: ({ colors }) => `2px solid ${colors.text}`,
      h1: {
        fontFamily: 'mono',
        color: 'text',
      },
    })(theme)
    
    root.classList.add(createClassName(styles))
    root.innerHTML = `
    <h1>You can use <code>@theme-ui/css</code> in Vanilla JS!</h1>
    `

    See the snippet above on CodeSandbox

    Keywords

    none

    Install

    npm i @theme-ui/css

    DownloadsWeekly Downloads

    108,946

    Version

    0.14.7

    License

    MIT

    Unpacked Size

    157 kB

    Total Files

    27

    Last publish

    Collaborators

    • jxnblk
    • johno
    • hasparus
    • lachlanjc