getTextColorOn

A utility function to get the text color that belongs on a background color.

Syntax

getTextColorOn(colorShade)(props)

Usage

const Component = styled.div`
  color: ${getTextColorOn('primary.base')};
`

Arguments

Example

const TextDemo = styled.div`
  color: ${getTextColorOn('primary.base')};
  background-color ${getPaletteColor('primary.base')};
`

<TextDemo>Lightest text color</TextDemo>

Pass a full palette color and shade to return the text color that belongs on that color. The above example would return text.lightest while getTextColorOn('primary.light') would return text.base.