Elegant shadows

The theme shadow contract.

Theme scale#

Light

xs
sm
md
lg
xl

Dark

xs
sm
md
lg
xl

Values#

xs

light

oklch(0.145 0.002 106.42 / 0.071) 0px 0.5px 0px

dark

0 0 0 1px oklch(1 0 0 / 0.06), 0 0.5px 0 oklch(0 0 0 / 0.4)

sm

light

oklch(0.145 0.002 106.42 / 0.071) 0px 0.5px 0px, oklch(0.145 0.002 106.42 / 0.012) 0px 5px 4px -2px, oklch(0.145 0.002 106.42 / 0.02) 0px 3px 3px -1px, oklch(0.145 0.002 106.42 / 0.039) 0px 1px 2px -1px

dark

0 0 0 1px oklch(1 0 0 / 0.07), 0px 5px 4px -2px oklch(0 0 0 / 0.1), 0px 3px 3px -1px oklch(0 0 0 / 0.14), 0px 1px 2px -1px oklch(0 0 0 / 0.2)

md

light

oklch(0.145 0.002 106.42 / 0.071) 0px 0.5px 0px, oklch(0.145 0.002 106.42 / 0.02) 0px 8px 8px -4px, oklch(0.145 0.002 106.42 / 0.027) 0px 5px 5px -2px, oklch(0.145 0.002 106.42 / 0.039) 0px 2px 3px -1px

dark

0 0 0 1px oklch(1 0 0 / 0.07), 0px 8px 8px -4px oklch(0 0 0 / 0.12), 0px 5px 5px -2px oklch(0 0 0 / 0.16), 0px 2px 3px -1px oklch(0 0 0 / 0.22)

lg

light

0px 1px 1px oklch(0.21 0.006 106.42 / 0.1), 0px 0px 0px 1px oklch(0.21 0.006 106.42 / 0.04), 0px 2px 12px -4px oklch(0.21 0.006 106.42 / 0.16)

dark

0px 1px 1px oklch(0 0 0 / 0.3), 0px 0px 0px 1px oklch(1 0 0 / 0.08), 0px 2px 12px -4px oklch(0 0 0 / 0.4)

xl

light

oklch(0.145 0.002 106.42 / 0.071) 0px 0.5px 0px, 0px 0px 0px 1px oklch(0.21 0.006 106.42 / 0.08), oklch(0.145 0.002 106.42 / 0.031) 0px 18px 24px -12px, oklch(0.145 0.002 106.42 / 0.039) 0px 12px 12px -6px, oklch(0.145 0.002 106.42 / 0.039) 0px 4px 6px -3px

dark

0px 0px 0px 1px oklch(1 0 0 / 0.1), 0px 18px 24px -12px oklch(0 0 0 / 0.45), 0px 12px 12px -6px oklch(0 0 0 / 0.45), 0px 4px 6px -3px oklch(0 0 0 / 0.5)

Usage#

<div className="border border-line bg-layer-panel shadow-raft-sm" />

<button className="border-2 border-line-strong bg-primary-400 shadow-raft-sm hover:shadow-raft-md active:shadow-raft-xs">
  Raised
</button>