@patternfly/react-styles 6.0.0-alpha.11 → 6.0.0-alpha.13

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/DataList/data-list.css

@@ -541,7 +541,7 @@
   --pf-v5-c-data-list__expandable-content-body--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v5-c-data-list--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v5-c-data-list--m-compact--LineHeight: var(--pf-t--global--font--line-height--body);
-  --pf-v5-c-data-list--m-compact__check--FontSize: var(--pf-t--global--font--size--body--md);
+  --pf-v5-c-data-list--m-compact__check--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v5-c-data-list--m-compact__cell--PaddingTop: var(--pf-t--global--spacer--sm);
   --pf-v5-c-data-list--m-compact__cell--PaddingBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-data-list--m-compact__cell--md--PaddingBottom: 0;

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) {