/**
 * The list of customization css variables. These
 * are the only allowed variables possible.
 */
export interface CustomCssVariables {
    /**
     * Background color of the Liveboard, visualization, Search, and Answer pages.
     */
    '--ts-var-root-background'?: string;

    /**
     * Color of the text on application pages.
     */
    '--ts-var-root-color'?: string;

    /**
     * Font type for the text on application pages.
     */
    '--ts-var-root-font-family'?: string;

    /**
     * Text transformation specification for UI elements in the app.
     */
    '--ts-var-root-text-transform'?: string;

    /**
     * Font color of the text on toggle buttons such as
     * **All**, **Answers**, and **Liveboards** on the Home page (Classic experience),
     * the text color of the chart and table tiles on Home page (New modular Homepage
     * experience), title text on the AI-generated charts and tables, and object titles on
     * list pages such as *Liveboards* and *Answers*.
     * The default color code is #2770EF.
     *
     */
    '--ts-var-application-color'?: string;

    /**
     * Background color of the top navigation panel.
     */
    '--ts-var-nav-background'?: string;

    /**
     * Font color of the top navigation panel.
     */
    '--ts-var-nav-color'?: string;

    /**
     * Background color of the *Search data* button.
     */
    '--ts-var-search-data-button-background'?: string;

    /**
     * Color of the text on the *Search data* button.
     */
    '--ts-var-search-data-button-font-color'?: string;

    /**
     * Font of the text on the *Search data* button.
     */
    '--ts-var-search-data-button-font-family'?: string;

    /**
     * Font color of the text in the Search bar.
     */
    '--ts-var-search-bar-text-font-color'?: string;

    /**
     * Font of the text in the Search bar.
     */
    '--ts-var-search-bar-text-font-family'?: string;

    /**
     * Font style of the text in the Search bar.
     */
    '--ts-var-search-bar-text-font-style'?: string;

    /**
     * Background color of the search bar.
     */
    '--ts-var-search-bar-background'?: string;

    /**
     * Background color of the search suggestions panel.
     */
    '--ts-var-search-auto-complete-background'?: string;

    /**
     * Background color of the navigation panel that allows you to undo, redo, and reset
     * search operations.
     */
    '--ts-var-search-navigation-button-background'?: string;

    /**
     * Background color of the navigation help text that appears at the bottom of the
     * search suggestions panel.
     */
    '--ts-var-search-bar-navigation-help-text-background'?: string;

    /**
     * Background color of the search suggestion block on hover.
     */
    '--ts-var-search-bar-auto-complete-hover-background'?: string;

    /**
     * Font color of the text in the search suggestion panel.
     */
    '--ts-var-search-auto-complete-font-color'?: string;

    /**
     * Font color of the sub-text that appears below the keyword in the search suggestion
     * panel.
     */
    '--ts-var-search-auto-complete-subtext-font-color'?: string;

    /**
     * Background color of the input box in the Spotter page.
     */
    '--ts-var-spotter-input-background'?: string;

    /**
     * Background color of the previously asked prompt message in the Spotter page.
     */
    '--ts-var-spotter-prompt-background'?: string;

    /**
     * Background color of the data panel.
     */
    '--ts-var-answer-data-panel-background-color'?: string;

    /**
     * Background color of the vertical panel on the right side of the Answer page, which
     * includes the options to edit charts and tables.
     */
    '--ts-var-answer-edit-panel-background-color'?: string;

    /**
     * Background color of the chart switcher on search results and Answer pages.
     */
    '--ts-var-answer-view-table-chart-switcher-background'?: string;

    /**
     * Background color of the currently selected chart type in the chart switcher.
     */
    '--ts-var-answer-view-table-chart-switcher-active-background'?: string;

    /**
     * Border-radius of main buttons.
     * For example, the *Search data* button in the top navigation panel.
     */
    '--ts-var-button-border-radius'?: string;

    /**
     * Border-radius of small buttons such as secondary buttons.
     * For example, share and favorite buttons.
     */
    '--ts-var-button--icon-border-radius'?: string;

    /**
     * Font color of the text on primary buttons. For example, the primary buttons on
     * Liveboard*, Answer, *Data* workspace, *SpotIQ*, or *Home* page.
     */
    '--ts-var-button--primary-color'?: string;

    /**
     * Font family specification for the text on primary buttons.
     */
    '--ts-var-button--primary--font-family'?: string;

    /**
     * Background color of the primary buttons. For example, the primary buttons such as
     * Pin* and *Save*.
     */
    '--ts-var-button--primary-background'?: string;

    /**
     * Background color of the primary buttons on hover.
     */
    '--ts-var-button--primary--hover-background'?: string;

    /**
     * Backgroud color of the primary buttons when active.
     */
    '--ts-var-button--primary--active-background'?: string;

    /**
     * Font color of the text on the secondary buttons.
     */
    '--ts-var-button--secondary-color'?: string;

    /**
     * Font family specification for the text on the secondary buttons.
     */
    '--ts-var-button--secondary--font-family'?: string;

    /**
     * Background color of the secondary buttons.
     */
    '--ts-var-button--secondary-background'?: string;

    /**
     * Background color of the secondary button on hover.
     */
    '--ts-var-button--secondary--hover-background'?: string;

    /**
     * Backgroud color of the secondary buttons when active.
     */
    '--ts-var-button--secondary--active-background'?: string;

    /**
     * Font color of the tertiary button. For example, the *Undo*, *Redo*, and *Reset*
     * buttons on the *Search* page.
     */
    '--ts-var-button--tertiary-color'?: string;

    /**
     * Background color of the tertiary button.
     */
    '--ts-var-button--tertiary-background'?: string;

    /**
     * Background color of the tertiary button when a user hovers over these buttons.
     */
    '--ts-var-button--tertiary--hover-background'?: string;

    /**
     * Backgroud color of the tertiary buttons when active.
     */
    '--ts-var-button--tertiary--active-background'?: string;

    /**
     * Font color of the title text of a visualization or Answer.
     */
    '--ts-var-viz-title-color'?: string;

    /**
     * Font family specification for the title text of a visualization/Answer.
     */
    '--ts-var-viz-title-font-family'?: string;

    /**
     * Text transformation specification for visualization and Answer titles.
     */
    '--ts-var-viz-title-text-transform'?: string;

    /**
     * Font color of the description text and subtitle of a visualization or Answer.
     */
    '--ts-var-viz-description-color'?: string;

    /**
     * Font family specification of description text and subtitle of a visualization or
     * Answer.
     */
    '--ts-var-viz-description-font-family'?: string;

    /**
     * Text transformation specification for  description text and subtitle of a
     * visualization or Answer.
     */
    '--ts-var-viz-description-text-transform'?: string;

    /**
     * Border-radius for the visualization tiles and header panel on a Liveboard.
     */
    '--ts-var-viz-border-radius'?: string;

    /**
     * Box shadow property for the visualization tiles and header panel on a Liveboard.
     */
    '--ts-var-viz-box-shadow'?: string;

    /**
     * Background color of the visualization tiles and header panel on a Liveboard.
     */
    '--ts-var-viz-background'?: string;

    /**
     * Background color of the legend on a visualization or Answer.
     */
    '--ts-var-viz-legend-hover-background'?: string;

    /**
     * Background color of the selected chart type on the chart selection widget.
     */
    '--ts-var-answer-chart-select-background'?: string;

    /**
     * Background color of the chart type element when a user hovers over a chart type on
     * the chart selection widget.
     */
    '--ts-var-answer-chart-hover-background'?: string;

    /**
     * Border-radius of filter chips.
     */
    '--ts-var-chip-border-radius'?: string;

    /**
     * Shadow effect for filter chips.
     */
    '--ts-var-chip-box-shadow'?: string;

    /**
     * Background color of filter chips.
     */
    '--ts-var-chip-background'?: string;

    /**
     * Font color of the filter label when a filter chip is selected
     */
    '--ts-var-chip--active-color'?: string;

    /**
     * Background color of the filter chips when selected.
     */
    '--ts-var-chip--active-background'?: string;

    /**
     * Font color of the text on filter chips when hovered over.
     */
    '--ts-var-chip--hover-color'?: string;

    /**
     * Background color of filter chips on hover.
     */
    '--ts-var-chip--hover-background'?: string;

    /**
     * Font color of the text on filter chips.
     */
    '--ts-var-chip-color'?: string;

    /**
     * Font family specification for the text on filter chips.
     */
    '--ts-var-chip-title-font-family'?: string;

    /**
     * Font color of axis title on charts.
     */
    '--ts-var-axis-title-color'?: string;

    /**
     * Font family specification for the X and Y axis title text.
     */
    '--ts-var-axis-title-font-family'?: string;

    /**
     * Font color of the X and Y axis labels.
     */
    '--ts-var-axis-data-label-color'?: string;

    /**
     * Font family specification for X and Y axis labels.
     */
    '--ts-var-axis-data-label-font-family'?: string;

    /**
     * Font color of the menu items.
     */
    '--ts-var-menu-color'?: string;

    /**
     * Background color of menu panels.
     */
    '--ts-var-menu-background'?: string;

    /**
     * Font family specification for the menu items.
     */
    '--ts-var-menu-font-family'?: string;

    /**
     * Text capitalization specification for the menu items.
     */
    '--ts-var-menu-text-transform'?: string;

    /**
     * Background color for menu items on hover.
     */
    '--ts-var-menu--hover-background'?: string;

    /**
     * Text color for selected menu items.
     */
    '--ts-var-menu-selected-text-color'?: string;

    /**
     * Background color of the dialogs.
     */
    '--ts-var-dialog-body-background'?: string;

    /**
     * Font color of the body text displayed on dialogs.
     */
    '--ts-var-dialog-body-color'?: string;

    /**
     * Background color of the header text on dialogs.
     */
    '--ts-var-dialog-header-background'?: string;

    /**
     * Font color of the header text on dialogs.
     */
    '--ts-var-dialog-header-color'?: string;

    /**
     * Background color of the footer area on dialogs.
     */
    '--ts-var-dialog-footer-background'?: string;

    /**
     * Background for selected state in list
     */
    '--ts-var-list-selected-background'?: string;

    /**
     * Background for hover state in list
     */
    '--ts-var-list-hover-background'?: string;

    /**
     * Background for hover state in segment control.
     */
    '--ts-var-segment-control-hover-background'?: string;

    /**
     * Text color for slected item in modular home's watchlist.
     */
    '--ts-var-home-watchlist-selected-text-color'?: string;

    /**
     * Text color for favorite carousel find your favorites card in modular home.
     */
    '--ts-var-home-favorite-suggestion-card-text-color'?: string;

    /**
     * Icon color for favorite carousel find your favorites card in modular home.
     */
    '--ts-var-home-favorite-suggestion-card-icon-color'?: string;

    /**
     * Background for favorite carousel find your favorites card in modular home.
     */
    '--ts-var-home-favorite-suggestion-card-background'?: string;
    /**
     * Border color of checkbox in error state.
     */
    '--ts-var-checkbox-error-border'?: string;
    /**
     * Border color of checkbox.
     */
    '--ts-var-checkbox-border-color'?: string;
    /**
     * Border color of checkbox in hover state.
     */
    '--ts-var-checkbox-hover-border'?: string;
    /**
     * Border and font color of checkbox in active state.
     */
    '--ts-var-checkbox-active-color'?: string;
    /**
     * Border color and font color of checkbox in checked state.
     */
    '--ts-var-checkbox-checked-color'?: string;
    /**
     * Border and font color of checkbox in disabled state.
     */
    '--ts-var-checkbox-checked-disabled'?: string;
    /**
     * Background color of checkbox.
     */
    '--ts-var-checkbox-background-color'?: string;

    /**
     * Background color of the layout in the Liveboard.
     */
    '--ts-var-liveboard-layout-background'?: string;

    /**
     * Background color of the header in the Liveboard.
     */
    '--ts-var-liveboard-header-background'?: string;

    /**
     * Font color of the header in the Liveboard.
     */
    '--ts-var-liveboard-header-font-color'?: string;

    /**
     * Border color of the tiles in the Liveboard.
     */
    '--ts-var-liveboard-tile-border-color'?: string;

    /**
     * Background color of the tiles in the Liveboard.
     */
    '--ts-var-liveboard-tile-background'?: string;

    /**
     * Border radius of the tiles in the Liveboard.
     */
    '--ts-var-liveboard-tile-border-radius'?: string;

    /**
     * Padding of the tiles in the Liveboard.
     */
    '--ts-var-liveboard-tile-padding'?: string;

    /**
     * Background color of the table header in the Liveboard.
     */
    '--ts-var-liveboard-tile-table-header-background'?: string;

    /**
     * Padding of the groups in the Liveboard.
     * 
     * Please enable the Liveboard Masterpieces feature in your ThoughtSpot instance and
     * then set the isLiveboardMasterpiecesEnabled SDK flag to true to start modifying
     * this CSS variable.
     */
    '--ts-var-liveboard-group-padding'?: string;

    /**
     * Font size of the title of the groups in the Liveboard.
     * 
     * Please enable the Liveboard Masterpieces feature in your ThoughtSpot instance and
     * then set the isLiveboardMasterpiecesEnabled SDK flag to true to start modifying
     * this CSS variable.
     */
    '--ts-var-liveboard-group-title-font-size'?: string;

    /**
     * Font weight of the title of the groups in the Liveboard.
     * 
     * Please enable the Liveboard Masterpieces feature in your ThoughtSpot instance and
     * then set the isLiveboardMasterpiecesEnabled SDK flag to true to start modifying
     * this CSS variable.
     */
    '--ts-var-liveboard-group-title-font-weight'?: string;

    /**
     * Font size of the title of the tiles inside the groups in the Liveboard.
     * 
     * Please enable the Liveboard Masterpieces feature in your ThoughtSpot instance and
     * then set the isLiveboardMasterpiecesEnabled SDK flag to true to start modifying
     * this CSS variable.
     */
    '--ts-var-liveboard-group-tile-title-font-size'?: string;

    /**
     * Font weight of the title of the tiles inside the groups in the Liveboard.
     * 
     * Please enable the Liveboard Masterpieces feature in your ThoughtSpot instance and
     * then set the isLiveboardMasterpiecesEnabled SDK flag to true to start modifying
     * this CSS variable.
     */
    '--ts-var-liveboard-group-tile-title-font-weight'?: string;

    /**
     * Padding of the group tiles in the Liveboard.
     * 
     * Please enable the Liveboard Masterpieces feature in your ThoughtSpot instance and
     * then set the isLiveboardMasterpiecesEnabled SDK flag to true to start modifying
     * this CSS variable.
     */
    '--ts-var-liveboard-group-tile-padding'?: string;

    /**
     * Padding of the answer viz in the Liveboard.
     */
    '--ts-var-liveboard-answer-viz-padding'?: string;

    /**
     * Background color of the groups in the Liveboard.
     * 
     * Please enable the Liveboard Masterpieces feature in your ThoughtSpot instance and
     * then set the isLiveboardMasterpiecesEnabled SDK flag to true to start modifying
     * this CSS variable.
     */
    '--ts-var-liveboard-group-background'?: string;

    /**
     * Border color of the groups in the Liveboard.
     * 
     * Please enable the Liveboard Masterpieces feature in your ThoughtSpot instance and
     * then set the isLiveboardMasterpiecesEnabled SDK flag to true to start modifying
     * this CSS variable.
     */
    '--ts-var-liveboard-group-border-color'?: string;

    /**
     * Font color of the heading of the note title in the Liveboard.
     */
    '--ts-var-liveboard-notetitle-heading-font-color'?: string;

    /**
     * Font color of the body of the note title in the Liveboard.
     */
    '--ts-var-liveboard-notetitle-body-font-color'?: string;

    /**
     * Font color of the title of the groups in the Liveboard.
     * 
     * Please enable the Liveboard Masterpieces feature in your ThoughtSpot instance and
     * then set the isLiveboardMasterpiecesEnabled SDK flag to true to start modifying
     * this CSS variable.
     */
    '--ts-var-liveboard-group-title-font-color'?: string;

    /**
     * Font color of the description of the groups in the Liveboard.
     * 
     * Please enable the Liveboard Masterpieces feature in your ThoughtSpot instance and
     * then set the isLiveboardMasterpiecesEnabled SDK flag to true to start modifying
     * this CSS variable.
     */
    '--ts-var-liveboard-group-description-font-color'?: string;

    /**
     * Font color of the title of the tiles inside the groups in the Liveboard.
     * 
     * Please enable the Liveboard Masterpieces feature in your ThoughtSpot instance and
     * then set the isLiveboardMasterpiecesEnabled SDK flag to true to start modifying
     * this CSS variable.
     */
    '--ts-var-liveboard-group-tile-title-font-color'?: string;

    /**
     * Font color of the description of the tiles inside the groups in the Liveboard.
     * 
     * Please enable the Liveboard Masterpieces feature in your ThoughtSpot instance and
     * then set the isLiveboardMasterpiecesEnabled SDK flag to true to start modifying
     * this CSS variable.
     */
    '--ts-var-liveboard-group-tile-description-font-color'?: string;

    /**
     * Background color of the tiles inside the groups in the Liveboard.
     * 
     * Please enable the Liveboard Masterpieces feature in your ThoughtSpot instance and
     * then set the isLiveboardMasterpiecesEnabled SDK flag to true to start modifying
     * this CSS variable.
     */
    '--ts-var-liveboard-group-tile-background'?: string;

    /**
     * Background color of the filter chips in the Liveboard.
     * 
     * Please enable the Liveboard Masterpieces feature in your ThoughtSpot instance and
     * then set the isLiveboardMasterpiecesEnabled SDK flag to true to start modifying
     * this CSS variable.
     */
    '--ts-var-liveboard-chip-background'?: string;

    /**
     * Font color of the filter chips in the Liveboard.
     * 
     * Please enable the Liveboard Masterpieces feature in your ThoughtSpot instance and
     * then set the isLiveboardMasterpiecesEnabled SDK flag to true to start modifying
     * this CSS variable.
     */
    '--ts-var-liveboard-chip-color'?: string;

    /**
     * Background color of the filter chips in the Liveboard on hover.
     * 
     * Please enable the Liveboard Masterpieces feature in your ThoughtSpot instance and
     * then set the isLiveboardMasterpiecesEnabled SDK flag to true to start modifying
     * this CSS variable.
     */
    '--ts-var-liveboard-chip--hover-background'?: string;

    /**
     * Background color of the filter chips in the Liveboard on active.
     * 
     * Please enable the Liveboard Masterpieces feature in your ThoughtSpot instance and
     * then set the isLiveboardMasterpiecesEnabled SDK flag to true to start modifying
     * this CSS variable.
     */
    '--ts-var-liveboard-chip--active-background'?: string;

    /**
     * Width of the side panel in the Liveboard.
     */
    '--ts-var-side-panel-width'?: string;

    /**
     * Background color of the edit bar in the Liveboard.
     */
    '--ts-var-liveboard-edit-bar-background'?: string;

    /**
     * Breakpoint for the dual column layout in the Liveboard.
     */
    '--ts-var-liveboard-dual-column-breakpoint'?: string;

    /**
     * Breakpoint for the single column layout in the Liveboard.
     */
    '--ts-var-liveboard-single-column-breakpoint'?: string;

    /**
     * Background color of the cross filter layout in the Liveboard.
     */
    '--ts-var-liveboard-cross-filter-layout-background'?: string;

    /**
     * Border color of the active tab in the Liveboard.
     */
    '--ts-var-liveboard-tab-active-border-color'?: string;

    /**
     * Font color of the hover tab in the Liveboard.
     */
    '--ts-var-liveboard-tab-hover-color'?: string;

    /**
     * Font size of the title of the tiles in the Liveboard.
     */
    '--ts-var-liveboard-tile-title-fontsize'?: string;

    /**
     * Font weight of the title of the tiles in the Liveboard.
     */
    '--ts-var-liveboard-tile-title-fontweight'?: string;

    /**
     * Background color of the parameter chips in the Liveboard.
     */
    '--ts-var-parameter-chip-background'?: string;

    /**
     * Font color of the parameter chips in the Liveboard.
     */
    '--ts-var-parameter-chip-text-color'?: string;

    /**
     * Background color of the parameter chips in the Liveboard on hover.
     */
    '--ts-var-parameter-chip-hover-background'?: string;

    /**
     * Font color of the parameter chips in the Liveboard on hover.
     */
    '--ts-var-parameter-chip-hover-text-color'?: string;

    /**
     * Background color of the parameter chips in the Liveboard on active.
     */
    '--ts-var-parameter-chip-active-background'?: string;

    /**
     * Font color of the parameter chips in the Liveboard on active.
     */
    '--ts-var-parameter-chip-active-text-color'?: string;

    /**
     * Background color of the action button in the Liveboard header.
     */
    '--ts-var-liveboard-header-action-button-background'?: string;

    /**
     * Font color of the action button in the Liveboard header.
     */
    '--ts-var-liveboard-header-action-button-font-color'?: string;

    /**
     * Font color of the action button in the Liveboard header on hover.
     */
    '--ts-var-liveboard-header-action-button-hover-color'?: string;

    /**
     * Font color of the action button in the Liveboard header on active.
     */
    '--ts-var-liveboard-header-action-button-active-color'?: string;

    /**
     * Background color of the badge in the Liveboard header.
     */
    '--ts-var-liveboard-header-badge-background'?: string;

    /**
     * Font color of the badge in the Liveboard header.
     */
    '--ts-var-liveboard-header-badge-font-color'?: string;

    /**
     * Background color of the modified badge in the Liveboard header.
     */
    '--ts-var-liveboard-header-badge-modified-background'?: string;

    /**
     * Font color of the modified badge in the Liveboard header.
     */
    '--ts-var-liveboard-header-badge-modified-font-color'?: string;

    /**
     * Font color of the badge in the Liveboard header on hover.
     */
    '--ts-var-liveboard-header-badge-hover-color'?: string;

    /**
     * Font color of the badge in the Liveboard header on active.
     */
    '--ts-var-liveboard-header-badge-active-color'?: string;

    /**
     * Font color of the hero text in the KPI widget.
     */
    '--ts-var-kpi-hero-color'?: string;

    /**
     * Font color of the comparison text in the KPI widget.
     */
    '--ts-var-kpi-comparison-color'?: string;

    /**
     * Font color of the analyze text in the KPI widget.
     */
    '--ts-var-kpi-analyze-text-color'?: string;

    /**
     * Font color of the legend title in the heatmap chart.
     */
    '--ts-var-chart-heatmap-legend-title-color'?: string;

    /**
     * Font color of the legend label in the heatmap chart.
     */
    '--ts-var-chart-heatmap-legend-label-color'?: string;

    /**
     * Font color of the legend title in the treemap chart.
     */
    '--ts-var-chart-treemap-legend-title-color'?: string;

    /**
     * Font color of the legend label in the treemap chart.
     */
    '--ts-var-chart-treemap-legend-label-color'?: string;

    /**
     * Color of the positive change in the KPI.
     */
    '--ts-var-kpi-positive-change-color'?: string;

    /**
     * Color of the negative change in the KPI.
     */
    '--ts-var-kpi-negative-change-color'?: string;
 
    /**
     * Background color of the change analysis insights.
     */
    '--ts-var-change-analysis-insights-background'?: string;

    /**
     * Background color of the forecasting card in the SpotIQ analyze.
     */
    '--ts-var-spotiq-analyze-forecasting-card-background'?: string;

    /**
     * Background color of the outlier card in the SpotIQ analyze.
     */
    '--ts-var-spotiq-analyze-outlier-card-background'?: string;

    /**
     * Background color of the trend card in the SpotIQ analyze.
     */
    '--ts-var-spotiq-analyze-trend-card-background'?: string;
    
    /**
     * Background color of the crosscorrelation card in the SpotIQ analyze.
     */
    '--ts-var-spotiq-analyze-crosscorrelation-card-background'?: string;
    
    /**
     * Background color of the summary header in the CCA modal.
     */
    '--ts-var-cca-modal-summary-header-background'?: string;
    
    /**
     * Width of the Spotter chat window.
     */
    '--ts-var-spotter-chat-width'?: string;

    /**
     * Border color for the saved chats sidebar container.
     */
    '--ts-var-saved-chats-border-color'?: string;

    /**
     * Background color for the saved chats sidebar container.
     */
    '--ts-var-saved-chats-bg'?: string;

    /**
     * Text color for the saved chats sidebar container.
     */
    '--ts-var-saved-chats-text-color'?: string;

    /**
     * Border color for the saved chats sidebar header.
     */
    '--ts-var-saved-chats-header-border'?: string;

    /**
     * Color for the saved chats sidebar title text.
     */
    '--ts-var-saved-chats-title-color'?: string;

    /**
     * Background color for buttons (new chat, toggle, footer) in the saved chats sidebar.
     */
    '--ts-var-saved-chats-btn-bg'?: string;

    /**
     * Hover background color for buttons in the saved chats sidebar.
     */
    '--ts-var-saved-chats-btn-hover-bg'?: string;

    /**
     * Text color for conversation items in the saved chats sidebar.
     */
    '--ts-var-saved-chats-conv-text-color'?: string;

    /**
     * Background color for conversation items on hover in the saved chats sidebar.
     */
    '--ts-var-saved-chats-conv-hover-bg'?: string;

    /**
     * Background color for the active/selected conversation in the saved chats sidebar.
     */
    '--ts-var-saved-chats-conv-active-bg'?: string;

    /**
     * Border color for the saved chats sidebar footer.
     */
    '--ts-var-saved-chats-footer-border'?: string;

    /**
     * Color for section title text (e.g., "Recent", "Older") in the saved chats sidebar.
     */
    '--ts-var-saved-chats-section-title-color'?: string;

    /**
     * Text color of the styling panel in the Liveboard.
     */
    '--ts-var-liveboard-styling-panel-text-color'?: string;

    /**
     * Border color of the styling panel in the Liveboard.
     */
    '--ts-var-liveboard-styling-panel-border-color'?: string;

    /**
     * Background color of the styling button in the Liveboard.
     */
    '--ts-var-liveboard-styling-button-background'?: string;

    /**
     * Text color of the styling button in the Liveboard.
     */
    '--ts-var-liveboard-styling-button-text-color'?: string;

    /**
     * Background color of the styling button in the Liveboard on hover.
     */
    '--ts-var-liveboard-styling-button-hover-background'?: string;

    /**
     * Background color of the styling button in the Liveboard when active.
     */
    '--ts-var-liveboard-styling-button-active-background'?: string;

    /**
     * Text color of the styling button in the Liveboard on hover.
     */
    '--ts-var-liveboard-styling-button-hover-text-color'?: string;

    /**
     * Box shadow of the styling button in the Liveboard.
     */
    '--ts-var-liveboard-styling-button-shadow'?: string;

    /**
     * Background color of the color palette in the Liveboard styling panel.
     */
    '--ts-var-liveboard-styling-color-palette-background'?: string;

    /**
     * Main panel background of the SpotterViz.
     */
    '--ts-var-spotterviz-panel-background'?: string;

    /**
     * Background color of the chat input field in SpotterViz.
     */
    '--ts-var-spotterviz-input-background'?: string;

    /**
     * Placeholder text color of the chat input field in SpotterViz.
     */
    '--ts-var-spotterviz-input-placeholder-color'?: string;

    /**
     * CTA color of the chat input field in SpotterViz.
     */
    '--ts-var-spotterviz-input-cta-color'?: string;

    /**
     * CTA hover color of the chat input field in SpotterViz.
     */
    '--ts-var-spotterviz-input-cta-hover-color'?: string;

    /**
     * Text color for the SpotterViz label in the empty state, displayed below
     * the SpotterViz icon.
     */
    '--ts-var-spotterviz-emptystate-spotterviz-color'?: string;

    /**
     * Background color of the starter prompt cards in SpotterViz.
     */
    '--ts-var-spotterviz-prompt-card-background'?: string;

    /**
     * Background hover color of the starter prompt cards in SpotterViz.
     */
    '--ts-var-spotterviz-prompt-card-hover-background'?: string;

    /**
     * Primary text color in SpotterViz, also used for tool response text,
     * upvote/downvote buttons, and other primary content.
     */
    '--ts-var-spotterviz-text-primary'?: string;

    /**
     * Secondary text color in SpotterViz.
     */
    '--ts-var-spotterviz-text-secondary'?: string;

    /**
     * Background color of the user chat message bubble in SpotterViz.
     */
    '--ts-var-spotterviz-message-background'?: string;

    /**
     * Hover color for the user chat message expand button in SpotterViz.
     */
    '--ts-var-spotterviz-usermessage-icon-hover'?: string;

    /**
     * Background color of the user chat message expand button in SpotterViz.
     */
    '--ts-var-spotterviz-usermessage-icon-background'?: string;

    /**
     * Color of the thinking step header when in progress in SpotterViz.
     */
    '--ts-var-spotterviz-thinking-inprogress-header-color'?: string;

    /**
     * Color of the thinking step header when completed in SpotterViz.
     */
    '--ts-var-spotterviz-thinking-completed-header-color'?: string;

    /**
     * Color of the final completion indicator icon shown when all work is done.
     * The last green dot which is shown when work is done.
     */
    '--ts-var-spotterviz-thinking-work-done-icon-color'?: string;

    /**
     * Hover background color for the working/work done CTA in SpotterViz.
     */
    '--ts-var-spotterviz-thinking-cta-hover-background'?: string;

    /**
     * Background color of tool call panels in SpotterViz.
     */
    '--ts-var-spotterviz-tool-call-background'?: string;

    /**
     * Color of tool titles and icons in SpotterViz.
     */
    '--ts-var-spotterviz-tool-title-color'?: string;

    /**
     * Border color of tool call panels in SpotterViz.
     */
    '--ts-var-spotterviz-tool-border-color'?: string;

    /**
     * Background color of the JSON input panel inside a tool call in SpotterViz.
     */
    '--ts-var-spotterviz-tool-json-input-background'?: string;

    /**
     * Background color of the upvote/downvote feedback buttons in SpotterViz.
     */
    '--ts-var-spotterviz-tool-feedback-button-background'?: string;

    /**
     * Hover background color of the upvote/downvote feedback buttons in SpotterViz.
     */
    '--ts-var-spotterviz-tool-feedback-button-hover'?: string;

    /**
     * Text color of the JSON input panel inside a tool call in SpotterViz.
     */
    '--ts-var-spotterviz-tool-json-input-color'?: string;

    /**
     * Background color of the last checkpoint section in SpotterViz.
     */
    '--ts-var-spotterviz-last-checkpoint-background'?: string;

    /**
     * Border color of the last checkpoint section in SpotterViz.
     */
    '--ts-var-spotterviz-last-checkpoint-border'?: string;

    /**
     * Border color of the Liveboard edit header toolbar.
     */
    '--ts-var-liveboard-edit-toolbar-border'?: string;

    /**
     * Background color of the selected section in the Liveboard edit header toolbar.
     */
    '--ts-var-liveboard-edit-toolbar-selected-background'?: string;

    /**
     * Text color of the selected section in the Liveboard edit header toolbar.
     */
    '--ts-var-liveboard-edit-toolbar-selected-text-color'?: string;

    /**
     * Text color of unselected items in the Liveboard edit header toolbar.
     */
    '--ts-var-liveboard-edit-toolbar-text'?: string;

    /**
     * Hover background color of unselected items in the Liveboard edit header toolbar.
     */
    '--ts-var-liveboard-edit-toolbar-hover-background'?: string;

    /**
     * Hover text color of unselected items in the Liveboard edit header toolbar.
     */
    '--ts-var-liveboard-edit-toolbar-hover-text-color'?: string;

    /**
     * Text color of the SpotterViz footer.
     */
    '--ts-var-spotterviz-footer-text-color'?: string;

    /**
     * Shared border color used throughout SpotterViz: input box, user message,
     * header underline, left panel border, thinking step connector and dots.
     */
    '--ts-var-spotterviz-border-color'?: string;

    /**
     * Background color of the reference-mode toggle button in the SpotterViz
     * chat input when it is unselected and the user hovers over it.
     */
    '--ts-var-spotterviz-reference-icon-hover-background'?: string;

    /**
     * Icon color for the reference-mode selected state — applies to
     * both the toggle button when active and the icon badge on each
     * referenced-entity chip in the chat input.
     */
    '--ts-var-spotterviz-reference-icon-selected-color'?: string;

    /**
     * Background color for the reference-mode selected state — applies to
     * both the reference mode toggle button when active and the icon badge
     * on each referenced-entity chip in the chat input.
     */
    '--ts-var-spotterviz-reference-icon-selected-background'?: string;
}