diff --git a/package.json b/package.json index 11cf52a..e281b38 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,8 @@ "@types/react-dom": "18.0.11", "autoprefixer": "^10.4.13", "clsx": "^2.0.0", + "color": "^4.2.3", + "color-string": "^1.9.1", "date-fns": "^2.29.3", "date-fns-tz": "^2.0.0", "discord.js": "^14.7.1", diff --git a/tailwind.config.js b/tailwind.config.js index 2b61639..ddd0eb8 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,12 +1,52 @@ +const colors = require('tailwindcss/colors'); +const Color = require('color'); +const colorString = require('color-string'); + +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, noun, 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; + + const lighter = Color(base[weight - step]); + const darker = Color(base[weight + step]); + return [weight, lighter.mix(darker).hex()]; + }); + + return Object.fromEntries(generated.filter((v) => v != null)); +} + +const generatedColors = Object.fromEntries( + Object.entries(colors).map(([colorKey, value]) => { + return [colorKey, generateColor(value, colorKey, 1100, 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}", - ], + content: ['./src/**/*.{js,ts,jsx,tsx}'], theme: { - extend: {}, + extend: { + colors: { + ...generatedColors + } + } }, - plugins: [ - require('@tailwindcss/forms') - ], -} \ No newline at end of file + plugins: [require('@tailwindcss/forms')] +}; diff --git a/yarn.lock b/yarn.lock index f0d0c47..014d669 100644 --- a/yarn.lock +++ b/yarn.lock @@ -505,15 +505,10 @@ camelcase-css@^2.0.1: resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5" integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA== -caniuse-lite@^1.0.30001406: - version "1.0.30001457" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001457.tgz#6af34bb5d720074e2099432aa522c21555a18301" - integrity sha512-SDIV6bgE1aVbK6XyxdURbUE89zY7+k1BBBaOwYwkNCglXlel/E7mELiHC64HQ+W0xSKlqWhV9Wh7iHxUjMs4fA== - -caniuse-lite@^1.0.30001426, caniuse-lite@^1.0.30001449: - version "1.0.30001458" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001458.tgz#871e35866b4654a7d25eccca86864f411825540c" - integrity sha512-lQ1VlUUq5q9ro9X+5gOEyH7i3vm+AYVT1WDCVB69XOZ17KZRhnZ9J0Sqz7wTHQaLBJccNCHq8/Ww5LlOIZbB0w== +caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001426, caniuse-lite@^1.0.30001449: + version "1.0.30001562" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001562.tgz" + integrity sha512-kfte3Hym//51EdX4239i+Rmp20EsLIYGdPkERegTgU19hQWCRhsRFGKHTliUlsry53tv17K7n077Kqa0WJU4ng== "chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3: version "3.5.3" @@ -552,17 +547,24 @@ color-convert@^1.9.3: dependencies: color-name "1.1.3" +color-convert@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3" + integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ== + dependencies: + color-name "~1.1.4" + color-name@1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw== -color-name@^1.0.0: +color-name@^1.0.0, color-name@~1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== -color-string@^1.6.0: +color-string@^1.6.0, color-string@^1.9.0, color-string@^1.9.1: version "1.9.1" resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4" integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg== @@ -578,6 +580,14 @@ color@^3.1.3: color-convert "^1.9.3" color-string "^1.6.0" +color@^4.2.3: + version "4.2.3" + resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a" + integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A== + dependencies: + color-convert "^2.0.1" + color-string "^1.9.0" + colorspace@1.1.x: version "1.1.4" resolved "https://registry.yarnpkg.com/colorspace/-/colorspace-1.1.4.tgz#8d442d1186152f60453bf8070cd66eb364e59243"