@patternfly/patternfly 6.0.0-alpha.5 → 6.0.0-alpha.50

package/sass-utilities/functions.scss

@@ -115,3 +115,9 @@
 
   @return $new-map;
 }
+
+// Returns a calc() with the inverse of a value used for RTL. Most commonly used as the inverse/negative of a value in a transform function (eg, translate(), rotate(), scale(), etc)
+// Shouldn't be used on an existing LTR style as adding a calc() in an existing style could be breaking. Should used within an RTL selector, which is basically an opt-in.
+@function pf-v5-calc-inverse($val, $multiplier: var(--#{$pf-global}--inverse--multiplier)) {
+  @return calc(#{$val} * #{$multiplier});
+}

package/sass-utilities/mixins.scss

@@ -151,8 +151,8 @@
 
 @mixin pf-v5-u-screen-reader {
   position: fixed;
-  top: 0;
-  left: 0;
+ inset-block-start: 0;
+ inset-inline-start: 0;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
@@ -309,3 +309,63 @@
     }
   }
 }
+
+// RTL helpers
+
+// Used to create the RTL selector for RTL specific styles
+
+// @include pf-v5-rtl {
+//   background: red;
+// }
+
+// renders as
+
+// [dir="rtl"] {
+//   background: red;
+// }
+@mixin pf-v5-rtl {
+  @at-root :where(.#{$pf-prefix}m-dir-rtl, [dir="rtl"]) #{&} {
+    @content;
+  }
+}
+
+// Used to create the LTR selector for LTR specific styles
+@mixin pf-v5-ltr {
+  @at-root :where(.#{$pf-prefix}m-dir-ltr, [dir="ltr"]) #{&} {
+    @content;
+  }
+}
+
+// Creates a default/LTR declaration, and an RTL declaration.
+
+// @include pf-v5-bidirectional-style(background, blue, red)
+
+// renders as
+
+// background: blue;
+// [dir="rtl"] {
+//   background: red;
+// }
+@mixin pf-v5-bidirectional-style($prop, $ltr-val, $rtl-val) {
+  #{$prop}: #{$ltr-val};
+
+  @include pf-v5-rtl {
+    #{$prop}: #{$rtl-val};
+  }
+}
+
+// Mirrors/flips something horizontally/inline. Relies upon scale/scale() not already being used for the element. Can be extended to take arguments to use different methods other than scale().
+@mixin pf-v5-mirror-inline {
+  scale: -1 1;
+}
+
+@mixin pf-v5-mirror-inline-on-rtl {
+  @include pf-v5-rtl {
+    @include pf-v5-mirror-inline;
+  }
+}
+
+// Declares a global inverse multiplier var used for returning the inverse of a number. Defined within blocks that reference the global var in calc() functions to conditionally return the default or inverse value of a number.
+@mixin pf-v5-set-inverse($val: true) {
+  --#{$pf-global}--inverse--multiplier: #{if($val, -1, 1)};
+}

package/sass-utilities/scss-variables.scss

@@ -294,17 +294,17 @@ $pf-v5-global--height-breakpoint-name-map: (
 // Spacer properties
 $pf-v5-global--spacer-properties-map: (
   "m":  "margin",
-  "mt": "margin-top",
-  "mr": "margin-right",
-  "mb": "margin-bottom",
-  "ml": "margin-left",
+  "mt": "margin-block-start",
+  "mr": "margin-inline-end",
+  "mb": "margin-block-end",
+  "ml": "margin-inline-start",
   "mx": null,
   "my": null,
   "p":  "padding",
-  "pt": "padding-top",
-  "pr": "padding-right",
-  "pb": "padding-bottom",
-  "pl": "padding-left",
+  "pt": "padding-block-start",
+  "pr": "padding-inline-end",
+  "pb": "padding-block-end",
+  "pl": "padding-inline-start",
   "px": null,
   "py": null
 );

package/sass-utilities/themes/dark/mixins.scss

@@ -1,5 +1,7 @@
 @mixin pf-v5-theme-dark--t-dark($color: "--#{$pf-global}--Color--100") {
-  color: var(#{$color});
+  @if $color {
+    color: var(#{$color});
+  }
 
   @extend %pf-v5-theme-dark--t-dark;
 }

package/utilities/Accessibility/accessibility.css

@@ -1,7 +1,7 @@
 .pf-v5-u-screen-reader {
   position: fixed;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
@@ -23,8 +23,8 @@
 @media screen and (min-width: 576px) {
   .pf-v5-u-screen-reader-on-sm {
     position: fixed;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
@@ -51,8 +51,8 @@
 @media screen and (min-width: 768px) {
   .pf-v5-u-screen-reader-on-md {
     position: fixed;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
@@ -79,8 +79,8 @@
 @media screen and (min-width: 992px) {
   .pf-v5-u-screen-reader-on-lg {
     position: fixed;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
@@ -107,8 +107,8 @@
 @media screen and (min-width: 1200px) {
   .pf-v5-u-screen-reader-on-xl {
     position: fixed;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
@@ -135,8 +135,8 @@
 @media screen and (min-width: 1450px) {
   .pf-v5-u-screen-reader-on-2xl {
     position: fixed;
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;