narmi / design_system

⚡ Narmi Design System and UI Library
https://narmi.github.io/design_system
Other
34 stars 6 forks source link

[Tokens] add design tokens to project #272

Closed akdetrick closed 2 years ago

akdetrick commented 3 years ago

Add style-dictionary and design tokens to NDS. Design tokens provide a single point of truth for all property/value pairs in styling. These tokens will eventually be used for all NDS custom properties, utility classes, and theming.

Consuming design tokens internally is out of scope; this ticket should only add properties files and the necessary configuration to build token distributions.


Problems design tokens will solve


Requirements

Naming should be as close as possible to familiar CSS property names

--<cssProperty>-<valueStep>, e.g. --color-red or --fontSize-xl

Value steps should follow consistent sizing conventions (t-shirt sizes: xxs,xs,m,l,xl,2xl).

Wherever possible, a "default" value step should be provided, aliased to a t-shirt size.

--fontSize-default should alias to --fontSize-m (or wherever 16px falls on the scale)

CTI dictionary structure

<root>/tokens/src/
├── Color/
│   ├── theme.json      // themable colors (primary/accent)
│   ├── brand.json      // narmi brand colors
│   └── text.json       // standard and inverted context text colors
├── Border/
│   ├── radius.json     // border radii
│   ├── color.json      // border colors
│   └── size.json       // border sizes
├── Layout/
│   ├── media.json      // sizing icons and images
│   └── spacing.json    // gutter sizes
└── Font/
    ├── family.json     // all font family values
    ├── weight.json     // font weights
    ├── size.json       // font sizes
    └── lineHeight.json // standard _relative_ line heights organized by type size
akdetrick commented 2 years ago

:tada: This issue has been resolved in version 1.7.5 :tada:

The release is available on:

Your semantic-release bot :package::rocket: