refactor(variant.create()): add $type argument to retrieve from color name to set key.

Author: sciborrudnicki

variant/_variant.create.function.scss

@@ -3,12 +3,15 @@
 @use '../map';
 @use '../selector';
 
+// Functions.
+@use '../color/functions/name/name.retrieve.function' as *;
+
 // Status: DONE
 // The `variant.create()` creates a variant built from `$value`.
 // @param `$value` A list or string type to create a variant.
 // @param `$modifier`
 // @returns The returned value is a variant of map type where (class: value).
-@function create($value, $modifier: null) {
+@function create($value, $modifier: null, $type: null) {
   $result: ();
   @if type-of($value) == map {
     @each $name, $side-variant in $value {
@@ -31,10 +34,17 @@
       @if type-of($value) == list {
         // Remove !important.
         $key: list.remove-value($key, !important);
-        @if list.separator($key) == comma {
-          $key: list.nth($key, 1);
-        } @else if list.separator($key) == space and list.has-list($key) {
-          $key: list.remove-list($key);
+
+        // FEATURE: Color variant.
+        @if $type == color {
+          $key: map.get(retrieve($key), name);
+        } @else {
+          // FEATURE: Check key.
+          @if list.separator($key) == comma {
+            $key: list.nth($key, 1);
+          } @else if list.separator($key) == space and list.has-list($key) {
+            $key: list.remove-list($key);
+          }
         }
       }
 
@@ -80,6 +90,8 @@
 // @debug create((secondary (color '!important', dark, light)));
 // @debug create((secondary (color, (dark, -30%), (light, 60%))));
 
+// @debug create((accent, (color, [(light, 30%), (dark, 50%)], dark, light)));
+
 //
 // @debug create((medium: 1px solid red, large: 2px solid blue)); // ((): ((): (medium: 1px solid red)))
 // @debug create(((top, right): (medium: 1px solid red, large: 2px solid blue))); // ((): ((top, right): (medium: 1px solid red, large: 2px solid blue)))