HTML/React

Global CSS variables

About CSS variablesGlobal CSS variables

About CSS variables

The CSS variable system is a two-layer theming system where global variables inform component variables.

Global variables

Global variables define and enforce global style elements (like values for color, spacing, and font size) across the entire system.

Global variables follow this formula:

--pf-global--concept--PropertyCamelCase--modifier--state

Where...

  • A concept is something like a spacer or main-title.
  • A PropertyCamelCase is something like BackgroundColor or FontSize.
  • A modifier is something like sm or lg.
  • A state is something like hover or expanded.

Component variables

Component variables are used to define custom properties at the component-level. Component variables are always defined by global variables.

Component variables follow this formula:

--pf-c-block__element--modifier--state--breakpoint--pseudo-element--PropertyCamelCase

Where...

  • pf-c-block refers to the block, usually the component or layout name, like pf-c-alert.
  • __element refers to the element inside of the block, like __title.
  • modifier is prefixed with-m and refers to a modifier class such as .pf-m-danger.
  • state is something like hover or active.
  • breakpoint is a media query breakpoint such as sm for $pf-global--breakpoint--xs.
  • pseudo-element is either before or after.

Using the variable system

PatternFly 4 styles provide a default starting point. You can use the variable system to make adjustments to that default styling. When you change one or more elements, you should package those values into a new SCSS stylesheet to replace the default styling.

Global CSS variables

--pf-chart-global--BorderWidth--lgchart_global_BorderWidth_lg
8
--pf-chart-global--BorderWidth--smchart_global_BorderWidth_sm
2
--pf-chart-global--BorderWidth--xschart_global_BorderWidth_xs
1
--pf-chart-global--danger--Color--100chart_global_danger_Color_100
#c9190b
--pf-chart-global--Fill--Color--200chart_global_Fill_Color_200
#ededed
--pf-chart-global--Fill--Color--300chart_global_Fill_Color_300
#d2d2d2
--pf-chart-global--Fill--Color--400chart_global_Fill_Color_400
#b8bbbe
--pf-chart-global--Fill--Color--500chart_global_Fill_Color_500
#8a8d90
--pf-chart-global--Fill--Color--700chart_global_Fill_Color_700
#4f5255
--pf-chart-global--Fill--Color--900chart_global_Fill_Color_900
#151515
--pf-chart-global--Fill--Color--whitechart_global_Fill_Color_white
#fff
--pf-chart-global--FontFamilychart_global_FontFamily
overpass, overpass, open sans, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
--pf-chart-global--FontSize--2xlchart_global_FontSize_2xl
24
--pf-chart-global--FontSize--lgchart_global_FontSize_lg
18
--pf-chart-global--FontSize--smchart_global_FontSize_sm
14
--pf-chart-global--FontSize--xschart_global_FontSize_xs
12
--pf-chart-global--label--Fillchart_global_label_Fill
#151515
--pf-chart-global--label--Marginchart_global_label_Margin
8
--pf-chart-global--label--Paddingchart_global_label_Padding
10
--pf-chart-global--label--strokechart_global_label_stroke
transparent
--pf-chart-global--label--stroke--Widthchart_global_label_stroke_Width
0
--pf-chart-global--label--text-anchorchart_global_label_text_anchor
middle
--pf-chart-global--layout--Heightchart_global_layout_Height
300
--pf-chart-global--layout--Paddingchart_global_layout_Padding
50
--pf-chart-global--layout--Widthchart_global_layout_Width
450
--pf-chart-global--letter-spacingchart_global_letter_spacing
normal
--pf-chart-global--stroke-line-capchart_global_stroke_line_cap
round
--pf-chart-global--stroke-line-joinchart_global_stroke_line_join
round
--pf-chart-global--stroke--Width--smchart_global_stroke_Width_sm
2
--pf-chart-global--stroke--Width--xschart_global_stroke_Width_xs
1
--pf-chart-global--success--Color--100chart_global_success_Color_100
#06c
--pf-chart-global--warning--Color--100chart_global_warning_Color_100
#ec7a08
--pf-chart-global--warning--Color--200chart_global_warning_Color_200
#f0ab00
--pf-global--active-color--100global_active_color_100
#06c
--pf-global--active-color--200global_active_color_200
#bee1f4
--pf-global--active-color--300global_active_color_300
#73bcf7
--pf-global--active-color--400global_active_color_400
#2b9af3
--pf-global--arrow--widthglobal_arrow_width
0.9375rem
--pf-global--arrow--width-lgglobal_arrow_width_lg
1.5625rem
--pf-global--BackgroundColor--100global_BackgroundColor_100
#fff
--pf-global--BackgroundColor--150global_BackgroundColor_150
#f5f5f5
--pf-global--BackgroundColor--200global_BackgroundColor_200
#fafafa
--pf-global--BackgroundColor--300global_BackgroundColor_300
#ededed
--pf-global--BackgroundColor--dark-100global_BackgroundColor_dark_100
#151515
--pf-global--BackgroundColor--dark-200global_BackgroundColor_dark_200
#3c3f42
--pf-global--BackgroundColor--dark-300global_BackgroundColor_dark_300
#212427
--pf-global--BackgroundColor--dark-400global_BackgroundColor_dark_400
#4f5255
--pf-global--BackgroundColor--dark-transparent-100global_BackgroundColor_dark_transparent_100
rgba(3,3,3,0.62)
--pf-global--BackgroundColor--dark-transparent-200global_BackgroundColor_dark_transparent_200
rgba(3,3,3,0.32)
--pf-global--BackgroundColor--light-100global_BackgroundColor_light_100
#fff
--pf-global--BackgroundColor--light-200global_BackgroundColor_light_200
#fafafa
--pf-global--BackgroundColor--light-300global_BackgroundColor_light_300
#ededed
--pf-global--BorderColor--100global_BorderColor_100
#d2d2d2
--pf-global--BorderColor--200global_BorderColor_200
#8a8d90
--pf-global--BorderColor--300global_BorderColor_300
#ededed
--pf-global--BorderColor--dark-100global_BorderColor_dark_100
#d2d2d2
--pf-global--BorderColor--light-100global_BorderColor_light_100
#b8bbbe
--pf-global--BorderRadius--lgglobal_BorderRadius_lg
30em
--pf-global--BorderRadius--smglobal_BorderRadius_sm
3px
--pf-global--BorderWidth--lgglobal_BorderWidth_lg
3px
--pf-global--BorderWidth--mdglobal_BorderWidth_md
2px
--pf-global--BorderWidth--smglobal_BorderWidth_sm
1px
--pf-global--BoxShadow--insetglobal_BoxShadow_inset
inset 0 0 0.625rem 0 rgba(3,3,3,0.25)
--pf-global--BoxShadow--lgglobal_BoxShadow_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)
--pf-global--BoxShadow--lg-bottomglobal_BoxShadow_lg_bottom
0 0.75rem 0.625rem -0.25rem rgba(3,3,3,0.07)
--pf-global--BoxShadow--lg-leftglobal_BoxShadow_lg_left
-0.75rem 0 0.625rem -0.25rem rgba(3,3,3,0.07)
--pf-global--BoxShadow--lg-rightglobal_BoxShadow_lg_right
0.75rem 0 0.625rem -0.25rem rgba(3,3,3,0.07)
--pf-global--BoxShadow--lg-topglobal_BoxShadow_lg_top
0 -0.75rem 0.625rem -0.25rem rgba(3,3,3,0.07)
--pf-global--BoxShadow--mdglobal_BoxShadow_md
0 0.0625rem 0.0625rem 0rem rgba(3,3,3,0.05),0 0.25rem 0.5rem 0.25rem rgba(3,3,3,0.06)
--pf-global--BoxShadow--md-bottomglobal_BoxShadow_md_bottom
0 0.3125rem 0.625rem -0.25rem rgba(3,3,3,0.25)
--pf-global--BoxShadow--md-leftglobal_BoxShadow_md_left
-0.3125rem 0 0.625rem -0.25rem rgba(3,3,3,0.25)
--pf-global--BoxShadow--md-rightglobal_BoxShadow_md_right
0.3125rem 0 0.625rem -0.25rem rgba(3,3,3,0.25)
--pf-global--BoxShadow--md-topglobal_BoxShadow_md_top
0 -0.3125rem 0.625rem -0.25rem rgba(3,3,3,0.25)
--pf-global--BoxShadow--smglobal_BoxShadow_sm
0 0.0625rem 0.125rem 0 rgba(3,3,3,0.2)
--pf-global--BoxShadow--sm-bottomglobal_BoxShadow_sm_bottom
0 0.25rem 0.625rem -0.25rem rgba(3,3,3,0.12)
--pf-global--BoxShadow--sm-leftglobal_BoxShadow_sm_left
-0.25rem 0 0.625rem -0.25rem rgba(3,3,3,0.12)
--pf-global--BoxShadow--sm-rightglobal_BoxShadow_sm_right
0.25rem 0 0.625rem -0.25rem rgba(3,3,3,0.12)
--pf-global--BoxShadow--sm-topglobal_BoxShadow_sm_top
0 -0.25rem 0.625rem -0.25rem rgba(3,3,3,0.12)
--pf-global--breakpoint--2xlglobal_breakpoint_2xl
1450px
--pf-global--breakpoint--lgglobal_breakpoint_lg
992px
--pf-global--breakpoint--mdglobal_breakpoint_md
768px
--pf-global--breakpoint--smglobal_breakpoint_sm
576px
--pf-global--breakpoint--xlglobal_breakpoint_xl
1200px
--pf-global--breakpoint--xsglobal_breakpoint_xs
0
--pf-global--Color--100global_Color_100
#151515
--pf-global--Color--200global_Color_200
#737679
--pf-global--Color--300global_Color_300
#3c3f42
--pf-global--Color--400global_Color_400
#8a8d90
--pf-global--Color--dark-100global_Color_dark_100
#151515
--pf-global--Color--dark-200global_Color_dark_200
#737679
--pf-global--Color--light-100global_Color_light_100
#fff
--pf-global--Color--light-200global_Color_light_200
#ededed
--pf-global--Color--light-300global_Color_light_300
#d2d2d2
--pf-global--danger-color--100global_danger_color_100
#c9190b
--pf-global--danger-color--200global_danger_color_200
#a30000
--pf-global--danger-color--300global_danger_color_300
#470000
--pf-global--default-color--100global_default_color_100
#73c5c5
--pf-global--default-color--200global_default_color_200
#009596
--pf-global--default-color--300global_default_color_300
#003737
--pf-global--disabled-color--100global_disabled_color_100
#737679
--pf-global--disabled-color--200global_disabled_color_200
#d2d2d2
--pf-global--disabled-color--300global_disabled_color_300
#ededed
--pf-global--font-pathglobal_font_path
./assets/fonts
--pf-global--FontFamily--heading--sans-serifglobal_FontFamily_heading_sans_serif
RedHatDisplay,Overpass,overpass,helvetica,arial,sans-serif
--pf-global--FontFamily--monospaceglobal_FontFamily_monospace
Liberation Mono,consolas,SFMono-Regular,menlo,monaco,Courier New,monospace
--pf-global--FontFamily--redhatfont--heading--sans-serifglobal_FontFamily_redhatfont_heading_sans_serif
RedHatDisplay,Overpass,overpass,helvetica,arial,sans-serif
--pf-global--FontFamily--redhatfont--monospaceglobal_FontFamily_redhatfont_monospace
Liberation Mono,consolas,SFMono-Regular,menlo,monaco,Courier New,monospace
--pf-global--FontFamily--redhatfont--sans-serifglobal_FontFamily_redhatfont_sans_serif
RedHatText,Overpass,overpass,helvetica,arial,sans-serif
--pf-global--FontFamily--sans-serifglobal_FontFamily_sans_serif
RedHatText,Overpass,overpass,helvetica,arial,sans-serif
--pf-global--fonticon-pathglobal_fonticon_path
./assets/pficon
--pf-global--FontSize--2xlglobal_FontSize_2xl
1.5rem
--pf-global--FontSize--3xlglobal_FontSize_3xl
1.75rem
--pf-global--FontSize--4xlglobal_FontSize_4xl
2.25rem
--pf-global--FontSize--lgglobal_FontSize_lg
1.125rem
--pf-global--FontSize--mdglobal_FontSize_md
1rem
--pf-global--FontSize--smglobal_FontSize_sm
0.875rem
--pf-global--FontSize--xlglobal_FontSize_xl
1.25rem
--pf-global--FontSize--xsglobal_FontSize_xs
0.75rem
--pf-global--FontWeight--boldglobal_FontWeight_bold
700
--pf-global--FontWeight--lightglobal_FontWeight_light
300
--pf-global--FontWeight--normalglobal_FontWeight_normal
400
--pf-global--FontWeight--redhatfont--boldglobal_FontWeight_redhatfont_bold
700
--pf-global--FontWeight--semi-boldglobal_FontWeight_semi_bold
700
--pf-global--golden-ratioglobal_golden_ratio
1.681
--pf-global--gutterglobal_gutter
1.5rem
--pf-global--gutter--mdglobal_gutter_md
1rem
--pf-global--icon--Color--darkglobal_icon_Color_dark
#151515
--pf-global--icon--Color--lightglobal_icon_Color_light
#737679
--pf-global--icon--FontSize--lgglobal_icon_FontSize_lg
1.5rem
--pf-global--icon--FontSize--mdglobal_icon_FontSize_md
1.125rem
--pf-global--icon--FontSize--smglobal_icon_FontSize_sm
0.625rem
--pf-global--icon--FontSize--xlglobal_icon_FontSize_xl
3.375rem
--pf-global--info-color--100global_info_color_100
#73bcf7
--pf-global--info-color--200global_info_color_200
#004368
--pf-global--LineHeight--mdglobal_LineHeight_md
1.5
--pf-global--LineHeight--smglobal_LineHeight_sm
1.3
--pf-global--link--Colorglobal_link_Color
#004080
--pf-global--link--Color--darkglobal_link_Color_dark
#06c
--pf-global--link--Color--dark--hoverglobal_link_Color_dark_hover
#004080
--pf-global--link--Color--hoverglobal_link_Color_hover
#004080
--pf-global--link--Color--lightglobal_link_Color_light
#73bcf7
--pf-global--link--Color--light--hoverglobal_link_Color_light_hover
#2b9af3
--pf-global--link--FontWeightglobal_link_FontWeight
400
--pf-global--link--TextDecorationglobal_link_TextDecoration
underline
--pf-global--link--TextDecoration--hoverglobal_link_TextDecoration_hover
underline
--pf-global--ListStyleglobal_ListStyle
disc outside
--pf-global--primary-color--100global_primary_color_100
#06c
--pf-global--primary-color--200global_primary_color_200
#004080
--pf-global--primary-color--dark-100global_primary_color_dark_100
#06c
--pf-global--primary-color--light-100global_primary_color_light_100
#73bcf7
--pf-global--secondary-color--100global_secondary_color_100
#737679
--pf-global--spacer--2xlglobal_spacer_2xl
3rem
--pf-global--spacer--3xlglobal_spacer_3xl
4rem
--pf-global--spacer--form-elementglobal_spacer_form_element
0.375rem
--pf-global--spacer--lgglobal_spacer_lg
1.5rem
--pf-global--spacer--mdglobal_spacer_md
1rem
--pf-global--spacer--smglobal_spacer_sm
0.5rem
--pf-global--spacer--xlglobal_spacer_xl
2rem
--pf-global--spacer--xsglobal_spacer_xs
0.25rem
--pf-global--success-color--100global_success_color_100
#92d400
--pf-global--success-color--200global_success_color_200
#486b00
--pf-global--target-size--MinHeightglobal_target_size_MinHeight
44px
--pf-global--target-size--MinWidthglobal_target_size_MinWidth
44px
--pf-global--TimingFunctionglobal_TimingFunction
cubic-bezier(0.645,0.045,0.355,1)
--pf-global--Transitionglobal_Transition
all 250ms ease-in-out
--pf-global--TransitionDurationglobal_TransitionDuration
250ms
--pf-global--warning-color--100global_warning_color_100
#f0ab00
--pf-global--warning-color--200global_warning_color_200
#795600
--pf-global--ZIndex--2xlglobal_ZIndex_2xl
600
--pf-global--ZIndex--lgglobal_ZIndex_lg
400
--pf-global--ZIndex--mdglobal_ZIndex_md
300
--pf-global--ZIndex--smglobal_ZIndex_sm
200
--pf-global--ZIndex--xlglobal_ZIndex_xl
500
--pf-global--ZIndex--xsglobal_ZIndex_xs
100