@patternfly/react-styles 6.0.0-alpha.10 → 6.0.0-alpha.12

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

@@ -1,39 +1,56 @@
-.pf-v5-c-code-editor {
-  --pf-v5-c-code-editor__controls--c-button--m-control--Color: var(--pf-v5-global--Color--200);
-  --pf-v5-c-code-editor__controls--c-button--m-control--hover--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-code-editor__controls--c-button--m-control--focus--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-code-editor__controls--c-button--m-control--disabled--after--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-code-editor__header--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-code-editor__header--before--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-code-editor__main--BorderColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-code-editor__main--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-code-editor__main--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-code-editor--m-read-only__main--BackgroundColor: var(--pf-v5-global--disabled-color--300);
-  --pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-code-editor__main--m-drag-hover--after--BackgroundColor: var(--pf-v5-global--primary-color--100);
+:where(:root), :where(.pf-v5-c-code-editor) {
+  --pf-v5-c-code-editor__controls--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-editor__controls--Gap: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-code-editor__header--before--BorderBottomWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v5-c-code-editor__header--before--BorderBottomColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-code-editor__header-content--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-code-editor__header-content--m-plain--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-code-editor__header-content--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-code-editor__header-content--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-code-editor__header-content--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-editor__header-content--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-editor__header-content--BorderStartStartRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-code-editor__header-content--BorderStartEndRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-code-editor__upload--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v5-c-code-editor__upload--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v5-c-code-editor__upload--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v5-c-code-editor__upload--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v5-c-code-editor__upload--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-code-editor__main--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-code-editor__main--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v5-c-code-editor__main--BorderEndStartRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-code-editor__main--BorderEndEndRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-code-editor__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-code-editor--m-read-only__main--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-code-editor__upload--before--BorderWidth: 0;
+  --pf-v5-c-code-editor__upload--before--BorderColor: transparent;
+  --pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth: var(--pf-t--global--border--width--divider--hover);
+  --pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor: var( --pf-t--global--border--color--clicked);
+  --pf-v5-c-code-editor__main--m-drag-hover--after--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v5-c-code-editor__main--m-drag-hover--after--Opacity: .1;
-  --pf-v5-c-code-editor__code--PaddingTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-code-editor__code--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-code-editor__code--PaddingBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-code-editor__code--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-code-editor__code-pre--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-code-editor__code-pre--FontFamily: var(--pf-v5-global--FontFamily--monospace);
-  --pf-v5-c-code-editor__header-main--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-code-editor__header-main--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-code-editor__tab--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
-  --pf-v5-c-code-editor__tab--Color: var(--pf-v5-global--Color--200);
-  --pf-v5-c-code-editor__tab--PaddingTop: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-code-editor__tab--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-code-editor__tab--PaddingBottom: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-code-editor__tab--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-code-editor__tab--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-code-editor__tab--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-code-editor__code--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-editor__code--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-editor__code--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-editor__code--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-editor__code-pre--FontSize: var(--pf-t--global--font--size--sm);
+  --pf-v5-c-code-editor__code-pre--FontFamily: var(--pf-t--global--font--family--mono);
+  --pf-v5-c-code-editor__header-main--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-editor__header-main--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-editor__tab--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-code-editor__tab--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-code-editor__tab--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-editor__tab--PaddingRight: var( --pf-t--global--spacer--sm);
+  --pf-v5-c-code-editor__tab--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-editor__tab--PaddingLeft: var( --pf-t--global--spacer--sm);
+  --pf-v5-c-code-editor__tab--BorderTopWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v5-c-code-editor__tab--BorderRightWidth: var(--pf-t--global--border--width--box--default);
   --pf-v5-c-code-editor__tab--BorderBottomWidth: 0;
-  --pf-v5-c-code-editor__tab--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-code-editor__tab--BorderColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-code-editor__tab-icon--text--MarginLeft: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-code-editor__tab--BorderLeftWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v5-c-code-editor__tab--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-code-editor__tab--BorderStartEndRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-code-editor__tab-icon--text--MarginLeft: var(--pf-t--global--spacer--sm);
 }
+
 .pf-v5-c-code-editor.pf-m-read-only {
   --pf-v5-c-code-editor__main--BackgroundColor: var(--pf-v5-c-code-editor--m-read-only__main--BackgroundColor);
 }
@@ -41,7 +58,6 @@
 .pf-v5-c-code-editor__header {
   position: relative;
   display: flex;
-  align-items: flex-end;
 }
 .pf-v5-c-code-editor__header::before {
   position: absolute;
@@ -52,54 +68,68 @@
   content: "";
   border-block-end: var(--pf-v5-c-code-editor__header--before--BorderBottomWidth) solid var(--pf-v5-c-code-editor__header--before--BorderBottomColor);
 }
+.pf-v5-c-code-editor__header.pf-m-plain {
+  --pf-v5-c-code-editor__header-content--BackgroundColor: var(--pf-v5-c-code-editor__header-content--m-plain--BackgroundColor);
+}
 
-.pf-v5-c-code-editor__controls {
+.pf-v5-c-code-editor__header-content {
   display: flex;
+  flex: 1;
+  align-items: flex-end;
+  padding-block-start: var(--pf-v5-c-code-editor__header-content--PaddingBlockStart);
+  padding-block-end: var(--pf-v5-c-code-editor__header-content--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v5-c-code-editor__header-content--PaddingInlineStart);
+  padding-inline-end: var(--pf-v5-c-code-editor__header-content--PaddingInlineEnd);
+  background-color: var(--pf-v5-c-code-editor__header-content--BackgroundColor);
+  border-start-start-radius: var(--pf-v5-c-code-editor__header-content--BorderStartStartRadius);
 }
-.pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control {
-  --pf-v5-c-button--m-control--Color: var(--pf-v5-c-code-editor__controls--c-button--m-control--Color);
-}
-.pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:hover {
-  --pf-v5-c-code-editor__controls--c-button--m-control--Color: var(--pf-v5-c-code-editor__controls--c-button--m-control--hover--Color);
-}
-.pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:focus {
-  --pf-v5-c-code-editor__controls--c-button--m-control--Color: var(--pf-v5-c-code-editor__controls--c-button--m-control--focus--Color);
+.pf-v5-c-code-editor__header-content:last-child {
+  border-start-end-radius: var(--pf-v5-c-code-editor__header-content--BorderStartEndRadius);
 }
-.pf-v5-c-code-editor__controls .pf-v5-c-button.pf-m-control:disabled::after {
-  border-block-end-color: var(--pf-v5-c-code-editor__controls--c-button--m-control--disabled--after--BorderBottomColor);
+
+.pf-v5-c-code-editor__controls {
+  display: flex;
+  gap: var(--pf-v5-c-code-editor__controls--Gap);
+  align-items: flex-start;
 }
 
 .pf-v5-c-code-editor__header-main {
   flex-grow: 1;
+  align-self: center;
   padding-inline-start: var(--pf-v5-c-code-editor__header-main--PaddingLeft);
   padding-inline-end: var(--pf-v5-c-code-editor__header-main--PaddingRight);
 }
 
+.pf-v5-c-code-editor__upload {
+  position: relative;
+  padding-block-start: var(--pf-v5-c-code-editor__upload--PaddingBlockStart);
+  padding-block-end: var(--pf-v5-c-code-editor__upload--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v5-c-code-editor__upload--PaddingInlineStart);
+  padding-inline-end: var(--pf-v5-c-code-editor__upload--PaddingInlineEnd);
+}
+.pf-v5-c-code-editor__upload::before {
+  position: absolute;
+  inset-block-start: var(--pf-v5-c-code-editor__upload--PaddingBlockStart);
+  inset-block-end: var(--pf-v5-c-code-editor__upload--PaddingBlockEnd);
+  inset-inline-start: var(--pf-v5-c-code-editor__upload--PaddingInlineStart);
+  inset-inline-end: var(--pf-v5-c-code-editor__upload--PaddingInlineEnd);
+  content: "";
+  border: var(--pf-v5-c-code-editor__upload--before--BorderWidth) dashed var(--pf-v5-c-code-editor__upload--before--BorderColor);
+  border-radius: var(--pf-v5-c-code-editor__upload--BorderRadius);
+}
+
 .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);
+  border-end-start-radius: var(--pf-v5-c-code-editor__main--BorderEndStartRadius);
+  border-end-end-radius: var(--pf-v5-c-code-editor__main--BorderEndEndRadius);
 }
-.pf-v5-c-code-editor__main.pf-m-drag-hover::after {
-  position: absolute;
-  inset-block-start: 0;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  content: "";
-  background-color: var(--pf-v5-c-code-editor__main--m-drag-hover--after--BackgroundColor);
-  opacity: var(--pf-v5-c-code-editor__main--m-drag-hover--after--Opacity);
-}
-.pf-v5-c-code-editor__main.pf-m-drag-hover::before {
-  position: absolute;
-  inset-block-start: 0;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  content: "";
-  border: var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth) solid var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor);
+.pf-v5-c-code-editor__main.pf-m-drag-hover {
+  --pf-v5-c-code-editor__upload--before--BorderWidth: var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderWidth);
+  --pf-v5-c-code-editor__upload--before--BorderColor: var(--pf-v5-c-code-editor__main--m-drag-hover--before--BorderColor);
 }
 .pf-v5-c-code-editor__main .monaco-editor {
   background-color: var(--pf-v5-c-code-editor__main--BackgroundColor);
@@ -130,7 +160,6 @@
   padding-block-end: var(--pf-v5-c-code-editor__tab--PaddingBottom);
   padding-inline-start: var(--pf-v5-c-code-editor__tab--PaddingLeft);
   padding-inline-end: var(--pf-v5-c-code-editor__tab--PaddingRight);
-  margin-inline-start: auto;
   color: var(--pf-v5-c-code-editor__tab--Color);
   background-color: var(--pf-v5-c-code-editor__tab--BackgroundColor);
   border-color: var(--pf-v5-c-code-editor__tab--BorderColor);
@@ -139,16 +168,9 @@
   border-block-end-width: var(--pf-v5-c-code-editor__tab--BorderBottomWidth);
   border-inline-start-width: var(--pf-v5-c-code-editor__tab--BorderLeftWidth);
   border-inline-end-width: var(--pf-v5-c-code-editor__tab--BorderRightWidth);
+  border-start-end-radius: var(--pf-v5-c-code-editor__tab--BorderStartEndRadius);
 }
 
 .pf-v5-c-code-editor__tab-icon + .pf-v5-c-code-editor__tab-text {
   margin-inline-start: 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-inline-start: 1px solid var(--pf-v5-global--palette--black-700);
 }

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

@@ -1,22 +1,22 @@
 import './code-editor.css';
 declare const _default: {
-  "button": "pf-v5-c-button",
   "codeEditor": "pf-v5-c-code-editor",
   "codeEditorCode": "pf-v5-c-code-editor__code",
   "codeEditorCodePre": "pf-v5-c-code-editor__code-pre",
   "codeEditorControls": "pf-v5-c-code-editor__controls",
   "codeEditorHeader": "pf-v5-c-code-editor__header",
+  "codeEditorHeaderContent": "pf-v5-c-code-editor__header-content",
   "codeEditorHeaderMain": "pf-v5-c-code-editor__header-main",
   "codeEditorMain": "pf-v5-c-code-editor__main",
   "codeEditorTab": "pf-v5-c-code-editor__tab",
   "codeEditorTabIcon": "pf-v5-c-code-editor__tab-icon",
   "codeEditorTabText": "pf-v5-c-code-editor__tab-text",
+  "codeEditorUpload": "pf-v5-c-code-editor__upload",
   "modifiers": {
     "readOnly": "pf-m-read-only",
-    "control": "pf-m-control",
+    "plain": "pf-m-plain",
     "dragHover": "pf-m-drag-hover"
   },
-  "monacoEditor": "monaco-editor",
-  "themeDark": "pf-v5-theme-dark"
+  "monacoEditor": "monaco-editor"
 };
 export default _default;

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

@@ -2,22 +2,22 @@
 exports.__esModule = true;
 require('./code-editor.css');
 exports.default = {
-  "button": "pf-v5-c-button",
   "codeEditor": "pf-v5-c-code-editor",
   "codeEditorCode": "pf-v5-c-code-editor__code",
   "codeEditorCodePre": "pf-v5-c-code-editor__code-pre",
   "codeEditorControls": "pf-v5-c-code-editor__controls",
   "codeEditorHeader": "pf-v5-c-code-editor__header",
+  "codeEditorHeaderContent": "pf-v5-c-code-editor__header-content",
   "codeEditorHeaderMain": "pf-v5-c-code-editor__header-main",
   "codeEditorMain": "pf-v5-c-code-editor__main",
   "codeEditorTab": "pf-v5-c-code-editor__tab",
   "codeEditorTabIcon": "pf-v5-c-code-editor__tab-icon",
   "codeEditorTabText": "pf-v5-c-code-editor__tab-text",
+  "codeEditorUpload": "pf-v5-c-code-editor__upload",
   "modifiers": {
     "readOnly": "pf-m-read-only",
-    "control": "pf-m-control",
+    "plain": "pf-m-plain",
     "dragHover": "pf-m-drag-hover"
   },
-  "monacoEditor": "monaco-editor",
-  "themeDark": "pf-v5-theme-dark"
+  "monacoEditor": "monaco-editor"
 };

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

@@ -1,21 +1,21 @@
 import './code-editor.css';
 export default {
-  "button": "pf-v5-c-button",
   "codeEditor": "pf-v5-c-code-editor",
   "codeEditorCode": "pf-v5-c-code-editor__code",
   "codeEditorCodePre": "pf-v5-c-code-editor__code-pre",
   "codeEditorControls": "pf-v5-c-code-editor__controls",
   "codeEditorHeader": "pf-v5-c-code-editor__header",
+  "codeEditorHeaderContent": "pf-v5-c-code-editor__header-content",
   "codeEditorHeaderMain": "pf-v5-c-code-editor__header-main",
   "codeEditorMain": "pf-v5-c-code-editor__main",
   "codeEditorTab": "pf-v5-c-code-editor__tab",
   "codeEditorTabIcon": "pf-v5-c-code-editor__tab-icon",
   "codeEditorTabText": "pf-v5-c-code-editor__tab-text",
+  "codeEditorUpload": "pf-v5-c-code-editor__upload",
   "modifiers": {
     "readOnly": "pf-m-read-only",
-    "control": "pf-m-control",
+    "plain": "pf-m-plain",
     "dragHover": "pf-m-drag-hover"
   },
-  "monacoEditor": "monaco-editor",
-  "themeDark": "pf-v5-theme-dark"
+  "monacoEditor": "monaco-editor"
 };

package/css/components/DatePicker/date-picker.css

@@ -1,18 +1,22 @@
-.pf-v5-c-date-picker {
+:where(:root),
+:where(.pf-v5-c-date-picker) {
   --pf-v5-c-date-picker--m-top__calendar--Top: 0;
-  --pf-v5-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-v5-global--spacer--xs));
-  --pf-v5-c-date-picker__helper-text--MarginTop: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-t--global--spacer--xs));
+  --pf-v5-c-date-picker__helper-text--MarginTop: var(--pf-t--global--spacer--sm);
   --pf-v5-c-date-picker__input--c-form-control--Width: calc(var(--pf-v5-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-v5-c-date-picker__input--c-form-control--width-base));
-  --pf-v5-c-date-picker__input--c-form-control--width-base: calc(var(--pf-v5-global--spacer--xl) + var(--pf-v5-global--spacer--sm));
-  --pf-v5-c-date-picker__input--c-form-control--width-chars: 10;
-  --pf-v5-c-date-picker__calendar--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
-  --pf-v5-c-date-picker__calendar--BoxShadow: var(--pf-v5-global--BoxShadow--md);
-  --pf-v5-c-date-picker__calendar--ZIndex: var(--pf-v5-global--ZIndex--sm);
-  --pf-v5-c-date-picker__calendar--Top: calc(100% + var(--pf-v5-global--spacer--xs));
+  --pf-v5-c-date-picker__input--c-form-control--width-base: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
+  --pf-v5-c-date-picker__input--c-form-control--width-chars: 11;
+  --pf-v5-c-date-picker__calendar--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --pf-v5-c-date-picker__calendar--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --pf-v5-c-date-picker__calendar--ZIndex: var(--pf-t--global--Zindex--sm);
+  --pf-v5-c-date-picker__calendar--Top: calc(100% + var(--pf-t--global--spacer--xs));
   --pf-v5-c-date-picker__calendar--Right: auto;
   --pf-v5-c-date-picker__calendar--Left: 0;
   --pf-v5-c-date-picker__calendar--m-align-right--Right: 0;
   --pf-v5-c-date-picker__calendar--m-align-right--Left: auto;
+}
+
+.pf-v5-c-date-picker {
   position: relative;
   display: inline-block;
 }
@@ -51,9 +55,4 @@
   inset-inline-end: auto;
   z-index: auto;
   min-width: min-content;
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-date-picker {
-  --pf-v5-c-date-picker__calendar--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
-  --pf-v5-c-date-picker__calendar--Top: 100%;
 }

package/css/components/DatePicker/date-picker.d.ts

@@ -9,7 +9,6 @@ declare const _default: {
     "alignRight": "pf-m-align-right",
     "top": "pf-m-top",
     "static": "pf-m-static"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };
 export default _default;

package/css/components/DatePicker/date-picker.js

@@ -11,6 +11,5 @@ exports.default = {
     "alignRight": "pf-m-align-right",
     "top": "pf-m-top",
     "static": "pf-m-static"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };

package/css/components/DatePicker/date-picker.mjs

@@ -9,6 +9,5 @@ export default {
     "alignRight": "pf-m-align-right",
     "top": "pf-m-top",
     "static": "pf-m-static"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };

package/css/components/Divider/divider.css

@@ -60,7 +60,9 @@
   width: 100%;
   height: var(--pf-v5-c-divider--Size);
   --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-divider--Display);
+  flex-shrink: 0;
   align-items: stretch;
+  align-self: stretch;
   justify-content: center;
   border: 0;
 }
@@ -77,7 +79,7 @@
 .pf-v5-c-divider.pf-m-vertical {
   flex-direction: column;
   width: var(--pf-v5-c-divider--Size);
-  height: 100%;
+  height: inherit;
 }
 .pf-v5-c-divider.pf-m-inset-none {
   --pf-v5-c-divider--before--FlexBasis: calc(100% - 0% * 2);
@@ -115,7 +117,7 @@
   .pf-v5-c-divider.pf-m-vertical-on-sm {
     flex-direction: column;
     width: var(--pf-v5-c-divider--Size);
-    height: 100%;
+    height: inherit;
   }
 }
 @media (min-width: 576px) {
@@ -155,7 +157,7 @@
   .pf-v5-c-divider.pf-m-vertical-on-md {
     flex-direction: column;
     width: var(--pf-v5-c-divider--Size);
-    height: 100%;
+    height: inherit;
   }
 }
 @media (min-width: 768px) {
@@ -195,7 +197,7 @@
   .pf-v5-c-divider.pf-m-vertical-on-lg {
     flex-direction: column;
     width: var(--pf-v5-c-divider--Size);
-    height: 100%;
+    height: inherit;
   }
 }
 @media (min-width: 992px) {
@@ -235,7 +237,7 @@
   .pf-v5-c-divider.pf-m-vertical-on-xl {
     flex-direction: column;
     width: var(--pf-v5-c-divider--Size);
-    height: 100%;
+    height: inherit;
   }
 }
 @media (min-width: 1200px) {
@@ -275,7 +277,7 @@
   .pf-v5-c-divider.pf-m-vertical-on-2xl {
     flex-direction: column;
     width: var(--pf-v5-c-divider--Size);
-    height: 100%;
+    height: inherit;
   }
 }
 @media (min-width: 1450px) {

package/css/components/DualListSelector/dual-list-selector.css

@@ -1,4 +1,4 @@
-.pf-v5-c-dual-list-selector {
+:where(:root), :where(.pf-v5-c-dual-list-selector) {
   --pf-v5-c-dual-list-selector__header--GridArea: pane-header;
   --pf-v5-c-dual-list-selector__tools--GridArea: pane-tools;
   --pf-v5-c-dual-list-selector__status--GridArea: pane-status;
@@ -10,54 +10,55 @@
   --pf-v5-c-dual-list-selector--m-chosen__menu--GridArea: pane-menu-c;
   --pf-v5-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min: 12.5rem;
   --pf-v5-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max: 28.125rem;
-  --pf-v5-c-dual-list-selector__header--MarginBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-dual-list-selector__title-text--FontWeight: var(--pf-v5-global--FontWeight--bold);
-  --pf-v5-c-dual-list-selector__tools--MarginBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-dual-list-selector__tools-filter--tools-actions--MarginLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-dual-list-selector__menu--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-dual-list-selector__menu--BorderColor: var(--pf-v5-global--BorderColor--100);
+  --pf-v5-c-dual-list-selector__header--MarginBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-dual-list-selector__title-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v5-c-dual-list-selector__title-text--FontSize: var(--pf-t--global--font--size--body--lg);
+  --pf-v5-c-dual-list-selector__tools--MarginBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-dual-list-selector__tools-filter--tools-actions--MarginLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-dual-list-selector__menu--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v5-c-dual-list-selector__menu--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-dual-list-selector__menu--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v5-c-dual-list-selector__menu--MinHeight: 12.5rem;
   --pf-v5-c-dual-list-selector__menu--MaxHeight: 20rem;
-  --pf-v5-c-dual-list-selector__list-item-row--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: transparent;
-  --pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-dual-list-selector__list-item-row--focus-within--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+  --pf-v5-c-dual-list-selector__menu--MarginBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v5-c-dual-list-selector__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
+  --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+  --pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
+  --pf-v5-c-dual-list-selector__list-item-row--BorderRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
+  --pf-v5-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --pf-v5-c-dual-list-selector__list-item--m-ghost-row--Opacity: .4;
-  --pf-v5-c-dual-list-selector__item--PaddingTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-dual-list-selector__item--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-dual-list-selector__item--PaddingBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-dual-list-selector__item--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-dual-list-selector__item--m-expandable--PaddingLeft: 0;
-  --pf-v5-c-dual-list-selector__item--indent--base: calc(var(--pf-v5-global--spacer--md) + var(--pf-v5-global--spacer--sm) + var(--pf-v5-c-dual-list-selector__list-item-row--FontSize));
-  --pf-v5-c-dual-list-selector__item--nested-indent--base: calc(var(--pf-v5-c-dual-list-selector__item--indent--base) - var(--pf-v5-global--spacer--md));
-  --pf-v5-c-dual-list-selector__draggable--item--PaddingLeft: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-dual-list-selector__item-text--Color: var(--pf-v5-global--Color--100);
-  --pf-v5-c-dual-list-selector__list-item-row--m-selected__text--Color: var(--pf-v5-global--active-color--100);
-  --pf-v5-c-dual-list-selector__list-item-row--m-selected__text--FontWeight: var(--pf-v5-global--FontWeight--bold);
-  --pf-v5-c-dual-list-selector__list-item--m-disabled__item-text--Color: var(--pf-v5-global--disabled-color--100);
-  --pf-v5-c-dual-list-selector__status--MarginBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-dual-list-selector__status-text--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-dual-list-selector__status-text--Color: var(--pf-v5-global--Color--200);
-  --pf-v5-c-dual-list-selector__controls--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-dual-list-selector__controls--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-dual-list-selector__item-toggle--PaddingTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-dual-list-selector__item-toggle--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-dual-list-selector__item-toggle--PaddingBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-dual-list-selector__item-toggle--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-dual-list-selector__item-toggle--MarginTop: calc(var(--pf-v5-global--spacer--sm) * -1);
-  --pf-v5-c-dual-list-selector__item-toggle--MarginBottom: calc(var(--pf-v5-global--spacer--sm) * -1);
+  --pf-v5-c-dual-list-selector__item--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-dual-list-selector__item--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-dual-list-selector__item--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-dual-list-selector__item--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-dual-list-selector__item--m-expandable--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-dual-list-selector__item--indent--base: calc(var(--pf-t--global--spacer--md) + var(--pf-t--global--spacer--sm) + var(--pf-v5-c-dual-list-selector__list-item-row--FontSize));
+  --pf-v5-c-dual-list-selector__item--nested-indent--base: calc(var(--pf-v5-c-dual-list-selector__item--indent--base) - var(--pf-t--global--spacer--md));
+  --pf-v5-c-dual-list-selector__draggable--item--PaddingLeft: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-dual-list-selector__item-text--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-dual-list-selector__list-item-row--m-selected__text--Color: var(--pf-t--global--text--color--regular);
+  --pf-v5-c-dual-list-selector__list-item--m-disabled__item-text--Color: var(--pf-t--global--background--color--disabled--default);
+  --pf-v5-c-dual-list-selector__status--MarginBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-dual-list-selector__status-text--FontSize: var(--pf-t--global--font--size--sm);
+  --pf-v5-c-dual-list-selector__status-text--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-dual-list-selector__controls--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-dual-list-selector__controls--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-dual-list-selector__controls--Gap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-dual-list-selector__controls--MarginBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v5-c-dual-list-selector__item-toggle--PaddingRight: var(--pf-t--global--spacer--sm);
   --pf-v5-c-dual-list-selector__list__list__item-toggle--Left: 0;
   --pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX: -100%;
-  --pf-v5-c-dual-list-selector__item-check--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-dual-list-selector__item-count--Marginleft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-v5-global--disabled-color--200);
+  --pf-v5-c-dual-list-selector__item-check--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
   --pf-v5-c-dual-list-selector__item-toggle-icon--Rotate: 0;
   --pf-v5-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
   --pf-v5-c-dual-list-selector__item-toggle-icon--Transition: var(--pf-v5-global--Transition);
   --pf-v5-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v5-c-dual-list-selector__list-item-row--FontSize);
-  --pf-v5-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-v5-global--disabled-color--200);
+  --pf-v5-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--background--color--disabled--default);
+}
+
+.pf-v5-c-dual-list-selector {
   display: grid;
   grid-template-areas: "pane-header . pane-header-c" "pane-tools . pane-tools-c" "pane-status . pane-status-c" "pane-menu controls pane-menu-c";
   grid-template-rows: repeat(3, auto) auto;
@@ -80,6 +81,7 @@
 }
 
 .pf-v5-c-dual-list-selector__title-text {
+  font-size: var(--pf-v5-c-dual-list-selector__title-text--FontSize);
   font-weight: var(--pf-v5-c-dual-list-selector__title-text--FontWeight);
 }
 
@@ -116,8 +118,10 @@
   grid-area: var(--pf-v5-c-dual-list-selector__menu--GridArea);
   min-height: var(--pf-v5-c-dual-list-selector__menu--MinHeight);
   max-height: var(--pf-v5-c-dual-list-selector__menu--MaxHeight);
+  margin-block-start: var(--pf-v5-c-dual-list-selector__menu--MarginBlockStart);
   overflow: auto;
   border: var(--pf-v5-c-dual-list-selector__menu--BorderWidth) solid var(--pf-v5-c-dual-list-selector__menu--BorderColor);
+  border-radius: var(--pf-v5-c-dual-list-selector__menu--BorderRadius);
 }
 
 .pf-v5-c-dual-list-selector__list {
@@ -132,7 +136,6 @@
 .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__item-toggle {
   transform: translateX(var(--pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX));
   position: absolute;
-  inset-block-start: 0;
   inset-inline-start: var(--pf-v5-c-dual-list-selector__list__list__item-toggle--Left);
 }
 :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__item-toggle {
@@ -144,7 +147,7 @@
 }
 
 .pf-v5-c-dual-list-selector__list-item:focus {
-  --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v5-c-dual-list-selector__list-item-row--focus-within--BackgroundColor);
+  --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor);
 }
 .pf-v5-c-dual-list-selector__list-item.pf-m-expandable {
   --pf-v5-c-dual-list-selector__item--PaddingLeft: var(--pf-v5-c-dual-list-selector__item--m-expandable--PaddingLeft);
@@ -162,6 +165,7 @@
   display: flex;
   font-size: var(--pf-v5-c-dual-list-selector__list-item-row--FontSize);
   background-color: var(--pf-v5-c-dual-list-selector__list-item-row--BackgroundColor);
+  border-radius: var(--pf-v5-c-dual-list-selector__list-item-row--BorderRadius);
 }
 .pf-v5-c-dual-list-selector__list-item-row:hover {
   --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor);
@@ -173,6 +177,9 @@
   --pf-v5-c-dual-list-selector__item-text--Color: var(--pf-v5-c-dual-list-selector__list-item-row--m-selected__text--Color);
   font-weight: var(--pf-v5-c-dual-list-selector__list-item-row--m-selected__text--FontWeight);
 }
+.pf-v5-c-dual-list-selector__list-item-row.pf-m-selected:hover {
+  --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor);
+}
 .pf-v5-c-dual-list-selector__list-item-row.pf-m-check {
   --pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: transparent;
 }
@@ -213,6 +220,7 @@
   padding-inline-start: var(--pf-v5-c-dual-list-selector__item--PaddingLeft);
   padding-inline-end: var(--pf-v5-c-dual-list-selector__item--PaddingRight);
   cursor: pointer;
+  outline-offset: -2px;
 }
 
 .pf-v5-c-dual-list-selector__item-count {
@@ -231,10 +239,16 @@
 }
 
 .pf-v5-c-dual-list-selector__controls {
+  display: flex;
+  flex-direction: column;
   grid-area: var(--pf-v5-c-dual-list-selector__controls--GridArea);
+  gap: var(--pf-v5-c-dual-list-selector__controls--Gap);
+  align-items: center;
   align-self: center;
+  justify-content: center;
   padding-inline-start: var(--pf-v5-c-dual-list-selector__controls--PaddingLeft);
   padding-inline-end: var(--pf-v5-c-dual-list-selector__controls--PaddingRight);
+  margin-block-start: var(--pf-v5-c-dual-list-selector__controls--MarginBlockStart);
 }
 
 :where(.pf-v5-m-dir-rtl, [dir=rtl]) :is(.pf-v5-c-dual-list-selector__controls-item, .pf-v5-c-dual-list-selector__item-toggle-icon) {
@@ -309,10 +323,4 @@
 .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item {
   --pf-v5-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-v5-c-dual-list-selector__item--nested-indent--base) * 10 + var(--pf-v5-c-dual-list-selector__item--indent--base));
   --pf-v5-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-v5-c-dual-list-selector__item--PaddingLeft);
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-dual-list-selector {
-  --pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
-  --pf-v5-c-dual-list-selector__list-item-row--focus-within--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
-  --pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
 }

package/css/components/DualListSelector/dual-list-selector.d.ts

@@ -37,7 +37,6 @@ declare const _default: {
     "check": "pf-m-check",
     "ghostRow": "pf-m-ghost-row",
     "read": "pf-m-read"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };
 export default _default;