@patternfly/patternfly 6.0.0-alpha.106 → 6.0.0-alpha.108

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);
   }
 }
 
@@ -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);
   }
@@ -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;
@@ -85,25 +85,25 @@
   --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
 }
 .pf-v6-c-divider.pf-m-inset-xs {
-  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xs) * 2);
+  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
 }
 .pf-v6-c-divider.pf-m-inset-sm {
-  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--sm) * 2);
+  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
 }
 .pf-v6-c-divider.pf-m-inset-md {
-  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--md) * 2);
+  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
 }
 .pf-v6-c-divider.pf-m-inset-lg {
-  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--lg) * 2);
+  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
 }
 .pf-v6-c-divider.pf-m-inset-xl {
-  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xl) * 2);
+  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
 }
 .pf-v6-c-divider.pf-m-inset-2xl {
-  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--2xl) * 2);
+  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
 }
 .pf-v6-c-divider.pf-m-inset-3xl {
-  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--3xl) * 2);
+  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
 }
 
 @media (min-width: 576px) {
@@ -125,25 +125,25 @@
     --pf-v6-c-divider--before--FlexBasis: 100%;
   }
   .pf-v6-c-divider.pf-m-inset-xs-on-sm {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xs) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-sm-on-sm {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--sm) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-md-on-sm {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--md) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-lg-on-sm {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--lg) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-xl-on-sm {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--2xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--3xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
   }
 }
 @media (min-width: 768px) {
@@ -165,25 +165,25 @@
     --pf-v6-c-divider--before--FlexBasis: 100%;
   }
   .pf-v6-c-divider.pf-m-inset-xs-on-md {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xs) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-sm-on-md {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--sm) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-md-on-md {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--md) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-lg-on-md {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--lg) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-xl-on-md {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-2xl-on-md {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--2xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-3xl-on-md {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--3xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
   }
 }
 @media (min-width: 992px) {
@@ -205,25 +205,25 @@
     --pf-v6-c-divider--before--FlexBasis: 100%;
   }
   .pf-v6-c-divider.pf-m-inset-xs-on-lg {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xs) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-sm-on-lg {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--sm) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-md-on-lg {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--md) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-lg-on-lg {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--lg) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-xl-on-lg {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--2xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--3xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
   }
 }
 @media (min-width: 1200px) {
@@ -245,25 +245,25 @@
     --pf-v6-c-divider--before--FlexBasis: 100%;
   }
   .pf-v6-c-divider.pf-m-inset-xs-on-xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xs) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-sm-on-xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--sm) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-md-on-xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--md) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-lg-on-xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--lg) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-xl-on-xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--2xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--3xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
   }
 }
 @media (min-width: 1450px) {
@@ -285,24 +285,24 @@
     --pf-v6-c-divider--before--FlexBasis: 100%;
   }
   .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xs) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--sm) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-md-on-2xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--md) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--lg) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--2xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
   }
   .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
-    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-v6-global--spacer--3xl) * 2);
+    --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
   }
 }