A design tokens is a definition of a design-related variable, such as one that affects color, typography, or spacing. Design tokens must be shareable and fairly platform agnostic. Atlas's design tokens are written in Scss (buzzword: source of truth!), and though a build process, translated and published into JSON so they can be more easily shared by solutions that do not use Scss.
Firstly, in order to access these tokens, you must have installed atlas-css in your project. See installation steps. Once this is complete, you'll need to decide whether you want to reference them in Scss or JSON.
Reference our tokens in Scss via the following examples, where ./ is the path to your node_modules folder.
// Import by referencing node_modules
@import './node_modules/@microsoft/atlas-css/src/tokens/index.scss';
// OR if using a bundler like Parcel you may just reference the package directly
@import '@microsoft/atlas-css/src/tokens/index.scss';In NodeJs, referencing node_modules will also allow you to access the token JSON, which lives at /dist/tokens.json.
You can also access the TypeScript typings in the same directory. Note the JSDoc comment in the example below.
/**
* Atlas Design Token Types
* @type {import('@microsoft/atlas-css/dist/tokens').AtlasTokens}
*/
const atlas = require('@microsoft/atlas-css/dist/tokens.json');
// Access the tokens!
const lightTheme = atlas.themes.tokens.$themes.light;