@theme-ui/css
[![Minified Size on Bundlephobia](https://badgen.net/bundlephobia/minzip/@theme-ui/css)](https://bundlephobia.com/package/@theme-ui/css)
Last updated 22 days ago by hasparus .
MIT · Repository · Bugs · Original npm · Tarball · package.json 
$ npm install @theme-ui/css
SYNC missed versions from official npm registry.

@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

Current Tags

  • 0.16.2-scale-tuples.0                                ...           canary (a year ago)
  • 0.17.1-develop.0                                ...           develop (22 days ago)
  • 0.4.0-highlight.0                                ...           highlight (5 years ago)
  • 0.17.1                                ...           latest (22 days ago)
  • 0.6.0-alpha.8                                ...           next (4 years ago)

432 Versions

Maintainers (4)
jxnblk
johno
hasparus
lachlanjc
Downloads
Total 0
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (1)
Dev Dependencies (3)
Dependents (10)

© 2010 - cnpmjs.org x YWFE | Home | YWFE