Skip to main content

Interface: Theme

Extended Theme interface that includes both legacy palette and new tokens.

Extends

Properties

adjustToContainer?

optional adjustToContainer: boolean

When true, the configurator adjusts to fit its container element.

This allows the configurator to be embedded within layouts of varying sizes while maintaining proper proportions. Dynamic sizing improves integration flexibility within different page contexts.

Inherited from

BaseTheme.adjustToContainer


base

base: BaseTokens

Base/primitive tokens


color

color: Record<string, string>

Additional named colors for specific use cases.

These colors supplement the main palette with specialized colors for particular UI elements or states.

Inherited from

BaseTheme.color


font

font: Font

Typography configuration.

Defines the fonts, sizes, and weights used for text throughout the interface. Typography is a fundamental aspect of the visual system that affects both aesthetics and readability.

Inherited from

BaseTheme.font


isCustomBackground?

optional isCustomBackground: boolean

When true, a custom background is being used.

This flag indicates that the background is not using the default system background and may have special handling requirements. Custom backgrounds can provide branded environments for product visualization.

Inherited from

BaseTheme.isCustomBackground


media

media: MediaQueries

Responsive breakpoints and media queries.

Defines the viewport size breakpoints used for responsive layout adaptations across different device sizes. Proper breakpoints ensure the interface works well from mobile to desktop.

Inherited from

BaseTheme.media


palette

palette: Palette

Color palette configuration.

Defines the complete set of colors used throughout the interface, including primary colors, accents, status indicators, and specialized component colors.

Inherited from

BaseTheme.palette


sem

sem: SemanticTokens

Semantic tokens


transitions

transitions: Transitions

Animation timing settings.

Controls the duration and easing of transitions and animations throughout the interface. Consistent animation timing creates a sense of polish and responsiveness.

Inherited from

BaseTheme.transitions