CustomCssVariables

CustomCssVariables

Table of Contents

The list of customization css variables. These are the only allowed variables possible.

Index🔗

--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—​font-family

--ts-var-button—​primary—​hover-background

--ts-var-button—​primary-background

--ts-var-button—​primary-color

--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—​hover-background

--ts-var-button—​tertiary-background

--ts-var-button—​tertiary-color

--ts-var-button-border-radius

--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

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

application color, it replaces #2770EF which is rd-color(blue,base) and its similar colors like rd-color(blue,60), rd-color(accent, base) and rd-color(text, accent) in the app.

--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—​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—​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—​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-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: 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.