Color Palette
When setting up colors for components, the palette system from fuselage must be used. The Palette system offers an easy and semantic way to implement colors using tokens.
Tokens work like fuselage components, in the way that only the component itself needs to be updated, not the whole implementation on Rocket.Chat.
The Palette system will also enable the creation of themes, as each theme can have its implementation of the palette (for example a dark theme will have the same groups and tokens, only differing in the value of the tokens).
<Box bg='status-background-info' color='status-font-on-info' />
In order to ease and minimize wrong usage of tokens, there's a shortcut that adds automatically the correct prefixes:
when using surface tokens on
bg and font tokens on color you can omit the surface- and font- prefixes (preferred way):<Box bg='neutral' color='default' />
But you can also use the long term:
<Box bg='surface-neutral' color='font-default' />
Like other components, the Palette can be imported from the Fuselage's package.
import { Palette } from '@rocket.chat/fuselage';
Then is just a simple as accessing the tokens from the groups in `Palette`
const example = Palette.GroupName['TokenName']
const SurfaceHoverColor = Palette.surface['surface-hover']
const StrokeColor = Palette.stroke['stroke-extra-light']
Now the Palette system should handle any changes to the colors in fuselage and deal with changes done by the active theme automatically.
If you are styling on a .scss file inside fuselage, you can use the tokens as shown below:
@use '/packages/fuselage/src/styles/colors.scss'; // relative path
.example {
color: colors.font(titles-labels);
background-color: colors.surface(neutral);
border: 1px solid colors.stroke(extra-light);
};
See theme() function - WIP