Update pst styling (#642)

Author: jarrodmillman

assets/theme-css/pst/abstracts/_accessibility.scss

@@ -1,14 +1,13 @@
-// loading the math module
+@use "sass:color";
+@use "sass:map";
 @use "sass:math";
 
-/**
-* Get color combinations that meet a minimum contrast ratio as per WCAG 2
-*/
+// Get color combinations that meet a minimum contrast ratio as per WCAG 2
+
 // @param {color} $bg - Background color of the element
 // @param {color} optional $target-color-contrast-dark $target-color-contrast-light  - Target text colors, defaul to our
 // $foundation-black and $foundation-white colors
 // @return {color} $max-ratio-color - The color that has the highest contrast ratio
-//
 @function a11y-combination(
   $bg,
   $target-color-contrast-dark: $foundation-black,
@@ -22,15 +21,16 @@
 
   @each $fg in $foregrounds {
     $contrast-ratio: get-contrast-ratio($bg, $fg);
+
     @if $contrast-ratio >= $min-contrast-ratio {
       @return $fg;
     } @else if $contrast-ratio > $max-ratio {
       $max-ratio: $contrast-ratio;
       $max-ratio-color: $fg;
     }
   }
-  @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$bg}...";
 
+  @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$bg}...";
   @return $max-ratio-color;
 }
 
@@ -49,25 +49,25 @@
 // Return WCAG2.1 relative luminance
 // See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
 // See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
-//
 @function luminance($target-color) {
   $rgb-col: (
-    "r": red($target-color),
-    "g": green($target-color),
-    "b": blue($target-color),
+    "r": color.red($target-color),
+    "g": color.green($target-color),
+    "b": color.blue($target-color),
   );
 
   @each $channel, $value in $rgb-col {
     // here we get RsRGB, GsRGB, and BsRGB
-    @if math.div($value, 255) <=0.03928 {
-      $rgb-col: map-merge(
+    // stylelint-disable-next-line number-max-precision
+    @if math.div($value, 255) <= 0.04045 {
+      $rgb-col: map.merge(
         $rgb-col,
         (
           $channel: math.div(math.div($value, 255), 12.92),
         )
       );
     } @else {
-      $rgb-col: map-merge(
+      $rgb-col: map.merge(
         $rgb-col,
         (
           $channel:
@@ -77,8 +77,9 @@
     }
   }
 
-  @return (
-    0.2126 * map-get($rgb-col, "r") + 0.7152 * map-get($rgb-col, "g") + 0.0722 *
-      map-get($rgb-col, "b")
-  );
+  $r: map.get($rgb-col, "r");
+  $g: map.get($rgb-col, "g");
+  $b: map.get($rgb-col, "b");
+
+  @return (0.2126 * $r + 0.7152 * $g + 0.0722 * $b);
 }

assets/theme-css/pst/abstracts/_color.scss

@@ -2,20 +2,24 @@
  * Miscellaneous color functions and mixins
 **/
 
-// loading the math module
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
 @use "sass:math";
+@use "sass:string";
 
 // We must add ::before pseudo-element to some theme components (such as admonitions)
 // because users were instructed to customize the background color this way.
 @mixin legacy-backdrop-placeholder {
-  &:before {
+  &::before {
     content: "";
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0;
     top: 0;
     z-index: -1;
+
     // So that hovering over the text within background is still possible.
     // Otherwise the background overlays the text and you cannot click or select easily.
     // ref: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
@@ -31,8 +35,9 @@
 // @return {*}
 @function map-deep-get($map, $keys...) {
   @each $key in $keys {
-    $map: map-get($map, $key);
+    $map: map.get($map, $key);
   }
+
   @return $map;
 }
 
@@ -44,9 +49,10 @@
 // @param {String/Color} $color - Color definition from map
 // @return {Color} - Color type (in hex)
 @function check-color($color) {
-  @if type-of($color) == string {
+  @if meta.type-of($color) == string {
     $color: from-hex($color);
   }
+
   @return $color;
 }
 
@@ -55,12 +61,12 @@
   */
 // @param {String} $string - String representation of a color
 @function from-hex($string) {
-  $string-lower: to-lower-case($string);
+  $string-lower: string.to-lower-case($string);
   $r: "";
   $g: "";
   $b: "";
   $hex: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "a" "b" "c" "d" "e" "f";
-  $length: str-length($string);
+  $length: string.length($string);
   $max: if($length == 4, 1, 2);
 
   // Check for length accuracy
@@ -70,18 +76,18 @@
 
   // Loop from the second character (omitting #)
   @for $i from 2 through $length {
-    $c: str-slice($string-lower, $i, $i);
+    $c: string.slice($string-lower, $i, $i);
 
     // If wrong character, return
-    @if index($hex, $c) == null {
+    @if not list.index($hex, $c) {
       @return $string;
     }
 
-    @if str-length($r) < $max {
+    @if string.length($r) < $max {
       $r: $r + $c;
-    } @else if str-length($g) < $max {
+    } @else if string.length($g) < $max {
       $g: $g + $c;
-    } @else if str-length($b) < $max {
+    } @else if string.length($b) < $max {
       $b: $b + $c;
     }
   }
@@ -92,18 +98,18 @@
     $b: $b + $b;
   }
 
-  @return rgb(_hex-to-dec($r), _hex-to-dec($g), _hex-to-dec($b));
+  @return rgb(hex-to-dec($r), hex-to-dec($g), hex-to-dec($b));
 }
 
-@function _hex-to-dec($string) {
+@function hex-to-dec($string) {
   $hex: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9" "a" "b" "c" "d" "e" "f";
-  $string: to-lower-case($string);
-  $length: str-length($string);
-
+  $string: string.to-lower-case($string);
+  $length: string.length($string);
   $dec: 0;
+
   @for $i from 1 through $length {
     $factor: 1 + (15 * ($length - $i));
-    $index: index($hex, str-slice($string, $i, $i));
+    $index: list.index($hex, string.slice($string, $i, $i));
     $dec: $dec + $factor * ($index - 1);
   }