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

package/patternfly.scss

@@ -1,4 +1,3 @@
-// Version
-@import "patternfly-base";
-@import "components/all";
-@import "layouts/all";
+@use './patternfly-base';
+@use './components';
+@use './layouts';

package/sass-utilities/_index.scss

@@ -0,0 +1,6 @@
+@forward './init';
+@forward './scss-variables';
+@forward './functions';
+@forward './mixins';
+@forward './namespaces-components';
+@forward './namespaces-layouts';

package/sass-utilities/functions.scss

@@ -1,18 +1,24 @@
 // PatternFly functions
 // --------------------------------------------------
-@import "./div";
+@use '../sass-utilities/scss-variables.scss' as *;
+@use '../sass-utilities/init.scss' as *;
+@use 'sass:math';
 
 // Transform px to rems
 @function pf-strip-unit($num) {
-  @return div($num, ($num * 0 + 1));
+  @if type-of($num) == 'number' and not unitless($num) {
+    @return math.div($num, ($num * 0 + 1));
+  }
+
+  @return $num;
 }
 
 @function pf-size-prem($pxval, $base: $pf-v6-global--space-size-root) {
-  @return div(pf-strip-unit($pxval), $base) * 1rem;
+  @return math.div(pf-strip-unit($pxval), $base) * 1rem;
 }
 
 @function pf-font-prem($pxval, $base: $pf-v6-global--font-size-root) {
-  @return div(pf-strip-unit($pxval), $base) * 1rem;
+  @return math.div(pf-strip-unit($pxval), $base) * 1rem;
 }
 
 // Return (width) breakpoint value if it exists

package/sass-utilities/mixins.scss

@@ -1,3 +1,7 @@
+@use '../sass-utilities/functions.scss' as *;
+@use '../sass-utilities/init.scss' as *;
+@use '../sass-utilities/scss-variables.scss' as *;
+
 // Media query used to create responsive classes
 @mixin pf-v6-media-query($point) {
   @if $point == "" or not $point or $point == "base" {
@@ -76,15 +80,14 @@
 // ===============================================================================================
 // Example individual utility:
 // @include pf-v6-utility-builder(flex-fill flex "1 1 auto", $pf-v6-global--breakpoint-list);
-
-@mixin pf-v6-utility-builder($props, $breakpoints: null, $direction: "width") {
+@mixin pf-v6-utility-builder($props, $breakpoints: null, $direction: 'width') {
   // if $class-name is a map
 
   // stylelint-disable
   @if type-of($props) == map {
     @each $class, $val in $props {
       $property: nth($val, 1);
-      $value: #{nth($val, 2) !important};
+      $value: #{nth($val, 2)} !important;
 
       .#{$pf-prefix}u-#{$class} {
         #{$property}: #{$value};
@@ -100,7 +103,7 @@
           @include pf-v6-height-media-query($breakpoint) {
             @each $class, $val in $props {
               $property: nth($val, 1);
-              $value: #{nth($val, 2) !important};
+              $value: #{nth($val, 2)} !important;
 
               .#{$pf-prefix}u-#{$class}#{$suffix}-height {
                 #{$property}: #{$value};
@@ -108,11 +111,11 @@
             }
           }
         }
-        @else if $direction == 'width' {
+        @else if ($direction == 'width') {
           @include pf-v6-media-query($breakpoint) {
             @each $class, $val in $props {
               $property: nth($val, 1);
-              $value: #{nth($val, 2) !important};
+              $value: #{nth($val, 2)} !important;
 
               .#{$pf-prefix}u-#{$class}#{$suffix} {
                 #{$property}: #{$value};
@@ -123,7 +126,6 @@
       }
     }
   }
-
   @else if type-of($props) == list {
     $class: nth($props, 1);
     $property: nth($props, 2);

package/sass-utilities/{component-namespaces.scss → namespaces-components.scss}

@@ -1,3 +1,6 @@
+@use '../sass-utilities/init.scss' as *;
+@use '../sass-utilities/scss-variables.scss' as *;
+
 // Globally scoped component variables
 // About Modal Box
 // stylelint-disable scss/dollar-variable-pattern

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,5 +1,3 @@
-@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.

package/utilities/Accessibility/accessibility.scss

@@ -1,3 +1,5 @@
+@use '../../sass-utilities' as *;
+
 // screen-reader - visually hide, but expose to screen readers
 @each $breakpoint, $breakpoint-value in $pf-v6-global--breakpoint-map {
   .#{$pf-prefix}u-screen-reader#{$breakpoint-value} {

package/utilities/Alignment/alignment.scss

@@ -1,3 +1,5 @@
+@use '../../sass-utilities' as *;
+
 // stylelint-disable
 $pf-v6-u-alignment-options: (
   text-align-start:    (text-align start),

package/utilities/BackgroundColor/{BackgroundColor.scss → background-color.scss}

@@ -1,4 +1,4 @@
-// stylelint-disable
+@use '../../sass-utilities' as *;
 
 // Background color options
 $pf-v6-u-background-color-options: (
@@ -14,6 +14,3 @@ $pf-v6-u-background-color-options: (
 );
 
 @include pf-v6-utility-builder($pf-v6-u-background-color-options, $pf-v6-global--breakpoint-list);
-
-// stylelint-enable
-

package/utilities/BoxShadow/box-shadow.scss

@@ -1,5 +1,6 @@
-// stylelint-disable
+@use '../../sass-utilities' as *;
 
+// stylelint-disable
 $pf-v6-u-box-shadow-options: (
   /* small */
   box-shadow-sm:        (box-shadow var(--pf-t--global--box-shadow--sm)),

package/utilities/Display/display.scss

@@ -1,5 +1,6 @@
-// stylelint-disable
+@use '../../sass-utilities' as *;
 
+// stylelint-disable
 // Display options
 $pf-v6-u-display-options: (
   display-none:           (display none),

package/utilities/Flex/flex.scss

@@ -1,5 +1,6 @@
-// stylelint-disable
+@use '../../sass-utilities' as *;
 
+// stylelint-disable
 // Flex direction options
 $pf-v6-u-flex-direction-options: (
   flex-direction-column:            (flex-direction column),

package/utilities/Float/float.scss

@@ -1,11 +1,11 @@
-// stylelint-disable
+@use '../../sass-utilities' as *;
 
-$pf-v6-u-alignment-options: (
+// stylelint-disable
+$pf-v6-u-float-options: (
   float-inline-start: (float inline-start),
   float-inline-end: (float inline-end)
 );
 
 // Text utilities
-@include pf-v6-utility-builder($pf-v6-u-alignment-options, $pf-v6-global--breakpoint-list);
-
+@include pf-v6-utility-builder($pf-v6-u-float-options, $pf-v6-global--breakpoint-list);
 // stylelint-enable

package/utilities/Sizing/sizing.scss

@@ -1,3 +1,5 @@
+@use '../../sass-utilities' as *;
+
 $pf-v6-u-sizing--min-max--breakpoint-map: build-breakpoint-map();
 // stylelint-disable
 

package/utilities/Spacing/spacing.scss

@@ -1,6 +1,7 @@
-// stylelint-disable
+@use '../../sass-utilities' as *;
 
 // Build spacing values
+// stylelint-disable
 @mixin pf-spacer-builder {
 
   // Loop through breakpoints
@@ -46,7 +47,6 @@
     }
   }
 }
-
 // stylelint-enable
 
 // Build spacing values

package/utilities/Text/text.scss

@@ -1,6 +1,7 @@
-// stylelint-disable
+@use '../../sass-utilities' as *;
 
 // Font family options
+// stylelint-disable
 $pf-v6-u-font-family-options: (
   font-family-text: (
     font-family var(--pf-t--global--font--family--body)