Created
November 16, 2023 23:48
-
-
Save Xevion/2a3a949d86842061cde5fd21f676bab2 to your computer and use it in GitHub Desktop.
Tailwind Fine Grain + Darker Palette Generator
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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), | |
(_, i) => lower / step + i | |
).map((x) => x * 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) { | |
// The Nth step from baseMax on the way to max | |
const baseMaxStep = (weight - baseMax) / step; | |
const darkened = baseMaxColor.darken(baseMaxStep / totalSteps); | |
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', | |
'current', | |
'black', | |
'white', | |
'lightBlue', | |
'warmGray', | |
'trueGray', | |
'coolGray', | |
'blueGray' | |
]); | |
// Invoke color generation on each color that isn't meta/singular | |
const generatedColors = Object.fromEntries( | |
Object.entries(colors) | |
.filter(([key, _]) => !skipColors.has(key)) | |
.map(([colorKey, value]) => { | |
return [colorKey, generateColor(value, 1300, 150, 50)]; | |
}) | |
); | |
/** @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 | |
} | |
} | |
}, | |
plugins: [require('@tailwindcss/forms')] | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment