Opacity
Opacity tokens control transparency for overlays, disabled states, and visual hierarchy. Use sparingly — prefer color tokens when possible.
--ds-opacity-00%
--ds-opacity-55%
--ds-opacity-1010%
--ds-opacity-2525%
--ds-opacity-5050%
--ds-opacity-7575%
--ds-opacity-9090%
--ds-opacity-100100%
| Token | Use For |
|---|---|
| --ds-opacity-0 | Fully transparent (hidden but present in layout) |
| --ds-opacity-5 to --ds-opacity-10 | Subtle overlays, hover backgrounds |
| --ds-opacity-25 | Disabled state icons, muted decorations |
| --ds-opacity-50 | Disabled state text, placeholder content |
| --ds-opacity-75 | Secondary content, dimmed backgrounds |
| --ds-opacity-90 to --ds-opacity-100 | Primary content, full visibility |