refactor(color/palette): change palette creation to handle multiple colors in variant and update examples.

Author: sciborrudnicki

color/palette/_index.scss

@@ -1,4 +1,7 @@
+@forward 'palette.color-add.function';
+@forward 'palette.color-remove.function';
 @forward 'palette.create.function';
 @forward 'palette.create.mixin';
 @forward 'palette.get.function';
 @forward 'palette.remove.function';
+@forward 'palette.variant-add.function';

color/palette/_palette.create.function.scss

@@ -4,10 +4,11 @@
 @use '../../map';
 @use '../../meta';
 @use '../../variant';
+@use '../functions/name';
 
 // Functions.
-@use '../functions/color.name-nest.function' as *;
 @use '../functions/color.name.function' as *;
+@use 'palette.color-add.function' as *;
 
 // Add.
 function.$functions: map.set(function.$functions, color, name, meta.get-function(name));
@@ -16,45 +17,65 @@ function.$functions: map.set(function.$functions, color, name, meta.get-function
 // NOTE: consider adding bracketed adjust
 // The `palette.create()` function.
 // @arbitrary `$values...`
+// @returns
 @function create($values...) {
   $palette: ();
-  @each $name-color in $values {
-    @each $name, $color in $name-color {
-      $nested: variant.indicator-index($name, '+');
-      $name: if($nested, variant.indicator-remove($name, '+'), $name);
-      @if type-of($color) == map {
-        $palette: map.deep-merge($palette, ($name: $color));
-      } @else {
-        // Palette name.
-        $i: 1;
-        @each $name in if(list.separator($name) == space, ($name,), $name) {
-          // Color.
-          $j: 1;
-          @each $color in if(list.separator($color) == space, ($color,), $color) {
-            @if list.has-list($color) and list.separator($color) == space {
-              $color: name-nest(if($nested, $name, null), $color...);
-            } @else {
-              $color: name-nest(if($nested, $name, null), ($color,));
-            }
-
-            $variant: variant.create($color);
-
-            // TODO: Check.
-            @each $class, $color in $variant {
-              @if list.index($class, color) and list.length($class) > 1 {
-                $variant: map.key-replace($variant, $class, list.remove-value($class, color));
-              }
-            }
-
-            $palette: map.deep-merge($palette, ($name: $variant));
-          }
-
-          $j: $j + 1;
+  $variant-colors: ();
+
+  // FEATURE: Get additional colors.
+  $i: 1;
+  @each $variant in $values {
+    @each $name, $colors in $variant {
+      $j: 1;
+      @each $color in $colors {
+        @if list.has-list($color) and list.length($color) > 1 {
+          $variant-color: name.retrieve(list.nth($color, 1));
+          $variant-colors: map.deep-merge(
+            $variant-colors,
+            ($name: (map.get($variant-color, name): list.range($color, 2)))
+          );
+          $color: list.nth($color, 1);
+          $colors: list.set-nth($colors, $j, $color);
         }
 
+        $j: $j + 1;
+      }
+
+      $variant: map.deep-merge($variant, ($name: $colors));
+    }
+
+    $values: list.set-nth($values, $i, $variant);
+    $i: $i + 1;
+  }
+
+  // Nest values.
+  $variant: variant.nest($values...);
+
+  // FEATURE: Add variant.
+  @each $name, $color in $variant {
+    @if type-of($color) == list {
+      $i: 1;
+      @each $c in $color {
+        $color: list.set-nth($color, $i, name.add-indicator($c));
         $i: $i + 1;
       }
+
+      $palette: map.set($palette, $name, variant.create($color, $type: color));
+    }
+  }
+
+  // FEATURE: Add additional colors to variant.
+  @each $name, $variant in $variant-colors {
+    @each $name in if(list.separator($name) == space, ($name,), $name) {
+      $name: variant.indicator-remove($name, '+');
+      @each $class, $colors in $variant {
+        $palette: color-add($palette, $name, $class, auto, $colors...);
+      }
     }
   }
   @return $palette;
 }
+
+// Examples.
+// @debug create(((+accent, primary): (color, ((basic dark) 3% 0.5) (light, 10%) (dark, 5%), light, dark)));
+

color/palette/_palette.create.mixin.spec.scss

@@ -1,4 +1,5 @@
 // Functions.
+@use 'palette.create.function' as palette;
 @use 'palette.create.mixin' as *;
 @use 'palette.get.function' as *;
 
@@ -162,3 +163,10 @@
 // lightness and alpha adjust
 // @debug create((control: ((disabled, 15%), (error, 15% 0.5), info, success, warning))); // (control: ("disabled": (disabled color, 15%), "error": (error color, 15% 0.5), "info": info color, "success": success color, "warning": warning color))
 // @debug create((footer large: outline (disabled, error, info, success, warning)));
+
+
+// TODO: Check.
+// @debug palette.create((primary: (
+//   ((link, visited, hover): secondary (color, dark, light), active: primary (color, dark, light)),
+//   primary (color, dark, light),
+// )));

color/palette/_palette.spec.scss

@@ -1,11 +1,20 @@
 // Functions.
-@use 'palette.create.function' as *;
-@use 'palette.get.function' as *;
-@use 'palette.remove.function' as *;
-@use 'palette.set.function' as *;
+@use '../palette';
 
 // Examples.
-// $palette: create((primary: (primary, primary dark, secondary, accent)), (core: (disabled, active, error, highlight dark)));
+$-palette: (
+  accent: (
+    accent color: (accent basic color, 3%),
+    accent color dark: (accent basic color, 5%),
+    accent color light: (accent basic color, 5%),
+  ),
+
+  primary: (
+    primary color: (primary basic color, 3%),
+    primary color dark: (primary basic color, 5%),
+    primary color light: (primary basic color, 15%),
+  ),
+);
 
 // get
 // @debug get($palette, core); // ("disabled": disabled color, "active": active color, "error": error color, highlight dark: highlight color dark)
@@ -18,3 +27,20 @@
 // remove
 // $palette: remove($palette, (core: (highlight dark, error), primary: (primary dark,)));
 // @debug get($palette, core);
+
+// FEATURE: palette.create()
+// $palette: palette.create((+accent: (basic 3% 0.5, dark)));
+// $palette: palette.create((+accent: (color, (basic 3% 0.5), light, dark)));
+// $palette: palette.create(((+accent, primary): (color, ((basic dark) 3% 0.5) (light, 10%) (dark, 5%), light, dark)));
+
+// @debug palette.color-add($palette, accent, basic dark, auto, (secondary dark, 5%));
+// @debug $palette;
+
+// FEATURE: other
+// @debug color-add($-palette, accent, dark, auto, (secondary color light, 5%));
+// $colors: palette.color-add($-palette, primary, dark, comma, (secondary color light, 5%), (accent color, 15%));
+
+// @debug $colors;
+// @debug palette.color-remove($colors, primary, dark, space, accent, secondary);
+
+// $palette: create((primary: (primary, primary dark, secondary, accent)), (core: (disabled, active, error, highlight dark)));