Tokens

Token nameCurrent valueFigma usageDescription
--p-color-border-inverse-active
rgba(227, 227, 227, 1)-
--p-color-border-inverse-hover
rgba(204, 204, 204, 1)-
--p-color-border-warning
rgba(255, 200, 121, 1)-
--p-color-checkbox-icon-disabled
rgba(255, 255, 255, 1)-
--p-color-checkbox-bg-surface-disabled
rgba(0, 0, 0, 0.08)-
--p-color-bg-fill-active
rgba(247, 247, 247, 1)-
--p-color-bg-fill-brand-selected
rgba(48, 48, 48, 1)-
--p-color-bg-fill-caution-active
rgba(225, 203, 0, 1)-
--p-color-bg-fill-caution-hover
rgba(234, 211, 0, 1)-
--p-color-bg-fill-critical-selected
rgba(142, 31, 11, 1)-
--p-color-bg-fill-emphasis-active
rgba(0, 46, 106, 1)-
--p-color-bg-fill-emphasis-hover
rgba(0, 66, 153, 1)-
--p-color-bg-fill-emphasis
rgba(0, 91, 211, 1)-
--p-color-bg-fill-hover
rgba(250, 250, 250, 1)-
--p-color-bg-fill-info-active
rgba(0, 148, 213, 1)-
--p-color-bg-fill-info-hover
rgba(81, 192, 255, 1)-
--p-color-bg-fill-secondary-active
rgba(227, 227, 227, 1)-
--p-color-bg-fill-secondary-hover
rgba(235, 235, 235, 1)-
--p-color-bg-fill-selected
rgba(204, 204, 204, 1)-
--p-color-bg-fill-transparent-secondary-active
rgba(0, 0, 0, 0.11)-
--p-color-bg-fill-transparent-secondary-hover
rgba(0, 0, 0, 0.08)-
--p-color-bg-fill-transparent-selected
rgba(0, 0, 0, 0.06)-
--p-color-bg-fill-transparent
rgba(0, 0, 0, 0)-
--p-color-bg-fill-warning-active
rgba(178, 132, 0, 1)-
--p-color-bg-fill-warning-hover
rgba(229, 165, 0, 1)-
--p-color-bg-fill
rgba(255, 255, 255, 1)-
--p-color-icon-secondary-active
rgba(74, 74, 74, 1)-
--p-color-icon-secondary-hover
rgba(97, 97, 97, 1)-
--p-color-nav-bg
rgba(235, 235, 235, 1)-
--p-color-nav-bg-surface-active
rgba(250, 250, 250, 1)-
--p-color-nav-bg-surface-hover
rgba(241, 241, 241, 1)-
--p-color-nav-bg-surface-selected
rgba(250, 250, 250, 1)-
--p-color-nav-bg-surface
rgba(0, 0, 0, 0.02)-
--p-color-radio-button-icon-disabled
rgba(255, 255, 255, 1)-
--p-color-radio-button-bg-surface-disabled
rgba(0, 0, 0, 0.08)-
--p-color-bg-surface-emphasis-active
rgba(226, 231, 255, 1)-
--p-color-bg-surface-emphasis-hover
rgba(234, 237, 255, 1)-
--p-color-bg-surface-emphasis
rgba(240, 242, 255, 1)-
--p-color-bg-surface-inverse
rgba(48, 48, 48, 1)-
--p-color-bg-surface-magic-active
rgba(228, 222, 255, 1)-
--p-color-bg-surface-secondary-selected
rgba(235, 235, 235, 1)-
--p-color-bg-surface-tertiary-active
rgba(227, 227, 227, 1)-
--p-color-bg-surface-tertiary-hover
rgba(235, 235, 235, 1)-
--p-color-bg-surface-warning-active
rgba(255, 228, 198, 1)-
--p-color-bg-surface-warning-hover
rgba(255, 235, 213, 1)-
--p-color-text-brand-on-bg-fill-active
rgba(204, 204, 204, 1)-
--p-color-text-brand-on-bg-fill-disabled
rgba(255, 255, 255, 1)-
--p-color-text-brand-on-bg-fill-hover
rgba(227, 227, 227, 1)-
--p-color-text-brand-on-bg-fill
rgba(255, 255, 255, 1)-
--p-color-text-caution-active
rgba(31, 28, 0, 1)-
--p-color-text-caution-hover
rgba(51, 46, 0, 1)-
--p-color-text-caution-on-bg-fill
rgba(51, 46, 0, 1)-
--p-color-text-critical-on-bg-fill
rgba(255, 251, 251, 1)-
--p-color-text-emphasis-on-bg-fill-active
rgba(213, 220, 255, 1)-
--p-color-text-emphasis-on-bg-fill-hover
rgba(226, 231, 255, 1)-
--p-color-text-emphasis-on-bg-fill
rgba(252, 253, 255, 1)-
--p-color-text-info-active
rgba(0, 33, 51, 1)-
--p-color-text-info-hover
rgba(0, 58, 90, 1)-
--p-color-text-magic-on-bg-fill
rgba(253, 253, 255, 1)-
--p-color-text-success-active
rgba(9, 42, 27, 1)-
--p-color-text-success-hover
rgba(8, 61, 37, 1)-
--p-color-text-success-on-bg-fill
rgba(248, 255, 251, 1)-
--p-color-text-warning-active
rgba(37, 26, 0, 1)-
--p-color-text-warning-hover
rgba(65, 45, 0, 1)-
--p-color-text-warning-on-bg-fill
rgba(37, 26, 0, 1)-
--p-color-video-thumbnail-play-button-bg-fill-hover
rgba(0, 0, 0, 0.81)-
--p-color-video-thumbnail-play-button-bg-fill
rgba(0, 0, 0, 0.71)-
--p-color-video-thumbnail-play-button-text-on-bg-fill
rgba(255, 255, 255, 1)-
--p-color-bg-surface
var(--p-color-bg)
--p-color-bg-surface-hover
rgba(247, 247, 247, 1)-
--p-color-bg-surface-active
rgba(243, 243, 243, 1)-
--p-color-bg-surface-disabled
rgba(0, 0, 0, 0.05)-
--p-color-bg-surface-secondary
var(--p-color-bg-subdued)
--p-color-bg-surface-secondary-hover
var(--p-color-bg-subdued-hover)
--p-color-bg-surface-secondary-active
var(--p-color-bg-subdued-active)
--p-color-bg-surface-tertiary
var(--p-color-bg-secondary-experimental)
--p-color-bg-fill-tertiary
var(--p-color-bg-strong)
--p-color-bg-fill-tertiary-hover
var(--p-color-bg-strong-hover)
--p-color-bg-fill-tertiary-active
var(--p-color-bg-strong-active)
--p-color-input-bg-surface
var(--p-color-bg-input)
--p-color-input-bg-surface-hover
var(--p-color-bg-input-hover-experimental)
--p-color-input-bg-surface-active
var(--p-color-bg-input-active-experimental)
--p-color-bg-fill-brand
rgba(48, 48, 48, 1)-
--p-color-bg-fill-brand-hover
rgba(26, 26, 26, 1)-
--p-color-bg-fill-brand-active
rgba(26, 26, 26, 1)-
--p-color-bg-surface-brand
rgba(227, 227, 227, 1)-
--p-color-bg-surface-brand-hover
rgba(235, 235, 235, 1)-
--p-color-bg-surface-brand-active
rgba(241, 241, 241, 1)-
--p-color-bg-surface-brand-selected
rgba(241, 241, 241, 1)-
--p-color-bg-surface-selected
var(--p-color-bg-app-selected)
--p-color-bg-fill-success
var(--p-color-bg-success-strong)
--p-color-bg-fill-success-hover
var(--p-color-bg-success-strong-hover-experimental)
--p-color-bg-fill-success-active
var(--p-color-bg-success-strong-active-experimental)
--p-color-bg-fill-success-secondary
var(--p-color-bg-success)
--p-color-bg-surface-success
var(--p-color-bg-success-subdued)
--p-color-bg-surface-success-hover
var(--p-color-bg-success-subdued-hover)
--p-color-bg-surface-success-active
var(--p-color-bg-success-subdued-active)
--p-color-bg-fill-critical
var(--p-color-bg-critical-strong)
--p-color-bg-fill-critical-hover
var(--p-color-bg-critical-strong-hover)
--p-color-bg-fill-critical-active
var(--p-color-bg-critical-strong-active)
--p-color-bg-fill-critical-secondary
var(--p-color-bg-critical)
--p-color-bg-surface-critical
var(--p-color-bg-critical-subdued)
--p-color-bg-surface-critical-hover
var(--p-color-bg-critical-subdued-hover)
--p-color-bg-surface-critical-active
var(--p-color-bg-critical-subdued-active)
--p-color-bg-fill-caution
var(--p-color-bg-caution-strong)
--p-color-bg-fill-caution-secondary
var(--p-color-bg-caution)
--p-color-bg-surface-caution
var(--p-color-bg-caution-subdued)
--p-color-bg-surface-caution-hover
var(--p-color-bg-caution-subdued-hover)
--p-color-bg-surface-caution-active
var(--p-color-bg-caution-subdued-active)
--p-color-bg-fill-info
var(--p-color-bg-info-strong)
--p-color-bg-fill-info-secondary
var(--p-color-bg-info)
--p-color-bg-surface-info
var(--p-color-bg-info-subdued)
--p-color-bg-surface-info-hover
var(--p-color-bg-info-subdued-hover)
--p-color-bg-surface-info-active
var(--p-color-bg-info-subdued-active)
--p-color-bg-fill-warning
var(--p-color-bg-warning-strong-experimental)
--p-color-bg-fill-warning-secondary
var(--p-color-bg-warning)
--p-color-bg-surface-warning
var(--p-color-bg-warning-subdued-experimental)
--p-color-bg-fill-magic
var(--p-color-bg-magic-strong)
--p-color-bg-fill-magic-secondary
var(--p-color-bg-magic)
--p-color-bg-fill-magic-secondary-hover
var(--p-color-bg-magic-hover)
--p-color-bg-fill-magic-secondary-active
var(--p-color-bg-magic-active)
--p-color-bg-surface-magic
rgba(243, 241, 255, 1)-
--p-color-bg-surface-magic-hover
var(--p-color-bg-magic-subdued-hover)
--p-color-bg-fill-secondary
var(--p-color-bg-inset)
--p-color-bg-fill-inverse
var(--p-color-bg-inset-strong)
--p-color-bg-fill-inverse-hover
var(--p-color-bg-inverse-hover)
--p-color-bg-fill-inverse-active
var(--p-color-bg-inverse-active)
--p-color-bg-surface-transparent
var(--p-color-bg-transparent-experimental)
--p-color-bg-fill-transparent-hover
var(--p-color-bg-transparent-hover-experimental)
--p-color-bg-fill-transparent-active
var(--p-color-bg-transparent-active-experimental)
--p-color-bg-fill-disabled
var(--p-color-bg-transparent-disabled-experimental)
--p-color-bg-fill-transparent-secondary
var(--p-color-bg-transparent-subdued-experimental)
--p-color-bg-fill-brand-disabled
var(--p-color-bg-transparent-primary-disabled-experimental)
--p-color-backdrop-bg
var(--p-color-bg-backdrop-experimental)
--p-color-avatar-bg-fill
var(--p-color-avatar-background-experimental)
--p-color-avatar-one-bg-fill
var(--p-color-avatar-style-one-background-experimental)
--p-color-avatar-two-bg-fill
var(--p-color-avatar-style-two-background-experimental)
--p-color-avatar-three-bg-fill
var(--p-color-avatar-style-three-background-experimental)
--p-color-avatar-four-bg-fill
var(--p-color-avatar-style-four-background-experimental)
--p-color-avatar-five-bg-fill
var(--p-color-avatar-style-five-background-experimental)
--p-color-text-secondary
var(--p-color-text-subdued)
--p-color-text-emphasis
var(--p-color-text-interactive)
--p-color-text-emphasis-hover
var(--p-color-text-interactive-hover)
--p-color-text-emphasis-active
var(--p-color-text-interactive-active)
--p-color-text-brand
var(--p-color-text-primary)
--p-color-text-brand-hover
var(--p-color-text-primary-hover)
--p-color-text-critical-hover
rgba(95, 21, 7, 1)-
--p-color-text-info-on-bg-fill
var(--p-color-text-info-strong)
--p-color-text-warning
rgba(94, 66, 0, 1)-
--p-color-text-inverse-secondary
var(--p-color-text-inverse-subdued)
--p-color-avatar-text-on-bg-fill
var(--p-color-avatar-color-experimental)
--p-color-avatar-one-text-on-bg-fill
var(--p-color-avatar-style-one-color-experimental)
--p-color-avatar-two-text-on-bg-fill
var(--p-color-avatar-style-two-color-experimental)
--p-color-avatar-three-text-on-bg-fill
var(--p-color-avatar-style-three-color-experimental)
--p-color-avatar-four-text-on-bg-fill
var(--p-color-avatar-style-four-color-experimental)
--p-color-avatar-five-text-on-bg-fill
var(--p-color-avatar-style-five-color-experimental)
--p-color-icon-secondary
var(--p-color-icon-subdued)
--p-color-icon-emphasis
var(--p-color-icon-interactive)
--p-color-icon-emphasis-hover
var(--p-color-icon-interactive-hover)
--p-color-icon-emphasis-active
var(--p-color-icon-interactive-active)
--p-color-icon-brand
var(--p-color-icon-primary)
--p-color-border-secondary
var(--p-color-border-subdued)
--p-color-border-tertiary
rgba(204, 204, 204, 1)-
--p-color-input-border
var(--p-color-border-input)
--p-color-input-border-hover
var(--p-color-border-input-hover)
--p-color-input-border-active
var(--p-color-border-input-active-experimental)
--p-color-border-emphasis
rgba(0, 91, 211, 1)-
--p-color-border-emphasis-hover
var(--p-color-border-interactive-hover)
--p-color-border-emphasis-active
var(--p-color-border-interactive-active)
--p-color-border-focus
var(--p-color-border-interactive-focus)
--p-color-border-brand
var(--p-color-border-primary)
--p-color-border-critical-secondary
var(--p-color-border-critical-strong-experimental)
--p-color-border-magic-secondary
var(--p-color-border-magic-strong)
--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)-