@tgam/design-tokens v2.0.0

TGAM Design Tokens

Hi! Welcome to the wonderful world of Design Tokens!

Notes

At the moment, we're only creating tokens for colors and text styles. This will expand to spacing, opacities, etc in the near future.

A Documentation site is coming soon.

Install

npm install @tgam/design-tokens

Token Files

• styles
  • borders.css
  • borders.scss
  • colors.css
  • colors.scss
  • measurements.css
  • measurements.scss
  • text/gmsans.css
  • text/helvetica.css
  • text/pratt.css
  • text/gmsans.scss
  • text/helvetica.scss
  • text/pratt.scss
• vectors
  • all vectors used on the site (approx 85 at the moment)

Usage Examples

CSS

Colors

@import "~@tgam/design-tokens/output/styles/colors.css";

Text Styles (classes)

@import "~@tgam/design-tokens/output/styles/text/gmsans.css";
@import "~@tgam/design-tokens/output/styles/text/helvetica.css";
@import "~@tgam/design-tokens/output/styles/text/pratt.css";

SCSS

Colors

@import "~@tgam/design-tokens/output/styles/colors.scss";

See the wiki for more information.