带有 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 主题自定义面板的示例
示例