包详细信息

@theme-ui/css

system-ui607.9kMIT0.17.2

Minified Size on Bundlephobia

自述文件

@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

更新日志

v0.13.1 (Wed Jan 05 2022)

🐛 Bug Fix

🏠 Internal

  • css: Make background a theme-aware property (@lachlanjc)

Authors: 4

v0.13.0 (Mon Dec 27 2021)

Release Notes

Move Emotion and MDX packages to peerDeps (#1867)

BREAKING CHANGE: @emotion/react and @mdx-js/react were moved to peerDependencies of theme-ui, @theme-ui/mdx and @theme-ui/sidenav and must be installed separately. This is a revert of change from Theme UI v0.3, and it's meant to help solve version clashes and context mismatch bugs on user side. Connected issues: #1793, #1531, #1530, #1388, #1345, #1130.

🚀 Enhancement

🐛 Bug Fix

  • fix(eslint): Add import/no-extraneous-dependencies and fix bad imports (@hasparus)

Authors: 1

v0.12.0 (Thu Oct 28 2021)

:tada: This release contains work from new contributors! :tada:

Thanks for all your work!

:heart: Julian Benegas (@julianbenegas)

:heart: William Pei (@draekien)

🚀 Enhancement

  • Use media query value when useColorSchemeMediaQuery is set to 'system' #1981 (@julianbenegas @draekien)
  • feat(usecolorschememediaquery): added 'system' and 'initial' as valid types (@draekien)

🐛 Bug Fix

  • Update packages/css/src/options.ts (@draekien)
  • Merge remote-tracking branch 'upstream/develop' into fix/color-scheme-media-query-api-update #981 (@draekien)
  • fix(css): reexport CSSObject from @emotion/react (@hasparus)

Authors: 6

v0.11.0 (Wed Aug 25 2021)

:tada: This release contains work from a new contributor! :tada:

Thank you, Torne Wuff (@tornewuff), for all your work!

Release Notes

Add @theme-ui/css/utils with TypeScript CIF functions and fix preset types (#1862)

  • Added TypeScript Constrained identity functions makeTheme, makeStyles and makeColorsScale which can be imported from @theme-ui/css/utils.
  • Used aformentioned functions to properly define types of presets. Exported themes are now assignable to Theme but their types narrowly describe their exact values.

🚀 Enhancement

  • Add @theme-ui/css/utils with TypeScript CIF functions and fix preset types #1862 (@tornewuff @hasparus)
  • feat(css): add makeTheme constrained identity function (@hasparus)

🐛 Bug Fix

🏠 Internal

Authors: 2

v0.10.0 (Sat Jun 19 2021)

:tada: This release contains work from a new contributor! :tada:

Thank you, Vlad Shcherbin (@vladshcherbin), for all your work!

Release Notes

Allow easy styling autofilled of Inputs (#1811)

Background color of autofilled inputs will now default to theme.colors.background. It can be changed by setting autofillBackgroundColor prop.

🚀 Enhancement

🐛 Bug Fix

🏠 Internal

Authors: 5

v0.8.3 (Wed May 05 2021)

⚠️ Pushed to stable

  • Merge branch 'stable' into develop (@hasparus)

Authors: 1

v0.8.0 (Wed May 05 2021)

:tada: This release contains work from a new contributor! :tada:

Thank you, Francis Champagne (@fcisio), for all your work!

🚀 Enhancement

🐛 Bug Fix

  • Merge remote-tracking branch 'origin/develop' into v0.8 (@hasparus)
  • refactor(css): remove emotion-theme import that did not land in user projects (@hasparus)
  • Merge branch 'stable' into config-2 (@hasparus)
  • Merge branch 'config' into config-2 #1421 (@hasparus)
  • refactor: assemble the modes inside rawColors (@fcisio)
  • fix: jdoc typo (@fcisio)
  • Fix __internalGetUseRootStyles (@lachlanjc)
  • refactor(css): move ThemeUIConfig to separate file (@lachlanjc)
  • Merge branch 'develop' into config (@lachlanjc)
  • refactor(css): move ThemeUIConfig to separate file (@hasparus)
  • Re-add config options to root theme type as deprecated (@lachlanjc)
  • Make internal root styles non-breaking (@lachlanjc)
  • Begin moving theme config options (@lachlanjc)

⚠️ Pushed to stable

  • Merge branch 'stable' into develop (@hasparus)

Authors: 4

v0.7.5 (Wed Apr 28 2021)

🐛 Bug Fix

⚠️ Pushed to stable

  • Merge branch 'develop' into stable (@hasparus)

Authors: 2

v0.7.4 (Tue Apr 27 2021)

🐛 Bug Fix

🔩 Dependency Updates

Authors: 2

v0.7.3 (Wed Apr 21 2021)

:tada: This release contains work from new contributors! :tada:

Thanks for all your work!

:heart: David Dios (@dios-david)

:heart: Kenny (@kenny-f)

🐛 Bug Fix

Authors: 2

v0.7.0 (Thu Apr 15 2021)

:tada: This release contains work from a new contributor! :tada:

Thank you, Carolin Maisenbacher (@carolinmaisenbacher), for all your work!

🚀 Enhancement

🐛 Bug Fix

⚠️ Pushed to stable

  • Merge branch 'develop' into stable (@hasparus)

Authors: 3