Reverse order of light and dark color scales

Makefile

@@ -1,5 +1,5 @@
 .EXPORT_ALL_VARIABLES:
-.PHONY: help dev build test test-unit test-integration release release-npm
+.PHONY: help dev build test test-unit test-integration release
 
 help: #: show this help menu
 	@grep "#:" Makefile* | grep -v "@grep" | sed "s/\([A-Za-z_ -]*\):.*#\(.*\)/$$(tput setaf 3)\1$$(tput sgr0)\2/g"
@@ -18,7 +18,7 @@ test-unit: #: run the unit tests
 test-integration: #: run the integration tests
 	@cd test && ./test-integration.sh
 
-release: build #: create a new tagged release
+release: build #: build the final output and create a new tagged release
 	@git tag v$(version)
 	@git archive \
 		--format tar.gz \

README.md

@@ -517,7 +517,7 @@ Named values used for box shadow. These classes are prefixed with `.shadow-*`. S
   > ```
 </details>
 
-Named values for colors that get auto-generated variations. 4 darker variations and 4 lighter variations will be generated for each color, for a total of 9 colors per key. These classes are prefixed with the color name. The base color will exist as `.[name]-5` with `.[name]-[1-4]` for darker variations and `.[name]-[6-9]` for lighter variations. See the [color generator](lib/generators/color#readme) and [background-color generator](lib/generators/background-color#readme) for more info.
+Named values for colors that get auto-generated variations. 4 darker variations and 4 lighter variations will be generated for each color, for a total of 9 colors per key. These classes are prefixed with the color name. The base color will exist as `.[name]-5` with `.[name]-[1-4]` for lighter variations and `.[name]-[6-9]` for darker variations. See the [color generator](lib/generators/color#readme) and [background-color generator](lib/generators/background-color#readme) for more info.
 
 ### Brand Colors
 

lib/config.scss

@@ -337,33 +337,33 @@ $box-shadows: map.merge(
 //
 // Named values for colors that have auto-generated variations. By default, it will generate 4
 // darker variations and 4 lighter variations of each color for a total of 9. The base color will
-// exist as `.[name]-5` with `.[name]-[1-4]` for darker variations and `.[name]-[6-9]` for
-// lighter variations.
-//
-
-$colors: helpers.color-variants(
-  map.merge(
-    (
-      gray: #adb5bd,
-      cyan: #0dcaf0,
-      teal: #20c997,
-      green: #198754,
-      yellow: #ffc107,
-      orange: #fd7e14,
-      red: #dc3545,
-      pink: #d63384,
-      purple: #6f42c1,
-      indigo: #6610f2,
-      blue: #0d6efd,
-    ),
-    map.get($extend, "colors") or ()
-  )
+// exist as `.[name]-5` with `.[name]-[1-4]` for lighter variations and `.[name]-[6-9]` for
+// darker variations.
+//
+
+$colors: map.merge(
+  (
+    gray: #adb5bd,
+    cyan: #0dcaf0,
+    teal: #20c997,
+    green: #198754,
+    yellow: #ffc107,
+    orange: #fd7e14,
+    red: #dc3545,
+    pink: #d63384,
+    purple: #6f42c1,
+    indigo: #6610f2,
+    blue: #0d6efd,
+  ),
+  map.get($extend, "colors") or ()
 ) !default;
 
 @if not helpers.check-type($colors, map, color) {
   @error "Expected $colors to be a map of colors";
 }
 
+$colors: helpers.color-variants($colors);
+
 //
 // Named values for brand colors that don't have auto-generated variations. The color classes are
 // not prefixed with anything, so be careful while naming to avoid conflicts with other generated

lib/helpers.scss

@@ -186,7 +186,7 @@
 }
 
 //
-// Generate darker and ligher colors for each color in a map. 4 variants of each for a total of 9.
+// Generate lighter and darker colors for each color in a map. 4 variants of each for a total of 9.
 //
 @function color-variants($colors) {
   @if not check-type($colors, map, color) {
@@ -197,26 +197,26 @@
     $variants: empty-map();
     $name-base: #{$key}-5;
 
-    @for $i from 1 through 4 { // 80%, 60%, 40%, 20%
+    @for $i from 1 through 4 { // 90%, 70%, 50%, 30%
       $name: #{$key}-#{$i};
-      $mixed: color.mix(black, $value, $weight: 100 - ($i * 20%));
+      $mixed: color.mix(white, $value, $weight: 90 - (($i - 1) * 20%));
       $variants: map.set($variants, $name, $mixed);
 
       @if $mixed == $value {
-        @warn "Color `#{$value}` is too dark, unable to generate darker shades. `.#{$name}` will be the same as `.#{$name-base}`.";
+        @warn "Color `#{$value}` is too light, unable to generate lighter tints. `.#{$name}` will be the same as `.#{$name-base}`.";
       }
     }
 
     // add original color with suffix
     $variants: map.set($variants, $name-base, $value);
 
-    @for $i from 6 through 9 { // 30%, 50%, 70%, 90%
+    @for $i from 6 through 9 { // 20%, 40%, 60%, 80%
       $name: #{$key}-#{$i};
-      $mixed: color.mix(white, $value, $weight: 30 + (($i - 6) * 20%));
+      $mixed: color.mix(black, $value, $weight: 20 + ($i - 6) * 20%);
       $variants: map.set($variants, $name, $mixed);
 
       @if $mixed == $value {
-        @warn "Color `#{$value}` is too light, unable to generate lighter tints. `.#{$name}` will be the same as `.#{$name-base}`.";
+        @warn "Color `#{$value}` is too dark, unable to generate darker shades. `.#{$name}` will be the same as `.#{$name-base}`.";
       }
     }
 

test/integration/colors.test.sh

@@ -0,0 +1,65 @@
+#! /bin/sh
+
+suite_addTest testColors
+
+testColors() {
+  INPUT=$(cat <<EOF
+@use "../index" with (
+  \$normalize: false,
+  \$colors: (
+    gray: #555555
+  ),
+  \$brand-colors: (),
+  \$generators: (
+    base: [color]
+  ),
+);
+EOF
+  );
+
+    OUTPUT=$(cat <<EOF
+.current-color {
+  color: currentColor;
+}
+
+.gray-1 {
+  color: #eeeeee;
+}
+
+.gray-2 {
+  color: #cccccc;
+}
+
+.gray-3 {
+  color: #aaaaaa;
+}
+
+.gray-4 {
+  color: #888888;
+}
+
+.gray-5 {
+  color: #555555;
+}
+
+.gray-6 {
+  color: #444444;
+}
+
+.gray-7 {
+  color: #333333;
+}
+
+.gray-8 {
+  color: #222222;
+}
+
+.gray-9 {
+  color: #111111;
+}
+
+EOF
+  );
+
+  assertEquals "$OUTPUT" "$(echo $INPUT | sass --stdin)"
+}

test/lib/config.test.scss

@@ -78,7 +78,7 @@
     @return false;
   }
 
-  @if config.color(gray-8) != #e6e9eb {
+  @if config.color(gray-8) != #45484c {
     @return false;
   }
 

test/lib/helpers.test.scss

@@ -205,29 +205,29 @@
     (
       input: [(foobar: #555555)],
       output: (
-        foobar-1: #111111,
-        foobar-2: #222222,
-        foobar-3: #333333,
-        foobar-4: #444444,
+        foobar-1: #eeeeee,
+        foobar-2: #cccccc,
+        foobar-3: #aaaaaa,
+        foobar-4: #888888,
         foobar-5: #555555,
-        foobar-6: #888888,
-        foobar-7: #aaaaaa,
-        foobar-8: #cccccc,
-        foobar-9: #eeeeee,
+        foobar-6: #444444,
+        foobar-7: #333333,
+        foobar-8: #222222,
+        foobar-9: #111111,
       ),
     ),
     (
       input: [(gray: #adb5bd)],
       output: (
-        gray-1: #232426,
-        gray-2: #45484c,
-        gray-3: #686d71,
-        gray-4: #8a9197,
+        gray-1: #f7f8f8,
+        gray-2: #e6e9eb,
+        gray-3: #d6dade,
+        gray-4: #c6cbd1,
         gray-5: #adb5bd,
-        gray-6: #c6cbd1,
-        gray-7: #d6dade,
-        gray-8: #e6e9eb,
-        gray-9: #f7f8f8,
+        gray-6: #8a9197,
+        gray-7: #686d71,
+        gray-8: #45484c,
+        gray-9: #232426,
       ),
     ),
   );

test/test-integration.sh

@@ -1,6 +1,7 @@
 #! /bin/sh
 
 suite() {
+  . ./integration/colors.test.sh
   . ./integration/dark-mode.test.sh
   . ./integration/generators.test.sh
   . ./integration/index.test.sh