@patternfly/patternfly 6.0.0-alpha.122 → 6.0.0-alpha.124

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 (34) hide show
  1. package/base/patternfly-variables.css +39 -26
  2. package/base/patternfly-variables.scss +11 -5
  3. package/base/tokens/_index.scss +1 -0
  4. package/base/tokens/tokens-charts-dark.scss +169 -0
  5. package/base/tokens/tokens-charts.scss +75 -65
  6. package/base/tokens/tokens-dark.scss +19 -7
  7. package/base/tokens/tokens-default.scss +25 -13
  8. package/base/tokens/tokens-font.scss +1 -1
  9. package/base/tokens/tokens-palette.scss +4 -5
  10. package/components/DataList/data-list.css +2 -2
  11. package/components/DataList/data-list.scss +2 -2
  12. package/components/Page/page.css +2 -230
  13. package/components/Page/page.scss +3 -158
  14. package/components/Wizard/wizard.css +80 -41
  15. package/components/Wizard/wizard.scss +98 -48
  16. package/components/_index.css +84 -273
  17. package/docs/components/Nav/examples/Navigation.css +0 -5
  18. package/docs/components/Wizard/examples/Wizard.md +827 -91
  19. package/docs/demos/Wizard/examples/Wizard.md +356 -198
  20. package/docs/utilities/Alignment/examples/Alignment.css +2 -2
  21. package/docs/utilities/Display/examples/Display.css +2 -2
  22. package/docs/utilities/Flex/examples/Flex.css +2 -2
  23. package/docs/utilities/Float/examples/Float.css +3 -3
  24. package/docs/utilities/Sizing/examples/Sizing.css +2 -2
  25. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  26. package/package.json +1 -1
  27. package/patternfly-base-no-globals.css +39 -26
  28. package/patternfly-base.css +39 -26
  29. package/patternfly-no-globals.css +123 -299
  30. package/patternfly.css +123 -299
  31. package/patternfly.min.css +1 -1
  32. package/patternfly.min.css.map +1 -1
  33. package/docs/components/Page/deprecated/PageHeader.css +0 -17
  34. package/docs/components/Page/deprecated/PageHeader.md +0 -275
package/docs/utilities/Alignment/examples/Alignment.css CHANGED
@@ -2,6 +2,6 @@
2
2
  .ws-core-u-alignment .pf-v6-u-text-align-center,
3
3
  .ws-core-u-alignment .pf-v6-u-text-align-end,
4
4
  .ws-core-u-alignment .pf-v6-u-text-align-justify {
5
- padding: .5rem !important;
6
- border: 2px dashed #393f44;
5
+ padding: var(--pf-t--global--spacer--sm);
6
+ border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
7
7
  }
package/docs/utilities/Display/examples/Display.css CHANGED
@@ -6,6 +6,6 @@
6
6
  .ws-core-u-display .pf-v6-u-display-inline,
7
7
  .ws-core-u-display .pf-v6-u-display-table,
8
8
  .ws-core-u-display .pf-v6-u-display-table-cell {
9
- padding: .5rem !important;
10
- border: 2px dashed #393f44;
9
+ padding: var(--pf-t--global--spacer--sm);
10
+ border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
11
11
  }
package/docs/utilities/Flex/examples/Flex.css CHANGED
@@ -2,8 +2,8 @@
2
2
  .ws-core-u-flex .ws-example-flex-item,
3
3
  .ws-core-u-flex .pf-v6-u-display-inline-flex {
4
4
  flex-wrap: wrap;
5
- padding: .5rem !important;
6
- border: 2px dashed #393f44;
5
+ padding: var(--pf-t--global--spacer--sm);
6
+ border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
7
7
  }
8
8
 
9
9
  #ws-core-u-flex-aligned-items .pf-v6-u-display-flex,
package/docs/utilities/Float/examples/Float.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .ws-core-u-float .pf-v6-u-float-inline-start,
2
2
  .ws-core-u-float .pf-v6-u-float-inline-end {
3
- padding: .5rem !important;
4
- border: 2px dashed #393f44;
5
- }
3
+ padding: var(--pf-t--global--spacer--sm);
4
+ border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
5
+ }
package/docs/utilities/Sizing/examples/Sizing.css CHANGED
@@ -3,6 +3,6 @@
3
3
  .pf-v6-u-min-height,
4
4
  .pf-v6-u-max-height,
5
5
  .ws-example-u-sizing-item {
6
- padding: .5rem !important;
7
- border: 2px dashed #393f44;
6
+ padding: var(--pf-t--global--spacer--sm);
7
+ border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
8
8
  }
package/docs/utilities/Spacing/examples/Spacing.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .ws-core-u-spacing .ws-example-flex-item,
2
2
  .ws-core-u-spacing .pf-v6-u-display-flex {
3
- padding: .5rem;
4
- border: 2px dashed #393f44;
3
+ padding: var(--pf-t--global--spacer--sm);
4
+ border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
5
5
  }
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",
4
- "version": "6.0.0-alpha.122",
4
+ "version": "6.0.0-alpha.124",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base-no-globals.css CHANGED
@@ -4814,11 +4814,8 @@
4814
4814
  vertical-align: -0.125em;
4815
4815
  }
4816
4816
 
4817
- html .ws-preview {
4818
- background-color: var(--pf-t--global--background--color--primary--default);
4819
- }
4820
-
4821
- :root {
4817
+ :where(:root) {
4818
+ --pf-v6-global--inverse--multiplier: 1;
4822
4819
  --pf-t--global--font--family--100: redhattextvf, redhattext, helvetica, arial, sans-serif;
4823
4820
  --pf-t--global--font--family--200: redhatdisplayvf, redhatdisplay, helvetica, arial, sans-serif;
4824
4821
  --pf-t--global--font--family--300: redhatmonovf, redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
@@ -4948,9 +4945,6 @@ html .ws-preview {
4948
4945
  --pf-t--global--transition--timing-function: cubic-bezier(.645, .045, .355, 1);
4949
4946
  --pf-t--global--transition--duration: 250ms;
4950
4947
  --pf-t--global--list-style: disc outside;
4951
- }
4952
-
4953
- :root {
4954
4948
  --pf-t--color--red--70: #5f0000;
4955
4949
  --pf-t--color--red--60: #a60000;
4956
4950
  --pf-t--color--red--50: #e00;
@@ -5019,9 +5013,6 @@ html .ws-preview {
5019
5013
  --pf-t--color--gray--20: #e0e0e0;
5020
5014
  --pf-t--color--gray--10: #f2f2f2;
5021
5015
  --pf-t--color--white: #fff;
5022
- }
5023
-
5024
- :root {
5025
5016
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
5026
5017
  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
5027
5018
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
@@ -5116,6 +5107,12 @@ html .ws-preview {
5116
5107
  --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
5117
5108
  --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
5118
5109
  --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
5110
+ --pf-t--global--color--severity--critical--100: var(--pf-t--color--red-orange--60);
5111
+ --pf-t--global--color--severity--important--100: var(--pf-t--color--orange--50);
5112
+ --pf-t--global--color--severity--moderate--100: var(--pf-t--color--yellow--40);
5113
+ --pf-t--global--color--severity--minor--100: var(--pf-t--color--gray--50);
5114
+ --pf-t--global--color--severity--none--100: var(--pf-t--color--blue--40);
5115
+ --pf-t--global--color--severity--undefined--100: var(--pf-t--color--gray--30);
5119
5116
  --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
5120
5117
  --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
5121
5118
  --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
@@ -5184,12 +5181,12 @@ html .ws-preview {
5184
5181
  --pf-t--global--box-shadow--X--sm--bottom: var(--pf-t--global--box-shadow--X--400);
5185
5182
  --pf-t--global--box-shadow--X--sm--top: var(--pf-t--global--box-shadow--X--400);
5186
5183
  --pf-t--global--box-shadow--X--sm--default: var(--pf-t--global--box-shadow--X--400);
5187
- --pf-t--global--z-index--2xl: 600;
5188
- --pf-t--global--z-index--xl: 500;
5189
- --pf-t--global--z-index--lg: 400;
5190
- --pf-t--global--z-index--md: 300;
5191
- --pf-t--global--z-index--sm: 200;
5192
- --pf-t--global--z-index--xs: 100;
5184
+ --pf-t--global--z-index--2xl: var(--pf-t--global--z-index--600);
5185
+ --pf-t--global--z-index--xl: var(--pf-t--global--z-index--500);
5186
+ --pf-t--global--z-index--lg: var(--pf-t--global--z-index--400);
5187
+ --pf-t--global--z-index--md: var(--pf-t--global--z-index--300);
5188
+ --pf-t--global--z-index--sm: var(--pf-t--global--z-index--200);
5189
+ --pf-t--global--z-index--xs: var(--pf-t--global--z-index--100);
5193
5190
  --pf-t--global--font--size--4xl: var(--pf-t--global--font--size--800);
5194
5191
  --pf-t--global--font--size--3xl: var(--pf-t--global--font--size--700);
5195
5192
  --pf-t--global--font--size--2xl: var(--pf-t--global--font--size--600);
@@ -5256,6 +5253,7 @@ html .ws-preview {
5256
5253
  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
5257
5254
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
5258
5255
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
5256
+ --pf-t--global--text--color--on-highlight: var(--pf-t--global--text--color--100);
5259
5257
  --pf-t--global--text--color--required: var(--pf-t--global--text--color--400);
5260
5258
  --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300);
5261
5259
  --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
@@ -5365,12 +5363,19 @@ html .ws-preview {
5365
5363
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--300);
5366
5364
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--200);
5367
5365
  --pf-t--global--border--color--on-secondary: var(--pf-t--global--border--color--300);
5366
+ --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200);
5368
5367
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
5369
5368
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
5370
5369
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
5371
5370
  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
5372
5371
  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
5373
5372
  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
5373
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--color--severity--critical--100);
5374
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--color--severity--important--100);
5375
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--color--severity--moderate--100);
5376
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--color--severity--minor--100);
5377
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--color--severity--none--100);
5378
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--color--severity--undefined--100);
5374
5379
  --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300);
5375
5380
  --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200);
5376
5381
  --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300);
@@ -5455,15 +5460,14 @@ html .ws-preview {
5455
5460
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
5456
5461
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
5457
5462
  --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
5458
- --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
5459
5463
  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
5464
+ --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
5460
5465
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
5461
5466
  --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked);
5462
5467
  --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover);
5463
5468
  --pf-t--global--color--status--unread--default--default: var(--pf-t--global--color--brand--default);
5464
5469
  --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
5465
5470
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
5466
- --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
5467
5471
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
5468
5472
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
5469
5473
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -5560,7 +5564,7 @@ html .ws-preview {
5560
5564
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
5561
5565
  }
5562
5566
 
5563
- :root:where(.pf-v6-theme-dark) {
5567
+ :where(.pf-v6-theme-dark) {
5564
5568
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
5565
5569
  --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
5566
5570
  --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
@@ -5622,6 +5626,12 @@ html .ws-preview {
5622
5626
  --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--yellow--30);
5623
5627
  --pf-t--global--dark--color--status--success--200: var(--pf-t--color--green--30);
5624
5628
  --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40);
5629
+ --pf-t--global--dark--color--severity--critical--100: var(--pf-t--color--red-orange--50);
5630
+ --pf-t--global--dark--color--severity--important--100: var(--pf-t--color--orange--40);
5631
+ --pf-t--global--dark--color--severity--moderate--100: var(--pf-t--color--yellow--30);
5632
+ --pf-t--global--dark--color--severity--minor--100: var(--pf-t--color--gray--30);
5633
+ --pf-t--global--dark--color--severity--none--100: var(--pf-t--color--blue--30);
5634
+ --pf-t--global--dark--color--severity--undefined--100: var(--pf-t--color--gray--40);
5625
5635
  --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20);
5626
5636
  --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30);
5627
5637
  --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70);
@@ -5639,6 +5649,7 @@ html .ws-preview {
5639
5649
  --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--300);
5640
5650
  --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300);
5641
5651
  --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--250);
5652
+ --pf-t--global--text--color--on-highlight: var(--pf-t--global--dark--text--color--300);
5642
5653
  --pf-t--global--text--color--required: var(--pf-t--global--dark--text--color--400);
5643
5654
  --pf-t--global--text--color--brand--clicked: var(--pf-t--global--dark--color--brand--300);
5644
5655
  --pf-t--global--text--color--brand--hover: var(--pf-t--global--dark--color--brand--300);
@@ -5679,9 +5690,16 @@ html .ws-preview {
5679
5690
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
5680
5691
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
5681
5692
  --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200);
5693
+ --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200);
5682
5694
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
5683
5695
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
5684
5696
  --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
5697
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--dark--color--severity--critical--100);
5698
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--dark--color--severity--important--100);
5699
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--dark--color--severity--moderate--100);
5700
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--dark--color--severity--minor--100);
5701
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--dark--color--severity--none--100);
5702
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--dark--color--severity--undefined--100);
5685
5703
  --pf-t--global--icon--color--on-disabled: var(--pf-t--global--dark--color--disabled--300);
5686
5704
  --pf-t--global--icon--color--disabled: var(--pf-t--global--dark--color--disabled--200);
5687
5705
  --pf-t--global--icon--color--inverse: var(--pf-t--global--dark--icon--color--300);
@@ -5819,7 +5837,6 @@ html .ws-preview {
5819
5837
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
5820
5838
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
5821
5839
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
5822
- --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
5823
5840
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
5824
5841
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
5825
5842
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -5909,18 +5926,14 @@ html .ws-preview {
5909
5926
  --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
5910
5927
  --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
5911
5928
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
5912
- --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
5913
5929
  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
5930
+ --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
5914
5931
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
5915
5932
  --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked);
5916
5933
  --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover);
5917
5934
  --pf-t--global--color--status--unread--default--default: var(--pf-t--global--color--brand--default);
5918
5935
  }
5919
5936
 
5920
- :where(:root) {
5921
- --pf-v6-global--inverse--multiplier: 1;
5922
- }
5923
-
5924
5937
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) {
5925
5938
  --pf-v6-global--inverse--multiplier: -1;
5926
5939
  }
package/patternfly-base.css CHANGED
@@ -4931,11 +4931,8 @@ h6) {
4931
4931
  vertical-align: -0.125em;
4932
4932
  }
4933
4933
 
4934
- html .ws-preview {
4935
- background-color: var(--pf-t--global--background--color--primary--default);
4936
- }
4937
-
4938
- :root {
4934
+ :where(:root) {
4935
+ --pf-v6-global--inverse--multiplier: 1;
4939
4936
  --pf-t--global--font--family--100: redhattextvf, redhattext, helvetica, arial, sans-serif;
4940
4937
  --pf-t--global--font--family--200: redhatdisplayvf, redhatdisplay, helvetica, arial, sans-serif;
4941
4938
  --pf-t--global--font--family--300: redhatmonovf, redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
@@ -5065,9 +5062,6 @@ html .ws-preview {
5065
5062
  --pf-t--global--transition--timing-function: cubic-bezier(.645, .045, .355, 1);
5066
5063
  --pf-t--global--transition--duration: 250ms;
5067
5064
  --pf-t--global--list-style: disc outside;
5068
- }
5069
-
5070
- :root {
5071
5065
  --pf-t--color--red--70: #5f0000;
5072
5066
  --pf-t--color--red--60: #a60000;
5073
5067
  --pf-t--color--red--50: #e00;
@@ -5136,9 +5130,6 @@ html .ws-preview {
5136
5130
  --pf-t--color--gray--20: #e0e0e0;
5137
5131
  --pf-t--color--gray--10: #f2f2f2;
5138
5132
  --pf-t--color--white: #fff;
5139
- }
5140
-
5141
- :root {
5142
5133
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
5143
5134
  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
5144
5135
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
@@ -5233,6 +5224,12 @@ html .ws-preview {
5233
5224
  --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
5234
5225
  --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
5235
5226
  --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
5227
+ --pf-t--global--color--severity--critical--100: var(--pf-t--color--red-orange--60);
5228
+ --pf-t--global--color--severity--important--100: var(--pf-t--color--orange--50);
5229
+ --pf-t--global--color--severity--moderate--100: var(--pf-t--color--yellow--40);
5230
+ --pf-t--global--color--severity--minor--100: var(--pf-t--color--gray--50);
5231
+ --pf-t--global--color--severity--none--100: var(--pf-t--color--blue--40);
5232
+ --pf-t--global--color--severity--undefined--100: var(--pf-t--color--gray--30);
5236
5233
  --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
5237
5234
  --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
5238
5235
  --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
@@ -5301,12 +5298,12 @@ html .ws-preview {
5301
5298
  --pf-t--global--box-shadow--X--sm--bottom: var(--pf-t--global--box-shadow--X--400);
5302
5299
  --pf-t--global--box-shadow--X--sm--top: var(--pf-t--global--box-shadow--X--400);
5303
5300
  --pf-t--global--box-shadow--X--sm--default: var(--pf-t--global--box-shadow--X--400);
5304
- --pf-t--global--z-index--2xl: 600;
5305
- --pf-t--global--z-index--xl: 500;
5306
- --pf-t--global--z-index--lg: 400;
5307
- --pf-t--global--z-index--md: 300;
5308
- --pf-t--global--z-index--sm: 200;
5309
- --pf-t--global--z-index--xs: 100;
5301
+ --pf-t--global--z-index--2xl: var(--pf-t--global--z-index--600);
5302
+ --pf-t--global--z-index--xl: var(--pf-t--global--z-index--500);
5303
+ --pf-t--global--z-index--lg: var(--pf-t--global--z-index--400);
5304
+ --pf-t--global--z-index--md: var(--pf-t--global--z-index--300);
5305
+ --pf-t--global--z-index--sm: var(--pf-t--global--z-index--200);
5306
+ --pf-t--global--z-index--xs: var(--pf-t--global--z-index--100);
5310
5307
  --pf-t--global--font--size--4xl: var(--pf-t--global--font--size--800);
5311
5308
  --pf-t--global--font--size--3xl: var(--pf-t--global--font--size--700);
5312
5309
  --pf-t--global--font--size--2xl: var(--pf-t--global--font--size--600);
@@ -5373,6 +5370,7 @@ html .ws-preview {
5373
5370
  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
5374
5371
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
5375
5372
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
5373
+ --pf-t--global--text--color--on-highlight: var(--pf-t--global--text--color--100);
5376
5374
  --pf-t--global--text--color--required: var(--pf-t--global--text--color--400);
5377
5375
  --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300);
5378
5376
  --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
@@ -5482,12 +5480,19 @@ html .ws-preview {
5482
5480
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--300);
5483
5481
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--200);
5484
5482
  --pf-t--global--border--color--on-secondary: var(--pf-t--global--border--color--300);
5483
+ --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200);
5485
5484
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
5486
5485
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
5487
5486
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
5488
5487
  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
5489
5488
  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
5490
5489
  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
5490
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--color--severity--critical--100);
5491
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--color--severity--important--100);
5492
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--color--severity--moderate--100);
5493
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--color--severity--minor--100);
5494
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--color--severity--none--100);
5495
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--color--severity--undefined--100);
5491
5496
  --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300);
5492
5497
  --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200);
5493
5498
  --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300);
@@ -5572,15 +5577,14 @@ html .ws-preview {
5572
5577
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
5573
5578
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
5574
5579
  --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
5575
- --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
5576
5580
  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
5581
+ --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
5577
5582
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
5578
5583
  --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked);
5579
5584
  --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover);
5580
5585
  --pf-t--global--color--status--unread--default--default: var(--pf-t--global--color--brand--default);
5581
5586
  --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
5582
5587
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
5583
- --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
5584
5588
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
5585
5589
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
5586
5590
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -5677,7 +5681,7 @@ html .ws-preview {
5677
5681
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
5678
5682
  }
5679
5683
 
5680
- :root:where(.pf-v6-theme-dark) {
5684
+ :where(.pf-v6-theme-dark) {
5681
5685
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
5682
5686
  --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
5683
5687
  --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
@@ -5739,6 +5743,12 @@ html .ws-preview {
5739
5743
  --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--yellow--30);
5740
5744
  --pf-t--global--dark--color--status--success--200: var(--pf-t--color--green--30);
5741
5745
  --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40);
5746
+ --pf-t--global--dark--color--severity--critical--100: var(--pf-t--color--red-orange--50);
5747
+ --pf-t--global--dark--color--severity--important--100: var(--pf-t--color--orange--40);
5748
+ --pf-t--global--dark--color--severity--moderate--100: var(--pf-t--color--yellow--30);
5749
+ --pf-t--global--dark--color--severity--minor--100: var(--pf-t--color--gray--30);
5750
+ --pf-t--global--dark--color--severity--none--100: var(--pf-t--color--blue--30);
5751
+ --pf-t--global--dark--color--severity--undefined--100: var(--pf-t--color--gray--40);
5742
5752
  --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20);
5743
5753
  --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30);
5744
5754
  --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70);
@@ -5756,6 +5766,7 @@ html .ws-preview {
5756
5766
  --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--300);
5757
5767
  --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300);
5758
5768
  --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--250);
5769
+ --pf-t--global--text--color--on-highlight: var(--pf-t--global--dark--text--color--300);
5759
5770
  --pf-t--global--text--color--required: var(--pf-t--global--dark--text--color--400);
5760
5771
  --pf-t--global--text--color--brand--clicked: var(--pf-t--global--dark--color--brand--300);
5761
5772
  --pf-t--global--text--color--brand--hover: var(--pf-t--global--dark--color--brand--300);
@@ -5796,9 +5807,16 @@ html .ws-preview {
5796
5807
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
5797
5808
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
5798
5809
  --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200);
5810
+ --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200);
5799
5811
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
5800
5812
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
5801
5813
  --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
5814
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--dark--color--severity--critical--100);
5815
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--dark--color--severity--important--100);
5816
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--dark--color--severity--moderate--100);
5817
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--dark--color--severity--minor--100);
5818
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--dark--color--severity--none--100);
5819
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--dark--color--severity--undefined--100);
5802
5820
  --pf-t--global--icon--color--on-disabled: var(--pf-t--global--dark--color--disabled--300);
5803
5821
  --pf-t--global--icon--color--disabled: var(--pf-t--global--dark--color--disabled--200);
5804
5822
  --pf-t--global--icon--color--inverse: var(--pf-t--global--dark--icon--color--300);
@@ -5936,7 +5954,6 @@ html .ws-preview {
5936
5954
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
5937
5955
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
5938
5956
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
5939
- --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
5940
5957
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
5941
5958
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
5942
5959
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -6026,18 +6043,14 @@ html .ws-preview {
6026
6043
  --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
6027
6044
  --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
6028
6045
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
6029
- --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
6030
6046
  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
6047
+ --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
6031
6048
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
6032
6049
  --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked);
6033
6050
  --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover);
6034
6051
  --pf-t--global--color--status--unread--default--default: var(--pf-t--global--color--brand--default);
6035
6052
  }
6036
6053
 
6037
- :where(:root) {
6038
- --pf-v6-global--inverse--multiplier: 1;
6039
- }
6040
-
6041
6054
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) {
6042
6055
  --pf-v6-global--inverse--multiplier: -1;
6043
6056
  }