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

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 (51) hide show
  1. package/components/AboutModalBox/about-modal-box.css +11 -11
  2. package/components/Avatar/avatar.css +40 -40
  3. package/components/BackToTop/back-to-top.css +1 -1
  4. package/components/Banner/banner.css +1 -1
  5. package/components/Brand/brand.css +10 -10
  6. package/components/Content/content.css +4 -4
  7. package/components/DataList/data-list-grid.css +19 -19
  8. package/components/DataList/data-list.css +26 -26
  9. package/components/DescriptionList/description-list-order.css +5 -5
  10. package/components/DescriptionList/description-list.css +16 -16
  11. package/components/Divider/divider.css +20 -20
  12. package/components/Drawer/drawer.css +12 -12
  13. package/components/Form/form.css +6 -6
  14. package/components/JumpLinks/jump-links.css +5 -5
  15. package/components/Login/login.css +13 -13
  16. package/components/Masthead/masthead.css +6 -6
  17. package/components/Menu/menu.css +10 -10
  18. package/components/ModalBox/modal-box.css +2 -2
  19. package/components/Page/page.css +9 -9
  20. package/components/Pagination/pagination.css +8 -8
  21. package/components/ProgressStepper/progress-stepper.css +6 -6
  22. package/components/Sidebar/sidebar.css +8 -8
  23. package/components/TabContent/tab-content.css +1 -1
  24. package/components/Table/table-grid.css +13 -13
  25. package/components/Table/table-tree-view.css +4 -4
  26. package/components/Table/table.css +5 -5
  27. package/components/Tabs/tabs.css +10 -10
  28. package/components/Toolbar/toolbar.css +26 -26
  29. package/components/Wizard/wizard.css +6 -6
  30. package/components/_index.css +279 -279
  31. package/layouts/Flex/flex.css +35 -35
  32. package/layouts/Gallery/gallery.css +10 -10
  33. package/layouts/Grid/grid.css +15 -15
  34. package/layouts/_index.css +60 -60
  35. package/package.json +1 -1
  36. package/patternfly-addons.css +835 -835
  37. package/patternfly-no-globals.css +339 -339
  38. package/patternfly.css +339 -339
  39. package/patternfly.min.css +1 -1
  40. package/patternfly.min.css.map +1 -1
  41. package/sass-utilities/scss-variables.scss +6 -6
  42. package/utilities/Accessibility/accessibility.css +15 -15
  43. package/utilities/Alignment/alignment.css +5 -5
  44. package/utilities/BackgroundColor/background-color.css +5 -5
  45. package/utilities/Display/display.css +5 -5
  46. package/utilities/Flex/flex.css +50 -50
  47. package/utilities/Float/float.css +5 -5
  48. package/utilities/Sizing/sizing.css +30 -30
  49. package/utilities/Spacing/spacing.css +700 -700
  50. package/utilities/Text/text.css +20 -20
  51. package/utilities/_index.css +835 -835
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
  }
package/components/Page/page.css CHANGED
@@ -83,12 +83,12 @@
83
83
  --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
84
84
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
85
85
  }
86
- @media (min-width: 1200px) {
86
+ @media (min-width: 75rem) {
87
87
  :where(:root, .pf-v6-c-page) {
88
88
  --pf-v6-c-page--inset: var(--pf-v6-c-page--xl--inset);
89
89
  }
90
90
  }
91
- @media screen and (min-width: 1200px) {
91
+ @media screen and (min-width: 75rem) {
92
92
  :where(:root, .pf-v6-c-page) {
93
93
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
94
94
  }
@@ -104,7 +104,7 @@
104
104
  max-height: 100%;
105
105
  background-color: var(--pf-v6-c-page--BackgroundColor);
106
106
  }
107
- @media (min-width: 1200px) {
107
+ @media (min-width: 75rem) {
108
108
  .pf-v6-c-page {
109
109
  grid-template-areas: "header header" "sidebar main";
110
110
  grid-template-columns: max-content 1fr;
@@ -143,7 +143,7 @@
143
143
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--m-expanded--TranslateX);
144
144
  box-shadow: var(--pf-v6-c-page__sidebar--BoxShadow);
145
145
  }
146
- @media screen and (min-width: 1200px) {
146
+ @media screen and (min-width: 75rem) {
147
147
  .pf-v6-c-page__sidebar.pf-m-expanded {
148
148
  --pf-v6-c-page__sidebar--BoxShadow: none;
149
149
  }
@@ -587,7 +587,7 @@
587
587
  .pf-v6-c-page__main-section.pf-m-no-padding, .pf-v6-c-page__main-section.pf-m-no-padding.pf-m-limit-width .pf-v6-c-page__main-body {
588
588
  padding: 0;
589
589
  }
590
- @media (min-width: 576px) {
590
+ @media (min-width: 36rem) {
591
591
  .pf-v6-c-page__main-section.pf-m-padding-on-sm {
592
592
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
593
593
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
@@ -607,7 +607,7 @@
607
607
  padding: 0;
608
608
  }
609
609
  }
610
- @media (min-width: 768px) {
610
+ @media (min-width: 48rem) {
611
611
  .pf-v6-c-page__main-section.pf-m-padding-on-md {
612
612
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
613
613
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
@@ -627,7 +627,7 @@
627
627
  padding: 0;
628
628
  }
629
629
  }
630
- @media (min-width: 992px) {
630
+ @media (min-width: 62rem) {
631
631
  .pf-v6-c-page__main-section.pf-m-padding-on-lg {
632
632
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
633
633
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
@@ -647,7 +647,7 @@
647
647
  padding: 0;
648
648
  }
649
649
  }
650
- @media (min-width: 1200px) {
650
+ @media (min-width: 75rem) {
651
651
  .pf-v6-c-page__main-section.pf-m-padding-on-xl {
652
652
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
653
653
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
@@ -667,7 +667,7 @@
667
667
  padding: 0;
668
668
  }
669
669
  }
670
- @media (min-width: 1450px) {
670
+ @media (min-width: 90.625rem) {
671
671
  .pf-v6-c-page__main-section.pf-m-padding-on-2xl {
672
672
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
673
673
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
package/components/Pagination/pagination.css CHANGED
@@ -35,7 +35,7 @@
35
35
  --pf-v6-c-pagination--m-bottom__page-menu--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
36
36
  --pf-v6-c-pagination__page-menu--md--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
37
37
  }
38
- @media screen and (min-width: 768px) {
38
+ @media screen and (min-width: 48rem) {
39
39
  :where(:root, .pf-v6-c-pagination) {
40
40
  --pf-v6-c-pagination--m-bottom--BoxShadow: none;
41
41
  --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination__page-menu--md--Display);
@@ -43,7 +43,7 @@
43
43
  --pf-v6-c-pagination__total-items--Display: none;
44
44
  }
45
45
  }
46
- @media screen and (min-width: 1200px) {
46
+ @media screen and (min-width: 75rem) {
47
47
  :where(:root, .pf-v6-c-pagination) {
48
48
  --pf-v6-c-pagination__scroll-button--Width: var(--pf-v6-c-pagination__scroll-button--xl--Width);
49
49
  }
@@ -92,7 +92,7 @@
92
92
  flex-basis: 100%;
93
93
  justify-content: space-between;
94
94
  }
95
- @media screen and (min-width: 768px) {
95
+ @media screen and (min-width: 48rem) {
96
96
  .pf-v6-c-pagination.pf-m-bottom {
97
97
  --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
98
98
  --pf-v6-c-pagination--m-bottom--MarginBlockStart: 0;
@@ -194,7 +194,7 @@
194
194
  .pf-v6-c-pagination.pf-m-inset-2xl {
195
195
  --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
196
196
  }
197
- @media (min-width: 576px) {
197
+ @media (min-width: 36rem) {
198
198
  .pf-v6-c-pagination.pf-m-display-summary-on-sm {
199
199
  --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-summary__nav--Display);
200
200
  --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-summary__page-menu--Display);
@@ -224,7 +224,7 @@
224
224
  --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
225
225
  }
226
226
  }
227
- @media (min-width: 768px) {
227
+ @media (min-width: 48rem) {
228
228
  .pf-v6-c-pagination.pf-m-display-summary-on-md {
229
229
  --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-summary__nav--Display);
230
230
  --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-summary__page-menu--Display);
@@ -254,7 +254,7 @@
254
254
  --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
255
255
  }
256
256
  }
257
- @media (min-width: 992px) {
257
+ @media (min-width: 62rem) {
258
258
  .pf-v6-c-pagination.pf-m-display-summary-on-lg {
259
259
  --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-summary__nav--Display);
260
260
  --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-summary__page-menu--Display);
@@ -284,7 +284,7 @@
284
284
  --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
285
285
  }
286
286
  }
287
- @media (min-width: 1200px) {
287
+ @media (min-width: 75rem) {
288
288
  .pf-v6-c-pagination.pf-m-display-summary-on-xl {
289
289
  --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-summary__nav--Display);
290
290
  --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-summary__page-menu--Display);
@@ -314,7 +314,7 @@
314
314
  --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
315
315
  }
316
316
  }
317
- @media (min-width: 1450px) {
317
+ @media (min-width: 90.625rem) {
318
318
  .pf-v6-c-pagination.pf-m-display-summary-on-2xl {
319
319
  --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-summary__nav--Display);
320
320
  --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-summary__page-menu--Display);
package/components/ProgressStepper/progress-stepper.css CHANGED
@@ -116,7 +116,7 @@
116
116
  --pf-v6-c-progress-stepper--m-center__step-connector--before--Content: none;
117
117
  --pf-v6-c-progress-stepper--m-center__step-main--before--Content: "";
118
118
  }
119
- @media screen and (min-width: 768px) {
119
+ @media screen and (min-width: 48rem) {
120
120
  :where(:root, .pf-v6-c-progress-stepper) {
121
121
  --pf-v6-c-progress-stepper--GridAutoFlow: var(--pf-v6-c-progress-stepper--m-horizontal--GridAutoFlow);
122
122
  --pf-v6-c-progress-stepper--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-horizontal--GridTemplateColumns);
@@ -376,7 +376,7 @@
376
376
  --pf-v6-c-progress-stepper--m-center__step-connector--before--Content: none;
377
377
  --pf-v6-c-progress-stepper--m-center__step-main--before--Content: "";
378
378
  }
379
- @media (min-width: 576px) {
379
+ @media (min-width: 36rem) {
380
380
  .pf-v6-c-progress-stepper.pf-m-horizontal-on-sm {
381
381
  --pf-v6-c-progress-stepper--GridAutoFlow: var(--pf-v6-c-progress-stepper--m-horizontal--GridAutoFlow);
382
382
  --pf-v6-c-progress-stepper--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-horizontal--GridTemplateColumns);
@@ -422,7 +422,7 @@
422
422
  --pf-v6-c-progress-stepper--m-center__step-main--before--Content: "";
423
423
  }
424
424
  }
425
- @media (min-width: 768px) {
425
+ @media (min-width: 48rem) {
426
426
  .pf-v6-c-progress-stepper.pf-m-horizontal-on-md {
427
427
  --pf-v6-c-progress-stepper--GridAutoFlow: var(--pf-v6-c-progress-stepper--m-horizontal--GridAutoFlow);
428
428
  --pf-v6-c-progress-stepper--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-horizontal--GridTemplateColumns);
@@ -468,7 +468,7 @@
468
468
  --pf-v6-c-progress-stepper--m-center__step-main--before--Content: "";
469
469
  }
470
470
  }
471
- @media (min-width: 992px) {
471
+ @media (min-width: 62rem) {
472
472
  .pf-v6-c-progress-stepper.pf-m-horizontal-on-lg {
473
473
  --pf-v6-c-progress-stepper--GridAutoFlow: var(--pf-v6-c-progress-stepper--m-horizontal--GridAutoFlow);
474
474
  --pf-v6-c-progress-stepper--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-horizontal--GridTemplateColumns);
@@ -514,7 +514,7 @@
514
514
  --pf-v6-c-progress-stepper--m-center__step-main--before--Content: "";
515
515
  }
516
516
  }
517
- @media (min-width: 1200px) {
517
+ @media (min-width: 75rem) {
518
518
  .pf-v6-c-progress-stepper.pf-m-horizontal-on-xl {
519
519
  --pf-v6-c-progress-stepper--GridAutoFlow: var(--pf-v6-c-progress-stepper--m-horizontal--GridAutoFlow);
520
520
  --pf-v6-c-progress-stepper--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-horizontal--GridTemplateColumns);
@@ -560,7 +560,7 @@
560
560
  --pf-v6-c-progress-stepper--m-center__step-main--before--Content: "";
561
561
  }
562
562
  }
563
- @media (min-width: 1450px) {
563
+ @media (min-width: 90.625rem) {
564
564
  .pf-v6-c-progress-stepper.pf-m-horizontal-on-2xl {
565
565
  --pf-v6-c-progress-stepper--GridAutoFlow: var(--pf-v6-c-progress-stepper--m-horizontal--GridAutoFlow);
566
566
  --pf-v6-c-progress-stepper--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-horizontal--GridTemplateColumns);
package/components/Sidebar/sidebar.css CHANGED
@@ -70,7 +70,7 @@
70
70
  .pf-v6-c-sidebar {
71
71
  height: 100%;
72
72
  }
73
- @media (min-width: 768px) {
73
+ @media (min-width: 48rem) {
74
74
  .pf-v6-c-sidebar {
75
75
  --pf-v6-c-sidebar__main--FlexDirection: var(--pf-v6-c-sidebar__main--md--FlexDirection);
76
76
  --pf-v6-c-sidebar__main--AlignItems: var(--pf-v6-c-sidebar__main--md--AlignItems);
@@ -81,7 +81,7 @@
81
81
  --pf-v6-c-sidebar__panel--Position: var(--pf-v6-c-sidebar__panel--md--Position);
82
82
  }
83
83
  }
84
- @media (min-width: 1200px) {
84
+ @media (min-width: 75rem) {
85
85
  .pf-v6-c-sidebar {
86
86
  --pf-v6-c-sidebar--inset: var(--pf-v6-c-sidebar--xl--inset);
87
87
  }
@@ -93,7 +93,7 @@
93
93
  --pf-v6-c-sidebar__panel--Order: var(--pf-v6-c-sidebar--m-panel-right__panel--Order);
94
94
  --pf-v6-c-sidebar__content--Order: var(--pf-v6-c-sidebar--m-panel-right__content--Order);
95
95
  }
96
- @media (min-width: 768px) {
96
+ @media (min-width: 48rem) {
97
97
  .pf-v6-c-sidebar.pf-m-panel-right {
98
98
  --pf-v6-c-sidebar--m-panel-right__panel--Order: var(--pf-v6-c-sidebar--m-panel-right__panel--md--Order);
99
99
  --pf-v6-c-sidebar--m-panel-right__content--Order: var(--pf-v6-c-sidebar--m-panel-right__content--md--Order);
@@ -227,7 +227,7 @@
227
227
  --pf-v6-c-sidebar__panel--FlexBasis: 100%;
228
228
  }
229
229
 
230
- @media (min-width: 576px) {
230
+ @media (min-width: 36rem) {
231
231
  .pf-v6-c-sidebar__panel.pf-m-width-default-on-sm {
232
232
  --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--FlexBasis--base);
233
233
  }
@@ -250,7 +250,7 @@
250
250
  --pf-v6-c-sidebar__panel--FlexBasis: 100%;
251
251
  }
252
252
  }
253
- @media (min-width: 768px) {
253
+ @media (min-width: 48rem) {
254
254
  .pf-v6-c-sidebar__panel.pf-m-width-default-on-md {
255
255
  --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--FlexBasis--base);
256
256
  }
@@ -273,7 +273,7 @@
273
273
  --pf-v6-c-sidebar__panel--FlexBasis: 100%;
274
274
  }
275
275
  }
276
- @media (min-width: 992px) {
276
+ @media (min-width: 62rem) {
277
277
  .pf-v6-c-sidebar__panel.pf-m-width-default-on-lg {
278
278
  --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--FlexBasis--base);
279
279
  }
@@ -296,7 +296,7 @@
296
296
  --pf-v6-c-sidebar__panel--FlexBasis: 100%;
297
297
  }
298
298
  }
299
- @media (min-width: 1200px) {
299
+ @media (min-width: 75rem) {
300
300
  .pf-v6-c-sidebar__panel.pf-m-width-default-on-xl {
301
301
  --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--FlexBasis--base);
302
302
  }
@@ -319,7 +319,7 @@
319
319
  --pf-v6-c-sidebar__panel--FlexBasis: 100%;
320
320
  }
321
321
  }
322
- @media (min-width: 1450px) {
322
+ @media (min-width: 90.625rem) {
323
323
  .pf-v6-c-sidebar__panel.pf-m-width-default-on-2xl {
324
324
  --pf-v6-c-sidebar__panel--FlexBasis: var(--pf-v6-c-sidebar__panel--FlexBasis--base);
325
325
  }
package/components/TabContent/tab-content.css CHANGED
@@ -18,7 +18,7 @@
18
18
  .pf-v6-c-tab-content {
19
19
  background-color: var(--pf-v6-c-tab-content--BackgroundColor);
20
20
  }
21
- @media screen and (min-width: 1200px) {
21
+ @media screen and (min-width: 75rem) {
22
22
  .pf-v6-c-tab-content {
23
23
  --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockStart);
24
24
  --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineEnd);