@patternfly/patternfly 6.0.0-alpha.106 → 6.0.0-alpha.108

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 (154) hide show
  1. package/README.md +0 -1
  2. package/base/_common.scss +4 -4
  3. package/base/_globals.scss +2 -2
  4. package/base/_themes.scss +3 -3
  5. package/base/_variables.scss +14 -14
  6. package/base/patternfly-variables.css +18 -12
  7. package/base/themes/dark/_globals.scss +1 -1
  8. package/base/tokens/_tokens-charts.scss +1 -1
  9. package/base/tokens/_tokens-dark.scss +3 -3
  10. package/base/tokens/_tokens-default.scss +17 -11
  11. package/base/tokens/_tokens-palette.scss +1 -1
  12. package/components/AboutModalBox/about-modal-box.scss +12 -12
  13. package/components/Accordion/accordion.scss +2 -2
  14. package/components/Alert/alert.scss +2 -2
  15. package/components/AppLauncher/app-launcher.scss +2 -2
  16. package/components/AppLauncher/themes/dark/app-launcher.scss +1 -1
  17. package/components/Avatar/avatar.scss +5 -5
  18. package/components/BackToTop/back-to-top.scss +1 -1
  19. package/components/BackgroundImage/background-image.scss +1 -1
  20. package/components/Banner/banner.scss +1 -1
  21. package/components/Brand/brand.scss +3 -3
  22. package/components/Breadcrumb/breadcrumb.scss +1 -1
  23. package/components/CalendarMonth/calendar-month.scss +1 -1
  24. package/components/Card/card.scss +1 -1
  25. package/components/Chip/chip-group.scss +2 -2
  26. package/components/Chip/chip.scss +4 -4
  27. package/components/Chip/themes/dark/chip.scss +1 -1
  28. package/components/ClipboardCopy/clipboard-copy.scss +1 -1
  29. package/components/Content/content.scss +4 -4
  30. package/components/ContextSelector/context-selector.scss +5 -5
  31. package/components/ContextSelector/themes/dark/context-selector.scss +1 -1
  32. package/components/DataList/data-list-grid.scss +6 -6
  33. package/components/DataList/data-list.css +15 -15
  34. package/components/DataList/data-list.scss +4 -4
  35. package/components/DescriptionList/description-list-order.scss +1 -1
  36. package/components/DescriptionList/description-list.scss +5 -5
  37. package/components/Divider/divider.css +57 -57
  38. package/components/Divider/divider.scss +16 -16
  39. package/components/Drawer/drawer.scss +25 -25
  40. package/components/Dropdown/dropdown.scss +6 -6
  41. package/components/Dropdown/themes/dark/dropdown.scss +1 -1
  42. package/components/DualListSelector/dual-list-selector.scss +4 -4
  43. package/components/ExpandableSection/expandable-section.scss +1 -1
  44. package/components/Form/form.scss +8 -8
  45. package/components/FormControl/form-control.css +1 -1
  46. package/components/FormControl/form-control.scss +1 -1
  47. package/components/JumpLinks/jump-links.scss +4 -4
  48. package/components/Label/label-group.scss +1 -1
  49. package/components/Label/label.scss +2 -2
  50. package/components/LogViewer/log-viewer.scss +3 -3
  51. package/components/LogViewer/themes/dark/log-viewer.scss +2 -2
  52. package/components/Login/login.scss +13 -13
  53. package/components/Masthead/masthead.css +70 -70
  54. package/components/Masthead/masthead.scss +15 -15
  55. package/components/Menu/menu.css +17 -17
  56. package/components/Menu/menu.scss +9 -9
  57. package/components/MenuToggle/menu-toggle.scss +1 -1
  58. package/components/ModalBox/modal-box.scss +3 -3
  59. package/components/Nav/nav.scss +3 -3
  60. package/components/NotificationDrawer/notification-drawer.scss +3 -3
  61. package/components/NumberInput/number-input.scss +1 -1
  62. package/components/OptionsMenu/options-menu.scss +3 -3
  63. package/components/OptionsMenu/themes/dark/options-menu.scss +1 -1
  64. package/components/Page/page.css +16 -16
  65. package/components/Page/page.scss +19 -19
  66. package/components/Pagination/pagination.css +30 -30
  67. package/components/Pagination/pagination.scss +10 -10
  68. package/components/Progress/progress.scss +1 -1
  69. package/components/ProgressStepper/progress-stepper.scss +11 -11
  70. package/components/Select/select.scss +5 -5
  71. package/components/Select/themes/dark/select.scss +1 -1
  72. package/components/Sidebar/sidebar.css +84 -84
  73. package/components/Sidebar/sidebar.scss +12 -12
  74. package/components/Skeleton/skeleton.scss +1 -1
  75. package/components/Slider/slider.scss +11 -11
  76. package/components/Switch/switch.scss +2 -2
  77. package/components/TabContent/tab-content.scss +1 -1
  78. package/components/Table/table-grid.scss +6 -6
  79. package/components/Table/table-tree-view.scss +6 -6
  80. package/components/Table/table.css +15 -15
  81. package/components/Table/table.scss +2 -2
  82. package/components/Tabs/tabs.css +90 -90
  83. package/components/Tabs/tabs.scss +10 -10
  84. package/components/TextInputGroup/text-input-group.scss +1 -1
  85. package/components/ToggleGroup/toggle-group.css +2 -2
  86. package/components/ToggleGroup/toggle-group.scss +2 -2
  87. package/components/Toolbar/toolbar.css +303 -303
  88. package/components/Toolbar/toolbar.scss +20 -20
  89. package/components/TreeView/tree-view.scss +5 -5
  90. package/components/Truncate/truncate.scss +3 -3
  91. package/components/Wizard/wizard.scss +10 -10
  92. package/docs/components/Badge/examples/Badge.md +0 -21
  93. package/docs/components/Breadcrumb/examples/Breadcrumb.md +17 -58
  94. package/docs/components/Menu/examples/Menu.md +14 -6
  95. package/docs/components/MenuToggle/examples/MenuToggle.md +19 -0
  96. package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
  97. package/docs/layouts/Flex/examples/Flex.css +4 -4
  98. package/docs/layouts/Flex/examples/Flex.md +50 -50
  99. package/docs/layouts/Gallery/examples/Gallery.css +4 -4
  100. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  101. package/docs/layouts/Grid/examples/Grid.css +3 -3
  102. package/docs/layouts/Grid/examples/Grid.md +33 -33
  103. package/docs/layouts/Level/examples/Level.css +5 -5
  104. package/docs/layouts/Split/examples/Split.css +4 -4
  105. package/docs/layouts/Stack/examples/Stack.css +5 -5
  106. package/layouts/Bullseye/bullseye.css +5 -1
  107. package/layouts/Bullseye/bullseye.scss +4 -1
  108. package/layouts/Flex/flex.css +207 -203
  109. package/layouts/Flex/flex.scss +45 -42
  110. package/layouts/Gallery/gallery.css +6 -2
  111. package/layouts/Gallery/gallery.scss +8 -5
  112. package/layouts/Grid/grid.css +6 -2
  113. package/layouts/Grid/grid.scss +11 -8
  114. package/layouts/Level/level.css +5 -1
  115. package/layouts/Level/level.scss +5 -2
  116. package/layouts/Split/split.css +5 -1
  117. package/layouts/Split/split.scss +5 -2
  118. package/layouts/Stack/stack.css +5 -1
  119. package/layouts/Stack/stack.scss +5 -2
  120. package/package.json +1 -1
  121. package/patternfly-addons.css +672 -672
  122. package/patternfly-base-no-globals-theme-dark-unversioned.css +18 -12
  123. package/patternfly-base-no-globals-theme-dark-unversioned.scss +1 -1
  124. package/patternfly-base-no-globals.css +18 -12
  125. package/patternfly-base-theme-dark-unversioned.css +18 -12
  126. package/patternfly-base.css +18 -12
  127. package/patternfly-charts-theme-dark-unversioned.scss +4 -4
  128. package/patternfly-charts-theme-dark.css +2 -2
  129. package/patternfly-charts-theme-dark.scss +4 -4
  130. package/patternfly-no-globals.css +901 -867
  131. package/patternfly-theme-dark-unversioned.css +901 -867
  132. package/patternfly.css +901 -867
  133. package/patternfly.min.css +1 -1
  134. package/patternfly.min.css.map +1 -1
  135. package/sass-utilities/_init.scss +3 -3
  136. package/sass-utilities/functions.scss +14 -14
  137. package/sass-utilities/mixins.scss +55 -54
  138. package/sass-utilities/placeholders.scss +12 -12
  139. package/sass-utilities/scss-variables.scss +36 -36
  140. package/sass-utilities/themes/dark/mixins.scss +2 -2
  141. package/sass-utilities/themes/dark/placeholders.scss +1 -1
  142. package/themes/dark/_patternfly-charts-theme-dark.scss +1 -1
  143. package/utilities/Accessibility/accessibility.scss +6 -6
  144. package/utilities/Alignment/alignment.scss +1 -1
  145. package/utilities/BackgroundColor/BackgroundColor.scss +1 -1
  146. package/utilities/BoxShadow/box-shadow.scss +1 -1
  147. package/utilities/Display/display.scss +1 -1
  148. package/utilities/Flex/flex.scss +10 -10
  149. package/utilities/Float/float.scss +1 -1
  150. package/utilities/Sizing/sizing.scss +6 -6
  151. package/utilities/Spacing/spacing.css +672 -672
  152. package/utilities/Spacing/spacing.scss +4 -4
  153. package/utilities/Text/text.scss +5 -5
  154. package/docs/components/Breadcrumb/examples/Breadcrumb.css +0 -3
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/Masthead/masthead.scss CHANGED
@@ -1,5 +1,5 @@
1
- $pf-v5-c-masthead--breakpoint-map: build-breakpoint-map();
2
- $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
1
+ $pf-v6-c-masthead--breakpoint-map: build-breakpoint-map();
2
+ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
3
3
 
4
4
  :where(:root),
5
5
  :where(.#{$masthead}) {
@@ -48,7 +48,7 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
48
48
  }
49
49
 
50
50
  // * Masthead display stack
51
- @mixin pf-v5-c-masthead--m-display-stack {
51
+ @mixin pf-v6-c-masthead--m-display-stack {
52
52
  --#{$masthead}--GridTemplateColumns: var(--#{$masthead}--m-display-stack--GridTemplateColumns);
53
53
  --#{$masthead}__main--GridColumn: var(--#{$masthead}--m-display-stack__main--GridColumn);
54
54
  --#{$masthead}__main--Order: var(--#{$masthead}--m-display-stack__main--Order);
@@ -59,7 +59,7 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
59
59
  }
60
60
 
61
61
  // * Masthead display inline
62
- @mixin pf-v5-c-masthead--m-display-inline {
62
+ @mixin pf-v6-c-masthead--m-display-inline {
63
63
  --#{$masthead}--GridTemplateColumns: var(--#{$masthead}--m-display-inline--GridTemplateColumns);
64
64
  --#{$masthead}__main--GridColumn: var(--#{$masthead}--m-display-inline__main--GridColumn);
65
65
  --#{$masthead}__main--Order: var(--#{$masthead}--m-display-inline__main--Order);
@@ -79,12 +79,12 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
79
79
  }
80
80
 
81
81
  // Set layout to stack by default
82
- @include pf-v5-c-masthead--m-display-stack;
82
+ @include pf-v6-c-masthead--m-display-stack;
83
83
 
84
84
  // Set layout to inline at medium breakpoint
85
85
  :where(:not(.pf-m-resize-observer)) & {
86
- @media screen and (min-width: $pf-v5-global--breakpoint--md) {
87
- @include pf-v5-c-masthead--m-display-inline;
86
+ @media screen and (min-width: $pf-v6-global--breakpoint--md) {
87
+ @include pf-v6-c-masthead--m-display-inline;
88
88
  }
89
89
  }
90
90
 
@@ -117,16 +117,16 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
117
117
 
118
118
  // - Masthead display stack
119
119
  &.pf-m-display-stack {
120
- @include pf-v5-c-masthead--m-display-stack;
120
+ @include pf-v6-c-masthead--m-display-stack;
121
121
  }
122
122
 
123
123
  // - Masthead display inline
124
124
  &.pf-m-display-inline {
125
- @include pf-v5-c-masthead--m-display-inline;
125
+ @include pf-v6-c-masthead--m-display-inline;
126
126
  }
127
127
 
128
128
  // - Masthead insets
129
- @each $inset, $inset-value in $pf-v5-c-masthead--inset-map {
129
+ @each $inset, $inset-value in $pf-v6-c-masthead--inset-map {
130
130
  &.pf-m-inset-#{$inset} {
131
131
  padding-inline-start: #{$inset-value};
132
132
  padding-inline-end: #{$inset-value};
@@ -198,20 +198,20 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
198
198
  // TODO: make this an opt in/out
199
199
  // stylelint-disable no-duplicate-selectors
200
200
  .#{$masthead} {
201
- @each $breakpoint, $breakpoint-value in $pf-v5-c-masthead--breakpoint-map {
201
+ @each $breakpoint, $breakpoint-value in $pf-v6-c-masthead--breakpoint-map {
202
202
  $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
203
203
 
204
- @include pf-v5-apply-breakpoint($breakpoint) {
204
+ @include pf-v6-apply-breakpoint($breakpoint) {
205
205
  &.pf-m-display-stack#{$breakpoint-name} {
206
- @include pf-v5-c-masthead--m-display-stack;
206
+ @include pf-v6-c-masthead--m-display-stack;
207
207
  }
208
208
 
209
209
  &.pf-m-display-inline#{$breakpoint-name} {
210
- @include pf-v5-c-masthead--m-display-inline;
210
+ @include pf-v6-c-masthead--m-display-inline;
211
211
  }
212
212
  }
213
213
 
214
- @each $inset, $inset-value in $pf-v5-c-masthead--inset-map {
214
+ @each $inset, $inset-value in $pf-v6-c-masthead--inset-map {
215
215
  &.pf-m-inset-#{$inset} {
216
216
  padding-inline-start: #{$inset-value};
217
217
  padding-inline-end: #{$inset-value};
package/components/Menu/menu.css CHANGED
@@ -1,61 +1,61 @@
1
1
  .pf-v6-c-menu__item, .pf-v6-c-menu__list,
2
2
  .pf-v6-c-menu__group {
3
- --pf-v5-hidden-visible--hidden--Display: none;
4
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
5
- display: var(--pf-v5-hidden-visible--Display);
3
+ --pf-v6-hidden-visible--hidden--Display: none;
4
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
5
+ display: var(--pf-v6-hidden-visible--Display);
6
6
  }
7
7
  .pf-m-hidden.pf-v6-c-menu__item, .pf-m-hidden.pf-v6-c-menu__list,
8
8
  .pf-m-hidden.pf-v6-c-menu__group {
9
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
9
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
10
10
  }
11
11
  @media screen and (min-width: 576px) {
12
12
  .pf-m-hidden-on-sm.pf-v6-c-menu__item, .pf-m-hidden-on-sm.pf-v6-c-menu__list,
13
13
  .pf-m-hidden-on-sm.pf-v6-c-menu__group {
14
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
14
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
15
15
  }
16
16
  .pf-m-visible-on-sm.pf-v6-c-menu__item, .pf-m-visible-on-sm.pf-v6-c-menu__list,
17
17
  .pf-m-visible-on-sm.pf-v6-c-menu__group {
18
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
18
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
19
19
  }
20
20
  }
21
21
  @media screen and (min-width: 768px) {
22
22
  .pf-m-hidden-on-md.pf-v6-c-menu__item, .pf-m-hidden-on-md.pf-v6-c-menu__list,
23
23
  .pf-m-hidden-on-md.pf-v6-c-menu__group {
24
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
24
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
25
25
  }
26
26
  .pf-m-visible-on-md.pf-v6-c-menu__item, .pf-m-visible-on-md.pf-v6-c-menu__list,
27
27
  .pf-m-visible-on-md.pf-v6-c-menu__group {
28
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
28
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
29
29
  }
30
30
  }
31
31
  @media screen and (min-width: 992px) {
32
32
  .pf-m-hidden-on-lg.pf-v6-c-menu__item, .pf-m-hidden-on-lg.pf-v6-c-menu__list,
33
33
  .pf-m-hidden-on-lg.pf-v6-c-menu__group {
34
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
34
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
35
35
  }
36
36
  .pf-m-visible-on-lg.pf-v6-c-menu__item, .pf-m-visible-on-lg.pf-v6-c-menu__list,
37
37
  .pf-m-visible-on-lg.pf-v6-c-menu__group {
38
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
38
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
39
39
  }
40
40
  }
41
41
  @media screen and (min-width: 1200px) {
42
42
  .pf-m-hidden-on-xl.pf-v6-c-menu__item, .pf-m-hidden-on-xl.pf-v6-c-menu__list,
43
43
  .pf-m-hidden-on-xl.pf-v6-c-menu__group {
44
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
44
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
45
45
  }
46
46
  .pf-m-visible-on-xl.pf-v6-c-menu__item, .pf-m-visible-on-xl.pf-v6-c-menu__list,
47
47
  .pf-m-visible-on-xl.pf-v6-c-menu__group {
48
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
48
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
49
49
  }
50
50
  }
51
51
  @media screen and (min-width: 1450px) {
52
52
  .pf-m-hidden-on-2xl.pf-v6-c-menu__item, .pf-m-hidden-on-2xl.pf-v6-c-menu__list,
53
53
  .pf-m-hidden-on-2xl.pf-v6-c-menu__group {
54
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
54
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
55
55
  }
56
56
  .pf-m-visible-on-2xl.pf-v6-c-menu__item, .pf-m-visible-on-2xl.pf-v6-c-menu__list,
57
57
  .pf-m-visible-on-2xl.pf-v6-c-menu__group {
58
- --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
58
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
59
59
  }
60
60
  }
61
61
 
@@ -164,7 +164,7 @@
164
164
 
165
165
  .pf-v6-c-menu__list,
166
166
  .pf-v6-c-menu__group {
167
- --pf-v5-hidden-visible--visible--Display: grid;
167
+ --pf-v6-hidden-visible--visible--Display: grid;
168
168
  }
169
169
 
170
170
  .pf-v6-c-menu__list,
@@ -425,7 +425,7 @@
425
425
  background-color: var(--pf-v6-c-menu__item--BackgroundColor);
426
426
  border: 0;
427
427
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
428
- --pf-v5-hidden-visible--visible--Display: flex;
428
+ --pf-v6-hidden-visible--visible--Display: flex;
429
429
  }
430
430
  :where(label).pf-v6-c-menu__item {
431
431
  cursor: pointer;
@@ -476,7 +476,7 @@
476
476
  }
477
477
 
478
478
  .pf-v6-c-menu__item-check .pf-v6-c-check {
479
- --pf-v5-c-check__input--TranslateY: none;
479
+ --pf-v6-c-check__input--TranslateY: none;
480
480
  }
481
481
 
482
482
  .pf-v6-c-menu__item-toggle-icon {
package/components/Menu/menu.scss CHANGED
@@ -152,7 +152,7 @@
152
152
  // - Menu shared hidden visible
153
153
  .#{$menu}__list,
154
154
  .#{$menu}__group {
155
- @include pf-v5-hidden-visible(grid);
155
+ @include pf-v6-hidden-visible(grid);
156
156
  }
157
157
 
158
158
  // - Menu shared position relative
@@ -259,10 +259,10 @@
259
259
  // target first list in menu
260
260
  > .#{$menu}__content > .#{$menu}__list,
261
261
  > .#{$menu}__list {
262
- @include pf-v5-bidirectional-style(
262
+ @include pf-v6-bidirectional-style(
263
263
  $prop: transform,
264
264
  $ltr-val: translateX(-100%),
265
- $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)})
265
+ $rtl-val: translateX(#{pf-v6-calc-inverse(-100%)})
266
266
  );
267
267
  }
268
268
  // stylelint-enable
@@ -279,10 +279,10 @@
279
279
 
280
280
  // stylelint-disable selector-max-class
281
281
  &.pf-m-drilled-in {
282
- @include pf-v5-bidirectional-style(
282
+ @include pf-v6-bidirectional-style(
283
283
  $prop: transform,
284
284
  $ltr-val: translateX(-100%),
285
- $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)})
285
+ $rtl-val: translateX(#{pf-v6-calc-inverse(-100%)})
286
286
  );
287
287
  }
288
288
  // stylelint-enable
@@ -505,7 +505,7 @@
505
505
  border: 0;
506
506
  outline-offset: var(--#{$menu}--OutlineOffset);
507
507
 
508
- @include pf-v5-hidden-visible(flex);
508
+ @include pf-v6-hidden-visible(flex);
509
509
 
510
510
  @at-root :where(label)#{&} {
511
511
  cursor: pointer;
@@ -541,7 +541,7 @@
541
541
 
542
542
  // - Menu item text
543
543
  .#{$menu}__item-text {
544
- @include pf-v5-text-overflow;
544
+ @include pf-v6-text-overflow;
545
545
 
546
546
  flex-grow: 1;
547
547
  }
@@ -566,12 +566,12 @@
566
566
 
567
567
  // - Menu check
568
568
  .#{$menu}__item-check .#{$check} {
569
- --pf-v5-c-check__input--TranslateY: none;
569
+ --#{$check}__input--TranslateY: none;
570
570
  }
571
571
 
572
572
  // - Menu toggle icon
573
573
  .#{$menu}__item-toggle-icon {
574
- @include pf-v5-mirror-inline-on-rtl;
574
+ @include pf-v6-mirror-inline-on-rtl;
575
575
 
576
576
  color: var(--#{$menu}__item-toggle-icon--Color, inherit);
577
577
  }
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -499,7 +499,7 @@
499
499
  }
500
500
 
501
501
  .#{$menu-toggle}__text {
502
- @include pf-v5-text-overflow;
502
+ @include pf-v6-text-overflow;
503
503
 
504
504
  min-width: 0;
505
505
  }
package/components/ModalBox/modal-box.scss CHANGED
@@ -24,7 +24,7 @@
24
24
  --#{$modal-box}--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
25
25
  --#{$modal-box}--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
26
26
 
27
- @media (min-width: $pf-v5-global--breakpoint--xl) {
27
+ @media (min-width: $pf-v6-global--breakpoint--xl) {
28
28
  --#{$modal-box}--m-align-top--spacer: var(--#{$modal-box}--m-align-top--xl--spacer);
29
29
  }
30
30
 
@@ -182,7 +182,7 @@
182
182
 
183
183
  .#{$modal-box}__title,
184
184
  .#{$modal-box}__title-text {
185
- @include pf-v5-text-overflow;
185
+ @include pf-v6-text-overflow;
186
186
  }
187
187
 
188
188
  .#{$modal-box}__title {
@@ -239,7 +239,7 @@
239
239
  > .#{$button}:not(:last-child) {
240
240
  margin-inline-end: var(--#{$modal-box}__footer--c-button--MarginRight);
241
241
 
242
- @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
242
+ @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
243
243
  --#{$modal-box}__footer--c-button--MarginRight: var(--#{$modal-box}__footer--c-button--sm--MarginRight);
244
244
  }
245
245
  }
package/components/Nav/nav.scss CHANGED
@@ -249,7 +249,7 @@
249
249
  display: inline-block;
250
250
  transform: rotate(var(--#{$nav}__item__toggle-icon--Rotate));
251
251
 
252
- @include pf-v5-mirror-inline-on-rtl;
252
+ @include pf-v6-mirror-inline-on-rtl;
253
253
 
254
254
  .#{$nav}__item:where(.pf-m-flyout) & {
255
255
  --#{$nav}__item--m-expanded__toggle-icon--Rotate: 0;
@@ -297,7 +297,7 @@
297
297
  outline-offset: var(--#{$nav}--OutlineOffset);
298
298
 
299
299
  > * {
300
- @include pf-v5-mirror-inline-on-rtl;
300
+ @include pf-v6-mirror-inline-on-rtl;
301
301
  }
302
302
  }
303
303
  }
@@ -328,7 +328,7 @@
328
328
  scroll-padding-inline-end: var(--#{$nav}--m-horizontal__list--PaddingInlineEnd);
329
329
  -webkit-overflow-scrolling: touch;
330
330
 
331
- @include pf-v5-overflow-hide-scroll;
331
+ @include pf-v6-overflow-hide-scroll;
332
332
  }
333
333
 
334
334
  .#{$nav}__link {
package/components/NotificationDrawer/notification-drawer.scss CHANGED
@@ -237,7 +237,7 @@
237
237
  word-break: break-word;
238
238
 
239
239
  &.pf-m-truncate {
240
- @include pf-v5-line-clamp("var(--#{$notification-drawer}__list-item-header-title--max-lines)");
240
+ @include pf-v6-line-clamp("var(--#{$notification-drawer}__list-item-header-title--max-lines)");
241
241
  }
242
242
  }
243
243
 
@@ -288,7 +288,7 @@
288
288
  }
289
289
 
290
290
  .#{$notification-drawer}__group-toggle-title {
291
- @include pf-v5-line-clamp("var(--#{$notification-drawer}__group-toggle-title--max-lines)");
291
+ @include pf-v6-line-clamp("var(--#{$notification-drawer}__group-toggle-title--max-lines)");
292
292
 
293
293
  flex: 1;
294
294
  margin-inline-end: var(--#{$notification-drawer}__group-toggle-title--MarginRight);
@@ -303,7 +303,7 @@
303
303
  }
304
304
 
305
305
  .#{$notification-drawer}__group-toggle-icon {
306
- @include pf-v5-mirror-inline-on-rtl;
306
+ @include pf-v6-mirror-inline-on-rtl;
307
307
 
308
308
  margin-inline-end: var(--#{$notification-drawer}__group-toggle-icon--MarginRight);
309
309
  color: var(--#{$notification-drawer}__group-toggle-icon--Color);
package/components/NumberInput/number-input.scss CHANGED
@@ -30,7 +30,7 @@
30
30
  > :is(input) {
31
31
  text-align: end;
32
32
 
33
- @extend %pf-v5-remove-num-arrows;
33
+ @extend %pf-v6-remove-num-arrows;
34
34
  }
35
35
  }
36
36
  }
package/components/OptionsMenu/options-menu.scss CHANGED
@@ -217,7 +217,7 @@
217
217
  }
218
218
 
219
219
  .#{$options-menu}__toggle-text {
220
- @include pf-v5-text-overflow;
220
+ @include pf-v6-text-overflow;
221
221
 
222
222
  flex: 1 1 auto;
223
223
  text-align: start;
@@ -327,6 +327,6 @@
327
327
  // stylelint-disable no-invalid-position-at-import-rule
328
328
  @import "themes/dark/options-menu";
329
329
 
330
- @include pf-v5-theme-dark {
331
- @include pf-v5-theme-dark-options-menu;
330
+ @include pf-v6-theme-dark {
331
+ @include pf-v6-theme-dark-options-menu;
332
332
  }
package/components/OptionsMenu/themes/dark/options-menu.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @import "../../../../sass-utilities/themes/dark/all";
2
2
 
3
- @mixin pf-v5-theme-dark-options-menu() {
3
+ @mixin pf-v6-theme-dark-options-menu() {
4
4
  .#{$options-menu} {
5
5
  --#{$options-menu}__toggle--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);
6
6
  --#{$options-menu}__toggle--BorderTopColor: transparent;