• Version 6.5.12
  • Published
  • 1.52 MB
  • 4 dependencies
  • MIT license


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


Core Storybook Components





Type Aliases



variable animation

const animation: {
readonly rotate360: Keyframes;
readonly glow: Keyframes;
readonly float: Keyframes;
readonly jiggle: Keyframes;
readonly inlineGlow: SerializedStyles;
readonly hoverable: SerializedStyles;

    variable background

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

      variable CacheProvider

      const CacheProvider: Provider<EmotionCache>;

        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 easing

          const easing: { rubber: string };

            variable ignoreSsrWarning

            const ignoreSsrWarning: string;

              variable jsx

              const jsx: any;

                variable styled

                const styled: CreateStyled<Theme>;

                  variable ThemeProvider

                  const ThemeProvider: ThemeProvider;

                    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 ClassNames

                        ClassNames: (props: ClassNamesProps) => ReactElement;
                        • JSX generic are supported only after TS@2.9

                        function convert

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

                          function create

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

                            function createCache

                            createCache: (options: Options) => EmotionCache;

                              function createGlobal

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

                                function createReset

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

                                  function css

                                  css: {
                                  template: TemplateStringsArray,
                                  ...args: Array<CSSInterpolation>
                                  ): SerializedStyles;
                                  (...args: CSSInterpolation[]): SerializedStyles;

                                    function darken

                                    darken: (color: string) => string;

                                      function ensure

                                      ensure: (input: ThemeVars) => Theme;

                                        function Global

                                        Global: (props: {
                                        styles: emotionReact.Interpolation<Theme>;
                                        }) => React.ReactElement;

                                          function isPropValid

                                          isPropValid: (string: PropertyKey) => boolean;

                                            function keyframes

                                            keyframes: {
                                            (template: TemplateStringsArray, ...args: Array<CSSInterpolation>): Keyframes;
                                            (...args: CSSInterpolation[]): Keyframes;

                                              function lighten

                                              lighten: (color: string) => string;

                                                function useTheme

                                                useTheme: <TTheme = Theme>() => TTheme;

                                                  function withTheme

                                                  withTheme: <C extends any>(component: C) => any;


                                                    interface BaseCreateStyled

                                                    interface BaseCreateStyled<Theme extends object = any> {}

                                                      call signature

                                                      <Tag extends React.ComponentType<any>, ExtraProps = {}>(
                                                      tag: Tag,
                                                      options?: StyledOptions
                                                      ): CreateStyledComponentExtrinsic<Tag, ExtraProps, Theme>;

                                                        call signature

                                                        <Tag extends keyof JSXInEl, ExtraProps = {}>(
                                                        tag: Tag,
                                                        options?: StyledOptions
                                                        ): CreateStyledComponentIntrinsic<Tag, ExtraProps, Theme>;

                                                          interface Brand

                                                          interface Brand {}

                                                            property image

                                                            image: string | null | undefined;

                                                              property target

                                                              target: string | null | undefined;

                                                                property title

                                                                title: string | undefined;

                                                                  property url

                                                                  url: string | null | undefined;

                                                                    interface ComponentSelector

                                                                    interface ComponentSelector {}

                                                                      interface CreateStyled

                                                                      interface CreateStyled<Theme extends object = any>
                                                                      extends BaseCreateStyled<Theme>,
                                                                      StyledTags<Theme> {}

                                                                        interface CreateStyledComponentBaseThemed

                                                                        interface CreateStyledComponentBaseThemed<
                                                                        StyledInstanceTheme extends object
                                                                        > {}

                                                                          call signature

                                                                          StyleProps extends DistributiveOmit<
                                                                          Overwrapped<InnerProps, StyleProps>,
                                                                          > = DistributiveOmit<InnerProps & ExtraProps, ReactClassPropKeys>
                                                                          ...styles: Array<Interpolation<WithTheme<StyleProps, StyledInstanceTheme>>>
                                                                          ): StyledComponent<InnerProps, StyleProps, StyledInstanceTheme>;

                                                                            call signature

                                                                            StyleProps extends DistributiveOmit<
                                                                            Overwrapped<InnerProps, StyleProps>,
                                                                            > = DistributiveOmit<InnerProps & ExtraProps, ReactClassPropKeys>
                                                                            template: TemplateStringsArray,
                                                                            ...styles: Array<Interpolation<WithTheme<StyleProps, StyledInstanceTheme>>>
                                                                            ): StyledComponent<InnerProps, StyleProps, StyledInstanceTheme>;

                                                                              interface CreateStyledComponentBaseThemeless

                                                                              interface CreateStyledComponentBaseThemeless<InnerProps, ExtraProps> {}

                                                                                call signature

                                                                                StyleProps extends DistributiveOmit<
                                                                                Overwrapped<InnerProps, StyleProps>,
                                                                                > = DistributiveOmit<InnerProps & ExtraProps, ReactClassPropKeys>,
                                                                                Theme extends object = object
                                                                                ...styles: Array<Interpolation<WithTheme<StyleProps, Theme>>>
                                                                                ): StyledComponent<InnerProps, StyleProps, Theme>;

                                                                                  call signature

                                                                                  StyleProps extends DistributiveOmit<
                                                                                  Overwrapped<InnerProps, StyleProps>,
                                                                                  > = DistributiveOmit<InnerProps & ExtraProps, ReactClassPropKeys>,
                                                                                  Theme extends object = object
                                                                                  template: TemplateStringsArray,
                                                                                  ...styles: Array<Interpolation<WithTheme<StyleProps, Theme>>>
                                                                                  ): StyledComponent<InnerProps, StyleProps, Theme>;

                                                                                    interface CSSObject

                                                                                    interface CSSObject
                                                                                    extends CSSPropertiesWithMultiValues,
                                                                                    CSSOthersObject {}

                                                                                      interface Rest

                                                                                      interface Rest {}

                                                                                        index signature

                                                                                        [key: string]: any;

                                                                                          interface Return

                                                                                          interface Return {}

                                                                                            index signature

                                                                                            [key: string]: {
                                                                                            [key: string]: Value;

                                                                                              interface StyledComponent

                                                                                              interface StyledComponent<
                                                                                              Theme extends object
                                                                                              > extends React.FC<
                                                                                              InnerProps &
                                                                                              DistributiveOmit<StyleProps, 'theme'> & {
                                                                                              theme?: Theme;
                                                                                              ComponentSelector {}

                                                                                                method withComponent

                                                                                                withComponent: {
                                                                                                <NewTag extends string | number | symbol>(tag: NewTag): StyledComponent<
                                                                                                <Tag extends React.ComponentType<any>>(tag: Tag): StyledComponent<
                                                                                                JSX.LibraryManagedAttributes<C, React.ComponentPropsWithRef<C>>,
                                                                                                • this method is type-unsafe

                                                                                                interface StyledOptions

                                                                                                interface StyledOptions {}

                                                                                                  property label

                                                                                                  label?: string;

                                                                                                    property target

                                                                                                    target?: string;

                                                                                                      method shouldForwardProp

                                                                                                      shouldForwardProp: (propName: string) => boolean;

                                                                                                        interface StyledTags

                                                                                                        interface StyledTags<Theme extends object> {}

                                                                                                          property a

                                                                                                          a: CreateStyledComponentIntrinsic<'a', {}, Theme>;
                                                                                                          • HTML tags

                                                                                                          property abbr

                                                                                                          abbr: CreateStyledComponentIntrinsic<'abbr', {}, Theme>;

                                                                                                            property address

                                                                                                            address: CreateStyledComponentIntrinsic<'address', {}, Theme>;

                                                                                                              property area

                                                                                                              area: CreateStyledComponentIntrinsic<'area', {}, Theme>;

                                                                                                                property article

                                                                                                                article: CreateStyledComponentIntrinsic<'article', {}, Theme>;

                                                                                                                  property aside

                                                                                                                  aside: CreateStyledComponentIntrinsic<'aside', {}, Theme>;

                                                                                                                    property audio

                                                                                                                    audio: CreateStyledComponentIntrinsic<'audio', {}, Theme>;

                                                                                                                      property b

                                                                                                                      b: CreateStyledComponentIntrinsic<'b', {}, Theme>;

                                                                                                                        property base

                                                                                                                        base: CreateStyledComponentIntrinsic<'base', {}, Theme>;

                                                                                                                          property bdi

                                                                                                                          bdi: CreateStyledComponentIntrinsic<'bdi', {}, Theme>;

                                                                                                                            property bdo

                                                                                                                            bdo: CreateStyledComponentIntrinsic<'bdo', {}, Theme>;

                                                                                                                              property big

                                                                                                                              big: CreateStyledComponentIntrinsic<'big', {}, Theme>;

                                                                                                                                property blockquote

                                                                                                                                blockquote: CreateStyledComponentIntrinsic<'blockquote', {}, Theme>;

                                                                                                                                  property body

                                                                                                                                  body: CreateStyledComponentIntrinsic<'body', {}, Theme>;

                                                                                                                                    property br

                                                                                                                                    br: CreateStyledComponentIntrinsic<'br', {}, Theme>;

                                                                                                                                      property button

                                                                                                                                      button: CreateStyledComponentIntrinsic<'button', {}, Theme>;

                                                                                                                                        property canvas

                                                                                                                                        canvas: CreateStyledComponentIntrinsic<'canvas', {}, Theme>;

                                                                                                                                          property caption

                                                                                                                                          caption: CreateStyledComponentIntrinsic<'caption', {}, Theme>;

                                                                                                                                            property circle

                                                                                                                                            circle: CreateStyledComponentIntrinsic<'circle', {}, Theme>;
                                                                                                                                            • SVG tags

                                                                                                                                            property cite

                                                                                                                                            cite: CreateStyledComponentIntrinsic<'cite', {}, Theme>;

                                                                                                                                              property clipPath

                                                                                                                                              clipPath: CreateStyledComponentIntrinsic<'clipPath', {}, Theme>;

                                                                                                                                                property code

                                                                                                                                                code: CreateStyledComponentIntrinsic<'code', {}, Theme>;

                                                                                                                                                  property col

                                                                                                                                                  col: CreateStyledComponentIntrinsic<'col', {}, Theme>;

                                                                                                                                                    property colgroup

                                                                                                                                                    colgroup: CreateStyledComponentIntrinsic<'colgroup', {}, Theme>;

                                                                                                                                                      property data

                                                                                                                                                      data: CreateStyledComponentIntrinsic<'data', {}, Theme>;

                                                                                                                                                        property datalist

                                                                                                                                                        datalist: CreateStyledComponentIntrinsic<'datalist', {}, Theme>;

                                                                                                                                                          property dd

                                                                                                                                                          dd: CreateStyledComponentIntrinsic<'dd', {}, Theme>;

                                                                                                                                                            property defs

                                                                                                                                                            defs: CreateStyledComponentIntrinsic<'defs', {}, Theme>;

                                                                                                                                                              property del

                                                                                                                                                              del: CreateStyledComponentIntrinsic<'del', {}, Theme>;

                                                                                                                                                                property details

                                                                                                                                                                details: CreateStyledComponentIntrinsic<'details', {}, Theme>;

                                                                                                                                                                  property dfn

                                                                                                                                                                  dfn: CreateStyledComponentIntrinsic<'dfn', {}, Theme>;

                                                                                                                                                                    property dialog

                                                                                                                                                                    dialog: CreateStyledComponentIntrinsic<'dialog', {}, Theme>;

                                                                                                                                                                      property div

                                                                                                                                                                      div: CreateStyledComponentIntrinsic<'div', {}, Theme>;

                                                                                                                                                                        property dl

                                                                                                                                                                        dl: CreateStyledComponentIntrinsic<'dl', {}, Theme>;

                                                                                                                                                                          property dt

                                                                                                                                                                          dt: CreateStyledComponentIntrinsic<'dt', {}, Theme>;

                                                                                                                                                                            property ellipse

                                                                                                                                                                            ellipse: CreateStyledComponentIntrinsic<'ellipse', {}, Theme>;

                                                                                                                                                                              property em

                                                                                                                                                                              em: CreateStyledComponentIntrinsic<'em', {}, Theme>;

                                                                                                                                                                                property embed

                                                                                                                                                                                embed: CreateStyledComponentIntrinsic<'embed', {}, Theme>;

                                                                                                                                                                                  property fieldset

                                                                                                                                                                                  fieldset: CreateStyledComponentIntrinsic<'fieldset', {}, Theme>;

                                                                                                                                                                                    property figcaption

                                                                                                                                                                                    figcaption: CreateStyledComponentIntrinsic<'figcaption', {}, Theme>;

                                                                                                                                                                                      property figure

                                                                                                                                                                                      figure: CreateStyledComponentIntrinsic<'figure', {}, Theme>;

                                                                                                                                                                                        property footer

                                                                                                                                                                                        footer: CreateStyledComponentIntrinsic<'footer', {}, Theme>;

                                                                                                                                                                                          property foreignObject

                                                                                                                                                                                          foreignObject: CreateStyledComponentIntrinsic<'foreignObject', {}, Theme>;

                                                                                                                                                                                            property form

                                                                                                                                                                                            form: CreateStyledComponentIntrinsic<'form', {}, Theme>;

                                                                                                                                                                                              property g

                                                                                                                                                                                              g: CreateStyledComponentIntrinsic<'g', {}, Theme>;

                                                                                                                                                                                                property h1

                                                                                                                                                                                                h1: CreateStyledComponentIntrinsic<'h1', {}, Theme>;

                                                                                                                                                                                                  property h2

                                                                                                                                                                                                  h2: CreateStyledComponentIntrinsic<'h2', {}, Theme>;

                                                                                                                                                                                                    property h3

                                                                                                                                                                                                    h3: CreateStyledComponentIntrinsic<'h3', {}, Theme>;

                                                                                                                                                                                                      property h4

                                                                                                                                                                                                      h4: CreateStyledComponentIntrinsic<'h4', {}, Theme>;

                                                                                                                                                                                                        property h5

                                                                                                                                                                                                        h5: CreateStyledComponentIntrinsic<'h5', {}, Theme>;

                                                                                                                                                                                                          property h6

                                                                                                                                                                                                          h6: CreateStyledComponentIntrinsic<'h6', {}, Theme>;

                                                                                                                                                                                                            property head

                                                                                                                                                                                                            head: CreateStyledComponentIntrinsic<'head', {}, Theme>;

                                                                                                                                                                                                              property header

                                                                                                                                                                                                              header: CreateStyledComponentIntrinsic<'header', {}, Theme>;

                                                                                                                                                                                                                property hgroup

                                                                                                                                                                                                                hgroup: CreateStyledComponentIntrinsic<'hgroup', {}, Theme>;

                                                                                                                                                                                                                  property hr

                                                                                                                                                                                                                  hr: CreateStyledComponentIntrinsic<'hr', {}, Theme>;

                                                                                                                                                                                                                    property html

                                                                                                                                                                                                                    html: CreateStyledComponentIntrinsic<'html', {}, Theme>;

                                                                                                                                                                                                                      property i

                                                                                                                                                                                                                      i: CreateStyledComponentIntrinsic<'i', {}, Theme>;

                                                                                                                                                                                                                        property iframe

                                                                                                                                                                                                                        iframe: CreateStyledComponentIntrinsic<'iframe', {}, Theme>;

                                                                                                                                                                                                                          property image

                                                                                                                                                                                                                          image: CreateStyledComponentIntrinsic<'image', {}, Theme>;

                                                                                                                                                                                                                            property img

                                                                                                                                                                                                                            img: CreateStyledComponentIntrinsic<'img', {}, Theme>;

                                                                                                                                                                                                                              property input

                                                                                                                                                                                                                              input: CreateStyledComponentIntrinsic<'input', {}, Theme>;

                                                                                                                                                                                                                                property ins

                                                                                                                                                                                                                                ins: CreateStyledComponentIntrinsic<'ins', {}, Theme>;

                                                                                                                                                                                                                                  property kbd

                                                                                                                                                                                                                                  kbd: CreateStyledComponentIntrinsic<'kbd', {}, Theme>;

                                                                                                                                                                                                                                    property keygen

                                                                                                                                                                                                                                    keygen: CreateStyledComponentIntrinsic<'keygen', {}, Theme>;

                                                                                                                                                                                                                                      property label

                                                                                                                                                                                                                                      label: CreateStyledComponentIntrinsic<'label', {}, Theme>;

                                                                                                                                                                                                                                        property legend

                                                                                                                                                                                                                                        legend: CreateStyledComponentIntrinsic<'legend', {}, Theme>;

                                                                                                                                                                                                                                          property li

                                                                                                                                                                                                                                          li: CreateStyledComponentIntrinsic<'li', {}, Theme>;

                                                                                                                                                                                                                                            property line

                                                                                                                                                                                                                                            line: CreateStyledComponentIntrinsic<'line', {}, Theme>;

                                                                                                                                                                                                                                              property linearGradient

                                                                                                                                                                                                                                              linearGradient: CreateStyledComponentIntrinsic<'linearGradient', {}, Theme>;
                                                                                                                                                                                                                                                link: CreateStyledComponentIntrinsic<'link', {}, Theme>;

                                                                                                                                                                                                                                                  property main

                                                                                                                                                                                                                                                  main: CreateStyledComponentIntrinsic<'main', {}, Theme>;

                                                                                                                                                                                                                                                    property map

                                                                                                                                                                                                                                                    map: CreateStyledComponentIntrinsic<'map', {}, Theme>;

                                                                                                                                                                                                                                                      property mark

                                                                                                                                                                                                                                                      mark: CreateStyledComponentIntrinsic<'mark', {}, Theme>;

                                                                                                                                                                                                                                                        property mask

                                                                                                                                                                                                                                                        mask: CreateStyledComponentIntrinsic<'mask', {}, Theme>;

                                                                                                                                                                                                                                                          property menu

                                                                                                                                                                                                                                                          menu: CreateStyledComponentIntrinsic<'menu', {}, Theme>;
                                                                                                                                                                                                                                                          • marquee tag is not supported by @types/react

                                                                                                                                                                                                                                                          property menuitem

                                                                                                                                                                                                                                                          menuitem: CreateStyledComponentIntrinsic<'menuitem', {}, Theme>;

                                                                                                                                                                                                                                                            property meta

                                                                                                                                                                                                                                                            meta: CreateStyledComponentIntrinsic<'meta', {}, Theme>;

                                                                                                                                                                                                                                                              property meter

                                                                                                                                                                                                                                                              meter: CreateStyledComponentIntrinsic<'meter', {}, Theme>;

                                                                                                                                                                                                                                                                property nav

                                                                                                                                                                                                                                                                nav: CreateStyledComponentIntrinsic<'nav', {}, Theme>;

                                                                                                                                                                                                                                                                  property noscript

                                                                                                                                                                                                                                                                  noscript: CreateStyledComponentIntrinsic<'noscript', {}, Theme>;

                                                                                                                                                                                                                                                                    property object

                                                                                                                                                                                                                                                                    object: CreateStyledComponentIntrinsic<'object', {}, Theme>;

                                                                                                                                                                                                                                                                      property ol

                                                                                                                                                                                                                                                                      ol: CreateStyledComponentIntrinsic<'ol', {}, Theme>;

                                                                                                                                                                                                                                                                        property optgroup

                                                                                                                                                                                                                                                                        optgroup: CreateStyledComponentIntrinsic<'optgroup', {}, Theme>;

                                                                                                                                                                                                                                                                          property option

                                                                                                                                                                                                                                                                          option: CreateStyledComponentIntrinsic<'option', {}, Theme>;

                                                                                                                                                                                                                                                                            property output

                                                                                                                                                                                                                                                                            output: CreateStyledComponentIntrinsic<'output', {}, Theme>;

                                                                                                                                                                                                                                                                              property p

                                                                                                                                                                                                                                                                              p: CreateStyledComponentIntrinsic<'p', {}, Theme>;

                                                                                                                                                                                                                                                                                property param

                                                                                                                                                                                                                                                                                param: CreateStyledComponentIntrinsic<'param', {}, Theme>;

                                                                                                                                                                                                                                                                                  property path

                                                                                                                                                                                                                                                                                  path: CreateStyledComponentIntrinsic<'path', {}, Theme>;

                                                                                                                                                                                                                                                                                    property pattern

                                                                                                                                                                                                                                                                                    pattern: CreateStyledComponentIntrinsic<'pattern', {}, Theme>;

                                                                                                                                                                                                                                                                                      property picture

                                                                                                                                                                                                                                                                                      picture: CreateStyledComponentIntrinsic<'picture', {}, Theme>;

                                                                                                                                                                                                                                                                                        property polygon

                                                                                                                                                                                                                                                                                        polygon: CreateStyledComponentIntrinsic<'polygon', {}, Theme>;

                                                                                                                                                                                                                                                                                          property polyline

                                                                                                                                                                                                                                                                                          polyline: CreateStyledComponentIntrinsic<'polyline', {}, Theme>;

                                                                                                                                                                                                                                                                                            property pre

                                                                                                                                                                                                                                                                                            pre: CreateStyledComponentIntrinsic<'pre', {}, Theme>;

                                                                                                                                                                                                                                                                                              property progress

                                                                                                                                                                                                                                                                                              progress: CreateStyledComponentIntrinsic<'progress', {}, Theme>;

                                                                                                                                                                                                                                                                                                property q

                                                                                                                                                                                                                                                                                                q: CreateStyledComponentIntrinsic<'q', {}, Theme>;

                                                                                                                                                                                                                                                                                                  property radialGradient

                                                                                                                                                                                                                                                                                                  radialGradient: CreateStyledComponentIntrinsic<'radialGradient', {}, Theme>;

                                                                                                                                                                                                                                                                                                    property rect

                                                                                                                                                                                                                                                                                                    rect: CreateStyledComponentIntrinsic<'rect', {}, Theme>;

                                                                                                                                                                                                                                                                                                      property rp

                                                                                                                                                                                                                                                                                                      rp: CreateStyledComponentIntrinsic<'rp', {}, Theme>;

                                                                                                                                                                                                                                                                                                        property rt

                                                                                                                                                                                                                                                                                                        rt: CreateStyledComponentIntrinsic<'rt', {}, Theme>;

                                                                                                                                                                                                                                                                                                          property ruby

                                                                                                                                                                                                                                                                                                          ruby: CreateStyledComponentIntrinsic<'ruby', {}, Theme>;

                                                                                                                                                                                                                                                                                                            property s

                                                                                                                                                                                                                                                                                                            s: CreateStyledComponentIntrinsic<'s', {}, Theme>;

                                                                                                                                                                                                                                                                                                              property samp

                                                                                                                                                                                                                                                                                                              samp: CreateStyledComponentIntrinsic<'samp', {}, Theme>;

                                                                                                                                                                                                                                                                                                                property script

                                                                                                                                                                                                                                                                                                                script: CreateStyledComponentIntrinsic<'script', {}, Theme>;

                                                                                                                                                                                                                                                                                                                  property section

                                                                                                                                                                                                                                                                                                                  section: CreateStyledComponentIntrinsic<'section', {}, Theme>;

                                                                                                                                                                                                                                                                                                                    property select

                                                                                                                                                                                                                                                                                                                    select: CreateStyledComponentIntrinsic<'select', {}, Theme>;

                                                                                                                                                                                                                                                                                                                      property small

                                                                                                                                                                                                                                                                                                                      small: CreateStyledComponentIntrinsic<'small', {}, Theme>;

                                                                                                                                                                                                                                                                                                                        property source

                                                                                                                                                                                                                                                                                                                        source: CreateStyledComponentIntrinsic<'source', {}, Theme>;

                                                                                                                                                                                                                                                                                                                          property span

                                                                                                                                                                                                                                                                                                                          span: CreateStyledComponentIntrinsic<'span', {}, Theme>;

                                                                                                                                                                                                                                                                                                                            property stop

                                                                                                                                                                                                                                                                                                                            stop: CreateStyledComponentIntrinsic<'stop', {}, Theme>;

                                                                                                                                                                                                                                                                                                                              property strong

                                                                                                                                                                                                                                                                                                                              strong: CreateStyledComponentIntrinsic<'strong', {}, Theme>;

                                                                                                                                                                                                                                                                                                                                property style

                                                                                                                                                                                                                                                                                                                                style: CreateStyledComponentIntrinsic<'style', {}, Theme>;

                                                                                                                                                                                                                                                                                                                                  property sub

                                                                                                                                                                                                                                                                                                                                  sub: CreateStyledComponentIntrinsic<'sub', {}, Theme>;

                                                                                                                                                                                                                                                                                                                                    property summary

                                                                                                                                                                                                                                                                                                                                    summary: CreateStyledComponentIntrinsic<'summary', {}, Theme>;

                                                                                                                                                                                                                                                                                                                                      property sup

                                                                                                                                                                                                                                                                                                                                      sup: CreateStyledComponentIntrinsic<'sup', {}, Theme>;

                                                                                                                                                                                                                                                                                                                                        property svg

                                                                                                                                                                                                                                                                                                                                        svg: CreateStyledComponentIntrinsic<'svg', {}, Theme>;

                                                                                                                                                                                                                                                                                                                                          property table

                                                                                                                                                                                                                                                                                                                                          table: CreateStyledComponentIntrinsic<'table', {}, Theme>;

                                                                                                                                                                                                                                                                                                                                            property tbody

                                                                                                                                                                                                                                                                                                                                            tbody: CreateStyledComponentIntrinsic<'tbody', {}, Theme>;

                                                                                                                                                                                                                                                                                                                                              property td

                                                                                                                                                                                                                                                                                                                                              td: CreateStyledComponentIntrinsic<'td', {}, Theme>;

                                                                                                                                                                                                                                                                                                                                                property text

                                                                                                                                                                                                                                                                                                                                                text: CreateStyledComponentIntrinsic<'text', {}, Theme>;

                                                                                                                                                                                                                                                                                                                                                  property textarea

                                                                                                                                                                                                                                                                                                                                                  textarea: CreateStyledComponentIntrinsic<'textarea', {}, Theme>;

                                                                                                                                                                                                                                                                                                                                                    property tfoot

                                                                                                                                                                                                                                                                                                                                                    tfoot: CreateStyledComponentIntrinsic<'tfoot', {}, Theme>;

                                                                                                                                                                                                                                                                                                                                                      property th

                                                                                                                                                                                                                                                                                                                                                      th: CreateStyledComponentIntrinsic<'th', {}, Theme>;

                                                                                                                                                                                                                                                                                                                                                        property thead

                                                                                                                                                                                                                                                                                                                                                        thead: CreateStyledComponentIntrinsic<'thead', {}, Theme>;

                                                                                                                                                                                                                                                                                                                                                          property time

                                                                                                                                                                                                                                                                                                                                                          time: CreateStyledComponentIntrinsic<'time', {}, Theme>;

                                                                                                                                                                                                                                                                                                                                                            property title

                                                                                                                                                                                                                                                                                                                                                            title: CreateStyledComponentIntrinsic<'title', {}, Theme>;

                                                                                                                                                                                                                                                                                                                                                              property tr

                                                                                                                                                                                                                                                                                                                                                              tr: CreateStyledComponentIntrinsic<'tr', {}, Theme>;

                                                                                                                                                                                                                                                                                                                                                                property track

                                                                                                                                                                                                                                                                                                                                                                track: CreateStyledComponentIntrinsic<'track', {}, Theme>;

                                                                                                                                                                                                                                                                                                                                                                  property tspan

                                                                                                                                                                                                                                                                                                                                                                  tspan: CreateStyledComponentIntrinsic<'tspan', {}, Theme>;

                                                                                                                                                                                                                                                                                                                                                                    property u

                                                                                                                                                                                                                                                                                                                                                                    u: CreateStyledComponentIntrinsic<'u', {}, Theme>;

                                                                                                                                                                                                                                                                                                                                                                      property ul

                                                                                                                                                                                                                                                                                                                                                                      ul: CreateStyledComponentIntrinsic<'ul', {}, Theme>;

                                                                                                                                                                                                                                                                                                                                                                        property var

                                                                                                                                                                                                                                                                                                                                                                        var: CreateStyledComponentIntrinsic<'var', {}, Theme>;

                                                                                                                                                                                                                                                                                                                                                                          property video

                                                                                                                                                                                                                                                                                                                                                                          video: CreateStyledComponentIntrinsic<'video', {}, Theme>;

                                                                                                                                                                                                                                                                                                                                                                            property wbr

                                                                                                                                                                                                                                                                                                                                                                            wbr: CreateStyledComponentIntrinsic<'wbr', {}, Theme>;

                                                                                                                                                                                                                                                                                                                                                                              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 ThemeProvider

                                                                                                                                                                                                                                                                                                                                                                                                              interface ThemeProvider {}

                                                                                                                                                                                                                                                                                                                                                                                                                call signature

                                                                                                                                                                                                                                                                                                                                                                                                                (props: ThemeProviderProps): React.ReactElement;

                                                                                                                                                                                                                                                                                                                                                                                                                  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 brandTarget

                                                                                                                                                                                                                                                                                                                                                                                                                                      brandTarget?: 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 AddOptionalTo

                                                                                                                                                                                                                                                                                                                                                                                                                                                                    type AddOptionalTo<T, U> = DistributiveOmit<T, U> &
                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Partial<Pick<T, Extract<keyof T, U>>>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      type Animation

                                                                                                                                                                                                                                                                                                                                                                                                                                                                      type Animation = typeof animation;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        type Background

                                                                                                                                                                                                                                                                                                                                                                                                                                                                        type Background = typeof background;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          type Color

                                                                                                                                                                                                                                                                                                                                                                                                                                                                          type Color = typeof color;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                            type CreateStyledComponentBase

                                                                                                                                                                                                                                                                                                                                                                                                                                                                            type CreateStyledComponentBase<
                                                                                                                                                                                                                                                                                                                                                                                                                                                                            StyledInstanceTheme extends object
                                                                                                                                                                                                                                                                                                                                                                                                                                                                            > = object extends StyledInstanceTheme
                                                                                                                                                                                                                                                                                                                                                                                                                                                                            ? CreateStyledComponentBaseThemeless<InnerProps, ExtraProps>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                            : CreateStyledComponentBaseThemed<InnerProps, ExtraProps, StyledInstanceTheme>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              type CreateStyledComponentExtrinsic

                                                                                                                                                                                                                                                                                                                                                                                                                                                                              type CreateStyledComponentExtrinsic<
                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Tag extends React.ComponentType<any>,
                                                                                                                                                                                                                                                                                                                                                                                                                                                                              Theme extends object
                                                                                                                                                                                                                                                                                                                                                                                                                                                                              > = CreateStyledComponentBase<PropsOf<Tag>, ExtraProps, Theme>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                type CreateStyledComponentIntrinsic

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                type CreateStyledComponentIntrinsic<
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Tag extends keyof JSXInEl,
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                Theme extends object
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                > = CreateStyledComponentBase<JSXInEl[Tag], ExtraProps, Theme>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  type DistributiveOmit

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  type DistributiveOmit<T, U> = T extends any ? Pick<T, Exclude<keyof T, U>> : never;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    type Easing

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    type Easing = typeof easing;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      type JSXInEl

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      type JSXInEl = JSX.IntrinsicElements;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        type Keyframes

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        type Keyframes = {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        name: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        styles: string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        anim: number;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        toString: () => string;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        } & string;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          type Overwrapped

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          type Overwrapped<T, U> = Pick<T, Extract<keyof T, keyof U>>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            type PropsOf

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            type PropsOf<
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            > = JSX.LibraryManagedAttributes<C, React.ComponentPropsWithRef<C>>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              type ReactClassPropKeys

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              type ReactClassPropKeys = keyof React.ClassAttributes<any>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                type TextSize

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                type TextSize = number | string;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  type Typography

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  type Typography = typeof typography;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    type Value

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    type Value = string | number;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      type WithTheme

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      type WithTheme<P, T> = P extends {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      theme: infer Theme;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      ? P & {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      theme: Exclude<Theme, undefined>;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      : P & {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      theme: T;


                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        namespace jsx

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        namespace jsx {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          namespace jsx.JSX

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          namespace jsx.JSX {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            interface Element

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            interface Element extends EmotionJSX.Element {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              interface ElementAttributesProperty

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              interface ElementAttributesProperty extends EmotionJSX.ElementAttributesProperty {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                interface ElementChildrenAttribute

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                interface ElementChildrenAttribute extends EmotionJSX.ElementChildrenAttribute {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  interface ElementClass

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  interface ElementClass extends EmotionJSX.ElementClass {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    interface IntrinsicAttributes

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    interface IntrinsicAttributes extends EmotionJSX.IntrinsicAttributes {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      interface IntrinsicClassAttributes

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      interface IntrinsicClassAttributes<T>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      extends EmotionJSX.IntrinsicClassAttributes<T> {}

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        type IntrinsicElements

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        type IntrinsicElements = EmotionJSX.IntrinsicElements;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          type LibraryManagedAttributes

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          type LibraryManagedAttributes<C, P> = EmotionJSX.LibraryManagedAttributes<C, P>;

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Package Files (6)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Dependencies (4)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            Dev Dependencies (10)

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            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>