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-color
- --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-color
- --ts-var-button--tertiary--active-background
- --ts-var-button--tertiary--hover-background
- --ts-var-button--tertiary-background
- --ts-var-button--tertiary-color
- --ts-var-button-border-radius
- --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--hover-background
- --ts-var-chip--hover-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-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-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-hover-color
- --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-segment-control-hover-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-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-usermessage-icon-background
- --ts-var-spotterviz-usermessage-icon-hover
- --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-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--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-color🔗
--ts-var-button--secondary-color: string
Optional
Font color of the text on the 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--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-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-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-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.