@patternfly/patternfly 5.1.0-prerelease.8 → 5.1.0

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

@@ -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/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;
 }