@smiledirectclub/sds-globals NPM

SDC Design System Globals

Globals are SDC Design System's core variables, properties, and assets that apply "globally" to multiple components and implementations of our digital designs. This can include:

Color
Typographic(text) styles
Spacing(whitespace)
Fonts
Logos
Icons
etc.

Keeping these variables/properties stored as JSON (implementation agnostic) data, we are able to create these styles once, and distribute them to any and every tech stack/tool from this single source of truth.

Consuming tokens and assets in your project

Web

NPM

npm install @smiledirectclub/sds-globals

The dist/ directory contains the compiled versions of the design tokens we offer, as well as any global assets you could find useful in developing your digital product.

node_modules/@smiledirectclub/sds-globals/
- dist/
  - assets/ - logos, font files, etc.
  - tokens/
    - css/ - CSS custom properties (variables)
    - ios/ - Swift
    - scss/ - SASS variables

CDN

You can link to the tokens file on our CDN.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@smiledirectclub/sds-globals/dist/tokens/css/sds-tokens.css">

NOTE: Notice the version numbers in the URL path. When we release new versions, we will be releasing them into new directories based on their version number. To update/consume a different version, simply alter this version number to another available version.

iOS - Cocoapod

TODO: Add detailed documentation for pulling pod into your project from scratch.

This requires setting up 2-factor auth with GitHub and using your passphrase on your local machine to publish.

This is published as a Cocoapod called SmileDesignSystemGlobals to our internal podspec repo at https://github.com/CamelotVG/ios-podspecs. This pod contains Swift code.