Overrides¶

An override is a small piece of CSS you write once in the theme and then apply to parts of individual widgets. Think of a "caption" text style: smaller, greyer text that you want under several charts and tables. Instead of typing the same CSS into each widget's Custom Style, you write it once as an override and pick it from a list wherever you need it.

Overrides fill the gap between the theme's fixed fields and free CSS. Use one when the look you want needs a property the part does not offer, or when the same small tweak is needed on several widgets.

Writing an override¶

Say you want that caption style. Open Base → Overrides in the Theme Designer and click Add Override. Fill in the fields below, save the theme, and the override is ready to pick on any widget.

Field	Description
Selector	The override's name. Required and unique. Use lowercase words joined by hyphens, for example `my-caption`
Label	The name shown in widget pickers
Group	Groups the override in lists, for example `Typography`. Overrides without a group are listed under Other
CSS	The CSS declarations, for example `font-size: 0.8rem; color: gray;`

Write the CSS with the theme's base tokens where you can. The override then follows the theme when the tokens change:

font-family: var(--font-family-base);
font-size: var(--font-size-sm);
color: var(--item-text-alt);

Every theme starts with a Typography group of ready-made text styles: text-body-sm, text-body-md, text-label-xs, text-label-sm, text-label-md, text-title-sm and text-title-md. They are ordinary overrides. You can edit or remove them.

Checking the CSS¶

The designer checks each override's CSS as you type. A row with a problem gets a red icon until you fix it. Hover the icon to see what is wrong. These are the typical messages:

Message	Fix
`Line 2: missing ";" after "…".`	End every declaration with `;`
`"x" is not a valid property name.`	Check the spelling of the CSS property
`"x" has no value.`	Add a value after the colon
`"prop: value" is not a valid declaration.`	The value does not suit that property
`Missing "}".`, `Missing ")".`, `Unterminated string.`	Close the brace, bracket or quote

The theme cannot be saved while an override has an error. Saving then shows Invalid override CSS. It shows Cannot save theme when a selector is missing, badly formed or used twice.

Applying an override¶

Overrides are applied on widgets, not in the component editors. Select a widget on the canvas and open Theme in its properties panel. Under the part you want to style, pick one or more snippets in Overrides. They apply in the order you picked them, and after the widget's own theme values.

Overrides are not part of a component or a variant. A variant cannot apply an override. Only widgets can.

Overrides as classes¶

Every override is also available as a CSS class named after its selector. The my-caption override gives you a .my-caption class. You can use it in Custom CSS and anywhere else that can carry a class.