README

adapt-design-system/tokens

Design Tokens for the ADAPT Design System

Using the tokens in your project

1. Install library

yarn add @adapt-design-system/tokens

2. Transform tokens into the data you need

Example:

// FontSizes Tokens in package
export default [
  {
    name: 'uber',
    value: 111,
    unit: 'px',
    lineHeight: 1.08,
  },
  {
    name: 'hero',
    value: 77,
    unit: 'px',
    lineHeight: 1.11,
  },
  // ...
];

import { FontSizes } from '@adapt-design-system/tokens';

// Take each font size and transform them to an object
const fontSizes = () => {
  const output = {};
  FontSizes.map(({ name, value, unit }) => (output[name] = `${value}${unit}`));
  return output;
};

// Sample Output:
const fontSizes: {
    uber: '111px',
    hero: '77px'
}

You're ready to go! Import components as you need them. Check out the docs

Developing

Install

Install dependencies (monorepo users: remember to be in the /packages/adapt-design-system-tokens folder).

yarn install

To actively develop tokens, it's best to run the docs site to see how changes in tokens affect the output.

yarn develop

The build will re-run every time you save changes to the tokens.

Publish new version

To publish a new version run yarn publish-package. If you introduce a breaking change, bump the major version (2.0.3 -> 3.0.0). If you add new (non-breaking) functionality bump the minor version (2.0.3 -> 2.1.0). Otherwise bump patch when adding new icons (2.0.3 -> 2.0.4). You will be asked for a new version.

⚠️ Important!

Don't forget to upgrade the consuming packages, in this case /packages/core, to make use of the new version. Like so: yarn upgrade @adapt-design-system/tokens@^2.0.4

Usage no npm install needed!