CSS variables
The following lists all the CSS variables used in Sitecore Search 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" }