@grantcodes/style-dictionary

This is my personal style dictionary that I use for various personal projects.

Naming & structure

It follows Brad Frost's recommended token structure.

Priciples:

• Clarity over cleverness - keep the names simple and understandable
• Legibility over succinctiness - long but readable variables > short hard to understand variables
• Consistency is key
• Use existing conventions
• Be environment agnostic - don't name things specifically for the web or mobile

Tier 1 tokens

| Namespace | Category | Property | Variant / Scale | CSS Variable |

| g | color | red | 100 | --g-color-red-100 | | g | typography | | | --g- | | g | spacing | | | --g- | | g | border | | | --g- | | g | shadow | | | --g- | | g | animation | | | --g- | | g | breakpoint | | | --g- | | g | z-index | | | --g- |

Usage

@import "@grantcodes/style-dictionary";