opensourcemirror
/
daisyui
mirror of https://github.com/saadeghi/daisyui.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: invalid color value in config now shows an error

This commit is contained in:
Pouya Saadeghi 2023-11-18 01:56:16 +03:30
parent 09723e37f4
commit 41ee386267
5 changed files with 100 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "daisyui",
"version": "4.3.2-alpha.0",
"version": "4.3.1",
"description": "daisyUI - Tailwind CSS Components",
"author": "Pouya Saadeghi",
"license": "MIT",

55
src/experiments/playground/package-lock.json generated
View File

@ -9,7 +9,7 @@
"@tailwindcss/typography": "0.5.10",
"astro": "3.2.2",
"autoprefixer": "^10.4.16",
"daisyui": "3.8.3",
"daisyui": "^4.3.1",
"tailwindcss": "3.3.3",
"tailwindcss-flip": "1.0.0"
}
@ -2162,12 +2162,6 @@
"dev": true,
"optional": true
},
"node_modules/colord": {
"version": "2.9.3",
"resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
"integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
"dev": true
},
"node_modules/comma-separated-tokens": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
@ -2250,17 +2244,25 @@
"node": ">=4"
}
},
"node_modules/culori": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/culori/-/culori-3.2.0.tgz",
"integrity": "sha512-HIEbTSP7vs1mPq/2P9In6QyFE0Tkpevh0k9a+FkjhD+cwsYm9WRSbn4uMdW9O0yXlNYC3ppxL3gWWPOcvEl57w==",
"dev": true,
"engines": {
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
}
},
"node_modules/daisyui": {
"version": "3.8.3",
"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.8.3.tgz",
"integrity": "sha512-64QuR6niTv58E5YyAVBkoXQGngp04jt6XOcKGxnq1C/7r5ZE3bDuOSc4ktT7CPacTRjl5cCeNYY13VxLpZP+7A==",
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.3.1.tgz",
"integrity": "sha512-dCi91VD+57lkoBd10CjdW4wPOeOPYvvzQbxti6xmyQbDMbCeCXwNq2KdoU798I4OsCcD5B+n7yVG7HAgYW+cvw==",
"dev": true,
"dependencies": {
"colord": "^2.9",
"css-selector-tokenizer": "^0.8",
"postcss": "^8",
"postcss-js": "^4",
"tailwindcss": "^3"
"culori": "^3",
"picocolors": "^1",
"postcss-js": "^4"
},
"engines": {
"node": ">=16.9.0"
@ -8252,12 +8254,6 @@
"simple-swizzle": "^0.2.2"
}
},
"colord": {
"version": "2.9.3",
"resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
"integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
"dev": true
},
"comma-separated-tokens": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
@ -8321,17 +8317,22 @@
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
"dev": true
},
"culori": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/culori/-/culori-3.2.0.tgz",
"integrity": "sha512-HIEbTSP7vs1mPq/2P9In6QyFE0Tkpevh0k9a+FkjhD+cwsYm9WRSbn4uMdW9O0yXlNYC3ppxL3gWWPOcvEl57w==",
"dev": true
},
"daisyui": {
"version": "3.8.3",
"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.8.3.tgz",
"integrity": "sha512-64QuR6niTv58E5YyAVBkoXQGngp04jt6XOcKGxnq1C/7r5ZE3bDuOSc4ktT7CPacTRjl5cCeNYY13VxLpZP+7A==",
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.3.1.tgz",
"integrity": "sha512-dCi91VD+57lkoBd10CjdW4wPOeOPYvvzQbxti6xmyQbDMbCeCXwNq2KdoU798I4OsCcD5B+n7yVG7HAgYW+cvw==",
"dev": true,
"requires": {
"colord": "^2.9",
"css-selector-tokenizer": "^0.8",
"postcss": "^8",
"postcss-js": "^4",
"tailwindcss": "^3"
"culori": "^3",
"picocolors": "^1",
"postcss-js": "^4"
}
},
"debug": {

2
src/experiments/playground/package.json
View File

@ -13,7 +13,7 @@
"@tailwindcss/typography": "0.5.10",
"astro": "3.2.2",
"autoprefixer": "^10.4.16",
"daisyui": "3.8.3",
"daisyui": "^4.3.1",
"tailwindcss": "3.3.3",
"tailwindcss-flip": "1.0.0"
}

23
src/experiments/playground/tailwind.config.js
View File

@ -1,16 +1,29 @@
const plugin = require("tailwindcss/plugin")
const themes = require("daisyui/src/theming/themes")
module.exports = {
content: ["./src/**/*.{astro,html,svelte,vue,js,ts,jsx,tsx}"],
daisyui: {
themes: [
{
acid: {
...require("../../theming/themes")["acid"],
primary: "red",
light: {
...themes["light"],
primary: "x",
},
dark: {
...themes["dark"],
primary: "#ffffff",
},
},
],
// themes: [
// {
// acid: {
// ...require("../../theming/themes")["acid"],
// primary: "red",
// },
// },
// ],
// styled: 0,
// base: 0,
// utils: 0,
@ -24,7 +37,7 @@ module.exports = {
require("@tailwindcss/forms"),
require("@tailwindcss/typography"),
require("../../"),
// require('daisyui'),
// require("daisyui"),
// require("tailwindcss-flip"),
],
}

63
src/theming/functions.js
View File

@ -1,16 +1,39 @@
const pc = require("picocolors")
const colorNames = require("./colorNames")
const themeDefaults = require("./themeDefaults")
const { oklch, interpolate, wcagContrast } = require("culori/require")
const cutNumber = (number) => (number ? +number.toFixed(6) : 0)
const colorIsInvalid = (input) => {
console.error(
`├─ ${pc.red("⚠︎")} ${pc.bgRed(" Error ")} Invalid color ${pc.red(input)} in ${pc.green(
"tailwind.config.js"
)}`
)
}
const cutNumber = (number) => {
try {
if (number) {
return +number.toFixed(6)
} else {
return 0
}
} catch (e) {
// colorIsInvalid(number)
return false
}
}
module.exports = {
isDark: (color) => {
if (wcagContrast(color, "black") < wcagContrast(color, "white")) {
return true
try {
if (wcagContrast(color, "black") < wcagContrast(color, "white")) {
return true
}
return false
} catch (e) {
// colorIsInvalid(color)
return false
}
return false
},
colorObjToString: function (input) {
@ -19,13 +42,26 @@ module.exports = {
},
generateForegroundColorFrom: function (input, percentage = 0.8) {
const result = interpolate([input, this.isDark(input) ? "white" : "black"], "oklch")(percentage)
return this.colorObjToString(result)
try {
const result = interpolate(
[input, this.isDark(input) ? "white" : "black"],
"oklch"
)(percentage)
return this.colorObjToString(result)
} catch (e) {
// colorIsInvalid(input)
return false
}
},
generateDarkenColorFrom: function (input, percentage = 0.07) {
const result = interpolate([input, "black"], "oklch")(percentage)
return this.colorObjToString(result)
try {
const result = interpolate([input, "black"], "oklch")(percentage)
return this.colorObjToString(result)
} catch (e) {
// colorIsInvalid(input)
return false
}
},
convertColorFormat: function (input) {
@ -37,8 +73,13 @@ module.exports = {
Object.entries(input).forEach(([rule, value]) => {
if (Object.hasOwn(colorNames, rule)) {
const colorObj = oklch(value)
resultObj[colorNames[rule]] = this.colorObjToString(colorObj)
try {
const colorObj = oklch(value)
resultObj[colorNames[rule]] = this.colorObjToString(colorObj)
} catch (e) {
colorIsInvalid(value)
return false
}
} else {
resultObj[rule] = value
}