1 - Convert starter styles to rebass theme #4
Conversation
| colors: { | ||
| gray: { | ||
| "1": "hsl(0,0%,32%)", | ||
| "2": "hsl(0,0%,47%)", |
There was a problem hiding this comment.
[aside] Inspired by https://observablehq.com/@anandaroop/perceptually-tuned-grayscale-ramps
| import styledNormalize from 'styled-normalize' | ||
|
|
||
| const theme = { | ||
| breakpoints: { |
There was a problem hiding this comment.
We start here by setting up a theme object. Themes are passed through the context via styled-components' ThemeProvider, so now we'll have access to our theme object.
| textDecoration: `none`, | ||
| }} | ||
| > | ||
| <Text as="h1" fontFamily="sans" style={{ margin: 0 }}> |
There was a problem hiding this comment.
Rebass provides root components that hook into your theme, removing the need to use css for most layout concerns. In this case Text will render as an h1 and receive theme.fonts['sans'] as its css font-family. If I'd wanted I could have done m={0} to select the 0th element in my rebass' default theme.space array (which happens to be 0). The docs for rebass & styled-system cover this in much more detail than my PR could.
| <> | ||
| <Header siteTitle={data.site.siteMetadata.title} /> | ||
| <PageContent m="0 auto" maxWidth={["560px"]}> | ||
| <Box p="0px 1.0875rem 1.45rem"> |
There was a problem hiding this comment.
p="0px 1.0875rem 1.45rem": I'm just replacing the padding prop from the gatsby starter with a string literal to be used as css- No reliance on a theme here.
| const Header: React.FunctionComponent<{ siteTitle: string }> = ({ | ||
| siteTitle, | ||
| }) => ( | ||
| <Box bg="rebeccapurple" mb="1.45rem"> |
There was a problem hiding this comment.
Props that expect colors will look in your theme.colors first, then fallback to treating your string as a color value itself.
| return ( | ||
| <Theme> | ||
| {element} | ||
| </Theme> |
There was a problem hiding this comment.
This should go in both gatsby-browser.js and gatsby-ssr.js. I'm not totally clear how these two points differ, sadly... As you can see here i copy-pasted the comment as well. Oops.
erikdstock
changed the title
Overview
There isn't much to this; rebass is an opinionated set of core components built with styled-system. Combined together they make it easy to define component libraries that abstract most layout concerns for you. Because they are backed by
styled-componentsthe patterns are well-established and the components and themes are easy to extend - you always have the escape hatch when you need it.Requirements
gatsby-plugin-styled-componentsShould already be installed and configured ingatsby-config.jsstyled-components,styled-system,rebassand their associated@typesare used here.