gatsby-theme-ui-layout

gatsby-theme-ui-layout

Gatsby theme for adding shadowable layouts to multiple Gatsby themes for composition.

npm i gatsby-theme-ui-layout

In your theme, import and use the Layout component, which does not include any default layout.

// example page template
/** @jsx jsx */
import { jsx } from 'theme-ui'
import { Layout } from 'gatsby-theme-ui-layout'

export default (props) => (
  <Layout {...props}>{/* your theme content goes here */}</Layout>
)

End-users of a theme that is built with gatsby-theme-ui-layout can shadow the same Layout component to customize the page layout.

Changelog

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.