_variant.create.function.scss

// Sass.
@use 'sass:list';

// Modules.
@use '../map';

// Functions.
@use '../color/name/name.retrieve.function' as color-name-retrieve;
@use '../list/has/has.list.function' as list-has-list;
@use '../list/list.nth.function' as list-nth;
@use '../list/remove/remove.list.function' as list-remove-list;
@use '../list/remove/remove.value.function' as list-remove-value;

// Status: TODO:
// Category: Property variant
// The `variant.create()` creates a variant built from `$value`.
// @param `$value` A list or string type to create a variant.
// @param `$modifier`
// @param `$type`
// @returns The returned value is a variant of map type where (class: value).
@function create($value, $modifier: null, $type: null) {
  $result: ();
  @if type-of($value) == map {
    @each $name, $side-variant in $value {
      @if type-of($side-variant) == map {
        @each $side, $variant in $side-variant {
          @if not (type-of($variant) == map) {
            $result: map.merge($result, (), $name, ($side: $variant));
          }
        }
      } @else {
        $result: map.merge($result, (), (), ($name: $side-variant));
      }
    }
  } @else if not (type-of($value) == map) {
    // @if list.separator($value) == space and list.has-list($value) {
    //   $value: selector.nest($value...);
    // }
    @each $value in if(list.separator($value) == comma, $value, ($value,)) {
      $key: $value;
      @if type-of($value) == list and list.length($value) > 0 {
        // Remove !important.
        $key: list-remove-value.value($key, !important);

        // FEATURE: Color variant.
        @if $type == color {
          $color: color-name-retrieve.retrieve($key);
          $key: map.get($color, no-property-name) or map.get($color, name);
        } @else {
          // FEATURE: Check key.
          @if list.separator($key) == comma {
            $key: list-nth.nth($key, 1);
          } @else if list.separator($key) == space and list-has-list.has-list($key) {
            $key: list-remove-list.list($key);
          }
        }
      }

      $result: map.merge($result, ($key: $value));
    }
  }
  @return $result;
}

// Variant
// (class+property: property-value)
// ((class: property-name): property-value)

// (class+property-name: (class: property-value))
// ((class: property-name): (class: property-value))

// (class+property-name: (class+property-name: (class: property-value)))
// ((class: property-name): ((class+property-name: class+property-name): (class: property-value)))
// ((class: property-name): ((class+property-name: class+property-name): (class: (property-name: property-value))))


// 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 ("+" 15), left: left)
// @debug create((right ('+' 15) !important, left)); // (right: right ("+" 15) !important, left: left)

//
// @debug create((color, (primary dark, -30%), (secondary light, 60%)));
// @debug create((color, (primary dark 30, -30%), (secondary light 60, 60%)));

// TODO:
// @debug create((color, (ultra color dark, -30%), (mega color light, 60%)));
// @debug create((secondary (color, dark, light)));
// @debug create((secondary (color '!important', dark, light)));
// @debug create((secondary (color, (dark, -30%), (light, 60%))));

// @debug create((accent, (color, [(light, 30%), (dark, 50%)], dark, light)));

//
// @debug create((medium: 1px solid red, large: 2px solid blue)); // ((): ((): (medium: 1px solid red)))
// @debug create(((top, right): (medium: 1px solid red, large: 2px solid blue))); // ((): ((top, right): (medium: 1px solid red, large: 2px solid blue)))

//
// @debug create((((disabled, 15%), (disabled, 5%)), error));