@amendable/colors-polished

Colors Polished

This is a drop-in replacement of @amendable/colors that also adds support for polished color transforms. You can now write primary-darken10 and it will just work.

Usage

All polished values that go from 0 to 1 in this resolver syntax goes from 0 to 100. So if you want to transform with darken(0.5, 'red') you have to write red-darken50.

import { render } from 'react-dom'
import Box, { AmendableProvider } from '@amendable/core'
import colorsPolished from '@amendable/colors-polished'
import inlineStyles from '@amendable/inline-styles'

render(
  <AmendableProvider
    resolvers={[
      colorsPolished({ colors: { primary: '#0055ff', red: '#F5BCCF' } }),
      inlineStyles(),
    ]}
  >
    <Box color='primary-darken10' backgroundColor='red'>
      Primary color, darkened by 10 percent
    </Box>
  </AmendableProvider>
)

Note

You can both create your own color names or redefine existing CSS colors (like red, blue, etc.)

Supported props

The same props that @amendable/colors support.

Supported Polished color transforms

• adjust-hue
• complement
• darken
• desaturate
• grayscale
• invert
• lighten
• opacify
• saturate
• set-hue
• set-lightness
• set-saturation
• shade
• tint
• transparentize

Transform chaining

This resolver also supports transform chaining:

// you can even write this if you'd like:
color='primary-opacify10-darken50-invert'