@patternfly/patternfly 6.0.0-alpha.107 → 6.0.0-alpha.109

package/components/Breadcrumb/breadcrumb.scss

@@ -24,9 +24,9 @@
   --#{$breadcrumb}__heading--FontSize: var( --pf-t--global--font--size--body--sm);
 
   // breadcrumb dropdown
-  --#{$breadcrumb}__dropdown--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1); // TODO: check with design as this replaces --#{$pf-global}--spacer--form-element (6px) with spacer--sm (8px)
+  --#{$breadcrumb}__dropdown--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --#{$breadcrumb}__dropdown--MarginRight: calc(var(--#{$breadcrumb}__item--MarginRight) * -1);
-  --#{$breadcrumb}__dropdown--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1); // TODO: same as above
+  --#{$breadcrumb}__dropdown--MarginBottom: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --#{$breadcrumb}__dropdown--MarginLeft: calc(var(--#{$breadcrumb}__item-divider--MarginRight) * -1);
 
   // breadcrumb toggle
@@ -65,7 +65,7 @@
 
 // Breadcrumb divider
 .#{$breadcrumb}__item-divider {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   margin-inline-end: var(--#{$breadcrumb}__item-divider--MarginRight);
   font-size: var(--#{$breadcrumb}__item-divider--FontSize);

package/components/CalendarMonth/calendar-month.scss

@@ -88,7 +88,7 @@
 }
 
 .#{$calendar-month}__header-nav-control {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   margin-inline-start: var(--#{$calendar-month}__header-nav-control--MarginLeft);
   margin-inline-end: var(--#{$calendar-month}__header-nav-control--MarginRight);

package/components/Card/card.css

@@ -22,11 +22,11 @@
   --pf-v6-c-card__footer--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-card__actions--PaddingLeft: var(--pf-t--global--spacer--md);
   --pf-v6-c-card__actions--Gap: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-card__actions--MarginTop: calc(var(--pf-v6-global--spacer--form-element) * -1);
-  --pf-v6-c-card__actions--MarginBottom: calc(var(--pf-v6-global--spacer--form-element) * -1);
-  --pf-v6-c-card__header-toggle--MarginTop: calc(var(--pf-v6-global--spacer--form-element) * -1);
+  --pf-v6-c-card__actions--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-card__actions--MarginBottom: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-card__header-toggle--MarginTop: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
   --pf-v6-c-card__header-toggle--MarginRight: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-card__header-toggle--MarginBottom: calc(var(--pf-v6-global--spacer--form-element) * -1);
+  --pf-v6-c-card__header-toggle--MarginBottom: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
   --pf-v6-c-card__header-toggle--MarginLeft: calc(var(--pf-t--global--spacer--md) * -1);
   --pf-v6-c-card__header-toggle-icon--Transition: var(--pf-v6-global--Transition);
   --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
@@ -68,7 +68,7 @@
   --pf-v6-c-card--m-full-height--Height: 100%;
   --pf-v6-c-card--m-plain--BorderColor: transparent;
   --pf-v6-c-card--m-plain--BackgroundColor: transparent;
-  --pf-v6-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-v6-global--spacer--form-element) * -1);
+  --pf-v6-c-card__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-t--global--spacer--button--horizontal--compact) * -1);
   --pf-v6-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-t--global--spacer--xs);
 }
 

package/components/Card/card.scss

@@ -24,13 +24,13 @@
   --#{$card}__footer--Color: var(--pf-t--global--text--color--subtle);
   --#{$card}__actions--PaddingLeft: var(--pf-t--global--spacer--md);
   --#{$card}__actions--Gap: var(--pf-t--global--spacer--sm);
-  --#{$card}__actions--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1); // TODO
-  --#{$card}__actions--MarginBottom: calc(var(--#{$pf-global}--spacer--form-element) * -1); // TODO 
+  --#{$card}__actions--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --#{$card}__actions--MarginBottom: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
 
   // Expandable 
-  --#{$card}__header-toggle--MarginTop: calc(var(--#{$pf-global}--spacer--form-element) * -1);
+  --#{$card}__header-toggle--MarginTop: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
   --#{$card}__header-toggle--MarginRight: var(--pf-t--global--spacer--xs);
-  --#{$card}__header-toggle--MarginBottom: calc(var(--#{$pf-global}--spacer--form-element) * -1);
+  --#{$card}__header-toggle--MarginBottom: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
   --#{$card}__header-toggle--MarginLeft: calc(var(--pf-t--global--spacer--md) * -1);
   --#{$card}__header-toggle-icon--Transition: var(--#{$pf-global}--Transition);
   --#{$card}--m-expanded__header-toggle-icon--Rotate: 90deg;
@@ -100,7 +100,7 @@
   --#{$card}--m-plain--BackgroundColor: transparent;
 
   // Toggle right
-  --#{$card}__header--m-toggle-right--toggle--MarginRight: calc(var(--#{$pf-global}--spacer--form-element) * -1);
+  --#{$card}__header--m-toggle-right--toggle--MarginRight: calc(var(--pf-t--global--spacer--button--horizontal--compact) * -1);
   --#{$card}__header--m-toggle-right--toggle--MarginLeft: var(--pf-t--global--spacer--xs);
 }
 
@@ -261,7 +261,7 @@
 }
 
 .#{$card}__header-toggle-icon {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   display: inline-block;
   transition: var(--#{$card}__header-toggle-icon--Transition);

package/components/Chip/chip-group.scss

@@ -1,7 +1,7 @@
 // @debug $chip-group; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
 
 .#{$chip}-group {
-  @include pf-v5-t-light; // force the container follow the light theme
+  @include pf-v6-t-light; // force the container follow the light theme
 
   // Chip group - spaces main and close
   // column-gap spacer supports legacy chip group
@@ -84,7 +84,7 @@
 }
 
 .#{$chip}-group__label {
-  @include pf-v5-text-overflow;
+  @include pf-v6-text-overflow;
 
   max-width: var(--#{$chip}-group__label--MaxWidth);
   font-size: var(--#{$chip}-group__label--FontSize);

package/components/Chip/chip.scss

@@ -44,7 +44,7 @@
   // icon
   --#{$chip}__icon--MarginLeft: var(--#{$pf-global}--spacer--sm);
 
-  @include pf-v5-t-light;  // This component always needs to be light
+  @include pf-v6-t-light;  // This component always needs to be light
 
   position: relative;
   display: inline-flex;
@@ -91,7 +91,7 @@
 
 // Text element
 .#{$chip}__text {
-  @include pf-v5-text-overflow;
+  @include pf-v6-text-overflow;
 
   position: relative;
   max-width: var(--#{$chip}__text--MaxWidth);
@@ -135,6 +135,6 @@
 // stylelint-disable no-invalid-position-at-import-rule
 @import "themes/dark/chip";
 
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-chip;
+@include pf-v6-theme-dark {
+  @include pf-v6-theme-dark-chip;
 }

package/components/Chip/themes/dark/chip.scss

@@ -1,6 +1,6 @@
 @import "../../../../sass-utilities/themes/dark/all";
 
-@mixin pf-v5-theme-dark-chip() {
+@mixin pf-v6-theme-dark-chip() {
   .#{$chip} {
     --#{$chip}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
     --#{$chip}--before--BorderColor: var(--#{$pf-global}--BorderColor--100);

package/components/ClipboardCopy/clipboard-copy.scss

@@ -76,7 +76,7 @@
 }
 
 .#{$clipboard-copy}__toggle-icon {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   transition: var(--#{$clipboard-copy}__toggle-icon--Transition);
 }

package/components/Content/content.scss

@@ -284,7 +284,7 @@
     display: grid;
     grid-template-columns: 1fr;
 
-    @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
       grid-template: auto / auto 1fr;
       grid-row-gap: var(--#{$content}--dl--RowGap);
       grid-column-gap: var(--#{$content}--dl--ColumnGap);
@@ -297,18 +297,18 @@
     &:not(:first-child) {
       margin-block-start: var(--#{$content}--dt--MarginTop);
 
-      @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+      @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
         --#{$content}--dt--MarginTop: var(--#{$content}--dt--sm--MarginTop);
       }
     }
 
-    @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
       grid-column: 1;
     }
   }
 
   dd {
-    @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
       grid-column: 2;
     }
   }

package/components/ContextSelector/context-selector.scss

@@ -125,7 +125,7 @@
   --#{$context-selector}--m-page-insets__toggle--m-plain--m-text--xl--PaddingRight: var(--#{$pf-global}--spacer--lg);
   --#{$context-selector}--m-page-insets__toggle--m-plain--m-text--xl--PaddingLeft: var(--#{$pf-global}--spacer--lg);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$context-selector}--m-page-insets__toggle--PaddingRight: var(--#{$context-selector}--m-page-insets__toggle--xl--PaddingRight);
     --#{$context-selector}--m-page-insets__toggle--PaddingLeft: var(--#{$context-selector}--m-page-insets__toggle--xl--PaddingLeft);
     --#{$context-selector}--m-page-insets__menu-list-item--PaddingRight: var(--#{$context-selector}--m-page-insets__menu-list-item--xl--PaddingRight);
@@ -286,7 +286,7 @@
   }
 
   .#{$context-selector}__toggle-text {
-    @include pf-v5-text-overflow;
+    @include pf-v6-text-overflow;
 
     flex: 1 1 auto;
     font-size: var(--#{$context-selector}__toggle-text--FontSize);
@@ -303,7 +303,7 @@
 }
 
 .#{$context-selector}__menu {
-  @include pf-v5-t-light;
+  @include pf-v6-t-light;
 
   position: absolute;
   inset-block-start: var(--#{$context-selector}__menu--Top);
@@ -379,6 +379,6 @@
 // stylelint-disable no-invalid-position-at-import-rule
 @import "themes/dark/context-selector";
 
-@include pf-v5-theme-dark {
-  @include pf-v5-theme-dark-context-selector;
+@include pf-v6-theme-dark {
+  @include pf-v6-theme-dark-context-selector;
 }

package/components/ContextSelector/themes/dark/context-selector.scss

@@ -1,6 +1,6 @@
 @import "../../../../sass-utilities/themes/dark/all";
 
-@mixin pf-v5-theme-dark-context-selector() {
+@mixin pf-v6-theme-dark-context-selector() {
   .#{$context-selector} {
     --#{$context-selector}__menu--Top: 100%;
     --#{$context-selector}__menu-list-item--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--400);

package/components/DataList/data-list-grid.scss

@@ -1,19 +1,19 @@
-@mixin pf-v5-c-data-list-responsive-block() {
+@mixin pf-v6-c-data-list-responsive-block() {
   // base responsive styles
   @at-root .#{$data-list}:not([class*="pf-m-grid"]) {
-    @media screen and (min-width: $pf-v5-global--breakpoint--md) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--md) {
       @content;
     }
   }
 
   @at-root .#{$data-list}.pf-m-grid-none {
-    @media screen and (min-width: $pf-v5-global--breakpoint--xs) {
+    @media screen and (min-width: $pf-v6-global--breakpoint--xs) {
       @content;
     }
   }
 
   // grid modifiers
-  @each $size, $bp in $pf-v5-global--breakpoint-name-map {
+  @each $size, $bp in $pf-v6-global--breakpoint-name-map {
     @at-root .#{$data-list}.pf-m-grid-#{$size} {
       @media screen and (min-width: #{$bp}) {
         @content;
@@ -22,7 +22,7 @@
   }
 }
 
-@include pf-v5-c-data-list-responsive-block {
+@include pf-v6-c-data-list-responsive-block {
   --#{$data-list}__cell--cell--PaddingTop: var(--#{$data-list}__cell--cell--md--PaddingTop);
   --#{$data-list}__cell--PaddingBottom: var(--#{$data-list}__cell--md--PaddingBottom);
   --#{$data-list}__item-control--MarginRight: var(--#{$data-list}__item-control--md--MarginRight);
@@ -32,7 +32,7 @@
   --#{$data-list}--m-compact__cell--PaddingBottom: var(--#{$data-list}--m-compact__cell--md--PaddingBottom);
   --#{$data-list}--m-compact__cell-cell--PaddingTop: var(--#{$data-list}--m-compact__cell-cell--md--PaddingTop);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$data-list}__item-row--PaddingRight: var(--#{$data-list}__item-row--xl--PaddingRight);
     --#{$data-list}__item-row--PaddingLeft: var(--#{$data-list}__item-row--xl--PaddingLeft);
     --#{$data-list}__expandable-content-body--PaddingRight: var(--#{$data-list}__expandable-content-body--xl--PaddingRight);

package/components/DataList/data-list.css

@@ -1,49 +1,49 @@
 .pf-v6-c-data-list__item-action {
-  --pf-v5-hidden-visible--hidden--Display: none;
-  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
-  display: var(--pf-v5-hidden-visible--Display);
+  --pf-v6-hidden-visible--hidden--Display: none;
+  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  display: var(--pf-v6-hidden-visible--Display);
 }
 .pf-m-hidden.pf-v6-c-data-list__item-action {
-  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
 }
 @media screen and (min-width: 576px) {
   .pf-m-hidden-on-sm.pf-v6-c-data-list__item-action {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
   .pf-m-visible-on-sm.pf-v6-c-data-list__item-action {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 @media screen and (min-width: 768px) {
   .pf-m-hidden-on-md.pf-v6-c-data-list__item-action {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
   .pf-m-visible-on-md.pf-v6-c-data-list__item-action {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 @media screen and (min-width: 992px) {
   .pf-m-hidden-on-lg.pf-v6-c-data-list__item-action {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
   .pf-m-visible-on-lg.pf-v6-c-data-list__item-action {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 @media screen and (min-width: 1200px) {
   .pf-m-hidden-on-xl.pf-v6-c-data-list__item-action {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
   .pf-m-visible-on-xl.pf-v6-c-data-list__item-action {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 @media screen and (min-width: 1450px) {
   .pf-m-hidden-on-2xl.pf-v6-c-data-list__item-action {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
   .pf-m-visible-on-2xl.pf-v6-c-data-list__item-action {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 
@@ -489,8 +489,8 @@
   --pf-v6-c-data-list--cell--WordBreak: normal;
   --pf-v6-c-data-list--cell--m-truncate--MinWidth: 5ch;
   --pf-v6-c-data-list__toggle--MarginLeft: calc(var(--pf-t--global--spacer--sm) * -1);
-  --pf-v6-c-data-list__toggle--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1);
-  --pf-v6-c-data-list__toggle--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1);
+  --pf-v6-c-data-list__toggle--MarginTop: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
+  --pf-v6-c-data-list__toggle--MarginBottom: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
   --pf-v6-c-data-list__toggle-icon--Height: calc(var(--pf-v6-c-data-list--FontSize) * var(--pf-v6-c-data-list--LineHeight));
   --pf-v6-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
   --pf-v6-c-data-list__toggle-icon--Rotate: 0;
@@ -730,7 +730,7 @@
 }
 
 .pf-v6-c-data-list__item-action {
-  --pf-v5-hidden-visible--visible--Display: var(--pf-v6-c-data-list__item-action--Display);
+  --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-data-list__item-action--Display);
   align-content: flex-start;
   align-items: flex-start;
   padding-block-start: var(--pf-v6-c-data-list__item-action--PaddingTop);

package/components/DataList/data-list.scss

@@ -10,7 +10,7 @@
   --#{$data-list}--sm--BorderTopColor: var(--pf-t--global--border--color--default);
   --#{$data-list}--MarginLeft: var(--pf-t--global--spacer--md);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
     --#{$data-list}--BorderTopColor: var(--#{$data-list}--sm--BorderTopColor);
     --#{$data-list}--BorderTopWidth: var(--#{$data-list}--sm--BorderTopWidth);
   }
@@ -25,7 +25,7 @@
   --#{$data-list}__item--sm--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
   --#{$data-list}__item--sm--BorderBottomColor: var(--pf-t--global--border--color--default);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
     --#{$data-list}__item--BorderBottomWidth: var(--#{$data-list}__item--sm--BorderBottomWidth);
     --#{$data-list}__item--BorderBottomColor: var(--#{$data-list}__item--sm--BorderBottomColor);
   }
@@ -57,8 +57,8 @@
 
   // toggle
   --#{$data-list}__toggle--MarginLeft: calc(var(--pf-t--global--spacer--sm) * -1); // offset toggle to align left
-  --#{$data-list}__toggle--MarginTop: calc(var(--pf-t--global--spacer--sm) * -1); // updating to spacer--sm (8x) as spacer--form-element (6px) doesn't exist
-  --#{$data-list}__toggle--MarginBottom: calc(var(--pf-t--global--spacer--sm) * -1); // former form-element
+  --#{$data-list}__toggle--MarginTop: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
+  --#{$data-list}__toggle--MarginBottom: calc(var(--pf-t--global--spacer--button--vertical--default) * -1);
   --#{$data-list}__toggle-icon--Height: calc(var(--#{$data-list}--FontSize) * var(--#{$data-list}--LineHeight));
   --#{$data-list}__toggle-icon--Transition: .2s ease-in 0s;
   --#{$data-list}__toggle-icon--Rotate: 0;
@@ -320,7 +320,7 @@
 }
 
 .#{$data-list}__item-action {
-  @include pf-v5-hidden-visible(var(--#{$data-list}__item-action--Display));
+  @include pf-v6-hidden-visible(var(--#{$data-list}__item-action--Display));
 
   align-content: flex-start;
   align-items: flex-start;
@@ -348,7 +348,7 @@
 
 // toggle icon rotate
 .#{$data-list}__toggle-icon {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   height: var(--#{$data-list}__toggle-icon--Height);
   pointer-events: none;

package/components/DescriptionList/description-list-order.scss

@@ -6,7 +6,7 @@ $pf-v6-c-description-list-order--limit: 12;
   @each $breakpoint, $breakpoint-value in $pf-v6-c-description-list-order--breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
+    @include pf-v6-apply-breakpoint($breakpoint) {
       @for $i from 0 through $pf-v6-c-description-list-order--limit {
         .pf-m-order-#{$i}#{$breakpoint-name} {
           order: #{$i};

package/components/DescriptionList/description-list.scss

@@ -26,7 +26,7 @@ $pf-v6-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
   --#{$description-list}__term--FontSize: var(--pf-t--global--font--size--body--sm);
   --#{$description-list}__term--LineHeight: var(--pf-t--global--font--line-height--body);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
     --#{$description-list}__term--Display: var(--#{$description-list}__term--sm--Display);
   }
 
@@ -63,8 +63,8 @@ $pf-v6-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
   --#{$description-list}--m-display-lg__description--FontSize: var(--pf-t--global--font--size--body--lg); // TODO replace with new font tokens when available
   --#{$description-list}--m-display-2xl__description--FontSize: var(--pf-t--global--font--size--heading--lg); // TODO replace with new font tokens when available
 
-  @include pf-v5-output-root-variables("--#{$description-list}--m-horizontal__term--width", $pf-v6-c-description-list--breakpoint-map);
-  @include pf-v5-build-css-variable-stack("--#{$description-list}__term--width", "--#{$description-list}--m-horizontal__term--width", $pf-v6-c-description-list--breakpoint-map);
+  @include pf-v6-output-root-variables("--#{$description-list}--m-horizontal__term--width", $pf-v6-c-description-list--breakpoint-map);
+  @include pf-v6-build-css-variable-stack("--#{$description-list}__term--width", "--#{$description-list}--m-horizontal__term--width", $pf-v6-c-description-list--breakpoint-map);
 }
 
 .#{$description-list} { 
@@ -85,7 +85,7 @@ $pf-v6-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
   &.pf-m-auto-fit {
     grid-template-columns: repeat(auto-fit, minmax(var(--#{$description-list}--m-auto-fit--GridTemplateColumns--minmax--min), 1fr));
 
-    @include pf-v5-build-css-variable-stack("--#{$description-list}--GridTemplateColumns--minmax--min", "--#{$description-list}--GridTemplateColumns--min", $pf-v6-c-description-list--breakpoint-map);
+    @include pf-v6-build-css-variable-stack("--#{$description-list}--GridTemplateColumns--minmax--min", "--#{$description-list}--GridTemplateColumns--min", $pf-v6-c-description-list--breakpoint-map);
   }
 
   &.pf-m-compact {
@@ -201,7 +201,7 @@ $pf-v6-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
   @each $breakpoint, $breakpoint-value in $pf-v6-c-description-list--breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
+    @include pf-v6-apply-breakpoint($breakpoint) {
       &.pf-m-1-col#{$breakpoint-name} {
         --#{$description-list}--GridTemplateColumns--count: var(--#{$description-list}--m-1-col--GridTemplateColumns--count);
       }

package/components/Divider/divider.css

@@ -1,49 +1,49 @@
 .pf-v6-c-divider {
-  --pf-v5-hidden-visible--hidden--Display: none;
-  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
-  display: var(--pf-v5-hidden-visible--Display);
+  --pf-v6-hidden-visible--hidden--Display: none;
+  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  display: var(--pf-v6-hidden-visible--Display);
 }
 .pf-m-hidden.pf-v6-c-divider {
-  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
 }
 @media screen and (min-width: 576px) {
   .pf-m-hidden-on-sm.pf-v6-c-divider {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
   .pf-m-visible-on-sm.pf-v6-c-divider {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 @media screen and (min-width: 768px) {
   .pf-m-hidden-on-md.pf-v6-c-divider {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
   .pf-m-visible-on-md.pf-v6-c-divider {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 @media screen and (min-width: 992px) {
   .pf-m-hidden-on-lg.pf-v6-c-divider {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
   .pf-m-visible-on-lg.pf-v6-c-divider {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 @media screen and (min-width: 1200px) {
   .pf-m-hidden-on-xl.pf-v6-c-divider {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
   .pf-m-visible-on-xl.pf-v6-c-divider {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 @media screen and (min-width: 1450px) {
   .pf-m-hidden-on-2xl.pf-v6-c-divider {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
   }
   .pf-m-visible-on-2xl.pf-v6-c-divider {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
 
@@ -59,7 +59,7 @@
   flex-direction: row;
   width: 100%;
   height: var(--pf-v6-c-divider--Size);
-  --pf-v5-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
+  --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
   flex-shrink: 0;
   align-items: stretch;
   align-self: stretch;

package/components/Divider/divider.scss

@@ -1,16 +1,16 @@
 // @debug $divider; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-$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");
+$pf-v6-c-divider--breakpoint-map: build-breakpoint-map("sm", "md", "lg", "xl", "2xl");
+$pf-v6-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl");
 
 // * Divider horizontal
-@mixin pf-v5-c-divider--m-horizontal {
+@mixin pf-v6-c-divider--m-horizontal {
   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 {
+@mixin pf-v6-c-divider--m-vertical {
   flex-direction: column;
   width: var(--#{$divider}--Size); // apply size to width in vertical orientation
   height: inherit;
@@ -29,8 +29,8 @@ $pf-v5-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "
 
 // - Divider
 .#{$divider} {
-  @include pf-v5-c-divider--m-horizontal; // default, set to orientation to horizontal
-  @include pf-v5-hidden-visible(var(--#{$divider}--Display));
+  @include pf-v6-c-divider--m-horizontal; // default, set to orientation to horizontal
+  @include pf-v6-hidden-visible(var(--#{$divider}--Display));
 
   flex-shrink: 0;
   align-items: stretch;
@@ -47,16 +47,16 @@ $pf-v5-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "
 
   // - Divider horizontal
   &.pf-m-horizontal {
-    @include pf-v5-c-divider--m-horizontal;
+    @include pf-v6-c-divider--m-horizontal;
   }
 
   // - Divider vertical
   &.pf-m-vertical {
-    @include pf-v5-c-divider--m-vertical;
+    @include pf-v6-c-divider--m-vertical;
   }
 
   // - Divider spacer insets
-  @each $spacer, $spacer-value in $pf-v5-c-divider--spacer-map {
+  @each $spacer, $spacer-value in $pf-v6-c-divider--spacer-map {
     @if $spacer == none {
       $spacer-value: 0%;
     }
@@ -71,23 +71,23 @@ $pf-v5-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "
 // TODO: make responsive values opt in/out
 // stylelint-disable
 .#{$divider} {
-  @each $breakpoint, $breakpoint-value in $pf-v5-c-divider--breakpoint-map {
+  @each $breakpoint, $breakpoint-value in $pf-v6-c-divider--breakpoint-map {
     $breakpoint-name: '-on-' + #{$breakpoint};
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
+    @include pf-v6-apply-breakpoint($breakpoint) {
       &.pf-m-horizontal#{$breakpoint-name} {
-        @include pf-v5-c-divider--m-horizontal;
+        @include pf-v6-c-divider--m-horizontal;
       }
     }
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
+    @include pf-v6-apply-breakpoint($breakpoint) {
       &.pf-m-vertical#{$breakpoint-name} {
-        @include pf-v5-c-divider--m-vertical;
+        @include pf-v6-c-divider--m-vertical;
       }
     }
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
-      @each $spacer, $spacer-value in $pf-v5-c-divider--spacer-map {
+    @include pf-v6-apply-breakpoint($breakpoint) {
+      @each $spacer, $spacer-value in $pf-v6-c-divider--spacer-map {
         &.pf-m-inset-#{$spacer}#{$breakpoint-name} {
           @if $spacer == none {
             --#{$divider}--before--FlexBasis: 100%;

package/components/Drawer/drawer.css

@@ -94,8 +94,8 @@
   --pf-v6-c-drawer__splitter-handle--after--Height: 0.25rem;
   --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
   --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
-  --pf-v6-c-drawer__actions--MarginTop: calc(var(--pf-t--global--spacer--xs) * -1.5);
-  --pf-v6-c-drawer__actions--MarginRight: calc(var(--pf-t--global--spacer--xs) * -1.5);
+  --pf-v6-c-drawer__actions--MarginTop: calc(var(--pf-t--global--spacer--control--vertical--compact) * -1.5);
+  --pf-v6-c-drawer__actions--MarginRight: calc(var(--pf-t--global--spacer--control--horizontal--compact) * -1.5);
   --pf-v6-c-drawer__panel--BoxShadow: none;
   --pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--top);
   --pf-v6-c-drawer__panel--after--Width: var(--pf-t--global--border--width--divider--default);