Colors

Thanks to Stitches, using a theme color is as easy as passing that as a string to a color prop. Whether that's color, background-color, border-color etc... you can pass the name of each color (listed below) and it will replace that with a css variable for you.

import { Text } from '@streamelements/frontend-ui';

<Text.Body css={{ color: '$brandPrimaryMain' }}>
  I'm using the brand primary main color
</Text.Body>;

when used will render as

I'm using the brand primary main color

Available colors

Brand colors

100%75%50%25%

$brandPrimaryMain

$brandPrimary75

$brandPrimary50

$brandPrimary25

Text colors

87%70%50%30%

$textPrimaryMain

$textPrimary70

$textPrimary50

$textPrimary30

100%

$textLink

100%

$textSuccess

100%

$textError

100%

$textAttention

Ui colors

100%75%50%25%

$uiPrimaryMain

$uiPrimary75

$uiPrimary50

$uiPrimary25

100%

$uiSecondary

100%

$uiTertiary

100%

$uiQuaternary

100%75%50%25%

$uiSuccessMain

$uiSuccess75

$uiSuccess50

$uiSuccess25

100%75%50%25%

$uiErrorMain

$uiError75

$uiError50

$uiError25

100%75%50%25%

$uiAttentionMain

$uiAttention75

$uiAttention50

$uiAttention25

100%75%50%25%

$uiDisabledMain

$uiDisabled75

$uiDisabled50

$uiDisabled25

Dark mode

Brand colors

100%75%50%25%

$brandPrimaryMain

$brandPrimary75

$brandPrimary50

$brandPrimary25

Text colors

87%70%50%30%

$textPrimaryMain

$textPrimary70

$textPrimary50

$textPrimary30

100%

$textLink

100%

$textSuccess

100%

$textError

100%

$textAttention

Ui colors

100%75%50%25%

$uiPrimaryMain

$uiPrimary75

$uiPrimary50

$uiPrimary25

100%

$uiSecondary

100%

$uiTertiary

100%

$uiQuaternary

100%75%50%25%

$uiSuccessMain

$uiSuccess75

$uiSuccess50

$uiSuccess25

100%75%50%25%

$uiErrorMain

$uiError75

$uiError50

$uiError25

100%75%50%25%

$uiAttentionMain

$uiAttention75

$uiAttention50

$uiAttention25

100%75%50%25%

$uiDisabledMain

$uiDisabled75

$uiDisabled50

$uiDisabled25

"Always" text colors

In addition to the colors above, "always" colors are also available:

• textAlwaysDark [Main | 75 | 50 | 30]
• textAlwaysLight [Main | 75 | 50 | 30]

Example

Always dark text

import { Text } from '@streamelements/frontend-ui';
...
<Text.Body css={{ color: '$textAlwaysDarkMain' }}>
  Always dark text
</Text.Body>

Always light text

import { Text } from '@streamelements/frontend-ui';
...
<Text.Body css={{ color: '$textAlwaysLightMain' }}>
  Always light text
</Text.Body>