Fix contrastRatio() Sass function to better calculate dark mode contrast

CHANGELOG.md

@@ -9,6 +9,7 @@
 **Bug Fixes**
 
 - Fixed `EuiFieldNumber` so values of type `number` are now allowed ([#3020](https://github.com/elastic/eui/pull/3020))
+- Fixed SASS `contrastRatio()` function in dark mode by fixing the `pow()` math function ([#3013], (https://github.com/elastic/eui/pull/3013))
 
 ## [`21.0.0`](https://github.com/elastic/eui/tree/v21.0.0)
 

src/global_styling/functions/_math.scss

@@ -1,35 +1,54 @@
-// Greatest common devisor
-// From: http://rosettacode.org/wiki/Greatest_common_divisor#JavaScript
-@function gcd($a, $b) {
-  @if ($b != 0) {
-    @return gcd($b, $a % $b);
-  } @else {
-    @return abs($a);
+//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow
+@function pow($number, $power) {
+  @if ($power != $power or ($power != 0 and $power == $power / 2)) {
+    @return $power;
   }
-}
-
-// Handles decimal exponents by trying to convert them into a fraction and then
-// use a nthRoot-algorithm for parts of the calculation
-@function pow($base, $exponent, $prec: 12) {
-  @if (floor($exponent) != $exponent) {
-    $prec2: pow(10, $prec);
-    $exponent: round($exponent * $prec2);
-    $denominator: gcd($exponent, $prec2);
-    @return nthRoot(pow($base, $exponent / $denominator), $prec2 / $denominator, $prec);
+  @if ($power == 1) {
+    @return $number;
   }
-
-  $value: $base;
-  @if $exponent > 1 {
-    @for $i from 2 through $exponent {
-      $value: $value * $base;
+  @if ($power == 0) {
+    @return 1;
+  }
+  @if ($power < 0) {
+    @return 1 / pow($number, -$power);
+  }
+  @if (0 < $power and $power < 2) {
+    $hasLeadingOne: false;
+    @if (floor($power) == 1) {
+      $power: $power - 1;
+      $hasLeadingOne: true;
+    } @else {
+      $hasLeadingOne: false;
     }
-  } @else if $exponent < 1 {
-    @for $i from 0 through -$exponent {
-      $value: $value / $base;
+    $doublePower: pow($number, $power * 2);
+    $fullPower: nthRoot($doublePower, 2);
+    @if ($hasLeadingOne) {
+      $fullPower: $fullPower * $number;
     }
+    @return $fullPower;
+  } @else if (getDecimal($power) != 0) {
+    $wholePower: floor($power);
+    $decimalPower: getDecimal($power);
+    @return pow($number, $wholePower) * pow($number, $decimalPower);
+  } @else {
+    $hasTrailingOne: $power % 2 == 1;
+    @if ($hasTrailingOne) {
+      $power: $power - 1;
+    }
+    $halfPower: pow($number, floor($power / 2));
+    $fullPower: $halfPower * $halfPower;
+    @if ($hasTrailingOne) {
+      $fullPower: $fullPower * $number;
+    }
+    @return $fullPower;
   }
+}
 
-  @return $value;
+@function getDecimal($number) {
+  @if ($number < 0) {
+    $number: -$number;
+  }
+  @return $number % 1;
 }
 
 // From: http://rosettacode.org/wiki/Nth_root#JavaScript