使用 CSS 變數的設計令牌

使用 CSS 變數新增您的主題，並將它們用於您的元件。

使用基於您想要使用的主題的 CSS 變數建立元件。

逐步說明

• 安裝外掛 npm 或 yarn
• 新增 .storybook/main.(js,ts)
• 在 .storybook/preview.(js,ts) 中設定您的主題

連結範例

主機	說明	連結
程式碼和預覽	簡單範例	連結
程式碼和預覽	具有自訂面板 Storybook 變數的範例	連結

---

圖片範例

需求

• Storybook@>=6.0.0

  此外掛應可與任何框架良好運作：如果您發現外掛無法運作的情況，請開啟 issue。

開始使用

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
           }
        },
      ]
    }

外掛類型

參數	類型	obs
標籤	字串	在選取預設值中設定參數文字
persistData	布林值	設定 persistData 以儲存 localStorage 中選取的主題載入開始
themes	ThemeType[]	包含主題及其 CSS 變數屬性的陣列

主題

參數	類型	obs
名稱	字串	主題名稱
miniLogo	字串（選填）	在選取項目中顯示的迷你標誌主題
tokens	物件	宣告名稱和數值 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 變數。在 styles 標籤中新增具有參數的自訂變數。
具有 Storybook 主題自訂面板的範例

範例