@netlify/netlify-design-tokens

Netlify Design Tokens

Repo contains Netlify's design tokens for sharing across products and repos. These tokens are co-owned by Netlify's Engineering and Marketing teams.

Install

Clone this repository, then run:

npm install

Build

Changes should be made to relevant files in the tokens folder.

Once tokens have been updated, you need to regenerate the CSS output (which lives in the dist/css folder).

npm run build

We use Style Dictionary to generate the output.

Releasing

New versions of the package are automatically published to NPM via the release-please GitHub workflow:

• Conventional commits are enforced via @commitlint/cli
• A new release PR is generated for an engineer to review
• When the release PR is merged, release-please does the following:
  • Updates CHANGELOG with the contents of the commits
  • Bumps the version of the package based on the contents of the commits
  • Tags the commit with the version number
  • Creates a GitHub Release based on the tag
  • Publishes the new version to NPM

Usage

Install the package in the project of your choice:

npm install @netlify/netlify-design-tokens

From there, you may import any of the dist files into your codebase for reuse as desired:

CSS

@import '@netlify/netlify-design-tokens/dist/css/colors';

:root {
  --colorBlack: var(--color-black-default);
}

SCSS

@import '@netlify/netlify-design-tokens/dist/scss/colors';


$black: $color-black-default;

Javascript

import tokens from '@netlify/netlify-design-tokens';

const black = tokens.color.black.default;

Consumers

• www.netlify.com - Coming soon
• app.netlify.com
• docs.netlify.com
• netlify-sauce