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

package/css/components/Divider/divider.css

@@ -47,340 +47,260 @@
   }
 }
 
+:root,
+:where(.pf-v5-c-divider) {
+  --pf-v5-c-divider--Display: flex;
+  --pf-v5-c-divider--Color: var(--pf-t--global--border--color--default);
+  --pf-v5-c-divider--Size: var(--pf-t--global--border--width--divider--default);
+  --pf-v5-c-divider--before--FlexBasis: 100%;
+}
+
 .pf-v5-c-divider {
-  --pf-v5-c-divider--BorderWidth--base: var(--pf-v5-global--BorderWidth--sm);
-  --pf-v5-c-divider--BorderColor--base: var(--pf-v5-c-divider--BackgroundColor);
-  --pf-v5-c-divider--Height: var(--pf-v5-c-divider--BorderWidth--base);
-  --pf-v5-c-divider--BackgroundColor: var(--pf-v5-global--BorderColor--100);
-  --pf-v5-c-divider--after--BackgroundColor: var(--pf-v5-c-divider--BorderColor--base);
-  --pf-v5-c-divider--after--FlexBasis: 100%;
-  --pf-v5-c-divider--after--Inset: 0%;
-  --pf-v5-c-divider--m-vertical--after--FlexBasis: 100%;
-  --pf-v5-c-divider--m-horizontal--Display: flex;
-  --pf-v5-c-divider--m-horizontal--FlexDirection: row;
-  --pf-v5-c-divider--m-horizontal--after--Height: var(--pf-v5-c-divider--Height);
-  --pf-v5-c-divider--m-horizontal--after--Width: auto;
-  --pf-v5-c-divider--m-vertical--Display: inline-flex;
-  --pf-v5-c-divider--m-vertical--FlexDirection: column;
-  --pf-v5-c-divider--m-vertical--after--Height: auto;
-  --pf-v5-c-divider--m-vertical--after--Width: var(--pf-v5-c-divider--BorderWidth--base);
-  --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-divider--Display);
-  --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-horizontal--Display);
-  --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-horizontal--FlexDirection);
-  --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-horizontal--after--Width);
-  --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-horizontal--after--Height);
+  flex-direction: row;
   width: 100%;
-  height: auto;
-  flex-direction: var(--pf-v5-c-divider--FlexDirection);
-  flex-shrink: 0;
-  align-items: center;
-  align-self: stretch;
+  height: var(--pf-v5-c-divider--Size);
+  --pf-v5-hidden-visible--visible--Display: var(--pf-v5-c-divider--Display);
+  align-items: stretch;
   justify-content: center;
   border: 0;
 }
-.pf-v5-c-divider::after {
-  flex-basis: calc(var(--pf-v5-c-divider--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset) * 2);
-}
-.pf-v5-c-divider::after {
-  align-self: stretch;
-  justify-self: center;
-  width: var(--pf-v5-c-divider--after--Width);
-  height: var(--pf-v5-c-divider--after--Height);
+.pf-v5-c-divider::before {
+  flex-basis: var(--pf-v5-c-divider--before--FlexBasis);
   content: "";
-  background-color: var(--pf-v5-c-divider--after--BackgroundColor);
+  background-color: var(--pf-v5-c-divider--Color);
 }
-.pf-v5-c-divider.pf-m-vertical {
-  --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-vertical--Display);
-  --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-vertical--FlexDirection);
-  --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-vertical--after--Width);
-  --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-vertical--after--Height);
-  width: auto;
-  height: inherit;
+.pf-v5-c-divider.pf-m-horizontal {
+  flex-direction: row;
+  width: 100%;
+  height: var(--pf-v5-c-divider--Size);
 }
-.pf-v5-c-divider.pf-m-vertical::after {
-  flex-basis: calc(var(--pf-v5-c-divider--m-vertical--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset));
+.pf-v5-c-divider.pf-m-vertical {
+  flex-direction: column;
+  width: var(--pf-v5-c-divider--Size);
+  height: 100%;
 }
 .pf-v5-c-divider.pf-m-inset-none {
-  --pf-v5-c-divider--after--Inset: 0%;
+  --pf-v5-c-divider--before--FlexBasis: calc(100% - 0% * 2);
 }
 .pf-v5-c-divider.pf-m-inset-xs {
-  --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xs) * 2);
 }
 .pf-v5-c-divider.pf-m-inset-sm {
-  --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--sm) * 2);
 }
 .pf-v5-c-divider.pf-m-inset-md {
-  --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--md) * 2);
 }
 .pf-v5-c-divider.pf-m-inset-lg {
-  --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--lg);
+  --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--lg) * 2);
 }
 .pf-v5-c-divider.pf-m-inset-xl {
-  --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xl);
+  --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xl) * 2);
 }
 .pf-v5-c-divider.pf-m-inset-2xl {
-  --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--2xl);
+  --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--2xl) * 2);
 }
 .pf-v5-c-divider.pf-m-inset-3xl {
-  --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--3xl);
+  --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--3xl) * 2);
 }
+
 @media (min-width: 576px) {
   .pf-v5-c-divider.pf-m-horizontal-on-sm {
-    --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-horizontal--Display);
-    --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-horizontal--FlexDirection);
-    --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-horizontal--after--Width);
-    --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-horizontal--after--Height);
+    flex-direction: row;
     width: 100%;
-    height: auto;
-  }
-  .pf-v5-c-divider.pf-m-horizontal-on-sm::after {
-    flex-basis: calc(var(--pf-v5-c-divider--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset) * 2);
+    height: var(--pf-v5-c-divider--Size);
   }
 }
 @media (min-width: 576px) {
   .pf-v5-c-divider.pf-m-vertical-on-sm {
-    --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-vertical--Display);
-    --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-vertical--FlexDirection);
-    --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-vertical--after--Width);
-    --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-vertical--after--Height);
-    width: auto;
-    height: inherit;
-  }
-  .pf-v5-c-divider.pf-m-vertical-on-sm::after {
-    flex-basis: calc(var(--pf-v5-c-divider--m-vertical--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset));
+    flex-direction: column;
+    width: var(--pf-v5-c-divider--Size);
+    height: 100%;
   }
 }
 @media (min-width: 576px) {
   .pf-v5-c-divider.pf-m-inset-none-on-sm {
-    --pf-v5-c-divider--after--Inset: 0%;
+    --pf-v5-c-divider--before--FlexBasis: 100%;
   }
   .pf-v5-c-divider.pf-m-inset-xs-on-sm {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xs) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-sm-on-sm {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--sm);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--sm) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-md-on-sm {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--md);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--md) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-lg-on-sm {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--lg);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--lg) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-xl-on-sm {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xl) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-2xl-on-sm {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--2xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--2xl) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-3xl-on-sm {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--3xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--3xl) * 2);
   }
 }
 @media (min-width: 768px) {
   .pf-v5-c-divider.pf-m-horizontal-on-md {
-    --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-horizontal--Display);
-    --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-horizontal--FlexDirection);
-    --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-horizontal--after--Width);
-    --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-horizontal--after--Height);
+    flex-direction: row;
     width: 100%;
-    height: auto;
-  }
-  .pf-v5-c-divider.pf-m-horizontal-on-md::after {
-    flex-basis: calc(var(--pf-v5-c-divider--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset) * 2);
+    height: var(--pf-v5-c-divider--Size);
   }
 }
 @media (min-width: 768px) {
   .pf-v5-c-divider.pf-m-vertical-on-md {
-    --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-vertical--Display);
-    --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-vertical--FlexDirection);
-    --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-vertical--after--Width);
-    --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-vertical--after--Height);
-    width: auto;
-    height: inherit;
-  }
-  .pf-v5-c-divider.pf-m-vertical-on-md::after {
-    flex-basis: calc(var(--pf-v5-c-divider--m-vertical--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset));
+    flex-direction: column;
+    width: var(--pf-v5-c-divider--Size);
+    height: 100%;
   }
 }
 @media (min-width: 768px) {
   .pf-v5-c-divider.pf-m-inset-none-on-md {
-    --pf-v5-c-divider--after--Inset: 0%;
+    --pf-v5-c-divider--before--FlexBasis: 100%;
   }
   .pf-v5-c-divider.pf-m-inset-xs-on-md {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xs) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-sm-on-md {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--sm);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--sm) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-md-on-md {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--md);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--md) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-lg-on-md {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--lg);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--lg) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-xl-on-md {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xl) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-2xl-on-md {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--2xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--2xl) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-3xl-on-md {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--3xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--3xl) * 2);
   }
 }
 @media (min-width: 992px) {
   .pf-v5-c-divider.pf-m-horizontal-on-lg {
-    --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-horizontal--Display);
-    --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-horizontal--FlexDirection);
-    --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-horizontal--after--Width);
-    --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-horizontal--after--Height);
+    flex-direction: row;
     width: 100%;
-    height: auto;
-  }
-  .pf-v5-c-divider.pf-m-horizontal-on-lg::after {
-    flex-basis: calc(var(--pf-v5-c-divider--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset) * 2);
+    height: var(--pf-v5-c-divider--Size);
   }
 }
 @media (min-width: 992px) {
   .pf-v5-c-divider.pf-m-vertical-on-lg {
-    --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-vertical--Display);
-    --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-vertical--FlexDirection);
-    --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-vertical--after--Width);
-    --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-vertical--after--Height);
-    width: auto;
-    height: inherit;
-  }
-  .pf-v5-c-divider.pf-m-vertical-on-lg::after {
-    flex-basis: calc(var(--pf-v5-c-divider--m-vertical--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset));
+    flex-direction: column;
+    width: var(--pf-v5-c-divider--Size);
+    height: 100%;
   }
 }
 @media (min-width: 992px) {
   .pf-v5-c-divider.pf-m-inset-none-on-lg {
-    --pf-v5-c-divider--after--Inset: 0%;
+    --pf-v5-c-divider--before--FlexBasis: 100%;
   }
   .pf-v5-c-divider.pf-m-inset-xs-on-lg {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xs) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-sm-on-lg {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--sm);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--sm) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-md-on-lg {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--md);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--md) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-lg-on-lg {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--lg);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--lg) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-xl-on-lg {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xl) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-2xl-on-lg {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--2xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--2xl) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-3xl-on-lg {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--3xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--3xl) * 2);
   }
 }
 @media (min-width: 1200px) {
   .pf-v5-c-divider.pf-m-horizontal-on-xl {
-    --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-horizontal--Display);
-    --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-horizontal--FlexDirection);
-    --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-horizontal--after--Width);
-    --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-horizontal--after--Height);
+    flex-direction: row;
     width: 100%;
-    height: auto;
-  }
-  .pf-v5-c-divider.pf-m-horizontal-on-xl::after {
-    flex-basis: calc(var(--pf-v5-c-divider--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset) * 2);
+    height: var(--pf-v5-c-divider--Size);
   }
 }
 @media (min-width: 1200px) {
   .pf-v5-c-divider.pf-m-vertical-on-xl {
-    --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-vertical--Display);
-    --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-vertical--FlexDirection);
-    --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-vertical--after--Width);
-    --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-vertical--after--Height);
-    width: auto;
-    height: inherit;
-  }
-  .pf-v5-c-divider.pf-m-vertical-on-xl::after {
-    flex-basis: calc(var(--pf-v5-c-divider--m-vertical--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset));
+    flex-direction: column;
+    width: var(--pf-v5-c-divider--Size);
+    height: 100%;
   }
 }
 @media (min-width: 1200px) {
   .pf-v5-c-divider.pf-m-inset-none-on-xl {
-    --pf-v5-c-divider--after--Inset: 0%;
+    --pf-v5-c-divider--before--FlexBasis: 100%;
   }
   .pf-v5-c-divider.pf-m-inset-xs-on-xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xs) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-sm-on-xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--sm);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--sm) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-md-on-xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--md);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--md) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-lg-on-xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--lg);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--lg) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-xl-on-xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xl) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-2xl-on-xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--2xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--2xl) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-3xl-on-xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--3xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--3xl) * 2);
   }
 }
 @media (min-width: 1450px) {
   .pf-v5-c-divider.pf-m-horizontal-on-2xl {
-    --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-horizontal--Display);
-    --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-horizontal--FlexDirection);
-    --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-horizontal--after--Width);
-    --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-horizontal--after--Height);
+    flex-direction: row;
     width: 100%;
-    height: auto;
-  }
-  .pf-v5-c-divider.pf-m-horizontal-on-2xl::after {
-    flex-basis: calc(var(--pf-v5-c-divider--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset) * 2);
+    height: var(--pf-v5-c-divider--Size);
   }
 }
 @media (min-width: 1450px) {
   .pf-v5-c-divider.pf-m-vertical-on-2xl {
-    --pf-v5-c-divider--Display: var(--pf-v5-c-divider--m-vertical--Display);
-    --pf-v5-c-divider--FlexDirection: var(--pf-v5-c-divider--m-vertical--FlexDirection);
-    --pf-v5-c-divider--after--Width: var(--pf-v5-c-divider--m-vertical--after--Width);
-    --pf-v5-c-divider--after--Height: var(--pf-v5-c-divider--m-vertical--after--Height);
-    width: auto;
-    height: inherit;
-  }
-  .pf-v5-c-divider.pf-m-vertical-on-2xl::after {
-    flex-basis: calc(var(--pf-v5-c-divider--m-vertical--after--FlexBasis) - var(--pf-v5-c-divider--after--Inset));
+    flex-direction: column;
+    width: var(--pf-v5-c-divider--Size);
+    height: 100%;
   }
 }
 @media (min-width: 1450px) {
   .pf-v5-c-divider.pf-m-inset-none-on-2xl {
-    --pf-v5-c-divider--after--Inset: 0%;
+    --pf-v5-c-divider--before--FlexBasis: 100%;
   }
   .pf-v5-c-divider.pf-m-inset-xs-on-2xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xs);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xs) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-sm-on-2xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--sm);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--sm) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-md-on-2xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--md);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--md) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-lg-on-2xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--lg);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--lg) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-xl-on-2xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--xl) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-2xl-on-2xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--2xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--2xl) * 2);
   }
   .pf-v5-c-divider.pf-m-inset-3xl-on-2xl {
-    --pf-v5-c-divider--after--Inset: var(--pf-v5-global--spacer--3xl);
+    --pf-v5-c-divider--before--FlexBasis: calc(100% - var(--pf-v5-global--spacer--3xl) * 2);
   }
 }

package/css/components/Divider/divider.d.ts

@@ -13,6 +13,7 @@ declare const _default: {
     "visibleOnXl": "pf-m-visible-on-xl",
     "hiddenOn_2xl": "pf-m-hidden-on-2xl",
     "visibleOn_2xl": "pf-m-visible-on-2xl",
+    "horizontal": "pf-m-horizontal",
     "vertical": "pf-m-vertical",
     "insetNone": "pf-m-inset-none",
     "insetXs": "pf-m-inset-xs",

package/css/components/Divider/divider.js

@@ -15,6 +15,7 @@ exports.default = {
     "visibleOnXl": "pf-m-visible-on-xl",
     "hiddenOn_2xl": "pf-m-hidden-on-2xl",
     "visibleOn_2xl": "pf-m-visible-on-2xl",
+    "horizontal": "pf-m-horizontal",
     "vertical": "pf-m-vertical",
     "insetNone": "pf-m-inset-none",
     "insetXs": "pf-m-inset-xs",

package/css/components/Divider/divider.mjs

@@ -13,6 +13,7 @@ export default {
     "visibleOnXl": "pf-m-visible-on-xl",
     "hiddenOn_2xl": "pf-m-hidden-on-2xl",
     "visibleOn_2xl": "pf-m-visible-on-2xl",
+    "horizontal": "pf-m-horizontal",
     "vertical": "pf-m-vertical",
     "insetNone": "pf-m-inset-none",
     "insetXs": "pf-m-inset-xs",

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