PatternFly Elements
Palette custom variables
Custom palette variables
These variables are the global hooks to override colors, fonts, spacing and more throughout the library of web components. Generally this is all you need, though component specific variables are also available. Feel free to copy this list and define the values needed for your site or application. Please note that the logo URL paths are empty here.
Color variables
| Name | Project default |
|---|---|
--pfe-theme--color--text |
#151515 |
--pfe-theme--color--text--muted |
#6a6e73 |
--pfe-theme--color--link |
#06c |
--pfe-theme--color--link--visited |
#6753ac |
--pfe-theme--color--link--hover |
#004080 |
--pfe-theme--color--link--focus |
#004080 |
--pfe-theme--color--text--on-dark |
#fff |
--pfe-theme--color--text--muted--on-dark |
#d2d2d2 |
--pfe-theme--color--link--on-dark |
#73bcf7 |
--pfe-theme--color--link--visited--on-dark |
#bee1f4 |
--pfe-theme--color--link--hover--on-dark |
#bee1f4 |
--pfe-theme--color--link--focus--on-dark |
#bee1f4 |
--pfe-theme--color--text--on-saturated |
#fff |
--pfe-theme--color--text--muted--on-saturated |
#d2d2d2 |
--pfe-theme--color--link--on-saturated |
#fff |
--pfe-theme--color--link--visited--on-saturated |
#8476d1 |
--pfe-theme--color--link--hover--on-saturated |
#fafafa |
--pfe-theme--color--link--focus--on-saturated |
#fafafa |
--pfe-theme--color--ui-base |
#6a6e73 |
--pfe-theme--color--ui-base--hover |
#151515 |
--pfe-theme--color--ui-base--focus |
#151515 |
--pfe-theme--color--ui-base--text |
#fff |
--pfe-theme--color--ui-base--text--hover |
#fff |
--pfe-theme--color--ui-base--text--focus |
#fff |
--pfe-theme--color--ui-base--on-dark |
#fff |
--pfe-theme--color--ui-base--hover--on-dark |
#f0f0f0 |
--pfe-theme--color--ui-base--focus--on-dark |
#f0f0f0 |
--pfe-theme--color--ui-base--text--on-dark |
#3c3f42 |
--pfe-theme--color--ui-base--text--hover--on-dark |
#3c3f42 |
--pfe-theme--color--ui-base--text--focus--on-dark |
#3c3f42 |
--pfe-theme--color--ui-base--on-saturated |
#fff |
--pfe-theme--color--ui-base--hover--on-saturated |
#f0f0f0 |
--pfe-theme--color--ui-base--focus--on-saturated |
#f0f0f0 |
--pfe-theme--color--ui-base--text--on-saturated |
#3c3f42 |
--pfe-theme--color--ui-base--text--hover--on-saturated |
#3c3f42 |
--pfe-theme--color--ui-base--text--focus--on-saturated |
#3c3f42 |
--pfe-theme--color--ui-accent |
#06c |
--pfe-theme--color--ui-accent--hover |
#004080 |
--pfe-theme--color--ui-accent--focus |
#004080 |
--pfe-theme--color--ui-accent--text |
#fff |
--pfe-theme--color--ui-accent--text--hover |
#fff |
--pfe-theme--color--ui-accent--text--focus |
#fff |
--pfe-theme--color--ui-accent--on-dark |
#73bcf7 |
--pfe-theme--color--ui-accent--hover--on-dark |
#2b9af3 |
--pfe-theme--color--ui-accent--focus--on-dark |
#2b9af3 |
--pfe-theme--color--ui-accent--text--on-dark |
#3c3f42 |
--pfe-theme--color--ui-accent--text--hover--on-dark |
#3c3f42 |
--pfe-theme--color--ui-accent--text--focus--on-dark |
#3c3f42 |
--pfe-theme--color--ui-accent--on-saturated |
#fff |
--pfe-theme--color--ui-accent--hover--on-saturated |
#cccccc |
--pfe-theme--color--ui-accent--focus--on-saturated |
#cccccc |
--pfe-theme--color--ui-accent--text--on-saturated |
#3c3f42 |
--pfe-theme--color--ui-accent--text--hover--on-saturated |
#3c3f42 |
--pfe-theme--color--ui-accent--text--focus--on-saturated |
#3c3f42 |
--pfe-theme--color--ui-disabled |
#d2d2d2 |
--pfe-theme--color--ui-disabled--hover |
#d2d2d2 |
--pfe-theme--color--ui-disabled--focus |
transparent |
--pfe-theme--color--ui-disabled--text |
#6a6e73 |
--pfe-theme--color--ui-disabled--text--hover |
#797979 |
--pfe-theme--color--ui-disabled--text--focus |
#797979 |
--pfe-theme--color--surface--lightest |
#fff |
--pfe-theme--color--surface--lightest--theme |
light |
--pfe-theme--color--surface--lighter |
#f0f0f0 |
--pfe-theme--color--surface--lighter--theme |
light |
--pfe-theme--color--surface--base |
#f0f0f0 |
--pfe-theme--color--surface--base--theme |
light |
--pfe-theme--color--surface--darker |
#3c3f42 |
--pfe-theme--color--surface--darker--theme |
dark |
--pfe-theme--color--surface--darkest |
#151515 |
--pfe-theme--color--surface--darkest--theme |
dark |
--pfe-theme--color--surface--complement |
#002952 |
--pfe-theme--color--surface--complement--theme |
saturated |
--pfe-theme--color--surface--accent |
#004080 |
--pfe-theme--color--surface--accent--theme |
saturated |
--pfe-theme--color--surface--border--lightest |
#f5f5f5 |
--pfe-theme--color--surface--border |
#d2d2d2 |
--pfe-theme--color--surface--border--darker |
#6a6e73 |
--pfe-theme--color--surface--border--darkest |
#3c3f42 |
--pfe-theme--color--feedback--critical--lightest |
#faeae8 |
--pfe-theme--color--feedback--critical |
#bb0000 |
--pfe-theme--color--feedback--critical--darkest |
#550000 |
--pfe-theme--color--feedback--important--lightest |
#ffe1d8 |
--pfe-theme--color--feedback--important |
#d73401 |
--pfe-theme--color--feedback--important--darkest |
#721b00 |
--pfe-theme--color--feedback--moderate--lightest |
#fffbf0 |
--pfe-theme--color--feedback--moderate |
#ffc024 |
--pfe-theme--color--feedback--moderate--darkest |
#8a6200 |
--pfe-theme--color--feedback--success--lightest |
#f7fcec |
--pfe-theme--color--feedback--success |
#2e7d32 |
--pfe-theme--color--feedback--success--darkest |
#1b5e20 |
--pfe-theme--color--feedback--info--lightest |
white |
--pfe-theme--color--feedback--info |
#0277bd |
--pfe-theme--color--feedback--info--darkest |
#01579b |
--pfe-theme--color--feedback--default--lightest |
#f0f0f0 |
--pfe-theme--color--feedback--default |
#4f5255 |
--pfe-theme--color--feedback--default--darkest |
#3c3f42 |
--pfe-theme--color--overlay |
rgba(21, 21, 21, 0.5) |
Other variables
| Name | Project default |
|---|---|
--pfe-theme--container-spacer |
16px |
--pfe-theme--container-padding |
16px |
--pfe-theme--content-spacer |
24px |
--pfe-theme--font-size |
16px |
--pfe-theme--line-height |
1.5 |
--pfe-theme--font-family |
"Overpass", Overpass, Helvetica, helvetica, arial, sans-serif |
--pfe-theme--font-family--heading |
"Overpass", Overpass, Helvetica, helvetica, arial, sans-serif |
--pfe-theme--font-family--code |
"Overpass Mono", Consolas, Monaco, Andale Mono , monospace |
--pfe-theme--font-size--heading--alpha |
32px |
--pfe-theme--font-size--heading--beta |
24px |
--pfe-theme--font-size--heading--gamma |
21px |
--pfe-theme--font-size--heading--delta |
18px |
--pfe-theme--font-size--heading--epsilon |
16px |
--pfe-theme--font-size--heading--zeta |
14px |
--pfe-theme--font-weight--light |
300 |
--pfe-theme--font-weight--normal |
500 |
--pfe-theme--font-weight--semi-bold |
600 |
--pfe-theme--font-weight--bold |
700 |
--pfe-theme--surface--border-width |
1px |
--pfe-theme--surface--border-width--heavy |
4px |
--pfe-theme--surface--border-style |
solid |
--pfe-theme--surface--border-radius |
3px |
--pfe-theme--surface--border-width--active |
3px |
--pfe-theme--surface--border-width--color |
#151515 |
--pfe-theme--icon-size |
1em |
--pfe-theme--ui--element--size |
20px |
--pfe-theme--ui--border-width |
1px |
--pfe-theme--ui--border-width--active |
3px |
--pfe-theme--ui--border-style |
solid |
--pfe-theme--ui--border-radius |
2px |
--pfe-theme--ui--focus-outline-width |
1px |
--pfe-theme--ui--focus-outline-style |
solid |
--pfe-theme--link-decoration |
none |
--pfe-theme--link-decoration--hover |
underline |
--pfe-theme--link-decoration--focus |
underline |
--pfe-theme--link-decoration--visited |
none |
--pfe-theme--link-decoration--on-dark |
none |
--pfe-theme--link-decoration--hover--on-dark |
underline |
--pfe-theme--link-decoration--focus--on-dark |
underline |
--pfe-theme--link-decoration--visited--on-dark |
none |
--pfe-theme--link-decoration--on-saturated |
underline |
--pfe-theme--link-decoration--hover--on-saturated |
underline |
--pfe-theme--link-decoration--focus--on-saturated |
underline |
--pfe-theme--link-decoration--visited--on-saturated |
underline |
--pfe-theme--grid-breakpoint--xs |
0 |
--pfe-theme--grid-breakpoint--sm |
576px |
--pfe-theme--grid-breakpoint--md |
768px |
--pfe-theme--grid-breakpoint--lg |
992px |
--pfe-theme--grid-breakpoint--xl |
1200px |
--pfe-theme--box-shadow--sm |
0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.2) |
--pfe-theme--box-shadow--md |
0 0.125rem 0.0625rem 0.0625rem rgba(3, 3, 3, 0.12), 0 0.25rem 0.6875rem 0.375rem rgba(3, 3, 3, 0.05) |
--pfe-theme--box-shadow--lg |
0 0.1875rem 0.4375rem 0.1875rem rgba(3, 3, 3, 0.13), 0 0.6875rem 1.5rem 1rem rgba(3, 3, 3, 0.12) |
--pfe-theme--box-shadow--inset |
inset 0 0 0.625rem 0 #fafafa |
--pfe-theme--animation-speed |
0.3s |
--pfe-theme--animation-timing |
cubic-bezier(0.465, 0.183, 0.153, 0.946) |
--pfe-theme--opacity |
0.09 |
--pfe-theme--modal |
99 |
--pfe-theme--navigation |
98 |
--pfe-theme--overlay |
97 |
--pfe-theme--content |
0 |