@patternfly/patternfly 6.0.0-alpha.100 → 6.0.0-alpha.102

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 (56) hide show
  1. package/components/Nav/nav.css +3 -1
  2. package/components/Nav/nav.scss +4 -2
  3. package/components/Table/table-scrollable.css +12 -15
  4. package/components/Table/table-scrollable.scss +33 -30
  5. package/components/Table/table-tree-view.css +0 -2
  6. package/components/Table/table-tree-view.scss +9 -11
  7. package/components/Table/table.css +118 -55
  8. package/components/Table/table.scss +182 -100
  9. package/docs/components/Nav/examples/Navigation.css +2 -2
  10. package/docs/components/Nav/examples/Navigation.md +57 -55
  11. package/docs/components/Table/examples/Table.css +6 -8
  12. package/docs/components/Table/examples/Table.md +79 -92
  13. package/docs/demos/Table/examples/Table.md +28 -28
  14. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  15. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  16. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  17. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +24 -24
  18. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  19. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  20. package/docs/utilities/Display/examples/Display.css +8 -8
  21. package/docs/utilities/Display/examples/Display.md +7 -7
  22. package/docs/utilities/Flex/examples/Flex.css +5 -5
  23. package/docs/utilities/Flex/examples/Flex.md +82 -40
  24. package/docs/utilities/Float/examples/Float.css +2 -2
  25. package/docs/utilities/Float/examples/Float.md +6 -6
  26. package/docs/utilities/Sizing/examples/Sizing.css +4 -4
  27. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  28. package/docs/utilities/Spacing/examples/Spacing.css +1 -1
  29. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  30. package/docs/utilities/Text/examples/Text.md +53 -53
  31. package/package.json +1 -1
  32. package/patternfly-addons.css +91 -371
  33. package/patternfly-no-globals.css +133 -73
  34. package/patternfly-theme-dark-unversioned.css +133 -73
  35. package/patternfly.css +133 -73
  36. package/patternfly.min.css +1 -1
  37. package/patternfly.min.css.map +1 -1
  38. package/sass-utilities/mixins.scss +2 -2
  39. package/utilities/Alignment/alignment.css +24 -24
  40. package/utilities/Alignment/alignment.scss +4 -4
  41. package/utilities/BackgroundColor/BackgroundColor.css +0 -100
  42. package/utilities/BackgroundColor/BackgroundColor.scss +2 -8
  43. package/utilities/BoxShadow/box-shadow.css +15 -39
  44. package/utilities/BoxShadow/box-shadow.scss +17 -27
  45. package/utilities/Display/display.scss +2 -2
  46. package/utilities/Flex/flex.scss +18 -18
  47. package/utilities/Float/float.css +24 -24
  48. package/utilities/Float/float.scss +4 -4
  49. package/utilities/Sizing/sizing.css +28 -28
  50. package/utilities/Sizing/sizing.scss +17 -17
  51. package/utilities/Text/text.css +0 -155
  52. package/utilities/Text/text.scss +10 -16
  53. package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  54. package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
  55. package/utilities/Text/themes/dark/text.css +0 -0
  56. package/utilities/Text/themes/dark/text.scss +0 -33
package/docs/demos/Table/examples/Table.md CHANGED
@@ -1672,7 +1672,7 @@ wrapperTag: div
1672
1672
  <td class="pf-v6-c-table__td"></td>
1673
1673
 
1674
1674
  <th
1675
- class="pf-v6-c-table__th pf-v6-c-table__sort pf-v6-c-table__sort pf-m-selected"
1675
+ class="pf-v6-c-table__th pf-v6-c-table__sort pf-m-selected"
1676
1676
  role="columnheader"
1677
1677
  aria-sort="ascending"
1678
1678
  scope="col"
@@ -1688,7 +1688,7 @@ wrapperTag: div
1688
1688
  </th>
1689
1689
 
1690
1690
  <th
1691
- class="pf-v6-c-table__th pf-v6-c-table__sort pf-v6-c-table__sort"
1691
+ class="pf-v6-c-table__th pf-v6-c-table__sort"
1692
1692
  role="columnheader"
1693
1693
  aria-sort="none"
1694
1694
  scope="col"
@@ -1704,7 +1704,7 @@ wrapperTag: div
1704
1704
  </th>
1705
1705
 
1706
1706
  <th
1707
- class="pf-v6-c-table__th pf-v6-c-table__sort pf-v6-c-table__sort"
1707
+ class="pf-v6-c-table__th pf-v6-c-table__sort"
1708
1708
  role="columnheader"
1709
1709
  aria-sort="none"
1710
1710
  scope="col"
@@ -1720,7 +1720,7 @@ wrapperTag: div
1720
1720
  </th>
1721
1721
 
1722
1722
  <th
1723
- class="pf-v6-c-table__th pf-v6-c-table__sort pf-v6-c-table__sort"
1723
+ class="pf-v6-c-table__th pf-v6-c-table__sort"
1724
1724
  role="columnheader"
1725
1725
  aria-sort="none"
1726
1726
  scope="col"
@@ -1736,7 +1736,7 @@ wrapperTag: div
1736
1736
  </th>
1737
1737
 
1738
1738
  <th
1739
- class="pf-v6-c-table__th pf-v6-c-table__sort pf-v6-c-table__sort"
1739
+ class="pf-v6-c-table__th pf-v6-c-table__sort"
1740
1740
  role="columnheader"
1741
1741
  aria-sort="none"
1742
1742
  scope="col"
@@ -5473,7 +5473,7 @@ wrapperTag: div
5473
5473
  <thead class="pf-v6-c-table__thead">
5474
5474
  <tr class="pf-v6-c-table__tr" role="row">
5475
5475
  <th
5476
- class="pf-v6-c-table__th pf-m-width-30 pf-v6-c-table__sort pf-v6-c-table__sort pf-m-selected"
5476
+ class="pf-v6-c-table__th pf-m-width-30 pf-v6-c-table__sort pf-m-selected"
5477
5477
  role="columnheader"
5478
5478
  aria-sort="ascending"
5479
5479
  scope="col"
@@ -5489,7 +5489,7 @@ wrapperTag: div
5489
5489
  </th>
5490
5490
 
5491
5491
  <th
5492
- class="pf-v6-c-table__th pf-v6-c-table__sort pf-v6-c-table__sort"
5492
+ class="pf-v6-c-table__th pf-v6-c-table__sort"
5493
5493
  role="columnheader"
5494
5494
  aria-sort="none"
5495
5495
  scope="col"
@@ -5505,7 +5505,7 @@ wrapperTag: div
5505
5505
  </th>
5506
5506
 
5507
5507
  <th
5508
- class="pf-v6-c-table__th pf-v6-c-table__sort pf-v6-c-table__sort"
5508
+ class="pf-v6-c-table__th pf-v6-c-table__sort"
5509
5509
  role="columnheader"
5510
5510
  aria-sort="none"
5511
5511
  scope="col"
@@ -5633,7 +5633,7 @@ wrapperTag: div
5633
5633
  <thead class="pf-v6-c-table__thead">
5634
5634
  <tr class="pf-v6-c-table__tr" role="row">
5635
5635
  <th
5636
- class="pf-v6-c-table__th pf-v6-c-table__sort pf-v6-c-table__sort"
5636
+ class="pf-v6-c-table__th pf-v6-c-table__sort"
5637
5637
  role="columnheader"
5638
5638
  aria-sort="none"
5639
5639
  scope="col"
@@ -5863,7 +5863,7 @@ wrapperTag: div
5863
5863
  <thead class="pf-v6-c-table__thead">
5864
5864
  <tr class="pf-v6-c-table__tr" role="row">
5865
5865
  <th
5866
- class="pf-v6-c-table__th pf-v6-c-table__sort pf-v6-c-table__sort"
5866
+ class="pf-v6-c-table__th pf-v6-c-table__sort"
5867
5867
  role="columnheader"
5868
5868
  aria-sort="none"
5869
5869
  scope="col"
@@ -6093,7 +6093,7 @@ wrapperTag: div
6093
6093
  <thead class="pf-v6-c-table__thead">
6094
6094
  <tr class="pf-v6-c-table__tr" role="row">
6095
6095
  <th
6096
- class="pf-v6-c-table__th pf-v6-c-table__sort pf-v6-c-table__sort"
6096
+ class="pf-v6-c-table__th pf-v6-c-table__sort"
6097
6097
  role="columnheader"
6098
6098
  aria-sort="none"
6099
6099
  scope="col"
@@ -6401,7 +6401,7 @@ wrapperTag: div
6401
6401
  <thead class="pf-v6-c-table__thead">
6402
6402
  <tr class="pf-v6-c-table__tr" role="row">
6403
6403
  <th
6404
- class="pf-v6-c-table__th pf-v6-c-table__sort pf-v6-c-table__sort"
6404
+ class="pf-v6-c-table__th pf-v6-c-table__sort"
6405
6405
  role="columnheader"
6406
6406
  aria-sort="none"
6407
6407
  scope="col"
@@ -6631,7 +6631,7 @@ wrapperTag: div
6631
6631
  <thead class="pf-v6-c-table__thead">
6632
6632
  <tr class="pf-v6-c-table__tr" role="row">
6633
6633
  <th
6634
- class="pf-v6-c-table__th pf-v6-c-table__sort pf-v6-c-table__sort"
6634
+ class="pf-v6-c-table__th pf-v6-c-table__sort"
6635
6635
  role="columnheader"
6636
6636
  aria-sort="none"
6637
6637
  scope="col"
@@ -6861,7 +6861,7 @@ wrapperTag: div
6861
6861
  <thead class="pf-v6-c-table__thead">
6862
6862
  <tr class="pf-v6-c-table__tr" role="row">
6863
6863
  <th
6864
- class="pf-v6-c-table__th pf-v6-c-table__sort pf-v6-c-table__sort"
6864
+ class="pf-v6-c-table__th pf-v6-c-table__sort"
6865
6865
  role="columnheader"
6866
6866
  aria-sort="none"
6867
6867
  scope="col"
@@ -7169,7 +7169,7 @@ wrapperTag: div
7169
7169
  <thead class="pf-v6-c-table__thead">
7170
7170
  <tr class="pf-v6-c-table__tr" role="row">
7171
7171
  <th
7172
- class="pf-v6-c-table__th pf-v6-c-table__sort pf-v6-c-table__sort"
7172
+ class="pf-v6-c-table__th pf-v6-c-table__sort"
7173
7173
  role="columnheader"
7174
7174
  aria-sort="none"
7175
7175
  scope="col"
@@ -7399,7 +7399,7 @@ wrapperTag: div
7399
7399
  <thead class="pf-v6-c-table__thead">
7400
7400
  <tr class="pf-v6-c-table__tr" role="row">
7401
7401
  <th
7402
- class="pf-v6-c-table__th pf-v6-c-table__sort pf-v6-c-table__sort"
7402
+ class="pf-v6-c-table__th pf-v6-c-table__sort"
7403
7403
  role="columnheader"
7404
7404
  aria-sort="none"
7405
7405
  scope="col"
@@ -7629,7 +7629,7 @@ wrapperTag: div
7629
7629
  <thead class="pf-v6-c-table__thead">
7630
7630
  <tr class="pf-v6-c-table__tr" role="row">
7631
7631
  <th
7632
- class="pf-v6-c-table__th pf-v6-c-table__sort pf-v6-c-table__sort"
7632
+ class="pf-v6-c-table__th pf-v6-c-table__sort"
7633
7633
  role="columnheader"
7634
7634
  aria-sort="none"
7635
7635
  scope="col"
@@ -12942,7 +12942,7 @@ wrapperTag: div
12942
12942
  <thead class="pf-v6-c-table__thead">
12943
12943
  <tr class="pf-v6-c-table__tr" role="row">
12944
12944
  <th
12945
- class="pf-v6-c-table__th pf-m-border-right pf-v6-c-table__sort pf-v6-c-table__sort pf-v6-c-table__sticky-cell pf-m-left"
12945
+ class="pf-v6-c-table__th pf-m-border-right pf-v6-c-table__sort pf-v6-c-table__sticky-cell pf-m-left"
12946
12946
  role="columnheader"
12947
12947
  aria-sort="none"
12948
12948
  data-label="Example th"
@@ -12960,7 +12960,7 @@ wrapperTag: div
12960
12960
  </th>
12961
12961
 
12962
12962
  <th
12963
- class="pf-v6-c-table__th pf-v6-c-table__sort pf-v6-c-table__sort"
12963
+ class="pf-v6-c-table__th pf-v6-c-table__sort"
12964
12964
  role="columnheader"
12965
12965
  aria-sort="none"
12966
12966
  data-label="Example th"
@@ -14139,7 +14139,7 @@ wrapperTag: div
14139
14139
  <thead class="pf-v6-c-table__thead">
14140
14140
  <tr class="pf-v6-c-table__tr" role="row">
14141
14141
  <th
14142
- class="pf-v6-c-table__th pf-v6-c-table__sort pf-v6-c-table__sort pf-v6-c-table__sticky-cell pf-m-left"
14142
+ class="pf-v6-c-table__th pf-v6-c-table__sort pf-v6-c-table__sticky-cell pf-m-left"
14143
14143
  role="columnheader"
14144
14144
  aria-sort="none"
14145
14145
  data-label="Example th"
@@ -14157,7 +14157,7 @@ wrapperTag: div
14157
14157
  </th>
14158
14158
 
14159
14159
  <th
14160
- class="pf-v6-c-table__th pf-m-border-right pf-v6-c-table__sort pf-v6-c-table__sort pf-v6-c-table__sticky-cell pf-m-left"
14160
+ class="pf-v6-c-table__th pf-m-border-right pf-v6-c-table__sort pf-v6-c-table__sticky-cell pf-m-left"
14161
14161
  role="columnheader"
14162
14162
  aria-sort="none"
14163
14163
  data-label="Example th"
@@ -15366,7 +15366,7 @@ wrapperTag: div
15366
15366
  <thead class="pf-v6-c-table__thead">
15367
15367
  <tr class="pf-v6-c-table__tr" role="row">
15368
15368
  <th
15369
- class="pf-v6-c-table__th pf-v6-c-table__sort pf-v6-c-table__sort pf-v6-c-table__sticky-cell pf-m-left"
15369
+ class="pf-v6-c-table__th pf-v6-c-table__sort pf-v6-c-table__sticky-cell pf-m-left"
15370
15370
  role="columnheader"
15371
15371
  aria-sort="none"
15372
15372
  data-label="Example th"
@@ -15384,7 +15384,7 @@ wrapperTag: div
15384
15384
  </th>
15385
15385
 
15386
15386
  <th
15387
- class="pf-v6-c-table__th pf-m-border-right pf-v6-c-table__sort pf-v6-c-table__sort pf-v6-c-table__sticky-cell pf-m-left"
15387
+ class="pf-v6-c-table__th pf-m-border-right pf-v6-c-table__sort pf-v6-c-table__sticky-cell pf-m-left"
15388
15388
  role="columnheader"
15389
15389
  aria-sort="none"
15390
15390
  data-label="Example th"
@@ -16592,7 +16592,7 @@ wrapperTag: div
16592
16592
  <thead class="pf-v6-c-table__thead">
16593
16593
  <tr class="pf-v6-c-table__tr" role="row">
16594
16594
  <th
16595
- class="pf-v6-c-table__th pf-v6-c-table__sort pf-v6-c-table__sort"
16595
+ class="pf-v6-c-table__th pf-v6-c-table__sort"
16596
16596
  role="columnheader"
16597
16597
  aria-sort="none"
16598
16598
  data-label="Example th"
@@ -16609,7 +16609,7 @@ wrapperTag: div
16609
16609
  </th>
16610
16610
 
16611
16611
  <th
16612
- class="pf-v6-c-table__th pf-v6-c-table__sort pf-v6-c-table__sort"
16612
+ class="pf-v6-c-table__th pf-v6-c-table__sort"
16613
16613
  role="columnheader"
16614
16614
  aria-sort="none"
16615
16615
  data-label="Example th"
@@ -17531,7 +17531,7 @@ By default, table cell alignment is set to baseline. This retains vertical align
17531
17531
  <thead class="pf-v6-c-table__thead">
17532
17532
  <tr class="pf-v6-c-table__tr" role="row">
17533
17533
  <th
17534
- class="pf-v6-c-table__th pf-m-nowrap pf-v6-c-table__sort pf-v6-c-table__sort pf-m-selected"
17534
+ class="pf-v6-c-table__th pf-m-nowrap pf-v6-c-table__sort pf-m-selected"
17535
17535
  role="columnheader"
17536
17536
  aria-sort="ascending"
17537
17537
  scope="col"
@@ -17547,7 +17547,7 @@ By default, table cell alignment is set to baseline. This retains vertical align
17547
17547
  </th>
17548
17548
 
17549
17549
  <th
17550
- class="pf-v6-c-table__th pf-m-fit-content pf-v6-c-table__sort pf-v6-c-table__sort pf-m-help"
17550
+ class="pf-v6-c-table__th pf-m-fit-content pf-v6-c-table__sort pf-m-help"
17551
17551
  role="columnheader"
17552
17552
  aria-sort="none"
17553
17553
  scope="col"
@@ -17577,7 +17577,7 @@ By default, table cell alignment is set to baseline. This retains vertical align
17577
17577
  </th>
17578
17578
 
17579
17579
  <th
17580
- class="pf-v6-c-table__th pf-m-fit-content pf-v6-c-table__sort pf-v6-c-table__sort"
17580
+ class="pf-v6-c-table__th pf-m-fit-content pf-v6-c-table__sort"
17581
17581
  role="columnheader"
17582
17582
  aria-sort="none"
17583
17583
  scope="col"
package/docs/utilities/Accessibility/examples/Accessibility.md CHANGED
@@ -18,7 +18,7 @@ Content available only to screen reader, open inspector to investigate
18
18
  ```html
19
19
  <span
20
20
  class="pf-v6-u-visible"
21
- >This unsets .pf-v5-u-screen-reader and .pf-v5-screen-reader. It will be visible.</span>
21
+ >This unsets .pf-v6-u-screen-reader and .pf-v6-screen-reader. It will be visible.</span>
22
22
 
23
23
  ```
24
24
 
@@ -34,7 +34,7 @@ The text underneath is hidden.
34
34
 
35
35
  ### Overview
36
36
 
37
- [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v5-u-screen-reader-on-lg**
37
+ [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-screen-reader-on-lg**
38
38
 
39
39
  ### Usage
40
40
 
package/docs/utilities/Alignment/examples/Alignment.css CHANGED
@@ -1,7 +1,7 @@
1
- .ws-core-u-alignment .pf-v5-u-text-align-left,
2
- .ws-core-u-alignment .pf-v5-u-text-align-center,
3
- .ws-core-u-alignment .pf-v5-u-text-align-right,
4
- .ws-core-u-alignment .pf-v5-u-text-align-justify {
1
+ .ws-core-u-alignment .pf-v6-u-text-align-start,
2
+ .ws-core-u-alignment .pf-v6-u-text-align-center,
3
+ .ws-core-u-alignment .pf-v6-u-text-align-end,
4
+ .ws-core-u-alignment .pf-v6-u-text-align-justify {
5
5
  padding: .5rem !important;
6
6
  border: 2px dashed #393f44;
7
7
  }
package/docs/utilities/Alignment/examples/Alignment.md CHANGED
@@ -8,9 +8,9 @@ section: utility-classes
8
8
  ### Basic
9
9
 
10
10
  ```html
11
- <div class="pf-v6-u-text-align-left">Text left</div>
11
+ <div class="pf-v6-u-text-align-start">Text start</div>
12
12
  <div class="pf-v6-u-text-align-center">Text center</div>
13
- <div class="pf-v6-u-text-align-right">Text right</div>
13
+ <div class="pf-v6-u-text-align-end">Text end</div>
14
14
  <div class="pf-v6-u-text-align-justify">
15
15
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
16
16
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -23,13 +23,13 @@ section: utility-classes
23
23
 
24
24
  ### Overview
25
25
 
26
- [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v5-u-text-left-on-lg**
26
+ [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-text-align-start-on-lg**
27
27
 
28
28
  ### Usage
29
29
 
30
30
  | Class | Applied to | Outcome |
31
31
  | -- | -- | -- |
32
- | `.pf-v6-u-text-align-left{-on-[breakpoint]}` | `*` | Aligns text left |
32
+ | `.pf-v6-u-text-align-start{-on-[breakpoint]}` | `*` | Aligns text start |
33
33
  | `.pf-v6-u-text-align-center{-on-[breakpoint]}` | `*` | Aligns text center |
34
- | `.pf-v6-u-text-align-right{-on-[breakpoint]}` | `*` | Aligns text right |
34
+ | `.pf-v6-u-text-align-end{-on-[breakpoint]}` | `*` | Aligns text end |
35
35
  | `.pf-v6-u-text-align-justify{-on-[breakpoint]}` | `*` | Aligns text justify |
package/docs/utilities/BackgroundColor/examples/BackgroundColor.md CHANGED
@@ -6,20 +6,20 @@ section: utility-classes
6
6
  ### Standard background colors
7
7
 
8
8
  ```html
9
- <div class="pf-v5-u-background-color-100">Background color 100</div>
9
+ <div class="pf-v6-u-background-color-100">Background color 100</div>
10
10
  <br />
11
- <div class="pf-v5-u-background-color-200">Background color 200</div>
11
+ <div class="pf-v6-u-background-color-200">Background color 200</div>
12
12
  <br />
13
- <div class="pf-v5-u-background-color-active-color-100">
14
- <div class="pf-v5-u-color-light-200">Active color 100</div>
13
+ <div class="pf-v6-u-background-color-active-color-100">
14
+ <div class="pf-v6-u-color-light-200">Active color 100</div>
15
15
  </div>
16
16
  <br />
17
- <div class="pf-v5-u-background-color-active-color-300">
18
- <div class="pf-v5-u-color-light-200">Active color 300</div>
17
+ <div class="pf-v6-u-background-color-active-color-300">
18
+ <div class="pf-v6-u-color-light-200">Active color 300</div>
19
19
  </div>
20
20
  <br />
21
- <div class="pf-v5-u-background-color-primary-color-200">
22
- <div class="pf-v5-u-color-light-200">Primary color 200</div>
21
+ <div class="pf-v6-u-background-color-primary-color-200">
22
+ <div class="pf-v6-u-color-light-200">Primary color 200</div>
23
23
  </div>
24
24
 
25
25
  ```
@@ -27,20 +27,20 @@ section: utility-classes
27
27
  ### Inverse background colors
28
28
 
29
29
  ```html
30
- <div class="pf-v5-u-background-color-dark-100">
31
- <div class="pf-v5-u-color-light-200">Background color dark 100</div>
30
+ <div class="pf-v6-u-background-color-dark-100">
31
+ <div class="pf-v6-u-color-light-200">Background color dark 100</div>
32
32
  </div>
33
33
  <br />
34
- <div class="pf-v5-u-background-color-dark-200">
35
- <div class="pf-v5-u-color-light-200">Background color dark 200</div>
34
+ <div class="pf-v6-u-background-color-dark-200">
35
+ <div class="pf-v6-u-color-light-200">Background color dark 200</div>
36
36
  </div>
37
37
  <br />
38
- <div class="pf-v5-u-background-color-dark-300">
39
- <div class="pf-v5-u-color-light-200">Background color dark 300</div>
38
+ <div class="pf-v6-u-background-color-dark-300">
39
+ <div class="pf-v6-u-color-light-200">Background color dark 300</div>
40
40
  </div>
41
41
  <br />
42
- <div class="pf-v5-u-background-color-dark-400">
43
- <div class="pf-v5-u-color-light-200">Background color dark 400</div>
42
+ <div class="pf-v6-u-background-color-dark-400">
43
+ <div class="pf-v6-u-color-light-200">Background color dark 400</div>
44
44
  </div>
45
45
 
46
46
  ```
@@ -48,24 +48,24 @@ section: utility-classes
48
48
  ### Disabled background colors
49
49
 
50
50
  ```html
51
- <div class="pf-v5-u-background-color-disabled-color-200">Disabled color 200</div>
51
+ <div class="pf-v6-u-background-color-disabled-color-200">Disabled color 200</div>
52
52
  <br />
53
- <div class="pf-v5-u-background-color-disabled-color-300">Disabled color 300</div>
53
+ <div class="pf-v6-u-background-color-disabled-color-300">Disabled color 300</div>
54
54
 
55
55
  ```
56
56
 
57
57
  ### Status and state background colors
58
58
 
59
59
  ```html
60
- <div class="pf-v5-u-background-color-default">Default</div>
60
+ <div class="pf-v6-u-background-color-default">Default</div>
61
61
  <br />
62
- <div class="pf-v5-u-background-color-success">Success</div>
62
+ <div class="pf-v6-u-background-color-success">Success</div>
63
63
  <br />
64
- <div class="pf-v5-u-background-color-info">Info</div>
64
+ <div class="pf-v6-u-background-color-info">Info</div>
65
65
  <br />
66
- <div class="pf-v5-u-background-color-warning">Warning</div>
66
+ <div class="pf-v6-u-background-color-warning">Warning</div>
67
67
  <br />
68
- <div class="pf-v5-u-background-color-danger">Danger</div>
68
+ <div class="pf-v6-u-background-color-danger">Danger</div>
69
69
 
70
70
  ```
71
71
 
@@ -79,7 +79,7 @@ Care should be taken especially when applying background colors, as this can hav
79
79
 
80
80
  Note that "inverse" background colors are labeled as such to indicate that they are best used with the ["inverse" text colors](/utility-classes/text#inverse-colors).
81
81
 
82
- [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v5-u-background-color-200-on-lg**
82
+ [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-background-color-200-on-lg**
83
83
 
84
84
  ### Usage
85
85
 
package/docs/utilities/BoxShadow/examples/box-shadow.css CHANGED
@@ -1,20 +1,20 @@
1
- .ws-core-u-box-shadow [class*="pf-v5-u-box-shadow"] {
2
- padding: var(--pf-v5-global--spacer--lg);
3
- margin-block-end: var(--pf-v5-global--spacer--md);
1
+ .ws-core-u-box-shadow [class*="pf-v6-u-box-shadow"] {
2
+ padding: var(--pf-v6-global--spacer--lg);
3
+ margin-block-end: var(--pf-v6-global--spacer--md);
4
4
  }
5
5
 
6
- #ws-core-u-box-shadow-small [class*="pf-v5-u-box-shadow"]:not(:last-child) {
7
- margin-block-end: var(--pf-v5-global--spacer--lg);
6
+ #ws-core-u-box-shadow-small [class*="pf-v6-u-box-shadow"]:not(:last-child) {
7
+ margin-block-end: var(--pf-v6-global--spacer--lg);
8
8
  }
9
9
 
10
- #ws-core-u-box-shadow-medium [class*="pf-v5-u-box-shadow"]:not(:last-child) {
11
- margin-block-end: var(--pf-v5-global--spacer--xl);
10
+ #ws-core-u-box-shadow-medium [class*="pf-v6-u-box-shadow"]:not(:last-child) {
11
+ margin-block-end: var(--pf-v6-global--spacer--xl);
12
12
  }
13
13
 
14
- #ws-core-u-box-shadow-large [class*="pf-v5-u-box-shadow"]:not(:last-child) {
15
- margin-block-end: var(--pf-v5-global--spacer--2xl);
14
+ #ws-core-u-box-shadow-large [class*="pf-v6-u-box-shadow"]:not(:last-child) {
15
+ margin-block-end: var(--pf-v6-global--spacer--2xl);
16
16
  }
17
17
 
18
- #ws-core-u-box-shadow-extra-large [class*="pf-v5-u-box-shadow"]:not(:last-child) {
19
- margin-block-end: var(--pf-v5-global--spacer--3xl);
18
+ #ws-core-u-box-shadow-extra-large [class*="pf-v6-u-box-shadow"]:not(:last-child) {
19
+ margin-block-end: var(--pf-v6-global--spacer--3xl);
20
20
  }
package/docs/utilities/BoxShadow/examples/box-shadow.md CHANGED
@@ -8,51 +8,33 @@ section: utility-classes
8
8
  ### Small
9
9
 
10
10
  ```html
11
- <div class="pf-v5-u-box-shadow-sm">Regular</div>
12
- <div class="pf-v5-u-box-shadow-sm-top">Top</div>
13
- <div class="pf-v5-u-box-shadow-sm-right">Right</div>
14
- <div class="pf-v5-u-box-shadow-sm-bottom">Bottom</div>
15
- <div class="pf-v5-u-box-shadow-sm-left">Left</div>
11
+ <div class="pf-v6-u-box-shadow-sm">Regular</div>
12
+ <div class="pf-v6-u-box-shadow-sm-top">Top</div>
13
+ <div class="pf-v6-u-box-shadow-sm-right">Right</div>
14
+ <div class="pf-v6-u-box-shadow-sm-bottom">Bottom</div>
15
+ <div class="pf-v6-u-box-shadow-sm-left">Left</div>
16
16
 
17
17
  ```
18
18
 
19
19
  ### Medium
20
20
 
21
21
  ```html
22
- <div class="pf-v5-u-box-shadow-md">Regular</div>
23
- <div class="pf-v5-u-box-shadow-md-top">Top</div>
24
- <div class="pf-v5-u-box-shadow-md-right">Right</div>
25
- <div class="pf-v5-u-box-shadow-md-bottom">Bottom</div>
26
- <div class="pf-v5-u-box-shadow-md-left">Left</div>
22
+ <div class="pf-v6-u-box-shadow-md">Regular</div>
23
+ <div class="pf-v6-u-box-shadow-md-top">Top</div>
24
+ <div class="pf-v6-u-box-shadow-md-right">Right</div>
25
+ <div class="pf-v6-u-box-shadow-md-bottom">Bottom</div>
26
+ <div class="pf-v6-u-box-shadow-md-left">Left</div>
27
27
 
28
28
  ```
29
29
 
30
30
  ### Large
31
31
 
32
32
  ```html
33
- <div class="pf-v5-u-box-shadow-lg">Regular</div>
34
- <div class="pf-v5-u-box-shadow-lg-top">Top</div>
35
- <div class="pf-v5-u-box-shadow-lg-right">Right</div>
36
- <div class="pf-v5-u-box-shadow-lg-bottom">Bottom</div>
37
- <div class="pf-v5-u-box-shadow-lg-left">Left</div>
38
-
39
- ```
40
-
41
- ### Extra large
42
-
43
- ```html
44
- <div class="pf-v5-u-box-shadow-xl">Regular</div>
45
- <div class="pf-v5-u-box-shadow-xl-top">Top</div>
46
- <div class="pf-v5-u-box-shadow-xl-right">Right</div>
47
- <div class="pf-v5-u-box-shadow-xl-bottom">Bottom</div>
48
- <div class="pf-v5-u-box-shadow-xl-left">Left</div>
49
-
50
- ```
51
-
52
- ### Inset
53
-
54
- ```html
55
- <div class="pf-v5-u-box-shadow-inset">Regular</div>
33
+ <div class="pf-v6-u-box-shadow-lg">Regular</div>
34
+ <div class="pf-v6-u-box-shadow-lg-top">Top</div>
35
+ <div class="pf-v6-u-box-shadow-lg-right">Right</div>
36
+ <div class="pf-v6-u-box-shadow-lg-bottom">Bottom</div>
37
+ <div class="pf-v6-u-box-shadow-lg-left">Left</div>
56
38
 
57
39
  ```
58
40
 
@@ -81,8 +63,3 @@ Box shadow utility
81
63
  | `.pf-v6-u-box-shadow-lg-right` | `*` | Applies box-shadow large right. |
82
64
  | `.pf-v6-u-box-shadow-lg-bottom` | `*` | Applies box-shadow large bottom. |
83
65
  | `.pf-v6-u-box-shadow-lg-left` | `*` | Applies box-shadow large left. |
84
- | `.pf-v6-u-box-shadow-xl` | `*` | Applies box-shadow x-large. |
85
- | `.pf-v6-u-box-shadow-xl-top` | `*` | Applies box-shadow x-large top. |
86
- | `.pf-v6-u-box-shadow-xl-right` | `*` | Applies box-shadow x-large right. |
87
- | `.pf-v6-u-box-shadow-xl-bottom` | `*` | Applies box-shadow x-large bottom. |
88
- | `.pf-v6-u-box-shadow-xl-left` | `*` | Applies box-shadow x-large left. |
package/docs/utilities/Display/examples/Display.css CHANGED
@@ -1,11 +1,11 @@
1
- .ws-core-u-display .pf-v5-u-display-inline-block,
2
- .ws-core-u-display .pf-v5-u-display-block,
3
- .ws-core-u-display .pf-v5-u-display-flex,
4
- .ws-core-u-display .pf-v5-u-display-inline-flex,
5
- .ws-core-u-display .pf-v5-u-display-grid,
6
- .ws-core-u-display .pf-v5-u-display-inline,
7
- .ws-core-u-display .pf-v5-u-display-table,
8
- .ws-core-u-display .pf-v5-u-display-table-cell {
1
+ .ws-core-u-display .pf-v6-u-display-inline-block,
2
+ .ws-core-u-display .pf-v6-u-display-block,
3
+ .ws-core-u-display .pf-v6-u-display-flex,
4
+ .ws-core-u-display .pf-v6-u-display-inline-flex,
5
+ .ws-core-u-display .pf-v6-u-display-grid,
6
+ .ws-core-u-display .pf-v6-u-display-inline,
7
+ .ws-core-u-display .pf-v6-u-display-table,
8
+ .ws-core-u-display .pf-v6-u-display-table-cell {
9
9
  padding: .5rem !important;
10
10
  border: 2px dashed #393f44;
11
11
  }
package/docs/utilities/Display/examples/Display.md CHANGED
@@ -8,42 +8,42 @@ section: utility-classes
8
8
  ### Inline block
9
9
 
10
10
  ```html
11
- <div class="pf-v6-u-display-inline-block">.pf-v5-u-display-inline-block</div>
11
+ <div class="pf-v6-u-display-inline-block">.pf-v6-u-display-inline-block</div>
12
12
 
13
13
  ```
14
14
 
15
15
  ### Block
16
16
 
17
17
  ```html
18
- <div class="pf-v6-u-display-block">.pf-v5-u-display-block</div>
18
+ <div class="pf-v6-u-display-block">.pf-v6-u-display-block</div>
19
19
 
20
20
  ```
21
21
 
22
22
  ### Flex
23
23
 
24
24
  ```html
25
- <div class="pf-v6-u-display-flex">.pf-v5-u-display-flex</div>
25
+ <div class="pf-v6-u-display-flex">.pf-v6-u-display-flex</div>
26
26
 
27
27
  ```
28
28
 
29
29
  ### Inline flex
30
30
 
31
31
  ```html
32
- <div class="pf-v6-u-display-inline-flex">.pf-v5-u-display-inline-flex</div>
32
+ <div class="pf-v6-u-display-inline-flex">.pf-v6-u-display-inline-flex</div>
33
33
 
34
34
  ```
35
35
 
36
36
  ### Grid
37
37
 
38
38
  ```html
39
- <div class="pf-v6-u-display-grid">.pf-v5-u-display-grid</div>
39
+ <div class="pf-v6-u-display-grid">.pf-v6-u-display-grid</div>
40
40
 
41
41
  ```
42
42
 
43
43
  ### Inline
44
44
 
45
45
  ```html
46
- <div class="pf-v6-u-display-inline">.pf-v5-u-display-inline</div>
46
+ <div class="pf-v6-u-display-inline">.pf-v6-u-display-inline</div>
47
47
 
48
48
  ```
49
49
 
@@ -76,7 +76,7 @@ section: utility-classes
76
76
 
77
77
  ### Overview
78
78
 
79
- [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v5-u-display-inline-block-on-lg**
79
+ [Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-display-inline-block-on-lg**
80
80
 
81
81
  ### Usage
82
82
 
package/docs/utilities/Flex/examples/Flex.css CHANGED
@@ -1,14 +1,14 @@
1
- .ws-core-u-flex .pf-v5-u-display-flex,
1
+ .ws-core-u-flex .pf-v6-u-display-flex,
2
2
  .ws-core-u-flex .ws-example-flex-item,
3
- .ws-core-u-flex .pf-v5-u-display-inline-flex {
3
+ .ws-core-u-flex .pf-v6-u-display-inline-flex {
4
4
  flex-wrap: wrap;
5
5
  padding: .5rem !important;
6
6
  border: 2px dashed #393f44;
7
7
  }
8
8
 
9
- #ws-core-u-flex-aligned-items .pf-v5-u-display-flex,
10
- #ws-core-u-flex-aligned-self .pf-v5-u-display-flex,
11
- #ws-core-u-flex-aligned-content .pf-v5-u-display-flex {
9
+ #ws-core-u-flex-aligned-items .pf-v6-u-display-flex,
10
+ #ws-core-u-flex-aligned-self .pf-v6-u-display-flex,
11
+ #ws-core-u-flex-aligned-content .pf-v6-u-display-flex {
12
12
  min-height: 160px;
13
13
  }
14
14