@patternfly/patternfly 6.0.0-alpha.145 → 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 +8 -10
  4. package/components/Button/button.scss +9 -13
  5. package/components/ModalBox/modal-box.css +3 -1
  6. package/components/ModalBox/modal-box.scss +3 -1
  7. package/components/_index.css +32 -11
  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 +32 -11
  12. package/patternfly.css +32 -11
  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
@@ -13,6 +13,9 @@
13
13
  --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--button--default);
14
14
  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
15
15
  --pf-v6-c-button--TextDecoration: none;
16
+ --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
17
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
18
+ --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
16
19
  --pf-v6-c-button--hover--BackgroundColor: transparent;
17
20
  --pf-v6-c-button--hover--BorderColor: transparent;
18
21
  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
@@ -205,8 +208,6 @@
205
208
  --pf-v6-c-button__progress--InsetBlockStart: 50%;
206
209
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--md);
207
210
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
208
- --pf-v6-c-button--m-progress--TransitionProperty: padding;
209
- --pf-v6-c-button--m-progress--TransitionDuration: var(--pf-t--global--transition--duration);
210
211
  --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
211
212
  --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
212
213
  --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -215,10 +216,7 @@
215
216
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
216
217
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
217
218
  --pf-v6-c-button__count--MarginInlineStart: var(--pf-t--global--spacer--sm);
218
- --pf-v6-c-button--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled);
219
- --pf-v6-c-button--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
220
219
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
221
- --pf-v6-c-button--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
222
220
  }
223
221
 
224
222
  .pf-v6-c-button {
@@ -246,6 +244,9 @@
246
244
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
247
245
  border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
248
246
  border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
247
+ transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
248
+ transition-duration: var(--pf-v6-c-button--TransitionDuration);
249
+ transition-property: var(--pf-v6-c-button--TransitionProperty);
249
250
  }
250
251
  .pf-v6-c-button::after {
251
252
  position: absolute;
@@ -255,6 +256,7 @@
255
256
  border: var(--pf-v6-c-button--BorderWidth) solid;
256
257
  border-color: var(--pf-v6-c-button--BorderColor);
257
258
  border-radius: inherit;
259
+ transition: inherit;
258
260
  }
259
261
  .pf-v6-c-button.pf-m-primary {
260
262
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-primary--Color);
@@ -268,7 +270,7 @@
268
270
  --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-primary--m-clicked__icon--Color);
269
271
  }
270
272
  .pf-v6-c-button.pf-m-primary .pf-v6-c-badge.pf-m-unread {
271
- 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);
272
274
  }
273
275
  .pf-v6-c-button.pf-m-secondary {
274
276
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-secondary--Color);
@@ -499,9 +501,6 @@
499
501
  pointer-events: none;
500
502
  }
501
503
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
502
- --pf-v6-c-badge--m-unread--Color: var(--pf-v6-c-button--disabled__c-badge--Color);
503
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-v6-c-button--disabled__c-badge--BackgroundColor);
504
- --pf-v6-c-button--m-primary__c-badge--BorderWidth: 0;
505
504
  color: var(--pf-v6-c-button--disabled--Color);
506
505
  background-color: var(--pf-v6-c-button--disabled--BackgroundColor);
507
506
  }
@@ -518,7 +517,6 @@
518
517
  .pf-v6-c-button.pf-m-progress {
519
518
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
520
519
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
521
- transition: var(--pf-v6-c-button--m-progress--TransitionProperty) var(--pf-v6-c-button--m-progress--TransitionDuration);
522
520
  }
523
521
  .pf-v6-c-button.pf-m-in-progress {
524
522
  --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
package/components/Button/button.scss CHANGED
@@ -15,13 +15,16 @@
15
15
  --#{$button}--BorderWidth: var(--pf-t--global--border--width--button--default);
16
16
  --#{$button}--BorderRadius: var(--pf-t--global--border--radius--pill);
17
17
  --#{$button}--TextDecoration: none;
18
+ --#{$button}--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
19
+ --#{$button}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
20
+ --#{$button}--TransitionProperty: color, background-color, border-width, border-color, padding;
18
21
 
19
22
  // Hover
20
23
  --#{$button}--hover--BackgroundColor: transparent;
21
24
  --#{$button}--hover--BorderColor: transparent;
22
25
  --#{$button}--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
23
26
  --#{$button}--hover--TextDecoration: none;
24
-
27
+
25
28
  // Clicked
26
29
  --#{$button}--m-clicked--BackgroundColor: transparent;
27
30
  --#{$button}--m-clicked--BorderColor: transparent;
@@ -251,8 +254,6 @@
251
254
  --#{$button}__progress--InsetBlockStart: 50%;
252
255
  --#{$button}__progress--InsetInlineStart: var(--pf-t--global--spacer--md);
253
256
  --#{$button}__progress--Color: var(--#{$button}__icon--Color);
254
- --#{$button}--m-progress--TransitionProperty: padding;
255
- --#{$button}--m-progress--TransitionDuration: var(--pf-t--global--transition--duration);
256
257
  --#{$button}--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--md) + var(--#{$button}__progress--width) / 2);
257
258
  --#{$button}--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--md) + var(--#{$button}__progress--width) / 2);
258
259
  --#{$button}--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -263,10 +264,7 @@
263
264
 
264
265
  // Count
265
266
  --#{$button}__count--MarginInlineStart: var(--pf-t--global--spacer--sm);
266
- --#{$button}--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled);
267
- --#{$button}--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
268
267
  --#{$button}--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
269
- --#{$button}--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
270
268
  }
271
269
 
272
270
  .#{$button} {
@@ -294,6 +292,9 @@
294
292
  border-start-end-radius: var(--#{$button}--BorderStartEndRadius, var(--#{$button}--BorderRadius));
295
293
  border-end-start-radius: var(--#{$button}--BorderEndStartRadius, var(--#{$button}--BorderRadius));
296
294
  border-end-end-radius: var(--#{$button}--BorderEndEndRadius, var(--#{$button}--BorderRadius));
295
+ transition-timing-function: var(--#{$button}--TransitionTimingFunction);
296
+ transition-duration: var(--#{$button}--TransitionDuration);
297
+ transition-property: var(--#{$button}--TransitionProperty);
297
298
 
298
299
  &::after {
299
300
  position: absolute;
@@ -303,6 +304,7 @@
303
304
  border: var(--#{$button}--BorderWidth) solid;
304
305
  border-color: var(--#{$button}--BorderColor);
305
306
  border-radius: inherit;
307
+ transition: inherit;
306
308
  }
307
309
 
308
310
  // Primary
@@ -318,7 +320,7 @@
318
320
  --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-primary--m-clicked__icon--Color);
319
321
 
320
322
  .#{$badge}.pf-m-unread {
321
- 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);
322
324
  }
323
325
  }
324
326
 
@@ -593,10 +595,6 @@
593
595
  &:disabled,
594
596
  &.pf-m-disabled,
595
597
  &.pf-m-aria-disabled {
596
- --#{$badge}--m-unread--Color: var(--#{$button}--disabled__c-badge--Color);
597
- --#{$badge}--m-unread--BackgroundColor: var(--#{$button}--disabled__c-badge--BackgroundColor);
598
- --#{$button}--m-primary__c-badge--BorderWidth: 0;
599
-
600
598
  color: var(--#{$button}--disabled--Color);
601
599
  background-color: var(--#{$button}--disabled--BackgroundColor);
602
600
 
@@ -618,8 +616,6 @@
618
616
  &.pf-m-progress {
619
617
  --#{$button}--PaddingInlineEnd: var(--#{$button}--m-progress--PaddingInlineEnd);
620
618
  --#{$button}--PaddingInlineStart: var(--#{$button}--m-progress--PaddingInlineStart);
621
-
622
- transition: var(--#{$button}--m-progress--TransitionProperty) var(--#{$button}--m-progress--TransitionDuration);
623
619
  }
624
620
 
625
621
  &.pf-m-in-progress {
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);
@@ -1353,6 +1374,9 @@ button.pf-v6-c-breadcrumb__link {
1353
1374
  --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--button--default);
1354
1375
  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
1355
1376
  --pf-v6-c-button--TextDecoration: none;
1377
+ --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
1378
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
1379
+ --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
1356
1380
  --pf-v6-c-button--hover--BackgroundColor: transparent;
1357
1381
  --pf-v6-c-button--hover--BorderColor: transparent;
1358
1382
  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
@@ -1545,8 +1569,6 @@ button.pf-v6-c-breadcrumb__link {
1545
1569
  --pf-v6-c-button__progress--InsetBlockStart: 50%;
1546
1570
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--md);
1547
1571
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
1548
- --pf-v6-c-button--m-progress--TransitionProperty: padding;
1549
- --pf-v6-c-button--m-progress--TransitionDuration: var(--pf-t--global--transition--duration);
1550
1572
  --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
1551
1573
  --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
1552
1574
  --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -1555,10 +1577,7 @@ button.pf-v6-c-breadcrumb__link {
1555
1577
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
1556
1578
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
1557
1579
  --pf-v6-c-button__count--MarginInlineStart: var(--pf-t--global--spacer--sm);
1558
- --pf-v6-c-button--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled);
1559
- --pf-v6-c-button--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1560
1580
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
1561
- --pf-v6-c-button--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
1562
1581
  }
1563
1582
 
1564
1583
  .pf-v6-c-button {
@@ -1586,6 +1605,9 @@ button.pf-v6-c-breadcrumb__link {
1586
1605
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
1587
1606
  border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
1588
1607
  border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
1608
+ transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
1609
+ transition-duration: var(--pf-v6-c-button--TransitionDuration);
1610
+ transition-property: var(--pf-v6-c-button--TransitionProperty);
1589
1611
  }
1590
1612
  .pf-v6-c-button::after {
1591
1613
  position: absolute;
@@ -1595,6 +1617,7 @@ button.pf-v6-c-breadcrumb__link {
1595
1617
  border: var(--pf-v6-c-button--BorderWidth) solid;
1596
1618
  border-color: var(--pf-v6-c-button--BorderColor);
1597
1619
  border-radius: inherit;
1620
+ transition: inherit;
1598
1621
  }
1599
1622
  .pf-v6-c-button.pf-m-primary {
1600
1623
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-primary--Color);
@@ -1608,7 +1631,7 @@ button.pf-v6-c-breadcrumb__link {
1608
1631
  --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-primary--m-clicked__icon--Color);
1609
1632
  }
1610
1633
  .pf-v6-c-button.pf-m-primary .pf-v6-c-badge.pf-m-unread {
1611
- 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);
1612
1635
  }
1613
1636
  .pf-v6-c-button.pf-m-secondary {
1614
1637
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-secondary--Color);
@@ -1839,9 +1862,6 @@ button.pf-v6-c-breadcrumb__link {
1839
1862
  pointer-events: none;
1840
1863
  }
1841
1864
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
1842
- --pf-v6-c-badge--m-unread--Color: var(--pf-v6-c-button--disabled__c-badge--Color);
1843
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-v6-c-button--disabled__c-badge--BackgroundColor);
1844
- --pf-v6-c-button--m-primary__c-badge--BorderWidth: 0;
1845
1865
  color: var(--pf-v6-c-button--disabled--Color);
1846
1866
  background-color: var(--pf-v6-c-button--disabled--BackgroundColor);
1847
1867
  }
@@ -1858,7 +1878,6 @@ button.pf-v6-c-breadcrumb__link {
1858
1878
  .pf-v6-c-button.pf-m-progress {
1859
1879
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
1860
1880
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
1861
- transition: var(--pf-v6-c-button--m-progress--TransitionProperty) var(--pf-v6-c-button--m-progress--TransitionDuration);
1862
1881
  }
1863
1882
  .pf-v6-c-button.pf-m-in-progress {
1864
1883
  --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
@@ -10345,6 +10364,7 @@ ul.pf-v6-c-list {
10345
10364
  --pf-v6-c-modal-box--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
10346
10365
  --pf-v6-c-modal-box--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
10347
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);
10348
10368
  --pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
10349
10369
  --pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
10350
10370
  --pf-v6-c-modal-box__header--Gap: var(--pf-t--global--spacer--md);
@@ -10361,7 +10381,7 @@ ul.pf-v6-c-list {
10361
10381
  --pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
10362
10382
  --pf-v6-c-modal-box__body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
10363
10383
  --pf-v6-c-modal-box__body--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
10364
- --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);
10365
10385
  --pf-v6-c-modal-box__close--InsetBlockStart: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
10366
10386
  --pf-v6-c-modal-box__close--InsetInlineEnd: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
10367
10387
  --pf-v6-c-modal-box__close--sibling--MarginInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
@@ -10441,6 +10461,7 @@ ul.pf-v6-c-list {
10441
10461
  flex-shrink: 0;
10442
10462
  gap: var(--pf-v6-c-modal-box__header--Gap);
10443
10463
  padding-block-start: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
10464
+ padding-block-end: var(--pf-v6-c-modal-box__header--PaddingBlockEnd);
10444
10465
  padding-inline-start: var(--pf-v6-c-modal-box__header--PaddingInlineStart);
10445
10466
  padding-inline-end: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
10446
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.145",
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",