PolarisTokens → Color
| Name | Value | Description | |
|---|---|---|---|
--p-color-scheme | light | — | |
--p-color-bg | rgba(241, 241, 241, 1) | The default background color of the admin. | |
--p-color-bg-inverse | rgba(26, 26, 26, 1) | Use for high contrast page or component backgrounds. | |
--p-color-bg-surface | rgba(255, 255, 255, 1) | The background color for elements with the highest level of prominence, like a card. | |
--p-color-bg-surface-hover | rgba(247, 247, 247, 1) | The hover state color for elements with the highest level of prominence. | |
--p-color-bg-surface-active | rgba(243, 243, 243, 1) | The active state (on press) color for elements with the highest level of prominence. | |
--p-color-bg-surface-selected | rgba(241, 241, 241, 1) | The selected state color for elements with the highest level of prominence. | |
--p-color-bg-surface-disabled | rgba(0, 0, 0, 0.05) | The disabled state color for elements. | |
--p-color-bg-surface-secondary | rgba(247, 247, 247, 1) | The background color for elements with a secondary level of prominence. | |
--p-color-bg-surface-secondary-hover | rgba(241, 241, 241, 1) | The hover state color for elements with a secondary level of prominence. | |
--p-color-bg-surface-secondary-active | rgba(235, 235, 235, 1) | The active state (on press) color for elements with a secondary level of prominence. | |
--p-color-bg-surface-secondary-selected | rgba(235, 235, 235, 1) | The selected state color for elements with a secondary level of prominence. | |
--p-color-bg-surface-tertiary | rgba(243, 243, 243, 1) | The background color for elements with a third level of prominence. | |
--p-color-bg-surface-tertiary-hover | rgba(235, 235, 235, 1) | The hover state color for elements with a third level of prominence. | |
--p-color-bg-surface-tertiary-active | rgba(227, 227, 227, 1) | The active state (on press) color for elements with a third level of prominence. | |
--p-color-bg-surface-brand | rgba(227, 227, 227, 1) | Use to apply the key color to elements. | |
--p-color-bg-surface-brand-hover | rgba(235, 235, 235, 1) | The hover state color for key elements. | |
--p-color-bg-surface-brand-active | rgba(241, 241, 241, 1) | The active state (on press) color for key elements. | |
--p-color-bg-surface-brand-selected | rgba(241, 241, 241, 1) | The selected state color for key elements. | |
--p-color-bg-surface-info | rgba(234, 244, 255, 1) | Use for backgrounds communicating important information, like banners. | |
--p-color-bg-surface-info-hover | rgba(224, 240, 255, 1) | The hover state color for communicating important information. | |
--p-color-bg-surface-info-active | rgba(202, 230, 255, 1) | The active state (on press) color for communicating important information. | |
--p-color-bg-surface-success | rgba(205, 254, 212, 1) | Use for backgrounds communicating success, like banners. | |
--p-color-bg-surface-success-hover | rgba(175, 254, 191, 1) | The hover state color for communicating success. | |
--p-color-bg-surface-success-active | rgba(146, 252, 172, 1) | The active state (on press) color for communicating success. | |
--p-color-bg-surface-caution | rgba(255, 248, 219, 1) | Use for backgrounds communicating caution, like banners. | |
--p-color-bg-surface-caution-hover | rgba(255, 244, 191, 1) | The hover state for communicating caution. | |
--p-color-bg-surface-caution-active | rgba(255, 239, 157, 1) | The active state (on press) color for communicating caution. | |
--p-color-bg-surface-warning | rgba(255, 241, 227, 1) | Use for backgrounds communicating warning, like banners. | |
--p-color-bg-surface-warning-hover | rgba(255, 235, 213, 1) | The hover state color for communicating warning. | |
--p-color-bg-surface-warning-active | rgba(255, 228, 198, 1) | The active state (on press) color for communicating warning. | |
--p-color-bg-surface-critical | rgba(254, 232, 235, 1) | Use for backgrounds communicating critical information, like banners or input errors. | |
--p-color-bg-surface-critical-hover | rgba(254, 225, 230, 1) | The hover state color for communicating critical information. | |
--p-color-bg-surface-critical-active | rgba(254, 217, 223, 1) | The active state (on press) color for communicating critical information. | |
--p-color-bg-surface-emphasis | rgba(240, 242, 255, 1) | Use for backgrounds indicating areas of focus in editors, such as the theme editor. | |
--p-color-bg-surface-emphasis-hover | rgba(234, 237, 255, 1) | The hover state color for elements indicating areas of focus in editors. | |
--p-color-bg-surface-emphasis-active | rgba(226, 231, 255, 1) | The active state (on press) color for elements indicating areas of focus in editors. | |
--p-color-bg-surface-magic | rgba(248, 247, 255, 1) | Use for backgrounds of elements suggested by magic AI. | |
--p-color-bg-surface-magic-hover | rgba(243, 241, 255, 1) | The hover state color for elements suggested by magic AI. | |
--p-color-bg-surface-magic-active | rgba(233, 229, 255, 1) | The active state (on press) color for elements suggested by magic AI. | |
--p-color-bg-surface-inverse | rgba(48, 48, 48, 1) | Use for elements on bg-inverse. | |
--p-color-bg-surface-transparent | rgba(0, 0, 0, 0) | Use for elements that need a fully transparent background. | |
--p-color-bg-fill | rgba(255, 255, 255, 1) | The background color of contained elements with a smaller surface area, like a button. | |
--p-color-bg-fill-hover | rgba(250, 250, 250, 1) | The hover state color of contained elements with a smaller surface area, like a button. | |
--p-color-bg-fill-active | rgba(247, 247, 247, 1) | The active state (on press) color of contained elements with a smaller surface area, like a button. | |
--p-color-bg-fill-selected | rgba(204, 204, 204, 1) | The selected state color of contained elements with a smaller surface area, like a button or checkbox. | |
--p-color-bg-fill-disabled | rgba(0, 0, 0, 0.05) | The disabled state color of contained elements with a smaller surface area, like a button. | |
--p-color-bg-fill-secondary | rgba(241, 241, 241, 1) | The background color of elements with a smaller surface area and a secondary level of prominence. | |
--p-color-bg-fill-secondary-hover | rgba(235, 235, 235, 1) | The hover state color of elements with a smaller surface area and a secondary level of prominence. | |
--p-color-bg-fill-secondary-active | rgba(227, 227, 227, 1) | The active state (on press) color of elements with a smaller surface area and a secondary level of prominence. | |
--p-color-bg-fill-secondary-selected | rgba(227, 227, 227, 1) | The selected state (on press) color of elements with a smaller surface area and a secondary level of prominence. | |
--p-color-bg-fill-tertiary | rgba(227, 227, 227, 1) | The background color of elements with a smaller surface area and a third level of prominence. | |
--p-color-bg-fill-tertiary-hover | rgba(212, 212, 212, 1) | The hover state color of elements with a smaller surface area and a third level of prominence. | |
--p-color-bg-fill-tertiary-active | rgba(204, 204, 204, 1) | The active state (on press) color of elements with a smaller surface area and a third level of prominence. | |
--p-color-bg-fill-brand | rgba(48, 48, 48, 1) | The background color of main actions, like primary buttons. | |
--p-color-bg-fill-brand-hover | rgba(26, 26, 26, 1) | The hover state color of main actions, like primary buttons. | |
--p-color-bg-fill-brand-active | rgba(26, 26, 26, 1) | The active state (on press) color of main actions, like primary buttons. | |
--p-color-bg-fill-brand-selected | rgba(48, 48, 48, 1) | The selected state color of main actions, like primary buttons. | |
--p-color-bg-fill-brand-disabled | rgba(0, 0, 0, 0.17) | The disabled state color of main actions, like primary buttons. | |
--p-color-bg-fill-info | rgba(145, 208, 255, 1) | Use for backgrounds communicating important information on elements with a smaller surface area, like a badge or button. | |
--p-color-bg-fill-info-hover | rgba(81, 192, 255, 1) | The hover state color for communicating important information on elements with a smaller surface area. | |
--p-color-bg-fill-info-active | rgba(0, 148, 213, 1) | The active state (on press) color for communicating important information on elements with a smaller surface area. | |
--p-color-bg-fill-info-secondary | rgba(213, 235, 255, 1) | Use for backgrounds communicating important information on elements with a smaller surface area, with a secondary level of prominence. | |
--p-color-bg-fill-success | rgba(4, 123, 93, 1) | Use for backgrounds communicating success on elements with a smaller surface area, like a badge or a banner. | |
--p-color-bg-fill-success-hover | rgba(3, 94, 76, 1) | The hover state color for communicating success on elements with a smaller surface area. | |
--p-color-bg-fill-success-active | rgba(1, 75, 64, 1) | The active state (on press) color for communicating success on elements with a smaller surface area. | |
--p-color-bg-fill-success-secondary | rgba(175, 254, 191, 1) | Use for backgrounds communicating success on elements with a smaller surface area, with a secondary level of prominence. | |
--p-color-bg-fill-warning | rgba(255, 184, 0, 1) | Use for backgrounds communicating warning on elements with a smaller surface area, like a badge or a banner. | |
--p-color-bg-fill-warning-hover | rgba(229, 165, 0, 1) | The hover state color for communicating warning on elements with a smaller surface area. | |
--p-color-bg-fill-warning-active | rgba(178, 132, 0, 1) | The active state (on press) color for communicating warning on elements with a smaller surface area. | |
--p-color-bg-fill-warning-secondary | rgba(255, 214, 164, 1) | Use for backgrounds communicating warning on elements with a smaller surface area, with a secondary level of prominence. | |
--p-color-bg-fill-caution | rgba(255, 230, 0, 1) | Use for backgrounds communicating caution on elements with a smaller surface area, like a badge or a banner. | |
--p-color-bg-fill-caution-hover | rgba(234, 211, 0, 1) | The hover state color for communicating caution on elements with a smaller surface area. | |
--p-color-bg-fill-caution-active | rgba(225, 203, 0, 1) | The active state (on press) color for communicating caution on elements with a smaller surface area. | |
--p-color-bg-fill-caution-secondary | rgba(255, 235, 120, 1) | Use for backgrounds communicating caution on elements with a smaller surface area, with a secondary level of prominence. | |
--p-color-bg-fill-critical | rgba(199, 10, 36, 1) | Use for backgrounds communicating critical information on elements with a smaller surface area, like a badge or a banner. | |
--p-color-bg-fill-critical-hover | rgba(163, 10, 36, 1) | The hover state color for communicating critical information on elements with a smaller surface area. | |
--p-color-bg-fill-critical-active | rgba(142, 11, 33, 1) | The active state (on press) color for communicating critical information on elements with a smaller surface area. | |
--p-color-bg-fill-critical-selected | rgba(142, 11, 33, 1) | The selected state color for communicating critical information on elements with a smaller surface area. | |
--p-color-bg-fill-critical-secondary | rgba(254, 209, 215, 1) | Use for backgrounds communicating critical information on elements with a smaller surface area, with a secondary level of prominence. | |
--p-color-bg-fill-emphasis | rgba(0, 91, 211, 1) | Use for backgrounds indicating areas of focus in editors on elements with a smaller surface area, like a button or a badge. | |
--p-color-bg-fill-emphasis-hover | rgba(0, 66, 153, 1) | The hover state color for indicating areas of focus in editors on elements with a smaller surface area. | |
--p-color-bg-fill-emphasis-active | rgba(0, 46, 106, 1) | The active state (on press) color for indicating areas of focus in editors on elements with a smaller surface area. | |
--p-color-bg-fill-magic | rgba(128, 81, 255, 1) | The background color of elements suggested by magic AI, like a badge or a banner. | |
--p-color-bg-fill-magic-secondary | rgba(233, 229, 255, 1) | The background color of elements suggested by magic AI, with a secondary level of prominence. | |
--p-color-bg-fill-magic-secondary-hover | rgba(228, 222, 255, 1) | The hover state color of elements suggested by magic AI, with a secondary level of prominence. | |
--p-color-bg-fill-magic-secondary-active | rgba(223, 217, 255, 1) | The active state (on press) color of elements suggested by magic AI, with a secondary level of prominence. | |
--p-color-bg-fill-inverse | rgba(48, 48, 48, 1) | The background color of elements with a smaller surface area on an inverse background. | |
--p-color-bg-fill-inverse-hover | rgba(74, 74, 74, 1) | The hover state color of elements with a smaller surface area on an inverse background. | |
--p-color-bg-fill-inverse-active | rgba(97, 97, 97, 1) | The active state (on press) color of elements with a smaller surface area on an inverse background. | |
--p-color-bg-fill-transparent | rgba(0, 0, 0, 0.02) | The background color of elements that need to sit on different background colors, like tabs. | |
--p-color-bg-fill-transparent-hover | rgba(0, 0, 0, 0.05) | The hover state color of elements that need to sit on different background colors, like tabs. | |
--p-color-bg-fill-transparent-active | rgba(0, 0, 0, 0.08) | The active state (on press) color of elements that need to sit on different background colors, like tabs. | |
--p-color-bg-fill-transparent-selected | rgba(0, 0, 0, 0.08) | The selected state color of elements that need to sit on different background colors, like tabs. | |
--p-color-bg-fill-transparent-secondary | rgba(0, 0, 0, 0.06) | The background color of elements that need to sit on different background colors, with a secondary level of prominence. | |
--p-color-bg-fill-transparent-secondary-hover | rgba(0, 0, 0, 0.08) | The hover state color of elements that need to sit on different background colors, with a secondary level of prominence. | |
--p-color-bg-fill-transparent-secondary-active | rgba(0, 0, 0, 0.11) | The active state (on press) color of elements that need to sit on different background colors, with a secondary level of prominence. | |
--p-color-text | rgba(48, 48, 48, 1) | The default text color. | |
--p-color-text-secondary | rgba(97, 97, 97, 1) | Use for text with a secondary level of prominence. | |
--p-color-text-disabled | rgba(181, 181, 181, 1) | Use for text in a disabled state. | |
--p-color-text-link | rgba(0, 91, 211, 1) | Use for text links. | |
--p-color-text-link-hover | rgba(0, 66, 153, 1) | The hover state color for text links. | |
--p-color-text-link-active | rgba(0, 46, 106, 1) | The active state (on press) color for text links. | |
--p-color-text-brand | rgba(74, 74, 74, 1) | Use for text that needs to pull attention. | |
--p-color-text-brand-hover | rgba(48, 48, 48, 1) | The hover state color for text that needs to pull attention. | |
--p-color-text-brand-on-bg-fill | rgba(255, 255, 255, 1) | Use for text on bg-fill-brand, like primary buttons. | |
--p-color-text-brand-on-bg-fill-hover | rgba(227, 227, 227, 1) | The hover state color for text on bg-fill-brand-hover. | |
--p-color-text-brand-on-bg-fill-active | rgba(204, 204, 204, 1) | The active state (on press) color for text on bg-fill-brand. | |
--p-color-text-brand-on-bg-fill-disabled | rgba(255, 255, 255, 1) | The disabled state color for text on bg-fill-brand-disabled. | |
--p-color-text-info | rgba(0, 58, 90, 1) | Use for text communicating important information. | |
--p-color-text-info-hover | rgba(0, 58, 90, 1) | The hover state color for text communicating important information. | |
--p-color-text-info-active | rgba(0, 33, 51, 1) | The active state (on press) color for text communicating important information. | |
--p-color-text-info-secondary | rgba(0, 124, 180, 1) | Use for text communicating important information with a secondary level of prominence. | |
--p-color-text-info-on-bg-fill | rgba(0, 33, 51, 1) | Use for text and icons on bg-fill-info. | |
--p-color-text-success | rgba(1, 75, 64, 1) | Use for text communicating success. | |
--p-color-text-success-hover | rgba(7, 54, 48, 1) | The hover state color for text communicating success. | |
--p-color-text-success-active | rgba(2, 38, 34, 1) | The active state (on press) color for text communicating success. | |
--p-color-text-success-secondary | rgba(4, 123, 93, 1) | Use for text communicating success with a secondary level of prominence. | |
--p-color-text-success-on-bg-fill | rgba(250, 255, 251, 1) | Use for text and icons on bg-fill-success. | |
--p-color-text-caution | rgba(79, 71, 0, 1) | Use for text communicating caution. | |
--p-color-text-caution-hover | rgba(51, 46, 0, 1) | The hover state color for text communicating caution. | |
--p-color-text-caution-active | rgba(31, 28, 0, 1) | The active state (on press) color for text communicating caution. | |
--p-color-text-caution-secondary | rgba(130, 117, 0, 1) | Use for text communicating caution with a secondary level of prominence. | |
--p-color-text-caution-on-bg-fill | rgba(51, 46, 0, 1) | Use for text and icons on bg-fill-caution. | |
--p-color-text-warning | rgba(94, 66, 0, 1) | Use for text communicating warning. | |
--p-color-text-warning-hover | rgba(65, 45, 0, 1) | The hover state color for text communicating warning. | |
--p-color-text-warning-active | rgba(37, 26, 0, 1) | The active state (on press) color for text communicating warning. | |
--p-color-text-warning-secondary | rgba(149, 111, 0, 1) | Use for text communicating warning with a secondary level of prominence. | |
--p-color-text-warning-on-bg-fill | rgba(37, 26, 0, 1) | Use for text and icons on bg-fill-warning. | |
--p-color-text-critical | rgba(142, 11, 33, 1) | Use for text communicating critical information. | |
--p-color-text-critical-hover | rgba(95, 7, 22, 1) | The hover state color for text communicating critical information. | |
--p-color-text-critical-active | rgba(47, 4, 11, 1) | The active state (on press) color for text communicating critical information. | |
--p-color-text-critical-secondary | rgba(199, 10, 36, 1) | Use for text communicating critical information with a secondary level of prominence. | |
--p-color-text-critical-on-bg-fill | rgba(255, 250, 251, 1) | Use for text and icons on bg-fill-critical. | |
--p-color-text-emphasis | rgba(0, 91, 211, 1) | Use for text indicating areas of focus in editors, like the theme editor. | |
--p-color-text-emphasis-hover | rgba(0, 66, 153, 1) | The hover state color for text indicating areas of focus. | |
--p-color-text-emphasis-active | rgba(0, 46, 106, 1) | The active state (on press) color for text indicating areas of focus. | |
--p-color-text-emphasis-on-bg-fill | rgba(252, 253, 255, 1) | Use for text and icons on bg-fill-emphasis. | |
--p-color-text-emphasis-on-bg-fill-hover | rgba(226, 231, 255, 1) | Use for text and icons on bg-fill-emphasis-hover. | |
--p-color-text-emphasis-on-bg-fill-active | rgba(213, 220, 255, 1) | Use for text and icons on bg-fill-emphasis-active. | |
--p-color-text-magic | rgba(87, 0, 209, 1) | Use for text suggested by magic AI. | |
--p-color-text-magic-secondary | rgba(113, 38, 255, 1) | Use for text suggested by magic AI with a secondary level of prominence. | |
--p-color-text-magic-on-bg-fill | rgba(253, 253, 255, 1) | Use for text and icons on bg-fill-magic. | |
--p-color-text-inverse | rgba(227, 227, 227, 1) | Use for text on an inverse background. | |
--p-color-text-inverse-secondary | rgba(181, 181, 181, 1) | Use for secondary text on an inverse background. | |
--p-color-text-link-inverse | rgba(197, 208, 255, 1) | Use for text links on an inverse background. | |
--p-color-border | rgba(227, 227, 227, 1) | The default color for borders on any element. | |
--p-color-border-hover | rgba(204, 204, 204, 1) | The hover color for borders on any element. | |
--p-color-border-disabled | rgba(235, 235, 235, 1) | The disabled color for borders on any element. | |
--p-color-border-secondary | rgba(235, 235, 235, 1) | The color for hr elements or any visual dividers. | |
--p-color-border-tertiary | rgba(204, 204, 204, 1) | The border color on any element. Pair with bg-surface-tertiary or bg-fill-tertiary. | |
--p-color-border-focus | rgba(0, 91, 211, 1) | The focus ring for any interactive element in a focused state. | |
--p-color-border-brand | rgba(227, 227, 227, 1) | Use for borders paired with brand colors. | |
--p-color-border-info | rgba(168, 216, 255, 1) | Use for borders communicating information. | |
--p-color-border-success | rgba(146, 252, 172, 1) | Use for borders communicating success. | |
--p-color-border-caution | rgba(255, 235, 120, 1) | Use for borders communicating caution. | |
--p-color-border-warning | rgba(255, 200, 121, 1) | Use for borders communicating warning. | |
--p-color-border-critical | rgba(254, 193, 199, 1) | Use for borders communicating critical information. | |
--p-color-border-critical-secondary | rgba(142, 11, 33, 1) | Use for borders communicating critical information, such as borders on invalid text fields. | |
--p-color-border-emphasis | rgba(0, 91, 211, 1) | Use for borders indicating areas of focus. | |
--p-color-border-emphasis-hover | rgba(0, 66, 153, 1) | The hover state color for borders indicating areas of focus. | |
--p-color-border-emphasis-active | rgba(0, 46, 106, 1) | The active state (on press) color for borders indicating areas of focus. | |
--p-color-border-magic | rgba(228, 222, 255, 1) | Use for borders suggested by magic AI. | |
--p-color-border-magic-secondary | rgba(148, 116, 255, 1) | Use for borders suggested by magic AI, such as borders on text fields. | |
--p-color-border-magic-secondary-hover | rgba(128, 81, 255, 1) | Use for borders suggested by magic AI, such as borders on text fields. | |
--p-color-border-inverse | rgba(97, 97, 97, 1) | Use for borders on an inverse background, such as borders on the global search. | |
--p-color-border-inverse-hover | rgba(204, 204, 204, 1) | The hover state color for borders on an inverse background. | |
--p-color-border-inverse-active | rgba(227, 227, 227, 1) | The active state (on press) color for borders on an inverse background. | |
--p-color-tooltip-tail-down-border | rgba(212, 212, 212, 1) | The border color for tooltip tails pointing down. | |
--p-color-tooltip-tail-up-border | rgba(227, 227, 227, 1) | The border color for tooltip tails pointing up. | |
--p-color-icon | rgba(74, 74, 74, 1) | The default color for icons. | |
--p-color-icon-hover | rgba(48, 48, 48, 1) | The hover state color for icons. | |
--p-color-icon-active | rgba(26, 26, 26, 1) | The active state (on press) color for icons. | |
--p-color-icon-disabled | rgba(204, 204, 204, 1) | The disabled state color for icons. | |
--p-color-icon-secondary | rgba(138, 138, 138, 1) | Use for secondary icons. | |
--p-color-icon-secondary-hover | rgba(97, 97, 97, 1) | The hover state color for secondary icons. | |
--p-color-icon-secondary-active | rgba(74, 74, 74, 1) | The active state (on press) color for secondary icons. | |
--p-color-icon-brand | rgba(26, 26, 26, 1) | Use for icons that need to pull more focus. | |
--p-color-icon-info | rgba(0, 148, 213, 1) | Use for icons communicating information. | |
--p-color-icon-success | rgba(4, 123, 93, 1) | Use for icons communicating success. | |
--p-color-icon-caution | rgba(153, 138, 0, 1) | Use for icons communicating caution. | |
--p-color-icon-warning | rgba(178, 132, 0, 1) | Use for icons communicating warning. | |
--p-color-icon-critical | rgba(226, 44, 56, 1) | Use for icons communicating critical information. | |
--p-color-icon-emphasis | rgba(0, 91, 211, 1) | Use for icons indicating areas of focus in editors, like the theme editor. | |
--p-color-icon-emphasis-hover | rgba(0, 66, 153, 1) | The hover color for icons indicating areas of focus in editors. | |
--p-color-icon-emphasis-active | rgba(0, 46, 106, 1) | The active state (on press) color for icons indicating areas of focus in editors. | |
--p-color-icon-magic | rgba(128, 81, 255, 1) | Use for icons suggested by magic AI. | |
--p-color-icon-inverse | rgba(227, 227, 227, 1) | Use for icons on an inverse background. | |
--p-color-avatar-bg-fill | rgba(181, 181, 181, 1) | — | |
--p-color-avatar-five-bg-fill | rgba(253, 75, 146, 1) | — | |
--p-color-avatar-five-text-on-bg-fill | rgba(255, 246, 248, 1) | — | |
--p-color-avatar-four-bg-fill | rgba(81, 192, 255, 1) | — | |
--p-color-avatar-four-text-on-bg-fill | rgba(0, 33, 51, 1) | — | |
--p-color-avatar-one-bg-fill | rgba(197, 48, 197, 1) | — | |
--p-color-avatar-one-text-on-bg-fill | rgba(253, 239, 253, 1) | — | |
--p-color-avatar-seven-bg-fill | rgba(148, 116, 255, 1) | — | |
--p-color-avatar-seven-text-on-bg-fill | rgba(248, 247, 255, 1) | — | |
--p-color-avatar-six-bg-fill | rgba(37, 232, 43, 1) | — | |
--p-color-avatar-six-text-on-bg-fill | rgba(3, 61, 5, 1) | — | |
--p-color-avatar-text-on-bg-fill | rgba(255, 255, 255, 1) | — | |
--p-color-avatar-three-bg-fill | rgba(44, 224, 212, 1) | — | |
--p-color-avatar-three-text-on-bg-fill | rgba(3, 60, 57, 1) | — | |
--p-color-avatar-two-bg-fill | rgba(82, 244, 144, 1) | — | |
--p-color-avatar-two-text-on-bg-fill | rgba(1, 75, 64, 1) | — | |
--p-color-backdrop-bg | rgba(0, 0, 0, 0.71) | — | |
--p-color-button-gradient-bg-fill | linear-gradient(180deg, rgba(48, 48, 48, 0) 63.53%, rgba(255, 255, 255, 0.15) 100%) | — | |
--p-color-checkbox-bg-surface-disabled | rgba(0, 0, 0, 0.08) | — | |
--p-color-checkbox-icon-disabled | rgba(255, 255, 255, 1) | — | |
--p-color-input-bg-surface | rgba(253, 253, 253, 1) | — | |
--p-color-input-bg-surface-hover | rgba(250, 250, 250, 1) | — | |
--p-color-input-bg-surface-active | rgba(247, 247, 247, 1) | — | |
--p-color-input-border | rgba(138, 138, 138, 1) | — | |
--p-color-input-border-hover | rgba(97, 97, 97, 1) | — | |
--p-color-input-border-active | rgba(26, 26, 26, 1) | — | |
--p-color-nav-bg | rgba(235, 235, 235, 1) | — | |
--p-color-nav-bg-surface | rgba(0, 0, 0, 0.02) | — | |
--p-color-nav-bg-surface-hover | rgba(241, 241, 241, 1) | — | |
--p-color-nav-bg-surface-active | rgba(250, 250, 250, 1) | — | |
--p-color-nav-bg-surface-selected | rgba(250, 250, 250, 1) | — | |
--p-color-radio-button-bg-surface-disabled | rgba(0, 0, 0, 0.08) | — | |
--p-color-radio-button-icon-disabled | rgba(255, 255, 255, 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-scrollbar-thumb-bg-hover | rgba(138, 138, 138, 1) | — | |
--p-color-scrollbar-thumb-bg | rgba(181, 181, 181, 1) | — |