Interactive Widgets
Each widget uses a semantic easing token from the Easing tab. Open the panel and change an easing value to see motion update live.
Tabs
Active indicator slides using
easing-tab-open (→ --nx-easing-tab-open).Overview panel. Indicator slides on
easing-tab-open (→ --nx-easing-tab-open).Details panel. Change the Tab Open easing in the panel to see the indicator motion update.
Settings panel. Active label uses
nx-tabs__tab.is-active (→ --nx-color-accent).Accordion
Height transitions use
easing-tab-open / easing-tab-close for open/close respectively (progressive enhancement, Chrome 131+).What is a design token?
A design token is a named CSS custom property (e.g. --spacing-md: 1rem) that centralises a raw value behind a semantic name, making it easy to update globally.
Open timing:
easing-tab-open → --nx-easing-tab-open. Close timing: easing-tab-close → --nx-easing-tab-close.How does the panel update tokens live?
The panel writes :root overrides directly into the page via a <style> tag, so every component that references a --nx-* var picks up the new value before the next paint — no rebuild required.
Open timing:
easing-tab-open → --nx-easing-tab-open. Close timing: easing-tab-close → --nx-easing-tab-close.Which easing tokens does this accordion use?
The open transition uses easing-tab-open and the close transition uses easing-tab-close. Change either in the Easing tab of the panel to see the effect here.
Open timing:
easing-tab-open → --nx-easing-tab-open. Close timing: easing-tab-close → --nx-easing-tab-close.Modal
Fade-and-scale animation uses
easing-modal (→ --nx-easing-modal). Close via button or Escape.