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.

CSS variables

The following lists all the CSS variables used in Discover UI Components along with their default values:

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