feat(color): add color.palette-color-add() function to add color to…

… variant.

color/palette/_palette.color-add.function.scss

@@ -0,0 +1,46 @@
+// Modules.
+@use '../../list';
+@use '../../map';
+@use '../functions/name';
+
+// Status: DONE
+// The `color.palette-color-add()` function add `$color-name` and/or `$color-names` to `$palette`.
+// @param `$palette` Palette of `map` type.
+// @param `$name` Exact palette name to add color.
+// @param `$class` Variant class name.
+// @param `$separator` Separator for color names.
+// @param `$color-name` Required color name to add.
+// @arbitrary `$color-names...` Additional color names to add.
+// @returns The returned value is list of color names with added `$color-name` and/or `$color-names`.
+@function color-add($palette, $name, $class, $separator, $color-name, $color-names...) {
+  @each $variant-class, $variant-color in map.get($palette, $name) {
+    @if name.index($variant-class, $class) {
+      $palette: map.merge(
+        $palette,
+        $name,
+        ($variant-class: name.append($variant-color, $separator, $color-name, $color-names...))
+      );
+    }
+  }
+  @return $palette;
+}
+
+// Examples.
+// $-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%),
+//   ),
+// );
+
+// @debug color-add($-palette, accent, dark, auto, (secondary color light, 5%));
+// @debug color-add($-palette, primary, dark, space, (secondary color light, 5%), (accent color, 15%));
+// @debug color-add($-palette, primary, dark, auto, (secondary color light, 5%), (accent color, 15%));
+// @debug color-add($-palette, primary, dark, comma, (secondary color light, 5%), (accent color, 15%));