@smiledesignsystem/globals

Global design assets, properties, and variables that are the foundation of Smile Design System.

Usage no npm install needed!

<script type="module">
  import smiledesignsystemGlobals from 'https://cdn.skypack.dev/@smiledesignsystem/globals';
</script>

README

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