@patternfly/patternfly 6.0.0-alpha.77 → 6.0.0-alpha.78

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 (43) hide show
  1. package/base/patternfly-variables.css +26 -23
  2. package/base/tokens/_tokens-charts.scss +159 -0
  3. package/base/tokens/_tokens-dark.scss +7 -5
  4. package/base/tokens/_tokens-default.scss +27 -17
  5. package/base/tokens/_tokens-palette.scss +4 -4
  6. package/components/Button/button.css +2 -2
  7. package/components/Button/button.scss +2 -2
  8. package/components/FormControl/form-control.css +3 -3
  9. package/components/FormControl/form-control.scss +3 -3
  10. package/components/Icon/icon.css +27 -27
  11. package/components/Icon/icon.scss +27 -27
  12. package/components/Label/label-group.css +1 -1
  13. package/components/Label/label-group.scss +1 -1
  14. package/components/Label/label.css +2 -2
  15. package/components/Label/label.scss +2 -2
  16. package/components/MenuToggle/menu-toggle.css +4 -4
  17. package/components/MenuToggle/menu-toggle.scss +4 -4
  18. package/components/ProgressStepper/progress-stepper.css +2 -2
  19. package/components/ProgressStepper/progress-stepper.scss +2 -2
  20. package/components/Table/table-grid.css +29 -45
  21. package/components/Table/table-grid.scss +40 -53
  22. package/components/Table/table-scrollable.css +6 -6
  23. package/components/Table/table-scrollable.scss +8 -8
  24. package/components/Table/table-tree-view.css +76 -74
  25. package/components/Table/table-tree-view.scss +44 -39
  26. package/components/Table/table.css +54 -74
  27. package/components/Table/table.scss +68 -86
  28. package/components/Tile/tile.css +1 -1
  29. package/components/Tile/tile.scss +1 -1
  30. package/components/TreeView/tree-view.css +76 -97
  31. package/components/TreeView/tree-view.scss +82 -113
  32. package/docs/components/TreeView/examples/TreeView.md +7 -57
  33. package/package.json +1 -1
  34. package/patternfly-base-no-globals-theme-dark-unversioned.css +26 -23
  35. package/patternfly-base-no-globals.css +26 -23
  36. package/patternfly-base-theme-dark-unversioned.css +26 -23
  37. package/patternfly-base.css +26 -23
  38. package/patternfly-no-globals.css +309 -365
  39. package/patternfly-theme-dark-unversioned.css +309 -365
  40. package/patternfly.css +309 -365
  41. package/patternfly.min.css +1 -1
  42. package/patternfly.min.css.map +1 -1
  43. package/components/TreeView/themes/dark/tree-view.scss +0 -8
package/patternfly-base-no-globals.css CHANGED
@@ -336,10 +336,6 @@ html .ws-preview {
336
336
  --pf-t--global--box-shadow--lg: 0px 8px 24px 0px rgb(0 0 0 / 50%);
337
337
  }
338
338
 
339
- /**
340
- * Do not edit directly
341
- * Generated on Tue, 05 Dec 2023 16:11:05 GMT
342
- */
343
339
  :root {
344
340
  --pf-t--color--red--70: #5f0000;
345
341
  --pf-t--color--red--60: #a60000;
@@ -534,10 +530,10 @@ html .ws-preview {
534
530
  --pf-t--global--border--radius--small: var(--pf-t--global--border--radius--200);
535
531
  --pf-t--global--border--radius--tiny: var(--pf-t--global--border--radius--100);
536
532
  --pf-t--global--border--radius--sharp: var(--pf-t--global--border--radius--0);
537
- --pf-t--global--border--width--control--active: var(--pf-t--global--border--width--200);
533
+ --pf-t--global--border--width--control--clicked: var(--pf-t--global--border--width--200);
538
534
  --pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--100);
539
535
  --pf-t--global--border--width--control--default: var(--pf-t--global--border--width--100);
540
- --pf-t--global--border--width--button--active: var(--pf-t--global--border--width--200);
536
+ --pf-t--global--border--width--button--clicked: var(--pf-t--global--border--width--200);
541
537
  --pf-t--global--border--width--button--hover: var(--pf-t--global--border--width--200);
542
538
  --pf-t--global--border--width--button--default: var(--pf-t--global--border--width--100);
543
539
  --pf-t--global--border--width--box--status--read: var(--pf-t--global--border--width--100);
@@ -548,7 +544,7 @@ html .ws-preview {
548
544
  --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300);
549
545
  --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200);
550
546
  --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
551
- --pf-t--global--border--width--divider--active: var(--pf-t--global--border--width--100);
547
+ --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100);
552
548
  --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100);
553
549
  --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100);
554
550
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
@@ -693,7 +689,6 @@ html .ws-preview {
693
689
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
694
690
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
695
691
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
696
- --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
697
692
  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
698
693
  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
699
694
  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
@@ -705,6 +700,14 @@ html .ws-preview {
705
700
  --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
706
701
  --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
707
702
  --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
703
+ --pf-t--global--icon--size--font--4xl: var(--pf-t--global--font--size--4xl);
704
+ --pf-t--global--icon--size--font--3xl: var(--pf-t--global--font--size--3xl);
705
+ --pf-t--global--icon--size--font--2xl: var(--pf-t--global--font--size--2xl);
706
+ --pf-t--global--icon--size--font--xl: var(--pf-t--global--font--size--xl);
707
+ --pf-t--global--icon--size--font--lg: var(--pf-t--global--font--size--lg);
708
+ --pf-t--global--icon--size--font--md: var(--pf-t--global--font--size--md);
709
+ --pf-t--global--icon--size--font--sm: var(--pf-t--global--font--size--sm);
710
+ --pf-t--global--icon--size--font--xs: var(--pf-t--global--font--size--xs);
708
711
  --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
709
712
  --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
710
713
  --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
@@ -773,10 +776,12 @@ html .ws-preview {
773
776
  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
774
777
  --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
775
778
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
776
- --pf-t--global--color--status--unread--default--active: var(--pf-t--global--color--brand--clicked);
779
+ --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked);
777
780
  --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover);
778
781
  --pf-t--global--color--status--unread--default--default: var(--pf-t--global--color--brand--default);
779
782
  --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
783
+ --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
784
+ --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
780
785
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
781
786
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
782
787
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -861,22 +866,18 @@ html .ws-preview {
861
866
  --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
862
867
  --pf-t--global--icon--color--brand--hover: var(--pf-t--global--color--brand--hover);
863
868
  --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--default);
864
- --pf-t--global--icon--size--body--lg: var(--pf-t--global--font--size--body--lg);
865
- --pf-t--global--icon--size--body--default: var(--pf-t--global--font--size--body--default);
866
- --pf-t--global--icon--size--body--sm: var(--pf-t--global--font--size--body--sm);
867
- --pf-t--global--icon--size--heading--h6: var(--pf-t--global--font--size--heading--h6);
868
- --pf-t--global--icon--size--heading--h5: var(--pf-t--global--font--size--heading--h5);
869
- --pf-t--global--icon--size--heading--h4: var(--pf-t--global--font--size--heading--h4);
870
- --pf-t--global--icon--size--heading--h3: var(--pf-t--global--font--size--heading--h3);
871
- --pf-t--global--icon--size--heading--h2: var(--pf-t--global--font--size--heading--h2);
872
- --pf-t--global--icon--size--heading--h1: var(--pf-t--global--font--size--heading--h1);
869
+ --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg);
870
+ --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default);
871
+ --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm);
872
+ --pf-t--global--icon--size--font--heading--h6: var(--pf-t--global--font--size--heading--h6);
873
+ --pf-t--global--icon--size--font--heading--h5: var(--pf-t--global--font--size--heading--h5);
874
+ --pf-t--global--icon--size--font--heading--h4: var(--pf-t--global--font--size--heading--h4);
875
+ --pf-t--global--icon--size--font--heading--h3: var(--pf-t--global--font--size--heading--h3);
876
+ --pf-t--global--icon--size--font--heading--h2: var(--pf-t--global--font--size--heading--h2);
877
+ --pf-t--global--icon--size--font--heading--h1: var(--pf-t--global--font--size--heading--h1);
873
878
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
874
879
  }
875
880
 
876
- /**
877
- * Do not edit directly
878
- * Generated on Tue, 05 Dec 2023 16:11:05 GMT
879
- */
880
881
  :root:where(.pf-v5-theme-dark) {
881
882
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
882
883
  --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
@@ -1127,6 +1128,8 @@ html .ws-preview {
1127
1128
  --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
1128
1129
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
1129
1130
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
1131
+ --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
1132
+ --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
1130
1133
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
1131
1134
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
1132
1135
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -1219,7 +1222,7 @@ html .ws-preview {
1219
1222
  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
1220
1223
  --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
1221
1224
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
1222
- --pf-t--global--color--status--unread--default--active: var(--pf-t--global--color--brand--clicked);
1225
+ --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked);
1223
1226
  --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover);
1224
1227
  --pf-t--global--color--status--unread--default--default: var(--pf-t--global--color--brand--default);
1225
1228
  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--action--plain--hover);
package/patternfly-base-theme-dark-unversioned.css CHANGED
@@ -336,10 +336,6 @@ html .ws-preview {
336
336
  --pf-t--global--box-shadow--lg: 0px 8px 24px 0px rgb(0 0 0 / 50%);
337
337
  }
338
338
 
339
- /**
340
- * Do not edit directly
341
- * Generated on Tue, 05 Dec 2023 16:11:05 GMT
342
- */
343
339
  :root {
344
340
  --pf-t--color--red--70: #5f0000;
345
341
  --pf-t--color--red--60: #a60000;
@@ -534,10 +530,10 @@ html .ws-preview {
534
530
  --pf-t--global--border--radius--small: var(--pf-t--global--border--radius--200);
535
531
  --pf-t--global--border--radius--tiny: var(--pf-t--global--border--radius--100);
536
532
  --pf-t--global--border--radius--sharp: var(--pf-t--global--border--radius--0);
537
- --pf-t--global--border--width--control--active: var(--pf-t--global--border--width--200);
533
+ --pf-t--global--border--width--control--clicked: var(--pf-t--global--border--width--200);
538
534
  --pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--100);
539
535
  --pf-t--global--border--width--control--default: var(--pf-t--global--border--width--100);
540
- --pf-t--global--border--width--button--active: var(--pf-t--global--border--width--200);
536
+ --pf-t--global--border--width--button--clicked: var(--pf-t--global--border--width--200);
541
537
  --pf-t--global--border--width--button--hover: var(--pf-t--global--border--width--200);
542
538
  --pf-t--global--border--width--button--default: var(--pf-t--global--border--width--100);
543
539
  --pf-t--global--border--width--box--status--read: var(--pf-t--global--border--width--100);
@@ -548,7 +544,7 @@ html .ws-preview {
548
544
  --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300);
549
545
  --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200);
550
546
  --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
551
- --pf-t--global--border--width--divider--active: var(--pf-t--global--border--width--100);
547
+ --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100);
552
548
  --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100);
553
549
  --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100);
554
550
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
@@ -693,7 +689,6 @@ html .ws-preview {
693
689
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
694
690
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
695
691
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
696
- --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
697
692
  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
698
693
  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
699
694
  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
@@ -705,6 +700,14 @@ html .ws-preview {
705
700
  --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
706
701
  --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
707
702
  --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
703
+ --pf-t--global--icon--size--font--4xl: var(--pf-t--global--font--size--4xl);
704
+ --pf-t--global--icon--size--font--3xl: var(--pf-t--global--font--size--3xl);
705
+ --pf-t--global--icon--size--font--2xl: var(--pf-t--global--font--size--2xl);
706
+ --pf-t--global--icon--size--font--xl: var(--pf-t--global--font--size--xl);
707
+ --pf-t--global--icon--size--font--lg: var(--pf-t--global--font--size--lg);
708
+ --pf-t--global--icon--size--font--md: var(--pf-t--global--font--size--md);
709
+ --pf-t--global--icon--size--font--sm: var(--pf-t--global--font--size--sm);
710
+ --pf-t--global--icon--size--font--xs: var(--pf-t--global--font--size--xs);
708
711
  --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
709
712
  --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
710
713
  --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
@@ -773,10 +776,12 @@ html .ws-preview {
773
776
  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
774
777
  --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
775
778
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
776
- --pf-t--global--color--status--unread--default--active: var(--pf-t--global--color--brand--clicked);
779
+ --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked);
777
780
  --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover);
778
781
  --pf-t--global--color--status--unread--default--default: var(--pf-t--global--color--brand--default);
779
782
  --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
783
+ --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
784
+ --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
780
785
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
781
786
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
782
787
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -861,22 +866,18 @@ html .ws-preview {
861
866
  --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
862
867
  --pf-t--global--icon--color--brand--hover: var(--pf-t--global--color--brand--hover);
863
868
  --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--default);
864
- --pf-t--global--icon--size--body--lg: var(--pf-t--global--font--size--body--lg);
865
- --pf-t--global--icon--size--body--default: var(--pf-t--global--font--size--body--default);
866
- --pf-t--global--icon--size--body--sm: var(--pf-t--global--font--size--body--sm);
867
- --pf-t--global--icon--size--heading--h6: var(--pf-t--global--font--size--heading--h6);
868
- --pf-t--global--icon--size--heading--h5: var(--pf-t--global--font--size--heading--h5);
869
- --pf-t--global--icon--size--heading--h4: var(--pf-t--global--font--size--heading--h4);
870
- --pf-t--global--icon--size--heading--h3: var(--pf-t--global--font--size--heading--h3);
871
- --pf-t--global--icon--size--heading--h2: var(--pf-t--global--font--size--heading--h2);
872
- --pf-t--global--icon--size--heading--h1: var(--pf-t--global--font--size--heading--h1);
869
+ --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg);
870
+ --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default);
871
+ --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm);
872
+ --pf-t--global--icon--size--font--heading--h6: var(--pf-t--global--font--size--heading--h6);
873
+ --pf-t--global--icon--size--font--heading--h5: var(--pf-t--global--font--size--heading--h5);
874
+ --pf-t--global--icon--size--font--heading--h4: var(--pf-t--global--font--size--heading--h4);
875
+ --pf-t--global--icon--size--font--heading--h3: var(--pf-t--global--font--size--heading--h3);
876
+ --pf-t--global--icon--size--font--heading--h2: var(--pf-t--global--font--size--heading--h2);
877
+ --pf-t--global--icon--size--font--heading--h1: var(--pf-t--global--font--size--heading--h1);
873
878
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
874
879
  }
875
880
 
876
- /**
877
- * Do not edit directly
878
- * Generated on Tue, 05 Dec 2023 16:11:05 GMT
879
- */
880
881
  :root:where(.pf-v5-theme-dark) {
881
882
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
882
883
  --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
@@ -1127,6 +1128,8 @@ html .ws-preview {
1127
1128
  --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
1128
1129
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
1129
1130
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
1131
+ --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
1132
+ --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
1130
1133
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
1131
1134
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
1132
1135
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -1219,7 +1222,7 @@ html .ws-preview {
1219
1222
  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
1220
1223
  --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
1221
1224
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
1222
- --pf-t--global--color--status--unread--default--active: var(--pf-t--global--color--brand--clicked);
1225
+ --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked);
1223
1226
  --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover);
1224
1227
  --pf-t--global--color--status--unread--default--default: var(--pf-t--global--color--brand--default);
1225
1228
  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--action--plain--hover);
package/patternfly-base.css CHANGED
@@ -336,10 +336,6 @@ html .ws-preview {
336
336
  --pf-t--global--box-shadow--lg: 0px 8px 24px 0px rgb(0 0 0 / 50%);
337
337
  }
338
338
 
339
- /**
340
- * Do not edit directly
341
- * Generated on Tue, 05 Dec 2023 16:11:05 GMT
342
- */
343
339
  :root {
344
340
  --pf-t--color--red--70: #5f0000;
345
341
  --pf-t--color--red--60: #a60000;
@@ -534,10 +530,10 @@ html .ws-preview {
534
530
  --pf-t--global--border--radius--small: var(--pf-t--global--border--radius--200);
535
531
  --pf-t--global--border--radius--tiny: var(--pf-t--global--border--radius--100);
536
532
  --pf-t--global--border--radius--sharp: var(--pf-t--global--border--radius--0);
537
- --pf-t--global--border--width--control--active: var(--pf-t--global--border--width--200);
533
+ --pf-t--global--border--width--control--clicked: var(--pf-t--global--border--width--200);
538
534
  --pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--100);
539
535
  --pf-t--global--border--width--control--default: var(--pf-t--global--border--width--100);
540
- --pf-t--global--border--width--button--active: var(--pf-t--global--border--width--200);
536
+ --pf-t--global--border--width--button--clicked: var(--pf-t--global--border--width--200);
541
537
  --pf-t--global--border--width--button--hover: var(--pf-t--global--border--width--200);
542
538
  --pf-t--global--border--width--button--default: var(--pf-t--global--border--width--100);
543
539
  --pf-t--global--border--width--box--status--read: var(--pf-t--global--border--width--100);
@@ -548,7 +544,7 @@ html .ws-preview {
548
544
  --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300);
549
545
  --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200);
550
546
  --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100);
551
- --pf-t--global--border--width--divider--active: var(--pf-t--global--border--width--100);
547
+ --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100);
552
548
  --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100);
553
549
  --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100);
554
550
  --pf-t--global--icon--color--300: var(--pf-t--color--white);
@@ -693,7 +689,6 @@ html .ws-preview {
693
689
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
694
690
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
695
691
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
696
- --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
697
692
  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
698
693
  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
699
694
  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
@@ -705,6 +700,14 @@ html .ws-preview {
705
700
  --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
706
701
  --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
707
702
  --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
703
+ --pf-t--global--icon--size--font--4xl: var(--pf-t--global--font--size--4xl);
704
+ --pf-t--global--icon--size--font--3xl: var(--pf-t--global--font--size--3xl);
705
+ --pf-t--global--icon--size--font--2xl: var(--pf-t--global--font--size--2xl);
706
+ --pf-t--global--icon--size--font--xl: var(--pf-t--global--font--size--xl);
707
+ --pf-t--global--icon--size--font--lg: var(--pf-t--global--font--size--lg);
708
+ --pf-t--global--icon--size--font--md: var(--pf-t--global--font--size--md);
709
+ --pf-t--global--icon--size--font--sm: var(--pf-t--global--font--size--sm);
710
+ --pf-t--global--icon--size--font--xs: var(--pf-t--global--font--size--xs);
708
711
  --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
709
712
  --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
710
713
  --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
@@ -773,10 +776,12 @@ html .ws-preview {
773
776
  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
774
777
  --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
775
778
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
776
- --pf-t--global--color--status--unread--default--active: var(--pf-t--global--color--brand--clicked);
779
+ --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked);
777
780
  --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover);
778
781
  --pf-t--global--color--status--unread--default--default: var(--pf-t--global--color--brand--default);
779
782
  --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
783
+ --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
784
+ --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
780
785
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
781
786
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
782
787
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -861,22 +866,18 @@ html .ws-preview {
861
866
  --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
862
867
  --pf-t--global--icon--color--brand--hover: var(--pf-t--global--color--brand--hover);
863
868
  --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--default);
864
- --pf-t--global--icon--size--body--lg: var(--pf-t--global--font--size--body--lg);
865
- --pf-t--global--icon--size--body--default: var(--pf-t--global--font--size--body--default);
866
- --pf-t--global--icon--size--body--sm: var(--pf-t--global--font--size--body--sm);
867
- --pf-t--global--icon--size--heading--h6: var(--pf-t--global--font--size--heading--h6);
868
- --pf-t--global--icon--size--heading--h5: var(--pf-t--global--font--size--heading--h5);
869
- --pf-t--global--icon--size--heading--h4: var(--pf-t--global--font--size--heading--h4);
870
- --pf-t--global--icon--size--heading--h3: var(--pf-t--global--font--size--heading--h3);
871
- --pf-t--global--icon--size--heading--h2: var(--pf-t--global--font--size--heading--h2);
872
- --pf-t--global--icon--size--heading--h1: var(--pf-t--global--font--size--heading--h1);
869
+ --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg);
870
+ --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default);
871
+ --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm);
872
+ --pf-t--global--icon--size--font--heading--h6: var(--pf-t--global--font--size--heading--h6);
873
+ --pf-t--global--icon--size--font--heading--h5: var(--pf-t--global--font--size--heading--h5);
874
+ --pf-t--global--icon--size--font--heading--h4: var(--pf-t--global--font--size--heading--h4);
875
+ --pf-t--global--icon--size--font--heading--h3: var(--pf-t--global--font--size--heading--h3);
876
+ --pf-t--global--icon--size--font--heading--h2: var(--pf-t--global--font--size--heading--h2);
877
+ --pf-t--global--icon--size--font--heading--h1: var(--pf-t--global--font--size--heading--h1);
873
878
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
874
879
  }
875
880
 
876
- /**
877
- * Do not edit directly
878
- * Generated on Tue, 05 Dec 2023 16:11:05 GMT
879
- */
880
881
  :root:where(.pf-v5-theme-dark) {
881
882
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
882
883
  --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
@@ -1127,6 +1128,8 @@ html .ws-preview {
1127
1128
  --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
1128
1129
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
1129
1130
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
1131
+ --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
1132
+ --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
1130
1133
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
1131
1134
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
1132
1135
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -1219,7 +1222,7 @@ html .ws-preview {
1219
1222
  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
1220
1223
  --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
1221
1224
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
1222
- --pf-t--global--color--status--unread--default--active: var(--pf-t--global--color--brand--clicked);
1225
+ --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked);
1223
1226
  --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover);
1224
1227
  --pf-t--global--color--status--unread--default--default: var(--pf-t--global--color--brand--default);
1225
1228
  --pf-t--global--background--color--floating--clicked: var(--pf-t--global--background--color--action--plain--hover);