Documentation

Table of Contents

• reversePalette
  • Parameters
  • Examples
• key
  • Parameters
  • Examples
• font
  • Parameters
  • Examples
• size
  • Parameters
  • Examples
• palette
  • Parameters
  • Examples

reversePalette

Revert the palette

Parameters

• palette Palette

Examples

reversePalette({primary: ['red', 'green', 'blue']})
// {primary: ['blue', 'green', 'red']}

Returns Palette

key

Returns the value of props.theme[path] or styledTheme[path]

Parameters

• path (string | Array<string>)
• defaultValue any?

Examples

const Button = styled.button`
 font-family: ${key('fonts.primary')};
 color: ${key(['colors', 'primary', 0])};
`

Returns any

font

Shorthand to key(['fonts', path])

Parameters

• path string
• defaultValue any?

Examples

const Button = styled.button`
 font-family: ${font('primary')};
`

Returns Font

size

Shorthand to key(['sizes', path])

Parameters

• path string
• defaultValue any?

Examples

const Button = styled.button`
 padding: ${size('padding')};
`

Returns Size

palette

Returns the value of props.theme[palette || reversePalette][path][index] or styledTheme[palette || reversePalette][path][index] (default theme)

The arguments can be passed in any order, as long as types are kept.

Parameters

• args ...any
• index number The index of tone in theme palette tones array
• path string The key of the tones in theme palette object (optional, default props.palette)
• exceptions Object? An object with path as key and index as value
• reverse boolean? Flag to return tone from reversePalette or palette
• defaultValue string? Default value

Examples

// index = 1
// exception = { grayscale: 0 }
// reverse = true
const Button = styled.button`
 background-color: ${palette({ grayscale: 0 }, 1, true)};
`

// renders props.theme.reversePalette.grayscale[0]
<Button palette="grayscale" />

// renders props.theme.palette.danger[1] (nullify reverse)
<Button palette="danger" reverse />

Returns Tones