@patternfly/patternfly 6.0.0-alpha.105 → 6.0.0-alpha.107

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 (43) hide show
  1. package/components/Divider/divider.css +42 -42
  2. package/components/Label/label.css +14 -0
  3. package/components/Label/label.scss +19 -0
  4. package/components/Masthead/masthead.css +70 -70
  5. package/components/Pagination/pagination.css +30 -30
  6. package/components/Tabs/tabs.css +90 -90
  7. package/components/Toolbar/toolbar.css +288 -288
  8. package/docs/components/Label/examples/Label.md +1781 -56
  9. package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
  10. package/docs/layouts/Flex/examples/Flex.css +4 -4
  11. package/docs/layouts/Flex/examples/Flex.md +50 -50
  12. package/docs/layouts/Gallery/examples/Gallery.css +4 -4
  13. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  14. package/docs/layouts/Grid/examples/Grid.css +3 -3
  15. package/docs/layouts/Grid/examples/Grid.md +33 -33
  16. package/docs/layouts/Level/examples/Level.css +5 -5
  17. package/docs/layouts/Split/examples/Split.css +4 -4
  18. package/docs/layouts/Stack/examples/Stack.css +5 -5
  19. package/layouts/Bullseye/bullseye.css +5 -1
  20. package/layouts/Bullseye/bullseye.scss +4 -1
  21. package/layouts/Flex/flex.css +207 -203
  22. package/layouts/Flex/flex.scss +34 -31
  23. package/layouts/Gallery/gallery.css +6 -2
  24. package/layouts/Gallery/gallery.scss +8 -5
  25. package/layouts/Grid/grid.css +6 -2
  26. package/layouts/Grid/grid.scss +7 -4
  27. package/layouts/Level/level.css +5 -1
  28. package/layouts/Level/level.scss +5 -2
  29. package/layouts/Split/split.css +5 -1
  30. package/layouts/Split/split.scss +5 -2
  31. package/layouts/Stack/stack.css +5 -1
  32. package/layouts/Stack/stack.scss +5 -2
  33. package/package.json +1 -1
  34. package/patternfly-addons.css +672 -672
  35. package/patternfly-no-globals.css +773 -731
  36. package/patternfly-theme-dark-unversioned.css +773 -731
  37. package/patternfly.css +773 -731
  38. package/patternfly.min.css +1 -1
  39. package/patternfly.min.css.map +1 -1
  40. package/sass-utilities/functions.scss +3 -3
  41. package/sass-utilities/scss-variables.scss +9 -9
  42. package/utilities/Spacing/spacing.css +672 -672
  43. package/utilities/Spacing/spacing.scss +1 -1
package/components/Divider/divider.css CHANGED
@@ -85,25 +85,25 @@
85
85
  --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
86
86
  }
87
87
  .pf-v6-c-divider.pf-m-inset-xs {
88
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xs) * 2);
88
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
89
89
  }
90
90
  .pf-v6-c-divider.pf-m-inset-sm {
91
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--sm) * 2);
91
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
92
92
  }
93
93
  .pf-v6-c-divider.pf-m-inset-md {
94
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--md) * 2);
94
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
95
95
  }
96
96
  .pf-v6-c-divider.pf-m-inset-lg {
97
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--lg) * 2);
97
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
98
98
  }
99
99
  .pf-v6-c-divider.pf-m-inset-xl {
100
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xl) * 2);
100
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
101
101
  }
102
102
  .pf-v6-c-divider.pf-m-inset-2xl {
103
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--2xl) * 2);
103
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
104
104
  }
105
105
  .pf-v6-c-divider.pf-m-inset-3xl {
106
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--3xl) * 2);
106
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
107
107
  }
108
108
 
109
109
  @media (min-width: 576px) {
@@ -125,25 +125,25 @@
125
125
  --pf-v6-c-divider--before--FlexBasis: 100%;
126
126
  }
127
127
  .pf-v6-c-divider.pf-m-inset-xs-on-sm {
128
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xs) * 2);
128
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
129
129
  }
130
130
  .pf-v6-c-divider.pf-m-inset-sm-on-sm {
131
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--sm) * 2);
131
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
132
132
  }
133
133
  .pf-v6-c-divider.pf-m-inset-md-on-sm {
134
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--md) * 2);
134
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
135
135
  }
136
136
  .pf-v6-c-divider.pf-m-inset-lg-on-sm {
137
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--lg) * 2);
137
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
138
138
  }
139
139
  .pf-v6-c-divider.pf-m-inset-xl-on-sm {
140
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xl) * 2);
140
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
141
141
  }
142
142
  .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
143
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--2xl) * 2);
143
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
144
144
  }
145
145
  .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
146
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--3xl) * 2);
146
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
147
147
  }
148
148
  }
149
149
  @media (min-width: 768px) {
@@ -165,25 +165,25 @@
165
165
  --pf-v6-c-divider--before--FlexBasis: 100%;
166
166
  }
167
167
  .pf-v6-c-divider.pf-m-inset-xs-on-md {
168
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xs) * 2);
168
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
169
169
  }
170
170
  .pf-v6-c-divider.pf-m-inset-sm-on-md {
171
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--sm) * 2);
171
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
172
172
  }
173
173
  .pf-v6-c-divider.pf-m-inset-md-on-md {
174
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--md) * 2);
174
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
175
175
  }
176
176
  .pf-v6-c-divider.pf-m-inset-lg-on-md {
177
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--lg) * 2);
177
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
178
178
  }
179
179
  .pf-v6-c-divider.pf-m-inset-xl-on-md {
180
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xl) * 2);
180
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
181
181
  }
182
182
  .pf-v6-c-divider.pf-m-inset-2xl-on-md {
183
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--2xl) * 2);
183
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
184
184
  }
185
185
  .pf-v6-c-divider.pf-m-inset-3xl-on-md {
186
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--3xl) * 2);
186
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
187
187
  }
188
188
  }
189
189
  @media (min-width: 992px) {
@@ -205,25 +205,25 @@
205
205
  --pf-v6-c-divider--before--FlexBasis: 100%;
206
206
  }
207
207
  .pf-v6-c-divider.pf-m-inset-xs-on-lg {
208
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xs) * 2);
208
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
209
209
  }
210
210
  .pf-v6-c-divider.pf-m-inset-sm-on-lg {
211
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--sm) * 2);
211
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
212
212
  }
213
213
  .pf-v6-c-divider.pf-m-inset-md-on-lg {
214
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--md) * 2);
214
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
215
215
  }
216
216
  .pf-v6-c-divider.pf-m-inset-lg-on-lg {
217
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--lg) * 2);
217
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
218
218
  }
219
219
  .pf-v6-c-divider.pf-m-inset-xl-on-lg {
220
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xl) * 2);
220
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
221
221
  }
222
222
  .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
223
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--2xl) * 2);
223
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
224
224
  }
225
225
  .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
226
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--3xl) * 2);
226
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
227
227
  }
228
228
  }
229
229
  @media (min-width: 1200px) {
@@ -245,25 +245,25 @@
245
245
  --pf-v6-c-divider--before--FlexBasis: 100%;
246
246
  }
247
247
  .pf-v6-c-divider.pf-m-inset-xs-on-xl {
248
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xs) * 2);
248
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
249
249
  }
250
250
  .pf-v6-c-divider.pf-m-inset-sm-on-xl {
251
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--sm) * 2);
251
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
252
252
  }
253
253
  .pf-v6-c-divider.pf-m-inset-md-on-xl {
254
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--md) * 2);
254
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
255
255
  }
256
256
  .pf-v6-c-divider.pf-m-inset-lg-on-xl {
257
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--lg) * 2);
257
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
258
258
  }
259
259
  .pf-v6-c-divider.pf-m-inset-xl-on-xl {
260
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xl) * 2);
260
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
261
261
  }
262
262
  .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
263
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--2xl) * 2);
263
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
264
264
  }
265
265
  .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
266
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--3xl) * 2);
266
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
267
267
  }
268
268
  }
269
269
  @media (min-width: 1450px) {
@@ -285,24 +285,24 @@
285
285
  --pf-v6-c-divider--before--FlexBasis: 100%;
286
286
  }
287
287
  .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
288
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xs) * 2);
288
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
289
289
  }
290
290
  .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
291
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--sm) * 2);
291
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
292
292
  }
293
293
  .pf-v6-c-divider.pf-m-inset-md-on-2xl {
294
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--md) * 2);
294
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
295
295
  }
296
296
  .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
297
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--lg) * 2);
297
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
298
298
  }
299
299
  .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
300
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xl) * 2);
300
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
301
301
  }
302
302
  .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
303
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--2xl) * 2);
303
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
304
304
  }
305
305
  .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
306
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--3xl) * 2);
306
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
307
307
  }
308
308
  }
package/components/Label/label.css CHANGED
@@ -186,6 +186,10 @@
186
186
  --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
187
187
  --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
188
188
  --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
189
+ --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
190
+ --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
191
+ --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
192
+ --pf-v6-c-label--m-disabled--c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
189
193
  }
190
194
 
191
195
  .pf-v6-c-label {
@@ -420,6 +424,16 @@
420
424
  .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
421
425
  --pf-v6-c-label--m-filled__actions--c-button--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
422
426
  }
427
+ .pf-v6-c-label.pf-m-disabled {
428
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
429
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
430
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
431
+ --pf-v6-c-label--BorderWidth: 0;
432
+ pointer-events: none;
433
+ }
434
+ .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
435
+ --pf-v6-c-button--m-plain--disabled--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled--Color);
436
+ }
423
437
 
424
438
  .pf-v6-c-label,
425
439
  .pf-v6-c-label__content {
package/components/Label/label.scss CHANGED
@@ -243,6 +243,12 @@
243
243
  --#{$label}--m-editable--m-editable-active--BackgroundColor: transparent;
244
244
  --#{$label}--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
245
245
  --#{$label}--m-editable--m-editable-active__content--Cursor: initial;
246
+
247
+ // Disabled
248
+ --#{$label}--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
249
+ --#{$label}--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
250
+ --#{$label}--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
251
+ --#{$label}--m-disabled--c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
246
252
  }
247
253
 
248
254
  .#{$label} {
@@ -508,6 +514,19 @@
508
514
  }
509
515
  }
510
516
  }
517
+
518
+ &.pf-m-disabled {
519
+ --#{$label}--BackgroundColor: var(--#{$label}--m-disabled--BackgroundColor);
520
+ --#{$label}--Color: var(--#{$label}--m-disabled--Color);
521
+ --#{$label}__icon--Color: var(--#{$label}--m-disabled__icon--Color);
522
+ --#{$label}--BorderWidth: 0;
523
+
524
+ pointer-events: none;
525
+
526
+ .#{$button} {
527
+ --#{$button}--m-plain--disabled--Color: var(--#{$label}--m-disabled--c-button--disabled--Color);
528
+ }
529
+ }
511
530
  }
512
531
 
513
532
  .#{$label},
package/components/Masthead/masthead.css CHANGED
@@ -100,24 +100,24 @@
100
100
  padding-inline-end: 0;
101
101
  }
102
102
  .pf-v6-c-masthead.pf-m-inset-sm {
103
- padding-inline-start: var(--pf-v6-global--spacer--sm);
104
- padding-inline-end: var(--pf-v6-global--spacer--sm);
103
+ padding-inline-start: var(--pf-t--global--spacer--sm);
104
+ padding-inline-end: var(--pf-t--global--spacer--sm);
105
105
  }
106
106
  .pf-v6-c-masthead.pf-m-inset-md {
107
- padding-inline-start: var(--pf-v6-global--spacer--md);
108
- padding-inline-end: var(--pf-v6-global--spacer--md);
107
+ padding-inline-start: var(--pf-t--global--spacer--md);
108
+ padding-inline-end: var(--pf-t--global--spacer--md);
109
109
  }
110
110
  .pf-v6-c-masthead.pf-m-inset-lg {
111
- padding-inline-start: var(--pf-v6-global--spacer--lg);
112
- padding-inline-end: var(--pf-v6-global--spacer--lg);
111
+ padding-inline-start: var(--pf-t--global--spacer--lg);
112
+ padding-inline-end: var(--pf-t--global--spacer--lg);
113
113
  }
114
114
  .pf-v6-c-masthead.pf-m-inset-xl {
115
- padding-inline-start: var(--pf-v6-global--spacer--xl);
116
- padding-inline-end: var(--pf-v6-global--spacer--xl);
115
+ padding-inline-start: var(--pf-t--global--spacer--xl);
116
+ padding-inline-end: var(--pf-t--global--spacer--xl);
117
117
  }
118
118
  .pf-v6-c-masthead.pf-m-inset-2xl {
119
- padding-inline-start: var(--pf-v6-global--spacer--2xl);
120
- padding-inline-end: var(--pf-v6-global--spacer--2xl);
119
+ padding-inline-start: var(--pf-t--global--spacer--2xl);
120
+ padding-inline-end: var(--pf-t--global--spacer--2xl);
121
121
  }
122
122
 
123
123
  .pf-v6-c-masthead,
@@ -196,24 +196,24 @@
196
196
  padding-inline-end: 0;
197
197
  }
198
198
  .pf-v6-c-masthead.pf-m-inset-sm {
199
- padding-inline-start: var(--pf-v6-global--spacer--sm);
200
- padding-inline-end: var(--pf-v6-global--spacer--sm);
199
+ padding-inline-start: var(--pf-t--global--spacer--sm);
200
+ padding-inline-end: var(--pf-t--global--spacer--sm);
201
201
  }
202
202
  .pf-v6-c-masthead.pf-m-inset-md {
203
- padding-inline-start: var(--pf-v6-global--spacer--md);
204
- padding-inline-end: var(--pf-v6-global--spacer--md);
203
+ padding-inline-start: var(--pf-t--global--spacer--md);
204
+ padding-inline-end: var(--pf-t--global--spacer--md);
205
205
  }
206
206
  .pf-v6-c-masthead.pf-m-inset-lg {
207
- padding-inline-start: var(--pf-v6-global--spacer--lg);
208
- padding-inline-end: var(--pf-v6-global--spacer--lg);
207
+ padding-inline-start: var(--pf-t--global--spacer--lg);
208
+ padding-inline-end: var(--pf-t--global--spacer--lg);
209
209
  }
210
210
  .pf-v6-c-masthead.pf-m-inset-xl {
211
- padding-inline-start: var(--pf-v6-global--spacer--xl);
212
- padding-inline-end: var(--pf-v6-global--spacer--xl);
211
+ padding-inline-start: var(--pf-t--global--spacer--xl);
212
+ padding-inline-end: var(--pf-t--global--spacer--xl);
213
213
  }
214
214
  .pf-v6-c-masthead.pf-m-inset-2xl {
215
- padding-inline-start: var(--pf-v6-global--spacer--2xl);
216
- padding-inline-end: var(--pf-v6-global--spacer--2xl);
215
+ padding-inline-start: var(--pf-t--global--spacer--2xl);
216
+ padding-inline-end: var(--pf-t--global--spacer--2xl);
217
217
  }
218
218
  @media (min-width: 576px) {
219
219
  .pf-v6-c-masthead.pf-m-display-stack-on-sm {
@@ -240,24 +240,24 @@
240
240
  padding-inline-end: 0;
241
241
  }
242
242
  .pf-v6-c-masthead.pf-m-inset-sm {
243
- padding-inline-start: var(--pf-v6-global--spacer--sm);
244
- padding-inline-end: var(--pf-v6-global--spacer--sm);
243
+ padding-inline-start: var(--pf-t--global--spacer--sm);
244
+ padding-inline-end: var(--pf-t--global--spacer--sm);
245
245
  }
246
246
  .pf-v6-c-masthead.pf-m-inset-md {
247
- padding-inline-start: var(--pf-v6-global--spacer--md);
248
- padding-inline-end: var(--pf-v6-global--spacer--md);
247
+ padding-inline-start: var(--pf-t--global--spacer--md);
248
+ padding-inline-end: var(--pf-t--global--spacer--md);
249
249
  }
250
250
  .pf-v6-c-masthead.pf-m-inset-lg {
251
- padding-inline-start: var(--pf-v6-global--spacer--lg);
252
- padding-inline-end: var(--pf-v6-global--spacer--lg);
251
+ padding-inline-start: var(--pf-t--global--spacer--lg);
252
+ padding-inline-end: var(--pf-t--global--spacer--lg);
253
253
  }
254
254
  .pf-v6-c-masthead.pf-m-inset-xl {
255
- padding-inline-start: var(--pf-v6-global--spacer--xl);
256
- padding-inline-end: var(--pf-v6-global--spacer--xl);
255
+ padding-inline-start: var(--pf-t--global--spacer--xl);
256
+ padding-inline-end: var(--pf-t--global--spacer--xl);
257
257
  }
258
258
  .pf-v6-c-masthead.pf-m-inset-2xl {
259
- padding-inline-start: var(--pf-v6-global--spacer--2xl);
260
- padding-inline-end: var(--pf-v6-global--spacer--2xl);
259
+ padding-inline-start: var(--pf-t--global--spacer--2xl);
260
+ padding-inline-end: var(--pf-t--global--spacer--2xl);
261
261
  }
262
262
  @media (min-width: 768px) {
263
263
  .pf-v6-c-masthead.pf-m-display-stack-on-md {
@@ -284,24 +284,24 @@
284
284
  padding-inline-end: 0;
285
285
  }
286
286
  .pf-v6-c-masthead.pf-m-inset-sm {
287
- padding-inline-start: var(--pf-v6-global--spacer--sm);
288
- padding-inline-end: var(--pf-v6-global--spacer--sm);
287
+ padding-inline-start: var(--pf-t--global--spacer--sm);
288
+ padding-inline-end: var(--pf-t--global--spacer--sm);
289
289
  }
290
290
  .pf-v6-c-masthead.pf-m-inset-md {
291
- padding-inline-start: var(--pf-v6-global--spacer--md);
292
- padding-inline-end: var(--pf-v6-global--spacer--md);
291
+ padding-inline-start: var(--pf-t--global--spacer--md);
292
+ padding-inline-end: var(--pf-t--global--spacer--md);
293
293
  }
294
294
  .pf-v6-c-masthead.pf-m-inset-lg {
295
- padding-inline-start: var(--pf-v6-global--spacer--lg);
296
- padding-inline-end: var(--pf-v6-global--spacer--lg);
295
+ padding-inline-start: var(--pf-t--global--spacer--lg);
296
+ padding-inline-end: var(--pf-t--global--spacer--lg);
297
297
  }
298
298
  .pf-v6-c-masthead.pf-m-inset-xl {
299
- padding-inline-start: var(--pf-v6-global--spacer--xl);
300
- padding-inline-end: var(--pf-v6-global--spacer--xl);
299
+ padding-inline-start: var(--pf-t--global--spacer--xl);
300
+ padding-inline-end: var(--pf-t--global--spacer--xl);
301
301
  }
302
302
  .pf-v6-c-masthead.pf-m-inset-2xl {
303
- padding-inline-start: var(--pf-v6-global--spacer--2xl);
304
- padding-inline-end: var(--pf-v6-global--spacer--2xl);
303
+ padding-inline-start: var(--pf-t--global--spacer--2xl);
304
+ padding-inline-end: var(--pf-t--global--spacer--2xl);
305
305
  }
306
306
  @media (min-width: 992px) {
307
307
  .pf-v6-c-masthead.pf-m-display-stack-on-lg {
@@ -328,24 +328,24 @@
328
328
  padding-inline-end: 0;
329
329
  }
330
330
  .pf-v6-c-masthead.pf-m-inset-sm {
331
- padding-inline-start: var(--pf-v6-global--spacer--sm);
332
- padding-inline-end: var(--pf-v6-global--spacer--sm);
331
+ padding-inline-start: var(--pf-t--global--spacer--sm);
332
+ padding-inline-end: var(--pf-t--global--spacer--sm);
333
333
  }
334
334
  .pf-v6-c-masthead.pf-m-inset-md {
335
- padding-inline-start: var(--pf-v6-global--spacer--md);
336
- padding-inline-end: var(--pf-v6-global--spacer--md);
335
+ padding-inline-start: var(--pf-t--global--spacer--md);
336
+ padding-inline-end: var(--pf-t--global--spacer--md);
337
337
  }
338
338
  .pf-v6-c-masthead.pf-m-inset-lg {
339
- padding-inline-start: var(--pf-v6-global--spacer--lg);
340
- padding-inline-end: var(--pf-v6-global--spacer--lg);
339
+ padding-inline-start: var(--pf-t--global--spacer--lg);
340
+ padding-inline-end: var(--pf-t--global--spacer--lg);
341
341
  }
342
342
  .pf-v6-c-masthead.pf-m-inset-xl {
343
- padding-inline-start: var(--pf-v6-global--spacer--xl);
344
- padding-inline-end: var(--pf-v6-global--spacer--xl);
343
+ padding-inline-start: var(--pf-t--global--spacer--xl);
344
+ padding-inline-end: var(--pf-t--global--spacer--xl);
345
345
  }
346
346
  .pf-v6-c-masthead.pf-m-inset-2xl {
347
- padding-inline-start: var(--pf-v6-global--spacer--2xl);
348
- padding-inline-end: var(--pf-v6-global--spacer--2xl);
347
+ padding-inline-start: var(--pf-t--global--spacer--2xl);
348
+ padding-inline-end: var(--pf-t--global--spacer--2xl);
349
349
  }
350
350
  @media (min-width: 1200px) {
351
351
  .pf-v6-c-masthead.pf-m-display-stack-on-xl {
@@ -372,24 +372,24 @@
372
372
  padding-inline-end: 0;
373
373
  }
374
374
  .pf-v6-c-masthead.pf-m-inset-sm {
375
- padding-inline-start: var(--pf-v6-global--spacer--sm);
376
- padding-inline-end: var(--pf-v6-global--spacer--sm);
375
+ padding-inline-start: var(--pf-t--global--spacer--sm);
376
+ padding-inline-end: var(--pf-t--global--spacer--sm);
377
377
  }
378
378
  .pf-v6-c-masthead.pf-m-inset-md {
379
- padding-inline-start: var(--pf-v6-global--spacer--md);
380
- padding-inline-end: var(--pf-v6-global--spacer--md);
379
+ padding-inline-start: var(--pf-t--global--spacer--md);
380
+ padding-inline-end: var(--pf-t--global--spacer--md);
381
381
  }
382
382
  .pf-v6-c-masthead.pf-m-inset-lg {
383
- padding-inline-start: var(--pf-v6-global--spacer--lg);
384
- padding-inline-end: var(--pf-v6-global--spacer--lg);
383
+ padding-inline-start: var(--pf-t--global--spacer--lg);
384
+ padding-inline-end: var(--pf-t--global--spacer--lg);
385
385
  }
386
386
  .pf-v6-c-masthead.pf-m-inset-xl {
387
- padding-inline-start: var(--pf-v6-global--spacer--xl);
388
- padding-inline-end: var(--pf-v6-global--spacer--xl);
387
+ padding-inline-start: var(--pf-t--global--spacer--xl);
388
+ padding-inline-end: var(--pf-t--global--spacer--xl);
389
389
  }
390
390
  .pf-v6-c-masthead.pf-m-inset-2xl {
391
- padding-inline-start: var(--pf-v6-global--spacer--2xl);
392
- padding-inline-end: var(--pf-v6-global--spacer--2xl);
391
+ padding-inline-start: var(--pf-t--global--spacer--2xl);
392
+ padding-inline-end: var(--pf-t--global--spacer--2xl);
393
393
  }
394
394
  @media (min-width: 1450px) {
395
395
  .pf-v6-c-masthead.pf-m-display-stack-on-2xl {
@@ -416,22 +416,22 @@
416
416
  padding-inline-end: 0;
417
417
  }
418
418
  .pf-v6-c-masthead.pf-m-inset-sm {
419
- padding-inline-start: var(--pf-v6-global--spacer--sm);
420
- padding-inline-end: var(--pf-v6-global--spacer--sm);
419
+ padding-inline-start: var(--pf-t--global--spacer--sm);
420
+ padding-inline-end: var(--pf-t--global--spacer--sm);
421
421
  }
422
422
  .pf-v6-c-masthead.pf-m-inset-md {
423
- padding-inline-start: var(--pf-v6-global--spacer--md);
424
- padding-inline-end: var(--pf-v6-global--spacer--md);
423
+ padding-inline-start: var(--pf-t--global--spacer--md);
424
+ padding-inline-end: var(--pf-t--global--spacer--md);
425
425
  }
426
426
  .pf-v6-c-masthead.pf-m-inset-lg {
427
- padding-inline-start: var(--pf-v6-global--spacer--lg);
428
- padding-inline-end: var(--pf-v6-global--spacer--lg);
427
+ padding-inline-start: var(--pf-t--global--spacer--lg);
428
+ padding-inline-end: var(--pf-t--global--spacer--lg);
429
429
  }
430
430
  .pf-v6-c-masthead.pf-m-inset-xl {
431
- padding-inline-start: var(--pf-v6-global--spacer--xl);
432
- padding-inline-end: var(--pf-v6-global--spacer--xl);
431
+ padding-inline-start: var(--pf-t--global--spacer--xl);
432
+ padding-inline-end: var(--pf-t--global--spacer--xl);
433
433
  }
434
434
  .pf-v6-c-masthead.pf-m-inset-2xl {
435
- padding-inline-start: var(--pf-v6-global--spacer--2xl);
436
- padding-inline-end: var(--pf-v6-global--spacer--2xl);
435
+ padding-inline-start: var(--pf-t--global--spacer--2xl);
436
+ padding-inline-end: var(--pf-t--global--spacer--2xl);
437
437
  }
package/components/Pagination/pagination.css CHANGED
@@ -180,19 +180,19 @@
180
180
  --pf-v6-c-pagination--inset: 0;
181
181
  }
182
182
  .pf-v6-c-pagination.pf-m-inset-sm {
183
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--sm);
183
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--sm);
184
184
  }
185
185
  .pf-v6-c-pagination.pf-m-inset-md {
186
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--md);
186
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--md);
187
187
  }
188
188
  .pf-v6-c-pagination.pf-m-inset-lg {
189
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--lg);
189
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--lg);
190
190
  }
191
191
  .pf-v6-c-pagination.pf-m-inset-xl {
192
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--xl);
192
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--xl);
193
193
  }
194
194
  .pf-v6-c-pagination.pf-m-inset-2xl {
195
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--2xl);
195
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
196
196
  }
197
197
  @media (min-width: 576px) {
198
198
  .pf-v6-c-pagination.pf-m-display-summary-on-sm {
@@ -209,19 +209,19 @@
209
209
  --pf-v6-c-pagination--inset: 0;
210
210
  }
211
211
  .pf-v6-c-pagination.pf-m-inset-sm-on-sm {
212
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--sm);
212
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--sm);
213
213
  }
214
214
  .pf-v6-c-pagination.pf-m-inset-md-on-sm {
215
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--md);
215
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--md);
216
216
  }
217
217
  .pf-v6-c-pagination.pf-m-inset-lg-on-sm {
218
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--lg);
218
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--lg);
219
219
  }
220
220
  .pf-v6-c-pagination.pf-m-inset-xl-on-sm {
221
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--xl);
221
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--xl);
222
222
  }
223
223
  .pf-v6-c-pagination.pf-m-inset-2xl-on-sm {
224
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--2xl);
224
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
225
225
  }
226
226
  }
227
227
  @media (min-width: 768px) {
@@ -239,19 +239,19 @@
239
239
  --pf-v6-c-pagination--inset: 0;
240
240
  }
241
241
  .pf-v6-c-pagination.pf-m-inset-sm-on-md {
242
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--sm);
242
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--sm);
243
243
  }
244
244
  .pf-v6-c-pagination.pf-m-inset-md-on-md {
245
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--md);
245
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--md);
246
246
  }
247
247
  .pf-v6-c-pagination.pf-m-inset-lg-on-md {
248
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--lg);
248
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--lg);
249
249
  }
250
250
  .pf-v6-c-pagination.pf-m-inset-xl-on-md {
251
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--xl);
251
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--xl);
252
252
  }
253
253
  .pf-v6-c-pagination.pf-m-inset-2xl-on-md {
254
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--2xl);
254
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
255
255
  }
256
256
  }
257
257
  @media (min-width: 992px) {
@@ -269,19 +269,19 @@
269
269
  --pf-v6-c-pagination--inset: 0;
270
270
  }
271
271
  .pf-v6-c-pagination.pf-m-inset-sm-on-lg {
272
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--sm);
272
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--sm);
273
273
  }
274
274
  .pf-v6-c-pagination.pf-m-inset-md-on-lg {
275
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--md);
275
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--md);
276
276
  }
277
277
  .pf-v6-c-pagination.pf-m-inset-lg-on-lg {
278
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--lg);
278
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--lg);
279
279
  }
280
280
  .pf-v6-c-pagination.pf-m-inset-xl-on-lg {
281
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--xl);
281
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--xl);
282
282
  }
283
283
  .pf-v6-c-pagination.pf-m-inset-2xl-on-lg {
284
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--2xl);
284
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
285
285
  }
286
286
  }
287
287
  @media (min-width: 1200px) {
@@ -299,19 +299,19 @@
299
299
  --pf-v6-c-pagination--inset: 0;
300
300
  }
301
301
  .pf-v6-c-pagination.pf-m-inset-sm-on-xl {
302
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--sm);
302
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--sm);
303
303
  }
304
304
  .pf-v6-c-pagination.pf-m-inset-md-on-xl {
305
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--md);
305
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--md);
306
306
  }
307
307
  .pf-v6-c-pagination.pf-m-inset-lg-on-xl {
308
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--lg);
308
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--lg);
309
309
  }
310
310
  .pf-v6-c-pagination.pf-m-inset-xl-on-xl {
311
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--xl);
311
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--xl);
312
312
  }
313
313
  .pf-v6-c-pagination.pf-m-inset-2xl-on-xl {
314
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--2xl);
314
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
315
315
  }
316
316
  }
317
317
  @media (min-width: 1450px) {
@@ -329,18 +329,18 @@
329
329
  --pf-v6-c-pagination--inset: 0;
330
330
  }
331
331
  .pf-v6-c-pagination.pf-m-inset-sm-on-2xl {
332
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--sm);
332
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--sm);
333
333
  }
334
334
  .pf-v6-c-pagination.pf-m-inset-md-on-2xl {
335
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--md);
335
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--md);
336
336
  }
337
337
  .pf-v6-c-pagination.pf-m-inset-lg-on-2xl {
338
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--lg);
338
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--lg);
339
339
  }
340
340
  .pf-v6-c-pagination.pf-m-inset-xl-on-2xl {
341
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--xl);
341
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--xl);
342
342
  }
343
343
  .pf-v6-c-pagination.pf-m-inset-2xl-on-2xl {
344
- --pf-v6-c-pagination--inset: var(--pf-v6-global--spacer--2xl);
344
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
345
345
  }
346
346
  }