@patternfly/patternfly 6.0.0-alpha.190 → 6.0.0-alpha.192

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 (61) hide show
  1. package/base/patternfly-variables.css +11 -11
  2. package/base/tokens/tokens-charts-dark.scss +1 -1
  3. package/base/tokens/tokens-charts.scss +1 -1
  4. package/base/tokens/tokens-dark.scss +1 -1
  5. package/base/tokens/tokens-default.scss +7 -7
  6. package/base/tokens/tokens-palette.scss +6 -6
  7. package/components/AboutModalBox/about-modal-box.css +11 -11
  8. package/components/Avatar/avatar.css +40 -40
  9. package/components/BackToTop/back-to-top.css +1 -1
  10. package/components/Banner/banner.css +1 -1
  11. package/components/Brand/brand.css +10 -10
  12. package/components/Card/card.css +1 -1
  13. package/components/Card/card.scss +1 -1
  14. package/components/Content/content.css +4 -4
  15. package/components/DataList/data-list-grid.css +19 -19
  16. package/components/DataList/data-list.css +26 -26
  17. package/components/DescriptionList/description-list-order.css +5 -5
  18. package/components/DescriptionList/description-list.css +16 -16
  19. package/components/Divider/divider.css +20 -20
  20. package/components/Drawer/drawer.css +12 -12
  21. package/components/Form/form.css +6 -6
  22. package/components/JumpLinks/jump-links.css +5 -5
  23. package/components/Login/login.css +13 -13
  24. package/components/Masthead/masthead.css +6 -6
  25. package/components/Menu/menu.css +10 -10
  26. package/components/ModalBox/modal-box.css +2 -2
  27. package/components/Page/page.css +9 -9
  28. package/components/Pagination/pagination.css +8 -8
  29. package/components/ProgressStepper/progress-stepper.css +6 -6
  30. package/components/Sidebar/sidebar.css +8 -8
  31. package/components/TabContent/tab-content.css +1 -1
  32. package/components/Table/table-grid.css +13 -13
  33. package/components/Table/table-tree-view.css +4 -4
  34. package/components/Table/table.css +5 -5
  35. package/components/Tabs/tabs.css +10 -10
  36. package/components/Toolbar/toolbar.css +26 -26
  37. package/components/Wizard/wizard.css +6 -6
  38. package/components/_index.css +280 -280
  39. package/layouts/Flex/flex.css +35 -35
  40. package/layouts/Gallery/gallery.css +10 -10
  41. package/layouts/Grid/grid.css +15 -15
  42. package/layouts/_index.css +60 -60
  43. package/package.json +1 -1
  44. package/patternfly-addons.css +835 -835
  45. package/patternfly-base-no-globals.css +11 -11
  46. package/patternfly-base.css +11 -11
  47. package/patternfly-no-globals.css +351 -351
  48. package/patternfly.css +351 -351
  49. package/patternfly.min.css +1 -1
  50. package/patternfly.min.css.map +1 -1
  51. package/sass-utilities/scss-variables.scss +6 -6
  52. package/utilities/Accessibility/accessibility.css +15 -15
  53. package/utilities/Alignment/alignment.css +5 -5
  54. package/utilities/BackgroundColor/background-color.css +5 -5
  55. package/utilities/Display/display.css +5 -5
  56. package/utilities/Flex/flex.css +50 -50
  57. package/utilities/Float/float.css +5 -5
  58. package/utilities/Sizing/sizing.css +30 -30
  59. package/utilities/Spacing/spacing.css +700 -700
  60. package/utilities/Text/text.css +20 -20
  61. package/utilities/_index.css +835 -835
package/components/Divider/divider.css CHANGED
@@ -22,7 +22,7 @@
22
22
  .pf-v6-c-divider.pf-m-hidden {
23
23
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
24
24
  }
25
- @media screen and (min-width: 576px) {
25
+ @media screen and (min-width: 36rem) {
26
26
  .pf-v6-c-divider.pf-m-hidden-on-sm {
27
27
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
28
28
  }
@@ -30,7 +30,7 @@
30
30
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
31
31
  }
32
32
  }
33
- @media screen and (min-width: 768px) {
33
+ @media screen and (min-width: 48rem) {
34
34
  .pf-v6-c-divider.pf-m-hidden-on-md {
35
35
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
36
36
  }
@@ -38,7 +38,7 @@
38
38
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
39
39
  }
40
40
  }
41
- @media screen and (min-width: 992px) {
41
+ @media screen and (min-width: 62rem) {
42
42
  .pf-v6-c-divider.pf-m-hidden-on-lg {
43
43
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
44
44
  }
@@ -46,7 +46,7 @@
46
46
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
47
47
  }
48
48
  }
49
- @media screen and (min-width: 1200px) {
49
+ @media screen and (min-width: 75rem) {
50
50
  .pf-v6-c-divider.pf-m-hidden-on-xl {
51
51
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
52
52
  }
@@ -54,7 +54,7 @@
54
54
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
55
55
  }
56
56
  }
57
- @media screen and (min-width: 1450px) {
57
+ @media screen and (min-width: 90.625rem) {
58
58
  .pf-v6-c-divider.pf-m-hidden-on-2xl {
59
59
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
60
60
  }
@@ -102,21 +102,21 @@
102
102
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
103
103
  }
104
104
 
105
- @media (min-width: 576px) {
105
+ @media (min-width: 36rem) {
106
106
  .pf-v6-c-divider.pf-m-horizontal-on-sm {
107
107
  flex-direction: row;
108
108
  width: 100%;
109
109
  height: var(--pf-v6-c-divider--Size);
110
110
  }
111
111
  }
112
- @media (min-width: 576px) {
112
+ @media (min-width: 36rem) {
113
113
  .pf-v6-c-divider.pf-m-vertical-on-sm {
114
114
  flex-direction: column;
115
115
  width: var(--pf-v6-c-divider--Size);
116
116
  height: inherit;
117
117
  }
118
118
  }
119
- @media (min-width: 576px) {
119
+ @media (min-width: 36rem) {
120
120
  .pf-v6-c-divider.pf-m-inset-none-on-sm {
121
121
  --pf-v6-c-divider--before--FlexBasis: 100%;
122
122
  }
@@ -142,21 +142,21 @@
142
142
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
143
143
  }
144
144
  }
145
- @media (min-width: 768px) {
145
+ @media (min-width: 48rem) {
146
146
  .pf-v6-c-divider.pf-m-horizontal-on-md {
147
147
  flex-direction: row;
148
148
  width: 100%;
149
149
  height: var(--pf-v6-c-divider--Size);
150
150
  }
151
151
  }
152
- @media (min-width: 768px) {
152
+ @media (min-width: 48rem) {
153
153
  .pf-v6-c-divider.pf-m-vertical-on-md {
154
154
  flex-direction: column;
155
155
  width: var(--pf-v6-c-divider--Size);
156
156
  height: inherit;
157
157
  }
158
158
  }
159
- @media (min-width: 768px) {
159
+ @media (min-width: 48rem) {
160
160
  .pf-v6-c-divider.pf-m-inset-none-on-md {
161
161
  --pf-v6-c-divider--before--FlexBasis: 100%;
162
162
  }
@@ -182,21 +182,21 @@
182
182
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
183
183
  }
184
184
  }
185
- @media (min-width: 992px) {
185
+ @media (min-width: 62rem) {
186
186
  .pf-v6-c-divider.pf-m-horizontal-on-lg {
187
187
  flex-direction: row;
188
188
  width: 100%;
189
189
  height: var(--pf-v6-c-divider--Size);
190
190
  }
191
191
  }
192
- @media (min-width: 992px) {
192
+ @media (min-width: 62rem) {
193
193
  .pf-v6-c-divider.pf-m-vertical-on-lg {
194
194
  flex-direction: column;
195
195
  width: var(--pf-v6-c-divider--Size);
196
196
  height: inherit;
197
197
  }
198
198
  }
199
- @media (min-width: 992px) {
199
+ @media (min-width: 62rem) {
200
200
  .pf-v6-c-divider.pf-m-inset-none-on-lg {
201
201
  --pf-v6-c-divider--before--FlexBasis: 100%;
202
202
  }
@@ -222,21 +222,21 @@
222
222
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
223
223
  }
224
224
  }
225
- @media (min-width: 1200px) {
225
+ @media (min-width: 75rem) {
226
226
  .pf-v6-c-divider.pf-m-horizontal-on-xl {
227
227
  flex-direction: row;
228
228
  width: 100%;
229
229
  height: var(--pf-v6-c-divider--Size);
230
230
  }
231
231
  }
232
- @media (min-width: 1200px) {
232
+ @media (min-width: 75rem) {
233
233
  .pf-v6-c-divider.pf-m-vertical-on-xl {
234
234
  flex-direction: column;
235
235
  width: var(--pf-v6-c-divider--Size);
236
236
  height: inherit;
237
237
  }
238
238
  }
239
- @media (min-width: 1200px) {
239
+ @media (min-width: 75rem) {
240
240
  .pf-v6-c-divider.pf-m-inset-none-on-xl {
241
241
  --pf-v6-c-divider--before--FlexBasis: 100%;
242
242
  }
@@ -262,21 +262,21 @@
262
262
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
263
263
  }
264
264
  }
265
- @media (min-width: 1450px) {
265
+ @media (min-width: 90.625rem) {
266
266
  .pf-v6-c-divider.pf-m-horizontal-on-2xl {
267
267
  flex-direction: row;
268
268
  width: 100%;
269
269
  height: var(--pf-v6-c-divider--Size);
270
270
  }
271
271
  }
272
- @media (min-width: 1450px) {
272
+ @media (min-width: 90.625rem) {
273
273
  .pf-v6-c-divider.pf-m-vertical-on-2xl {
274
274
  flex-direction: column;
275
275
  width: var(--pf-v6-c-divider--Size);
276
276
  height: inherit;
277
277
  }
278
278
  }
279
- @media (min-width: 1450px) {
279
+ @media (min-width: 90.625rem) {
280
280
  .pf-v6-c-divider.pf-m-inset-none-on-2xl {
281
281
  --pf-v6-c-divider--before--FlexBasis: 100%;
282
282
  }
package/components/Drawer/drawer.css CHANGED
@@ -105,7 +105,7 @@
105
105
  --pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd: var(--pf-v6-c-drawer__panel--after--Width);
106
106
  --pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: var(--pf-v6-c-drawer__panel--after--Width);
107
107
  }
108
- @media screen and (min-width: 1200px) {
108
+ @media screen and (min-width: 75rem) {
109
109
  :where(:root, .pf-v6-c-drawer) {
110
110
  --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
111
111
  }
@@ -248,7 +248,7 @@
248
248
  .pf-v6-c-drawer__panel.pf-m-no-background {
249
249
  --pf-v6-c-drawer__panel--BackgroundColor: transparent;
250
250
  }
251
- @media screen and (min-width: 768px) {
251
+ @media screen and (min-width: 48rem) {
252
252
  .pf-v6-c-drawer__panel {
253
253
  --pf-v6-c-drawer__panel--FlexBasis:
254
254
  max(
@@ -257,7 +257,7 @@
257
257
  );
258
258
  }
259
259
  }
260
- @media screen and (min-width: 1200px) {
260
+ @media screen and (min-width: 75rem) {
261
261
  .pf-v6-c-drawer__panel {
262
262
  --pf-v6-c-drawer__panel--md--FlexBasis: var(--pf-v6-c-drawer__panel--xl--FlexBasis);
263
263
  }
@@ -398,7 +398,7 @@
398
398
  border-inline-end-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderInlineEndWidth);
399
399
  }
400
400
 
401
- @media screen and (min-width: 768px) {
401
+ @media screen and (min-width: 48rem) {
402
402
  .pf-v6-c-drawer {
403
403
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
404
404
  }
@@ -488,7 +488,7 @@
488
488
  display: block;
489
489
  }
490
490
  }
491
- @media (min-width: 768px) {
491
+ @media (min-width: 48rem) {
492
492
  .pf-v6-c-drawer__panel.pf-m-width-25 {
493
493
  --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
494
494
  }
@@ -508,7 +508,7 @@
508
508
  --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
509
509
  }
510
510
  }
511
- @media (min-width: 992px) {
511
+ @media (min-width: 62rem) {
512
512
  .pf-v6-c-drawer__panel.pf-m-width-25-on-lg {
513
513
  --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
514
514
  }
@@ -528,7 +528,7 @@
528
528
  --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
529
529
  }
530
530
  }
531
- @media (min-width: 1200px) {
531
+ @media (min-width: 75rem) {
532
532
  .pf-v6-c-drawer__panel.pf-m-width-25-on-xl {
533
533
  --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
534
534
  }
@@ -548,7 +548,7 @@
548
548
  --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
549
549
  }
550
550
  }
551
- @media (min-width: 1450px) {
551
+ @media (min-width: 90.625rem) {
552
552
  .pf-v6-c-drawer__panel.pf-m-width-25-on-2xl {
553
553
  --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
554
554
  }
@@ -568,7 +568,7 @@
568
568
  --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
569
569
  }
570
570
  }
571
- @media (min-width: 768px) {
571
+ @media (min-width: 48rem) {
572
572
  .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
573
573
  .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
574
574
  flex-shrink: 1;
@@ -635,7 +635,7 @@
635
635
  display: none;
636
636
  }
637
637
  }
638
- @media (min-width: 992px) {
638
+ @media (min-width: 62rem) {
639
639
  .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
640
640
  .pf-v6-c-drawer.pf-m-static-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
641
641
  flex-shrink: 1;
@@ -702,7 +702,7 @@
702
702
  display: none;
703
703
  }
704
704
  }
705
- @media (min-width: 1200px) {
705
+ @media (min-width: 75rem) {
706
706
  .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
707
707
  .pf-v6-c-drawer.pf-m-static-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
708
708
  flex-shrink: 1;
@@ -769,7 +769,7 @@
769
769
  display: none;
770
770
  }
771
771
  }
772
- @media (min-width: 1450px) {
772
+ @media (min-width: 90.625rem) {
773
773
  .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content,
774
774
  .pf-v6-c-drawer.pf-m-static-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
775
775
  flex-shrink: 1;
package/components/Form/form.css CHANGED
@@ -87,7 +87,7 @@
87
87
  .pf-v6-c-form.pf-m-horizontal.pf-m-align-right .pf-v6-c-form__label {
88
88
  text-align: end;
89
89
  }
90
- @media screen and (min-width: 768px) {
90
+ @media screen and (min-width: 48rem) {
91
91
  .pf-v6-c-form.pf-m-horizontal {
92
92
  --pf-v6-c-form__group-label--PaddingBlockEnd: 0;
93
93
  }
@@ -143,7 +143,7 @@
143
143
  grid-column: 2;
144
144
  }
145
145
  }
146
- @media (min-width: 576px) {
146
+ @media (min-width: 36rem) {
147
147
  .pf-v6-c-form.pf-m-horizontal-on-sm {
148
148
  --pf-v6-c-form__group-label--PaddingBlockEnd: 0;
149
149
  }
@@ -171,7 +171,7 @@
171
171
  grid-column: 2;
172
172
  }
173
173
  }
174
- @media (min-width: 768px) {
174
+ @media (min-width: 48rem) {
175
175
  .pf-v6-c-form.pf-m-horizontal-on-md {
176
176
  --pf-v6-c-form__group-label--PaddingBlockEnd: 0;
177
177
  }
@@ -199,7 +199,7 @@
199
199
  grid-column: 2;
200
200
  }
201
201
  }
202
- @media (min-width: 992px) {
202
+ @media (min-width: 62rem) {
203
203
  .pf-v6-c-form.pf-m-horizontal-on-lg {
204
204
  --pf-v6-c-form__group-label--PaddingBlockEnd: 0;
205
205
  }
@@ -227,7 +227,7 @@
227
227
  grid-column: 2;
228
228
  }
229
229
  }
230
- @media (min-width: 1200px) {
230
+ @media (min-width: 75rem) {
231
231
  .pf-v6-c-form.pf-m-horizontal-on-xl {
232
232
  --pf-v6-c-form__group-label--PaddingBlockEnd: 0;
233
233
  }
@@ -255,7 +255,7 @@
255
255
  grid-column: 2;
256
256
  }
257
257
  }
258
- @media (min-width: 1450px) {
258
+ @media (min-width: 90.625rem) {
259
259
  .pf-v6-c-form.pf-m-horizontal-on-2xl {
260
260
  --pf-v6-c-form__group-label--PaddingBlockEnd: 0;
261
261
  }
package/components/JumpLinks/jump-links.css CHANGED
@@ -81,7 +81,7 @@
81
81
  --pf-v6-c-jump-links__toggle--Display: none;
82
82
  --pf-v6-c-jump-links__label--Display: block;
83
83
  }
84
- @media (min-width: 576px) {
84
+ @media (min-width: 36rem) {
85
85
  .pf-v6-c-jump-links.pf-m-expandable-on-sm {
86
86
  --pf-v6-c-jump-links__list--Display: none;
87
87
  --pf-v6-c-jump-links__toggle--Display: block;
@@ -93,7 +93,7 @@
93
93
  --pf-v6-c-jump-links__label--Display: block;
94
94
  }
95
95
  }
96
- @media (min-width: 768px) {
96
+ @media (min-width: 48rem) {
97
97
  .pf-v6-c-jump-links.pf-m-expandable-on-md {
98
98
  --pf-v6-c-jump-links__list--Display: none;
99
99
  --pf-v6-c-jump-links__toggle--Display: block;
@@ -105,7 +105,7 @@
105
105
  --pf-v6-c-jump-links__label--Display: block;
106
106
  }
107
107
  }
108
- @media (min-width: 992px) {
108
+ @media (min-width: 62rem) {
109
109
  .pf-v6-c-jump-links.pf-m-expandable-on-lg {
110
110
  --pf-v6-c-jump-links__list--Display: none;
111
111
  --pf-v6-c-jump-links__toggle--Display: block;
@@ -117,7 +117,7 @@
117
117
  --pf-v6-c-jump-links__label--Display: block;
118
118
  }
119
119
  }
120
- @media (min-width: 1200px) {
120
+ @media (min-width: 75rem) {
121
121
  .pf-v6-c-jump-links.pf-m-expandable-on-xl {
122
122
  --pf-v6-c-jump-links__list--Display: none;
123
123
  --pf-v6-c-jump-links__toggle--Display: block;
@@ -129,7 +129,7 @@
129
129
  --pf-v6-c-jump-links__label--Display: block;
130
130
  }
131
131
  }
132
- @media (min-width: 1450px) {
132
+ @media (min-width: 90.625rem) {
133
133
  .pf-v6-c-jump-links.pf-m-expandable-on-2xl {
134
134
  --pf-v6-c-jump-links__list--Display: none;
135
135
  --pf-v6-c-jump-links__toggle--Display: block;
package/components/Login/login.css CHANGED
@@ -53,48 +53,48 @@
53
53
  --pf-v6-c-login__footer--c-list--PaddingBlockStart: var(--pf-t--global--spacer--md);
54
54
  --pf-v6-c-login__footer--c-list--xl--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
55
55
  }
56
- @media (min-width: 1200px) {
56
+ @media (min-width: 75rem) {
57
57
  :where(:root, .pf-v6-c-login) {
58
58
  --pf-v6-c-login__container--MaxWidth: var(--pf-v6-c-login__container--xl--MaxWidth);
59
59
  }
60
60
  }
61
- @media (min-width: 576px) {
61
+ @media (min-width: 36rem) {
62
62
  :where(:root, .pf-v6-c-login) {
63
63
  --pf-v6-c-login__header--PaddingInlineEnd: 0;
64
64
  --pf-v6-c-login__header--PaddingInlineStart: 0;
65
65
  }
66
66
  }
67
- @media (min-width: 1200px) {
67
+ @media (min-width: 75rem) {
68
68
  :where(:root, .pf-v6-c-login) {
69
69
  --pf-v6-c-login__header--MarginBlockEnd: var(--pf-v6-c-login__header--xl--MarginBlockEnd);
70
70
  --pf-v6-c-login__header--c-brand--MarginBlockEnd: var(--pf-v6-c-login__header--c-brand--xl--MarginBlockEnd);
71
71
  }
72
72
  }
73
- @media (min-width: 1200px) {
73
+ @media (min-width: 75rem) {
74
74
  :where(:root, .pf-v6-c-login) {
75
75
  --pf-v6-c-login__main--MarginBlockEnd: 0;
76
76
  }
77
77
  }
78
- @media (min-width: 768px) {
78
+ @media (min-width: 48rem) {
79
79
  :where(:root, .pf-v6-c-login) {
80
80
  --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-v6-c-login__main-header--md--PaddingInlineEnd);
81
81
  --pf-v6-c-login__main-header--PaddingInlineStart: var(--pf-v6-c-login__main-header--md--PaddingInlineStart);
82
82
  --pf-v6-c-login__main-header-desc--MarginBlockEnd: var(--pf-v6-c-login__main-header-desc--md--MarginBlockEnd);
83
83
  }
84
84
  }
85
- @media (min-width: 768px) {
85
+ @media (min-width: 48rem) {
86
86
  :where(:root, .pf-v6-c-login) {
87
87
  --pf-v6-c-login__main-body--PaddingInlineEnd: var(--pf-v6-c-login__main-body--md--PaddingInlineEnd);
88
88
  --pf-v6-c-login__main-body--PaddingInlineStart: var(--pf-v6-c-login__main-body--md--PaddingInlineStart);
89
89
  }
90
90
  }
91
- @media (min-width: 576px) {
91
+ @media (min-width: 36rem) {
92
92
  :where(:root, .pf-v6-c-login) {
93
93
  --pf-v6-c-login__footer--PaddingInlineEnd: 0;
94
94
  --pf-v6-c-login__footer--PaddingInlineStart: 0;
95
95
  }
96
96
  }
97
- @media (min-width: 1200px) {
97
+ @media (min-width: 75rem) {
98
98
  :where(:root, .pf-v6-c-login) {
99
99
  --pf-v6-c-login__footer--c-list--PaddingBlockStart: var(--pf-v6-c-login__footer--c-list--xl--PaddingBlockStart);
100
100
  }
@@ -107,7 +107,7 @@
107
107
  padding-block-start: var(--pf-v6-c-login--PaddingBlockStart);
108
108
  padding-block-end: var(--pf-v6-c-login--PaddingBlockEnd);
109
109
  }
110
- @media (min-width: 576px) {
110
+ @media (min-width: 36rem) {
111
111
  .pf-v6-c-login {
112
112
  align-items: center;
113
113
  }
@@ -117,7 +117,7 @@
117
117
  width: 100%;
118
118
  max-width: var(--pf-v6-c-login__container--MaxWidth);
119
119
  }
120
- @media (min-width: 1200px) {
120
+ @media (min-width: 75rem) {
121
121
  .pf-v6-c-login__container {
122
122
  display: grid;
123
123
  grid-template-areas: "main header" "main footer" "main .";
@@ -134,7 +134,7 @@
134
134
  padding-inline-start: var(--pf-v6-c-login__header--PaddingInlineStart);
135
135
  padding-inline-end: var(--pf-v6-c-login__header--PaddingInlineEnd);
136
136
  }
137
- @media (min-width: 1200px) {
137
+ @media (min-width: 75rem) {
138
138
  .pf-v6-c-login__header {
139
139
  margin-block-start: var(--pf-v6-c-login__header--xl--MarginBlockStart);
140
140
  }
@@ -168,7 +168,7 @@
168
168
  padding-inline-start: var(--pf-v6-c-login__main-header--PaddingInlineStart);
169
169
  padding-inline-end: var(--pf-v6-c-login__main-header--PaddingInlineEnd);
170
170
  }
171
- @media (min-width: 768px) {
171
+ @media (min-width: 48rem) {
172
172
  .pf-v6-c-login__main-header {
173
173
  grid-template-columns: 1fr auto;
174
174
  }
@@ -179,7 +179,7 @@
179
179
  grid-row: auto;
180
180
  grid-column: auto;
181
181
  }
182
- @media (min-width: 768px) {
182
+ @media (min-width: 48rem) {
183
183
  .pf-v6-c-login__main-header-utilities,
184
184
  .pf-v6-c-login__main-header .pf-v6-c-menu-toggle {
185
185
  grid-row: 1;
package/components/Masthead/masthead.css CHANGED
@@ -56,7 +56,7 @@
56
56
  --pf-v6-c-toolbar__content--PaddingInline: var(--pf-v6-c-masthead--c-toolbar--PaddingInline);
57
57
  --pf-v6-c-toolbar__content--MinWidth: 0;
58
58
  }
59
- @media screen and (min-width: 768px) {
59
+ @media screen and (min-width: 48rem) {
60
60
  :where(:not(.pf-m-resize-observer)) .pf-v6-c-masthead {
61
61
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
62
62
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
@@ -214,7 +214,7 @@
214
214
  padding-inline-start: var(--pf-t--global--spacer--2xl);
215
215
  padding-inline-end: var(--pf-t--global--spacer--2xl);
216
216
  }
217
- @media (min-width: 576px) {
217
+ @media (min-width: 36rem) {
218
218
  .pf-v6-c-masthead.pf-m-display-stack-on-sm {
219
219
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
220
220
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
@@ -258,7 +258,7 @@
258
258
  padding-inline-start: var(--pf-t--global--spacer--2xl);
259
259
  padding-inline-end: var(--pf-t--global--spacer--2xl);
260
260
  }
261
- @media (min-width: 768px) {
261
+ @media (min-width: 48rem) {
262
262
  .pf-v6-c-masthead.pf-m-display-stack-on-md {
263
263
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
264
264
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
@@ -302,7 +302,7 @@
302
302
  padding-inline-start: var(--pf-t--global--spacer--2xl);
303
303
  padding-inline-end: var(--pf-t--global--spacer--2xl);
304
304
  }
305
- @media (min-width: 992px) {
305
+ @media (min-width: 62rem) {
306
306
  .pf-v6-c-masthead.pf-m-display-stack-on-lg {
307
307
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
308
308
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
@@ -346,7 +346,7 @@
346
346
  padding-inline-start: var(--pf-t--global--spacer--2xl);
347
347
  padding-inline-end: var(--pf-t--global--spacer--2xl);
348
348
  }
349
- @media (min-width: 1200px) {
349
+ @media (min-width: 75rem) {
350
350
  .pf-v6-c-masthead.pf-m-display-stack-on-xl {
351
351
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
352
352
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
@@ -390,7 +390,7 @@
390
390
  padding-inline-start: var(--pf-t--global--spacer--2xl);
391
391
  padding-inline-end: var(--pf-t--global--spacer--2xl);
392
392
  }
393
- @media (min-width: 1450px) {
393
+ @media (min-width: 90.625rem) {
394
394
  .pf-v6-c-masthead.pf-m-display-stack-on-2xl {
395
395
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
396
396
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
package/components/Menu/menu.css CHANGED
@@ -116,7 +116,7 @@
116
116
  .pf-v6-c-menu__group.pf-m-hidden {
117
117
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
118
118
  }
119
- @media screen and (min-width: 576px) {
119
+ @media screen and (min-width: 36rem) {
120
120
  .pf-v6-c-menu__list.pf-m-hidden-on-sm,
121
121
  .pf-v6-c-menu__group.pf-m-hidden-on-sm {
122
122
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
@@ -126,7 +126,7 @@
126
126
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
127
127
  }
128
128
  }
129
- @media screen and (min-width: 768px) {
129
+ @media screen and (min-width: 48rem) {
130
130
  .pf-v6-c-menu__list.pf-m-hidden-on-md,
131
131
  .pf-v6-c-menu__group.pf-m-hidden-on-md {
132
132
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
@@ -136,7 +136,7 @@
136
136
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
137
137
  }
138
138
  }
139
- @media screen and (min-width: 992px) {
139
+ @media screen and (min-width: 62rem) {
140
140
  .pf-v6-c-menu__list.pf-m-hidden-on-lg,
141
141
  .pf-v6-c-menu__group.pf-m-hidden-on-lg {
142
142
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
@@ -146,7 +146,7 @@
146
146
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
147
147
  }
148
148
  }
149
- @media screen and (min-width: 1200px) {
149
+ @media screen and (min-width: 75rem) {
150
150
  .pf-v6-c-menu__list.pf-m-hidden-on-xl,
151
151
  .pf-v6-c-menu__group.pf-m-hidden-on-xl {
152
152
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
@@ -156,7 +156,7 @@
156
156
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
157
157
  }
158
158
  }
159
- @media screen and (min-width: 1450px) {
159
+ @media screen and (min-width: 90.625rem) {
160
160
  .pf-v6-c-menu__list.pf-m-hidden-on-2xl,
161
161
  .pf-v6-c-menu__group.pf-m-hidden-on-2xl {
162
162
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
@@ -442,7 +442,7 @@
442
442
  .pf-v6-c-menu__item.pf-m-hidden {
443
443
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
444
444
  }
445
- @media screen and (min-width: 576px) {
445
+ @media screen and (min-width: 36rem) {
446
446
  .pf-v6-c-menu__item.pf-m-hidden-on-sm {
447
447
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
448
448
  }
@@ -450,7 +450,7 @@
450
450
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
451
451
  }
452
452
  }
453
- @media screen and (min-width: 768px) {
453
+ @media screen and (min-width: 48rem) {
454
454
  .pf-v6-c-menu__item.pf-m-hidden-on-md {
455
455
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
456
456
  }
@@ -458,7 +458,7 @@
458
458
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
459
459
  }
460
460
  }
461
- @media screen and (min-width: 992px) {
461
+ @media screen and (min-width: 62rem) {
462
462
  .pf-v6-c-menu__item.pf-m-hidden-on-lg {
463
463
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
464
464
  }
@@ -466,7 +466,7 @@
466
466
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
467
467
  }
468
468
  }
469
- @media screen and (min-width: 1200px) {
469
+ @media screen and (min-width: 75rem) {
470
470
  .pf-v6-c-menu__item.pf-m-hidden-on-xl {
471
471
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
472
472
  }
@@ -474,7 +474,7 @@
474
474
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
475
475
  }
476
476
  }
477
- @media screen and (min-width: 1450px) {
477
+ @media screen and (min-width: 90.625rem) {
478
478
  .pf-v6-c-menu__item.pf-m-hidden-on-2xl {
479
479
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
480
480
  }
package/components/ModalBox/modal-box.css CHANGED
@@ -49,7 +49,7 @@
49
49
  --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--md);
50
50
  --pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd: calc(var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd) / 2);
51
51
  }
52
- @media (min-width: 1200px) {
52
+ @media (min-width: 75rem) {
53
53
  :where(:root, .pf-v6-c-modal-box) {
54
54
  --pf-v6-c-modal-box--m-align-top--spacer: var(--pf-v6-c-modal-box--m-align-top--xl--spacer);
55
55
  }
@@ -195,7 +195,7 @@
195
195
  .pf-v6-c-modal-box__footer > .pf-v6-c-button:not(:last-child) {
196
196
  margin-inline-end: var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd);
197
197
  }
198
- @media screen and (min-width: 576px) {
198
+ @media screen and (min-width: 36rem) {
199
199
  .pf-v6-c-modal-box__footer > .pf-v6-c-button:not(:last-child) {
200
200
  --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd);
201
201
  }