search

mittwald / flow

A collection of packages related to Flow – the mittwald design system.
https://mittwald.github.io/flow/
MIT License
5 stars 1 forks source link

Design-Tokens :: couldn't find a complete list of available CSS variables. Some parts mention changing colors with `style={{ color: 'var(--primary--color--900)'` but it would be great to have a full list of tokens. #871

Open mfal opened 2 days ago

mfal commented 1 day ago

@gskyarts usually you should not get in touch with any CSS variables during development. Either use the React components or alternatively (if you are not using React) the class names (e.g. flow--button)

gskyarts commented 1 day ago

I am a bit confused. Your documentation actually shows exactly what I'm referring to. Under Icons "Farben" section (https://mittwald.github.io/flow/03-components/content/icon), there's a code example that uses these CSS variables.

Jan-Eimertenbrink commented 18 hours ago

I suspect that the section of the documentation is somewhat confusing. In general, an icon is always used in combination with other components and automatically adopts their colors. For example, an icon used with a heading automatically takes on the heading’s color. Therefore, manually overriding the color of an icon is usually unnecessary.

Since I understand that this can cause confusion, we will remove this section from our documentation and consider it when writing the guidelines for icons. Additionally, a section on the use of colors, as mentioned here, is planned.