Tokens

  • The system
  • tokens: 8

The full reference: every token the package publishes, grouped exactly as it is grouped in the source. Grouping by our own taste would have made a prettier page and a useless one — you would not find a token by the name you saw in the code.

Source: @feugene/granularity 1.1.1, tokens/*.json

On this page
  • Tokens are also published as typed data: @feugene/granularity/tokens gives the same list to a script rather than to an eye.

Take them with you

The same 216 tokens in three foreign formats, one file each and one collection per theme. The files are generated from the package on every build — no second list of values exists.

  • Style Dictionarythe classic shape: `{ category: { name: { value } } }`. Every version reads it, including the ones sitting in other people’s pipelines for years.
  • W3C Design Tokensthe W3C format: `$value`, `$type`, two collections by theme. Figma variable importers read this one.
  • Tokens Studiothe plugin’s own sets: `$themes`, `$metadata.tokenSetOrder`, a type on every token.

CSS references are resolved: `var(--gr-danger)` means nothing outside CSS, so the files carry the value of their own theme. Shadows carry no type on purpose — in these formats a shadow is a structured value and here it is a CSS string, and declaring a structure that is not in the file makes an importer reject the whole set.