@patternfly/patternfly 6.0.0-alpha.103 → 6.0.0-alpha.105

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 (49) hide show
  1. package/base/patternfly-variables.css +22 -19
  2. package/base/tokens/_tokens-charts.scss +6 -6
  3. package/base/tokens/_tokens-dark.scss +4 -3
  4. package/base/tokens/_tokens-default.scss +20 -18
  5. package/base/tokens/_tokens-palette.scss +1 -1
  6. package/components/Drawer/drawer.css +5 -4
  7. package/components/Drawer/drawer.scss +7 -6
  8. package/components/FormControl/form-control.scss +1 -1
  9. package/components/MenuToggle/menu-toggle.css +24 -0
  10. package/components/MenuToggle/menu-toggle.scss +36 -0
  11. package/components/Page/page.css +24 -23
  12. package/components/Page/page.scss +24 -23
  13. package/docs/components/Drawer/examples/Drawer.md +2 -1
  14. package/docs/components/MenuToggle/examples/MenuToggle.md +64 -0
  15. package/docs/components/Page/deprecated/PageHeader.md +113 -99
  16. package/docs/components/Page/examples/Page.md +114 -100
  17. package/docs/demos/AboutModal/examples/AboutModal.md +81 -79
  18. package/docs/demos/Alert/examples/Alert.md +551 -524
  19. package/docs/demos/BackToTop/examples/BackToTop.md +211 -209
  20. package/docs/demos/Banner/examples/Banner.md +420 -412
  21. package/docs/demos/CardView/examples/CardView.md +1302 -1297
  22. package/docs/demos/ContextSelector/examples/ContextSelector.md +536 -523
  23. package/docs/demos/Dashboard/examples/Dashboard.md +1344 -1314
  24. package/docs/demos/DataList/examples/DataList.md +3006 -2958
  25. package/docs/demos/DescriptionList/examples/DescriptionList.md +532 -518
  26. package/docs/demos/Drawer/examples/Drawer.md +544 -528
  27. package/docs/demos/JumpLinks/examples/JumpLinks.md +915 -897
  28. package/docs/demos/Masthead/examples/Masthead.md +729 -711
  29. package/docs/demos/Modal/examples/Modal.md +486 -474
  30. package/docs/demos/Nav/examples/Nav.md +528 -510
  31. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +440 -435
  32. package/docs/demos/Page/examples/Page.md +1656 -1633
  33. package/docs/demos/Page/examples/Penta.md +632 -577
  34. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5222 -5080
  35. package/docs/demos/Skeleton/examples/Skeleton.md +177 -175
  36. package/docs/demos/Table/examples/Table.md +14137 -13972
  37. package/docs/demos/Tabs/examples/Tabs.md +2206 -2138
  38. package/docs/demos/Toolbar/examples/Toolbar.md +1322 -1269
  39. package/docs/demos/Wizard/examples/Wizard.md +1571 -1553
  40. package/package.json +1 -1
  41. package/patternfly-base-no-globals-theme-dark-unversioned.css +22 -19
  42. package/patternfly-base-no-globals.css +22 -19
  43. package/patternfly-base-theme-dark-unversioned.css +22 -19
  44. package/patternfly-base.css +22 -19
  45. package/patternfly-no-globals.css +75 -46
  46. package/patternfly-theme-dark-unversioned.css +75 -46
  47. package/patternfly.css +75 -46
  48. package/patternfly.min.css +1 -1
  49. package/patternfly.min.css.map +1 -1
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.103",
4
+ "version": "6.0.0-alpha.105",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base-no-globals-theme-dark-unversioned.css CHANGED
@@ -564,18 +564,18 @@ html .ws-preview {
564
564
  --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
565
565
  --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
566
566
  --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
567
- --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--60);
568
- --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--50);
567
+ --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
568
+ --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
569
569
  --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
570
570
  --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50);
571
571
  --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--70);
572
- --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--60);
573
- --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--50);
572
+ --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70);
573
+ --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60);
574
574
  --pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50);
575
575
  --pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40);
576
576
  --pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30);
577
- --pf-t--global--color--status--success--200: var(--pf-t--color--green--60);
578
- --pf-t--global--color--status--success--100: var(--pf-t--color--green--50);
577
+ --pf-t--global--color--status--success--200: var(--pf-t--color--green--70);
578
+ --pf-t--global--color--status--success--100: var(--pf-t--color--green--60);
579
579
  --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
580
580
  --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
581
581
  --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
@@ -646,6 +646,7 @@ html .ws-preview {
646
646
  --pf-t--global--font--size--md: var(--pf-t--global--font--size--300);
647
647
  --pf-t--global--font--size--sm: var(--pf-t--global--font--size--200);
648
648
  --pf-t--global--font--size--xs: var(--pf-t--global--font--size--100);
649
+ --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
649
650
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
650
651
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
651
652
  --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
@@ -694,9 +695,6 @@ html .ws-preview {
694
695
  --pf-t--global--spacer--md: var(--pf-t--global--spacer--300);
695
696
  --pf-t--global--spacer--sm: var(--pf-t--global--spacer--200);
696
697
  --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100);
697
- --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--300);
698
- --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--300);
699
- --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--200);
700
698
  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
701
699
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
702
700
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
@@ -808,6 +806,7 @@ html .ws-preview {
808
806
  --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--300);
809
807
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--300);
810
808
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--200);
809
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--border--color--300);
811
810
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
812
811
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
813
812
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
@@ -859,13 +858,13 @@ html .ws-preview {
859
858
  --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--regular);
860
859
  --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse);
861
860
  --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse);
862
- --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--regular);
861
+ --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse);
863
862
  --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse);
864
863
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
865
864
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
866
865
  --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse);
867
866
  --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse);
868
- --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--regular);
867
+ --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse);
869
868
  --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
870
869
  --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
871
870
  --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -877,13 +876,16 @@ html .ws-preview {
877
876
  --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
878
877
  --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
879
878
  --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse);
880
- --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--regular);
879
+ --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse);
880
+ --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
881
+ --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
882
+ --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
881
883
  --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--regular);
882
884
  --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--regular);
883
885
  --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--regular);
884
886
  --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse);
885
887
  --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse);
886
- --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--regular);
888
+ --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse);
887
889
  --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
888
890
  --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
889
891
  --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default);
@@ -948,13 +950,13 @@ html .ws-preview {
948
950
  --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular);
949
951
  --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse);
950
952
  --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse);
951
- --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--regular);
953
+ --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse);
952
954
  --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse);
953
955
  --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse);
954
956
  --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse);
955
957
  --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse);
956
958
  --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
957
- --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--regular);
959
+ --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
958
960
  --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
959
961
  --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
960
962
  --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -966,7 +968,7 @@ html .ws-preview {
966
968
  --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
967
969
  --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
968
970
  --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
969
- --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--regular);
971
+ --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
970
972
  --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
971
973
  --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
972
974
  --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
@@ -975,7 +977,7 @@ html .ws-preview {
975
977
  --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--regular);
976
978
  --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse);
977
979
  --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
978
- --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--regular);
980
+ --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
979
981
  --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
980
982
  --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
981
983
  --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default);
@@ -1050,8 +1052,8 @@ html .ws-preview {
1050
1052
  --pf-t--global--dark--color--nonstatus--red--300: var(--pf-t--color--red--10);
1051
1053
  --pf-t--global--dark--color--nonstatus--red--200: var(--pf-t--color--red--20);
1052
1054
  --pf-t--global--dark--color--nonstatus--red--100: var(--pf-t--color--red--30);
1053
- --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--20);
1054
- --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--30);
1055
+ --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--30);
1056
+ --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--40);
1055
1057
  --pf-t--global--dark--color--status--info--200: var(--pf-t--color--purple--20);
1056
1058
  --pf-t--global--dark--color--status--info--100: var(--pf-t--color--purple--30);
1057
1059
  --pf-t--global--dark--color--status--danger--300: var(--pf-t--color--red-orange--20);
@@ -1118,6 +1120,7 @@ html .ws-preview {
1118
1120
  --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200);
1119
1121
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
1120
1122
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
1123
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200);
1121
1124
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
1122
1125
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
1123
1126
  --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
package/patternfly-base-no-globals.css CHANGED
@@ -564,18 +564,18 @@ html .ws-preview {
564
564
  --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
565
565
  --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
566
566
  --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
567
- --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--60);
568
- --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--50);
567
+ --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
568
+ --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
569
569
  --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
570
570
  --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50);
571
571
  --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--70);
572
- --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--60);
573
- --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--50);
572
+ --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70);
573
+ --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60);
574
574
  --pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50);
575
575
  --pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40);
576
576
  --pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30);
577
- --pf-t--global--color--status--success--200: var(--pf-t--color--green--60);
578
- --pf-t--global--color--status--success--100: var(--pf-t--color--green--50);
577
+ --pf-t--global--color--status--success--200: var(--pf-t--color--green--70);
578
+ --pf-t--global--color--status--success--100: var(--pf-t--color--green--60);
579
579
  --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
580
580
  --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
581
581
  --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
@@ -646,6 +646,7 @@ html .ws-preview {
646
646
  --pf-t--global--font--size--md: var(--pf-t--global--font--size--300);
647
647
  --pf-t--global--font--size--sm: var(--pf-t--global--font--size--200);
648
648
  --pf-t--global--font--size--xs: var(--pf-t--global--font--size--100);
649
+ --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
649
650
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
650
651
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
651
652
  --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
@@ -694,9 +695,6 @@ html .ws-preview {
694
695
  --pf-t--global--spacer--md: var(--pf-t--global--spacer--300);
695
696
  --pf-t--global--spacer--sm: var(--pf-t--global--spacer--200);
696
697
  --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100);
697
- --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--300);
698
- --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--300);
699
- --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--200);
700
698
  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
701
699
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
702
700
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
@@ -808,6 +806,7 @@ html .ws-preview {
808
806
  --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--300);
809
807
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--300);
810
808
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--200);
809
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--border--color--300);
811
810
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
812
811
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
813
812
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
@@ -859,13 +858,13 @@ html .ws-preview {
859
858
  --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--regular);
860
859
  --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse);
861
860
  --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse);
862
- --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--regular);
861
+ --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse);
863
862
  --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse);
864
863
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
865
864
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
866
865
  --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse);
867
866
  --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse);
868
- --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--regular);
867
+ --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse);
869
868
  --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
870
869
  --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
871
870
  --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -877,13 +876,16 @@ html .ws-preview {
877
876
  --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
878
877
  --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
879
878
  --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse);
880
- --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--regular);
879
+ --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse);
880
+ --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
881
+ --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
882
+ --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
881
883
  --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--regular);
882
884
  --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--regular);
883
885
  --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--regular);
884
886
  --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse);
885
887
  --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse);
886
- --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--regular);
888
+ --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse);
887
889
  --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
888
890
  --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
889
891
  --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default);
@@ -948,13 +950,13 @@ html .ws-preview {
948
950
  --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular);
949
951
  --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse);
950
952
  --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse);
951
- --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--regular);
953
+ --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse);
952
954
  --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse);
953
955
  --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse);
954
956
  --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse);
955
957
  --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse);
956
958
  --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
957
- --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--regular);
959
+ --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
958
960
  --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
959
961
  --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
960
962
  --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -966,7 +968,7 @@ html .ws-preview {
966
968
  --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
967
969
  --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
968
970
  --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
969
- --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--regular);
971
+ --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
970
972
  --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
971
973
  --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
972
974
  --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
@@ -975,7 +977,7 @@ html .ws-preview {
975
977
  --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--regular);
976
978
  --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse);
977
979
  --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
978
- --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--regular);
980
+ --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
979
981
  --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
980
982
  --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
981
983
  --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default);
@@ -1050,8 +1052,8 @@ html .ws-preview {
1050
1052
  --pf-t--global--dark--color--nonstatus--red--300: var(--pf-t--color--red--10);
1051
1053
  --pf-t--global--dark--color--nonstatus--red--200: var(--pf-t--color--red--20);
1052
1054
  --pf-t--global--dark--color--nonstatus--red--100: var(--pf-t--color--red--30);
1053
- --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--20);
1054
- --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--30);
1055
+ --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--30);
1056
+ --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--40);
1055
1057
  --pf-t--global--dark--color--status--info--200: var(--pf-t--color--purple--20);
1056
1058
  --pf-t--global--dark--color--status--info--100: var(--pf-t--color--purple--30);
1057
1059
  --pf-t--global--dark--color--status--danger--300: var(--pf-t--color--red-orange--20);
@@ -1118,6 +1120,7 @@ html .ws-preview {
1118
1120
  --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200);
1119
1121
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
1120
1122
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
1123
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200);
1121
1124
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
1122
1125
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
1123
1126
  --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
package/patternfly-base-theme-dark-unversioned.css CHANGED
@@ -564,18 +564,18 @@ html .ws-preview {
564
564
  --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
565
565
  --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
566
566
  --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
567
- --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--60);
568
- --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--50);
567
+ --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
568
+ --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
569
569
  --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
570
570
  --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50);
571
571
  --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--70);
572
- --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--60);
573
- --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--50);
572
+ --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70);
573
+ --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60);
574
574
  --pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50);
575
575
  --pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40);
576
576
  --pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30);
577
- --pf-t--global--color--status--success--200: var(--pf-t--color--green--60);
578
- --pf-t--global--color--status--success--100: var(--pf-t--color--green--50);
577
+ --pf-t--global--color--status--success--200: var(--pf-t--color--green--70);
578
+ --pf-t--global--color--status--success--100: var(--pf-t--color--green--60);
579
579
  --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
580
580
  --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
581
581
  --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
@@ -646,6 +646,7 @@ html .ws-preview {
646
646
  --pf-t--global--font--size--md: var(--pf-t--global--font--size--300);
647
647
  --pf-t--global--font--size--sm: var(--pf-t--global--font--size--200);
648
648
  --pf-t--global--font--size--xs: var(--pf-t--global--font--size--100);
649
+ --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
649
650
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
650
651
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
651
652
  --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
@@ -694,9 +695,6 @@ html .ws-preview {
694
695
  --pf-t--global--spacer--md: var(--pf-t--global--spacer--300);
695
696
  --pf-t--global--spacer--sm: var(--pf-t--global--spacer--200);
696
697
  --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100);
697
- --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--300);
698
- --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--300);
699
- --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--200);
700
698
  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
701
699
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
702
700
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
@@ -808,6 +806,7 @@ html .ws-preview {
808
806
  --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--300);
809
807
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--300);
810
808
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--200);
809
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--border--color--300);
811
810
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
812
811
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
813
812
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
@@ -859,13 +858,13 @@ html .ws-preview {
859
858
  --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--regular);
860
859
  --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse);
861
860
  --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse);
862
- --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--regular);
861
+ --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse);
863
862
  --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse);
864
863
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
865
864
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
866
865
  --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse);
867
866
  --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse);
868
- --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--regular);
867
+ --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse);
869
868
  --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
870
869
  --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
871
870
  --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -877,13 +876,16 @@ html .ws-preview {
877
876
  --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
878
877
  --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
879
878
  --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse);
880
- --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--regular);
879
+ --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse);
880
+ --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
881
+ --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
882
+ --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
881
883
  --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--regular);
882
884
  --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--regular);
883
885
  --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--regular);
884
886
  --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse);
885
887
  --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse);
886
- --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--regular);
888
+ --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse);
887
889
  --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
888
890
  --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
889
891
  --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default);
@@ -948,13 +950,13 @@ html .ws-preview {
948
950
  --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular);
949
951
  --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse);
950
952
  --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse);
951
- --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--regular);
953
+ --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse);
952
954
  --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse);
953
955
  --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse);
954
956
  --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse);
955
957
  --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse);
956
958
  --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
957
- --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--regular);
959
+ --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
958
960
  --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
959
961
  --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
960
962
  --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -966,7 +968,7 @@ html .ws-preview {
966
968
  --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
967
969
  --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
968
970
  --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
969
- --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--regular);
971
+ --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
970
972
  --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
971
973
  --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
972
974
  --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
@@ -975,7 +977,7 @@ html .ws-preview {
975
977
  --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--regular);
976
978
  --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse);
977
979
  --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
978
- --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--regular);
980
+ --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
979
981
  --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
980
982
  --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
981
983
  --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default);
@@ -1050,8 +1052,8 @@ html .ws-preview {
1050
1052
  --pf-t--global--dark--color--nonstatus--red--300: var(--pf-t--color--red--10);
1051
1053
  --pf-t--global--dark--color--nonstatus--red--200: var(--pf-t--color--red--20);
1052
1054
  --pf-t--global--dark--color--nonstatus--red--100: var(--pf-t--color--red--30);
1053
- --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--20);
1054
- --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--30);
1055
+ --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--30);
1056
+ --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--40);
1055
1057
  --pf-t--global--dark--color--status--info--200: var(--pf-t--color--purple--20);
1056
1058
  --pf-t--global--dark--color--status--info--100: var(--pf-t--color--purple--30);
1057
1059
  --pf-t--global--dark--color--status--danger--300: var(--pf-t--color--red-orange--20);
@@ -1118,6 +1120,7 @@ html .ws-preview {
1118
1120
  --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200);
1119
1121
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
1120
1122
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
1123
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200);
1121
1124
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
1122
1125
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
1123
1126
  --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
package/patternfly-base.css CHANGED
@@ -564,18 +564,18 @@ html .ws-preview {
564
564
  --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
565
565
  --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
566
566
  --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
567
- --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--60);
568
- --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--50);
567
+ --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
568
+ --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
569
569
  --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
570
570
  --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50);
571
571
  --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--70);
572
- --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--60);
573
- --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--50);
572
+ --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70);
573
+ --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60);
574
574
  --pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50);
575
575
  --pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40);
576
576
  --pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30);
577
- --pf-t--global--color--status--success--200: var(--pf-t--color--green--60);
578
- --pf-t--global--color--status--success--100: var(--pf-t--color--green--50);
577
+ --pf-t--global--color--status--success--200: var(--pf-t--color--green--70);
578
+ --pf-t--global--color--status--success--100: var(--pf-t--color--green--60);
579
579
  --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
580
580
  --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
581
581
  --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60);
@@ -646,6 +646,7 @@ html .ws-preview {
646
646
  --pf-t--global--font--size--md: var(--pf-t--global--font--size--300);
647
647
  --pf-t--global--font--size--sm: var(--pf-t--global--font--size--200);
648
648
  --pf-t--global--font--size--xs: var(--pf-t--global--font--size--100);
649
+ --pf-t--global--border--color--300: var(--pf-t--color--gray--50);
649
650
  --pf-t--global--border--color--200: var(--pf-t--color--gray--40);
650
651
  --pf-t--global--border--color--100: var(--pf-t--color--gray--30);
651
652
  --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500);
@@ -694,9 +695,6 @@ html .ws-preview {
694
695
  --pf-t--global--spacer--md: var(--pf-t--global--spacer--300);
695
696
  --pf-t--global--spacer--sm: var(--pf-t--global--spacer--200);
696
697
  --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100);
697
- --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--300);
698
- --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--300);
699
- --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--200);
700
698
  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
701
699
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
702
700
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
@@ -808,6 +806,7 @@ html .ws-preview {
808
806
  --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--color--nonstatus--red--300);
809
807
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--300);
810
808
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--200);
809
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--border--color--300);
811
810
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
812
811
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
813
812
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
@@ -859,13 +858,13 @@ html .ws-preview {
859
858
  --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--regular);
860
859
  --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse);
861
860
  --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse);
862
- --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--regular);
861
+ --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse);
863
862
  --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse);
864
863
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
865
864
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
866
865
  --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse);
867
866
  --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse);
868
- --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--regular);
867
+ --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse);
869
868
  --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
870
869
  --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
871
870
  --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -877,13 +876,16 @@ html .ws-preview {
877
876
  --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default);
878
877
  --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
879
878
  --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse);
880
- --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--regular);
879
+ --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse);
880
+ --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
881
+ --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
882
+ --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
881
883
  --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--regular);
882
884
  --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--regular);
883
885
  --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--regular);
884
886
  --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse);
885
887
  --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse);
886
- --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--regular);
888
+ --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse);
887
889
  --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
888
890
  --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
889
891
  --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default);
@@ -948,13 +950,13 @@ html .ws-preview {
948
950
  --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular);
949
951
  --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse);
950
952
  --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse);
951
- --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--regular);
953
+ --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse);
952
954
  --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse);
953
955
  --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse);
954
956
  --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse);
955
957
  --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse);
956
958
  --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse);
957
- --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--regular);
959
+ --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse);
958
960
  --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
959
961
  --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
960
962
  --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -966,7 +968,7 @@ html .ws-preview {
966
968
  --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default);
967
969
  --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse);
968
970
  --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse);
969
- --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--regular);
971
+ --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse);
970
972
  --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked);
971
973
  --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover);
972
974
  --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--default);
@@ -975,7 +977,7 @@ html .ws-preview {
975
977
  --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--regular);
976
978
  --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse);
977
979
  --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse);
978
- --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--regular);
980
+ --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse);
979
981
  --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
980
982
  --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
981
983
  --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default);
@@ -1050,8 +1052,8 @@ html .ws-preview {
1050
1052
  --pf-t--global--dark--color--nonstatus--red--300: var(--pf-t--color--red--10);
1051
1053
  --pf-t--global--dark--color--nonstatus--red--200: var(--pf-t--color--red--20);
1052
1054
  --pf-t--global--dark--color--nonstatus--red--100: var(--pf-t--color--red--30);
1053
- --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--20);
1054
- --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--30);
1055
+ --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--30);
1056
+ --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--40);
1055
1057
  --pf-t--global--dark--color--status--info--200: var(--pf-t--color--purple--20);
1056
1058
  --pf-t--global--dark--color--status--info--100: var(--pf-t--color--purple--30);
1057
1059
  --pf-t--global--dark--color--status--danger--300: var(--pf-t--color--red-orange--20);
@@ -1118,6 +1120,7 @@ html .ws-preview {
1118
1120
  --pf-t--global--border--color--nonstatus--red--clicked: var(--pf-t--global--dark--color--nonstatus--red--200);
1119
1121
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
1120
1122
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
1123
+ --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200);
1121
1124
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
1122
1125
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
1123
1126
  --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);