effect
Floating effect
The only drop shadow in the kit, for things that float above the page.
.popover {
box-shadow: var(--shadow-floating);
}When to use
- Anything lifted above the content: menus, popovers, a card being dragged.
When not to use
- Cards just sitting there. This kit is dark, so surfaces are told apart by tone, not shadow.
Behaviour
0 16px 24px rgba(0,0,0,0.16), as --shadow-floating. There's no family of elevation tokens yet. If I ever need a second shadow, that's when I add one.
Accessibility
- Separation: on a dark background, a shadow doesn't separate anything for someone with low vision. Pair it with a different surface tone or an outline.
Values
Straight from the contract. Each value sits next to its token, because six tokens here all come out as #3a3a3a and the colour alone can't tell you which one is right.
Never changes
| Part | Property | Value | Token |
|---|---|---|---|
| root | box-shadow | 0px 16px 24px 0px rgba(0, 0, 0, 0.16) | shadow/floating |