oo-loop 1.0.3 → 1.1.0

package/scss/components/_template.scss

@@ -1,59 +1,65 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use '../fn';
+
 // Template Areas
 
 @function getAreaNames($areas) {
   $list: ();
   @each $area in $areas {
-    $areaNames: split(' ', $area);
+    $areaNames: fn.splitDeep(' ', $area);
     @each $areaName in $areaNames {
-      $hasValueIndex: str-index($areaName, '|');
-      $areaName: if($hasValueIndex, str-slice($areaName, 1, $hasValueIndex - 1), $areaName);
-      @if notInList($areaName, $list) {
-        $list: join($list, $areaName);
+      $hasValueIndex: string.index($areaName, '|');
+      $areaName: if($hasValueIndex, string.slice($areaName, 1, $hasValueIndex - 1), $areaName);
+      @if fn.notInList($areaName, $list) {
+        $list: list.join($list, $areaName);
       }
     }
   }
   @return $list;
 }
 @function getAreaColumnNumber($areas) {
-  @if isEmpty($areas) {
+  @if fn.isEmpty($areas) {
     @return 0;
   }
   @each $area in $areas {
-    $areaNames: split(' ', $area);
-    @return length($areaNames);
+    $areaNames: fn.splitDeep(' ', $area);
+    @return list.length($areaNames);
   }
 }
 
 @mixin makeGridTemplate($grid-template-areas) {
-  @if str-index(inspect($grid-template-areas), '|') {
+  @if string.index(meta.inspect($grid-template-areas), '|') {
     $template-areas: ();
     $columnsMap: ();
 
     @each $row in $grid-template-areas {
-      $columnItems: split(' ', $row);
+      $columnItems: fn.splitDeep(' ', $row);
       $areaNames: null;
-      @for $i from 1 through length($columnItems) {
-        $columnName: nth($columnItems, $i);
-        $hasValueIndex: str-index($columnName, '|');
+      @for $i from 1 through list.length($columnItems) {
+        $columnName: list.nth($columnItems, $i);
+        $hasValueIndex: string.index($columnName, '|');
 
-        $areaName: if($hasValueIndex, str-slice($columnName, 1, $hasValueIndex - 1), $columnName);
+        $areaName: if($hasValueIndex, string.slice($columnName, 1, $hasValueIndex - 1), $columnName);
         $areaNames: if(null == $areaNames, $areaName, $areaNames + ' #{$areaName}');
 
-        $currentColumnValue: getMapValue($columnsMap, $i);
+        $currentColumnValue: fn.getMapValue($columnsMap, $i);
 
         @if $hasValueIndex {
-          $number: toNumber(str-slice($columnName, $hasValueIndex + 1, str-length($columnName)));
-          $columnsMap: setMapValue($columnsMap, $i, $number);
+          $number: fn.toNumber(string.slice($columnName, $hasValueIndex + 1, string.length($columnName)));
+          $columnsMap: fn.setMapValue($columnsMap, $i, $number);
         } @else if $currentColumnValue == null {
-          $columnsMap: setMapValue($columnsMap, $i, auto);
+          $columnsMap: fn.setMapValue($columnsMap, $i, auto);
         }
       }
-      $template-areas: join($template-areas, "#{$areaNames}");
+      $template-areas: list.join($template-areas, "#{$areaNames}");
     }
 
     $template-columns: null;
     @each $index, $value in $columnsMap {
-      $template-columns: if(isEmpty($template-columns), $value, append($template-columns, $value, 'space'));
+      $template-columns: if(fn.isEmpty($template-columns), $value, list.append($template-columns, $value, 'space'));
     }
 
     grid-template-areas: $template-areas;
@@ -79,7 +85,7 @@
 @mixin makeGridOnBreakpoints($grid-template-areas) {
   $area-names-list: ();
   @each $breakpoint, $areas in $grid-template-areas {
-    $area-names-list: getAreaNames(join($area-names-list, getAreaNames($areas)));
+    $area-names-list: getAreaNames(list.join($area-names-list, getAreaNames($areas)));
     @include breakpoint($breakpoint) {
       @include makeGridTemplate($areas);
     }
@@ -99,25 +105,25 @@
   }
 }
 @mixin makeGapOnScreens($screens, $gap-sizes, $vertical: false) {
-  @if isMap($screens) {
+  @if fn.isMap($screens) {
     @each $class, $gap-names in $screens {
-      @if isEmpty($gap-names) {
+      @if fn.isEmpty($gap-names) {
         @include makeGapOnBreakpoint($class, $gap-sizes, $vertical);
       } @else {
-        $gap-names: toList($gap-names);
+        $gap-names: fn.toList($gap-names);
         $gap-targets: ();
         @each $name in $gap-names {
           $size: oo(#{$name}, $gap-sizes);
           @if $size{
-            $gap-targets: map-merge($gap-targets, ($name: $size));
+            $gap-targets: map.merge($gap-targets, ($name: $size));
           }
         }
         @include makeGapOnBreakpoint($class, $gap-targets, $vertical);
       }
     }
   } @else {
-    @if isString($screens) {
-      $screens: toList($screens);
+    @if fn.isString($screens) {
+      $screens: fn.toList($screens);
     }
     @each $class in $screens {
       @include makeGapOnBreakpoint($class, $gap-sizes, $vertical);
@@ -126,11 +132,11 @@
 }
 
 @mixin makeTemplate($template) {
-  @if isList($template) {
+  @if fn.isList($template) {
     [#{ooPrefix()}-template] {
       @include makeGrid($template);
     }
-  } @else if isMap($template) {
+  } @else if fn.isMap($template) {
     @if areKeysBreakpoints($template) {
       [#{ooPrefix()}-template] {
         @include makeGridOnBreakpoints($template);
@@ -138,9 +144,9 @@
     } @else {
       @each $area-name, $grid in $template {
         [#{ooPrefix()}-template~="#{$area-name}"] {
-          @if isMap($grid) {
+          @if fn.isMap($grid) {
             @include makeGridOnBreakpoints($grid);
-          } @else if isList($grid) {
+          } @else if fn.isList($grid) {
             @include makeGrid($grid);
           }
         }
@@ -152,18 +158,18 @@
 @mixin Template($param: null) {
   @include initElement('template', $param);
 
-  @if isNotEmpty(oo('template.areas')) {
+  @if fn.isNotEmpty(oo('template.areas')) {
     [#{ooPrefix()}-template] {
       display: grid;
     }
     @include makeTemplate(oo('template.areas'));
   }
 
-  @if isString(oo('template.gap')) or isNumber(oo('template.gap')) {
+  @if fn.isString(oo('template.gap')) or fn.isNumber(oo('template.gap')) {
     [#{ooPrefix()}-template] {
       grid-gap: oo('template.gap');
     }
-  } @else if isMap(oo('template.gap')) and areKeysBreakpoints(oo('template.gap')) {
+  } @else if fn.isMap(oo('template.gap')) and areKeysBreakpoints(oo('template.gap')) {
     [#{ooPrefix()}-template] {
       @include generatePropertyBreakpoints('grid-gap', oo('template.gap'));
     }
@@ -171,7 +177,7 @@
 
   $gap-sizes: oo('template.gap.sizes');
   @if $gap-sizes {
-    $gap-sizes: if(isString($gap-sizes), (default: $gap-sizes), $gap-sizes);
+    $gap-sizes: if(fn.isString($gap-sizes), (default: $gap-sizes), $gap-sizes);
     @if areKeysBreakpoints($gap-sizes) {
       [#{ooPrefix()}-template] {
         @include generatePropertyBreakpoints('grid-gap', $gap-sizes);
@@ -179,13 +185,13 @@
     } @else {
       $non-responsise-gap-sizes: ();
       @each $gap-name, $gap-size in $gap-sizes {
-        $selector: if(isEmpty($gap-name) or $gap-name == 'default', 'template', 'template~="gap-#{$gap-name}"');
+        $selector: if(fn.isEmpty($gap-name) or $gap-name == 'default', 'template', 'template~="gap-#{$gap-name}"');
         [#{ooPrefix()}-#{$selector}] {
-          @if (isMap($gap-size)) {
+          @if (fn.isMap($gap-size)) {
             @include generatePropertyBreakpoints('grid-gap', $gap-size);
           } @else {
             grid-gap: $gap-size;
-            $non-responsise-gap-sizes: map-merge(($gap-name: $gap-size), $non-responsise-gap-sizes)
+            $non-responsise-gap-sizes: map.merge(($gap-name: $gap-size), $non-responsise-gap-sizes)
           }
         }
       }
@@ -198,7 +204,7 @@
 
   $vgap-sizes: oo('template.gap.vsizes');
   @if $vgap-sizes {
-    $vgap-sizes: if(isString($vgap-sizes), (default: $vgap-sizes), $vgap-sizes);
+    $vgap-sizes: if(fn.isString($vgap-sizes), (default: $vgap-sizes), $vgap-sizes);
     @if areKeysBreakpoints($vgap-sizes) {
       [#{ooPrefix()}-template] {
         @include generatePropertyBreakpoints('grid-row-gap', $vgap-sizes);
@@ -206,13 +212,13 @@
     } @else {
       $non-responsise-vgap-sizes: ();
       @each $gap-name, $gap-size in $vgap-sizes {
-        $selector: if(isEmpty($gap-name) or $gap-name == 'default', 'template', 'template~="vgap-#{$gap-name}"');
+        $selector: if(fn.isEmpty($gap-name) or $gap-name == 'default', 'template', 'template~="vgap-#{$gap-name}"');
         [#{ooPrefix()}-#{$selector}] {
-          @if (isMap($gap-size)) {
+          @if (fn.isMap($gap-size)) {
             @include generatePropertyBreakpoints('grid-row-gap', $gap-size);
           } @else {
             grid-row-gap: $gap-size;
-            $non-responsise-vgap-sizes: map-merge(($gap-name: $gap-size), $non-responsise-vgap-sizes)
+            $non-responsise-vgap-sizes: map.merge(($gap-name: $gap-size), $non-responsise-vgap-sizes)
           }
         }
       }

package/scss/components/form/_checkbox.scss

@@ -1,7 +1,10 @@
+@use 'sass:math';
+@use '../../fn';
+
 // Checkbox
 
 @mixin checkboxSize($size) {
-  @if isNotNumber($size) {
+  @if fn.isNotNumber($size) {
     @error 'The checkbox #{$size} must be a number';
   }
   $mark-width: $size * 0.4;
@@ -10,13 +13,13 @@
 
   & + label {
     &::after {
-      margin-right: $size / 2.5;
+      margin-right: math.div($size, 2.5);
       min-width: $size;
       min-height: $size;
     }
 
     & + [#{ooPrefix()}-checkbox] + label {
-      margin-top: $size / 3;
+      margin-top: math.div($size, 3);
     }
   }
   &:checked + label::before {
@@ -70,7 +73,7 @@
       }
     }
 
-    @if isNotEmpty(oo('checkbox.sizes')) {
+    @if fn.isNotEmpty(oo('checkbox.sizes')) {
       @each $name, $size in oo('checkbox.sizes') {
         @if $name == 'default' {
           @include checkboxSize($size);
@@ -81,7 +84,7 @@
         }
       }
 
-      @if isNotEmpty(oo('checkbox.screens')) {
+      @if fn.isNotEmpty(oo('checkbox.screens')) {
         @each $breakpoint in oo('checkbox.screens') {
           @include breakpoint($breakpoint) {
             @each $name, $size in oo('checkbox.sizes') {

package/scss/components/form/_input.scss

@@ -1,8 +1,10 @@
+@use '../../fn';
+
 // Input
 
 @mixin Label($param: null) {
   @include initElement('label', $param);
-  @if isNotEmpty(oo('label.props')) {
+  @if fn.isNotEmpty(oo('label.props')) {
     label {
       @include generateProperties(oo('label.props'));
     }
@@ -19,7 +21,7 @@
     @include generateStatesProperties(oo('input.states'));
   }
 
-  @if isNotEmpty(oo('input.variants')) {
+  @if fn.isNotEmpty(oo('input.variants')) {
     @include generateComponentVariants('input', oo('input.variants'));
   }
 }

package/scss/components/form/_radio.scss

@@ -1,24 +1,27 @@
+@use 'sass:math';
+@use '../../fn';
+
 // Radio
 
 @mixin radioSize($size) {
-  @if isNotNumber($size) {
+  @if fn.isNotNumber($size) {
     @debug $size;
     @error 'The radio $size must be a number';
   }
 
   & + label {
     &::after {
-      margin-right: $size / 2;
+      margin-right: math.div($size, 2);
       min-width: $size;
       min-height: $size;
     }
     & + [#{ooPrefix()}-radio] + label {
-      margin-top: $size / 3;
+      margin-top: math.div($size, 3);
     }
   }
 
   &:checked + label::before {
-    $halfSize: $size / 2;
+    $halfSize: math.div($size, 2);
     top: calc(50% - #{$halfSize});
     min-width: $size;
     min-height: $size;
@@ -70,7 +73,7 @@
       }
     }
 
-    @if isNotEmpty(oo('radio.sizes')) {
+    @if fn.isNotEmpty(oo('radio.sizes')) {
       @each $name, $size in oo('radio.sizes') {
         @if $name == 'default' {
           @include radioSize($size);
@@ -81,7 +84,7 @@
         }
       }
 
-      @if isNotEmpty(oo('radio.screens')) {
+      @if fn.isNotEmpty(oo('radio.screens')) {
         @each $breakpoint in oo('radio.screens') {
           @include breakpoint($breakpoint) {
             @each $name, $size in oo('radio.sizes') {

package/scss/components/form/_select.scss

@@ -1,27 +1,30 @@
+@use 'sass:map';
+@use '../../fn';
+
 // Select
 
 @mixin caretTheme($theme) {
-  @if map-has-key($theme, 'size') {
-    &::before { width: (map-get($theme, 'size') * 4); }
+  @if map.has-key($theme, 'size') {
+    &::before { width: (map.get($theme, 'size') * 4); }
     &::after {
-      right: map-get($theme, 'size') * 1.5;
-      width: map-get($theme, 'size');
-      height: map-get($theme, 'size');
+      right: map.get($theme, 'size') * 1.5;
+      width: map.get($theme, 'size');
+      height: map.get($theme, 'size');
     }
   }
-  @if map-has-key($theme, 'weight') {
+  @if map.has-key($theme, 'weight') {
     &::after {
-      border-bottom-width: map-get($theme, 'weight');
-      border-right-width: map-get($theme, 'weight');
+      border-bottom-width: map.get($theme, 'weight');
+      border-right-width: map.get($theme, 'weight');
     }
   }
-  @if map-has-key($theme, 'bgcolor') {
-    &::before { background-color: map-get($theme, 'bgcolor'); }
+  @if map.has-key($theme, 'bgcolor') {
+    &::before { background-color: map.get($theme, 'bgcolor'); }
   }
-  $border: map-get($theme, 'border');
-  @if map-has-key($theme, 'border') {
+  $border: map.get($theme, 'border');
+  @if map.has-key($theme, 'border') {
     &::before {
-      @if isColor($border) {
+      @if fn.isColor($border) {
         border-color: $border;
       } @else if $border != oo('select.props.border') {
         border-top: $border;
@@ -30,10 +33,10 @@
       }
     }
   }
-  @if map-has-key($theme, 'color') {
+  @if map.has-key($theme, 'color') {
     &::after {
-      border-bottom-color: map-get($theme, 'color');
-      border-right-color: map-get($theme, 'color');
+      border-bottom-color: map.get($theme, 'color');
+      border-right-color: map.get($theme, 'color');
     }
   }
 }
@@ -88,7 +91,7 @@
         display: none;
       }
 
-      @if oo('select.props') == oo('input.props') and inList('input', 'include') {
+      @if oo('select.props') == oo('input.props') and fn.inList('input', 'include') {
         @extend [#{ooPrefix()}-input];
       } @else {
         @include generateProperties(oo('select.props'));
@@ -110,55 +113,55 @@
     }
   }
 
-  @if oo('select.variants') and isMap(oo('select.variants')) {
+  @if oo('select.variants') and fn.isMap(oo('select.variants')) {
     @each $name, $props in oo('select.variants') {
 
       [#{ooPrefix()}-select~="#{$name}"] {
         /**
         * @todo Think about a clever way to apply all those exceptions to the selector
         */
-        @if map-has-key($props, 'background-color') {
+        @if map.has-key($props, 'background-color') {
           &::before {
-            background-color: map-get($props, 'background-color');
+            background-color: map.get($props, 'background-color');
           }
-        } @else if map-has-key($props, 'backgroundColor') {
+        } @else if map.has-key($props, 'backgroundColor') {
           &::before {
-            background-color: map-get($props, 'backgroundColor');
+            background-color: map.get($props, 'backgroundColor');
           }
         }
-        @if map-has-key($props, 'border-color') and (
-          not map-has-key($props, 'caret')
-          or isNotColor(getMapValue(map-get($props, 'caret'), 'border'))
+        @if map.has-key($props, 'border-color') and (
+          not map.has-key($props, 'caret')
+          or fn.isNotColor(fn.getMapValue(map.get($props, 'caret'), 'border'))
         ) {
           &::before {
-            border-color: map-get($props, 'border-color');
+            border-color: map.get($props, 'border-color');
           }
-        } @else if map-has-key($props, 'borderColor') and (
-          not map-has-key($props, 'caret')
-          or isNotColor(getMapValue(map-get($props, 'caret'), 'border'))
+        } @else if map.has-key($props, 'borderColor') and (
+          not map.has-key($props, 'caret')
+          or fn.isNotColor(fn.getMapValue(map.get($props, 'caret'), 'border'))
         ) {
           &::before {
-            border-color: map-get($props, 'borderColor');
+            border-color: map.get($props, 'borderColor');
           }
         }
-        @if map-has-key($props, 'border-radius') {
+        @if map.has-key($props, 'border-radius') {
           &::before {
-            border-top-right-radius: map-get($props, 'border-radius');
-            border-bottom-right-radius: map-get($props, 'border-radius');
+            border-top-right-radius: map.get($props, 'border-radius');
+            border-bottom-right-radius: map.get($props, 'border-radius');
           }
-        } @else if map-has-key($props, 'borderRadius') {
+        } @else if map.has-key($props, 'borderRadius') {
           &::before {
-            border-top-right-radius: map-get($props, 'borderRadius');
-            border-bottom-right-radius: map-get($props, 'borderRadius');
+            border-top-right-radius: map.get($props, 'borderRadius');
+            border-bottom-right-radius: map.get($props, 'borderRadius');
           }
         }
 
-        @if map-has-key($props, 'caret') and isMap(map-get($props, 'caret')) {
-          @include caretTheme(map-get($props, 'caret'));
+        @if map.has-key($props, 'caret') and fn.isMap(map.get($props, 'caret')) {
+          @include caretTheme(map.get($props, 'caret'));
         }
         > select {
-          @include generateProperties(map-remove($props, 'caret'));
-          @if map-has-key($props, 'padding') {
+          @include generateProperties(map.remove($props, 'caret'));
+          @if map.has-key($props, 'padding') {
             padding-right: 0;
           }
         }

package/scss/components/form/_toggle.scss

@@ -1,22 +1,25 @@
+@use 'sass:math';
+@use '../../fn';
+
 // Toggle
 
 @mixin toggleSize($size) {
   & + label {
     &::before {
       $toggler-size: $size * .7;
-      top: calc(50% - (#{$toggler-size} / 2));
+      top: calc(50% - (math.div($toggler-size, 2)));
       min-width: $toggler-size;
       height: $toggler-size;
       transform: translate3d(($size * .2), 0, 0);
     }
     &::after {
-      margin-right: $size / 2.5;
+      margin-right: math.div($size, 2.5);
       min-width: $size * 1.8;
       min-height: $size;
     }
 
     & + [#{ooPrefix()}-toggle] + label {
-      margin-top: ($size / 3);
+      margin-top: math.div($size, 3);
     }
   }
 
@@ -62,7 +65,7 @@
       @include generateProperties(oo('toggle.checked.props'));
     }
 
-    @if isMap(oo('toggle.sizes')) {
+    @if fn.isMap(oo('toggle.sizes')) {
       @each $name, $size in oo('toggle.sizes') {
         @if $name == 'default' {
           @include toggleSize($size)

package/scss/functions/_color.scss

@@ -1,3 +1,12 @@
+@use 'sass:color';
+@use 'sass:list';
+@use 'sass:math';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'empty';
+@use 'type';
+@use 'strip';
+
 $colorPalette: (
   black,
   silver,
@@ -175,28 +184,28 @@ $hexValues: ('0', '1', '2', '3', '4' , '5', '6', '7', '8', '9', 'a', 'b', 'c', '
 /// @todo consider rgb, rgba, hls format
 
 @function toColor($colorString) {
-  @if isEmpty($colorString) {
+  @if empty.isEmpty($colorString) {
     @return $colorString;
   }
 
-  @if isColor($colorString) {
+  @if type.isColor($colorString) {
     @return $colorString;
   }
   
   @if isHexColor($colorString) {
-    $stringLength: str-length($colorString);
-    $red: if(str-length($colorString) == 4, stripSpaces(str-slice($colorString, 2, 2)str-slice($colorString, 2, 2)), str-slice($colorString, 2, 3));
-    $green: if(str-length($colorString) == 4, stripSpaces(str-slice($colorString, 3, 3)str-slice($colorString, 3, 3)), str-slice($colorString, 4, 5));
-    $blue: if(str-length($colorString) == 4, stripSpaces(str-slice($colorString, 4, 4)str-slice($colorString, 4, 4)), str-slice($colorString, 6, 7));
+    $stringLength: string.length($colorString);
+    $red: if(string.length($colorString) == 4, strip.stripSpaces(string.slice($colorString, 2, 2)string.slice($colorString, 2, 2)), string.slice($colorString, 2, 3));
+    $green: if(string.length($colorString) == 4, strip.stripSpaces(string.slice($colorString, 3, 3)string.slice($colorString, 3, 3)), string.slice($colorString, 4, 5));
+    $blue: if(string.length($colorString) == 4, strip.stripSpaces(string.slice($colorString, 4, 4)string.slice($colorString, 4, 4)), string.slice($colorString, 6, 7));
     
-    $redDecimal: (index($hexValues, str-slice($red, 1,1)) - 1) * 16 + (index($hexValues, str-slice($red, 2,2)) - 1);
-    $greenDecimal: (index($hexValues, str-slice($green, 1,1)) - 1) * 16 + (index($hexValues, str-slice($green, 2,2)) - 1);
-    $blueDecimal: (index($hexValues, str-slice($blue, 1,1)) - 1) * 16 + (index($hexValues, str-slice($blue, 2,2)) - 1);
+    $redDecimal: (list.index($hexValues, string.slice($red, 1,1)) - 1) * 16 + (list.index($hexValues, string.slice($red, 2,2)) - 1);
+    $greenDecimal: (list.index($hexValues, string.slice($green, 1,1)) - 1) * 16 + (list.index($hexValues, string.slice($green, 2,2)) - 1);
+    $blueDecimal: (list.index($hexValues, string.slice($blue, 1,1)) - 1) * 16 + (list.index($hexValues, string.slice($blue, 2,2)) - 1);
     @return rgb($redDecimal, $greenDecimal, $blueDecimal);
   }
 
   @each $colorItem in $colorPalette {
-    @if to-lower-case($colorString) == to-lower-case(inspect($colorItem)) {
+    @if string.to-lower-case($colorString) == string.to-lower-case(meta.inspect($colorItem)) {
       @return $colorItem; 
     }
   }
@@ -210,14 +219,14 @@ $hexValues: ('0', '1', '2', '3', '4' , '5', '6', '7', '8', '9', 'a', 'b', 'c', '
 /// @return boolean
 
 @function isHexColor($colorString) {
-  @if isEmpty($colorString) {
+  @if empty.isEmpty($colorString) {
     @return false;
   }
 
-  @if str-slice($colorString, 1, 1) == '#'
+  @if string.slice($colorString, 1, 1) == '#'
     and (
-      str-length($colorString) == 4
-      or str-length($colorString) == 7
+      string.length($colorString) == 4
+      or string.length($colorString) == 7
   ) {
     @return true;
   }
@@ -231,10 +240,15 @@ $hexValues: ('0', '1', '2', '3', '4' , '5', '6', '7', '8', '9', 'a', 'b', 'c', '
 /// @return bool
 
 @function isBright($color, $threshold: 188) {
-  @if isNotColor($color) {
+  @if type.isNotColor($color) {
     @return false;
   }
-  @if (((red($color) * 299) + (green($color) * 587) + (blue($color) * 114)) / 1000) >= $threshold {
+
+  $red: color.channel($color, 'red', $space: rgb);
+  $green: color.channel($color, 'green', $space: rgb);
+  $blue: color.channel($color, 'blue', $space: rgb);
+
+  @if (math.div(($red * 299) + ($green * 587) + ($blue * 114), 1000)) >= $threshold {
     @return true;
   }
   @return false;

package/scss/functions/_convert.scss

@@ -1,3 +1,18 @@
+@use 'sass:meta';
+@use 'sass:string';
+@use 'color';
+@use 'list';
+@use 'map';
+@use 'number';
+
+/// Convert pixel unit to Rem unit
+/// @param number $value pixel value
+/// @param number $base pixel value for 1rem
+/// @return number rem value
+
+@function toRem($pixel, $base: 16) {
+  @return math.div((1rem * $pixel), $base);
+}
 
 /// Transform camelCase to kebab-case
 /// @param string $string The string to modify
@@ -5,9 +20,9 @@
 
 @function toKebabCase($string) {
   $kebabString: '';
-  @for $i from 1 through str-length($string) {
-    $character: str-slice($string, $i, $i);
-    $kebabString: $kebabString + if($character == to-lower-case($character) or $i == 1, to-lower-case($character), to-lower-case(-#{$character}));
+  @for $i from 1 through string.length($string) {
+    $character: string.slice($string, $i, $i);
+    $kebabString: $kebabString + if($character == string.to-lower-case($character) or $i == 1, to-lower-case($character), to-lower-case(-#{$character}));
   }
   @return $kebabString;
 }
@@ -19,23 +34,23 @@
 /// @return mixed
 
 @function toType($type, $data) {
-  @if type-of($data) == $type {
+  @if meta.type-of($data) == $type {
     @return $data;
   }
   @if $type == 'string' {
-    @return inspect($data);
+    @return meta.inspect($data);
   }
   @if $type == 'color' {
-    @return toColor($data);
+    @return color.toColor($data);
   }
   @if $type == 'number' {
-    @return toNumber($data);
+    @return number.toNumber($data);
   }
   @if $type == 'list' {
-    @return toList($data);
+    @return list.toList($data);
   }
   @if $type == 'map' {
-    @return toMap($data);
+    @return map.toMap($data);
   }
   @return $data;
 }