PatternFlyElements

    List of theme palette variables

    These variables are 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.

    If you have the project checked out locally, open up: pfe-styles/_temp/pfe-colors.css

    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