All PatternFly tokens

Semantic tokens

NameValueDescription
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

NameValue
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: