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-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-list-hover-background
- --ts-var-list-selected-background
- --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-root-background
- --ts-var-root-color
- --ts-var-root-font-family
- --ts-var-root-text-transform
- --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-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), and title text on the AI-generated charts and tables. 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-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—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-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-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-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-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-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-segment-control-hover-background🔗
--ts-var-segment-control-hover-background: string
Optional
Background for hover state in segment control.
--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.