@patternfly/react-styles 6.0.0-alpha.7 → 6.0.0-alpha.8

package/css/components/Card/card.mjs

@@ -10,7 +10,6 @@ export default {
   "cardHeaderToggle": "pf-v5-c-card__header-toggle",
   "cardHeaderToggleIcon": "pf-v5-c-card__header-toggle-icon",
   "cardSelectableActions": "pf-v5-c-card__selectable-actions",
-  "cardSrInput": "pf-v5-c-card__sr-input",
   "cardTitle": "pf-v5-c-card__title",
   "cardTitleText": "pf-v5-c-card__title-text",
   "check": "pf-v5-c-check",
@@ -24,23 +23,18 @@ export default {
     "selected": "pf-m-selected",
     "current": "pf-m-current",
     "disabled": "pf-m-disabled",
-    "hoverableRaised": "pf-m-hoverable-raised",
-    "selectableRaised": "pf-m-selectable-raised",
-    "nonSelectableRaised": "pf-m-non-selectable-raised",
-    "selectedRaised": "pf-m-selected-raised",
     "compact": "pf-m-compact",
     "displayLg": "pf-m-display-lg",
-    "flat": "pf-m-flat",
+    "secondary": "pf-m-secondary",
     "plain": "pf-m-plain",
-    "rounded": "pf-m-rounded",
     "expanded": "pf-m-expanded",
     "fullHeight": "pf-m-full-height",
     "toggleRight": "pf-m-toggle-right",
     "noOffset": "pf-m-no-offset",
+    "inline": "pf-m-inline",
     "noFill": "pf-m-no-fill"
   },
   "radio": "pf-v5-c-radio",
   "radioInput": "pf-v5-c-radio__input",
-  "radioLabel": "pf-v5-c-radio__label",
-  "themeDark": "pf-v5-theme-dark"
+  "radioLabel": "pf-v5-c-radio__label"
 };

package/css/components/ClipboardCopy/clipboard-copy.css

@@ -1,30 +1,35 @@
-.pf-v5-c-clipboard-copy {
+:where(:root),
+:where(.pf-v5-c-clipboard-copy) {
   --pf-v5-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
   --pf-v5-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
-  --pf-v5-c-clipboard-copy__expandable-content--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-clipboard-copy__expandable-content--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-clipboard-copy__expandable-content--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-clipboard-copy__expandable-content--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-v5-global--BackgroundColor--light-100);
-  --pf-v5-c-clipboard-copy__expandable-content--BorderTopWidth: 0;
-  --pf-v5-c-clipboard-copy__expandable-content--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-clipboard-copy__expandable-content--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-clipboard-copy__expandable-content--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-clipboard-copy__expandable-content--BorderColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-clipboard-copy__expandable-content--OutlineOffset: calc(-1 * var(--pf-v5-global--spacer--xs));
+  --pf-v5-c-clipboard-copy__expandable-content--MarginTop: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-clipboard-copy__expandable-content--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-clipboard-copy__expandable-content--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-clipboard-copy__expandable-content--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-clipboard-copy__expandable-content--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v5-c-clipboard-copy__expandable-content--BorderTopWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v5-c-clipboard-copy__expandable-content--BorderRightWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v5-c-clipboard-copy__expandable-content--BorderBottomWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v5-c-clipboard-copy__expandable-content--BorderLeftWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v5-c-clipboard-copy__expandable-content--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v5-c-clipboard-copy__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--xs);
   --pf-v5-c-clipboard-copy--m-inline--PaddingTop: 0;
   --pf-v5-c-clipboard-copy--m-inline--PaddingBottom: 0;
-  --pf-v5-c-clipboard-copy--m-inline--PaddingLeft: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-clipboard-copy__text--m-code--FontFamily: var(--pf-v5-global--FontFamily--monospace);
-  --pf-v5-c-clipboard-copy__text--m-code--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-clipboard-copy__actions-item--MarginTop: calc(-1 * var(--pf-v5-global--spacer--form-element));
-  --pf-v5-c-clipboard-copy__actions-item--MarginBottom: calc(-1 * var(--pf-v5-global--spacer--form-element));
-  --pf-v5-c-clipboard-copy__actions-item--button--PaddingTop: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-clipboard-copy__actions-item--button--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-clipboard-copy__actions-item--button--PaddingBottom: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-clipboard-copy__actions-item--button--PaddingLeft: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-clipboard-copy--m-inline--PaddingLeft: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-clipboard-copy__text--m-code--FontFamily: var(--pf-t--global--font--family--mono);
+  --pf-v5-c-clipboard-copy__text--m-code--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v5-c-clipboard-copy__actions-item--MarginTop: calc(-1 * var(--pf-t--global--spacer--xs));
+  --pf-v5-c-clipboard-copy__actions-item--MarginBottom: calc(-1 * var(--pf-t--global--spacer--xs));
+  --pf-v5-c-clipboard-copy__actions-item--button--PaddingTop: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-clipboard-copy__actions-item--button--PaddingRight: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-clipboard-copy__actions-item--button--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --pf-v5-c-clipboard-copy__actions-item--button--PaddingLeft: var(--pf-t--global--spacer--xs);
 }
+
 .pf-v5-c-clipboard-copy.pf-m-expanded .pf-v5-c-clipboard-copy__toggle-icon {
   transform: rotate(var(--pf-v5-c-clipboard-copy--m-expanded__toggle-icon--Rotate));
 }
@@ -42,6 +47,7 @@
 
 .pf-v5-c-clipboard-copy__group {
   display: flex;
+  gap: var(--pf-v5-c-clipboard-copy__group--Gap);
 }
 .pf-v5-c-clipboard-copy__group > * + * {
   margin-inline-start: -1px;
@@ -59,6 +65,7 @@
   padding-block-end: var(--pf-v5-c-clipboard-copy__expandable-content--PaddingBottom);
   padding-inline-start: var(--pf-v5-c-clipboard-copy__expandable-content--PaddingLeft);
   padding-inline-end: var(--pf-v5-c-clipboard-copy__expandable-content--PaddingRight);
+  margin-block-start: var(--pf-v5-c-clipboard-copy__expandable-content--MarginTop);
   word-wrap: break-word;
   background-color: var(--pf-v5-c-clipboard-copy__expandable-content--BackgroundColor);
   background-clip: padding-box;
@@ -67,6 +74,7 @@
   border-block-end-width: var(--pf-v5-c-clipboard-copy__expandable-content--BorderBottomWidth);
   border-inline-start-width: var(--pf-v5-c-clipboard-copy__expandable-content--BorderLeftWidth);
   border-inline-end-width: var(--pf-v5-c-clipboard-copy__expandable-content--BorderRightWidth);
+  border-radius: var(--pf-v5-c-clipboard-copy__expandable-content--BorderRadius);
   box-shadow: var(--pf-v5-c-clipboard-copy__expandable-content--BoxShadow);
 }
 .pf-v5-c-clipboard-copy__expandable-content pre {
@@ -95,15 +103,4 @@
   --pf-v5-c-button--PaddingRight: var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingRight);
   --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingBottom);
   --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-clipboard-copy__actions-item--button--PaddingLeft);
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-clipboard-copy {
-  --pf-v5-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
-}
-:where(.pf-v5-theme-dark) .pf-v5-c-clipboard-copy__group > * + * {
-  margin-inline-start: 0;
-  border-inline-start: 1px solid var(--pf-v5-global--palette--black-700) !important;
-}
-:where(.pf-v5-theme-dark) .pf-v5-c-clipboard-copy__expandable-content {
-  border: 0;
 }

package/css/components/ClipboardCopy/clipboard-copy.d.ts

@@ -14,7 +14,6 @@ declare const _default: {
     "inline": "pf-m-inline",
     "block": "pf-m-block",
     "code": "pf-m-code"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };
 export default _default;

package/css/components/ClipboardCopy/clipboard-copy.js

@@ -16,6 +16,5 @@ exports.default = {
     "inline": "pf-m-inline",
     "block": "pf-m-block",
     "code": "pf-m-code"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };

package/css/components/ClipboardCopy/clipboard-copy.mjs

@@ -14,6 +14,5 @@ export default {
     "inline": "pf-m-inline",
     "block": "pf-m-block",
     "code": "pf-m-code"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };

package/css/components/CodeBlock/code-block.css

@@ -1,18 +1,27 @@
+:root, :where(.pf-v5-c-code-block) {
+  --pf-v5-c-code-block--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-code-block__header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
+  --pf-v5-c-code-block__header--BorderBottomColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-code-block__header--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-block__header--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-code-block__content--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-code-block__content--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-code-block__content--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-code-block__content--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-code-block__pre--FontFamily: var(--pf-t--global--font--family--mono);
+  --pf-v5-c-code-block__pre--FontSize: var(--pf-t--global--font--size--xs);
+}
+
 .pf-v5-c-code-block {
-  --pf-v5-c-code-block--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
-  --pf-v5-c-code-block__header--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-code-block__header--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-code-block__content--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-code-block__content--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-code-block__content--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-code-block__content--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-code-block__pre--FontFamily: var(--pf-v5-global--FontFamily--monospace);
-  --pf-v5-c-code-block__pre--FontSize: var(--pf-v5-global--FontSize--sm);
   background-color: var(--pf-v5-c-code-block--BackgroundColor);
+  border-radius: var(--pf-v5-c-code-block--BorderRadius);
 }
 
 .pf-v5-c-code-block__header {
   display: flex;
+  padding-inline-start: var(--pf-v5-c-code-block__header--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-code-block__header--PaddingRight);
   border-block-end: var(--pf-v5-c-code-block__header--BorderBottomWidth) solid var(--pf-v5-c-code-block__header--BorderBottomColor);
 }
 

package/css/components/DescriptionList/description-list.css

@@ -1,25 +1,24 @@
-.pf-v5-c-description-list {
-  --pf-v5-c-description-list--RowGap: var(--pf-v5-global--gutter--md);
-  --pf-v5-c-description-list--ColumnGap: var(--pf-v5-global--spacer--lg);
+:where(:root), :where(.pf-v5-c-description-list) {
+  --pf-v5-c-description-list--RowGap: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-description-list--ColumnGap: var(--pf-t--global--spacer--lg);
   --pf-v5-c-description-list--GridTemplateColumns--count: 1;
   --pf-v5-c-description-list--GridTemplateColumns--width: 1fr;
   --pf-v5-c-description-list--GridTemplateColumns--min: 0;
-  --pf-v5-c-description-list--GridTemplateColumns: repeat(var(--pf-v5-c-description-list--GridTemplateColumns--count), var(--pf-v5-c-description-list--GridTemplateColumns--width));
-  --pf-v5-c-description-list__group--RowGap: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-description-list__group--ColumnGap: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-description-list__group--RowGap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-description-list__group--ColumnGap: var(--pf-t--global--spacer--sm);
   --pf-v5-c-description-list__group--GridTemplateColumns: auto;
   --pf-v5-c-description-list__group--GridTemplateRows: auto 1fr;
   --pf-v5-c-description-list__group--GridColumn: auto;
-  --pf-v5-c-description-list--m-compact--RowGap: var(--pf-v5-global--gutter);
-  --pf-v5-c-description-list--m-compact--ColumnGap: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-description-list--m-compact--RowGap: var(--pf-t--global--spacer--md);
+  --pf-v5-c-description-list--m-compact--ColumnGap: var(--pf-t--global--spacer--sm);
   --pf-v5-c-description-list__term--Display: inline;
   --pf-v5-c-description-list__term--sm--Display: flex;
-  --pf-v5-c-description-list__term--FontWeight: var(--pf-v5-global--FontWeight--bold);
-  --pf-v5-c-description-list__term--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-description-list__term--LineHeight: var(--pf-v5-global--LineHeight--sm);
-  --pf-v5-c-description-list__term-icon--MinWidth: var(--pf-v5-global--icon--FontSize--sm);
-  --pf-v5-c-description-list__term-icon--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-description-list__term-icon--Color: var(--pf-v5-global--icon--Color--light);
+  --pf-v5-c-description-list__term--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v5-c-description-list__term--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v5-c-description-list__term--LineHeight: var(--pf-t--global--font--line-height--body);
+  --pf-v5-c-description-list__term-icon--MinWidth: var(--pf-t--global--font--size--body--sm);
+  --pf-v5-c-description-list__term-icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-description-list__term-icon--Color: var(--pf-t--global--icon--color--subtle);
   --pf-v5-c-description-list--m-vertical__group--GridTemplateColumns: repeat(var(--pf-v5-c-description-list--GridTemplateColumns--count));
   --pf-v5-c-description-list--m-vertical__group--GridTemplateRows: auto 1fr;
   --pf-v5-c-description-list--m-horizontal__term--width: 12ch;
@@ -31,52 +30,58 @@
   --pf-v5-c-description-list--m-3-col--GridTemplateColumns--count: 3;
   --pf-v5-c-description-list--m-auto-fit--GridTemplateColumns--min: 15.625rem;
   --pf-v5-c-description-list--m-auto-fit--GridTemplateColumns--minmax--min: var(--pf-v5-c-description-list--m-auto-fit--GridTemplateColumns--min);
-  --pf-v5-c-description-list__text--m-help-text--TextDecorationColor: var(--pf-v5-global--BorderColor--200);
-  --pf-v5-c-description-list__text--m-help-text--TextDecorationThickness: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-description-list__text--m-help-text--TextDecorationColor: currentcolor;
+  --pf-v5-c-description-list__text--m-help-text--TextDecorationThickness: var(--pf-t--global--border--width--regular);
   --pf-v5-c-description-list__text--m-help-text--TextDecorationOffset: 0.25rem;
-  --pf-v5-c-description-list__text--m-help-text--hover--TextDecorationColor: var(--pf-v5-global--Color--100);
-  --pf-v5-c-description-list__text--m-help-text--focus--TextDecorationColor: var(--pf-v5-global--Color--100);
-  --pf-v5-c-description-list--m-display-lg__description--FontSize: var(--pf-v5-global--FontSize--lg);
-  --pf-v5-c-description-list--m-display-2xl__description--FontSize: var(--pf-v5-global--FontSize--2xl);
-  display: grid;
-  grid-template-columns: var(--pf-v5-c-description-list--GridTemplateColumns);
-  row-gap: var(--pf-v5-c-description-list--RowGap);
-  column-gap: var(--pf-v5-c-description-list--ColumnGap);
-  align-items: baseline;
+  --pf-v5-c-description-list__text--m-help-text--hover--TextDecorationColor: var(--pf-t--global--border--color--hover);
+  --pf-v5-c-description-list__text--m-help-text--focus--TextDecorationColor: var(--pf-t--global--border--color--hover);
+  --pf-v5-c-description-list--m-display-lg__description--FontSize: var(--pf-t--global--font--size--body--lg);
+  --pf-v5-c-description-list--m-display-2xl__description--FontSize: var(--pf-t--global--font--size--heading--lg);
+  --pf-v5-c-description-list--m-horizontal__term--width-on-sm: inherit;
+  --pf-v5-c-description-list--m-horizontal__term--width-on-md: inherit;
+  --pf-v5-c-description-list--m-horizontal__term--width-on-lg: inherit;
+  --pf-v5-c-description-list--m-horizontal__term--width-on-xl: inherit;
+  --pf-v5-c-description-list--m-horizontal__term--width-on-2xl: inherit;
+  --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width);
 }
 @media screen and (min-width: 576px) {
-  .pf-v5-c-description-list {
+  :where(:root), :where(.pf-v5-c-description-list) {
     --pf-v5-c-description-list__term--Display: var(--pf-v5-c-description-list__term--sm--Display);
   }
 }
-.pf-v5-c-description-list[class*=pf-m-horizontal] {
-  --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width);
-}
 @media (min-width: 576px) {
-  .pf-v5-c-description-list[class*=pf-m-horizontal] {
+  :where(:root), :where(.pf-v5-c-description-list) {
     --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width));
   }
 }
 @media (min-width: 768px) {
-  .pf-v5-c-description-list[class*=pf-m-horizontal] {
+  :where(:root), :where(.pf-v5-c-description-list) {
     --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-md, var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width)));
   }
 }
 @media (min-width: 992px) {
-  .pf-v5-c-description-list[class*=pf-m-horizontal] {
+  :where(:root), :where(.pf-v5-c-description-list) {
     --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v5-c-description-list--m-horizontal__term--width-on-md, var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width))));
   }
 }
 @media (min-width: 1200px) {
-  .pf-v5-c-description-list[class*=pf-m-horizontal] {
+  :where(:root), :where(.pf-v5-c-description-list) {
     --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-xl, var(--pf-v5-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v5-c-description-list--m-horizontal__term--width-on-md, var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width)))));
   }
 }
 @media (min-width: 1450px) {
-  .pf-v5-c-description-list[class*=pf-m-horizontal] {
+  :where(:root), :where(.pf-v5-c-description-list) {
     --pf-v5-c-description-list__term--width: var(--pf-v5-c-description-list--m-horizontal__term--width-on-2xl, var(--pf-v5-c-description-list--m-horizontal__term--width-on-xl, var(--pf-v5-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v5-c-description-list--m-horizontal__term--width-on-md, var(--pf-v5-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v5-c-description-list--m-horizontal__term--width))))));
   }
 }
+
+.pf-v5-c-description-list {
+  display: grid;
+  grid-template-columns: repeat(var(--pf-v5-c-description-list--GridTemplateColumns--count), var(--pf-v5-c-description-list--GridTemplateColumns--width));
+  row-gap: var(--pf-v5-c-description-list--RowGap);
+  column-gap: var(--pf-v5-c-description-list--ColumnGap);
+  align-items: baseline;
+}
 .pf-v5-c-description-list.pf-m-inline-grid {
   display: inline-grid;
 }

package/css/components/DragDrop/drag-drop.css

@@ -1,11 +1,15 @@
-.pf-v5-c-draggable {
+:where(:root), :where(.pf-v5-c-draggable) {
   --pf-v5-c-draggable--Cursor: auto;
   --pf-v5-c-draggable--m-dragging--Cursor: grabbing;
-  --pf-v5-c-draggable--m-dragging--BoxShadow: var(--pf-v5-global--BoxShadow--md);
-  --pf-v5-c-draggable--m-dragging--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-draggable--m-dragging--after--BorderColor: var(--pf-v5-global--active-color--100);
+  --pf-v5-c-draggable--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --pf-v5-c-draggable--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v5-c-draggable--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
+  --pf-v5-c-draggable--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v5-c-draggable--m-drag-outside--Cursor: not-allowed;
-  --pf-v5-c-draggable--m-drag-outside--after--BorderColor: var(--pf-v5-global--danger-color--100);
+  --pf-v5-c-draggable--m-drag-outside--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
+}
+
+.pf-v5-c-draggable {
   cursor: var(--pf-v5-c-draggable--Cursor);
 }
 .pf-v5-c-draggable.pf-m-dragging {
@@ -22,23 +26,26 @@
   inset-inline-end: 0;
   content: "";
   border: var(--pf-v5-c-draggable--m-dragging--after--BorderWidth) solid var(--pf-v5-c-draggable--m-dragging--after--BorderColor);
+  border-radius: var(--pf-v5-c-draggable--m-dragging--after--BorderRadius);
 }
 .pf-v5-c-draggable.pf-m-drag-outside {
   --pf-v5-c-draggable--m-dragging--Cursor: var(--pf-v5-c-draggable--m-drag-outside--Cursor);
   --pf-v5-c-draggable--m-dragging--after--BorderColor: var(--pf-v5-c-draggable--m-drag-outside--after--BorderColor);
 }
 
-.pf-v5-c-droppable {
+:where(:root), :where(.pf-v5-c-droppable) {
   --pf-v5-c-droppable--before--BackgroundColor: transparent;
   --pf-v5-c-droppable--before--Opacity: 0;
   --pf-v5-c-droppable--after--BorderWidth: 0;
   --pf-v5-c-droppable--after--BorderColor: transparent;
-  --pf-v5-c-droppable--m-dragging--before--BackgroundColor: var(--pf-v5-global--palette--white);
+  --pf-v5-c-droppable--m-dragging--before--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v5-c-droppable--m-dragging--before--Opacity: .6;
-  --pf-v5-c-droppable--m-dragging--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-droppable--m-dragging--after--BorderColor: var(--pf-v5-global--active-color--100);
-  --pf-v5-c-droppable--m-drag-outside--after--BorderColor: var(--pf-v5-global--danger-color--100);
+  --pf-v5-c-droppable--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v5-c-droppable--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
+  --pf-v5-c-droppable--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v5-c-droppable--m-drag-outside--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
 }
+
 .pf-v5-c-droppable::before, .pf-v5-c-droppable::after {
   position: absolute;
   inset-block-start: 0;
@@ -54,6 +61,7 @@
 }
 .pf-v5-c-droppable::after {
   border: var(--pf-v5-c-droppable--after--BorderWidth, 0) solid var(--pf-v5-c-droppable--after--BorderColor, transparent);
+  border-radius: var(--pf-v5-c-droppable--m-dragging--after--BorderRadius);
 }
 .pf-v5-c-droppable.pf-m-dragging {
   --pf-v5-c-droppable--before--BackgroundColor: var(--pf-v5-c-droppable--m-dragging--before--BackgroundColor);
@@ -64,8 +72,4 @@
 }
 .pf-v5-c-droppable.pf-m-drag-outside {
   --pf-v5-c-droppable--m-dragging--after--BorderColor: var(--pf-v5-c-droppable--m-drag-outside--after--BorderColor);
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-droppable {
-  --pf-v5-c-droppable--m-dragging--before--Opacity: .2;
 }

package/css/components/DragDrop/drag-drop.d.ts

@@ -5,7 +5,6 @@ declare const _default: {
   "modifiers": {
     "dragging": "pf-m-dragging",
     "dragOutside": "pf-m-drag-outside"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };
 export default _default;

package/css/components/DragDrop/drag-drop.js

@@ -7,6 +7,5 @@ exports.default = {
   "modifiers": {
     "dragging": "pf-m-dragging",
     "dragOutside": "pf-m-drag-outside"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };

package/css/components/DragDrop/drag-drop.mjs

@@ -5,6 +5,5 @@ export default {
   "modifiers": {
     "dragging": "pf-m-dragging",
     "dragOutside": "pf-m-drag-outside"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };