Box Shadow
Dashvar provides a few utility variables for all of your box-shadow needs.
var(--box-shadow-0)
0 0 #0000
var(--box-shadow-1)
0 1px 2px 0 rgba(0, 0, 0, 0.05)
var(--box-shadow-2)
0 1px 3px 0 rgba(0, 0, 0, 0.1),
0 1px 2px 0 rgba(0, 0, 0, 0.06)
var(--box-shadow-3)
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06)
var(--box-shadow-4)
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05)
var(--box-shadow-5)
0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04)
var(--box-shadow-6)
0 25px 50px -12px rgba(0, 0, 0, 0.25)
var(--box-shadow-inner)
inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)
Interactive Example
Feel free to play with this interactive example to get comfortable with the tool.