|
--p-background |
rgba(246, 246, 247, 1) |
For use as a background color, in components such as Page and Frame backgrounds. |
|
--p-background-hovered |
rgba(241, 242, 243, 1) |
For use when an action or navigation is used on a background. |
|
--p-background-pressed |
rgba(237, 238, 239, 1) |
For use when an action or navigation is used on a background. |
|
--p-background-selected |
rgba(237, 238, 239, 1) |
For use in the selected item in navigation |
|
--p-surface |
rgba(255, 255, 255, 1) |
For use as a background color, in components such as Card, Modal, and Popover. |
|
--p-surface-neutral |
rgba(228, 229, 231, 1) |
For use as a background color in neutral badges. |
|
--p-surface-neutral-hovered |
rgba(219, 221, 223, 1) |
For use as a hovered background color in neutral badges. |
|
--p-surface-neutral-pressed |
rgba(201, 204, 208, 1) |
For use as a pressed background color in neutral badges. |
|
--p-surface-neutral-disabled |
rgba(241, 242, 243, 1) |
For use as a disabled background color in neutral badges. |
|
--p-surface-neutral-subdued |
rgba(246, 246, 247, 1) |
For use as a background color in neutral banners. |
|
--p-surface-subdued |
rgba(250, 251, 251, 1) |
For use as a subdued background color, in components such as Card, Modal, and Popover. |
|
--p-surface-disabled |
rgba(250, 251, 251, 1) |
For use as a surface color on disabled interactive elements such as option list items and action list items when in a disabled state. |
|
--p-surface-hovered |
rgba(246, 246, 247, 1) |
For use as a surface color on interactive elements such as resource list items and action list items when in a hovered state. |
|
--p-surface-pressed |
rgba(241, 242, 243, 1) |
For use as a surface color on interactive elements such as resource list items and action list items when in a pressed state. |
|
--p-surface-depressed |
rgba(237, 238, 239, 1) |
For use as a surface color on interactive elements such as resource list items and action list items when in a depressed state. |
|
--p-surface-search-field |
rgba(241, 242, 243, 1) |
For use as a background color, in components on surface elements such as SearchField |
|
--p-backdrop |
rgba(0, 0, 0, 0.5) |
For use as the background color of the backdrop component for navigation and modal. This color has an alpha of 0.5 . |
|
--p-overlay |
rgba(255, 255, 255, 0.5) |
For use as the background color of elements which lay on top of surfaces to obscure their contents. This color has an alpha of 0.5 . |
|
--p-shadow-color-picker |
rgba(0, 0, 0, 0.5) |
|
|
--p-shadow-color-picker-dragger |
rgba(33, 43, 54, 0.32) |
|
|
--p-hint-from-direct-light |
rgba(0, 0, 0, 0.15) |
For use in building shadows scrollables. |
|
--p-border |
rgba(140, 145, 150, 1) |
For use as the default border on elements. |
|
--p-border-neutral-subdued |
rgba(186, 191, 195, 1) |
For use as the border on banners. |
|
--p-border-hovered |
rgba(153, 158, 164, 1) |
Used for borders on hovered interactive elements |
|
--p-border-disabled |
rgba(210, 213, 216, 1) |
Used for disabled borders on interactive elements |
|
--p-border-subdued |
rgba(201, 204, 207, 1) |
For use as a subdued border on elements. |
|
--p-border-depressed |
rgba(87, 89, 89, 1) |
For use as a border on depressed elements. |
|
--p-border-shadow |
rgba(174, 180, 185, 1) |
For use as an additional bottom border on elements. |
|
--p-border-shadow-subdued |
rgba(186, 191, 196, 1) |
For use as an additional, subdued bottom border on elements. |
|
--p-divider |
rgba(225, 227, 229, 1) |
For use as a divider between elements. |
|
--p-icon |
rgba(92, 95, 98, 1) |
For use as the fill color of icons. |
|
--p-icon-hovered |
rgba(26, 28, 29, 1) |
For use as the fill color of hovered icons. |
|
--p-icon-pressed |
rgba(68, 71, 74, 1) |
For use as the fill color of pressed icons. |
|
--p-icon-disabled |
rgba(186, 190, 195, 1) |
For use as the fill color of disabled icons. |
|
--p-icon-subdued |
rgba(140, 145, 150, 1) |
For use as the fill color of subdued icons. |
|
--p-text |
rgba(32, 34, 35, 1) |
For use as a text color. |
|
--p-text-disabled |
rgba(140, 145, 150, 1) |
For use as a disabled text color and as a placeholder text color. |
|
--p-text-subdued |
rgba(109, 113, 117, 1) |
For use as a subdued text color. |
|
--p-interactive |
rgba(44, 110, 203, 1) |
Used for links, plain buttons, and as the fill color for selected checkboxes and radio buttons. |
|
--p-interactive-disabled |
rgba(189, 193, 204, 1) |
Used for disabled links and plain buttons. |
|
--p-interactive-hovered |
rgba(31, 81, 153, 1) |
Used for hovered links and plain buttons. |
|
--p-interactive-pressed |
rgba(16, 50, 98, 1) |
Used for pressed links and plain buttons. |
|
--p-focused |
rgba(69, 143, 255, 1) |
For use in the focus ring on interactive elements. |
|
--p-surface-selected |
rgba(242, 247, 254, 1) |
For use as a surface color in selected interactive elements, in components such as action list and resource list. |
|
--p-surface-selected-hovered |
rgba(237, 244, 254, 1) |
For use as a surface color in selected interactive elements that are hovered, in components such as action list and resource list. |
|
--p-surface-selected-pressed |
rgba(229, 239, 253, 1) |
For use as a surface color in selected interactive elements that are pressed, in components such as action list and resource list. |
|
--p-icon-on-interactive |
rgba(255, 255, 255, 1) |
For use as a fill color for icons on interactive elements. |
|
--p-text-on-interactive |
rgba(255, 255, 255, 1) |
For use as a text color on interactive elements. |
|
--p-action-secondary |
rgba(255, 255, 255, 1) |
Used for secondary buttons and tertiary buttons, as well as in form elements as a background color and pontentially other secondary surfaces. |
|
--p-action-secondary-disabled |
rgba(255, 255, 255, 1) |
Used as a disabled state for secondary buttons |
|
--p-action-secondary-hovered |
rgba(246, 246, 247, 1) |
Used as a hovered state for secondary buttons |
|
--p-action-secondary-pressed |
rgba(241, 242, 243, 1) |
Used as a pressed state for secondary buttons |
|
--p-action-secondary-depressed |
rgba(109, 113, 117, 1) |
Used as a depressed state for secondary buttons |
|
--p-action-primary |
rgba(0, 128, 96, 1) |
Used as the background color for primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states. |
|
--p-action-primary-disabled |
rgba(241, 241, 241, 1) |
Used as the background color for disabled primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states. |
|
--p-action-primary-hovered |
rgba(0, 110, 82, 1) |
Used as the background color for hovered primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states. |
|
--p-action-primary-pressed |
rgba(0, 94, 70, 1) |
Used as the background color for pressed primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states. |
|
--p-action-primary-depressed |
rgba(0, 61, 44, 1) |
Used as the background color for pressed primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states. |
|
--p-icon-on-primary |
rgba(255, 255, 255, 1) |
For use as a fill color for icons on primary actions. Not for use in icons on navigation and tabs. |
|
--p-text-on-primary |
rgba(255, 255, 255, 1) |
For use as a text color on primary actions. Not for use in text on navigation and tabs. |
|
--p-text-primary |
rgba(0, 123, 92, 1) |
For use as primary text color on background. For use in text in components such as Navigation. |
|
--p-text-primary-hovered |
rgba(0, 108, 80, 1) |
For use as primary hovered text color on background. For use in text in components such as Navigation. |
|
--p-text-primary-pressed |
rgba(0, 92, 68, 1) |
For use as primary pressed text color on background. For use in text in components such as Navigation. |
|
--p-surface-primary-selected |
rgba(241, 248, 245, 1) |
Used as a surface color to indicate selected interactive states in navigation and tabs. |
|
--p-surface-primary-selected-hovered |
rgba(179, 208, 195, 1) |
Used as a surface color to indicate selected interactive states that are hovered in navigation and tabs. |
|
--p-surface-primary-selected-pressed |
rgba(162, 188, 176, 1) |
Used as a surface color to indicate selected interactive states that are pressed in navigation and tabs. |
|
--p-border-critical |
rgba(253, 87, 73, 1) |
For use as a border on critical components such as an outline on interactive elements in an error state. |
|
--p-border-critical-subdued |
rgba(224, 179, 178, 1) |
For use as a border on critical components such as banners. |
|
--p-border-critical-disabled |
rgba(255, 167, 163, 1) |
For use as a disabled border on critical components such as banners, and as an outline on interactive elements in an error state. |
|
--p-icon-critical |
rgba(215, 44, 13, 1) |
For use as an icon fill color on top of critical elements. |
|
--p-surface-critical |
rgba(254, 211, 209, 1) |
For use as a surface color on critical elements including badges. |
|
--p-surface-critical-subdued |
rgba(255, 244, 244, 1) |
For use as a subdued surface color on critical elements including banners. |
|
--p-surface-critical-subdued-hovered |
rgba(255, 240, 240, 1) |
For use as a surface color on critical interactive elements including action list items in a hovered state. |
|
--p-surface-critical-subdued-pressed |
rgba(255, 233, 232, 1) |
For use as a surface color on critical interactive elements including action list items in a pressed state. |
|
--p-surface-critical-subdued-depressed |
rgba(254, 188, 185, 1) |
For use as a surface color on critical interactive elements including action list items in a depressed state. |
|
--p-text-critical |
rgba(215, 44, 13, 1) |
For use as a text color in inert critical elements such as exception list. Not for use as a text color on banners and badges. |
|
--p-action-critical |
rgba(216, 44, 13, 1) |
For use as the background color for destructive buttons, and as the background color for error toast messages. |
|
--p-action-critical-disabled |
rgba(241, 241, 241, 1) |
For use as the background color for disabled destructive buttons, and as the background color for error toast messages. |
|
--p-action-critical-hovered |
rgba(188, 34, 0, 1) |
For use as the background color for hovered destructive buttons, and as the background color for error toast messages. |
|
--p-action-critical-pressed |
rgba(162, 27, 0, 1) |
For use as the background color for pressed destructive buttons, and as the background color for error toast messages. |
|
--p-action-critical-depressed |
rgba(108, 15, 0, 1) |
For use as the background color for depressed destructive buttons, and as the background color for error toast messages. |
|
--p-icon-on-critical |
rgba(255, 255, 255, 1) |
For use as a fill color for icons on critical actions. |
|
--p-text-on-critical |
rgba(255, 255, 255, 1) |
For use as a text color on critical actions. |
|
--p-interactive-critical |
rgba(216, 44, 13, 1) |
For use as the text color for destructive interactive elements: links, plain buttons, error state of selected checkboxes and radio buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges. |
|
--p-interactive-critical-disabled |
rgba(253, 147, 141, 1) |
For use as a text color in disabled destructive plain buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges. |
|
--p-interactive-critical-hovered |
rgba(205, 41, 12, 1) |
For use as a text color in hovered destructive plain buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges. |
|
--p-interactive-critical-pressed |
rgba(103, 15, 3, 1) |
For use as a text color in pressed destructive plain buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges. |
|
--p-border-warning |
rgba(185, 137, 0, 1) |
For use as a border on warning components such as... |
|
--p-border-warning-subdued |
rgba(225, 184, 120, 1) |
For use as a border on warning components such as banners. |
|
--p-icon-warning |
rgba(185, 137, 0, 1) |
For use as an icon fill color on top of warning elements. |
|
--p-surface-warning |
rgba(255, 215, 157, 1) |
For use as a surface color on warning elements including badges. |
|
--p-surface-warning-subdued |
rgba(255, 245, 234, 1) |
For use as a subdued surface color on warning elements including banners. |
|
--p-surface-warning-subdued-hovered |
rgba(255, 242, 226, 1) |
For use as a subdued surface color on warning elements including banners. |
|
--p-surface-warning-subdued-pressed |
rgba(255, 235, 211, 1) |
For use as a subdued surface color on warning elements including banners. |
|
--p-text-warning |
rgba(145, 106, 0, 1) |
For use as a text color in inert critical elements such as exception list. Not for use as a text color on banners and badges. |
|
--p-border-highlight |
rgba(68, 157, 167, 1) |
For use as a border on informational components such as... |
|
--p-border-highlight-subdued |
rgba(152, 198, 205, 1) |
For use as a border on informational components such as banners. |
|
--p-icon-highlight |
rgba(0, 160, 172, 1) |
For use as an icon fill color on top of informational elements. |
|
--p-surface-highlight |
rgba(164, 232, 242, 1) |
For use as a surface color on information elements including badges. |
|
--p-surface-highlight-subdued |
rgba(235, 249, 252, 1) |
For use as a surface color on information elements including banners. |
|
--p-surface-highlight-subdued-hovered |
rgba(228, 247, 250, 1) |
For use as a surface color on information elements including banners. |
|
--p-surface-highlight-subdued-pressed |
rgba(213, 243, 248, 1) |
For use as a surface color on information elements including banners. |
|
--p-text-highlight |
rgba(52, 124, 132, 1) |
For use as a text color in inert informational elements. Not for use as a text color on banners and badges. |
|
--p-border-success |
rgba(0, 164, 124, 1) |
For use as a border on success components such as text inputs. |
|
--p-border-success-subdued |
rgba(149, 201, 180, 1) |
For use as a border on success components such as banners. |
|
--p-icon-success |
rgba(0, 127, 95, 1) |
For use as an icon fill color on top of success elements. |
|
--p-surface-success |
rgba(174, 233, 209, 1) |
For use as a surface color on success elements including badges. |
|
--p-surface-success-subdued |
rgba(241, 248, 245, 1) |
For use as a surface color on information elements including banners. |
|
--p-surface-success-subdued-hovered |
rgba(236, 246, 241, 1) |
For use as a surface color on information elements including banners. |
|
--p-surface-success-subdued-pressed |
rgba(226, 241, 234, 1) |
For use as a surface color on information elements including banners. |
|
--p-text-success |
rgba(0, 128, 96, 1) |
For use as a text color in inert success elements. Not for use as a text color on banners and badges. |
|
--p-icon-attention |
rgba(138, 97, 22) |
|
|
--p-surface-attention |
rgba(255, 234, 138) |
|
|
--p-decorative-one-icon |
rgba(126, 87, 0, 1) |
For use as a decorative icon color that is applied on a decorative surface. |
|
--p-decorative-one-surface |
rgba(255, 201, 107, 1) |
For use as a decorative surface color. |
|
--p-decorative-one-text |
rgba(61, 40, 0, 1) |
For use as a decorative text color that is applied on a decorative surface. |
|
--p-decorative-two-icon |
rgba(175, 41, 78, 1) |
For use as a decorative icon color that is applied on a decorative surface. |
|
--p-decorative-two-surface |
rgba(255, 196, 176, 1) |
For use as a decorative surface color. |
|
--p-decorative-two-text |
rgba(73, 11, 28, 1) |
For use as a decorative text color that is applied on a decorative surface. |
|
--p-decorative-three-icon |
rgba(0, 109, 65, 1) |
For use as a decorative icon color that is applied on a decorative surface. |
|
--p-decorative-three-surface |
rgba(146, 230, 181, 1) |
For use as a decorative surface color. |
|
--p-decorative-three-text |
rgba(0, 47, 25, 1) |
For use as a decorative text color that is applied on a decorative surface. |
|
--p-decorative-four-icon |
rgba(0, 106, 104, 1) |
For use as a decorative icon color that is applied on a decorative surface. |
|
--p-decorative-four-surface |
rgba(145, 224, 214, 1) |
For use as a decorative surface color. |
|
--p-decorative-four-text |
rgba(0, 45, 45, 1) |
For use as a decorative text color that is applied on a decorative surface. |
|
--p-decorative-five-icon |
rgba(174, 43, 76, 1) |
For use as a decorative icon color that is applied on a decorative surface. |
|
--p-decorative-five-surface |
rgba(253, 201, 208, 1) |
For use as a decorative surface color. |
|
--p-decorative-five-text |
rgba(79, 14, 31, 1) |
For use as a decorative text color that is applied on a decorative surface. |