# UX4G Tokens — Interaction This page lists every primitive and semantic token for the **Interaction** family. - Primitive token source: `src/tokens/interaction.tokens.css` - Semantic token source: `src/semantic/interaction.semantic.css` ## Primitive tokens ```css :root { /* Transition Durations */ --ux4g-transition-duration-fast: 150ms; --ux4g-transition-duration-base: 250ms; --ux4g-transition-duration-slow: 400ms; /* Timing Functions */ --ux4g-transition-timing-ease: ease; --ux4g-transition-timing-linear: linear; --ux4g-transition-timing-in: ease-in; --ux4g-transition-timing-out: ease-out; --ux4g-transition-timing-in-out: ease-in-out; } ``` ## Semantic tokens ```css :root { --ux4g-interaction-hover-opacity: 0.9; --ux4g-interaction-active-opacity: 0.8; --ux4g-interaction-disabled-opacity: 0.5; --ux4g-motion-easing-in: var(--ux4g-transition-timing-in); --ux4g-motion-easing-out: var(--ux4g-transition-timing-out); --ux4g-outline-width-default: 2px; --ux4g-outline-color-focus: var(--ux4g-bg-primary-strong); --ux4g-outline-offset-default: 2px; } ``` ## Dark theme Add `data-theme="dark"` to `` or any ancestor to switch to the dark semantic token set.