Interface: PaletteBackground
Background colors for different areas of the interface.
PaletteBackground defines colors used for various background surfaces in the configurator, providing visual separation between different UI regions and establishing hierarchy.
Properly differentiated background surfaces create visual organization and improve usability by clearly defining different functional areas of the interface.
Properties
danger?
optionaldanger:string
Background color for danger/error states.
Used for backgrounds that need to indicate problematic or dangerous actions. Error backgrounds should be distinctive but not overwhelming to maintain usability.
dangerSecondary?
optionaldangerSecondary:string
Optional secondary color variant for danger-themed UI elements.
This color is typically used as an alternative or complementary shade to the primary danger color, providing visual hierarchy and variety in danger-related components. Common use cases include secondary buttons, borders, hover states, or backgrounds that need to convey warnings or destructive actions while being less visually prominent than the primary danger color.
The color value should be provided as a valid CSS color string (hex, rgb, rgba, hsl, or named color). When undefined, components will fall back to their default secondary danger styling.
Business Context: This color helps maintain brand consistency across error states, warning messages, and destructive actions (such as delete buttons) while offering designers flexibility to create layered visual experiences that guide user attention appropriately.
Technical Context: Used by theming systems and design tokens to override default secondary danger color values. Should maintain sufficient contrast ratios with backgrounds for accessibility compliance and work harmoniously with the primary danger color in the color palette.
dark
dark:
string
Dark background color.
Used for areas that need to recede visually or create strong contrast. Dark backgrounds can create dramatic emphasis or serve as containers for light-colored content.
foreground
foreground:
string
Foreground element background color.
Used for UI elements that need to stand out against the primary background while not being as pronounced as white. Creates a middle level in the visual hierarchy.
grey
grey:
string
Grey background color.
Used for neutral or de-emphasized areas of the interface. Grey backgrounds recede visually, helping to focus attention on more important or interactive elements.
light
light:
string
Light background color.
Used for subtle emphasis or for secondary content areas. Light backgrounds provide gentle visual separation without creating strong divisions in the interface.
overlay
overlay:
string
Overlay background color.
Used for modal overlays, popovers, and other elements that float above the main interface. Usually includes some transparency to maintain context with the content below.
primary
primary:
string
Primary background color.
The main background color used for the majority of the interface. This serves as the canvas upon which other interface elements are placed.
tooltip
tooltip:
string
Tooltip background color.
Specific background color for tooltip components. Tooltips need distinctive backgrounds to stand out as temporary informational elements above other content.
white
white:
string
White background color.
Used for surfaces that need to appear elevated or separated from the primary background. White backgrounds create strong contrast and visual prominence.