Detailed Branding Tokens
Use these tokens if you want to configure specific elements of the app. When you change any of these detailed branding token values, it overrides the generic token used by that element.
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.bannerBackground | onBackground | Banner background color |
| SMI.bannerText | background | Banner text color |
| SMI.chatBackground | background | Chat window background color |
| SMI.ctaButtons | secondary | Call-to-action button color |
| SMI.ctaButtonsText | secondary | Call-to-action text color |
| SMI.imageViewerBackground | tertiary | Image viewer background color |
| SMI.navigationBackground | primary | Navigation background color |
| SMI.navigationIcon | onPrimary | Navigation icon color |
| SMI.navigationText | onPrimary | Navigation text color |
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.avatarBackground | secondary | Avatar background color |
| SMI.avatarForeground | onSecondary | Avatar foreground color |
| SMI.chatSeperator | onBackgroundSemiTransparent | Chat separator color |
| SMI.iconError | onSecondary | Error icon color that's used in the unknown entry |
| SMI.receivedBubbleBackground | surface | Background color for an incoming chat bubble |
| SMI.receivedBubbleBorder | surfaceVariant | Border color for incoming chat bubble |
| SMI.receivedBubbleText | onSurface | Text color for an incoming message bubble |
| SMI.sentBubbleBackground | secondary | Background color for an outgoing chat bubble |
| SMI.sentBubbleText | onSecondary | Text color for an outgoing message bubble |
| SMI.timestamp | onBackground | Timestamp text color |
| SMI.typingIndicatorText | onBackground | Typing indicator ellipse color |
| SMI.unknownEntryErrorIconBackground | error | Error entry icon background color |
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.buttonBackground | surface | Button background color |
| SMI.buttonBorder | surfaceVariant | Button border color |
| SMI.buttonDisabledBackground | surface | Disabled text background color |
| SMI.buttonDisabledSelectedBackground | onBackground | Disabled selected text background color |
| SMI.buttonDisabledSelectedText | background | Disabled selected text color |
| SMI.buttonDisabledText | onBackground | Disabled text color |
| SMI.buttonFocusBackground | onSurfaceVariant | Focus text background color |
| SMI.buttonFocusText | surface | Focus text color |
| SMI.buttonText | onSurfaceVariant | Button text color |
| SMI.cancelButtonActive | onSecondary | Cancel button active color |
| SMI.cancelButtonBgActive | onBackground | Cancel button active background color |
| SMI.cancelButtonBgPressed | secondaryActive | Cancel button pressed background color |
| SMI.cancelButtonPressed | onSecondary | Cancel button pressed color |
| SMI.listPickerTitleBackground | surface | List picker title background color |
| SMI.listPickerTitleText | onSurface | List picker title text color |
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.cameraButtonActive | onSecondary | Camera button active color |
| SMI.cameraButtonBgActive | onSecondaryTransparent | Camera button active background color |
| SMI.cameraButtonBgFocused | onSecondarySemiTransparent | Camera button focused background color |
| SMI.cameraButtonBgPressed | onSecondary | Camera button pressed background color |
| SMI.cameraButtonFocused | secondary | Camera button focused color |
| SMI.cameraButtonPressed | onSecondary | Camera button pressed color |
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.cardBackground | primary | Background color for a card |
| SMI.cardBorder | primaryVariant | Border color for a card |
| SMI.cardHeadlineText | onPrimary | Headline text for a card |
| SMI.cardSubheaderText | primaryVariant | Subheader text for a card |
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.carouselBackground | surface | Carousel button background color |
| SMI.carouselButtonText | secondary | Carousel button text color |
| SMI.carouselButtonBackground | surface | Carousel button text disabled color |
| SMI.carouselButtonTextDisabled | onBackground | Carousel button text color |
| SMI.carouselImageBackground | primary | Carousel selected icon background color |
| SMI.carouselProgressIndicatorActive | secondary | Carousel background color |
| SMI.carouselProgressIndicatorInactive | onBackground | Carousel progress indicator active color |
| SMI.carouselSelectedHighlight | secondary | Carousel progress indicator inactive color |
| SMI.carouselSelectedIconBackground | secondary | Carousel selected icon foreground color |
| SMI.carouselSelectedIconForeground | onSecondary | Carousel selected highlight color |
| SMI.carouselSubTitleText | onPrimary | Carousel text subtitle color |
| SMI.carouselTitleText | primary | Carousel text title color |
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.iconBackground | secondary | Icon background color |
| SMI.iconBackgroundSecondary | onBackground | Icon secondary background color |
| SMI.iconDisabled | onBackground | Icon disabled color |
| SMI.iconForeground | onSecondary | Icon foreground color |
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.inputBackground | surface | Background color for text input field |
| SMI.inputBorder | surfaceVariant | Border color for text input field |
| SMI.inputPlaceholder | onBackground | Placeholder text color for the input text field |
| SMI.inputText | onSurface | Text font color when typing a message |
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.loadingScreenAvatar | onBackground | Loading screen avatar color |
| SMI.loadingScreenBackground | background | Loading screen background color |
| SMI.loadingScreenInputTextPlaceholder | surfaceSecondary | Loading screen input text placeholder color |
| SMI.loadingScreenReceivedBubbleBackground | onBackground | Loading screen received bubble background color |
| SMI.loadingScreenSentBubbleBackground | surfaceSecondary | Loading screen sent bubble background color |
| SMI.loadingScreenTextPlaceholder | surfaceSecondary | Loading screen placeholder text color |
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.messageSearchHighlightBackgroundAgent | surfaceHighlight | Highlighted background color for agent |
| SMI.messageSearchHighlightBackgroundUser | secondaryHighlight | Highlighted background color for user |
| SMI.messageSearchHighlightBorderAgent | highlight | Highlighted border color for agent |
| SMI.messageSearchHighlightBorderUser | highlight | Highlighted border color for user |
| SMI.messageSearchHighlightTextAgent | primary | Highlighted text color for agent |
| SMI.messageSearchHighlightTextUser | primary | Highlighted text color for user |
| SMI.messageSearchInputBar | onBackgroundSemiTransparent | Search input bar color |
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.participantClientMenuBackground | background | Client menu background color |
| SMI.participantClientMenuItemBackground | surface | Client menu item background color |
| SMI.participantClientMenuItemIcon | secondary | Client menu item icon color |
| SMI.participantClientMenuItemFocusBackground | onSurfaceVariant | Client menu item focus background color |
| SMI.participantClientMenuItemText | onSurface | Client menu text item color |
| SMI.participantClientMenuSearchIcon | secondary | Client menu search icon color |
| SMI.participantClientMenuButton | surface | Client menu button color |
| SMI.participantClientMenuButtonText | onSurface | Client menu button text color |
| SMI.participantClientMenuButtonBorder | surfaceVariant | Client menu button border color |
| SMI.participantClientMenuButtonSelected | onSurfaceVariant | Client menu button selected color |
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.prechatBackground | background | Pre-chat window background color |
| SMI.prechatBorder | onPrimary | Border color for text input field in pre-chat |
| SMI.prechatButton | secondary | Pre-chat button color |
| SMI.prechatButtonActive | secondaryActive | Pre-chat active button color |
| SMI.prechatButtonText | onSecondary | Pre-chat button text color |
| SMI.prechatDisabled | surfaceSecondary | Disabled pre-chat field |
| SMI.prechatError | error | Pre-chat error feedback color |
| SMI.prechatInputBackground | surface | Pre-chat window background color |
| SMI.prechatText | onPrimary | Text color on pre-chat form |
| SMI.prechatTextActive | secondary | Color for the active pre-chat cell |
| SMI.urlText | secondary | URL link color in the pre-chat Terms and Conditions string |
| Detail Token | Generic Token | Description |
|---|---|---|
| SMI.transcriptBackground | background | Request transcript screen background color |
| SMI.transcriptText | onSurface | Request transcript screen text color |
| SMI.transcriptButtonLeave | secondary | Request transcript leave button color |
| SMI.transcriptButtonLeaveBorder | secondary | Request transcript leave button border color |
| SMI.transcriptButtonLeaveText | onSecondary | Request transcript leave button text color |
| SMI.transcriptButtonCancel | surface | Request transcript cancel button color |
| SMI.transcriptButtonCancelBorder | onSurfaceVariant | Request transcript cancel button border color |
| SMI.transcriptButtonCancelText | onSurface | Request transcript cancel button text color |
| SMI.transcriptProgressIndicator | secondary | Request transcript progress indicator color |
| SMI.transcriptProgressIndicatorBackground | onSecondary | Request transcript progress indicator background color |
| Detailed Token | Generic Token | Description |
|---|---|---|
| SMI.formBackButton | onSecondary | Secure form back button background color |
| SMI.formBackButtonText | secondary | Secure form back button text color |
| SMI.formBackground | background | Secure form background color |
| SMI.formCellIconBackgroundDisabled | surfaceHighlight | Secure form cell icon disabled background color |
| SMI.formCellIconDisabled | primary | Secure form cell icon disabled color |
| SMI.formConfirmationButtonCancel | surface | Secure form confirmation cancel button background color |
| SMI.formConfirmationButtonCancelBorder | onSurface | Secure form confirmation cancel button border text color |
| SMI.formConfirmationButtonCancelText | onSurface | Secure form confirmation cancel button text color |
| SMI.formConfirmationButtonLeave | secondary | Secure form confirmation window leave button background color |
| SMI.formConfirmationButtonLeaveText | onSecondary | Secure form confirmation window leave button text color |
| SMI.formDatePickerIcon | secondary | Secure form date picker icon color |
| SMI.formInputBackground | background | Secure form input background color |
| SMI.formInputBorder | onPrimary | Secure form input border color |
| SMI.formInputBorderActive | secondary | Secure form input border active color |
| SMI.formInputBorderError | error | Secure form input border error color |
| SMI.formInputFooterLabel | onPrimary | Secure form input footer label |
| SMI.formInputText | onPrimary | Secure form input text color |
| SMI.formInputTitleText | onPrimary | Secure form input title text color |
| SMI.formNextButton | secondary | Secure form next button background color |
| SMI.formNextButtonText | onSecondary | Secure form next button text color |
| SMI.formOptionButtonBackground | primary | Secure form selectable option button background color |
| SMI.formOptionButtonBorder | onPrimary | Secure form selectable option button border color |
| SMI.formOptionButtonBorderSelected | secondary | Secure form selectable option button border selected color |
| SMI.formOptionButtonBorderRequired | error | Secure form selectable option button border required color |
| SMI.formOptionButtonIcon | secondary | Secure form option icon button color |
| SMI.formOptionButtonText | onPrimary | Secure form selectable option button text color |
| SMI.formOptionTextError | error | Secure form selectable option text error color |
| SMI.formOptionTitle | onPrimary | Secure form selectable option title color |
| SMI.formProressBarForeground | secondary | Secure form progress bar foreground color |
| SMI.formSubTitleText | onPrimary | Secure form subtitle text color |
| SMI.formSubmitButton | secondary | Secure form submit button color |
| SMI.formSubmitButtonText | onSecondary | Secure form submit button color text |
| SMI.formTitleText | onPrimary | Secure form title text color |