Groups

Groups can be used purely to keep things neat, or also for additional structure.

For example, you may wish to create a top level group for primitives, and another for semantic colours. Groups can be created via the + toolbar button. It’s also possible to select some colors and press ⌘G.

Namespacing #

Groups can be nested as deep as you’d like, and they can also be namespaced. What’s a namespaced group? If a namespaced group is called text, then a colour alias inside could be called primary. When exported, the colour can be referenced as text.primary in Swift, or --text-primary in CSS.

Namespacing means prefixes are required to reference the colour, which also means colour names can be reused. For example text.primary and button.primary could be different colours.

Name processing #

Exporting can process color, color set, color alias, and group names. That means you can use nicely capitalized names within your Pinwheel documents, and they can also appear how you’d like within the exported code. “My Color” can become “my-color” or “myColor”, based on your export settings.