From d511e5966d998dc1555f1b8ae293018019799fb6 Mon Sep 17 00:00:00 2001 From: Xevion Date: Thu, 16 Nov 2023 17:21:22 -0600 Subject: [PATCH] Add color darkening ability (luminosity), cleanup, skip meta/single color values --- tailwind.config.js | 44 ++++++++++++++++++++++++++++++++------------ 1 file changed, 32 insertions(+), 12 deletions(-) diff --git a/tailwind.config.js b/tailwind.config.js index ddd0eb8..c0ee922 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,6 +1,5 @@ const colors = require('tailwindcss/colors'); const Color = require('color'); -const colorString = require('color-string'); const range = (lower, upper, step) => { return Array.from( @@ -9,15 +8,24 @@ const range = (lower, upper, step) => { ).map((x) => x * step); }; -function generateColor(base, noun, max, min, step) { +function generateColor(base, max, min, step) { const baseMax = Math.max(...Object.keys(base).map((v) => parseInt(v))); - console.log(baseMax); const generated = range(min, max, step) .filter((v) => base[v] === undefined) .map((weight) => { const isHighWeight = weight + step > baseMax; - // if (isHighWeight) return [weight, '???']; - if (isHighWeight) return null; + if (isHighWeight) { + const baseDarkest = Color(base[baseMax]); + const weightDifference = weight - baseMax; + const darkened = baseDarkest.darken(0.005 * weightDifference); + // console.log({ + // dark: baseDarkest.hex(), + // darkLight: baseDarkest.luminosity(), + // weightDifference, + // darkened: darkened.hex() + // }); + return [weight, darkened.hex()]; + } const lighter = Color(base[weight - step]); const darker = Color(base[weight + step]); @@ -27,17 +35,29 @@ function generateColor(base, noun, max, min, step) { return Object.fromEntries(generated.filter((v) => v != null)); } +const skipColors = new Set([ + 'inherit', + 'transparent', + 'current', + 'black', + 'white', + 'lightBlue', + 'warmGray', + 'trueGray', + 'coolGray', + 'blueGray' +]); + const generatedColors = Object.fromEntries( - Object.entries(colors).map(([colorKey, value]) => { - return [colorKey, generateColor(value, colorKey, 1100, 150, 50)]; - }) + Object.entries(colors) + .filter(([key, _]) => !skipColors.has(key)) + .map(([colorKey, value]) => { + return [colorKey, generateColor(value, 1300, 150, 50)]; + }) ); -// const generatedColors = { -// yellow: generateColor(colors.yellow, 'yellow', 1100, 150, 50) -// }; - console.log({ ...generatedColors }); + /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{js,ts,jsx,tsx}'],