@patternfly/patternfly 5.0.0-alpha.63 → 5.0.0-alpha.65

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 (76) hide show
  1. package/base/_globals.scss +1 -1
  2. package/base/_themes.scss +2 -2
  3. package/base/_variables.scss +1 -1
  4. package/base/themes/dark/_variables.scss +1 -1
  5. package/components/AboutModalBox/about-modal-box.css +2 -2
  6. package/components/Accordion/accordion.css +1 -1
  7. package/components/Alert/alert.css +1 -1
  8. package/components/AppLauncher/app-launcher.css +1 -1
  9. package/components/Badge/badge.css +1 -1
  10. package/components/Banner/banner.css +3 -3
  11. package/components/Button/button.css +2 -2
  12. package/components/CalendarMonth/calendar-month.css +3 -3
  13. package/components/Card/card.css +2 -2
  14. package/components/Chip/chip.css +1 -1
  15. package/components/ClipboardCopy/clipboard-copy.css +3 -3
  16. package/components/CodeEditor/code-editor.css +1 -1
  17. package/components/ContextSelector/context-selector.css +5 -5
  18. package/components/DataList/data-list.css +1 -1
  19. package/components/DatePicker/date-picker.css +1 -1
  20. package/components/DragDrop/drag-drop.css +1 -1
  21. package/components/Drawer/drawer.css +2 -2
  22. package/components/Dropdown/dropdown.css +3 -3
  23. package/components/DualListSelector/dual-list-selector.css +1 -1
  24. package/components/Form/form.css +1 -1
  25. package/components/FormControl/form-control.css +3 -3
  26. package/components/HelperText/helper-text.css +1 -1
  27. package/components/Hint/hint.css +1 -1
  28. package/components/InputGroup/input-group.css +2 -2
  29. package/components/Label/label.css +1 -1
  30. package/components/LogViewer/log-viewer.css +2 -2
  31. package/components/Login/login.css +5 -5
  32. package/components/Masthead/masthead.css +3 -3
  33. package/components/Menu/menu.css +1 -1
  34. package/components/MenuToggle/menu-toggle.css +2 -2
  35. package/components/ModalBox/modal-box.css +1 -1
  36. package/components/Nav/nav.css +6 -6
  37. package/components/NotificationBadge/notification-badge.css +1 -1
  38. package/components/NotificationDrawer/notification-drawer.css +1 -1
  39. package/components/OptionsMenu/options-menu.css +2 -2
  40. package/components/Page/page.css +14 -14
  41. package/components/Pagination/pagination.css +1 -1
  42. package/components/Panel/panel.css +1 -1
  43. package/components/Popover/popover.css +1 -1
  44. package/components/Progress/progress.css +1 -1
  45. package/components/Select/select.css +2 -2
  46. package/components/SimpleList/simple-list.css +1 -1
  47. package/components/Skeleton/skeleton.css +1 -1
  48. package/components/Switch/switch.css +1 -1
  49. package/components/Table/table.css +2 -2
  50. package/components/Tabs/tabs.css +1 -1
  51. package/components/TextInputGroup/text-input-group.css +1 -1
  52. package/components/Tile/tile.css +1 -1
  53. package/components/ToggleGroup/toggle-group.css +1 -1
  54. package/components/Tooltip/tooltip.css +1 -1
  55. package/components/TreeView/tree-view.css +1 -1
  56. package/components/Wizard/wizard.css +3 -3
  57. package/layouts/Flex/flex.css +78 -18
  58. package/layouts/Flex/flex.scss +1 -1
  59. package/package.json +1 -1
  60. package/patternfly-addons.css +78 -78
  61. package/patternfly-base-no-globals-theme-dark-unversioned.css +5234 -0
  62. package/patternfly-base-no-globals-theme-dark-unversioned.scss +11 -0
  63. package/patternfly-base-theme-dark-unversioned.css +5351 -0
  64. package/patternfly-base-theme-dark-unversioned.scss +5 -0
  65. package/patternfly-charts-theme-dark-unversioned.css +70 -0
  66. package/patternfly-charts-theme-dark-unversioned.scss +8 -0
  67. package/patternfly-no-globals.css +382 -322
  68. package/patternfly-theme-dark-unversioned.css +34440 -0
  69. package/patternfly-theme-dark-unversioned.scss +6 -0
  70. package/patternfly.css +382 -322
  71. package/patternfly.min.css +1 -1
  72. package/patternfly.min.css.map +1 -1
  73. package/sass-utilities/_init.scss +20 -0
  74. package/sass-utilities/mixins.scss +2 -2
  75. package/utilities/BackgroundColor/BackgroundColor.css +30 -30
  76. package/utilities/Text/text.css +48 -48
package/components/Pagination/pagination.css CHANGED
@@ -398,6 +398,6 @@
398
398
  }
399
399
  }
400
400
 
401
- :where(.pf-v5-theme-dark) .pf-v5-c-pagination {
401
+ :root:where(.pf-v5-theme-dark) .pf-v5-c-pagination {
402
402
  --pf-v5-c-pagination--m-sticky--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
403
403
  }
package/components/Panel/panel.css CHANGED
@@ -79,6 +79,6 @@
79
79
  box-shadow: var(--pf-v5-c-panel__footer--BoxShadow);
80
80
  }
81
81
 
82
- :where(.pf-v5-theme-dark) .pf-v5-c-panel {
82
+ :root:where(.pf-v5-theme-dark) .pf-v5-c-panel {
83
83
  --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
84
84
  }
package/components/Popover/popover.css CHANGED
@@ -170,7 +170,7 @@
170
170
  margin-top: var(--pf-v5-c-popover__footer--MarginTop);
171
171
  }
172
172
 
173
- :where(.pf-v5-theme-dark) .pf-v5-c-popover {
173
+ :root:where(.pf-v5-theme-dark) .pf-v5-c-popover {
174
174
  --pf-v5-c-popover__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
175
175
  --pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
176
176
  --pf-v5-c-popover--m-custom__title-text--Color: var(--pf-v5-global--custom-color--200);
package/components/Progress/progress.css CHANGED
@@ -165,7 +165,7 @@
165
165
  margin-top: var(--pf-v5-c-progress__helper-text--MarginTop);
166
166
  }
167
167
 
168
- :where(.pf-v5-theme-dark) .pf-v5-c-progress {
168
+ :root:where(.pf-v5-theme-dark) .pf-v5-c-progress {
169
169
  --pf-v5-c-progress--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
170
170
  --pf-v5-c-progress--m-success--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
171
171
  --pf-v5-c-progress--m-warning--m-inside__measure--Color: var(--pf-v5-global--palette--black-900);
package/components/Select/select.css CHANGED
@@ -580,7 +580,7 @@
580
580
  box-shadow: var(--pf-v5-c-select__menu-footer--BoxShadow);
581
581
  }
582
582
 
583
- :where(.pf-v5-theme-dark) .pf-v5-c-select {
583
+ :root:where(.pf-v5-theme-dark) .pf-v5-c-select {
584
584
  --pf-v5-c-select__toggle--disabled--BackgroundColor: var(--pf-v5-global--palette--black-500);
585
585
  --pf-v5-c-select__toggle--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
586
586
  --pf-v5-c-select__toggle--before--BorderTopColor: transparent;
@@ -592,6 +592,6 @@
592
592
  --pf-v5-c-select__menu-item--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
593
593
  --pf-v5-c-select__menu--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
594
594
  }
595
- :where(.pf-v5-theme-dark) .pf-v5-c-select__toggle:disabled, :where(.pf-v5-theme-dark) .pf-v5-c-select__toggle.pf-m-disabled {
595
+ :root:where(.pf-v5-theme-dark) .pf-v5-c-select__toggle:disabled, :root:where(.pf-v5-theme-dark) .pf-v5-c-select__toggle.pf-m-disabled {
596
596
  color: var(--pf-v5-global--palette--black-100);
597
597
  }
package/components/SimpleList/simple-list.css CHANGED
@@ -71,7 +71,7 @@
71
71
  margin-top: var(--pf-v5-c-simple-list__section--section--MarginTop);
72
72
  }
73
73
 
74
- :where(.pf-v5-theme-dark) .pf-v5-c-simple-list {
74
+ :root:where(.pf-v5-theme-dark) .pf-v5-c-simple-list {
75
75
  --pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-v5-global--active-color--100);
76
76
  --pf-v5-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
77
77
  --pf-v5-c-simple-list__item-link--hover--Color: var(--pf-v5-global--Color--100);
package/components/Skeleton/skeleton.css CHANGED
@@ -160,7 +160,7 @@
160
160
  transform: translateX(100%);
161
161
  }
162
162
  }
163
- :where(.pf-v5-theme-dark) .pf-v5-c-skeleton {
163
+ :root:where(.pf-v5-theme-dark) .pf-v5-c-skeleton {
164
164
  --pf-v5-c-skeleton--BackgroundColor: var(--pf-v5-global--palette--black-600);
165
165
  --pf-v5-c-skeleton--after--LinearGradientColorStop1: var(--pf-v5-global--palette--black-600);
166
166
  --pf-v5-c-skeleton--after--LinearGradientColorStop2: var(--pf-v5-global--palette--black-500);
package/components/Switch/switch.css CHANGED
@@ -135,7 +135,7 @@
135
135
  vertical-align: top;
136
136
  }
137
137
 
138
- :where(.pf-v5-theme-dark) .pf-v5-c-switch {
138
+ :root:where(.pf-v5-theme-dark) .pf-v5-c-switch {
139
139
  --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--BackgroundColor--100);
140
140
  --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
141
141
  --pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--disabled-color--100);
package/components/Table/table.css CHANGED
@@ -1062,9 +1062,9 @@
1062
1062
  --pf-v5-c-table--cell--Width: 100%;
1063
1063
  }
1064
1064
 
1065
- :where(.pf-v5-theme-dark) .pf-v5-c-table {
1065
+ :root:where(.pf-v5-theme-dark) .pf-v5-c-table {
1066
1066
  --pf-v5-c-table--m-striped__tr--BackgroundColor: var(--pf-v5-global--BackgroundColor--150);
1067
1067
  }
1068
- :where(.pf-v5-theme-dark) .pf-v5-c-table__favorite .pf-v5-c-button:hover, :where(.pf-v5-theme-dark) .pf-v5-c-table__favorite .pf-v5-c-button:focus {
1068
+ :root:where(.pf-v5-theme-dark) .pf-v5-c-table__favorite .pf-v5-c-button:hover, :root:where(.pf-v5-theme-dark) .pf-v5-c-table__favorite .pf-v5-c-button:focus {
1069
1069
  --pf-v5-c-button--m-plain--Color: var(--pf-v5-global--palette--gold-100);
1070
1070
  }
package/components/Tabs/tabs.css CHANGED
@@ -834,7 +834,7 @@
834
834
  }
835
835
  }
836
836
 
837
- :where(.pf-v5-theme-dark) .pf-v5-c-tabs {
837
+ :root:where(.pf-v5-theme-dark) .pf-v5-c-tabs {
838
838
  --pf-v5-c-tabs__scroll-button--BackgroundColor: transparent;
839
839
  --pf-v5-c-tabs__link--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
840
840
  --pf-v5-c-tabs__link--disabled--Color: var(--pf-v5-global--disabled-color--300);
package/components/TextInputGroup/text-input-group.css CHANGED
@@ -148,7 +148,7 @@
148
148
  display: flex;
149
149
  }
150
150
 
151
- :where(.pf-v5-theme-dark) .pf-v5-c-text-input-group {
151
+ :root:where(.pf-v5-theme-dark) .pf-v5-c-text-input-group {
152
152
  --pf-v5-c-text-input-group--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
153
153
  --pf-v5-c-text-input-group--m-disabled--Color: var(--pf-v5-global--disabled-color--300);
154
154
  --pf-v5-c-text-input-group--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
package/components/Tile/tile.css CHANGED
@@ -136,7 +136,7 @@
136
136
  color: var(--pf-v5-c-tile__icon--Color);
137
137
  }
138
138
 
139
- :where(.pf-v5-theme-dark) .pf-v5-c-tile {
139
+ :root:where(.pf-v5-theme-dark) .pf-v5-c-tile {
140
140
  --pf-v5-c-tile--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
141
141
  --pf-v5-c-tile--m-disabled__title--Color: var(--pf-v5-global--disabled-color--300);
142
142
  --pf-v5-c-tile--m-disabled__icon--Color: var(--pf-v5-global--disabled-color--300);
package/components/ToggleGroup/toggle-group.css CHANGED
@@ -104,7 +104,7 @@
104
104
  margin-left: var(--pf-v5-c-toggle-group__icon--text--MarginLeft);
105
105
  }
106
106
 
107
- :where(.pf-v5-theme-dark) .pf-v5-c-toggle-group {
107
+ :root:where(.pf-v5-theme-dark) .pf-v5-c-toggle-group {
108
108
  --pf-v5-c-toggle-group__button--hover--BackgroundColor: var(--pf-v5-global--palette--black-700);
109
109
  --pf-v5-c-toggle-group__button--focus--BackgroundColor: var(--pf-v5-global--palette--black-700);
110
110
  --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-v5-global--palette--black-600);
package/components/Tooltip/tooltip.css CHANGED
@@ -85,7 +85,7 @@
85
85
  box-shadow: var(--pf-v5-c-tooltip__arrow--BoxShadow);
86
86
  }
87
87
 
88
- :where(.pf-v5-theme-dark) .pf-v5-c-tooltip {
88
+ :root:where(.pf-v5-theme-dark) .pf-v5-c-tooltip {
89
89
  --pf-v5-c-tooltip__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
90
90
  --pf-v5-c-tooltip__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
91
91
  }
package/components/TreeView/tree-view.css CHANGED
@@ -447,7 +447,7 @@ label.pf-v5-c-tree-view__node-text {
447
447
  --pf-v5-c-tree-view--m-compact--m-no-background--border--nested--Left: calc(var(--pf-v5-c-tree-view__node--PaddingLeft) - var(--pf-v5-c-tree-view--m-compact--m-no-background--base-border--Left--offset));
448
448
  }
449
449
 
450
- :where(.pf-v5-theme-dark) .pf-v5-c-tree-view {
450
+ :root:where(.pf-v5-theme-dark) .pf-v5-c-tree-view {
451
451
  --pf-v5-c-tree-view__node--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
452
452
  --pf-v5-c-tree-view__node--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
453
453
  }
package/components/Wizard/wizard.css CHANGED
@@ -497,7 +497,7 @@
497
497
  margin-left: var(--pf-v5-c-wizard__footer-cancel--MarginLeft);
498
498
  }
499
499
 
500
- :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header {
500
+ :root:where(.pf-v5-theme-dark) .pf-v5-c-wizard__header {
501
501
  --pf-v5-global--Color--100: #e0e0e0;
502
502
  --pf-v5-global--Color--200: #aaabac;
503
503
  --pf-v5-global--BorderColor--100: #444548;
@@ -507,10 +507,10 @@
507
507
  --pf-v5-global--BackgroundColor--100: #1b1d21;
508
508
  }
509
509
 
510
- :where(.pf-v5-theme-dark) .pf-v5-c-wizard {
510
+ :root:where(.pf-v5-theme-dark) .pf-v5-c-wizard {
511
511
  --pf-v5-c-wizard__header--BackgroundColor: var(--pf-v5-global--palette--black-1000);
512
512
  --pf-v5-c-wizard__nav-link--before--BackgroundColor: var(--pf-v5-global--palette--black-500);
513
513
  }
514
- :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header {
514
+ :root:where(.pf-v5-theme-dark) .pf-v5-c-wizard__header {
515
515
  color: var(--pf-v5-global--Color--100);
516
516
  }
package/layouts/Flex/flex.css CHANGED
@@ -1620,6 +1620,10 @@
1620
1620
  --pf-v5-l-flex--RowGap: 0;
1621
1621
  --pf-v5-l-flex--ColumnGap: 0;
1622
1622
  }
1623
+ .pf-v5-l-flex.pf-m-gap-xs {
1624
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
1625
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
1626
+ }
1623
1627
  .pf-v5-l-flex.pf-m-gap-sm {
1624
1628
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1625
1629
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
@@ -1648,7 +1652,7 @@
1648
1652
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1649
1653
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1650
1654
  }
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) > * {
1655
+ .pf-v5-l-flex:is(.pf-m-gap, .pf-m-gap-none, .pf-m-gap-xs, .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
1656
  --pf-v5-l-flex--spacer--row: 0;
1653
1657
  --pf-v5-l-flex--spacer--column: 0;
1654
1658
  }
@@ -1661,6 +1665,10 @@
1661
1665
  --pf-v5-l-flex--RowGap: 0;
1662
1666
  --pf-v5-l-flex--ColumnGap: 0;
1663
1667
  }
1668
+ .pf-v5-l-flex.pf-m-gap-xs-on-sm {
1669
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
1670
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
1671
+ }
1664
1672
  .pf-v5-l-flex.pf-m-gap-sm-on-sm {
1665
1673
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1666
1674
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
@@ -1689,7 +1697,7 @@
1689
1697
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1690
1698
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1691
1699
  }
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) > * {
1700
+ .pf-v5-l-flex:is(.pf-m-gap-on-sm, .pf-m-gap-none-on-sm, .pf-m-gap-xs-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
1701
  --pf-v5-l-flex--spacer--row: 0;
1694
1702
  --pf-v5-l-flex--spacer--column: 0;
1695
1703
  }
@@ -1703,6 +1711,10 @@
1703
1711
  --pf-v5-l-flex--RowGap: 0;
1704
1712
  --pf-v5-l-flex--ColumnGap: 0;
1705
1713
  }
1714
+ .pf-v5-l-flex.pf-m-gap-xs-on-md {
1715
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
1716
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
1717
+ }
1706
1718
  .pf-v5-l-flex.pf-m-gap-sm-on-md {
1707
1719
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1708
1720
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
@@ -1731,7 +1743,7 @@
1731
1743
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1732
1744
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1733
1745
  }
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) > * {
1746
+ .pf-v5-l-flex:is(.pf-m-gap-on-md, .pf-m-gap-none-on-md, .pf-m-gap-xs-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
1747
  --pf-v5-l-flex--spacer--row: 0;
1736
1748
  --pf-v5-l-flex--spacer--column: 0;
1737
1749
  }
@@ -1745,6 +1757,10 @@
1745
1757
  --pf-v5-l-flex--RowGap: 0;
1746
1758
  --pf-v5-l-flex--ColumnGap: 0;
1747
1759
  }
1760
+ .pf-v5-l-flex.pf-m-gap-xs-on-lg {
1761
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
1762
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
1763
+ }
1748
1764
  .pf-v5-l-flex.pf-m-gap-sm-on-lg {
1749
1765
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1750
1766
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
@@ -1773,7 +1789,7 @@
1773
1789
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1774
1790
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1775
1791
  }
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) > * {
1792
+ .pf-v5-l-flex:is(.pf-m-gap-on-lg, .pf-m-gap-none-on-lg, .pf-m-gap-xs-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
1793
  --pf-v5-l-flex--spacer--row: 0;
1778
1794
  --pf-v5-l-flex--spacer--column: 0;
1779
1795
  }
@@ -1787,6 +1803,10 @@
1787
1803
  --pf-v5-l-flex--RowGap: 0;
1788
1804
  --pf-v5-l-flex--ColumnGap: 0;
1789
1805
  }
1806
+ .pf-v5-l-flex.pf-m-gap-xs-on-xl {
1807
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
1808
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
1809
+ }
1790
1810
  .pf-v5-l-flex.pf-m-gap-sm-on-xl {
1791
1811
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1792
1812
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
@@ -1815,7 +1835,7 @@
1815
1835
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1816
1836
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1817
1837
  }
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) > * {
1838
+ .pf-v5-l-flex:is(.pf-m-gap-on-xl, .pf-m-gap-none-on-xl, .pf-m-gap-xs-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
1839
  --pf-v5-l-flex--spacer--row: 0;
1820
1840
  --pf-v5-l-flex--spacer--column: 0;
1821
1841
  }
@@ -1829,6 +1849,10 @@
1829
1849
  --pf-v5-l-flex--RowGap: 0;
1830
1850
  --pf-v5-l-flex--ColumnGap: 0;
1831
1851
  }
1852
+ .pf-v5-l-flex.pf-m-gap-xs-on-2xl {
1853
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
1854
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
1855
+ }
1832
1856
  .pf-v5-l-flex.pf-m-gap-sm-on-2xl {
1833
1857
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1834
1858
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
@@ -1857,7 +1881,7 @@
1857
1881
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1858
1882
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1859
1883
  }
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) > * {
1884
+ .pf-v5-l-flex:is(.pf-m-gap-on-2xl, .pf-m-gap-none-on-2xl, .pf-m-gap-xs-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
1885
  --pf-v5-l-flex--spacer--row: 0;
1862
1886
  --pf-v5-l-flex--spacer--column: 0;
1863
1887
  }
@@ -1868,6 +1892,9 @@
1868
1892
  .pf-v5-l-flex.pf-m-row-gap-none {
1869
1893
  --pf-v5-l-flex--RowGap: 0;
1870
1894
  }
1895
+ .pf-v5-l-flex.pf-m-row-gap-xs {
1896
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
1897
+ }
1871
1898
  .pf-v5-l-flex.pf-m-row-gap-sm {
1872
1899
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1873
1900
  }
@@ -1889,7 +1916,7 @@
1889
1916
  .pf-v5-l-flex.pf-m-row-gap-4xl {
1890
1917
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1891
1918
  }
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) > * {
1919
+ .pf-v5-l-flex:is(.pf-m-row-gap, .pf-m-row-gap-none, .pf-m-row-gap-xs, .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
1920
  --pf-v5-l-flex--spacer--row: 0;
1894
1921
  }
1895
1922
  @media (min-width: 576px) {
@@ -1899,6 +1926,9 @@
1899
1926
  .pf-v5-l-flex.pf-m-row-gap-none-on-sm {
1900
1927
  --pf-v5-l-flex--RowGap: 0;
1901
1928
  }
1929
+ .pf-v5-l-flex.pf-m-row-gap-xs-on-sm {
1930
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
1931
+ }
1902
1932
  .pf-v5-l-flex.pf-m-row-gap-sm-on-sm {
1903
1933
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1904
1934
  }
@@ -1920,7 +1950,7 @@
1920
1950
  .pf-v5-l-flex.pf-m-row-gap-4xl-on-sm {
1921
1951
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1922
1952
  }
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) > * {
1953
+ .pf-v5-l-flex:is(.pf-m-row-gap-on-sm, .pf-m-row-gap-none-on-sm, .pf-m-row-gap-xs-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
1954
  --pf-v5-l-flex--spacer--row: 0;
1925
1955
  }
1926
1956
  }
@@ -1931,6 +1961,9 @@
1931
1961
  .pf-v5-l-flex.pf-m-row-gap-none-on-md {
1932
1962
  --pf-v5-l-flex--RowGap: 0;
1933
1963
  }
1964
+ .pf-v5-l-flex.pf-m-row-gap-xs-on-md {
1965
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
1966
+ }
1934
1967
  .pf-v5-l-flex.pf-m-row-gap-sm-on-md {
1935
1968
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1936
1969
  }
@@ -1952,7 +1985,7 @@
1952
1985
  .pf-v5-l-flex.pf-m-row-gap-4xl-on-md {
1953
1986
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1954
1987
  }
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) > * {
1988
+ .pf-v5-l-flex:is(.pf-m-row-gap-on-md, .pf-m-row-gap-none-on-md, .pf-m-row-gap-xs-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
1989
  --pf-v5-l-flex--spacer--row: 0;
1957
1990
  }
1958
1991
  }
@@ -1963,6 +1996,9 @@
1963
1996
  .pf-v5-l-flex.pf-m-row-gap-none-on-lg {
1964
1997
  --pf-v5-l-flex--RowGap: 0;
1965
1998
  }
1999
+ .pf-v5-l-flex.pf-m-row-gap-xs-on-lg {
2000
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
2001
+ }
1966
2002
  .pf-v5-l-flex.pf-m-row-gap-sm-on-lg {
1967
2003
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
1968
2004
  }
@@ -1984,7 +2020,7 @@
1984
2020
  .pf-v5-l-flex.pf-m-row-gap-4xl-on-lg {
1985
2021
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1986
2022
  }
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) > * {
2023
+ .pf-v5-l-flex:is(.pf-m-row-gap-on-lg, .pf-m-row-gap-none-on-lg, .pf-m-row-gap-xs-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
2024
  --pf-v5-l-flex--spacer--row: 0;
1989
2025
  }
1990
2026
  }
@@ -1995,6 +2031,9 @@
1995
2031
  .pf-v5-l-flex.pf-m-row-gap-none-on-xl {
1996
2032
  --pf-v5-l-flex--RowGap: 0;
1997
2033
  }
2034
+ .pf-v5-l-flex.pf-m-row-gap-xs-on-xl {
2035
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
2036
+ }
1998
2037
  .pf-v5-l-flex.pf-m-row-gap-sm-on-xl {
1999
2038
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
2000
2039
  }
@@ -2016,7 +2055,7 @@
2016
2055
  .pf-v5-l-flex.pf-m-row-gap-4xl-on-xl {
2017
2056
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
2018
2057
  }
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) > * {
2058
+ .pf-v5-l-flex:is(.pf-m-row-gap-on-xl, .pf-m-row-gap-none-on-xl, .pf-m-row-gap-xs-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
2059
  --pf-v5-l-flex--spacer--row: 0;
2021
2060
  }
2022
2061
  }
@@ -2027,6 +2066,9 @@
2027
2066
  .pf-v5-l-flex.pf-m-row-gap-none-on-2xl {
2028
2067
  --pf-v5-l-flex--RowGap: 0;
2029
2068
  }
2069
+ .pf-v5-l-flex.pf-m-row-gap-xs-on-2xl {
2070
+ --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
2071
+ }
2030
2072
  .pf-v5-l-flex.pf-m-row-gap-sm-on-2xl {
2031
2073
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
2032
2074
  }
@@ -2048,7 +2090,7 @@
2048
2090
  .pf-v5-l-flex.pf-m-row-gap-4xl-on-2xl {
2049
2091
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
2050
2092
  }
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) > * {
2093
+ .pf-v5-l-flex:is(.pf-m-row-gap-on-2xl, .pf-m-row-gap-none-on-2xl, .pf-m-row-gap-xs-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
2094
  --pf-v5-l-flex--spacer--row: 0;
2053
2095
  }
2054
2096
  }
@@ -2058,6 +2100,9 @@
2058
2100
  .pf-v5-l-flex.pf-m-column-gap-none {
2059
2101
  --pf-v5-l-flex--ColumnGap: 0;
2060
2102
  }
2103
+ .pf-v5-l-flex.pf-m-column-gap-xs {
2104
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
2105
+ }
2061
2106
  .pf-v5-l-flex.pf-m-column-gap-sm {
2062
2107
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
2063
2108
  }
@@ -2079,7 +2124,7 @@
2079
2124
  .pf-v5-l-flex.pf-m-column-gap-4xl {
2080
2125
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2081
2126
  }
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) > * {
2127
+ .pf-v5-l-flex:is(.pf-m-column-gap, .pf-m-column-gap-none, .pf-m-column-gap-xs, .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
2128
  --pf-v5-l-flex--spacer--column: 0;
2084
2129
  }
2085
2130
  @media (min-width: 576px) {
@@ -2089,6 +2134,9 @@
2089
2134
  .pf-v5-l-flex.pf-m-column-gap-none-on-sm {
2090
2135
  --pf-v5-l-flex--ColumnGap: 0;
2091
2136
  }
2137
+ .pf-v5-l-flex.pf-m-column-gap-xs-on-sm {
2138
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
2139
+ }
2092
2140
  .pf-v5-l-flex.pf-m-column-gap-sm-on-sm {
2093
2141
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
2094
2142
  }
@@ -2110,7 +2158,7 @@
2110
2158
  .pf-v5-l-flex.pf-m-column-gap-4xl-on-sm {
2111
2159
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2112
2160
  }
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) > * {
2161
+ .pf-v5-l-flex:is(.pf-m-column-gap-on-sm, .pf-m-column-gap-none-on-sm, .pf-m-column-gap-xs-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
2162
  --pf-v5-l-flex--spacer--column: 0;
2115
2163
  }
2116
2164
  }
@@ -2121,6 +2169,9 @@
2121
2169
  .pf-v5-l-flex.pf-m-column-gap-none-on-md {
2122
2170
  --pf-v5-l-flex--ColumnGap: 0;
2123
2171
  }
2172
+ .pf-v5-l-flex.pf-m-column-gap-xs-on-md {
2173
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
2174
+ }
2124
2175
  .pf-v5-l-flex.pf-m-column-gap-sm-on-md {
2125
2176
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
2126
2177
  }
@@ -2142,7 +2193,7 @@
2142
2193
  .pf-v5-l-flex.pf-m-column-gap-4xl-on-md {
2143
2194
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2144
2195
  }
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) > * {
2196
+ .pf-v5-l-flex:is(.pf-m-column-gap-on-md, .pf-m-column-gap-none-on-md, .pf-m-column-gap-xs-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
2197
  --pf-v5-l-flex--spacer--column: 0;
2147
2198
  }
2148
2199
  }
@@ -2153,6 +2204,9 @@
2153
2204
  .pf-v5-l-flex.pf-m-column-gap-none-on-lg {
2154
2205
  --pf-v5-l-flex--ColumnGap: 0;
2155
2206
  }
2207
+ .pf-v5-l-flex.pf-m-column-gap-xs-on-lg {
2208
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
2209
+ }
2156
2210
  .pf-v5-l-flex.pf-m-column-gap-sm-on-lg {
2157
2211
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
2158
2212
  }
@@ -2174,7 +2228,7 @@
2174
2228
  .pf-v5-l-flex.pf-m-column-gap-4xl-on-lg {
2175
2229
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2176
2230
  }
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) > * {
2231
+ .pf-v5-l-flex:is(.pf-m-column-gap-on-lg, .pf-m-column-gap-none-on-lg, .pf-m-column-gap-xs-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
2232
  --pf-v5-l-flex--spacer--column: 0;
2179
2233
  }
2180
2234
  }
@@ -2185,6 +2239,9 @@
2185
2239
  .pf-v5-l-flex.pf-m-column-gap-none-on-xl {
2186
2240
  --pf-v5-l-flex--ColumnGap: 0;
2187
2241
  }
2242
+ .pf-v5-l-flex.pf-m-column-gap-xs-on-xl {
2243
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
2244
+ }
2188
2245
  .pf-v5-l-flex.pf-m-column-gap-sm-on-xl {
2189
2246
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
2190
2247
  }
@@ -2206,7 +2263,7 @@
2206
2263
  .pf-v5-l-flex.pf-m-column-gap-4xl-on-xl {
2207
2264
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2208
2265
  }
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) > * {
2266
+ .pf-v5-l-flex:is(.pf-m-column-gap-on-xl, .pf-m-column-gap-none-on-xl, .pf-m-column-gap-xs-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
2267
  --pf-v5-l-flex--spacer--column: 0;
2211
2268
  }
2212
2269
  }
@@ -2217,6 +2274,9 @@
2217
2274
  .pf-v5-l-flex.pf-m-column-gap-none-on-2xl {
2218
2275
  --pf-v5-l-flex--ColumnGap: 0;
2219
2276
  }
2277
+ .pf-v5-l-flex.pf-m-column-gap-xs-on-2xl {
2278
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
2279
+ }
2220
2280
  .pf-v5-l-flex.pf-m-column-gap-sm-on-2xl {
2221
2281
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
2222
2282
  }
@@ -2238,7 +2298,7 @@
2238
2298
  .pf-v5-l-flex.pf-m-column-gap-4xl-on-2xl {
2239
2299
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2240
2300
  }
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) > * {
2301
+ .pf-v5-l-flex:is(.pf-m-column-gap-on-2xl, .pf-m-column-gap-none-on-2xl, .pf-m-column-gap-xs-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
2302
  --pf-v5-l-flex--spacer--column: 0;
2243
2303
  }
2244
2304
  }
package/layouts/Flex/flex.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  // Always keep list of spacers and breakpoints up-to-date
2
2
  $pf-v5-l-flex--breakpoint-map: build-breakpoint-map();
3
3
  $pf-v5-l-flex--spacer-map: build-spacer-map();
4
- $pf-v5-l-flex--gap-map: build-spacer-map("base", "none", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl");
4
+ $pf-v5-l-flex--gap-map: build-spacer-map("base", "none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl");
5
5
  $pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $pf-v5-l-flex--spacer-map);
6
6
 
7
7
  .#{$flex} {
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.63",
4
+ "version": "5.0.0-alpha.65",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {