@adapt-design-system/tokens 中文文档教程

Question

adapt-design-system/tokens

ADAPT 设计系统

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

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

Developing

Install

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

yarn install

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

yarn develop

的设计令牌 每次您保存对令牌的更改时，构建都会重新运行。

Publish new version

要发布新版本运行 yarn publish-package。 如果你引入了一个破坏性的变化，提升主要版本（2.0.3 -> 3.0.0）。 如果您添加新的（非破坏性的）功能，则会增加次要版本（2.0.3 -> 2.1.0）。 否则在添加新图标时会遇到补丁 (2.0.3 -> 2.0.4)。 系统会要求您提供新版本。

⚠️ Important!

不要忘记升级使用包，在本例中为 /packages/core，以使用新版本。 像这样： 纱线升级@adapt-design-system/tokens@^2.0.4