[helpers]: Palettes

[alizedebray]

Description

Classes to allow user to set a color set on any HTML section.

Design

There is no design for the helpers.

Token proposal

• post.palette.brand.fg
• post.palette.brand.bg
• post.palette.brand.bg-scheme
• post.palette.accent.fg
• post.palette.accent.bg
• post.palette.accent.bg-scheme
• post.palette.default.fg
• post.palette.default.bg
• post.palette.default.bg-scheme
• post.palette.alternate.fg
• post.palette.alternate.bg
• post.palette.alternate.bg-scheme

Tasks

### 💻 Tasks
- [x] HTML/CSS implementation
- [x] Documentation in Storybook
- [x] Visual regression tests

[gfellerph]

Already in Design (called Surface), tokens are easy to add.

[oliverschuerch]

Depends on #3557

[gfellerph]

Does a specific surface also hold information if it's on a light or dark background? I think this needs some more discussion with Design and a better strategy on how we want to implement it.

[alizedebray]

@Vandapanda can you please rename "palette" to "palettes" to align with other sets and also add tokens for all theme/schemes (post-light, post-dark, cargo-light, cargo-dark)? Even if the colors are not correct for now, otherwise I get missing token errors. Thanks!

PS: the token names also still contain "helper" which is probably not what we want:

[Vandapanda]

@alizedebray Changed the namings accordingly and will get pushed in a few hours. For the 2nd request I'm kind of missing some context. As it is right now the colors automatically change based on what canvas is used as they are rooted through scheme and theme. Do you need them hardcoded?

[alizedebray]

@Vandapanda Currently we have this tokens:

And we would need to have this:

[alizedebray]

Latest state, some tokens are still missing for Cargo: