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.

[mfal]

No description provided.

[mfal]

@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]

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]

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.

[mfal]

Since we have updated the Icons page and introduced a new section about colors in general (including a list of color design tokens), this issue is completed for now.