Skip to contentShopify logoPolaris

Tokens

Token nameCurrent valueFigma usageDescription
--p-linear
cubic-bezier(0, 0, 1, 1)β€”β€”
--p-ease-in-out
cubic-bezier(0.42, 0, 0.58, 1)β€”β€”
--p-ease-out
cubic-bezier(0, 0, 0.58, 1)β€”β€”
--p-ease-in
cubic-bezier(0.42, 0, 1, 1)β€”β€”
--p-ease
cubic-bezier(0.25, 0.1, 0.25, 1)β€”β€”
--p-duration-0
0msβ€”β€”
--p-duration-50
50msβ€”β€”
--p-duration-100
100msβ€”β€”
--p-duration-150
150msβ€”β€”
--p-duration-200
200msβ€”β€”
--p-duration-250
250msβ€”β€”
--p-duration-300
300msβ€”β€”
--p-duration-350
350msβ€”β€”
--p-duration-400
400msβ€”β€”
--p-duration-450
450msβ€”β€”
--p-duration-500
500msβ€”β€”
--p-duration-5000
5000msβ€”β€”
--p-keyframes-bounce
{ from, 65%, 85% { transform: scale(1) } 75% { transform: scale(0.85) } 82.5% { transform: scale(1.05) } }β€”β€”
--p-keyframes-fade-in
{ to { opacity: 1 } }β€”β€”
--p-keyframes-pulse
{ from, 75% { transform: scale(0.85); opacity: 1; } to { transform: scale(2.5); opacity: 0; } }β€”β€”
--p-keyframes-spin
{ to { transform: rotate(1turn) } }β€”β€”