@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2

package/sass-utilities/{layout-namespaces.scss → namespaces-layouts.scss}

@@ -1,3 +1,6 @@
+@use '../sass-utilities/init.scss' as *;
+@use '../sass-utilities/scss-variables.scss' as *;
+
 // Globally scoped component variables
 // Bullseye
 // stylelint-disable scss/dollar-variable-pattern
@@ -20,5 +23,4 @@ $split: #{$pf-prefix} + 'l-split';
 
 // Stack
 $stack: #{$pf-prefix} + 'l-stack';
-
 // stylelint-enable

package/sass-utilities/scss-variables.scss

@@ -1,261 +1,49 @@
-@import './init'; // initialize versioning
-
 // This file is for initial variable values.
 // All variables should have a valid css value,
 // and use !default so they can be overwritten.
 
-// `$pf-v5-global--concept--PropiertyCamelCase--modifier--state`]
+// `$pf-v6-global--concept--PropiertyCamelCase--modifier--state`]
 
 // Quickly modify global styling by enabling or disabling optional features.
-$pf-v5-global--enable-reset: true !default;
-$pf-v5-global--enable-normalize: true !default;
-$pf-v5-global--enable-fontawesome-cdn: false !default;
-$pf-v5-global--disable-fontawesome: false !default;
+$pf-v6-global--enable-reset: true !default;
+$pf-v6-global--enable-normalize: true !default;
+$pf-v6-global--enable-fontawesome-cdn: false !default;
+$pf-v6-global--disable-fontawesome: false !default;
 
 // Patternfly uses the default root size of the browser, it assumes a 16px base
 // since most browser root size is 16. This variables is just to make the
-// transformation from px to rem.730033
-$pf-v5-global--font-size-root: 16 !default; // for fonts
-$pf-v5-global--space-size-root: 16 !default; // for spaces
-
-// Colors
-// Background color
-$pf-v5-global--BackgroundColor--100: $pf-v5-color-white !default;
-$pf-v5-global--BackgroundColor--150: $pf-v5-color-black-100 !default;
-$pf-v5-global--BackgroundColor--200: $pf-v5-color-black-200 !default;
-
-// do not use - background colors for exceptions and defining theme
-// light theme
-$pf-v5-global--BackgroundColor--light-100:     $pf-v5-color-white !default;
-$pf-v5-global--BackgroundColor--light-200:     $pf-v5-color-black-100 !default;
-$pf-v5-global--BackgroundColor--light-300:     $pf-v5-color-black-200 !default;
-
-// dark theme
-$pf-v5-global--BackgroundColor--dark-100:      $pf-v5-color-black-900 !default;
-$pf-v5-global--BackgroundColor--dark-200:      $pf-v5-color-black-800 !default;
-$pf-v5-global--BackgroundColor--dark-300:      $pf-v5-color-black-850 !default;
-$pf-v5-global--BackgroundColor--dark-400:      $pf-v5-color-black-700 !default;
-$pf-v5-global--BackgroundColor--dark-transparent-100:  rgba($pf-v5-color-black-1000, .62) !default;
-$pf-v5-global--BackgroundColor--dark-transparent-200:  rgba($pf-v5-color-black-1000, .32) !default;
-
-// Text color
-$pf-v5-global--Color--100: $pf-v5-color-black-900 !default;
-$pf-v5-global--Color--200: $pf-v5-color-black-600 !default;
-$pf-v5-global--Color--300: $pf-v5-color-black-800 !default;
-$pf-v5-global--Color--400: $pf-v5-color-black-500 !default;
-
-// do not use - text colors for exceptions and defining theme
-// light theme
-$pf-v5-global--Color--light-100:      $pf-v5-color-white !default;
-$pf-v5-global--Color--light-200:      $pf-v5-color-black-200 !default;
-$pf-v5-global--Color--light-300:      $pf-v5-color-black-300 !default;
-
-// dark theme
-$pf-v5-global--Color--dark-100:      $pf-v5-color-black-900 !default;
-$pf-v5-global--Color--dark-200:      $pf-v5-color-black-600 !default;
-
-// States color
-// active
-$pf-v5-global--active-color--100:   $pf-v5-color-blue-400 !default;
-$pf-v5-global--active-color--200:   $pf-v5-color-blue-100 !default;
-$pf-v5-global--active-color--300:   $pf-v5-color-blue-300 !default;
-$pf-v5-global--active-color--400:   $pf-v5-color-blue-200 !default;
-
-// disabled
-$pf-v5-global--disabled-color--100: $pf-v5-color-black-600 !default;
-$pf-v5-global--disabled-color--200: $pf-v5-color-black-300 !default;
-$pf-v5-global--disabled-color--300: $pf-v5-color-black-200 !default;
-
-// Theme color
-$pf-v5-global--primary-color--100:         $pf-v5-color-blue-400 !default;
-$pf-v5-global--primary-color--200:         $pf-v5-color-blue-500 !default;
-$pf-v5-global--secondary-color--100:       $pf-v5-color-black-600 !default;
-$pf-v5-global--custom-color--100:         $pf-v5-color-cyan-200 !default;
-$pf-v5-global--custom-color--200:         $pf-v5-color-cyan-300 !default;
-$pf-v5-global--custom-color--300:         $pf-v5-color-cyan-500 !default;
-$pf-v5-global--success-color--100:         $pf-v5-color-green-500 !default;
-$pf-v5-global--success-color--200:         $pf-v5-color-green-600 !default;
-$pf-v5-global--info-color--100:            $pf-v5-color-blue-300 !default;
-$pf-v5-global--info-color--200:            $pf-v5-color-blue-600 !default;
-$pf-v5-global--warning-color--100:         $pf-v5-color-gold-400 !default;
-$pf-v5-global--warning-color--200:         $pf-v5-color-gold-600 !default;
-$pf-v5-global--danger-color--100:          $pf-v5-color-red-100 !default;
-$pf-v5-global--danger-color--200:          $pf-v5-color-red-200 !default;
-$pf-v5-global--danger-color--300:          $pf-v5-color-red-400 !default;
-
-// do not use - theme colors for exceptions and defining theme
-$pf-v5-global--primary-color--light-100:   $pf-v5-color-blue-200 !default;
-$pf-v5-global--primary-color--dark-100:    $pf-v5-color-blue-400 !default;
-
-// Shadows
-// small
-$pf-v5-global--BoxShadow--sm: 0 pf-size-prem(1px) pf-size-prem(2px) 0 rgba($pf-v5-color-black-1000, .12), 0 0 pf-size-prem(2px) 0 rgba($pf-v5-color-black-1000, .06) !default;
-$pf-v5-global--BoxShadow--sm-top: 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v5-color-black-1000, .16) !default;
-$pf-v5-global--BoxShadow--sm-right: pf-size-prem(2px) 0 pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v5-color-black-1000, .16) !default;
-$pf-v5-global--BoxShadow--sm-bottom: 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v5-color-black-1000, .16) !default;
-$pf-v5-global--BoxShadow--sm-left: pf-size-prem(-2px) 0 pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-v5-color-black-1000, .16) !default;
-
-// medium
-$pf-v5-global--BoxShadow--md: 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-v5-color-black-1000, .12), 0 0 pf-size-prem(4px) 0 rgba($pf-v5-color-black-1000, .06) !default;
-$pf-v5-global--BoxShadow--md-top: 0 pf-size-prem(-8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-v5-color-black-1000, .18) !default;
-$pf-v5-global--BoxShadow--md-right: pf-size-prem(8px) 0 pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-v5-color-black-1000, .18) !default;
-$pf-v5-global--BoxShadow--md-bottom: 0 pf-size-prem(8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-v5-color-black-1000, .18) !default;
-$pf-v5-global--BoxShadow--md-left: pf-size-prem(-8px) 0 pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-v5-color-black-1000, .18) !default;
-
-// large
-$pf-v5-global--BoxShadow--lg: 0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba($pf-v5-color-black-1000, .16), 0 0 pf-size-prem(6px) 0 rgba($pf-v5-color-black-1000, .08) !default;
-$pf-v5-global--BoxShadow--lg-top: 0 pf-size-prem(-12px) pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-v5-color-black-1000, .18) !default;
-$pf-v5-global--BoxShadow--lg-right: pf-size-prem(12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-v5-color-black-1000, .18) !default;
-$pf-v5-global--BoxShadow--lg-bottom: 0 pf-size-prem(12px) pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-v5-color-black-1000, .18) !default;
-$pf-v5-global--BoxShadow--lg-left: pf-size-prem(-12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-v5-color-black-1000, .18) !default;
-
-// x-large
-$pf-v5-global--BoxShadow--xl: 0 pf-size-prem(16px) pf-size-prem(32px) 0 rgba($pf-v5-color-black-1000, .16), 0 0 pf-size-prem(8px) 0 rgba($pf-v5-color-black-1000, .1) !default;
-$pf-v5-global--BoxShadow--xl-top: 0 pf-size-prem(-16px) pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-v5-color-black-1000, .2) !default;
-$pf-v5-global--BoxShadow--xl-right: pf-size-prem(16px) 0 pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-v5-color-black-1000, .2) !default;
-$pf-v5-global--BoxShadow--xl-bottom: 0 pf-size-prem(16px) pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-v5-color-black-1000, .2) !default;
-$pf-v5-global--BoxShadow--xl-left: pf-size-prem(-16px) 0 pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-v5-color-black-1000, .2) !default;
-
-// inset
-$pf-v5-global--BoxShadow--inset: inset 0 0 pf-size-prem(10) 0 rgba($pf-v5-color-black-1000, .25) !default;
+// transformation from px to rem.
+$pf-v6-global--font-size-root: 16 !default; // for fonts
+$pf-v6-global--space-size-root: 16 !default; // for spaces
 
 // Fontpath
-$pf-v5-global--font-path: "./assets/fonts" !default;
+$pf-v6-global--font-path: "./assets/fonts" !default;
 
 // Iconpath
 // stylelint-disable-next-line scss/dollar-variable-pattern
 $fa-font-path: "./assets/fonts/webfonts" !default;
 
 // FontIcon path
-$pf-v5-global--fonticon-path: "./assets/pficon" !default;
-
-// Spacers
-$pf-v5-global--spacer--xs: pf-size-prem(4px) !default;     // Orange
-$pf-v5-global--spacer--sm: pf-size-prem(8px) !default;     // Light green
-$pf-v5-global--spacer--md: pf-size-prem(16px) !default;    // Dark green
-$pf-v5-global--spacer--lg: pf-size-prem(24px) !default;    // Dark Blue
-$pf-v5-global--spacer--xl: pf-size-prem(32px) !default;    // Light Blue
-$pf-v5-global--spacer--2xl: pf-size-prem(48px) !default;   // Light Purple
-$pf-v5-global--spacer--3xl: pf-size-prem(64px) !default;   // Dark Purple
-$pf-v5-global--spacer--4xl: pf-size-prem(80px) !default;   // Dark magenta
-
-// Form spacer - only used in forms
-$pf-v5-global--spacer--form-element: pf-size-prem(6px) !default;
-
-// Gutter
-$pf-v5-global--gutter: $pf-v5-global--spacer--md !default;
-$pf-v5-global--gutter--md: $pf-v5-global--spacer--lg !default;
-
-// Z-Index
-$pf-v5-global--ZIndex--xs: 100;
-$pf-v5-global--ZIndex--sm: 200;
-$pf-v5-global--ZIndex--md: 300;
-$pf-v5-global--ZIndex--lg: 400;
-$pf-v5-global--ZIndex--xl: 500;
-$pf-v5-global--ZIndex--2xl: 600;
+$pf-v6-global--fonticon-path: "./assets/pficon" !default;
 
 // Grid breakpoints
-$pf-v5-global--breakpoint--xs: 0 !default;
-$pf-v5-global--breakpoint--sm: 576px !default;
-$pf-v5-global--breakpoint--md: 768px !default;
-$pf-v5-global--breakpoint--lg: 992px !default;
-$pf-v5-global--breakpoint--xl: 1200px !default;
-$pf-v5-global--breakpoint--2xl: 1450px !default;
+// Note that these duplicate and should match breakpoint tokens
+$pf-v6-global--breakpoint--xs: 0 !default;
+$pf-v6-global--breakpoint--sm: 36rem !default; // 576px
+$pf-v6-global--breakpoint--md: 48rem !default; // 768px
+$pf-v6-global--breakpoint--lg: 62rem !default; // 992px
+$pf-v6-global--breakpoint--xl: 75rem !default; // 1200px
+$pf-v6-global--breakpoint--2xl: 90.625rem !default; // 1450px
 
 // Height breakpoints
-$pf-v5-global--height-breakpoint--sm: 0 !default;
-$pf-v5-global--height-breakpoint--md: 40rem !default; // 640px
-$pf-v5-global--height-breakpoint--lg: 48rem !default; // 768px
-$pf-v5-global--height-breakpoint--xl: 60rem !default; // 960px
-$pf-v5-global--height-breakpoint--2xl: 80rem !default; // 1280px
-
-// Borders
-$pf-v5-global--BorderWidth--sm:     1px !default;
-$pf-v5-global--BorderWidth--md:     2px !default;
-$pf-v5-global--BorderWidth--lg:     3px !default;
-$pf-v5-global--BorderWidth--xl:     4px !default;
-$pf-v5-global--BorderColor--100:    $pf-v5-color-black-300 !default;
-$pf-v5-global--BorderColor--200:    $pf-v5-color-black-500 !default;
-$pf-v5-global--BorderColor--300:    $pf-v5-color-black-200 !default;
-$pf-v5-global--BorderColor--dark-100:   $pf-v5-color-black-300 !default;
-$pf-v5-global--BorderColor--light-100:  $pf-v5-color-black-400 !default;
-$pf-v5-global--BorderRadius--sm:        3px !default;
-$pf-v5-global--BorderRadius--lg:        30em !default; // This is a sufficiently large number to ensure in most cases that the ends are evenly rounded.
-
-// Icons
-$pf-v5-global--icon--Color--light: $pf-v5-color-black-600 !default; // actionable icon color - eg, plain button default color
-$pf-v5-global--icon--Color--dark: $pf-v5-color-black-900 !default; // static icon color and hover/focus color for actionable icons - eg, plain button hover color
-$pf-v5-global--icon--Color--light--light: $pf-v5-color-black-200 !default; // "lighter" icon color for actionable icons - for use in pf-[v]-t-dark
-$pf-v5-global--icon--Color--dark--light: $pf-v5-color-white !default; // "lighter" icon color for static icons - for use in pf-[v]-t-dark
-$pf-v5-global--icon--Color--light--dark: $pf-v5-color-black-600 !default; // "darker" icon color for actionable icons - for use in pf-[v]-t-light
-$pf-v5-global--icon--Color--dark--dark: $pf-v5-color-black-900 !default; // "darker" icon color for static icons - for use in pf-[v]-t-light
-$pf-v5-global--icon--FontSize--sm: pf-font-prem(12px) !default;
-$pf-v5-global--icon--FontSize--md: pf-font-prem(16px) !default;
-$pf-v5-global--icon--FontSize--lg: pf-font-prem(24px) !default;
-$pf-v5-global--icon--FontSize--xl: pf-font-prem(54px) !default;
-
-// Fonts
-// Font family
-// stylelint-disable value-keyword-case
-$pf-v5-global--FontFamily--text: '"RedHatText", helvetica, arial, sans-serif';
-$pf-v5-global--FontFamily--heading: '"RedHatDisplay", helvetica, arial, sans-serif';
-$pf-v5-global--FontFamily--monospace: '"RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace';
-$pf-v5-global--FontFamily--text--vf: '"RedHatTextVF", "RedHatText", helvetica, arial, sans-serif';
-$pf-v5-global--FontFamily--heading--vf: '"RedHatDisplayVF", "RedHatDisplay", helvetica, arial, sans-serif';
-$pf-v5-global--FontFamily--monospace--vf: '"RedHatMonoVF", "RedHatMono", "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace';
-// stylelint-enable value-keyword-case
-
-// Font size
-$pf-v5-global--FontSize--4xl: pf-font-prem(36px) !default;
-$pf-v5-global--FontSize--3xl: pf-font-prem(28px) !default;
-$pf-v5-global--FontSize--2xl: pf-font-prem(24px) !default;
-$pf-v5-global--FontSize--xl: pf-font-prem(20px) !default;
-$pf-v5-global--FontSize--lg: pf-font-prem(18px) !default;
-$pf-v5-global--FontSize--md: pf-font-prem(16px) !default;
-$pf-v5-global--FontSize--sm: pf-font-prem(14px) !default;
-$pf-v5-global--FontSize--xs: pf-font-prem(12px) !default;
-
-// Font weight
-$pf-v5-global--FontWeight--normal: 400 !default;
-$pf-v5-global--FontWeight--bold: 700 !default;
-
-// Line height
-$pf-v5-global--LineHeight--sm: 1.3 !default;
-$pf-v5-global--LineHeight--md: 1.5 !default;
-
-// Links
-$pf-v5-global--link--Color:                  $pf-v5-global--primary-color--100 !default;
-$pf-v5-global--link--Color--hover:           $pf-v5-global--primary-color--200 !default;
-$pf-v5-global--link--Color--light:           $pf-v5-global--active-color--300 !default;
-$pf-v5-global--link--Color--light--hover:    $pf-v5-global--active-color--400 !default;
-$pf-v5-global--link--Color--dark:            $pf-v5-global--primary-color--100 !default;
-$pf-v5-global--link--Color--dark--hover:     $pf-v5-global--primary-color--200 !default;
-$pf-v5-global--link--Color--visited:         $pf-v5-color-purple-600 !default;
-$pf-v5-global--link--TextDecoration:         none !default;
-$pf-v5-global--link--TextDecoration--hover:  underline !default;
-
-// List
-$pf-v5-global--ListStyle: disc outside !default;
-
-// Transitions
-$pf-v5-global--Transition: all 250ms cubic-bezier(.42, 0, .58, 1);
-$pf-v5-global--TimingFunction: cubic-bezier(.645, .045, .355, 1);
-$pf-v5-global--TransitionDuration: 250ms;
-
-// Arrow size (used for tooltips, popovers, etc.)
-$pf-v5-global--arrow--width: pf-font-prem(15px);
-$pf-v5-global--arrow--width-lg: pf-font-prem(25px);
-
-// A11y
-$pf-v5-global--target-size--MinWidth: 44px !default;
-$pf-v5-global--target-size--MinHeight: 44px !default;
-
-// filters
-// overlay
-// animations
+$pf-v6-global--height-breakpoint--sm: 0 !default;
+$pf-v6-global--height-breakpoint--md: 40rem !default; // 640px
+$pf-v6-global--height-breakpoint--lg: 48rem !default; // 768px
+$pf-v6-global--height-breakpoint--xl: 60rem !default; // 960px
+$pf-v6-global--height-breakpoint--2xl: 80rem !default; // 1280px
 
 // Global breakpoint map - used for @pf-grid-item-modifiers
-$pf-v5-global--breakpoint-map: (
+$pf-v6-global--breakpoint-map: (
   "": null,
   "sm": "-on-sm",
   "md": "-on-md",
@@ -264,8 +52,8 @@ $pf-v5-global--breakpoint-map: (
   "2xl": "-on-2xl"
 );
 
-// Global breakpoint list - used for @pf-v5-utility-builder
-$pf-v5-global--breakpoint-list: (
+// Global breakpoint list - used for @pf-v6-utility-builder
+$pf-v6-global--breakpoint-list: (
   "sm",
   "md",
   "lg",
@@ -273,26 +61,26 @@ $pf-v5-global--breakpoint-list: (
   "2xl"
 );
 
-// Global breakpoint name map - used for %pf-v5-hidden-visible
-$pf-v5-global--breakpoint-name-map: (
-  "sm": $pf-v5-global--breakpoint--sm,
-  "md": $pf-v5-global--breakpoint--md,
-  "lg": $pf-v5-global--breakpoint--lg,
-  "xl": $pf-v5-global--breakpoint--xl,
-  "2xl": $pf-v5-global--breakpoint--2xl
+// Global breakpoint name map - used for %pf-v6-hidden-visible
+$pf-v6-global--breakpoint-name-map: (
+  "sm": $pf-v6-global--breakpoint--sm,
+  "md": $pf-v6-global--breakpoint--md,
+  "lg": $pf-v6-global--breakpoint--lg,
+  "xl": $pf-v6-global--breakpoint--xl,
+  "2xl": $pf-v6-global--breakpoint--2xl
 );
 
-// Global breakpoint name map - used for %pf-v5-hidden-visible
-$pf-v5-global--height-breakpoint-name-map: (
-  "sm": $pf-v5-global--height-breakpoint--sm,
-  "md": $pf-v5-global--height-breakpoint--md,
-  "lg": $pf-v5-global--height-breakpoint--lg,
-  "xl": $pf-v5-global--height-breakpoint--xl,
-  "2xl": $pf-v5-global--height-breakpoint--2xl
+// Global breakpoint name map - used for %pf-v6-hidden-visible
+$pf-v6-global--height-breakpoint-name-map: (
+  "sm": $pf-v6-global--height-breakpoint--sm,
+  "md": $pf-v6-global--height-breakpoint--md,
+  "lg": $pf-v6-global--height-breakpoint--lg,
+  "xl": $pf-v6-global--height-breakpoint--xl,
+  "2xl": $pf-v6-global--height-breakpoint--2xl
 );
 
 // Spacer properties
-$pf-v5-global--spacer-properties-map: (
+$pf-v6-global--spacer-properties-map: (
   "m":  "margin",
   "mt": "margin-block-start",
   "mr": "margin-inline-end",
@@ -310,15 +98,15 @@ $pf-v5-global--spacer-properties-map: (
 );
 
 // Spacer values
-$pf-v5-global--spacer-map: (
+$pf-v6-global--spacer-map: (
   "auto": "auto",
   "0": 0,
-  "xs": "var(--#{$pf-global}--spacer--xs)",
-  "sm": "var(--#{$pf-global}--spacer--sm)",
-  "md": "var(--#{$pf-global}--spacer--md)",
-  "lg": "var(--#{$pf-global}--spacer--lg)",
-  "xl": "var(--#{$pf-global}--spacer--xl)",
-  "2xl": "var(--#{$pf-global}--spacer--2xl)",
-  "3xl": "var(--#{$pf-global}--spacer--3xl)",
-  "4xl": "var(--#{$pf-global}--spacer--4xl)"
+  "xs": "var(--pf-t--global--spacer--xs)",
+  "sm": "var(--pf-t--global--spacer--sm)",
+  "md": "var(--pf-t--global--spacer--md)",
+  "lg": "var(--pf-t--global--spacer--lg)",
+  "xl": "var(--pf-t--global--spacer--xl)",
+  "2xl": "var(--pf-t--global--spacer--2xl)",
+  "3xl": "var(--pf-t--global--spacer--3xl)",
+  "4xl": "var(--pf-t--global--spacer--4xl)"
 );

package/utilities/Accessibility/accessibility.css

@@ -20,7 +20,7 @@
   display: none !important;
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (min-width: 36rem) {
   .pf-v6-u-screen-reader-on-sm {
     position: fixed;
     inset-block-start: 0;
@@ -32,7 +32,7 @@
   }
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (min-width: 36rem) {
   .pf-v6-u-visible-on-sm {
     position: static;
     overflow: visible;
@@ -42,13 +42,13 @@
   }
 }
 
-@media screen and (min-width: 576px) {
+@media screen and (min-width: 36rem) {
   .pf-v6-u-hidden-on-sm {
     display: none !important;
   }
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 48rem) {
   .pf-v6-u-screen-reader-on-md {
     position: fixed;
     inset-block-start: 0;
@@ -60,7 +60,7 @@
   }
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 48rem) {
   .pf-v6-u-visible-on-md {
     position: static;
     overflow: visible;
@@ -70,13 +70,13 @@
   }
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 48rem) {
   .pf-v6-u-hidden-on-md {
     display: none !important;
   }
 }
 
-@media screen and (min-width: 992px) {
+@media screen and (min-width: 62rem) {
   .pf-v6-u-screen-reader-on-lg {
     position: fixed;
     inset-block-start: 0;
@@ -88,7 +88,7 @@
   }
 }
 
-@media screen and (min-width: 992px) {
+@media screen and (min-width: 62rem) {
   .pf-v6-u-visible-on-lg {
     position: static;
     overflow: visible;
@@ -98,13 +98,13 @@
   }
 }
 
-@media screen and (min-width: 992px) {
+@media screen and (min-width: 62rem) {
   .pf-v6-u-hidden-on-lg {
     display: none !important;
   }
 }
 
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 75rem) {
   .pf-v6-u-screen-reader-on-xl {
     position: fixed;
     inset-block-start: 0;
@@ -116,7 +116,7 @@
   }
 }
 
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 75rem) {
   .pf-v6-u-visible-on-xl {
     position: static;
     overflow: visible;
@@ -126,13 +126,13 @@
   }
 }
 
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 75rem) {
   .pf-v6-u-hidden-on-xl {
     display: none !important;
   }
 }
 
-@media screen and (min-width: 1450px) {
+@media screen and (min-width: 90.625rem) {
   .pf-v6-u-screen-reader-on-2xl {
     position: fixed;
     inset-block-start: 0;
@@ -144,7 +144,7 @@
   }
 }
 
-@media screen and (min-width: 1450px) {
+@media screen and (min-width: 90.625rem) {
   .pf-v6-u-visible-on-2xl {
     position: static;
     overflow: visible;
@@ -154,7 +154,7 @@
   }
 }
 
-@media screen and (min-width: 1450px) {
+@media screen and (min-width: 90.625rem) {
   .pf-v6-u-hidden-on-2xl {
     display: none !important;
   }

package/utilities/Accessibility/accessibility.scss

@@ -1,19 +1,21 @@
+@use '../../sass-utilities' as *;
+
 // screen-reader - visually hide, but expose to screen readers
-@each $breakpoint, $breakpoint-value in $pf-v5-global--breakpoint-map {
+@each $breakpoint, $breakpoint-value in $pf-v6-global--breakpoint-map {
   .#{$pf-prefix}u-screen-reader#{$breakpoint-value} {
-    @include pf-v5-media-query($breakpoint) {
-      @include pf-v5-u-screen-reader;
+    @include pf-v6-media-query($breakpoint) {
+      @include pf-v6-u-screen-reader;
     }
   }
 
   .#{$pf-prefix}u-visible#{$breakpoint-value} {
-    @include pf-v5-media-query($breakpoint) {
-      @include pf-v5-u-visible;
+    @include pf-v6-media-query($breakpoint) {
+      @include pf-v6-u-visible;
     }
   }
 
   .#{$pf-prefix}u-hidden#{$breakpoint-value} {
-    @include pf-v5-media-query($breakpoint) {
+    @include pf-v6-media-query($breakpoint) {
       // stylelint-disable
       display: none !important;
       // stylelint-enable

package/utilities/Alignment/alignment.css

@@ -1,84 +1,84 @@
-.pf-v6-u-text-align-left {
-  text-align: left !important;
+.pf-v6-u-text-align-start {
+  text-align: start !important;
 }
 
 .pf-v6-u-text-align-center {
   text-align: center !important;
 }
 
-.pf-v6-u-text-align-right {
-  text-align: right !important;
+.pf-v6-u-text-align-end {
+  text-align: end !important;
 }
 
 .pf-v6-u-text-align-justify {
   text-align: justify !important;
 }
 
-@media screen and (min-width: 576px) {
-  .pf-v6-u-text-align-left-on-sm {
-    text-align: left !important;
+@media screen and (min-width: 36rem) {
+  .pf-v6-u-text-align-start-on-sm {
+    text-align: start !important;
   }
   .pf-v6-u-text-align-center-on-sm {
     text-align: center !important;
   }
-  .pf-v6-u-text-align-right-on-sm {
-    text-align: right !important;
+  .pf-v6-u-text-align-end-on-sm {
+    text-align: end !important;
   }
   .pf-v6-u-text-align-justify-on-sm {
     text-align: justify !important;
   }
 }
-@media screen and (min-width: 768px) {
-  .pf-v6-u-text-align-left-on-md {
-    text-align: left !important;
+@media screen and (min-width: 48rem) {
+  .pf-v6-u-text-align-start-on-md {
+    text-align: start !important;
   }
   .pf-v6-u-text-align-center-on-md {
     text-align: center !important;
   }
-  .pf-v6-u-text-align-right-on-md {
-    text-align: right !important;
+  .pf-v6-u-text-align-end-on-md {
+    text-align: end !important;
   }
   .pf-v6-u-text-align-justify-on-md {
     text-align: justify !important;
   }
 }
-@media screen and (min-width: 992px) {
-  .pf-v6-u-text-align-left-on-lg {
-    text-align: left !important;
+@media screen and (min-width: 62rem) {
+  .pf-v6-u-text-align-start-on-lg {
+    text-align: start !important;
   }
   .pf-v6-u-text-align-center-on-lg {
     text-align: center !important;
   }
-  .pf-v6-u-text-align-right-on-lg {
-    text-align: right !important;
+  .pf-v6-u-text-align-end-on-lg {
+    text-align: end !important;
   }
   .pf-v6-u-text-align-justify-on-lg {
     text-align: justify !important;
   }
 }
-@media screen and (min-width: 1200px) {
-  .pf-v6-u-text-align-left-on-xl {
-    text-align: left !important;
+@media screen and (min-width: 75rem) {
+  .pf-v6-u-text-align-start-on-xl {
+    text-align: start !important;
   }
   .pf-v6-u-text-align-center-on-xl {
     text-align: center !important;
   }
-  .pf-v6-u-text-align-right-on-xl {
-    text-align: right !important;
+  .pf-v6-u-text-align-end-on-xl {
+    text-align: end !important;
   }
   .pf-v6-u-text-align-justify-on-xl {
     text-align: justify !important;
   }
 }
-@media screen and (min-width: 1450px) {
-  .pf-v6-u-text-align-left-on-2xl {
-    text-align: left !important;
+@media screen and (min-width: 90.625rem) {
+  .pf-v6-u-text-align-start-on-2xl {
+    text-align: start !important;
   }
   .pf-v6-u-text-align-center-on-2xl {
     text-align: center !important;
   }
-  .pf-v6-u-text-align-right-on-2xl {
-    text-align: right !important;
+  .pf-v6-u-text-align-end-on-2xl {
+    text-align: end !important;
   }
   .pf-v6-u-text-align-justify-on-2xl {
     text-align: justify !important;

package/utilities/Alignment/alignment.scss

@@ -1,12 +1,14 @@
+@use '../../sass-utilities' as *;
+
 // stylelint-disable
-$pf-v5-u-alignment-options: (
-  text-align-left:    (text-align left),
+$pf-v6-u-alignment-options: (
+  text-align-start:    (text-align start),
   text-align-center:  (text-align center),
-  text-align-right:   (text-align right),
+  text-align-end:   (text-align end),
   text-align-justify: (text-align justify)
 );
 
 // Text utilities
-@include pf-v5-utility-builder($pf-v5-u-alignment-options, $pf-v5-global--breakpoint-list);
+@include pf-v6-utility-builder($pf-v6-u-alignment-options, $pf-v6-global--breakpoint-list);
 
 // stylelint-enable