Custom CSS and Variables¶
Most of a portal's look is set through the theme designer's fields. Sometimes you need to go further: load a web font, hide something the designer cannot reach, or tweak a detail no field covers. The Other tab of the Theme Designer holds these escape hatches. This page explains what they can reach, and the CSS variables a theme provides for your own CSS to use.
Custom CSS¶
Custom CSS is free CSS added to every portal that uses the theme. It is applied after all other theme styling and it is not checked. That makes it powerful: it can change anything, including things the designer cannot reach. It also makes it risky, because a mistake can break the portal's look. Prefer a token, a variant or an override wherever one does the job, and keep Custom CSS for what they cannot do.
External CSS¶
External CSS is a list of stylesheet addresses to load with the portal. The usual case is a web font, for example from https://fonts.googleapis.com/…. Once the stylesheet is loaded, you can name the font in Base → Typography.
Icon packs¶
Icon Packs decides which icon packs the portal's icon pickers offer to designers. It only affects the picker. An icon from a pack you switch off still renders if a widget already uses it.
Variable names¶
Everything the theme decides is delivered to the page as CSS variables, and the widgets' own styling reads only those variables. This is why Custom CSS and overrides can reuse the theme's values, and why you can also set the variables directly.
The base tokens are the variables named after the token, such as --primary-background or --space-md.
A component variable is named from the component, the part, the state and the property. The root part and the base state are left out of the name:
| Variable | Meaning |
|---|---|
--button-bg |
Button body background, base state |
--button-hover-bg |
Button body background on hover |
--button-icon-size |
Size of the button's icon part |
--nav-list-group-header-color |
Text colour of a nav list's group header |
Padding, margin and radius exist both as a whole and per side. For padding that is --button-padding plus --button-padding-top, -right, -bottom and -left. For radius the sides are -top-left, -top-right, -bottom-right and -bottom-left.
Where variables are set¶
Where a variable is set decides how far it reaches:
- The theme's default variant and base tokens are set on the page root, so they apply everywhere.
- A variant and a widget's own values are set on that widget's element only. A variant is written out in full there, so nothing of the default variant leaks into it.
Take a rule in Custom CSS that sets --button-bg on the root. It changes every default-variant button. It does not change a button that picked a variant, because the variant sets the same variable closer to the element.