PFv4 Design Token Snippets

[bennypowers]

CSS Variable Snippets, In textmate format, from PatternFly v4 --pf css custom property definitions, with defaults, for you editing pleasure

snippet --pf-global--palette--black-100
  var(--pf-global--palette--black-100, #fafafa)
snippet --pf-global--palette--black-150
  var(--pf-global--palette--black-150, #f5f5f5)
snippet --pf-global--palette--black-200
  var(--pf-global--palette--black-200, #f0f0f0)
snippet --pf-global--palette--black-300
  var(--pf-global--palette--black-300, #d2d2d2)
snippet --pf-global--palette--black-400
  var(--pf-global--palette--black-400, #b8bbbe)
snippet --pf-global--palette--black-500
  var(--pf-global--palette--black-500, #8a8d90)
snippet --pf-global--palette--black-600
  var(--pf-global--palette--black-600, #6a6e73)
snippet --pf-global--palette--black-700
  var(--pf-global--palette--black-700, #4f5255)
snippet --pf-global--palette--black-800
  var(--pf-global--palette--black-800, #3c3f42)
snippet --pf-global--palette--black-850
  var(--pf-global--palette--black-850, #212427)
snippet --pf-global--palette--black-900
  var(--pf-global--palette--black-900, #151515)
snippet --pf-global--palette--black-1000
  var(--pf-global--palette--black-1000, #030303)
snippet --pf-global--palette--blue-50
  var(--pf-global--palette--blue-50, #e7f1fa)
snippet --pf-global--palette--blue-100
  var(--pf-global--palette--blue-100, #bee1f4)
snippet --pf-global--palette--blue-200
  var(--pf-global--palette--blue-200, #73bcf7)
snippet --pf-global--palette--blue-300
  var(--pf-global--palette--blue-300, #2b9af3)
snippet --pf-global--palette--blue-400
  var(--pf-global--palette--blue-400, #06c)
snippet --pf-global--palette--blue-500
  var(--pf-global--palette--blue-500, #004080)
snippet --pf-global--palette--blue-600
  var(--pf-global--palette--blue-600, #002952)
snippet --pf-global--palette--blue-700
  var(--pf-global--palette--blue-700, #001223)
snippet --pf-global--palette--cyan-50
  var(--pf-global--palette--cyan-50, #f2f9f9)
snippet --pf-global--palette--cyan-100
  var(--pf-global--palette--cyan-100, #a2d9d9)
snippet --pf-global--palette--cyan-200
  var(--pf-global--palette--cyan-200, #73c5c5)
snippet --pf-global--palette--cyan-300
  var(--pf-global--palette--cyan-300, #009596)
snippet --pf-global--palette--cyan-400
  var(--pf-global--palette--cyan-400, #005f60)
snippet --pf-global--palette--cyan-500
  var(--pf-global--palette--cyan-500, #003737)
snippet --pf-global--palette--cyan-600
  var(--pf-global--palette--cyan-600, #002323)
snippet --pf-global--palette--cyan-700
  var(--pf-global--palette--cyan-700, #000f0f)
snippet --pf-global--palette--gold-50
  var(--pf-global--palette--gold-50, #fdf7e7)
snippet --pf-global--palette--gold-100
  var(--pf-global--palette--gold-100, #f9e0a2)
snippet --pf-global--palette--gold-200
  var(--pf-global--palette--gold-200, #f6d173)
snippet --pf-global--palette--gold-300
  var(--pf-global--palette--gold-300, #f4c145)
snippet --pf-global--palette--gold-400
  var(--pf-global--palette--gold-400, #f0ab00)
snippet --pf-global--palette--gold-500
  var(--pf-global--palette--gold-500, #c58c00)
snippet --pf-global--palette--gold-600
  var(--pf-global--palette--gold-600, #795600)
snippet --pf-global--palette--gold-700
  var(--pf-global--palette--gold-700, #3d2c00)
snippet --pf-global--palette--green-50
  var(--pf-global--palette--green-50, #f3faf2)
snippet --pf-global--palette--green-100
  var(--pf-global--palette--green-100, #bde5b8)
snippet --pf-global--palette--green-200
  var(--pf-global--palette--green-200, #95d58e)
snippet --pf-global--palette--green-300
  var(--pf-global--palette--green-300, #6ec664)
snippet --pf-global--palette--green-400
  var(--pf-global--palette--green-400, #5ba352)
snippet --pf-global--palette--green-500
  var(--pf-global--palette--green-500, #3e8635)
snippet --pf-global--palette--green-600
  var(--pf-global--palette--green-600, #1e4f18)
snippet --pf-global--palette--green-700
  var(--pf-global--palette--green-700, #0f280d)
snippet --pf-global--palette--light-blue-100
  var(--pf-global--palette--light-blue-100, #beedf9)
snippet --pf-global--palette--light-blue-200
  var(--pf-global--palette--light-blue-200, #7cdbf3)
snippet --pf-global--palette--light-blue-300
  var(--pf-global--palette--light-blue-300, #35caed)
snippet --pf-global--palette--light-blue-400
  var(--pf-global--palette--light-blue-400, #00b9e4)
snippet --pf-global--palette--light-blue-500
  var(--pf-global--palette--light-blue-500, #008bad)
snippet --pf-global--palette--light-blue-600
  var(--pf-global--palette--light-blue-600, #005c73)
snippet --pf-global--palette--light-blue-700
  var(--pf-global--palette--light-blue-700, #002d39)
snippet --pf-global--palette--light-green-100
  var(--pf-global--palette--light-green-100, #e4f5bc)
snippet --pf-global--palette--light-green-200
  var(--pf-global--palette--light-green-200, #c8eb79)
snippet --pf-global--palette--light-green-300
  var(--pf-global--palette--light-green-300, #ace12e)
snippet --pf-global--palette--light-green-400
  var(--pf-global--palette--light-green-400, #92d400)
snippet --pf-global--palette--light-green-500
  var(--pf-global--palette--light-green-500, #6ca100)
snippet --pf-global--palette--light-green-600
  var(--pf-global--palette--light-green-600, #486b00)
snippet --pf-global--palette--light-green-700
  var(--pf-global--palette--light-green-700, #253600)
snippet --pf-global--palette--orange-50
  var(--pf-global--palette--orange-50, #fff6ec)
snippet --pf-global--palette--orange-100
  var(--pf-global--palette--orange-100, #f4b678)
snippet --pf-global--palette--orange-200
  var(--pf-global--palette--orange-200, #ef9234)
snippet --pf-global--palette--orange-300
  var(--pf-global--palette--orange-300, #ec7a08)
snippet --pf-global--palette--orange-400
  var(--pf-global--palette--orange-400, #c46100)
snippet --pf-global--palette--orange-500
  var(--pf-global--palette--orange-500, #8f4700)
snippet --pf-global--palette--orange-600
  var(--pf-global--palette--orange-600, #773d00)
snippet --pf-global--palette--orange-700
  var(--pf-global--palette--orange-700, #3b1f00)
snippet --pf-global--palette--purple-50
  var(--pf-global--palette--purple-50, #f2f0fc)
snippet --pf-global--palette--purple-100
  var(--pf-global--palette--purple-100, #cbc1ff)
snippet --pf-global--palette--purple-200
  var(--pf-global--palette--purple-200, #b2a3ff)
snippet --pf-global--palette--purple-300
  var(--pf-global--palette--purple-300, #a18fff)
snippet --pf-global--palette--purple-400
  var(--pf-global--palette--purple-400, #8476d1)
snippet --pf-global--palette--purple-500
  var(--pf-global--palette--purple-500, #6753ac)
snippet --pf-global--palette--purple-600
  var(--pf-global--palette--purple-600, #40199a)
snippet --pf-global--palette--purple-700
  var(--pf-global--palette--purple-700, #1f0066)
snippet --pf-global--palette--red-50
  var(--pf-global--palette--red-50, #faeae8)
snippet --pf-global--palette--red-100
  var(--pf-global--palette--red-100, #c9190b)
snippet --pf-global--palette--red-200
  var(--pf-global--palette--red-200, #a30000)
snippet --pf-global--palette--red-300
  var(--pf-global--palette--red-300, #7d1007)
snippet --pf-global--palette--red-400
  var(--pf-global--palette--red-400, #470000)
snippet --pf-global--palette--red-500
  var(--pf-global--palette--red-500, #2c0000)
snippet --pf-global--palette--white
  var(--pf-global--palette--white, #fff)
snippet --pf-global--BackgroundColor--100
  var(--pf-global--BackgroundColor--100, #fff)
snippet --pf-global--BackgroundColor--150
  var(--pf-global--BackgroundColor--150, #fafafa)
snippet --pf-global--BackgroundColor--200
  var(--pf-global--BackgroundColor--200, #f0f0f0)
snippet --pf-global--BackgroundColor--light-100
  var(--pf-global--BackgroundColor--light-100, #fff)
snippet --pf-global--BackgroundColor--light-200
  var(--pf-global--BackgroundColor--light-200, #fafafa)
snippet --pf-global--BackgroundColor--light-300
  var(--pf-global--BackgroundColor--light-300, #f0f0f0)
snippet --pf-global--BackgroundColor--dark-100
  var(--pf-global--BackgroundColor--dark-100, #151515)
snippet --pf-global--BackgroundColor--dark-200
  var(--pf-global--BackgroundColor--dark-200, #3c3f42)
snippet --pf-global--BackgroundColor--dark-300
  var(--pf-global--BackgroundColor--dark-300, #212427)
snippet --pf-global--BackgroundColor--dark-400
  var(--pf-global--BackgroundColor--dark-400, #4f5255)
snippet --pf-global--BackgroundColor--dark-transparent-100
  var(--pf-global--BackgroundColor--dark-transparent-100, rgba(3, 3, 3, 0.62))
snippet --pf-global--BackgroundColor--dark-transparent-200
  var(--pf-global--BackgroundColor--dark-transparent-200, rgba(3, 3, 3, 0.32))
snippet --pf-global--Color--100
  var(--pf-global--Color--100, #151515)
snippet --pf-global--Color--200
  var(--pf-global--Color--200, #6a6e73)
snippet --pf-global--Color--300
  var(--pf-global--Color--300, #3c3f42)
snippet --pf-global--Color--400
  var(--pf-global--Color--400, #8a8d90)
snippet --pf-global--Color--light-100
  var(--pf-global--Color--light-100, #fff)
snippet --pf-global--Color--light-200
  var(--pf-global--Color--light-200, #f0f0f0)
snippet --pf-global--Color--light-300
  var(--pf-global--Color--light-300, #d2d2d2)
snippet --pf-global--Color--dark-100
  var(--pf-global--Color--dark-100, #151515)
snippet --pf-global--Color--dark-200
  var(--pf-global--Color--dark-200, #6a6e73)
snippet --pf-global--active-color--100
  var(--pf-global--active-color--100, #06c)
snippet --pf-global--active-color--200
  var(--pf-global--active-color--200, #bee1f4)
snippet --pf-global--active-color--300
  var(--pf-global--active-color--300, #2b9af3)
snippet --pf-global--active-color--400
  var(--pf-global--active-color--400, #73bcf7)
snippet --pf-global--disabled-color--100
  var(--pf-global--disabled-color--100, #6a6e73)
snippet --pf-global--disabled-color--200
  var(--pf-global--disabled-color--200, #d2d2d2)
snippet --pf-global--disabled-color--300
  var(--pf-global--disabled-color--300, #f0f0f0)
snippet --pf-global--primary-color--100
  var(--pf-global--primary-color--100, #06c)
snippet --pf-global--primary-color--200
  var(--pf-global--primary-color--200, #004080)
snippet --pf-global--primary-color--light-100
  var(--pf-global--primary-color--light-100, #73bcf7)
snippet --pf-global--primary-color--dark-100
  var(--pf-global--primary-color--dark-100, #06c)
snippet --pf-global--secondary-color--100
  var(--pf-global--secondary-color--100, #6a6e73)
snippet --pf-global--default-color--100
  var(--pf-global--default-color--100, #73c5c5)
snippet --pf-global--default-color--200
  var(--pf-global--default-color--200, #009596)
snippet --pf-global--default-color--300
  var(--pf-global--default-color--300, #003737)
snippet --pf-global--success-color--100
  var(--pf-global--success-color--100, #3e8635)
snippet --pf-global--success-color--200
  var(--pf-global--success-color--200, #1e4f18)
snippet --pf-global--info-color--100
  var(--pf-global--info-color--100, #2b9af3)
snippet --pf-global--info-color--200
  var(--pf-global--info-color--200, #002952)
snippet --pf-global--warning-color--100
  var(--pf-global--warning-color--100, #f0ab00)
snippet --pf-global--warning-color--200
  var(--pf-global--warning-color--200, #795600)
snippet --pf-global--danger-color--100
  var(--pf-global--danger-color--100, #c9190b)
snippet --pf-global--danger-color--200
  var(--pf-global--danger-color--200, #a30000)
snippet --pf-global--danger-color--300
  var(--pf-global--danger-color--300, #470000)
snippet --pf-global--BoxShadow--sm
  var(--pf-global--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))
snippet --pf-global--BoxShadow--sm-top
  var(--pf-global--BoxShadow--sm-top, 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16))
snippet --pf-global--BoxShadow--sm-right
  var(--pf-global--BoxShadow--sm-right, 0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.16))
snippet --pf-global--BoxShadow--sm-bottom
  var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16))
snippet --pf-global--BoxShadow--sm-left
  var(--pf-global--BoxShadow--sm-left, -0.125rem 0 0.25rem -0.0625rem rgba(3, 3, 3, 0.16))
snippet --pf-global--BoxShadow--md
  var(--pf-global--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))
snippet --pf-global--BoxShadow--md-top
  var(--pf-global--BoxShadow--md-top, 0 -0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18))
snippet --pf-global--BoxShadow--md-right
  var(--pf-global--BoxShadow--md-right, 0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.18))
snippet --pf-global--BoxShadow--md-bottom
  var(--pf-global--BoxShadow--md-bottom, 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18))
snippet --pf-global--BoxShadow--md-left
  var(--pf-global--BoxShadow--md-left, -0.5rem 0 0.5rem -0.375rem rgba(3, 3, 3, 0.18))
snippet --pf-global--BoxShadow--lg
  var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08))
snippet --pf-global--BoxShadow--lg-top
  var(--pf-global--BoxShadow--lg-top, 0 -0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18))
snippet --pf-global--BoxShadow--lg-right
  var(--pf-global--BoxShadow--lg-right, 0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18))
snippet --pf-global--BoxShadow--lg-bottom
  var(--pf-global--BoxShadow--lg-bottom, 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18))
snippet --pf-global--BoxShadow--lg-left
  var(--pf-global--BoxShadow--lg-left, -0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18))
snippet --pf-global--BoxShadow--xl
  var(--pf-global--BoxShadow--xl, 0 1rem 2rem 0 rgba(3, 3, 3, 0.16), 0 0 0.5rem 0 rgba(3, 3, 3, 0.1))
snippet --pf-global--BoxShadow--xl-top
  var(--pf-global--BoxShadow--xl-top, 0 -1rem 1rem -0.5rem rgba(3, 3, 3, 0.2))
snippet --pf-global--BoxShadow--xl-right
  var(--pf-global--BoxShadow--xl-right, 1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.2))
snippet --pf-global--BoxShadow--xl-bottom
  var(--pf-global--BoxShadow--xl-bottom, 0 1rem 1rem -0.5rem rgba(3, 3, 3, 0.2))
snippet --pf-global--BoxShadow--xl-left
  var(--pf-global--BoxShadow--xl-left, -1rem 0 1rem -0.5rem rgba(3, 3, 3, 0.2))
snippet --pf-global--BoxShadow--inset
  var(--pf-global--BoxShadow--inset, inset 0 0 0.625rem 0 rgba(3, 3, 3, 0.25))
snippet --pf-global--font-path
  var(--pf-global--font-path, "./assets/fonts")
snippet --pf-global--fonticon-path
  var(--pf-global--fonticon-path, "./assets/pficon")
snippet --pf-global--spacer--xs
  var(--pf-global--spacer--xs, 0.25rem)
snippet --pf-global--spacer--sm
  var(--pf-global--spacer--sm, 0.5rem)
snippet --pf-global--spacer--md
  var(--pf-global--spacer--md, 1rem)
snippet --pf-global--spacer--lg
  var(--pf-global--spacer--lg, 1.5rem)
snippet --pf-global--spacer--xl
  var(--pf-global--spacer--xl, 2rem)
snippet --pf-global--spacer--2xl
  var(--pf-global--spacer--2xl, 3rem)
snippet --pf-global--spacer--3xl
  var(--pf-global--spacer--3xl, 4rem)
snippet --pf-global--spacer--4xl
  var(--pf-global--spacer--4xl, 5rem)
snippet --pf-global--spacer--form-element
  var(--pf-global--spacer--form-element, 0.375rem)
snippet --pf-global--gutter
  var(--pf-global--gutter, 1rem)
snippet --pf-global--gutter--md
  var(--pf-global--gutter--md, 1.5rem)
snippet --pf-global--ZIndex--xs
  var(--pf-global--ZIndex--xs, 100)
snippet --pf-global--ZIndex--sm
  var(--pf-global--ZIndex--sm, 200)
snippet --pf-global--ZIndex--md
  var(--pf-global--ZIndex--md, 300)
snippet --pf-global--ZIndex--lg
  var(--pf-global--ZIndex--lg, 400)
snippet --pf-global--ZIndex--xl
  var(--pf-global--ZIndex--xl, 500)
snippet --pf-global--ZIndex--2xl
  var(--pf-global--ZIndex--2xl, 600)
snippet --pf-global--breakpoint--xs
  var(--pf-global--breakpoint--xs, 0)
snippet --pf-global--breakpoint--sm
  var(--pf-global--breakpoint--sm, 576px)
snippet --pf-global--breakpoint--md
  var(--pf-global--breakpoint--md, 768px)
snippet --pf-global--breakpoint--lg
  var(--pf-global--breakpoint--lg, 992px)
snippet --pf-global--breakpoint--xl
  var(--pf-global--breakpoint--xl, 1200px)
snippet --pf-global--breakpoint--2xl
  var(--pf-global--breakpoint--2xl, 1450px)
snippet --pf-global--link--Color
  var(--pf-global--link--Color, #06c)
snippet --pf-global--link--Color--hover
  var(--pf-global--link--Color--hover, #004080)
snippet --pf-global--link--Color--light
  var(--pf-global--link--Color--light, #2b9af3)
snippet --pf-global--link--Color--light--hover
  var(--pf-global--link--Color--light--hover, #73bcf7)
snippet --pf-global--link--Color--dark
  var(--pf-global--link--Color--dark, #06c)
snippet --pf-global--link--Color--dark--hover
  var(--pf-global--link--Color--dark--hover, #004080)
snippet --pf-global--link--Color--visited
  var(--pf-global--link--Color--visited, #40199a)
snippet --pf-global--link--TextDecoration
  var(--pf-global--link--TextDecoration, none)
snippet --pf-global--link--TextDecoration--hover
  var(--pf-global--link--TextDecoration--hover, underline)
snippet --pf-global--BorderWidth--sm
  var(--pf-global--BorderWidth--sm, 1px)
snippet --pf-global--BorderWidth--md
  var(--pf-global--BorderWidth--md, 2px)
snippet --pf-global--BorderWidth--lg
  var(--pf-global--BorderWidth--lg, 3px)
snippet --pf-global--BorderWidth--xl
  var(--pf-global--BorderWidth--xl, 4px)
snippet --pf-global--BorderColor--100
  var(--pf-global--BorderColor--100, #d2d2d2)
snippet --pf-global--BorderColor--200
  var(--pf-global--BorderColor--200, #8a8d90)
snippet --pf-global--BorderColor--300
  var(--pf-global--BorderColor--300, #f0f0f0)
snippet --pf-global--BorderColor--dark-100
  var(--pf-global--BorderColor--dark-100, #d2d2d2)
snippet --pf-global--BorderColor--light-100
  var(--pf-global--BorderColor--light-100, #b8bbbe)
snippet --pf-global--BorderRadius--sm
  var(--pf-global--BorderRadius--sm, 3px)
snippet --pf-global--BorderRadius--lg
  var(--pf-global--BorderRadius--lg, 30em)
snippet --pf-global--icon--Color--light
  var(--pf-global--icon--Color--light, #6a6e73)
snippet --pf-global--icon--Color--dark
  var(--pf-global--icon--Color--dark, #151515)
snippet --pf-global--icon--FontSize--sm
  var(--pf-global--icon--FontSize--sm, 0.625rem)
snippet --pf-global--icon--FontSize--md
  var(--pf-global--icon--FontSize--md, 1.125rem)
snippet --pf-global--icon--FontSize--lg
  var(--pf-global--icon--FontSize--lg, 1.5rem)
snippet --pf-global--icon--FontSize--xl
  var(--pf-global--icon--FontSize--xl, 3.375rem)
snippet --pf-global--FontFamily--sans-serif
  var(--pf-global--FontFamily--sans-serif, "RedHatText", "Overpass", overpass, helvetica, arial, sans-serif)
snippet --pf-global--FontFamily--heading--sans-serif
  var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif)
snippet --pf-global--FontFamily--monospace
  var(--pf-global--FontFamily--monospace, "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace)
snippet --pf-global--FontFamily--redhat-updated--sans-serif
  var(--pf-global--FontFamily--redhat-updated--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif)
snippet --pf-global--FontFamily--redhat-updated--heading--sans-serif
  var(--pf-global--FontFamily--redhat-updated--heading--sans-serif, "RedHatDisplayUpdated", "Overpass", overpass, helvetica, arial, sans-serif)
snippet --pf-global--FontFamily--redhat--monospace
  var(--pf-global--FontFamily--redhat--monospace, "RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace)
snippet --pf-global--FontFamily--redhatVF--sans-serif
  var(--pf-global--FontFamily--redhatVF--sans-serif, "RedHatTextVF", "RedHatText", "Overpass", overpass, helvetica, arial, sans-serif)
snippet --pf-global--FontFamily--redhatVF--heading--sans-serif
  var(--pf-global--FontFamily--redhatVF--heading--sans-serif, "RedHatDisplayVF", "RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif)
snippet --pf-global--FontFamily--redhatVF--monospace
  var(--pf-global--FontFamily--redhatVF--monospace, "RedHatMonoVF", "RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace)
snippet --pf-global--FontFamily--overpass--sans-serif
  var(--pf-global--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")
snippet --pf-global--FontFamily--overpass--monospace
  var(--pf-global--FontFamily--overpass--monospace, "overpass-mono", overpass-mono, "SFMono-Regular", menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace)
snippet --pf-global--FontSize--4xl
  var(--pf-global--FontSize--4xl, 2.25rem)
snippet --pf-global--FontSize--3xl
  var(--pf-global--FontSize--3xl, 1.75rem)
snippet --pf-global--FontSize--2xl
  var(--pf-global--FontSize--2xl, 1.5rem)
snippet --pf-global--FontSize--xl
  var(--pf-global--FontSize--xl, 1.25rem)
snippet --pf-global--FontSize--lg
  var(--pf-global--FontSize--lg, 1.125rem)
snippet --pf-global--FontSize--md
  var(--pf-global--FontSize--md, 1rem)
snippet --pf-global--FontSize--sm
  var(--pf-global--FontSize--sm, 0.875rem)
snippet --pf-global--FontSize--xs
  var(--pf-global--FontSize--xs, 0.75rem)
snippet --pf-global--FontWeight--light
  var(--pf-global--FontWeight--light, 300)
snippet --pf-global--FontWeight--normal
  var(--pf-global--FontWeight--normal, 400)
snippet --pf-global--FontWeight--semi-bold
  var(--pf-global--FontWeight--semi-bold, 700)
snippet --pf-global--FontWeight--overpass--semi-bold
  var(--pf-global--FontWeight--overpass--semi-bold, 500)
snippet --pf-global--FontWeight--bold
  var(--pf-global--FontWeight--bold, 700)
snippet --pf-global--FontWeight--overpass--bold
  var(--pf-global--FontWeight--overpass--bold, 600)
snippet --pf-global--LineHeight--sm
  var(--pf-global--LineHeight--sm, 1.3)
snippet --pf-global--LineHeight--md
  var(--pf-global--LineHeight--md, 1.5)
snippet --pf-global--ListStyle
  var(--pf-global--ListStyle, disc outside)
snippet --pf-global--Transition
  var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1))
snippet --pf-global--TimingFunction
  var(--pf-global--TimingFunction, cubic-bezier(0.645, 0.045, 0.355, 1))
snippet --pf-global--TransitionDuration
  var(--pf-global--TransitionDuration, 250ms)
snippet --pf-global--arrow--width
  var(--pf-global--arrow--width, 0.9375rem)
snippet --pf-global--arrow--width-lg
  var(--pf-global--arrow--width-lg, 1.5625rem)
snippet --pf-global--target-size--MinWidth
  var(--pf-global--target-size--MinWidth, 44px)
snippet --pf-global--target-size--MinHeight
  var(--pf-global--target-size--MinHeight, 44px)