theme-variables.md

title	Theme Variables
order	1

Theme Variables

Variable	Type
colorBody	string
colorBodyAccent	string
colorBodyContent	string
colorBodySubContent	string
colorBorder	string
colorError	string
colorErrorAccent	string
colorErrorContent	string
colorInfo	string
colorInfoAccent	string
colorInfoContent	string
colorPrimary	string
colorPrimaryAccent	string
colorPrimaryContent	string
colorSecondary	string
colorSecondaryAccent	string
colorSecondaryContent	string
colorSuccess	string
colorSuccessAccent	string
colorSuccessContent	string
colorWarning	string
colorWarningAccent	string
colorWarningContent	string
fontFamily	string
fontLineHeightRegular	string
fontSizeHeading1	string
fontSizeHeading2	string
fontSizeHeading3	string
fontSizeHeading4	string
fontSizeHeading5	string
fontSizeHeading6	string
fontSizeLarge	string
fontSizeRegular	string
fontSizeRoot	string
fontSizeSmall	string
fontWeightBold	string
fontWeightMedium	string
fontWeightRegular	string
fontWeightSemibold	string
focusRingColor	string
focusRingWidth	string
shadowResting	string
shadowTopmost	string
badgeRadius	string
buttonRadius	string
inputAdornmentColor	string
inputBackgroundColor	string
inputBorderColor	string
inputBorderWidth	string
inputContentColor	string
inputDescriptionColor	string
inputDisabledBackgroundColor	string
inputErrorColor	string
inputLabelColor	string
inputLabelFontSize	string
inputLabelFontWeight	string
inputPlaceholderColor	string
inputRadius	string
transitionDuration	string

Usage

To customize the theme, pass a partial theme object to the GustoProvider:

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

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

Default Values

The theme uses sensible defaults for all variables. You only need to specify the variables you want to customize.