@smiledesignsystem/globals v0.0.9

Smile Design System Globals

Globals are Smile 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/smile-design-system-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/smile-design-system-globals/
  • dist/
    • assets/ - logos, font files, etc.
    • tokens/
      • css/ - CSS custom properties (variables)
      • ios/ - Swift
      • scss/ - SASS variables

iOS - Cocoapod

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

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.

Git

You can take a look at the GitHub repo here:

https://github.com/CamelotVG/sdc-smile-design-system-globals