Add comments, tune color darkening

tailwind.config.js

@@ -1,6 +1,7 @@
 const colors = require('tailwindcss/colors');
 const Color = require('color');
 
+// Range generation function
 const range = (lower, upper, step) => {
     return Array.from(
         new Array(Math.floor(upper / step - lower / step) + 1),
@@ -9,32 +10,38 @@ const range = (lower, upper, step) => {
 };
 
 function generateColor(base, max, min, step) {
+    // The heaviest weight color defined in the base palette
     const baseMax = Math.max(...Object.keys(base).map((v) => parseInt(v)));
+    // Color object of baseMax
+    const baseMaxColor = Color(base[baseMax]);
+    // Total number of steps from baseMax to max by step
+    const totalSteps = (max - baseMax) / step;
+
+    // Generate step colors, or for colors beyond baseMax, a darkened color
     const generated = range(min, max, step)
+        // Don't try to redefine colors or anything
         .filter((v) => base[v] === undefined)
         .map((weight) => {
+            // Determine if we're mixing or darkening
             const isHighWeight = weight + step > baseMax;
             if (isHighWeight) {
-                const baseDarkest = Color(base[baseMax]);
+                // The Nth step from baseMax on the way to max
-                const weightDifference = weight - baseMax;
+                const baseMaxStep = (weight - baseMax) / step;
-                const darkened = baseDarkest.darken(0.005 * weightDifference);
+                const darkened = baseMaxColor.darken(baseMaxStep / totalSteps);
-                // console.log({
-                //     dark: baseDarkest.hex(),
-                //     darkLight: baseDarkest.luminosity(),
-                //     weightDifference,
-                //     darkened: darkened.hex()
-                // });
                 return [weight, darkened.hex()];
             }
 
+            // Get lighter and darker colors, then mix the two for an intermediary color
             const lighter = Color(base[weight - step]);
             const darker = Color(base[weight + step]);
             return [weight, lighter.mix(darker).hex()];
         });
 
+    // Build a new object, skip null entries
     return Object.fromEntries(generated.filter((v) => v != null));
 }
 
+// Colors that only have one value, or are special/meta. We don't want to try and generate them.
 const skipColors = new Set([
     'inherit',
     'transparent',
@@ -48,6 +55,7 @@ const skipColors = new Set([
     'blueGray'
 ]);
 
+// Invoke color generation on each color that isn't meta/singular
 const generatedColors = Object.fromEntries(
     Object.entries(colors)
         .filter(([key, _]) => !skipColors.has(key))
@@ -56,14 +64,13 @@ const generatedColors = Object.fromEntries(
         })
 );
 
-console.log({ ...generatedColors });
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
     content: ['./src/**/*.{js,ts,jsx,tsx}'],
     theme: {
         extend: {
             colors: {
+                // Expand, allow for custom colors to be mixed with generated ones
                 ...generatedColors
             }
         }