Skip to Content
Patternfly Logo

Global CSS variables

About CSS variablesGlobal CSS variablesChart 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-global--palette--black-100global_palette_black_100
#fafafa
--pf-global--palette--black-150global_palette_black_150
#f5f5f5
--pf-global--palette--black-200global_palette_black_200
#f0f0f0
--pf-global--palette--black-300global_palette_black_300
#d2d2d2
--pf-global--palette--black-400global_palette_black_400
#b8bbbe
--pf-global--palette--black-500global_palette_black_500
#8a8d90
--pf-global--palette--black-600global_palette_black_600
#6a6e73
--pf-global--palette--black-700global_palette_black_700
#4f5255
--pf-global--palette--black-800global_palette_black_800
#3c3f42
--pf-global--palette--black-850global_palette_black_850
#212427
--pf-global--palette--black-900global_palette_black_900
#151515
--pf-global--palette--black-1000global_palette_black_1000
#030303
--pf-global--palette--blue-50global_palette_blue_50
#e7f1fa
--pf-global--palette--blue-100global_palette_blue_100
#bee1f4
--pf-global--palette--blue-200global_palette_blue_200
#73bcf7
--pf-global--palette--blue-300global_palette_blue_300
#2b9af3
--pf-global--palette--blue-400global_palette_blue_400
#06c
--pf-global--palette--blue-500global_palette_blue_500
#004080
--pf-global--palette--blue-600global_palette_blue_600
#002952
--pf-global--palette--blue-700global_palette_blue_700
#001223
--pf-global--palette--cyan-50global_palette_cyan_50
#f2f9f9
--pf-global--palette--cyan-100global_palette_cyan_100
#a2d9d9
--pf-global--palette--cyan-200global_palette_cyan_200
#73c5c5
--pf-global--palette--cyan-300global_palette_cyan_300
#009596
--pf-global--palette--cyan-400global_palette_cyan_400
#005f60
--pf-global--palette--cyan-500global_palette_cyan_500
#003737
--pf-global--palette--cyan-600global_palette_cyan_600
#002323
--pf-global--palette--cyan-700global_palette_cyan_700
#000f0f
--pf-global--palette--gold-50global_palette_gold_50
#fdf7e7
--pf-global--palette--gold-100global_palette_gold_100
#f9e0a2
--pf-global--palette--gold-200global_palette_gold_200
#f6d173
--pf-global--palette--gold-300global_palette_gold_300
#f4c145
--pf-global--palette--gold-400global_palette_gold_400
#f0ab00
--pf-global--palette--gold-500global_palette_gold_500
#c58c00
--pf-global--palette--gold-600global_palette_gold_600
#795600
--pf-global--palette--gold-700global_palette_gold_700
#3d2c00
--pf-global--palette--green-50global_palette_green_50
#f3faf2
--pf-global--palette--green-100global_palette_green_100
#bde5b8
--pf-global--palette--green-200global_palette_green_200
#95d58e
--pf-global--palette--green-300global_palette_green_300
#6ec664
--pf-global--palette--green-400global_palette_green_400
#5ba352
--pf-global--palette--green-500global_palette_green_500
#3e8635
--pf-global--palette--green-600global_palette_green_600
#1e4f18
--pf-global--palette--green-700global_palette_green_700
#0f280d
--pf-global--palette--light-blue-100global_palette_light_blue_100
#beedf9
--pf-global--palette--light-blue-200global_palette_light_blue_200
#7cdbf3
--pf-global--palette--light-blue-300global_palette_light_blue_300
#35caed
--pf-global--palette--light-blue-400global_palette_light_blue_400
#00b9e4
--pf-global--palette--light-blue-500global_palette_light_blue_500
#008bad
--pf-global--palette--light-blue-600global_palette_light_blue_600
#005c73
--pf-global--palette--light-blue-700global_palette_light_blue_700
#002d39
--pf-global--palette--light-green-100global_palette_light_green_100
#e4f5bc
--pf-global--palette--light-green-200global_palette_light_green_200
#c8eb79
--pf-global--palette--light-green-300global_palette_light_green_300
#ace12e
--pf-global--palette--light-green-400global_palette_light_green_400
#92d400
--pf-global--palette--light-green-500global_palette_light_green_500
#6ca100
--pf-global--palette--light-green-600global_palette_light_green_600
#486b00
--pf-global--palette--light-green-700global_palette_light_green_700
#253600
--pf-global--palette--orange-100global_palette_orange_100
#f4b678
--pf-global--palette--orange-200global_palette_orange_200
#ef9234
--pf-global--palette--orange-300global_palette_orange_300
#ec7a08
--pf-global--palette--orange-400global_palette_orange_400
#c46100
--pf-global--palette--orange-500global_palette_orange_500
#8f4700
--pf-global--palette--orange-600global_palette_orange_600
#773d00
--pf-global--palette--orange-700global_palette_orange_700
#3b1f00
--pf-global--palette--purple-50global_palette_purple_50
#f2f0fc
--pf-global--palette--purple-100global_palette_purple_100
#cbc1ff
--pf-global--palette--purple-200global_palette_purple_200
#b2a3ff
--pf-global--palette--purple-300global_palette_purple_300
#a18fff
--pf-global--palette--purple-400global_palette_purple_400
#8476d1
--pf-global--palette--purple-500global_palette_purple_500
#6753ac
--pf-global--palette--purple-600global_palette_purple_600
#40199a
--pf-global--palette--purple-700global_palette_purple_700
#1f0066
--pf-global--palette--red-50global_palette_red_50
#faeae8
--pf-global--palette--red-100global_palette_red_100
#c9190b
--pf-global--palette--red-200global_palette_red_200
#a30000
--pf-global--palette--red-300global_palette_red_300
#7d1007
--pf-global--palette--red-400global_palette_red_400
#470000
--pf-global--palette--red-500global_palette_red_500
#2c0000
--pf-global--palette--whiteglobal_palette_white
#fff
--pf-global--BackgroundColor--100global_BackgroundColor_100
#fff
--pf-global--BackgroundColor--200global_BackgroundColor_200
#f0f0f0
--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
#f0f0f0
--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--Color--100global_Color_100
#151515
--pf-global--Color--200global_Color_200
#6a6e73
--pf-global--Color--300global_Color_300
#3c3f42
--pf-global--Color--400global_Color_400
#8a8d90
--pf-global--Color--light-100global_Color_light_100
#fff
--pf-global--Color--light-200global_Color_light_200
#f0f0f0
--pf-global--Color--light-300global_Color_light_300
#d2d2d2
--pf-global--Color--dark-100global_Color_dark_100
#151515
--pf-global--Color--dark-200global_Color_dark_200
#6a6e73
--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--disabled-color--100global_disabled_color_100
#6a6e73
--pf-global--disabled-color--200global_disabled_color_200
#d2d2d2
--pf-global--disabled-color--300global_disabled_color_300
#f0f0f0
--pf-global--primary-color--100global_primary_color_100
#06c
--pf-global--primary-color--200global_primary_color_200
#004080
--pf-global--primary-color--light-100global_primary_color_light_100
#73bcf7
--pf-global--primary-color--dark-100global_primary_color_dark_100
#06c
--pf-global--secondary-color--100global_secondary_color_100
#6a6e73
--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--success-color--100global_success_color_100
#3e8635
--pf-global--success-color--200global_success_color_200
#0f280d
--pf-global--info-color--100global_info_color_100
#2b9af3
--pf-global--info-color--200global_info_color_200
#002952
--pf-global--warning-color--100global_warning_color_100
#f0ab00
--pf-global--warning-color--200global_warning_color_200
#795600
--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--BoxShadow--smglobal_BoxShadow_sm
0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)
--pf-global--BoxShadow--sm-topglobal_BoxShadow_sm_top
0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-global--BoxShadow--sm-rightglobal_BoxShadow_sm_right
0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-global--BoxShadow--sm-bottomglobal_BoxShadow_sm_bottom
0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-global--BoxShadow--sm-leftglobal_BoxShadow_sm_left
-0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
--pf-global--BoxShadow--mdglobal_BoxShadow_md
0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
--pf-global--BoxShadow--md-topglobal_BoxShadow_md_top
0 -0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)
--pf-global--BoxShadow--md-rightglobal_BoxShadow_md_right
0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.18)
--pf-global--BoxShadow--md-bottomglobal_BoxShadow_md_bottom
0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)
--pf-global--BoxShadow--md-leftglobal_BoxShadow_md_left
-0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.18)
--pf-global--BoxShadow--lgglobal_BoxShadow_lg
0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)
--pf-global--BoxShadow--lg-topglobal_BoxShadow_lg_top
0 -0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18)
--pf-global--BoxShadow--lg-rightglobal_BoxShadow_lg_right
0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18)
--pf-global--BoxShadow--lg-bottomglobal_BoxShadow_lg_bottom
0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18)
--pf-global--BoxShadow--lg-leftglobal_BoxShadow_lg_left
-0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18)
--pf-global--BoxShadow--xlglobal_BoxShadow_xl
0 1rem 2rem 0 rgba(3, 3, 3, 0.16), 0 0 0.5rem 0 rgba(3, 3, 3, 0.1)
--pf-global--BoxShadow--xl-topglobal_BoxShadow_xl_top
0 -1rem 1rem -0.5rem rgba(3, 3, 3, 0.2)
--pf-global--BoxShadow--xl-rightglobal_BoxShadow_xl_right
1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.2)
--pf-global--BoxShadow--xl-bottomglobal_BoxShadow_xl_bottom
0 1rem 1rem -0.5rem rgba(3, 3, 3, 0.2)
--pf-global--BoxShadow--xl-leftglobal_BoxShadow_xl_left
-1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.2)
--pf-global--BoxShadow--insetglobal_BoxShadow_inset
inset 0 0 0.625rem 0 rgba(3, 3, 3, 0.25)
--pf-global--font-pathglobal_font_path
./assets/fonts
--pf-global--fonticon-pathglobal_fonticon_path
./assets/pficon
--pf-global--spacer--xsglobal_spacer_xs
0.25rem
--pf-global--spacer--smglobal_spacer_sm
0.5rem
--pf-global--spacer--mdglobal_spacer_md
1rem
--pf-global--spacer--lgglobal_spacer_lg
1.5rem
--pf-global--spacer--xlglobal_spacer_xl
2rem
--pf-global--spacer--2xlglobal_spacer_2xl
3rem
--pf-global--spacer--3xlglobal_spacer_3xl
4rem
--pf-global--spacer--4xlglobal_spacer_4xl
5rem
--pf-global--spacer--form-elementglobal_spacer_form_element
0.375rem
--pf-global--gutterglobal_gutter
1rem
--pf-global--gutter--mdglobal_gutter_md
1.5rem
--pf-global--ZIndex--xsglobal_ZIndex_xs
100
--pf-global--ZIndex--smglobal_ZIndex_sm
200
--pf-global--ZIndex--mdglobal_ZIndex_md
300
--pf-global--ZIndex--lgglobal_ZIndex_lg
400
--pf-global--ZIndex--xlglobal_ZIndex_xl
500
--pf-global--ZIndex--2xlglobal_ZIndex_2xl
600
--pf-global--breakpoint--xsglobal_breakpoint_xs
0
--pf-global--breakpoint--smglobal_breakpoint_sm
576px
--pf-global--breakpoint--mdglobal_breakpoint_md
768px
--pf-global--breakpoint--lgglobal_breakpoint_lg
992px
--pf-global--breakpoint--xlglobal_breakpoint_xl
1200px
--pf-global--breakpoint--2xlglobal_breakpoint_2xl
1450px
--pf-global--link--Colorglobal_link_Color
#06c
--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--Color--darkglobal_link_Color_dark
#06c
--pf-global--link--Color--dark--hoverglobal_link_Color_dark_hover
#004080
--pf-global--link--TextDecorationglobal_link_TextDecoration
none
--pf-global--link--TextDecoration--hoverglobal_link_TextDecoration_hover
underline
--pf-global--BorderWidth--smglobal_BorderWidth_sm
1px
--pf-global--BorderWidth--mdglobal_BorderWidth_md
2px
--pf-global--BorderWidth--lgglobal_BorderWidth_lg
3px
--pf-global--BorderWidth--xlglobal_BorderWidth_xl
4px
--pf-global--BorderColor--100global_BorderColor_100
#d2d2d2
--pf-global--BorderColor--200global_BorderColor_200
#8a8d90
--pf-global--BorderColor--300global_BorderColor_300
#f0f0f0
--pf-global--BorderColor--dark-100global_BorderColor_dark_100
#d2d2d2
--pf-global--BorderColor--light-100global_BorderColor_light_100
#b8bbbe
--pf-global--BorderRadius--smglobal_BorderRadius_sm
3px
--pf-global--BorderRadius--lgglobal_BorderRadius_lg
30em
--pf-global--icon--Color--lightglobal_icon_Color_light
#6a6e73
--pf-global--icon--Color--darkglobal_icon_Color_dark
#151515
--pf-global--icon--FontSize--smglobal_icon_FontSize_sm
0.625rem
--pf-global--icon--FontSize--mdglobal_icon_FontSize_md
1.125rem
--pf-global--icon--FontSize--lgglobal_icon_FontSize_lg
1.5rem
--pf-global--icon--FontSize--xlglobal_icon_FontSize_xl
3.375rem
--pf-global--FontFamily--sans-serifglobal_FontFamily_sans_serif
RedHatText, Overpass, overpass, helvetica, arial, sans-serif
--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--overpass--sans-serifglobal_FontFamily_overpass_sans_serif
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-global--FontFamily--overpass--monospaceglobal_FontFamily_overpass_monospace
overpass-mono, overpass-mono, SFMono-Regular, menlo, monaco, consolas, Liberation Mono, Courier New, monospace
--pf-global--FontSize--4xlglobal_FontSize_4xl
2.25rem
--pf-global--FontSize--3xlglobal_FontSize_3xl
1.75rem
--pf-global--FontSize--2xlglobal_FontSize_2xl
1.5rem
--pf-global--FontSize--xlglobal_FontSize_xl
1.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--xsglobal_FontSize_xs
0.75rem
--pf-global--FontWeight--lightglobal_FontWeight_light
300
--pf-global--FontWeight--normalglobal_FontWeight_normal
400
--pf-global--FontWeight--semi-boldglobal_FontWeight_semi_bold
700
--pf-global--FontWeight--overpass--semi-boldglobal_FontWeight_overpass_semi_bold
500
--pf-global--FontWeight--boldglobal_FontWeight_bold
700
--pf-global--FontWeight--overpass--boldglobal_FontWeight_overpass_bold
600
--pf-global--LineHeight--smglobal_LineHeight_sm
1.3
--pf-global--LineHeight--mdglobal_LineHeight_md
1.5
--pf-global--ListStyleglobal_ListStyle
disc outside
--pf-global--Transitionglobal_Transition
all 250ms cubic-bezier(0.42, 0, 0.58, 1)
--pf-global--TimingFunctionglobal_TimingFunction
cubic-bezier(0.645, 0.045, 0.355, 1)
--pf-global--TransitionDurationglobal_TransitionDuration
250ms
--pf-global--arrow--widthglobal_arrow_width
0.9375rem
--pf-global--arrow--width-lgglobal_arrow_width_lg
1.5625rem
--pf-global--target-size--MinWidthglobal_target_size_MinWidth
44px
--pf-global--target-size--MinHeightglobal_target_size_MinHeight
44px

Chart CSS variables

--pf-chart-color-blue-100chart_color_blue_100
#8bc1f7
--pf-chart-color-blue-200chart_color_blue_200
#519de9
--pf-chart-color-blue-300chart_color_blue_300
#06c
--pf-chart-color-blue-400chart_color_blue_400
#004b95
--pf-chart-color-blue-500chart_color_blue_500
#002f5d
--pf-chart-color-green-100chart_color_green_100
#bde2b9
--pf-chart-color-green-200chart_color_green_200
#7cc674
--pf-chart-color-green-300chart_color_green_300
#4cb140
--pf-chart-color-green-400chart_color_green_400
#38812f
--pf-chart-color-green-500chart_color_green_500
#23511e
--pf-chart-color-cyan-100chart_color_cyan_100
#a2d9d9
--pf-chart-color-cyan-200chart_color_cyan_200
#73c5c5
--pf-chart-color-cyan-300chart_color_cyan_300
#009596
--pf-chart-color-cyan-400chart_color_cyan_400
#005f60
--pf-chart-color-cyan-500chart_color_cyan_500
#003737
--pf-chart-color-purple-100chart_color_purple_100
#b2b0ea
--pf-chart-color-purple-200chart_color_purple_200
#8481dd
--pf-chart-color-purple-300chart_color_purple_300
#5752d1
--pf-chart-color-purple-400chart_color_purple_400
#3c3d99
--pf-chart-color-purple-500chart_color_purple_500
#2a265f
--pf-chart-color-gold-100chart_color_gold_100
#f9e0a2
--pf-chart-color-gold-200chart_color_gold_200
#f6d173
--pf-chart-color-gold-300chart_color_gold_300
#f4c145
--pf-chart-color-gold-400chart_color_gold_400
#f0ab00
--pf-chart-color-gold-500chart_color_gold_500
#c58c00
--pf-chart-color-orange-100chart_color_orange_100
#f4b678
--pf-chart-color-orange-200chart_color_orange_200
#ef9234
--pf-chart-color-orange-300chart_color_orange_300
#ec7a08
--pf-chart-color-orange-400chart_color_orange_400
#c46100
--pf-chart-color-orange-500chart_color_orange_500
#8f4700
--pf-chart-color-red-100chart_color_red_100
#c9190b
--pf-chart-color-red-200chart_color_red_200
#a30000
--pf-chart-color-red-300chart_color_red_300
#7d1007
--pf-chart-color-red-400chart_color_red_400
#470000
--pf-chart-color-red-500chart_color_red_500
#2c0000
--pf-chart-color-black-100chart_color_black_100
#f0f0f0
--pf-chart-color-black-200chart_color_black_200
#d2d2d2
--pf-chart-color-black-300chart_color_black_300
#b8bbbe
--pf-chart-color-black-400chart_color_black_400
#8a8d90
--pf-chart-color-black-500chart_color_black_500
#6a6e73
--pf-chart-global--FontSize--xschart_global_FontSize_xs
12
--pf-chart-global--FontSize--smchart_global_FontSize_sm
14
--pf-chart-global--FontSize--lgchart_global_FontSize_lg
18
--pf-chart-global--FontSize--2xlchart_global_FontSize_2xl
24
--pf-chart-global--FontFamilychart_global_FontFamily
RedHatText, Overpass, overpass, helvetica, arial, sans-serif
--pf-chart-global--letter-spacingchart_global_letter_spacing
normal
--pf-chart-global--label--Paddingchart_global_label_Padding
10
--pf-chart-global--label--Marginchart_global_label_Margin
8
--pf-chart-global--label--strokechart_global_label_stroke
transparent
--pf-chart-global--label--text-anchorchart_global_label_text_anchor
middle
--pf-chart-global--label--stroke--Widthchart_global_label_stroke_Width
0
--pf-chart-global--label--Fillchart_global_label_Fill
#151515
--pf-chart-global--layout--Paddingchart_global_layout_Padding
50
--pf-chart-global--layout--Heightchart_global_layout_Height
300
--pf-chart-global--layout--Widthchart_global_layout_Width
450
--pf-chart-global--stroke--Width--xschart_global_stroke_Width_xs
1
--pf-chart-global--stroke--Width--smchart_global_stroke_Width_sm
2
--pf-chart-global--BorderWidth--xschart_global_BorderWidth_xs
1
--pf-chart-global--BorderWidth--smchart_global_BorderWidth_sm
2
--pf-chart-global--BorderWidth--lgchart_global_BorderWidth_lg
8
--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--danger--Color--100chart_global_danger_Color_100
#c9190b
--pf-chart-global--warning--Color--100chart_global_warning_Color_100
#ec7a08
--pf-chart-global--warning--Color--200chart_global_warning_Color_200
#f0ab00
--pf-chart-global--success--Color--100chart_global_success_Color_100
#06c
--pf-chart-global--Fill--Color--900chart_global_Fill_Color_900
#151515
--pf-chart-global--Fill--Color--700chart_global_Fill_Color_700
#4f5255
--pf-chart-global--Fill--Color--500chart_global_Fill_Color_500
#8a8d90
--pf-chart-global--Fill--Color--400chart_global_Fill_Color_400
#b8bbbe
--pf-chart-global--Fill--Color--300chart_global_Fill_Color_300
#d2d2d2
--pf-chart-global--Fill--Color--200chart_global_Fill_Color_200
#f0f0f0
--pf-chart-global--Fill--Color--whitechart_global_Fill_Color_white
#fff
--pf-chart-area--Opacitychart_area_Opacity
0.3
--pf-chart-area--stroke--Widthchart_area_stroke_Width
2
--pf-chart-area--data--Fillchart_area_data_Fill
#151515
--pf-chart-axis--axis--stroke--Widthchart_axis_axis_stroke_Width
1
--pf-chart-axis--axis--stroke--Colorchart_axis_axis_stroke_Color
#d2d2d2
--pf-chart-axis--axis--Fillchart_axis_axis_Fill
transparent
--pf-chart-axis--axis-label--Paddingchart_axis_axis_label_Padding
40
--pf-chart-axis--axis-label--stroke--Colorchart_axis_axis_label_stroke_Color
transparent
--pf-chart-axis--grid--Fillchart_axis_grid_Fill
none
--pf-chart-axis--grid--stroke--Colorchart_axis_grid_stroke_Color
#d2d2d2
--pf-chart-axis--grid--PointerEventschart_axis_grid_PointerEvents
painted
--pf-chart-axis--tick--Fillchart_axis_tick_Fill
transparent
--pf-chart-axis--tick--Sizechart_axis_tick_Size
5
--pf-chart-axis--tick--Widthchart_axis_tick_Width
1
--pf-chart-axis--tick--stroke--Colorchart_axis_tick_stroke_Color
#d2d2d2
--pf-chart-axis--tick-label--Fillchart_axis_tick_label_Fill
#4f5255
--pf-chart-bar--Widthchart_bar_Width
10
--pf-chart-bar--data--strokechart_bar_data_stroke
none
--pf-chart-bar--data--Fillchart_bar_data_Fill
#151515
--pf-chart-bar--data--Paddingchart_bar_data_Padding
8
--pf-chart-bar--data-stroke--Widthchart_bar_data_stroke_Width
0
--pf-chart-boxplot--max--Paddingchart_boxplot_max_Padding
8
--pf-chart-boxplot--max--stroke--Colorchart_boxplot_max_stroke_Color
#151515
--pf-chart-boxplot--max--stroke--Widthchart_boxplot_max_stroke_Width
1
--pf-chart-boxplot--median--Paddingchart_boxplot_median_Padding
8
--pf-chart-boxplot--median--stroke--Colorchart_boxplot_median_stroke_Color
#151515
--pf-chart-boxplot--median--stroke--Widthchart_boxplot_median_stroke_Width
1
--pf-chart-boxplot--min--Paddingchart_boxplot_min_Padding
8
--pf-chart-boxplot--min--stroke--Widthchart_boxplot_min_stroke_Width
1
--pf-chart-boxplot--min--stroke--Colorchart_boxplot_min_stroke_Color
#151515
--pf-chart-boxplot--lower-quartile--Paddingchart_boxplot_lower_quartile_Padding
8
--pf-chart-boxplot--lower-quartile--Fillchart_boxplot_lower_quartile_Fill
#8a8d90
--pf-chart-boxplot--upper-quartile--Paddingchart_boxplot_upper_quartile_Padding
8
--pf-chart-boxplot--upper-quartile--Fillchart_boxplot_upper_quartile_Fill
#8a8d90
--pf-chart-boxplot--box--Widthchart_boxplot_box_Width
20
--pf-chart-bullet--axis--tick--countchart_bullet_axis_tick_count
5
--pf-chart-bullet--comparative-measure--Fill--Colorchart_bullet_comparative_measure_Fill_Color
#4f5255
--pf-chart-bullet--comparative-measure--stroke--Colorchart_bullet_comparative_measure_stroke_Color
#4f5255
--pf-chart-bullet--comparative-measure--stroke--Widthchart_bullet_comparative_measure_stroke_Width
1
--pf-chart-bullet--comparative-measure--error--Fill--Colorchart_bullet_comparative_measure_error_Fill_Color
#c9190b
--pf-chart-bullet--comparative-measure--error--stroke--Colorchart_bullet_comparative_measure_error_stroke_Color
#c9190b
--pf-chart-bullet--comparative-measure--error--stroke--Widthchart_bullet_comparative_measure_error_stroke_Width
2
--pf-chart-bullet--comparative-measure--error--Widthchart_bullet_comparative_measure_error_Width
30
--pf-chart-bullet--comparative-measure--warning--Fill--Colorchart_bullet_comparative_measure_warning_Fill_Color
#ec7a08
--pf-chart-bullet--comparative-measure--warning--stroke--Colorchart_bullet_comparative_measure_warning_stroke_Color
#ec7a08
--pf-chart-bullet--comparative-measure--warning--stroke--Widthchart_bullet_comparative_measure_warning_stroke_Width
2
--pf-chart-bullet--comparative-measure--warning--Widthchart_bullet_comparative_measure_warning_Width
30
--pf-chart-bullet--comparative-measure--Widthchart_bullet_comparative_measure_Width
30
--pf-chart-bullet--group-title--divider--Fill--Colorchart_bullet_group_title_divider_Fill_Color
#f0f0f0
--pf-chart-bullet--group-title--divider--stroke--Colorchart_bullet_group_title_divider_stroke_Color
#f0f0f0
--pf-chart-bullet--group-title--divider--stroke--Widthchart_bullet_group_title_divider_stroke_Width
2
--pf-chart-bullet--Heightchart_bullet_Height
140
--pf-chart-bullet--label--subtitle--Fillchart_bullet_label_subtitle_Fill
#b8bbbe
--pf-chart-bullet--primary-measure--dot--sizechart_bullet_primary_measure_dot_size
6
--pf-chart-bullet--primary-measure--segmented--Widthchart_bullet_primary_measure_segmented_Width
9
--pf-chart-bullet--qualitative-range--Widthchart_bullet_qualitative_range_Width
30
--pf-chart-candelstick--data--stroke--Widthchart_candelstick_data_stroke_Width
1
--pf-chart-candelstick--data--stroke--Colorchart_candelstick_data_stroke_Color
#151515
--pf-chart-candelstick--candle--positive--Colorchart_candelstick_candle_positive_Color
#fff
--pf-chart-candelstick--candle--negative--Colorchart_candelstick_candle_negative_Color
#151515
--pf-chart-donut--label--subtitle--Fillchart_donut_label_subtitle_Fill
#b8bbbe
--pf-chart-donut--label--subtitle--positionchart_donut_label_subtitle_position
center
--pf-chart-donut--pie--Heightchart_donut_pie_Height
230
--pf-chart-donut--pie--angle--Paddingchart_donut_pie_angle_Padding
1
--pf-chart-donut--pie--Paddingchart_donut_pie_Padding
20
--pf-chart-donut--pie--Widthchart_donut_pie_Width
230
--pf-chart-donut--threshold--first--Colorchart_donut_threshold_first_Color
#f0f0f0
--pf-chart-donut--threshold--second--Colorchart_donut_threshold_second_Color
#d2d2d2
--pf-chart-donut--threshold--third--Colorchart_donut_threshold_third_Color
#b8bbbe
--pf-chart-donut--threshold--warning--Colorchart_donut_threshold_warning_Color
#f0ab00
--pf-chart-donut--threshold--danger--Colorchart_donut_threshold_danger_Color
#c9190b
--pf-chart-donut--threshold--dynamic--pie--Heightchart_donut_threshold_dynamic_pie_Height
202
--pf-chart-donut--threshold--dynamic--pie--Paddingchart_donut_threshold_dynamic_pie_Padding
20
--pf-chart-donut--threshold--dynamic--pie--Widthchart_donut_threshold_dynamic_pie_Width
202
--pf-chart-donut--threshold--static--pie--Heightchart_donut_threshold_static_pie_Height
230
--pf-chart-donut--threshold--static--pie--angle--Paddingchart_donut_threshold_static_pie_angle_Padding
1
--pf-chart-donut--threshold--static--pie--Paddingchart_donut_threshold_static_pie_Padding
20
--pf-chart-donut--threshold--static--pie--Widthchart_donut_threshold_static_pie_Width
230
--pf-chart-donut--utilization--dynamic--pie--Heightchart_donut_utilization_dynamic_pie_Height
230
--pf-chart-donut--utilization--dynamic--pie--angle--Paddingchart_donut_utilization_dynamic_pie_angle_Padding
1
--pf-chart-donut--utilization--dynamic--pie--Paddingchart_donut_utilization_dynamic_pie_Padding
20
--pf-chart-donut--utilization--dynamic--pie--Widthchart_donut_utilization_dynamic_pie_Width
230
--pf-chart-donut--utilization--static--pie--Paddingchart_donut_utilization_static_pie_Padding
20
--pf-chart-errorbar--BorderWidthchart_errorbar_BorderWidth
8
--pf-chart-errorbar--data--Fillchart_errorbar_data_Fill
transparent
--pf-chart-errorbar--data--Opacitychart_errorbar_data_Opacity
1
--pf-chart-errorbar--data-stroke--Widthchart_errorbar_data_stroke_Width
2
--pf-chart-errorbar--data-stroke--Colorchart_errorbar_data_stroke_Color
#151515
--pf-chart-legend--gutter--Widthchart_legend_gutter_Width
20
--pf-chart-legend--orientationchart_legend_orientation
horizontal
--pf-chart-legend--positionchart_legend_position
right
--pf-chart-legend--title--orientationchart_legend_title_orientation
top
--pf-chart-legend--data--typechart_legend_data_type
square
--pf-chart-legend--title--Paddingchart_legend_title_Padding
2
--pf-chart-legend--Marginchart_legend_Margin
16
--pf-chart-line--data--Fillchart_line_data_Fill
transparent
--pf-chart-line--data--Opacitychart_line_data_Opacity
1
--pf-chart-line--data--stroke--Widthchart_line_data_stroke_Width
2
--pf-chart-line--data--stroke--Colorchart_line_data_stroke_Color
#151515
--pf-chart-pie--Paddingchart_pie_Padding
20
--pf-chart-pie--data--Paddingchart_pie_data_Padding
8
--pf-chart-pie--data--stroke--Widthchart_pie_data_stroke_Width
1
--pf-chart-pie--data--stroke--Colorchart_pie_data_stroke_Color
transparent
--pf-chart-pie--labels--Paddingchart_pie_labels_Padding
8
--pf-chart-pie--Heightchart_pie_Height
230
--pf-chart-pie--Widthchart_pie_Width
230
--pf-chart-scatter--data--stroke--Colorchart_scatter_data_stroke_Color
transparent
--pf-chart-scatter--data--stroke--Widthchart_scatter_data_stroke_Width
0
--pf-chart-scatter--data--Opacitychart_scatter_data_Opacity
1
--pf-chart-scatter--data--Fillchart_scatter_data_Fill
#151515
--pf-chart-scatter--active--sizechart_scatter_active_size
5
--pf-chart-scatter--sizechart_scatter_size
3
--pf-chart-stack--data--stroke--Widthchart_stack_data_stroke_Width
1
--pf-chart-threshold--stroke-dash-arraychart_threshold_stroke_dash_array
4,2
--pf-chart-threshold--stroke--Widthchart_threshold_stroke_Width
1.5
--pf-chart-tooltip--corner-radiuschart_tooltip_corner_radius
0
--pf-chart-tooltip--pointer-lengthchart_tooltip_pointer_length
10
--pf-chart-tooltip--Fillchart_tooltip_Fill
#f0f0f0
--pf-chart-tooltip--flyoutStyle--corner-radiuschart_tooltip_flyoutStyle_corner_radius
0
--pf-chart-tooltip--flyoutStyle--stroke--Widthchart_tooltip_flyoutStyle_stroke_Width
0
--pf-chart-tooltip--flyoutStyle--PointerEventschart_tooltip_flyoutStyle_PointerEvents
none
--pf-chart-tooltip--flyoutStyle--stroke--Colorchart_tooltip_flyoutStyle_stroke_Color
#151515
--pf-chart-tooltip--flyoutStyle--Fillchart_tooltip_flyoutStyle_Fill
#151515
--pf-chart-tooltip--pointer--Widthchart_tooltip_pointer_Width
20
--pf-chart-tooltip--Paddingchart_tooltip_Padding
16
--pf-chart-tooltip--PointerEventschart_tooltip_PointerEvents
none
--pf-chart-voronoi--data--Fillchart_voronoi_data_Fill
transparent
--pf-chart-voronoi--data--stroke--Colorchart_voronoi_data_stroke_Color
transparent
--pf-chart-voronoi--data--stroke--Widthchart_voronoi_data_stroke_Width
0
--pf-chart-voronoi--labels--Paddingchart_voronoi_labels_Padding
8
--pf-chart-voronoi--labels--Fillchart_voronoi_labels_Fill
#f0f0f0
--pf-chart-voronoi--labels--PointerEventschart_voronoi_labels_PointerEvents
none
--pf-chart-voronoi--flyout--stroke--Widthchart_voronoi_flyout_stroke_Width
1
--pf-chart-voronoi--flyout--PointerEventschart_voronoi_flyout_PointerEvents
none
--pf-chart-voronoi--flyout--stroke--Colorchart_voronoi_flyout_stroke_Color
#151515
--pf-chart-voronoi--flyout--stroke--Fillchart_voronoi_flyout_stroke_Fill
#151515