@theme-ui/components - npm Package Versions

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.

Skip false values before passing style objects to Emotion. Issue #1297, PR #1460.

• <img src="https://emojis.slackmojis.com/emojis/images/1479745458/1383/typescript.png?1479745458" width="16" height="16" /> Allow `false` as style property value in TS types.

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

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'.