diff --git a/tailwind.config.js b/tailwind.config.js index c0ee922..4009a65 100644 --- a/tailwind.config.js +++ b/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]); - const weightDifference = weight - baseMax; - const darkened = baseDarkest.darken(0.005 * weightDifference); - // console.log({ - // dark: baseDarkest.hex(), - // darkLight: baseDarkest.luminosity(), - // weightDifference, - // darkened: darkened.hex() - // }); + // 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', @@ -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 } }