@storybook/theming
- Version 6.4.22
- Published
- 119 kB
- 12 dependencies
- MIT license
Install
npm i @storybook/theming
yarn add @storybook/theming
pnpm add @storybook/theming
Overview
Core Storybook Components
Index
Variables
Functions
Interfaces
Type Aliases
Variables
variable background
const background: { app: string; bar: string; content: string; gridCellSize: number; hoverable: string; positive: string; negative: string; warning: string; critical: string;};
variable color
const color: { primary: string; secondary: string; tertiary: string; ancillary: string; orange: string; gold: string; green: string; seafoam: string; purple: string; ultraviolet: string; lightest: string; lighter: string; light: string; mediumlight: string; medium: string; mediumdark: string; dark: string; darker: string; darkest: string; border: string; positive: string; negative: string; warning: string; critical: string; defaultText: string; inverseText: string;};
variable ignoreSsrWarning
const ignoreSsrWarning: string;
variable styled
const styled: CreateStyled<Theme>;
variable themes
const themes: { light: ThemeVars; dark: ThemeVars; normal: ThemeVars };
variable typography
const typography: { fonts: { base: string; mono: string }; weight: { regular: number; bold: number; black: number }; size: { s1: number; s2: number; s3: number; m1: number; m2: number; m3: number; l1: number; l2: number; l3: number; code: number; };};
Functions
function convert
convert: (inherit?: ThemeVars) => Theme;
function create
create: (vars?: ThemeVars, rest?: Rest) => ThemeVars;
function createGlobal
createGlobal: ({ color, background, typography,}: { color: Color; background: Background; typography: Typography;}) => Return;
function createReset
createReset: ({ typography }: { typography: Typography }) => Return;
function darken
darken: (color: string) => string;
function ensure
ensure: (input: ThemeVars) => Theme;
function lighten
lighten: (color: string) => string;
Interfaces
interface Brand
interface Brand {}
interface Theme
interface Theme {}
property animation
animation: Animation;
property appBorderColor
appBorderColor: string;
property appBorderRadius
appBorderRadius: number;
property background
background: Background;
property barBg
barBg: string;
property barSelectedColor
barSelectedColor: string;
property barTextColor
barTextColor: string;
property brand
brand: Brand;
property code
code: { [key: string]: string | object;};
property color
color: Color;
property easing
easing: Easing;
property input
input: { border: string; background: string; color: string; borderRadius: number;};
property layoutMargin
layoutMargin: number;
property typography
typography: Typography;
index signature
[key: string]: any;
interface ThemeVars
interface ThemeVars {}
property appBg
appBg?: string;
property appBorderColor
appBorderColor?: string;
property appBorderRadius
appBorderRadius?: number;
property appContentBg
appContentBg?: string;
property barBg
barBg?: string;
property barSelectedColor
barSelectedColor?: string;
property barTextColor
barTextColor?: string;
property base
base: 'light' | 'dark';
property brandImage
brandImage?: string;
property brandTitle
brandTitle?: string;
property brandUrl
brandUrl?: string;
property colorPrimary
colorPrimary?: string;
property colorSecondary
colorSecondary?: string;
property fontBase
fontBase?: string;
property fontCode
fontCode?: string;
property gridCellSize
gridCellSize?: number;
property inputBg
inputBg?: string;
property inputBorder
inputBorder?: string;
property inputBorderRadius
inputBorderRadius?: number;
property inputTextColor
inputTextColor?: string;
property textColor
textColor?: string;
property textInverseColor
textInverseColor?: string;
property textMutedColor
textMutedColor?: string;
Type Aliases
type Animation
type Animation = typeof animation;
type Background
type Background = typeof background;
type Color
type Color = typeof color;
type Easing
type Easing = typeof easing;
type TextSize
type TextSize = number | string;
type Typography
type Typography = typeof typography;
Package Files (8)
Dependencies (12)
Dev Dependencies (0)
No dev dependencies.
Peer Dependencies (2)
Badge
To add a badge like this oneto 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[](https://www.jsdocs.io/package/@storybook/theming)
- 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>
- Updated .
Package analyzed in 3818 ms. - Missing or incorrect documentation? Open an issue for this package.