@patternfly/patternfly 5.0.0-alpha.55 → 5.0.0-alpha.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (105) hide show
  1. package/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff2 +0 -0
  2. package/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff2 +0 -0
  3. package/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff2 +0 -0
  4. package/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff2 +0 -0
  5. package/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff2 +0 -0
  6. package/assets/fonts/RedHatDisplay/RedHatDisplay-Light.woff2 +0 -0
  7. package/assets/fonts/RedHatDisplay/RedHatDisplay-LightItalic.woff2 +0 -0
  8. package/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff2 +0 -0
  9. package/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff2 +0 -0
  10. package/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff2 +0 -0
  11. package/assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2 +0 -0
  12. package/assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2 +0 -0
  13. package/assets/fonts/RedHatMono/RedHatMono-Bold.woff2 +0 -0
  14. package/assets/fonts/RedHatMono/RedHatMono-BoldItalic.woff2 +0 -0
  15. package/assets/fonts/RedHatMono/RedHatMono-Italic.woff2 +0 -0
  16. package/assets/fonts/RedHatMono/RedHatMono-Light.woff2 +0 -0
  17. package/assets/fonts/RedHatMono/RedHatMono-LightItalic.woff2 +0 -0
  18. package/assets/fonts/RedHatMono/RedHatMono-Medium.woff2 +0 -0
  19. package/assets/fonts/RedHatMono/RedHatMono-MediumItalic.woff2 +0 -0
  20. package/assets/fonts/RedHatMono/RedHatMono-Regular.woff2 +0 -0
  21. package/assets/fonts/RedHatMono/RedHatMonoVF-Italic.woff2 +0 -0
  22. package/assets/fonts/RedHatMono/RedHatMonoVF.woff2 +0 -0
  23. package/assets/fonts/RedHatText/RedHatText-Bold.woff2 +0 -0
  24. package/assets/fonts/RedHatText/RedHatText-BoldItalic.woff2 +0 -0
  25. package/assets/fonts/RedHatText/RedHatText-Italic.woff2 +0 -0
  26. package/assets/fonts/RedHatText/RedHatText-Light.woff2 +0 -0
  27. package/assets/fonts/RedHatText/RedHatText-LightItalic.woff2 +0 -0
  28. package/assets/fonts/RedHatText/RedHatText-Medium.woff2 +0 -0
  29. package/assets/fonts/RedHatText/RedHatText-MediumItalic.woff2 +0 -0
  30. package/assets/fonts/RedHatText/RedHatText-Regular.woff2 +0 -0
  31. package/assets/fonts/RedHatText/RedHatTextVF-Italic.woff2 +0 -0
  32. package/assets/fonts/RedHatText/RedHatTextVF.woff2 +0 -0
  33. package/base/_chart-globals.scss +1 -1
  34. package/base/_fonts.scss +56 -71
  35. package/base/_globals.scss +1 -1
  36. package/base/_variables.scss +10 -25
  37. package/base/patternfly-fonts.css +52 -59
  38. package/base/patternfly-globals.css +1 -1
  39. package/base/patternfly-variables.css +10 -23
  40. package/components/Accordion/accordion.css +1 -1
  41. package/components/Accordion/accordion.scss +1 -1
  42. package/components/Card/card.css +1 -1
  43. package/components/Card/card.scss +1 -1
  44. package/components/Content/content.css +1 -1
  45. package/components/Content/content.scss +1 -1
  46. package/components/EmptyState/empty-state.css +1 -1
  47. package/components/EmptyState/empty-state.scss +1 -1
  48. package/components/ModalBox/modal-box.css +1 -1
  49. package/components/ModalBox/modal-box.scss +1 -1
  50. package/components/Popover/popover.css +1 -1
  51. package/components/Popover/popover.scss +1 -1
  52. package/components/Title/title.css +1 -1
  53. package/components/Title/title.scss +1 -1
  54. package/components/Wizard/wizard.css +1 -1
  55. package/components/Wizard/wizard.scss +1 -1
  56. package/docs/utilities/Text/examples/Text.md +32 -38
  57. package/layouts/Flex/flex.css +60 -60
  58. package/package.json +4 -4
  59. package/patternfly-addons.css +10 -29
  60. package/patternfly-base-no-globals.css +62 -82
  61. package/patternfly-base.css +63 -83
  62. package/patternfly-no-globals.css +130 -150
  63. package/patternfly.css +131 -151
  64. package/patternfly.min.css +1 -1
  65. package/patternfly.min.css.map +1 -1
  66. package/sass-utilities/functions.scss +1 -3
  67. package/sass-utilities/scss-variables.scss +6 -10
  68. package/utilities/Text/text.css +10 -29
  69. package/utilities/Text/text.scss +10 -13
  70. package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Black.woff2 +0 -0
  71. package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-BlackItalic.woff2 +0 -0
  72. package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Bold.woff2 +0 -0
  73. package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-BoldItalic.woff2 +0 -0
  74. package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Italic.woff2 +0 -0
  75. package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Light.woff2 +0 -0
  76. package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-LightItalic.woff2 +0 -0
  77. package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Medium.woff2 +0 -0
  78. package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-MediumItalic.woff2 +0 -0
  79. package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Regular.woff2 +0 -0
  80. package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplayVF-updated-Italic.woff2 +0 -0
  81. package/assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplayVF-updated.woff2 +0 -0
  82. package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-Bold.woff2 +0 -0
  83. package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-BoldItalic.woff2 +0 -0
  84. package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-Italic.woff2 +0 -0
  85. package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-Light.woff2 +0 -0
  86. package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-LightItalic.woff2 +0 -0
  87. package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-Medium.woff2 +0 -0
  88. package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-MediumItalic.woff2 +0 -0
  89. package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMono-updated-Regular.woff2 +0 -0
  90. package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated-Italic.woff2 +0 -0
  91. package/assets/fonts/RedHatFont-updated/RedHatMono/RedHatMonoVF-updated.woff2 +0 -0
  92. package/assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Bold.woff2 +0 -0
  93. package/assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-BoldItalic.woff2 +0 -0
  94. package/assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Italic.woff2 +0 -0
  95. package/assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Light.woff2 +0 -0
  96. package/assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-LightItalic.woff2 +0 -0
  97. package/assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Medium.woff2 +0 -0
  98. package/assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-MediumItalic.woff2 +0 -0
  99. package/assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Regular.woff2 +0 -0
  100. package/assets/fonts/RedHatFont-updated/RedHatText/RedHatTextVF-updated-Italic.woff2 +0 -0
  101. package/assets/fonts/RedHatFont-updated/RedHatText/RedHatTextVF-updated.woff2 +0 -0
  102. package/assets/fonts/RedHatFont-updated/modified/RedHatDisplayVF-updated-ItalicModified.woff2 +0 -0
  103. package/assets/fonts/RedHatFont-updated/modified/RedHatDisplayVFModified-updated.woff2 +0 -0
  104. package/assets/fonts/RedHatFont-updated/modified/RedHatTextVF-updated-ItalicModified.woff2 +0 -0
  105. package/assets/fonts/RedHatFont-updated/modified/RedHatTextVFModified-updated.woff2 +0 -0
package/components/Card/card.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  --#{$card}--child--PaddingLeft: var(--#{$pf-global}--spacer--lg);
10
10
  --#{$card}--c-divider--child--PaddingTop: var(--#{$pf-global}--spacer--lg);
11
11
  --#{$card}__title--not--last-child--PaddingBottom: var(--#{$pf-global}--spacer--md);
12
- --#{$card}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading--sans-serif);
12
+ --#{$card}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading);
13
13
  --#{$card}__title-text--FontSize: var(--#{$pf-global}--FontSize--md);
14
14
  --#{$card}__title-text--FontWeight: var(--#{$pf-global}--FontWeight--normal);
15
15
  --#{$card}__title-text--LineHeight: var(--#{$pf-global}--LineHeight--md);
package/components/Content/content.css CHANGED
@@ -4,7 +4,7 @@
4
4
  --pf-v5-c-content--FontSize: var(--pf-v5-global--FontSize--md);
5
5
  --pf-v5-c-content--FontWeight: var(--pf-v5-global--FontWeight--normal);
6
6
  --pf-v5-c-content--Color: var(--pf-v5-global--Color--100);
7
- --pf-v5-c-content--heading--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
7
+ --pf-v5-c-content--heading--FontFamily: var(--pf-v5-global--FontFamily--heading);
8
8
  --pf-v5-c-content--h1--MarginTop: var(--pf-v5-global--spacer--lg);
9
9
  --pf-v5-c-content--h1--MarginBottom: var(--pf-v5-global--spacer--sm);
10
10
  --pf-v5-c-content--h1--LineHeight: var(--pf-v5-global--LineHeight--sm);
package/components/Content/content.scss CHANGED
@@ -11,7 +11,7 @@
11
11
  --#{$content}--Color: var(--#{$pf-global}--Color--100);
12
12
 
13
13
  // Headings
14
- --#{$content}--heading--FontFamily: var(--#{$pf-global}--FontFamily--heading--sans-serif);
14
+ --#{$content}--heading--FontFamily: var(--#{$pf-global}--FontFamily--heading);
15
15
 
16
16
  // h1
17
17
  --#{$content}--h1--MarginTop: var(--#{$pf-global}--spacer--lg);
package/components/EmptyState/empty-state.css CHANGED
@@ -17,7 +17,7 @@
17
17
  --pf-v5-c-empty-state--m-xs__icon--MarginBottom: var(--pf-v5-global--spacer--md);
18
18
  --pf-v5-c-empty-state--m-xl__icon--MarginBottom: var(--pf-v5-global--spacer--xl);
19
19
  --pf-v5-c-empty-state--m-xl__icon--FontSize: 6.25rem;
20
- --pf-v5-c-empty-state__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
20
+ --pf-v5-c-empty-state__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
21
21
  --pf-v5-c-empty-state__title-text--FontSize: var(--pf-v5-global--FontSize--xl);
22
22
  --pf-v5-c-empty-state__title-text--FontWeight: var(--pf-v5-global--FontWeight--normal);
23
23
  --pf-v5-c-empty-state__title-text--LineHeight: var(--pf-v5-global--LineHeight--md);
package/components/EmptyState/empty-state.scss CHANGED
@@ -25,7 +25,7 @@
25
25
  --#{$empty-state}--m-xl__icon--FontSize: #{pf-size-prem(100px)};
26
26
 
27
27
  // Title text
28
- --#{$empty-state}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading--sans-serif);
28
+ --#{$empty-state}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading);
29
29
  --#{$empty-state}__title-text--FontSize: var(--#{$pf-global}--FontSize--xl);
30
30
  --#{$empty-state}__title-text--FontWeight: var(--#{$pf-global}--FontWeight--normal);
31
31
  --#{$empty-state}__title-text--LineHeight: var(--#{$pf-global}--LineHeight--md);
package/components/ModalBox/modal-box.css CHANGED
@@ -23,7 +23,7 @@
23
23
  --pf-v5-c-modal-box__header--PaddingLeft: var(--pf-v5-global--spacer--lg);
24
24
  --pf-v5-c-modal-box__header--last-child--PaddingBottom: var(--pf-v5-global--spacer--lg);
25
25
  --pf-v5-c-modal-box__title--LineHeight: var(--pf-v5-global--LineHeight--sm);
26
- --pf-v5-c-modal-box__title--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
26
+ --pf-v5-c-modal-box__title--FontFamily: var(--pf-v5-global--FontFamily--heading);
27
27
  --pf-v5-c-modal-box__title--FontSize: var(--pf-v5-global--FontSize--2xl);
28
28
  --pf-v5-c-modal-box__title-icon--MarginRight: var(--pf-v5-global--spacer--sm);
29
29
  --pf-v5-c-modal-box__title-icon--Color: var(--pf-v5-global--Color--100);
package/components/ModalBox/modal-box.scss CHANGED
@@ -35,7 +35,7 @@
35
35
 
36
36
  // Title
37
37
  --#{$modal-box}__title--LineHeight: var(--#{$pf-global}--LineHeight--sm);
38
- --#{$modal-box}__title--FontFamily: var(--#{$pf-global}--FontFamily--heading--sans-serif);
38
+ --#{$modal-box}__title--FontFamily: var(--#{$pf-global}--FontFamily--heading);
39
39
  --#{$modal-box}__title--FontSize: var(--#{$pf-global}--FontSize--2xl);
40
40
 
41
41
  // Title icon
package/components/Popover/popover.css CHANGED
@@ -39,7 +39,7 @@
39
39
  --pf-v5-c-popover__close--sibling--PaddingRight: var(--pf-v5-global--spacer--2xl);
40
40
  --pf-v5-c-popover__header--MarginBottom: var(--pf-v5-global--spacer--sm);
41
41
  --pf-v5-c-popover__title-text--LineHeight: var(--pf-v5-global--LineHeight--md);
42
- --pf-v5-c-popover__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
42
+ --pf-v5-c-popover__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
43
43
  --pf-v5-c-popover__title-text--FontSize: var(--pf-v5-global--FontSize--md);
44
44
  --pf-v5-c-popover__title-icon--MarginRight: var(--pf-v5-global--spacer--sm);
45
45
  --pf-v5-c-popover__title-icon--Color: var(--pf-v5-global--Color--100);
package/components/Popover/popover.scss CHANGED
@@ -56,7 +56,7 @@
56
56
 
57
57
  // Title text
58
58
  --#{$popover}__title-text--LineHeight: var(--#{$pf-global}--LineHeight--md);
59
- --#{$popover}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading--sans-serif);
59
+ --#{$popover}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading);
60
60
  --#{$popover}__title-text--FontSize: var(--#{$pf-global}--FontSize--md);
61
61
 
62
62
  // Title icon
package/components/Title/title.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .pf-v5-c-title {
2
- --pf-v5-c-title--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
2
+ --pf-v5-c-title--FontFamily: var(--pf-v5-global--FontFamily--heading);
3
3
  --pf-v5-c-title--m-4xl--LineHeight: var(--pf-v5-global--LineHeight--sm);
4
4
  --pf-v5-c-title--m-4xl--FontSize: var(--pf-v5-global--FontSize--4xl);
5
5
  --pf-v5-c-title--m-4xl--FontWeight: var(--pf-v5-global--FontWeight--normal);
package/components/Title/title.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  // @debug $title; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
3
  .#{$title} {
4
- --#{$title}--FontFamily: var(--#{$pf-global}--FontFamily--heading--sans-serif);
4
+ --#{$title}--FontFamily: var(--#{$pf-global}--FontFamily--heading);
5
5
 
6
6
  // 4xl
7
7
  --#{$title}--m-4xl--LineHeight: var(--#{$pf-global}--LineHeight--sm);
package/components/Wizard/wizard.css CHANGED
@@ -27,7 +27,7 @@
27
27
  --pf-v5-c-wizard__close--FontSize: var(--pf-v5-global--FontSize--xl);
28
28
  --pf-v5-c-wizard__title--PaddingRight: var(--pf-v5-global--spacer--2xl);
29
29
  --pf-v5-c-wizard__title-text--FontSize: var(--pf-v5-global--FontSize--3xl);
30
- --pf-v5-c-wizard__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
30
+ --pf-v5-c-wizard__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
31
31
  --pf-v5-c-wizard__title-text--FontWeight: var(--pf-v5-global--FontWeight--normal);
32
32
  --pf-v5-c-wizard__title-text--LineHeight: var(--pf-v5-global--LineHeight--sm);
33
33
  --pf-v5-c-wizard__description--PaddingTop: var(--pf-v5-global--spacer--sm);
package/components/Wizard/wizard.scss CHANGED
@@ -41,7 +41,7 @@
41
41
 
42
42
  // Title text
43
43
  --#{$wizard}__title-text--FontSize: var(--#{$pf-global}--FontSize--3xl);
44
- --#{$wizard}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading--sans-serif);
44
+ --#{$wizard}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading);
45
45
  --#{$wizard}__title-text--FontWeight: var(--#{$pf-global}--FontWeight--normal);
46
46
  --#{$wizard}__title-text--LineHeight: var(--#{$pf-global}--LineHeight--sm);
47
47
 
package/docs/utilities/Text/examples/Text.md CHANGED
@@ -8,18 +8,12 @@ section: utility-classes
8
8
  ### Font family
9
9
 
10
10
  ```html
11
- <div class="pf-v5-u-font-family-sans-serif">Sans serif</div>
12
- <div class="pf-v5-u-font-family-heading-sans-serif">Heading sans serif</div>
11
+ <div class="pf-v5-u-font-family-text">Text</div>
12
+ <div class="pf-v5-u-font-family-heading">Heading</div>
13
13
  <div class="pf-v5-u-font-family-monospace">Monospace</div>
14
- <div
15
- class="pf-v5-u-font-family-redhatVF-sans-serif"
16
- >Red Hat variable font sans serif</div>
17
- <div
18
- class="pf-v5-u-font-family-redhatVF-heading-sans-serif"
19
- >Red Hat variable font heading sans serif</div>
20
- <div
21
- class="pf-v5-u-font-family-redhatVF-monospace"
22
- >Red Hat variable font monospace</div>
14
+ <div class="pf-v5-u-font-family-text-vf">Variable font text</div>
15
+ <div class="pf-v5-u-font-family-heading-vf">Variable font heading</div>
16
+ <div class="pf-v5-u-font-family-monospace-vf">Variable font monospace</div>
23
17
 
24
18
  ```
25
19
 
@@ -171,30 +165,30 @@ Care should be taken especially when applying text colors, as this can have a ne
171
165
 
172
166
  ### Usage
173
167
 
174
- | Class | Applied to | Outcome |
175
- | ---------------------------------------------------------------------- | ---------- | --------------------------------------------------- |
176
- | `.pf-v5-u-font-size-{xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}`| `*` | Sets font-size to xs, sm, md, lg, xl, 2xl, 3xl, or 4xl |
177
- | `.pf-v5-u-font-family-{sans-serif, heading-sans-serif, monospace, redhatVF-sans-serif, redhatVF-heading-sans-serif, redhatVF-monospace}` | `*` | Sets font-family to sans-serif, heading-sans-serif, or monospace; or Red Hat virtual font sans-serif, heading sans-serif, or monospace |
178
- | `.pf-v5-u-font-weight-{light, normal, bold}{-on-[breakpoint]}` | `*` | Sets font-size to light, normal, or bold |
179
- | `.pf-v5-u-color-{100, 200, 300, 400}{-on-[breakpoint]}` | `*` | Sets font-color to color 100, 200, 300, or 400 |
180
- | `.pf-v5-u-active-color-{100, 400}{-on-[breakpoint]}` | `*` | Sets font-color to active color 100 or 400 |
181
- | `.pf-v5-u-primary-color-100{-on-[breakpoint]}` | `*` | Sets font-color to primary color 100 |
182
- | `.pf-v5-u-color-light-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to light color 100 or 200 |
183
- | `.pf-v5-u-link-color{-on-[breakpoint]}` | `*` | Sets font-color to link color |
184
- | `.pf-v5-u-link-color-hover{-on-[breakpoint]}` | `*` | Sets font-color to hover link color |
185
- | `.pf-v5-u-link-color-light{-on-[breakpoint]}` | `*` | Sets font-color to light link color |
186
- | `.pf-v5-u-link-color-light-hover{-on-[breakpoint]}` | `*` | Sets font-color to light hover link color |
187
- | `.pf-v5-u-link-color-dark{-on-[breakpoint]}` | `*` | Sets font-color to dark link color |
188
- | `.pf-v5-u-link-color-dark-hover{-on-[breakpoint]}` | `*` | Sets font-color to dark hover link color |
189
- | `.pf-v5-u-link-color-visited{-on-[breakpoint]}` | `*` | Sets font-color to visited link color |
190
- | `.pf-v5-u-custom-color-{100, 200, 300}{-on-[breakpoint]}` | `*` | Sets font-color to custom color 100, 200, or 300 |
191
- | `.pf-v5-u-success-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to success color 100 or 200 |
192
- | `.pf-v5-u-info-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to info color 100 or 200 |
193
- | `.pf-v5-u-warning-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to warning color 100 or 200 |
194
- | `.pf-v5-u-danger-color-{100, 200, 300}{-on-[breakpoint]}` | `*` | Sets font-color to danger color 100, 200, or 300 |
195
- | `.pf-v5-u-disabled-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to disabled color 100 or 200 |
196
- | `.pf-v5-u-icon-color-{light, dark}{-on-[breakpoint]}` | `*` | Sets font-color to light or dark icon color |
197
- | `.pf-v5-u-text-break-word{-on-[breakpoint]}` | `*` | Sets word-break to break-word |
198
- | `.pf-v5-u-text-nowrap{-on-[breakpoint]}` | `*` | Sets white-space to nowrap |
199
- | `.pf-v5-u-text-wrap{-on-[breakpoint]}` | `*` | Sets white-space to normal |
200
- | `.pf-v5-u-text-truncate` | `*` | Truncates text field |
168
+ | Class | Applied to | Outcome |
169
+ | - | - | - |
170
+ | `.pf-v5-u-font-size-{xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}`| `*` | Sets font-size to xs, sm, md, lg, xl, 2xl, 3xl, or 4xl |
171
+ | `.pf-v5-u-font-family-{text, heading, monospace, text-vf, heading-vf, monospace-vf}` | `*` | Sets font-family to text, heading, or monospace, or the variable font variation of that font family |
172
+ | `.pf-v5-u-font-weight-{normal, bold}{-on-[breakpoint]}` | `*` | Sets font-weight to light, normal, or bold |
173
+ | `.pf-v5-u-color-{100, 200, 300, 400}{-on-[breakpoint]}` | `*` | Sets font-color to color 100, 200, 300, or 400 |
174
+ | `.pf-v5-u-active-color-{100, 400}{-on-[breakpoint]}` | `*` | Sets font-color to active color 100 or 400 |
175
+ | `.pf-v5-u-primary-color-100{-on-[breakpoint]}` | `*` | Sets font-color to primary color 100 |
176
+ | `.pf-v5-u-color-light-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to light color 100 or 200 |
177
+ | `.pf-v5-u-link-color{-on-[breakpoint]}` | `*` | Sets font-color to link color |
178
+ | `.pf-v5-u-link-color-hover{-on-[breakpoint]}` | `*` | Sets font-color to hover link color |
179
+ | `.pf-v5-u-link-color-light{-on-[breakpoint]}` | `*` | Sets font-color to light link color |
180
+ | `.pf-v5-u-link-color-light-hover{-on-[breakpoint]}` | `*` | Sets font-color to light hover link color |
181
+ | `.pf-v5-u-link-color-dark{-on-[breakpoint]}` | `*` | Sets font-color to dark link color |
182
+ | `.pf-v5-u-link-color-dark-hover{-on-[breakpoint]}` | `*` | Sets font-color to dark hover link color |
183
+ | `.pf-v5-u-link-color-visited{-on-[breakpoint]}` | `*` | Sets font-color to visited link color |
184
+ | `.pf-v5-u-custom-color-{100, 200, 300}{-on-[breakpoint]}` | `*` | Sets font-color to custom color 100, 200, or 300 |
185
+ | `.pf-v5-u-success-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to success color 100 or 200 |
186
+ | `.pf-v5-u-info-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to info color 100 or 200 |
187
+ | `.pf-v5-u-warning-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to warning color 100 or 200 |
188
+ | `.pf-v5-u-danger-color-{100, 200, 300}{-on-[breakpoint]}` | `*` | Sets font-color to danger color 100, 200, or 300 |
189
+ | `.pf-v5-u-disabled-color-{100, 200}{-on-[breakpoint]}` | `*` | Sets font-color to disabled color 100 or 200 |
190
+ | `.pf-v5-u-icon-color-{light, dark}{-on-[breakpoint]}` | `*` | Sets font-color to light or dark icon color |
191
+ | `.pf-v5-u-text-break-word{-on-[breakpoint]}` | `*` | Sets word-break to break-word |
192
+ | `.pf-v5-u-text-nowrap{-on-[breakpoint]}` | `*` | Sets white-space to nowrap |
193
+ | `.pf-v5-u-text-wrap{-on-[breakpoint]}` | `*` | Sets white-space to normal |
194
+ | `.pf-v5-u-text-truncate` | `*` | Truncates text field |
package/layouts/Flex/flex.css CHANGED
@@ -1612,9 +1612,9 @@
1612
1612
  --pf-v5-l-flex--spacer: var(--pf-v5-l-flex--spacer--4xl);
1613
1613
  }
1614
1614
  }
1615
- .pf-v5-l-flex.pf-m-gap-invalid spacer base {
1616
- --pf-v5-l-flex--RowGap: ;
1617
- --pf-v5-l-flex--ColumnGap: ;
1615
+ .pf-v5-l-flex.pf-m-gap {
1616
+ --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
1617
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
1618
1618
  }
1619
1619
  .pf-v5-l-flex.pf-m-gap-none {
1620
1620
  --pf-v5-l-flex--RowGap: 0;
@@ -1648,14 +1648,14 @@
1648
1648
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1649
1649
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1650
1650
  }
1651
- .pf-v5-l-flex:is(.pf-m-gap-invalid spacer base, .pf-m-gap-none, .pf-m-gap-sm, .pf-m-gap-md, .pf-m-gap-lg, .pf-m-gap-xl, .pf-m-gap-2xl, .pf-m-gap-3xl, .pf-m-gap-4xl) > * {
1651
+ .pf-v5-l-flex:is(.pf-m-gap, .pf-m-gap-none, .pf-m-gap-sm, .pf-m-gap-md, .pf-m-gap-lg, .pf-m-gap-xl, .pf-m-gap-2xl, .pf-m-gap-3xl, .pf-m-gap-4xl) > * {
1652
1652
  --pf-v5-l-flex--spacer--row: 0;
1653
1653
  --pf-v5-l-flex--spacer--column: 0;
1654
1654
  }
1655
1655
  @media (min-width: 576px) {
1656
- .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-sm {
1657
- --pf-v5-l-flex--RowGap: ;
1658
- --pf-v5-l-flex--ColumnGap: ;
1656
+ .pf-v5-l-flex.pf-m-gap-on-sm {
1657
+ --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
1658
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
1659
1659
  }
1660
1660
  .pf-v5-l-flex.pf-m-gap-none-on-sm {
1661
1661
  --pf-v5-l-flex--RowGap: 0;
@@ -1689,15 +1689,15 @@
1689
1689
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1690
1690
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1691
1691
  }
1692
- .pf-v5-l-flex:is(.pf-m-gap-invalid spacer base-on-sm, .pf-m-gap-none-on-sm, .pf-m-gap-sm-on-sm, .pf-m-gap-md-on-sm, .pf-m-gap-lg-on-sm, .pf-m-gap-xl-on-sm, .pf-m-gap-2xl-on-sm, .pf-m-gap-3xl-on-sm, .pf-m-gap-4xl-on-sm) > * {
1692
+ .pf-v5-l-flex:is(.pf-m-gap-on-sm, .pf-m-gap-none-on-sm, .pf-m-gap-sm-on-sm, .pf-m-gap-md-on-sm, .pf-m-gap-lg-on-sm, .pf-m-gap-xl-on-sm, .pf-m-gap-2xl-on-sm, .pf-m-gap-3xl-on-sm, .pf-m-gap-4xl-on-sm) > * {
1693
1693
  --pf-v5-l-flex--spacer--row: 0;
1694
1694
  --pf-v5-l-flex--spacer--column: 0;
1695
1695
  }
1696
1696
  }
1697
1697
  @media (min-width: 768px) {
1698
- .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-md {
1699
- --pf-v5-l-flex--RowGap: ;
1700
- --pf-v5-l-flex--ColumnGap: ;
1698
+ .pf-v5-l-flex.pf-m-gap-on-md {
1699
+ --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
1700
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
1701
1701
  }
1702
1702
  .pf-v5-l-flex.pf-m-gap-none-on-md {
1703
1703
  --pf-v5-l-flex--RowGap: 0;
@@ -1731,15 +1731,15 @@
1731
1731
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1732
1732
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1733
1733
  }
1734
- .pf-v5-l-flex:is(.pf-m-gap-invalid spacer base-on-md, .pf-m-gap-none-on-md, .pf-m-gap-sm-on-md, .pf-m-gap-md-on-md, .pf-m-gap-lg-on-md, .pf-m-gap-xl-on-md, .pf-m-gap-2xl-on-md, .pf-m-gap-3xl-on-md, .pf-m-gap-4xl-on-md) > * {
1734
+ .pf-v5-l-flex:is(.pf-m-gap-on-md, .pf-m-gap-none-on-md, .pf-m-gap-sm-on-md, .pf-m-gap-md-on-md, .pf-m-gap-lg-on-md, .pf-m-gap-xl-on-md, .pf-m-gap-2xl-on-md, .pf-m-gap-3xl-on-md, .pf-m-gap-4xl-on-md) > * {
1735
1735
  --pf-v5-l-flex--spacer--row: 0;
1736
1736
  --pf-v5-l-flex--spacer--column: 0;
1737
1737
  }
1738
1738
  }
1739
1739
  @media (min-width: 992px) {
1740
- .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-lg {
1741
- --pf-v5-l-flex--RowGap: ;
1742
- --pf-v5-l-flex--ColumnGap: ;
1740
+ .pf-v5-l-flex.pf-m-gap-on-lg {
1741
+ --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
1742
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
1743
1743
  }
1744
1744
  .pf-v5-l-flex.pf-m-gap-none-on-lg {
1745
1745
  --pf-v5-l-flex--RowGap: 0;
@@ -1773,15 +1773,15 @@
1773
1773
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1774
1774
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1775
1775
  }
1776
- .pf-v5-l-flex:is(.pf-m-gap-invalid spacer base-on-lg, .pf-m-gap-none-on-lg, .pf-m-gap-sm-on-lg, .pf-m-gap-md-on-lg, .pf-m-gap-lg-on-lg, .pf-m-gap-xl-on-lg, .pf-m-gap-2xl-on-lg, .pf-m-gap-3xl-on-lg, .pf-m-gap-4xl-on-lg) > * {
1776
+ .pf-v5-l-flex:is(.pf-m-gap-on-lg, .pf-m-gap-none-on-lg, .pf-m-gap-sm-on-lg, .pf-m-gap-md-on-lg, .pf-m-gap-lg-on-lg, .pf-m-gap-xl-on-lg, .pf-m-gap-2xl-on-lg, .pf-m-gap-3xl-on-lg, .pf-m-gap-4xl-on-lg) > * {
1777
1777
  --pf-v5-l-flex--spacer--row: 0;
1778
1778
  --pf-v5-l-flex--spacer--column: 0;
1779
1779
  }
1780
1780
  }
1781
1781
  @media (min-width: 1200px) {
1782
- .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-xl {
1783
- --pf-v5-l-flex--RowGap: ;
1784
- --pf-v5-l-flex--ColumnGap: ;
1782
+ .pf-v5-l-flex.pf-m-gap-on-xl {
1783
+ --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
1784
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
1785
1785
  }
1786
1786
  .pf-v5-l-flex.pf-m-gap-none-on-xl {
1787
1787
  --pf-v5-l-flex--RowGap: 0;
@@ -1815,15 +1815,15 @@
1815
1815
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1816
1816
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1817
1817
  }
1818
- .pf-v5-l-flex:is(.pf-m-gap-invalid spacer base-on-xl, .pf-m-gap-none-on-xl, .pf-m-gap-sm-on-xl, .pf-m-gap-md-on-xl, .pf-m-gap-lg-on-xl, .pf-m-gap-xl-on-xl, .pf-m-gap-2xl-on-xl, .pf-m-gap-3xl-on-xl, .pf-m-gap-4xl-on-xl) > * {
1818
+ .pf-v5-l-flex:is(.pf-m-gap-on-xl, .pf-m-gap-none-on-xl, .pf-m-gap-sm-on-xl, .pf-m-gap-md-on-xl, .pf-m-gap-lg-on-xl, .pf-m-gap-xl-on-xl, .pf-m-gap-2xl-on-xl, .pf-m-gap-3xl-on-xl, .pf-m-gap-4xl-on-xl) > * {
1819
1819
  --pf-v5-l-flex--spacer--row: 0;
1820
1820
  --pf-v5-l-flex--spacer--column: 0;
1821
1821
  }
1822
1822
  }
1823
1823
  @media (min-width: 1450px) {
1824
- .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-2xl {
1825
- --pf-v5-l-flex--RowGap: ;
1826
- --pf-v5-l-flex--ColumnGap: ;
1824
+ .pf-v5-l-flex.pf-m-gap-on-2xl {
1825
+ --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
1826
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
1827
1827
  }
1828
1828
  .pf-v5-l-flex.pf-m-gap-none-on-2xl {
1829
1829
  --pf-v5-l-flex--RowGap: 0;
@@ -1857,13 +1857,13 @@
1857
1857
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1858
1858
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1859
1859
  }
1860
- .pf-v5-l-flex:is(.pf-m-gap-invalid spacer base-on-2xl, .pf-m-gap-none-on-2xl, .pf-m-gap-sm-on-2xl, .pf-m-gap-md-on-2xl, .pf-m-gap-lg-on-2xl, .pf-m-gap-xl-on-2xl, .pf-m-gap-2xl-on-2xl, .pf-m-gap-3xl-on-2xl, .pf-m-gap-4xl-on-2xl) > * {
1860
+ .pf-v5-l-flex:is(.pf-m-gap-on-2xl, .pf-m-gap-none-on-2xl, .pf-m-gap-sm-on-2xl, .pf-m-gap-md-on-2xl, .pf-m-gap-lg-on-2xl, .pf-m-gap-xl-on-2xl, .pf-m-gap-2xl-on-2xl, .pf-m-gap-3xl-on-2xl, .pf-m-gap-4xl-on-2xl) > * {
1861
1861
  --pf-v5-l-flex--spacer--row: 0;
1862
1862
  --pf-v5-l-flex--spacer--column: 0;
1863
1863
  }
1864
1864
  }
1865
- .pf-v5-l-flex.pf-m-row-gap-invalid spacer base {
1866
- --pf-v5-l-flex--RowGap: ;
1865
+ .pf-v5-l-flex.pf-m-row-gap {
1866
+ --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
1867
1867
  }
1868
1868
  .pf-v5-l-flex.pf-m-row-gap-none {
1869
1869
  --pf-v5-l-flex--RowGap: 0;
@@ -1889,12 +1889,12 @@
1889
1889
  .pf-v5-l-flex.pf-m-row-gap-4xl {
1890
1890
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1891
1891
  }
1892
- .pf-v5-l-flex:is(.pf-m-row-gap-invalid spacer base, .pf-m-row-gap-none, .pf-m-row-gap-sm, .pf-m-row-gap-md, .pf-m-row-gap-lg, .pf-m-row-gap-xl, .pf-m-row-gap-2xl, .pf-m-row-gap-3xl, .pf-m-row-gap-4xl) > * {
1892
+ .pf-v5-l-flex:is(.pf-m-row-gap, .pf-m-row-gap-none, .pf-m-row-gap-sm, .pf-m-row-gap-md, .pf-m-row-gap-lg, .pf-m-row-gap-xl, .pf-m-row-gap-2xl, .pf-m-row-gap-3xl, .pf-m-row-gap-4xl) > * {
1893
1893
  --pf-v5-l-flex--spacer--row: 0;
1894
1894
  }
1895
1895
  @media (min-width: 576px) {
1896
- .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-sm {
1897
- --pf-v5-l-flex--RowGap: ;
1896
+ .pf-v5-l-flex.pf-m-row-gap-on-sm {
1897
+ --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
1898
1898
  }
1899
1899
  .pf-v5-l-flex.pf-m-row-gap-none-on-sm {
1900
1900
  --pf-v5-l-flex--RowGap: 0;
@@ -1920,13 +1920,13 @@
1920
1920
  .pf-v5-l-flex.pf-m-row-gap-4xl-on-sm {
1921
1921
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1922
1922
  }
1923
- .pf-v5-l-flex:is(.pf-m-row-gap-invalid spacer base-on-sm, .pf-m-row-gap-none-on-sm, .pf-m-row-gap-sm-on-sm, .pf-m-row-gap-md-on-sm, .pf-m-row-gap-lg-on-sm, .pf-m-row-gap-xl-on-sm, .pf-m-row-gap-2xl-on-sm, .pf-m-row-gap-3xl-on-sm, .pf-m-row-gap-4xl-on-sm) > * {
1923
+ .pf-v5-l-flex:is(.pf-m-row-gap-on-sm, .pf-m-row-gap-none-on-sm, .pf-m-row-gap-sm-on-sm, .pf-m-row-gap-md-on-sm, .pf-m-row-gap-lg-on-sm, .pf-m-row-gap-xl-on-sm, .pf-m-row-gap-2xl-on-sm, .pf-m-row-gap-3xl-on-sm, .pf-m-row-gap-4xl-on-sm) > * {
1924
1924
  --pf-v5-l-flex--spacer--row: 0;
1925
1925
  }
1926
1926
  }
1927
1927
  @media (min-width: 768px) {
1928
- .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-md {
1929
- --pf-v5-l-flex--RowGap: ;
1928
+ .pf-v5-l-flex.pf-m-row-gap-on-md {
1929
+ --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
1930
1930
  }
1931
1931
  .pf-v5-l-flex.pf-m-row-gap-none-on-md {
1932
1932
  --pf-v5-l-flex--RowGap: 0;
@@ -1952,13 +1952,13 @@
1952
1952
  .pf-v5-l-flex.pf-m-row-gap-4xl-on-md {
1953
1953
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1954
1954
  }
1955
- .pf-v5-l-flex:is(.pf-m-row-gap-invalid spacer base-on-md, .pf-m-row-gap-none-on-md, .pf-m-row-gap-sm-on-md, .pf-m-row-gap-md-on-md, .pf-m-row-gap-lg-on-md, .pf-m-row-gap-xl-on-md, .pf-m-row-gap-2xl-on-md, .pf-m-row-gap-3xl-on-md, .pf-m-row-gap-4xl-on-md) > * {
1955
+ .pf-v5-l-flex:is(.pf-m-row-gap-on-md, .pf-m-row-gap-none-on-md, .pf-m-row-gap-sm-on-md, .pf-m-row-gap-md-on-md, .pf-m-row-gap-lg-on-md, .pf-m-row-gap-xl-on-md, .pf-m-row-gap-2xl-on-md, .pf-m-row-gap-3xl-on-md, .pf-m-row-gap-4xl-on-md) > * {
1956
1956
  --pf-v5-l-flex--spacer--row: 0;
1957
1957
  }
1958
1958
  }
1959
1959
  @media (min-width: 992px) {
1960
- .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-lg {
1961
- --pf-v5-l-flex--RowGap: ;
1960
+ .pf-v5-l-flex.pf-m-row-gap-on-lg {
1961
+ --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
1962
1962
  }
1963
1963
  .pf-v5-l-flex.pf-m-row-gap-none-on-lg {
1964
1964
  --pf-v5-l-flex--RowGap: 0;
@@ -1984,13 +1984,13 @@
1984
1984
  .pf-v5-l-flex.pf-m-row-gap-4xl-on-lg {
1985
1985
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1986
1986
  }
1987
- .pf-v5-l-flex:is(.pf-m-row-gap-invalid spacer base-on-lg, .pf-m-row-gap-none-on-lg, .pf-m-row-gap-sm-on-lg, .pf-m-row-gap-md-on-lg, .pf-m-row-gap-lg-on-lg, .pf-m-row-gap-xl-on-lg, .pf-m-row-gap-2xl-on-lg, .pf-m-row-gap-3xl-on-lg, .pf-m-row-gap-4xl-on-lg) > * {
1987
+ .pf-v5-l-flex:is(.pf-m-row-gap-on-lg, .pf-m-row-gap-none-on-lg, .pf-m-row-gap-sm-on-lg, .pf-m-row-gap-md-on-lg, .pf-m-row-gap-lg-on-lg, .pf-m-row-gap-xl-on-lg, .pf-m-row-gap-2xl-on-lg, .pf-m-row-gap-3xl-on-lg, .pf-m-row-gap-4xl-on-lg) > * {
1988
1988
  --pf-v5-l-flex--spacer--row: 0;
1989
1989
  }
1990
1990
  }
1991
1991
  @media (min-width: 1200px) {
1992
- .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-xl {
1993
- --pf-v5-l-flex--RowGap: ;
1992
+ .pf-v5-l-flex.pf-m-row-gap-on-xl {
1993
+ --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
1994
1994
  }
1995
1995
  .pf-v5-l-flex.pf-m-row-gap-none-on-xl {
1996
1996
  --pf-v5-l-flex--RowGap: 0;
@@ -2016,13 +2016,13 @@
2016
2016
  .pf-v5-l-flex.pf-m-row-gap-4xl-on-xl {
2017
2017
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
2018
2018
  }
2019
- .pf-v5-l-flex:is(.pf-m-row-gap-invalid spacer base-on-xl, .pf-m-row-gap-none-on-xl, .pf-m-row-gap-sm-on-xl, .pf-m-row-gap-md-on-xl, .pf-m-row-gap-lg-on-xl, .pf-m-row-gap-xl-on-xl, .pf-m-row-gap-2xl-on-xl, .pf-m-row-gap-3xl-on-xl, .pf-m-row-gap-4xl-on-xl) > * {
2019
+ .pf-v5-l-flex:is(.pf-m-row-gap-on-xl, .pf-m-row-gap-none-on-xl, .pf-m-row-gap-sm-on-xl, .pf-m-row-gap-md-on-xl, .pf-m-row-gap-lg-on-xl, .pf-m-row-gap-xl-on-xl, .pf-m-row-gap-2xl-on-xl, .pf-m-row-gap-3xl-on-xl, .pf-m-row-gap-4xl-on-xl) > * {
2020
2020
  --pf-v5-l-flex--spacer--row: 0;
2021
2021
  }
2022
2022
  }
2023
2023
  @media (min-width: 1450px) {
2024
- .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-2xl {
2025
- --pf-v5-l-flex--RowGap: ;
2024
+ .pf-v5-l-flex.pf-m-row-gap-on-2xl {
2025
+ --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
2026
2026
  }
2027
2027
  .pf-v5-l-flex.pf-m-row-gap-none-on-2xl {
2028
2028
  --pf-v5-l-flex--RowGap: 0;
@@ -2048,12 +2048,12 @@
2048
2048
  .pf-v5-l-flex.pf-m-row-gap-4xl-on-2xl {
2049
2049
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
2050
2050
  }
2051
- .pf-v5-l-flex:is(.pf-m-row-gap-invalid spacer base-on-2xl, .pf-m-row-gap-none-on-2xl, .pf-m-row-gap-sm-on-2xl, .pf-m-row-gap-md-on-2xl, .pf-m-row-gap-lg-on-2xl, .pf-m-row-gap-xl-on-2xl, .pf-m-row-gap-2xl-on-2xl, .pf-m-row-gap-3xl-on-2xl, .pf-m-row-gap-4xl-on-2xl) > * {
2051
+ .pf-v5-l-flex:is(.pf-m-row-gap-on-2xl, .pf-m-row-gap-none-on-2xl, .pf-m-row-gap-sm-on-2xl, .pf-m-row-gap-md-on-2xl, .pf-m-row-gap-lg-on-2xl, .pf-m-row-gap-xl-on-2xl, .pf-m-row-gap-2xl-on-2xl, .pf-m-row-gap-3xl-on-2xl, .pf-m-row-gap-4xl-on-2xl) > * {
2052
2052
  --pf-v5-l-flex--spacer--row: 0;
2053
2053
  }
2054
2054
  }
2055
- .pf-v5-l-flex.pf-m-column-gap-invalid spacer base {
2056
- --pf-v5-l-flex--ColumnGap: ;
2055
+ .pf-v5-l-flex.pf-m-column-gap {
2056
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
2057
2057
  }
2058
2058
  .pf-v5-l-flex.pf-m-column-gap-none {
2059
2059
  --pf-v5-l-flex--ColumnGap: 0;
@@ -2079,12 +2079,12 @@
2079
2079
  .pf-v5-l-flex.pf-m-column-gap-4xl {
2080
2080
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2081
2081
  }
2082
- .pf-v5-l-flex:is(.pf-m-column-gap-invalid spacer base, .pf-m-column-gap-none, .pf-m-column-gap-sm, .pf-m-column-gap-md, .pf-m-column-gap-lg, .pf-m-column-gap-xl, .pf-m-column-gap-2xl, .pf-m-column-gap-3xl, .pf-m-column-gap-4xl) > * {
2082
+ .pf-v5-l-flex:is(.pf-m-column-gap, .pf-m-column-gap-none, .pf-m-column-gap-sm, .pf-m-column-gap-md, .pf-m-column-gap-lg, .pf-m-column-gap-xl, .pf-m-column-gap-2xl, .pf-m-column-gap-3xl, .pf-m-column-gap-4xl) > * {
2083
2083
  --pf-v5-l-flex--spacer--column: 0;
2084
2084
  }
2085
2085
  @media (min-width: 576px) {
2086
- .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-sm {
2087
- --pf-v5-l-flex--ColumnGap: ;
2086
+ .pf-v5-l-flex.pf-m-column-gap-on-sm {
2087
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
2088
2088
  }
2089
2089
  .pf-v5-l-flex.pf-m-column-gap-none-on-sm {
2090
2090
  --pf-v5-l-flex--ColumnGap: 0;
@@ -2110,13 +2110,13 @@
2110
2110
  .pf-v5-l-flex.pf-m-column-gap-4xl-on-sm {
2111
2111
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2112
2112
  }
2113
- .pf-v5-l-flex:is(.pf-m-column-gap-invalid spacer base-on-sm, .pf-m-column-gap-none-on-sm, .pf-m-column-gap-sm-on-sm, .pf-m-column-gap-md-on-sm, .pf-m-column-gap-lg-on-sm, .pf-m-column-gap-xl-on-sm, .pf-m-column-gap-2xl-on-sm, .pf-m-column-gap-3xl-on-sm, .pf-m-column-gap-4xl-on-sm) > * {
2113
+ .pf-v5-l-flex:is(.pf-m-column-gap-on-sm, .pf-m-column-gap-none-on-sm, .pf-m-column-gap-sm-on-sm, .pf-m-column-gap-md-on-sm, .pf-m-column-gap-lg-on-sm, .pf-m-column-gap-xl-on-sm, .pf-m-column-gap-2xl-on-sm, .pf-m-column-gap-3xl-on-sm, .pf-m-column-gap-4xl-on-sm) > * {
2114
2114
  --pf-v5-l-flex--spacer--column: 0;
2115
2115
  }
2116
2116
  }
2117
2117
  @media (min-width: 768px) {
2118
- .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-md {
2119
- --pf-v5-l-flex--ColumnGap: ;
2118
+ .pf-v5-l-flex.pf-m-column-gap-on-md {
2119
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
2120
2120
  }
2121
2121
  .pf-v5-l-flex.pf-m-column-gap-none-on-md {
2122
2122
  --pf-v5-l-flex--ColumnGap: 0;
@@ -2142,13 +2142,13 @@
2142
2142
  .pf-v5-l-flex.pf-m-column-gap-4xl-on-md {
2143
2143
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2144
2144
  }
2145
- .pf-v5-l-flex:is(.pf-m-column-gap-invalid spacer base-on-md, .pf-m-column-gap-none-on-md, .pf-m-column-gap-sm-on-md, .pf-m-column-gap-md-on-md, .pf-m-column-gap-lg-on-md, .pf-m-column-gap-xl-on-md, .pf-m-column-gap-2xl-on-md, .pf-m-column-gap-3xl-on-md, .pf-m-column-gap-4xl-on-md) > * {
2145
+ .pf-v5-l-flex:is(.pf-m-column-gap-on-md, .pf-m-column-gap-none-on-md, .pf-m-column-gap-sm-on-md, .pf-m-column-gap-md-on-md, .pf-m-column-gap-lg-on-md, .pf-m-column-gap-xl-on-md, .pf-m-column-gap-2xl-on-md, .pf-m-column-gap-3xl-on-md, .pf-m-column-gap-4xl-on-md) > * {
2146
2146
  --pf-v5-l-flex--spacer--column: 0;
2147
2147
  }
2148
2148
  }
2149
2149
  @media (min-width: 992px) {
2150
- .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-lg {
2151
- --pf-v5-l-flex--ColumnGap: ;
2150
+ .pf-v5-l-flex.pf-m-column-gap-on-lg {
2151
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
2152
2152
  }
2153
2153
  .pf-v5-l-flex.pf-m-column-gap-none-on-lg {
2154
2154
  --pf-v5-l-flex--ColumnGap: 0;
@@ -2174,13 +2174,13 @@
2174
2174
  .pf-v5-l-flex.pf-m-column-gap-4xl-on-lg {
2175
2175
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2176
2176
  }
2177
- .pf-v5-l-flex:is(.pf-m-column-gap-invalid spacer base-on-lg, .pf-m-column-gap-none-on-lg, .pf-m-column-gap-sm-on-lg, .pf-m-column-gap-md-on-lg, .pf-m-column-gap-lg-on-lg, .pf-m-column-gap-xl-on-lg, .pf-m-column-gap-2xl-on-lg, .pf-m-column-gap-3xl-on-lg, .pf-m-column-gap-4xl-on-lg) > * {
2177
+ .pf-v5-l-flex:is(.pf-m-column-gap-on-lg, .pf-m-column-gap-none-on-lg, .pf-m-column-gap-sm-on-lg, .pf-m-column-gap-md-on-lg, .pf-m-column-gap-lg-on-lg, .pf-m-column-gap-xl-on-lg, .pf-m-column-gap-2xl-on-lg, .pf-m-column-gap-3xl-on-lg, .pf-m-column-gap-4xl-on-lg) > * {
2178
2178
  --pf-v5-l-flex--spacer--column: 0;
2179
2179
  }
2180
2180
  }
2181
2181
  @media (min-width: 1200px) {
2182
- .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-xl {
2183
- --pf-v5-l-flex--ColumnGap: ;
2182
+ .pf-v5-l-flex.pf-m-column-gap-on-xl {
2183
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
2184
2184
  }
2185
2185
  .pf-v5-l-flex.pf-m-column-gap-none-on-xl {
2186
2186
  --pf-v5-l-flex--ColumnGap: 0;
@@ -2206,13 +2206,13 @@
2206
2206
  .pf-v5-l-flex.pf-m-column-gap-4xl-on-xl {
2207
2207
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2208
2208
  }
2209
- .pf-v5-l-flex:is(.pf-m-column-gap-invalid spacer base-on-xl, .pf-m-column-gap-none-on-xl, .pf-m-column-gap-sm-on-xl, .pf-m-column-gap-md-on-xl, .pf-m-column-gap-lg-on-xl, .pf-m-column-gap-xl-on-xl, .pf-m-column-gap-2xl-on-xl, .pf-m-column-gap-3xl-on-xl, .pf-m-column-gap-4xl-on-xl) > * {
2209
+ .pf-v5-l-flex:is(.pf-m-column-gap-on-xl, .pf-m-column-gap-none-on-xl, .pf-m-column-gap-sm-on-xl, .pf-m-column-gap-md-on-xl, .pf-m-column-gap-lg-on-xl, .pf-m-column-gap-xl-on-xl, .pf-m-column-gap-2xl-on-xl, .pf-m-column-gap-3xl-on-xl, .pf-m-column-gap-4xl-on-xl) > * {
2210
2210
  --pf-v5-l-flex--spacer--column: 0;
2211
2211
  }
2212
2212
  }
2213
2213
  @media (min-width: 1450px) {
2214
- .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-2xl {
2215
- --pf-v5-l-flex--ColumnGap: ;
2214
+ .pf-v5-l-flex.pf-m-column-gap-on-2xl {
2215
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
2216
2216
  }
2217
2217
  .pf-v5-l-flex.pf-m-column-gap-none-on-2xl {
2218
2218
  --pf-v5-l-flex--ColumnGap: 0;
@@ -2238,7 +2238,7 @@
2238
2238
  .pf-v5-l-flex.pf-m-column-gap-4xl-on-2xl {
2239
2239
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2240
2240
  }
2241
- .pf-v5-l-flex:is(.pf-m-column-gap-invalid spacer base-on-2xl, .pf-m-column-gap-none-on-2xl, .pf-m-column-gap-sm-on-2xl, .pf-m-column-gap-md-on-2xl, .pf-m-column-gap-lg-on-2xl, .pf-m-column-gap-xl-on-2xl, .pf-m-column-gap-2xl-on-2xl, .pf-m-column-gap-3xl-on-2xl, .pf-m-column-gap-4xl-on-2xl) > * {
2241
+ .pf-v5-l-flex:is(.pf-m-column-gap-on-2xl, .pf-m-column-gap-none-on-2xl, .pf-m-column-gap-sm-on-2xl, .pf-m-column-gap-md-on-2xl, .pf-m-column-gap-lg-on-2xl, .pf-m-column-gap-xl-on-2xl, .pf-m-column-gap-2xl-on-2xl, .pf-m-column-gap-3xl-on-2xl, .pf-m-column-gap-4xl-on-2xl) > * {
2242
2242
  --pf-v5-l-flex--spacer--column: 0;
2243
2243
  }
2244
2244
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "5.0.0-alpha.55",
4
+ "version": "5.0.0-alpha.57",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -44,9 +44,9 @@
44
44
  "@octokit/rest": "^19.0.7",
45
45
  "@patternfly/documentation-framework": "2.0.0-alpha.41",
46
46
  "@patternfly/patternfly-a11y": "4.3.1",
47
- "@patternfly/react-code-editor": "5.0.0-alpha.92",
48
- "@patternfly/react-core": "5.0.0-alpha.101",
49
- "@patternfly/react-table": "5.0.0-alpha.93",
47
+ "@patternfly/react-code-editor": "5.0.0-alpha.105",
48
+ "@patternfly/react-core": "5.0.0-alpha.102",
49
+ "@patternfly/react-table": "5.0.0-alpha.106",
50
50
  "@starptech/prettyhtml": "^0.10.0",
51
51
  "cheerio": "^1.0.0-rc.12",
52
52
  "commander": "^10.0.0",