refactor(color/variant): move variant mixins to the variant directory.

color/_color.spec.scss

@@ -18,3 +18,21 @@
 // @debug color.lightness-level-var(dark); // var(--s-dark-color-l-l)
 // @debug color.name(dark); // dark color
 // @debug color.saturation-var(light); // var(--s-light-color-s)
+
+// color.variant()
+// @include color.variant((border: primary, background: secondary));
+// @include color.variant-create((border: (top: (primary: primary dark))), $modifier: (property: (base: outline)));
+
+// color.variant-create()
+// 1.
+// @include color.variant-create((border: primary dark));
+
+// 2.
+// @include color.variant-create((border: (primary: primary dark)));
+
+// 3.
+// @include color.variant-create((border: (top: (primary: primary dark))));
+
+// 4.
+// @include color.variant-create((border: (top: (left: (primary: primary dark)))));
+// @include color.variant-create((border: (block: ((start, end): (primary: primary dark)))));

color/_index.scss

@@ -1,4 +1,6 @@
 @forward 'functions';
 @forward 'mixins';
-@forward 'scheme' as scheme-*;
 @forward 'sass:color';
+@forward 'scheme' as scheme-*;
+@forward 'variant' as variant-*;
+@forward 'variant/variant.mixin';

color/mixins/_index.scss

@@ -7,5 +7,3 @@
 @forward 'color.color.mixin';
 @forward 'color.property-color.mixin';
 @forward 'color.scheme-color.mixin';
-@forward 'color.variant-create.mixin';
-@forward 'color.variant.mixin';

color/variant/_index.scss

@@ -0,0 +1 @@
+@forward 'variant.create.mixin';

color/mixins/_color.variant-create.mixin.scss → color/variant/_variant.create.mixin.scss

@@ -3,21 +3,16 @@
 
 // Modules.
 @use '../../class';
-@use '../../list/has';
-@use '../../list/remove';
 @use '../../map';
 @use '../../meta';
-@use '../../property';
 @use '../../selector';
-@use '../../string';
-@use '../../variant';
 
 // Functions.
 @use '../../list/list.each.mixin' as *;
 @use '../../list/list.nth.function' as *;
 
 // Mixins.
-@use 'color.color.mixin' as *;
+@use '../mixins/color.color.mixin' as *;
 
 // Status: TODO:
 // The `color.variant-create()` mixin.
@@ -33,9 +28,9 @@
 // @param `$property`
 // @param `$function`
 // @param `$modifier`
-@mixin variant-create(
+@mixin create(
   $variant,
-  $combine: false false false,
+  $combine: false,
   $hue: null,
   $saturation: null,
   $lightness: null,
@@ -47,8 +42,7 @@
   $modifier: null,
 ) {
   $modifier: map.deep-merge((
-    2: (class: (pre-middle: color)),
-    class: (pre-attribute: color),
+    class: (prop-attribute: color),
     property: (prop-attribute: color),
   ), $modifier or ());
   @include class.variant-create(

color/mixins/_color.variant-create.mixin.spec.scss → color/variant/_variant.create.mixin.spec.scss

@@ -12,7 +12,7 @@
 // TODO:
 
 // Mixins.
-@use 'color.variant-create.mixin' as *;
+@use 'variant.create.mixin' as *;
 
 // ((border, outline): (primary: primary dark)), $property: (attribute: color)
 

color/mixins/_color.variant.mixin.scss → color/variant/_variant.mixin.scss

@@ -9,14 +9,13 @@
 @use '../../list/remove';
 @use '../../map';
 @use '../../property';
-@use '../../string';
 
 // Functions.
 @use '../../list/list.nth.function' as *;
 @use '../../selector/selector.class.function' as *;
 
 // Mixins.
-@use 'color.color.mixin' as *;
+@use '../mixins/color.color.mixin' as *;
 
 // Status: TODO:
 // The `color.variant()` mixin.

color/mixins/_color.variant.mixin.spec.scss → color/variant/_variant.mixin.spec.scss

@@ -21,7 +21,7 @@
 
 
 // Mixins.
-@use 'color.variant.mixin' as *;
+@use 'variant.mixin' as *;
 
 // TODO: hsla
 // @include variant((border color: primary 'hsla'));