@patternfly/patternfly 6.0.0-alpha.34 → 6.0.0-alpha.38

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 (46) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  3. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  4. package/assets/images/PF-IconLogo-color.svg +17 -0
  5. package/components/Backdrop/backdrop.css +6 -2
  6. package/components/Backdrop/backdrop.scss +5 -2
  7. package/components/Banner/banner.css +4 -0
  8. package/components/Banner/banner.scss +5 -0
  9. package/components/Card/card.css +3 -0
  10. package/components/Card/card.scss +8 -0
  11. package/components/Form/form.css +6 -0
  12. package/components/Form/form.scss +4 -1
  13. package/components/MenuToggle/menu-toggle.css +1 -0
  14. package/components/MenuToggle/menu-toggle.scss +2 -0
  15. package/components/Popover/popover.css +0 -2
  16. package/components/Popover/popover.scss +2 -2
  17. package/components/SimpleList/simple-list.css +35 -52
  18. package/components/SimpleList/simple-list.scss +41 -51
  19. package/components/Table/table.scss +1 -0
  20. package/components/Tooltip/tooltip.css +0 -2
  21. package/components/Tooltip/tooltip.scss +3 -3
  22. package/components/Truncate/truncate.css +4 -0
  23. package/components/Truncate/truncate.scss +3 -0
  24. package/docs/components/Accordion/examples/Accordion.md +6 -6
  25. package/docs/components/Alert/examples/Alert.md +2 -2
  26. package/docs/components/Brand/examples/Brand.md +9 -33
  27. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  28. package/docs/components/Card/examples/Card.md +18 -20
  29. package/docs/components/Check/examples/Check.md +1 -0
  30. package/docs/components/Content/examples/Content.md +5 -5
  31. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  32. package/docs/components/Label/examples/Label.md +11 -11
  33. package/docs/components/Nav/examples/Navigation.css +18 -2
  34. package/docs/components/Nav/examples/Navigation.md +1 -1
  35. package/docs/components/Radio/examples/Radio.md +1 -1
  36. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  37. package/docs/components/Table/examples/Table.md +8 -8
  38. package/docs/components/Truncate/examples/Truncate.css +2 -2
  39. package/docs/layouts/Flex/examples/Flex.md +11 -11
  40. package/package.json +32 -32
  41. package/patternfly-no-globals.css +59 -62
  42. package/patternfly-theme-dark-unversioned.css +59 -62
  43. package/patternfly.css +59 -62
  44. package/patternfly.min.css +1 -1
  45. package/patternfly.min.css.map +1 -1
  46. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
@@ -1,5 +1,4 @@
1
1
  This project is governed by the [Contributor Covenant version 1.4][1]. All contributors and participants agree to abide by its terms. To report violations, send an email to [patternfly@redhat.com][2].
2
2
 
3
3
  [1]: https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
4
- [2]: mailto:patternfly@redhat.com
5
-
4
+ [2]: mailto:patternfly@redhat.com
@@ -0,0 +1,29 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg width="679px" height="158px" viewBox="0 0 679 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3
+ <title>PF-HorizontalLogo-Color </title>
4
+ <defs>
5
+ <linearGradient x1="68%" y1="2.25860997e-13%" x2="32%" y2="100%" id="linearGradient-1">
6
+ <stop stop-color="#2B9AF3" offset="0%"></stop>
7
+ <stop stop-color="#73BCF7" stop-opacity="0.502212631" offset="100%"></stop>
8
+ </linearGradient>
9
+ </defs>
10
+ <g id="PF-HorizontalLogo-Color" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
11
+ <g id="PatternFly-Copy-11" transform="translate(206.000000, 45.750000)" fill="#151515" fill-rule="nonzero">
12
+ <path d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z" id="Shape"></path>
13
+ <path d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z" id="Shape"></path>
14
+ <path d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z" id="Path"></path>
15
+ <path d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z" id="Path"></path>
16
+ <path d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z" id="Shape"></path>
17
+ <path d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z" id="Path"></path>
18
+ <path d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z" id="Path"></path>
19
+ <polygon id="Path" points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"></polygon>
20
+ <polygon id="Path" points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"></polygon>
21
+ <path d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z" id="Path"></path>
22
+ </g>
23
+ <g id="Logo" transform="translate(0.000000, 0.000000)">
24
+ <path d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z" id="Rectangle-Copy-17" fill="#0066CC"></path>
25
+ <path d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z" id="Path-2" fill="url(#linearGradient-1)"></path>
26
+ <path d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z" id="Path-2" fill="url(#linearGradient-1)" transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "></path>
27
+ </g>
28
+ </g>
29
+ </svg>
@@ -0,0 +1,28 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg width="679px" height="158px" viewBox="0 0 679 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3
+ <title>PF-HorizontalLogo-Reverse </title>
4
+ <defs>
5
+ <linearGradient x1="100%" y1="1.31838984e-13%" x2="40.4021492%" y2="59.4473677%" id="linearGradient-1">
6
+ <stop stop-color="#FFFFFF" offset="0%"></stop>
7
+ <stop stop-color="#FFFFFF" stop-opacity="0.498497596" offset="100%"></stop>
8
+ </linearGradient>
9
+ </defs>
10
+ <g id="PF-HorizontalLogo-Reverse" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
11
+ <g id="Group" transform="translate(-0.000000, 0.000000)">
12
+ <path d="M61.7658863,0 L157.846154,0 L157.846154,96.0802676 C104.782487,96.0802676 61.7658863,53.0636665 61.7658863,0 L61.7658863,0 L61.7658863,0 Z" id="Rectangle-Copy-15" fill="#FFFFFF" opacity="0.401297433"></path>
13
+ <path d="M158,1.84777167 L158,138 C158,149.045695 149.045695,158 138,158 L66.3656919,158 L158,1.84777167 Z M156.152228,3.55271368e-13 L-9.37916411e-13,91.6343081 L-9.37916411e-13,20 C-9.09494702e-13,8.954305 8.954305,3.55271368e-13 20,3.41060513e-13 L156.152228,3.55271368e-13 Z" id="Combined-Shape-Copy-4" fill="url(#linearGradient-1)"></path>
14
+ </g>
15
+ <g id="PatternFly-Copy-11" transform="translate(206.000000, 45.750000)" fill="#FFFFFF" fill-rule="nonzero">
16
+ <path d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z" id="Shape"></path>
17
+ <path d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z" id="Shape"></path>
18
+ <path d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z" id="Path"></path>
19
+ <path d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z" id="Path"></path>
20
+ <path d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z" id="Shape"></path>
21
+ <path d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z" id="Path"></path>
22
+ <path d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z" id="Path"></path>
23
+ <polygon id="Path" points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"></polygon>
24
+ <polygon id="Path" points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"></polygon>
25
+ <path d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z" id="Path"></path>
26
+ </g>
27
+ </g>
28
+ </svg>
@@ -0,0 +1,17 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg width="158px" height="158px" viewBox="0 0 158 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3
+ <title>PF-IconLogo-color </title>
4
+ <defs>
5
+ <linearGradient x1="68%" y1="2.25860997e-13%" x2="32%" y2="100%" id="linearGradient-1">
6
+ <stop stop-color="#2B9AF3" offset="0%"></stop>
7
+ <stop stop-color="#73BCF7" stop-opacity="0.502212631" offset="100%"></stop>
8
+ </linearGradient>
9
+ </defs>
10
+ <g id="PF-IconLogo-color" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
11
+ <g id="Logo">
12
+ <path d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z" id="Rectangle-Copy-17" fill="#0066CC"></path>
13
+ <path d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z" id="Path-2" fill="url(#linearGradient-1)"></path>
14
+ <path d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z" id="Path-2" fill="url(#linearGradient-1)" transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "></path>
15
+ </g>
16
+ </g>
17
+ </svg>
@@ -1,7 +1,11 @@
1
+ :root,
1
2
  .pf-v5-c-backdrop {
2
3
  --pf-v5-c-backdrop--Position: fixed;
3
- --pf-v5-c-backdrop--ZIndex: var(--pf-v5-global--ZIndex--lg);
4
- --pf-v5-c-backdrop--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-transparent-100);
4
+ --pf-v5-c-backdrop--ZIndex: var(--pf-t--global--Zindex--lg);
5
+ --pf-v5-c-backdrop--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);
6
+ }
7
+
8
+ .pf-v5-c-backdrop {
5
9
  position: var(--pf-v5-c-backdrop--Position);
6
10
  inset-block-start: 0;
7
11
  inset-inline-start: 0;
@@ -1,10 +1,13 @@
1
1
  // @debug $backdrop; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
+ :root,
3
4
  .#{$backdrop} {
4
5
  --#{$backdrop}--Position: fixed;
5
- --#{$backdrop}--ZIndex: var(--#{$pf-global}--ZIndex--lg);
6
- --#{$backdrop}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-transparent-100);
6
+ --#{$backdrop}--ZIndex: var(--pf-t--global--Zindex--lg);
7
+ --#{$backdrop}--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);
8
+ }
7
9
 
10
+ .#{$backdrop} {
8
11
  position: var(--#{$backdrop}--Position);
9
12
  inset-block-start: 0;
10
13
  inset-inline-start: 0;
@@ -77,6 +77,10 @@
77
77
  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-info--BackgroundColor);
78
78
  --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-info--Color);
79
79
  }
80
+ .pf-v5-c-banner.pf-m-custom {
81
+ --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-custom--BackgroundColor);
82
+ --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-custom--Color);
83
+ }
80
84
  .pf-v5-c-banner.pf-m-red {
81
85
  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-red--BackgroundColor);
82
86
  --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-red--Color);
@@ -90,6 +90,11 @@
90
90
  --#{$banner}--Color: var(--#{$banner}--m-info--Color);
91
91
  }
92
92
 
93
+ &.pf-m-custom {
94
+ --#{$banner}--BackgroundColor: var(--#{$banner}--m-custom--BackgroundColor);
95
+ --#{$banner}--Color: var(--#{$banner}--m-custom--Color);
96
+ }
97
+
93
98
  &.pf-m-red {
94
99
  --#{$banner}--BackgroundColor: var(--#{$banner}--m-red--BackgroundColor);
95
100
  --#{$banner}--Color: var(--#{$banner}--m-red--Color);
@@ -105,6 +105,9 @@
105
105
  background-color: var(--pf-v5-c-card--BackgroundColor);
106
106
  box-shadow: var(--pf-v5-c-card--BoxShadow);
107
107
  }
108
+ .pf-v5-c-card.pf-m-selectable .pf-v5-c-card__selectable-actions :is(.pf-v5-c-check, .pf-v5-c-radio) {
109
+ gap: 0;
110
+ }
108
111
  .pf-v5-c-card.pf-m-selectable, .pf-v5-c-card.pf-m-clickable {
109
112
  isolation: isolate;
110
113
  box-shadow: none;
@@ -149,6 +149,14 @@
149
149
  box-shadow: var(--#{$card}--BoxShadow);
150
150
 
151
151
  // SELECTABLE CARDS, CLICKABLE CARDS
152
+ &.pf-m-selectable {
153
+ // disables the gap since these have an empty label
154
+ // TODO - update/refactor selectable check/radio to use the standalone varioation with a <label> on the outer parent component class element
155
+ .#{$card}__selectable-actions :is(.#{$check}, .#{$radio}) {
156
+ gap: 0;
157
+ }
158
+ }
159
+
152
160
  &.pf-m-selectable,
153
161
  &.pf-m-clickable {
154
162
  isolation: isolate;
@@ -247,6 +247,9 @@
247
247
  max-width: var(--pf-v5-c-form--m-limit-width--MaxWidth);
248
248
  }
249
249
 
250
+ .pf-v5-c-form__group {
251
+ min-width: 0;
252
+ }
250
253
  .pf-v5-c-form__group.pf-m-action {
251
254
  margin-block-start: var(--pf-v5-c-form__group--m-action--MarginTop);
252
255
  overflow: hidden;
@@ -335,6 +338,9 @@
335
338
  --pf-v5-c-form__group-label-help--Color: var(--pf-v5-c-form__group-label-help--focus--Color);
336
339
  }
337
340
 
341
+ .pf-v5-c-form__group-control {
342
+ min-width: 0;
343
+ }
338
344
  .pf-v5-c-form__group-control.pf-m-inline {
339
345
  display: flex;
340
346
  flex-flow: row wrap;
@@ -221,6 +221,8 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
221
221
  }
222
222
 
223
223
  .#{$form}__group {
224
+ min-width: 0;
225
+
224
226
  &.pf-m-action {
225
227
  margin-block-start: var(--#{$form}__group--m-action--MarginTop);
226
228
  overflow: hidden; // keeps the negative bottom margin bottom on .#{$form}__actions from triggering overflow
@@ -320,8 +322,9 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
320
322
  }
321
323
  }
322
324
 
323
-
324
325
  .#{$form}__group-control {
326
+ min-width: 0;
327
+
325
328
  &.pf-m-inline {
326
329
  display: flex;
327
330
  flex-flow: row wrap;
@@ -273,6 +273,7 @@
273
273
  align-self: stretch;
274
274
  }
275
275
  .pf-v5-c-menu-toggle.pf-m-split-button > .pf-v5-c-check .pf-v5-c-check__input {
276
+ --pf-v5-c-check__input--TranslateY: 0;
276
277
  align-self: center;
277
278
  }
278
279
  .pf-v5-c-menu-toggle.pf-m-split-button.pf-m-action:where(:not(.pf-m-primary, .pf-m-secondary, .pf-m-disabled)) > *::after {
@@ -360,6 +360,8 @@
360
360
  align-self: stretch;
361
361
 
362
362
  .#{$check}__input {
363
+ --#{$check}__input--TranslateY: 0;
364
+
363
365
  align-self: center;
364
366
  }
365
367
  }
@@ -157,12 +157,10 @@
157
157
 
158
158
  .pf-v5-c-popover__arrow {
159
159
  position: absolute;
160
- /* stylelint-disable liberty/use-logical-spec */
161
160
  top: var(--pf-v5-c-popover__arrow--Top, auto);
162
161
  right: var(--pf-v5-c-popover__arrow--Right, auto);
163
162
  bottom: var(--pf-v5-c-popover__arrow--Bottom, auto);
164
163
  left: var(--pf-v5-c-popover__arrow--Left, auto);
165
- /* stylelint-enable */
166
164
  width: var(--pf-v5-c-popover__arrow--Width);
167
165
  height: var(--pf-v5-c-popover__arrow--Height);
168
166
  pointer-events: none;
@@ -215,12 +215,12 @@
215
215
 
216
216
  .#{$popover}__arrow {
217
217
  position: absolute;
218
- /* stylelint-disable liberty/use-logical-spec */
218
+ // stylelint-disable liberty/use-logical-spec
219
219
  top: var(--#{$popover}__arrow--Top, auto);
220
220
  right: var(--#{$popover}__arrow--Right, auto);
221
221
  bottom: var(--#{$popover}__arrow--Bottom, auto);
222
222
  left: var(--#{$popover}__arrow--Left, auto);
223
- /* stylelint-enable */
223
+ // stylelint-enable
224
224
  width: var(--#{$popover}__arrow--Width);
225
225
  height: var(--#{$popover}__arrow--Height);
226
226
  pointer-events: none;
@@ -1,31 +1,28 @@
1
- .pf-v5-c-simple-list {
2
- --pf-v5-c-simple-list__item-link--PaddingTop: var(--pf-v5-global--spacer--xs);
3
- --pf-v5-c-simple-list__item-link--PaddingRight: var(--pf-v5-global--spacer--md);
4
- --pf-v5-c-simple-list__item-link--PaddingBottom: var(--pf-v5-global--spacer--xs);
5
- --pf-v5-c-simple-list__item-link--PaddingLeft: var(--pf-v5-global--spacer--md);
6
- --pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
7
- --pf-v5-c-simple-list__item-link--Color: var(--pf-v5-global--Color--100);
8
- --pf-v5-c-simple-list__item-link--FontSize: var(--pf-v5-global--FontSize--sm);
9
- --pf-v5-c-simple-list__item-link--FontWeight: var(--pf-v5-global--FontWeight--normal);
10
- --pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-v5-global--link--Color);
11
- --pf-v5-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
12
- --pf-v5-c-simple-list__item-link--m-current--FontWeight: var(--pf-v5-global--FontWeight--normal);
13
- --pf-v5-c-simple-list__item-link--hover--Color: var(--pf-v5-global--Color--100);
14
- --pf-v5-c-simple-list__item-link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
15
- --pf-v5-c-simple-list__item-link--focus--Color: var(--pf-v5-global--Color--100);
16
- --pf-v5-c-simple-list__item-link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
17
- --pf-v5-c-simple-list__item-link--focus--FontWeight: var(--pf-v5-global--FontWeight--normal);
18
- --pf-v5-c-simple-list__item-link--active--Color: var(--pf-v5-global--Color--100);
19
- --pf-v5-c-simple-list__item-link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
20
- --pf-v5-c-simple-list__item-link--active--FontWeight: var(--pf-v5-global--FontWeight--normal);
21
- --pf-v5-c-simple-list__title--PaddingTop: var(--pf-v5-global--spacer--sm);
22
- --pf-v5-c-simple-list__title--PaddingRight: var(--pf-v5-global--spacer--md);
23
- --pf-v5-c-simple-list__title--PaddingBottom: var(--pf-v5-global--spacer--sm);
24
- --pf-v5-c-simple-list__title--PaddingLeft: var(--pf-v5-global--spacer--md);
25
- --pf-v5-c-simple-list__title--FontSize: var(--pf-v5-global--FontSize--sm);
26
- --pf-v5-c-simple-list__title--Color: var(--pf-v5-global--Color--dark-200);
27
- --pf-v5-c-simple-list__title--FontWeight: var(--pf-v5-global--FontWeight--bold);
28
- --pf-v5-c-simple-list__section--section--MarginTop: var(--pf-v5-global--spacer--sm);
1
+ :root, .pf-v5-c-simple-list {
2
+ --pf-v5-c-simple-list__item-link--PaddingTop: var(--pf-t--global--spacer--xs);
3
+ --pf-v5-c-simple-list__item-link--PaddingRight: var(--pf-t--global--spacer--md);
4
+ --pf-v5-c-simple-list__item-link--PaddingBottom: var(--pf-t--global--spacer--xs);
5
+ --pf-v5-c-simple-list__item-link--PaddingLeft: var(--pf-t--global--spacer--md);
6
+ --pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
7
+ --pf-v5-c-simple-list__item-link--Color: var(--pf-t--global--text--color--subtle);
8
+ --pf-v5-c-simple-list__item-link--FontSize: var(--pf-t--global--font--size--body);
9
+ --pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-t--global--text--color--regular);
10
+ --pf-v5-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--selected);
11
+ --pf-v5-c-simple-list__item-link--hover--Color: var(--pf-t--global--text--color--subtle);
12
+ --pf-v5-c-simple-list__item-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
13
+ --pf-v5-c-simple-list__item-link--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
14
+ --pf-v5-c-simple-list__item-link--BorderRadius: var(--pf-t--global--border--radius--tiny);
15
+ --pf-v5-c-simple-list__item-link--m-link--Color: var(--pf-t--global--text--color--link--default);
16
+ --pf-v5-c-simple-list__item-link--m-link--m-current--Color: var(--pf-t--global--text--color--link--hover);
17
+ --pf-v5-c-simple-list__item-link--m-link--hover--Color: var(--pf-t--global--text--color--link--hover);
18
+ --pf-v5-c-simple-list__title--PaddingTop: var(--pf-t--global--spacer--sm);
19
+ --pf-v5-c-simple-list__title--PaddingRight: var(--pf-t--global--spacer--md);
20
+ --pf-v5-c-simple-list__title--PaddingBottom: var(--pf-t--global--spacer--sm);
21
+ --pf-v5-c-simple-list__title--PaddingLeft: var(--pf-t--global--spacer--md);
22
+ --pf-v5-c-simple-list__title--FontSize: var(--pf-t--global--font--size--body--sm);
23
+ --pf-v5-c-simple-list__title--Color: var(--pf-t--global--text--color--regular);
24
+ --pf-v5-c-simple-list__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
25
+ --pf-v5-c-simple-list__section--section--MarginTop: var(--pf-t--global--spacer--sm);
29
26
  }
30
27
 
31
28
  .pf-v5-c-simple-list__item-link {
@@ -36,31 +33,28 @@
36
33
  padding-inline-start: var(--pf-v5-c-simple-list__item-link--PaddingLeft);
37
34
  padding-inline-end: var(--pf-v5-c-simple-list__item-link--PaddingRight);
38
35
  font-size: var(--pf-v5-c-simple-list__item-link--FontSize);
39
- font-weight: var(--pf-v5-c-simple-list__item-link--FontWeight);
40
36
  color: var(--pf-v5-c-simple-list__item-link--Color);
41
37
  text-align: start;
38
+ text-decoration: none;
42
39
  background-color: var(--pf-v5-c-simple-list__item-link--BackgroundColor);
43
40
  border: none;
41
+ border-radius: var(--pf-v5-c-simple-list__item-link--BorderRadius);
42
+ }
43
+ .pf-v5-c-simple-list__item-link.pf-m-link {
44
+ --pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--m-link--Color);
45
+ --pf-v5-c-simple-list__item-link--hover--Color: var(--pf-v5-c-simple-list__item-link--m-link--m-current--Color);
46
+ --pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-v5-c-simple-list__item-link--m-link--hover--Color);
44
47
  }
45
- .pf-v5-c-simple-list__item-link:hover {
48
+ .pf-v5-c-simple-list__item-link:hover, .pf-v5-c-simple-list__item-link:focus {
46
49
  --pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-c-simple-list__item-link--hover--BackgroundColor);
47
50
  --pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--hover--Color);
48
51
  text-decoration: none;
49
- }
50
- .pf-v5-c-simple-list__item-link:focus {
51
- --pf-v5-c-simple-list__item-link--FontWeight: var(--pf-v5-c-simple-list__item-link--focus--FontWeight);
52
- --pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-c-simple-list__item-link--focus--BackgroundColor);
53
- --pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--focus--Color);
54
- }
55
- .pf-v5-c-simple-list__item-link:active {
56
- --pf-v5-c-simple-list__item-link--FontWeight: var(--pf-v5-c-simple-list__item-link--active--FontWeight);
57
- --pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-c-simple-list__item-link--active--BackgroundColor);
58
- --pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--active--Color);
52
+ mix-blend-mode: var(--pf-v5-c-simple-list__item-link--MixBlendMode);
59
53
  }
60
54
  .pf-v5-c-simple-list__item-link.pf-m-current {
61
- --pf-v5-c-simple-list__item-link--FontWeight: var(--pf-v5-c-simple-list__item-link--m-current--FontWeight);
62
55
  --pf-v5-c-simple-list__item-link--BackgroundColor: var(--pf-v5-c-simple-list__item-link--m-current--BackgroundColor);
63
56
  --pf-v5-c-simple-list__item-link--Color: var(--pf-v5-c-simple-list__item-link--m-current--Color);
57
+ mix-blend-mode: var(--pf-v5-c-simple-list__item-link--MixBlendMode);
64
58
  }
65
59
 
66
60
  .pf-v5-c-simple-list__title {
@@ -75,15 +69,4 @@
75
69
 
76
70
  .pf-v5-c-simple-list__section + .pf-v5-c-simple-list__section {
77
71
  margin-block-start: var(--pf-v5-c-simple-list__section--section--MarginTop);
78
- }
79
-
80
- :where(.pf-v5-theme-dark) .pf-v5-c-simple-list {
81
- --pf-v5-c-simple-list__item-link--m-current--Color: var(--pf-v5-global--active-color--100);
82
- --pf-v5-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
83
- --pf-v5-c-simple-list__item-link--hover--Color: var(--pf-v5-global--Color--100);
84
- --pf-v5-c-simple-list__item-link--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
85
- --pf-v5-c-simple-list__item-link--focus--Color: var(--pf-v5-global--Color--100);
86
- --pf-v5-c-simple-list__item-link--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
87
- --pf-v5-c-simple-list__item-link--active--Color: var(--pf-v5-global--Color--100);
88
- --pf-v5-c-simple-list__item-link--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
89
72
  }
@@ -1,38 +1,37 @@
1
1
  // @debug $simple-list; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
- .#{$simple-list} {
3
+ :root, .#{$simple-list} {
4
4
  // Simple list item link
5
- --#{$simple-list}__item-link--PaddingTop: var(--#{$pf-global}--spacer--xs);
6
- --#{$simple-list}__item-link--PaddingRight: var(--#{$pf-global}--spacer--md);
7
- --#{$simple-list}__item-link--PaddingBottom: var(--#{$pf-global}--spacer--xs);
8
- --#{$simple-list}__item-link--PaddingLeft: var(--#{$pf-global}--spacer--md);
9
- --#{$simple-list}__item-link--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
10
- --#{$simple-list}__item-link--Color: var(--#{$pf-global}--Color--100);
11
- --#{$simple-list}__item-link--FontSize: var(--#{$pf-global}--FontSize--sm);
12
- --#{$simple-list}__item-link--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change
13
- --#{$simple-list}__item-link--m-current--Color: var(--#{$pf-global}--link--Color);
14
- --#{$simple-list}__item-link--m-current--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
15
- --#{$simple-list}__item-link--m-current--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change
16
- --#{$simple-list}__item-link--hover--Color: var(--#{$pf-global}--Color--100); // remove at breaking change
17
- --#{$simple-list}__item-link--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
18
- --#{$simple-list}__item-link--focus--Color: var(--#{$pf-global}--Color--100); // remove at breaking change
19
- --#{$simple-list}__item-link--focus--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
20
- --#{$simple-list}__item-link--focus--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change
21
- --#{$simple-list}__item-link--active--Color: var(--#{$pf-global}--Color--100); // remove at breaking change
22
- --#{$simple-list}__item-link--active--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
23
- --#{$simple-list}__item-link--active--FontWeight: var(--#{$pf-global}--FontWeight--normal); // remove at breaking change
5
+ --#{$simple-list}__item-link--PaddingTop: var(--pf-t--global--spacer--xs);
6
+ --#{$simple-list}__item-link--PaddingRight: var(--pf-t--global--spacer--md);
7
+ --#{$simple-list}__item-link--PaddingBottom: var(--pf-t--global--spacer--xs);
8
+ --#{$simple-list}__item-link--PaddingLeft: var(--pf-t--global--spacer--md);
9
+ --#{$simple-list}__item-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
10
+ --#{$simple-list}__item-link--Color: var(--pf-t--global--text--color--subtle);
11
+ --#{$simple-list}__item-link--FontSize: var(--pf-t--global--font--size--body);
12
+ --#{$simple-list}__item-link--m-current--Color: var(--pf-t--global--text--color--regular);
13
+ --#{$simple-list}__item-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--selected);
14
+ --#{$simple-list}__item-link--hover--Color: var(--pf-t--global--text--color--subtle);
15
+ --#{$simple-list}__item-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
16
+ --#{$simple-list}__item-link--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
17
+ --#{$simple-list}__item-link--BorderRadius: var(--pf-t--global--border--radius--tiny);
18
+
19
+ // Simple list item link
20
+ --#{$simple-list}__item-link--m-link--Color: var(--pf-t--global--text--color--link--default);
21
+ --#{$simple-list}__item-link--m-link--m-current--Color: var(--pf-t--global--text--color--link--hover);
22
+ --#{$simple-list}__item-link--m-link--hover--Color: var(--pf-t--global--text--color--link--hover);
24
23
 
25
24
  // Simple list title
26
- --#{$simple-list}__title--PaddingTop: var(--#{$pf-global}--spacer--sm);
27
- --#{$simple-list}__title--PaddingRight: var(--#{$pf-global}--spacer--md);
28
- --#{$simple-list}__title--PaddingBottom: var(--#{$pf-global}--spacer--sm);
29
- --#{$simple-list}__title--PaddingLeft: var(--#{$pf-global}--spacer--md);
30
- --#{$simple-list}__title--FontSize: var(--#{$pf-global}--FontSize--sm);
31
- --#{$simple-list}__title--Color: var(--#{$pf-global}--Color--dark-200);
32
- --#{$simple-list}__title--FontWeight: var(--#{$pf-global}--FontWeight--bold);
25
+ --#{$simple-list}__title--PaddingTop: var(--pf-t--global--spacer--sm);
26
+ --#{$simple-list}__title--PaddingRight: var(--pf-t--global--spacer--md);
27
+ --#{$simple-list}__title--PaddingBottom: var(--pf-t--global--spacer--sm);
28
+ --#{$simple-list}__title--PaddingLeft: var(--pf-t--global--spacer--md);
29
+ --#{$simple-list}__title--FontSize: var(--pf-t--global--font--size--body--sm);
30
+ --#{$simple-list}__title--Color: var(--pf-t--global--text--color--regular);
31
+ --#{$simple-list}__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
33
32
 
34
33
  // Simple list section
35
- --#{$simple-list}__section--section--MarginTop: var(--#{$pf-global}--spacer--sm);
34
+ --#{$simple-list}__section--section--MarginTop: var(--pf-t--global--spacer--sm);
36
35
  }
37
36
 
38
37
  .#{$simple-list}__item-link {
@@ -43,35 +42,33 @@
43
42
  padding-inline-start: var(--#{$simple-list}__item-link--PaddingLeft);
44
43
  padding-inline-end: var(--#{$simple-list}__item-link--PaddingRight);
45
44
  font-size: var(--#{$simple-list}__item-link--FontSize);
46
- font-weight: var(--#{$simple-list}__item-link--FontWeight);
47
45
  color: var(--#{$simple-list}__item-link--Color);
48
46
  text-align: start;
47
+ text-decoration: none;
49
48
  background-color: var(--#{$simple-list}__item-link--BackgroundColor);
50
49
  border: none;
50
+ border-radius: var(--#{$simple-list}__item-link--BorderRadius);
51
+
52
+ &.pf-m-link {
53
+ --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--m-link--Color);
54
+ --#{$simple-list}__item-link--hover--Color: var(--#{$simple-list}__item-link--m-link--m-current--Color);
55
+ --#{$simple-list}__item-link--m-current--Color: var(--#{$simple-list}__item-link--m-link--hover--Color);
56
+ }
51
57
 
52
- &:hover {
58
+ &:hover,
59
+ &:focus {
53
60
  --#{$simple-list}__item-link--BackgroundColor: var(--#{$simple-list}__item-link--hover--BackgroundColor);
54
61
  --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--hover--Color);
55
62
 
56
63
  text-decoration: none;
57
- }
58
-
59
- &:focus {
60
- --#{$simple-list}__item-link--FontWeight: var(--#{$simple-list}__item-link--focus--FontWeight);
61
- --#{$simple-list}__item-link--BackgroundColor: var(--#{$simple-list}__item-link--focus--BackgroundColor);
62
- --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--focus--Color);
63
- }
64
-
65
- &:active {
66
- --#{$simple-list}__item-link--FontWeight: var(--#{$simple-list}__item-link--active--FontWeight);
67
- --#{$simple-list}__item-link--BackgroundColor: var(--#{$simple-list}__item-link--active--BackgroundColor);
68
- --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--active--Color);
64
+ mix-blend-mode: var(--#{$simple-list}__item-link--MixBlendMode);
69
65
  }
70
66
 
71
67
  &.pf-m-current {
72
- --#{$simple-list}__item-link--FontWeight: var(--#{$simple-list}__item-link--m-current--FontWeight);
73
68
  --#{$simple-list}__item-link--BackgroundColor: var(--#{$simple-list}__item-link--m-current--BackgroundColor);
74
69
  --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--m-current--Color);
70
+
71
+ mix-blend-mode: var(--#{$simple-list}__item-link--MixBlendMode);
75
72
  }
76
73
  }
77
74
 
@@ -87,11 +84,4 @@
87
84
 
88
85
  .#{$simple-list}__section + .#{$simple-list}__section {
89
86
  margin-block-start: var(--#{$simple-list}__section--section--MarginTop);
90
- }
91
-
92
- // stylelint-disable no-invalid-position-at-import-rule
93
- @import "themes/dark/simple-list";
94
-
95
- @include pf-v5-theme-dark {
96
- @include pf-v5-theme-dark-simple-list;
97
- }
87
+ }
@@ -986,6 +986,7 @@
986
986
  margin-block-end: calc(var(--#{$table}--cell--PaddingBottom) * -1);
987
987
  margin-inline-start: calc(var(--#{$table}--cell--PaddingLeft) * -1);
988
988
  margin-inline-end: calc(var(--#{$table}--cell--PaddingRight) * -1);
989
+
989
990
  }
990
991
 
991
992
  @at-root .#{$table}__thead .#{$check}.pf-m-standalone {
@@ -108,12 +108,10 @@
108
108
 
109
109
  .pf-v5-c-tooltip__arrow {
110
110
  position: absolute;
111
- /* stylelint-disable liberty/use-logical-spec */
112
111
  top: var(--pf-v5-c-tooltip__arrow--Top, auto);
113
112
  right: var(--pf-v5-c-tooltip__arrow--Right, auto);
114
113
  bottom: var(--pf-v5-c-tooltip__arrow--Bottom, auto);
115
114
  left: var(--pf-v5-c-tooltip__arrow--Left, auto);
116
- /* stylelint-enable */
117
115
  width: var(--pf-v5-c-tooltip__arrow--Width);
118
116
  height: var(--pf-v5-c-tooltip__arrow--Height);
119
117
  pointer-events: none;
@@ -54,7 +54,7 @@
54
54
  .pf-m-bottom,
55
55
  .pf-m-bottom-left,
56
56
  .pf-m-bottom-right
57
- ) {
57
+ ) {
58
58
  --#{$tooltip}__arrow--Top: var(--#{$tooltip}--m-bottom--Top, 0);
59
59
  --#{$tooltip}__arrow--Left: var(--#{$tooltip}--m-bottom--Left, 50%);
60
60
  --#{$tooltip}__arrow--TranslateX: var(--#{$tooltip}__arrow--m-bottom--TranslateX);
@@ -139,12 +139,12 @@
139
139
 
140
140
  .#{$tooltip}__arrow {
141
141
  position: absolute;
142
- /* stylelint-disable liberty/use-logical-spec */
142
+ // stylelint-disable liberty/use-logical-spec
143
143
  top: var(--#{$tooltip}__arrow--Top, auto);
144
144
  right: var(--#{$tooltip}__arrow--Right, auto);
145
145
  bottom: var(--#{$tooltip}__arrow--Bottom, auto);
146
146
  left: var(--#{$tooltip}__arrow--Left, auto);
147
- /* stylelint-enable */
147
+ // stylelint-enable
148
148
  width: var(--#{$tooltip}__arrow--Width);
149
149
  height: var(--#{$tooltip}__arrow--Height);
150
150
  pointer-events: none;
@@ -1,6 +1,10 @@
1
+ :root,
1
2
  .pf-v5-c-truncate {
2
3
  --pf-v5-c-truncate--MinWidth: 12ch;
3
4
  --pf-v5-c-truncate__start--MinWidth: 6ch;
5
+ }
6
+
7
+ .pf-v5-c-truncate {
4
8
  display: inline-grid;
5
9
  grid-auto-flow: column;
6
10
  align-items: baseline;
@@ -1,9 +1,12 @@
1
1
  // @debug $truncate; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
+ :root,
3
4
  .#{$truncate} {
4
5
  --#{$truncate}--MinWidth: 12ch;
5
6
  --#{$truncate}__start--MinWidth: 6ch;
7
+ }
6
8
 
9
+ .#{$truncate} {
7
10
  display: inline-grid;
8
11
  grid-auto-flow: column;
9
12
  align-items: baseline;
@@ -694,17 +694,17 @@ cssPrefix: pf-v5-c-accordion
694
694
 
695
695
  There are two variations to build the accordion component. The first is to use `<div>` and `<h1 - h6>` tags:
696
696
 
697
- * `.pf-v5-c-accordion` is placed on a `<div>`,
698
- * `.pf-v5-c-accordion__toggle` is placed on a `<button>` that is inside a `<h1-h6>`, and
699
- * `.pf-v5-c-accordion__expandable-content` is placed on a `<div>`.
697
+ * `.pf-v5-c-accordion` is placed on a `<div>`,
698
+ * `.pf-v5-c-accordion__toggle` is placed on a `<button>` that is inside a `<h1-h6>`, and
699
+ * `.pf-v5-c-accordion__expandable-content` is placed on a `<div>`.
700
700
 
701
701
  The heading level that you use should fit within the rest of the headings outlined on your page.
702
702
 
703
703
  Another variation is using the definition list:
704
704
 
705
- * `.pf-v5-c-accordion` is placed on a `<dl>`,
706
- * `.pf-v5-c-accordion__toggle` is placed on a `<button>` that is inside a `<dt>`, and
707
- * `.pf-v5-c-accordion__expandable-content` is placed on a `<dd>`.
705
+ * `.pf-v5-c-accordion` is placed on a `<dl>`,
706
+ * `.pf-v5-c-accordion__toggle` is placed on a `<button>` that is inside a `<dt>`, and
707
+ * `.pf-v5-c-accordion__expandable-content` is placed on a `<dd>`.
708
708
 
709
709
  ### Usage
710
710