@patternfly/patternfly 6.0.0-alpha.113 → 6.0.0-alpha.115

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 (105) hide show
  1. package/assets/images/pf_logo.svg +11 -11
  2. package/assets/images/pf_logo_white.svg +2 -2
  3. package/base/_chart-globals.scss +320 -320
  4. package/base/_fa-icons.scss +2 -2
  5. package/base/_fonts.scss +16 -16
  6. package/base/_globals.scss +4 -11
  7. package/base/_variables.scss +221 -221
  8. package/base/patternfly-globals.css +2 -6
  9. package/base/patternfly-variables.css +13 -9
  10. package/base/themes/dark/_chart-globals.scss +25 -25
  11. package/base/tokens/_tokens-font.scss +8 -0
  12. package/components/AboutModalBox/about-modal-box.css +1 -1
  13. package/components/AboutModalBox/about-modal-box.scss +1 -1
  14. package/components/Alert/alert-group.css +1 -1
  15. package/components/Alert/alert-group.scss +1 -1
  16. package/components/Alert/alert.css +1 -1
  17. package/components/Alert/alert.scss +1 -1
  18. package/components/AppLauncher/app-launcher.css +1 -1
  19. package/components/AppLauncher/app-launcher.scss +1 -1
  20. package/components/Banner/banner.css +1 -1
  21. package/components/Banner/banner.scss +1 -1
  22. package/components/Button/button.css +3 -3
  23. package/components/Button/button.scss +3 -3
  24. package/components/Card/card.css +1 -1
  25. package/components/Card/card.scss +1 -1
  26. package/components/Content/content.css +1 -1
  27. package/components/Content/content.scss +1 -1
  28. package/components/ContextSelector/context-selector.css +1 -1
  29. package/components/ContextSelector/context-selector.scss +1 -1
  30. package/components/Drawer/drawer.css +2 -2
  31. package/components/Drawer/drawer.scss +2 -2
  32. package/components/Dropdown/dropdown.css +2 -2
  33. package/components/Dropdown/dropdown.scss +2 -2
  34. package/components/DualListSelector/dual-list-selector.css +1 -1
  35. package/components/DualListSelector/dual-list-selector.scss +3 -3
  36. package/components/Form/form.css +1 -1
  37. package/components/Form/form.scss +1 -1
  38. package/components/JumpLinks/jump-links.css +1 -1
  39. package/components/JumpLinks/jump-links.scss +1 -1
  40. package/components/List/list.css +1 -1
  41. package/components/List/list.scss +1 -1
  42. package/components/Menu/menu.css +4 -4
  43. package/components/Menu/menu.scss +4 -4
  44. package/components/ModalBox/modal-box.css +1 -1
  45. package/components/ModalBox/modal-box.scss +1 -1
  46. package/components/Nav/nav.css +1 -1
  47. package/components/Nav/nav.scss +1 -1
  48. package/components/OptionsMenu/options-menu.css +1 -1
  49. package/components/OptionsMenu/options-menu.scss +1 -1
  50. package/components/Page/page.css +8 -8
  51. package/components/Page/page.scss +14 -14
  52. package/components/ProgressStepper/progress-stepper.css +1 -1
  53. package/components/ProgressStepper/progress-stepper.scss +1 -1
  54. package/components/Select/select.css +1 -1
  55. package/components/Select/select.scss +1 -1
  56. package/components/Sidebar/sidebar.css +1 -1
  57. package/components/Sidebar/sidebar.scss +1 -1
  58. package/components/SkipToContent/skip-to-content.css +1 -1
  59. package/components/SkipToContent/skip-to-content.scss +1 -1
  60. package/components/Table/table.css +1 -1
  61. package/components/Table/table.scss +1 -1
  62. package/components/Toolbar/toolbar.css +1 -1
  63. package/components/Toolbar/toolbar.scss +1 -1
  64. package/components/TreeView/tree-view.scss +2 -2
  65. package/components/Wizard/wizard.css +1 -1
  66. package/components/Wizard/wizard.scss +1 -1
  67. package/docs/components/NotificationBadge/examples/NotificationBadge.md +18 -18
  68. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
  69. package/docs/components/Table/examples/Table.md +2 -2
  70. package/docs/components/Tabs/examples/Tabs.md +102 -102
  71. package/docs/demos/Card/examples/Card.md +160 -135
  72. package/docs/demos/Dashboard/examples/Dashboard.md +8 -8
  73. package/docs/demos/DescriptionList/examples/DescriptionList.md +5 -5
  74. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
  75. package/docs/demos/Table/examples/Table.md +2 -2
  76. package/docs/demos/Toolbar/examples/Toolbar.css +3 -3
  77. package/docs/utilities/Text/examples/Text.md +0 -1
  78. package/package.json +1 -1
  79. package/patternfly-base-no-globals-theme-dark-unversioned.css +13 -69
  80. package/patternfly-base-no-globals-theme-dark-unversioned.scss +2 -2
  81. package/patternfly-base-no-globals.css +13 -69
  82. package/patternfly-base-no-globals.scss +2 -2
  83. package/patternfly-base-theme-dark-unversioned.css +15 -71
  84. package/patternfly-base.css +15 -71
  85. package/patternfly-base.scss +0 -1
  86. package/patternfly-charts.scss +319 -319
  87. package/patternfly-no-globals.css +60 -89
  88. package/patternfly-no-globals.scss +2 -2
  89. package/patternfly-theme-dark-unversioned.css +84 -113
  90. package/patternfly-theme-dark-unversioned.scss +1 -1
  91. package/patternfly.css +62 -91
  92. package/patternfly.min.css +1 -1
  93. package/patternfly.min.css.map +1 -1
  94. package/sass-utilities/_init.scss +3 -3
  95. package/sass-utilities/colors.scss +81 -81
  96. package/sass-utilities/functions.scss +2 -2
  97. package/sass-utilities/mixins.scss +1 -1
  98. package/sass-utilities/scss-variables.scss +149 -149
  99. package/sass-utilities/themes/dark/colors.scss +15 -15
  100. package/sass-utilities/themes/dark/scss-variables.scss +74 -74
  101. package/themes/dark/_patternfly-charts-theme-dark.scss +25 -25
  102. package/base/_themes.scss +0 -43
  103. package/base/patternfly-themes.css +0 -82
  104. package/base/patternfly-themes.scss +0 -2
  105. package/base/themes/dark/_globals.scss +0 -5
package/docs/demos/Card/examples/Card.md CHANGED
@@ -545,10 +545,11 @@ wrapperTag: div
545
545
  <h2 class="pf-v6-c-card__title-text">5 Clusters</h2>
546
546
  </div>
547
547
  <div class="pf-v6-c-card__body">
548
- <i
549
- class="fas fa-check-circle pf-v6-u-success-color-100"
550
- aria-hidden="true"
551
- ></i>
548
+ <span class="pf-v6-c-icon">
549
+ <span class="pf-v6-c-icon__content pf-m-success">
550
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
551
+ </span>
552
+ </span>
552
553
  </div>
553
554
  </div>
554
555
  <div class="pf-v6-c-card pf-v6-u-text-align-center">
@@ -556,10 +557,11 @@ wrapperTag: div
556
557
  <h2 class="pf-v6-c-card__title-text">15 Clusters</h2>
557
558
  </div>
558
559
  <div class="pf-v6-c-card__body">
559
- <i
560
- class="fas fa-exclamation-triangle pf-v6-u-warning-color-100"
561
- aria-hidden="true"
562
- ></i>
560
+ <span class="pf-v6-c-icon">
561
+ <span class="pf-v6-c-icon__content pf-m-warning">
562
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
563
+ </span>
564
+ </span>
563
565
  </div>
564
566
  </div>
565
567
  <div class="pf-v6-c-card pf-v6-u-text-align-center">
@@ -567,10 +569,11 @@ wrapperTag: div
567
569
  <h2 class="pf-v6-c-card__title-text">3 Clusters</h2>
568
570
  </div>
569
571
  <div class="pf-v6-c-card__body">
570
- <i
571
- class="fas fa-times-circle pf-v6-u-danger-color-100"
572
- aria-hidden="true"
573
- ></i>
572
+ <span class="pf-v6-c-icon">
573
+ <span class="pf-v6-c-icon__content pf-m-danger">
574
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
575
+ </span>
576
+ </span>
574
577
  </div>
575
578
  </div>
576
579
  </div>
@@ -585,10 +588,11 @@ wrapperTag: div
585
588
  <div class="pf-v6-l-flex pf-m-inline-flex pf-m-space-items-md">
586
589
  <div class="pf-v6-l-flex pf-m-space-items-sm">
587
590
  <div class="pf-v6-l-flex__item">
588
- <i
589
- class="fas fa-exclamation-circle pf-v6-u-success-color-100"
590
- aria-hidden="true"
591
- ></i>
591
+ <span class="pf-v6-c-icon">
592
+ <span class="pf-v6-c-icon__content pf-m-success">
593
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
594
+ </span>
595
+ </span>
592
596
  </div>
593
597
  <div class="pf-v6-l-flex__item">
594
598
  <a href="#">2</a>
@@ -597,10 +601,11 @@ wrapperTag: div
597
601
  <hr class="pf-v6-c-divider pf-m-vertical" />
598
602
  <div class="pf-v6-l-flex pf-m-space-items-sm">
599
603
  <div class="pf-v6-l-flex__item">
600
- <i
601
- class="fas fa-exclamation-triangle pf-v6-u-warning-color-100"
602
- aria-hidden="true"
603
- ></i>
604
+ <span class="pf-v6-c-icon">
605
+ <span class="pf-v6-c-icon__content pf-m-warning">
606
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
607
+ </span>
608
+ </span>
604
609
  </div>
605
610
  <div class="pf-v6-l-flex__item">
606
611
  <a href="#">1</a>
@@ -617,10 +622,11 @@ wrapperTag: div
617
622
  <div class="pf-v6-l-flex pf-m-inline-flex pf-m-space-items-md">
618
623
  <div class="pf-v6-l-flex pf-m-space-items-sm">
619
624
  <div class="pf-v6-l-flex__item">
620
- <i
621
- class="fas fa-check-circle pf-v6-u-success-color-100"
622
- aria-hidden="true"
623
- ></i>
625
+ <span class="pf-v6-c-icon">
626
+ <span class="pf-v6-c-icon__content pf-m-success">
627
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
628
+ </span>
629
+ </span>
624
630
  </div>
625
631
  <div class="pf-v6-l-flex__item">
626
632
  <a href="#">5</a>
@@ -629,10 +635,11 @@ wrapperTag: div
629
635
  <hr class="pf-v6-c-divider pf-m-vertical" />
630
636
  <div class="pf-v6-l-flex pf-m-space-items-sm">
631
637
  <div class="pf-v6-l-flex__item">
632
- <i
633
- class="fas fa-times-circle pf-v6-u-danger-color-100"
634
- aria-hidden="true"
635
- ></i>
638
+ <span class="pf-v6-c-icon">
639
+ <span class="pf-v6-c-icon__content pf-m-danger">
640
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
641
+ </span>
642
+ </span>
636
643
  </div>
637
644
  <div class="pf-v6-l-flex__item">
638
645
  <a href="#">12</a>
@@ -649,10 +656,11 @@ wrapperTag: div
649
656
  <div class="pf-v6-l-flex pf-m-inline-flex pf-m-space-items-md">
650
657
  <div class="pf-v6-l-flex pf-m-space-items-sm">
651
658
  <div class="pf-v6-l-flex__item">
652
- <i
653
- class="fas fa-exclamation-triangle pf-v6-u-warning-color-100"
654
- aria-hidden="true"
655
- ></i>
659
+ <span class="pf-v6-c-icon">
660
+ <span class="pf-v6-c-icon__content pf-m-warning">
661
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
662
+ </span>
663
+ </span>
656
664
  </div>
657
665
  <div class="pf-v6-l-flex__item">
658
666
  <a href="#">2</a>
@@ -661,10 +669,11 @@ wrapperTag: div
661
669
  <hr class="pf-v6-c-divider pf-m-vertical" />
662
670
  <div class="pf-v6-l-flex pf-m-space-items-sm">
663
671
  <div class="pf-v6-l-flex__item">
664
- <i
665
- class="fas fa-times-circle pf-v6-u-danger-color-100"
666
- aria-hidden="true"
667
- ></i>
672
+ <span class="pf-v6-c-icon">
673
+ <span class="pf-v6-c-icon__content pf-m-danger">
674
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
675
+ </span>
676
+ </span>
668
677
  </div>
669
678
  <div class="pf-v6-l-flex__item">
670
679
  <a href="#">7</a>
@@ -692,10 +701,11 @@ wrapperTag: div
692
701
  >
693
702
  <div class="pf-v6-l-flex pf-m-space-items-sm">
694
703
  <div class="pf-v6-l-flex__item">
695
- <i
696
- class="fas fa-times-circle pf-v6-u-danger-color-100"
697
- aria-hidden="true"
698
- ></i>
704
+ <span class="pf-v6-c-icon">
705
+ <span class="pf-v6-c-icon__content pf-m-danger">
706
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
707
+ </span>
708
+ </span>
699
709
  </div>
700
710
  <div class="pf-v6-l-stack">
701
711
  <a href="#">2 errors</a>
@@ -704,10 +714,11 @@ wrapperTag: div
704
714
  </div>
705
715
  <div class="pf-v6-l-flex pf-m-space-items-sm">
706
716
  <div class="pf-v6-l-flex__item">
707
- <i
708
- class="fas fa-exclamation-triangle pf-v6-u-warning-color-100"
709
- aria-hidden="true"
710
- ></i>
717
+ <span class="pf-v6-c-icon">
718
+ <span class="pf-v6-c-icon__content pf-m-warning">
719
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
720
+ </span>
721
+ </span>
711
722
  </div>
712
723
  <div class="pf-v6-l-stack">
713
724
  <a href="#">1 warnings</a>
@@ -727,10 +738,11 @@ wrapperTag: div
727
738
  >
728
739
  <div class="pf-v6-l-flex pf-m-space-items-sm">
729
740
  <div class="pf-v6-l-flex__item">
730
- <i
731
- class="fas fa-check-circle pf-v6-u-success-color-100"
732
- aria-hidden="true"
733
- ></i>
741
+ <span class="pf-v6-c-icon">
742
+ <span class="pf-v6-c-icon__content pf-m-success">
743
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
744
+ </span>
745
+ </span>
734
746
  </div>
735
747
  <div class="pf-v6-l-stack">
736
748
  <a href="#">2 successes</a>
@@ -739,10 +751,11 @@ wrapperTag: div
739
751
  </div>
740
752
  <div class="pf-v6-l-flex pf-m-space-items-sm">
741
753
  <div class="pf-v6-l-flex__item">
742
- <i
743
- class="fas fa-exclamation-triangle pf-v6-u-warning-color-100"
744
- aria-hidden="true"
745
- ></i>
754
+ <span class="pf-v6-c-icon">
755
+ <span class="pf-v6-c-icon__content pf-m-warning">
756
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
757
+ </span>
758
+ </span>
746
759
  </div>
747
760
  <div class="pf-v6-l-stack">
748
761
  <a href="#">3 warnings</a>
@@ -762,10 +775,11 @@ wrapperTag: div
762
775
  >
763
776
  <div class="pf-v6-l-flex pf-m-space-items-sm">
764
777
  <div class="pf-v6-l-flex__item">
765
- <i
766
- class="fas fa-exclamation-triangle pf-v6-u-warning-color-100"
767
- aria-hidden="true"
768
- ></i>
778
+ <span class="pf-v6-c-icon">
779
+ <span class="pf-v6-c-icon__content pf-m-warning">
780
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
781
+ </span>
782
+ </span>
769
783
  </div>
770
784
  <div class="pf-v6-l-stack">
771
785
  <a href="#">7 warnings</a>
@@ -774,10 +788,11 @@ wrapperTag: div
774
788
  </div>
775
789
  <div class="pf-v6-l-flex pf-m-space-items-sm">
776
790
  <div class="pf-v6-l-flex__item">
777
- <i
778
- class="fas fa-times-circle pf-v6-u-danger-color-100"
779
- aria-hidden="true"
780
- ></i>
791
+ <span class="pf-v6-c-icon">
792
+ <span class="pf-v6-c-icon__content pf-m-danger">
793
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
794
+ </span>
795
+ </span>
781
796
  </div>
782
797
  <div class="pf-v6-l-stack">
783
798
  <a href="#">1 error</a>
@@ -1142,9 +1157,7 @@ wrapperTag: div
1142
1157
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1143
1158
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1144
1159
  </span>
1145
- <h2
1146
- class="pf-v6-c-notification-drawer__list-item-header-title pf-v6-u-danger-color-200"
1147
- >
1160
+ <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1148
1161
  <span class="pf-v6-screen-reader">Danger notification:</span>
1149
1162
  Critical alert regarding control plane
1150
1163
  </h2>
@@ -1161,9 +1174,7 @@ wrapperTag: div
1161
1174
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1162
1175
  <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1163
1176
  </span>
1164
- <h2
1165
- class="pf-v6-c-notification-drawer__list-item-header-title pf-v6-u-warning-color-200"
1166
- >
1177
+ <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1167
1178
  <span class="pf-v6-screen-reader">Warning notification:</span>
1168
1179
  Warning alert
1169
1180
  </h2>
@@ -1335,9 +1346,7 @@ wrapperTag: div
1335
1346
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1336
1347
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1337
1348
  </span>
1338
- <h2
1339
- class="pf-v6-c-notification-drawer__list-item-header-title pf-v6-u-danger-color-200"
1340
- >
1349
+ <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1341
1350
  <span class="pf-v6-screen-reader">Danger notification:</span>
1342
1351
  Critical alert regarding control plane
1343
1352
  </h2>
@@ -1354,9 +1363,7 @@ wrapperTag: div
1354
1363
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1355
1364
  <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1356
1365
  </span>
1357
- <h2
1358
- class="pf-v6-c-notification-drawer__list-item-header-title pf-v6-u-warning-color-200"
1359
- >
1366
+ <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1360
1367
  <span class="pf-v6-screen-reader">Warning notification:</span>
1361
1368
  Warning alert
1362
1369
  </h2>
@@ -1826,9 +1833,7 @@ wrapperTag: div
1826
1833
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1827
1834
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1828
1835
  </span>
1829
- <h2
1830
- class="pf-v6-c-notification-drawer__list-item-header-title pf-v6-u-danger-color-200"
1831
- >
1836
+ <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1832
1837
  <span class="pf-v6-screen-reader">Danger notification:</span>
1833
1838
  Critical alert regarding control plane
1834
1839
  </h2>
@@ -1845,9 +1850,7 @@ wrapperTag: div
1845
1850
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1846
1851
  <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1847
1852
  </span>
1848
- <h2
1849
- class="pf-v6-c-notification-drawer__list-item-header-title pf-v6-u-warning-color-200"
1850
- >
1853
+ <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1851
1854
  <span class="pf-v6-screen-reader">Warning notification:</span>
1852
1855
  Warning alert
1853
1856
  </h2>
@@ -2032,10 +2035,11 @@ wrapperTag: div
2032
2035
  <div class="pf-v6-l-flex pf-m-column">
2033
2036
  <span>System</span>
2034
2037
  <div class="pf-v6-l-flex pf-m-space-items-sm">
2035
- <i
2036
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
2037
- aria-hidden="true"
2038
- ></i>
2038
+ <span class="pf-v6-c-icon">
2039
+ <span class="pf-v6-c-icon__content pf-m-danger">
2040
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
2041
+ </span>
2042
+ </span>
2039
2043
  <a hfer="#">25 incidents detected</a>
2040
2044
  </div>
2041
2045
  <div class="ws-chart">
@@ -2112,7 +2116,7 @@ wrapperTag: div
2112
2116
  class="pf-v6-c-card__title"
2113
2117
  id="nested-cards-toggle-right-example-group-1-title"
2114
2118
  >
2115
- <h2 class="pf-v6-c-card__title-text pf-v6-u-font-weight-light">CPU 1</h2>
2119
+ <h2 class="pf-v6-c-card__title-text">CPU 1</h2>
2116
2120
  </div>
2117
2121
  </div>
2118
2122
  </div>
@@ -2223,7 +2227,7 @@ wrapperTag: div
2223
2227
  class="pf-v6-c-card__title"
2224
2228
  id="nested-cards-toggle-right-example-group-2-title"
2225
2229
  >
2226
- <h2 class="pf-v6-c-card__title-text pf-v6-u-font-weight-light">CPU 2</h2>
2230
+ <h2 class="pf-v6-c-card__title-text">CPU 2</h2>
2227
2231
  </div>
2228
2232
  </div>
2229
2233
  </div>
@@ -2251,7 +2255,7 @@ wrapperTag: div
2251
2255
  class="pf-v6-c-card__title"
2252
2256
  id="nested-cards-toggle-right-example-group-3-title&quot;"
2253
2257
  >
2254
- <h2 class="pf-v6-c-card__title-text pf-v6-u-font-weight-light">CPU 3</h2>
2258
+ <h2 class="pf-v6-c-card__title-text">CPU 3</h2>
2255
2259
  </div>
2256
2260
  </div>
2257
2261
  </div>
@@ -2294,7 +2298,7 @@ wrapperTag: div
2294
2298
  class="pf-v6-c-card__title"
2295
2299
  id="nested-cards-example-group-1-title"
2296
2300
  >
2297
- <h2 class="pf-v6-c-card__title-text pf-v6-u-font-weight-light">CPU 1</h2>
2301
+ <h2 class="pf-v6-c-card__title-text">CPU 1</h2>
2298
2302
  </div>
2299
2303
  </div>
2300
2304
  </div>
@@ -2402,7 +2406,7 @@ wrapperTag: div
2402
2406
  class="pf-v6-c-card__title"
2403
2407
  id="nested-cards-example-group-2-title"
2404
2408
  >
2405
- <h2 class="pf-v6-c-card__title-text pf-v6-u-font-weight-light">CPU 2</h2>
2409
+ <h2 class="pf-v6-c-card__title-text">CPU 2</h2>
2406
2410
  </div>
2407
2411
  </div>
2408
2412
  </div>
@@ -2427,7 +2431,7 @@ wrapperTag: div
2427
2431
  class="pf-v6-c-card__title"
2428
2432
  id="nested-cards-example-group-3-title"
2429
2433
  >
2430
- <h2 class="pf-v6-c-card__title-text pf-v6-u-font-weight-light">CPU 3</h2>
2434
+ <h2 class="pf-v6-c-card__title-text">CPU 3</h2>
2431
2435
  </div>
2432
2436
  </div>
2433
2437
  </div>
@@ -2455,9 +2459,7 @@ wrapperTag: div
2455
2459
  type="button"
2456
2460
  aria-expanded="true"
2457
2461
  >
2458
- <span class="pf-v6-c-accordion__toggle-text">
2459
- <span class="pf-v6-u-font-weight-light">CPU 1</span>
2460
- </span>
2462
+ <span class="pf-v6-c-accordion__toggle-text">CPU 1</span>
2461
2463
  <span class="pf-v6-c-accordion__toggle-icon">
2462
2464
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2463
2465
  </span>
@@ -2553,9 +2555,7 @@ wrapperTag: div
2553
2555
  type="button"
2554
2556
  aria-expanded="false"
2555
2557
  >
2556
- <span class="pf-v6-c-accordion__toggle-text">
2557
- <span class="pf-v6-u-font-weight-light">CPU 2</span>
2558
- </span>
2558
+ <span class="pf-v6-c-accordion__toggle-text">CPU 2</span>
2559
2559
  <span class="pf-v6-c-accordion__toggle-icon">
2560
2560
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2561
2561
  </span>
@@ -2649,9 +2649,7 @@ wrapperTag: div
2649
2649
  type="button"
2650
2650
  aria-expanded="false"
2651
2651
  >
2652
- <span class="pf-v6-c-accordion__toggle-text">
2653
- <span class="pf-v6-u-font-weight-light">CPU 3</span>
2654
- </span>
2652
+ <span class="pf-v6-c-accordion__toggle-text">CPU 3</span>
2655
2653
  <span class="pf-v6-c-accordion__toggle-icon">
2656
2654
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2657
2655
  </span>
@@ -2761,7 +2759,7 @@ wrapperTag: div
2761
2759
  <div class="pf-v6-c-card__title" id="trend-card-1-example-title">
2762
2760
  <h1 class="pf-v6-c-title pf-m-2xl">1,050,765 IOPS</h1>
2763
2761
  </div>
2764
- <span class="pf-v6-u-color-200">Workload</span>
2762
+ <span>Workload</span>
2765
2763
  </div>
2766
2764
  <div
2767
2765
  class="pf-v6-c-card__actions pf-m-no-offset"
@@ -2852,7 +2850,7 @@ wrapperTag: div
2852
2850
  <div class="pf-v6-c-card__title" id="trend-card-2-example-title">
2853
2851
  <h1 class="pf-v6-c-title pf-m-2xl">842 TB</h1>
2854
2852
  </div>
2855
- <span class="pf-v6-u-color-200">Storage capacity</span>
2853
+ <span>Storage capacity</span>
2856
2854
  </div>
2857
2855
  </div>
2858
2856
  <div class="pf-v6-l-flex__item pf-m-flex-1">
@@ -2967,9 +2965,12 @@ wrapperTag: div
2967
2965
  </dd>
2968
2966
  <dd class="pf-v6-c-description-list__description">
2969
2967
  <div class="pf-v6-c-description-list__text">
2970
- <time
2971
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
2972
- >Jun 17, 11:02 am</time>
2968
+ <span class="pf-v6-c-timestamp">
2969
+ <time
2970
+ class="pf-v6-c-timestamp__text"
2971
+ datetime="2019-01-21T21:38"
2972
+ >Thursday, 21 January 2019, 9:38 PM EST</time>
2973
+ </span>
2973
2974
  </div>
2974
2975
  </dd>
2975
2976
  </div>
@@ -2982,9 +2983,12 @@ wrapperTag: div
2982
2983
  </dd>
2983
2984
  <dd class="pf-v6-c-description-list__description">
2984
2985
  <div class="pf-v6-c-description-list__text">
2985
- <time
2986
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
2987
- >Jun 17, 11:13 am</time>
2986
+ <span class="pf-v6-c-timestamp">
2987
+ <time
2988
+ class="pf-v6-c-timestamp__text"
2989
+ datetime="2019-01-21T21:34"
2990
+ >Thursday, 21 January 2019, 9:34 PM EST</time>
2991
+ </span>
2988
2992
  </div>
2989
2993
  </dd>
2990
2994
  </div>
@@ -2997,9 +3001,12 @@ wrapperTag: div
2997
3001
  </dd>
2998
3002
  <dd class="pf-v6-c-description-list__description">
2999
3003
  <div class="pf-v6-c-description-list__text">
3000
- <time
3001
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
3002
- >Jun 17, 10:59 am</time>
3004
+ <span class="pf-v6-c-timestamp">
3005
+ <time
3006
+ class="pf-v6-c-timestamp__text"
3007
+ datetime="2019-01-20T21:14"
3008
+ >Thursday, 21 January 2019, 8:14 PM EST</time>
3009
+ </span>
3003
3010
  </div>
3004
3011
  </dd>
3005
3012
  </div>
@@ -3012,9 +3019,12 @@ wrapperTag: div
3012
3019
  </dd>
3013
3020
  <dd class="pf-v6-c-description-list__description">
3014
3021
  <div class="pf-v6-c-description-list__text">
3015
- <time
3016
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
3017
- >Jun 17, 10:45 am</time>
3022
+ <span class="pf-v6-c-timestamp">
3023
+ <time
3024
+ class="pf-v6-c-timestamp__text"
3025
+ datetime="2019-01-21T19:18"
3026
+ >Thursday, 21 January 2019, 7:18 PM EST</time>
3027
+ </span>
3018
3028
  </div>
3019
3029
  </dd>
3020
3030
  </div>
@@ -3117,10 +3127,11 @@ wrapperTag: div
3117
3127
  <dt class="pf-v6-c-description-list__term">
3118
3128
  <div class="pf-v6-l-flex pf-m-nowrap pf-m-space-items-sm">
3119
3129
  <div class="pf-v6-l-flex__item">
3120
- <i
3121
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
3122
- aria-hidden="true"
3123
- ></i>
3130
+ <span class="pf-v6-c-icon">
3131
+ <span class="pf-v6-c-icon__content pf-m-danger">
3132
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
3133
+ </span>
3134
+ </span>
3124
3135
  </div>
3125
3136
  <div class="pf-v6-l-flex__item">Readiness probe failed</div>
3126
3137
  </div>
@@ -3132,9 +3143,12 @@ wrapperTag: div
3132
3143
  </dd>
3133
3144
  <dd class="pf-v6-c-description-list__description">
3134
3145
  <div class="pf-v6-c-description-list__text">
3135
- <time
3136
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
3137
- >Jun 17, 11:02 am</time>
3146
+ <span class="pf-v6-c-timestamp">
3147
+ <time
3148
+ class="pf-v6-c-timestamp__text"
3149
+ datetime="2019-01-21T21:38"
3150
+ >Thursday, 21 January 2019, 9:38 PM EST</time>
3151
+ </span>
3138
3152
  </div>
3139
3153
  </dd>
3140
3154
  </div>
@@ -3142,10 +3156,11 @@ wrapperTag: div
3142
3156
  <dt class="pf-v6-c-description-list__term">
3143
3157
  <div class="pf-v6-l-flex pf-m-nowrap pf-m-space-items-sm">
3144
3158
  <div class="pf-v6-l-flex__item">
3145
- <i
3146
- class="fas fa-check-circle pf-v6-u-success-color-100"
3147
- aria-hidden="true"
3148
- ></i>
3159
+ <span class="pf-v6-c-icon">
3160
+ <span class="pf-v6-c-icon__content pf-m-success">
3161
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
3162
+ </span>
3163
+ </span>
3149
3164
  </div>
3150
3165
  <div class="pf-v6-l-flex__item">Successful assignment</div>
3151
3166
  </div>
@@ -3157,9 +3172,12 @@ wrapperTag: div
3157
3172
  </dd>
3158
3173
  <dd class="pf-v6-c-description-list__description">
3159
3174
  <div class="pf-v6-c-description-list__text">
3160
- <time
3161
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
3162
- >Jun 17, 11:13 am</time>
3175
+ <span class="pf-v6-c-timestamp">
3176
+ <time
3177
+ class="pf-v6-c-timestamp__text"
3178
+ datetime="2019-01-21T21:34"
3179
+ >Thursday, 21 January 2019, 9:34 PM EST</time>
3180
+ </span>
3163
3181
  </div>
3164
3182
  </dd>
3165
3183
  </div>
@@ -3192,9 +3210,12 @@ wrapperTag: div
3192
3210
  </dd>
3193
3211
  <dd class="pf-v6-c-description-list__description">
3194
3212
  <div class="pf-v6-c-description-list__text">
3195
- <time
3196
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
3197
- >Jun 17, 10:59 am</time>
3213
+ <span class="pf-v6-c-timestamp">
3214
+ <time
3215
+ class="pf-v6-c-timestamp__text"
3216
+ datetime="2019-01-21T20:14"
3217
+ >Thursday, 21 January 2019, 8:14 PM EST</time>
3218
+ </span>
3198
3219
  </div>
3199
3220
  </dd>
3200
3221
  </div>
@@ -3202,10 +3223,11 @@ wrapperTag: div
3202
3223
  <dt class="pf-v6-c-description-list__term">
3203
3224
  <div class="pf-v6-l-flex pf-m-nowrap pf-m-space-items-sm">
3204
3225
  <div class="pf-v6-l-flex__item">
3205
- <i
3206
- class="fas fa-check-circle pf-v6-u-success-color-100"
3207
- aria-hidden="true"
3208
- ></i>
3226
+ <span class="pf-v6-c-icon">
3227
+ <span class="pf-v6-c-icon__content pf-m-success">
3228
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
3229
+ </span>
3230
+ </span>
3209
3231
  </div>
3210
3232
  <div class="pf-v6-l-flex__item">Created container</div>
3211
3233
  </div>
@@ -3217,9 +3239,12 @@ wrapperTag: div
3217
3239
  </dd>
3218
3240
  <dd class="pf-v6-c-description-list__description">
3219
3241
  <div class="pf-v6-c-description-list__text">
3220
- <time
3221
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
3222
- >Jun 17, 10:45 am</time>
3242
+ <span class="pf-v6-c-timestamp">
3243
+ <time
3244
+ class="pf-v6-c-timestamp__text"
3245
+ datetime="2019-01-21T19:18"
3246
+ >Thursday, 21 January 2019, 7:18 PM EST</time>
3247
+ </span>
3223
3248
  </div>
3224
3249
  </dd>
3225
3250
  </div>