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 3.7.2, tokens/*.json

On this page

Navigation roles
Take them with you

Tokens are also published as typed data: @feugene/granularity-tokens gives the same list to a script rather than to an eye, and @feugene/granularity/tokens adds the per-component ones.

Token	Light	Dark	Contrast
`--gr-sidebar`--gr-sidebar	`#ffffff`	`#1e293b`
`--gr-sidebar-fg`--gr-sidebar-fg	`#0f172a`	`#f8fafc`	17.85 / 13.98against `--gr-sidebar`
`--gr-sidebar-primary`--gr-sidebar-primary	`#4f46e5`	`#6365f0`
`--gr-sidebar-primary-fg`--gr-sidebar-primary-fg	`#ffffff`	`#ffffff`	6.29 / 4.52against `--gr-sidebar-primary`
`--gr-sidebar-accent`--gr-sidebar-accent	`#f1f5f9`	`#334155`
`--gr-sidebar-accent-fg`--gr-sidebar-accent-fg	`#1e293b`	`#f1f5f9`	13.35 / 9.45against `--gr-sidebar-accent`
`--gr-sidebar-brd`--gr-sidebar-brd	`#e2e8f0`	`#334155`
`--gr-sidebar-ring`--gr-sidebar-ring	`#6366f1`	`#818cf8`

Take them with you

The same 229 tokens in three foreign formats: one file per format, one collection per mode inside it. These are the default theme; any catalog theme lives at /api/v1/themes/<theme>/tokens/<format>.json, and the list of themes with their modes at /api/v1/themes.json. 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, one collection per mode of the 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 mode. 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.