Skip to main content

Theme

Properties​

background?​

optional background?: string;

The primary page background color.

backgroundLight?​

optional backgroundLight?: string;

The background color for content that is lightly promoted and sits one level higher than backgroundMid.

backgroundMid?​

optional backgroundMid?: string;

The background color for cards and other content that sits one level higher than background.

backgroundSuccess?​

optional backgroundSuccess?: string;

Deprecated​

use successBackground instead. The background color for success content. Must have sufficient contrast with textPrimary.

bannerPrimaryBackground?​

optional bannerPrimaryBackground?: string;

The background color used for primary banners

bannerSecondaryBackground?​

optional bannerSecondaryBackground?: string;

The background color used for secondary banners

borderDark?​

optional borderDark?: string;

The border colors for cards and form elements that should be strongly distinguished from their surroundings. Should be discernable from all background colors.

borderLight?​

optional borderLight?: string;

The border colors for cards and form elements that should be subtly distinguished from their surroundings. Should be discernable from all background colors.

chatBackground?​

optional chatBackground?: string;

The background color for chat. Should be a hex color code.

companyBackgroundTextPrimary?​

optional companyBackgroundTextPrimary?: string;

The color for prominent text on the company provided background image. Should have sufficient contrast with the company background image.

disabled?​

optional disabled?: string;

The color for disabled elements

disabledBackground?​

optional disabledBackground?: string;

Background color for disabled elements

disabledHighlight?​

optional disabledHighlight?: string;

The color for disabled elements

error?​

optional error?: string;

The color that is used for text and icons that indicate an error condition. Should have sufficient contrast with all background colors.

errorBackground?​

optional errorBackground?: string;

The background color for error content. Must have sufficient contrast with textPrimary.

hover?​

optional hover?: string;

The background color used upon hovering over interactable elements such as buttons.

info?​

optional info?: string;

The background color used for info content.

infoBackground?​

optional infoBackground?: string;

The background color for info content.

infoForeground?​

optional infoForeground?: string;

The foreground color for info content.

optional navBarBackground?: string;

The background color for the app-wide navigation bar.

optional navBarForeground?: string;

The foreground icon color for the app-wide navigation bar. Should have sufficient contrast with navBarBackground.

optional navigationInPageBackground?: string;

The background color for the app-wide in-page menu.

primaryHighlight?​

optional primaryHighlight?: string;

The primary accent color used for hyperlinks, buttons, and overall branding. Should have sufficient contrast with all background colors.

primaryHover?​

optional primaryHover?: string;

The hover color for interactable primaryHighlight. Should have sufficient contrast with all background colors.

selected?​

optional selected?: string;

The background color used when an interactable element such as a menu option or toggle is actively applied.

shellBackground?​

optional shellBackground?: string;

The background for the app shell. This can be hex value, linear-gradient or image (url).

success?​

optional success?: string;

The color that is used for text and icons that indicate an success condition. Should have sufficient contrast with all background colors.

successBackground?​

optional successBackground?: string;

The background color used to indicate successes. For ex, in: banners, toasts, etc.

textHighlight?​

optional textHighlight?: string;

The color for text that is highlighted. Should have sufficient contrast with all background colors.

textPrimary?​

optional textPrimary?: string;

The color for prominent text. Should have sufficient contrast with all background colors.

textSecondary?​

optional textSecondary?: string;

The color for secondary text. Should have sufficient contrast with all background colors, but less than textPrimary.

visited?​

optional visited?: string;

The color for visited hyperlinks.

warning?​

optional warning?: string;

The color that is used for distinguishing warning elements from their surroundings

warningBackground?​

optional warningBackground?: string;

The background color for warning content. Must have sufficient contrast with textPrimary.

warningDark?​

optional warningDark?: string;

The color that is used for strongly distinguishing warning elements from their surroundings

warningLight?​

optional warningLight?: string;

The color that is used for subtly distinguishing warning elements from their surroundings

warningText?​

optional warningText?: string;

The color that is used for distinguishing warning text from their surroundings