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

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 (14) hide show
  1. package/components/Badge/badge.css +21 -0
  2. package/components/Badge/badge.scss +24 -0
  3. package/components/Button/button.css +1 -7
  4. package/components/Button/button.scss +1 -8
  5. package/components/ModalBox/modal-box.css +3 -1
  6. package/components/ModalBox/modal-box.scss +3 -1
  7. package/components/_index.css +25 -8
  8. package/docs/components/Badge/examples/Badge.md +11 -0
  9. package/docs/components/Button/examples/Button.md +4 -4
  10. package/package.json +3 -1
  11. package/patternfly-no-globals.css +25 -8
  12. package/patternfly.css +25 -8
  13. package/patternfly.min.css +1 -1
  14. 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/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/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);
@@ -1556,10 +1577,7 @@ button.pf-v6-c-breadcrumb__link {
1556
1577
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
1557
1578
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
1558
1579
  --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
1580
  --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
1581
  }
1564
1582
 
1565
1583
  .pf-v6-c-button {
@@ -1613,7 +1631,7 @@ button.pf-v6-c-breadcrumb__link {
1613
1631
  --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-primary--m-clicked__icon--Color);
1614
1632
  }
1615
1633
  .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);
1634
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-button--m-primary__c-badge--BorderColor);
1617
1635
  }
1618
1636
  .pf-v6-c-button.pf-m-secondary {
1619
1637
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-secondary--Color);
@@ -1844,9 +1862,6 @@ button.pf-v6-c-breadcrumb__link {
1844
1862
  pointer-events: none;
1845
1863
  }
1846
1864
  .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
1865
  color: var(--pf-v6-c-button--disabled--Color);
1851
1866
  background-color: var(--pf-v6-c-button--disabled--BackgroundColor);
1852
1867
  }
@@ -10349,6 +10364,7 @@ ul.pf-v6-c-list {
10349
10364
  --pf-v6-c-modal-box--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
10350
10365
  --pf-v6-c-modal-box--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
10351
10366
  --pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
10367
+ --pf-v6-c-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
10352
10368
  --pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
10353
10369
  --pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
10354
10370
  --pf-v6-c-modal-box__header--Gap: var(--pf-t--global--spacer--md);
@@ -10365,7 +10381,7 @@ ul.pf-v6-c-list {
10365
10381
  --pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
10366
10382
  --pf-v6-c-modal-box__body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
10367
10383
  --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);
10384
+ --pf-v6-c-modal-box__header--body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
10369
10385
  --pf-v6-c-modal-box__close--InsetBlockStart: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
10370
10386
  --pf-v6-c-modal-box__close--InsetInlineEnd: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
10371
10387
  --pf-v6-c-modal-box__close--sibling--MarginInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
@@ -10445,6 +10461,7 @@ ul.pf-v6-c-list {
10445
10461
  flex-shrink: 0;
10446
10462
  gap: var(--pf-v6-c-modal-box__header--Gap);
10447
10463
  padding-block-start: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
10464
+ padding-block-end: var(--pf-v6-c-modal-box__header--PaddingBlockEnd);
10448
10465
  padding-inline-start: var(--pf-v6-c-modal-box__header--PaddingInlineStart);
10449
10466
  padding-inline-end: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
10450
10467
  }
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/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/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.147",
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",
package/patternfly-no-globals.css CHANGED
@@ -6991,6 +6991,8 @@
6991
6991
  }
6992
6992
 
6993
6993
  :where(:root, .pf-v6-c-badge) {
6994
+ --pf-v6-c-badge--BorderColor: transparent;
6995
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
6994
6996
  --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
6995
6997
  --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
6996
6998
  --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
@@ -7006,9 +7008,13 @@
7006
7008
  --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
7007
7009
  --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
7008
7010
  --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
7011
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
7012
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
7013
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
7009
7014
  }
7010
7015
 
7011
7016
  .pf-v6-c-badge {
7017
+ position: relative;
7012
7018
  display: inline-block;
7013
7019
  min-width: var(--pf-v6-c-badge--MinWidth);
7014
7020
  padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
@@ -7021,6 +7027,14 @@
7021
7027
  background-color: var(--pf-v6-c-badge--BackgroundColor);
7022
7028
  border-radius: var(--pf-v6-c-badge--BorderRadius);
7023
7029
  }
7030
+ .pf-v6-c-badge::after {
7031
+ position: absolute;
7032
+ inset: 0;
7033
+ pointer-events: none;
7034
+ content: "";
7035
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
7036
+ border-radius: inherit;
7037
+ }
7024
7038
  .pf-v6-c-badge.pf-m-read {
7025
7039
  --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
7026
7040
  --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
@@ -7031,6 +7045,13 @@
7031
7045
  --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
7032
7046
  --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
7033
7047
  }
7048
+ .pf-v6-c-badge.pf-m-disabled {
7049
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
7050
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
7051
+ }
7052
+ .pf-v6-c-badge.pf-m-disabled::after {
7053
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
7054
+ }
7034
7055
 
7035
7056
  .pf-v6-c-badge__toggle-icon {
7036
7057
  margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
@@ -7576,10 +7597,7 @@ button.pf-v6-c-breadcrumb__link {
7576
7597
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
7577
7598
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
7578
7599
  --pf-v6-c-button__count--MarginInlineStart: var(--pf-t--global--spacer--sm);
7579
- --pf-v6-c-button--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled);
7580
- --pf-v6-c-button--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
7581
7600
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
7582
- --pf-v6-c-button--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
7583
7601
  }
7584
7602
 
7585
7603
  .pf-v6-c-button {
@@ -7633,7 +7651,7 @@ button.pf-v6-c-breadcrumb__link {
7633
7651
  --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-primary--m-clicked__icon--Color);
7634
7652
  }
7635
7653
  .pf-v6-c-button.pf-m-primary .pf-v6-c-badge.pf-m-unread {
7636
- border: var(--pf-v6-c-button--m-primary__c-badge--BorderWidth) solid var(--pf-v6-c-button--m-primary__c-badge--BorderColor);
7654
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-button--m-primary__c-badge--BorderColor);
7637
7655
  }
7638
7656
  .pf-v6-c-button.pf-m-secondary {
7639
7657
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-secondary--Color);
@@ -7864,9 +7882,6 @@ button.pf-v6-c-breadcrumb__link {
7864
7882
  pointer-events: none;
7865
7883
  }
7866
7884
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
7867
- --pf-v6-c-badge--m-unread--Color: var(--pf-v6-c-button--disabled__c-badge--Color);
7868
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-v6-c-button--disabled__c-badge--BackgroundColor);
7869
- --pf-v6-c-button--m-primary__c-badge--BorderWidth: 0;
7870
7885
  color: var(--pf-v6-c-button--disabled--Color);
7871
7886
  background-color: var(--pf-v6-c-button--disabled--BackgroundColor);
7872
7887
  }
@@ -16369,6 +16384,7 @@ ul.pf-v6-c-list {
16369
16384
  --pf-v6-c-modal-box--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
16370
16385
  --pf-v6-c-modal-box--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
16371
16386
  --pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
16387
+ --pf-v6-c-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
16372
16388
  --pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
16373
16389
  --pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
16374
16390
  --pf-v6-c-modal-box__header--Gap: var(--pf-t--global--spacer--md);
@@ -16385,7 +16401,7 @@ ul.pf-v6-c-list {
16385
16401
  --pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
16386
16402
  --pf-v6-c-modal-box__body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
16387
16403
  --pf-v6-c-modal-box__body--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
16388
- --pf-v6-c-modal-box__header--body--PaddingBlockStart: var(--pf-t--global--spacer--md);
16404
+ --pf-v6-c-modal-box__header--body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
16389
16405
  --pf-v6-c-modal-box__close--InsetBlockStart: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
16390
16406
  --pf-v6-c-modal-box__close--InsetInlineEnd: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
16391
16407
  --pf-v6-c-modal-box__close--sibling--MarginInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
@@ -16465,6 +16481,7 @@ ul.pf-v6-c-list {
16465
16481
  flex-shrink: 0;
16466
16482
  gap: var(--pf-v6-c-modal-box__header--Gap);
16467
16483
  padding-block-start: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
16484
+ padding-block-end: var(--pf-v6-c-modal-box__header--PaddingBlockEnd);
16468
16485
  padding-inline-start: var(--pf-v6-c-modal-box__header--PaddingInlineStart);
16469
16486
  padding-inline-end: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
16470
16487
  }
package/patternfly.css CHANGED
@@ -7108,6 +7108,8 @@ h6) {
7108
7108
  }
7109
7109
 
7110
7110
  :where(:root, .pf-v6-c-badge) {
7111
+ --pf-v6-c-badge--BorderColor: transparent;
7112
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
7111
7113
  --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
7112
7114
  --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
7113
7115
  --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
@@ -7123,9 +7125,13 @@ h6) {
7123
7125
  --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
7124
7126
  --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
7125
7127
  --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
7128
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
7129
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
7130
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
7126
7131
  }
7127
7132
 
7128
7133
  .pf-v6-c-badge {
7134
+ position: relative;
7129
7135
  display: inline-block;
7130
7136
  min-width: var(--pf-v6-c-badge--MinWidth);
7131
7137
  padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
@@ -7138,6 +7144,14 @@ h6) {
7138
7144
  background-color: var(--pf-v6-c-badge--BackgroundColor);
7139
7145
  border-radius: var(--pf-v6-c-badge--BorderRadius);
7140
7146
  }
7147
+ .pf-v6-c-badge::after {
7148
+ position: absolute;
7149
+ inset: 0;
7150
+ pointer-events: none;
7151
+ content: "";
7152
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
7153
+ border-radius: inherit;
7154
+ }
7141
7155
  .pf-v6-c-badge.pf-m-read {
7142
7156
  --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
7143
7157
  --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
@@ -7148,6 +7162,13 @@ h6) {
7148
7162
  --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
7149
7163
  --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
7150
7164
  }
7165
+ .pf-v6-c-badge.pf-m-disabled {
7166
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
7167
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
7168
+ }
7169
+ .pf-v6-c-badge.pf-m-disabled::after {
7170
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
7171
+ }
7151
7172
 
7152
7173
  .pf-v6-c-badge__toggle-icon {
7153
7174
  margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
@@ -7693,10 +7714,7 @@ button.pf-v6-c-breadcrumb__link {
7693
7714
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
7694
7715
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
7695
7716
  --pf-v6-c-button__count--MarginInlineStart: var(--pf-t--global--spacer--sm);
7696
- --pf-v6-c-button--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled);
7697
- --pf-v6-c-button--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
7698
7717
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
7699
- --pf-v6-c-button--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
7700
7718
  }
7701
7719
 
7702
7720
  .pf-v6-c-button {
@@ -7750,7 +7768,7 @@ button.pf-v6-c-breadcrumb__link {
7750
7768
  --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-primary--m-clicked__icon--Color);
7751
7769
  }
7752
7770
  .pf-v6-c-button.pf-m-primary .pf-v6-c-badge.pf-m-unread {
7753
- border: var(--pf-v6-c-button--m-primary__c-badge--BorderWidth) solid var(--pf-v6-c-button--m-primary__c-badge--BorderColor);
7771
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-button--m-primary__c-badge--BorderColor);
7754
7772
  }
7755
7773
  .pf-v6-c-button.pf-m-secondary {
7756
7774
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-secondary--Color);
@@ -7981,9 +7999,6 @@ button.pf-v6-c-breadcrumb__link {
7981
7999
  pointer-events: none;
7982
8000
  }
7983
8001
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
7984
- --pf-v6-c-badge--m-unread--Color: var(--pf-v6-c-button--disabled__c-badge--Color);
7985
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-v6-c-button--disabled__c-badge--BackgroundColor);
7986
- --pf-v6-c-button--m-primary__c-badge--BorderWidth: 0;
7987
8002
  color: var(--pf-v6-c-button--disabled--Color);
7988
8003
  background-color: var(--pf-v6-c-button--disabled--BackgroundColor);
7989
8004
  }
@@ -16486,6 +16501,7 @@ ul.pf-v6-c-list {
16486
16501
  --pf-v6-c-modal-box--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
16487
16502
  --pf-v6-c-modal-box--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
16488
16503
  --pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
16504
+ --pf-v6-c-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
16489
16505
  --pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
16490
16506
  --pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
16491
16507
  --pf-v6-c-modal-box__header--Gap: var(--pf-t--global--spacer--md);
@@ -16502,7 +16518,7 @@ ul.pf-v6-c-list {
16502
16518
  --pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
16503
16519
  --pf-v6-c-modal-box__body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
16504
16520
  --pf-v6-c-modal-box__body--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
16505
- --pf-v6-c-modal-box__header--body--PaddingBlockStart: var(--pf-t--global--spacer--md);
16521
+ --pf-v6-c-modal-box__header--body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
16506
16522
  --pf-v6-c-modal-box__close--InsetBlockStart: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
16507
16523
  --pf-v6-c-modal-box__close--InsetInlineEnd: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
16508
16524
  --pf-v6-c-modal-box__close--sibling--MarginInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
@@ -16582,6 +16598,7 @@ ul.pf-v6-c-list {
16582
16598
  flex-shrink: 0;
16583
16599
  gap: var(--pf-v6-c-modal-box__header--Gap);
16584
16600
  padding-block-start: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
16601
+ padding-block-end: var(--pf-v6-c-modal-box__header--PaddingBlockEnd);
16585
16602
  padding-inline-start: var(--pf-v6-c-modal-box__header--PaddingInlineStart);
16586
16603
  padding-inline-end: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
16587
16604
  }