Merge pull request #39 from angular-package/develop

v0.17.1-beta

Author: angularpackage

CHANGELOG.md

@@ -1,5 +1,14 @@
 # @angular-package/sass changelog
 
+### v0.17.1-beta [#](https://github.com/angular-package/sass/releases/tag/v0.17.1-beta)
+
+- **Fix** `palette.create()` - adding color to variant colors. [2f277bf]
+- **Fix** `name.adjust()` - change `> 0` to `!=`. [2ab64bc]
+
+[2f277bf]: https://github.com/angular-package/sass/commit/2f277bf3baae46d385921619a2b2455c22d544cc
+[2ab64bc]: https://github.com/angular-package/sass/commit/2ab64bcb8d161fbc8e8ed5571d3ef43600ecfbce
+
+
 ### v0.17.0-beta [#](https://github.com/angular-package/sass/releases/tag/v0.17.0-beta)
 
 - **Update** `color/functions` - calculate using adjustment (from name too) all hsla values and move retrieve color to each hsla functions.

color/name/_name.adjust.function.scss

@@ -41,13 +41,13 @@
   $saturation: adjustment.calculate($saturation, map.get($adjustment, saturation), map.get($adjust, saturation), 0%);
 
   // Add hue, saturation, lightness or alpha to color name.
-  @if $lightness and $lightness > 0% {
+  @if $lightness and $lightness != 0% {
     $name: list-append.append(($name,), $lightness, $separator);
-    @if $alpha and $alpha > 0 {
+    @if $alpha and $alpha != 0 {
       $name: list-append.append($name, $alpha, $separator);
-      @if $hue and $hue > 0deg {
+      @if $hue and $hue != 0deg {
         $name: list-insert-nth.insert-nth($name, 2, $hue);
-        @if $saturation and $saturation > 0% {
+        @if $saturation and $saturation != 0% {
           $name: list-insert-nth.insert-nth($name, 3, $saturation);
         }
       }

color/palette/_palette.create.function.scss

@@ -5,14 +5,14 @@
 // Modules.
 @use '../../function';
 @use '../../meta';
+@use '../../values';
 @use '../../variant';
 @use '../name';
 @use 'color';
 
 // Functions.
 @use '../../list/get/get.list.function' as list-get-list;
-@use '../../list/list.insert-nth.function' as list-insert-nth;
-@use '../../list/list.invert.function' as list-invert;
+@use '../../list/list.append.function' as list-append;
 @use '../../list/list.range.function' as list-range;
 @use '../../list/remove/remove.nth.function' as list-remove-nth;
 
@@ -30,45 +30,51 @@ function.$functions: map.set(function.$functions, color, name, meta.get-function
 @function create($values...) {
   $palette: ();
 
-  // FEATURE: Get additional colors.
-  $variant-colors: ();
+  // FEATURE: Prepare variant colors.
+  $additional-colors: ();
+
+  // Iterate `$values`.
   $i: 1;
   @each $variant in $values {
     @if type-of($variant) == map {
       @each $class, $colors in $variant {
-        $j: 1;
+        // Variant colors to add after iterate.
+        $variant-colors: ();
+
+        // Iterate colors to obtain variant colors.
         @each $color in $colors {
+          // Get indicator index.
+          $indicator-index: variant.indicator-index($color, '+');
+
           // FEATURE: Nest colors.
-          @if variant.indicator-index($color, '+') {
-            $indicator-index: variant.indicator-index($color, '+');
+          @if $indicator-index {
             $color: list.set-nth(
               $color,
               $indicator-index,
               variant.indicator-remove(list.nth($color, $indicator-index), '+')
             );
-            $nested-colors: list-invert.invert(name.nest($color...));
-            @each $nested-color in $nested-colors {
-              $colors: list-insert-nth.insert-nth($colors, $j, $nested-color);
-            }
-
-            $colors: list-remove-nth.nth($colors, $j + list.length($nested-colors));
+            $variant-colors: values.join((separator: comma), $variant-colors, name.nest($color...));
           }
 
           // FEATURE: Get additional colors.
           @else if list.separator($color) == space and list.length($color) > 1 and list.length(list-get-list.list($color, last)) == 0 {
+            // Retrieve variant color.
             $variant-color: name.retrieve(list.nth($color, 1));
-            $variant-colors: map.deep-merge(
-              $variant-colors,
-              ($class: (map.get($variant-color, name): list-range.range($color, 2)))
+
+            // Add additional colors from range 2.
+            $additional-colors: map.deep-merge(
+              $additional-colors,
+              (variant.indicator-remove($class, '+'): (map.get($variant-color, name): list-range.range($color, 2)))
             );
-            $color: list.nth($color, 1);
-            $colors: list.set-nth($colors, $j, $color);
-          }
 
-          $j: $j + 1;
+            // Append color to variant colors.
+            $variant-colors: list-append.append($variant-colors, list.nth($color, 1), comma);
+          } @else {
+            $variant-colors: list-append.append($variant-colors, $color, comma);
+          }
         }
 
-        $variant: map.deep-merge($variant, ($class: $colors));
+        $variant: map.deep-merge($variant, ($class: $variant-colors));
       }
 
       $values: list.set-nth($values, $i, $variant);
@@ -94,10 +100,9 @@ function.$functions: map.set(function.$functions, color, name, meta.get-function
   }
 
   // FEATURE: Add additional colors to variant.
-  @if list.length($variant-colors) > 0 {
-    @each $name, $variant in $variant-colors {
+  @if list.length($additional-colors) > 0 {
+    @each $name, $variant in $additional-colors {
       @each $name in if(list.separator($name) == space, ($name,), $name) {
-        $name: variant.indicator-remove($name, '+');
         @each $class, $colors in $variant {
           $palette: color.add($palette, $name, $class, space, $colors...);
         }

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

@@ -53,6 +53,7 @@
 
   // FEATURE: Multiple colors in variant
   // core: ((primary dark) (secondary dark) (), error), // DONE
+  // test: ((primary dark) (secondary dark) (), error), // DONE
 
   // FEATURE: Color names
   // control: (disabled, error, info, success, warning), // (control: (disabled: disabled color, error: error color, info: info color, success: success color, warning: warning color))
@@ -84,6 +85,8 @@
   // (+bg, +border): (color, dark, light),
   // ('+gray', +secondary, +primary large): (+xs (color, dark, light),) // REVIEW: Check.
 
+  // core: (dark, light, accent, +primary (color, dark, light), +secondary (color, dark, light)),
+  // +core: (+primary (color, dark, light), +secondary (color, dark, light)),
 )) using($palette) {
   @debug $palette;
 
@@ -136,6 +139,8 @@
 // ([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))
 
+
+// REMOVE: Bracketed removed.
 // 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))

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@angular-package/sass",
   "description": "Extension for sass modules and new modules.",
-  "version": "0.17.0-beta",
+  "version": "0.17.1-beta",
   "main": "./index.scss",
   "funding": [
     {