# UX4G Tokens — Opacity This page lists every primitive and semantic token for the **Opacity** family. - Primitive token source: `src/tokens/opacity.tokens.css` - Semantic token source: `src/semantic/opacity.semantic.css` ## Primitive tokens ```css :root { --ux4g-opacity-0: 0; --ux4g-opacity-5: 0.05; --ux4g-opacity-10: 0.1; --ux4g-opacity-20: 0.2; --ux4g-opacity-25: 0.25; --ux4g-opacity-30: 0.3; --ux4g-opacity-40: 0.4; --ux4g-opacity-50: 0.5; --ux4g-opacity-60: 0.6; --ux4g-opacity-70: 0.7; --ux4g-opacity-75: 0.75; --ux4g-opacity-80: 0.8; --ux4g-opacity-90: 0.9; --ux4g-opacity-95: 0.95; --ux4g-opacity-100: 1; } ``` ## Semantic tokens ```css :root { /* Opacity variables */ --ux4g-opacity-disabled: var(--ux4g-opacity-40); --ux4g-opacity-hover: var(--ux4g-opacity-80); } ``` ## Dark theme Add `data-theme="dark"` to `` or any ancestor to switch to the dark semantic token set.