Brutal shadows

The theme shadow contract.

Theme scale#

xs
sm
md
lg
xl

Values#

xs

1px 1px 0px var(--line-strong)

sm

2px 2px 0px var(--line-strong)

md

4px 4px 0px var(--line-strong)

lg

4px 4px 0px var(--color-black)

xl

6px 6px 0px var(--line-strong)

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>