This is the complete list of the CSS variables from facets-core at time of writing. These can be overridden to customize facets. If there's a customization you would like to make this is not in this table, unfortunately you cannot apply it. If you are unsure how any of these variables appear in a final facet set them to a bold color such as red or green (avoid blue and greys as the defaults tend towards blue and grey) and see the result.
A theme.css file is also in the distribution of facets-core, and another in facets-plugins. (This table doesn't include facets-plugins variables.)
| Variable Name | Description | Default |
|---|---|---|
| --facet-font-family | The font family used by the facets. i.e. CSS font-family.NOTE: Font sizes cannot be changed. |
"IBM Plex Sans", sans-serif |
| --facet-blueprint-background | The background color for the facets. i.e. CSS background-color. |
#FFFFFF |
| --facet-blueprint-border | The color of the top border (divider) for facets. i.e. border-top color.NOTE: The divider is a fixed solid 1px line. There are no variables to change this. |
#D9DADB |
| --facet-container-surface-foreground | The foreground color (text color) of the facet title. i.e. color. |
#1A1B1C |
| facet-bars | Variables that only apply to facet-bars facets. |
|
| --facet-bars-labels-foreground | The text color of individual bar labels. | #B2B3B4 |
| --facet-bars-labels-tick-background | The background color of bar ticks. | #B2B3B4 |
| --facet-bars-labels-marker-border | The label marker border color. | #D9DADB |
| --facet-bars-blueprint-border | The color assigned to the vertical hover highlight bar that appears when hovering over facet-bars. i.e. border-left colorNOTE: The bar is a fixed 4px solid line. |
#255DCC |
| --facet-bars-value-loading-background-stop-1 | facet-bars can be used to create a 'loading' animation. This is the background color at 0%.NOTE: There do not appear to be examples of using this. |
#F7F7F7 |
| --facet-bars-value-loading-background-stop-2 | facet-bars can be used to create a 'loading' animation. This is the background color at 50%.NOTE: There do not appear to be examples of using this. |
#F3F3F3 |
| --facet-bars-value-loading-background-stop-3 | facet-bars can be used to create a 'loading' animation. This is the background color at 100%.NOTE: There do not appear to be examples of using this. |
#F7F7F7 |
| --facet-bars-value-background-loading | The dominant color during a 'loading' animation. | #F7F7F7 |
| --facet-bars-value-bar-1-background-loading | The alternate color during a 'loading' animation. | #ECECEC |
| --facet-bars-value-background | The color of individual bars when not selected. | #EAEBEC |
| --facet-bars-value-background-contrast | The contrast color of individual bars when not selected. (Used for subselections?) | #F7F7F7 |
| --facet-bars-value-background-selected | The color of individual bars when selected. | #EBF1FC |
| --facet-bars-value-background-contrast-selected | The contrast color of individual bars when selected. | #EAEBEC |
| --facet-bars-value-background-contrast-selected-hover | The contrast color of individual bars when selected and hovered over | #EAEBEC |
| --facet-bars-value-background-unselected | The color of individual bars when unselected. | #EAEBEC |
| --facet-bars-value-background-contrast-unselected | The contrast color of individual bars when unselected. | #F7F7F7 |
| -facet-bars-value-background-contrast-unselected-hover | The contrast color of individual bars during hover when unselected. | #EBF1FC |
| --facet-bars-value-background-muted | The muted color of facet bars. | #EAEBEC |
| --facet-bars-value-background-contrast-muted | The muted contrast color of facet bars. | #F7F7F7 |
| --facet-bars-value-background-contrast-muted-hover | The muted contrast color of facet bars during hovers. | #EBF1FC |
| --facet-bars-0-normal | The normal color of a bar. NOTE: There was an intent to have multiple bar colors but this was not fully implemented. So you will see a '0' in the names but effectively there are no alternatives. |
#255DCC |
| --facet-bars-0-normal-contrast | The normal contrast color of a bar. | #A4C2FC |
| --facet-bars-0-normal-contrast-hover | The normal contrast color while hovering over a bar. | #255DCC |
| --facet-bars-0-selected | The color of a bar when selected. | #255DCC |
| --facet-bars-0-selected-contrast | The contrast color of a bar when selected. | #A4C2FC |
| --facet-bars-0-unselected | The unselected color of a bar. | #C2C3C4 |
| --facet-bars-0-unselected-contrast | The unselected contrast color. #D9DADB | |
| --facet-bars-0-unselected-contrast-hover | The unselected contrast color while hovering over a bar. | #255DCC |
| --facet-bars-0-muted | The muted color of a bar. | #C2C3C4 |
| --facet-bars-0-muted-contrast | The muted contrast color. | #D9DADB |
| --facet-bars-0-muted-contrast-hover | The muted contrast color during hover. | #255DCC |
| facet-terms | Variables that only apply to facet-terms facets. |
|
| --facet-term-label | The text color of the individual term facet labels. | #1A1B1C |
| --face-term-annotation | The text color of the individual term annotations. | #727375 |
| --facet-term-value | The text color of the individual term values. | #1A1B1C |
| --facet-terms-tick-color | The hover tick color. This appears to be the color of the hover indicator at the left of a term facet, similar to --facet-bars-blueprint-border above. i.e. border-left colorNOTE: The bar is a fixed 4px solid line. |
#255DCC |
| --facet-blueprint-hover-background | The background color while hovering over a term. | #F7F7F7 |
| --facet-terms-selected-background | The background color or a selected term. | #EBF1FC |
| --facet-term-bar-background-normal | The normal background color of a term bar. | #EAEBEC |
| --facet-term-bar-background-contrast-normal | The normal contrast color of a term bar. (The subselection?) | #F7F7F7 |
| --facet-term-bar-background-contrast-normal-hover | The normal contrast color of a term bar while hovering over it. | #EAEBEC |
| --facet-term-bar-background-selected | The background color of a selected term bar. | #D9DADB |
| --facet-term-bar-background-contrast-selected | The background contrast color of a selected bar. | #EAEBEC |
| --facet-term-bar-background-contrast-selected-hover | The background contrast color of a selected bar while hovering. | #D9DADB |
| --facet-term-bar-background-muted | The muted color of a bar. | #EAEBEC |
| --facet-term-bar-background-contrast-muted | The muted contrast color of a bar. | #F7F7F7 |
| --facet-term-bar-background-contrast-muted-hover | The muted contrast color of a bar while hovering. | #EAEBEC |
| --facet-terms-bar-0-normal | The normal color of a terms bar. Like the facet-bars above there had been plans for multiple bar colors hence the '0' in the name. This wasn't implemented. |
#255DCC |
| --facet-terms-bar-0-normal-contrast | The normal contrast color. | #A4C2FC |
| --facet-terms-bar-0-normal-contrast-hover | The normal contrast color during bar hover. | #255DCC |
| --facet-terms-bar-0-selected-contrast | The selected contrast color. | #A4C2FC |
| --facet-terms-bar-0-selected-contrast-hover | The selected contrast color during hover. | #255DCC |
| --facet-terms-bar-0-muted | The muted bar color. | #C2C3C4 |
| --facet-terms-bar-0-muted-contrast | The muted contrast color. | #D9DADB |
| --facet-terms-bar-0-muted-contrast-hover | The muted contrast color while hovering over a bar. | #255DCC |
| facet buttons | i.e. | |
| --facet-button-background-gradient-stop-1 | There is a linear gradient applied to the background of these two buttons. This is the start color for the gradient | #F2F3F3 |
| --facet-button-background-gradient-stop-2 | The end color for the background gradient. | #EAEBEC |
| --facet-button-border | The color of the border around the buttons. NOTE: The border is a fixed 1px solid line. |
#D9DADB |
| facet-plugin-scrollbar | A facet plugin for adding a horizontal scrollbar to a facet. The final facet-timeline example demonstrates this. |
|
| --facets-plugin-scrollbar-background | The background color of the scrollbar. | rgb(248,248,248) |
| --facets-plugin-scrollbar-border | The color of the top and bottom border of the scroll bar. NOTE: The border is a fixed solid 1px line. |
rgb(231,231,231) |
| --facets-plugin-scrollbar-background-round | The background color of the scrollbar. | rgb(244,244,244) |
| --facets-plugin-scrollbar-filter-background | The background color of the scrollbar's filter. | rgba(164,194,252,0.5) |
| --facets-plugin-scrollbar-thumb-background | The background color of the thumb controls at the ends of the scrollbar. | rgb(195,195,195) |
| --facets-plugin-scrollbar-thumb-background-hover | The background color of the thumb controls while hovering over them. | rgb(125,125,125) |
| facet-plugin-zoom-bar | A facet plugin similar to a scrollbar but allows zooming in on a portion of a facet. Several of the facet-bars examples demonstrate its use. |
|
| --facets-plugins-zoom-bar-background | The background color of the zoom bar. | #EAEBEC |
| --facets-plugins-zoom-bar-selection-background | The background color of the selected portion of the zoom bar. | #A4C2FC |
| --facets-plugins-zoom-bar-thumb-background | The background color of the zoom bar thumb controls. | #C2C3C4 |
| --facets-plugins-zoom-bar-handle-border | The left and right borders of the handle between the handle and the thumb controls. NOTE: This border is a solid 1px line. |
white |
| facet-plugin-zoom-controls | This plugin allows zooming in on a facet. The final facet-timeline example demonstrates its use. |
|
| --facets-plugins-zoom-controls-button-border | The border color of the zoom buttoms. NOTE: This border is a solid 1px line. |
#A7A7A8 |
| --facets-plugins-zoom-controls-button-background | The background color behind the zoom control buttons. | #F0F1F2 |