@patternfly/patternfly 4.202.0 → 4.203.0

package/RELEASE-NOTES.md

@@ -3,6 +3,33 @@ id: Release notes
 section: developer-resources
 releaseNoteTOC: true
 ---
+## 2022.08 release notes (2022-06-24)
+Packages released:
+- [@patternfly/patternfly@v4.202.1](https://www.npmjs.com/package/@patternfly/patternfly/v/4.202.1)
+
+### Components
+- **Card:**
+  - Added styling to cards when their hidden input is focused ([#4902](https://github.com/patternfly/patternfly/pull/4902))
+  - Fixed dark theme card, light bg contrast ([#4903](https://github.com/patternfly/patternfly/pull/4903))
+  - Forced dark theme dark section card bg color ([#4913](https://github.com/patternfly/patternfly/pull/4913))
+- **Description list:** Added display and card mods ([#4895](https://github.com/patternfly/patternfly/pull/4895))
+- **Drawer:** Removed duplicate body element on jumplinks demo ([#4910](https://github.com/patternfly/patternfly/pull/4910))
+- **Dropdown:** Added secondary split toggle ([#4897](https://github.com/patternfly/patternfly/pull/4897))
+- **Masthead:** Fixed default/dynamic viewport based inset when using resize observer ([#4919](https://github.com/patternfly/patternfly/pull/4919))
+- **Menu:** Fixed scrollbar on flyout variant ([#4892](https://github.com/patternfly/patternfly/pull/4892))
+- **Menu toggle:** Updated typeahead variant layout/spacing ([#4750](https://github.com/patternfly/patternfly/pull/4750))
+- **Notification badge:** Fixed documentation links ([#4891](https://github.com/patternfly/patternfly/pull/4891))
+- **Progress stepper:**
+  - Added horizontal/vertical breakpoint support ([#4901](https://github.com/patternfly/patternfly/pull/4901))
+  - Used button for step title help text ([#4912](https://github.com/patternfly/patternfly/pull/4912))
+- **Table:**
+  - Added tr border to sticky nested table header ([#4857](https://github.com/patternfly/patternfly/pull/4857))
+  - Removed bullseye layout in demos ([#4904](https://github.com/patternfly/patternfly/pull/4904))
+- **Tabs:** Added expandable overflow styling ([#4876](https://github.com/patternfly/patternfly/pull/4876))
+- **Page:** Added height breakpoints for sticky top and bottom modifiers ([#4905](https://github.com/patternfly/patternfly/pull/4905))
+- **Wizard:** Moved footer to sibling of drawer ([#4896](https://github.com/patternfly/patternfly/pull/4896))
+
+
 ## 2022.07 release notes (2022-06-03)
 Packages released:
 - [@patternfly/patternfly@v4.196.7](https://www.npmjs.com/package/@patternfly/patternfly/v/4.196.7)
@@ -23,7 +50,7 @@ Packages released:
 - **Theme:**
   * Imported dark theme per component, added new global var ([#4864](https://github.com/patternfly/patternfly/pull/4864))
   * Updated dark theme default text color ([#4875](https://github.com/patternfly/patternfly/pull/4875))
-  * Updated build process to copy files from new SCSS location ([#4877](https://github.com/patternfly/patternfly/issues/4877))
+  * Updated build process to copy files from new SCSS location ([#4878](https://github.com/patternfly/patternfly/issues/4878))
 - **Utilities:** Added font family utilities ([#4868](https://github.com/patternfly/patternfly/pull/4868))
 
 

package/base/_fonts.scss

@@ -11,7 +11,7 @@
     url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Regular.woff") format("woff");
   font-style: normal;
   font-weight: 300;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
 }
 
 @font-face {
@@ -21,7 +21,7 @@
     url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Medium.woff") format("woff");
   font-style: normal;
   font-weight: 400;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
 }
 
 @font-face {
@@ -31,7 +31,7 @@
     url("#{$pf-global--font-path}/RedHatDisplay/RedHatDisplay-Bold.woff") format("woff");
   font-style: normal;
   font-weight: 700;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
 }
 
 @font-face {
@@ -41,7 +41,7 @@
     url("#{$pf-global--font-path}/RedHatText/RedHatText-Regular.woff") format("woff");
   font-style: normal;
   font-weight: 400;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
 }
 
 @font-face {
@@ -51,7 +51,7 @@
     url("#{$pf-global--font-path}/RedHatText/RedHatText-Medium.woff") format("woff");
   font-style: normal;
   font-weight: 700;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
 }
 
 // RedHatFont-updated
@@ -60,7 +60,7 @@
   src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Regular.woff2") format("woff2");
   font-style: normal;
   font-weight: 300;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
 }
 
 @font-face {
@@ -68,7 +68,7 @@
   src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Medium.woff2") format("woff2");
   font-style: normal;
   font-weight: 400;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
 }
 
 @font-face {
@@ -76,7 +76,7 @@
   src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Bold.woff2") format("woff2");
   font-style: normal;
   font-weight: 700;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
 }
 
 @font-face {
@@ -84,7 +84,7 @@
   src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatText/RedHatText-updated-Regular.woff2") format("woff2");
   font-style: normal;
   font-weight: 400;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
 }
 
 @font-face {
@@ -92,7 +92,7 @@
   src: url("#{$pf-global--font-path}/RedHatFont-updated/RedHatText/RedHatText-updated-Medium.woff2") format("woff2");
   font-style: normal;
   font-weight: 700;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
 }
 
 // RedHatMono

package/base/_shield-inheritable.scss

@@ -64,6 +64,6 @@
     font-weight: var(--pf-global--FontWeight--normal);
     line-height: var(--pf-global--LineHeight--md);
     color: var(--pf-global--Color--100); // this color rule is set here to be able to use themes
-    text-rendering: optimizeLegibility;
+    text-rendering: optimizelegibility;
   }
 }

package/base/patternfly-fonts.css

@@ -3,70 +3,70 @@
   src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff2") format("woff2"), url("./assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff") format("woff");
   font-style: normal;
   font-weight: 300;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatDisplay";
   src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff2") format("woff2"), url("./assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff") format("woff");
   font-style: normal;
   font-weight: 400;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatDisplay";
   src: url("./assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff2") format("woff2"), url("./assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff") format("woff");
   font-style: normal;
   font-weight: 700;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatText";
   src: url("./assets/fonts/RedHatText/RedHatText-Regular.woff2") format("woff2"), url("./assets/fonts/RedHatText/RedHatText-Regular.woff") format("woff");
   font-style: normal;
   font-weight: 400;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatText";
   src: url("./assets/fonts/RedHatText/RedHatText-Medium.woff2") format("woff2"), url("./assets/fonts/RedHatText/RedHatText-Medium.woff") format("woff");
   font-style: normal;
   font-weight: 700;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatDisplayUpdated";
   src: url("./assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Regular.woff2") format("woff2");
   font-style: normal;
   font-weight: 300;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatDisplayUpdated";
   src: url("./assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Medium.woff2") format("woff2");
   font-style: normal;
   font-weight: 400;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatDisplayUpdated";
   src: url("./assets/fonts/RedHatFont-updated/RedHatDisplay/RedHatDisplay-updated-Bold.woff2") format("woff2");
   font-style: normal;
   font-weight: 700;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatTextUpdated";
   src: url("./assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Regular.woff2") format("woff2");
   font-style: normal;
   font-weight: 400;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatTextUpdated";
   src: url("./assets/fonts/RedHatFont-updated/RedHatText/RedHatText-updated-Medium.woff2") format("woff2");
   font-style: normal;
   font-weight: 700;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
 }
 @font-face {
   font-family: "RedHatMono";

package/base/patternfly-shield-inheritable.css

@@ -62,5 +62,5 @@
   font-weight: var(--pf-global--FontWeight--normal);
   line-height: var(--pf-global--LineHeight--md);
   color: var(--pf-global--Color--100);
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizelegibility;
 }

package/components/AlertGroup/alert-group.css

@@ -27,7 +27,7 @@
   top: var(--pf-c-alert-group--m-toast--Top);
   right: var(--pf-c-alert-group--m-toast--Right);
   z-index: var(--pf-c-alert-group--m-toast--ZIndex);
-  width: calc(100% - calc(var(--pf-c-alert-group--m-toast--Right) * 2));
+  width: calc(100% - var(--pf-c-alert-group--m-toast--Right) * 2);
   max-width: var(--pf-c-alert-group--m-toast--MaxWidth);
 }
 

package/components/Button/button.css

@@ -469,7 +469,7 @@
   transform: translate(var(--pf-c-button__progress--TranslateX), var(--pf-c-button__progress--TranslateY));
 }
 .pf-c-button__progress .pf-c-spinner {
-  --pf-c-spinner--Color: currentColor;
+  --pf-c-spinner--Color: currentcolor;
 }
 
 .pf-m-overpass-font .pf-c-button {

package/components/Button/button.scss

@@ -616,7 +616,7 @@
   transform: translate(var(--pf-c-button__progress--TranslateX), var(--pf-c-button__progress--TranslateY));
 
   .pf-c-spinner {
-    --pf-c-spinner--Color: currentColor;
+    --pf-c-spinner--Color: currentcolor;
   }
 }
 

package/components/Divider/divider.css

@@ -95,7 +95,7 @@
   border: 0;
 }
 .pf-c-divider::after {
-  flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
+  flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
 }
 .pf-c-divider::after {
   align-self: stretch;
@@ -114,7 +114,7 @@
   height: inherit;
 }
 .pf-c-divider.pf-m-vertical::after {
-  flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
+  flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
 }
 .pf-c-divider.pf-m-inset-none {
   --pf-c-divider--after--Inset: 0%;
@@ -150,7 +150,7 @@
     height: auto;
   }
   .pf-c-divider.pf-m-horizontal-on-sm::after {
-    flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
+    flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
   }
 }
 @media (min-width: 576px) {
@@ -163,7 +163,7 @@
     height: inherit;
   }
   .pf-c-divider.pf-m-vertical-on-sm::after {
-    flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
+    flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
   }
 }
 @media (min-width: 576px) {
@@ -202,7 +202,7 @@
     height: auto;
   }
   .pf-c-divider.pf-m-horizontal-on-md::after {
-    flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
+    flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
   }
 }
 @media (min-width: 768px) {
@@ -215,7 +215,7 @@
     height: inherit;
   }
   .pf-c-divider.pf-m-vertical-on-md::after {
-    flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
+    flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
   }
 }
 @media (min-width: 768px) {
@@ -254,7 +254,7 @@
     height: auto;
   }
   .pf-c-divider.pf-m-horizontal-on-lg::after {
-    flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
+    flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
   }
 }
 @media (min-width: 992px) {
@@ -267,7 +267,7 @@
     height: inherit;
   }
   .pf-c-divider.pf-m-vertical-on-lg::after {
-    flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
+    flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
   }
 }
 @media (min-width: 992px) {
@@ -306,7 +306,7 @@
     height: auto;
   }
   .pf-c-divider.pf-m-horizontal-on-xl::after {
-    flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
+    flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
   }
 }
 @media (min-width: 1200px) {
@@ -319,7 +319,7 @@
     height: inherit;
   }
   .pf-c-divider.pf-m-vertical-on-xl::after {
-    flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
+    flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
   }
 }
 @media (min-width: 1200px) {
@@ -358,7 +358,7 @@
     height: auto;
   }
   .pf-c-divider.pf-m-horizontal-on-2xl::after {
-    flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
+    flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - var(--pf-c-divider--after--Inset) * 2);
   }
 }
 @media (min-width: 1450px) {
@@ -371,7 +371,7 @@
     height: inherit;
   }
   .pf-c-divider.pf-m-vertical-on-2xl::after {
-    flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
+    flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
   }
 }
 @media (min-width: 1450px) {

package/components/Drawer/drawer.css

@@ -381,7 +381,6 @@
   .pf-c-drawer > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-resizable > .pf-c-drawer__panel-main {
     flex-shrink: 1;
   }
-
   .pf-c-drawer.pf-m-panel-left {
     --pf-c-drawer--m-expanded__panel--BoxShadow: var(--pf-c-drawer--m-expanded--m-panel-left__panel--BoxShadow);
   }
@@ -402,7 +401,6 @@
     --pf-c-drawer__splitter--after--BorderLeftWidth: var(--pf-c-drawer--m-panel-left__splitter--after--BorderLeftWidth);
     order: 1;
   }
-
   .pf-c-drawer.pf-m-panel-bottom {
     --pf-c-drawer--m-expanded__panel--BoxShadow: var(--pf-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow);
     --pf-c-drawer__panel--MaxHeight: 100%;
@@ -431,7 +429,6 @@
     --pf-c-drawer__splitter--after--BorderRightWidth: 0;
     --pf-c-drawer__splitter--after--BorderBottomWidth: var(--pf-c-drawer--m-panel-bottom__splitter--after--BorderBottomWidth);
   }
-
   .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-resizable > .pf-c-drawer__splitter {
     --pf-c-drawer__splitter--m-vertical--Width: var(--pf-c-drawer--m-inline__splitter--m-vertical--Width);
     --pf-c-drawer__splitter-handle--Left: var(--pf-c-drawer--m-inline__splitter-handle--Left);
@@ -446,12 +443,10 @@
     --pf-c-drawer__splitter--after--BorderRightWidth: 0;
     --pf-c-drawer__splitter--after--BorderLeftWidth: 0;
   }
-
   .pf-c-drawer > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-no-border,
 .pf-c-drawer.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-no-border {
     --pf-c-drawer--m-expanded__panel--BoxShadow: none;
   }
-
   .pf-c-drawer__splitter {
     display: block;
     visibility: visible;
@@ -461,23 +456,18 @@
   .pf-c-drawer__panel.pf-m-width-25 {
     --pf-c-drawer__panel--md--FlexBasis: 25%;
   }
-
   .pf-c-drawer__panel.pf-m-width-33 {
     --pf-c-drawer__panel--md--FlexBasis: 33%;
   }
-
   .pf-c-drawer__panel.pf-m-width-50 {
     --pf-c-drawer__panel--md--FlexBasis: 50%;
   }
-
   .pf-c-drawer__panel.pf-m-width-66 {
     --pf-c-drawer__panel--md--FlexBasis: 66%;
   }
-
   .pf-c-drawer__panel.pf-m-width-75 {
     --pf-c-drawer__panel--md--FlexBasis: 75%;
   }
-
   .pf-c-drawer__panel.pf-m-width-100 {
     --pf-c-drawer__panel--md--FlexBasis: 100%;
   }
@@ -486,23 +476,18 @@
   .pf-c-drawer__panel.pf-m-width-25-on-lg {
     --pf-c-drawer__panel--md--FlexBasis: 25%;
   }
-
   .pf-c-drawer__panel.pf-m-width-33-on-lg {
     --pf-c-drawer__panel--md--FlexBasis: 33%;
   }
-
   .pf-c-drawer__panel.pf-m-width-50-on-lg {
     --pf-c-drawer__panel--md--FlexBasis: 50%;
   }
-
   .pf-c-drawer__panel.pf-m-width-66-on-lg {
     --pf-c-drawer__panel--md--FlexBasis: 66%;
   }
-
   .pf-c-drawer__panel.pf-m-width-75-on-lg {
     --pf-c-drawer__panel--md--FlexBasis: 75%;
   }
-
   .pf-c-drawer__panel.pf-m-width-100-on-lg {
     --pf-c-drawer__panel--md--FlexBasis: 100%;
   }
@@ -511,23 +496,18 @@
   .pf-c-drawer__panel.pf-m-width-25-on-xl {
     --pf-c-drawer__panel--md--FlexBasis: 25%;
   }
-
   .pf-c-drawer__panel.pf-m-width-33-on-xl {
     --pf-c-drawer__panel--md--FlexBasis: 33%;
   }
-
   .pf-c-drawer__panel.pf-m-width-50-on-xl {
     --pf-c-drawer__panel--md--FlexBasis: 50%;
   }
-
   .pf-c-drawer__panel.pf-m-width-66-on-xl {
     --pf-c-drawer__panel--md--FlexBasis: 66%;
   }
-
   .pf-c-drawer__panel.pf-m-width-75-on-xl {
     --pf-c-drawer__panel--md--FlexBasis: 75%;
   }
-
   .pf-c-drawer__panel.pf-m-width-100-on-xl {
     --pf-c-drawer__panel--md--FlexBasis: 100%;
   }
@@ -536,23 +516,18 @@
   .pf-c-drawer__panel.pf-m-width-25-on-2xl {
     --pf-c-drawer__panel--md--FlexBasis: 25%;
   }
-
   .pf-c-drawer__panel.pf-m-width-33-on-2xl {
     --pf-c-drawer__panel--md--FlexBasis: 33%;
   }
-
   .pf-c-drawer__panel.pf-m-width-50-on-2xl {
     --pf-c-drawer__panel--md--FlexBasis: 50%;
   }
-
   .pf-c-drawer__panel.pf-m-width-66-on-2xl {
     --pf-c-drawer__panel--md--FlexBasis: 66%;
   }
-
   .pf-c-drawer__panel.pf-m-width-75-on-2xl {
     --pf-c-drawer__panel--md--FlexBasis: 75%;
   }
-
   .pf-c-drawer__panel.pf-m-width-100-on-2xl {
     --pf-c-drawer__panel--md--FlexBasis: 100%;
   }
@@ -570,7 +545,6 @@
 .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
     background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
   }
-
   .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__content {
     overflow-x: auto;
   }
@@ -607,7 +581,6 @@
     margin-bottom: 0;
     transform: translateY(0);
   }
-
   .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel {
     transform: translateX(0);
   }
@@ -636,7 +609,6 @@
 .pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
     background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
   }
-
   .pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__content {
     overflow-x: auto;
   }
@@ -673,7 +645,6 @@
     margin-bottom: 0;
     transform: translateY(0);
   }
-
   .pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel {
     transform: translateX(0);
   }
@@ -702,7 +673,6 @@
 .pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
     background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
   }
-
   .pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__content {
     overflow-x: auto;
   }
@@ -739,7 +709,6 @@
     margin-bottom: 0;
     transform: translateY(0);
   }
-
   .pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel {
     transform: translateX(0);
   }
@@ -768,7 +737,6 @@
 .pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
     background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
   }
-
   .pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__content {
     overflow-x: auto;
   }
@@ -805,7 +773,6 @@
     margin-bottom: 0;
     transform: translateY(0);
   }
-
   .pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel {
     transform: translateX(0);
   }

package/components/JumpLinks/jump-links.css

@@ -51,7 +51,7 @@
   --pf-c-jump-links__toggle--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
   --pf-c-jump-links__toggle--Display: none;
   --pf-c-jump-links__toggle--Visibility: hidden;
-  --pf-c-jump-links__toggle-icon--Color: currentColor;
+  --pf-c-jump-links__toggle-icon--Color: currentcolor;
   --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
   --pf-c-jump-links__toggle-icon--Rotate: 0;
   --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);

package/components/JumpLinks/jump-links.scss

@@ -66,7 +66,7 @@ $pf-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base", "sm
   --pf-c-jump-links__toggle--Visibility: hidden;
 
   // toggle icon
-  --pf-c-jump-links__toggle-icon--Color: currentColor;
+  --pf-c-jump-links__toggle-icon--Color: currentcolor;
   --pf-c-jump-links__toggle-icon--Transition: var(--pf-global--Transition);
   --pf-c-jump-links__toggle-icon--Rotate: 0;
   --pf-c-jump-links--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);

package/components/MenuToggle/menu-toggle.css

@@ -269,7 +269,7 @@
 .pf-c-menu-toggle.pf-m-split-button > .pf-c-check {
   --pf-c-menu-toggle--PaddingRight: 0;
   --pf-c-check__input--MarginTop: 0;
-  --pf-c-check__label--Color: currentColor;
+  --pf-c-check__label--Color: currentcolor;
   align-items: center;
   align-self: stretch;
 }

package/components/MenuToggle/menu-toggle.scss

@@ -359,7 +359,7 @@
     > .pf-c-check {
       --pf-c-menu-toggle--PaddingRight: 0;
       --pf-c-check__input--MarginTop: 0;
-      --pf-c-check__label--Color: currentColor;
+      --pf-c-check__label--Color: currentcolor;
 
       align-items: center;
       align-self: stretch;

package/components/ProgressStepper/progress-stepper.css

@@ -284,7 +284,7 @@
 .pf-c-progress-stepper__step:not(:last-of-type) > .pf-c-progress-stepper__step-main::before {
   position: absolute;
   top: calc(100% + var(--pf-c-progress-stepper__step-main--MarginTop));
-  left: calc(50% - calc(var(--pf-c-progress-stepper__step-connector--before--BorderRightWidth) / 2));
+  left: calc(50% - var(--pf-c-progress-stepper__step-connector--before--BorderRightWidth) / 2);
   width: auto;
   height: calc(var(--pf-c-progress-stepper__step-main--MarginTop) + var(--pf-c-progress-stepper__step-main--MarginBottom));
   border-right: var(--pf-c-progress-stepper__step-connector--before--BorderRightWidth) solid var(--pf-c-progress-stepper__step-connector--before--BorderRightColor);