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

package/components/Switch/switch.scss

@@ -1,7 +1,6 @@
-// @debug $switch; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root,
-.#{$switch} {
+:where(:root, .#{$switch}) {
   // Switch - the vars for this file don't follow our normal order so that the IE11 script can convert the vars correctly
   --#{$switch}--FontSize: var(--pf-t--global--font--size--sm);
   --#{$switch}--ColumnGap: var(--pf-t--global--spacer--sm);

package/components/TabContent/tab-content.css

@@ -1,5 +1,4 @@
-:root,
-.pf-v6-c-tab-content {
+:where(:root, .pf-v6-c-tab-content) {
   --pf-v6-c-tab-content__body--PaddingTop: 0;
   --pf-v6-c-tab-content__body--PaddingRight: 0;
   --pf-v6-c-tab-content__body--PaddingBottom: 0;

package/components/TabContent/tab-content.scss

@@ -1,6 +1,6 @@
-// @debug $tab-content; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-:root,
-.#{$tab-content} {
+@use '../../sass-utilities' as *;
+
+:where(:root, .#{$tab-content}) {
   --#{$tab-content}__body--PaddingTop: 0;
   --#{$tab-content}__body--PaddingRight: 0;
   --#{$tab-content}__body--PaddingBottom: 0;

package/components/Table/table-grid.scss

@@ -1,3 +1,5 @@
+@use '../../sass-utilities' as *;
+
 // stylelint-disable
 @mixin pf-mobile-layout {
   .pf-m-grid.#{$table} {

package/components/Table/table-scrollable.css

@@ -1,5 +1,4 @@
-:where(:root),
-:where(.pf-v6-c-table) {
+:where(:root, .pf-v6-c-table) {
   --pf-v6-c-table__sticky-cell--MinWidth--base: 8.75rem;
   --pf-v6-c-table__sticky-cell--MinWidth: var(--pf-v6-c-table__sticky-cell--MinWidth--base);
   --pf-v6-c-table__sticky-cell--ZIndex: var(--pf-t--global--z-index--xs);

package/components/Table/table-scrollable.scss

@@ -1,6 +1,7 @@
+@use '../../sass-utilities' as *;
+
 // * Table scrollable
-:where(:root),
-:where(.#{$table}) {
+:where(:root, .#{$table}) {
   --#{$table}__sticky-cell--MinWidth--base: #{pf-size-prem(140px)};
   --#{$table}__sticky-cell--MinWidth: var(--#{$table}__sticky-cell--MinWidth--base);
   --#{$table}__sticky-cell--ZIndex: var(--pf-t--global--z-index--xs);
@@ -16,7 +17,6 @@
   --#{$table}--m-sticky-header__sticky-cell--ZIndex: calc(var(--#{$table}__sticky-cell--ZIndex) + 1);
 }
 
-
 // - Table sticky cell
 .#{$table} .#{$table}__sticky-cell {
   position: sticky;

package/components/Table/table-tree-view.css

@@ -1,5 +1,4 @@
-:where(:root),
-:where(.pf-v6-c-table) {
+:where(:root, .pf-v6-c-table) {
   --pf-v6-c-table__tree-view-main--indent--base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-v6-c-table__tree-view-icon--MinWidth));
   --pf-v6-c-table__tree-view-main--nested-indent--base: calc(var(--pf-v6-c-table__tree-view-main--indent--base) - var(--pf-t--global--spacer--md));
   --pf-v6-c-table__tree-view-main--c-button--MarginRight: var(--pf-t--global--spacer--sm);

package/components/Table/table-tree-view.scss

@@ -1,8 +1,9 @@
+@use '../../sass-utilities' as *;
+
 $pf-v6-c-tree-view--MaxDepth: 10;
 
 // * Table tree view
-:where(:root),
-:where(.#{$table}) {
+:where(:root, .#{$table}) {
   --#{$table}__tree-view-main--indent--base: calc(var(--pf-t--global--spacer--md) * 2 + var(--#{$table}__tree-view-icon--MinWidth)); // based off of the expected width of the toggle button
   --#{$table}__tree-view-main--nested-indent--base: calc(var(--#{$table}__tree-view-main--indent--base) - var(--pf-t--global--spacer--md)); // nested spacing that removes the toggle button's left padding, so the icon aligns with text on the node above it
 

package/components/Table/table.css

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

package/components/Table/table.scss

@@ -1,8 +1,9 @@
+@use '../../sass-utilities' as *;
+
 // TODO: clean up unused variables
 // TODO: update grouping comments to // * Table {element}
 
-:where(:root),
-:where(.#{$table}) {
+:where(:root, .#{$table}) {
   --#{$table}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$table}--BorderColor: var(--pf-t--global--border--color--default);
   --#{$table}--border-width--base: var(--pf-t--global--border--width--divider--default);

package/components/Tabs/tabs.css

@@ -1,5 +1,4 @@
-:where(:root),
-:where(.pf-v6-c-tabs) {
+:where(:root, .pf-v6-c-tabs) {
   --pf-v6-c-tabs--inset: 0;
   --pf-v6-c-tabs--Width: auto;
   --pf-v6-c-tabs--before--BorderColor: var(--pf-t--global--border--color--default);

package/components/Tabs/tabs.scss

@@ -1,9 +1,9 @@
-// @debug $tabs; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
+
 $pf-v6-c-tabs--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
 
-:where(:root),
-:where(.#{$tabs}) {
+:where(:root, .#{$tabs}) {
   --#{$tabs}--inset: 0;
   --#{$tabs}--Width: auto;
   --#{$tabs}--before--BorderColor: var(--pf-t--global--border--color--default);
@@ -195,7 +195,7 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
     .#{$tabs}__list {
       flex-basis: 100%;
     }
-    
+
     .#{$tabs}__item {
       flex-grow: 1;
 
@@ -592,7 +592,7 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   & {
     --#{$tabs}__link--after--BorderBottomWidth: var(--#{$tabs}__link--after--BorderWidth); // Set default border target
   }
-  
+
   display: flex;
   flex: 1;
   column-gap: var(--#{$tabs}__link--ColumnGap);
@@ -606,7 +606,7 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   text-decoration: none;
   background-color: var(--#{$tabs}__link--BackgroundColor);
   border-radius: var(--#{$tabs}__link--BorderRadius);
-  
+
   @at-root .#{$tabs}__item.pf-m-action,
   & {
     &::before {
@@ -707,7 +707,7 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
   padding-inline-end: var(--#{$tabs}__scroll-button--PaddingInlineEnd);
   opacity: 0;
   transition: margin var(--#{$tabs}__scroll-button--TransitionDuration--margin), transform var(--#{$tabs}__scroll-button--TransitionDuration--transform), opacity var(--#{$tabs}__scroll-button--TransitionDuration--opacity);
-  
+
     &::before {
     border-color: var(--#{$tabs}__scroll-button--before--BorderColor);
     border-block-start-width: 0;

package/components/TextInputGroup/text-input-group.css

@@ -1,5 +1,4 @@
-:where(:root),
-:where(.pf-v6-c-text-input-group) {
+:where(:root, .pf-v6-c-text-input-group) {
   --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
   --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);

package/components/TextInputGroup/text-input-group.scss

@@ -1,6 +1,6 @@
-// @debug $text-input-group; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-:where(:root),
-:where(.#{$text-input-group}) {
+@use '../../sass-utilities' as *;
+
+:where(:root, .#{$text-input-group}) {
   --#{$text-input-group}--BackgroundColor: var(--pf-t--global--background--color--control--default);
   --#{$text-input-group}--BorderColor: var(--pf-t--global--border--color--default);
   --#{$text-input-group}--BorderWidth: var(--pf-t--global--border--width--control--default);
@@ -53,7 +53,7 @@
   color: var(--#{$text-input-group}--Color, inherit);
   background-color: var(--#{$text-input-group}--BackgroundColor);
   border-radius: var(--#{$text-input-group}--BorderRadius);
-  
+
   &::before {
     position: absolute;
     inset: 0;

package/components/Tile/tile.css

@@ -1,5 +1,4 @@
-:where(:root),
-:where(.pf-v6-c-tile) {
+:where(:root, .pf-v6-c-tile) {
   --pf-v6-c-tile--PaddingTop: var(--pf-t--global--spacer--lg);
   --pf-v6-c-tile--PaddingRight: var(--pf-t--global--spacer--lg);
   --pf-v6-c-tile--PaddingBottom: var(--pf-t--global--spacer--lg);

package/components/Tile/tile.scss

@@ -1,7 +1,6 @@
-// @debug $tile; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:where(:root),
-:where(.#{$tile}) {
+:where(:root, .#{$tile}) {
   --#{$tile}--PaddingTop: var(--pf-t--global--spacer--lg);
   --#{$tile}--PaddingRight: var(--pf-t--global--spacer--lg);
   --#{$tile}--PaddingBottom: var(--pf-t--global--spacer--lg);

package/components/Timestamp/timestamp.css

@@ -1,4 +1,4 @@
-:root, .pf-v6-c-timestamp {
+:where(:root, .pf-v6-c-timestamp) {
   --pf-v6-c-timestamp--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-timestamp--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-timestamp--OutlineOffset: 0.1875rem;

package/components/Timestamp/timestamp.scss

@@ -1,5 +1,6 @@
-// @debug $timestamp; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-:root, .#{$timestamp} {
+@use '../../sass-utilities' as *;
+
+:where(:root, .#{$timestamp}) {
   --#{$timestamp}--FontSize: var(--pf-t--global--font--size--body--sm);
   --#{$timestamp}--Color: var(--pf-t--global--text--color--subtle);
   --#{$timestamp}--OutlineOffset: #{pf-size-prem(3px)};
@@ -16,7 +17,7 @@
   --#{$timestamp}--m-help-text--focus--TextDecorationColor: var(--pf-t--global--text--color--regular);
 }
 
-.#{$timestamp} { 
+.#{$timestamp} {
   display: inline-block;
   font-size: var(--#{$timestamp}--FontSize);
   color: var(--#{$timestamp}--Color);

package/components/Title/title.css

@@ -1,4 +1,4 @@
-:root {
+:where(:root, .pf-v6-c-title) {
   --pf-v6-c-title--FontFamily: var(--pf-t--global--font--family--heading);
   --pf-v6-c-title--m-4xl--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-title--m-4xl--FontSize: var(--pf-t--global--font--size--heading--2xl);

package/components/Title/title.scss

@@ -1,6 +1,6 @@
-// @debug $title; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root {
+:where(:root, .#{$title}) {
   --#{$title}--FontFamily: var(--pf-t--global--font--family--heading);
 
   // SIZE modifiers (note that the modifier names match PF5 sizes but use tokens that don't match in name
@@ -34,7 +34,7 @@
   --#{$title}--m-md--FontSize: var(--pf-t--global--font--size--heading--xs);
   --#{$title}--m-md--FontWeight: var(--pf-t--global--font--weight--heading);
 
-  // HEADING modifiers 
+  // HEADING modifiers
   // h1
   --#{$title}--m-h1--LineHeight: var(--pf-t--global--font--line-height--heading);
   --#{$title}--m-h1--FontSize: var(--pf-t--global--font--size--heading--h1);

package/components/ToggleGroup/toggle-group.css

@@ -1,5 +1,4 @@
-:where(:root),
-:where(.pf-v6-c-toggle-group) {
+:where(:root, .pf-v6-c-toggle-group) {
   --pf-v6-c-toggle-group__button--PaddingTop: var(--pf-t--global--spacer--sm);
   --pf-v6-c-toggle-group__button--PaddingRight: var(--pf-t--global--spacer--md);
   --pf-v6-c-toggle-group__button--PaddingBottom: var(--pf-t--global--spacer--sm);

package/components/ToggleGroup/toggle-group.scss

@@ -1,7 +1,6 @@
-// @debug $toggle-group; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:where(:root),
-:where(.#{$toggle-group}) {
+:where(:root, .#{$toggle-group}) {
   // button
   --#{$toggle-group}__button--PaddingTop: var(--pf-t--global--spacer--sm);
   --#{$toggle-group}__button--PaddingRight: var(--pf-t--global--spacer--md);
@@ -149,7 +148,7 @@
 .#{$toggle-group}__item:has(.pf-m-selected) + .#{$toggle-group}__item:has(.pf-m-selected) {
   --#{$toggle-group}__button--before--BorderInlineStartColor: var(--#{$toggle-group}__button--m-selected-selected--before--BorderInlineStartColor);
 }
-    
+
 // For consecutive disabled items, turn the left border back to what it was
 .#{$toggle-group}__item:has(:disabled, .pf-m-disabled) + .#{$toggle-group}__item:has(:disabled, .pf-m-disabled) {
   --#{$toggle-group}__button--before--BorderInlineStartColor: var(--#{$toggle-group}__button--disabled-disabled--before--BorderInlineStartColor);

package/components/Toolbar/toolbar.css

@@ -1,5 +1,4 @@
-:where(:root),
-:where(.pf-v6-c-toolbar) {
+:where(:root, .pf-v6-c-toolbar) {
   --pf-v6-c-toolbar--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-toolbar--ColumnGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-toolbar--PaddingBlock: var(--pf-t--global--spacer--md);

package/components/Toolbar/toolbar.scss

@@ -1,3 +1,5 @@
+@use '../../sass-utilities' as *;
+
 $pf-v6-c-toolbar--spacer-map: build-spacer-map();
 $pf-v6-c-toolbar--inset-map: build-spacer-map();
 $pf-v6-c-toolbar--align-items--alignments: ('stretch', 'baseline', 'start', 'center', 'end');
@@ -8,8 +10,7 @@ $pf-v6--include-toolbar-breakpoints: true !default;
   $pf-v6-c-toolbar--breakpoint-map: build-breakpoint-map('base', 'sm', 'md', 'lg', 'xl', '2xl');
 }
 
-:where(:root),
-:where(.#{$toolbar}) {
+:where(:root, .#{$toolbar}) {
   --#{$toolbar}--RowGap: var(--pf-t--global--spacer--sm);
   --#{$toolbar}--ColumnGap: var(--pf-t--global--spacer--md);
   --#{$toolbar}--PaddingBlock: var(--pf-t--global--spacer--md);

package/components/Tooltip/tooltip.css

@@ -1,4 +1,4 @@
-:root {
+:where(:root, .pf-v6-c-tooltip) {
   --pf-v6-c-tooltip--MaxWidth: 18.75rem;
   --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
   --pf-v6-c-tooltip__content--PaddingTop: var(--pf-t--global--spacer--sm);

package/components/Tooltip/tooltip.scss

@@ -1,9 +1,10 @@
-// @debug $tooltip; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-:root {
+@use '../../sass-utilities' as *;
+
+:where(:root, .#{$tooltip}) {
   // Component variables
   --#{$tooltip}--MaxWidth: #{pf-size-prem(300px)};
   --#{$tooltip}--BoxShadow: var(--pf-t--global--box-shadow--md);
-  
+
   // Content variables
   --#{$tooltip}__content--PaddingTop: var(--pf-t--global--spacer--sm);
   --#{$tooltip}__content--PaddingRight: var(--pf-t--global--spacer--md);
@@ -13,7 +14,7 @@
   --#{$tooltip}__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
   --#{$tooltip}__content--FontSize: var(--pf-t--global--font--size--body--sm);
   --#{$tooltip}__content--BorderRadius: var(--pf-t--global--border--radius--small);
-  
+
   // Arrow variables
   --#{$tooltip}__arrow--Width: #{pf-size-prem(15px)};
   --#{$tooltip}__arrow--Height: #{pf-size-prem(15px)};

package/components/TreeView/tree-view.css

@@ -1,5 +1,4 @@
-:where(:root),
-:where(.pf-v6-c-tree-view) {
+:where(:root, .pf-v6-c-tree-view) {
   --pf-v6-c-tree-view__node--indent--base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-v6-c-tree-view__node-toggle-icon--MinWidth));
   --pf-v6-c-tree-view__node--nested-indent--base: calc(var(--pf-v6-c-tree-view__node--indent--base) - var(--pf-t--global--spacer--md));
   --pf-v6-c-tree-view__content--BorderRadius: var(--pf-t--global--border--radius--small);

package/components/TreeView/tree-view.scss

@@ -1,8 +1,8 @@
-// @debug $tree-view; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
+
 $pf-v6-c-tree-view--MaxNesting: 10 !default;
 
-:where(:root),
-:where(.#{$tree-view}) {
+:where(:root, .#{$tree-view}) {
   // Node base
   --#{$tree-view}__node--indent--base: calc(var(--pf-t--global--spacer--md) * 2 + var(--#{$tree-view}__node-toggle-icon--MinWidth)); // based off of the expected width of the toggle button
   --#{$tree-view}__node--nested-indent--base: calc(var(--#{$tree-view}__node--indent--base) - var(--pf-t--global--spacer--md)); // nested spacing that removes the toggle button's left padding, so the icon aligns with text on the node above it

package/components/Truncate/truncate.css

@@ -1,5 +1,4 @@
-:root,
-.pf-v6-c-truncate {
+:where(:root, .pf-v6-c-truncate) {
   --pf-v6-c-truncate--MinWidth: 12ch;
   --pf-v6-c-truncate__start--MinWidth: 6ch;
 }

package/components/Truncate/truncate.scss

@@ -1,7 +1,6 @@
-// @debug $truncate; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root,
-.#{$truncate} {
+:where(:root, .#{$truncate}) {
   --#{$truncate}--MinWidth: 12ch;
   --#{$truncate}__start--MinWidth: 6ch;
 }

package/components/Wizard/wizard.css

@@ -1,5 +1,4 @@
-:where(:root),
-:where(.pf-v6-c-wizard) {
+:where(:root, .pf-v6-c-wizard) {
   --pf-v6-c-wizard--Height: 100%;
   --pf-v6-c-modal-box--c-wizard--FlexBasis: 47.625rem;
   --pf-v6-c-wizard__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -105,8 +104,7 @@
   --pf-v6-c-wizard__footer-cancel--MarginLeft: calc(var(--pf-t--global--spacer--2xl) - var(--pf-v6-c-wizard__footer--child--MarginRight));
 }
 @media screen and (min-width: 992px) {
-  :where(:root),
-  :where(.pf-v6-c-wizard) {
+  :where(:root, .pf-v6-c-wizard) {
     --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
     --pf-v6-c-wizard__nav--BoxShadow: none;
   }

package/components/Wizard/wizard.scss

@@ -1,7 +1,6 @@
-// @debug $wizard; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:where(:root),
-:where(.#{$wizard}) {
+:where(:root, .#{$wizard}) {
   --#{$wizard}--Height: 100%;
   --#{$modal-box}--c-wizard--FlexBasis: #{pf-size-prem(762px)}; // this is a specific height from design for the wizard in a modal