Tabs themes

The theme input controls which visual design system the tabs use. tg2-light (default) and tg2-dark are tg2 only; tg-light and tg-dark are tg only.

Dark mode has not been reviewed by design. It is a work in progress. Do not use.

tg2-light

Overview content

Reviews content

Shipping content

tg2-dark Beta

Overview content

Reviews content

Shipping content

tg-light

Overview content

Reviews content

Shipping content

tg-dark Beta

Overview content

Reviews content

Shipping content

tg-light and tg-dark geometry

tg-light uses the legacy tg-tabs colours, 3px indicator and bottom border, with no dividers and no hover state. Tab heights follow size as they do for the other themes, but the default under tg-light and tg-dark is large rather than small. This geometry only applies when theme is set directly on the tg2-tabs — it won't apply if the theme comes from a parent element instead.