Style Hooks

Theming

Robust themes are an optional, but core facet of the Style Hooks design system

Themes are a crucial component to any design system and because Style Hooks was written in Emotion, your theme will be available to all of your components through the css prop. It will also be usable via React Context. To use theming, you must include our ThemeProvider at the top-level of your app.

That said, you can opt not to use themes. Without them you will not be able to utilize breakpoint props or the kind prop.

The basics

Every style hook comes with its own key in the theme. This is used for determining kind props and defaultProps. Additionally, two theme keys are reserved (but configurable) and there by default:

let defaultTheme = {
breakpoints: {
// 0px
phone: 'only screen and (min-width: 0em)',
// 560px
tablet: 'only screen and (min-width: 35em)',
// 1280px
desktop: 'only screen and (min-width: 80em)',
},
// the breakpoints delimeter is configurable :)
breakpointsDelimiter: ':'
}

Using the theme

This section will describe how to use Theme-specific components. To learn how to use it in your own custom hooks, see here.

Use with the useTheme() hook

import {useTheme} from '@style-hooks/core'
// Using a global theme
const FunctionalComponent = () => {
const theme = useTheme()
return `My favorite color is ${theme.colors.blue}`
}
// Using a specific theme, in this example the
// theme for useText() / <Text>
const FunctionalComponent = () => {
const textTheme = useTheme('text')
return (
<span style={{fontSize: `${textTheme.size.sm}rem`}}>
Hello, I'm a size small
</span>
)
}

Use with the <ThemeConsumer>

import {ThemeConsumer} from '@style-hooks/core'
// Using a global theme
const Component = () => (
<ThemeConsumer>
{theme => {/*do stuff*/}}
</ThemeConsumer>
)
// Using a specific theme, in this example the theme for <Text>
const Component = () => (
<ThemeConsumer name='text'>
{textTheme => {
// This will only provide the theme defined
// for theme[name]
}}
</ThemeConsumer>
)

Use with the css prop

/** @jsx jsx */
import {jsx, css} from '@emotion/core'
// Use in plain React components
const Component = () => (
<span css={
theme => css`
font-size: ${theme.text.size.lg}rem;
@media ${theme.mediaQueries.hiDpi} {
font-smoothing: antialias;
}
`
}>
Hello
</span>
)
// Use in Style Hooks components
// (Assumes you've created a <Text/> component)
const Component = () => (
<Text css={
theme => css`
color: ${theme.colors.primary};
@media ${theme.breakpoints.phone} {
font-size: ${theme.text.size.md}rem;
}
@media ${theme.breakpoints.desktkop} {
font-size: ${theme.text.size.lg}rem;
}
`
}>
Hello
</Text>
)
Continue to Breakpoint props
NPM icon
MIT License ©2019
Jared Lunde