@outlinestudio/designtokenscss v1.0.12

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

Image example

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

Themes

Exemplo config with themes

example config

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: