All design tokens

Semantic tokens (Default theme | Light | Default contrast)

1 - 20 of 563
NameValueDescription
--pf-t--global--icon--color--brand--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
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
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
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
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
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
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
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
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
Use as the default color for text that communicates a success status.
--pf-t--global--icon--color--status--success--hover
Use as the hover state color for text that communicates a success status.
--pf-t--global--icon--color--status--success--clicked
Use as the clicked state color for text that communicates a success status.
--pf-t--global--icon--color--status--on-success--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
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
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
Use as the default color for text that communicates a warning status.
--pf-t--global--icon--color--status--warning--hover
Use as the hover state color for text that communicates a warning status.
--pf-t--global--icon--color--status--warning--clicked
Use as the clicked state color for text that communicates a warning status.
--pf-t--global--icon--color--status--on-warning--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
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