@patternfly/patternfly 6.6.0-prerelease.11 → 6.6.0-prerelease.13

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 (13) hide show
  1. package/components/Banner/banner.css +4 -0
  2. package/components/Banner/banner.scss +5 -1
  3. package/components/Page/page.css +7 -5
  4. package/components/Page/page.scss +9 -8
  5. package/components/Panel/panel.css +1 -1
  6. package/components/Panel/panel.scss +2 -2
  7. package/components/_index.css +12 -6
  8. package/docs/demos/Dashboard/examples/Dashboard.md +27 -30
  9. package/package.json +2 -2
  10. package/patternfly-no-globals.css +12 -6
  11. package/patternfly.css +12 -6
  12. package/patternfly.min.css +1 -1
  13. package/patternfly.min.css.map +1 -1
package/components/Banner/banner.css CHANGED
@@ -22,6 +22,7 @@
22
22
  --pf-v6-c-banner--link--TextDecoration: underline;
23
23
  --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
24
24
  --pf-v6-c-banner--link--disabled--Color: var(--pf-t--global--text--color--disabled);
25
+ --pf-v6-c-banner--link--TextDecorationColor: currentcolor;
25
26
  --pf-v6-c-banner--m-sticky--ZIndex: var(--pf-t--global--z-index--md);
26
27
  --pf-v6-c-banner--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md);
27
28
  --pf-v6-c-banner--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
@@ -130,6 +131,7 @@
130
131
  .pf-v6-c-banner a {
131
132
  color: var(--pf-v6-c-banner--link--Color);
132
133
  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
134
+ text-decoration-color: var(--pf-v6-c-banner--a--TextDecorationColor);
133
135
  }
134
136
  .pf-v6-c-banner a:hover:not(.pf-m-disabled) {
135
137
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--hover--Color);
@@ -142,6 +144,8 @@
142
144
  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-v6-c-banner--link--Color);
143
145
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
144
146
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-banner--link--disabled--Color);
147
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
148
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
145
149
  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
146
150
  }
147
151
  .pf-v6-c-banner .pf-v6-c-button.pf-m-inline:disabled, .pf-v6-c-banner .pf-v6-c-button.pf-m-inline.pf-m-disabled {
package/components/Banner/banner.scss CHANGED
@@ -23,6 +23,7 @@
23
23
  --#{$banner}--link--TextDecoration: underline;
24
24
  --#{$banner}--link--hover--Color: var(--#{$banner}--Color);
25
25
  --#{$banner}--link--disabled--Color: var(--pf-t--global--text--color--disabled);
26
+ --#{$banner}--link--TextDecorationColor: currentcolor;
26
27
 
27
28
  // modifier variables
28
29
  --#{$banner}--m-sticky--ZIndex: var(--pf-t--global--z-index--md);
@@ -154,6 +155,7 @@
154
155
  a {
155
156
  color: var(--#{$banner}--link--Color);
156
157
  text-decoration-line: var(--#{$banner}--link--TextDecoration);
158
+ text-decoration-color: var(--#{$banner}--a--TextDecorationColor);
157
159
 
158
160
  &:hover:not(.pf-m-disabled) {
159
161
  --#{$banner}--link--Color: var(--#{$banner}--link--hover--Color);
@@ -172,7 +174,9 @@
172
174
  --#{$button}--m-link--m-inline--Color: var(--#{$banner}--link--Color);
173
175
  --#{$button}--m-link--m-inline--hover--Color: var(--#{$banner}--link--hover--Color);
174
176
  --#{$button}--disabled--Color: var(--#{$banner}--link--disabled--Color);
175
-
177
+ --#{$button}--m-link--m-inline--TextDecorationColor: var(--#{$banner}--link--TextDecorationColor);
178
+ --#{$button}--m-link--m-inline--hover--TextDecorationColor: var(--#{$banner}--link--TextDecorationColor);
179
+
176
180
  text-decoration-line: var(--#{$banner}--link--TextDecoration);
177
181
 
178
182
  &:disabled,
package/components/Page/page.css CHANGED
@@ -14,11 +14,12 @@
14
14
  --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
15
15
  --pf-v6-c-page__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
16
16
  --pf-v6-c-page__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
17
- --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
17
+ --pf-v6-c-page__dock-main--BorderInlineEndWidth: 0;
18
18
  --pf-v6-c-page__dock-main--BorderInlineEndColor: transparent;
19
- --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
19
+ --pf-v6-c-page__dock-main--desktop--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
20
+ --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
20
21
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
21
- --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
22
+ --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: transparent;
22
23
  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
23
24
  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
24
25
  --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
@@ -414,8 +415,6 @@
414
415
  }
415
416
  @media (min-width: 62rem) {
416
417
  .pf-v6-c-page__dock {
417
- --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-v6-c-page__dock-main--desktop--BackgroundColor);
418
- --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
419
418
  position: revert;
420
419
  inset: revert;
421
420
  visibility: revert;
@@ -443,6 +442,9 @@
443
442
  }
444
443
  @media (min-width: 62rem) {
445
444
  .pf-v6-c-page__dock-main {
445
+ --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndWidth);
446
+ --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-v6-c-page__dock-main--desktop--BackgroundColor);
447
+ --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
446
448
  --pf-v6-c-page__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
447
449
  --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
448
450
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--BorderInlineEndWidth);
package/components/Page/page.scss CHANGED
@@ -27,11 +27,12 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
27
27
  --#{$page}__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
28
28
  --#{$page}__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
29
29
  --#{$page}__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
30
- --#{$page}__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
30
+ --#{$page}__dock-main--BorderInlineEndWidth: 0;
31
31
  --#{$page}__dock-main--BorderInlineEndColor: transparent;
32
- --#{$page}__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
32
+ --#{$page}__dock-main--desktop--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
33
+ --#{$page}__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
33
34
  --#{$page}__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
34
- --#{$page}__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
35
+ --#{$page}__dock--m-expanded__dock-main--BorderInlineEndColor: transparent;
35
36
 
36
37
  // Docked nav
37
38
  --#{$page}--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
@@ -285,7 +286,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
285
286
  --#{$page}__main-container--MarginBlockStart: var(--#{$page}__main-container--MarginBlockStart--glass);
286
287
  --#{$page}__main-container--MaxHeight: var(--#{$page}__main-container--MaxHeight--glass);
287
288
  --#{$page}--m-dock__main-container--MaxHeight: var(--#{$page}--m-dock__main-container--MaxHeight--glass);
288
- --#{$page}--m-dock__main-container--MarginBlockStart: var(--#{$page}--m-dock__main-container--MarginBlockStart--glass);
289
+ --#{$page}--m-dock__main-container--MarginBlockStart: var(--#{$page}--m-dock__main-container--MarginBlockStart--glass);
289
290
  }
290
291
 
291
292
  @media (min-width: $pf-v6-global--breakpoint--xl) {
@@ -447,9 +448,6 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
447
448
  }
448
449
 
449
450
  @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
450
- --#{$page}__dock-main--BackgroundColor: var(--#{$page}__dock-main--desktop--BackgroundColor);
451
- --#{$page}__dock-main--BorderInlineEndColor: var(--#{$page}__dock-main--desktop--BorderInlineEndColor);
452
-
453
451
  position: revert;
454
452
  inset: revert;
455
453
  visibility: revert;
@@ -479,6 +477,9 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
479
477
  }
480
478
 
481
479
  @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
480
+ --#{$page}__dock-main--BorderInlineEndWidth: var(--#{$page}__dock-main--desktop--BorderInlineEndWidth);
481
+ --#{$page}__dock-main--BackgroundColor: var(--#{$page}__dock-main--desktop--BackgroundColor);
482
+ --#{$page}__dock-main--BorderInlineEndColor: var(--#{$page}__dock-main--desktop--BorderInlineEndColor);
482
483
  --#{$page}__dock-main--BoxShadow: var(--#{$page}__dock-main--desktop--BoxShadow);
483
484
  --#{$page}__dock--m-expanded__dock-main--BoxShadow: var(--#{$page}__dock-main--desktop--BoxShadow);
484
485
  --#{$page}__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--#{$page}__dock-main--BorderInlineEndWidth);
@@ -975,4 +976,4 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
975
976
  flex-grow: 1;
976
977
  }
977
978
  }
978
- }
979
+ }
package/components/Panel/panel.css CHANGED
@@ -5,7 +5,7 @@
5
5
  --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
6
6
  --pf-v6-c-panel--BoxShadow: none;
7
7
  --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--medium);
8
- --pf-v6-c-panel--before--BorderWidth: 0;
8
+ --pf-v6-c-panel--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
9
9
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
10
10
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11
11
  --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
package/components/Panel/panel.scss CHANGED
@@ -9,12 +9,12 @@
9
9
  --#{$panel}--BorderRadius: var(--pf-t--global--border--radius--medium);
10
10
 
11
11
  // border
12
- --#{$panel}--before--BorderWidth: 0;
12
+ --#{$panel}--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
13
13
  --#{$panel}--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
14
14
 
15
15
  // secondary modifier
16
16
  --#{$panel}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
17
- --#{$panel}--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
17
+ --#{$panel}--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular); // TODO - remove in a breaking change
18
18
 
19
19
  // bordered
20
20
  --#{$panel}--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
package/components/_index.css CHANGED
@@ -1458,6 +1458,7 @@ div.pf-v6-c-avatar {
1458
1458
  --pf-v6-c-banner--link--TextDecoration: underline;
1459
1459
  --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
1460
1460
  --pf-v6-c-banner--link--disabled--Color: var(--pf-t--global--text--color--disabled);
1461
+ --pf-v6-c-banner--link--TextDecorationColor: currentcolor;
1461
1462
  --pf-v6-c-banner--m-sticky--ZIndex: var(--pf-t--global--z-index--md);
1462
1463
  --pf-v6-c-banner--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md);
1463
1464
  --pf-v6-c-banner--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
@@ -1566,6 +1567,7 @@ div.pf-v6-c-avatar {
1566
1567
  .pf-v6-c-banner a {
1567
1568
  color: var(--pf-v6-c-banner--link--Color);
1568
1569
  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
1570
+ text-decoration-color: var(--pf-v6-c-banner--a--TextDecorationColor);
1569
1571
  }
1570
1572
  .pf-v6-c-banner a:hover:not(.pf-m-disabled) {
1571
1573
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--hover--Color);
@@ -1578,6 +1580,8 @@ div.pf-v6-c-avatar {
1578
1580
  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-v6-c-banner--link--Color);
1579
1581
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
1580
1582
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-banner--link--disabled--Color);
1583
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
1584
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
1581
1585
  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
1582
1586
  }
1583
1587
  .pf-v6-c-banner .pf-v6-c-button.pf-m-inline:disabled, .pf-v6-c-banner .pf-v6-c-button.pf-m-inline.pf-m-disabled {
@@ -13866,11 +13870,12 @@ ul.pf-v6-c-list {
13866
13870
  --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
13867
13871
  --pf-v6-c-page__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
13868
13872
  --pf-v6-c-page__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
13869
- --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
13873
+ --pf-v6-c-page__dock-main--BorderInlineEndWidth: 0;
13870
13874
  --pf-v6-c-page__dock-main--BorderInlineEndColor: transparent;
13871
- --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
13875
+ --pf-v6-c-page__dock-main--desktop--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
13876
+ --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
13872
13877
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
13873
- --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
13878
+ --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: transparent;
13874
13879
  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
13875
13880
  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
13876
13881
  --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
@@ -14266,8 +14271,6 @@ ul.pf-v6-c-list {
14266
14271
  }
14267
14272
  @media (min-width: 62rem) {
14268
14273
  .pf-v6-c-page__dock {
14269
- --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-v6-c-page__dock-main--desktop--BackgroundColor);
14270
- --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
14271
14274
  position: revert;
14272
14275
  inset: revert;
14273
14276
  visibility: revert;
@@ -14295,6 +14298,9 @@ ul.pf-v6-c-list {
14295
14298
  }
14296
14299
  @media (min-width: 62rem) {
14297
14300
  .pf-v6-c-page__dock-main {
14301
+ --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndWidth);
14302
+ --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-v6-c-page__dock-main--desktop--BackgroundColor);
14303
+ --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
14298
14304
  --pf-v6-c-page__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
14299
14305
  --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
14300
14306
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--BorderInlineEndWidth);
@@ -15428,7 +15434,7 @@ ul.pf-v6-c-list {
15428
15434
  --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
15429
15435
  --pf-v6-c-panel--BoxShadow: none;
15430
15436
  --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--medium);
15431
- --pf-v6-c-panel--before--BorderWidth: 0;
15437
+ --pf-v6-c-panel--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
15432
15438
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
15433
15439
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
15434
15440
  --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
package/docs/demos/Dashboard/examples/Dashboard.md CHANGED
@@ -499,8 +499,14 @@ cssPrefix: pf-d-dashboard
499
499
  class="pf-v6-l-flex__item"
500
500
  style="margin-block-end: -.25em"
501
501
  >
502
- <span class="pf-v6-c-label pf-m-red">
502
+ <span class="pf-v6-c-label pf-m-danger">
503
503
  <span class="pf-v6-c-label__content">
504
+ <span class="pf-v6-c-label__icon">
505
+ <i
506
+ class="fas fa-fw fa-exclamation-circle"
507
+ aria-hidden="true"
508
+ ></i>
509
+ </span>
504
510
  <span class="pf-v6-c-label__text">Incident</span>
505
511
  </span>
506
512
  </span>
@@ -510,9 +516,7 @@ cssPrefix: pf-d-dashboard
510
516
  style="row-gap: var(--pf-6-global--spacer--md);"
511
517
  >
512
518
  <span class="pf-v6-c-icon">
513
- <span
514
- class="pf-v6-c-icon__content pf-m-success"
515
- >
519
+ <span class="pf-v6-c-icon__content pf-m-danger">
516
520
  <svg
517
521
  class="pf-v6-svg"
518
522
  fill="currentColor"
@@ -530,7 +534,7 @@ cssPrefix: pf-d-dashboard
530
534
  </span>
531
535
  <p class="pf-v6-u-color-200">
532
536
  System reboot
533
- <b class="pf-v6-u-color-100">is not</b> required
537
+ <b class="pf-v6-u-color-100">is</b> required
534
538
  </p>
535
539
  </div>
536
540
  </div>
@@ -635,7 +639,9 @@ cssPrefix: pf-d-dashboard
635
639
  style="row-gap: var(--pf-6-global--spacer--md);"
636
640
  >
637
641
  <span class="pf-v6-c-icon">
638
- <span class="pf-v6-c-icon__content pf-m-danger">
642
+ <span
643
+ class="pf-v6-c-icon__content pf-m-success"
644
+ >
639
645
  <svg
640
646
  class="pf-v6-svg"
641
647
  fill="currentColor"
@@ -653,7 +659,7 @@ cssPrefix: pf-d-dashboard
653
659
  </span>
654
660
  <p class="pf-v6-u-color-200">
655
661
  System reboot
656
- <b class="pf-v6-u-color-100">is</b> required
662
+ <b class="pf-v6-u-color-100">is not</b> required
657
663
  </p>
658
664
  </div>
659
665
  </div>
@@ -747,8 +753,14 @@ cssPrefix: pf-d-dashboard
747
753
  class="pf-v6-l-flex__item"
748
754
  style="margin-block-end: -.25em"
749
755
  >
750
- <span class="pf-v6-c-label pf-m-red">
756
+ <span class="pf-v6-c-label pf-m-danger">
751
757
  <span class="pf-v6-c-label__content">
758
+ <span class="pf-v6-c-label__icon">
759
+ <i
760
+ class="fas fa-fw fa-exclamation-circle"
761
+ aria-hidden="true"
762
+ ></i>
763
+ </span>
752
764
  <span class="pf-v6-c-label__text">Incident</span>
753
765
  </span>
754
766
  </span>
@@ -758,9 +770,7 @@ cssPrefix: pf-d-dashboard
758
770
  style="row-gap: var(--pf-6-global--spacer--md);"
759
771
  >
760
772
  <span class="pf-v6-c-icon">
761
- <span
762
- class="pf-v6-c-icon__content pf-m-success"
763
- >
773
+ <span class="pf-v6-c-icon__content pf-m-danger">
764
774
  <svg
765
775
  class="pf-v6-svg"
766
776
  fill="currentColor"
@@ -778,7 +788,7 @@ cssPrefix: pf-d-dashboard
778
788
  </span>
779
789
  <p class="pf-v6-u-color-200">
780
790
  System reboot
781
- <b class="pf-v6-u-color-100">is not</b> required
791
+ <b class="pf-v6-u-color-100">is</b> required
782
792
  </p>
783
793
  </div>
784
794
  </div>
@@ -1050,7 +1060,7 @@ cssPrefix: pf-d-dashboard
1050
1060
  aria-label="Group of labels"
1051
1061
  >
1052
1062
  <li class="pf-v6-c-label-group__list-item">
1053
- <span class="pf-v6-c-label pf-m-red">
1063
+ <span class="pf-v6-c-label pf-m-danger">
1054
1064
  <span class="pf-v6-c-label__content">
1055
1065
  <span class="pf-v6-c-label__icon">
1056
1066
  <i
@@ -1063,11 +1073,11 @@ cssPrefix: pf-d-dashboard
1063
1073
  </span>
1064
1074
  </li>
1065
1075
  <li class="pf-v6-c-label-group__list-item">
1066
- <span class="pf-v6-c-label pf-m-orange">
1076
+ <span class="pf-v6-c-label pf-m-warning">
1067
1077
  <span class="pf-v6-c-label__content">
1068
1078
  <span class="pf-v6-c-label__icon">
1069
1079
  <i
1070
- class="fas fa-fw fa-exclamation-circle"
1080
+ class="fas fa-fw fa-exclamation-triangle"
1071
1081
  aria-hidden="true"
1072
1082
  ></i>
1073
1083
  </span>
@@ -1076,7 +1086,7 @@ cssPrefix: pf-d-dashboard
1076
1086
  </span>
1077
1087
  </li>
1078
1088
  <li class="pf-v6-c-label-group__list-item">
1079
- <span class="pf-v6-c-label pf-m-green">
1089
+ <span class="pf-v6-c-label pf-m-success">
1080
1090
  <span class="pf-v6-c-label__content">
1081
1091
  <span class="pf-v6-c-label__icon">
1082
1092
  <i
@@ -1089,7 +1099,7 @@ cssPrefix: pf-d-dashboard
1089
1099
  </span>
1090
1100
  </li>
1091
1101
  <li class="pf-v6-c-label-group__list-item">
1092
- <span class="pf-v6-c-label pf-m-blue">
1102
+ <span class="pf-v6-c-label pf-m-info">
1093
1103
  <span class="pf-v6-c-label__content">
1094
1104
  <span class="pf-v6-c-label__icon">
1095
1105
  <i
@@ -1101,19 +1111,6 @@ cssPrefix: pf-d-dashboard
1101
1111
  </span>
1102
1112
  </span>
1103
1113
  </li>
1104
- <li class="pf-v6-c-label-group__list-item">
1105
- <span class="pf-v6-c-label pf-m-teal">
1106
- <span class="pf-v6-c-label__content">
1107
- <span class="pf-v6-c-label__icon">
1108
- <i
1109
- class="fas fa-fw fa-bell"
1110
- aria-hidden="true"
1111
- ></i>
1112
- </span>
1113
- <span class="pf-v6-c-label__text">3</span>
1114
- </span>
1115
- </span>
1116
- </li>
1117
1114
  </ul>
1118
1115
  </div>
1119
1116
  </div>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly",
4
- "version": "6.6.0-prerelease.11",
4
+ "version": "6.6.0-prerelease.13",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -71,7 +71,7 @@
71
71
  "@commitlint/config-conventional": "^19.1.0",
72
72
  "@fortawesome/fontawesome": "^1.1.8",
73
73
  "@octokit/rest": "^20.1.0",
74
- "@patternfly/documentation-framework": "6.44.3",
74
+ "@patternfly/documentation-framework": "6.44.4",
75
75
  "@patternfly/patternfly-a11y": "5.1.0",
76
76
  "@patternfly/react-code-editor": "6.5.1",
77
77
  "@patternfly/react-core": "6.5.1",
package/patternfly-no-globals.css CHANGED
@@ -10714,6 +10714,7 @@ div.pf-v6-c-avatar {
10714
10714
  --pf-v6-c-banner--link--TextDecoration: underline;
10715
10715
  --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
10716
10716
  --pf-v6-c-banner--link--disabled--Color: var(--pf-t--global--text--color--disabled);
10717
+ --pf-v6-c-banner--link--TextDecorationColor: currentcolor;
10717
10718
  --pf-v6-c-banner--m-sticky--ZIndex: var(--pf-t--global--z-index--md);
10718
10719
  --pf-v6-c-banner--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md);
10719
10720
  --pf-v6-c-banner--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
@@ -10822,6 +10823,7 @@ div.pf-v6-c-avatar {
10822
10823
  .pf-v6-c-banner a {
10823
10824
  color: var(--pf-v6-c-banner--link--Color);
10824
10825
  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
10826
+ text-decoration-color: var(--pf-v6-c-banner--a--TextDecorationColor);
10825
10827
  }
10826
10828
  .pf-v6-c-banner a:hover:not(.pf-m-disabled) {
10827
10829
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--hover--Color);
@@ -10834,6 +10836,8 @@ div.pf-v6-c-avatar {
10834
10836
  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-v6-c-banner--link--Color);
10835
10837
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
10836
10838
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-banner--link--disabled--Color);
10839
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
10840
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
10837
10841
  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
10838
10842
  }
10839
10843
  .pf-v6-c-banner .pf-v6-c-button.pf-m-inline:disabled, .pf-v6-c-banner .pf-v6-c-button.pf-m-inline.pf-m-disabled {
@@ -23122,11 +23126,12 @@ ul.pf-v6-c-list {
23122
23126
  --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
23123
23127
  --pf-v6-c-page__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
23124
23128
  --pf-v6-c-page__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
23125
- --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
23129
+ --pf-v6-c-page__dock-main--BorderInlineEndWidth: 0;
23126
23130
  --pf-v6-c-page__dock-main--BorderInlineEndColor: transparent;
23127
- --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
23131
+ --pf-v6-c-page__dock-main--desktop--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
23132
+ --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
23128
23133
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
23129
- --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
23134
+ --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: transparent;
23130
23135
  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
23131
23136
  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
23132
23137
  --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
@@ -23522,8 +23527,6 @@ ul.pf-v6-c-list {
23522
23527
  }
23523
23528
  @media (min-width: 62rem) {
23524
23529
  .pf-v6-c-page__dock {
23525
- --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-v6-c-page__dock-main--desktop--BackgroundColor);
23526
- --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
23527
23530
  position: revert;
23528
23531
  inset: revert;
23529
23532
  visibility: revert;
@@ -23551,6 +23554,9 @@ ul.pf-v6-c-list {
23551
23554
  }
23552
23555
  @media (min-width: 62rem) {
23553
23556
  .pf-v6-c-page__dock-main {
23557
+ --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndWidth);
23558
+ --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-v6-c-page__dock-main--desktop--BackgroundColor);
23559
+ --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
23554
23560
  --pf-v6-c-page__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
23555
23561
  --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
23556
23562
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--BorderInlineEndWidth);
@@ -24684,7 +24690,7 @@ ul.pf-v6-c-list {
24684
24690
  --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
24685
24691
  --pf-v6-c-panel--BoxShadow: none;
24686
24692
  --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--medium);
24687
- --pf-v6-c-panel--before--BorderWidth: 0;
24693
+ --pf-v6-c-panel--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
24688
24694
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
24689
24695
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
24690
24696
  --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
package/patternfly.css CHANGED
@@ -10869,6 +10869,7 @@ div.pf-v6-c-avatar {
10869
10869
  --pf-v6-c-banner--link--TextDecoration: underline;
10870
10870
  --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
10871
10871
  --pf-v6-c-banner--link--disabled--Color: var(--pf-t--global--text--color--disabled);
10872
+ --pf-v6-c-banner--link--TextDecorationColor: currentcolor;
10872
10873
  --pf-v6-c-banner--m-sticky--ZIndex: var(--pf-t--global--z-index--md);
10873
10874
  --pf-v6-c-banner--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md);
10874
10875
  --pf-v6-c-banner--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
@@ -10977,6 +10978,7 @@ div.pf-v6-c-avatar {
10977
10978
  .pf-v6-c-banner a {
10978
10979
  color: var(--pf-v6-c-banner--link--Color);
10979
10980
  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
10981
+ text-decoration-color: var(--pf-v6-c-banner--a--TextDecorationColor);
10980
10982
  }
10981
10983
  .pf-v6-c-banner a:hover:not(.pf-m-disabled) {
10982
10984
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--hover--Color);
@@ -10989,6 +10991,8 @@ div.pf-v6-c-avatar {
10989
10991
  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-v6-c-banner--link--Color);
10990
10992
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
10991
10993
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-banner--link--disabled--Color);
10994
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
10995
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
10992
10996
  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
10993
10997
  }
10994
10998
  .pf-v6-c-banner .pf-v6-c-button.pf-m-inline:disabled, .pf-v6-c-banner .pf-v6-c-button.pf-m-inline.pf-m-disabled {
@@ -23277,11 +23281,12 @@ ul.pf-v6-c-list {
23277
23281
  --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
23278
23282
  --pf-v6-c-page__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
23279
23283
  --pf-v6-c-page__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
23280
- --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
23284
+ --pf-v6-c-page__dock-main--BorderInlineEndWidth: 0;
23281
23285
  --pf-v6-c-page__dock-main--BorderInlineEndColor: transparent;
23282
- --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
23286
+ --pf-v6-c-page__dock-main--desktop--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
23287
+ --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
23283
23288
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
23284
- --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
23289
+ --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: transparent;
23285
23290
  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
23286
23291
  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
23287
23292
  --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
@@ -23677,8 +23682,6 @@ ul.pf-v6-c-list {
23677
23682
  }
23678
23683
  @media (min-width: 62rem) {
23679
23684
  .pf-v6-c-page__dock {
23680
- --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-v6-c-page__dock-main--desktop--BackgroundColor);
23681
- --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
23682
23685
  position: revert;
23683
23686
  inset: revert;
23684
23687
  visibility: revert;
@@ -23706,6 +23709,9 @@ ul.pf-v6-c-list {
23706
23709
  }
23707
23710
  @media (min-width: 62rem) {
23708
23711
  .pf-v6-c-page__dock-main {
23712
+ --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndWidth);
23713
+ --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-v6-c-page__dock-main--desktop--BackgroundColor);
23714
+ --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
23709
23715
  --pf-v6-c-page__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
23710
23716
  --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
23711
23717
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--BorderInlineEndWidth);
@@ -24839,7 +24845,7 @@ ul.pf-v6-c-list {
24839
24845
  --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
24840
24846
  --pf-v6-c-panel--BoxShadow: none;
24841
24847
  --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--medium);
24842
- --pf-v6-c-panel--before--BorderWidth: 0;
24848
+ --pf-v6-c-panel--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
24843
24849
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
24844
24850
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
24845
24851
  --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);