@patternfly/react-styles 5.0.0-alpha.17 → 5.0.0-alpha.19

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.19](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@5.0.0-alpha.18...@patternfly/react-styles@5.0.0-alpha.19) (2023-06-02)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+# 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

package/css/components/BackgroundImage/background-image.css

@@ -1,5 +1,6 @@
 .pf-v5-c-background-image {
   --pf-v5-c-background-image--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
+  --pf-v5-c-background-image--BackgroundImage: none;
   --pf-v5-c-background-image--BackgroundPosition: bottom right;
   --pf-v5-c-background-image--BackgroundSize--min-width: 200px;
   --pf-v5-c-background-image--BackgroundSize--width: 60%;
@@ -12,7 +13,7 @@
   width: 100%;
   height: 100%;
   background-color: var(--pf-v5-c-background-image--BackgroundColor);
-  background-image: var(--pf-v5-c-background-image--BackgroundImage, none);
+  background-image: var(--pf-v5-c-background-image--BackgroundImage);
   background-repeat: no-repeat;
   background-position: var(--pf-v5-c-background-image--BackgroundPosition);
   background-size: var(--pf-v5-c-background-image--BackgroundSize);

package/css/components/CodeEditor/code-editor.css

@@ -77,6 +77,7 @@
 
 .pf-v5-c-code-editor__main {
   position: relative;
+  color: var(--pf-v5-c-code-editor__main--Color, inherit);
   background-color: var(--pf-v5-c-code-editor__main--BackgroundColor);
   border: var(--pf-v5-c-code-editor__main--BorderWidth) solid;
   border-color: var(--pf-v5-c-code-editor__main--BorderColor);
@@ -135,6 +136,10 @@
   margin-left: var(--pf-v5-c-code-editor__tab-icon--text--MarginLeft);
 }
 
+:where(.pf-v5-theme-dark) .pf-v5-c-code-editor {
+  --pf-v5-c-code-editor--m-read-only__main--Color: var(--pf-v5-global--disabled-color--300);
+  --pf-v5-c-code-editor--m-read-only__main--BackgroundColor: var(--pf-v5-global--disabled-color--200);
+}
 :where(.pf-v5-theme-dark) .pf-v5-c-code-editor__controls > * + * {
   border-left: 1px solid var(--pf-v5-global--palette--black-700);
 }

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/FormControl/form-control.css

@@ -275,14 +275,14 @@
   --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
   --pf-v5-c-form-control--BorderLeftColor: transparent;
   --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
-  --pf-v5-c-form-control--disabled--Color: var(--pf-v5-global--disabled-color--300);
-  --pf-v5-c-form-control--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
-  --pf-v5-c-form-control--readonly--BackgroundColor: var(--pf-v5-global--disabled-color--200);
+  --pf-v5-c-form-control--m-disabled--Color: var(--pf-v5-global--disabled-color--300);
+  --pf-v5-c-form-control--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
+  --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--pf-v5-global--disabled-color--200);
+  --pf-v5-c-form-control--m-readonly--hover--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
+  --pf-v5-c-form-control--m-readonly--focus--BorderBottomColor:var(--pf-v5-global--BorderColor--400);
+  --pf-v5-c-form-control--m-disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--300);
   color: var(--pf-v5-global--Color--100);
 }
 :where(.pf-v5-theme-dark) .pf-v5-c-form-control::-webkit-calendar-picker-indicator {
   filter: invert(1);
-}
-:where(.pf-v5-theme-dark) .pf-v5-c-form-control.pf-m-readonly {
-  border-bottom-color: var(--pf-v5-global--palette--black-700);
 }

package/css/components/MenuToggle/menu-toggle.css

@@ -107,9 +107,11 @@
   --pf-v5-c-menu-toggle--m-split-button--m-action--m-primary--m-expanded--child--BackgroundColor: var(--pf-v5-global--primary-color--200);
   --pf-v5-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-v5-global--primary-color--100);
   --pf-v5-c-menu-toggle__button--BackgroundColor: transparent;
+  --pf-v5-c-menu-toggle__button--PaddingLeft: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-menu-toggle__button--PaddingRight: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-menu-toggle__button__controls--MarginRight: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-menu-toggle__button__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v5-global--spacer--sm);
   position: relative;
@@ -360,6 +362,8 @@
   --pf-v5-c-menu-toggle__controls--PaddingLeft: 0;
   --pf-v5-c-menu-toggle__controls--MarginRight: var(--pf-v5-c-menu-toggle__button__controls--MarginRight);
   --pf-v5-c-menu-toggle__controls--MarginLeft: var(--pf-v5-c-menu-toggle__button__controls--MarginLeft);
+  padding-right: var(--pf-v5-c-menu-toggle__button--PaddingRight);
+  padding-left: var(--pf-v5-c-menu-toggle__button--PaddingLeft);
   color: inherit;
   background-color: var(--pf-v5-c-menu-toggle__button--BackgroundColor);
   border: 0;

package/css/components/Page/page.css

@@ -67,7 +67,7 @@
   }
 }
 
-.pf-v5-c-page {
+:root {
   --pf-v5-c-page--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-300);
   --pf-v5-c-page--inset: var(--pf-v5-global--spacer--md);
   --pf-v5-c-page--xl--inset: var(--pf-v5-global--spacer--lg);
@@ -181,40 +181,32 @@
   --pf-v5-c-page__main-wizard--BorderTopColor: var(--pf-v5-global--BorderColor--100);
   --pf-v5-c-page__main-wizard--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
   --pf-v5-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  display: grid;
-  grid-template-areas: "header" "main";
-  grid-template-rows: max-content 1fr;
-  grid-template-columns: 1fr;
-  height: 100vh;
-  height: 100dvh;
-  max-height: 100%;
-  background-color: var(--pf-v5-c-page--BackgroundColor);
 }
 @media (min-width: 1200px) {
-  .pf-v5-c-page {
+  :root {
     --pf-v5-c-page__header-brand--PaddingLeft: var(--pf-v5-c-page__header-brand--xl--PaddingLeft);
     --pf-v5-c-page--inset: var(--pf-v5-c-page--xl--inset);
   }
 }
 @media screen and (min-width: 1200px) {
-  .pf-v5-c-page {
+  :root {
     --pf-v5-c-page__header-nav--BackgroundColor: var(--pf-v5-c-page__header-nav--xl--BackgroundColor);
     --pf-v5-c-page__header-nav--PaddingRight: var(--pf-v5-c-page__header-nav--xl--PaddingRight);
     --pf-v5-c-page__header-nav--PaddingLeft: var(--pf-v5-c-page__header-nav--xl--PaddingLeft);
   }
 }
 @media screen and (min-width: 1200px) {
-  .pf-v5-c-page {
+  :root {
     --pf-v5-c-page__header-tools--MarginRight: var(--pf-v5-c-page__header-tools--xl--MarginRight);
   }
 }
 @media screen and (min-width: 1200px) {
-  .pf-v5-c-page {
+  :root {
     --pf-v5-c-page__sidebar--TranslateX: var(--pf-v5-c-page__sidebar--xl--TranslateX);
   }
 }
 @media screen and (min-width: 1200px) {
-  .pf-v5-c-page {
+  :root {
     --pf-v5-c-page__main-section--PaddingTop: var(--pf-v5-c-page__main-section--xl--PaddingTop);
     --pf-v5-c-page__main-section--PaddingRight: var(--pf-v5-c-page__main-section--xl--PaddingRight);
     --pf-v5-c-page__main-section--PaddingBottom: var(--pf-v5-c-page__main-section--xl--PaddingBottom);
@@ -222,17 +214,28 @@
   }
 }
 @media screen and (min-width: 1200px) {
-  .pf-v5-c-page {
+  :root {
     --pf-v5-c-page__main-nav--PaddingRight: var(--pf-v5-c-page__main-nav--xl--PaddingRight);
     --pf-v5-c-page__main-nav--PaddingLeft: var(--pf-v5-c-page__main-nav--xl--PaddingLeft);
   }
 }
 @media screen and (min-width: 1200px) {
-  .pf-v5-c-page {
+  :root {
     --pf-v5-c-page__main-breadcrumb--PaddingRight: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingRight);
     --pf-v5-c-page__main-breadcrumb--PaddingLeft: var(--pf-v5-c-page__main-breadcrumb--xl--PaddingLeft);
   }
 }
+
+.pf-v5-c-page {
+  display: grid;
+  grid-template-areas: "header" "main";
+  grid-template-rows: max-content 1fr;
+  grid-template-columns: 1fr;
+  height: 100vh;
+  height: 100dvh;
+  max-height: 100%;
+  background-color: var(--pf-v5-c-page--BackgroundColor);
+}
 @media (min-width: 1200px) {
   .pf-v5-c-page {
     grid-template-areas: "header header" "nav main";
@@ -961,7 +964,7 @@
   --pf-v5-global--BackgroundColor--100: #1b1d21;
 }
 
-:where(.pf-v5-theme-dark) .pf-v5-c-page {
+:where(.pf-v5-theme-dark):root {
   --pf-v5-c-page__main-section--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
   --pf-v5-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
   --pf-v5-c-page__sidebar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);

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/layouts/Flex/flex.css

@@ -29,6 +29,7 @@
 }
 
 .pf-v5-l-flex > * {
+  --pf-v5-l-flex--spacer: initial;
   --pf-v5-l-flex--spacer--column: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--column--base));
   --pf-v5-l-flex--spacer--row: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--row--base));
   order: var(--pf-v5-l-flex--item--Order);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "5.0.0-alpha.17",
+  "version": "5.0.0-alpha.19",
   "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.69",
+    "@patternfly/patternfly": "5.0.0-alpha.74",
     "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": "0f4a1d04e19c94a00f2174fb5e063e4cc516819f"
+  "gitHead": "ed9000303ee57e753010e884ab9f3db6acea5b15"
 }

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;
 }