Colors

Some components such as Typography have a color, bg/backgroundColor and opacity props, this functionality is provided by styled-system/color.

You can use a CSS string, the name of a palette colour or design tokens.

CSS String

<Typography color='red'>...</Typography>
<Typography color='#ff0000'>...</Typography>
<Typography color='rgba(100, 0, 0, 1)'>...</Typography>
Copy

Palette Colors

Using the name of a palette color ensures if we update the theme your components will also be updated, for this reason we advise not using a CSS string.

Tint, Shade and Opacity properties must be followed by a number.

Where there is a collision between CSS strings and the palette color (e.g. gold) the palette color takes presedence.

<Typography color='brilliantGreen'>...</Typography>
<Typography color='brilliantGreenTint20'>...</Typography>
<Typography color='brilliantGreenShade30'>...</Typography>
<Typography color='blackOpacity55'>...</Typography>
<Typography color='whiteOpacity22'>...</Typography>
Copy

Design tokens

Using design tokens ensures visual consistency across the application and means that we will always have up-to-date values, if the colors are updated by designers using design tools.

The name of the chosen design token must be always preceded by --, for example, if we want to use colorsYang100 token in our code, we have to pass --colorsYang100 as a prop. See Design Tokens documentation for more information.

<Typography color='--colorsUtilityYang100'>...</Typography>
<Typography color='--colorsReadOnly600'>...</Typography>
<Typography color='--colorsUtilityYin090'>...</Typography>
Copy