• Version 6.4.22
  • Published
  • 119 kB
  • 12 dependencies
  • MIT license


npm i @storybook/theming
yarn add @storybook/theming
pnpm add @storybook/theming


Core Storybook Components



variable background

const background: {
app: string;
bar: string;
content: string;
gridCellSize: number;
hoverable: string;
positive: string;
negative: string;
warning: string;
critical: string;

    variable color

    const color: {
    primary: string;
    secondary: string;
    tertiary: string;
    ancillary: string;
    orange: string;
    gold: string;
    green: string;
    seafoam: string;
    purple: string;
    ultraviolet: string;
    lightest: string;
    lighter: string;
    light: string;
    mediumlight: string;
    medium: string;
    mediumdark: string;
    dark: string;
    darker: string;
    darkest: string;
    border: string;
    positive: string;
    negative: string;
    warning: string;
    critical: string;
    defaultText: string;
    inverseText: string;

      variable ignoreSsrWarning

      const ignoreSsrWarning: string;

        variable styled

        const styled: CreateStyled<Theme>;

          variable themes

          const themes: { light: ThemeVars; dark: ThemeVars; normal: ThemeVars };

            variable typography

            const typography: {
            fonts: { base: string; mono: string };
            weight: { regular: number; bold: number; black: number };
            size: {
            s1: number;
            s2: number;
            s3: number;
            m1: number;
            m2: number;
            m3: number;
            l1: number;
            l2: number;
            l3: number;
            code: number;


              function convert

              convert: (inherit?: ThemeVars) => Theme;

                function create

                create: (vars?: ThemeVars, rest?: Rest) => ThemeVars;

                  function createGlobal

                  createGlobal: ({
                  }: {
                  color: Color;
                  background: Background;
                  typography: Typography;
                  }) => Return;

                    function createReset

                    createReset: ({ typography }: { typography: Typography }) => Return;

                      function darken

                      darken: (color: string) => string;

                        function ensure

                        ensure: (input: ThemeVars) => Theme;

                          function lighten

                          lighten: (color: string) => string;


                            interface Brand

                            interface Brand {}

                              property image

                              image: string | null | undefined;

                                property title

                                title: string | undefined;

                                  property url

                                  url: string | null | undefined;

                                    interface Theme

                                    interface Theme {}

                                      property animation

                                      animation: Animation;

                                        property appBorderColor

                                        appBorderColor: string;

                                          property appBorderRadius

                                          appBorderRadius: number;

                                            property background

                                            background: Background;

                                              property barBg

                                              barBg: string;

                                                property barSelectedColor

                                                barSelectedColor: string;

                                                  property barTextColor

                                                  barTextColor: string;

                                                    property brand

                                                    brand: Brand;

                                                      property code

                                                      code: {
                                                      [key: string]: string | object;

                                                        property color

                                                        color: Color;

                                                          property easing

                                                          easing: Easing;

                                                            property input

                                                            input: {
                                                            border: string;
                                                            background: string;
                                                            color: string;
                                                            borderRadius: number;

                                                              property layoutMargin

                                                              layoutMargin: number;

                                                                property typography

                                                                typography: Typography;

                                                                  index signature

                                                                  [key: string]: any;

                                                                    interface ThemeVars

                                                                    interface ThemeVars {}

                                                                      property appBg

                                                                      appBg?: string;

                                                                        property appBorderColor

                                                                        appBorderColor?: string;

                                                                          property appBorderRadius

                                                                          appBorderRadius?: number;

                                                                            property appContentBg

                                                                            appContentBg?: string;

                                                                              property barBg

                                                                              barBg?: string;

                                                                                property barSelectedColor

                                                                                barSelectedColor?: string;

                                                                                  property barTextColor

                                                                                  barTextColor?: string;

                                                                                    property base

                                                                                    base: 'light' | 'dark';

                                                                                      property brandImage

                                                                                      brandImage?: string;

                                                                                        property brandTitle

                                                                                        brandTitle?: string;

                                                                                          property brandUrl

                                                                                          brandUrl?: string;

                                                                                            property colorPrimary

                                                                                            colorPrimary?: string;

                                                                                              property colorSecondary

                                                                                              colorSecondary?: string;

                                                                                                property fontBase

                                                                                                fontBase?: string;

                                                                                                  property fontCode

                                                                                                  fontCode?: string;

                                                                                                    property gridCellSize

                                                                                                    gridCellSize?: number;

                                                                                                      property inputBg

                                                                                                      inputBg?: string;

                                                                                                        property inputBorder

                                                                                                        inputBorder?: string;

                                                                                                          property inputBorderRadius

                                                                                                          inputBorderRadius?: number;

                                                                                                            property inputTextColor

                                                                                                            inputTextColor?: string;

                                                                                                              property textColor

                                                                                                              textColor?: string;

                                                                                                                property textInverseColor

                                                                                                                textInverseColor?: string;

                                                                                                                  property textMutedColor

                                                                                                                  textMutedColor?: string;

                                                                                                                    Type Aliases

                                                                                                                    type Animation

                                                                                                                    type Animation = typeof animation;

                                                                                                                      type Background

                                                                                                                      type Background = typeof background;

                                                                                                                        type Color

                                                                                                                        type Color = typeof color;

                                                                                                                          type Easing

                                                                                                                          type Easing = typeof easing;

                                                                                                                            type TextSize

                                                                                                                            type TextSize = number | string;

                                                                                                                              type Typography

                                                                                                                              type Typography = typeof typography;

                                                                                                                                Package Files (8)

                                                                                                                                Dependencies (12)

                                                                                                                                Dev Dependencies (0)

                                                                                                                                No dev dependencies.

                                                                                                                                Peer Dependencies (2)


                                                                                                                                To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                                You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@storybook/theming.

                                                                                                                                • Markdown
                                                                                                                                • HTML
                                                                                                                                  <a href="https://www.jsdocs.io/package/@storybook/theming"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>