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—​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
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
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đź”—
--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.