@patternfly/patternfly 6.0.0-alpha.119 → 6.0.0-alpha.120

package/components/Alert/alert.scss

@@ -1,6 +1,6 @@
-// @debug $alert; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root {
+:where(:root, .#{$alert}) {
   // Alert variables
   --#{$alert}--BoxShadow: var(--pf-t--global--box-shadow--lg);
   --#{$alert}--BackgroundColor: var(--pf-t--global--background--color--floating--default);
@@ -186,7 +186,7 @@
 
 .#{$alert}__toggle-icon {
   @include pf-v6-mirror-inline-on-rtl;
-  
+
   display: inline-block;
   transition: var(--#{$alert}__toggle-icon--Transition);
   transform: rotate(var(--#{$alert}__toggle-icon--Rotate));

package/components/AppLauncher/app-launcher.scss

@@ -1,6 +1,4 @@
-// Don't remove this magic comment. See gulpfile.js.
-// @import "../../sass-utilities/all";
-// @debug $app-launcher; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
 .#{$app-launcher} {
   // Menu

package/components/Avatar/avatar.css

@@ -1,4 +1,4 @@
-:root, .pf-v6-c-avatar {
+:where(:root, .pf-v6-c-avatar) {
   --pf-v6-c-avatar--BorderColor: transparent;
   --pf-v6-c-avatar--BorderWidth: 0;
   --pf-v6-c-avatar--BorderRadius: var(--pf-t--global--border--radius--pill);

package/components/Avatar/avatar.scss

@@ -1,8 +1,9 @@
-// @debug $avatar; // check your variable names located in src/patternfly/sass-utilities/component-namespaces
+@use '../../sass-utilities' as *;
+
 $pf-v6-c-avatar--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 $pf-v6-c-avatar--sizes: "sm", "md", "lg", "xl";
 
-:root, .#{$avatar} {
+:where(:root, .#{$avatar}) {
   --#{$avatar}--BorderColor: transparent;
   --#{$avatar}--BorderWidth: 0;
   --#{$avatar}--BorderRadius: var(--pf-t--global--border--radius--pill);

package/components/BackToTop/back-to-top.css

@@ -1,4 +1,4 @@
-:root {
+:where(:root, .pf-v6-c-back-to-top) {
   --pf-v6-c-back-to-top--Right: var(--pf-t--global--spacer--2xl);
   --pf-v6-c-back-to-top--Bottom: var(--pf-t--global--spacer--lg);
   --pf-v6-c-back-to-top--md--Bottom: var(--pf-t--global--spacer--2xl);
@@ -10,7 +10,7 @@
   --pf-v6-c-back-to-top--c-button--BoxShadow: var(--pf-t--global--box-shadow--sm);
 }
 @media (min-width: 768px) {
-  :root {
+  :where(:root, .pf-v6-c-back-to-top) {
     --pf-v6-c-back-to-top--Bottom: var(--pf-v6-c-back-to-top--md--Bottom);
   }
 }

package/components/BackToTop/back-to-top.scss

@@ -1,6 +1,6 @@
-// @debug $back-to-top; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root {
+:where(:root, .#{$back-to-top}) {
   --#{$back-to-top}--Right: var(--pf-t--global--spacer--2xl);
   --#{$back-to-top}--Bottom: var(--pf-t--global--spacer--lg);
   --#{$back-to-top}--md--Bottom: var(--pf-t--global--spacer--2xl);

package/components/Backdrop/backdrop.css

@@ -1,5 +1,4 @@
-:root,
-.pf-v6-c-backdrop {
+:where(:root, .pf-v6-c-backdrop) {
   --pf-v6-c-backdrop--Position: fixed;
   --pf-v6-c-backdrop--ZIndex: var(--pf-t--global--z-index--lg);
   --pf-v6-c-backdrop--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);

package/components/Backdrop/backdrop.scss

@@ -1,7 +1,6 @@
-// @debug $backdrop; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root,
-.#{$backdrop} {
+:where(:root, .#{$backdrop}) {
   --#{$backdrop}--Position: fixed;
   --#{$backdrop}--ZIndex: var(--pf-t--global--z-index--lg);
   --#{$backdrop}--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);

package/components/BackgroundImage/background-image.css

@@ -1,5 +1,4 @@
-:root,
-.pf-v6-c-background-image {
+:where(:root, .pf-v6-c-background-image) {
   --pf-v6-c-background-image--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-background-image--BackgroundImage: none;
   --pf-v6-c-background-image--BackgroundSize--min-width: 200px;

package/components/BackgroundImage/background-image.scss

@@ -1,7 +1,6 @@
-// @debug $background-image; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root,
-.#{$background-image} {
+:where(:root, .#{$background-image}) {
   --#{$background-image}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$background-image}--BackgroundImage: none;
   --#{$background-image}--BackgroundSize--min-width: 200px;

package/components/Badge/badge.css

@@ -1,4 +1,4 @@
-:root {
+:where(:root, .pf-v6-c-badge) {
   --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);

package/components/Badge/badge.scss

@@ -1,6 +1,6 @@
-// @debug $badge; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root {
+:where(:root, .#{$badge}) {
   // Component
   --#{$badge}--BorderRadius: var(--pf-t--global--border--radius--pill);
   --#{$badge}--FontSize: var(--pf-t--global--font--size--body--sm);

package/components/Banner/banner.css

@@ -1,4 +1,4 @@
-:root {
+:where(:root, .pf-v6-c-banner) {
   --pf-v6-c-banner--PaddingTop: var(--pf-t--global--spacer--xs);
   --pf-v6-c-banner--PaddingRight: var(--pf-t--global--spacer--md);
   --pf-v6-c-banner--md--PaddingRight: var(--pf-t--global--spacer--lg);
@@ -44,7 +44,7 @@
   --pf-v6-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
 }
 @media (min-width: 768px) {
-  :root {
+  :where(:root, .pf-v6-c-banner) {
     --pf-v6-c-banner--PaddingRight: var(--pf-v6-c-banner--md--PaddingRight);
     --pf-v6-c-banner--PaddingLeft: var(--pf-v6-c-banner--md--PaddingLeft);
   }

package/components/Banner/banner.scss

@@ -1,6 +1,6 @@
-// @debug $banner; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root {
+:where(:root, .#{$banner}) {
   --#{$banner}--PaddingTop: var(--pf-t--global--spacer--xs);
   --#{$banner}--PaddingRight: var(--pf-t--global--spacer--md);
   --#{$banner}--md--PaddingRight: var(--pf-t--global--spacer--lg);
@@ -99,7 +99,7 @@
     --#{$banner}--BackgroundColor: var(--#{$banner}--m-red--BackgroundColor);
     --#{$banner}--Color: var(--#{$banner}--m-red--Color);
   }
-  
+
   &.pf-m-orangered {
     --#{$banner}--BackgroundColor: var(--#{$banner}--m-orangered--BackgroundColor);
     --#{$banner}--Color: var(--#{$banner}--m-orangered--Color);

package/components/Brand/brand.scss

@@ -1,4 +1,5 @@
-// @debug $brand; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
+
 $pf-v6-c-brand--breakpoint-map: build-breakpoint-map();
 
 .#{$brand} {

package/components/Breadcrumb/breadcrumb.css

@@ -1,5 +1,4 @@
-:where(:root),
-:where(.pf-v6-c-breadcrumb) {
+:where(:root, .pf-v6-c-breadcrumb) {
   --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-breadcrumb__item--MarginRight: var(--pf-t--global--spacer--sm);

package/components/Breadcrumb/breadcrumb.scss

@@ -1,5 +1,6 @@
-:where(:root),
-:where(.#{$breadcrumb}) {
+@use '../../sass-utilities' as *;
+
+:where(:root, .#{$breadcrumb}) {
   // Breadcrumb item
   --#{$breadcrumb}__item--FontSize: var(--pf-t--global--font--size--body--sm);
   --#{$breadcrumb}__item--LineHeight: var(--pf-t--global--font--line-height--body);

package/components/Button/button.css

@@ -1,5 +1,4 @@
-:where(:root),
-:where(.pf-v6-c-button) {
+:where(:root, .pf-v6-c-button) {
   --pf-v6-c-button--Display: inline-block;
   --pf-v6-c-button--PaddingTop: var(--pf-t--global--spacer--sm);
   --pf-v6-c-button--PaddingRight: var(--pf-t--global--spacer--lg);

package/components/Button/button.scss

@@ -1,5 +1,6 @@
-:where(:root),
-:where(.#{$button}) {
+@use '../../sass-utilities' as *;
+
+:where(:root, .#{$button}) {
   --#{$button}--Display: inline-block;
   --#{$button}--PaddingTop: var(--pf-t--global--spacer--sm);
   --#{$button}--PaddingRight: var(--pf-t--global--spacer--lg);

package/components/CalendarMonth/calendar-month.css

@@ -1,5 +1,4 @@
-:where(:root),
-:where(.pf-v6-c-calendar-month) {
+:where(:root, .pf-v6-c-calendar-month) {
   --pf-v6-c-calendar-month--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-calendar-month--PaddingTop: var(--pf-t--global--spacer--lg);
   --pf-v6-c-calendar-month--PaddingRight: var(--pf-t--global--spacer--lg);

package/components/CalendarMonth/calendar-month.scss

@@ -1,5 +1,6 @@
-:where(:root),
-:where(.#{$calendar-month}) {
+@use '../../sass-utilities' as *;
+
+:where(:root, .#{$calendar-month}) {
   --#{$calendar-month}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$calendar-month}--PaddingTop: var(--pf-t--global--spacer--lg);
   --#{$calendar-month}--PaddingRight: var(--pf-t--global--spacer--lg);
@@ -20,7 +21,7 @@
 
   // day th
   --#{$calendar-month}__day--PaddingBottom: var(--pf-t--global--spacer--md);
-  --#{$calendar-month}__day--FontWeight: var(--pf-t--global--font--weight--body);  
+  --#{$calendar-month}__day--FontWeight: var(--pf-t--global--font--weight--body);
   --#{$calendar-month}__day--Color: var(--pf-t--global--text--color--regular);
 
 
@@ -156,7 +157,6 @@
     --#{$calendar-month}__date--hover--BorderWidth: var(--#{$calendar-month}__dates-cell--m-in-range__date--hover--BorderWidth);
     --#{$calendar-month}__date--hover--BorderColor: var(--#{$calendar-month}__dates-cell--m-in-range__date--hover--BorderColor);
     --#{$calendar-month}__date--focus--BackgroundColor: var(--#{$calendar-month}__dates-cell--m-in-range__date--focus--BackgroundColor);
-    
   }
 
   &.pf-m-start-range {
@@ -221,7 +221,7 @@
   &:hover,
   &.pf-m-hover {
     --#{$calendar-month}__date--BackgroundColor: var(--#{$calendar-month}__date--hover--BackgroundColor);
-    
+
     border: var(--#{$calendar-month}__date--hover--BorderColor) solid var(--#{$calendar-month}__date--hover--BorderWidth);
   }
 

package/components/Card/card.css

@@ -1,5 +1,4 @@
-:where(:root),
-:where(.pf-v6-c-card) {
+:where(:root, .pf-v6-c-card) {
   --pf-v6-c-card--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-card--BorderStyle: solid;

package/components/Card/card.scss

@@ -1,7 +1,6 @@
-// @debug $card; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:where(:root),
-:where(.#{$card}) {
+:where(:root, .#{$card}) {
   --#{$card}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$card}--BorderColor: var(--pf-t--global--border--color--default);
   --#{$card}--BorderStyle: solid;
@@ -27,7 +26,7 @@
   --#{$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 
+  // Expandable
   --#{$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-t--global--spacer--button--vertical--default) * -1);
@@ -70,7 +69,7 @@
   --#{$card}--m-compact__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
   --#{$card}--m-compact__body--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$card}--m-compact__footer--FontSize: var(--pf-t--global--font--size--body--sm);
-  --#{$card}--m-compact--first-child--PaddingTop: var(--pf-t--global--spacer--md);    
+  --#{$card}--m-compact--first-child--PaddingTop: var(--pf-t--global--spacer--md);
   --#{$card}--m-compact--child--PaddingRight: var(--pf-t--global--spacer--md);
   --#{$card}--m-compact--child--PaddingBottom: var(--pf-t--global--spacer--md);
   --#{$card}--m-compact--child--PaddingLeft: var(--pf-t--global--spacer--md);

package/components/Check/check.css

@@ -1,5 +1,4 @@
-:root,
-.pf-v6-c-check {
+:where(:root, .pf-v6-c-check) {
   --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
   --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-check--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));

package/components/Check/check.scss

@@ -1,7 +1,6 @@
-// @debug $check; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root,
-.#{$check} {
+:where(:root, .#{$check}) {
   --#{$check}--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
   --#{$check}--AccentColor: var(--pf-t--global--color--brand--default);
   --#{$check}--MinHeight: calc(var(--#{$check}__label--FontSize) * var(--#{$check}__label--LineHeight));

package/components/Chip/chip-group.scss

@@ -1,4 +1,4 @@
-// @debug $chip-group; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
 .#{$chip}-group {
   // Chip group - spaces main and close

package/components/Chip/chip.scss

@@ -1,4 +1,4 @@
-// @debug $chip; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
 .#{$chip} {
   --#{$chip}--PaddingTop: var(--#{$pf-global}--spacer--xs);

package/components/ClipboardCopy/clipboard-copy.css

@@ -1,5 +1,4 @@
-:where(:root),
-:where(.pf-v6-c-clipboard-copy) {
+:where(:root, .pf-v6-c-clipboard-copy) {
   --pf-v6-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
   --pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
   --pf-v6-c-clipboard-copy__expandable-content--MarginTop: var(--pf-t--global--spacer--xs);

package/components/ClipboardCopy/clipboard-copy.scss

@@ -1,7 +1,6 @@
-// @debug $clipboard-copy; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:where(:root),
-:where(.#{$clipboard-copy}) {
+:where(:root, .#{$clipboard-copy}) {
   // Toggle icon
   --#{$clipboard-copy}__toggle-icon--Transition: .2s ease-in 0s;
   --#{$clipboard-copy}--m-expanded__toggle-icon--Rotate: 90deg;

package/components/CodeBlock/code-block.css

@@ -1,4 +1,4 @@
-:root, :where(.pf-v6-c-code-block) {
+:where(:root, .pf-v6-c-code-block) {
   --pf-v6-c-code-block--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-code-block__header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);

package/components/CodeBlock/code-block.scss

@@ -1,6 +1,6 @@
-// @debug $code-block; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root, :where(.#{$code-block}) {
+:where(:root, .#{$code-block}) {
   --#{$code-block}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$code-block}--BorderRadius: var(--pf-t--global--border--radius--medium);
   --#{$code-block}__header--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);

package/components/CodeEditor/code-editor.css

@@ -1,4 +1,4 @@
-:where(:root), :where(.pf-v6-c-code-editor) {
+:where(:root, .pf-v6-c-code-editor) {
   --pf-v6-c-code-editor__controls--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-code-editor__controls--Gap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-code-editor__header--before--BorderBottomWidth: var(--pf-t--global--border--width--box--default);

package/components/CodeEditor/code-editor.scss

@@ -1,6 +1,6 @@
-// @debug $code-editor; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:where(:root), :where(.#{$code-editor}) {
+:where(:root, .#{$code-editor}) {
   // controls
   --#{$code-editor}__controls--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --#{$code-editor}__controls--Gap: var(--pf-t--global--spacer--xs);

package/components/Content/content.css

@@ -1,5 +1,4 @@
-:where(:root),
-:where(.pf-v6-c-content) {
+:where(:root, .pf-v6-c-content) {
   --pf-v6-c-content--MarginBottom: var(--pf-t--global--spacer--md);
   --pf-v6-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--body--default);

package/components/Content/content.scss

@@ -1,7 +1,6 @@
-// @debug $content; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:where(:root),
-:where(.#{$content}) {
+:where(:root, .#{$content}) {
   // Body
   --#{$content}--MarginBottom: var(--pf-t--global--spacer--md);
   --#{$content}--LineHeight: var(--pf-t--global--font--line-height--body);

package/components/ContextSelector/context-selector.scss

@@ -1,4 +1,4 @@
-// @debug $context-selector; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
 .#{$context-selector} {
   // Context selector

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

@@ -1,3 +1,5 @@
+@use '../../sass-utilities' as *;
+
 @mixin pf-v6-c-data-list-responsive-block() {
   // base responsive styles
   @at-root .#{$data-list}:not([class*="pf-m-grid"]) {

package/components/DataList/data-list.css

@@ -404,7 +404,7 @@
   }
 }
 
-:root, .pf-v6-c-data-list {
+:where(:root, .pf-v6-c-data-list) {
   --pf-v6-c-data-list--FontSize: var( --pf-t--global--font--size--body);
   --pf-v6-c-data-list--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-data-list--BorderTopColor: var(--pf-t--global--border--color--default);
@@ -516,13 +516,13 @@
   --pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingTop: var(--pf-t--global--spacer--sm);
 }
 @media screen and (min-width: 576px) {
-  :root, .pf-v6-c-data-list {
+  :where(:root, .pf-v6-c-data-list) {
     --pf-v6-c-data-list--BorderTopColor: var(--pf-v6-c-data-list--sm--BorderTopColor);
     --pf-v6-c-data-list--BorderTopWidth: var(--pf-v6-c-data-list--sm--BorderTopWidth);
   }
 }
 @media screen and (min-width: 576px) {
-  :root, .pf-v6-c-data-list {
+  :where(:root, .pf-v6-c-data-list) {
     --pf-v6-c-data-list__item--BorderBottomWidth: var(--pf-v6-c-data-list__item--sm--BorderBottomWidth);
     --pf-v6-c-data-list__item--BorderBottomColor: var(--pf-v6-c-data-list__item--sm--BorderBottomColor);
   }

package/components/DataList/data-list.scss

@@ -1,12 +1,12 @@
-// @debug $data-list; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-@import "./data-list-grid";
+@use '../../sass-utilities' as *;
+@use './data-list-grid' as *;
 
-:root, .#{$data-list} {
-  --#{$data-list}--FontSize: var( --pf-t--global--font--size--body); 
+:where(:root, .#{$data-list}) {
+  --#{$data-list}--FontSize: var( --pf-t--global--font--size--body);
   --#{$data-list}--LineHeight: var(--pf-t--global--font--line-height--body);
   --#{$data-list}--BorderTopColor: var(--pf-t--global--border--color--default);
   --#{$data-list}--BorderTopWidth: var(--pf-t--global--spacer--sm);
-  --#{$data-list}--sm--BorderTopWidth: var(--pf-t--global--border--width--divider--default); 
+  --#{$data-list}--sm--BorderTopWidth: var(--pf-t--global--border--width--divider--default);
   --#{$data-list}--sm--BorderTopColor: var(--pf-t--global--border--color--default);
   --#{$data-list}--MarginLeft: var(--pf-t--global--spacer--md);
 

package/components/DatePicker/date-picker.css

@@ -1,5 +1,4 @@
-:where(:root),
-:where(.pf-v6-c-date-picker) {
+:where(:root, .pf-v6-c-date-picker) {
   --pf-v6-c-date-picker--m-top__calendar--Top: 0;
   --pf-v6-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-t--global--spacer--xs));
   --pf-v6-c-date-picker__helper-text--MarginTop: var(--pf-t--global--spacer--sm);

package/components/DatePicker/date-picker.scss

@@ -1,7 +1,6 @@
-// @debug $date-picker; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:where(:root),
-:where(.#{$date-picker}) {
+:where(:root, .#{$date-picker}) {
   --#{$date-picker}--m-top__calendar--Top: 0;
   --#{$date-picker}--m-top__calendar--TranslateY: calc(-100% - var(--pf-t--global--spacer--xs));
   --#{$date-picker}__helper-text--MarginTop: var(--pf-t--global--spacer--sm);

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

@@ -1,3 +1,5 @@
+@use '../../sass-utilities' as *;
+
 $pf-v6-c-description-list-order--breakpoint-map: build-breakpoint-map();
 $pf-v6-c-description-list-order--limit: 12;
 

package/components/DescriptionList/description-list.css

@@ -1,4 +1,4 @@
-:where(:root), :where(.pf-v6-c-description-list) {
+:where(:root, .pf-v6-c-description-list) {
   --pf-v6-c-description-list--RowGap: var(--pf-t--global--spacer--lg);
   --pf-v6-c-description-list--ColumnGap: var(--pf-t--global--spacer--lg);
   --pf-v6-c-description-list--GridTemplateColumns--count: 1;
@@ -45,32 +45,32 @@
   --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width);
 }
 @media screen and (min-width: 576px) {
-  :where(:root), :where(.pf-v6-c-description-list) {
+  :where(:root, .pf-v6-c-description-list) {
     --pf-v6-c-description-list__term--Display: var(--pf-v6-c-description-list__term--sm--Display);
   }
 }
 @media (min-width: 576px) {
-  :where(:root), :where(.pf-v6-c-description-list) {
+  :where(:root, .pf-v6-c-description-list) {
     --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width));
   }
 }
 @media (min-width: 768px) {
-  :where(:root), :where(.pf-v6-c-description-list) {
+  :where(:root, .pf-v6-c-description-list) {
     --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-md, var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width)));
   }
 }
 @media (min-width: 992px) {
-  :where(:root), :where(.pf-v6-c-description-list) {
+  :where(:root, .pf-v6-c-description-list) {
     --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v6-c-description-list--m-horizontal__term--width-on-md, var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width))));
   }
 }
 @media (min-width: 1200px) {
-  :where(:root), :where(.pf-v6-c-description-list) {
+  :where(:root, .pf-v6-c-description-list) {
     --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-xl, var(--pf-v6-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v6-c-description-list--m-horizontal__term--width-on-md, var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width)))));
   }
 }
 @media (min-width: 1450px) {
-  :where(:root), :where(.pf-v6-c-description-list) {
+  :where(:root, .pf-v6-c-description-list) {
     --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-2xl, var(--pf-v6-c-description-list--m-horizontal__term--width-on-xl, var(--pf-v6-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v6-c-description-list--m-horizontal__term--width-on-md, var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width))))));
   }
 }

package/components/DescriptionList/description-list.scss

@@ -1,7 +1,8 @@
-// @debug $data-list; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
+
 $pf-v6-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 
-:where(:root), :where(.#{$description-list}) {
+:where(:root, .#{$description-list}) {
   --#{$description-list}--RowGap: var(--pf-t--global--spacer--lg);
   --#{$description-list}--ColumnGap: var(--pf-t--global--spacer--lg);
   --#{$description-list}--GridTemplateColumns--count: 1;
@@ -67,9 +68,9 @@ $pf-v6-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
   @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} { 
+.#{$description-list} {
   display: grid;
-  grid-template-columns: repeat(var(--#{$description-list}--GridTemplateColumns--count), var(--#{$description-list}--GridTemplateColumns--width));  
+  grid-template-columns: repeat(var(--#{$description-list}--GridTemplateColumns--count), var(--#{$description-list}--GridTemplateColumns--width));
   row-gap: var(--#{$description-list}--RowGap);
   column-gap: var(--#{$description-list}--ColumnGap);
   align-items: baseline;

package/components/Divider/divider.css

@@ -1,5 +1,4 @@
-:root,
-:where(.pf-v6-c-divider) {
+:where(:root, .pf-v6-c-divider) {
   --pf-v6-c-divider--Display: flex;
   --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
   --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);

package/components/Divider/divider.scss

@@ -1,4 +1,5 @@
-// @debug $divider; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
+
 $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");
 
@@ -16,8 +17,7 @@ $pf-v6-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "
   height: inherit;
 }
 
-:root,
-:where(.#{$divider}) {
+:where(:root, .#{$divider}) {
   // * Divider
   --#{$divider}--Display: flex;
   --#{$divider}--Color: var(--pf-t--global--border--color--default);

package/components/DragDrop/drag-drop.css

@@ -1,4 +1,4 @@
-:where(:root), :where(.pf-v6-c-draggable) {
+:where(:root, .pf-v6-c-draggable) {
   --pf-v6-c-draggable--Cursor: auto;
   --pf-v6-c-draggable--m-dragging--Cursor: grabbing;
   --pf-v6-c-draggable--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -34,7 +34,7 @@
   --pf-v6-c-draggable--m-dragging--after--BorderColor: var(--pf-v6-c-draggable--m-drag-outside--after--BorderColor);
 }
 
-:where(:root), :where(.pf-v6-c-droppable) {
+:where(:root, .pf-v6-c-droppable) {
   --pf-v6-c-droppable--before--BackgroundColor: transparent;
   --pf-v6-c-droppable--before--Opacity: 0;
   --pf-v6-c-droppable--after--BorderWidth: 0;

package/components/DragDrop/drag-drop.scss

@@ -1,6 +1,6 @@
-// @debug $draggable; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:where(:root), :where(.#{$draggable}) {
+:where(:root, .#{$draggable}) {
   --#{$draggable}--Cursor: auto;
   --#{$draggable}--m-dragging--Cursor: grabbing;
   --#{$draggable}--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -40,7 +40,7 @@
   }
 }
 
-:where(:root), :where(.#{$droppable}) {
+:where(:root, .#{$droppable}) {
   --#{$droppable}--before--BackgroundColor: transparent;
   --#{$droppable}--before--Opacity: 0;
   --#{$droppable}--after--BorderWidth: 0;