@patternfly/patternfly 6.0.0-alpha.8 → 6.0.0-alpha.81

package/components/Divider/divider.scss

@@ -1,98 +1,82 @@
 // @debug $divider; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-$pf-v5-c-divider--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
+$pf-v5-c-divider--breakpoint-map: build-breakpoint-map("sm", "md", "lg", "xl", "2xl");
 $pf-v5-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl");
 
+// * Divider horizontal
 @mixin pf-v5-c-divider--m-horizontal {
-  --#{$divider}--Display: var(--#{$divider}--m-horizontal--Display);
-  --#{$divider}--FlexDirection: var(--#{$divider}--m-horizontal--FlexDirection);
-  --#{$divider}--after--Width: var(--#{$divider}--m-horizontal--after--Width);
-  --#{$divider}--after--Height: var(--#{$divider}--m-horizontal--after--Height);
-
-  width: 100%; // update to var breaking change
-  height: auto; // update to var breaking change
-
-  &::after {
-    flex-basis:
-      calc(
-        var(--#{$divider}--after--FlexBasis) - calc(var(--#{$divider}--after--Inset) * 2)
-      ); // update at breaking change
-  }
+  flex-direction: row;
+  width: 100%;
+  height: var(--#{$divider}--Size);  // apply size to height in horizontal orientation
 }
 
+// * Divider vertical
 @mixin pf-v5-c-divider--m-vertical {
-  --#{$divider}--Display: var(--#{$divider}--m-vertical--Display);
-  --#{$divider}--FlexDirection: var(--#{$divider}--m-vertical--FlexDirection);
-  --#{$divider}--after--Width: var(--#{$divider}--m-vertical--after--Width);
-  --#{$divider}--after--Height: var(--#{$divider}--m-vertical--after--Height);
+  flex-direction: column;
+  width: var(--#{$divider}--Size); // apply size to width in vertical orientation
+  height: inherit;
+}
 
-  width: auto; // update to var breaking change
-  height: inherit; // update to var at breaking change
+:root,
+:where(.#{$divider}) {
+  // * Divider
+  --#{$divider}--Display: flex;
+  --#{$divider}--Color: var(--pf-t--global--border--color--default);
+  --#{$divider}--Size: var(--pf-t--global--border--width--divider--default);
 
-  &::after {
-    flex-basis:
-      calc(
-        var(--#{$divider}--m-vertical--after--FlexBasis) - var(--#{$divider}--after--Inset)
-      ); // update at breaking change
-  }
+  // * Divider before
+  --#{$divider}--before--FlexBasis: 100%;
 }
 
+// - Divider
 .#{$divider} {
-  // Base
-  --#{$divider}--BorderWidth--base: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$divider}--BorderColor--base: var(--#{$divider}--BackgroundColor); // update at breaking change
-  --#{$divider}--Height: var(--#{$divider}--BorderWidth--base); // remove at breaking change
-  --#{$divider}--BackgroundColor: var(--#{$pf-global}--BorderColor--100); // remove at breaking change
-  --#{$divider}--after--BackgroundColor: var(--#{$divider}--BorderColor--base); // remove at breaking change
-
-  // Borders
-  --#{$divider}--after--FlexBasis: 100%;
-  --#{$divider}--after--Inset: 0%;
-
-  // Vertical
-  --#{$divider}--m-vertical--after--FlexBasis: 100%; // remove at breaking change
-
-  // Horizontal mixin
-  --#{$divider}--m-horizontal--Display: flex;
-  --#{$divider}--m-horizontal--FlexDirection: row;
-  --#{$divider}--m-horizontal--after--Height: var(--#{$divider}--Height); // update at breaking change
-  --#{$divider}--m-horizontal--after--Width: auto;
-
-  // Vertical mixin
-  --#{$divider}--m-vertical--Display: inline-flex;
-  --#{$divider}--m-vertical--FlexDirection: column;
-  --#{$divider}--m-vertical--after--Height: auto;
-  --#{$divider}--m-vertical--after--Width: var(--#{$divider}--BorderWidth--base); // remove at breaking change
-
-  // Vertical
+  @include pf-v5-c-divider--m-horizontal; // default, set to orientation to horizontal
   @include pf-v5-hidden-visible(var(--#{$divider}--Display));
-  @include pf-v5-c-divider--m-horizontal; // set to default to horizontal
 
-  flex-direction: var(--#{$divider}--FlexDirection);
   flex-shrink: 0;
-  align-items: center;
+  align-items: stretch;
   align-self: stretch;
   justify-content: center;
   border: 0; // removes the default border styling on an hr
 
-  &::after {
-    align-self: stretch;
-    justify-self: center;
-    width: var(--#{$divider}--after--Width);
-    height: var(--#{$divider}--after--Height);
+  // - Divider before
+  &::before {
+    flex-basis: var(--#{$divider}--before--FlexBasis);
     content: "";
-    background-color: var(--#{$divider}--after--BackgroundColor);
+    background-color: var(--#{$divider}--Color);
   }
 
-  // stylelint-disable max-nesting-depth
+  // - Divider horizontal
+  &.pf-m-horizontal {
+    @include pf-v5-c-divider--m-horizontal;
+  }
+
+  // - Divider vertical
+  &.pf-m-vertical {
+    @include pf-v5-c-divider--m-vertical;
+  }
 
+  // - Divider spacer insets
+  @each $spacer, $spacer-value in $pf-v5-c-divider--spacer-map {
+    @if $spacer == none {
+      $spacer-value: 0%;
+    }
+
+    &.pf-m-inset-#{$spacer} {
+      --#{$divider}--before--FlexBasis: calc(100% - #{$spacer-value} * 2);
+    }
+  }
+}
+
+// TODO: move this loop to separate file for resize observer implementation
+// TODO: make responsive values opt in/out
+// stylelint-disable
+.#{$divider} {
   @each $breakpoint, $breakpoint-value in $pf-v5-c-divider--breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+    $breakpoint-name: '-on-' + #{$breakpoint};
 
-    @if $breakpoint != "base" {
-      @include pf-v5-apply-breakpoint($breakpoint) {
-        &.pf-m-horizontal#{$breakpoint-name} {
-          @include pf-v5-c-divider--m-horizontal;
-        }
+    @include pf-v5-apply-breakpoint($breakpoint) {
+      &.pf-m-horizontal#{$breakpoint-name} {
+        @include pf-v5-c-divider--m-horizontal;
       }
     }
 
@@ -104,16 +88,15 @@ $pf-v5-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "
 
     @include pf-v5-apply-breakpoint($breakpoint) {
       @each $spacer, $spacer-value in $pf-v5-c-divider--spacer-map {
-        @if $spacer == none {
-          $spacer-value: 0%;
-        }
-
         &.pf-m-inset-#{$spacer}#{$breakpoint-name} {
-          --#{$divider}--after--Inset: #{$spacer-value};
+          @if $spacer == none {
+            --#{$divider}--before--FlexBasis: 100%;
+          } @else {
+            --#{$divider}--before--FlexBasis: calc(100% - #{$spacer-value} * 2);
+          }
         }
       }
     }
   }
-
-  // stylelint-enable
 }
+// stylelint-enable

package/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/components/DragDrop/drag-drop.scss

@@ -1,14 +1,17 @@
 // @debug $draggable; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
-.#{$draggable} {
+:where(:root), :where(.#{$draggable}) {
   --#{$draggable}--Cursor: auto;
   --#{$draggable}--m-dragging--Cursor: grabbing;
-  --#{$draggable}--m-dragging--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
-  --#{$draggable}--m-dragging--after--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$draggable}--m-dragging--after--BorderColor: var(--#{$pf-global}--active-color--100);
+  --#{$draggable}--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --#{$draggable}--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
+  --#{$draggable}--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
+  --#{$draggable}--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
   --#{$draggable}--m-drag-outside--Cursor: not-allowed;
-  --#{$draggable}--m-drag-outside--after--BorderColor: var(--#{$pf-global}--danger-color--100);
+  --#{$draggable}--m-drag-outside--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
+}
 
+.#{$draggable} {
   cursor: var(--#{$draggable}--Cursor);
 
   &.pf-m-dragging {
@@ -26,6 +29,7 @@
       inset-inline-end: 0;
       content: "";
       border: var(--#{$draggable}--m-dragging--after--BorderWidth) solid var(--#{$draggable}--m-dragging--after--BorderColor);
+      border-radius: var(--#{$draggable}--m-dragging--after--BorderRadius);
     }
   }
 
@@ -35,17 +39,20 @@
   }
 }
 
-.#{$droppable} {
+:where(:root), :where(.#{$droppable}) {
   --#{$droppable}--before--BackgroundColor: transparent;
   --#{$droppable}--before--Opacity: 0;
   --#{$droppable}--after--BorderWidth: 0;
   --#{$droppable}--after--BorderColor: transparent;
-  --#{$droppable}--m-dragging--before--BackgroundColor: var(--#{$pf-global}--palette--white);
+  --#{$droppable}--m-dragging--before--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$droppable}--m-dragging--before--Opacity: .6;
-  --#{$droppable}--m-dragging--after--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
-  --#{$droppable}--m-dragging--after--BorderColor: var(--#{$pf-global}--active-color--100);
-  --#{$droppable}--m-drag-outside--after--BorderColor: var(--#{$pf-global}--danger-color--100);
+  --#{$droppable}--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
+  --#{$droppable}--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
+  --#{$droppable}--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
+  --#{$droppable}--m-drag-outside--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
+}
 
+.#{$droppable} {
   &::before,
   &::after {
     position: absolute;
@@ -64,6 +71,7 @@
 
   &::after {
     border: var(--#{$droppable}--after--BorderWidth, 0) solid var(--#{$droppable}--after--BorderColor, transparent);
+    border-radius: var(--#{$droppable}--m-dragging--after--BorderRadius);
   }
 
   &.pf-m-dragging {
@@ -79,10 +87,3 @@
     --#{$droppable}--m-dragging--after--BorderColor: var(--#{$droppable}--m-drag-outside--after--BorderColor);
   }
 }
-
-// stylelint-disable no-invalid-position-at-import-rule
-@import "themes/dark/drag-drop";
-
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-drag-drop;
-}