Support a custom list of weights

README.md

@@ -15,6 +15,7 @@ You can see it in action on https://nightwindcss.com
 3. [Getting started](#getting-started)
 4. [Configuration](#configuration)
    - [Colors](#colors)
+   - [Weights](#weights)
    - [Variants and color classes](#variants-and-color-classes)
    - [The 'nightwind-prevent' class](#the-nightwind-prevent-class)
    - [Transitions](#transitions)
@@ -347,6 +348,35 @@ module.exports = {
 
 Check out [**color mappings**](#color-mappings) to see how to further customize your dark theme.
 
+### Weights
+
+The default set of weights supported by Nightwind is `[50, 100, 200, 300, 400, 500, 600, 700, 800, 900]`.
+
+If you use other weights, you can provide a list in your config.
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    nightwind: {
+      weights: [25, 50, 100, 150, 200, 300, 400, 500, 600, 700, 750, 800, 900, 950]
+    },
+  },
+}
+```
+
+The default algorithm for inverting weights is:
+
+- If the weight is less than 100 (eg 25 or 50), the inverted weight is 900.
+- If the weight is >= 900, the inverted weight is `weights[0]` (eg 25).
+- Otherwise, the inverted weight is `900 - weight`.
+
+If using the [reduced preset](#reduced-preset), the algorithm for inverting weights is:
+
+- If the weight is less than or equal to 100 (eg 25, 50, or 100), the inverted weight is 900.
+- If the weight is >= 1000, the inverted weight is 100.
+- Otherwise, the inverted weight is `1000 - weight`.
+
 ### Variants and color classes
 
 Variants and other color classes can be enabled for Nightwind like so:

src/index.js

@@ -19,7 +19,7 @@ const nightwind = plugin(
     const colors = theme("colors")
     const colorVariants = ["hover"]
     const prefixes = ["text", "bg", "border"]
-    const weights = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
+    const weights = theme("nightwind.weights") || [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
     let importantSelector = ""
     let importantProperty = ""
 
@@ -151,23 +151,25 @@ const nightwind = plugin(
         const color = colorValues.pop()
         const defaultValue = theme(`colors.${color}.${weight}`)
 
-        let invertWeightIndex = 9 - weights.indexOf(Number(weight))
-        let invertWeight = String(weights[invertWeightIndex])
-
-        if (theme("nightwind.colorScale.preset")) {
-          switch (theme("nightwind.colorScale.preset")) {
-            case "reduced":
-              let reducedInvertWeightIndex =
-                10 - weights.indexOf(Number(weight))
-              reducedInvertWeightIndex > 9
-                ? (reducedInvertWeightIndex = 9)
-                : reducedInvertWeightIndex
-              invertWeight = String(weights[reducedInvertWeightIndex])
-              break
+        let invertWeight;
+
+        if (theme("nightwind.colorScale.preset") === "reduced") {
+          if (weight <= 100) {
+            invertWeight = 900
+          } else if (weight >= 1000) {
+            invertWeight = 100
+          } else {
+            invertWeight = 1000 - weight
           }
-        } else if (theme("nightwind.colorScale")) {
-          if (theme(`nightwind.colorScale.${weight}`)) {
-            invertWeight = String(theme(`nightwind.colorScale.${weight}`))
+        } else if (theme("nightwind.colorScale") && theme(`nightwind.colorScale.${weight}`)) {
+          invertWeight = String(theme(`nightwind.colorScale.${weight}`))
+        } else {
+          if (weight < 100) {
+            invertWeight = 900
+          } else if (weight >= 900) {
+            invertWeight = weights[0]
+          } else {
+            invertWeight = 900 - weight
           }
         }
 
@@ -523,6 +525,9 @@ const nightwind = plugin(
           return false
         } else {
           weights.forEach((weight) => {
+            // TODO: this should skip colours that aren't defined in the theme
+            // eg if your weights are 50, 100, 200, but for a certain colour you
+            // override and only define 50 and 200.
             let base = prefix + "-" + color + "-" + weight
             colorClasses.push(base)
             colorVariants.forEach((variant) => {