Skip to content

theme-variables.md

Latest commit

 

History

History
162 lines (143 loc) · 9.23 KB

theme-variables.md

File metadata and controls

162 lines (143 loc) · 9.23 KB
Raw
title Theme variables
description Design tokens for lightweight customization of all SDK UI. See the theming guide for more context.
sidebar_position 14
generated_by typedoc
custom_edit_url

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

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

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.