# CSS variables reference > For the complete documentation index, see [llms.txt](https://developers.thoughtspot.com/docs/llms.txt) Source: https://developers.thoughtspot.com/docs/css-variables-reference # CSS variables reference The [ThoughtSpot CSS customization framework]({{navprefix}}/{{css-customization}}) defines a number of variables for applying styles throughout embedded ThoughSpot components. ## Application-wide settings The following example shows the supported variables: | Variable | Description | | --- | --- | | `--ts-var-root-background` | Background color of the Liveboard, visualization, Search, and Answer pages. | | `--ts-var-root-color` | Color of the text on application pages. This variable definition does not affect the object description text that appears on list pages such as **Liveboards** and **Answers**. | | `--ts-var-root-secondary-color` | Color of the text on application pages. | | `--ts-var-root-font-family` | Font type for the text on application pages. | | `--ts-var-root-text-transform` | Text transformation specification for UI elements in the app. | | `--ts-var-application-color` | Font color of the text on toggle buttons such as All, Answers, and Liveboards on the homepage, chart and table titles on the Answer page, and object titles on list pages such as **Liveboards** and **Answers**. | | `--ts-var-segment-control-hover-background` | Background color of the toggle buttons to switch between All, Answers, and Liveboards on the homepage. | ## Navigation panel The navigation panel appears at the top of the application page. | Variable | Description | | --- | --- | | `--ts-var-nav-background` | Background color of the top navigation panel. | | `--ts-var-nav-color` | Font color of the top navigation panel. | | `--ts-var-search-data-button-background` | Background color of the **Search data** button. | | `--ts-var-search-data-button-font-color` | Color of the text on the **Search data** button. | | `--ts-var-search-data-button-font-family` | Font of the text on the **Search data** button. | ### Left navigation panel Use the following CSS variables to customize the left navigation panel in full application embedding. | Variable | Description | | --- | --- | | `--ts-var-left-nav-background` | Background color of the left navigation panel. | | `--ts-var-left-nav-active-tab-background` | Background color of the active tab in the left navigation panel. | | `--ts-var-left-nav-active-tab-border-color` | Border color of the active tab in the left navigation panel. | | `--ts-var-left-nav-section-title-color` | Font color of section title labels in the left navigation panel. | | `--ts-var-left-nav-item-color` | Font color of navigation items in the left navigation panel. | | `--ts-var-left-nav-item-selection-color` | Font color of the selected navigation item. | | `--ts-var-left-nav-item-selection-background` | Background color of the selected navigation item. | | `--ts-var-left-nav-tab-icon-active-color` | Icon color of the active tab in the left navigation panel. | | `--ts-var-left-nav-tab-icon-inactive-color` | Icon color of inactive tabs in the left navigation panel. | ## Menu elements CSS Variables for **More** menu ![the more options menu](/docs/doc-images/images/icon-more-10px.png), contextual menu, and dropdown selection panels. The **More** menu appears on Liveboard, visualization, answers, SpotIQ, and several other application pages. Contextual menu appears when you right-click on a data point on a chart or table. | Variable | Description | | --- | --- | | `--ts-var-menu-color` | Font color of the menu items. | | `--ts-var-menu-background` | Background color of menu panels. | | `--ts-var-menu-font-family` | Font family specification for the menu items. | | `--ts-var-menu-text-transform` | Text capitalization specification for the menu items. | | `--ts-var-menu--hover-background` | Background color for menu items on hover. | | `--ts-var-menu-separator-background` | Background color of the menu separator. | | `--ts-var-menu-selected-text-color` | Font color of the menu item in selected state. | ## Dialogs CSS variables for dialogs that prompt the user to select an option or enter information. For example, the Liveboard pin dialog that appears on clicking **Pin** on the Search results or Answer page, the **Show underlying data** dialog that appears on clicking **Show underlying data** on a Liveboard visualization or Answer. | Variable | Description | | --- | --- | | `--ts-var-dialog-body-background` | Background color of the dialogs. | | `--ts-var-dialog-body-color` | Font color of the body text displayed on dialogs. | | `--ts-var-dialog-header-background` | Background color of the header text on dialogs. | | `--ts-var-dialog-header-color` | Font color of the header text on dialogs. | | `--ts-var-dialog-footer-background` | Background color of the footer area on dialogs. | ## Button elements ThoughtSpot application contains the following types of button elements: - Primary Buttons that trigger an action for an entire page or a container. For example, the **Go** button on the search bar. > **NOTE:** The Go button appears as a primary button when the search bar is in the focused state. If you click outside the search bar or execute the search query to load search results, the Go button changes to a secondary button. Primary buttons may contain text, text with an icon, or just an icon. - Secondary Buttons that trigger additional actions. For example, **More** menu ![the more options menu](/docs/doc-images/images/icon-more-10px.png) and **Share** buttons on a Liveboard. - Tertiary Buttons that are less prominent and trigger independent actions for sub-tasks on a page. For example,the **Undo**, **Redo**, **Reset** buttons on the Search page. Use the following variables to customize buttons. | Variable | Element type | Description | | --- | --- | --- | | `--ts-var-button-border-radius` | Main button | Border-radius of main buttons. For example, the **Search data** button in the top navigation panel. | | `--ts-var-button--icon-border-radius` | Small buttons | Border-radius of small buttons such as secondary buttons. For example, share and favorite buttons. | | `--ts-var-button--primary-color` | Primary button | 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-family` | Primary button | Font family specification for the text on primary buttons. | | `--ts-var-button--primary-background` | Primary button | Background color of the primary buttons. For example, the primary buttons such as **Pin** and **Save**. | | `--ts-var-button--primary—​hover-background` | Primary button | Background color of the primary button on hover | | `--ts-var-button—​primary—​active-background` | Primary button | Background color of the primary button when active | | `--ts-var-button--secondary-color` | Secondary button | Font color of the text on the secondary buttons. | | `--ts-var-button--secondary—​font-family` | Secondary button | Font family specification for the text on the secondary buttons. | | `--ts-var-button--secondary-background` | Secondary button | Background color of the secondary buttons. | | `--ts-var-button--secondary--hover-background` | Secondary button | Background color of the secondary button on hover. | | `--ts-var-button—​secondary—​active-background` | Secondary button | Background color of the secondary button when active. | | `--ts-var-button--tertiary-color` | Tertiary button | Font color of the tertiary button. For example, the **Undo**, **Redo**, and **Reset** buttons on the **Search** page. | | `--ts-var-button--tertiary-background` | Tertiary button | Background color of the tertiary button. | | `--ts-var-button--tertiary--hover-background` | Tertiary button | Background color of the tertiary button on hover. | | `--ts-var-button—​tertiary—​active-background` | Tertiary button | Background color of the tertiary button when active. | ## Checkboxes The following CSS variables are available for checkbox customization: | Variable | Description | | --- | --- | | `--ts-var-checkbox-error-border` | Border color of the checkbox that indicates an error. | | `--ts-var-checkbox-border-color` | Border color of the checkbox. | | `--ts-var-checkbox-hover-border` | Border color of the checkbox on hover. | | `--ts-var-checkbox-active-color` | Color of the checkbox in selection. | | `--ts-var-checkbox-checked-color` | Color of the checkbox in the enabled state. | | `--ts-var-checkbox-checked-disabled` | Color of the checkbox in the disabled state. | | `--ts-var-checkbox-highlighted-hover-color` | Color of the highlighted checkbox on hover. | | `--ts-var-checkbox-background-color` | Background color of the checkbox. | ## Lists To customize the background color of lists on pages such as **Liveboards**, **Answers**, **SpotIQ**, **Schedules**, and **Data objects** pages, use the following variables: | Variable | Description | | --- | --- | | `--ts-var-list-selected-background` | Background color of the selected list item. | | `--ts-var-list-hover-background` | Background color of the list item on hover | ## Liveboard Use the following variables to customize the Liveboard page elements. | Variable | Description | | --- | --- | | `--ts-var-liveboard-edit-bar-background` | Background color of the edit panel on the Liveboard. The edit panel is displayed when the Liveboard is in edit mode. | | `--ts-var-liveboard-cross-filter-layout-background` | Background color of the cross-filter layout. | | `--ts-var-liveboard-layout-background` | Background color of the Liveboard. | | `--ts-var-liveboard-tile-border-radius` | Border radius, which is the roundness of the corners of the tiles in a ThoughtSpot Liveboard. It does not apply to the Liveboard header. | | `--ts-var-parameter-chip-text-color` | Font color of the text on the parameter chips in the Liveboard. | | `--ts-var-liveboard-header-font-color` | Font color of the text on the Liveboard header. | | `--ts-var-liveboard-notetitle-heading-font-color` | Font color of the title of the note tile on the Liveboard. | | `--ts-var-liveboard-notetitle-body-font-color` | Font color of the text of the note tile on the Liveboard. | | `--ts-var-liveboard-header-horizontal-margin` | Horizontal margin of the Liveboard header. Set this to the same pixel value as `liveboardGutter` in `LiveboardViewConfig` to align the header with the tile grid. | ![CSS customization Liveboard page](/docs/doc-images/images/custom-css-viz.png) ### Liveboard grouping and styling Use the following variables to customize the Liveboard visualization groups and style elements. > **NOTE:** To enable this feature set isLiveboardMasterpiecesEnabled to true in the SDK . | Variable | Description | | --- | --- | | `--ts-var-liveboard-group-background` | Background color of the group. | | `--ts-var-liveboard-group-title-font-color` | Color of the group title. | | `--ts-var-liveboard-group-border-color` | Color of the border for the group. | | `--ts-var-liveboard-group-description-font-color` | Color of the group description text. | | `--ts-var-liveboard-group-tile-title-font-color` | Color of the title of the vizualizations in the group. | | `--ts-var-liveboard-group-tile-description-font-color` | Color of the description of the vizualizations in the group. | | `--ts-var-liveboard-tile-border-color` | Border color of the tiles in the Liveboard. | | `--ts-var-liveboard-tile-background` | Background color of the tiles in the Liveboard. | ![CSS customization for Liveboard groups](/docs/doc-images/images/lb-grp-styling.png) ## Liveboard layout Use the following CSS variables to control the column layout and responsive behavior of embedded Liveboards. | Variable | Description | | --- | --- | | `--ts-var-liveboard-dual-column-breakpoint` | Sets the container width threshold at which the Liveboard layout collapses from 12 columns to 2 columns. The default breakpoint is `1024px`. Accepts any valid CSS length value, for example, `900px`. | | `--ts-var-liveboard-single-column-breakpoint` | Sets the container width threshold at which the Liveboard layout collapses from 2 columns to a single column. The default breakpoint is `630px`. Accepts any valid CSS length value, for example, `480px` | ## Visualization and Answer Use the following variables to customize UI elements for Liveboard visualizations and Answers generated from Search data, Natural Language Search, and Spotter. ### Charts and tables You can customize the look and feel of the visualization tiles on a Liveboard, styles for title and description text of charts and tables. | Variable | Description | | --- | --- | | `--ts-var-viz-title-color` | Font color of the title text of a visualization or Answer. | | `--ts-var-viz-title-font-family` | Font family specification for the title text of a visualization/Answer. | | `--ts-var-viz-title-text-transform` | Text transformation specification for visualization and Answer titles. | | `--ts-var-viz-description-color` | Font color of the description text and subtitle of a visualization or Answer. | | `--ts-var-viz-description-font-family` | Font family specification of description text and subtitle of a visualization or Answer. | | `--ts-var-viz-description-text-transform` | Text transformation specification for description text and subtitle of a visualization or Answer. | | `--ts-var-viz-border-radius` | Border-radius for the visualization tiles and header panel on a Liveboard. | | `--ts-var-viz-box-shadow` | Box shadow property for the visualization tiles and header panel on a Liveboard. | | `--ts-var-viz-background` | Background color of the visualization tiles and header panel on a Liveboard. | | `--ts-var-viz-legend-hover-background` | Background color of the legend on a visualization or Answer. | ### Chart switcher To customize the chart switcher icon ![chart switcher](/docs/doc-images/images/chart-switcher-icon.png) on Answers, use the following variables: | Variable | Description | | --- | --- | | `--ts-var-answer-view-table-chart-switcher-background` | Background color of the chart switcher on search results and Answer pages. | | `--ts-var-answer-view-table-chart-switcher-active-background` | Background color of the currently selected chart type in the chart switcher. | ### Chart selection widget The chart selection widget appears on clicking the **Change visualization** icon ![the Change visualization icon](/docs/doc-images/images/icon-chart-20px.png) on the Answer page or when you open a visualization in the **Edit** mode. ![Chart selection widget](/docs/doc-images/images/chart-selection.png) Use the following variables to customize the background color of the chart type icons: | Variable | Description | | --- | --- | | `--ts-var-answer-chart-select-background` | Background color of the selected chart type on the chart selection widget. | | `--ts-var-answer-chart-hover-background` | Background color of the chart type element when a user hovers over a chart type on the chart selection widget. | ## Axis title and labels on charts Use the following variables to customize X-axis and Y-axis titles and labels on charts. | Variable | Description | | --- | --- | | `--ts-var-axis-title-color` | Font color of axis title on charts. | | `--ts-var-axis-title-font-family` | Font family specification for the X and Y axis title text. | | `--ts-var-axis-data-label-color` | Font color of the X and Y axis labels. | | `--ts-var-axis-data-label-font-family` | Font family specification for X and Y axis labels . | ### Filter chips on Liveboard and Answers Filter chips appear on the Liveboard, Answer, and visualization pages when filters are applied on charts and tables. You can use the following variables to customize the look and feel of filter chips. | Variable | Description | | --- | --- | | `--ts-var-chip-border-radius` | Border-radius of filter chips. | | `--ts-var-chip-box-shadow` | Shadow effect for filter chips. | | `--ts-var-chip-background` | Background color of filter chips. | | `--ts-var-chip--active-color` | Font color of the filter label when a filter chip is selected | | `--ts-var-chip--active-background` | Background color of the filter chips when selected. | | `--ts-var-chip--hover-color` | Font color of the text on filter chips when hovered over. | | `--ts-var-chip--hover-background` | Background color of filter chips on hover. | | `--ts-var-chip-color` | Font color of the text on filter chips. | | `--ts-var-chip-title-font-family` | Font family specification for the text on filter chips. | ## Spotter interface The Spotter interface includes several customizable components. | UI element | CSS variables | | --- | --- | | Conversation panel | Use the following variable to change the background color of the panel: `--ts-var-spotter-input-background` | | Prompt panel | The prompt panel appears after a user clicks the prompt button ![Spotter prompt](/docs/doc-images/images/spotter-prompt.png) to trigger a response from Spotter. The following CSS variable is available for prompt panel customization: `--ts-var-spotter-prompt-background` | | Buttons | To customize the Spotter prompt ![Spotter prompt](/docs/doc-images/images/spotter-prompt.png) button, use the CSS variables for primary buttons. For other buttons, use the relevant button styles listed in [Button elements]({{navprefix}}/{{customize-css-styles}}#_button_elements). | | Charts and tables generated by Spotter | Use [chart variables]({{navprefix}}/{{customize-css-styles}}#vizStyle). | | Application level settings for Spotter interface | Use [application-level CSS variables]({{navprefix}}/{{customize-css-styles}}#_application_wide_settings), such as `--ts-var-root-background` and `--ts-var-root-color`. | The following figure shows the UI components and elements that can be customized using CSS variables: ![Spotter customization](/docs/doc-images/images/spotter-custom-styles.png) ## Natural Language Search interface The Natural Language Search interface is also referred to as Sage Search. The Sage Search interface includes several elements such as the header, search bar, suggested queries, and sample questions panel. | Variable | Description | | --- | --- | | `--ts-var-sage-bar-header-background-color` | Background color of the header bar on the Sage Search page. | | `--ts-var-source-selector-background-color` | Background color of the data source selector. | | `--ts-var-sage-search-box-font-color` | Font color of the search text. | | `--ts-var-sage-search-box-background-color` | Background color of the Sage search box. | | `--ts-var-sage-embed-background-color` | Background color of the Answer page generated from a Sage Search query. | | `--ts-var-sage-seed-questions-background` | Background color of the sample questions panel. | | `--ts-var-sage-seed-questions-font-color` | Font color of the search query text in the sample questions panel. | | `--ts-var-sage-seed-questions-hover-background` | Background color of the sample question panel on hover | | `--ts-var-source-selector-hover-color` | Background color of the data source selector on hover. | | `--ts-var-sage-bar-img-url` _Not supported in 9.10.0.cl and later versions_ | URL path of the search icon on the header bar. | | `--ts-var-sage-bar-img-color` _Not supported in 9.10.0.cl and later versions_ | Color of the search icon on the header bar. | | `--ts-var-sage-bar-img-visibility` _Not supported in 9.10.0.cl and later versions_ | Visibility of the search icon on the header bar. | ## Search bar and Data panel The search bar element that allows passing search tokens. | Variable | Description | | --- | --- | | `--ts-var-search-bar-text-font-color` | Font color of the text in the Search bar. | | `--ts-var-search-bar-text-font-family` | Font of the text in the Search bar. | | `--ts-var-search-bar-text-font-style` | Font style of the text in the Search bar. | | `--ts-var-search-bar-background` | Background color of the search bar. | | `--ts-var-search-auto-complete-background` | Background color of the search suggestions panel. | | `--ts-var-search-navigation-button-background` | Background color of the navigation panel that allows you to undo, redo, and reset search operations. | | `--ts-var-search-bar-navigation-help-text-background` | Background color of the navigation help text that appears at the bottom of the search suggestions panel. | | `--ts-var-search-bar-auto-complete-hover-background` | Background color of the search suggestion block on hover. | | `--ts-var-search-auto-complete-font-color` | Font color of the text in the search suggestion panel. | | `--ts-var-search-auto-complete-subtext-font-color` | Font color of the sub-text that appears below the keyword in the search suggestion panel. | | `--ts-var-answer-data-panel-background-color` | Background color of the data panel. | | `--ts-var-answer-edit-panel-background-color` | Background color of the vertical panel on the right side of the Answer page, which includes the options to edit charts and tables. | ### UI element reference The following figure shows customizable components on the Search data page: ![Search components](/docs/doc-images/images/search-components-css.png) #### Search page (New Data panel experience) ![CSS customization Search page](/docs/doc-images/images/data-panel-newexp.png) #### Search page (Classic Data panel experience) ![CSS customization Search page](/docs/doc-images/images/custom-css-search.png) ## Homepage modules (New experience mode) If the new navigation and homepage experience is enabled on your instance and in the embedded view, the homepage presents favourites, KPI charts on the watchlist, a library of Liveboards and Answers, and trending charts as separate modular elements. To customize the look and feel of these elements, you can use the following CSS variables: | Variable | Description | | --- | --- | | `--ts-var-home-watchlist-selected-text-color` | Font color of the text in the selected panel in the Watchlist module. | | `--ts-var-home-card-color` | Background color of the app icons in the app selector panel. | | `--ts-var-home-favorite-suggestion-card-text-color` | Font color of the text on the favorites card. | | `--ts-var-home-favorite-suggestion-card-background` | Background color of the favorites card. | | `--ts-var-home-favorite-suggestion-card-icon-color` | Background color of the star icon on the favorites card. | | `--ts-var-home-favorite-suggestion-card-text-font-color` | Font color of the text on the favorites card. | ### UI element reference ![CSS customization homepage modules](/docs/doc-images/images/homepage-css-var.png) ## Sample CSS file with variable definitions ThoughtSpot provides a default CSS file containing the most common variables and rules supported in a given release version. The following is an example of what is included in the full variables file: ```css :root { /* Application-wide background, app-wide text color, app-wide font, app-wide text transform */ --ts-var-root-color: initial; --ts-var-root-background: initial; --ts-var-root-font-family: initial; --ts-var-root-text-transform: initial; --ts-var-application-color: initial; --ts-var-root-secondary-color: initial; /* Top navigation panel */ --ts-var-nav-color: var(--ts-var-root-color); --ts-var-nav-background: initial; /* Buttons */ /* Application-wide button design for main buttons. For example, Search data*/ --ts-var-button-border-radius: 5px; /* Application-wide button design for smaller buttons. For example, buttons with share and favorite icons*/ --ts-var-button--icon-border-radius: 5px; /* Primary buttons: For example, the Go button in the search bar, the Pin and Save buttons on the Search page */ --ts-var-button--primary-color: var(--ts-var-root-color); --ts-var-button--primary-background: initial; --ts-var-button--primary--hover-background: initial; --ts-var-button--primary--font-family: var(--ts-var-root-font-family); --ts-var-button--primary--active-background: initial; /* Secondary buttons. For example, the Edit and Explore buttons on the Liveboard page*/ --ts-var-button--secondary-color: var(--ts-var-root-color) --ts-var-button--secondary-background: initial; --ts-var-button--secondary--hover-background: initial; --ts-var-button--secondary--font-family: var(--ts-var-root-font-family); --ts-var-button--secondary--active-background: initial; /* Tertiary buttons. For example, the Undo, Redo buttons on the Search page*/ --ts-var-button--tertiary-color: var(--ts-var-root-color); --ts-var-button--tertiary-background: initial; --ts-var-button--tertiary--hover-background: initial; --ts-var-button--tertiary--active-background: initial; /* Checkboxes */ --ts-var-checkbox-error-border: initial; --ts-var-checkbox-border-color: initial; --ts-var-checkbox-hover-border: initial; --ts-var-checkbox-active-color: initial; --ts-var-checkbox-checked-color: initial; --ts-var-checkbox-checked-disabled: initial; --ts-var-checkbox-highlighted-hover-color: initial; --ts-var-checkbox-background-color: initial; /* Menu components */ --ts-var-menu-color: var(--ts-var-root-color); --ts-var-menu-background: initial; --ts-var-menu-font-family: var(--ts-var-root-font-family); --ts-var-menu-text-transform: var(--ts-var-root-text-transform); --ts-var-menu--hover-background: initial; --ts-var-menu-seperator-background: initial; --ts-var-menu-selected-text-color: initial; /* Dialogs and modals that prompt users to perform an action or enter information */ --ts-var-dialog-body-background: initial; --ts-var-dialog-body-color: var(--ts-var-root-color); --ts-var-dialog-header-background: initial; --ts-var-dialog-header-color: var(--ts-var-root-color); --ts-var-dialog-footer-background: initial; /* Segment control */ --ts-var-segment-control-hover-background: initial; /* Lists on pages such as Liveboards, Answers, Data objects */ --ts-var-list-selected-background: initial; --ts-var-list-hover-background: initial; /* Liveboard */ --ts-var-liveboard-edit-bar-background: initial; --ts-var-liveboard-cross-filter-layout-background: initial; /* Visualizations and Answers */ /* Title text */ --ts-var-viz-title-color: var(--ts-var-root-color); --ts-var-viz-title-font-family: var(--ts-var-root-font-family); --ts-var-viz-title-text-transform: var(--ts-var-root-text-transform); /* Subtitle and description text */ --ts-var-viz-description-color: var(--ts-var-root-color); --ts-var-viz-description-font-family: var(--ts-var-root-font-family); --ts-var-viz-description-text-transform: var(--ts-var-root-text-transform); /* Visualization tiles on a Liveboard*/ --ts-var-viz-border-radius: initial; --ts-var-viz-box-shadow: initial; --ts-var-viz-background: initial; --ts-var-viz-legend-hover-background: initial; /* Filter chips Liveboard and Answer pages */ --ts-var-chip-border-radius: initial; --ts-var-chip-title-font-family: var(--ts-var-root-font-family); --ts-var-chip-box-shadow: initial; --ts-var-chip-background: initial; --ts-var-chip-color: var(--ts-var-root-color); --ts-var-chip--hover-background: initial; --ts-var-chip--hover-color: var(--ts-var-root-color); --ts-var-chip--active-background: initial; --ts-var-chip--active-color: initial; /* Axis titles and labels*/ --ts-var-axis-title-color: var(--ts-var-root-color); --ts-var-axis-title-font-family: var(--ts-var-root-font-family); --ts-var-axis-data-label-color: var(--ts-var-root-color); --ts-var-axis-data-label-font-family: var(--ts-var-root-font-family); /* Chart selection widget on answers and visualizations*/ --ts-var-answer-chart-select-background: initial; --ts-var-answer-chart-hover-background: initial; /* Chart switcher on Answers*/ --ts-var-answer-view-table-chart-switcher-active-background: initial; --ts-var-answer-edit-panel-background-color: initial; /* Spotter interface */ --ts-var-spotter-input-background: initial; --ts-var-spotter-prompt-background: initial; /* Search bar, search navigation and auto-suggestion panels */ --ts-var-search-data-button-font-color: var(--ts-var-root-color); --ts-var-search-data-button-background: initial; --ts-var-search-data-button-font-family: var(--ts-var-root-font-family); --ts-var-search-bar-text-font-color: var(--ts-var-root-color); --ts-var-search-bar-text-font-family: var(--ts-var-root-font-family); --ts-var-search-bar-text-font-style: initial; --ts-var-search-bar-background: initial; --ts-var-search-auto-complete-background: initial; --ts-var-search-auto-complete-font-color: var(--ts-var-root-color); --ts-var-search-auto-complete-subtext-font-color: initial; --ts-var-search-navigation-button-background: initial; --ts-var-search-bar-navigation-help-text-background: initial; --ts-var-search-bar-auto-complete-hover-background: initial; /* Data and edit panels on Answer page */ --ts-var-answer-data-panel-background-color: initial; --ts-var-answer-view-table-chart-switcher-background: initial; /* Modular Homepage (New experience) */ --ts-var-home-watchlist-selected-text-color: initial; --ts-var-home-card-color: var(--ts-var-root-color); --ts-var-home-favorite-suggestion-card-text-color: initial; --ts-var-home-favorite-suggestion-card-text-font-color: initial; --ts-var-home-favorite-suggestion-card-background: initial; --ts-var-home-favorite-suggestion-card-icon-color: initial; /* Natural Language Search panel*/ --ts-var-sage-bar-header-background-color: initial; --ts-var-source-selector-background-color: initial; --ts-var-sage-search-box-font-color: initial; --ts-var-sage-search-box-background-color: initial; --ts-var-sage-embed-background-color: initial; --ts-var-sage-seed-questions-background: initial; --ts-var-sage-seed-questions-font-color: initial; --ts-var-sage-seed-questions-hover-background: initial; --ts-var-source-selector-hover-color: initial; } ``` ## Additional resources - [Custom CSS demo GitHub Repo](https://github.com/thoughtspot/custom-css-demo/blob/main/css-variables.css)