One of the core features of Styled System is the ability to quickly reference values defined in a theme in your components' props. Instead of hard-coding values or importing a theme into other components, Styled System props hook directly into React context-based themes.
Given the following colors in a theme:
const colors = {
blue: '#07c',
}
export default {
colors,
}
A component with color
props can pick up the blue
value:
<Box color='blue' />