Transformers

Using transformers, you can configure the underlayer of system. For example, you can choose to use rem unit instead of px.

Use custom transformers

All theme getters are configurable through transformers.

import styled, { ThemeProvider } from '@xstyled/styled-components'
import { rpxTransformers } from '@xstyled/system'
import { lighten } from 'polished'
const theme = {
transformers: {
color: (value) => {
const matches = value.match(/(.*)\.light/)
if (!matches) return value
return lighten(0.2, matches[1])
},
},
}
export default () => (
<ThemeProvider theme={theme}>
<Box backgroundColor="black.light" />
</ThemeProvider>
)
// The background of the box will be "black" lightened with 0.2