Storybook 設計令牌擴充套件

Storybook Design Token 擴充套件允許您從樣式表生成設計令牌文件。在這裡閱讀更多關於此擴充套件的動機：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! 後面指定正確的路徑。路徑必須相對於您的 config 檔案位置。

用法

外掛程式嘗試將您的令牌整理成令牌組。您可以透過將特定註解區塊新增至您的樣式表來註解令牌組。只有註解的令牌才會由外掛程式列出。指定的呈現器用於呈現您的令牌範例。有關更多資訊，請參閱呈現器。

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

路線圖

• 自訂呈現器
• 自訂解析器