Storybook 设计令牌插件

Storybook 设计令牌插件允许您从样式表中生成设计令牌文档。在此处阅读有关此插件动机的更多信息：https://dev.to/psqrrl/managing-design-tokens-using-storybook-5975

演示

目录

• Storybook 设计令牌插件
  • 一些特性
  • 安装
  • 用法
  • 展示器
  • 路线图

一些特性

• 自动从您注释的样式表和图标文件中生成设计令牌描述
• 解析 CSS、SCSS/SASS 和 SVG 文件
• 提供各种展示器来渲染您的设计令牌示例
• 自动检测您的 CSS 或 Sass 变量别名
• 显示与令牌值匹配的属性值，以便您可以轻松识别样式表中的硬编码值

安装

首先，使用您选择的包管理器安装该包。

npm install --save-dev storybook-design-token

或

yarn add --dev storybook-design-token

然后，在您的 .storybook 目录中创建一个名为 addons.js 的文件并导入插件

// addon.js
import 'storybook-design-token/register';

在您的 .storybook 目录中的 config.js 文件中：告诉插件要解析哪些文件。重要提示：在调用 configure 之前调用 addParameters。

// config.js
import { configure, addParameters } from '@storybook/react';

// [...]

const cssReq = require.context('!!raw-loader!../src', true, /.\.css$/);
const cssTokenFiles = cssReq.keys().map(filename => ({ filename, content: cssReq(filename).default }));

const scssReq = require.context('!!raw-loader!../src', true, /.\.scss$/);
const scssTokenFiles = scssReq.keys().map(filename => ({ filename, content: scssReq(filename).default }));

const svgIconsReq = require.context('!!raw-loader!../src', true, /.\.svg$/);
const svgIconTokenFiles = svgIconsReq.keys().map(filename => ({ filename, content: svgIconsReq(filename).default }));

addParameters({
  designToken: {
    files: { 
      css: cssTokenFiles,
      scss: scssTokenFiles,
      svgIcons: svgIconTokenFiles
    }
  }
});

// [...]

configure(loadStories, module);

确保在 !!raw-loader! 后指定正确的路径。该路径必须相对于您的配置文件位置。

用法

插件会尝试将您的令牌组织成令牌组。您可以通过在样式表中添加特定的注释块来注释令牌组。只有带注释的令牌会被插件列出。指定的展示器用于渲染您的令牌示例。有关更多信息，请参阅展示器。

CSS 示例

/**
 * @tokens Colors
 * @presenter Color
 */

:root {
  --n0: #fff; /* Token Description */
  --n100: #fbfbfb;
  --n200: #edeeef;
  --n300: #e4e5e7;
  --primary: var(--n300);
}

/**
 * @tokens Border Radius
 * @presenter BorderRadius
 */

:root {
  --border-radius-m: 4px;
  --border-radius-l: 8px;
}

SCSS 示例

/**
 * @tokens Colors
 * @presenter Color
 */

$n0: #fff; /* Token Description */
$n100: #fbfbfb;
$n200: #edeeef;
$n300: #e4e5e7;
$primary: $n300;

/**
 * @tokens Border Radius
 * @presenter BorderRadius
 */

$border-radius-m: 4px;
$border-radius-l: 8px;

SVG 示例

<?xml version="1.0" encoding="UTF-8"?>
<svg data-token-name="check" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <path d="M9.35221912,16.3536125 L19.5004166,5.34255149 C19.9029667,4.90884428 20.5808871,4.88358644 21.0145944,5.28613652 C21.4483016,5.6886866 21.4735594,6.36660707 21.0710093,6.80031428 L10.1375155,18.6574532 C9.71359736,19.1141823 8.99084087,19.1141823 8.56692275,18.6574532 L3.28613652,12.890538 C2.88358644,12.4568308 2.90884428,11.7789103 3.34255149,11.3763602 C3.77625869,10.9738101 4.45417917,10.999068 4.85672925,11.4327752 L9.35221912,16.3536125 Z" fill="currentColor"></path>
</svg>

请确保指定 data-token-name 属性。

展示器

展示器用于渲染您的设计令牌示例。以下展示器可用：

• 动画
• 边框圆角
• 边框
• 颜色
• 缓动函数
• 字体族
• 字体大小
• 字体粗细
• 行高
• 不透明度
• 阴影
• 间距
• Svg

路线图

• 自定义展示器
• 自定义解析器