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

package/CODE_OF_CONDUCT.md

@@ -1,5 +1,4 @@
 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].
 
  [1]: https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
- [2]: mailto:patternfly@redhat.com
- 
+ [2]: mailto:patternfly@redhat.com

package/assets/images/PF-HorizontalLogo-Color.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<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">
+    <title>PF-HorizontalLogo-Color </title>
+    <defs>
+        <linearGradient x1="68%" y1="2.25860997e-13%" x2="32%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#2B9AF3" offset="0%"></stop>
+            <stop stop-color="#73BCF7" stop-opacity="0.502212631" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="PF-HorizontalLogo-Color" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="PatternFly-Copy-11" transform="translate(206.000000, 45.750000)" fill="#151515" fill-rule="nonzero">
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <polygon id="Path" points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"></polygon>
+            <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>
+        </g>
+        <g id="Logo" transform="translate(0.000000, 0.000000)">
+            <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>
+            <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>
+            <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>
+        </g>
+    </g>
+</svg>

package/assets/images/PF-HorizontalLogo-Reverse.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<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">
+    <title>PF-HorizontalLogo-Reverse </title>
+    <defs>
+        <linearGradient x1="100%" y1="1.31838984e-13%" x2="40.4021492%" y2="59.4473677%" id="linearGradient-1">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" stop-opacity="0.498497596" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="PF-HorizontalLogo-Reverse" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(-0.000000, 0.000000)">
+            <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>
+            <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>
+        </g>
+        <g id="PatternFly-Copy-11" transform="translate(206.000000, 45.750000)" fill="#FFFFFF" fill-rule="nonzero">
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <polygon id="Path" points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"></polygon>
+            <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>
+        </g>
+    </g>
+</svg>

package/assets/images/PF-IconLogo-color.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<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">
+    <title>PF-IconLogo-color </title>
+    <defs>
+        <linearGradient x1="68%" y1="2.25860997e-13%" x2="32%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#2B9AF3" offset="0%"></stop>
+            <stop stop-color="#73BCF7" stop-opacity="0.502212631" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="PF-IconLogo-color" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Logo">
+            <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>
+            <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>
+            <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>
+        </g>
+    </g>
+</svg>

package/base/patternfly-variables.css

@@ -414,6 +414,7 @@ html .ws-preview {
   --pf-t--global--border--width--300: 3px;
   --pf-t--global--border--width--200: 2px;
   --pf-t--global--border--width--100: 1px;
+  --pf-t--global--icon--size--500: 96px;
   --pf-t--global--icon--size--400: 56px;
   --pf-t--global--icon--size--300: 22px;
   --pf-t--global--icon--size--250: 16px;
@@ -530,6 +531,7 @@ html .ws-preview {
   --pf-t--global--icon--color--300: var(--pf-t--color--white);
   --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
   --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
+  --pf-t--global--icon--size--3xl: var(--pf-t--global--icon--size--500);
   --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400);
   --pf-t--global--icon--size--xl: var(--pf-t--global--icon--size--300);
   --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250);

package/base/tokens/_tokens-default.scss

@@ -29,6 +29,7 @@
   --pf-t--global--border--width--300: 3px;
   --pf-t--global--border--width--200: 2px;
   --pf-t--global--border--width--100: 1px;
+  --pf-t--global--icon--size--500: 96px;
   --pf-t--global--icon--size--400: 56px;
   --pf-t--global--icon--size--300: 22px;
   --pf-t--global--icon--size--250: 16px;
@@ -145,6 +146,7 @@
   --pf-t--global--icon--color--300: var(--pf-t--color--white);
   --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
   --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
+  --pf-t--global--icon--size--3xl: var(--pf-t--global--icon--size--500);
   --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400);
   --pf-t--global--icon--size--xl: var(--pf-t--global--icon--size--300);
   --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250);

package/components/Backdrop/backdrop.css

@@ -1,7 +1,11 @@
+:root,
 .pf-v5-c-backdrop {
   --pf-v5-c-backdrop--Position: fixed;
-  --pf-v5-c-backdrop--ZIndex: var(--pf-v5-global--ZIndex--lg);
-  --pf-v5-c-backdrop--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-transparent-100);
+  --pf-v5-c-backdrop--ZIndex: var(--pf-t--global--Zindex--lg);
+  --pf-v5-c-backdrop--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);
+}
+
+.pf-v5-c-backdrop {
   position: var(--pf-v5-c-backdrop--Position);
   inset-block-start: 0;
   inset-inline-start: 0;

package/components/Backdrop/backdrop.scss

@@ -1,10 +1,13 @@
 // @debug $backdrop; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
+:root,
 .#{$backdrop} {
   --#{$backdrop}--Position: fixed;
-  --#{$backdrop}--ZIndex: var(--#{$pf-global}--ZIndex--lg);
-  --#{$backdrop}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--dark-transparent-100);
+  --#{$backdrop}--ZIndex: var(--pf-t--global--Zindex--lg);
+  --#{$backdrop}--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);
+}
 
+.#{$backdrop} {
   position: var(--#{$backdrop}--Position);
   inset-block-start: 0;
   inset-inline-start: 0;

package/components/Banner/banner.css

@@ -77,6 +77,10 @@
   --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-info--BackgroundColor);
   --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-info--Color);
 }
+.pf-v5-c-banner.pf-m-custom {
+  --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-custom--BackgroundColor);
+  --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-custom--Color);
+}
 .pf-v5-c-banner.pf-m-red {
   --pf-v5-c-banner--BackgroundColor: var(--pf-v5-c-banner--m-red--BackgroundColor);
   --pf-v5-c-banner--Color: var(--pf-v5-c-banner--m-red--Color);

package/components/Banner/banner.scss

@@ -90,6 +90,11 @@
     --#{$banner}--Color: var(--#{$banner}--m-info--Color);
   }
 
+  &.pf-m-custom {
+    --#{$banner}--BackgroundColor: var(--#{$banner}--m-custom--BackgroundColor);
+    --#{$banner}--Color: var(--#{$banner}--m-custom--Color);
+  }
+
   &.pf-m-red {
     --#{$banner}--BackgroundColor: var(--#{$banner}--m-red--BackgroundColor);
     --#{$banner}--Color: var(--#{$banner}--m-red--Color);

package/components/Card/card.css

@@ -105,6 +105,9 @@
   background-color: var(--pf-v5-c-card--BackgroundColor);
   box-shadow: var(--pf-v5-c-card--BoxShadow);
 }
+.pf-v5-c-card.pf-m-selectable .pf-v5-c-card__selectable-actions :is(.pf-v5-c-check, .pf-v5-c-radio) {
+  gap: 0;
+}
 .pf-v5-c-card.pf-m-selectable, .pf-v5-c-card.pf-m-clickable {
   isolation: isolate;
   box-shadow: none;

package/components/Card/card.scss

@@ -149,6 +149,14 @@
   box-shadow: var(--#{$card}--BoxShadow);
 
   // SELECTABLE CARDS, CLICKABLE CARDS
+  &.pf-m-selectable {
+    // disables the gap since these have an empty label
+    // TODO - update/refactor selectable check/radio to use the standalone varioation with a <label> on the outer parent component class element
+    .#{$card}__selectable-actions :is(.#{$check}, .#{$radio}) {
+      gap: 0;
+    }
+  }
+
   &.pf-m-selectable,
   &.pf-m-clickable {
     isolation: isolate;

package/components/EmptyState/empty-state.css

@@ -1,41 +1,49 @@
-.pf-v5-c-empty-state {
-  --pf-v5-c-empty-state--PaddingTop: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-empty-state--PaddingRight: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-empty-state--PaddingBottom: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-empty-state--PaddingLeft: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-empty-state--m-xs--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-empty-state--m-xs--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-empty-state--m-xs--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-empty-state--m-xs--PaddingLeft: var(--pf-v5-global--spacer--md);
+:root {
+  --pf-v5-c-empty-state--PaddingTop: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-empty-state--PaddingRight: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-empty-state--PaddingBottom: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-empty-state--PaddingLeft: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-empty-state--m-xs--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-empty-state--m-xs--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-empty-state--m-xs--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-empty-state--m-xs--PaddingLeft: var(--pf-t--global--spacer--md);
   --pf-v5-c-empty-state__content--MaxWidth: none;
   --pf-v5-c-empty-state--m-xs__content--MaxWidth: 21.875rem;
   --pf-v5-c-empty-state--m-sm__content--MaxWidth: 25rem;
   --pf-v5-c-empty-state--m-lg__content--MaxWidth: 37.5rem;
-  --pf-v5-c-empty-state__icon--MarginBottom: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-empty-state__icon--FontSize: var(--pf-v5-global--icon--FontSize--xl);
-  --pf-v5-c-empty-state__icon--Color: var(--pf-v5-global--icon--Color--light);
-  --pf-v5-c-empty-state--m-xs__icon--MarginBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-empty-state--m-xl__icon--MarginBottom: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-empty-state--m-xl__icon--FontSize: 6.25rem;
-  --pf-v5-c-empty-state__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
-  --pf-v5-c-empty-state__title-text--FontSize: var(--pf-v5-global--FontSize--xl);
-  --pf-v5-c-empty-state__title-text--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-empty-state__title-text--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-empty-state--m-xs__title-text--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-empty-state--m-xl__title-text--FontSize: var(--pf-v5-global--FontSize--4xl);
-  --pf-v5-c-empty-state--m-xl__title-text--LineHeight: var(--pf-v5-global--LineHeight--sm);
-  --pf-v5-c-empty-state__body--MarginTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-empty-state__body--Color: var(--pf-v5-global--Color--200);
-  --pf-v5-c-empty-state--body--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-empty-state--m-xs__body--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-empty-state--m-xs__body--MarginTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-empty-state--m-xl__body--FontSize: var(--pf-v5-global--FontSize--xl);
-  --pf-v5-c-empty-state--m-xl__body--MarginTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-empty-state__footer--RowGap: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-empty-state__footer--MarginTop: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-empty-state--m-xs__footer--MarginTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-empty-state__actions--RowGap: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-empty-state__actions--ColumnGap: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-empty-state__icon--MarginBottom: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-empty-state__icon--FontSize: var(--pf-t--global--icon--size--2xl);
+  --pf-v5-c-empty-state__icon--Color: var(--pf-t--global--icon--color--subtle);
+  --pf-v5-c-empty-state--m-xs__icon--MarginBottom: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-empty-state--m-xl__icon--MarginBottom: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-empty-state--m-xl__icon--FontSize: var(--pf-t--global--icon--size--3xl);
+  --pf-v5-c-empty-state--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --pf-v5-c-empty-state--m-warning__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
+  --pf-v5-c-empty-state--m-success__icon--Color: var(--pf-t--global--icon--color--status--success--default);
+  --pf-v5-c-empty-state--m-info__icon--Color: var(--pf-t--global--icon--color--status--info--default);
+  --pf-v5-c-empty-state--m-custom__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
+  --pf-v5-c-empty-state__title-text--FontFamily: var(--pf-t--global--font--family--heading);
+  --pf-v5-c-empty-state__title-text--FontSize: var(--pf-t--global--font--size--heading--md);
+  --pf-v5-c-empty-state__title-text--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-empty-state__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-empty-state--m-xs__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --pf-v5-c-empty-state--m-xl__title-text--FontSize: var(--pf-t--global--font--size--heading--2xl);
+  --pf-v5-c-empty-state--m-xl__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-empty-state__body--MarginTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-empty-state__body--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-empty-state--body--FontSize: var(--pf-t--global--font--size--body--lg);
+  --pf-v5-c-empty-state--m-xs__body--FontSize: var(--pf-t--global--font--size--body--lg);
+  --pf-v5-c-empty-state--m-xs__body--MarginTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-empty-state--m-xl__body--FontSize: var(--pf-t--global--font--size--body--lg);
+  --pf-v5-c-empty-state--m-xl__body--MarginTop: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-empty-state__footer--RowGap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-empty-state__footer--MarginTop: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-empty-state--m-xs__footer--MarginTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-empty-state__actions--RowGap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-empty-state__actions--ColumnGap: var(--pf-t--global--spacer--md);
+}
+
+.pf-v5-c-empty-state {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -74,6 +82,21 @@
 .pf-v5-c-empty-state.pf-m-full-height {
   height: 100%;
 }
+.pf-v5-c-empty-state.pf-m-danger {
+  --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-danger__icon--Color);
+}
+.pf-v5-c-empty-state.pf-m-warning {
+  --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-warning__icon--Color);
+}
+.pf-v5-c-empty-state.pf-m-success {
+  --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-success__icon--Color);
+}
+.pf-v5-c-empty-state.pf-m-info {
+  --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-info__icon--Color);
+}
+.pf-v5-c-empty-state.pf-m-custom {
+  --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-custom__icon--Color);
+}
 
 .pf-v5-c-empty-state__content {
   max-width: var(--pf-v5-c-empty-state__content--MaxWidth);

package/components/EmptyState/empty-state.scss

@@ -1,14 +1,14 @@
 // @debug $empty-state; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$empty-state} {
-  --#{$empty-state}--PaddingTop: var(--#{$pf-global}--spacer--xl);
-  --#{$empty-state}--PaddingRight: var(--#{$pf-global}--spacer--xl);
-  --#{$empty-state}--PaddingBottom: var(--#{$pf-global}--spacer--xl);
-  --#{$empty-state}--PaddingLeft: var(--#{$pf-global}--spacer--xl);
-  --#{$empty-state}--m-xs--PaddingTop: var(--#{$pf-global}--spacer--md);
-  --#{$empty-state}--m-xs--PaddingRight: var(--#{$pf-global}--spacer--md);
-  --#{$empty-state}--m-xs--PaddingBottom: var(--#{$pf-global}--spacer--md);
-  --#{$empty-state}--m-xs--PaddingLeft: var(--#{$pf-global}--spacer--md);
+:root {
+  --#{$empty-state}--PaddingTop: var(--pf-t--global--spacer--xl);
+  --#{$empty-state}--PaddingRight: var(--pf-t--global--spacer--xl);
+  --#{$empty-state}--PaddingBottom: var(--pf-t--global--spacer--xl);
+  --#{$empty-state}--PaddingLeft: var(--pf-t--global--spacer--xl);
+  --#{$empty-state}--m-xs--PaddingTop: var(--pf-t--global--spacer--md);
+  --#{$empty-state}--m-xs--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$empty-state}--m-xs--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$empty-state}--m-xs--PaddingLeft: var(--pf-t--global--spacer--md);
 
   // Content
   --#{$empty-state}__content--MaxWidth: none;
@@ -17,40 +17,49 @@
   --#{$empty-state}--m-lg__content--MaxWidth: #{pf-size-prem(600px)};
 
   // Icon
-  --#{$empty-state}__icon--MarginBottom: var(--#{$pf-global}--spacer--lg);
-  --#{$empty-state}__icon--FontSize: var(--#{$pf-global}--icon--FontSize--xl);
-  --#{$empty-state}__icon--Color: var(--#{$pf-global}--icon--Color--light);
-  --#{$empty-state}--m-xs__icon--MarginBottom: var(--#{$pf-global}--spacer--md);
-  --#{$empty-state}--m-xl__icon--MarginBottom: var(--#{$pf-global}--spacer--xl);
-  --#{$empty-state}--m-xl__icon--FontSize: #{pf-size-prem(100px)};
+  --#{$empty-state}__icon--MarginBottom: var(--pf-t--global--spacer--lg);
+  --#{$empty-state}__icon--FontSize: var(--pf-t--global--icon--size--2xl);
+  --#{$empty-state}__icon--Color: var(--pf-t--global--icon--color--subtle);
+  --#{$empty-state}--m-xs__icon--MarginBottom: var(--pf-t--global--spacer--lg);
+  --#{$empty-state}--m-xl__icon--MarginBottom: var(--pf-t--global--spacer--xl);
+  --#{$empty-state}--m-xl__icon--FontSize: var(--pf-t--global--icon--size--3xl);
+
+  // Status variant icon color
+  --#{$empty-state}--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --#{$empty-state}--m-warning__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
+  --#{$empty-state}--m-success__icon--Color: var(--pf-t--global--icon--color--status--success--default);
+  --#{$empty-state}--m-info__icon--Color: var(--pf-t--global--icon--color--status--info--default);
+  --#{$empty-state}--m-custom__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
 
   // Title text
-  --#{$empty-state}__title-text--FontFamily: var(--#{$pf-global}--FontFamily--heading);
-  --#{$empty-state}__title-text--FontSize: var(--#{$pf-global}--FontSize--xl);
-  --#{$empty-state}__title-text--FontWeight: var(--#{$pf-global}--FontWeight--normal);
-  --#{$empty-state}__title-text--LineHeight: var(--#{$pf-global}--LineHeight--md);
-  --#{$empty-state}--m-xs__title-text--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$empty-state}--m-xl__title-text--FontSize: var(--#{$pf-global}--FontSize--4xl);
-  --#{$empty-state}--m-xl__title-text--LineHeight: var(--#{$pf-global}--LineHeight--sm);
+  --#{$empty-state}__title-text--FontFamily: var(--pf-t--global--font--family--heading);
+  --#{$empty-state}__title-text--FontSize: var(--pf-t--global--font--size--heading--md);
+  --#{$empty-state}__title-text--FontWeight: var(--pf-t--global--font--weight--heading);
+  --#{$empty-state}__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$empty-state}--m-xs__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --#{$empty-state}--m-xl__title-text--FontSize: var(--pf-t--global--font--size--heading--2xl);
+  --#{$empty-state}--m-xl__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
 
   // Body
-  --#{$empty-state}__body--MarginTop: var(--#{$pf-global}--spacer--md);
-  --#{$empty-state}__body--Color: var(--#{$pf-global}--Color--200);
-  --#{$empty-state}--body--FontSize: var(--#{$pf-global}--FontSize--md);
-  --#{$empty-state}--m-xs__body--FontSize: var(--#{$pf-global}--FontSize--sm);
-  --#{$empty-state}--m-xs__body--MarginTop: var(--#{$pf-global}--spacer--md);
-  --#{$empty-state}--m-xl__body--FontSize: var(--#{$pf-global}--FontSize--xl);
-  --#{$empty-state}--m-xl__body--MarginTop: var(--#{$pf-global}--spacer--lg);
+  --#{$empty-state}__body--MarginTop: var(--pf-t--global--spacer--md);
+  --#{$empty-state}__body--Color: var(--pf-t--global--text--color--subtle);
+  --#{$empty-state}--body--FontSize: var(--pf-t--global--font--size--body--lg);
+  --#{$empty-state}--m-xs__body--FontSize: var(--pf-t--global--font--size--body--lg);
+  --#{$empty-state}--m-xs__body--MarginTop: var(--pf-t--global--spacer--md);
+  --#{$empty-state}--m-xl__body--FontSize: var(--pf-t--global--font--size--body--lg);
+  --#{$empty-state}--m-xl__body--MarginTop: var(--pf-t--global--spacer--xl);
 
   // Footer
-  --#{$empty-state}__footer--RowGap: var(--#{$pf-global}--spacer--sm);
-  --#{$empty-state}__footer--MarginTop: var(--#{$pf-global}--spacer--xl);
-  --#{$empty-state}--m-xs__footer--MarginTop: var(--#{$pf-global}--spacer--md);
+  --#{$empty-state}__footer--RowGap: var(--pf-t--global--spacer--sm);
+  --#{$empty-state}__footer--MarginTop: var(--pf-t--global--spacer--xl);
+  --#{$empty-state}--m-xs__footer--MarginTop: var(--pf-t--global--spacer--md);
 
   // Actions
-  --#{$empty-state}__actions--RowGap: var(--#{$pf-global}--spacer--xs);
-  --#{$empty-state}__actions--ColumnGap: var(--#{$pf-global}--spacer--xs);
+  --#{$empty-state}__actions--RowGap: var(--pf-t--global--spacer--sm);
+  --#{$empty-state}__actions--ColumnGap: var(--pf-t--global--spacer--md);
+}
 
+.#{$empty-state} {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -93,6 +102,26 @@
   &.pf-m-full-height {
     height: 100%;
   }
+
+  &.pf-m-danger {
+    --#{$empty-state}__icon--Color: var(--#{$empty-state}--m-danger__icon--Color);
+  }
+
+  &.pf-m-warning {
+    --#{$empty-state}__icon--Color: var(--#{$empty-state}--m-warning__icon--Color);
+  }
+
+  &.pf-m-success {
+    --#{$empty-state}__icon--Color: var(--#{$empty-state}--m-success__icon--Color);
+  }
+
+  &.pf-m-info {
+    --#{$empty-state}__icon--Color: var(--#{$empty-state}--m-info__icon--Color);
+  }
+
+  &.pf-m-custom {
+    --#{$empty-state}__icon--Color: var(--#{$empty-state}--m-custom__icon--Color);
+  }
 }
 
 .#{$empty-state}__content {

package/components/ExpandableSection/expandable-section.css

@@ -3,11 +3,6 @@
   --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-t--global--spacer--md);
   --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-expandable-section__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-expandable-section__toggle--Color: var(--pf-t--global--color--brand--default);
-  --pf-v5-c-expandable-section__toggle--hover--Color: var(--pf-t--global--color--brand--hover);
-  --pf-v5-c-expandable-section__toggle--active--Color: var(--pf-t--global--color--brand--hover);
-  --pf-v5-c-expandable-section__toggle--focus--Color: var(--pf-t--global--color--brand--hover);
-  --pf-v5-c-expandable-section__toggle--m-expanded--Color: var(--pf-t--global--color--brand--hover);
   --pf-v5-c-expandable-section__toggle--BackgroundColor: transparent;
   --pf-v5-c-expandable-section__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
   --pf-v5-c-expandable-section__toggle-icon--MinWidth: 1em;
@@ -17,6 +12,9 @@
   --pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
   --pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
   --pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
+  --pf-v5-c-expandable-section__toggle-text--Color: var(--pf-t--global--color--brand--default);
+  --pf-v5-c-expandable-section__toggle-text--hover--Color: var(--pf-t--global--color--brand--hover);
+  --pf-v5-c-expandable-section--m-expanded__toggle-text--Color: var(--pf-t--global--color--brand--hover);
   --pf-v5-c-expandable-section__content--PaddingTop: var(--pf-t--global--spacer--sm);
   --pf-v5-c-expandable-section__content--PaddingRight: var(--pf-t--global--spacer--sm);
   --pf-v5-c-expandable-section__content--PaddingBottom: var(--pf-t--global--spacer--sm);
@@ -51,7 +49,7 @@
 }
 
 .pf-v5-c-expandable-section.pf-m-expanded {
-  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--m-expanded--Color);
+  --pf-v5-c-expandable-section__toggle-text--Color: var(--pf-v5-c-expandable-section--m-expanded__toggle-text--Color);
   --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate);
   --pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
   --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
@@ -106,23 +104,14 @@
   padding-block-end: var(--pf-v5-c-expandable-section__toggle--PaddingBottom);
   padding-inline-start: var(--pf-v5-c-expandable-section__toggle--PaddingLeft);
   padding-inline-end: var(--pf-v5-c-expandable-section__toggle--PaddingRight);
-  color: var(--pf-v5-c-expandable-section__toggle--Color);
   background-color: var(--pf-v5-c-expandable-section__toggle--BackgroundColor);
   border: none;
   border-radius: var(--pf-v5-c-expandable-section__toggle--BorderRadius, 0);
 }
-.pf-v5-c-expandable-section__toggle:hover {
-  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--hover--Color);
+.pf-v5-c-expandable-section__toggle:is(:hover, :focus) {
+  --pf-v5-c-expandable-section__toggle-text--Color: var(--pf-v5-c-expandable-section__toggle-text--hover--Color);
   --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--hover--BackgroundColor, initial);
 }
-.pf-v5-c-expandable-section__toggle:active, .pf-v5-c-expandable-section__toggle.pf-m-active {
-  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--active--Color);
-  --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--active--BackgroundColor, initial);
-}
-.pf-v5-c-expandable-section__toggle:focus {
-  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--focus--Color);
-  --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--focus--BackgroundColor, initial);
-}
 
 .pf-v5-c-expandable-section__toggle-icon {
   min-width: var(--pf-v5-c-expandable-section__toggle-icon--MinWidth);
@@ -138,6 +127,10 @@
   --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate);
 }
 
+.pf-v5-c-expandable-section__toggle-text {
+  color: var(--pf-v5-c-expandable-section__toggle-text--Color);
+}
+
 .pf-v5-c-expandable-section__content {
   max-width: var(--pf-v5-c-expandable-section__content--MaxWidth);
   padding-block-start: var(--pf-v5-c-expandable-section__content--PaddingTop);

package/components/ExpandableSection/expandable-section.scss

@@ -6,11 +6,6 @@
   --#{$expandable-section}__toggle--PaddingRight: var(--pf-t--global--spacer--md);
   --#{$expandable-section}__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
   --#{$expandable-section}__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --#{$expandable-section}__toggle--Color: var(--pf-t--global--color--brand--default);
-  --#{$expandable-section}__toggle--hover--Color: var(--pf-t--global--color--brand--hover);
-  --#{$expandable-section}__toggle--active--Color: var(--pf-t--global--color--brand--hover);
-  --#{$expandable-section}__toggle--focus--Color: var(--pf-t--global--color--brand--hover);
-  --#{$expandable-section}__toggle--m-expanded--Color: var(--pf-t--global--color--brand--hover);
   --#{$expandable-section}__toggle--BackgroundColor: transparent;
   --#{$expandable-section}__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
   
@@ -23,6 +18,12 @@
   --#{$expandable-section}--m-expanded__toggle-icon--Rotate: 90deg;
   --#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
   
+  // Toggle text
+  --#{$expandable-section}__toggle-text--Color: var(--pf-t--global--color--brand--default);
+  --#{$expandable-section}__toggle-text--hover--Color: var(--pf-t--global--color--brand--hover);
+  --#{$expandable-section}--m-expanded__toggle-text--Color: var(--pf-t--global--color--brand--hover);
+
+
   // Content
   --#{$expandable-section}__content--PaddingTop: var(--pf-t--global--spacer--sm);
   --#{$expandable-section}__content--PaddingRight: var(--pf-t--global--spacer--sm);
@@ -68,7 +69,7 @@
 
 .#{$expandable-section} {
   &.pf-m-expanded {
-    --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--m-expanded--Color);
+    --#{$expandable-section}__toggle-text--Color: var(--#{$expandable-section}--m-expanded__toggle-text--Color);
     --#{$expandable-section}__toggle-icon--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--Rotate);
     --#{$expandable-section}__toggle-icon--m-expand-top--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate);
     --#{$expandable-section}--m-display-lg--after--BackgroundColor: var(--#{$expandable-section}--m-display-lg--m-expanded--after--BackgroundColor);
@@ -132,26 +133,14 @@
   padding-block-end: var(--#{$expandable-section}__toggle--PaddingBottom);
   padding-inline-start: var(--#{$expandable-section}__toggle--PaddingLeft);
   padding-inline-end: var(--#{$expandable-section}__toggle--PaddingRight);
-  color: var(--#{$expandable-section}__toggle--Color);
   background-color: var(--#{$expandable-section}__toggle--BackgroundColor);
   border: none;
   border-radius: var(--#{$expandable-section}__toggle--BorderRadius, 0);
 
-  &:hover {
-    --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--hover--Color);
+  &:is(:hover, :focus) {
+    --#{$expandable-section}__toggle-text--Color: var(--#{$expandable-section}__toggle-text--hover--Color);
     --#{$expandable-section}__toggle--BackgroundColor: var(--#{$expandable-section}__toggle--hover--BackgroundColor, initial);
   }
-
-  &:active,
-  &.pf-m-active {
-    --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--active--Color);
-    --#{$expandable-section}__toggle--BackgroundColor: var(--#{$expandable-section}__toggle--active--BackgroundColor, initial);
-  }
-
-  &:focus {
-    --#{$expandable-section}__toggle--Color: var(--#{$expandable-section}__toggle--focus--Color);
-    --#{$expandable-section}__toggle--BackgroundColor: var(--#{$expandable-section}__toggle--focus--BackgroundColor, initial);
-  }
 }
 
 .#{$expandable-section}__toggle-icon {
@@ -167,6 +156,10 @@
   }
 }
 
+.#{$expandable-section}__toggle-text {
+  color: var(--#{$expandable-section}__toggle-text--Color);
+}
+
 .#{$expandable-section}__content {
   max-width: var(--#{$expandable-section}__content--MaxWidth);
   padding-block-start: var(--#{$expandable-section}__content--PaddingTop);

package/components/Form/form.css

@@ -247,6 +247,9 @@
   max-width: var(--pf-v5-c-form--m-limit-width--MaxWidth);
 }
 
+.pf-v5-c-form__group {
+  min-width: 0;
+}
 .pf-v5-c-form__group.pf-m-action {
   margin-block-start: var(--pf-v5-c-form__group--m-action--MarginTop);
   overflow: hidden;
@@ -335,6 +338,9 @@
   --pf-v5-c-form__group-label-help--Color: var(--pf-v5-c-form__group-label-help--focus--Color);
 }
 
+.pf-v5-c-form__group-control {
+  min-width: 0;
+}
 .pf-v5-c-form__group-control.pf-m-inline {
   display: flex;
   flex-flow: row wrap;