claritas-web-framework 6.2.72 → 6.3.0

package/sass/mixins/_borderRadius.scss

@@ -1,5 +1,4 @@
 @use "sass:list";
-
 @use "./../variables" as *;
 
 // Single side border-radius
@@ -7,6 +6,7 @@
 // Helper function to replace negative values with 0
 @function valid-radius($radius) {
   $return: ();
+
   @each $value in $radius {
     @if type-of($value) == number {
       $return: list.append($return, max($value, 0));
@@ -14,6 +14,7 @@
       $return: list.append($return, $value);
     }
   }
+
   @return $return;
 }
 

package/sass/mixins/_boxShadow.scss

@@ -1,5 +1,4 @@
 @use "sass:list";
-
 @use "./../variables" as *;
 
 @mixin box-shadow($shadow...) {
@@ -7,9 +6,10 @@
     $result: ();
 
     @each $value in $shadow {
-      @if $value != null {
+      @if $value {
         $result: list.append($result, $value, "comma");
       }
+
       @if $value == none and length($shadow) > 1 {
         @warn "The keyword 'none' must be used as a single argument.";
       }

package/sass/mixins/_breakpoints.scss

@@ -1,6 +1,5 @@
 @use "sass:map";
 @use "sass:list";
-
 @use "./../variables" as *;
 
 // Breakpoint viewport sizes and media queries.
@@ -17,6 +16,7 @@
 //    md
 @function breakpoint-next($name, $breakpoints: $breakpoints, $breakpoint-names: map.keys($breakpoints)) {
   $n: list.index($breakpoint-names, $name);
+
   @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
 }
 
@@ -25,6 +25,7 @@
 //    576px
 @function breakpoint-min($name, $breakpoints: $breakpoints) {
   $min: map.get($breakpoints, $name);
+
   @return if($min != 0, $min, null);
 }
 
@@ -38,6 +39,7 @@
 //    767.98px
 @function breakpoint-max($name, $breakpoints: $breakpoints) {
   $next: breakpoint-next($name, $breakpoints);
+
   @return if($next, breakpoint-min($next, $breakpoints) - 0.02, null);
 }
 
@@ -55,6 +57,7 @@
 // Makes the @content apply to the given breakpoint and wider.
 @mixin media-breakpoint-up($name, $breakpoints: $breakpoints) {
   $min: breakpoint-min($name, $breakpoints);
+
   @if $min {
     @media (min-width: $min) {
       @content;
@@ -68,6 +71,7 @@
 // Makes the @content apply to the given breakpoint and narrower.
 @mixin media-breakpoint-down($name, $breakpoints: $breakpoints) {
   $max: breakpoint-max($name, $breakpoints);
+
   @if $max {
     @media (max-width: $max) {
       @content;

package/sass/mixins/_button.scss

@@ -1,8 +1,7 @@
 @use "sass:color";
-
+@use "~rfs/scss" as *;
 @use "./../variables" as *;
 @use "./../functions" as *;
-@use "./../mixins/rfs" as *;
 @use "./../mixins/borderRadius" as *;
 @use "./../mixins/boxShadow" as *;
 @use "./../mixins/gradient" as *;
@@ -41,23 +40,23 @@
   $disabled-border: $border,
   $disabled-color: color-contrast($disabled-background)
 ) {
-  --#{$prefix}button-color: #{$color};
-  --#{$prefix}button-background: #{$background};
-  --#{$prefix}button-border-color: #{$border};
-  --#{$prefix}button-hover-color: #{$hover-color};
-  --#{$prefix}button-hover-background: #{$hover-background};
-  --#{$prefix}button-hover-border-color: #{$hover-border};
-  --#{$prefix}button-focus-box-shadow: 0 0 #{$input-button-focus-blur} #{$input-button-focus-width} #{rgba(
+  --button-color: #{$color};
+  --button-background: #{$background};
+  --button-border-color: #{$border};
+  --button-hover-color: #{$hover-color};
+  --button-hover-background: #{$hover-background};
+  --button-hover-border-color: #{$hover-border};
+  --button-focus-box-shadow: 0 0 #{$input-button-focus-blur} #{$input-button-focus-width} #{rgba(
       $background,
       $border-opacity
     )};
-  --#{$prefix}button-active-color: #{$active-color};
-  --#{$prefix}button-active-background: #{$active-background};
-  --#{$prefix}button-active-border-color: #{$active-border};
-  --#{$prefix}button-active-shadow: #{$button-active-box-shadow};
-  --#{$prefix}button-disabled-color: #{$disabled-color};
-  --#{$prefix}button-disabled-background: #{$disabled-background};
-  --#{$prefix}button-disabled-border-color: #{$disabled-border};
+  --button-active-color: #{$active-color};
+  --button-active-background: #{$active-background};
+  --button-active-border-color: #{$active-border};
+  --button-active-shadow: #{$button-active-box-shadow};
+  --button-disabled-color: #{$disabled-color};
+  --button-disabled-background: #{$disabled-background};
+  --button-disabled-border-color: #{$disabled-border};
 }
 
 @mixin button-outline-variant(
@@ -67,65 +66,195 @@
   $active-border: $color,
   $active-color: color-contrast($active-background)
 ) {
-  --#{$prefix}button-color: #{$color};
-  --#{$prefix}button-border-color: #{$color};
-  --#{$prefix}button-hover-color: #{$color-hover};
-  --#{$prefix}button-background: transparent;
-  --#{$prefix}button-hover-background: #{$active-background};
-  --#{$prefix}button-hover-border-color: #{$active-border};
-  --#{$prefix}button-focus-box-shadow: 0 0 #{$input-button-focus-blur} #{$input-button-focus-width} #{rgba(
+  --button-color: #{$color};
+  --button-border-color: #{$color};
+  --button-hover-color: #{$color-hover};
+  --button-background: transparent;
+  --button-hover-background: #{$active-background};
+  --button-hover-border-color: #{$active-border};
+  --button-focus-box-shadow: 0 0 #{$input-button-focus-blur} #{$input-button-focus-width} #{rgba(
       $color,
       $border-opacity
     )};
-  --#{$prefix}button-active-color: #{$active-color};
-  --#{$prefix}button-active-background: #{$active-background};
-  --#{$prefix}button-active-border-color: #{$active-border};
-  --#{$prefix}button-active-shadow: #{$button-active-box-shadow};
-  --#{$prefix}button-disabled-color: #{$color};
-  --#{$prefix}button-disabled-background: transparent;
-  --#{$prefix}button-disabled-border-color: #{$color};
-  --#{$prefix}gradient: none;
+  --button-active-color: #{$active-color};
+  --button-active-background: #{$active-background};
+  --button-active-border-color: #{$active-border};
+  --button-active-shadow: #{$button-active-box-shadow};
+  --button-disabled-color: #{$color};
+  --button-disabled-background: transparent;
+  --button-disabled-border-color: #{$color};
+  --gradient: none;
 }
 
 @mixin button-link-variant($color) {
-  --#{$prefix}button-color: #{$color};
-  --#{$prefix}button-hover-color: #{color.mix(black, $color, $link-shade-percentage)};
-  --#{$prefix}button-background: transparent;
-  --#{$prefix}button-hover-background: #{rgba($color, $button-hover-border-tint-amount)};
-  --#{$prefix}button-border-color: transparent;
-  --#{$prefix}button-hover-border-color: transparent;
-  --#{$prefix}button-active-border-color: transparent;
-  --#{$prefix}button-box-shadow: none;
-  --#{$prefix}button-focus-box-shadow: none;
-  --#{$prefix}button-disabled-color: #{$color};
-  --#{$prefix}button-disabled-background: transparent;
-  --#{$prefix}button-disabled-border-color: transparent;
+  --button-color: #{$color};
+  --button-hover-color: #{color.mix(black, $color, $link-shade-percentage)};
+  --button-background: transparent;
+  --button-hover-background: #{rgba($color, $button-hover-border-tint-amount)};
+  --button-border-color: transparent;
+  --button-hover-border-color: transparent;
+  --button-active-border-color: transparent;
+  --button-box-shadow: none;
+  --button-focus-box-shadow: none;
+  --button-disabled-color: #{$color};
+  --button-disabled-background: transparent;
+  --button-disabled-border-color: transparent;
 }
 
 @mixin button-unstyled-variant($color) {
-  --#{$prefix}button-color: #{$color};
-  --#{$prefix}button-hover-color: #{color.mix(black, $color, $link-shade-percentage)};
-  --#{$prefix}button-active-color: #{color.mix(black, $color, $link-shade-percentage)};
-  --#{$prefix}button-background: transparent;
-  --#{$prefix}button-hover-background: transparent;
-  --#{$prefix}button-active-background: transparent;
-  --#{$prefix}button-border-color: transparent;
-  --#{$prefix}button-hover-border-color: transparent;
-  --#{$prefix}button-active-border-color: transparent;
-  --#{$prefix}button-box-shadow: none;
-  --#{$prefix}button-focus-box-shadow: none;
-  --#{$prefix}button-padding-x: 0;
-  --#{$prefix}button-padding-y: 0;
-  --#{$prefix}button-hover-text-decoration: underline;
-  --#{$prefix}button-disabled-color: #{$color};
-  --#{$prefix}button-disabled-background: transparent;
-  --#{$prefix}button-disabled-border-color: transparent;
+  --button-color: #{$color};
+  --button-hover-color: #{color.mix(black, $color, $link-shade-percentage)};
+  --button-active-color: #{color.mix(black, $color, $link-shade-percentage)};
+  --button-background: transparent;
+  --button-hover-background: transparent;
+  --button-active-background: transparent;
+  --button-border-color: transparent;
+  --button-hover-border-color: transparent;
+  --button-active-border-color: transparent;
+  --button-box-shadow: none;
+  --button-focus-box-shadow: none;
+  --button-padding-x: 0;
+  --button-padding-y: 0;
+  --button-hover-text-decoration: underline;
+  --button-disabled-color: #{$color};
+  --button-disabled-background: transparent;
+  --button-disabled-border-color: transparent;
 }
 
 @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
-  --#{$prefix}button-padding-y: #{$padding-y};
-  --#{$prefix}button-padding-x: #{$padding-x};
-  @include rfs($font-size, --#{$prefix}button-font-size);
+  --button-padding-y: #{$padding-y};
+  --button-padding-x: #{$padding-x};
+
+  @include rfs($font-size, --button-font-size);
+
+  --button-border-radius: #{$border-radius};
+}
+
+@mixin button-variant-link(
+  $color-title: "primary",
+  $shade: $link-shade-percentage,
+  $alpha: $button-hover-link-background-a
+) {
+  --button-color: hsl(
+    var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / var(--#{$color-title}-a)
+  );
+  --button-border-color: hsl(var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / 0%);
+  --button-background: hsl(var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / 0%);
+
+  &:hover,
+  .button--switch + &:hover {
+    --color: hsl(
+      var(--#{$color-title}-h) var(--#{$color-title}-s) calc(var(--#{$color-title}-l) - #{$shade}) /
+        var(--#{$color-title}-a)
+    );
+    --button-border-color: hsl(var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / 0%);
+    --button-background: hsl(var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / #{$alpha});
+  }
+
+  &:focus-visible,
+  .button--switch:focus-visible + & {
+    --button-color: hsl(
+      var(--#{$color-title}-h) var(--#{$color-title}-s) calc(var(--#{$color-title}-l) - #{$shade}) /
+        var(--#{$color-title}-a)
+    );
+    --button-background: hsl(var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / #{$alpha});
+    --button-box-shadow-color: hsl(var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / 0%);
+  }
+
+  .button--switch:checked + &,
+  :not(.button--switch) + &:active,
+  &:first-child:active,
+  &.active,
+  &.show {
+    --button-color: hsl(
+      var(--#{$color-title}-h) var(--#{$color-title}-s) calc(var(--#{$color-title}-l) - #{$shade}) /
+        var(--#{$color-title}-a)
+    );
+    --button-background: hsl(var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / #{$alpha});
+    --button-border-color: hsl(var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / 0%);
+  }
+}
+
+@mixin button-variant-unstyled($color-title: "body-color", $shade: $link-shade-percentage) {
+  --button-color: hsl(
+    var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / var(--#{$color-title}-a)
+  );
+  --button-padding-x: 0;
+  --button-padding-y: 0;
+  --button-border-width: 0;
+  --button-border-style: solid;
+  --button-border-color: null;
+  --button-border-radius: 0;
+  --button-background: transparent;
+
+  &:hover,
+  .button--switch + &:hover {
+    --button-color: hsl(
+      var(--#{$color-title}-h) var(--#{$color-title}-s) calc(var(--#{$color-title}-l) - #{$shade}) /
+        var(--#{$color-title}-a)
+    );
+    --button-background: transparent;
+    --button-border-color: transparent;
+  }
+
+  &:focus-visible,
+  .button--switch:focus-visible + & {
+    --button-color: hsl(
+      var(--#{$color-title}-h) var(--#{$color-title}-s) calc(var(--#{$color-title}-l) - #{$shade}) /
+        var(--#{$color-title}-a)
+    );
+    --button-background: transparent;
+    --button-box-shadow-color: transparent;
+  }
+
+  .button--switch:checked + &,
+  :not(.button--switch) + &:active,
+  &:first-child:active,
+  &.active,
+  &.show {
+    --button-color: hsl(
+      var(--#{$color-title}-h) var(--#{$color-title}-s) calc(var(--#{$color-title}-l) - #{$shade}) /
+        var(--#{$color-title}-a)
+    );
+    --button-background: transparent;
+    --button-box-shadow-color: transparent;
+  }
+}
+
+@mixin button-variant-outline($color-title: "body-color", $border-color-hover, $background-active) {
+  --button-color: hsl(
+    var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / var(--#{$color-title}-a)
+  );
+  --button-border-color: hsl(
+    var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / var(--#{$color-title}-a)
+  );
+  --button-background: hsl(var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / 0%);
+
+  &:hover,
+  .button--switch + &:hover {
+    --button-color: hsl(var(--white-h) var(--white-s) var(--white-l) / var(--white-a));
+    --button-background: hsl(
+      var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / var(--#{$color-title}-a)
+    );
+    --button-border-color: #{$border-color-hover};
+  }
+
+  &:focus-visible,
+  .button--switch:focus-visible + & {
+    --button-color: hsl(var(--white-h) var(--white-s) var(--white-l) / var(--white-a));
+    --button-background: hsl(
+      var(--#{$color-title}-h) var(--#{$color-title}-s) var(--#{$color-title}-l) / var(--#{$color-title}-a)
+    );
+    --button-border-color: #{$border-color-hover};
+  }
 
-  --#{$prefix}button-border-radius: #{$border-radius};
+  .button--switch:checked + &,
+  :not(.button--switch) + &:active,
+  &:first-child:active,
+  &.active,
+  &.show {
+    --button-color: hsl(var(--white-h) var(--white-s) var(--white-l) / var(--white-a));
+    --button-background: #{$background-active};
+    --button-border-color: #{$border-color-hover};
+  }
 }

package/sass/mixins/_colors.scss

@@ -3,23 +3,32 @@
 @use "./../variables" as *;
 @use "./../functions" as *;
 
-@mixin make-color($value) {
-  color: $value !important;
+@mixin define-color-variables($title, $color) {
+  --#{$title}-h: #{color.hue($color)};
+  --#{$title}-s: #{color.saturation($color)};
+  --#{$title}-l: #{color.lightness($color)};
+  --#{$title}-a: #{color.alpha($color)};
+}
+
+@mixin make-color($title) {
+  color: hsl(var(--#{$title}-h) var(--#{$title}-s) var(--#{$title}-l) / var(--#{$title}-a)) !important;
 
-  & a {
-    color: $value !important;
+  & a:not(.button) {
+    color: hsl(var(--#{$title}-h) var(--#{$title}-s) var(--#{$title}-l) / var(--#{$title}-a)) !important;
 
     &:hover,
     &:focus {
-      color: color.mix(black, $value, $link-shade-percentage) !important;
+      color: hsl(
+        var(--#{$title}-h) var(--#{$title}-s) calc(var(--#{$title}-l) * #{$link-shade-value}) / var(--#{$title}-a)
+      ) !important;
     }
   }
 }
 
-@mixin make-background-color($value) {
-  background-color: $value !important;
+@mixin make-background-color($title) {
+  background-color: hsl(var(--#{$title}-h) var(--#{$title}-s) var(--#{$title}-l) / var(--#{$title}-a)) !important;
 }
 
-@mixin make-border-color($value) {
-  border-color: $value !important;
+@mixin make-border-color($title) {
+  border-color: hsl(var(--#{$title}-h) var(--#{$title}-s) var(--#{$title}-l) / var(--#{$title}-a)) !important;
 }

package/sass/mixins/_colors.temp.scss

@@ -0,0 +1,88 @@
+@use "sass:color";
+@use "./../variables" as *;
+@use "./../functions" as *;
+
+/* --------------- Splits a colour into it's base hsla values --------------- */
+@mixin define-color-variables($title, $color) {
+  --#{$title}-h: #{color.hue($color)};
+  --#{$title}-s: #{color.saturation($color)};
+  --#{$title}-l: #{color.lightness($color)};
+  --#{$title}-a: #{color.alpha($color)};
+}
+
+@function hsl-color($title, $hue: 0deg, $lightness: 0%, $saturation: 0%, $alpha: 0) {
+  @return hsl(
+    calc(var(--#{$title}-h) + #{$hue}) calc(var(--#{$title}-s) + #{$saturation})
+      calc(var(--#{$title}-l) + #{$lightness}) / calc(var(--#{$title}-a) + #{$alpha})
+  );
+}
+
+@mixin make-color($title, $color) {
+  // $value: define-color-variables($title, $color);
+
+  // :root {
+  @include define-color-variables($title, $color);
+  // }
+
+  color: hsl(var(--#{$title}-h) var(--#{$title}-s) var(--#{$title}-l) / var(--#{$title}-a));
+}
+
+// @mixin make-link-color($value, $shade: $link-shade-value, $title: "") {
+//   $hsla: hsla(
+//     #{var(--#{$value}-h)} var(--#{$value}-s) var(--#{$value}-l) / var(--#{$value}-a)
+//   );
+
+//   --#{$title}color: #{$hsla};
+
+//   color: var(--#{$title}color) !important;
+
+//   &:hover,
+//   &:focus {
+//     @include make-color($value, $shade: $link-shade-value, $title: "");
+//   }
+// }
+
+// @mixin make-color($value, $shade: 0, $title: "") {
+//   $hsla: hsl(
+//     var(--#{$value}-h) var(--#{$value}-s) calc(var(--#{$value}-l) * $shade) /
+//       var(--#{$value}-a)
+//   );
+
+//   --#{$title}color: #{$hsla};
+
+//   color: var(--#{$title}color) !important;
+
+//   & a {
+//     @include make-link-color($value, $shade: $link-shade-value);
+//   }
+// }
+
+// @mixin make-background-color($value, $title: "") {
+//   $hsla: hsl(
+//     var(--#{$value}-h) var(--#{$value}-s) var(--#{$value}-l) /
+//       var(--#{$value}-a)
+//   );
+
+//   --#{$title}background-color: #{$hsla};
+
+//   background-color: var(--#{$title}background-color) !important;
+// }
+
+// @mixin make-border-color($value, $title: "", $alpha: null) {
+//   @if $alpha {
+//     $hsla: hsl(var(--#{$value}-h) var(--#{$value}-s) var(--#{$value}-l) / #{$alpha});
+
+//     --#{$title}border-color: #{$hsla};
+//   } @else {
+//     $hsla: hsl(
+//       var(--#{$value}-h)
+//         var(--#{$value}-s)
+//         var(--#{$value}-l) /
+//         var(--#{$value}-a)
+//     );
+
+//     --#{$title}border-color: #{$hsla};
+//   }
+
+//   border-color: var(--#{$title}border-color) !important;
+// }

package/sass/mixins/_gradient.scss

@@ -1,5 +1,4 @@
 @use "sass:color";
-
 @use "./../variables" as *;
 
 @mixin gradient-background($color: null) {

package/sass/mixins/_grid.scss

@@ -1,19 +1,18 @@
 @use "sass:math";
 @use "sass:color";
-
 @use "./../variables" as *;
 
 %col {
-  --#{$prefix}flex: 0 0 auto;
-  --#{$prefix}width: 100%;
-  --#{$prefix}max-width: 100%;
-  --#{$prefix}padding-x: calc(#{$grid-gutter-x} * 1);
+  --flex: 0 0 auto;
+  --width: 100%;
+  --max-width: 100%;
+  --padding-x: calc(#{$grid-gutter-x} * 1);
 
-  flex: var(--#{$prefix}flex);
-  width: var(--#{$prefix}width);
-  max-width: var(--#{$prefix}max-width);
-  padding-right: var(--#{$prefix}padding-x);
-  padding-left: var(--#{$prefix}padding-x);
+  flex: var(--flex);
+  width: var(--width);
+  max-width: var(--max-width);
+  padding-right: var(--padding-x);
+  padding-left: var(--padding-x);
 }
 
 @mixin make-divider() {
@@ -40,7 +39,7 @@
   & > * {
     @extend %col;
 
-    --#{$prefix}padding-x: calc(#{$grid-gutter-x} * #{$margin-x});
+    --padding-x: calc(#{$grid-gutter-x} * #{$margin-x});
 
     @if $grid-gutter-y {
       margin-top: $grid-gutter-y;
@@ -48,12 +47,12 @@
   }
 
   & > .col {
-    --#{$prefix}flex: 1 0 0%;
+    --flex: 1 0 0%;
   }
 
   & > .col--auto {
-    --#{$prefix}flex: 0 0 auto;
-    --#{$prefix}width: auto;
+    --flex: 0 0 auto;
+    --width: auto;
   }
 
   & > .divider {

package/sass/mixins/_group.scss

@@ -9,7 +9,7 @@
   position: relative;
 
   @if $enable-margins {
-    margin-bottom: $spacer;
+    margin-bottom: var(--spacer);
   } @else {
     margin-bottom: 0;
   }

package/sass/mixins/_list.scss

@@ -7,7 +7,7 @@
   padding: 0;
 
   @if $enable-margins {
-    margin-bottom: $spacer;
+    margin-bottom: var(--spacer);
   } @else {
     margin-bottom: 0;
   }

package/sass/mixins/_pill.scss

@@ -1,11 +1,11 @@
 @use "sass:color";
-
 @use "./../variables" as *;
 @use "./../functions" as *;
 @use "./../mixins/gradient" as *;
 
 @mixin pill-variant($background, $color) {
   color: $color;
+
   @include gradient-background($background);
 
   &.pill--link {

package/sass/mixins/_rfs.scss

@@ -6,7 +6,7 @@
 @use "sass:map";
 @use "sass:math";
 @use "sass:meta";
-
+@use "sass:string";
 @use "./../functions" as *;
 @use "./../variables" as *;
 
@@ -135,6 +135,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
         @content;
       }
     }
+
     @include rfs-media-query {
       @content;
     }
@@ -169,7 +170,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
   }
 
   // Remove first space
-  @return unquote(str-slice($val, 2));
+  @return unquote(string.slice($val, 2));
 }
 
 // Helper function to get the responsive value calculated by RFS
@@ -223,12 +224,12 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
   }
 
   // Remove first space
-  @return unquote(str-slice($val, 2));
+  @return unquote(string.slice($val, 2));
 }
 
 // RFS mixin
 @mixin rfs($values, $property: font-size) {
-  @if $values != null {
+  @if $values {
     $val: rfs-value($values);
     $fluid-val: rfs-fluid-value($values);