Styles

CSS variables

Theme every pixel with 22 CSS variables. Override them at :root or scope them to a wrapper.

Overlay & tooltip

Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.

Variable	Default	Type	Description
`--hub-overlay-backdrop-zindex`	`calc(var(--hub-sys-zindex-dropdown, 1000) - 1)`	number	Overlay backdrop z index
`--hub-overlay-flip-duration`	`140ms`	transition	How long a connected panel takes to cross when it gives up the side it was asked for. Only the crossing is animated — the panel is re-placed on every scroll, and a blanket transition would leave it trailing its trigger. 0ms turns it off, and so does prefers-reduced-motion
`--hub-overlay-bg`	`var(--hub-sys-surface-elevated, #f8f9fa)`	color	Overlay bg
`--hub-overlay-border-radius`	`var(--hub-sys-radius-sm, 0.25rem)`	length	Overlay border radius
`--hub-overlay-shadow`	`var(--hub-sys-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15))`	shadow	Overlay shadow
`--hub-overlay-zindex`	`var(--hub-sys-zindex-dropdown, 1000)`	number	Overlay z index
`--hub-tooltip-bg`	`var(--hub-sys-color-ink, #212529)`	color	Tooltip background colour.
`--hub-tooltip-border-radius`	`var(--hub-sys-radius-md, 0.375rem)`	length	Corner radius of the tooltip.
`--hub-tooltip-color`	`var(--hub-sys-surface-page, #fff)`	color	Tooltip text colour.
`--hub-tooltip-font-family`	`var(--hub-ref-font-family-base, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif)`	string	Tooltip font family
`--hub-tooltip-font-size`	`var(--hub-ref-font-size-sm, 0.875rem)`	length	Font size of the tooltip text.
`--hub-tooltip-font-weight`	`var(--hub-ref-font-weight-base, 400)`	number	Tooltip font weight
`--hub-tooltip-line-height`	`var(--hub-ref-line-height-base, 1.5)`	number	Maximum width before the text wraps.
`--hub-tooltip-max-width`	`200px`	length	Tooltip max width
`--hub-tooltip-white-space`	`normal`	string	How the label wraps. Forwarded from the host, so one tooltip can be told to keep its text on a single line without a global rule that changes every tooltip in the product
`--hub-tooltip-text-align`	`center`	string	Alignment of the label. Forwarded the same way — a tooltip carrying a sentence or two usually wants to read left, while a short name reads better centred
`--hub-tooltip-opacity`	`0.9`	number	Opacity of the shown tooltip.
`--hub-tooltip-padding-x`	`var(--hub-ref-space-2, 0.5rem)`	length	Horizontal padding inside the tooltip.
`--hub-tooltip-padding-y`	`var(--hub-ref-space-1, 0.25rem)`	length	Vertical padding inside the tooltip.
`--hub-tooltip-shadow`	`none`	shadow	Tooltip box shadow
`--hub-tooltip-transition-duration`	`0.15s`	transition	Fade in/out duration.
`--hub-tooltip-zindex`	`var(--hub-sys-zindex-tooltip, 1080)`	number	Stacking order of the tooltip element.