xevion/bus-reminder
1
0
Fork 0
mirror of https://github.com/Xevion/bus-reminder.git synced 2025-12-14 04:11:11 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add color darkening ability (luminosity), cleanup, skip meta/single color values

Browse Source
This commit is contained in:
Xevion
2023-11-16 17:21:22 -06:00
parent 5ef8cf5c50
commit d511e5966d
1 changed files with 32 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
tailwind.config.js
View File

@@ -1,6 +1,5 @@
const colors = require('tailwindcss/colors'); const colors = require('tailwindcss/colors');
const Color = require('color'); const Color = require('color');
const colorString = require('color-string');
const range = (lower, upper, step) => { const range = (lower, upper, step) => {
return Array.from( return Array.from(
@@ -9,15 +8,24 @@ const range = (lower, upper, step) => {
).map((x) => x * 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))); const baseMax = Math.max(...Object.keys(base).map((v) => parseInt(v)));
console.log(baseMax);
const generated = range(min, max, step) const generated = range(min, max, step)
.filter((v) => base[v] === undefined) .filter((v) => base[v] === undefined)
.map((weight) => { .map((weight) => {
const isHighWeight = weight + step > baseMax; const isHighWeight = weight + step > baseMax;
// if (isHighWeight) return [weight, '???']; if (isHighWeight) {
if (isHighWeight) return null; 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 lighter = Color(base[weight - step]);
const darker = 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)); 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( const generatedColors = Object.fromEntries(
Object.entries(colors).map(([colorKey, value]) => { Object.entries(colors)
return [colorKey, generateColor(value, colorKey, 1100, 150, 50)]; .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 }); console.log({ ...generatedColors });
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: ['./src/**/*.{js,ts,jsx,tsx}'], content: ['./src/**/*.{js,ts,jsx,tsx}'],