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.

    Variable name Type Project default
    --pfe-theme--color--ui-base Color #0477a4
    --pfe-theme--color--ui-base--hover Color #022f40
    --pfe-theme--color--ui-base--focus Color #022f40
    --pfe-theme--color--ui-base--text Color #ffffff
    --pfe-theme--color--ui-base--text--hover Color #ffffff
    --pfe-theme--color--ui-base--text--focus Color #ffffff
    --pfe-theme--color--ui-complement Color #464646
    --pfe-theme--color--ui-complement--text Color #ffffff
    --pfe-theme--color--ui-complement--hover Color #131313
    --pfe-theme--color--ui-complement--text--hover Color #ffffff
    --pfe-theme--color--ui-accent Color #e00
    --pfe-theme--color--ui-accent--hover Color #880000
    --pfe-theme--color--ui-accent--focus Color #880000
    --pfe-theme--color--ui-accent--text Color #ffffff
    --pfe-theme--color--ui-accent--text--hover Color #ffffff
    --pfe-theme--color--ui-accent--text--focus Color #ffffff
    --pfe-theme--color--ui-disabled Color #d2d2d2
    --pfe-theme--color--ui-disabled--hover Color #d2d2d2
    --pfe-theme--color--ui-disabled--text Color #797979
    --pfe-theme--color--ui-disabled--text--hover Color #797979
    --pfe-theme--color--ui-disabled--text--focus Color #797979
    --pfe-theme--color--surface--lightest Color #ffffff
    --pfe-theme--color--surface--lightest--theme Theme descriptions (light, dark, saturated) light
    --pfe-theme--color--surface--lighter Color #ececec
    --pfe-theme--color--surface--lighter--theme Theme descriptions light
    --pfe-theme--color--surface--base Color #dfdfdf
    --pfe-theme--color--surface--base--theme Theme descriptions light
    --pfe-theme--color--surface--darker Color #464646
    --pfe-theme--color--surface--darker--theme Theme descriptions dark
    --pfe-theme--color--surface--darkest Color #131313
    --pfe-theme--color--surface--darkest--theme Theme descriptions dark
    --pfe-theme--color--surface--complement Color #0477a4
    --pfe-theme--color--surface--complement--theme Theme descriptions saturated
    --pfe-theme--color--surface--accent Color #e00
    --pfe-theme--color--surface--accent--theme Theme descriptions saturated
    --pfe-theme--ui--border-width Size 1px
    --pfe-theme--ui--border-style Border settings solid
    --pfe-theme--ui--border-radius Size 2px
    --pfe-theme--surface--border-width Size 1px
    --pfe-theme--surface--border-width--heavy Size 4px
    --pfe-theme--surface--border-style Border settings solid
    --pfe-theme--surface--border-radius Size 3px
    --pfe-theme--surface--border--lightest Color #b5b5b5
    --pfe-theme--surface--border--lighter Color #b5b5b5
    --pfe-theme--surface--border Color #d2d2d2
    --pfe-theme--surface--border--darker Color #dfdfdf
    --pfe-theme--surface--border--darkest Color #a8a8a8
    --pfe-theme--container-spacer Size 16px
    --pfe-theme--container-padding Size 16px
    --pfe-theme--content-spacer Size 24px
    --pfe-theme--animation-timing Animation settings cubic-bezier(0.465, 0.183, 0.153, 0.946)
    --pfe-theme--box-shadow--sm Box shadow 0 pfe-size-prem(1) pfe-size-prem(2) 0 rgba(19, 19, 19, 0.2)
    --pfe-theme--box-shadow--md Box shadow var(–pfe-theme–box-shadow–md, 0 0.125rem 0.0625rem 0.0625rem rgba(19, 19, 19, 0.12), 0 0.25rem 0.6875rem 0.375rem rgba(19, 19, 19, 0.05))
    --pfe-theme--box-shadow--lg Box shadow var(–pfe-theme–box-shadow–lg, 0 0.1875rem 0.4375rem 0.1875rem rgba(19, 19, 19, 0.13), 0 0.6875rem 1.5rem 1rem rgba(19, 19, 19, 0.12))
    --pfe-theme--box-shadow--inset Box shadow var(–pfe-theme–box-shadow–inset, inset 0 0 0.625rem 0 #f3f3f3)
    --pfe-theme--zindex--modal Number 99
    --pfe-theme--zindex--navigation Number 98
    --pfe-theme--zindex--content Number 0
    --pfe-theme--font-size--heading--alpha Size 32px
    --pfe-theme--font-size--heading--beta Size 24px
    --pfe-theme--font-size--heading--gamma Size 21px
    --pfe-theme--font-size--heading--delta Size 18px
    --pfe-theme--font-size--heading--epsilon Size 16px
    --pfe-theme--font-size--heading--zeta Size 14px
    --pfe-theme--font-size Size 16px
    --pfe-theme--line-height Line-height 1.5
    --pfe-theme--font-weight--light Font weight 300
    --pfe-theme--font-weight--normal Font weight 500
    --pfe-theme--font-weight--semi-bold Font weight 600
    --pfe-theme--font-weight--bold Font weight 700
    --pfe-theme--font-family Font “Overpass”, Overpass, Helvetica, helvetica, arial, sans-serif
    --pfe-theme--font-family--heading Font “Overpass”, Overpass, Helvetica, helvetica, arial, sans-serif
    --pfe-theme--font-family--code Font “Overpass Mono”, Consolas, Monaco, ‘Andale Mono’, monospace
    --pfe-theme--color--text Color #333333
    --pfe-theme--color--text--on-dark Color #fff
    --pfe-theme--color--text--on-saturated Color #eee
    --pfe-theme--color--link Color #0066cc
    --pfe-theme--color--link--hover Color #004080
    --pfe-theme--color--link--focus Color #004080
    --pfe-theme--color--link--visited Color #0066cc
    --pfe-theme--color--link--on-dark Color #73bcf7
    --pfe-theme--color--link--hover--on-dark Color #2b9af3
    --pfe-theme--color--link--focus--on-dark Color #2b9af3
    --pfe-theme--color--link--visited--on-dark Color #73bcf7
    --pfe-theme--color--link--on-saturated Color #ffffff
    --pfe-theme--color--link--hover--on-saturated Color #d2d3d5
    --pfe-theme--color--link--focus--on-saturated Color #d2d3d5
    --pfe-theme--color--link--visited--on-saturated Color #ffffff
    --pfe-theme--link-decoration Text decoration none
    --pfe-theme--link-decoration--hover Text decoration underline
    --pfe-theme--link-decoration--focus Text decoration underline
    --pfe-theme--link-decoration--visited Text decoration none
    --pfe-theme--link-decoration--on-dark Text decoration none
    --pfe-theme--link-decoration--hover--on-dark Text decoration underline
    --pfe-theme--link-decoration--focus--on-dark Text decoration underline
    --pfe-theme--link-decoration--visited--on-dark Text decoration none
    --pfe-theme--link-decoration--on-saturated Text decoration underline
    --pfe-theme--link-decoration--hover--on-saturated Text decoration underline
    --pfe-theme--link-decoration--focus--on-saturated Text decoration underline
    --pfe-theme--link-decoration--visited--on-saturated Text decoration underline