Name | Description | Default | Control |
---|---|---|---|
propertyName* | This is a short description summary | defaultValue | |
propertyName* | This is a short description summary | defaultValue | |
propertyName* | This is a short description summary | defaultValue |
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.
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" }