@patternfly/react-styles 5.0.0-alpha.16 → 5.0.0-alpha.18

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 5.0.0-alpha.18 (2023-06-01)
+
+### Bug Fixes
+
+- **react-styles:** updated class names to include versions ([#9173](https://github.com/patternfly/patternfly-react/issues/9173)) ([ae05e89](https://github.com/patternfly/patternfly-react/commit/ae05e89a361773223c3804fa352ea7eefab01c8a))
+
+# 5.0.0-alpha.17 (2023-05-31)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
 # [5.0.0-alpha.16](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@5.0.0-alpha.15...@patternfly/react-styles@5.0.0-alpha.16) (2023-05-19)
 
 **Note:** Version bump only for package @patternfly/react-styles

package/css/components/Consoles/AccessConsoles.css

@@ -1,14 +1,14 @@
-.pf-c-console {
+.pf-v5-c-console {
   display: grid;
   grid-template-areas:
     'actions-main actions-extra'
     'main main';
   row-gap: var(--pf-v5-global--spacer--md);
 }
-.pf-c-console__actions {
+.pf-v5-c-console__actions {
   grid-area: actions-main;
   display: flex;
 }
-.pf-c-console__actions > div {
+.pf-v5-c-console__actions > div {
   margin-right: var(--pf-v5-global--spacer--sm);
 }

package/css/components/Consoles/AccessConsoles.d.ts

@@ -1,6 +1,6 @@
 import './AccessConsoles.css';
 declare const _default: {
-  "console": "pf-c-console",
-  "consoleActions": "pf-c-console__actions"
+  "console": "pf-v5-c-console",
+  "consoleActions": "pf-v5-c-console__actions"
 };
 export default _default;

package/css/components/Consoles/AccessConsoles.js

@@ -2,6 +2,6 @@
 exports.__esModule = true;
 require('./AccessConsoles.css');
 exports.default = {
-  "console": "pf-c-console",
-  "consoleActions": "pf-c-console__actions"
+  "console": "pf-v5-c-console",
+  "consoleActions": "pf-v5-c-console__actions"
 };

package/css/components/Consoles/AccessConsoles.mjs

@@ -1,5 +1,5 @@
 import './AccessConsoles.css';
 export default {
-  "console": "pf-c-console",
-  "consoleActions": "pf-c-console__actions"
+  "console": "pf-v5-c-console",
+  "consoleActions": "pf-v5-c-console__actions"
 };

package/css/components/Consoles/DesktopViewer.css

@@ -1,4 +1,4 @@
-.pf-c-console__desktop-viewer {
+.pf-v5-c-console__desktop-viewer {
   grid-area: main;
   display: grid;
   gap: var(--pf-v5-global--spacer--md);

package/css/components/Consoles/DesktopViewer.d.ts

@@ -1,5 +1,5 @@
 import './DesktopViewer.css';
 declare const _default: {
-  "consoleDesktopViewer": "pf-c-console__desktop-viewer"
+  "consoleDesktopViewer": "pf-v5-c-console__desktop-viewer"
 };
 export default _default;

package/css/components/Consoles/DesktopViewer.js

@@ -2,5 +2,5 @@
 exports.__esModule = true;
 require('./DesktopViewer.css');
 exports.default = {
-  "consoleDesktopViewer": "pf-c-console__desktop-viewer"
+  "consoleDesktopViewer": "pf-v5-c-console__desktop-viewer"
 };

package/css/components/Consoles/DesktopViewer.mjs

@@ -1,4 +1,4 @@
 import './DesktopViewer.css';
 export default {
-  "consoleDesktopViewer": "pf-c-console__desktop-viewer"
+  "consoleDesktopViewer": "pf-v5-c-console__desktop-viewer"
 };

package/css/components/Consoles/SerialConsole.css

@@ -1,11 +1,11 @@
-.pf-c-console__serial {
+.pf-v5-c-console__serial {
   grid-area: main;
 }
-.pf-c-console__actions-serial {
+.pf-v5-c-console__actions-serial {
   grid-area: actions-extra;
   display: flex;
   justify-content: flex-end;
 }
-.pf-c-console__actions-serial > button {
+.pf-v5-c-console__actions-serial > button {
   margin-right: var(--pf-v5-global--spacer--sm);
 }

package/css/components/Consoles/SerialConsole.d.ts

@@ -1,6 +1,6 @@
 import './SerialConsole.css';
 declare const _default: {
-  "consoleActionsSerial": "pf-c-console__actions-serial",
-  "consoleSerial": "pf-c-console__serial"
+  "consoleActionsSerial": "pf-v5-c-console__actions-serial",
+  "consoleSerial": "pf-v5-c-console__serial"
 };
 export default _default;

package/css/components/Consoles/SerialConsole.js

@@ -2,6 +2,6 @@
 exports.__esModule = true;
 require('./SerialConsole.css');
 exports.default = {
-  "consoleActionsSerial": "pf-c-console__actions-serial",
-  "consoleSerial": "pf-c-console__serial"
+  "consoleActionsSerial": "pf-v5-c-console__actions-serial",
+  "consoleSerial": "pf-v5-c-console__serial"
 };

package/css/components/Consoles/SerialConsole.mjs

@@ -1,5 +1,5 @@
 import './SerialConsole.css';
 export default {
-  "consoleActionsSerial": "pf-c-console__actions-serial",
-  "consoleSerial": "pf-c-console__serial"
+  "consoleActionsSerial": "pf-v5-c-console__actions-serial",
+  "consoleSerial": "pf-v5-c-console__serial"
 };

package/css/components/Consoles/VncConsole.css

@@ -1,7 +1,7 @@
-.pf-c-console__vnc {
+.pf-v5-c-console__vnc {
   grid-area: main;
 }
-.pf-c-console__actions-vnc {
+.pf-v5-c-console__actions-vnc {
   grid-area: actions-extra;
   display: flex;
   flex-wrap: wrap;

package/css/components/Consoles/VncConsole.d.ts

@@ -1,6 +1,6 @@
 import './VncConsole.css';
 declare const _default: {
-  "consoleActionsVnc": "pf-c-console__actions-vnc",
-  "consoleVnc": "pf-c-console__vnc"
+  "consoleActionsVnc": "pf-v5-c-console__actions-vnc",
+  "consoleVnc": "pf-v5-c-console__vnc"
 };
 export default _default;

package/css/components/Consoles/VncConsole.js

@@ -2,6 +2,6 @@
 exports.__esModule = true;
 require('./VncConsole.css');
 exports.default = {
-  "consoleActionsVnc": "pf-c-console__actions-vnc",
-  "consoleVnc": "pf-c-console__vnc"
+  "consoleActionsVnc": "pf-v5-c-console__actions-vnc",
+  "consoleVnc": "pf-v5-c-console__vnc"
 };

package/css/components/Consoles/VncConsole.mjs

@@ -1,5 +1,5 @@
 import './VncConsole.css';
 export default {
-  "consoleActionsVnc": "pf-c-console__actions-vnc",
-  "consoleVnc": "pf-c-console__vnc"
+  "consoleActionsVnc": "pf-v5-c-console__actions-vnc",
+  "consoleVnc": "pf-v5-c-console__vnc"
 };

package/css/components/InputGroup/input-group.css

@@ -20,8 +20,6 @@
   --pf-v5-c-input-group__item--m-disabled__text--Color: var(--pf-v5-global--disabled-color--100);
   --pf-v5-c-input-group__item--m-disabled--BorderBottomColor: transparent;
   --pf-v5-c-input-group__item--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
-  --pf-v5-c-input-group--c-form-control--invalid--ZIndex: var(--pf-v5-global--ZIndex--xs);
-  --pf-v5-c-input-group--c-form-control--MarginRight: 0;
   display: flex;
   width: 100%;
 }

package/css/components/Masthead/masthead.css

@@ -89,6 +89,7 @@
   --pf-v5-c-masthead--c-menu-toggle--before--BorderLeftColor: var(--pf-v5-c-masthead--item-border-color--base);
   --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderTopColor: transparent;
   --pf-v5-c-masthead--c-menu-toggle--m-full-height--before--BorderBottomColor: transparent;
+  --pf-v5-c-masthead--c-toolbar--AlignItems--base: center;
   --pf-v5-c-masthead--c-toolbar__content--PaddingRight: 0;
   --pf-v5-c-masthead--c-toolbar__content--PaddingLeft: 0;
   --pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop: var(--pf-v5-global--spacer--md);
@@ -161,6 +162,7 @@
   --pf-v5-c-masthead__main--BorderBottomColor: var(--pf-v5-c-masthead--m-light-200__main--BorderBottomColor);
 }
 .pf-v5-c-masthead .pf-v5-c-toolbar {
+  --pf-v5-c-toolbar--AlignItems--base: var(--pf-v5-c-masthead--c-toolbar--AlignItems--base);
   --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-masthead--c-toolbar__content--PaddingRight);
   --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-masthead--c-toolbar__content--PaddingLeft);
   --pf-v5-c-toolbar__expandable-content--PaddingTop: var(--pf-v5-c-masthead--c-toolbar__expandable-content--PaddingTop);

package/css/components/NumberInput/number-input.css

@@ -1,7 +1,7 @@
-.pf-v5-c-number-input .pf-v5-c-form-control {
+.pf-v5-c-number-input .pf-v5-c-form-control > :is(input) {
   appearance: textfield;
 }
-.pf-v5-c-number-input .pf-v5-c-form-control::-webkit-inner-spin-button, .pf-v5-c-number-input .pf-v5-c-form-control::-webkit-outer-spin-button {
+.pf-v5-c-number-input .pf-v5-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v5-c-number-input .pf-v5-c-form-control > :is(input)::-webkit-outer-spin-button {
   appearance: none;
   margin: 0;
 }
@@ -27,6 +27,8 @@
 }
 .pf-v5-c-number-input .pf-v5-c-form-control {
   width: var(--pf-v5-c-number-input--c-form-control--Width);
+}
+.pf-v5-c-number-input .pf-v5-c-form-control > :is(input) {
   text-align: right;
 }
 

package/css/components/Pagination/pagination.css

@@ -1,7 +1,7 @@
-.pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control {
+.pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control > :is(input) {
   appearance: textfield;
 }
-.pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control::-webkit-inner-spin-button, .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control::-webkit-outer-spin-button {
+.pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control > :is(input)::-webkit-outer-spin-button {
   appearance: none;
   margin: 0;
 }
@@ -16,7 +16,7 @@
   --pf-v5-c-pagination--m-bottom--child--MarginRight: 0;
   --pf-v5-c-pagination--m-bottom--child--md--MarginRight: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-pagination--m-compact--child--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-pagination--c-options-menu__toggle--FontSize: var(--pf-v5-global--FontSize--sm);
+  --pf-v5-c-pagination--c-menu-toggle--FontSize: var(--pf-v5-global--FontSize--sm);
   --pf-v5-c-pagination__nav--Display: none;
   --pf-v5-c-pagination--m-display-summary__nav--Display: none;
   --pf-v5-c-pagination--m-display-full__nav--Display: inline-flex;
@@ -60,9 +60,9 @@
   --pf-v5-c-pagination--m-bottom--xl--PaddingRight: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-pagination--m-bottom--xl--PaddingLeft: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--sm-top);
-  --pf-v5-c-pagination--c-options-menu--Display: none;
-  --pf-v5-c-pagination--m-display-summary--c-options-menu--Display: none;
-  --pf-v5-c-pagination--m-display-full--c-options-menu--Display: inline-flex;
+  --pf-v5-c-pagination--c-menu-toggle--Display: none;
+  --pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display: none;
+  --pf-v5-c-pagination--m-display-full--c-menu-toggle--Display: inline-flex;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -79,7 +79,7 @@
     --pf-v5-c-pagination--m-bottom--child--MarginRight: var(--pf-v5-c-pagination--m-bottom--child--md--MarginRight);
     --pf-v5-c-pagination--m-bottom__nav-control--c-button--OutlineOffset: 0;
     --pf-v5-c-pagination--m-bottom--BoxShadow: none;
-    --pf-v5-c-pagination--c-options-menu--Display: inline-flex;
+    --pf-v5-c-pagination--c-menu-toggle--Display: inline-flex;
     --pf-v5-c-pagination__nav--Display: inline-flex;
     --pf-v5-c-pagination__total-items--Display: none;
   }
@@ -95,8 +95,9 @@
 .pf-v5-c-pagination > *:not(:last-child):not(.pf-v5-c-pagination__total-items) {
   margin-right: var(--pf-v5-c-pagination--child--MarginRight);
 }
-.pf-v5-c-pagination .pf-v5-c-options-menu {
-  display: var(--pf-v5-c-pagination--c-options-menu--Display);
+.pf-v5-c-pagination .pf-v5-c-menu-toggle {
+  display: var(--pf-v5-c-pagination--c-menu-toggle--Display);
+  font-size: var(--pf-v5-c-pagination--c-menu-toggle--FontSize);
 }
 .pf-v5-c-pagination.pf-m-bottom {
   --pf-v5-c-pagination--child--MarginRight: var(--pf-v5-c-pagination--m-bottom--child--MarginRight);
@@ -126,7 +127,7 @@
 .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-page-select {
   display: none;
 }
-.pf-v5-c-pagination.pf-m-bottom .pf-v5-c-options-menu {
+.pf-v5-c-pagination.pf-m-bottom .pf-v5-c-menu-toggle {
   position: absolute;
   display: block;
 }
@@ -149,7 +150,10 @@
   .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-page-select {
     display: block;
   }
-  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-options-menu {
+  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-page-select {
+    display: inline-flex;
+  }
+  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-menu-toggle {
     position: relative;
   }
   .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav {
@@ -174,9 +178,6 @@
     padding: var(--pf-v5-c-pagination--m-sticky--md--PaddingTop) var(--pf-v5-c-pagination--m-sticky--md--PaddingRight) var(--pf-v5-c-pagination--m-sticky--md--PaddingBottom) var(--pf-v5-c-pagination--m-sticky--md--PaddingLeft);
   }
 }
-.pf-v5-c-pagination .pf-v5-c-options-menu__toggle {
-  font-size: var(--pf-v5-c-pagination--c-options-menu__toggle--FontSize);
-}
 .pf-v5-c-pagination.pf-m-compact {
   --pf-v5-c-pagination--child--MarginRight: var(--pf-v5-c-pagination--m-compact--child--MarginRight);
 }
@@ -214,19 +215,18 @@
 .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control {
   width: var(--pf-v5-c-pagination__nav-page-select--c-form-control--Width);
 }
-
 .pf-v5-c-pagination__total-items {
   display: var(--pf-v5-c-pagination__total-items--Display);
 }
 
 .pf-v5-c-pagination.pf-m-display-summary {
   --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-  --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-summary--c-options-menu--Display);
+  --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
   --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
 }
 .pf-v5-c-pagination.pf-m-display-full {
   --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-  --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
+  --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
   --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
 }
 .pf-v5-c-pagination.pf-m-inset-none {
@@ -250,12 +250,12 @@
 @media (min-width: 576px) {
   .pf-v5-c-pagination.pf-m-display-summary-on-sm {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-summary--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-display-full-on-sm {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-inset-none-on-sm {
@@ -280,12 +280,12 @@
 @media (min-width: 768px) {
   .pf-v5-c-pagination.pf-m-display-summary-on-md {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-summary--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-display-full-on-md {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-inset-none-on-md {
@@ -310,12 +310,12 @@
 @media (min-width: 992px) {
   .pf-v5-c-pagination.pf-m-display-summary-on-lg {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-summary--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-display-full-on-lg {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-inset-none-on-lg {
@@ -340,12 +340,12 @@
 @media (min-width: 1200px) {
   .pf-v5-c-pagination.pf-m-display-summary-on-xl {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-summary--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-display-full-on-xl {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-inset-none-on-xl {
@@ -370,12 +370,12 @@
 @media (min-width: 1450px) {
   .pf-v5-c-pagination.pf-m-display-summary-on-2xl {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-summary__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-summary--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-summary--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-summary__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-display-full-on-2xl {
     --pf-v5-c-pagination__nav--Display: var(--pf-v5-c-pagination--m-display-full__nav--Display);
-    --pf-v5-c-pagination--c-options-menu--Display: var(--pf-v5-c-pagination--m-display-full--c-options-menu--Display);
+    --pf-v5-c-pagination--c-menu-toggle--Display: var(--pf-v5-c-pagination--m-display-full--c-menu-toggle--Display);
     --pf-v5-c-pagination__total-items--Display: var(--pf-v5-c-pagination--m-display-full__total-items--Display);
   }
   .pf-v5-c-pagination.pf-m-inset-none-on-2xl {

package/css/components/Pagination/pagination.d.ts

@@ -2,6 +2,7 @@ import './pagination.css';
 declare const _default: {
   "button": "pf-v5-c-button",
   "formControl": "pf-v5-c-form-control",
+  "menuToggle": "pf-v5-c-menu-toggle",
   "modifiers": {
     "bottom": "pf-m-bottom",
     "static": "pf-m-static",
@@ -59,8 +60,6 @@ declare const _default: {
     "insetXlOn_2xl": "pf-m-inset-xl-on-2xl",
     "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
   },
-  "optionsMenu": "pf-v5-c-options-menu",
-  "optionsMenuToggle": "pf-v5-c-options-menu__toggle",
   "pagination": "pf-v5-c-pagination",
   "paginationNav": "pf-v5-c-pagination__nav",
   "paginationNavControl": "pf-v5-c-pagination__nav-control",

package/css/components/Pagination/pagination.js

@@ -4,6 +4,7 @@ require('./pagination.css');
 exports.default = {
   "button": "pf-v5-c-button",
   "formControl": "pf-v5-c-form-control",
+  "menuToggle": "pf-v5-c-menu-toggle",
   "modifiers": {
     "bottom": "pf-m-bottom",
     "static": "pf-m-static",
@@ -61,8 +62,6 @@ exports.default = {
     "insetXlOn_2xl": "pf-m-inset-xl-on-2xl",
     "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
   },
-  "optionsMenu": "pf-v5-c-options-menu",
-  "optionsMenuToggle": "pf-v5-c-options-menu__toggle",
   "pagination": "pf-v5-c-pagination",
   "paginationNav": "pf-v5-c-pagination__nav",
   "paginationNavControl": "pf-v5-c-pagination__nav-control",

package/css/components/Pagination/pagination.mjs

@@ -2,6 +2,7 @@ import './pagination.css';
 export default {
   "button": "pf-v5-c-button",
   "formControl": "pf-v5-c-form-control",
+  "menuToggle": "pf-v5-c-menu-toggle",
   "modifiers": {
     "bottom": "pf-m-bottom",
     "static": "pf-m-static",
@@ -59,8 +60,6 @@ export default {
     "insetXlOn_2xl": "pf-m-inset-xl-on-2xl",
     "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
   },
-  "optionsMenu": "pf-v5-c-options-menu",
-  "optionsMenuToggle": "pf-v5-c-options-menu__toggle",
   "pagination": "pf-v5-c-pagination",
   "paginationNav": "pf-v5-c-pagination__nav",
   "paginationNavControl": "pf-v5-c-pagination__nav-control",

package/css/components/Table/inline-edit.css

@@ -1,60 +1,60 @@
 :root {
-  --pf-v5-global--Blue--50: #def3ff;
-  --pf-v5-global--Blue--200: #7dc3e8;
+  --pf-v5-global--palette--blue-50: #def3ff;
+  --pf-v5-global--palette--blue-200: #7dc3e8;
 }
 
-tr.pf-c-table__editable-row:hover,
-tr.pf-c-table__editable-row.pf-m-editing {
-  background: var(--pf-v5-global--Blue--50) !important;
+tr.pf-v5-c-table__editable-row:hover,
+tr.pf-v5-c-table__editable-row.pf-m-editing {
+  background: var(--pf-v5-global--palette--blue-50) !important;
 }
-tr.pf-c-table__editable-row:hover td,
-tr.pf-c-table__editable-row.pf-m-editing td {
-  border-bottom: 1px solid var(--pf-v5-global--Blue--200) !important;
-  border-top: 1px solid var(--pf-v5-global--Blue--200) !important;
+tr.pf-v5-c-table__editable-row:hover td,
+tr.pf-v5-c-table__editable-row.pf-m-editing td {
+  border-bottom: 1px solid var(--pf-v5-global--palette--blue-200) !important;
+  border-top: 1px solid var(--pf-v5-global--palette--blue-200) !important;
 }
-tr.pf-c-table__editable-row:hover td:first-child,
-tr.pf-c-table__editable-row.pf-m-editing td:first-child {
-  border-left: 1px solid var(--pf-v5-global--Blue--200) !important;
+tr.pf-v5-c-table__editable-row:hover td:first-child,
+tr.pf-v5-c-table__editable-row.pf-m-editing td:first-child {
+  border-left: 1px solid var(--pf-v5-global--palette--blue-200) !important;
 }
-tr.pf-c-table__editable-row:hover td:last-child,
-tr.pf-c-table__editable-row.pf-m-editing td:last-child {
-  border-right: 1px solid var(--pf-v5-global--Blue--200) !important;
+tr.pf-v5-c-table__editable-row:hover td:last-child,
+tr.pf-v5-c-table__editable-row.pf-m-editing td:last-child {
+  border-right: 1px solid var(--pf-v5-global--palette--blue-200) !important;
 }
-tr.pf-c-table__editable-row.pf-m-table-editing-first-row {
-  border-top: 3px solid var(--pf-v5-global--Blue--200) !important;
+tr.pf-v5-c-table__editable-row.pf-m-table-editing-first-row {
+  border-top: 3px solid var(--pf-v5-global--palette--blue-200) !important;
 }
-tr.pf-c-table__editable-row.pf-m-table-editing-last-row {
-  border-bottom: 3px solid var(--pf-v5-global--Blue--200) !important;
+tr.pf-v5-c-table__editable-row.pf-m-table-editing-last-row {
+  border-bottom: 3px solid var(--pf-v5-global--palette--blue-200) !important;
 }
-tr.pf-c-table__editable-row input {
+tr.pf-v5-c-table__editable-row input {
   display: block;
   background: var(--pf-v5-global--BackgroundColor--100);
-  border: 1px solid var(--pf-v5-global--BorderColor);
+  border: 1px solid var(--pf-v5-global--BorderColor--100);
 }
-tr.pf-c-table__editable-row input:hover {
+tr.pf-v5-c-table__editable-row input:hover {
   cursor: text;
 }
 
-.pf-c-table__inline-edit-buttons {
+.pf-v5-c-table__inline-edit-buttons {
   position: fixed;
   z-index: 1000;
   padding: 4px;
   margin: 0;
-  background: var(--pf-v5-global--Blue--50);
-  border: 1px solid var(--pf-v5-global--Blue--200);
+  background: var(--pf-v5-global--palette--blue-50);
+  border: 1px solid var(--pf-v5-global--palette--blue-200);
 }
-.pf-c-table__inline-edit-buttons.pf-m-top {
+.pf-v5-c-table__inline-edit-buttons.pf-m-top {
   border-bottom: 0;
 }
-.pf-c-table__inline-edit-buttons.pf-m-bottom {
+.pf-v5-c-table__inline-edit-buttons.pf-m-bottom {
   border-top: 0;
 }
-.pf-c-table__inline-edit-buttons.pf-m-bold {
+.pf-v5-c-table__inline-edit-buttons.pf-m-bold {
   border-width: 3px;
 }
-.pf-c-table__inline-edit-buttons button {
+.pf-v5-c-table__inline-edit-buttons button {
   margin-left: 4px;
 }
-.pf-c-table__inline-edit-buttons button:first-child {
+.pf-v5-c-table__inline-edit-buttons button:first-child {
   margin-left: 0;
 }

package/css/components/Table/inline-edit.d.ts

@@ -8,7 +8,7 @@ declare const _default: {
     "bottom": "pf-m-bottom",
     "bold": "pf-m-bold"
   },
-  "tableEditableRow": "pf-c-table__editable-row",
-  "tableInlineEditButtons": "pf-c-table__inline-edit-buttons"
+  "tableEditableRow": "pf-v5-c-table__editable-row",
+  "tableInlineEditButtons": "pf-v5-c-table__inline-edit-buttons"
 };
 export default _default;

package/css/components/Table/inline-edit.js

@@ -10,6 +10,6 @@ exports.default = {
     "bottom": "pf-m-bottom",
     "bold": "pf-m-bold"
   },
-  "tableEditableRow": "pf-c-table__editable-row",
-  "tableInlineEditButtons": "pf-c-table__inline-edit-buttons"
+  "tableEditableRow": "pf-v5-c-table__editable-row",
+  "tableInlineEditButtons": "pf-v5-c-table__inline-edit-buttons"
 };

package/css/components/Table/inline-edit.mjs

@@ -8,6 +8,6 @@ export default {
     "bottom": "pf-m-bottom",
     "bold": "pf-m-bold"
   },
-  "tableEditableRow": "pf-c-table__editable-row",
-  "tableInlineEditButtons": "pf-c-table__inline-edit-buttons"
+  "tableEditableRow": "pf-v5-c-table__editable-row",
+  "tableInlineEditButtons": "pf-v5-c-table__inline-edit-buttons"
 };

package/css/components/Toolbar/toolbar.css

@@ -48,6 +48,7 @@
 }
 
 .pf-v5-c-toolbar {
+  --pf-v5-c-toolbar--AlignItems--base: flex-start;
   --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-toolbar--RowGap--base: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-toolbar--RowGap: var(--pf-v5-c-toolbar--RowGap--base);
@@ -57,18 +58,20 @@
   --pf-v5-c-toolbar__item--Display: block;
   --pf-v5-c-toolbar__item--MinWidth--base: auto;
   --pf-v5-c-toolbar__item--AlignSelf: auto;
+  --pf-v5-c-toolbar__item--AlignItems: var(--pf-v5-c-toolbar--AlignItems--base);
   --pf-v5-c-toolbar__group--Display: flex;
-  --pf-v5-c-toolbar__group--AlignItems: baseline;
+  --pf-v5-c-toolbar__group--AlignItems: var(--pf-v5-c-toolbar--AlignItems--base);
   --pf-v5-c-toolbar__group--AlignSelf: auto;
   --pf-v5-c-toolbar__group--RowGap: var(--pf-v5-c-toolbar--item--RowGap--base);
   --pf-v5-c-toolbar--m-sticky--ZIndex: var(--pf-v5-global--ZIndex--xs);
   --pf-v5-c-toolbar--m-sticky--BoxShadow: var(--pf-v5-global--BoxShadow--sm-bottom);
   --pf-v5-c-toolbar__content--Display: flex;
+  --pf-v5-c-toolbar__content--AlignItems: var(--pf-v5-c-toolbar--AlignItems--base);
   --pf-v5-c-toolbar__content--RowGap: var(--pf-v5-c-toolbar--RowGap--base);
   --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-global--spacer--md);
   --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-global--spacer--md);
   --pf-v5-c-toolbar__content-section--Display: flex;
-  --pf-v5-c-toolbar__content-section--AlignItems: baseline;
+  --pf-v5-c-toolbar__content-section--AlignItems: var(--pf-v5-c-toolbar--AlignItems--base);
   --pf-v5-c-toolbar__content-section--RowGap: var(--pf-v5-c-toolbar--item--RowGap--base);
   --pf-v5-c-toolbar--m-page-insets--inset: var(--pf-v5-global--spacer--md);
   --pf-v5-c-toolbar--m-page-insets--xl--inset: var(--pf-v5-global--spacer--lg);
@@ -87,8 +90,8 @@
   --pf-v5-c-toolbar__group--m-chip-container__item--MarginTop: var(--pf-v5-global--spacer--md);
   --pf-v5-c-toolbar--spacer--base: var(--pf-v5-global--spacer--md);
   --pf-v5-c-toolbar__item--spacer: var(--pf-v5-c-toolbar--spacer--base);
-  --pf-v5-c-toolbar__group--spacer: var(--pf-v5-c-toolbar--spacer--base);
   --pf-v5-c-toolbar__item--Width: auto;
+  --pf-v5-c-toolbar__group--spacer: var(--pf-v5-c-toolbar--spacer--base);
   --pf-v5-c-toolbar__group--m-toggle-group--spacer: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-toolbar__group--m-toggle-group--m-show--spacer: var(--pf-v5-c-toolbar__group--spacer);
   --pf-v5-c-toolbar__group--m-icon-button-group--spacer: var(--pf-v5-c-toolbar__group--spacer);
@@ -113,7 +116,7 @@
   --pf-v5-c-toolbar--m-full-height--PaddingTop: 0;
   --pf-v5-c-toolbar--m-full-height--PaddingBottom: 0;
   --pf-v5-c-toolbar--m-full-height__item--Display: flex;
-  --pf-v5-c-toolbar--m-full-height__item--AlignItems: center;
+  --pf-v5-c-toolbar--m-full-height__item--AlignItems: var(--pf-v5-c-toolbar__group--AlignItems);
   position: relative;
   display: grid;
   row-gap: var(--pf-v5-c-toolbar--RowGap);
@@ -163,8 +166,8 @@
 .pf-v5-c-toolbar.pf-m-full-height .pf-v5-c-toolbar__item {
   align-self: stretch;
 }
-.pf-v5-c-toolbar.pf-m-full-height .pf-v5-c-toolbar__item {
-  align-items: var(--pf-v5-c-toolbar--m-full-height__item--AlignItems);
+.pf-v5-c-toolbar.pf-m-full-height :where(.pf-v5-c-toolbar__item) {
+  --pf-v5-c-toolbar__item--AlignItems: var(--pf-v5-c-toolbar--m-full-height__item--AlignItems);
 }
 .pf-v5-c-toolbar.pf-m-static,
 .pf-v5-c-toolbar.pf-m-static .pf-v5-c-toolbar__content {
@@ -186,27 +189,39 @@
 .pf-v5-c-toolbar__group > .pf-v5-c-divider.pf-m-vertical:last-child {
   --pf-v5-c-toolbar--spacer: 0;
 }
-
-.pf-v5-c-toolbar__group {
-  --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__group--spacer);
-  --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-toolbar__group--Display);
-  row-gap: var(--pf-v5-c-toolbar__group--RowGap);
-  align-items: var(--pf-v5-c-toolbar__group--AlignItems);
-  align-self: var(--pf-v5-c-toolbar__group--AlignSelf);
-  margin-right: var(--pf-v5-c-toolbar--spacer);
+.pf-v5-c-toolbar__content-section.pf-m-align-items-start,
+.pf-v5-c-toolbar__group.pf-m-align-items-start {
+  align-items: flex-start;
 }
+.pf-v5-c-toolbar__content-section.pf-m-align-items-center,
 .pf-v5-c-toolbar__group.pf-m-align-items-center {
   align-items: center;
 }
+.pf-v5-c-toolbar__content-section.pf-m-align-items-baseline,
 .pf-v5-c-toolbar__group.pf-m-align-items-baseline {
   align-items: baseline;
 }
+.pf-v5-c-toolbar__content-section.pf-m-align-self-start,
+.pf-v5-c-toolbar__group.pf-m-align-self-start {
+  align-self: flex-start;
+}
+.pf-v5-c-toolbar__content-section.pf-m-align-self-center,
 .pf-v5-c-toolbar__group.pf-m-align-self-center {
   align-self: center;
 }
+.pf-v5-c-toolbar__content-section.pf-m-align-self-baseline,
 .pf-v5-c-toolbar__group.pf-m-align-self-baseline {
   align-self: baseline;
 }
+
+.pf-v5-c-toolbar__group {
+  --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__group--spacer);
+  --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-toolbar__group--Display);
+  row-gap: var(--pf-v5-c-toolbar__group--RowGap);
+  align-items: var(--pf-v5-c-toolbar__group--AlignItems);
+  align-self: var(--pf-v5-c-toolbar__group--AlignSelf);
+  margin-right: var(--pf-v5-c-toolbar--spacer);
+}
 .pf-v5-c-toolbar__group.pf-m-button-group {
   --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__group--m-button-group--spacer);
 }
@@ -247,6 +262,7 @@
   --pf-v5-c-toolbar__item--Width--base: var(--pf-v5-c-toolbar__item--Width);
   --pf-v5-c-toolbar__item--MinWidth--base: var(--pf-v5-c-toolbar__item--MinWidth);
   --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-toolbar__item--Display);
+  align-items: var(--pf-v5-c-toolbar__item--AlignItems);
   align-self: var(--pf-v5-c-toolbar__item--AlignSelf);
   width: var(--pf-v5-c-toolbar__item--Width--base);
   min-width: var(--pf-v5-c-toolbar__item--MinWidth--base);
@@ -302,6 +318,18 @@
     --pf-v5-c-toolbar__item--MinWidth--base: var(--pf-v5-c-toolbar__item--MinWidth-on-2xl, var(--pf-v5-c-toolbar__item--MinWidth-on-xl, var(--pf-v5-c-toolbar__item--MinWidth-on-lg, var(--pf-v5-c-toolbar__item--MinWidth-on-md, var(--pf-v5-c-toolbar__item--MinWidth-on-sm, var(--pf-v5-c-toolbar__item--MinWidth))))));
   }
 }
+.pf-v5-c-toolbar__item.pf-m-align-items-start {
+  align-items: flex-start;
+}
+.pf-v5-c-toolbar__item.pf-m-align-items-center {
+  align-items: center;
+}
+.pf-v5-c-toolbar__item.pf-m-align-items-baseline {
+  align-items: baseline;
+}
+.pf-v5-c-toolbar__item.pf-m-align-self-start {
+  align-self: flex-start;
+}
 .pf-v5-c-toolbar__item.pf-m-align-self-center {
   align-self: center;
 }
@@ -358,7 +386,7 @@
   --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-toolbar__content--Display);
   position: relative;
   row-gap: var(--pf-v5-c-toolbar__content--RowGap);
-  align-items: center;
+  align-items: var(--pf-v5-c-toolbar__content--AlignItems);
   padding-right: var(--pf-v5-c-toolbar__content--PaddingRight);
   padding-left: var(--pf-v5-c-toolbar__content--PaddingLeft);
 }
@@ -369,9 +397,15 @@
   align-items: var(--pf-v5-c-toolbar__content-section--AlignItems);
   width: 100%;
 }
+.pf-v5-c-toolbar__content-section.pf-m-align-items-start {
+  align-items: flex-start;
+}
 .pf-v5-c-toolbar__content-section.pf-m-align-items-center {
   align-items: center;
 }
+.pf-v5-c-toolbar__content-section.pf-m-align-items-baseline {
+  align-items: baseline;
+}
 
 .pf-v5-c-toolbar__expandable-content {
   position: absolute;

package/css/components/Toolbar/toolbar.d.ts

@@ -20,8 +20,10 @@ declare const _default: {
     "fullHeight": "pf-m-full-height",
     "static": "pf-m-static",
     "vertical": "pf-m-vertical",
+    "alignItemsStart": "pf-m-align-items-start",
     "alignItemsCenter": "pf-m-align-items-center",
     "alignItemsBaseline": "pf-m-align-items-baseline",
+    "alignSelfStart": "pf-m-align-self-start",
     "alignSelfCenter": "pf-m-align-self-center",
     "alignSelfBaseline": "pf-m-align-self-baseline",
     "buttonGroup": "pf-m-button-group",

package/css/components/Toolbar/toolbar.js

@@ -22,8 +22,10 @@ exports.default = {
     "fullHeight": "pf-m-full-height",
     "static": "pf-m-static",
     "vertical": "pf-m-vertical",
+    "alignItemsStart": "pf-m-align-items-start",
     "alignItemsCenter": "pf-m-align-items-center",
     "alignItemsBaseline": "pf-m-align-items-baseline",
+    "alignSelfStart": "pf-m-align-self-start",
     "alignSelfCenter": "pf-m-align-self-center",
     "alignSelfBaseline": "pf-m-align-self-baseline",
     "buttonGroup": "pf-m-button-group",

package/css/components/Toolbar/toolbar.mjs

@@ -20,8 +20,10 @@ export default {
     "fullHeight": "pf-m-full-height",
     "static": "pf-m-static",
     "vertical": "pf-m-vertical",
+    "alignItemsStart": "pf-m-align-items-start",
     "alignItemsCenter": "pf-m-align-items-center",
     "alignItemsBaseline": "pf-m-align-items-baseline",
+    "alignSelfStart": "pf-m-align-self-start",
     "alignSelfCenter": "pf-m-align-self-center",
     "alignSelfBaseline": "pf-m-align-self-baseline",
     "buttonGroup": "pf-m-button-group",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "5.0.0-alpha.16",
+  "version": "5.0.0-alpha.18",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.0.0-alpha.64",
+    "@patternfly/patternfly": "5.0.0-alpha.69",
     "camel-case": "^3.0.0",
     "css": "^2.2.3",
     "fs-extra": "^11.1.1",
@@ -29,5 +29,5 @@
     "typescript": "^4.7.4"
   },
   "license": "MIT",
-  "gitHead": "ff94267709508525b7fe8dd1da0b7ea6a33854aa"
+  "gitHead": "026c5f69bb0f7280c796d28f2d3fd52891793229"
 }

package/src/css/components/Consoles/AccessConsoles.css

@@ -1,14 +1,14 @@
-.pf-c-console {
+.pf-v5-c-console {
   display: grid;
   grid-template-areas:
     'actions-main actions-extra'
     'main main';
   row-gap: var(--pf-v5-global--spacer--md);
 }
-.pf-c-console__actions {
+.pf-v5-c-console__actions {
   grid-area: actions-main;
   display: flex;
 }
-.pf-c-console__actions > div {
+.pf-v5-c-console__actions > div {
   margin-right: var(--pf-v5-global--spacer--sm);
 }

package/src/css/components/Consoles/DesktopViewer.css

@@ -1,4 +1,4 @@
-.pf-c-console__desktop-viewer {
+.pf-v5-c-console__desktop-viewer {
   grid-area: main;
   display: grid;
   gap: var(--pf-v5-global--spacer--md);

package/src/css/components/Consoles/SerialConsole.css

@@ -1,11 +1,11 @@
-.pf-c-console__serial {
+.pf-v5-c-console__serial {
   grid-area: main;
 }
-.pf-c-console__actions-serial {
+.pf-v5-c-console__actions-serial {
   grid-area: actions-extra;
   display: flex;
   justify-content: flex-end;
 }
-.pf-c-console__actions-serial > button {
+.pf-v5-c-console__actions-serial > button {
   margin-right: var(--pf-v5-global--spacer--sm);
 }

package/src/css/components/Consoles/VncConsole.css

@@ -1,7 +1,7 @@
-.pf-c-console__vnc {
+.pf-v5-c-console__vnc {
   grid-area: main;
 }
-.pf-c-console__actions-vnc {
+.pf-v5-c-console__actions-vnc {
   grid-area: actions-extra;
   display: flex;
   flex-wrap: wrap;

package/src/css/components/Table/inline-edit.css

@@ -1,60 +1,60 @@
 :root {
-  --pf-v5-global--Blue--50: #def3ff;
-  --pf-v5-global--Blue--200: #7dc3e8;
+  --pf-v5-global--palette--blue-50: #def3ff;
+  --pf-v5-global--palette--blue-200: #7dc3e8;
 }
 
-tr.pf-c-table__editable-row:hover,
-tr.pf-c-table__editable-row.pf-m-editing {
-  background: var(--pf-v5-global--Blue--50) !important;
+tr.pf-v5-c-table__editable-row:hover,
+tr.pf-v5-c-table__editable-row.pf-m-editing {
+  background: var(--pf-v5-global--palette--blue-50) !important;
 }
-tr.pf-c-table__editable-row:hover td,
-tr.pf-c-table__editable-row.pf-m-editing td {
-  border-bottom: 1px solid var(--pf-v5-global--Blue--200) !important;
-  border-top: 1px solid var(--pf-v5-global--Blue--200) !important;
+tr.pf-v5-c-table__editable-row:hover td,
+tr.pf-v5-c-table__editable-row.pf-m-editing td {
+  border-bottom: 1px solid var(--pf-v5-global--palette--blue-200) !important;
+  border-top: 1px solid var(--pf-v5-global--palette--blue-200) !important;
 }
-tr.pf-c-table__editable-row:hover td:first-child,
-tr.pf-c-table__editable-row.pf-m-editing td:first-child {
-  border-left: 1px solid var(--pf-v5-global--Blue--200) !important;
+tr.pf-v5-c-table__editable-row:hover td:first-child,
+tr.pf-v5-c-table__editable-row.pf-m-editing td:first-child {
+  border-left: 1px solid var(--pf-v5-global--palette--blue-200) !important;
 }
-tr.pf-c-table__editable-row:hover td:last-child,
-tr.pf-c-table__editable-row.pf-m-editing td:last-child {
-  border-right: 1px solid var(--pf-v5-global--Blue--200) !important;
+tr.pf-v5-c-table__editable-row:hover td:last-child,
+tr.pf-v5-c-table__editable-row.pf-m-editing td:last-child {
+  border-right: 1px solid var(--pf-v5-global--palette--blue-200) !important;
 }
-tr.pf-c-table__editable-row.pf-m-table-editing-first-row {
-  border-top: 3px solid var(--pf-v5-global--Blue--200) !important;
+tr.pf-v5-c-table__editable-row.pf-m-table-editing-first-row {
+  border-top: 3px solid var(--pf-v5-global--palette--blue-200) !important;
 }
-tr.pf-c-table__editable-row.pf-m-table-editing-last-row {
-  border-bottom: 3px solid var(--pf-v5-global--Blue--200) !important;
+tr.pf-v5-c-table__editable-row.pf-m-table-editing-last-row {
+  border-bottom: 3px solid var(--pf-v5-global--palette--blue-200) !important;
 }
-tr.pf-c-table__editable-row input {
+tr.pf-v5-c-table__editable-row input {
   display: block;
   background: var(--pf-v5-global--BackgroundColor--100);
-  border: 1px solid var(--pf-v5-global--BorderColor);
+  border: 1px solid var(--pf-v5-global--BorderColor--100);
 }
-tr.pf-c-table__editable-row input:hover {
+tr.pf-v5-c-table__editable-row input:hover {
   cursor: text;
 }
 
-.pf-c-table__inline-edit-buttons {
+.pf-v5-c-table__inline-edit-buttons {
   position: fixed;
   z-index: 1000;
   padding: 4px;
   margin: 0;
-  background: var(--pf-v5-global--Blue--50);
-  border: 1px solid var(--pf-v5-global--Blue--200);
+  background: var(--pf-v5-global--palette--blue-50);
+  border: 1px solid var(--pf-v5-global--palette--blue-200);
 }
-.pf-c-table__inline-edit-buttons.pf-m-top {
+.pf-v5-c-table__inline-edit-buttons.pf-m-top {
   border-bottom: 0;
 }
-.pf-c-table__inline-edit-buttons.pf-m-bottom {
+.pf-v5-c-table__inline-edit-buttons.pf-m-bottom {
   border-top: 0;
 }
-.pf-c-table__inline-edit-buttons.pf-m-bold {
+.pf-v5-c-table__inline-edit-buttons.pf-m-bold {
   border-width: 3px;
 }
-.pf-c-table__inline-edit-buttons button {
+.pf-v5-c-table__inline-edit-buttons button {
   margin-left: 4px;
 }
-.pf-c-table__inline-edit-buttons button:first-child {
+.pf-v5-c-table__inline-edit-buttons button:first-child {
   margin-left: 0;
 }