From fbe3675369c1820c70aa741d886f803029ca7843 Mon Sep 17 00:00:00 2001 From: Alex Ghiculescu Date: Thu, 7 Apr 2022 13:19:56 -0500 Subject: [PATCH 1/7] Custom weights --- src/index.js | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/index.js b/src/index.js index 8480ad3..544e039 100644 --- a/src/index.js +++ b/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("weights") || [50, 100, 200, 300, 400, 500, 600, 700, 800, 900] let importantSelector = "" let importantProperty = "" @@ -151,24 +151,24 @@ 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 { + invertWeight = 1000 - weight } } else if (theme("nightwind.colorScale")) { if (theme(`nightwind.colorScale.${weight}`)) { invertWeight = String(theme(`nightwind.colorScale.${weight}`)) } + } else { + if (weight < 100) { + invertWeight = 900 + } else { + invertWeight = 900 - weight + } } if (theme(`nightwind.colors.${color}.${weight}`)) { From 8af1c2631670316c173c48972a4084aef6de3c4c Mon Sep 17 00:00:00 2001 From: Alex Ghiculescu Date: Thu, 7 Apr 2022 13:24:09 -0500 Subject: [PATCH 2/7] docs --- README.md | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/README.md b/README.md index ed571b6..05faf92 100644 --- a/README.md +++ b/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,33 @@ 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] + }, + }, +} +``` + +The default algorithm for inverting weights is: + +- If the weight is less than 100 (eg 25 or 50), the inverted weight is 900. +- 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. +- Otherwise, the inverted weight is `1000 - weight`. + ### Variants and color classes Variants and other color classes can be enabled for Nightwind like so: From 0d84f6be2ba90c54968ce1668626f1511248867c Mon Sep 17 00:00:00 2001 From: Alex Ghiculescu Date: Thu, 7 Apr 2022 13:27:33 -0500 Subject: [PATCH 3/7] oops --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 544e039..2f59aee 100644 --- a/src/index.js +++ b/src/index.js @@ -19,7 +19,7 @@ const nightwind = plugin( const colors = theme("colors") const colorVariants = ["hover"] const prefixes = ["text", "bg", "border"] - const weights = theme("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 = "" From 5d5632f37be3f77e7b013f3fc5971b18c3e5c6e7 Mon Sep 17 00:00:00 2001 From: Alex Ghiculescu Date: Fri, 8 Apr 2022 12:41:48 -0500 Subject: [PATCH 4/7] handle more cases --- README.md | 4 +++- src/index.js | 4 ++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 05faf92..13b9cdf 100644 --- a/README.md +++ b/README.md @@ -359,7 +359,7 @@ If you use other weights, you can provide a list in your config. module.exports = { theme: { nightwind: { - weights: [25, 50, 100, 150, 200, 300, 400, 500, 600, 700, 750, 800, 900] + weights: [25, 50, 100, 150, 200, 300, 400, 500, 600, 700, 750, 800, 900, 950] }, }, } @@ -368,11 +368,13 @@ module.exports = { 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 diff --git a/src/index.js b/src/index.js index 2f59aee..62ece7a 100644 --- a/src/index.js +++ b/src/index.js @@ -156,6 +156,8 @@ const nightwind = plugin( if (theme("nightwind.colorScale.preset") === "reduced") { if (weight <= 100) { invertWeight = 900 + } else if (weight > 1000) { + invertWeight = 100 } else { invertWeight = 1000 - weight } @@ -166,6 +168,8 @@ const nightwind = plugin( } else { if (weight < 100) { invertWeight = 900 + } else if (weight > 900) { + invertWeight = weights[0] } else { invertWeight = 900 - weight } From 1b547c5ea880c2f2b8edab2c432e5f14e83a1e9a Mon Sep 17 00:00:00 2001 From: Alex Ghiculescu Date: Fri, 8 Apr 2022 12:44:54 -0500 Subject: [PATCH 5/7] FIXME --- src/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/index.js b/src/index.js index 62ece7a..ee49875 100644 --- a/src/index.js +++ b/src/index.js @@ -527,6 +527,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) => { From 9bac81edf7ef18d3332103703b0212f51ce11b7f Mon Sep 17 00:00:00 2001 From: Alex Ghiculescu Date: Fri, 8 Apr 2022 12:47:27 -0500 Subject: [PATCH 6/7] oops --- README.md | 4 ++-- src/index.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 13b9cdf..8b906b3 100644 --- a/README.md +++ b/README.md @@ -368,13 +368,13 @@ module.exports = { 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). +- 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. +- If the weight is >= 1000, the inverted weight is 100. - Otherwise, the inverted weight is `1000 - weight`. ### Variants and color classes diff --git a/src/index.js b/src/index.js index ee49875..c4ae10c 100644 --- a/src/index.js +++ b/src/index.js @@ -156,7 +156,7 @@ const nightwind = plugin( if (theme("nightwind.colorScale.preset") === "reduced") { if (weight <= 100) { invertWeight = 900 - } else if (weight > 1000) { + } else if (weight >= 1000) { invertWeight = 100 } else { invertWeight = 1000 - weight @@ -168,7 +168,7 @@ const nightwind = plugin( } else { if (weight < 100) { invertWeight = 900 - } else if (weight > 900) { + } else if (weight >= 900) { invertWeight = weights[0] } else { invertWeight = 900 - weight From 622c46f7ca637b361b899c75e81a85b451aea479 Mon Sep 17 00:00:00 2001 From: Alex Ghiculescu Date: Fri, 8 Apr 2022 14:47:04 -0500 Subject: [PATCH 7/7] correctly handle fall through --- src/index.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/index.js b/src/index.js index c4ae10c..eef2b19 100644 --- a/src/index.js +++ b/src/index.js @@ -161,10 +161,8 @@ const nightwind = plugin( } 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