feat(variant): add variant module to handle variants.

Author: sciborrudnicki

variant/_index.scss

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

variant/_variant.create.function.scss

@@ -0,0 +1,37 @@
+// Sass.
+// @use 'sass:list';
+
+// Modules.
+@use '../list';
+@use '../map';
+
+// Status: DONE
+// The `variant.create()` creates a variant built from `$value`.
+// @param `$value` A list or string type to create a variant.
+// @returns The returned value is a variant of map type where (class: value).
+@function create($value) {
+  $variant: ();
+  @if not (type-of($value) == map) {
+    @each $value in if(list.separator($value) == comma, $value, ($value,)) {
+      // Remove !important.
+      $key: list.remove-value($value, !important);
+
+      // Set variant.
+      $variant: map.merge($variant, ($key: $value));
+    }
+  }
+  @return $variant;
+}
+
+// Examples.
+// string
+// @debug create(right); // (right: right)
+
+// space-separated list
+// @debug create(padding top); // (padding top: padding top)
+
+// comma-separated list
+// @debug create((right, left)); // (right: right, left: left)
+
+//
+// @debug create((right ('+' 15), left)); // (right: right, left: left)

variant/_variant.modify.function.scss

@@ -0,0 +1,67 @@
+// Sass.
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+
+// Status: DONE
+// The `variant.modify()` function adds property suffix e.g. `color`, `radius` to the variant.
+// @param `$variant`
+// @param `$property`
+// @param `$suffix`
+// @returns
+@function modify($variant, $property: null, $suffix: null) {
+  $result: ();
+  @each $name, $side-variant in $variant {
+    @if type-of($side-variant) == map {
+      @each $side, $variant in $side-variant {
+        @if type-of($variant) == map {
+          // Modify `$property`
+          @if $property {
+            $name: if(meta.type-of($name) == map, map.set($name, $class, $property), ($name: $property));
+          }
+          @each $class, $value in $variant {
+            @if $suffix {
+              @if list.separator($class) == comma {
+                $i: 1;
+                @each $-class in $class {
+                  $class: list.set-nth($class, $i, list.join($suffix, $-class, list.separator($class)));
+                  $i: $i + 1;
+                }
+              } @else {
+                $class: list.join($suffix, $class);
+              }
+            }
+
+            $result: map.deep-merge(
+              $result,
+              ($name: ($side: ($class: if($suffix, ($suffix: $value), $value))))
+            );
+          }
+        } @else {
+          $class: $side;
+          $side: $name;
+          $value: $variant;
+          $result: map.deep-merge(
+            $result, (
+              if($property, ((): $property), ()): (
+                if($suffix, (if(list.length($name) > 0, ($name: $suffix), $suffix)), $name): ($class: $value)
+              )
+            )
+          );
+
+        }
+      }
+    } @else {
+      @if $property {
+        $class: $name;
+        $value: $side-variant;
+        $result: map.deep-merge(
+          $result, (
+            ((): $property): (if($suffix, $suffix, ()): ($class: $value))
+          )
+        );
+      }
+    }
+  }
+  @return $result;
+}

variant/_variant.modify.spec.scss

@@ -0,0 +1,81 @@
+// Modules.
+@use '../property';
+@use '../variant';
+
+// border-start-start-radius(suffix)
+// -----  ----  ----  -----
+// name   side        attribute
+
+// Examples.
+// (property: variant)
+// @include property.variant(variant.add-suffix((
+//   border: (medium: 20px),
+//   outline: (medium: (unit 5))
+// ), radius));
+
+
+
+
+// (property: (side {radius}: ({radius} class: value))
+// @include property.variant(variant.add-suffix((
+//   border: (
+//     (top, right): (medium: 20px))
+// ), radius));
+
+
+
+
+// (property: (side: variant))
+// @include property.variant(variant.add-suffix((
+//   (border, outline): (
+//     (start-end, start-start): (
+//       (medium: 20px)
+//     ),
+//     (top-left, top-right): (
+//       (medium: 20px)
+//     )
+//   )
+// ), radius));
+
+
+
+
+// @include property.variant(variant.add-suffix((
+//   (border, outline): (
+//     (inline-end, inline-start): (
+//       (primary dark: primary dark)
+//     )
+//   )
+// ), color));
+
+
+
+
+// @include property.variant(variant.add-suffix((
+//   (border, outline): (
+//     (primary dark: primary color dark)
+//   )
+// ), color));
+
+
+
+
+// @include property.variant(variant.add-suffix((
+//   (border, outline): (primary dark: primary color dark),
+//   test: (secondary dark: secondary color dark),
+//   property: (
+//     (side-top, side-right): (primary dark: primary color dark),
+//     (side-bottom, side-left): (secondary light: secondary color light)
+//   )
+// ), color));
+
+
+
+
+// @include property.variant(variant.add-suffix((
+//   border: (
+//     (inline-start, inline-end): (
+//       (big dotted: dotted)
+//     )
+//   ),
+// ), style));