@patternfly/patternfly 6.0.0-alpha.226 → 6.0.0-alpha.228

package/components/Title/title.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-title) {
+: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 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$title}) {
+@include pf-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

package/components/ToggleGroup/toggle-group.css

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

package/components/ToggleGroup/toggle-group.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$toggle-group}) {
+@include pf-root($toggle-group) {
   // button
   --#{$toggle-group}__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --#{$toggle-group}__button--PaddingInlineEnd: var(--pf-t--global--spacer--md);

package/components/Toolbar/toolbar.css

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

package/components/Toolbar/toolbar.scss

@@ -10,7 +10,7 @@ $pf-v6--include-toolbar-breakpoints: true !default;
   $pf-v6-c-toolbar--breakpoint-map: build-breakpoint-map();
 }
 
-:where(:root, .#{$toolbar}) {
+@include pf-root($toolbar) {
   --#{$toolbar}--RowGap: var(--pf-t--global--spacer--md);
   --#{$toolbar}--PaddingBlockStart: 0;
   --#{$toolbar}--PaddingBlockEnd: var(--pf-t--global--spacer--md);

package/components/Tooltip/tooltip.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-tooltip) {
+: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--PaddingBlockStart: var(--pf-t--global--spacer--sm);

package/components/Tooltip/tooltip.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$tooltip}) {
+@include pf-root($tooltip) {
   // Component variables
   --#{$tooltip}--MaxWidth: #{pf-size-prem(300px)};
   --#{$tooltip}--BoxShadow: var(--pf-t--global--box-shadow--md);

package/components/TreeView/tree-view.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-tree-view) {
+: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

@@ -2,7 +2,7 @@
 
 $pf-v6-c-tree-view--MaxNesting: 10 !default;
 
-:where(:root, .#{$tree-view}) {
+@include pf-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,4 +1,5 @@
-:where(:root, .pf-v6-c-truncate) {
+:root,
+.pf-v6-c-truncate {
   --pf-v6-c-truncate--MinWidth: 6ch;
   --pf-v6-c-truncate__start--MinWidth: 6ch;
 }

package/components/Truncate/truncate.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$truncate}) {
+@include pf-root($truncate) {
   --#{$truncate}--MinWidth: 6ch;
   --#{$truncate}__start--MinWidth: 6ch;
 }

package/components/Wizard/wizard.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-wizard) {
+:root,
+.pf-v6-c-wizard {
   --pf-v6-c-wizard--Height: initial;
   --pf-v6-c-wizard--Height--base: 100%;
   --pf-v6-c-modal-box--c-wizard--Height--base: 47.625rem;
@@ -113,7 +114,8 @@
   --pf-v6-c-wizard__footer--BorderBlockStartColor: var(--pf-t--global--border--color--default);
 }
 @media screen and (min-width: 62rem) {
-  :where(:root, .pf-v6-c-wizard) {
+  :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,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root, .#{$wizard}) {
+@include pf-root($wizard) {
   --#{$wizard}--Height: initial;
   --#{$wizard}--Height--base: 100%;
   --#{$modal-box}--c-wizard--Height--base: #{pf-size-prem(762px)}; // this is a specific height from design for the wizard in a modal