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.