PolarisTokens
| Token name | Current value | Figma usage | Description | |
|---|---|---|---|---|
--p-shadow-0 | none | Use shadow styles from UI kit | — | |
--p-shadow-100 | 0rem 0rem 0.125rem rgba(31, 33, 36, 0.24) | Use shadow styles from UI kit | — | |
--p-shadow-200 | 0rem 0.0625rem 0.0625rem rgba(31, 33, 36, 0.1) | Use shadow styles from UI kit | — | |
--p-shadow-300 | 0rem 0.125rem 0.25rem rgba(31, 33, 36, 0.1), 0rem 0.0625rem 0.375rem rgba(31, 33, 36, 0.05) | Use shadow styles from UI kit | — | |
--p-shadow-400 | 0rem 0.25rem 0.75rem rgba(31, 33, 36, 0.2), 0rem 0.125rem 0.375rem rgba(31, 33, 36, 0.05) | Use shadow styles from UI kit | — | |
--p-shadow-500 | 0rem 0.25rem 1.125rem -0.125rem rgba(31, 33, 36, 0.08), 0rem 0.75rem 1.125rem -0.125rem rgba(31, 33, 36, 0.15) | Use shadow styles from UI kit | — | |
--p-shadow-600 | 0rem 2rem 2rem rgba(31, 33, 36, 0.15), 0rem 2rem 3.5rem -0.125rem rgba(31, 33, 36, 0.16) | Use shadow styles from UI kit | — | |
--p-shadow-bevel-100 | 0.0625rem 0rem 0rem 0rem rgba(0, 0, 0, 0.13) inset, -0.0625rem 0rem 0rem 0rem rgba(0, 0, 0, 0.13) inset, 0rem -0.0625rem 0rem 0rem rgba(0, 0, 0, 0.17) inset, 0rem 0.0625rem 0rem 0rem rgba(204, 204, 204, 0.5) inset | Use shadow styles from UI kit | — | |
--p-shadow-inset-100 | inset 0rem 0rem 0.1875rem rgba(31, 33, 36, 0.56) | Use shadow styles from UI kit | — | |
--p-shadow-inset-200 | inset 0rem 0.125rem 0.25rem rgba(31, 33, 36, 0.32) | Use shadow styles from UI kit | — | |
--p-shadow-button | inset 0rem -0.0625rem 0rem #B5B5B5, inset -0.0625rem 0rem 0rem #E3E3E3, inset 0.0625rem 0rem 0rem #E3E3E3, inset 0rem 0.0625rem 0rem #E3E3E3 | Use shadow styles from UI kit | — | |
--p-shadow-button-hover | inset 0rem -0.0625rem 0rem #CCCCCC, inset 0.0625rem 0rem 0rem #EBEBEB, inset -0.0625rem 0rem 0rem #EBEBEB, inset 0rem 0.0625rem 0rem #EBEBEB | Use shadow styles from UI kit | — | |
--p-shadow-button-inset | var(--p-shadow-inset-200) | Use shadow styles from UI kit | — | |
--p-shadow-button-primary | 0rem 0.125rem 0rem 0rem rgba(255, 255, 255, 0.2) inset, 0.125rem 0rem 0rem 0rem rgba(255, 255, 255, 0.2) inset, -0.125rem 0rem 0rem 0rem rgba(255, 255, 255, 0.2) inset, 0rem -0.0625rem 0rem 0.0625rem #000 inset, 0rem 0.0625rem 0rem 0rem #000 inset | Use shadow styles from UI kit | — | |
--p-shadow-button-primary-hover | 0rem 0.0625rem 0rem 0rem rgba(255, 255, 255, 0.24) inset, 0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.16) inset, -0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.16) inset, 0rem -0.09375rem 0rem 0rem rgba(255, 255, 255, 0.07) inset, 0rem 0rem 0rem 0.03125rem #1A1A1A | Use shadow styles from UI kit | — | |
--p-shadow-button-primary-inset | 0rem 0.1875rem 0rem 0rem #000 inset | Use shadow styles from UI kit | — | |
--p-shadow-button-primary-critical | 0rem 0.0625rem 0rem 0rem rgba(255, 255, 255, 0.4) inset, 0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.2) inset, -0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.2) inset, 0rem -0.09375rem 0rem 0rem rgba(0, 0, 0, 0.25) inset | Use shadow styles from UI kit | — | |
--p-shadow-button-primary-critical-hover | -0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, 0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, 0rem 0.03125rem 0rem 0rem rgba(0, 0, 0, 0.25), 0rem -0.09375rem 0rem 0rem rgba(255, 255, 255, 0.07) inset, 0rem 0.0625rem 0rem 0rem rgba(255, 255, 255, 0.24) inset | Use shadow styles from UI kit | — | |
--p-shadow-button-primary-critical-inset | 0rem 0.125rem 0rem 0rem rgba(0, 0, 0, 0.60) inset, 0.0625rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.20) inset, -0.0625rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.20) inset | Use shadow styles from UI kit | — | |
--p-shadow-button-primary-success | 0rem 0.0625rem 0rem 0rem rgba(255, 255, 255, 0.4) inset, 0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.2) inset, -0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.2) inset, 0rem -0.09375rem 0rem 0rem rgba(0, 0, 0, 0.25) inset | Use shadow styles from UI kit | — | |
--p-shadow-button-primary-success-hover | -0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, 0.0625rem 0rem 0rem 0rem rgba(255, 255, 255, 0.20) inset, 0rem 0.03125rem 0rem 0rem rgba(0, 0, 0, 0.25), 0rem -0.09375rem 0rem 0rem rgba(255, 255, 255, 0.07) inset, 0rem 0.0625rem 0rem 0rem rgba(255, 255, 255, 0.24) inset | Use shadow styles from UI kit | — | |
--p-shadow-button-primary-success-inset | 0rem 0.125rem 0rem 0rem rgba(0, 0, 0, 0.60) inset, 0.0625rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.20) inset, -0.0625rem 0rem 0.0625rem 0rem rgba(0, 0, 0, 0.20) inset | Use shadow styles from UI kit | — | |
--p-shadow-border-inset | 0rem 0rem 0rem 0.0625rem rgba(0, 0, 0, 0.08) inset | Use shadow styles from UI kit | — | |
--p-shadow-inset-lg | inset 0rem 0rem 0.4375rem 0.125rem rgba(31, 33, 36, 0.18) | Use shadow styles from UI kit | — | |
--p-shadow-inset-md | inset 0rem 0.125rem 0.25rem rgba(31, 33, 36, 0.32) | Use shadow styles from UI kit | — | |
--p-shadow-inset-sm | inset 0rem 0rem 0.1875rem rgba(31, 33, 36, 0.56) | Use shadow styles from UI kit | — | |
--p-shadow-none | none | Use shadow styles from UI kit | — | |
--p-shadow-xs | 0rem 0rem 0.125rem rgba(31, 33, 36, 0.24) | Use shadow styles from UI kit | — | |
--p-shadow-sm | 0rem 0.0625rem 0.0625rem rgba(31, 33, 36, 0.1) | Use shadow styles from UI kit | — | |
--p-shadow-md | 0rem 0.125rem 0.25rem rgba(31, 33, 36, 0.1), 0rem 0.0625rem 0.375rem rgba(31, 33, 36, 0.05) | Use shadow styles from UI kit | — | |
--p-shadow-lg | 0rem 0.25rem 0.75rem rgba(31, 33, 36, 0.2), 0rem 0.125rem 0.375rem rgba(31, 33, 36, 0.05) | Use shadow styles from UI kit | — | |
--p-shadow-xl | 0rem 0.25rem 1.125rem -0.125rem rgba(31, 33, 36, 0.08), 0rem 0.75rem 1.125rem -0.125rem rgba(31, 33, 36, 0.15) | Use shadow styles from UI kit | — | |
--p-shadow-2xl | 0rem 2rem 2rem rgba(31, 33, 36, 0.15), 0rem 2rem 3.5rem -0.125rem rgba(31, 33, 36, 0.16) | Use shadow styles from UI kit | — |