CustomCssVariables
- Index
- Properties
- --ts-var-answer-chart-hover-background
- --ts-var-answer-chart-select-background
- --ts-var-answer-data-panel-background-color
- --ts-var-answer-edit-panel-background-color
- --ts-var-answer-view-table-chart-switcher-active-background
- --ts-var-answer-view-table-chart-switcher-background
- --ts-var-application-color
- --ts-var-axis-data-label-color
- --ts-var-axis-data-label-font-family
- --ts-var-axis-title-color
- --ts-var-axis-title-font-family
- --ts-var-button--icon-border-radius
- --ts-var-button--primary--active-background
- --ts-var-button--primary--font-family
- --ts-var-button--primary--hover-background
- --ts-var-button--primary-background
- --ts-var-button--primary-border-color
- --ts-var-button--primary-color
- --ts-var-button--primary-font-weight
- --ts-var-button--primary-gap
- --ts-var-button--primary-min-width
- --ts-var-button--primary-padding
- --ts-var-button--secondary--active-background
- --ts-var-button--secondary--font-family
- --ts-var-button--secondary--hover-background
- --ts-var-button--secondary-background
- --ts-var-button--secondary-border-color
- --ts-var-button--secondary-color
- --ts-var-button--secondary-font-weight
- --ts-var-button--secondary-gap
- --ts-var-button--secondary-min-width
- --ts-var-button--secondary-padding
- --ts-var-button--tertiary--active-background
- --ts-var-button--tertiary--font-family
- --ts-var-button--tertiary--hover-background
- --ts-var-button--tertiary-background
- --ts-var-button--tertiary-border-color
- --ts-var-button--tertiary-color
- --ts-var-button--tertiary-font-weight
- --ts-var-button--tertiary-gap
- --ts-var-button--tertiary-min-width
- --ts-var-button--tertiary-padding
- --ts-var-button-border-radius
- --ts-var-button-border-width
- --ts-var-button-font-size
- --ts-var-button-font-weight
- --ts-var-button-gap
- --ts-var-button-height
- --ts-var-button-min-width
- --ts-var-button-padding
- --ts-var-cca-modal-summary-header-background
- --ts-var-change-analysis-insights-background
- --ts-var-chart-heatmap-legend-label-color
- --ts-var-chart-heatmap-legend-title-color
- --ts-var-chart-treemap-legend-label-color
- --ts-var-chart-treemap-legend-title-color
- --ts-var-checkbox-active-color
- --ts-var-checkbox-background-color
- --ts-var-checkbox-border-color
- --ts-var-checkbox-checked-color
- --ts-var-checkbox-checked-disabled
- --ts-var-checkbox-error-border
- --ts-var-checkbox-hover-border
- --ts-var-chip--active-background
- --ts-var-chip--active-color
- --ts-var-chip--attribute--hover-background
- --ts-var-chip--attribute--hover-border-color
- --ts-var-chip--attribute-background
- --ts-var-chip--attribute-border-color
- --ts-var-chip--date--hover-background
- --ts-var-chip--date--hover-border-color
- --ts-var-chip--date-background
- --ts-var-chip--date-border-color
- --ts-var-chip--filter--hover-background
- --ts-var-chip--filter--hover-border-color
- --ts-var-chip--filter-background
- --ts-var-chip--filter-border-color
- --ts-var-chip--hover-background
- --ts-var-chip--hover-color
- --ts-var-chip--measure--hover-background
- --ts-var-chip--measure--hover-border-color
- --ts-var-chip--measure-background
- --ts-var-chip--measure-border-color
- --ts-var-chip--unrecognized--hover-background
- --ts-var-chip--unrecognized--hover-border-color
- --ts-var-chip--unrecognized-background
- --ts-var-chip--unrecognized-border-color
- --ts-var-chip-background
- --ts-var-chip-border-radius
- --ts-var-chip-box-shadow
- --ts-var-chip-color
- --ts-var-chip-title-font-family
- --ts-var-dialog-body-background
- --ts-var-dialog-body-color
- --ts-var-dialog-footer-background
- --ts-var-dialog-header-background
- --ts-var-dialog-header-color
- --ts-var-home-favorite-suggestion-card-background
- --ts-var-home-favorite-suggestion-card-icon-color
- --ts-var-home-favorite-suggestion-card-text-color
- --ts-var-home-watchlist-selected-text-color
- --ts-var-kpi-analyze-text-color
- --ts-var-kpi-comparison-color
- --ts-var-kpi-hero-color
- --ts-var-kpi-negative-change-color
- --ts-var-kpi-positive-change-color
- --ts-var-left-nav-active-tab-background
- --ts-var-left-nav-active-tab-border-color
- --ts-var-left-nav-background
- --ts-var-left-nav-item-color
- --ts-var-left-nav-item-selection-background
- --ts-var-left-nav-item-selection-color
- --ts-var-left-nav-section-title-color
- --ts-var-left-nav-tab-icon-active-color
- --ts-var-left-nav-tab-icon-inactive-color
- --ts-var-list-hover-background
- --ts-var-list-selected-background
- --ts-var-liveboard-answer-viz-padding
- --ts-var-liveboard-chip--active-background
- --ts-var-liveboard-chip--hover-background
- --ts-var-liveboard-chip-background
- --ts-var-liveboard-chip-color
- --ts-var-liveboard-cross-filter-layout-background
- --ts-var-liveboard-dual-column-breakpoint
- --ts-var-liveboard-edit-bar-background
- --ts-var-liveboard-edit-toolbar-border
- --ts-var-liveboard-edit-toolbar-hover-background
- --ts-var-liveboard-edit-toolbar-hover-text-color
- --ts-var-liveboard-edit-toolbar-selected-background
- --ts-var-liveboard-edit-toolbar-selected-text-color
- --ts-var-liveboard-edit-toolbar-text
- --ts-var-liveboard-group-background
- --ts-var-liveboard-group-border-color
- --ts-var-liveboard-group-description-font-color
- --ts-var-liveboard-group-padding
- --ts-var-liveboard-group-tile-background
- --ts-var-liveboard-group-tile-description-font-color
- --ts-var-liveboard-group-tile-padding
- --ts-var-liveboard-group-tile-title-font-color
- --ts-var-liveboard-group-tile-title-font-size
- --ts-var-liveboard-group-tile-title-font-weight
- --ts-var-liveboard-group-title-font-color
- --ts-var-liveboard-group-title-font-size
- --ts-var-liveboard-group-title-font-weight
- --ts-var-liveboard-header-action-button-active-color
- --ts-var-liveboard-header-action-button-background
- --ts-var-liveboard-header-action-button-font-color
- --ts-var-liveboard-header-action-button-hover-color
- --ts-var-liveboard-header-background
- --ts-var-liveboard-header-badge-active-color
- --ts-var-liveboard-header-badge-background
- --ts-var-liveboard-header-badge-font-color
- --ts-var-liveboard-header-badge-hover-color
- --ts-var-liveboard-header-badge-modified-background
- --ts-var-liveboard-header-badge-modified-font-color
- --ts-var-liveboard-header-font-color
- --ts-var-liveboard-header-horizontal-margin
- --ts-var-liveboard-insight-tile-background
- --ts-var-liveboard-insight-tile-failure-color
- --ts-var-liveboard-insight-tile-font-color
- --ts-var-liveboard-insight-tile-icon-color
- --ts-var-liveboard-insight-tile-success-color
- --ts-var-liveboard-layout-background
- --ts-var-liveboard-notetitle-body-font-color
- --ts-var-liveboard-notetitle-heading-font-color
- --ts-var-liveboard-single-column-breakpoint
- --ts-var-liveboard-styling-button-active-background
- --ts-var-liveboard-styling-button-background
- --ts-var-liveboard-styling-button-hover-background
- --ts-var-liveboard-styling-button-hover-text-color
- --ts-var-liveboard-styling-button-shadow
- --ts-var-liveboard-styling-button-text-color
- --ts-var-liveboard-styling-color-palette-background
- --ts-var-liveboard-styling-panel-border-color
- --ts-var-liveboard-styling-panel-text-color
- --ts-var-liveboard-tab-active-border-color
- --ts-var-liveboard-tab-background
- --ts-var-liveboard-tab-border-radius
- --ts-var-liveboard-tab-color
- --ts-var-liveboard-tab-font-family
- --ts-var-liveboard-tab-font-size
- --ts-var-liveboard-tab-font-weight
- --ts-var-liveboard-tab-hover-background
- --ts-var-liveboard-tab-hover-color
- --ts-var-liveboard-tab-list-border-color
- --ts-var-liveboard-tab-selected-background
- --ts-var-liveboard-tab-selected-color
- --ts-var-liveboard-tab-selected-font-weight
- --ts-var-liveboard-tab-selected-indicator-height
- --ts-var-liveboard-tile-background
- --ts-var-liveboard-tile-border-color
- --ts-var-liveboard-tile-border-radius
- --ts-var-liveboard-tile-padding
- --ts-var-liveboard-tile-table-header-background
- --ts-var-liveboard-tile-title-fontsize
- --ts-var-liveboard-tile-title-fontweight
- --ts-var-menu--hover-background
- --ts-var-menu-background
- --ts-var-menu-color
- --ts-var-menu-font-family
- --ts-var-menu-selected-text-color
- --ts-var-menu-text-transform
- --ts-var-nav-background
- --ts-var-nav-color
- --ts-var-parameter-chip-active-background
- --ts-var-parameter-chip-active-text-color
- --ts-var-parameter-chip-background
- --ts-var-parameter-chip-hover-background
- --ts-var-parameter-chip-hover-text-color
- --ts-var-parameter-chip-text-color
- --ts-var-root-background
- --ts-var-root-color
- --ts-var-root-font-family
- --ts-var-root-text-transform
- --ts-var-saved-chats-bg
- --ts-var-saved-chats-border-color
- --ts-var-saved-chats-btn-bg
- --ts-var-saved-chats-btn-hover-bg
- --ts-var-saved-chats-conv-active-bg
- --ts-var-saved-chats-conv-hover-bg
- --ts-var-saved-chats-conv-text-color
- --ts-var-saved-chats-footer-border
- --ts-var-saved-chats-header-border
- --ts-var-saved-chats-section-title-color
- --ts-var-saved-chats-text-color
- --ts-var-saved-chats-title-color
- --ts-var-search-auto-complete-background
- --ts-var-search-auto-complete-font-color
- --ts-var-search-auto-complete-subtext-font-color
- --ts-var-search-bar-auto-complete-hover-background
- --ts-var-search-bar-background
- --ts-var-search-bar-navigation-help-text-background
- --ts-var-search-bar-text-font-color
- --ts-var-search-bar-text-font-family
- --ts-var-search-bar-text-font-style
- --ts-var-search-data-button-background
- --ts-var-search-data-button-font-color
- --ts-var-search-data-button-font-family
- --ts-var-search-navigation-button-background
- --ts-var-search-submit-button--hover-background
- --ts-var-search-submit-button-background
- --ts-var-search-submit-button-border-color
- --ts-var-search-submit-button-border-radius
- --ts-var-search-submit-button-border-width
- --ts-var-search-submit-button-color
- --ts-var-segment-control-hover-background
- --ts-var-share-chat-header-background
- --ts-var-share-chat-header-container-background
- --ts-var-share-chat-header-input-background
- --ts-var-share-chat-header-input-border-color
- --ts-var-share-chat-header-input-text-color
- --ts-var-share-chat-header-title-color
- --ts-var-shared-conv-header-background
- --ts-var-shared-conv-header-border-color
- --ts-var-shared-conv-title-color
- --ts-var-shimmer-background
- --ts-var-shimmer-sweep-background
- --ts-var-side-panel-width
- --ts-var-spotiq-analyze-crosscorrelation-card-background
- --ts-var-spotiq-analyze-forecasting-card-background
- --ts-var-spotiq-analyze-outlier-card-background
- --ts-var-spotiq-analyze-trend-card-background
- --ts-var-spotter-chat-width
- --ts-var-spotter-input-background
- --ts-var-spotter-prompt-background
- --ts-var-spotterviz-border-color
- --ts-var-spotterviz-emptystate-spotterviz-color
- --ts-var-spotterviz-expanded-border-color
- --ts-var-spotterviz-footer-text-color
- --ts-var-spotterviz-input-background
- --ts-var-spotterviz-input-cta-color
- --ts-var-spotterviz-input-cta-hover-color
- --ts-var-spotterviz-input-placeholder-color
- --ts-var-spotterviz-last-checkpoint-background
- --ts-var-spotterviz-last-checkpoint-border
- --ts-var-spotterviz-message-background
- --ts-var-spotterviz-panel-background
- --ts-var-spotterviz-prompt-card-background
- --ts-var-spotterviz-prompt-card-hover-background
- --ts-var-spotterviz-reference-icon-hover-background
- --ts-var-spotterviz-reference-icon-selected-background
- --ts-var-spotterviz-reference-icon-selected-color
- --ts-var-spotterviz-text-primary
- --ts-var-spotterviz-text-secondary
- --ts-var-spotterviz-thinking-completed-header-color
- --ts-var-spotterviz-thinking-cta-hover-background
- --ts-var-spotterviz-thinking-inprogress-header-color
- --ts-var-spotterviz-thinking-work-done-icon-color
- --ts-var-spotterviz-tool-border-color
- --ts-var-spotterviz-tool-call-background
- --ts-var-spotterviz-tool-feedback-button-background
- --ts-var-spotterviz-tool-feedback-button-hover
- --ts-var-spotterviz-tool-json-input-background
- --ts-var-spotterviz-tool-json-input-color
- --ts-var-spotterviz-tool-title-color
- --ts-var-spotterviz-upload-card-thumbnail-background
- --ts-var-spotterviz-usermessage-icon-background
- --ts-var-spotterviz-usermessage-icon-hover
- --ts-var-tab--hover-background
- --ts-var-tab--hover-color
- --ts-var-tab--selected-background
- --ts-var-tab--selected-color
- --ts-var-tab--selected-font-weight
- --ts-var-tab--selected-indicator-color
- --ts-var-tab--selected-indicator-height
- --ts-var-tab--vertical--selected-indicator-color
- --ts-var-tab--vertical--selected-indicator-width
- --ts-var-tab--vertical-list-border-color
- --ts-var-tab-background
- --ts-var-tab-border-radius
- --ts-var-tab-color
- --ts-var-tab-font-family
- --ts-var-tab-font-size
- --ts-var-tab-font-weight
- --ts-var-tab-height
- --ts-var-tab-list-border-color
- --ts-var-tab-padding
- --ts-var-unsaved-filter-indicator-color
- --ts-var-viz-background
- --ts-var-viz-border-radius
- --ts-var-viz-box-shadow
- --ts-var-viz-description-color
- --ts-var-viz-description-font-family
- --ts-var-viz-description-text-transform
- --ts-var-viz-legend-hover-background
- --ts-var-viz-title-color
- --ts-var-viz-title-font-family
- --ts-var-viz-title-text-transform
The list of customization css variables. These are the only allowed variables possible.
Indexπ
Propertiesπ
--ts-var-answer-chart-hover-backgroundπ
--ts-var-answer-chart-hover-background: string
Optional
Background color of the chart type element when a user hovers over a chart type on the chart selection widget.
--ts-var-answer-chart-select-backgroundπ
--ts-var-answer-chart-select-background: string
Optional
Background color of the selected chart type on the chart selection widget.
--ts-var-answer-data-panel-background-colorπ
--ts-var-answer-data-panel-background-color: string
Optional
Background color of the data panel.
--ts-var-answer-edit-panel-background-colorπ
--ts-var-answer-edit-panel-background-color: string
Optional
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-view-table-chart-switcher-active-backgroundπ
--ts-var-answer-view-table-chart-switcher-active-background: string
Optional
Background color of the currently selected chart type in the chart switcher.
--ts-var-answer-view-table-chart-switcher-backgroundπ
--ts-var-answer-view-table-chart-switcher-background: string
Optional
Background color of the chart switcher on search results and Answer pages.
--ts-var-application-colorπ
--ts-var-application-color: string
Optional
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-axis-data-label-colorπ
--ts-var-axis-data-label-color: string
Optional
Font color of the X and Y axis labels.
--ts-var-axis-data-label-font-familyπ
--ts-var-axis-data-label-font-family: string
Optional
Font family specification for X and Y axis labels.
--ts-var-axis-title-colorπ
--ts-var-axis-title-color: string
Optional
Font color of axis title on charts.
--ts-var-axis-title-font-familyπ
--ts-var-axis-title-font-family: string
Optional
Font family specification for the X and Y axis title text.
--ts-var-button--icon-border-radiusπ
--ts-var-button--icon-border-radius: string
Optional
Border-radius of small buttons such as secondary buttons. For example, share and favorite buttons.
--ts-var-button--primary--active-backgroundπ
--ts-var-button--primary--active-background: string
Optional
Backgroud color of the primary buttons when active.
--ts-var-button--primary--font-familyπ
--ts-var-button--primary--font-family: string
Optional
Font family specification for the text on primary buttons.
--ts-var-button--primary--hover-backgroundπ
--ts-var-button--primary--hover-background: string
Optional
Background color of the primary buttons on hover.
--ts-var-button--primary-backgroundπ
--ts-var-button--primary-background: string
Optional
Background color of the primary buttons. For example, the primary buttons such as Pin* and Save.
--ts-var-button--primary-border-colorπ
--ts-var-button--primary-border-color: string
Optional
Border color of the primary buttons.
Visible only when --ts-var-button-border-width is set.
--ts-var-button--primary-colorπ
--ts-var-button--primary-color: string
Optional
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-font-weightπ
--ts-var-button--primary-font-weight: string
Optional
Font weight of the text on the primary buttons.
Overrides --ts-var-button-font-weight for primary buttons.
--ts-var-button--primary-gapπ
--ts-var-button--primary-gap: string
Optional
Space between the icon and the label in the primary buttons.
Overrides --ts-var-button-gap for primary buttons.
--ts-var-button--primary-min-widthπ
--ts-var-button--primary-min-width: string
Optional
Minimum width of the primary buttons with text.
Overrides --ts-var-button-min-width for primary buttons.
--ts-var-button--primary-paddingπ
--ts-var-button--primary-padding: string
Optional
Padding of the primary buttons with text.
Overrides --ts-var-button-padding for primary buttons.
--ts-var-button--secondary--active-backgroundπ
--ts-var-button--secondary--active-background: string
Optional
Backgroud color of the secondary buttons when active.
--ts-var-button--secondary--font-familyπ
--ts-var-button--secondary--font-family: string
Optional
Font family specification for the text on the secondary buttons.
--ts-var-button--secondary--hover-backgroundπ
--ts-var-button--secondary--hover-background: string
Optional
Background color of the secondary button on hover.
--ts-var-button--secondary-backgroundπ
--ts-var-button--secondary-background: string
Optional
Background color of the secondary buttons.
--ts-var-button--secondary-border-colorπ
--ts-var-button--secondary-border-color: string
Optional
Border color of the secondary buttons.
Visible only when --ts-var-button-border-width is set.
--ts-var-button--secondary-colorπ
--ts-var-button--secondary-color: string
Optional
Font color of the text on the secondary buttons.
--ts-var-button--secondary-font-weightπ
--ts-var-button--secondary-font-weight: string
Optional
Font weight of the text on the secondary buttons.
Overrides --ts-var-button-font-weight for secondary buttons.
--ts-var-button--secondary-gapπ
--ts-var-button--secondary-gap: string
Optional
Space between the icon and the label in the secondary buttons.
Overrides --ts-var-button-gap for secondary buttons.
--ts-var-button--secondary-min-widthπ
--ts-var-button--secondary-min-width: string
Optional
Minimum width of the secondary buttons with text.
Overrides --ts-var-button-min-width for secondary buttons.
--ts-var-button--secondary-paddingπ
--ts-var-button--secondary-padding: string
Optional
Padding of the secondary buttons with text.
Overrides --ts-var-button-padding for secondary buttons.
--ts-var-button--tertiary--active-backgroundπ
--ts-var-button--tertiary--active-background: string
Optional
Backgroud color of the tertiary buttons when active.
--ts-var-button--tertiary--font-familyπ
--ts-var-button--tertiary--font-family: string
Optional
Font family specification for the text on the tertiary buttons. Defaults to the inherited font.
--ts-var-button--tertiary--hover-backgroundπ
--ts-var-button--tertiary--hover-background: string
Optional
Background color of the tertiary button when a user hovers over these buttons.
--ts-var-button--tertiary-backgroundπ
--ts-var-button--tertiary-background: string
Optional
Background color of the tertiary button.
--ts-var-button--tertiary-border-colorπ
--ts-var-button--tertiary-border-color: string
Optional
Border color of the tertiary buttons.
Visible only when --ts-var-button-border-width is set.
--ts-var-button--tertiary-colorπ
--ts-var-button--tertiary-color: string
Optional
Font color of the tertiary button. For example, the Undo, Redo, and Reset buttons on the Search page.
--ts-var-button--tertiary-font-weightπ
--ts-var-button--tertiary-font-weight: string
Optional
Font weight of the text on the tertiary buttons.
Overrides --ts-var-button-font-weight for tertiary buttons.
--ts-var-button--tertiary-gapπ
--ts-var-button--tertiary-gap: string
Optional
Space between the icon and the label in the tertiary buttons.
Overrides --ts-var-button-gap for tertiary buttons.
--ts-var-button--tertiary-min-widthπ
--ts-var-button--tertiary-min-width: string
Optional
Minimum width of the tertiary buttons with text.
Overrides --ts-var-button-min-width for tertiary buttons.
--ts-var-button--tertiary-paddingπ
--ts-var-button--tertiary-padding: string
Optional
Padding of the tertiary buttons with text.
Overrides --ts-var-button-padding for tertiary buttons.
--ts-var-button-border-radiusπ
--ts-var-button-border-radius: string
Optional
Border-radius of main buttons. For example, the Search data button in the top navigation panel.
--ts-var-button-border-widthπ
--ts-var-button-border-width: string
Optional
Border width of buttons. Default: 0. To show a border on a button variant,
also set its border color, for example, --ts-var-button--primary-border-color.
--ts-var-button-font-sizeπ
--ts-var-button-font-size: string
Optional
Font size of the button label. The line height scales proportionally.
--ts-var-button-font-weightπ
--ts-var-button-font-weight: string
Optional
Font weight of the button label. Default: 400.
--ts-var-button-gapπ
--ts-var-button-gap: string
Optional
Space between the icon and the label in a button. Default: 8px.
--ts-var-button-heightπ
--ts-var-button-height: string
Optional
Height of buttons. Icon-only buttons remain square when this is set.
--ts-var-button-min-widthπ
--ts-var-button-min-width: string
Optional
Minimum width of buttons with text. Applies to all button sizes and variants.
--ts-var-button-paddingπ
--ts-var-button-padding: string
Optional
Padding of buttons with text, for example, 6px 16px. Applies to all button
sizes and variants.
--ts-var-cca-modal-summary-header-backgroundπ
--ts-var-cca-modal-summary-header-background: string
Optional
Background color of the summary header in the CCA modal.
--ts-var-change-analysis-insights-backgroundπ
--ts-var-change-analysis-insights-background: string
Optional
Background color of the change analysis insights.
--ts-var-chart-heatmap-legend-label-colorπ
--ts-var-chart-heatmap-legend-label-color: string
Optional
Font color of the legend label in the heatmap chart.
--ts-var-chart-heatmap-legend-title-colorπ
--ts-var-chart-heatmap-legend-title-color: string
Optional
Font color of the legend title in the heatmap chart.
--ts-var-chart-treemap-legend-label-colorπ
--ts-var-chart-treemap-legend-label-color: string
Optional
Font color of the legend label in the treemap chart.
--ts-var-chart-treemap-legend-title-colorπ
--ts-var-chart-treemap-legend-title-color: string
Optional
Font color of the legend title in the treemap chart.
--ts-var-checkbox-active-colorπ
--ts-var-checkbox-active-color: string
Optional
Border and font color of checkbox in active state.
--ts-var-checkbox-background-colorπ
--ts-var-checkbox-background-color: string
Optional
Background color of checkbox.
--ts-var-checkbox-border-colorπ
--ts-var-checkbox-border-color: string
Optional
Border color of checkbox.
--ts-var-checkbox-checked-colorπ
--ts-var-checkbox-checked-color: string
Optional
Border color and font color of checkbox in checked state.
--ts-var-checkbox-checked-disabledπ
--ts-var-checkbox-checked-disabled: string
Optional
Border and font color of checkbox in disabled state.
--ts-var-checkbox-error-borderπ
--ts-var-checkbox-error-border: string
Optional
Border color of checkbox in error state.
--ts-var-checkbox-hover-borderπ
--ts-var-checkbox-hover-border: string
Optional
Border color of checkbox in hover state.
--ts-var-chip--active-backgroundπ
--ts-var-chip--active-background: string
Optional
Background color of the filter chips when selected.
--ts-var-chip--active-colorπ
--ts-var-chip--active-color: string
Optional
Font color of the filter label when a filter chip is selected
--ts-var-chip--attribute--hover-backgroundπ
--ts-var-chip--attribute--hover-background: string
Optional
Background color of attribute chips on hover.
--ts-var-chip--attribute--hover-border-colorπ
--ts-var-chip--attribute--hover-border-color: string
Optional
Border color of attribute chips on hover.
Defaults to --ts-var-chip--attribute--hover-background.
--ts-var-chip--attribute-backgroundπ
--ts-var-chip--attribute-background: string
Optional
Background color of attribute chips, such as attribute tokens in the search bar
and attribute columns in the data panel.
In chip components, --ts-var-chip-background takes precedence when set.
--ts-var-chip--attribute-border-colorπ
--ts-var-chip--attribute-border-color: string
Optional
Border color of attribute chips.
Defaults to --ts-var-chip--attribute-background.
--ts-var-chip--date--hover-backgroundπ
--ts-var-chip--date--hover-background: string
Optional
Background color of date chips on hover.
--ts-var-chip--date--hover-border-colorπ
--ts-var-chip--date--hover-border-color: string
Optional
Border color of date chips on hover.
Defaults to --ts-var-chip--date--hover-background.
--ts-var-chip--date-backgroundπ
--ts-var-chip--date-background: string
Optional
Background color of date chips, such as date tokens in the search bar
and date columns in the data panel.
In chip components, --ts-var-chip-background takes precedence when set.
--ts-var-chip--date-border-colorπ
--ts-var-chip--date-border-color: string
Optional
Border color of date chips.
Defaults to --ts-var-chip--date-background.
--ts-var-chip--filter--hover-backgroundπ
--ts-var-chip--filter--hover-background: string
Optional
Background color of filter chips on hover.
--ts-var-chip--filter--hover-border-colorπ
--ts-var-chip--filter--hover-border-color: string
Optional
Border color of filter chips on hover.
Defaults to --ts-var-chip--filter--hover-background.
--ts-var-chip--filter-backgroundπ
--ts-var-chip--filter-background: string
Optional
Background color of filter chips, such as filter tokens in the search bar.
Also applies to neutral column chips, such as formula and set columns.
In chip components, --ts-var-chip-background takes precedence when set.
--ts-var-chip--filter-border-colorπ
--ts-var-chip--filter-border-color: string
Optional
Border color of filter chips.
Defaults to --ts-var-chip--filter-background.
--ts-var-chip--hover-backgroundπ
--ts-var-chip--hover-background: string
Optional
Background color of filter chips on hover.
--ts-var-chip--hover-colorπ
--ts-var-chip--hover-color: string
Optional
Font color of the text on filter chips when hovered over.
--ts-var-chip--measure--hover-backgroundπ
--ts-var-chip--measure--hover-background: string
Optional
Background color of measure chips on hover.
--ts-var-chip--measure--hover-border-colorπ
--ts-var-chip--measure--hover-border-color: string
Optional
Border color of measure chips on hover.
Defaults to --ts-var-chip--measure--hover-background.
--ts-var-chip--measure-backgroundπ
--ts-var-chip--measure-background: string
Optional
Background color of measure chips, such as measure tokens in the search bar
and measure columns in the data panel.
In chip components, --ts-var-chip-background takes precedence when set.
--ts-var-chip--measure-border-colorπ
--ts-var-chip--measure-border-color: string
Optional
Border color of measure chips.
Defaults to --ts-var-chip--measure-background.
--ts-var-chip--unrecognized--hover-backgroundπ
--ts-var-chip--unrecognized--hover-background: string
Optional
Background color of unrecognized tokens in the search bar on hover.
--ts-var-chip--unrecognized--hover-border-colorπ
--ts-var-chip--unrecognized--hover-border-color: string
Optional
Border color of unrecognized tokens in the search bar on hover.
Defaults to --ts-var-chip--unrecognized--hover-background.
--ts-var-chip--unrecognized-backgroundπ
--ts-var-chip--unrecognized-background: string
Optional
Background color of unrecognized tokens in the search bar.
--ts-var-chip--unrecognized-border-colorπ
--ts-var-chip--unrecognized-border-color: string
Optional
Border color of unrecognized tokens in the search bar.
Defaults to --ts-var-chip--unrecognized-background.
--ts-var-chip-backgroundπ
--ts-var-chip-background: string
Optional
Background color of filter chips.
--ts-var-chip-border-radiusπ
--ts-var-chip-border-radius: string
Optional
Border-radius of filter chips.
--ts-var-chip-box-shadowπ
--ts-var-chip-box-shadow: string
Optional
Shadow effect for filter chips.
--ts-var-chip-colorπ
--ts-var-chip-color: string
Optional
Font color of the text on filter chips.
--ts-var-chip-title-font-familyπ
--ts-var-chip-title-font-family: string
Optional
Font family specification for the text on filter chips.
--ts-var-dialog-body-backgroundπ
--ts-var-dialog-body-background: string
Optional
Background color of the dialogs.
--ts-var-dialog-body-colorπ
--ts-var-dialog-body-color: string
Optional
Font color of the body text displayed on dialogs.
--ts-var-dialog-footer-backgroundπ
--ts-var-dialog-footer-background: string
Optional
Background color of the footer area on dialogs.
--ts-var-dialog-header-backgroundπ
--ts-var-dialog-header-background: string
Optional
Background color of the header text on dialogs.
--ts-var-dialog-header-colorπ
--ts-var-dialog-header-color: string
Optional
Font color of the header text on dialogs.
--ts-var-home-favorite-suggestion-card-backgroundπ
--ts-var-home-favorite-suggestion-card-background: string
Optional
Background for favorite carousel find your favorites card in modular home.
--ts-var-home-favorite-suggestion-card-icon-colorπ
--ts-var-home-favorite-suggestion-card-icon-color: string
Optional
Icon color for favorite carousel find your favorites card in modular home.
--ts-var-home-favorite-suggestion-card-text-colorπ
--ts-var-home-favorite-suggestion-card-text-color: string
Optional
Text color for favorite carousel find your favorites card in modular home.
--ts-var-home-watchlist-selected-text-colorπ
--ts-var-home-watchlist-selected-text-color: string
Optional
Text color for slected item in modular homeβs watchlist.
--ts-var-kpi-analyze-text-colorπ
--ts-var-kpi-analyze-text-color: string
Optional
Font color of the analyze text in the KPI widget.
--ts-var-kpi-comparison-colorπ
--ts-var-kpi-comparison-color: string
Optional
Font color of the comparison text in the KPI widget.
--ts-var-kpi-hero-colorπ
--ts-var-kpi-hero-color: string
Optional
Font color of the hero text in the KPI widget.
--ts-var-kpi-negative-change-colorπ
--ts-var-kpi-negative-change-color: string
Optional
Color of the negative change in the KPI.
--ts-var-kpi-positive-change-colorπ
--ts-var-kpi-positive-change-color: string
Optional
Color of the positive change in the KPI.
--ts-var-left-nav-active-tab-backgroundπ
--ts-var-left-nav-active-tab-background: string
Optional
Background color of the active tab in the left navigation panel.
--ts-var-left-nav-active-tab-border-colorπ
--ts-var-left-nav-active-tab-border-color: string
Optional
Border color of the active tab in the left navigation panel.
--ts-var-left-nav-backgroundπ
--ts-var-left-nav-background: string
Optional
Background color of the left navigation panel.
--ts-var-left-nav-item-colorπ
--ts-var-left-nav-item-color: string
Optional
Font color of the items in the left navigation panel.
--ts-var-left-nav-item-selection-backgroundπ
--ts-var-left-nav-item-selection-background: string
Optional
Background color of the selected item in the left navigation panel.
--ts-var-left-nav-item-selection-colorπ
--ts-var-left-nav-item-selection-color: string
Optional
Font color of the selected item in the left navigation panel.
--ts-var-left-nav-section-title-colorπ
--ts-var-left-nav-section-title-color: string
Optional
Font color of the section title in the left navigation panel.
--ts-var-left-nav-tab-icon-active-colorπ
--ts-var-left-nav-tab-icon-active-color: string
Optional
Color of the active tab icon in the left navigation panel.
--ts-var-left-nav-tab-icon-inactive-colorπ
--ts-var-left-nav-tab-icon-inactive-color: string
Optional
Color of the inactive tab icon in the left navigation panel.
--ts-var-list-hover-backgroundπ
--ts-var-list-hover-background: string
Optional
Background for hover state in list
--ts-var-list-selected-backgroundπ
--ts-var-list-selected-background: string
Optional
Background for selected state in list
--ts-var-liveboard-answer-viz-paddingπ
--ts-var-liveboard-answer-viz-padding: string
Optional
Padding of the answer viz in the Liveboard.
--ts-var-liveboard-chip--active-backgroundπ
--ts-var-liveboard-chip--active-background: string
Optional
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--hover-backgroundπ
--ts-var-liveboard-chip--hover-background: string
Optional
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-backgroundπ
--ts-var-liveboard-chip-background: string
Optional
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-colorπ
--ts-var-liveboard-chip-color: string
Optional
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-cross-filter-layout-backgroundπ
--ts-var-liveboard-cross-filter-layout-background: string
Optional
Background color of the cross filter layout in the Liveboard.
--ts-var-liveboard-dual-column-breakpointπ
--ts-var-liveboard-dual-column-breakpoint: string
Optional
Breakpoint for the dual column layout in the Liveboard.
--ts-var-liveboard-edit-bar-backgroundπ
--ts-var-liveboard-edit-bar-background: string
Optional
Background color of the edit bar in the Liveboard.
--ts-var-liveboard-edit-toolbar-borderπ
--ts-var-liveboard-edit-toolbar-border: string
Optional
Border color of the Liveboard edit header toolbar.
--ts-var-liveboard-edit-toolbar-hover-backgroundπ
--ts-var-liveboard-edit-toolbar-hover-background: string
Optional
Hover background color of unselected items in the Liveboard edit header toolbar.
--ts-var-liveboard-edit-toolbar-hover-text-colorπ
--ts-var-liveboard-edit-toolbar-hover-text-color: string
Optional
Hover text color of unselected items in the Liveboard edit header toolbar.
--ts-var-liveboard-edit-toolbar-selected-backgroundπ
--ts-var-liveboard-edit-toolbar-selected-background: string
Optional
Background color of the selected section in the Liveboard edit header toolbar.
--ts-var-liveboard-edit-toolbar-selected-text-colorπ
--ts-var-liveboard-edit-toolbar-selected-text-color: string
Optional
Text color of the selected section in the Liveboard edit header toolbar.
--ts-var-liveboard-edit-toolbar-textπ
--ts-var-liveboard-edit-toolbar-text: string
Optional
Text color of unselected items in the Liveboard edit header toolbar.
--ts-var-liveboard-group-backgroundπ
--ts-var-liveboard-group-background: string
Optional
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-border-colorπ
--ts-var-liveboard-group-border-color: string
Optional
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-description-font-colorπ
--ts-var-liveboard-group-description-font-color: string
Optional
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-paddingπ
--ts-var-liveboard-group-padding: string
Optional
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-tile-backgroundπ
--ts-var-liveboard-group-tile-background: string
Optional
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-description-font-colorπ
--ts-var-liveboard-group-tile-description-font-color: string
Optional
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-paddingπ
--ts-var-liveboard-group-tile-padding: string
Optional
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-title-font-colorπ
--ts-var-liveboard-group-tile-title-font-color: string
Optional
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-sizeπ
--ts-var-liveboard-group-tile-title-font-size: string
Optional
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-weightπ
--ts-var-liveboard-group-tile-title-font-weight: string
Optional
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-title-font-colorπ
--ts-var-liveboard-group-title-font-color: string
Optional
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-sizeπ
--ts-var-liveboard-group-title-font-size: string
Optional
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-weightπ
--ts-var-liveboard-group-title-font-weight: string
Optional
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-header-action-button-active-colorπ
--ts-var-liveboard-header-action-button-active-color: string
Optional
Font color of the action button in the Liveboard header on active.
--ts-var-liveboard-header-action-button-backgroundπ
--ts-var-liveboard-header-action-button-background: string
Optional
Background color of the action button in the Liveboard header.
--ts-var-liveboard-header-action-button-font-colorπ
--ts-var-liveboard-header-action-button-font-color: string
Optional
Font color of the action button in the Liveboard header.
--ts-var-liveboard-header-action-button-hover-colorπ
--ts-var-liveboard-header-action-button-hover-color: string
Optional
Font color of the action button in the Liveboard header on hover.
--ts-var-liveboard-header-backgroundπ
--ts-var-liveboard-header-background: string
Optional
Background color of the header in the Liveboard.
--ts-var-liveboard-header-badge-active-colorπ
--ts-var-liveboard-header-badge-active-color: string
Optional
Font color of the badge in the Liveboard header on active.
--ts-var-liveboard-header-badge-backgroundπ
--ts-var-liveboard-header-badge-background: string
Optional
Background color of the badge in the Liveboard header.
--ts-var-liveboard-header-badge-font-colorπ
--ts-var-liveboard-header-badge-font-color: string
Optional
Font color of the badge in the Liveboard header.
--ts-var-liveboard-header-badge-hover-colorπ
--ts-var-liveboard-header-badge-hover-color: string
Optional
Font color of the badge in the Liveboard header on hover.
--ts-var-liveboard-header-badge-modified-backgroundπ
--ts-var-liveboard-header-badge-modified-background: string
Optional
Background color of the modified badge in the Liveboard header.
--ts-var-liveboard-header-badge-modified-font-colorπ
--ts-var-liveboard-header-badge-modified-font-color: string
Optional
Font color of the modified badge in the Liveboard header.
--ts-var-liveboard-header-font-colorπ
--ts-var-liveboard-header-font-color: string
Optional
Font color of the header in the Liveboard.
--ts-var-liveboard-header-horizontal-marginπ
--ts-var-liveboard-header-horizontal-margin: string
Optional
Left and right margin of the header and the tab/filter section of an
embedded Liveboard. Use alongside the liveboardGutter view config to
keep the header aligned with a custom tile-grid gutter.
Version : SDK: 1.51.1 | ThoughtSpot Cloud: 26.8.0.cl
--ts-var-liveboard-insight-tile-backgroundπ
--ts-var-liveboard-insight-tile-background: string
Optional
Background color of the insight tiles in the Liveboard.
--ts-var-liveboard-insight-tile-failure-colorπ
--ts-var-liveboard-insight-tile-failure-color: string
Optional
Font color of the failure text in the insight tiles in the Liveboard.
--ts-var-liveboard-insight-tile-font-colorπ
--ts-var-liveboard-insight-tile-font-color: string
Optional
Font color of the insight tiles in the Liveboard.
--ts-var-liveboard-insight-tile-icon-colorπ
--ts-var-liveboard-insight-tile-icon-color: string
Optional
Icon color of the insight tiles in the Liveboard.
--ts-var-liveboard-insight-tile-success-colorπ
--ts-var-liveboard-insight-tile-success-color: string
Optional
Font color of the success text in the insight tiles in the Liveboard.
--ts-var-liveboard-layout-backgroundπ
--ts-var-liveboard-layout-background: string
Optional
Background color of the layout in the Liveboard.
--ts-var-liveboard-notetitle-body-font-colorπ
--ts-var-liveboard-notetitle-body-font-color: string
Optional
Font color of the body of the note title in the Liveboard.
--ts-var-liveboard-notetitle-heading-font-colorπ
--ts-var-liveboard-notetitle-heading-font-color: string
Optional
Font color of the heading of the note title in the Liveboard.
--ts-var-liveboard-single-column-breakpointπ
--ts-var-liveboard-single-column-breakpoint: string
Optional
Breakpoint for the single column layout in the Liveboard.
--ts-var-liveboard-styling-button-active-backgroundπ
--ts-var-liveboard-styling-button-active-background: string
Optional
Background color of the styling button in the Liveboard when active.
--ts-var-liveboard-styling-button-backgroundπ
--ts-var-liveboard-styling-button-background: string
Optional
Background color of the styling button in the Liveboard.
--ts-var-liveboard-styling-button-hover-backgroundπ
--ts-var-liveboard-styling-button-hover-background: string
Optional
Background color of the styling button in the Liveboard on hover.
--ts-var-liveboard-styling-button-hover-text-colorπ
--ts-var-liveboard-styling-button-hover-text-color: string
Optional
Text color of the styling button in the Liveboard on hover.
--ts-var-liveboard-styling-button-shadowπ
--ts-var-liveboard-styling-button-shadow: string
Optional
Box shadow of the styling button in the Liveboard.
--ts-var-liveboard-styling-button-text-colorπ
--ts-var-liveboard-styling-button-text-color: string
Optional
Text color of the styling button in the Liveboard.
--ts-var-liveboard-styling-color-palette-backgroundπ
--ts-var-liveboard-styling-color-palette-background: string
Optional
Background color of the color palette in the Liveboard styling panel.
--ts-var-liveboard-styling-panel-border-colorπ
--ts-var-liveboard-styling-panel-border-color: string
Optional
Border color of the styling panel in the Liveboard.
--ts-var-liveboard-styling-panel-text-colorπ
--ts-var-liveboard-styling-panel-text-color: string
Optional
Text color of the styling panel in the Liveboard.
--ts-var-liveboard-tab-active-border-colorπ
--ts-var-liveboard-tab-active-border-color: string
Optional
Border color of the active tab in the Liveboard.
--ts-var-liveboard-tab-backgroundπ
--ts-var-liveboard-tab-background: string
Optional
Background color of the tab items in the Liveboard.
--ts-var-liveboard-tab-border-radiusπ
--ts-var-liveboard-tab-border-radius: string
Optional
Border radius of the tab items in the Liveboard.
--ts-var-liveboard-tab-colorπ
--ts-var-liveboard-tab-color: string
Optional
Font color of the tab labels in the Liveboard.
--ts-var-liveboard-tab-font-familyπ
--ts-var-liveboard-tab-font-family: string
Optional
Font family specification for the tab labels in the Liveboard.
--ts-var-liveboard-tab-font-sizeπ
--ts-var-liveboard-tab-font-size: string
Optional
Font size of the tab labels in the Liveboard.
--ts-var-liveboard-tab-font-weightπ
--ts-var-liveboard-tab-font-weight: string
Optional
Font weight of the tab labels in the Liveboard.
--ts-var-liveboard-tab-hover-backgroundπ
--ts-var-liveboard-tab-hover-background: string
Optional
Background color of the tab items in the Liveboard on hover.
--ts-var-liveboard-tab-hover-colorπ
--ts-var-liveboard-tab-hover-color: string
Optional
Font color of the hover tab in the Liveboard.
--ts-var-liveboard-tab-list-border-colorπ
--ts-var-liveboard-tab-list-border-color: string
Optional
Border color of the divider above the tab strip in the Liveboard.
--ts-var-liveboard-tab-selected-backgroundπ
--ts-var-liveboard-tab-selected-background: string
Optional
Background color of the selected tab item in the Liveboard.
--ts-var-liveboard-tab-selected-colorπ
--ts-var-liveboard-tab-selected-color: string
Optional
Font color of the selected tab label in the Liveboard.
--ts-var-liveboard-tab-selected-font-weightπ
--ts-var-liveboard-tab-selected-font-weight: string
Optional
Font weight of the selected tab label in the Liveboard.
--ts-var-liveboard-tab-selected-indicator-heightπ
--ts-var-liveboard-tab-selected-indicator-height: string
Optional
Thickness of the underline indicator on the selected tab in the Liveboard.
--ts-var-liveboard-tile-backgroundπ
--ts-var-liveboard-tile-background: string
Optional
Background color of the tiles in the Liveboard.
--ts-var-liveboard-tile-border-colorπ
--ts-var-liveboard-tile-border-color: string
Optional
Border color of the tiles in the Liveboard.
--ts-var-liveboard-tile-border-radiusπ
--ts-var-liveboard-tile-border-radius: string
Optional
Border radius of the tiles in the Liveboard.
--ts-var-liveboard-tile-paddingπ
--ts-var-liveboard-tile-padding: string
Optional
Padding of the tiles in the Liveboard.
--ts-var-liveboard-tile-table-header-backgroundπ
--ts-var-liveboard-tile-table-header-background: string
Optional
Background color of the table header in the Liveboard.
--ts-var-liveboard-tile-title-fontsizeπ
--ts-var-liveboard-tile-title-fontsize: string
Optional
Font size of the title of the tiles in the Liveboard.
--ts-var-liveboard-tile-title-fontweightπ
--ts-var-liveboard-tile-title-fontweight: string
Optional
Font weight of the title of the tiles in the Liveboard.
--ts-var-menu--hover-backgroundπ
--ts-var-menu--hover-background: string
Optional
Background color for menu items on hover.
--ts-var-menu-backgroundπ
--ts-var-menu-background: string
Optional
Background color of menu panels.
--ts-var-menu-colorπ
--ts-var-menu-color: string
Optional
Font color of the menu items.
--ts-var-menu-font-familyπ
--ts-var-menu-font-family: string
Optional
Font family specification for the menu items.
--ts-var-menu-selected-text-colorπ
--ts-var-menu-selected-text-color: string
Optional
Text color for selected menu items.
--ts-var-menu-text-transformπ
--ts-var-menu-text-transform: string
Optional
Text capitalization specification for the menu items.
--ts-var-nav-backgroundπ
--ts-var-nav-background: string
Optional
Background color of the top navigation panel.
--ts-var-nav-colorπ
--ts-var-nav-color: string
Optional
Font color of the top navigation panel.
--ts-var-parameter-chip-active-backgroundπ
--ts-var-parameter-chip-active-background: string
Optional
Background color of the parameter chips in the Liveboard on active.
--ts-var-parameter-chip-active-text-colorπ
--ts-var-parameter-chip-active-text-color: string
Optional
Font color of the parameter chips in the Liveboard on active.
--ts-var-parameter-chip-backgroundπ
--ts-var-parameter-chip-background: string
Optional
Background color of the parameter chips in the Liveboard.
--ts-var-parameter-chip-hover-backgroundπ
--ts-var-parameter-chip-hover-background: string
Optional
Background color of the parameter chips in the Liveboard on hover.
--ts-var-parameter-chip-hover-text-colorπ
--ts-var-parameter-chip-hover-text-color: string
Optional
Font color of the parameter chips in the Liveboard on hover.
--ts-var-parameter-chip-text-colorπ
--ts-var-parameter-chip-text-color: string
Optional
Font color of the parameter chips in the Liveboard.
--ts-var-root-backgroundπ
--ts-var-root-background: string
Optional
Background color of the Liveboard, visualization, Search, and Answer pages.
--ts-var-root-colorπ
--ts-var-root-color: string
Optional
Color of the text on application pages.
--ts-var-root-font-familyπ
--ts-var-root-font-family: string
Optional
Font type for the text on application pages.
--ts-var-root-text-transformπ
--ts-var-root-text-transform: string
Optional
Text transformation specification for UI elements in the app.
--ts-var-saved-chats-bgπ
--ts-var-saved-chats-bg: string
Optional
Background color for the saved chats sidebar container.
--ts-var-saved-chats-border-colorπ
--ts-var-saved-chats-border-color: string
Optional
Border color for the saved chats sidebar container.
--ts-var-saved-chats-btn-bgπ
--ts-var-saved-chats-btn-bg: string
Optional
Background color for buttons (new chat, toggle, footer) in the saved chats sidebar.
--ts-var-saved-chats-btn-hover-bgπ
--ts-var-saved-chats-btn-hover-bg: string
Optional
Hover background color for buttons in the saved chats sidebar.
--ts-var-saved-chats-conv-active-bgπ
--ts-var-saved-chats-conv-active-bg: string
Optional
Background color for the active/selected conversation in the saved chats sidebar.
--ts-var-saved-chats-conv-hover-bgπ
--ts-var-saved-chats-conv-hover-bg: string
Optional
Background color for conversation items on hover in the saved chats sidebar.
--ts-var-saved-chats-conv-text-colorπ
--ts-var-saved-chats-conv-text-color: string
Optional
Text color for conversation items in the saved chats sidebar.
--ts-var-saved-chats-footer-borderπ
--ts-var-saved-chats-footer-border: string
Optional
Border color for the saved chats sidebar footer.
--ts-var-saved-chats-header-borderπ
--ts-var-saved-chats-header-border: string
Optional
Border color for the saved chats sidebar header.
--ts-var-saved-chats-section-title-colorπ
--ts-var-saved-chats-section-title-color: string
Optional
Color for section title text (e.g., "Recent", "Older") in the saved chats sidebar.
--ts-var-saved-chats-text-colorπ
--ts-var-saved-chats-text-color: string
Optional
Text color for the saved chats sidebar container.
--ts-var-saved-chats-title-colorπ
--ts-var-saved-chats-title-color: string
Optional
Color for the saved chats sidebar title text.
--ts-var-search-auto-complete-backgroundπ
--ts-var-search-auto-complete-background: string
Optional
Background color of the search suggestions panel.
--ts-var-search-auto-complete-font-colorπ
--ts-var-search-auto-complete-font-color: string
Optional
Font color of the text in the search suggestion panel.
--ts-var-search-auto-complete-subtext-font-colorπ
--ts-var-search-auto-complete-subtext-font-color: string
Optional
Font color of the sub-text that appears below the keyword in the search suggestion panel.
--ts-var-search-bar-auto-complete-hover-backgroundπ
--ts-var-search-bar-auto-complete-hover-background: string
Optional
Background color of the search suggestion block on hover.
--ts-var-search-bar-backgroundπ
--ts-var-search-bar-background: string
Optional
Background color of the search bar.
--ts-var-search-bar-navigation-help-text-backgroundπ
--ts-var-search-bar-navigation-help-text-background: string
Optional
Background color of the navigation help text that appears at the bottom of the search suggestions panel.
--ts-var-search-bar-text-font-colorπ
--ts-var-search-bar-text-font-color: string
Optional
Font color of the text in the Search bar.
--ts-var-search-bar-text-font-familyπ
--ts-var-search-bar-text-font-family: string
Optional
Font of the text in the Search bar.
--ts-var-search-bar-text-font-styleπ
--ts-var-search-bar-text-font-style: string
Optional
Font style of the text in the Search bar.
--ts-var-search-data-button-backgroundπ
--ts-var-search-data-button-background: string
Optional
Background color of the Search data button.
--ts-var-search-data-button-font-colorπ
--ts-var-search-data-button-font-color: string
Optional
Color of the text on the Search data button.
--ts-var-search-data-button-font-familyπ
--ts-var-search-data-button-font-family: string
Optional
Font of the text on the Search data button.
--ts-var-search-navigation-button-backgroundπ
--ts-var-search-navigation-button-background: string
Optional
Background color of the navigation panel that allows you to undo, redo, and reset search operations.
--ts-var-search-submit-button--hover-backgroundπ
--ts-var-search-submit-button--hover-background: string
Optional
Background color of the submit (Go) button in the search box on hover. Defaults to the background color set for the non-hover state.
--ts-var-search-submit-button-backgroundπ
--ts-var-search-submit-button-background: string
Optional
Background color of the submit (Go) button in the search box.
--ts-var-search-submit-button-border-colorπ
--ts-var-search-submit-button-border-color: string
Optional
Border color of the submit (Go) button in the search box.
Visible only when --ts-var-search-submit-button-border-width is set.
--ts-var-search-submit-button-border-radiusπ
--ts-var-search-submit-button-border-radius: string
Optional
Border radius of the submit (Go) button in the search box. Default: 40px.
--ts-var-search-submit-button-border-widthπ
--ts-var-search-submit-button-border-width: string
Optional
Border width of the submit (Go) button in the search box. Default: 0.
The button has a fixed size, so a border reduces its inner area.
--ts-var-search-submit-button-colorπ
--ts-var-search-submit-button-color: string
Optional
Color of the label and icon on the submit (Go) button in the search box.
--ts-var-segment-control-hover-backgroundπ
--ts-var-segment-control-hover-background: string
Optional
Background for hover state in segment control.
--ts-var-share-chat-header-backgroundπ
--ts-var-share-chat-header-background: string
Optional
Background color of the share chat headerβs inner title/actions row. Defaults to transparent.
--ts-var-share-chat-header-container-backgroundπ
--ts-var-share-chat-header-container-background: string
Optional
Background gradient color-stop of the share chat headerβs outer container (senderβs pre-share header). Defaults to transparent.
--ts-var-share-chat-header-input-backgroundπ
--ts-var-share-chat-header-input-background: string
Optional
Background color of the title input field in the share chat header.
--ts-var-share-chat-header-input-border-colorπ
--ts-var-share-chat-header-input-border-color: string
Optional
Border color of the title input field in the share chat header.
--ts-var-share-chat-header-input-text-colorπ
--ts-var-share-chat-header-input-text-color: string
Optional
Font color of the title input field in the share chat header.
--ts-var-share-chat-header-title-colorπ
--ts-var-share-chat-header-title-color: string
Optional
Font color of the title text in the share chat header.
--ts-var-shared-conv-header-backgroundπ
--ts-var-shared-conv-header-background: string
Optional
Background color of the shared conversation header (recipientβs read-only view).
--ts-var-shared-conv-header-border-colorπ
--ts-var-shared-conv-header-border-color: string
Optional
Border color of the shared conversation header.
--ts-var-shared-conv-title-colorπ
--ts-var-shared-conv-title-color: string
Optional
Font color of the title text in the shared conversation header.
--ts-var-shimmer-backgroundπ
--ts-var-shimmer-background: string
Optional
Background color of the shimmer loading effect. Also affects the saved chats sidebarβs new-chat shimmer, which shares the same style.
--ts-var-shimmer-sweep-backgroundπ
--ts-var-shimmer-sweep-background: string
Optional
Background color of the shimmer sweep animationβs gradient mid-stop.
--ts-var-side-panel-widthπ
--ts-var-side-panel-width: string
Optional
Width of the side panel in the Liveboard.
--ts-var-spotiq-analyze-crosscorrelation-card-backgroundπ
--ts-var-spotiq-analyze-crosscorrelation-card-background: string
Optional
Background color of the crosscorrelation card in the SpotIQ analyze.
--ts-var-spotiq-analyze-forecasting-card-backgroundπ
--ts-var-spotiq-analyze-forecasting-card-background: string
Optional
Background color of the forecasting card in the SpotIQ analyze.
--ts-var-spotiq-analyze-outlier-card-backgroundπ
--ts-var-spotiq-analyze-outlier-card-background: string
Optional
Background color of the outlier card in the SpotIQ analyze.
--ts-var-spotiq-analyze-trend-card-backgroundπ
--ts-var-spotiq-analyze-trend-card-background: string
Optional
Background color of the trend card in the SpotIQ analyze.
--ts-var-spotter-chat-widthπ
--ts-var-spotter-chat-width: string
Optional
Width of the Spotter chat window.
--ts-var-spotter-input-backgroundπ
--ts-var-spotter-input-background: string
Optional
Background color of the input box in the Spotter page.
--ts-var-spotter-prompt-backgroundπ
--ts-var-spotter-prompt-background: string
Optional
Background color of the previously asked prompt message in the Spotter page.
--ts-var-spotterviz-border-colorπ
--ts-var-spotterviz-border-color: string
Optional
Shared border color used throughout SpotterViz: input box, user message, header underline, left panel border, thinking step connector and dots, and the attached-file upload card.
--ts-var-spotterviz-emptystate-spotterviz-colorπ
--ts-var-spotterviz-emptystate-spotterviz-color: string
Optional
Text color for the SpotterViz label in the empty state, displayed below the SpotterViz icon.
--ts-var-spotterviz-expanded-border-colorπ
--ts-var-spotterviz-expanded-border-color: string
Optional
Expanded user chat message bubble border color in SpotterViz.
--ts-var-spotterviz-footer-text-colorπ
--ts-var-spotterviz-footer-text-color: string
Optional
Text color of the SpotterViz footer.
--ts-var-spotterviz-input-backgroundπ
--ts-var-spotterviz-input-background: string
Optional
Background color of the chat input field in SpotterViz.
--ts-var-spotterviz-input-cta-colorπ
--ts-var-spotterviz-input-cta-color: string
Optional
CTA color of the chat input field in SpotterViz.
--ts-var-spotterviz-input-cta-hover-colorπ
--ts-var-spotterviz-input-cta-hover-color: string
Optional
CTA hover color of the chat input field in SpotterViz.
--ts-var-spotterviz-input-placeholder-colorπ
--ts-var-spotterviz-input-placeholder-color: string
Optional
Placeholder text color of the chat input field in SpotterViz.
--ts-var-spotterviz-last-checkpoint-backgroundπ
--ts-var-spotterviz-last-checkpoint-background: string
Optional
Background color of the last checkpoint section in SpotterViz.
--ts-var-spotterviz-last-checkpoint-borderπ
--ts-var-spotterviz-last-checkpoint-border: string
Optional
Border color of the last checkpoint section in SpotterViz.
--ts-var-spotterviz-message-backgroundπ
--ts-var-spotterviz-message-background: string
Optional
Background color of the user chat message bubble in SpotterViz.
--ts-var-spotterviz-panel-backgroundπ
--ts-var-spotterviz-panel-background: string
Optional
Main panel background of the SpotterViz.
--ts-var-spotterviz-prompt-card-backgroundπ
--ts-var-spotterviz-prompt-card-background: string
Optional
Background color of the starter prompt cards in SpotterViz.
--ts-var-spotterviz-prompt-card-hover-backgroundπ
--ts-var-spotterviz-prompt-card-hover-background: string
Optional
Background hover color of the starter prompt cards in SpotterViz.
--ts-var-spotterviz-reference-icon-hover-backgroundπ
--ts-var-spotterviz-reference-icon-hover-background: string
Optional
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-selected-backgroundπ
--ts-var-spotterviz-reference-icon-selected-background: string
Optional
Background color for the reference-mode selected state β applies to the reference mode toggle button when active and the icon badge on each referenced-entity chip and the attached-file chip in the chat input.
--ts-var-spotterviz-reference-icon-selected-colorπ
--ts-var-spotterviz-reference-icon-selected-color: string
Optional
Icon color for the reference-mode selected state β applies to the toggle button when active and the icon badge on each referenced-entity chip and the attached-file chip in the chat input.
--ts-var-spotterviz-text-primaryπ
--ts-var-spotterviz-text-primary: string
Optional
Primary text color in SpotterViz, also used for tool response text, upvote/downvote buttons, and other primary content.
--ts-var-spotterviz-text-secondaryπ
--ts-var-spotterviz-text-secondary: string
Optional
Secondary text color in SpotterViz.
--ts-var-spotterviz-thinking-completed-header-colorπ
--ts-var-spotterviz-thinking-completed-header-color: string
Optional
Color of the thinking step header when completed in SpotterViz.
--ts-var-spotterviz-thinking-cta-hover-backgroundπ
--ts-var-spotterviz-thinking-cta-hover-background: string
Optional
Hover background color for the working/work done CTA in SpotterViz.
--ts-var-spotterviz-thinking-inprogress-header-colorπ
--ts-var-spotterviz-thinking-inprogress-header-color: string
Optional
Color of the thinking step header when in progress in SpotterViz.
--ts-var-spotterviz-thinking-work-done-icon-colorπ
--ts-var-spotterviz-thinking-work-done-icon-color: string
Optional
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-tool-border-colorπ
--ts-var-spotterviz-tool-border-color: string
Optional
Border color of tool call panels in SpotterViz.
--ts-var-spotterviz-tool-call-backgroundπ
--ts-var-spotterviz-tool-call-background: string
Optional
Background color of tool call panels in SpotterViz.
--ts-var-spotterviz-tool-feedback-button-backgroundπ
--ts-var-spotterviz-tool-feedback-button-background: string
Optional
Background color of the upvote/downvote feedback buttons in SpotterViz.
--ts-var-spotterviz-tool-feedback-button-hoverπ
--ts-var-spotterviz-tool-feedback-button-hover: string
Optional
Hover background color of the upvote/downvote feedback buttons in SpotterViz.
--ts-var-spotterviz-tool-json-input-backgroundπ
--ts-var-spotterviz-tool-json-input-background: string
Optional
Background color of the JSON input panel inside a tool call in SpotterViz.
--ts-var-spotterviz-tool-json-input-colorπ
--ts-var-spotterviz-tool-json-input-color: string
Optional
Text color of the JSON input panel inside a tool call in SpotterViz.
--ts-var-spotterviz-tool-title-colorπ
--ts-var-spotterviz-tool-title-color: string
Optional
Color of tool titles and icons in SpotterViz.
--ts-var-spotterviz-upload-card-thumbnail-backgroundπ
--ts-var-spotterviz-upload-card-thumbnail-background: string
Optional
Background color of the file-type thumbnail on the attached-file card in the SpotterViz chat input.
--ts-var-spotterviz-usermessage-icon-backgroundπ
--ts-var-spotterviz-usermessage-icon-background: string
Optional
Background color of the user chat message expand button in SpotterViz.
--ts-var-spotterviz-usermessage-icon-hoverπ
--ts-var-spotterviz-usermessage-icon-hover: string
Optional
Hover color for the user chat message expand button in SpotterViz.
--ts-var-tab--hover-backgroundπ
--ts-var-tab--hover-background: string
Optional
Background color of the tab items on hover.
--ts-var-tab--hover-colorπ
--ts-var-tab--hover-color: string
Optional
Font color of the tab labels on hover.
--ts-var-tab--selected-backgroundπ
--ts-var-tab--selected-background: string
Optional
Background color of the selected tab item.
--ts-var-tab--selected-colorπ
--ts-var-tab--selected-color: string
Optional
Font color of the selected tab label.
--ts-var-tab--selected-font-weightπ
--ts-var-tab--selected-font-weight: string
Optional
Font weight of the selected tab label.
--ts-var-tab--selected-indicator-colorπ
--ts-var-tab--selected-indicator-color: string
Optional
Color of the underline indicator on the selected tab, in the horizontal tab layout.
--ts-var-tab--selected-indicator-heightπ
--ts-var-tab--selected-indicator-height: string
Optional
Thickness of the underline indicator on the selected tab, in the horizontal tab layout.
--ts-var-tab--vertical--selected-indicator-colorπ
--ts-var-tab--vertical--selected-indicator-color: string
Optional
Color of the side rail indicator on the selected tab, in the vertical tab layout.
--ts-var-tab--vertical--selected-indicator-widthπ
--ts-var-tab--vertical--selected-indicator-width: string
Optional
Thickness of the side rail indicator on the selected tab, in the vertical tab layout.
--ts-var-tab--vertical-list-border-colorπ
--ts-var-tab--vertical-list-border-color: string
Optional
Border color of the divider beside the vertical tab strip.
--ts-var-tab-backgroundπ
--ts-var-tab-background: string
Optional
Background color of the tabs.
--ts-var-tab-border-radiusπ
--ts-var-tab-border-radius: string
Optional
Border radius of the tab items.
--ts-var-tab-colorπ
--ts-var-tab-color: string
Optional
Font color of the tab labels.
--ts-var-tab-font-familyπ
--ts-var-tab-font-family: string
Optional
Font family specification for the tab labels.
--ts-var-tab-font-sizeπ
--ts-var-tab-font-size: string
Optional
Font size of the tab labels.
--ts-var-tab-font-weightπ
--ts-var-tab-font-weight: string
Optional
Font weight of the tab labels.
--ts-var-tab-heightπ
--ts-var-tab-height: string
Optional
Height of the tab items.
--ts-var-tab-list-border-colorπ
--ts-var-tab-list-border-color: string
Optional
Border color of the divider below the horizontal tab strip.
--ts-var-tab-paddingπ
--ts-var-tab-padding: string
Optional
Padding of the tab items.
--ts-var-unsaved-filter-indicator-colorπ
--ts-var-unsaved-filter-indicator-color: string
Optional
Color of the dot indicator shown on a filter or parameter chip in the centralized filter modal on a Liveboard. The dot appears when the filter or parameter value has been modified but the changes are not yet applied to the Liveboard.
Version : SDK: 1.52.0 | ThoughtSpot: 26.10.0.cl
--ts-var-viz-backgroundπ
--ts-var-viz-background: string
Optional
Background color of the visualization tiles and header panel on a Liveboard.
--ts-var-viz-border-radiusπ
--ts-var-viz-border-radius: string
Optional
Border-radius for the visualization tiles and header panel on a Liveboard.
--ts-var-viz-box-shadowπ
--ts-var-viz-box-shadow: string
Optional
Box shadow property for the visualization tiles and header panel on a Liveboard.
--ts-var-viz-description-colorπ
--ts-var-viz-description-color: string
Optional
Font color of the description text and subtitle of a visualization or Answer.
--ts-var-viz-description-font-familyπ
--ts-var-viz-description-font-family: string
Optional
Font family specification of description text and subtitle of a visualization or Answer.
--ts-var-viz-description-text-transformπ
--ts-var-viz-description-text-transform: string
Optional
Text transformation specification for description text and subtitle of a visualization or Answer.
--ts-var-viz-legend-hover-backgroundπ
--ts-var-viz-legend-hover-background: string
Optional
Background color of the legend on a visualization or Answer.
--ts-var-viz-title-colorπ
--ts-var-viz-title-color: string
Optional
Font color of the title text of a visualization or Answer.
--ts-var-viz-title-font-familyπ
--ts-var-viz-title-font-family: string
Optional
Font family specification for the title text of a visualization/Answer.
--ts-var-viz-title-text-transformπ
--ts-var-viz-title-text-transform: string
Optional
Text transformation specification for visualization and Answer titles.