Opacity

Usage

Components use the semantic tokens through their CSS variables; the primitives are only what they point to. Copy a variable from its card.

.element {
  opacity: var(--opacity-glass);
}

Primitives

The values the semantic tokens point to. Components never use them directly.

• opacity/00--opacity-0
• opacity/100.1--opacity-10
• opacity/400.4--opacity-40
• opacity/600.6--opacity-60
• opacity/1001--opacity-100

Semantic

• opacity/glass0.1 · opacity/10--opacity-glass
• opacity/disabled0.4 · opacity/40--opacity-disabled
• opacity/muted0.6 · opacity/60--opacity-muted
• opacity/full1 · opacity/100--opacity-full