带有 CSS 变量的设计令牌

使用 CSS 变量添加您的主题并在您的组件中使用它们。

根据您想使用的主题，用 CSS 变量创建组件。

分步指南

• 通过 npm 或 yarn 安装插件
• 在 .storybook/main.(js,ts) 中配置
• 在 .storybook/preview.(js,ts) 中配置您的主题

链接示例

主机	描述	链接
代码和预览	简单示例	链接
代码和预览	带有自定义 Storybook 变量面板的示例	链接

---

图片示例

要求

• Storybook@>=6.0.0

  此插件应适用于任何框架：如果您发现插件不起作用的情况，请提交一个问题。

入门

1. 安装

npm install --save-dev @outlinestudio/designtokenscss
# yarn add -D @outlinestudio/designtokenscss

2. 在 .storybook/main.(js,ts) 中注册插件

module.exports = {
  addons: ["@outlinestudio/designtokenscss"],
};

3. 在 .storybook/preview.(js,ts) 中注册插件

export const parameters = {
  designTokensCss: {
      label: 'Themes',
      persistData: true,
      themes: [
        {
          "name": "Theme One",
          "miniLogo": "",
          "tokens": {
            ## add all yours css variables here
            "--yours-primary": "#c8c615",
            "--yours-primary-text": "#faf9e8",
            "--yours-primary-container": "#b4b213",
            "--yours-primary-light": "#e9e8a1",
            "--yours-primary-dark": "#62610a",
            "--yours-primary-hover": "#969510" 
            ## add all yours css variables here
          }
        },
        {
          "name": "Theme Two",
          "miniLogo": "https://javisperez.github.io/tailwindcolorshades/img/icons/favicon-16x16.png",
          "tokens": {
            ## add all yours css variables here
            "--yours-primary": "#c8c615",
            "--yours-primary-text": "#faf9e8",
            "--yours-primary-container": "#b4b213",
            "--yours-primary-light": "#e9e8a1",
            "--yours-primary-dark": "#62610a",
            "--yours-primary-hover": "#969510"
            ## add all yours css variables here
           }
        },
      ]
    }

插件参数类型

参数	类型	备注
标签	string	选择器默认参数文本设置
persistData	boolean	设置 persistData 以在加载开始时将选定的主题保存在 localStorage 中
themes	ThemeType[]	包含主题及其 CSS 变量属性的数组

主题

参数	类型	备注
名称	string	主题名称
miniLogo	string (可选)	在选择器中显示的主题迷你 Logo
tokens	Object	声明 CSS 变量名称和值

包含主题的配置示例

配置示例

在 themes 中添加您的变量

  export const parameters = {
    designTokensCss: {
      label: "Themes",
      persistData: true,
      themes: [
        {
        "name": "Theme one",
        "tokens": {
          "font-family": "Roboto, sans-serif",
          "primary": "#fcfc30",
          "primary-text": "#00A8FF",
          "primary-container": "#fcf130",
          "primary-light": "#fcfc30",
          "primary-dark": "#FFFFFF",
          "primary-hover": "#fae128",
          "secondary": "#465eff",
          "secondary-text": "#fff",
          "secondary-container": "#2f4af8",
          "secondary-light": "#465eff",
          "secondary-dark": "#465eff",  
          "secondary-hover": "#465eff",
          "background": "#fcfc30",
          "text": "#000"
        }
      },
      {
        "name": "Theme Two",
        "miniLogo": "https://javisperez.github.io/tailwindcolorshades/img/icons/favicon-16x16.png",
        "tokens": {
          "primary": "#c8c615",
          "primary-text": "#faf9e8",
          "primary-container": "#b4b213",
          "primary-light": "#e9e8a1",
          "primary-dark": "#62610a",
          "primary-hover": "#969510",
          "secondary": "#8a59a7",
          "secondary-text": "#f3eef6",
          "secondary-container": "#7c5096",
          "secondary-light": "#d0bddc",
          "secondary-dark": "#533564",  
          "secondary-hover": "#533564",
          "background": "#fcfc30",
          "text": "#000"
        }
      },
      {
        "name": "Theme Tree",
        "miniLogo": "https://www.gclaims.com.br/assets/images/favicon/favicon-16x16.png",
        "tokens": {
          "primary": "#00a8ff",
          "primary-text": "#e6f6ff",
          "primary-container": "#007ebf",
          "primary-light": "#99dcff",
          "primary-dark": "#006599",
          "primary-hover": "#007ebf",
          "secondary": "#00c9a8",
          "secondary-text": "#e6faf6",
          "secondary-container": "#00c9a8",
          "secondary-light": "#4dd9c2",
          "secondary-dark": "#00977e",  
          "secondary-hover": "#00b597",
          "background": "#fcfc30",
          "text": "#000"
        }
      }
    ]
    }
  }

在 Storybook 面板中设置您的主题（可选）

您可以在 Storybook 中更改面板默认设置，所有自定义都可以通过 .storybook/manager-head.html 文件中的 CSS 变量实现。在 styles 标签中添加您的自定义变量及其参数。
带有 Storybook 主题自定义面板的示例

示例