All PatternFly tokens

Semantic tokens

Name	Value	Description
`pf-t--global--icon--color--brand--default`	Dark: Default:	Use as the color for icons that convey your brand and/or are paired with branded text color.
`pf-t--global--icon--color--brand--hover`	Dark: Default:	Use as the hover state color for icons that convey your brand and/or are paired with branded text color.
`pf-t--global--icon--color--brand--clicked`	Dark: Default:	Use as the clicked state for icons that convey your brand and/or are paired with branded text color.
`pf-t--global--icon--color--on-brand--default`	Dark: Default:	Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.
`pf-t--global--icon--color--on-brand--hover`	Dark: Default:	Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.
`pf-t--global--icon--color--on-brand--clicked`	Dark: Default:	Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.
`pf-t--global--icon--color--favorite--default`	Dark: Default:	Use as the icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)
`pf-t--global--icon--color--favorite--hover`	Dark: Default:	Use as the hover state icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)
`pf-t--global--icon--color--favorite--clicked`	Dark: Default:	Use as the clicked state icon color for icons that have been favorited (this color is typically applied to the star or favorite icon)
`pf-t--global--icon--color--status--success--default`	Dark: Default:	Use as the default color for text that communicates a success status.
`pf-t--global--icon--color--status--success--hover`	Dark: Default:	Use as the hover state color for text that communicates a success status.
`pf-t--global--icon--color--status--success--clicked`	Dark: Default:	Use as the clicked state color for text that communicates a success status.
`pf-t--global--icon--color--status--on-success--default`	Dark: Default:	Use as the default color for icons that are placed on a success background color and/or are paired with on-success colored text
`pf-t--global--icon--color--status--on-success--hover`	Dark: Default:	Use as the hover state color for icons that are placed on a success background color and/or are paired with on-success colored text
`pf-t--global--icon--color--status--on-success--clicked`	Dark: Default:	Use as the clicked state color for icons that are placed on a success background color and/or are paired with on-success colored text
`pf-t--global--icon--color--status--warning--default`	Dark: Default:	Use as the default color for text that communicates a warning status.
`pf-t--global--icon--color--status--warning--hover`	Dark: Default:	Use as the hover state color for text that communicates a warning status.
`pf-t--global--icon--color--status--warning--clicked`	Dark: Default:	Use as the clicked state color for text that communicates a warning status.
`pf-t--global--icon--color--status--on-warning--default`	Dark: Default:	Use as the default color for icons that are placed on a warning background color and/or are paired with on-warning colored text
`pf-t--global--icon--color--status--on-warning--hover`	Dark: Default:	Use as the hover state color for icons that are placed on a warning background color and/or are paired with on-warning colored text
`pf-t--global--icon--color--status--on-warning--clicked`	Dark: Default:	Use as the hover state color for icons that are placed on a warning background color and/or are paired with on-warning colored text
`pf-t--global--icon--color--status--danger--default`	Dark: Default:	Use as the default color for icons that convey danger, like in alerts or banners.
`pf-t--global--icon--color--status--danger--hover`	Dark: Default:	Use as the hover state for icons that indicate danger.
`pf-t--global--icon--color--status--danger--clicked`	Dark: Default:	Use as the clicked state for icons that indicate danger.
`pf-t--global--icon--color--status--on-danger--default`	Dark: Default:	Use as the default color for icons that are placed on a danger background color and/or are paired with on-danger colored text
`pf-t--global--icon--color--status--on-danger--hover`	Dark: Default:	Use as the hover state color for icons that are placed on a danger background color and/or are paired with on-danger colored text
`pf-t--global--icon--color--status--on-danger--clicked`	Dark: Default:	Use as the clicked state color for icons that are placed on a danger background color and/or are paired with on-danger colored text
`pf-t--global--icon--color--status--info--default`	Dark: Default:	Use as the default color for icons that identify informational messages, like in alerts or banners.
`pf-t--global--icon--color--status--info--hover`	Dark: Default:	Use as the hover state for icons that identify informational messages.
`pf-t--global--icon--color--status--info--clicked`	Dark: Default:	Use as the clicked state for icons that identify informational messages.
`pf-t--global--icon--color--status--on-info--default`	Dark: Default:	Use as the default color for icons that are placed on an info background color and/or are paired with on-info colored text
`pf-t--global--icon--color--status--on-info--hover`	Dark: Default:	Use as the hover state color for icons that are placed on an info background color and/or are paired with on-info colored text
`pf-t--global--icon--color--status--on-info--clicked`	Dark: Default:	Use as the clicked state color for icons that are placed on an info background color and/or are paired with on-info colored text
`pf-t--global--icon--color--status--custom--default`	Dark: Default:	Use as the default color for icons that convey generic status with no associated severity. This color can be customized.
`pf-t--global--icon--color--status--custom--hover`	Dark: Default:	Use as the hover state for icons that convey generic status with no associated severity.
`pf-t--global--icon--color--status--custom--clicked`	Dark: Default:	Use as the clicked state for icons that convey generic status with no associated severity.
`pf-t--global--icon--color--status--on-custom--default`	Dark: Default:	Use as the default color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status color, make sure that this token meets contrast requirements with your new custom status color.
`pf-t--global--icon--color--status--on-custom--hover`	Dark: Default:	Use as the hover state color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status hover color, make sure that this token meets contrast requirements with your new custom status hover color.
`pf-t--global--icon--color--status--on-custom--clicked`	Dark: Default:	Use as the clicked state color for icons that are placed on a custom background color and/or are paired with on-custom colored text. If you change the custom status clicked color, make sure that this token meets contrast requirements with your new custom status clicked color.
`pf-t--global--icon--color--status--unread--on-default--default`	Dark: Default:	Use as the default color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.
`pf-t--global--icon--color--status--unread--on-default--hover`	Dark: Default:	Use as the hover state color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.
`pf-t--global--icon--color--status--unread--on-default--clicked`	Dark: Default:	Use as the clicked state color for icons that are placed in and/or are paired with elements that convey an unread status, like badges and stateful buttons.
`pf-t--global--icon--color--status--unread--on-attention--default`	Dark: Default:	Use as the default color for icons that are placed in and/or are paired with elements that convey an unread status and require greater attention like badges and stateful buttons.
`pf-t--global--icon--color--status--unread--on-attention--hover`	Dark: Default:	Use as the hover state color for icons that are placed in and/or are paired with elements that convey an unread status and require greater attention like badges and stateful buttons.
`pf-t--global--icon--color--status--unread--on-attention--clicked`	Dark: Default:	Use as the clicked state color for icons that are placed in and/or are paired with elements that convey an unread status and require greater attention like badges and stateful buttons.
`pf-t--global--icon--color--regular`	Dark: Default:	Use as the default color for icons in icon buttons and/or when paired with regular-colored text
`pf-t--global--icon--color--subtle`	Dark: Default:	Use as the color for icons when you want the icon to have less emphasis and/or when paired with subtle-colored text
`pf-t--global--icon--color--inverse`	Dark: Default:	Use as the color for icons that are placed on an inverse background color
`pf-t--global--icon--color--disabled`	Dark: Default:	Use as the color for icons that show in disabled icon buttons and/or when paired with disabled-color text
`pf-t--global--icon--color--on-disabled`	Dark: Default:	Use as the color for icons that are placed on a disabled background color and/or are paired with on-disabled colored text.
`pf-t--global--icon--color--severity--undefined--default`	Dark: Default:	Use as the default color for severity icons that don’t communicate a specific severity level for issues.
`pf-t--global--icon--color--severity--none--default`	Dark: Default:	Use as the default color for severity icons that identify no issues.
`pf-t--global--icon--color--severity--minor--default`	Dark: Default:	Use as the default color for severity icons that identify issues of minor severity.
`pf-t--global--icon--color--severity--moderate--default`	Dark: Default:	Use as the default color for severity icons that identify issues of moderate severity.
`pf-t--global--icon--color--severity--important--default`	Dark: Default:	Use as the default color for severity icons that identify issues of important severity.
`pf-t--global--icon--color--severity--critical--default`	Dark: Default:	Use as the default color for severity icons that identify issues of critical severity.
`pf-t--global--icon--color--nonstatus--on-red--default`	Dark: Default:	Use as the default color for icons that are placed on a non status red background color and/or are paired with on-red colored text.
`pf-t--global--icon--color--nonstatus--on-red--hover`	Dark: Default:	Use as the hover state color for icons that are placed on a non status red background color and/or are paired with on-red colored text.
`pf-t--global--icon--color--nonstatus--on-red--clicked`	Dark: Default:	Use as the clicked state color for icons that are placed on a nonstatus red background color and/or are paired with on-red colored text.
`pf-t--global--icon--color--nonstatus--on-orangered--default`	Dark: Default:	Use as the default color for icons that are placed on a nonstatus orangered background color and/or are paired with on-orangered colored text.
`pf-t--global--icon--color--nonstatus--on-orangered--hover`	Dark: Default:	Use as the hover state color for icons that are placed on a nonstatus orangered background color and/or are paired with on-orangered colored text.
`pf-t--global--icon--color--nonstatus--on-orangered--clicked`	Dark: Default:	Use as the clicked state color for icons that are placed on a nonstatus orangered background color and/or are paired with on-orangered colored text.
`pf-t--global--icon--color--nonstatus--on-orange--default`	Dark: Default:	Use as the default color for icons that are placed on a nonstatus orange background color and/or are paired with on-orange colored text.
`pf-t--global--icon--color--nonstatus--on-orange--hover`	Dark: Default:	Use as the hover state color for icons that are placed on a nonstatus orange background color and/or are paired with on-orange colored text.
`pf-t--global--icon--color--nonstatus--on-orange--clicked`	Dark: Default:	Use as the clicked state color for icons that are placed on a nonstatus orange background color and/or are paired with on-orange colored text.
`pf-t--global--icon--color--nonstatus--on-yellow--default`	Dark: Default:	Use as the default color for icons that are placed on a nonstatus yellow background color and/or are paired with on-yellow colored text.
`pf-t--global--icon--color--nonstatus--on-yellow--hover`	Dark: Default:	Use as the hover state color for icons that are placed on a nonstatus yellow background color and/or are paired with on-yellow colored text.
`pf-t--global--icon--color--nonstatus--on-yellow--clicked`	Dark: Default:	Use as the clicked state color for icons that are placed on a nonstatus yellow background color and/or are paired with on-yellow colored text.
`pf-t--global--icon--color--nonstatus--on-green--default`	Dark: Default:	Use as the default color for icons that are placed on a nonstatus green background color and/or are paired with on-green colored text.
`pf-t--global--icon--color--nonstatus--on-green--hover`	Dark: Default:	Use as the hover state color for icons that are placed on a nonstatus green background color and/or are paired with on-green colored text.
`pf-t--global--icon--color--nonstatus--on-green--clicked`	Dark: Default:	Use as the clicked state color for icons that are placed on a nonstatus green background color and/or are paired with on-green colored text.
`pf-t--global--icon--color--nonstatus--on-teal--default`	Dark: Default:	Use as the default color for icons that are placed on a nonstatus teal background color and/or are paired with on-teal colored text.
`pf-t--global--icon--color--nonstatus--on-teal--hover`	Dark: Default:	Use as the hover state color for icons that are placed on a nonstatus teal background color and/or are paired with on-teal colored text.
`pf-t--global--icon--color--nonstatus--on-teal--clicked`	Dark: Default:	Use as the clicked state color for icons that are placed on a nonstatus teal background color and/or are paired with on-teal colored text.
`pf-t--global--icon--color--nonstatus--on-blue--default`	Dark: Default:	Use as the default color for icons that are placed on a nonstatus blue background color and/or are paired with on-blue colored text.
`pf-t--global--icon--color--nonstatus--on-blue--hover`	Dark: Default:	Use as the hover state color for icons that are placed on a nonstatus blue background color and/or are paired with on-blue colored text.
`pf-t--global--icon--color--nonstatus--on-blue--clicked`	Dark: Default:	Use as the clicked state color for icons that are placed on a nonstatus blue background color and/or are paired with on-blue colored text.
`pf-t--global--icon--color--nonstatus--on-purple--default`	Dark: Default:	Use as the default color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple colored text.
`pf-t--global--icon--color--nonstatus--on-purple--hover`	Dark: Default:	Use as the hover state color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple colored text.
`pf-t--global--icon--color--nonstatus--on-purple--clicked`	Dark: Default:	Use as the clicked state color for icons that are placed on a nonstatus purple background color and/or are paired with on-purple colored text.
`pf-t--global--icon--color--nonstatus--on-gray--default`	Dark: Default:	Use as the default color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.
`pf-t--global--icon--color--nonstatus--on-gray--hover`	Dark: Default:	Use as the hover state color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.
`pf-t--global--icon--color--nonstatus--on-gray--clicked`	Dark: Default:	Use as the clicked state color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.
`pf-t--global--border--color--brand--default`	Dark: Default:	Use as the default border color for any branded element, like color-coded labels, banners, etc.
`pf-t--global--border--color--brand--hover`	Dark: Default:	Use as the hover state border color for any branded element, like color-coded labels, banners, etc.
`pf-t--global--border--color--brand--clicked`	Dark: Default:	Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.
`pf-t--global--border--color--status--success--default`	Dark: Default:	Use as the default color for borders that convey a success status, like in alerts, notifications or status labels.
`pf-t--global--border--color--status--success--hover`	Dark: Default:	Use as the hover state color for borders that convey a success status, like in alerts, notifications, or status labels.
`pf-t--global--border--color--status--success--clicked`	Dark: Default:	Use as the clicked state color for borders that convey a success status, like in alerts, notifications, or status labels.
`pf-t--global--border--color--status--warning--default`	Dark: Default:	Use as the default color for borders that convey a warning status, like in alerts, notifications or status labels.
`pf-t--global--border--color--status--warning--hover`	Dark: Default:	Use as the hover state color for borders that convey a warning status, like in alerts, notifications or status labels.
`pf-t--global--border--color--status--warning--clicked`	Dark: Default:	Use as the clicked state color for borders that convey a warning status, like in alerts, notifications or status labels.
`pf-t--global--border--color--status--danger--default`	Dark: Default:	Use as the default color for borders that convey a danger status, like in alerts, notifications or status labels.
`pf-t--global--border--color--status--danger--hover`	Dark: Default:	Use as the hover state color for borders that convey a danger status, like in alerts, notifications or status labels.
`pf-t--global--border--color--status--danger--clicked`	Dark: Default:	Use as the clicked state color for borders that convey a danger status, like in alerts, notifications or status labels.
`pf-t--global--border--color--status--info--default`	Dark: Default:	Use as the default color for borders that convey an info status, like in alerts, notifications or status labels.
`pf-t--global--border--color--status--info--hover`	Dark: Default:	Use as the hover state color for borders that convey an info status, like in alerts, notifications or status labels.
`pf-t--global--border--color--status--info--clicked`	Dark: Default:	Use as the clicked state color for borders that convey an info status, like in alerts, notifications or status labels.
`pf-t--global--border--color--status--custom--default`	Dark: Default:	Use as the default color for borders that convey a custom status, like in alerts, notifications or status labels.
`pf-t--global--border--color--status--custom--hover`	Dark: Default:	Use as the hover state color for borders that convey a custom status, like in alerts, notifications or status labels.
`pf-t--global--border--color--status--custom--clicked`	Dark: Default:	Use as the clicked state color for borders that convey a custom status, like in alerts, notifications or status labels.
`pf-t--global--border--color--default`	Dark: Default:	Use as the default border color for elements like form inputs, menu toggles, cards, etc.
`pf-t--global--border--color--hover`	Dark: Default:	Use as the hover state border color for elements like form inputs, menu toggles, cards, etc.
`pf-t--global--border--color--clicked`	Dark: Default:	Use as the clicked state border color for elements like form inputs, menu toggles, cards, etc.
`pf-t--global--border--color--disabled`	Dark: Default:	Use as the disabled border color for elements like form inputs, menu toggles, cards, etc.
`pf-t--global--border--color--alt`	Dark: Default:	Use when border color needs to match the primary bkg color – helpful when you want a divider to look like negative space when shown on a colored bkg
`pf-t--global--border--color--on-secondary`	Dark: Default:	Use on borders/dividers that are placed on a secondary bkg color.
`pf-t--global--border--color--nonstatus--red--default`	Dark: Default:	Use as the default border color for any element that does not convey status and that you always will want to be red (i.e. color-coded labels, banners, etc.)
`pf-t--global--border--color--nonstatus--red--hover`	Dark: Default:	Use as the hover state border color for any element that does not convey status and that you always will want to be red (i.e. color-coded labels)
`pf-t--global--border--color--nonstatus--red--clicked`	Dark: Default:	Use as the clicked state border color for any element that does not convey status and that you always will want to be red (i.e. color-coded labels)
`pf-t--global--border--color--nonstatus--orangered--default`	Dark: Default:	Use as the default border color for any element that does not convey status and that you always will want to be orangered (i.e. color-coded labels)
`pf-t--global--border--color--nonstatus--orangered--hover`	Dark: Default:	Use as the hover state border color for any element that does not convey status and that you always will want to be orangered (i.e. color-coded labels)
`pf-t--global--border--color--nonstatus--orangered--clicked`	Dark: Default:	Use as the clicked state border color for any element that does not convey status and that you always will want to be orangered (i.e. color-coded labels)
`pf-t--global--border--color--nonstatus--orange--default`	Dark: Default:	Use as the default border color for any element that does not convey status and that you always will want to be orange (i.e. color-coded labels)
`pf-t--global--border--color--nonstatus--orange--hover`	Dark: Default:	Use as the hover state border color for any element that does not convey status and that you always will want to be orange (i.e. color-coded labels)
`pf-t--global--border--color--nonstatus--orange--clicked`	Dark: Default:	Use as the clicked state border color for any element that does not convey status and that you always will want to be orange (i.e. color-coded labels)
`pf-t--global--border--color--nonstatus--yellow--default`	Dark: Default:	Use as the default border color for any element that does not convey status and that you always will want to be yellow (i.e. color-coded labels)
`pf-t--global--border--color--nonstatus--yellow--hover`	Dark: Default:	Use as the hover state border color for any element that does not convey status and that you always will want to be yellow (i.e. color-coded labels)
`pf-t--global--border--color--nonstatus--yellow--clicked`	Dark: Default:	Use as the clicked state border color for any element that does not convey status and that you always will want to be yellow (i.e. color-coded labels)
`pf-t--global--border--color--nonstatus--green--default`	Dark: Default:	Use as the default border color for any element that does not convey status and that you always will want to be green (i.e. color-coded labels)
`pf-t--global--border--color--nonstatus--green--hover`	Dark: Default:	Use as the hover state border color for any element that does not convey status and that you always will want to be green (i.e. color-coded labels)
`pf-t--global--border--color--nonstatus--green--clicked`	Dark: Default:	Use as the clicked state border color for any element that does not convey status and that you always will want to be green (i.e. color-coded labels)
`pf-t--global--border--color--nonstatus--teal--default`	Dark: Default:	Use as the default border color for any element that does not convey status and that you always will want to be teal (i.e. color-coded labels)
`pf-t--global--border--color--nonstatus--teal--hover`	Dark: Default:	Use as the hover state border color for any element that does not convey status and that you always will want to be teal (i.e. color-coded labels)
`pf-t--global--border--color--nonstatus--teal--clicked`	Dark: Default:	Use as the clicked state border color for any element that does not convey status and that you always will want to be teal (i.e. color-coded labels)
`pf-t--global--border--color--nonstatus--blue--default`	Dark: Default:	Use as the default border color for any element that does not convey status and that you always will want to be blue (i.e. color-coded labels)
`pf-t--global--border--color--nonstatus--blue--hover`	Dark: Default:	Use as the hover state border color for any element that does not convey status and that you always will want to be blue (i.e. color-coded labels)
`pf-t--global--border--color--nonstatus--blue--clicked`	Dark: Default:	Use as the clicked state border color for any element that does not convey status and that you always will want to be blue (i.e. color-coded labels)
`pf-t--global--border--color--nonstatus--purple--default`	Dark: Default:	Use as the default border color for any element that does not convey status and that you always will want to be purple (i.e. color-coded labels)
`pf-t--global--border--color--nonstatus--purple--hover`	Dark: Default:	Use as the hover state border color for any element that does not convey status and that you always will want to be purple (i.e. color-coded labels)
`pf-t--global--border--color--nonstatus--purple--clicked`	Dark: Default:	Use as the clicked state border color for any element that does not convey status and that you always will want to be purple (i.e. color-coded labels)
`pf-t--global--border--color--nonstatus--gray--default`	Dark: Default:	Use as the default border color for any element that does not convey status and that you always will want to be gray (i.e. color-coded labels)
`pf-t--global--border--color--nonstatus--gray--hover`	Dark: Default:	Use as the hover state border color for any element that does not convey status and that you always will want to be gray (i.e. color-coded labels)
`pf-t--global--border--color--nonstatus--gray--clicked`	Dark: Default:	Use as the clicked state border color for any element that does not convey status and that you always will want to be gray (i.e. color-coded labels)
`pf-t--global--box-shadow--color--sm`	Dark: Default:	Use as the color of small box-shadows.
`pf-t--global--box-shadow--color--md`	Dark: Default:	Use as the color of medium box-shadows.
`pf-t--global--box-shadow--color--lg`	Dark: Default:	Use as the color of large box-shadows.
`pf-t--global--background--color--highlight--default`	Dark: Default:	Use as the background color for highlighted elements
`pf-t--global--background--color--highlight--clicked`	Dark: Default:	Use as the active state for for highlighted elements
`pf-t--global--background--color--primary--default`	Dark: Default:	Use as the primary background color for UI content such as cards, page sections, and other content areas.
`pf-t--global--background--color--primary--hover`	Dark: Default:	Use as the hover state for primary backgrounds
`pf-t--global--background--color--primary--clicked`	Dark: Default:	Use as the clicked state for primary backgrounds
`pf-t--global--background--color--secondary--default`	Dark: Default:	Use as the secondary background color for UI content Use as the primary background color for UI content such as cards, page sections, and other content areas. Secondary background color is also used for our UI shell backgrounds (nav, masthead, etc).
`pf-t--global--background--color--secondary--hover`	Dark: Default:	Use as the hover state for secondary backgrounds
`pf-t--global--background--color--secondary--clicked`	Dark: Default:	Use as the clicked state for secondary backgrounds
`pf-t--global--background--color--floating--default`	Dark: Default:	Use as the background color for components that appear over other content, such as toast alerts, menus, modals, overlay drawers, etc.
`pf-t--global--background--color--floating--hover`	Dark: Default:	Use as the hover state for floating backgrounds
`pf-t--global--background--color--floating--clicked`	Dark: Default:	Use as the clicked state for floating backgrounds
`pf-t--global--background--color--action--plain--default`	Dark: Default:	Use as the default background for actions with transparent backgrounds such as menu items, accordion toggles, buttons, etc.
`pf-t--global--background--color--action--plain--hover`	Dark: Default:	Use as the hover state for components that use the plain action default background.
`pf-t--global--background--color--action--plain--clicked`	Dark: Default:	Use as the active/pressed state for components that use the plain action default background.
`pf-t--global--background--color--action--plain--alt--hover`	Dark: Default:	Use as the hover state for components that use the plain action default background but are placed on a secondary background color (like left nav, horizontal nav, etc.)
`pf-t--global--background--color--action--plain--alt--clicked`	Dark: Default:	Use as the active/pressed state for components that use the plain action default background but are placed on a secondary background color (like left nav, horizontal nav, etc.)
`pf-t--global--background--color--control--default`	Dark: Default:	Use as the default background for control elements like form inputs and menu toggles.
`pf-t--global--background--color--inverse--default`	Dark: Default:	Use as the background color components with inversed backgrounds like tooltips.
`pf-t--global--background--color--disabled--default`	Dark: Default:	Use as the background color for disabled components.
`pf-t--global--background--color--backdrop--default`	Dark: Default:	Use as the background color for the backdrop component that shows beneath a modal/about modal/floating wizard etc.
`pf-t--global--color--brand--default`	Dark: Default:	Use this color for elements that you want to reinforce your brand
`pf-t--global--color--brand--hover`	Dark: Default:	Use as the hover state for elements that have a branded background color
`pf-t--global--color--brand--clicked`	Dark: Default:	Use as the clicked state for elements that have a brand background color
`pf-t--global--color--favorite--default`	Dark: Default:	Use as the default color for elements that have been favorited
`pf-t--global--color--favorite--hover`	Dark: Default:	Use as the hover state for elements that have been favorited
`pf-t--global--color--favorite--clicked`	Dark: Default:	Use as the clicked state for elements that have been favorited
`pf-t--global--color--status--success--default`	Dark: Default:	Use as the default color for any element communicating a favorable outcome, like a success status for alert, progress, select.
`pf-t--global--color--status--success--hover`	Dark: Default:	Use as the hover state for any element that conveys a success status.
`pf-t--global--color--status--success--clicked`	Dark: Default:	Use as the clicked state for any element that conveys a success status.
`pf-t--global--color--status--warning--default`	Dark: Default:	Use as the default color for any element communicating caution, like a warning status for alert, progress, select.
`pf-t--global--color--status--warning--hover`	Dark: Default:	Use as the hover state for any element that conveys a warning status.
`pf-t--global--color--status--warning--clicked`	Dark: Default:	Use as the clicked state for any element that conveys a warning status.
`pf-t--global--color--status--danger--default`	Dark: Default:	Use as the default color for any element communicating a critical warning or error, like a danger status for alert, progress, select.
`pf-t--global--color--status--danger--hover`	Dark: Default:	Use as the hover state for any element that conveys a danger status.
`pf-t--global--color--status--danger--clicked`	Dark: Default:	Use as the clicked state for any element that conveys a danger status.
`pf-t--global--color--status--info--default`	Dark: Default:	Use as the default color for any element communicating information, like an info status for alert, progress, select.
`pf-t--global--color--status--info--hover`	Dark: Default:	Use as the hover state for any element that conveys an info status.
`pf-t--global--color--status--info--clicked`	Dark: Default:	Use as the clicked state for any element that conveys an info status.
`pf-t--global--color--status--custom--default`	Dark: Default:	Use as the default color for any element that conveys a generic status with no associated severity. This color can be customized.
`pf-t--global--color--status--custom--hover`	Dark: Default:	Use this color as the hover state color for any element that conveys a generic status with no associated severity. This color can be customized.
`pf-t--global--color--status--custom--clicked`	Dark: Default:	Use as the clicked state color for any element that conveys a generic status with no associated severity. This color can be customized.
`pf-t--global--color--status--unread--default`	Dark: Default:	Use as the default color for elements that convey an unread status, like badges and stateful buttons.
`pf-t--global--color--status--unread--hover`	Dark: Default:	Use as the hover state color for elements that convey an unread status, like badges and stateful buttons.
`pf-t--global--color--status--unread--clicked`	Dark: Default:	Use as the clicked state color for elements that convey an unread status, like badges and stateful buttons.
`pf-t--global--color--status--unread--attention--default`	Dark: Default:	Use as the default color for elements that convey an unread status and require greater attention like badges and stateful buttons.
`pf-t--global--color--status--unread--attention--clicked`	Dark: Default:	Use as the hover state color for elements that convey an unread status and require greater attention like badges and stateful buttons.
`pf-t--global--color--status--unread--attention--hover`	Dark: Default:	Use as the clicked state color for elements that convey an unread status and require greater attention like badges and stateful buttons.
`pf-t--global--color--status--read--on-secondary`	Dark: Default:	Use as the default color for elements that convey a read status and are placed on a secondary background
`pf-t--global--color--status--read--on-primary`	Dark: Default:	Use as the default color for elements that convey a read status and are placed on a primary background
`pf-t--global--color--nonstatus--red--default`	Dark: Default:	Use as the default background color for any element that does not convey status and that you always will want to be red (i.e. color-coded labels, banners, etc.)
`pf-t--global--color--nonstatus--red--hover`	Dark: Default:	Use as the hover state color for any element that uses the non status red background color.
`pf-t--global--color--nonstatus--red--clicked`	Dark: Default:	Use as the clicked state color for any element that uses the non status red background color.
`pf-t--global--color--nonstatus--orangered--default`	Dark: Default:	Use as the default background color for any element that does not convey status and that you always will want to be orange-red (i.e. color-coded labels, banners, etc.)
`pf-t--global--color--nonstatus--orangered--hover`	Dark: Default:	Use as the hover state color for any element that uses the non status orange-red background color.
`pf-t--global--color--nonstatus--orangered--clicked`	Dark: Default:	Use as the clicked state color for any element that uses the non status orange-red background color.
`pf-t--global--color--nonstatus--orange--default`	Dark: Default:	Use as the default background color for any element that does not convey status and that you always will want to be orange (i.e. color-coded labels, banners, etc.)
`pf-t--global--color--nonstatus--orange--hover`	Dark: Default:	Use as the hover state color for any element that uses the non status orange background color.
`pf-t--global--color--nonstatus--orange--clicked`	Dark: Default:	Use as the clicked state color for any element that uses the non status orange background color.
`pf-t--global--color--nonstatus--yellow--default`	Dark: Default:	Use as the default background color for any element that does not convey status and that you always will want to be yellow (i.e. color-coded labels, banners, etc.)
`pf-t--global--color--nonstatus--yellow--hover`	Dark: Default:	Use as the hover state color for any element that uses the non status yellow background color.
`pf-t--global--color--nonstatus--yellow--clicked`	Dark: Default:	Use as the clicked state color for any element that uses the non status yellow background color.
`pf-t--global--color--nonstatus--green--default`	Dark: Default:	Use as the default background color for any element that does not convey status and that you always will want to be green (i.e. color-coded labels, banners, etc.)
`pf-t--global--color--nonstatus--green--hover`	Dark: Default:	Use as the hover state color for any element that uses the non status green background color.
`pf-t--global--color--nonstatus--green--clicked`	Dark: Default:	Use as the clicked state color for any element that uses the non status green background color.
`pf-t--global--color--nonstatus--teal--default`	Dark: Default:	Use as the default background color for any element that does not convey status and that you always will want to be teal (i.e. color-coded labels, banners, etc.)
`pf-t--global--color--nonstatus--teal--hover`	Dark: Default:	Use as the hover state color for any element that uses the non status teal background color.
`pf-t--global--color--nonstatus--teal--clicked`	Dark: Default:	Use as the clicked state color for any element that uses the non status teal background color.
`pf-t--global--color--nonstatus--blue--default`	Dark: Default:	Use as the default background color for any element that does not convey status and that you always will want to be blue (i.e. color-coded labels, banners, etc.)
`pf-t--global--color--nonstatus--blue--hover`	Dark: Default:	Use as the hover state color for any element that uses the non status blue background color.
`pf-t--global--color--nonstatus--blue--clicked`	Dark: Default:	Use as the clicked state color for any element that uses the non status blue background color.
`pf-t--global--color--nonstatus--purple--default`	Dark: Default:	Use as the default background color for any element that does not convey status and that you always will want to be purple (i.e. color-coded labels, banners, etc.)
`pf-t--global--color--nonstatus--purple--hover`	Dark: Default:	Use as the hover state color for any element that uses the non status purple background color.
`pf-t--global--color--nonstatus--purple--clicked`	Dark: Default:	Use as the clicked state color for any element that uses the non status purple background color.
`pf-t--global--color--nonstatus--gray--default`	Dark: Default:	Use as the default background color for any element that does not convey status and that you always will want to be gray (i.e. color-coded labels, banners, etc.)
`pf-t--global--color--nonstatus--gray--hover`	Dark: Default:	Use as the hover state color for any element that uses the non status gray background color.
`pf-t--global--color--nonstatus--gray--clicked`	Dark: Default:	Use as the clicked state color for any element that uses the non status gray background color.
`pf-t--global--text--color--link--default`	Dark: Default:	Use as the default text color for links.
`pf-t--global--text--color--link--hover`	Dark: Default:	Use as the hover state text color for links.
`pf-t--global--text--color--link--visited`	Dark: Default:	Use as the color to indicate that a link has been visited.
`pf-t--global--text--color--brand--default`	Dark: Default:	Use as the default color for branded text.
`pf-t--global--text--color--brand--hover`	Dark: Default:	Use as the hover state color for branded text.
`pf-t--global--text--color--brand--clicked`	Dark: Default:	Use as the clicked state color for branded text.
`pf-t--global--text--color--regular`	Dark: Default:	Use as the primary color for standard text, like heading/body copy. Icons paired with regular text should inherit this color or should use global/icon/color/regular.
`pf-t--global--text--color--subtle`	Dark: Default:	Use as a subtle text color for text in an element that is secondary or less important, like descriptions or inactive tab labels.
`pf-t--global--text--color--inverse`	Dark: Default:	Use as the color of text that is placed on an inverse background color, like tooltips.
`pf-t--global--text--color--on-brand--default`	Dark: Default:	Use as the default color for text placed on a brand-colored background.
`pf-t--global--text--color--on-brand--hover`	Dark: Default:	Use as the hover state color for text placed on a brand-colored background.
`pf-t--global--text--color--on-brand--clicked`	Dark: Default:	Use as the clicked state color for text placed on a brand-colored background.
`pf-t--global--text--color--placeholder`	Dark: Default:	Use as the color of text that serves as a placeholder, like within a search bar/input.
`pf-t--global--text--color--disabled`	Dark: Default:	Use as the color of text on disabled elements, like disabled menu items.
`pf-t--global--text--color--on-disabled`	Dark: Default:	Use as the color of text that is placed on a disabled background, like disabled menu toggles or tabs.
`pf-t--global--text--color--required`	Dark: Default:	Use as the color of text that signals that action/information is required from users, like asterisks placed beside form fields or checkboxes.
`pf-t--global--text--color--on-highlight`	Dark: Default:	Use as the color of text that is highlighted.
`pf-t--global--text--color--status--success--default`	Dark: Default:
`pf-t--global--text--color--status--success--hover`	Dark: Default:
`pf-t--global--text--color--status--success--clicked`	Dark: Default:
`pf-t--global--text--color--status--on-success--default`	Dark: Default:	Use as the default color for text that is placed on a success background color, like in banners.
`pf-t--global--text--color--status--on-success--hover`	Dark: Default:	Use as the hover state color for text that is placed on a success background color, like in banners.
`pf-t--global--text--color--status--on-success--clicked`	Dark: Default:	Use as the clicked state color for text that is placed on a success background color, like in banners.
`pf-t--global--text--color--status--warning--default`	Dark: Default:
`pf-t--global--text--color--status--warning--hover`	Dark: Default:
`pf-t--global--text--color--status--warning--clicked`	Dark: Default:
`pf-t--global--text--color--status--on-warning--default`	Dark: Default:	Use as the default color for text that is placed on a warning background color, like in banners.
`pf-t--global--text--color--status--on-warning--hover`	Dark: Default:	Use as the hover state color for text that is placed on a warning background color, like in banners.
`pf-t--global--text--color--status--on-warning--clicked`	Dark: Default:	Use as the clicked state color for text that is placed on a warning background color, like in banners.
`pf-t--global--text--color--status--danger--default`	Dark: Default:	Use as the default color for text that communicates a danger status.
`pf-t--global--text--color--status--danger--hover`	Dark: Default:	Use as the hover state color for text that communicates a danger status.
`pf-t--global--text--color--status--danger--clicked`	Dark: Default:	Use as the clicked state color for text that communicates a danger status.
`pf-t--global--text--color--status--on-danger--default`	Dark: Default:	Use as the default color for text that is placed on a danger background color, like in banners.
`pf-t--global--text--color--status--on-danger--hover`	Dark: Default:	Use as the hover state color for text that is placed on a danger background color, like in banners.
`pf-t--global--text--color--status--on-danger--clicked`	Dark: Default:	Use as the clicked state color for text that is placed on a danger background color, like in banners.
`pf-t--global--text--color--status--info--default`	Dark: Default:	Use as the default color for text that communicates am info status.
`pf-t--global--text--color--status--info--hover`	Dark: Default:	Use as the hover state color for text that communicates an infostatus.
`pf-t--global--text--color--status--info--clicked`	Dark: Default:	Use as the clicked state color for text that communicates an info status.
`pf-t--global--text--color--status--on-info--default`	Dark: Default:	Use as the default color for text that is placed on an info background color, like in banners.
`pf-t--global--text--color--status--on-info--hover`	Dark: Default:	Use as the hover state color for text that is placed on an info background color, like in banners.
`pf-t--global--text--color--status--on-info--clicked`	Dark: Default:	Use as the clicked state color for text that is placed on an info background color, like in banners.
`pf-t--global--text--color--status--custom--default`	Dark: Default:	Use as the default color for text that communicates a custom status.
`pf-t--global--text--color--status--custom--hover`	Dark: Default:	Use as the hover state color for text that communicates a custom status.
`pf-t--global--text--color--status--custom--clicked`	Dark: Default:	Use as the clicked state color for text that communicates a custom status.
`pf-t--global--text--color--status--on-custom--default`	Dark: Default:	Use as the default color for text that is placed on a custom background color, like in banners.
`pf-t--global--text--color--status--on-custom--hover`	Dark: Default:	Use as the hover state color for text that is placed on a custom background color, like in banners.
`pf-t--global--text--color--status--on-custom--clicked`	Dark: Default:	Use as the clicked state color for text that is placed on a custom background color, like in banners.
`pf-t--global--text--color--status--unread--on-default--default`	Dark: Default:	Use as the default color for text that is placed in elements that convey an unread status, like badges and stateful buttons.
`pf-t--global--text--color--status--unread--on-default--hover`	Dark: Default:	Use as the hover state color for text that is placed in elements that convey an unread status, like badges and stateful buttons.
`pf-t--global--text--color--status--unread--on-default--clicked`	Dark: Default:	Use as the clicked state color for text that is placed in elements that convey an unread status, like badges and stateful buttons.
`pf-t--global--text--color--status--unread--on-attention--default`	Dark: Default:	Use as the default color for text that is placed in elements that convey an unread status and require greater attention like badges and stateful buttons.
`pf-t--global--text--color--status--unread--on-attention--hover`	Dark: Default:	Use as the hover state color for text that is placed in elements that convey an unread status and require greater attention like badges and stateful buttons.
`pf-t--global--text--color--status--unread--on-attention--clicked`	Dark: Default:	Use as the clicked state color for text that is placed in elements that convey an unread status and require greater attention like badges and stateful buttons.
`pf-t--global--text--color--nonstatus--on-red--default`	Dark: Default:	Use as the default color for text that is placed on a nonstatus red background color.
`pf-t--global--text--color--nonstatus--on-red--hover`	Dark: Default:	Use as the hover state color for text that is placed on a nonstatus red background color.
`pf-t--global--text--color--nonstatus--on-red--clicked`	Dark: Default:	Use as the clicked state color for text that is placed on a nonstatus red background color.
`pf-t--global--text--color--nonstatus--on-orangered--default`	Dark: Default:	Use as the default color for text that is placed on a nonstatus orangered background color.
`pf-t--global--text--color--nonstatus--on-orangered--hover`	Dark: Default:	Use as the hover state color for text that is placed on a nonstatus orangered background color.
`pf-t--global--text--color--nonstatus--on-orangered--clicked`	Dark: Default:	Use as the clicked state color for text that is placed on a nonstatus orangered background color.
`pf-t--global--text--color--nonstatus--on-orange--default`	Dark: Default:	Use as the default color for text that is placed on a nonstatus orange background color.
`pf-t--global--text--color--nonstatus--on-orange--hover`	Dark: Default:	Use as the hover state color for text that is placed on a nonstatus orange background color.
`pf-t--global--text--color--nonstatus--on-orange--clicked`	Dark: Default:	Use as the clicked state color for text that is placed on a nonstatus orange background color.
`pf-t--global--text--color--nonstatus--on-yellow--default`	Dark: Default:	Use as the default color for text that is placed on a nonstatus yellow background color.
`pf-t--global--text--color--nonstatus--on-yellow--hover`	Dark: Default:	Use as the hover state color for text that is placed on a nonstatus yellow background color.
`pf-t--global--text--color--nonstatus--on-yellow--clicked`	Dark: Default:	Use as the clicked state color for text that is placed on a nonstatus yellow background color.
`pf-t--global--text--color--nonstatus--on-green--default`	Dark: Default:	Use as the default color for text that is placed on a nonstatus green background color.
`pf-t--global--text--color--nonstatus--on-green--hover`	Dark: Default:	Use as the hover state color for text that is placed on a nonstatus green background color.
`pf-t--global--text--color--nonstatus--on-green--clicked`	Dark: Default:	Use as the clicked state color for text that is placed on a nonstatus green background color.
`pf-t--global--text--color--nonstatus--on-teal--default`	Dark: Default:	Use as the default color for text that is placed on a nonstatus teal background color.
`pf-t--global--text--color--nonstatus--on-teal--hover`	Dark: Default:	Use as the hover state color for text that is placed on a nonstatus teal background color.
`pf-t--global--text--color--nonstatus--on-teal--clicked`	Dark: Default:	Use as the clicked state color for text that is placed on a nonstatus teal background color.
`pf-t--global--text--color--nonstatus--on-blue--default`	Dark: Default:	Use as the default color for text that is placed on a nonstatus blue background color.
`pf-t--global--text--color--nonstatus--on-blue--hover`	Dark: Default:	Use as the hover state color for text that is placed on a nonstatus blue background color.
`pf-t--global--text--color--nonstatus--on-blue--clicked`	Dark: Default:	Use as the clicked state color for text that is placed on a nonstatus blue background color.
`pf-t--global--text--color--nonstatus--on-purple--default`	Dark: Default:	Use as the default color for text that is placed on a nonstatus purple background color.
`pf-t--global--text--color--nonstatus--on-purple--hover`	Dark: Default:	Use as the hover state color for text that is placed on a nonstatus purple background color.
`pf-t--global--text--color--nonstatus--on-purple--clicked`	Dark: Default:	Use as the clicked state color for text that is placed on a nonstatus purple background color.
`pf-t--global--text--color--nonstatus--on-gray--default`	Dark: Default:	Use as the default color for text that is placed on a nonstatus gray background color.
`pf-t--global--text--color--nonstatus--on-gray--hover`	Dark: Default:	Use as the hover state color for text that is placed on a nonstatus gray background color.
`pf-t--global--text--color--nonstatus--on-gray--clicked`	Dark: Default:	Use as the clicked state color for text that is placed on a nonstatus gray background color.
`pf-t--global--spacer--xs`	Default: 0.25rem	Use for extra small spaces between elements.
`pf-t--global--spacer--sm`	Default: 0.5rem	Use for small spaces between elements.
`pf-t--global--spacer--md`	Default: 1rem	Use for medium-sized spaces between elements.
`pf-t--global--spacer--lg`	Default: 1.5rem	Use for large spaces between elements.
`pf-t--global--spacer--xl`	Default: 2rem	Use for extra large spaces between elements.
`pf-t--global--spacer--2xl`	Default: 3rem	Use for double extra large spaces spacing between elements.
`pf-t--global--spacer--3xl`	Default: 4rem	Use for triple extra large spaces between elements.
`pf-t--global--spacer--4xl`	Default: 5rem	Use for quadruple extra large spaces between elements.
`pf-t--global--spacer--control--vertical--default`	Default: 0.5rem	Use to set the vertical padding inside of controls. This is used across buttons, text inputs, menu toggles, etc.
`pf-t--global--spacer--control--vertical--compact`	Default: 0.25rem	Use to set the vertical padding inside of compact controls. This is used across text inputs, menu toggles, control buttons etc.
`pf-t--global--spacer--control--vertical--plain`	Default: 0.5rem	Use to set the vertical padding inside of plain controls, like in plain menu toggles.
`pf-t--global--spacer--control--horizontal--default`	Default: 1rem	Use to set the horizontal padding inside of controls, like text inputs and menu toggles.
`pf-t--global--spacer--control--horizontal--plain`	Default: 0.5rem	Use to set the horizontal padding inside of plain controls, like in plain menu toggles.
`pf-t--global--spacer--control--horizontal--compact`	Default: 0.5rem	Use to set the horizontal padding inside of compact controls. This is used across text inputs, menu toggles, control buttons etc.
`pf-t--global--spacer--control--horizontal--spacious`	Default: 1.5rem	Use to set the horizontal padding in large/display controls.
`pf-t--global--spacer--gap--text-to-element--default`	Default: 0.5rem	Use to space an element, like an icon or badge, inline with text
`pf-t--global--spacer--gap--control-to-control--default`	Default: 0.25rem	Use to set the space between controls, like in input groups or filter groups
`pf-t--global--spacer--gap--group--vertical`	Default: 0.5rem	Use to set the vertical space between items in a group, like a field label, form input, and helper text placed in a vertical/stacked layout
`pf-t--global--spacer--gap--group--horizontal`	Default: 1rem	Use to set the horizontal space between items in a group, like a field label and form input placed in a horizontal layout.
`pf-t--global--spacer--gap--group-to-group--horizontal`	Default: 3rem	Use to set the horizontal space between groups of elements, like between multiple action groups or forms groups placed in a horizontal layout.
`pf-t--global--spacer--gap--group-to-group--vertical`	Default: 1.5rem	Use to set the vertical space between groups of elements, like between stacked form groups.
`pf-t--global--spacer--gap--action-to-action--default`	Default: 1rem	Use to set the space between actions, like in an action list group.
`pf-t--global--spacer--gap--action-to-action--plain`	Default: 0.25rem	Use to set the space between plain actions, like in an action list group.
`pf-t--global--spacer--action--horizontal--default`	Default: 1.5rem	Use to set the horizontal padding inside a default action, like buttons.
`pf-t--global--spacer--action--horizontal--plain`	Default: 0.5rem	Use to set the horizontal padding inside a plain action, like plain buttons.
`pf-t--global--spacer--action--horizontal--compact`	Default: 1rem	Use to set the horizontal padding inside a compact action, like compact buttons.
`pf-t--global--spacer--action--horizontal--spacious`	Default: 2rem	Use to set the horizontal padding inside a large/display action, like CTAs.
`pf-t--global--spacer--action--vertical--compact`	Default: 0.25rem	Use to set the vertical padding inside a compact action, like compact buttons.
`pf-t--global--spacer--action--vertical--spacious`	Default: 1rem	Use to set the vertical padding inside a large/display action, like CTAs.
`pf-t--global--icon--size--sm`	Default: 0.75rem	Use for small icons.
`pf-t--global--icon--size--md`	Default: 0.875rem	Use for medium icons.
`pf-t--global--icon--size--lg`	Default: 1rem	Use for large icons.
`pf-t--global--icon--size--xl`	Default: 1.375rem	Use for extra large icons.
`pf-t--global--icon--size--2xl`	Default: 3.5rem	Use for double extra large icons.
`pf-t--global--icon--size--3xl`	Default: 6rem	Use for triple extra large icons.
`pf-t--global--icon--size--font--heading--h1`	Default: 1.375rem	Use for icons that are placed inline with first level headings
`pf-t--global--icon--size--font--heading--h2`	Default: 1.25rem	Use for icons that are placed inline with second level headings
`pf-t--global--icon--size--font--heading--h3`	Default: 1.125rem	Use for icons that are placed inline with third level headings
`pf-t--global--icon--size--font--heading--h4`	Default: 1rem	Use for icons that are placed inline with fourth level headings
`pf-t--global--icon--size--font--heading--h5`	Default: 1rem	Use for icons that are placed inline with fifth level headings
`pf-t--global--icon--size--font--heading--h6`	Default: 1rem	Use for icons that are placed inline with sixth level headings
`pf-t--global--icon--size--font--body--sm`	Default: 0.75rem	Use for icons that are placed inline with small body text
`pf-t--global--icon--size--font--body--default`	Default: 0.875rem	Use for icons that are placed inline with default body text
`pf-t--global--icon--size--font--body--lg`	Default: 1rem	Use for icons that are placed inline with large body text
`pf-t--global--icon--size--font--xs`	Default: 0.75rem	Use for icons that are placed inline with font–size–xs text
`pf-t--global--icon--size--font--sm`	Default: 0.875rem	Use for icons that are placed inline with font–size–sm text
`pf-t--global--icon--size--font--md`	Default: 1rem	Use for icons that are placed inline with font–size–md text
`pf-t--global--icon--size--font--lg`	Default: 1.125rem	Use for icons that are placed inline with font–size–lg text
`pf-t--global--icon--size--font--xl`	Default: 1.25rem	Use for icons that are placed inline with font–size–xl text
`pf-t--global--icon--size--font--2xl`	Default: 1.375rem	Use for icons that are placed inline with font–size–2xl text
`pf-t--global--icon--size--font--3xl`	Default: 1.75rem	Use for icons that are placed inline with font–size–3xl text
`pf-t--global--icon--size--font--4xl`	Default: 2.25rem	Use for icons that are placed inline with font–size–3xl text
`pf-t--global--border--width--regular`	Default: 1px	Use as the default border width for elements.
`pf-t--global--border--width--divider--default`	Default: 1px	Use as the default border width for dividers.
`pf-t--global--border--width--divider--hover`	Default: 1px	Use as the border width hover state for dividers.
`pf-t--global--border--width--divider--clicked`	Default: 1px	Use as the border width clicked state for dividers.
`pf-t--global--border--width--strong`	Default: 2px	Use as a stronger/wider border width for elements.
`pf-t--global--border--width--extra-strong`	Default: 3px	Use as the strongest/widest border width for elements.
`pf-t--global--border--width--box--default`	Default: 1px	Use as the default border width for containers like cards, panels, code editors, etc.
`pf-t--global--border--width--box--hover`	Default: 1px	Use as the hover border width for containers like cards, panels, code editors, etc.
`pf-t--global--border--width--box--clicked`	Default: 2px	Use as the clicked border width for containers like cards, panels, code editors, etc.
`pf-t--global--border--width--box--status--default`	Default: 2px	Use as the default border width for containers that convey statuses like inline alerts, notification drawer items and hints. This token is typically paired with status border colors.
`pf-t--global--border--width--box--status--read`	Default: 1px	Use as the border width for containers that convey a “read” status, like notification drawer items.
`pf-t--global--border--width--action--default`	Default: 1px	Use as the default border width for actions like secondary and tertiary buttons
`pf-t--global--border--width--action--hover`	Default: 2px	Use as the hover state border width for actions like secondary and tertiary buttons
`pf-t--global--border--width--action--clicked`	Default: 2px	Use as the clicked state border width for actions like secondary and tertiary buttons
`pf-t--global--border--width--control--default`	Default: 1px	Use as the default border width for controls like text inputs, menu toggles and control buttons
`pf-t--global--border--width--control--hover`	Default: 1px	Use as the hover state border width for controls like text inputs, menu toggles and control buttons
`pf-t--global--border--width--control--clicked`	Default: 2px	Use as the clicked state border width for controls like text inputs, menu toggles and control buttons
`pf-t--global--border--radius--sharp`	Default: 0px	Use to adjust the curvature of the border corners for an element. Use for sharp corners.
`pf-t--global--border--radius--tiny`	Default: 4px	Use to adjust the curvature of the border corners for an element. Use for barely rounded corners.
`pf-t--global--border--radius--small`	Default: 6px	Use to adjust the curvature of the border corners for an element. Use for slightly rounded corners, like icon buttons or menus.
`pf-t--global--border--radius--medium`	Default: 16px	Use to adjust the curvature of the border corners for an element. Use for moderately rounded corners, like cards.
`pf-t--global--border--radius--large`	Default: 24px	Use to adjust the curvature of the border corners for an element. Use for mostly rounded corners, like modals.
`pf-t--global--border--radius--pill`	Default: 999px	Use to adjust the curvature of the border corners for an element. Use for corners that are as round as possible, like standard buttons and badges.
`pf-t--global--font--family--body`	Default: Red Hat Text VF	Use to define the font family for body text
`pf-t--global--font--family--heading`	Default: Red Hat Display VF	Use to define the font family for heading text
`pf-t--global--font--family--mono`	Default: Red Hat Mono VF	Use to define the font family for mono text
`pf-t--global--font--weight--body`	Default: 400	Use to define the default weight for body text
`pf-t--global--font--weight--heading`	Default: 700	Use to define the default weight for heading text
`pf-t--global--font--line-height--body`	Default: 1.2999999523162842	Use to define the line height for body text
`pf-t--global--font--line-height--heading`	Default: 1.5	Use to define the line height for heading text
`pf-t--global--font--size--body--sm`	Default: 0.75rem	Use for a smaller font size in body sections.
`pf-t--global--font--size--body--default`	Default: 0.875rem	Use as the default font size in body sections.
`pf-t--global--font--size--body--lg`	Default: 1rem	Use for a larger font size in body sections.
`pf-t--global--font--size--heading--h1`	Default: 1.375rem	Use as the font size for first level headings.
`pf-t--global--font--size--heading--h2`	Default: 1.25rem	Use as the font size for second level headings.
`pf-t--global--font--size--heading--h3`	Default: 1.125rem	Use as the font size for third level headings.
`pf-t--global--font--size--heading--h4`	Default: 1rem	Use as the font size for fourth-level headings.
`pf-t--global--font--size--heading--h5`	Default: 1rem	Use as the font size for fifth level headings.
`pf-t--global--font--size--heading--h6`	Default: 1rem	Use as the font size for sixth level headings.
`pf-t--global--font--size--xs`	Default: 0.75rem
`pf-t--global--font--size--sm`	Default: 0.875rem	Use as the font size for small text that isn’t a heading or in a body section.
`pf-t--global--font--size--md`	Default: 1rem	Use as the font size for medium text that isn’t a heading or in a body section.
`pf-t--global--font--size--lg`	Default: 1.125rem	Use as the font size for large text that isn’t a heading or in a body section.
`pf-t--global--font--size--xl`	Default: 1.25rem	Use as the font size for extra large text that isn’t a heading or in a body section.
`pf-t--global--font--size--2xl`	Default: 1.375rem	Use as the font size for double extra large text that isn’t a heading or in a body section.
`pf-t--global--font--size--3xl`	Default: 1.75rem	Use as the font size for triple extra large text that isn’t a heading or in a body section.
`pf-t--global--font--size--4xl`	Default: 2.25rem	Use as the font size for quadruple extra large text that isn’t a heading or in a body section.
`pf-t--global--z-index--xs`	Default: 100
`pf-t--global--z-index--sm`	Default: 200
`pf-t--global--z-index--md`	Default: 300
`pf-t--global--z-index--lg`	Default: 400
`pf-t--global--z-index--xl`	Default: 500
`pf-t--global--z-index--2xl`	Default: 600
`pf-t--global--box-shadow--X--sm--default`	Default: 0px	Use to define the X value for a default small box-shadow, like in sticky sections
`pf-t--global--box-shadow--X--sm--top`	Default: 0px	Use to define the X value for a small box-shadow that appears on the top of a raised element, like in sticky footers
`pf-t--global--box-shadow--X--sm--bottom`	Default: 0px	Use to define the X value for a small box-shadow that appears on the bottom of a raised element, like in sticky headers.
`pf-t--global--box-shadow--X--sm--left`	Default: -1px	Use to define the X value for a small box-shadow that appears on the left of a raised element, like in sticky columns.
`pf-t--global--box-shadow--X--sm--right`	Default: 1px	Use to define the X value for a small box-shadow that appears on the right of a raised element, like in sticky columns.
`pf-t--global--box-shadow--X--md--default`	Default: 0px	Use to define the X value for a default medium box-shadow, used in popovers and raised menus.
`pf-t--global--box-shadow--X--md--top`	Default: 0px	Use to define the X value for a medium box-shadow that appears on the top of a raised element, like in overlay bottom drawers.
`pf-t--global--box-shadow--X--md--bottom`	Default: 0px	Use to define the X value for a medium box-shadow that appears on the bottom of a raised element.
`pf-t--global--box-shadow--X--md--left`	Default: -4px	Use to define the X value for a medium box-shadow that appears on the left of a raised element, like in overlay drawers that show on the right of the screen.
`pf-t--global--box-shadow--X--md--right`	Default: 4px	Use to define the X value for a medium box-shadow that appears on the right of a raised element, like in overlay drawers that show on the left of the screen.
`pf-t--global--box-shadow--X--lg--default`	Default: 0px	Use to define the X value for a default large box-shadow, used in modals and wizards.
`pf-t--global--box-shadow--X--lg--top`	Default: 0px	Use to define the X value for a large box-shadow that appears on the top of a raised element.
`pf-t--global--box-shadow--X--lg--bottom`	Default: 0px	Use to define the X value for a large box-shadow that appears on the bottom of a raised element.
`pf-t--global--box-shadow--X--lg--left`	Default: -8px	Use to define the X value for a large box-shadow that appears on the left of a raised element.
`pf-t--global--box-shadow--X--lg--right`	Default: 8px	Use to define the X value for a large box-shadow that appears on the right of a raised element.
`pf-t--global--box-shadow--Y--sm--default`	Default: 1px	Use to define the Y value for a default small box-shadow, like in sticky sections
`pf-t--global--box-shadow--Y--sm--top`	Default: -1px	Use to define the Y value for a small box-shadow that appears on the top of a raised element, like in sticky footers
`pf-t--global--box-shadow--Y--sm--bottom`	Default: 1px	Use to define the Y value for a small box-shadow that appears on the bottom of a raised element, like in sticky headers.
`pf-t--global--box-shadow--Y--sm--left`	Default: 0px	Use to define the Y value for a small box-shadow that appears on the left of a raised element, like in sticky columns.
`pf-t--global--box-shadow--Y--sm--right`	Default: 0px	Use to define the Y value for a small box-shadow that appears on the right of a raised element, like in sticky columns.
`pf-t--global--box-shadow--Y--md--default`	Default: 4px	Use to define the Y value for a default medium box-shadow, used in popovers and raised menus.
`pf-t--global--box-shadow--Y--md--top`	Default: -4px	Use to define the Y value for a medium box-shadow that appears on the top of a raised element, like in overlay bottom drawers
`pf-t--global--box-shadow--Y--md--bottom`	Default: 4px	Use to define the Y value for a medium box-shadow that appears on the bottom of a raised element.
`pf-t--global--box-shadow--Y--md--left`	Default: 0px	Use to define the Y value for a medium box-shadow that appears on the left of a raised element, like in overlay drawers that show on the right of the screen.
`pf-t--global--box-shadow--Y--md--right`	Default: 0px	Use to define the Y value for a medium box-shadow that appears on the right of a raised element, like in overlay drawers that show on the left of the screen.
`pf-t--global--box-shadow--Y--lg--default`	Default: 8px	Use to define the Y value for a default large box-shadow, used in modals and wizards.
`pf-t--global--box-shadow--Y--lg--top`	Default: -8px	Use to define the Y value for a large box-shadow that appears on the top of a raised element.
`pf-t--global--box-shadow--Y--lg--bottom`	Default: 8px	Use to define the Y value for a large box-shadow that appears on the bottom of a raised element.
`pf-t--global--box-shadow--Y--lg--left`	Default: 0px	Use to define the Y value for a large box-shadow that appears on the left of a raised element.
`pf-t--global--box-shadow--Y--lg--right`	Default: 0px	Use to define the Y value for a large box-shadow that appears on the right of a raised element.
`pf-t--global--box-shadow--blur--sm`	Default: 4px	Use to define the blur for a small box-shadow
`pf-t--global--box-shadow--blur--md`	Default: 8px	Use to define the blur for a medium box-shadow
`pf-t--global--box-shadow--blur--lg`	Default: 24px	Use to define the blue for a large box-shadow
`pf-t--global--box-shadow--spread--sm`	Default: 0px	Use to define the spread for a small box-shadow
`pf-t--global--box-shadow--spread--md`	Default: 0px	Use to define the spread of a medium box-shadow
`pf-t--global--box-shadow--spread--lg`	Default: 0px	Use to define the spread of a large box-shadow
`pf-t--global--breakpoint--xs`	Default: 0rem	Use to define an extra small breakpoint, which is the minimum width at which an effect applies to an element, in order to support responsive design.
`pf-t--global--breakpoint--sm`	Default: 36rem	Use to define a small breakpoint, which is the minimum width at which an effect applies to an element, in order to support responsive design.
`pf-t--global--breakpoint--md`	Default: 48rem	Use to define a medium breakpoint, which is the minimum width at which an effect applies to an element, in order to support responsive design.
`pf-t--global--breakpoint--lg`	Default: 62rem	Use to define a large breakpoint, which is the minimum width at which an effect applies to an element, in order to support responsive design.
`pf-t--global--breakpoint--xl`	Default: 75rem	Use to define an extra large breakpoint, which is the minimum width at which an effect applies to an element, in order to support responsive design.
`pf-t--global--breakpoint--2xl`	Default: 90.625rem	Use to define a double extra large breakpoint, which is the minimum width at which an effect applies to an element, in order to support responsive design.
`pf-t--global--breakpoint--height--sm`	Default: 0rem	Use to define a small height breakpoint, which is the minimum height at which an effect applies to an element, in order to support responsive design.
`pf-t--global--breakpoint--height--md`	Default: 40rem	Use to define a medium height breakpoint, which is the minimum height at which an effect applies to an element, in order to support responsive design.
`pf-t--global--breakpoint--height--lg`	Default: 48rem	Use to define a large height breakpoint, which is the minimum height at which an effect applies to an element, in order to support responsive design.
`pf-t--global--breakpoint--height--xl`	Default: 60rem	Use to define an extra large height breakpoint, which is the minimum height at which an effect applies to an element, in order to support responsive design.
`pf-t--global--breakpoint--height--2xl`	Default: 80rem	Use to define an extra small height breakpoint, which is the minimum height at which an effect applies to an element, in order to support responsive design.
`pf-t--global--motion--duration--xs`	Default: 50ms	Use for the quickest possible duration of an animation.
`pf-t--global--motion--duration--sm`	Default: 100ms	Use for a short animation duration. Use for simple and/or small animations.
`pf-t--global--motion--duration--md`	Default: 200ms	Use for a medium animation duration.
`pf-t--global--motion--duration--lg`	Default: 300ms	Use for long animation duration. Use for larger, more expressive animations.
`pf-t--global--motion--duration--xl`	Default: 400ms	Use for extra long animation duration.
`pf-t--global--motion--duration--2xl`	Default: 500ms	Use for significantly long animation duration.
`pf-t--global--motion--duration--3xl`	Default: 600ms	Use for the longest possible duration of an animation.
`pf-t--global--motion--duration--fade--short`	Default: 100ms	Use a short/quick fade to transition color and/or opacity. Useful for fading in one or more elements. Short fades are used for small elements traveling short distances. Used in small interactions like buttons.
`pf-t--global--motion--duration--fade--default`	Default: 200ms	Use a default fade to transition color and/or opacity. Useful for fading in one or more elements. Default fades are used for medium sized elements traveling medium distances. Used on alerts.
`pf-t--global--motion--duration--fade--long`	Default: 300ms	Use a long fade to transition color and/or opacity. Useful for fading in one or more elements. Long fades are used for large elements traveling long distances.
`pf-t--global--motion--duration--slide-out--short`	Default: 300ms	Use for a shorter duration of a slide-out animation, which moves an element out of the viewport.
`pf-t--global--motion--duration--slide-out--default`	Default: 400ms	Use as the default duration of a slide-out animation, which moves an element out of the viewport.
`pf-t--global--motion--duration--slide-out--long`	Default: 500ms	Use for a longer duration of a slide-out animation, which moves an element out of the viewport.
`pf-t--global--motion--duration--slide-in--short`	Default: 300ms	Use for a short duration of a slide-in animation, which moves an offscreen element into the viewport.
`pf-t--global--motion--duration--slide-in--default`	Default: 400ms	Use for a default duration of a slide-in animation, which moves an offscreen element into the viewport.
`pf-t--global--motion--duration--slide-in--long`	Default: 500ms	Use for a longer duration of a slide-in animation, which moves an offscreen element into the viewport.
`pf-t--global--motion--duration--icon--short`	Default: 50ms	Use a short duration on an icon that requires a fast/snappy transition. Used to define the speed at which an icon may animate. Used on a notification badge(stateful button).
`pf-t--global--motion--duration--icon--default`	Default: 100ms	Use a default duration on an icon that requires a moderately timed transition. Used to define the speed at which an icon may animate. Used on a favoriting star(icon button).
`pf-t--global--motion--duration--icon--long`	Default: 200ms	Use a long duration on an icon that requires a slow transition. Used to define the speed at which an icon may animate. Used on the settings cog icon(plain menu toggle).
`pf-t--global--motion--delay--none`	Default: 0ms	Use when there should be no delay before an animation plays.
`pf-t--global--motion--delay--short`	Default: 50ms	Use when there should be a short delay before an animation plays.
`pf-t--global--motion--delay--default`	Default: 100ms	Use when there should be the default delay length before an animation plays.
`pf-t--global--motion--delay--long`	Default: 7000ms	Use when there should be a long delay before an animation plays.
`pf-t--global--motion--timing-function--accelerate`	Default: cubic-bezier(.4, 0, .7, .2)	Use accelerate to specify that the animation starts slowly and accelerates gradually until the end. Timing function controls the pace of an animation transition. Acceleration is our equivalent to an ease-in.
`pf-t--global--motion--timing-function--default`	Default: cubic-bezier(.4, 0, .2, 1)	Use default to specify that the animation starts slow, speeds up and slows down at the end. Timing function controls the pace of an animation transition. Default is our equivalent to an ease-in-out.
`pf-t--global--motion--timing-function--decelerate`	Default: cubic-bezier(0, 0, .2, 1)	Use decelerate to specify that the animation starts quickly and decelerates gradually until the end. Timing function controls the pace of an animation transition. Deceleration is our equivalent to an ease-out.

Base tokens

	Name	Value
	`pf-t--global--icon--color--100`	Default:
	`pf-t--global--icon--color--200`	Default:
	`pf-t--global--icon--color--300`	Default:
	`pf-t--global--border--color--100`	Default:
	`pf-t--global--border--color--200`	Default:
	`pf-t--global--border--color--300`	Default:
	`pf-t--global--box-shadow--color--100`	Default:
	`pf-t--global--box-shadow--color--200`	Default:
	`pf-t--global--background--color--100`	Default:
	`pf-t--global--background--color--200`	Default:
	`pf-t--global--background--color--300`	Default:
	`pf-t--global--background--color--400`	Default:
	`pf-t--global--background--color--500`	Default:
	`pf-t--global--background--color--600`	Default:
	`pf-t--global--background--color--highlight--100`	Default:
	`pf-t--global--background--color--highlight--200`	Default:
	`pf-t--global--color--brand--100`	Default:
	`pf-t--global--color--brand--200`	Default:
	`pf-t--global--color--brand--300`	Default:
	`pf-t--global--color--disabled--100`	Default:
	`pf-t--global--color--disabled--200`	Default:
	`pf-t--global--color--disabled--300`	Default:
	`pf-t--global--color--favorite--100`	Default:
	`pf-t--global--color--favorite--200`	Default:
	`pf-t--global--color--status--success--100`	Default:
	`pf-t--global--color--status--success--200`	Default:
	`pf-t--global--color--status--warning--100`	Default:
	`pf-t--global--color--status--warning--200`	Default:
	`pf-t--global--color--status--warning--300`	Default:
	`pf-t--global--color--status--danger--100`	Default:
	`pf-t--global--color--status--danger--200`	Default:
	`pf-t--global--color--status--danger--300`	Default:
	`pf-t--global--color--status--info--100`	Default:
	`pf-t--global--color--status--info--200`	Default:
	`pf-t--global--color--status--custom--100`	Default:
	`pf-t--global--color--status--custom--200`	Default:
	`pf-t--global--color--severity--undefined--100`	Default:
	`pf-t--global--color--severity--none--100`	Default:
	`pf-t--global--color--severity--minor--100`	Default:
	`pf-t--global--color--severity--moderate--100`	Default:
	`pf-t--global--color--severity--important--100`	Default:
	`pf-t--global--color--severity--critical--100`	Default:
	`pf-t--global--color--nonstatus--red--100`	Default:
	`pf-t--global--color--nonstatus--red--200`	Default:
	`pf-t--global--color--nonstatus--red--300`	Default:
	`pf-t--global--color--nonstatus--orangered--100`	Default:
	`pf-t--global--color--nonstatus--orangered--200`	Default:
	`pf-t--global--color--nonstatus--orangered--300`	Default:
	`pf-t--global--color--nonstatus--orange--100`	Default:
	`pf-t--global--color--nonstatus--orange--200`	Default:
	`pf-t--global--color--nonstatus--orange--300`	Default:
	`pf-t--global--color--nonstatus--yellow--100`	Default:
	`pf-t--global--color--nonstatus--yellow--200`	Default:
	`pf-t--global--color--nonstatus--yellow--300`	Default:
	`pf-t--global--color--nonstatus--green--100`	Default:
	`pf-t--global--color--nonstatus--green--200`	Default:
	`pf-t--global--color--nonstatus--green--300`	Default:
	`pf-t--global--color--nonstatus--teal--100`	Default:
	`pf-t--global--color--nonstatus--teal--200`	Default:
	`pf-t--global--color--nonstatus--teal--300`	Default:
	`pf-t--global--color--nonstatus--blue--100`	Default:
	`pf-t--global--color--nonstatus--blue--200`	Default:
	`pf-t--global--color--nonstatus--blue--300`	Default:
	`pf-t--global--color--nonstatus--purple--100`	Default:
	`pf-t--global--color--nonstatus--purple--200`	Default:
	`pf-t--global--color--nonstatus--purple--300`	Default:
	`pf-t--global--color--nonstatus--gray--100`	Default:
	`pf-t--global--color--nonstatus--gray--200`	Default:
	`pf-t--global--color--nonstatus--gray--300`	Default:
	`pf-t--global--text--color--100`	Default:
	`pf-t--global--text--color--200`	Default:
	`pf-t--global--text--color--300`	Default:
	`pf-t--global--text--color--400`	Default:
	`pf-t--global--text--color--link--100`	Default:
	`pf-t--global--text--color--link--200`	Default:
	`pf-t--global--text--color--link--300`	Default:
	`pf-t--global--dark--background--color--100`	Dark:
	`pf-t--global--dark--background--color--200`	Dark:
	`pf-t--global--dark--background--color--300`	Dark:
	`pf-t--global--dark--background--color--400`	Dark:
	`pf-t--global--dark--background--color--500`	Dark:
	`pf-t--global--dark--background--color--600`	Dark:
	`pf-t--global--dark--background--color--highlight--100`	Dark:
	`pf-t--global--dark--background--color--highlight--200`	Dark:
	`pf-t--global--dark--color--brand--100`	Dark:
	`pf-t--global--dark--color--brand--200`	Dark:
	`pf-t--global--dark--color--brand--300`	Dark:
	`pf-t--global--dark--color--disabled--100`	Dark:
	`pf-t--global--dark--color--disabled--200`	Dark:
	`pf-t--global--dark--color--disabled--300`	Dark:
	`pf-t--global--dark--color--favorite--100`	Dark:
	`pf-t--global--dark--color--favorite--200`	Dark:
	`pf-t--global--dark--color--severity--undefined--100`	Dark:
	`pf-t--global--dark--color--severity--none--100`	Dark:
	`pf-t--global--dark--color--severity--minor--100`	Dark:
	`pf-t--global--dark--color--severity--moderate--100`	Dark:
	`pf-t--global--dark--color--severity--important--100`	Dark:
	`pf-t--global--dark--color--severity--critical--100`	Dark:
	`pf-t--global--dark--color--status--success--100`	Dark:
	`pf-t--global--dark--color--status--success--200`	Dark:
	`pf-t--global--dark--color--status--warning--100`	Dark:
	`pf-t--global--dark--color--status--warning--200`	Dark:
	`pf-t--global--dark--color--status--danger--100`	Dark:
	`pf-t--global--dark--color--status--danger--200`	Dark:
	`pf-t--global--dark--color--status--danger--250`	Dark:
	`pf-t--global--dark--color--status--danger--300`	Dark:
	`pf-t--global--dark--color--status--info--100`	Dark:
	`pf-t--global--dark--color--status--info--200`	Dark:
	`pf-t--global--dark--color--status--custom--100`	Dark:
	`pf-t--global--dark--color--status--custom--200`	Dark:
	`pf-t--global--dark--color--nonstatus--red--100`	Dark:
	`pf-t--global--dark--color--nonstatus--red--200`	Dark:
	`pf-t--global--dark--color--nonstatus--red--300`	Dark:
	`pf-t--global--dark--color--nonstatus--orangered--100`	Dark:
	`pf-t--global--dark--color--nonstatus--orangered--200`	Dark:
	`pf-t--global--dark--color--nonstatus--orangered--300`	Dark:
	`pf-t--global--dark--color--nonstatus--orange--100`	Dark:
	`pf-t--global--dark--color--nonstatus--orange--200`	Dark:
	`pf-t--global--dark--color--nonstatus--orange--300`	Dark:
	`pf-t--global--dark--color--nonstatus--yellow--100`	Dark:
	`pf-t--global--dark--color--nonstatus--yellow--200`	Dark:
	`pf-t--global--dark--color--nonstatus--yellow--300`	Dark:
	`pf-t--global--dark--color--nonstatus--green--100`	Dark:
	`pf-t--global--dark--color--nonstatus--green--200`	Dark:
	`pf-t--global--dark--color--nonstatus--green--300`	Dark:
	`pf-t--global--dark--color--nonstatus--teal--100`	Dark:
	`pf-t--global--dark--color--nonstatus--teal--200`	Dark:
	`pf-t--global--dark--color--nonstatus--teal--300`	Dark:
	`pf-t--global--dark--color--nonstatus--blue--100`	Dark:
	`pf-t--global--dark--color--nonstatus--blue--200`	Dark:
	`pf-t--global--dark--color--nonstatus--blue--300`	Dark:
	`pf-t--global--dark--color--nonstatus--purple--100`	Dark:
	`pf-t--global--dark--color--nonstatus--purple--200`	Dark:
	`pf-t--global--dark--color--nonstatus--purple--300`	Dark:
	`pf-t--global--dark--color--nonstatus--gray--100`	Dark:
	`pf-t--global--dark--color--nonstatus--gray--200`	Dark:
	`pf-t--global--dark--color--nonstatus--gray--300`	Dark:
	`pf-t--global--dark--border--color--100`	Dark:
	`pf-t--global--dark--border--color--200`	Dark:
	`pf-t--global--dark--text--color--100`	Dark:
	`pf-t--global--dark--text--color--200`	Dark:
	`pf-t--global--dark--text--color--300`	Dark:
	`pf-t--global--dark--text--color--400`	Dark:
	`pf-t--global--dark--text--color--link--100`	Dark:
	`pf-t--global--dark--text--color--link--200`	Dark:
	`pf-t--global--dark--text--color--link--300`	Dark:
	`pf-t--global--dark--icon--color--100`	Dark:
	`pf-t--global--dark--icon--color--200`	Dark:
	`pf-t--global--dark--icon--color--300`	Dark:
	`pf-t--global--dark--box-shadow--color--100`	Dark:
	`pf-t--global--spacer--100`	Default: 0.25rem
	`pf-t--global--spacer--200`	Default: 0.5rem
	`pf-t--global--spacer--300`	Default: 1rem
	`pf-t--global--spacer--400`	Default: 1.5rem
	`pf-t--global--spacer--500`	Default: 2rem
	`pf-t--global--spacer--600`	Default: 3rem
	`pf-t--global--spacer--700`	Default: 4rem
	`pf-t--global--spacer--800`	Default: 5rem
	`pf-t--global--icon--size--100`	Default: 0.75rem
	`pf-t--global--icon--size--200`	Default: 0.875rem
	`pf-t--global--icon--size--250`	Default: 1rem
	`pf-t--global--icon--size--300`	Default: 1.375rem
	`pf-t--global--icon--size--400`	Default: 3.5rem
	`pf-t--global--icon--size--500`	Default: 6rem
	`pf-t--global--border--width--100`	Default: 1px
	`pf-t--global--border--width--200`	Default: 2px
	`pf-t--global--border--width--300`	Default: 3px
	`pf-t--global--border--radius--0`	Default: 0px
	`pf-t--global--border--radius--100`	Default: 4px
	`pf-t--global--border--radius--200`	Default: 6px
	`pf-t--global--border--radius--300`	Default: 16px
	`pf-t--global--border--radius--400`	Default: 24px
	`pf-t--global--border--radius--500`	Default: 999px
	`pf-t--global--font--family--100`	Default: Red Hat Text VF
	`pf-t--global--font--family--200`	Default: Red Hat Display VF
	`pf-t--global--font--family--300`	Default: Red Hat Mono VF
	`pf-t--global--font--weight--100`	Default: 400
	`pf-t--global--font--weight--200`	Default: 500
	`pf-t--global--font--weight--300`	Default: 700
	`pf-t--global--font--weight--400`	Default: 700
	`pf-t--global--font--line-height--100`	Default: 1.2999999523162842
	`pf-t--global--font--line-height--200`	Default: 1.5
	`pf-t--global--font--size--100`	Default: 0.75rem
	`pf-t--global--font--size--200`	Default: 0.875rem
	`pf-t--global--font--size--300`	Default: 1rem
	`pf-t--global--font--size--400`	Default: 1.125rem
	`pf-t--global--font--size--500`	Default: 1.25rem
	`pf-t--global--font--size--600`	Default: 1.375rem
	`pf-t--global--font--size--700`	Default: 1.75rem
	`pf-t--global--font--size--800`	Default: 2.25rem
	`pf-t--global--z-index--100`	Default: 100
	`pf-t--global--z-index--200`	Default: 200
	`pf-t--global--z-index--300`	Default: 300
	`pf-t--global--z-index--400`	Default: 400
	`pf-t--global--z-index--500`	Default: 500
	`pf-t--global--z-index--600`	Default: 600
	`pf-t--global--box-shadow--X--100`	Default: -8px
	`pf-t--global--box-shadow--X--200`	Default: -4px
	`pf-t--global--box-shadow--X--300`	Default: -1px
	`pf-t--global--box-shadow--X--400`	Default: 0px
	`pf-t--global--box-shadow--X--500`	Default: 1px
	`pf-t--global--box-shadow--X--600`	Default: 4px
	`pf-t--global--box-shadow--X--700`	Default: 8px
	`pf-t--global--box-shadow--Y--100`	Default: -8px
	`pf-t--global--box-shadow--Y--200`	Default: -4px
	`pf-t--global--box-shadow--Y--300`	Default: -1px
	`pf-t--global--box-shadow--Y--400`	Default: 0px
	`pf-t--global--box-shadow--Y--500`	Default: 1px
	`pf-t--global--box-shadow--Y--600`	Default: 4px
	`pf-t--global--box-shadow--Y--700`	Default: 8px
	`pf-t--global--box-shadow--blur--100`	Default: 4px
	`pf-t--global--box-shadow--blur--200`	Default: 8px
	`pf-t--global--box-shadow--blur--300`	Default: 24px
	`pf-t--global--box-shadow--spread--100`	Default: 0px
	`pf-t--global--breakpoint--100`	Default: 0rem
	`pf-t--global--breakpoint--200`	Default: 36rem
	`pf-t--global--breakpoint--250`	Default: 40rem
	`pf-t--global--breakpoint--300`	Default: 48rem
	`pf-t--global--breakpoint--350`	Default: 60rem
	`pf-t--global--breakpoint--400`	Default: 62rem
	`pf-t--global--breakpoint--500`	Default: 75rem
	`pf-t--global--breakpoint--550`	Default: 80rem
	`pf-t--global--breakpoint--600`	Default: 90.625rem
	`pf-t--global--duration--50`	Default: 50ms
	`pf-t--global--duration--100`	Default: 100ms
	`pf-t--global--duration--200`	Default: 200ms
	`pf-t--global--duration--300`	Default: 300ms
	`pf-t--global--duration--400`	Default: 400ms
	`pf-t--global--duration--500`	Default: 500ms
	`pf-t--global--duration--600`	Default: 600ms
	`pf-t--global--delay--100`	Default: 0ms
	`pf-t--global--delay--200`	Default: 50ms
	`pf-t--global--delay--300`	Default: 100ms
	`pf-t--global--delay--400`	Default: 7000ms
	`pf-t--global--timing-function--100`	Default: cubic-bezier(.4, 0, .7, .2)
	`pf-t--global--timing-function--200`	Default: cubic-bezier(.4, 0, .2, 1)
	`pf-t--global--timing-function--300`	Default: cubic-bezier(0, 0, .2, 1)

Palette tokens

	Name	Value
	`pf-t--color--white`	Dark: Default:
	`pf-t--color--gray--10`	Dark: Default:
	`pf-t--color--gray--20`	Dark: Default:
	`pf-t--color--gray--30`	Dark: Default:
	`pf-t--color--gray--40`	Dark: Default:
	`pf-t--color--gray--50`	Dark: Default:
	`pf-t--color--gray--60`	Dark: Default:
	`pf-t--color--gray--70`	Dark: Default:
	`pf-t--color--gray--80`	Dark: Default:
	`pf-t--color--gray--90`	Dark: Default:
	`pf-t--color--gray--95`	Dark: Default:
	`pf-t--color--black`	Dark: Default:
	`pf-t--color--blue--10`	Dark: Default:
	`pf-t--color--blue--20`	Dark: Default:
	`pf-t--color--blue--30`	Dark: Default:
	`pf-t--color--blue--40`	Dark: Default:
	`pf-t--color--blue--50`	Dark: Default:
	`pf-t--color--blue--60`	Dark: Default:
	`pf-t--color--blue--70`	Dark: Default:
	`pf-t--color--teal--10`	Dark: Default:
	`pf-t--color--teal--20`	Dark: Default:
	`pf-t--color--teal--30`	Dark: Default:
	`pf-t--color--teal--40`	Dark: Default:
	`pf-t--color--teal--50`	Dark: Default:
	`pf-t--color--teal--60`	Dark: Default:
	`pf-t--color--teal--70`	Dark: Default:
	`pf-t--color--yellow--10`	Dark: Default:
	`pf-t--color--yellow--20`	Dark: Default:
	`pf-t--color--yellow--30`	Dark: Default:
	`pf-t--color--yellow--40`	Dark: Default:
	`pf-t--color--yellow--50`	Dark: Default:
	`pf-t--color--yellow--60`	Dark: Default:
	`pf-t--color--yellow--70`	Dark: Default:
	`pf-t--color--green--10`	Dark: Default:
	`pf-t--color--green--20`	Dark: Default:
	`pf-t--color--green--30`	Dark: Default:
	`pf-t--color--green--40`	Dark: Default:
	`pf-t--color--green--50`	Dark: Default:
	`pf-t--color--green--60`	Dark: Default:
	`pf-t--color--green--70`	Dark: Default:
	`pf-t--color--orange--10`	Dark: Default:
	`pf-t--color--orange--20`	Dark: Default:
	`pf-t--color--orange--30`	Dark: Default:
	`pf-t--color--orange--40`	Dark: Default:
	`pf-t--color--orange--50`	Dark: Default:
	`pf-t--color--orange--60`	Dark: Default:
	`pf-t--color--orange--70`	Dark: Default:
	`pf-t--color--red-orange--10`	Dark: Default:
	`pf-t--color--red-orange--20`	Dark: Default:
	`pf-t--color--red-orange--30`	Dark: Default:
	`pf-t--color--red-orange--40`	Dark: Default:
	`pf-t--color--red-orange--50`	Dark: Default:
	`pf-t--color--red-orange--60`	Dark: Default:
	`pf-t--color--red-orange--70`	Dark: Default:
	`pf-t--color--purple--10`	Dark: Default:
	`pf-t--color--purple--20`	Dark: Default:
	`pf-t--color--purple--30`	Dark: Default:
	`pf-t--color--purple--40`	Dark: Default:
	`pf-t--color--purple--50`	Dark: Default:
	`pf-t--color--purple--60`	Dark: Default:
	`pf-t--color--purple--70`	Dark: Default:
	`pf-t--color--red--10`	Dark: Default:
	`pf-t--color--red--20`	Dark: Default:
	`pf-t--color--red--30`	Dark: Default:
	`pf-t--color--red--40`	Dark: Default:
	`pf-t--color--red--50`	Dark: Default:
	`pf-t--color--red--60`	Dark: Default:
	`pf-t--color--red--70`	Dark: Default:

Chart tokens

	Name	Value
	`pf-t--chart--color--blue--100`	Dark: Default:
	`pf-t--chart--color--blue--200`	Dark: Default:
	`pf-t--chart--color--blue--300`	Dark: Default:
	`pf-t--chart--color--blue--400`	Dark: Default:
	`pf-t--chart--color--blue--500`	Dark: Default:
	`pf-t--chart--color--green--100`	Dark: Default:
	`pf-t--chart--color--green--200`	Dark: Default:
	`pf-t--chart--color--green--300`	Dark: Default:
	`pf-t--chart--color--green--400`	Dark: Default:
	`pf-t--chart--color--green--500`	Dark: Default:
	`pf-t--chart--color--teal--100`	Dark: Default:
	`pf-t--chart--color--teal--200`	Dark: Default:
	`pf-t--chart--color--teal--300`	Dark: Default:
	`pf-t--chart--color--teal--400`	Dark: Default:
	`pf-t--chart--color--teal--500`	Dark: Default:
	`pf-t--chart--color--purple--100`	Dark: Default:
	`pf-t--chart--color--purple--200`	Dark: Default:
	`pf-t--chart--color--purple--300`	Dark: Default:
	`pf-t--chart--color--purple--400`	Dark: Default:
	`pf-t--chart--color--purple--500`	Dark: Default:
	`pf-t--chart--color--yellow--100`	Dark: Default:
	`pf-t--chart--color--yellow--200`	Dark: Default:
	`pf-t--chart--color--yellow--300`	Dark: Default:
	`pf-t--chart--color--yellow--400`	Dark: Default:
	`pf-t--chart--color--yellow--500`	Dark: Default:
	`pf-t--chart--color--orange--100`	Dark: Default:
	`pf-t--chart--color--orange--200`	Dark: Default:
	`pf-t--chart--color--orange--300`	Dark: Default:
	`pf-t--chart--color--orange--400`	Dark: Default:
	`pf-t--chart--color--orange--500`	Dark: Default:
	`pf-t--chart--color--red-orange--100`	Dark: Default:
	`pf-t--chart--color--red-orange--200`	Dark: Default:
	`pf-t--chart--color--red-orange--300`	Dark: Default:
	`pf-t--chart--color--red-orange--400`	Dark: Default:
	`pf-t--chart--color--red-orange--500`	Dark: Default:
	`pf-t--chart--color--black--100`	Dark: Default:
	`pf-t--chart--color--black--200`	Dark: Default:
	`pf-t--chart--color--black--300`	Dark: Default:
	`pf-t--chart--color--black--400`	Dark: Default:
	`pf-t--chart--color--black--500`	Dark: Default:
	`pf-t--chart--global--BorderWidth--xs`	Dark: 1 Default: 1
	`pf-t--chart--global--BorderWidth--sm`	Dark: 2 Default: 2
	`pf-t--chart--global--BorderWidth--lg`	Dark: 8 Default: 8
	`pf-t--chart--global--stroke--width--xs`	Dark: 1 Default: 1
	`pf-t--chart--global--stroke--width--sm`	Dark: 2 Default: 2
	`pf-t--chart--global--fill--color--100`	Dark: Default:
	`pf-t--chart--global--fill--color--200`	Dark: Default:
	`pf-t--chart--global--fill--color--300`	Dark: Default:
	`pf-t--chart--global--fill--color--400`	Dark: Default:
	`pf-t--chart--global--fill--color--500`	Dark: Default:
	`pf-t--chart--global--fill--color--700`	Dark: Default:
	`pf-t--chart--global--fill--color--900`	Dark: Default:
	`pf-t--chart--global--fill--color--white`	Dark: Default:
	`pf-t--chart--global--warning--color--100`	Dark: Default:
	`pf-t--chart--global--warning--color--200`	Dark: Default:
	`pf-t--chart--global--success--color--100`	Dark: Default:
	`pf-t--chart--global--danger--color--100`	Dark: Default:
	`pf-t--chart--global--FontSize--xs`	Dark: 12 Default: 12
	`pf-t--chart--global--FontSize--sm`	Dark: 14 Default: 14
	`pf-t--chart--global--FontSize--lg`	Dark: 18 Default: 18
	`pf-t--chart--global--FontSize--2xl`	Dark: 22 Default: 22
	`pf-t--chart--global--letter-spacing`	Dark: normal Default: normal
	`pf-t--chart--global--stroke-line-cap`	Dark: round Default: round
	`pf-t--chart--global--label--padding`	Dark: 10 Default: 10
	`pf-t--chart--global--label--margin`	Dark: 8 Default: 8
	`pf-t--chart--global--label--stroke`	Dark: transparent Default: transparent
	`pf-t--chart--global--label--text-anchor`	Dark: middle Default: middle
	`pf-t--chart--global--label--fill`	Dark: Default:
	`pf-t--chart--global--layout--padding`	Dark: 50 Default: 50
	`pf-t--chart--global--layout--height`	Dark: 300 Default: 300
	`pf-t--chart--global--layout--width`	Dark: 450 Default: 450
	`pf-t--chart--global--stroke-line-join`	Dark: round Default: round
	`pf-t--chart--theme--colorscales--blue--colorscale--100`	Dark: Default:
	`pf-t--chart--theme--colorscales--blue--colorscale--200`	Dark: Default:
	`pf-t--chart--theme--colorscales--blue--colorscale--300`	Dark: Default:
	`pf-t--chart--theme--colorscales--blue--colorscale--400`	Dark: Default:
	`pf-t--chart--theme--colorscales--blue--colorscale--500`	Dark: Default:
	`pf-t--chart--theme--colorscales--teal--colorscale--100`	Dark: Default:
	`pf-t--chart--theme--colorscales--teal--colorscale--200`	Dark: Default:
	`pf-t--chart--theme--colorscales--teal--colorscale--300`	Dark: Default:
	`pf-t--chart--theme--colorscales--teal--colorscale--400`	Dark: Default:
	`pf-t--chart--theme--colorscales--teal--colorscale--500`	Dark: Default:
	`pf-t--chart--theme--colorscales--yellow--colorscale--100`	Dark: Default:
	`pf-t--chart--theme--colorscales--yellow--colorscale--200`	Dark: Default:
	`pf-t--chart--theme--colorscales--yellow--colorscale--300`	Dark: Default:
	`pf-t--chart--theme--colorscales--yellow--colorscale--400`	Dark: Default:
	`pf-t--chart--theme--colorscales--yellow--colorscale--500`	Dark: Default:
	`pf-t--chart--theme--colorscales--gray--colorscale--100`	Dark: Default:
	`pf-t--chart--theme--colorscales--gray--colorscale--200`	Dark: Default:
	`pf-t--chart--theme--colorscales--gray--colorscale--300`	Dark: Default:
	`pf-t--chart--theme--colorscales--gray--colorscale--400`	Dark: Default:
	`pf-t--chart--theme--colorscales--gray--colorscale--500`	Dark: Default:
	`pf-t--chart--theme--colorscales--green--colorscale--100`	Dark: Default:
	`pf-t--chart--theme--colorscales--green--colorscale--200`	Dark: Default:
	`pf-t--chart--theme--colorscales--green--colorscale--300`	Dark: Default:
	`pf-t--chart--theme--colorscales--green--colorscale--400`	Dark: Default:
	`pf-t--chart--theme--colorscales--green--colorscale--500`	Dark: Default:
	`pf-t--chart--theme--colorscales--purple--colorscale--100`	Dark: Default:
	`pf-t--chart--theme--colorscales--purple--colorscale--200`	Dark: Default:
	`pf-t--chart--theme--colorscales--purple--colorscale--300`	Dark: Default:
	`pf-t--chart--theme--colorscales--purple--colorscale--400`	Dark: Default:
	`pf-t--chart--theme--colorscales--purple--colorscale--500`	Dark: Default:
	`pf-t--chart--theme--colorscales--orange--colorscale--100`	Dark: Default:
	`pf-t--chart--theme--colorscales--orange--colorscale--200`	Dark: Default:
	`pf-t--chart--theme--colorscales--orange--colorscale--300`	Dark: Default:
	`pf-t--chart--theme--colorscales--orange--colorscale--400`	Dark: Default:
	`pf-t--chart--theme--colorscales--orange--colorscale--500`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--100`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--200`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--300`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--400`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--500`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--600`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--700`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--800`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--900`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1000`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1100`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1200`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1300`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1400`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1500`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1600`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1700`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1800`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--1900`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2000`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2100`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2200`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2300`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2400`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-ordered--colorscale--2500`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--100`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--200`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--300`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--400`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--500`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--600`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--700`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--800`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--900`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1000`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1100`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1200`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1300`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1400`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1500`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1600`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1700`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1800`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--1900`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2000`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2100`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2200`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2300`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2400`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2500`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2600`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2700`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2800`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--2900`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3000`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3100`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3200`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3300`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3400`	Dark: Default:
	`pf-t--chart--theme--colorscales--multi-colored-unordered--colorscale--3500`	Dark: Default:

View source on GitHub