Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@types/theme-ui__color

system-ui9MITdeprecated0.3.2

This is a stub types definition. theme-ui__color provides its own type definitions, so you do not need this installed.

Stub TypeScript definitions entry for theme-ui, which provides its own types definitions

readme

changelog

v0.16.1 (Thu Sep 07 2023)

🐛 Bug Fix

  • fix: ThemeProvider warning message (@hasparus)

👨‍💻 Minor changes

  • Add missing migration notes on 0.16 to docs (@hasparus)

Authors: 1

v0.16.0 (Thu Jun 15 2023)

Release Notes

Deps bumps for 0.16.0 (#2432)

@theme-ui/sidenav package was removed due to low usage and breaking changes in @types/react.

🚀 Enhancement

👨‍💻 Minor changes

Authors: 2

v0.15.8 (Sat Apr 29 2023)

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

Thank you, CJ (@dev-cj), for all your work!

🐛 Bug Fix

  • fix(theme-ui): add transitive peer dependency on @emotion/react #2421 (@hasparus)

🏠 Internal

Authors: 2

v0.15.7 (Thu Mar 30 2023)

v0.15.6 (Wed Mar 29 2023)

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

Thanks for all your work!

:heart: Ben (@benchilds)

:heart: Justin Cooper (@JustinotherGitter)

🐛 Bug Fix

🏠 Internal

Authors: 3

v0.15.5 (Tue Feb 07 2023)

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

Thanks for all your work!

:heart: Nischal Shakya (@Nischal2015)

:heart: Wahid Rahim (@wahidrahim)

🐛 Bug Fix

🏠 Internal

Authors: 5

v0.15.4 (Thu Nov 10 2022)

🐛 Bug Fix

🏠 Internal

Authors: 2

v0.15.4 (Thu Nov 10 2022)

🐛 Bug Fix

🏠 Internal

Authors: 2

v0.15.1 (Tue Oct 04 2022)

🐛 Bug Fix

  • Add @mdx-js/react to peerDeps for gatsby-plugin-theme-ui #2331 (@hasparus)
  • Fix MDXProvider example #2329 (@shawnbot)
  • fix(typography): drop broken dev dependencies (@hasparus)
  • fix(match-media): add dev dependency on react-dom (@hasparus)
  • fix(theme-ui): remove redundant dependency on @theme-ui/mdx from package.json (@hasparus)

🏠 Internal

Authors: 3

v0.15.0 (Mon Sep 26 2022)

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

Thanks for all your work!

:heart: Luke Watts (@thisislawatts)

:heart: Valto Savi (@pointlessrapunzel)

:heart: Brage Sekse Aarset (@braaar)

Release Notes

Pull out MDX to be opt-in (#2288)

Breaking: theme-ui no longer includes @theme-ui/mdx — MDX is now opt-in.

If your project is not using MDX or importing Themed, you shouldn't need to change anything.

  • MDXProvider is no longer included in Theme UI ThemeProvider, and has been removed in favour of an useThemedStylesWithMdx hook.

    • Migration: Use useThemedStylesWithMdx together with MDXProvider and useMDXComponents from @mdx-js/react.

       import {
   MDXProvider,
   useMDXComponents,
   Components as MDXComponents,
   MergeComponents as MergeMDXComponents,
 } from '@mdx-js/react'
 import { useThemedStylesWithMdx } from '@theme-ui/mdx'
 import { ThemeProvider, Theme } from 'theme-ui'

 interface MyProviderProps {
   theme: Theme
   components?: MDXComponents | MergeMDXComponents
   children: React.ReactNode
 }
 function MyProvider({ theme, components, children }: MyProviderProps) {
   const componentsWithStyles = useThemedStylesWithMdx(useMDXComponents(components))

   return (
     <ThemeProvider theme={theme}>
       <MDXProvider components={componentsWithStyles}>
         {children}
       </MDXProvider>
     </ThemeProvider>
   )
 }

  • Themed components dict and other exports from @theme-ui/mdx are no longer reexported from theme-ui.

    • Migration: Import it from @theme-ui/mdx instead.

       -  import { Themed } from 'theme-ui'
 +  import { Themed } from '@theme-ui/mdx'

Remove @theme-ui/editor (#2292)

  • Breaking: @theme-ui/editor was removed. Use CSS GUI instead.

Drop support for React 16 + 17 (#2215)

Theme UI 0.15.0 drops support for React 16 and React 17. Your use case may still work, but we don't guarantee it.

refactor: setting padding-right to size 4 for dynamic value (#2058)

Select component default paddingRight style has increased to spaces[4] (32px by default), to avoid text flowing behind the chevron icon.

🚀 Enhancement

🐛 Bug Fix

🏠 Internal

Authors: 10

v0.14.7 (Thu Jul 28 2022)

👨‍💻 Minor changes

Authors: 1

v0.14.6 (Wed Jun 15 2022)

🐛 Bug Fix

  • @theme-ui/prism
    • fix(prism): fix peer dependency version (@hasparus)

Authors: 1

v0.14.5 (Sat Apr 30 2022)

🐛 Bug Fix

  • gatsby-plugin-theme-ui
    • fix(gatsby-plugin-theme-ui): Stop using JSX in gatsby-browser.js and gatsby-ssr.js (@hasparus)

Authors: 1

v0.14.4 (Sat Apr 23 2022)

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

Thank you, kamatte (@kamatte-me), for all your work!

🐛 Bug Fix

  • @theme-ui/components

Authors: 3

v0.14.3 (Thu Apr 21 2022)

🐛 Bug Fix

  • @theme-ui/editor, @theme-ui/match-media, theme-ui
    • Support full media queries in theme.breakpoints in @theme-ui/match-media hooks #2199 (@hasparus)

Authors: 1

v0.14.2 (Thu Mar 31 2022)

🐛 Bug Fix

  • @theme-ui/color-modes, @theme-ui/components, @theme-ui/core, @theme-ui/editor, gatsby-plugin-theme-ui, gatsby-theme-style-guide, gatsby-theme-ui-layout, @theme-ui/match-media, @theme-ui/mdx, @theme-ui/parse-props, @theme-ui/sidenav, @theme-ui/style-guide, @theme-ui/theme-provider, theme-ui
    • fix: change react and react-dom peer dependency to >16 (@hasparus)

🏠 Internal

Authors: 1

v0.14.1 (Tue Mar 22 2022)

🐛 Bug Fix

  • @theme-ui/components
    • fix(components): add missing forwardRef and fix Switch props (@hasparus)

Authors: 1

v0.14.0 (Mon Mar 21 2022)

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

Thanks for all your work!

:heart: Brage (@braaar)

:heart: peterlits zo (@PeterlitsZo)

:heart: Ryan Turner (@rtturner)

:heart: Cannon Lock (@CannonLock)

🚀 Enhancement

  • feat(examples/next): Add new deps, fully use TSX, rebuild #2068 (@lachlanjc)
  • @theme-ui/components, @theme-ui/css, gatsby-plugin-theme-ui, @theme-ui/mdx, @theme-ui/sidenav, @theme-ui/theme-provider, theme-ui
  • @theme-ui/tailwind
    • feat(tailwind): Upgrade Tailwind theme conversion for v3.0 #2082 (@lachlanjc)
  • @theme-ui/custom-properties
    • feat(custom-properties): Warn in development on invalid theme keys #2080 (@lachlanjc)
  • @theme-ui/color-modes
    • feat(color-modes): Warn when theme color keys have leading/trailing whitespace #2099 (@lachlanjc)
  • theme-ui

🐛 Bug Fix

  • fix(docs): make layout more consistent #2168 (@hasparus)
  • feat(docs): Add custom content for sketchy preset demo #1236 (@atanasster @hasparus @lachlanjc)
  • fix(docs): Update recommendations in Keyframes doc #2079 (@lachlanjc)
  • docs: add dependencies to "getting started" #2075 (@braaar)
  • @theme-ui/color-modes
    • fix(color-modes): properly use print mode even if its name is initialColorModeName #2090 (@hasparus)
  • gatsby-plugin-theme-ui
    • fix(gatsby-plugin-theme-ui,docs): Dependency Updates #2138 (@LekoArts)
  • @theme-ui/style-guide
    • fix(style-guide): use inherited fontSize for ColorPalette color labels #2135 (@braaar)
  • @theme-ui/components
    • fix(components): Update IconButton type definition to include size prop #2121 (@rtturner)
    • components: Fix visual collapsing bug with Switch component #2067 (@lachlanjc)
  • @theme-ui/sidenav

👨‍💻 Minor changes

  • Update jsx-pragma.mdx (@hasparus)
  • docs(examples/next): fix case insensitive import (@hasparus)

🏠 Internal

📝 Documentation

Authors: 8

v0.13.1 (Wed Jan 05 2022)

🐛 Bug Fix

  • @theme-ui/css

Authors: 4

v0.13.0 (Mon Dec 27 2021)

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

Thanks for all your work!

:heart: Simen A. W. Olsen (@cobraz)

:heart: Akash (@appsparkler)

:heart: Greg Poole (@gpoole)

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

  • @theme-ui/color-modes, @theme-ui/components, @theme-ui/core, @theme-ui/css, gatsby-plugin-theme-ui, @theme-ui/mdx, @theme-ui/parse-props, @theme-ui/sidenav, @theme-ui/theme-provider, theme-ui

🐛 Bug Fix

  • fix(docs): Set text color on Demo page JSON code #2024 (@appsparkler)
  • @theme-ui/core
    • fix: add missing deepmerge dependency (@hasparus)

👨‍💻 Minor changes

  • Try out CodeQL (@lachlanjc)
  • @theme-ui/core, theme-ui
    • docs: Write migration notes for v0.13 (@hasparus)
  • gatsby-plugin-theme-ui
    • Bump peerDependency in gatsby-plugin-theme-ui (@hasparus)

🏠 Internal

Authors: 5

v0.12.1 (Mon Nov 22 2021)

🐛 Bug Fix

  • fix: bump dependency versions (@hasparus)
  • fix(docs): downgrade stringify-object to v3 (@hasparus)

👨‍💻 Minor changes

  • Add .md to .eslintignore (@hasparus)
  • @theme-ui/prism
    • docs: use the @theme-ui/components Select in /demo page (@hasparus)

Authors: 1

v0.12.0 (Thu Oct 28 2021)

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

Thank you, William Pei (@draekien), for all your work!

🚀 Enhancement

  • @theme-ui/color-modes, @theme-ui/css

🐛 Bug Fix

  • @theme-ui/color-modes, @theme-ui/color, @theme-ui/components, @theme-ui/core, @theme-ui/css, @theme-ui/custom-properties, @theme-ui/editor, gatsby-plugin-theme-ui, gatsby-theme-style-guide, gatsby-theme-ui-layout, @theme-ui/match-media, @theme-ui/mdx, @theme-ui/parse-props, @theme-ui/preset-base, @theme-ui/preset-bootstrap, @theme-ui/preset-bulma, @theme-ui/preset-dark, @theme-ui/preset-deep, @theme-ui/preset-funk, @theme-ui/preset-future, @theme-ui/preset-polaris, @theme-ui/preset-roboto, @theme-ui/preset-sketchy, @theme-ui/preset-swiss, @theme-ui/preset-system, @theme-ui/preset-tailwind, @theme-ui/preset-tosh, @theme-ui/presets, @theme-ui/prism, @theme-ui/sidenav, @theme-ui/style-guide, @theme-ui/tailwind, @theme-ui/theme-provider, theme-ui, @theme-ui/typography
    • Merge remote-tracking branch 'upstream/develop' into fix/color-scheme-media-query-api-update #981 (@draekien)

🏠 Internal

Authors: 6

v0.11.3 (Fri Sep 24 2021)

🐛 Bug Fix

Authors: 1

v0.11.2 (Wed Sep 08 2021)

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

Thank you, Matt Gleich (@gleich), for all your work!

🐛 Bug Fix

  • @theme-ui/preset-sketchy

👨‍💻 Minor changes

  • @theme-ui/color-modes, @theme-ui/color, @theme-ui/components, @theme-ui/core, @theme-ui/css, @theme-ui/custom-properties, @theme-ui/editor, gatsby-plugin-theme-ui, gatsby-theme-style-guide, gatsby-theme-ui-layout, @theme-ui/match-media, @theme-ui/mdx, @theme-ui/parse-props, @theme-ui/preset-base, @theme-ui/preset-bootstrap, @theme-ui/preset-bulma, @theme-ui/preset-dark, @theme-ui/preset-deep, @theme-ui/preset-funk, @theme-ui/preset-future, @theme-ui/preset-polaris, @theme-ui/preset-roboto, @theme-ui/preset-sketchy, @theme-ui/preset-swiss, @theme-ui/preset-system, @theme-ui/preset-tailwind, @theme-ui/preset-tosh, @theme-ui/presets, @theme-ui/prism, @theme-ui/sidenav, @theme-ui/style-guide, @theme-ui/tachyons, @theme-ui/tailwind, @theme-ui/theme-provider, theme-ui, @theme-ui/typography
    • Merge remote-tracking branch 'origin/stable' into develop (@hasparus)

🏠 Internal

  • docs(examples/next): showcase automatic runtime pragma comment in document.js #1923 (@hasparus)
  • docs(examples/next): use TS, variants and improve contrast #1923 (@hasparus)
  • docs: correct location of initialColorModeName: 'light' #1922 (@gleich)

Authors: 2

v0.11.1 (Wed Aug 25 2021)

v0.11.0 (Wed Aug 25 2021)

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

Thanks for all your work!

:heart: Torne Wuff (@tornewuff)

:heart: Jordie Bodlay (@jordie23)

Release Notes

Fixed a long-standing bug with color modes in nested providers (#1456)

Added @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

  • @theme-ui/color, @theme-ui/css, @theme-ui/preset-base, @theme-ui/preset-bootstrap, @theme-ui/preset-bulma, @theme-ui/preset-dark, @theme-ui/preset-deep, @theme-ui/preset-funk, @theme-ui/preset-future, @theme-ui/preset-polaris, @theme-ui/preset-roboto, @theme-ui/preset-sketchy, @theme-ui/preset-swiss, @theme-ui/preset-system, @theme-ui/preset-tailwind, @theme-ui/preset-tosh, @theme-ui/presets
  • @theme-ui/color-modes, @theme-ui/core, @theme-ui/editor, @theme-ui/theme-provider, theme-ui
    • fix(color-modes): combine colors in nested providers #1838 (@hasparus)

🐛 Bug Fix

  • Update global-styles.mdx #1858 (@jordie23)
  • @theme-ui/core, @theme-ui/css
  • @theme-ui/color-modes, @theme-ui/components, @theme-ui/core, @theme-ui/editor, gatsby-theme-style-guide, gatsby-theme-ui-layout, @theme-ui/match-media, @theme-ui/mdx, @theme-ui/parse-props, @theme-ui/sidenav, @theme-ui/style-guide, @theme-ui/theme-provider, theme-ui

👨‍💻 Minor changes

  • Remove dependabot from the changelog (@hasparus)

🏠 Internal

📝 Documentation

🔩 Dependency Updates

Authors: 4

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

  • Fix typo #1835 (@vladshcherbin)
  • @theme-ui/color-modes, @theme-ui/components, @theme-ui/editor, theme-ui
  • @theme-ui/color, @theme-ui/css
  • @theme-ui/color, @theme-ui/components, @theme-ui/css, @theme-ui/custom-properties, @theme-ui/editor, gatsby-theme-style-guide, @theme-ui/preset-bootstrap, @theme-ui/preset-bulma, @theme-ui/preset-dark, @theme-ui/preset-deep, @theme-ui/preset-funk, @theme-ui/preset-future, @theme-ui/preset-polaris, @theme-ui/preset-roboto, @theme-ui/preset-sketchy, @theme-ui/preset-swiss, @theme-ui/preset-system, @theme-ui/preset-tailwind, @theme-ui/style-guide

🏠 Internal

Authors: 6

v0.9.1 (Wed May 26 2021)

🐛 Bug Fix

  • @theme-ui/components

Authors: 1

v0.9.0 (Tue May 25 2021)

Release Notes

modernize Babel config (#1721)

Theme UI packages became lighter! Built source code is now 9.5 kB (34%) smaller.

The trade-off is, Babel config has changed and it no longer supports Internet Explorer 11. If you need to support legacy browsers, you can transpile node_modules (e.g. with next-transpile-modules).

🚀 Enhancement

  • @theme-ui/preset-base, @theme-ui/preset-bootstrap, @theme-ui/sidenav, @theme-ui/typography

🐛 Bug Fix

  • @theme-ui/components
    • fix(components): set Select's bgColor to "background" - fixes dark mode (@hasparus)

📝 Documentation

Authors: 2

v0.8.4 (Thu May 06 2021)

🐛 Bug Fix

  • @theme-ui/theme-provider
    • fix(theme-provider): set body margin to 0 (@hasparus)

⚠️ Pushed to stable

  • @theme-ui/theme-provider
    • Merge branch 'develop' into stable (@hasparus)

Authors: 1

v0.8.3 (Wed May 05 2021)

🐛 Bug Fix

  • @theme-ui/color-modes
    • fix(color-modes): stop showing current color mode as initial mode in rawColors.modes (@hasparus)

⚠️ Pushed to stable

  • @theme-ui/color-modes, @theme-ui/color, @theme-ui/components, @theme-ui/core, @theme-ui/css, @theme-ui/custom-properties, @theme-ui/editor, gatsby-plugin-theme-ui, gatsby-theme-code-recipes, gatsby-theme-style-guide, gatsby-theme-ui-layout, @theme-ui/match-media, @theme-ui/mdx, @theme-ui/parse-props, @theme-ui/preset-base, @theme-ui/preset-bootstrap, @theme-ui/preset-bulma, @theme-ui/preset-dark, @theme-ui/preset-deep, @theme-ui/preset-funk, @theme-ui/preset-future, @theme-ui/preset-polaris, @theme-ui/preset-roboto, @theme-ui/preset-sketchy, @theme-ui/preset-swiss, @theme-ui/preset-system, @theme-ui/preset-tailwind, @theme-ui/preset-tosh, @theme-ui/presets, @theme-ui/prism, @theme-ui/sidenav, @theme-ui/style-guide, @theme-ui/tachyons, @theme-ui/tailwind, @theme-ui/theme-provider, theme-ui, @theme-ui/typography
    • Merge branch 'stable' into develop (@hasparus)

Authors: 1

v0.8.2 (Wed May 05 2021)

🐛 Bug Fix

  • @theme-ui/color-modes
    • fix(color-modes): merge rawColors even when there are no color modes (@hasparus)
    • fix(color-modes): add initial color mode to a correct key (@hasparus)
    • fix(color-modes): hotfix color modes provider to stop breaking rules of hooks (@hasparus)
  • @theme-ui/color-modes, @theme-ui/css, @theme-ui/custom-properties, theme-ui
    • fix(color-modes): merge rawColors from nested theme providers (@hasparus)

v0.8.1 (Wed May 05 2021)

🐛 Bug Fix

Authors: 2

v0.8.0 (Wed May 05 2021)

🔥 Breaking Changes and Deprecations

  • BREAKING: theme.config.useRootStyles now defaults to true following deprecation of useBodyStyles. Styles from theme.styles.root are now added to <html> element by default.

  • Moved theme configuration options to config object in theme.

    • Deprecations: useRootStyles, useCustomProperties, useColorSchemeMediaQuery, useBorderBox, and useLocalStorage options on the theme object are now scoped under a config object on the theme, and the root-level options, now deprecated, will be removed in a future release.

    (e.g. you should be setting theme.config.useBorderBox instead of theme.useBorderBox)

    • ⚠ All config options should be migrated at once. If Theme UI sees theme.config exists, it won't look for options on the theme.

  • Removed APIs, previously deprecated in 0.6.0

    • theme.useBodyStyles ⟶ theme.config.useRootStyles
    • Styled ⟶ Themed

🚀 Enhancements

  • @theme-ui/color-modes, @theme-ui/css, gatsby-plugin-theme-ui
    • Refactor color objects and expose default colors as a mode #1639 (@fcisio)

🐛 Bug Fix

  • (REVERTED in v0.8.1) @theme-ui/core, @theme-ui/sidenav

📝 Documentation

Authors: 5

:tada: v0.8.0 contains work from a new contributor! :tada:

Thank you, @Zolwiastyl, for all your work!

v0.7.5 (Wed Apr 28 2021)

🐛 Bug Fix

  • @theme-ui/css

📝 Docs

  • docs: useColorSchemeMediaQuery defaults to true (@hasparus)

Authors: 2

v0.7.4 (Tue Apr 27 2021)

🐛 Bug Fix

Authors: 1

v0.7.3 (Wed Apr 21 2021)

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

:heart: David Dios (@dios-david)

Thanks for all your work!

✨ New Features

🐛 Bug Fix

  • @theme-ui/css
    • Return negative number from lookup if theme value is a number #1665 (@kenny-f)

🔩 Dependency Updates

Authors: 3

v0.7.2 (Mon Apr 19 2021)

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

Thank you, Jonathan Van Buren (@vanbujm), for all your work!

🐛 Bug Fix

  • gatsby-plugin-theme-ui
  • @theme-ui/components
    • fix(components): Allow styled-system space props on Paragraph #1658 (@vanbujm)

🔩 Dependency Updates

Authors: 3

v0.7.0 (Thu Apr 15 2021)

🚀 Enhancement

🐛 Bug Fix

  • gatsby-plugin-theme-ui, gatsby-theme-code-recipes, gatsby-theme-style-guide, gatsby-theme-ui-layout
    • Set gatsby peerDependency more explicit to ^2.0.0 || ^3.0.0. #1640 (@LekoArts)

⚙️ Internal

v0.6.2 (Mon Apr 05 2021)

🐛 Bug Fix

  • @theme-ui/css
    • Types for borderTopWidth now correctly accept number. #1623 (@beerose)

v0.6.1

  • Reexported jsx as createElement to fix babel JSX pragma crash. Issue #1603, PR #1604 by @ethanwu10.

    The following code doesn't crash anymore.

    <div {...{}} key="1" />

v0.6.0

changes relative to 0.3, not the latest 0.6 prerelease

What's New

  • Styled components dict was renamed to Themed to avoid confusion with styled components constructors from @emotion/styled and similar libraries.

  • theme.useRootStyles configuration option (false by default). Set it to true to add styles.root to html instead of body.

    • theme.useBodyStyles configuration option still defaults to true, but it's going in to be deprecated in favor of theme.useRootStyles in the future.

  • New scale: transitions supporting transition CSS property. Issue #1079, PR #1272

  • Objects in nested scales can now have a __default key. PR #951

    Given the theme

    const theme = {
  colors: {
    primary: {
      __default: '#00f',
      light: '#33f',
    }
  }
}

    color: 'primary' resolves to color: '#00f'.

  • Configuration option for printing color mode. PR #1267, issue #1144. No more wasted ink.

    {
  initialColorModeName: "dark",
  printColorModeName: "light"
}

  • A new component, Paragraph was added in PR #1298

Breaking Changes

  • Theme UI 0.6 depends on Emotion 11, and isn't compatible with Emotion 10 anymore.

    • If you didn't install Emotion separately, this update shouldn't affect you.
    • If your other dependencies depend on Emotion 10, and have no published versions for Emotion 11, you can use Yarn resolutions or Webpack's resolve.alias to enforce a version.

    Refer to Emotion 11 release notes for more information.

  • Color mode flash on first render is gone, but to achieve this we had to bring back theme.rawColors.

    • You can no longer read raw color values from theme.colors when reading theme from useThemeUI or inside sx.
    • .colors object contains Custom CSS Properties now.
    • If you need to pass original value somewhere where CSS Properties (e.g. WebGL Canvas) won't work use .rawColors.

  • Default color mode name is no longer "default" — it's now undefined, what represents the lack of color mode set by user or detected from preferences.

  • useColorSchemeMediaQuery defaults to true. Issue #624, PR #1373

    How to migrate? Add useColorSchemeMediaQuery: false to your theme if you don't have this property. Read more in the docs.

  • We no longer export internal React context named as Context 😅 It wasn't and it's still not public API, but if you used it and you really need it, you can grab it as __ThemeUIContext. (But please don't do this. Use ThemeProvider from @theme-ui/core for local theme overrides instead.)

Deprecations

  • Styled will be removed in v0.7. Use Themed instead.
  • useBodyStyles will be removed in v0.7. Use useRootStyles instead.

TypeScript Changes

Theme UI is now written in TypeScript, and the emitted types differ from @types/theme-ui.

  • false in now accepted in responsive tuple types. PR #1499

  • Known colors (primary, text, background, accent, secondary) in ColorMode can now be nested scales.

    The following no longer typechecks, as colors.primary can be an object.

    sx={{
  color: theme => theme.colors?.primary?.toUpperCase()
}}

    But the following code still works.

    sx={{
  color: theme => theme.colors?.primary
}}

    If colors.primary is an object, colors.primary.__default is used.

  • false values are skipped before passing style objects to Emotion. Issue #1297, PR #1460.

    The following syntax is now supported

    sx={{ color: isActive && blue }}

  • "as" prop on Themed.X components now properly opts out of typechecking

    • TypeScript users, don't use ComponentProps<typeof Themed['div']>, import ThemedComponent and use ThemedComponent<'div'> instead.

  • Theme UI 0.6 depends on csstype v3 instead of csstype v2.

  • Renamed types

    • Anything copied from styled-system types was renamed or removed.
    • SxProps was renamed to SxProp.
    • SxStyleProp, an alias for ThemeUIStyleObject was removed. Use ThemeUIStyleObject instead.

Refer to the changelog for a full list of changes.

v0.6.0-alpha.8 2021-02-19

  • Make the rename of Styled to Themed non-breaking. Add a deprecation warning on Styled until a future release. PR #1461
  • Paragraph component's hardcoded responsive style has been removed (issue #1476)

  • Fix issue where css custom vars are only added to body if modes is in the colors declaration of the theme.

  • BREAKING: Move theme configuration options to config object in theme.

v0.6.0-alpha.7 2021-02-15

  • Breaking TypeScript: Known colors (primary, text, background, accent, secondary) in ColorMode can now be nested scales.

    The following no longer typechecks, as colors.primary can be an object.

    sx={{
  color: theme => theme.colors?.primary?.toUpperCase()
}}

    But the following code still works.

    sx={{
  color: theme => theme.colors?.primary
}}

    If colors.primary is an object, colors.primary.__default is used.

  • Add theme.useRootStyles configuration option (false by default). Set it to true to add styles.root to html instead of body. theme.useBodyStyles configuration option still defaults to true, but it's going in to be deprecated in favor of theme.useRootStyles in the future.

  • Accept `false` in responsive tuple types. PR #1499
  • Skip false values before passing style objects to Emotion. Issue #1297, PR

    1460.

    • Allow `false` as style property value in TS types.

v0.6.0-alpha.6 2021-01-22

  • BREAKING: Default useColorSchemeMediaQuery to true. Issue #624, PR

    1373

    How to migrate? Add useColorSchemeMediaQuery: false to your theme if you don't have this property. Read more in the docs.

  • Option for gatsby-plugin-theme-ui to disable body script (injectColorFlashScript, defaulting to true). Issue #1369, PR #1370

  • Bump versions @mdx-js/mdx and @mdx-js/react to ^1.6.22, gatsby-plugin-mdx to ^1.6.0. PR #1351
  • Fix: "as" prop on Themed.X components now properly opts out of typechecking
    • TypeScript users, don't use ComponentProps<typeof Themed['div']>, import ThemedComponent<'div'> instead.
  • @theme-ui/prism: Support multiple highlight wrappers in a single code block. PR #1393

v0.6.0-alpha.5 2021-01-22

  • Support a default key for object in scales. PR #951

    Given the theme

    const theme = {
  colors: {
    primary: {
      __default: '#00f',
      light: '#33f',
    }
  }
}

    color: 'primary' resolves to color: '#00f'.

v0.6.0-alpha.4

  • Extract objects with nested variant props. Issue #1357
  • Add ability for MDX styling, and fix mdx table align styles. Issue #654
  • Remove recursive default values from CSS custom properties. PR #1327
  • Render extra Embed props onto iframe tag instead of wrapping div. Issue

    966, PR #1122

v0.6.0-alpha.2

  • Remove recursive default values from CSS custom properties. PR #1327

v0.6.0-alpha.1

  • Switches from lodash.kebabCase to alternative package (param-case) per official Lodash documentation. PR

    1304

  • Rebuilds Prism preset with latest upstream theme changes. PR #1304
  • Fix: Preserve order of variant expansion props. PR #1326 (bug introduced in 0.5.0-alpha.1)

v0.6.0-alpha.0

  • BREAKING: Rename Styled component to Themed. PR #1323
  • BREAKING: Make Text component use span instead of div
  • breaking TypeScript: Renamed and removed types. PR #1308
    • SxProps to SxProp.
    • SxStyleProp, an alias for ThemeUIStyleObject removed. Use ThemeUIStyleObject instead.
  • Fix: Add sx props types to all props accepting className. PR #1308
  • Fix WithPoorAsProp to work with ComponentProps utility type. PR #1308

v0.5.0-alpha.2 2020-11-30

  • Add Paragraph component. PR #1298

v0.5.0-alpha.1 2020-11-26

  • Bump React peerDependency to "^16.14.0 || ^17.0.0".
  • Support automatic JSX runtime. Issue #1160, PR #1237
  • Bump React peerDependency to "^16.14.0 || ^17.0.0".
  • Apply variant styles before responsive styles. Issues #1030, and #720, PR

    1273

v0.5.0-alpha.0 2020-11-20

  • BREAKING: Upgrade to Emotion 11, and csstype 3. PR #1261
    • We are now depending on @emotion/react@11 instead of @emotion/core@10
    • sx prop types are still global, and we opt in for Emotion css prop types (This will change in the future.)
    • Refer to Emotion 11 release notes for more information.

v0.4.0-rc.14 2020-11-20

@theme-ui/color-modes

  • Fix color CSS Custom Properties recursive reference

v0.4.0-rc.13 2020-11-20

@theme-ui/css

  • Add transitions scale. Issue #1079, PR #1272

v0.4.0-rc.12 2020-11-18

theme-ui

  • Use correct version of @theme-ui/components in theme-ui package. (Locked dependencies on other Theme UI packages)

v0.4.0-rc.11 2020-11-18

docs

  • Add documentation on CSS keyframes #1269

@theme-ui/color-modes

  • Add configuration option for printing color mode. PR #1267, issue #1144.

    {
  initialColorModeName: "dark",
  printColorModeName: "light"
}

@theme-ui/components

  • Add arrow prop to Select to allow passing custom arrow icon. Issues #1177

    1151, PR #1232

  • Fix: Field component uses id if passed. PR #1252
  • Fix circular import in Switch.js

v0.4.0-rc.9 2020-11-17

@theme-ui/components

  • Fix Button not respecting hidden prop. Issue #1254
  • Add minWidth: min-content on Checkbox and Radio. PR #1256

v0.4.0-rc.8 2020-11-09

@theme-ui/color

  • Fix support for rgb/hsl color values

@theme-ui/components

  • Add Switch component #1035

    <Label>
  <Switch /> Enable email alerts?
</Label>

  • Pass size prop down to IconButton in Close component. PR #1242

    <Close size={24} />

examples

  • Convert Gatsby example to TypeScript and stop using removed components. Issue

    1227, PR #1229

v0.4.0-rc.7 2020-11-08

@theme-ui/core

  • Make ThemeProvider theme prop required

@theme-ui/editor

  • Removes overriding property on editor combobox #687

@theme-ui/preset-sketchy

  • Add @theme-ui/preset-sketchy

@theme-ui/prism

  • Add support for highlighting lines #895

@theme-ui/sidenav

  • @theme-ui/sidenav: move React to peerDependencies #978

@theme-ui/style-guide

  • Pass size prop to ColorRow component #941

@theme-ui/color-modes

  • Accept SetStateAction and generic parameter #1174

docs

  • Fix broken base-preset link on theming page

v0.3.2 2020-11-08

  • Fix peer dependencies. Issue #725, PR #836

@theme-ui/css

  • Add theme colors support to columnRuleColor and caretColor #1085
  • Support scrollPadding variations in sx props. Issue #1214

@theme-ui/core

  • Support Webpack 5. (Uses default export from package.json instead of named export) #1141

@theme-ui/components

  • Add primary as default variant for Badge component #1109
  • Add primary as default variant for Alert component #1102
  • Add theme.text.default variant for Text component #870

docs

  • Fix example logo on Avatar & Image component docs #1233
  • Fix theme editor output in docs #1182

v0.3.1 2020-01-32

  • Adjusts media query sort logic #600
  • Fixes link to Gatsby Plugin page in getting-started page. Issue #602, PR

    603

v0.3.0 2020-01-22

  • Split theme-ui package into @theme-ui/core, @theme-ui/mdx, and @theme-ui/color-modes
  • Removes context.components (still available through MDX context)
  • Adds separate ColorModeProvider component
  • Removes support for theme.initialColorMode - use initialColorModeName instead
  • Removes layout components (Layout, Header, Main, Footer) - use Box and Flex instead
  • Updates CSS custom properties implementation for color modes
  • When using useColorSchemeMediaQuery flag, it will initialize the mode to light when @media (prefers-color-scheme: light) is enabled
  • Global color mode styles are automatically added to the body without needing to render the ColorMode component
  • Adds global typographic styles, set useBodyStyles: false to disable
  • Removes ThemeStateProvider
  • Fix issue where <del> tag was incorrectly specified as delete
  • The @theme-ui/editor API has changed significantly. See the README.md for more information.
  • @theme-ui/components: on Grid component, allow custom columns definitions via strings #541
  • @theme-ui/gatsby-theme-style-guide: add docs on shadowing #558
  • Adds @theme-ui/preset-polaris #567
  • Adjusts default font stack in presets #568

v0.2.53 2019-12-19

  • @theme-ui/color: add transparentize function #370
  • @theme-ui/style-guide: move context dependencies to peer dependencies #521

v0.2.52 2019-12-16

  • Fix for issues when localStorage is not available #514
  • @theme-ui/match-media: add option for default index in hook #460
  • @theme-ui/editor: Update Reakit #517

v0.2.51 2019-12-03

  • @theme-ui/editor: fix color picker #498

v0.2.50 2019-12-02

  • @theme-ui/components: fix NavLink base styles #497

v0.2.49 2019-11-15

  • @theme-ui/components: add more components #458
  • @theme-ui/color: add alpha utility #441
  • @theme-ui/match-media: Add default breakpoint index argument for SSR

v0.2.48 2019-11-07

  • @theme-ui/editor add components for editing sx styles

v0.2.47 2019-10-29

  • @theme-ui/editor add StylesForm component

v0.2.46 2019-10-28

  • Fix environment check #415
  • Update dependencies

v0.2.45 2019-10-18

  • Add @theme-ui/match-media package #375
  • Add @theme-ui/components package #411

v0.2.44 2019-10-09

  • Fix prop forwarding in styled HOC #377
  • Add missing key #406
  • Add support for functional themes #400

v0.2.43 2019-09-17

  • Fix Reakit for ColorPicker test #357
  • Simplify color mode API and disable prefers-color-scheme media query behavior by default #246
  • Add BaseStyles component #369

v0.2.42 2019-09-11

  • Updated UI in chrome extension
  • Fix typo in tailwind preset #346
  • Fix state bug in chrome extension
  • Move React to peer dependencies

v0.2.41 2019-09-05

v0.2.40 2019-09-03

  • Pass outer context through RootProvider #340
  • Update dependencies

v0.2.38 2019-08-29

  • Added new ColorPicker component to @theme-ui/editor #327
  • Added warning for conflicting versions of Emotion #297
  • Added color utility package #331

v0.2.37 2019-08-26

  • Update dependencies

v0.2.36 2019-08-22

  • Added gatsby-theme-ui-blog package #311
  • Added gatsby-theme-code-recipe package #313
  • Updated styles in gatsby-theme-style-guide #315

v0.2.35 2019-08-15

  • Adds gatsby-theme-style-guide package #301
  • Fix for jsx create element function #302

v0.2.34 2019-08-15

  • gatsby-plugin-theme-ui remove JSX syntax from gatsby-ssr in Gatsby plugin

    299

  • @theme-ui/typography fix for CSS font-family keywords #285
  • @theme-ui/preset-tailwind add button and input variants #291

v0.2.33 2019-08-12

  • Add support for FOUC fix in Next.js #277
  • Update dependencies

v0.2.32 2019-08-08

  • Add accordion sidenav #279

v0.2.31 2019-08-07

  • Maintain raw color values in Theme UI context when useCustomProperties is enabled #274

v0.2.30 2019-08-06

  • Updates for tailwind preset #272

v0.2.29 2019-08-05

  • Update dependencies

v0.2.28 2019-08-03

  • Add tosh preset #264

v0.2.27 2019-08-03

  • Bad lerna publish

v0.2.26 2019-08-02

  • Fix for CSS custom properties when using nested color objects #259
  • Add warning when initialColorMode matches a color mode name #245
  • Fix for forwarding refs #261
  • Fix peer dependency version #263

v0.2.25 2019-07-31

  • Add @theme-ui/custom-properties package #235

v0.2.24 2019-07-29

  • Adds preset packages #210

v0.2.23 2019-07-29

  • Add base colors to prism presets #249
  • Add key to element in gatsby-plugin-theme-ui #248
  • Add metadata to packages #244
  • Update docs

v0.2.22 2019-07-29

  • Update dependencies

v0.2.21 2019-07-26

  • Add presets to @theme-ui/prism #231
  • Fix array merging #230

v0.2.20 2019-07-26

  • Fix for color mode in context #226

v0.2.19 2019-07-24

  • Fix for unsupported Prism languages #218
  • Update dependencies

v0.2.18 2019-07-23

  • Update docs
  • Update dependencies

v0.2.16 2019-07-22

  • Forward all props to functional components #197

v0.2.15 2019-07-22

  • Update dependencies

v0.2.14 2019-07-15

  • Only pass css prop through when needed in jsx #182

v0.2.13 2019-07-11

v0.2.12 2019-07-11

  • Fix bad publish

v0.2.11 2019-07-11

  • Adds Chrome extension package #136

v0.2.10 2019-07-08

  • Fix keys in tailwind preset #171

v0.2.9 2019-07-08

  • Add optional support for CSS custom properties #166

v0.2.8 2019-07-06

  • @theme-ui/sidenav initial publish
  • @theme-ui/prism add display: inline-block to keep empty lines

v0.2.7 2019-07-05

  • @theme-ui/prism pass outer className to element #163

v0.2.6 2019-07-04

  • Adjust color mode initialization from media query #157

v0.2.5 2019-07-03

  • Fix publish

v0.2.4 2019-07-03

  • Adjust microbundle setup for @theme-ui/prism

v0.2.3 2019-07-02

  • Add @theme-ui/prism package

v0.2.2 2019-07-02

  • Add key prop to element in gatsby-plugin-theme-ui #145
  • Update docs

v0.2.1 2019-06-30

  • Rename gatsby-plugin-theme-ui #137
  • Update docs

v0.2.0 2019-06-24

  • Replaced lodash.merge with deepmerge
  • Updated to use smaller Styled System v5 packages
  • Removed layout and flexbox style props from Box and layout components
  • Renamed css prop in experimental custom pragma to sx to avoid collisions with Emotion and other libraries
  • Refactored ThemeProvider
  • Removed toStyle API from Typography.js package
  • Renamed Typography.js package to @theme-ui/typography
  • Removed @emotion/styled dependency - layout components are no longer created with styled so passing non-HTML attributes to the component will result in React rendering those props to the DOM
  • Removed legacy ColorModeProvider and ComponentProvider exports