Done with table and generalized styling
This commit is contained in:
Aravind142857
269
node_modules/daisyui/src/theming/functions.js
generated
vendored
Normal file
269
node_modules/daisyui/src/theming/functions.js
generated
vendored
Normal file
@@ -0,0 +1,269 @@
|
||||
const colorNames = require("./colorNames")
|
||||
const themeDefaults = require("./themeDefaults")
|
||||
|
||||
const { colord, getFormat, extend } = require("colord")
|
||||
const mixPlugin = require("colord/plugins/mix")
|
||||
const namesPlugin = require("colord/plugins/names")
|
||||
const lchPlugin = require("colord/plugins/lch")
|
||||
const hwbPlugin = require("colord/plugins/hwb")
|
||||
const labPlugin = require("colord/plugins/lab")
|
||||
const xyzPlugin = require("colord/plugins/xyz")
|
||||
|
||||
extend([mixPlugin, namesPlugin, lchPlugin, hwbPlugin, labPlugin, xyzPlugin])
|
||||
|
||||
module.exports = {
|
||||
changeColorValuesToObject: function (input) {
|
||||
const [h, s, l] = input.match(/\d+(\.\d+)?%|\d+(\.\d+)?/g).map(parseFloat)
|
||||
return { h, s, l, a: 1 }
|
||||
},
|
||||
|
||||
turnColorValuesToString: function (input) {
|
||||
const [h, s, l] = input.match(/\d+(\.\d+)?%|\d+(\.\d+)?/g).map(parseFloat)
|
||||
return `${h} ${s}% ${l}%`
|
||||
},
|
||||
|
||||
generateForegroundColorFrom: function (input, percentage = 0.8) {
|
||||
const str = colord(input)
|
||||
.mix(colord(input).isDark() ? "white" : "black", percentage)
|
||||
.toHslString()
|
||||
return this.turnColorValuesToString(str)
|
||||
},
|
||||
|
||||
generateDarkenColorFrom: function (input, percentage = 0.07) {
|
||||
const str = colord(input).darken(percentage).toHslString()
|
||||
return this.turnColorValuesToString(str)
|
||||
},
|
||||
|
||||
convertColorFormat: function (input, colorFunction = "hsl") {
|
||||
if (typeof input !== "object" || input === null) {
|
||||
return input
|
||||
}
|
||||
|
||||
const resultObj = {}
|
||||
|
||||
Object.entries(input).forEach(([rule, value]) => {
|
||||
// if (!Object.hasOwn(colorNames, rule)) {
|
||||
// resultObj[rule] = value
|
||||
// } else {
|
||||
// let arr
|
||||
// if (getFormat(value) === "lch") {
|
||||
// arr = this.changeColorValuesToObject(value)
|
||||
// } else {
|
||||
// arr = colord(value).toLch()
|
||||
// }
|
||||
// resultObj[colorNames[rule]] = arr.l + " " + arr.c + " " + arr.h
|
||||
// }
|
||||
|
||||
if (colorNames.hasOwnProperty(rule)) {
|
||||
const hslArray = colord(value).toHsl()
|
||||
resultObj[colorNames[rule]] = `${hslArray.h} ${hslArray.s}% ${hslArray.l}%`
|
||||
} else {
|
||||
resultObj[rule] = value
|
||||
}
|
||||
|
||||
// if (getFormat("lch(" + value + ")") === "lch") {
|
||||
// resultObj[rule] = value
|
||||
// if (colorFunction === "hsl") {
|
||||
// let arr = colord("lch(" + value + ")").toHsl()
|
||||
// resultObj[rule] = arr.h + " " + arr.s + "% " + arr.l + "%"
|
||||
// }
|
||||
// }
|
||||
|
||||
// auto generate focus colors
|
||||
if (!Object.hasOwn(input, "primary-focus")) {
|
||||
resultObj["--pf"] = this.generateDarkenColorFrom(input["primary"])
|
||||
}
|
||||
if (!Object.hasOwn(input, "secondary-focus")) {
|
||||
resultObj["--sf"] = this.generateDarkenColorFrom(input["secondary"])
|
||||
}
|
||||
if (!Object.hasOwn(input, "accent-focus")) {
|
||||
resultObj["--af"] = this.generateDarkenColorFrom(input["accent"])
|
||||
}
|
||||
if (!Object.hasOwn(input, "neutral-focus")) {
|
||||
resultObj["--nf"] = this.generateDarkenColorFrom(input["neutral"])
|
||||
}
|
||||
|
||||
// auto generate base colors
|
||||
if (!Object.hasOwn(input, "base-100")) {
|
||||
resultObj["--b1"] = "100 0 0"
|
||||
}
|
||||
if (!Object.hasOwn(input, "base-200")) {
|
||||
resultObj["--b2"] = this.generateDarkenColorFrom(input["base-100"])
|
||||
}
|
||||
if (!Object.hasOwn(input, "base-300")) {
|
||||
if (Object.hasOwn(input, "base-200")) {
|
||||
resultObj["--b3"] = this.generateDarkenColorFrom(input["base-200"])
|
||||
} else {
|
||||
resultObj["--b3"] = this.generateDarkenColorFrom(input["base-100"], 0.14)
|
||||
}
|
||||
}
|
||||
|
||||
// auto generate state colors
|
||||
|
||||
if (!Object.hasOwn(input, "info")) {
|
||||
resultObj["--in"] = 198 + " " + 93 + "%" + " " + 60 + "%"
|
||||
}
|
||||
if (!Object.hasOwn(input, "success")) {
|
||||
resultObj["--su"] = 158 + " " + 64 + "%" + " " + 52 + "%"
|
||||
}
|
||||
if (!Object.hasOwn(input, "warning")) {
|
||||
resultObj["--wa"] = 43 + " " + 96 + "%" + " " + 56 + "%"
|
||||
}
|
||||
if (!Object.hasOwn(input, "error")) {
|
||||
resultObj["--er"] = 0 + " " + 91 + "%" + " " + 71 + "%"
|
||||
}
|
||||
|
||||
// auto generate content colors
|
||||
if (!Object.hasOwn(input, "base-content")) {
|
||||
resultObj["--bc"] = this.generateForegroundColorFrom(input["base-100"])
|
||||
}
|
||||
if (!Object.hasOwn(input, "primary-content")) {
|
||||
resultObj["--pc"] = this.generateForegroundColorFrom(input["primary"])
|
||||
}
|
||||
if (!Object.hasOwn(input, "secondary-content")) {
|
||||
resultObj["--sc"] = this.generateForegroundColorFrom(input["secondary"])
|
||||
}
|
||||
if (!Object.hasOwn(input, "accent-content")) {
|
||||
resultObj["--ac"] = this.generateForegroundColorFrom(input["accent"])
|
||||
}
|
||||
if (!Object.hasOwn(input, "neutral-content")) {
|
||||
resultObj["--nc"] = this.generateForegroundColorFrom(input["neutral"])
|
||||
}
|
||||
if (!Object.hasOwn(input, "info-content")) {
|
||||
if (Object.hasOwn(input, "info")) {
|
||||
resultObj["--inc"] = this.generateForegroundColorFrom(input["info"])
|
||||
} else {
|
||||
resultObj["--inc"] = 198 + " " + 100 + "%" + " " + 12 + "%"
|
||||
}
|
||||
}
|
||||
if (!Object.hasOwn(input, "success-content")) {
|
||||
if (Object.hasOwn(input, "success")) {
|
||||
resultObj["--suc"] = this.generateForegroundColorFrom(input["success"])
|
||||
} else {
|
||||
resultObj["--suc"] = 158 + " " + 100 + "%" + " " + 10 + "%"
|
||||
}
|
||||
}
|
||||
if (!Object.hasOwn(input, "warning-content")) {
|
||||
if (Object.hasOwn(input, "warning")) {
|
||||
resultObj["--wac"] = this.generateForegroundColorFrom(input["warning"])
|
||||
} else {
|
||||
resultObj["--wac"] = 43 + " " + 100 + "%" + " " + 11 + "%"
|
||||
}
|
||||
}
|
||||
if (!Object.hasOwn(input, "error-content")) {
|
||||
if (Object.hasOwn(input, "error")) {
|
||||
resultObj["--erc"] = this.generateForegroundColorFrom(input["error"])
|
||||
} else {
|
||||
resultObj["--erc"] = 0 + " " + 100 + "%" + " " + 14 + "%"
|
||||
}
|
||||
}
|
||||
|
||||
// add css variables if not exist
|
||||
Object.entries(themeDefaults.variables).forEach((item) => {
|
||||
const [variable, value] = item
|
||||
if (!Object.hasOwn(input, variable)) {
|
||||
resultObj[variable] = value
|
||||
}
|
||||
})
|
||||
|
||||
// add other custom styles
|
||||
if (!colorNames.hasOwnProperty(rule)) {
|
||||
resultObj[rule] = value
|
||||
}
|
||||
})
|
||||
|
||||
return resultObj
|
||||
},
|
||||
|
||||
injectThemes: function (addBase, config, themes, colorFunction) {
|
||||
const includedThemesObj = {}
|
||||
// includedThemesObj["@supports (not(color: lch(0 0 0)))"] = {}
|
||||
// add default themes
|
||||
Object.entries(themes).forEach(([theme, value]) => {
|
||||
if (colorFunction === "lch") {
|
||||
includedThemesObj[theme] = this.convertColorFormat(value)
|
||||
}
|
||||
if (colorFunction === "hsl") {
|
||||
includedThemesObj[theme] = this.convertColorFormat(value, "hsl")
|
||||
}
|
||||
})
|
||||
|
||||
// add custom themes
|
||||
if (Array.isArray(config("daisyui.themes"))) {
|
||||
config("daisyui.themes").forEach((item) => {
|
||||
if (typeof item === "object" && item !== null) {
|
||||
Object.entries(item).forEach(([customThemeName, customThemevalue]) => {
|
||||
includedThemesObj["[data-theme=" + customThemeName + "]"] =
|
||||
this.convertColorFormat(customThemevalue)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
let themeOrder = []
|
||||
if (Array.isArray(config("daisyui.themes"))) {
|
||||
config("daisyui.themes").forEach((theme) => {
|
||||
if (typeof theme === "object" && theme !== null) {
|
||||
Object.keys(theme).forEach((customThemeName) => {
|
||||
themeOrder.push(customThemeName)
|
||||
})
|
||||
} else if (Object.hasOwn(includedThemesObj, "[data-theme=" + theme + "]")) {
|
||||
themeOrder.push(theme)
|
||||
}
|
||||
})
|
||||
} else if (config("daisyui.themes") === true) {
|
||||
themeOrder = themeDefaults.themeOrder
|
||||
} else {
|
||||
themeOrder = ["light", "dark"]
|
||||
}
|
||||
|
||||
// inject themes in order
|
||||
const themesToInject = {}
|
||||
themeOrder.forEach((themeName, index) => {
|
||||
if (index === 0) {
|
||||
// first theme as root
|
||||
themesToInject[":root"] = includedThemesObj["[data-theme=" + themeName + "]"]
|
||||
} else if (index === 1) {
|
||||
// auto dark
|
||||
if (config("daisyui.darkTheme")) {
|
||||
if (
|
||||
themeOrder[0] !== config("daisyui.darkTheme") &&
|
||||
themeOrder.includes(config("daisyui.darkTheme"))
|
||||
) {
|
||||
themesToInject["@media (prefers-color-scheme: dark)"] = {
|
||||
[":root"]: includedThemesObj[`[data-theme=${config("daisyui.darkTheme")}]`],
|
||||
}
|
||||
}
|
||||
} else if (config("daisyui.darkTheme") === false) {
|
||||
// disables prefers-color-scheme: dark
|
||||
} else {
|
||||
if (themeOrder[0] !== "dark" && themeOrder.includes("dark")) {
|
||||
themesToInject["@media (prefers-color-scheme: dark)"] = {
|
||||
[":root"]: includedThemesObj["[data-theme=dark]"],
|
||||
}
|
||||
}
|
||||
}
|
||||
// theme 0 with name
|
||||
themesToInject["[data-theme=" + themeOrder[0] + "]"] =
|
||||
includedThemesObj["[data-theme=" + themeOrder[0] + "]"]
|
||||
// theme 1 with name
|
||||
themesToInject["[data-theme=" + themeOrder[1] + "]"] =
|
||||
includedThemesObj["[data-theme=" + themeOrder[1] + "]"]
|
||||
} else {
|
||||
themesToInject["[data-theme=" + themeName + "]"] =
|
||||
includedThemesObj["[data-theme=" + themeName + "]"]
|
||||
}
|
||||
})
|
||||
if (colorFunction === "lch") {
|
||||
addBase({ "@supports (color: lch(0 0 0))": themesToInject })
|
||||
}
|
||||
if (colorFunction === "hsl") {
|
||||
addBase(themesToInject)
|
||||
}
|
||||
|
||||
return {
|
||||
includedThemesObj,
|
||||
themeOrder,
|
||||
}
|
||||
},
|
||||
}
|
||||
Reference in New Issue
Block a user