PolarisTokens
| Token name | Current value | Figma usage | Description | |
|---|---|---|---|---|
|
--p-color-bg-inverse
|
rgba(31, 33, 36, 1) | - | — | |
|
--p-color-bg-inset-strong
|
rgba(97, 106, 117, 1) | - | — | |
|
--p-color-bg-inverse-hover
|
rgba(97, 106, 117, 1) | - | — | |
|
--p-color-bg-inverse-active
|
rgba(135, 144, 155, 1) | - | — | |
|
--p-color-bg-strong-hover
|
rgba(202, 206, 211, 1) | - | — | |
|
--p-color-bg-strong-active
|
rgba(202, 206, 211, 1) | - | — | |
|
--p-color-bg-strong
|
rgba(221, 224, 228, 1) | - | — | |
|
--p-color-bg-subdued-active
|
rgba(235, 236, 239, 1) | - | — | |
|
--p-color-bg-disabled
|
rgba(235, 236, 239, 1) | - | — | |
|
--p-color-bg-interactive-disabled
|
rgba(235, 236, 239, 1) | - | — | |
|
--p-color-bg-app
|
rgba(241, 242, 244, 1) | - | — | |
|
--p-color-bg-app-active
|
rgba(221, 224, 228, 1) | - | — | |
|
——p-color-bg-app-hover
|
rgba(235, 236, 239, 1) | - | — | |
|
--p-color-bg-app-selected
|
rgba(235, 236, 239, 1) | - | — | |
|
--p-color-bg-active
|
rgba(235, 236, 239, 1) | - | — | |
|
--p-color-bg-subdued-hover
|
rgba(241, 242, 244, 1) | - | — | |
|
--p-color-bg-inset
|
rgba(241, 242, 244, 1) | - | — | |
|
--p-color-bg-hover
|
rgba(241, 242, 244, 1) | - | — | |
|
--p-color-bg-subdued
|
rgba(249, 250, 251, 1) | - | — | |
|
--p-color-bg-input
|
rgba(255, 255, 255, 1) | - | — | |
|
--p-color-bg
|
rgba(255, 255, 255, 1) | - | — | |
|
--p-color-bg-primary-active
|
rgba(12, 59, 47, 1) | - | — | |
|
--p-color-bg-primary-hover
|
rgba(18, 84, 67, 1) | - | — | |
|
--p-color-bg-primary
|
rgba(0, 122, 92, 1) | - | — | |
|
--p-color-bg-success-strong
|
rgba(22, 166, 121, 1) | - | — | |
|
--p-color-bg-success
|
rgba(161、237、208、1) | - | — | |
|
--p-color-bg-primary-subdued-active
|
rgba(192, 242, 221, 1) | - | — | |
|
--p-color-bg-success-subdued-active
|
rgba(192, 242, 221, 1) | - | — | |
|
--p-color-bg-success-subdued
|
rgba(224, 248, 238, 1) | - | — | |
|
--p-color-bg-primary-subdued-hover
|
rgba(224, 248, 238, 1) | - | — | |
|
--p-color-bg-success-subdued-hover
|
rgba(240, 253, 248, 1) | - | — | |
|
--p-color-bg-primary-subdued
|
rgba(240, 253, 248, 1) | - | — | |
|
--p-color-bg-primary-subdued-selected
|
rgba(240, 253, 248, 1) | - | — | |
|
--p-color-bg-critical-strong-active
|
rgba(115, 24, 7, 1) | - | — | |
|
--p-color-bg-critical-strong-hover
|
rgba(159, 32, 10, 1) | - | — | |
|
--p-color-bg-critical-strong
|
rgba(197, 40, 12, 1) | - | — | |
|
--p-color-bg-critical-subdued-active
|
rgba(251, 197, 188, 1) | - | — | |
|
--p-color-bg-critical
|
rgba(251, 197, 188, 1) | - | — | |
|
--p-color-bg-critical-subdued
|
rgba(253, 226, 221, 1) | - | — | |
|
--p-color-bg-critical-subdued-hover
|
rgba(254, 243, 241, 1) | - | — | |
|
--p-color-bg-caution-strong
|
rgba(216, 155, 13, 1) | - | — | |
|
--p-color-bg-caution
|
rgba(248, 217, 144, 1) | - | — | |
|
--p-color-bg-caution-subdued-active
|
rgba(250, 229, 178, 1) | - | — | |
|
--p-color-bg-caution-subdued
|
rgba(252, 240, 212, 1) | - | — | |
|
--p-color-bg-caution-subdued-hover
|
rgba(254, 248, 236, 1) | - | — | |
|
--p-color-bg-info-strong
|
rgba(42, 172, 187, 1) | - | — | |
|
--p-color-bg-info-subdued-active
|
rgba(184, 233, 239, 1) | - | — | |
|
--p-color-bg-info
|
rgba(184, 233, 239, 1) | - | — | |
|
--p-color-bg-info-subdued
|
rgba(222, 245, 247, 1) | - | — | |
|
--p-color-bg-info-subdued-hover
|
rgba(238, 250, 251, 1) | - | — | |
|
--p-color-bg-interactive-active
|
rgba(14, 53, 108, 1) | - | — | |
|
--p-color-bg-interactive-hover
|
rgba(20, 73, 149, 1) | - | — | |
|
--p-color-bg-interactive
|
rgba(36, 99, 188, 1) | - | — | |
|
--p-color-bg-interactive-subdued-active
|
rgba(187, 212, 247, 1) | - | — | |
|
--p-color-bg-interactive-subdued-hover
|
rgba(232, 240, 253, 1) | - | — | |
|
--p-color-bg-interactive-subdued
|
rgba(240, 245, 253, 1) | - | — | |
|
--p-color-bg-interactive-selected
|
rgba(240, 245, 253, 1) | - | — | |
|
--p-color-bg-warning
|
rgba(250、201、168、1) | - | — | |
|
--p-color-bg-magic-strong
|
rgba(121, 69, 227, 1) | - | — | |
|
--p-color-bg-magic-hover
|
rgba(226, 214, 250, 1) | - | — | |
|
--p-color-bg-magic-active
|
rgba(203, 180, 248, 1) | - | — | |
|
--p-color-bg-magic
|
rgba(236, 227, 253, 1) | - | — | |
|
--p-color-bg-magic-subdued-hover
|
rgba(236, 227, 253, 1) | - | — | |
|
--p-color-bg-magic-subdued-active
|
rgba(226, 214, 250, 1) | - | — | |
|
--p-color-bg-magic-subdued
|
rgba(242, 237, 253, 1) | - | — | |
|
--p-color-border-input-hover
|
rgba(97, 106, 117, 1) | - | — | |
|
--p-color-border-inverse
|
rgba(97, 106, 117, 1) | - | — | |
|
--p-color-border-strong-hover
|
rgba(135, 144, 155, 1) | - | — | |
|
--p-color-border-input
|
rgba(171, 177, 186, 1) | - | — | |
|
--p-color-border-hover
|
rgba(171, 177, 186, 1) | - | — | |
|
--p-color-border-strong
|
rgba(171, 177, 186, 1) | - | — | |
|
--p-color-border
|
rgba(202, 206, 211, 1) | - | — | |
|
--p-color-border-disabled
|
rgba(221, 224, 228, 1) | - | — | |
|
--p-color-border-subdued
|
rgba(221, 224, 228, 1) | - | — | |
|
--p-color-border-interactive-disabled
|
rgba(221, 224, 228, 1) | - | — | |
|
--p-color-border-primary
|
rgba(0, 122, 92, 1) | - | — | |
|
--p-color-border-success
|
rgba(22, 166, 121, 1) | - | — | |
|
--p-color-border-success-subdued
|
rgba(80, 220, 169, 1) | - | — | |
|
--p-color-border-critical-active
|
rgba(67, 14, 4, 1) | - | — | |
|
--p-color-border-critical-hover
|
rgba(115, 24, 7, 1) | - | — | |
|
--p-color-border-critical
|
rgba(197, 40, 12, 1) | - | — | |
|
--p-color-border-critical-subdued
|
rgba(245, 107, 82, 1) | - | — | |
|
--p-color-border-caution
|
rgba(216, 155, 13, 1) | - | — | |
|
--p-color-border-caution-subdued
|
rgba(245, 196, 82, 1) | - | — | |
|
--p-color-border-info
|
rgba(59, 195, 211, 1) | - | — | |
|
--p-color-border-info-subdued
|
rgba(109, 211, 222, 1) | - | — | |
|
--p-color-border-interactive-active
|
rgba(14, 53, 108, 1) | - | — | |
|
--p-color-border-interactive-hover
|
rgba(20, 73, 149, 1) | - | — | |
|
--p-color-border-interactive
|
rgba(62, 125, 213, 1) | - | — | |
|
--p-color-border-interactive-focus
|
rgba(62, 125, 213, 1) | - | — | |
|
--p-color-border-interactive-subdued
|
rgba(187, 212, 247, 1) | - | — | |
|
--p-color-border-magic-strong
|
rgba(121, 69, 227, 1) | - | — | |
|
--p-color-border-magic
|
rgba(173, 139, 241, 1) | - | — | |
|
--p-color-icon-hover
|
rgba(31, 33, 36, 1) | - | — | |
|
--p-color-icon
|
rgba(97, 106, 117, 1) | - | — | |
|
--p-color-icon-active
|
rgba(31, 33, 36, 1) | - | — | |
|
--p-color-icon-subdued
|
rgba(135, 144, 155, 1) | - | — | |
|
--p-color-icon-disabled
|
rgba(171, 177, 186, 1) | - | — | |
|
--p-color-icon-interactive-disabled
|
rgba(171, 177, 186, 1) | - | — | |
|
--p-color-icon-inverse
|
rgba(221, 224, 228, 1) | - | — | |
|
--p-color-icon-on-color
|
rgba(255, 255, 255, 1) | - | — | |
|
--p-color-icon-primary
|
rgba(0, 122, 92, 1) | - | — | |
|
--p-color-icon-success
|
rgba(22, 166, 121, 1) | - | — | |
|
--p-color-icon-critical
|
rgba(197, 40, 12, 1) | - | — | |
|
--p-color-icon-caution
|
rgba(183, 126, 11, 1) | - | — | |
|
--p-color-icon-info
|
rgba(42, 172, 187, 1) | - | — | |
|
--p-color-icon-warning
|
rgba(242, 117, 34, 1) | - | — | |
|
--p-color-icon-interactive-active
|
rgba(14, 53, 108, 1) | - | — | |
|
--p-color-icon-interactive-hover
|
rgba(20, 73, 149, 1) | - | — | |
|
--p-color-icon-interactive
|
rgba(36, 99, 188, 1) | - | — | |
|
--p-color-icon-interactive-inverse
|
rgba(102, 153, 225, 1) | - | — | |
|
--p-color-icon-magic
|
rgba(121, 69, 227, 1) | - | — | |
|
--p-color-text
|
rgba(31, 33, 36, 1) | - | — | |
|
--p-color-text-subdued
|
rgba(97, 106, 117, 1) | - | — | |
|
--p-color-text-disabled
|
rgba(135, 144, 155, 1) | - | — | |
|
--p-color-text-interactive-disabled
|
rgba(135, 144, 155, 1) | - | — | |
|
--p-color-text-inverse-subdued
|
rgba(171, 177, 186, 1) | - | — | |
|
--p-color-text-inverse
|
rgba(241, 242, 244, 1) | - | — | |
|
--p-color-text-on-color
|
rgba(255, 255, 255, 1) | - | — | |
|
--p-color-text-success-strong
|
rgba(12, 59, 47, 1) | - | — | |
|
--p-color-text-success
|
rgba(0, 122, 92, 1) | - | — | |
|
——p-color-text-primary
|
rgba(0, 122, 92, 1) | - | — | |
|
——p-color-text-primary-hover
|
rgba(18, 84, 67, 1) | - | — | |
|
--p-color-text-critical-strong
|
rgba(67, 14, 4, 1) | - | — | |
|
--p-color-text-critical-active
|
rgba(115, 24, 7, 1) | - | — | |
|
--p-color-text-critical
|
rgba(197, 40, 12, 1) | - | — | |
|
--p-color-text-caution-strong
|
rgba(77, 46, 5, 1) | - | — | |
|
--p-color-text-caution
|
rgba(135, 92, 8, 1) | - | — | |
|
--p-color-text-info-strong
|
rgba(16, 65, 71, 1) | - | — | |
|
--p-color-text-info
|
rgba(32, 130, 141, 1) | - | — | |
|
--p-color-text-warning-strong
|
rgba(77, 36, 5, 1) | - | — | |
|
--p-color-text-interactive-active
|
rgba(14, 53, 108, 1) | - | — | |
|
--p-color-text-interactive-hover
|
rgba(20, 73, 149, 1) | - | — | |
|
--p-color-text-interactive
|
rgba(36, 99, 188, 1) | - | — | |
|
--p-color-text-interactive-inverse
|
rgba(102, 153, 225, 1) | - | — | |
|
--p-color-text-magic-strong
|
rgba(49, 13, 120, 1) | - | — | |
|
--p-color-text-magic
|
rgba(90, 36, 205, 1) | - | — |