Tokens
Shadows
Box shadow tokens
Scale
| Token | Value |
|---|---|
--hui-shadow-sm | 0 1px 2px 0 rgb(0 0 0 / 0.05) |
--hui-shadow | 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) |
--hui-shadow-md | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) |
--hui-shadow-lg | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) |
--hui-shadow-xl | 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) |
Usage
.my-card {
box-shadow: var(--hui-shadow-md);
}
.my-modal {
box-shadow: var(--hui-shadow-xl);
}Shadow tokens are overridden in dark theme to use darker, more subtle shadows.