Color Variables Style Guide Generator

About this plugin

This plugin enables you to generate a color style guide based on your local variables.

Tailored for teams following the Tailwind Design system and its naming convention (e.g., "Blue/500"), the generator displays styles in sections according to the defined groups in the variables panel, with subgroups if applicable.

For each color, a swatch is generated. If the collection includes modes, these will be displayed alongside the color swatches, showing the hex code or referenced variable for each mode. The generator traces references to display the hex code of the original variable. However, if a referenced variable includes modes, it will simply display the variable name, as determining the hex code in such cases is not feasible.

Enjoy and looking forward to your feedback.