Skip to contentShopify logoPolaris

Tokens β†’ Shadow

NameValueDescription
--p-shadow-0
noneβ€”
--p-shadow-100
0px 1px 0px 0px rgba(26, 26, 26, 0.07)β€”
--p-shadow-200
0px 3px 1px -1px rgba(26, 26, 26, 0.07)β€”
--p-shadow-300
0px 4px 6px -2px rgba(26, 26, 26, 0.20)β€”
--p-shadow-400
0px 8px 16px -4px rgba(26, 26, 26, 0.22)β€”
--p-shadow-500
0px 12px 20px -8px rgba(26, 26, 26, 0.24)β€”
--p-shadow-600
0px 20px 20px -8px rgba(26, 26, 26, 0.28)β€”
--p-shadow-bevel-100
1px 0px 0px 0px rgba(0, 0, 0, 0.13) inset, -1px 0px 0px 0px rgba(0, 0, 0, 0.13) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.17) inset, 0px 1px 0px 0px rgba(204, 204, 204, 0.5) insetβ€”
--p-shadow-inset-100
0px 1px 2px 0px rgba(26, 26, 26, 0.15) inset, 0px 1px 1px 0px rgba(26, 26, 26, 0.15) insetβ€”
--p-shadow-inset-200
0px 2px 1px 0px rgba(26, 26, 26, 0.20) inset, 1px 0px 1px 0px rgba(26, 26, 26, 0.12) inset, -1px 0px 1px 0px rgba(26, 26, 26, 0.12) insetβ€”
--p-shadow-button
0px -1px 0px 0px #b5b5b5 inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset, 0px 0.5px 0px 1.5px #FFF insetβ€”
--p-shadow-button-hover
0px 1px 0px 0px #EBEBEB inset, -1px 0px 0px 0px #EBEBEB inset, 1px 0px 0px 0px #EBEBEB inset, 0px -1px 0px 0px #CCC insetβ€”
--p-shadow-button-inset
-1px 0px 1px 0px rgba(26, 26, 26, 0.122) inset, 1px 0px 1px 0px rgba(26, 26, 26, 0.122) inset, 0px 2px 1px 0px rgba(26, 26, 26, 0.2) insetβ€”
--p-shadow-button-primary
0px -1px 0px 1px rgba(0, 0, 0, 0.8) inset, 0px 0px 0px 1px rgba(48, 48, 48, 1) inset, 0px 0.5px 0px 1.5px rgba(255, 255, 255, 0.25) insetβ€”
--p-shadow-button-primary-hover
0px 1px 0px 0px rgba(255, 255, 255, 0.24) inset, 1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, -1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, 0px -1px 0px 0px #000 inset, 0px -1px 0px 1px #1A1A1Aβ€”
--p-shadow-button-primary-inset
0px 3px 0px 0px rgb(0, 0, 0) insetβ€”
--p-shadow-button-primary-critical
0px -1px 0px 1px rgba(142, 31, 11, 0.8) inset, 0px 0px 0px 1px rgba(181, 38, 11, 0.8) inset, 0px 0.5px 0px 1.5px rgba(255, 255, 255, 0.349) insetβ€”
--p-shadow-button-primary-critical-hover
0px 1px 0px 0px rgba(255, 255, 255, 0.48) inset, 1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, -1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, 0px -1.5px 0px 0px rgba(0, 0, 0, 0.25) insetβ€”
--p-shadow-button-primary-critical-inset
-1px 0px 1px 0px rgba(0, 0, 0, 0.2) inset, 1px 0px 1px 0px rgba(0, 0, 0, 0.2) inset, 0px 2px 0px 0px rgba(0, 0, 0, 0.6) insetβ€”
--p-shadow-button-primary-success
0px -1px 0px 1px rgba(12, 81, 50, 0.8) inset, 0px 0px 0px 1px rgba(19, 111, 69, 0.8) inset, 0px 0.5px 0px 1.5px rgba(255, 255, 255, 0.251) insetβ€”
--p-shadow-button-primary-success-hover
0px 1px 0px 0px rgba(255, 255, 255, 0.48) inset, 1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, -1px 0px 0px 0px rgba(255, 255, 255, 0.20) inset, 0px -1.5px 0px 0px rgba(0, 0, 0, 0.25) insetβ€”
--p-shadow-button-primary-success-inset
-1px 0px 1px 0px rgba(0, 0, 0, 0.2) inset, 1px 0px 1px 0px rgba(0, 0, 0, 0.2) inset, 0px 2px 0px 0px rgba(0, 0, 0, 0.6) insetβ€”
--p-shadow-border-inset
0px 0px 0px 1px rgba(0, 0, 0, 0.08) insetβ€”