使用变量 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
           }
        },
      ]
    }

插件类型

参数	类型	备注
标签	字符串	在选择默认值中设置参数文本
persistData	布尔值	设置 persistData 以在 localStorage 中保存选定的主题，加载开始时使用
主题	ThemeType[]	包含主题及其 CSS 变量属性的数组

主题

参数	类型	备注
名称	字符串	主题名称
miniLogo	字符串（可选）	在选择中显示的主题迷你徽标
令牌	对象	声明名称和值 CSS 变量

包含主题的配置示例

配置示例

在主题中添加您的变量

  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 变量接受。在样式标签中添加您的自定义变量和参数。
使用 Storybook 主题自定义面板的示例

示例