Components

Theme

Seeds components come with a default theme that provides them with design tokens, and allows you to easily access those tokens as well.

The theme file provides structured access to design tokens in a format that is consistent and easily consumable. You can use theme values with system props, or access the theme object directly from within your own Styled Components.

The theme is broken into categories based on different types of values, like color, space, typography, etc. Tokens can be either semantic or literal.

Semantic vs. literal tokens

Literal vs. semantic tokens

Semantic tokens are essentially aliases of other tokens that are assigned to a specific purpose. In the example above, the cta.primary token is meant for the primary call-to-action on a page.

Using semantic values allows us to do things like customize the way our components look app-wide. When considering whether to use a semantic or literal token, consider: would you want the value you’re using to change if we changed the theme? If so, use a semantic token.

Theme reference

Theme values are used in two ways:

  1. Values supplied to system props reference the value directly, i.e. <Box m={500} />
  2. Values used within Styled Components can access the theme (on the component’s prop object) directly via a key path, i.e. margin: ${props => props.theme.space[500]};

The following tables show both the system prop values and the key paths.

Color

CategorySystem propKey pathValue
 theme.colors.border
 theme.colors.error
 theme.colors.warning
cta
theme.colors.cta.primary
theme.colors.cta.secondary
 
theme.colors.cta.link
text
theme.colors.text.body
theme.colors.text.headline
 
theme.colors.text.subtext

Space

Note: All space values are available as negative numbers as well. Simply prepend a hyphen before the value, i.e. <Box margin={-200} /> will give a -4px margin.

System propKey pathValue
0 theme.space[0]
100 / -100theme.space[100] / theme.space[-100]
200 / -200theme.space[200] / theme.space[-200]
300 / -300theme.space[300] / theme.space[-300]
350 / -350theme.space[350] / theme.space[-350]
400 / -400theme.space[400] / theme.space[-400]
450 / -450theme.space[450] / theme.space[-450]
500 / -500theme.space[500] / theme.space[-500]
600 / -600theme.space[600] / theme.space[-600]

Typography

Typography tokens encapsulate both font size and line height values.

System propKey pathValue
100theme.typography[100]
200theme.typography[200]
300theme.typography[300]
400theme.typography[400]
500theme.typography[500]
600theme.typography[600]
700theme.typography[700]
800theme.typography[800]
900theme.typography[900]
1000theme.typography[1000]
1100theme.typography[1100]
1200theme.typography[1200]

Font weight

System propKey pathValue
normaltheme.fontWeights.normal
semiboldtheme.fontWeights.semibold
boldtheme.fontWeights.bold
extraboldtheme.fontWeights.extrabold

Border width

System propKey pathValue
500theme.borderWidths[500]1px

Border radius

System propKey pathValue
innertheme.radii.inner500 token6px
outertheme.radii.outer600 token8px
pilltheme.radii.pill1000 token999999px

Box shadow

System propKey pathValue
100theme.shadows[100]0px 2px 4px rgba(39,51,51,.24)
200theme.shadows[200]0px 4px 8px rgba(39,51,51,.24)
300theme.shadows[300]0px 8px 16px rgba(39,51,51,.24)
400theme.shadows[400]0px 16px 32px rgba(39,51,51,.24)

Easing

System propKey pathValue
ease_intheme.easing[ease_in]cubic-bezier(.4, 0, .7, .2)
ease_outtheme.easing[ease_out]cubic-bezier(0, 0, .2, 1)
ease_inouttheme.easing[ease_inout]cubic-bezier(.4, 0, .2, 1)

Duration

System propKey pathValue
fasttheme.duration[fast].15s
mediumtheme.duration[medium].3s
slowtheme.duration[slow].6s

Breakpoints

Breakpoint values are not referenced directly in system props. Check out the system props page for more details on how to use responsive props.

Note: breakpoint values highly depend on the context in which the components are being used. These values are a good starting point, but they should likely be customized for most projects.

Index/nameKey pathValue
0 (Small)theme.breakpoints[0]900px
1 (Medium)theme.breakpoints[1]1200px
2 (Large)theme.breakpoints[2]1500px
3 (X Large)theme.breakpoints[3]1800px