New
I18n with StorybookAutomate with Chromatic
Star74,141
View full catalog
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon Add to the catalog
designTokensCss
Addon storybook to themes using design tokens with css variables
npm install @outlinestudio/designtokenscss
Last updated 4 months ago
47
Downloads per week
Readme View on GitHub
logo


Design Tokens with variables CSS

Add your Themes using variables css and use them in your components.

create components with variables css, based on the theme you want to use.

Step by step

  • install addon npm or yarn
  • add .storybook/main.(js,ts)
  • config your themes in .storybook/preview.(js,ts)

Link example:

host Desc Links
code and preview Simple example Link
code and preview Example with custom panel storybook variables Link

Image example:

logo


Requirements

  • Storybook@>=6.0.0

    This addon should work well with any framework: If you find the case the addon not works, please open an issue.

Getting started

1. Install

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

2. Register the addon in .storybook/main.(js,ts)

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

3. Register the addon in .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
           }
        },
      ]
    }

Types addon

Parameter type obs
label string parameter text setting in select default
persistData boolean set persistData to save theme selected in localStorage load start
themes ThemeType[] Array with themes and yours properties css variable

Themes

Parameter type obs
name string Name theme
miniLogo string optional Mini logo theme show in select
tokens Object Declare name and value css variables

Exemplo config with themes

example config

Example files

in themes add yours variables.

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

Set yours themes in storybook panel (OPTIONAL)

You can change panel default in storybook, all custom accept in css variables through file .storybook/manager-head.html. adding in styles tag with yours variable custom with params.
Example with storybook theme custom panel

example:

Example optional
logo

Join the community
5,777 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI