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