PatternFly Elements - Home PatternFly Elements v2 prerelease v1

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