Theme variables

Design tokens for lightweight customization of all SDK UI. See the theming guide for more context.

GustoSDKTheme

Complete set of design tokens that control the SDK's visual theme. Pass a Partial<GustoSDKTheme> to GustoProvider to override specific tokens; any token not supplied falls back to the SDK default.

Example

import { GustoProvider } from '@gusto/embedded-react-sdk'

function App() {
  return (
    <GustoProvider
      theme={{
        colorPrimary: '#007bff',
        fontSizeRegular: '18px',
        inputRadius: '12px',
      }}
    >
      {/* your app */}
    </GustoProvider>
  )
}

Extends

• GustoSDKThemeColors

Properties

Property	Type	Default value	Description
badgeRadius	string		Border radius of badges.
bannerRadius	string		Border radius of banners.
boxRadius	string		Border radius of box/panel surfaces.
buttonRadius	string		Border radius of buttons.
cardRadius	string		Border radius of card surfaces.
colorBody	string		Background color of the main content area.
colorBodyAccent	string		Subtle accent background, used for hover states and alternating rows.
colorBodyContent	string		Primary text color rendered on body backgrounds.
colorBodySubContent	string		Secondary/muted text color for supporting copy and labels.
colorBorderPrimary	string		Color of primary borders (inputs, cards, dividers).
colorBorderSecondary	string		Color of secondary/subtle borders.
colorButtonIcon	string		Color of icon-only buttons.
colorError	string		Background for error banners and inline validation states.
colorErrorAccent	string		Border, icon accent, and field error indicator inside error surfaces.
colorErrorContent	string		Text color rendered on error surfaces.
colorInfo	string		Background for informational banners and callouts.
colorInfoAccent	string		Border or icon accent inside informational surfaces.
colorInfoContent	string		Text color rendered on informational surfaces.
colorPrimary	string		Brand primary color, used for primary buttons and active states.
colorPrimaryAccent	string		Hover/pressed tint for primary elements.
colorPrimaryContent	string		Text or icon color rendered on primary backgrounds.
colorSecondary	string		Brand secondary color, used for secondary buttons and surfaces.
colorSecondaryAccent	string		Hover/pressed tint for secondary elements.
colorSecondaryContent	string		Text or icon color rendered on secondary backgrounds.
colorSuccess	string		Background for success banners and confirmation states.
colorSuccessAccent	string		Border or icon accent inside success surfaces.
colorSuccessContent	string		Text color rendered on success surfaces.
colorWarning	string		Background for warning banners and callouts.
colorWarningAccent	string		Border or icon accent inside warning surfaces.
colorWarningContent	string		Text color rendered on warning surfaces.
focusRingColor	string	colorPrimary	Color of the keyboard focus ring.
focusRingWidth	string		Width of the keyboard focus ring.
fontFamily	string		Font family stack applied to all SDK text.
fontLineHeightExtraSmall	string		Line height for extra-small text.
fontLineHeightLarge	string		Line height for large text.
fontLineHeightRegular	string		Line height for regular/body text.
fontLineHeightSmall	string		Line height for small text.
fontSizeExtraSmall	string		Font size for extra-small text.
fontSizeHeading1	string		Font size for H1 headings.
fontSizeHeading2	string		Font size for H2 headings.
fontSizeHeading3	string		Font size for H3 headings.
fontSizeHeading4	string		Font size for H4 headings.
fontSizeHeading5	string		Font size for H5 headings.
fontSizeHeading6	string		Font size for H6 headings.
fontSizeLarge	string		Font size for large text.
fontSizeRegular	string		Font size for regular/body text.
fontSizeRoot	string		Root document font size as a numeric string (no px suffix). Used as the rem base.
fontSizeSmall	string		Font size for small text.
fontWeightBold	string		Font weight for bold text.
fontWeightMedium	string		Font weight for medium-emphasis text.
fontWeightRegular	string		Font weight for regular text.
fontWeightSemibold	string		Font weight for semibold text.
inputAdornmentColor	string	colorBodySubContent	Color of leading/trailing adornment icons in inputs.
inputBackgroundColor	string	colorBody	Background color of text inputs and selects.
inputBorderColor	string		Border color of text inputs and selects.
inputBorderWidth	string		Border width of text inputs and selects.
inputContentColor	string	colorBodyContent	Text color inside text inputs and selects.
inputDescriptionColor	string	colorBodySubContent	Color of form field description/hint text.
inputDisabledBackgroundColor	string	colorBodyAccent	Background color of disabled inputs.
inputErrorColor	string	colorErrorAccent	Color of inline field error messages.
inputLabelColor	string	colorBodyContent	Color of form field labels.
inputLabelFontSize	string		Font size of form field labels.
inputLabelFontWeight	string		Font weight of form field labels.
inputPlaceholderColor	string	colorBodySubContent	Placeholder text color inside inputs.
inputRadius	string		Border radius of text inputs and selects.
shadowResting	string		Box shadow for resting/default elevation.
shadowTopmost	string		Box shadow for elevated/topmost surfaces such as dropdowns and modals.
transitionDuration	string		Duration of UI transitions, e.g. "200ms".

---

GustoSDKThemeColors

Color tokens that can be overridden to customize the SDK's visual theme. Pass a Partial<GustoSDKThemeColors> when constructing a Partial<GustoSDKTheme> to supply to GustoProvider.

Extended by

• GustoSDKTheme

Properties

Property	Type	Description
colorBody	string	Background color of the main content area.
colorBodyAccent	string	Subtle accent background, used for hover states and alternating rows.
colorBodyContent	string	Primary text color rendered on body backgrounds.
colorBodySubContent	string	Secondary/muted text color for supporting copy and labels.
colorBorderPrimary	string	Color of primary borders (inputs, cards, dividers).
colorBorderSecondary	string	Color of secondary/subtle borders.
colorButtonIcon	string	Color of icon-only buttons.
colorError	string	Background for error banners and inline validation states.
colorErrorAccent	string	Border, icon accent, and field error indicator inside error surfaces.
colorErrorContent	string	Text color rendered on error surfaces.
colorInfo	string	Background for informational banners and callouts.
colorInfoAccent	string	Border or icon accent inside informational surfaces.
colorInfoContent	string	Text color rendered on informational surfaces.
colorPrimary	string	Brand primary color, used for primary buttons and active states.
colorPrimaryAccent	string	Hover/pressed tint for primary elements.
colorPrimaryContent	string	Text or icon color rendered on primary backgrounds.
colorSecondary	string	Brand secondary color, used for secondary buttons and surfaces.
colorSecondaryAccent	string	Hover/pressed tint for secondary elements.
colorSecondaryContent	string	Text or icon color rendered on secondary backgrounds.
colorSuccess	string	Background for success banners and confirmation states.
colorSuccessAccent	string	Border or icon accent inside success surfaces.
colorSuccessContent	string	Text color rendered on success surfaces.
colorWarning	string	Background for warning banners and callouts.
colorWarningAccent	string	Border or icon accent inside warning surfaces.
colorWarningContent	string	Text color rendered on warning surfaces.