Cds-tokens NPM

Status

CDS Design Tokens is available as a npm package on npm

To install the package locally using npm:

npm install cds-tokens

Webpack

@import '~/cds-tokens/dist/scss/_cds-variables.scss';

Gulp.js

@import '~/cds-tokens/dist/scss/_cds-variables.scss';

In gulpfile.js

.pipe(sass({ includePaths: ['node_modules'] })

Importing all modules as single object

import * as tokens from 'cds-tokens/dist/js/cds-variables';

To use background: ${tokens.ColorBlue600};

Importing modules as individual objects import {ColorBlue600} from 'cds-tokens/dist/js/cds-variables';

/ contains style-dictionary build script and configs

/properties contains the design tokens input files (in JSON format)

/properties/base contains component agnostic tokens

/properties/components contains component tokens

dist/ contains the generated output files (in different formats)

Key	Example Values
Attribute Type	color, font, space, size
Attribute	icon, line-height, icon-svg, inset
Attribute Variant	gray-500, md, bold, success
Component	button, notification, typography, modal
Component Variant	alert, primary, t1-desktop, general
Component State	default, hover, active, focus

Base Tokens

Attribute Type → Attribute → Attribute Variant

Component Tokens

Component → Attribute Type → Component Variant → Component State → Attribute

This project's versioning specification is based off of Semantic Versioning (also known as semver)

Patch version (0.0.x) -> A patch version will be automatically released when tokens contain backwards-compatible changes. This means that for a specific design-system some values are corrected and updated (ie: a color get updated)
Minor version (0.x.0) -> A minor version will be automatically released when a new functionality is added in a backwards-compatible manner. This means that for a specific design-system you are adding new decisions (ie: a new color is added)
Major version (x.0.0) -> A major version will be automatically released when a breaking changes is identified. This means that for a specific design token some values where removed (ie: a color was removed)

Before you start make sure the project's CHANGELOG.MD is up to date. (TODO)
Update the package version number in /package.json (use Semantic Versioning to determine what the new version number should be).
Run npm install to update the package-lock.json file.
Submit a pull request with your changes (or commit directly to master if you have permission). Once the changes have been merged to master.
Run npm run test. If tests pass, continue to next step (TODO, can combine with build step).
Run npm run build to run the build script (Style Dictionary)
If the build is successful publish to NPM using npm publish.