Status

| Component | Status | |--------------|-----------------------| | Button | Complete | | Card | Complete | | Divider | Complete | | Input | Single input complete | | List | Complete | | Notification | Complete | | Typography | Complete |

Installation

CDS Design Tokens is available as a npm package on npm

To install the package locally using npm:

npm install cds-tokens

Usage

SCSS

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'] })

ES6 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';

Project Structure

/ 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)

Token Structure

| 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

| Base Token | Key | |------------|--------| | Breakpoint | bp | | Color | color | | Font | font | | Grid | grid | | Radius | radius | | Size | Size | | Space | space | | Typography | type |

Attribute Type → Attribute → Attribute Variant

Component Tokens

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

Contributing

Updating/Creating New Tokens

1. Pull the latest master branch and create a new branch (TODO branch guidelines)
2. Update or add new tokens using token structure
3. Run npm run build to build tokens
4. Use - Install Local or NPM Link to test current branch tokens in your project.
5. When tokens are ready, follow Publishing to NPM section.

Versioning

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)

Publishing to NPM

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

References

• Style Dictionary Quick Start