No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Default theme configuration

Changing the theme configuration variables is the most effective way to match Search widget templates to your needs. Here's what the theme object looks like with default values.

{ "border": { "width": "1px", "radius": "3px" }, "palette": { "common": { "black": "#000", "white": "#FFF" }, "primary": { "main": "#5548D9", "light": "#EEECFB", "dark": "#4A37D5", "contrastText": "#fff" }, "secondary": { "main": "#ff3d00", "light": "#ff6e40", "dark": "#dd2c00", "contrastText": "#fff" }, "grey": { "100": "#f5f5f5", "200": "#ECECEC", "300": "#DDDDDD", "400": "#CFCFCF", "500": "#C0C0C0", "600": "#B8B8B8", "700": "#A7A7A7", "800": "#979797", "900": "#777777" }, "info": { "main": "#0288d1", "light": "#03a9f4", "dark": "#01579b", "contrastText": "#fff" }, "success": { "main": "#2e7d32", "light": "#4caf50", "dark": "#1b5e20", "contrastText": "#fff" }, "error": { "main": "#d32f2f", "light": "#ef5350", "dark": "#c62828", "contrastText": "#fff" }, "warning": { "main": "#ed6c02", "light": "#ff9800", "dark": "#e65100", "contrastText": "#fff" }, "text": { "primary": "rgba(0, 0, 0, 0.87)", "secondary": "rgba(0, 0, 0, 0.6)", "disabled": "rgba(0, 0, 0, 0.38)" } }, "spacing": { "default": "1rem", "none": "0", "xs": "4px", "s": "8px", "m": "16px", "l": "32px", "xl": "64px" }, "typography": { "fontFamilySystem": "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif", "fontSize": "14px", "lineHeight": "24px", "fontWeight": "300", "fontSize1": { "fontSize": "12px", "fontWeight": "400", "lineHeight": "24px" }, "fontSize2": { "fontSize": "14px", "fontWeight": "400", "lineHeight": "24px" }, "fontSize3": { "fontSize": "16px", "fontWeight": "400", "lineHeight": "32px" }, "fontSize4": { "fontSize": "18px", "fontWeight": "400", "lineHeight": "32px" }, "fontSize5": { "fontSize": "20px", "fontWeight": "400", "lineHeight": "40px" }, "fontSize6": { "fontSize": "22px", "fontWeight": "400", "lineHeight": "40px" }, "fontSize7": { "fontSize": "24px", "fontWeight": "400", "lineHeight": "48px" }, "fontSize8": { "fontSize": "26px", "fontWeight": "400", "lineHeight": "48px" }, "h1": { "fontFamilySystem": "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif", "fontSize": "28px", "fontWeight": "400", "lineHeight": "40px" }, "h2": { "fontFamilySystem": "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif", "fontSize": "24px", "fontWeight": "400", "lineHeight": "36px" }, "h3": { "fontFamilySystem": "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif", "fontSize": "20px", "fontWeight": "400", "lineHeight": "32px" }, "h4": { "fontFamilySystem": "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif", "fontSize": "18px", "fontWeight": "500", "lineHeight": "28px" }, "h5": { "fontFamilySystem": "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif", "fontSize": "16px", "fontWeight": "500", "lineHeight": "24px" }, "h6": { "fontFamilySystem": "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif", "fontSize": "14px", "fontWeight": "500", "lineHeight": "20px" } } }