feat(color/palette): add module to create color palette.

color/palette/_index.scss

@@ -0,0 +1,3 @@
+@forward 'palette.create.function';
+@forward 'palette.get.function';
+@forward 'palette.remove.function';

color/palette/_palette.create.mixin.scss

@@ -0,0 +1,53 @@
+// Modules.
+@use '../../function';
+@use '../../list';
+@use '../../map';
+@use '../../meta';
+@use '../../variant';
+
+// Functions.
+@use '../functions/color.name-nest.function' as *;
+@use '../functions/color.name.function' as *;
+
+// Add.
+function.$functions: map.set(function.$functions, color, name, meta.get-function(name));
+
+// Status: DONE
+// NOTE: consider adding bracketed adjust
+// The `palette.create()` function.
+// @arbitrary `$values...`
+@mixin 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);
+
+      // Palette name.
+      @include list.each($name) using($name, $i) {
+        // Color.
+        @include list.each($color) using($color, $j) {
+          @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
+          ));
+        }
+      }
+    }
+  }
+  @content($palette);
+}

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

@@ -0,0 +1,162 @@
+// Functions.
+@use 'palette.create.mixin' as *;
+@use 'palette.get.function' as *;
+
+// Palette
+// $palette: (
+//   palette 1: (
+//     class 1: color name dark,
+//     class 2: color name light,
+//   ),
+
+//   palette 2: (
+//     class 1: color dark,
+//     class 2: color light,
+//   ),
+
+//   palette 3: (
+//     class 1: color dark,
+//     class 2: color light,
+//   )
+// );
+
+// LVHA-order: :link — :visited — :hover — :active
+
+@include create((
+  // FEATURE: Single color in color variant
+  // primary: color,
+  // primary: primary,
+  // outline primary: primary,
+
+  // FEATURE: Multiple colors in palette
+  // core: (disabled, error,),
+
+  // FEATURE: Multiple palettes with color variant
+  // (primary, secondary): primary,
+
+  // FEATURE: Multiple palettes with color variants
+  // (primary, secondary): (primary, secondary),
+
+  // FEATURE: Modified lightness of color variant
+  // control: ((disabled, 15%), error,), // 15% lightness
+  // control: ((disabled, 15% 5%), error,), // 15% lightness (link,visited,active), 5% (hover)
+  // control: ((disabled, '*' 15%, '-' 0.2), error,),
+  // control: ((disabled, 15%, 0.5), error,),
+  // control: ((disabled, 20deg, 30%, 15%, 0.5), error,),
+
+  // FEATURE:
+  // core: (secondary, (primary (color, dark, light))),
+  // core: ((primary dark, primary light), error, ), // TODO:
+  // core: (((primary dark, 15%), (primary light, 5%)), error, ), // TODO:
+
+  // FEATURE: Multiple colors in variant
+  // core: ((primary dark, secondary dark), error), // TODO:
+
+  // FEATURE: Color names
+  // control: (disabled, error, info, success, warning),
+  // +control: (disabled, error, info, success, warning),
+  // +outline primary: primary,
+
+  // FEATURE: Shades
+  // primary: (color, dark, light),
+  // (primary small, secondary large): (color, dark, light),
+
+  // FEATURE: + indicator
+  // +primary: color,
+  // +primary: (color, dark, light),
+  // (primary, +secondary): (color, dark, light),
+  // (primary, +secondary): (top (color, dark, light)),
+  // (primary, +secondary): ((top, bottom) (color, dark, light)),
+  // +core: (secondary, (primary (color, dark, light))),
+  // +core: ((secondary, 10%), (primary ((color, 5%), (dark, 1%), (light, 9%)))), // TODO:
+  // (+basic, +core): (secondary, (primary (color, dark, light))),
+
+  // FEATURE: Nest name + shade
+  // secondary: (secondary (color, (dark, -30%), (light, 60%))),
+  // secondary: (secondary (color, (ultra dark, -30%), (mega light, 60%)),),
+  // gray: ('gray' (color, dark, light)),
+
+  // core: (dark, light, accent, (primary (color, dark, light)), (secondary (color, dark, light))),
+  // (+bg, +border): (color, dark, light)
+)) using($palette) {
+  @debug $palette;
+
+  // @debug get($palette, bg);
+}
+
+// ()
+// (core: ([primary small, secondary large]: [color, dark, light]))
+
+// Examples.
+// not converted palette
+// @debug create((core: (primary: primary color, secondary: secondary color, accent: accent color))); // (core: (primary: primary color, secondary: secondary color, accent: accent color))
+
+// create core palette with primary color variant
+// @debug create((core: primary));
+// @debug create((core: primary light));
+
+// create core palette with disabled and error color variant
+// @debug create((core: (disabled, error,)));
+
+// create core palette
+// @debug create((core: ([primary small, secondary large]: [color, dark, light])));
+
+// create gray palette with gray colors
+// @debug create((['gray']: [xs [color, dark, light]]));
+
+// create core palette with gray colors
+// @debug create((core: (['gray']: [xs [color, dark, light]])));
+
+// (string: string)
+// @debug create((primary: primary)); // (primary: ("primary": primary color))
+// @debug create((primary: (primary: primary))); // (primary: ("primary": primary color))
+
+// (list: string)
+// @debug create((outline primary: primary)); // (outline primary: ("primary": primary color))
+// @debug create(((primary, secondary): primary)); // (primary: ("primary": primary color), secondary: ("primary": primary color))
+
+// (string: list)
+// @debug create((primary: primary dark)); // (primary: (primary dark: primary color dark))
+
+// (string: (string,))
+// @debug create((control: (disabled, error, info, success, warning))); // (control: ("disabled": disabled color, "error": error color, "info": info color, "success": success color, "warning": warning color))
+
+// (list: (string,))
+// @debug create((border outline: (disabled, error, info, success, warning))); // (border outline: ("disabled": disabled color, "error": error color, "info": info color, "success": success color, "warning": warning color))
+
+// ([string]: [string,])
+// @debug create(([primary]: [color,])); // (primary: (primary: primary color))
+
+// ([string, string]: [string, string])
+// @debug create(([primary, secondary]: [color, dark])); // (primary: (primary: primary color, primary dark: primary color dark), secondary: (secondary: secondary color, secondary dark: secondary color dark))
+
+// Bracketed
+// ([string]: [string, [string]])
+// @debug create((['gray']: [xs [color, dark, light]])); // ("gray": (gray xs: gray xs color, gray xs dark: gray xs color dark, gray xs light: gray xs color light))
+// @debug create((['gray']: [xs] [color, dark, light])); // ("gray": (gray xs: gray xs color, gray xs dark: gray xs color dark, gray xs light: gray xs color light))
+
+// ([string]: [string [string]])
+// @debug create((['gray']: [extra small [color, dark, light]])); // ("gray": (gray extra small: gray extra small color, gray extra small dark: gray extra small color dark, gray extra small light: gray extra small color light))
+// @debug create((['gray']: [extra small] [color, dark, light])); // ("gray": (gray extra small: gray extra small color, gray extra small dark: gray extra small color dark, gray extra small light: gray extra small color light))
+// @debug create((['gray']: [extra small [a color, b dark, light c]]));
+
+// ([list, string]: [string [string]])
+// @debug create(([primary extra, secondary]: [ultra small [color, dark, light]])); // (primary extra: (primary extra ultra small: primary extra ultra small color, primary extra ultra small dark: primary extra ultra small color dark, primary extra ultra small light: primary extra ultra small color light), secondary: (secondary ultra small: secondary ultra small color, secondary ultra small dark: secondary ultra small color dark, secondary ultra small light: secondary ultra small color light))
+// @debug create(([primary extra, secondary]: ([ultra small [color, dark, light]], [large [color, dark, light]]))); // (primary extra: (primary extra ultra small: primary extra ultra small color, primary extra ultra small dark: primary extra ultra small color dark, primary extra ultra small light: primary extra ultra small color light, primary extra large: primary extra large color, primary extra large dark: primary extra large color dark, primary extra large light: primary extra large color light), secondary: (secondary ultra small: secondary ultra small color, secondary ultra small dark: secondary ultra small color dark, secondary ultra small light: secondary ultra small color light, secondary large: secondary large color, secondary large dark: secondary large color dark, secondary large light: secondary large color light))
+// @debug create(([primary xs, border]: [color, dark, light])); // (primary xs: (primary xs: primary xs color, primary xs dark: primary xs color dark, primary xs light: primary xs color light), border: (border: border color, border dark: border color dark, border light: border color light))
+// @debug create(([primary large, secondary small]: [xs [color, dark, light]])); // (primary large: (primary large xs: primary large xs color, primary large xs dark: primary large xs color dark, primary large xs light: primary large xs color light), secondary small: (secondary small xs: secondary small xs color, secondary small xs dark: secondary small xs color dark, secondary small xs light: secondary small xs color light))
+// @debug create(([bg, border]: [[color, dark, light]])); // (bg: (bg: bg color, bg dark: bg color dark, bg light: bg color light), border: (border: border color, border dark: border color dark, border light: border color light))
+
+// multiple
+// @debug create((core: (dark, light, accent, [primary [color, dark, light]], [secondary [color, dark, light]]))); // (core: ("dark": dark color, "light": light color, "accent": accent color, primary: primary color, primary dark: primary color dark, primary light: primary color light, secondary: secondary color, secondary dark: secondary color dark, secondary light: secondary color light))
+// @debug create(
+//   // ((primary large, primary small): (secondary, highlight, 'yellow')),
+//   // ([primary large, primary small]: [color, dark, light]),
+//   // (control: (disabled, error, info, success, warning)),
+//   // ([link, 'gray']: [color, dark, light])
+//   // (['gray']: [color, dark, light])
+// );
+
+// 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)));

color/palette/_palette.get.function.scss

@@ -0,0 +1,12 @@
+// Sass.
+@use '../../map';
+
+// Status: DONE
+// The `palette.get()` function.
+// @param `$palette`
+// @param `$name`
+// @param `$color`
+// @returns
+@function get($palette, $name, $color: null) {
+  @return if($color, map.get($palette, ($name, $color)), map.get($palette, $name));
+}

color/palette/_palette.remove.function.scss

@@ -0,0 +1,19 @@
+// Sass.
+@use 'sass:map';
+
+// Status: DONE
+// The `palette.remove()` function.
+// @param `$palette`
+// @param `$name-color`
+// @returns
+@function remove($palette, $name-color) {
+  $result: ();
+  @each $key, $value in $palette {
+    @each $name, $color in $name-color {
+      @if $name == $key {
+        $palette: map.set($palette, $key, map.remove($value, $color...));
+      }
+    }
+  }
+  @return $palette;
+}

color/palette/_palette.spec.scss

@@ -0,0 +1,20 @@
+// Functions.
+@use 'palette.create.function' as *;
+@use 'palette.get.function' as *;
+@use 'palette.remove.function' as *;
+@use 'palette.set.function' as *;
+
+// Examples.
+// $palette: create((primary: (primary, primary dark, secondary, accent)), (core: (disabled, active, error, highlight dark)));
+
+// get
+// @debug get($palette, core); // ("disabled": disabled color, "active": active color, "error": error color, highlight dark: highlight color dark)
+// @debug get($palette, core, disabled); // disabled color
+
+// set
+// $palette: set($palette, (core: (active: active dark)));
+// @debug get($palette, core, active); // active color dark
+
+// remove
+// $palette: remove($palette, (core: (highlight dark, error), primary: (primary dark,)));
+// @debug get($palette, core);