PolarisTokens
| Token name | Current value | Figma usage | Description | |
|---|---|---|---|---|
--p-motion-linear | cubic-bezier(0, 0, 1, 1) | Set easing to Linear | Moves with constant speed. Use for continuous and mechanical animations, such as rotating spinners. | |
--p-motion-ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) | Set custom bezier to 0.42, 0, 0.58, 1 | Starts and finishes with equal speed. A good default for transitions triggered by the system. | |
--p-motion-ease-out | cubic-bezier(0, 0, 0.58, 1) | Set custom bezier to 0, 0, 0.58, 1 | Starts at top speed and finishes slowly. Use sparingly. | |
--p-motion-ease-in | cubic-bezier(0.42, 0, 1, 1) | Set custom bezier to 0.42, 0, 1, 1 | Starts slowly and finishes at top speed. Use sparingly. | |
--p-motion-ease | cubic-bezier(0.25, 0.1, 0.25, 1) | Set custom bezier to 0.25, 0.1, 0.25, 1 | Responds quickly and finishes with control. A great default for any user interaction. | |
--p-motion-duration-0 | 0ms | Set duration to 0 ms | — | |
--p-motion-duration-50 | 50ms | Set duration to 50 ms | — | |
--p-motion-duration-100 | 100ms | Set duration to 100 ms | — | |
--p-motion-duration-150 | 150ms | Set duration to 150 ms | — | |
--p-motion-duration-200 | 200ms | Set duration to 200 ms | — | |
--p-motion-duration-250 | 250ms | Set duration to 250 ms | — | |
--p-motion-duration-300 | 300ms | Set duration to 300 ms | — | |
--p-motion-duration-350 | 350ms | Set duration to 350 ms | — | |
--p-motion-duration-400 | 400ms | Set duration to 400 ms | — | |
--p-motion-duration-450 | 450ms | Set duration to 450 ms | — | |
--p-motion-duration-500 | 500ms | Set duration to 500 ms | — | |
--p-motion-duration-5000 | 5000ms | Set duration to 5000 ms | — | |
--p-motion-keyframes-bounce | { from, 65%, 85% { transform: scale(1) } 75% { transform: scale(0.85) } 82.5% { transform: scale(1.05) } } | — | — | |
--p-motion-keyframes-fade-in | { to { opacity: 1 } } | — | — | |
--p-motion-keyframes-pulse | { from, 75% { transform: scale(0.85); opacity: 1; } to { transform: scale(2.5); opacity: 0; } } | — | — | |
--p-motion-keyframes-spin | { to { transform: rotate(1turn) } } | — | — | |
--p-motion-keyframes-appear-above | { from { transform: translateY(var(--p-space-100)); opacity: 0; } to { transform: none; opacity: 1; } } | — | — | |
--p-motion-keyframes-appear-below | { from { transform: translateY(calc(var(--p-space-100) * -1)); opacity: 0; } to { transform: none; opacity: 1; } } | — | — |