Nine Parsecs from Milwaukee

    @outlinestudio/designtokenscss
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.7 • Public • Published
    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

    Install

    npm i @outlinestudio/designtokenscss

    DownloadsWeekly Downloads

    75

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    67.5 kB

    Total Files

    43

    Last publish

    Collaborators

    • raulmelo