@patternfly/patternfly 6.0.0-alpha.146 → 6.0.0-alpha.148

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 (21) hide show
  1. package/components/Badge/badge.css +21 -0
  2. package/components/Badge/badge.scss +24 -0
  3. package/components/Breadcrumb/breadcrumb.css +2 -6
  4. package/components/Breadcrumb/breadcrumb.scss +2 -9
  5. package/components/Button/button.css +1 -7
  6. package/components/Button/button.scss +1 -8
  7. package/components/MenuToggle/menu-toggle.css +6 -0
  8. package/components/MenuToggle/menu-toggle.scss +6 -0
  9. package/components/ModalBox/modal-box.css +3 -1
  10. package/components/ModalBox/modal-box.scss +3 -1
  11. package/components/_index.css +33 -14
  12. package/docs/components/Badge/examples/Badge.md +11 -0
  13. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  14. package/docs/components/Button/examples/Button.md +4 -4
  15. package/docs/components/Menu/examples/Menu.md +2 -2
  16. package/docs/components/MenuToggle/examples/MenuToggle.md +1 -1
  17. package/package.json +3 -1
  18. package/patternfly-no-globals.css +33 -14
  19. package/patternfly.css +33 -14
  20. package/patternfly.min.css +1 -1
  21. package/patternfly.min.css.map +1 -1
package/components/Badge/badge.css CHANGED
@@ -1,4 +1,6 @@
1
1
  :where(:root, .pf-v6-c-badge) {
2
+ --pf-v6-c-badge--BorderColor: transparent;
3
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2
4
  --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
3
5
  --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
4
6
  --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
@@ -14,9 +16,13 @@
14
16
  --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
15
17
  --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
16
18
  --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
19
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
20
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
21
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
17
22
  }
18
23
 
19
24
  .pf-v6-c-badge {
25
+ position: relative;
20
26
  display: inline-block;
21
27
  min-width: var(--pf-v6-c-badge--MinWidth);
22
28
  padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
@@ -29,6 +35,14 @@
29
35
  background-color: var(--pf-v6-c-badge--BackgroundColor);
30
36
  border-radius: var(--pf-v6-c-badge--BorderRadius);
31
37
  }
38
+ .pf-v6-c-badge::after {
39
+ position: absolute;
40
+ inset: 0;
41
+ pointer-events: none;
42
+ content: "";
43
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
44
+ border-radius: inherit;
45
+ }
32
46
  .pf-v6-c-badge.pf-m-read {
33
47
  --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
34
48
  --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
@@ -39,6 +53,13 @@
39
53
  --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
40
54
  --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
41
55
  }
56
+ .pf-v6-c-badge.pf-m-disabled {
57
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
58
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
59
+ }
60
+ .pf-v6-c-badge.pf-m-disabled::after {
61
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
62
+ }
42
63
 
43
64
  .pf-v6-c-badge__toggle-icon {
44
65
  margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
package/components/Badge/badge.scss CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  :where(:root, .#{$badge}) {
4
4
  // Component
5
+ --#{$badge}--BorderColor: transparent;
6
+ --#{$badge}--BorderWidth: var(--pf-t--global--border--width--regular);
5
7
  --#{$badge}--BorderRadius: var(--pf-t--global--border--radius--pill);
6
8
  --#{$badge}--FontSize: var(--pf-t--global--font--size--body--sm);
7
9
  --#{$badge}--FontWeight: var(--pf-t--global--font--weight--body--bold); // TODO - design calls for 500/semi-bold, do we need a token for that or is bold ok
@@ -21,9 +23,13 @@
21
23
  --#{$badge}--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
22
24
  --#{$badge}--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
23
25
  --#{$badge}--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
26
+ --#{$badge}--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
27
+ --#{$badge}--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
28
+ --#{$badge}--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
24
29
  }
25
30
 
26
31
  .#{$badge} {
32
+ position: relative;
27
33
  display: inline-block;
28
34
  min-width: var(--#{$badge}--MinWidth);
29
35
  padding-inline-start: var(--#{$badge}--PaddingInlineStart);
@@ -36,6 +42,15 @@
36
42
  background-color: var(--#{$badge}--BackgroundColor);
37
43
  border-radius: var(--#{$badge}--BorderRadius);
38
44
 
45
+ &::after {
46
+ position: absolute;
47
+ inset: 0;
48
+ pointer-events: none;
49
+ content: "";
50
+ border: var(--#{$badge}--BorderWidth) solid var(--#{$badge}--BorderColor);
51
+ border-radius: inherit;
52
+ }
53
+
39
54
  &.pf-m-read {
40
55
  --#{$badge}--Color: var(--#{$badge}--m-read--Color);
41
56
  --#{$badge}--BackgroundColor: var(--#{$badge}--m-read--BackgroundColor);
@@ -47,6 +62,15 @@
47
62
  --#{$badge}--BackgroundColor: var(--#{$badge}--m-unread--BackgroundColor);
48
63
  --#{$badge}__toggle-icon--Color: var(--#{$badge}--m-unread__toggle-icon--Color);
49
64
  }
65
+
66
+ &.pf-m-disabled {
67
+ --#{$badge}--Color: var(--#{$badge}--m-disabled--Color);
68
+ --#{$badge}--BackgroundColor: var(--#{$badge}--m-disabled--BackgroundColor);
69
+
70
+ &::after {
71
+ border-color: var(--#{$badge}--m-disabled--BorderColor);
72
+ }
73
+ }
50
74
  }
51
75
 
52
76
  .#{$badge}__toggle-icon {
package/components/Breadcrumb/breadcrumb.css CHANGED
@@ -15,10 +15,9 @@
15
15
  --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
16
16
  --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
17
17
  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
18
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: calc(var(--pf-v6-c-breadcrumb__item--MarginInlineEnd) * -1);
18
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
19
19
  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
20
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: calc(var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd) * -1);
21
- --pf-v6-c-breadcrumb__menu-toggle--c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
20
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
22
21
  }
23
22
 
24
23
  .pf-v6-c-breadcrumb {
@@ -89,9 +88,6 @@ button.pf-v6-c-breadcrumb__link {
89
88
  margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
90
89
  margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
91
90
  }
92
- .pf-v6-c-breadcrumb__dropdown .pf-v6-c-menu-toggle {
93
- line-height: var(--pf-v6-c-breadcrumb__menu-toggle--c-menu-toggle--LineHeight);
94
- }
95
91
 
96
92
  .pf-v6-c-breadcrumb__heading {
97
93
  display: inline;
package/components/Breadcrumb/breadcrumb.scss CHANGED
@@ -26,12 +26,9 @@
26
26
 
27
27
  // breadcrumb dropdown
28
28
  --#{$breadcrumb}__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
29
- --#{$breadcrumb}__menu-toggle--MarginInlineEnd: calc(var(--#{$breadcrumb}__item--MarginInlineEnd) * -1);
29
+ --#{$breadcrumb}__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
30
30
  --#{$breadcrumb}__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
31
- --#{$breadcrumb}__menu-toggle--MarginInlineStart: calc(var(--#{$breadcrumb}__item-divider--MarginInlineEnd) * -1);
32
-
33
- // breadcrumb toggle
34
- --#{$breadcrumb}__menu-toggle--c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
31
+ --#{$breadcrumb}__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
35
32
  }
36
33
 
37
34
  .#{$breadcrumb} {
@@ -114,10 +111,6 @@
114
111
  margin-block-end: var(--#{$breadcrumb}__menu-toggle--MarginBlockEnd);
115
112
  margin-inline-start: var(--#{$breadcrumb}__menu-toggle--MarginInlineStart);
116
113
  margin-inline-end: var(--#{$breadcrumb}__menu-toggle--MarginInlineEnd);
117
-
118
- .#{$menu-toggle} {
119
- line-height: var(--#{$breadcrumb}__menu-toggle--c-menu-toggle--LineHeight);
120
- }
121
114
  }
122
115
 
123
116
  .#{$breadcrumb}__heading {
package/components/Button/button.css CHANGED
@@ -216,10 +216,7 @@
216
216
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
217
217
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
218
218
  --pf-v6-c-button__count--MarginInlineStart: var(--pf-t--global--spacer--sm);
219
- --pf-v6-c-button--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled);
220
- --pf-v6-c-button--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
221
219
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
222
- --pf-v6-c-button--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
223
220
  }
224
221
 
225
222
  .pf-v6-c-button {
@@ -273,7 +270,7 @@
273
270
  --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-primary--m-clicked__icon--Color);
274
271
  }
275
272
  .pf-v6-c-button.pf-m-primary .pf-v6-c-badge.pf-m-unread {
276
- border: var(--pf-v6-c-button--m-primary__c-badge--BorderWidth) solid var(--pf-v6-c-button--m-primary__c-badge--BorderColor);
273
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-button--m-primary__c-badge--BorderColor);
277
274
  }
278
275
  .pf-v6-c-button.pf-m-secondary {
279
276
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-secondary--Color);
@@ -504,9 +501,6 @@
504
501
  pointer-events: none;
505
502
  }
506
503
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
507
- --pf-v6-c-badge--m-unread--Color: var(--pf-v6-c-button--disabled__c-badge--Color);
508
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-v6-c-button--disabled__c-badge--BackgroundColor);
509
- --pf-v6-c-button--m-primary__c-badge--BorderWidth: 0;
510
504
  color: var(--pf-v6-c-button--disabled--Color);
511
505
  background-color: var(--pf-v6-c-button--disabled--BackgroundColor);
512
506
  }
package/components/Button/button.scss CHANGED
@@ -264,10 +264,7 @@
264
264
 
265
265
  // Count
266
266
  --#{$button}__count--MarginInlineStart: var(--pf-t--global--spacer--sm);
267
- --#{$button}--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled);
268
- --#{$button}--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
269
267
  --#{$button}--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
270
- --#{$button}--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
271
268
  }
272
269
 
273
270
  .#{$button} {
@@ -323,7 +320,7 @@
323
320
  --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-primary--m-clicked__icon--Color);
324
321
 
325
322
  .#{$badge}.pf-m-unread {
326
- border: var(--#{$button}--m-primary__c-badge--BorderWidth) solid var(--#{$button}--m-primary__c-badge--BorderColor);
323
+ --#{$badge}--BorderColor: var(--#{$button}--m-primary__c-badge--BorderColor);
327
324
  }
328
325
  }
329
326
 
@@ -598,10 +595,6 @@
598
595
  &:disabled,
599
596
  &.pf-m-disabled,
600
597
  &.pf-m-aria-disabled {
601
- --#{$badge}--m-unread--Color: var(--#{$button}--disabled__c-badge--Color);
602
- --#{$badge}--m-unread--BackgroundColor: var(--#{$button}--disabled__c-badge--BackgroundColor);
603
- --#{$button}--m-primary__c-badge--BorderWidth: 0;
604
-
605
598
  color: var(--#{$button}--disabled--Color);
606
599
  background-color: var(--#{$button}--disabled--BackgroundColor);
607
600
 
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -106,6 +106,9 @@
106
106
  --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
107
107
  --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
108
108
  --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
109
+ --pf-v6-c-menu-toggle--m-small--ColumnGap: calc(var(--pf-t--global--spacer--control--horizontal--compact) / 2);
110
+ --pf-v6-c-menu-toggle--m-small--FontSize: var(--pf-t--global--font--size--body--sm);
111
+ --pf-v6-c-menu-toggle--m-small__controls--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--xs));
109
112
  --pf-v6-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
110
113
  --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
111
114
  --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
@@ -243,6 +246,9 @@
243
246
  .pf-v6-c-menu-toggle.pf-m-small {
244
247
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
245
248
  --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
249
+ --pf-v6-c-menu-toggle--FontSize: var(--pf-v6-c-menu-toggle--m-small--FontSize);
250
+ --pf-v6-c-menu-toggle--ColumnGap: var(--pf-v6-c-menu-toggle--m-small--ColumnGap);
251
+ --pf-v6-c-menu-toggle__controls--MinWidth: var(--pf-v6-c-menu-toggle--m-small__controls--MinWidth);
246
252
  }
247
253
  .pf-v6-c-menu-toggle:has(.pf-v6-c-button) {
248
254
  background-color: transparent;
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -162,6 +162,9 @@
162
162
  // * Menu toggle small
163
163
  --#{$menu-toggle}--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
164
164
  --#{$menu-toggle}--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
165
+ --#{$menu-toggle}--m-small--ColumnGap: calc(var(--pf-t--global--spacer--control--horizontal--compact) / 2);
166
+ --#{$menu-toggle}--m-small--FontSize: var(--pf-t--global--font--size--body--sm);
167
+ --#{$menu-toggle}--m-small__controls--MinWidth: calc(var(--#{$menu-toggle}--FontSize) + var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--xs));
165
168
 
166
169
  // Status icon
167
170
  --#{$menu-toggle}__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
@@ -329,6 +332,9 @@
329
332
  &.pf-m-small {
330
333
  --#{$menu-toggle}--PaddingBlockStart: var(--#{$menu-toggle}--m-small--PaddingBlockStart);
331
334
  --#{$menu-toggle}--PaddingBlockEnd: var(--#{$menu-toggle}--m-small--PaddingBlockEnd);
335
+ --#{$menu-toggle}--FontSize: var(--#{$menu-toggle}--m-small--FontSize);
336
+ --#{$menu-toggle}--ColumnGap: var(--#{$menu-toggle}--m-small--ColumnGap);
337
+ --#{$menu-toggle}__controls--MinWidth: var(--#{$menu-toggle}--m-small__controls--MinWidth);
332
338
  }
333
339
 
334
340
  &:has(.#{$button}) {
package/components/ModalBox/modal-box.css CHANGED
@@ -20,6 +20,7 @@
20
20
  --pf-v6-c-modal-box--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
21
21
  --pf-v6-c-modal-box--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
22
22
  --pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
23
+ --pf-v6-c-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
23
24
  --pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
24
25
  --pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
25
26
  --pf-v6-c-modal-box__header--Gap: var(--pf-t--global--spacer--md);
@@ -36,7 +37,7 @@
36
37
  --pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
37
38
  --pf-v6-c-modal-box__body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
38
39
  --pf-v6-c-modal-box__body--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
39
- --pf-v6-c-modal-box__header--body--PaddingBlockStart: var(--pf-t--global--spacer--md);
40
+ --pf-v6-c-modal-box__header--body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
40
41
  --pf-v6-c-modal-box__close--InsetBlockStart: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
41
42
  --pf-v6-c-modal-box__close--InsetInlineEnd: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
42
43
  --pf-v6-c-modal-box__close--sibling--MarginInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
@@ -116,6 +117,7 @@
116
117
  flex-shrink: 0;
117
118
  gap: var(--pf-v6-c-modal-box__header--Gap);
118
119
  padding-block-start: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
120
+ padding-block-end: var(--pf-v6-c-modal-box__header--PaddingBlockEnd);
119
121
  padding-inline-start: var(--pf-v6-c-modal-box__header--PaddingInlineStart);
120
122
  padding-inline-end: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
121
123
  }
package/components/ModalBox/modal-box.scss CHANGED
@@ -30,6 +30,7 @@
30
30
 
31
31
  // Header
32
32
  --#{$modal-box}__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
33
+ --#{$modal-box}__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
33
34
  --#{$modal-box}__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
34
35
  --#{$modal-box}__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
35
36
  --#{$modal-box}__header--Gap: var(--pf-t--global--spacer--md);
@@ -56,7 +57,7 @@
56
57
  --#{$modal-box}__body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
57
58
  --#{$modal-box}__body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
58
59
  --#{$modal-box}__body--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
59
- --#{$modal-box}__header--body--PaddingBlockStart: var(--pf-t--global--spacer--md);
60
+ --#{$modal-box}__header--body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
60
61
 
61
62
  // Close
62
63
  --#{$modal-box}__close--InsetBlockStart: var(--#{$modal-box}__header--PaddingBlockStart);
@@ -159,6 +160,7 @@
159
160
  flex-shrink: 0;
160
161
  gap: var(--#{$modal-box}__header--Gap);
161
162
  padding-block-start: var(--#{$modal-box}__header--PaddingBlockStart);
163
+ padding-block-end: var(--#{$modal-box}__header--PaddingBlockEnd);
162
164
  padding-inline-start: var(--#{$modal-box}__header--PaddingInlineStart);
163
165
  padding-inline-end: var(--#{$modal-box}__header--PaddingInlineEnd);
164
166
 
package/components/_index.css CHANGED
@@ -971,6 +971,8 @@
971
971
  }
972
972
 
973
973
  :where(:root, .pf-v6-c-badge) {
974
+ --pf-v6-c-badge--BorderColor: transparent;
975
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
974
976
  --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
975
977
  --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
976
978
  --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
@@ -986,9 +988,13 @@
986
988
  --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
987
989
  --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
988
990
  --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
991
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
992
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
993
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
989
994
  }
990
995
 
991
996
  .pf-v6-c-badge {
997
+ position: relative;
992
998
  display: inline-block;
993
999
  min-width: var(--pf-v6-c-badge--MinWidth);
994
1000
  padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
@@ -1001,6 +1007,14 @@
1001
1007
  background-color: var(--pf-v6-c-badge--BackgroundColor);
1002
1008
  border-radius: var(--pf-v6-c-badge--BorderRadius);
1003
1009
  }
1010
+ .pf-v6-c-badge::after {
1011
+ position: absolute;
1012
+ inset: 0;
1013
+ pointer-events: none;
1014
+ content: "";
1015
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
1016
+ border-radius: inherit;
1017
+ }
1004
1018
  .pf-v6-c-badge.pf-m-read {
1005
1019
  --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
1006
1020
  --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
@@ -1011,6 +1025,13 @@
1011
1025
  --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
1012
1026
  --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
1013
1027
  }
1028
+ .pf-v6-c-badge.pf-m-disabled {
1029
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
1030
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
1031
+ }
1032
+ .pf-v6-c-badge.pf-m-disabled::after {
1033
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
1034
+ }
1014
1035
 
1015
1036
  .pf-v6-c-badge__toggle-icon {
1016
1037
  margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
@@ -1246,10 +1267,9 @@
1246
1267
  --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
1247
1268
  --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
1248
1269
  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
1249
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: calc(var(--pf-v6-c-breadcrumb__item--MarginInlineEnd) * -1);
1270
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
1250
1271
  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
1251
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: calc(var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd) * -1);
1252
- --pf-v6-c-breadcrumb__menu-toggle--c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
1272
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
1253
1273
  }
1254
1274
 
1255
1275
  .pf-v6-c-breadcrumb {
@@ -1320,9 +1340,6 @@ button.pf-v6-c-breadcrumb__link {
1320
1340
  margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
1321
1341
  margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
1322
1342
  }
1323
- .pf-v6-c-breadcrumb__dropdown .pf-v6-c-menu-toggle {
1324
- line-height: var(--pf-v6-c-breadcrumb__menu-toggle--c-menu-toggle--LineHeight);
1325
- }
1326
1343
 
1327
1344
  .pf-v6-c-breadcrumb__heading {
1328
1345
  display: inline;
@@ -1556,10 +1573,7 @@ button.pf-v6-c-breadcrumb__link {
1556
1573
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
1557
1574
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
1558
1575
  --pf-v6-c-button__count--MarginInlineStart: var(--pf-t--global--spacer--sm);
1559
- --pf-v6-c-button--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled);
1560
- --pf-v6-c-button--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1561
1576
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
1562
- --pf-v6-c-button--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
1563
1577
  }
1564
1578
 
1565
1579
  .pf-v6-c-button {
@@ -1613,7 +1627,7 @@ button.pf-v6-c-breadcrumb__link {
1613
1627
  --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-primary--m-clicked__icon--Color);
1614
1628
  }
1615
1629
  .pf-v6-c-button.pf-m-primary .pf-v6-c-badge.pf-m-unread {
1616
- border: var(--pf-v6-c-button--m-primary__c-badge--BorderWidth) solid var(--pf-v6-c-button--m-primary__c-badge--BorderColor);
1630
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-button--m-primary__c-badge--BorderColor);
1617
1631
  }
1618
1632
  .pf-v6-c-button.pf-m-secondary {
1619
1633
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-secondary--Color);
@@ -1844,9 +1858,6 @@ button.pf-v6-c-breadcrumb__link {
1844
1858
  pointer-events: none;
1845
1859
  }
1846
1860
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
1847
- --pf-v6-c-badge--m-unread--Color: var(--pf-v6-c-button--disabled__c-badge--Color);
1848
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-v6-c-button--disabled__c-badge--BackgroundColor);
1849
- --pf-v6-c-button--m-primary__c-badge--BorderWidth: 0;
1850
1861
  color: var(--pf-v6-c-button--disabled--Color);
1851
1862
  background-color: var(--pf-v6-c-button--disabled--BackgroundColor);
1852
1863
  }
@@ -10027,6 +10038,9 @@ ul.pf-v6-c-list {
10027
10038
  --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
10028
10039
  --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
10029
10040
  --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
10041
+ --pf-v6-c-menu-toggle--m-small--ColumnGap: calc(var(--pf-t--global--spacer--control--horizontal--compact) / 2);
10042
+ --pf-v6-c-menu-toggle--m-small--FontSize: var(--pf-t--global--font--size--body--sm);
10043
+ --pf-v6-c-menu-toggle--m-small__controls--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--xs));
10030
10044
  --pf-v6-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
10031
10045
  --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
10032
10046
  --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
@@ -10164,6 +10178,9 @@ ul.pf-v6-c-list {
10164
10178
  .pf-v6-c-menu-toggle.pf-m-small {
10165
10179
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
10166
10180
  --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
10181
+ --pf-v6-c-menu-toggle--FontSize: var(--pf-v6-c-menu-toggle--m-small--FontSize);
10182
+ --pf-v6-c-menu-toggle--ColumnGap: var(--pf-v6-c-menu-toggle--m-small--ColumnGap);
10183
+ --pf-v6-c-menu-toggle__controls--MinWidth: var(--pf-v6-c-menu-toggle--m-small__controls--MinWidth);
10167
10184
  }
10168
10185
  .pf-v6-c-menu-toggle:has(.pf-v6-c-button) {
10169
10186
  background-color: transparent;
@@ -10349,6 +10366,7 @@ ul.pf-v6-c-list {
10349
10366
  --pf-v6-c-modal-box--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
10350
10367
  --pf-v6-c-modal-box--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
10351
10368
  --pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
10369
+ --pf-v6-c-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
10352
10370
  --pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
10353
10371
  --pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
10354
10372
  --pf-v6-c-modal-box__header--Gap: var(--pf-t--global--spacer--md);
@@ -10365,7 +10383,7 @@ ul.pf-v6-c-list {
10365
10383
  --pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
10366
10384
  --pf-v6-c-modal-box__body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
10367
10385
  --pf-v6-c-modal-box__body--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
10368
- --pf-v6-c-modal-box__header--body--PaddingBlockStart: var(--pf-t--global--spacer--md);
10386
+ --pf-v6-c-modal-box__header--body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
10369
10387
  --pf-v6-c-modal-box__close--InsetBlockStart: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
10370
10388
  --pf-v6-c-modal-box__close--InsetInlineEnd: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
10371
10389
  --pf-v6-c-modal-box__close--sibling--MarginInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
@@ -10445,6 +10463,7 @@ ul.pf-v6-c-list {
10445
10463
  flex-shrink: 0;
10446
10464
  gap: var(--pf-v6-c-modal-box__header--Gap);
10447
10465
  padding-block-start: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
10466
+ padding-block-end: var(--pf-v6-c-modal-box__header--PaddingBlockEnd);
10448
10467
  padding-inline-start: var(--pf-v6-c-modal-box__header--PaddingInlineStart);
10449
10468
  padding-inline-end: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
10450
10469
  }
package/docs/components/Badge/examples/Badge.md CHANGED
@@ -36,6 +36,16 @@ cssPrefix: pf-v6-c-badge
36
36
 
37
37
  ```
38
38
 
39
+ ### Disabled
40
+
41
+ ```html
42
+ <span class="pf-v6-c-badge pf-m-disabled pf-m-read">7</span>
43
+ <span class="pf-v6-c-badge pf-m-disabled pf-m-read">24</span>
44
+ <span class="pf-v6-c-badge pf-m-unread pf-m-disabled">240</span>
45
+ <span class="pf-v6-c-badge pf-m-unread pf-m-disabled">999+</span>
46
+
47
+ ```
48
+
39
49
  ## Documentation
40
50
 
41
51
  ### Overview
@@ -49,3 +59,4 @@ Always add a modifier class. Never use the class `.pf-v6-c-badge` on its own.
49
59
  | `.pf-v6-c-badge` | `<span>` | Initiates a badge. **Always use with a modifier class.** |
50
60
  | `.pf-m-read` | `.pf-v6-c-badge` | Applies read badge styling. |
51
61
  | `.pf-m-unread` | `.pf-v6-c-badge` | Applies unread badge styling. |
62
+ | `.pf-m-disabled` | `.pf-v6-c-badge` | Applies disabled badge styling. For use when a badge is used in a disabled element. |
package/docs/components/Breadcrumb/examples/Breadcrumb.md CHANGED
@@ -161,7 +161,7 @@ cssPrefix: pf-v6-c-breadcrumb
161
161
  </span>
162
162
  <span class="pf-v6-c-breadcrumb__dropdown">
163
163
  <button
164
- class="pf-v6-c-menu-toggle pf-m-plain"
164
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text"
165
165
  type="button"
166
166
  aria-expanded="false"
167
167
  aria-label="Menu toggle"
package/docs/components/Button/examples/Button.md CHANGED
@@ -1719,7 +1719,7 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1719
1719
  >
1720
1720
  View issues
1721
1721
  <span class="pf-v6-c-button__count">
1722
- <span class="pf-v6-c-badge pf-m-unread">7</span>
1722
+ <span class="pf-v6-c-badge pf-m-disabled pf-m-unread">7</span>
1723
1723
  </span>
1724
1724
  </button>
1725
1725
  <button
@@ -1730,7 +1730,7 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1730
1730
  >
1731
1731
  View issues
1732
1732
  <span class="pf-v6-c-button__count">
1733
- <span class="pf-v6-c-badge pf-m-read">7</span>
1733
+ <span class="pf-v6-c-badge pf-m-disabled pf-m-read">7</span>
1734
1734
  </span>
1735
1735
  </button>
1736
1736
 
@@ -1742,7 +1742,7 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1742
1742
  >
1743
1743
  View issues
1744
1744
  <span class="pf-v6-c-button__count">
1745
- <span class="pf-v6-c-badge pf-m-unread">7</span>
1745
+ <span class="pf-v6-c-badge pf-m-disabled pf-m-unread">7</span>
1746
1746
  </span>
1747
1747
  </button>
1748
1748
  <button
@@ -1753,7 +1753,7 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1753
1753
  >
1754
1754
  View issues
1755
1755
  <span class="pf-v6-c-button__count">
1756
- <span class="pf-v6-c-badge pf-m-read">7</span>
1756
+ <span class="pf-v6-c-badge pf-m-disabled pf-m-read">7</span>
1757
1757
  </span>
1758
1758
  </button>
1759
1759
 
package/docs/components/Menu/examples/Menu.md CHANGED
@@ -4588,7 +4588,7 @@ cssPrefix: pf-v6-c-menu
4588
4588
  </span>
4589
4589
  <span class="pf-v6-c-breadcrumb__dropdown">
4590
4590
  <button
4591
- class="pf-v6-c-menu-toggle pf-m-plain"
4591
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text"
4592
4592
  type="button"
4593
4593
  aria-expanded="false"
4594
4594
  aria-label="Menu toggle"
@@ -4820,7 +4820,7 @@ cssPrefix: pf-v6-c-menu
4820
4820
  </span>
4821
4821
  <span class="pf-v6-c-breadcrumb__dropdown">
4822
4822
  <button
4823
- class="pf-v6-c-menu-toggle pf-m-plain"
4823
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text"
4824
4824
  type="button"
4825
4825
  aria-expanded="false"
4826
4826
  aria-label="Menu toggle"
package/docs/components/MenuToggle/examples/MenuToggle.md CHANGED
@@ -75,7 +75,7 @@ cssPrefix: pf-v6-c-menu-toggle
75
75
 
76
76
  &nbsp;
77
77
  <button
78
- class="pf-v6-c-menu-toggle pf-m-plain"
78
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text"
79
79
  type="button"
80
80
  aria-expanded="false"
81
81
  aria-label="Menu toggle"
package/package.json CHANGED
@@ -1,14 +1,16 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.146",
4
+ "version": "6.0.0-alpha.148",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
8
8
  "a11y": "patternfly-a11y --config patternfly-a11y.config",
9
9
  "backstop:clean": "rimraf -- backstop_data/bitmaps_test backstop_data/html_report",
10
10
  "backstop:test": "backstop test --config='backstop.js'",
11
+ "backstop:test:dark": "backstop test --config='backstop.js' --dark",
11
12
  "backstop:approve": "backstop approve --config='backstop.js'",
13
+ "backstop:approve:dark": "backstop approve --config='backstop.js' --dark",
12
14
  "build-patternfly": "gulp buildPatternfly",
13
15
  "build": "gulp build",
14
16
  "build:docs": "gulp buildWebpack",