| 1 |
const DefaultPresetAttr = (type, data = "", datafallback = "") => { |
| 2 |
if (type == "colorStacks") { |
| 3 |
return { |
| 4 |
color_type_1: [ |
| 5 |
"#FAFAFA", |
| 6 |
"#FFFFFF", |
| 7 |
"#EBEBEB", |
| 8 |
"#999999", |
| 9 |
"#1D1D1D", |
| 10 |
"#0054FB", |
| 11 |
"#3E3E3E", |
| 12 |
"#0A0A0A", |
| 13 |
"#000000", |
| 14 |
], |
| 15 |
color_type_2: [ |
| 16 |
"#ffffff", |
| 17 |
"#E5E9FD", |
| 18 |
"#F898FF", |
| 19 |
"#E546F1", |
| 20 |
"#7A13C8", |
| 21 |
"#658BF1", |
| 22 |
"#455B8E", |
| 23 |
"#2F3E69", |
| 24 |
"#000000", |
| 25 |
], |
| 26 |
color_type_3: [ |
| 27 |
"#F6F3EC", |
| 28 |
"#ECE4DA", |
| 29 |
"#CFA592", |
| 30 |
"#9C6A51", |
| 31 |
"#6A3C27", |
| 32 |
"#6C5840", |
| 33 |
"#59534D", |
| 34 |
"#36302B", |
| 35 |
"#000000", |
| 36 |
], |
| 37 |
color_type_4: [ |
| 38 |
"#F5FFFA", |
| 39 |
"#F7F1FC", |
| 40 |
"#CEB2E5", |
| 41 |
"#8B51BD", |
| 42 |
"#350792", |
| 43 |
"#266663", |
| 44 |
"#775189", |
| 45 |
"#68497E", |
| 46 |
"#000000", |
| 47 |
], |
| 48 |
color_type_5: [ |
| 49 |
"#FFFFFF", |
| 50 |
"#EEEEEE", |
| 51 |
"#4FD0D4", |
| 52 |
"#00ADB5", |
| 53 |
"#095F5C", |
| 54 |
"#C41C10", |
| 55 |
"#343C48", |
| 56 |
"#222831", |
| 57 |
"#000000", |
| 58 |
], |
| 59 |
color_type_6: [ |
| 60 |
"#FFFAF2", |
| 61 |
"#FEFAE0", |
| 62 |
"#F49100", |
| 63 |
"#E46700", |
| 64 |
"#DA4D00", |
| 65 |
"#4E6E3E", |
| 66 |
"#3A502A", |
| 67 |
"#283618", |
| 68 |
"#000000", |
| 69 |
], |
| 70 |
// color_type_7: [ |
| 71 |
// '#f8f3ed', |
| 72 |
// '#f2e2d0', |
| 73 |
// '#D6C4B4', |
| 74 |
// '#dd8336', |
| 75 |
// '#f09f4d', |
| 76 |
// '#3D2A1D', |
| 77 |
// '#6E5F52', |
| 78 |
// '#483324', |
| 79 |
// '#2e1e11', |
| 80 |
// ], |
| 81 |
// color_type_8: [ |
| 82 |
// '#ffffff', |
| 83 |
// '#faf0f4', |
| 84 |
// '#D6B4CF', |
| 85 |
// '#d948a2', |
| 86 |
// '#e56ab5', |
| 87 |
// '#401B2E', |
| 88 |
// '#725468', |
| 89 |
// '#4e2239', |
| 90 |
// '#290e1d', |
| 91 |
// ], |
| 92 |
}; |
| 93 |
} |
| 94 |
}; |
| 95 |
/** |
| 96 |
* Generate CSS root variables from color settings |
| 97 |
* @param {Object} colorSettings - The color settings object |
| 98 |
* @param {Object} breakPoint - The color settings object |
| 99 |
* @returns {string} CSS string with root variables |
| 100 |
*/ |
| 101 |
const generateRootCSS = (colorSettings, breakPoint) => { |
| 102 |
let cssVariables = []; |
| 103 |
if (breakPoint) { |
| 104 |
cssVariables.push(` --sp-smart-breakpoint-tablet: ${breakPoint.tablet}px;`); |
| 105 |
cssVariables.push(` --sp-smart-breakpoint-mobile: ${breakPoint.mobile}px;`); |
| 106 |
} |
| 107 |
// Process default colors |
| 108 |
if (colorSettings.presetColors && Array.isArray(colorSettings.presetColors)) { |
| 109 |
colorSettings.presetColors.forEach((colorObj) => { |
| 110 |
if (colorObj.color && colorObj.slug) { |
| 111 |
const variableName = convertToVariableName(colorObj.slug); |
| 112 |
cssVariables.push(`${variableName}: ${colorObj.color};`); |
| 113 |
} |
| 114 |
}); |
| 115 |
} |
| 116 |
|
| 117 |
// Process custom colors |
| 118 |
if (colorSettings.customColors && Array.isArray(colorSettings.customColors)) { |
| 119 |
colorSettings.customColors.forEach((colorObj) => { |
| 120 |
if (colorObj.color && colorObj.slug) { |
| 121 |
const variableName = convertToVariableName(colorObj.slug); |
| 122 |
cssVariables.push(` ${variableName}: ${colorObj.color};`); |
| 123 |
} |
| 124 |
}); |
| 125 |
} |
| 126 |
|
| 127 |
// Process default gradients |
| 128 |
if (colorSettings.defaultGradient && Array.isArray(colorSettings.defaultGradient)) { |
| 129 |
colorSettings.defaultGradient.forEach((gradientObj) => { |
| 130 |
if (gradientObj.gradient && gradientObj.slug) { |
| 131 |
const variableName = convertToVariableName(gradientObj.slug); |
| 132 |
cssVariables.push(` ${variableName}: ${gradientObj.gradient};`); |
| 133 |
} |
| 134 |
}); |
| 135 |
} |
| 136 |
|
| 137 |
// Process custom gradients |
| 138 |
if (colorSettings.customGradients && Array.isArray(colorSettings.customGradients)) { |
| 139 |
colorSettings.customGradients.forEach((gradientObj) => { |
| 140 |
if (gradientObj.gradient && gradientObj.slug) { |
| 141 |
const variableName = convertToVariableName(gradientObj.slug); |
| 142 |
cssVariables.push(` ${variableName}: ${gradientObj.gradient};`); |
| 143 |
} |
| 144 |
}); |
| 145 |
} |
| 146 |
|
| 147 |
// Return the complete CSS |
| 148 |
if (cssVariables.length === 0) { |
| 149 |
return ""; |
| 150 |
} |
| 151 |
|
| 152 |
return `:root {${cssVariables.join(" ")}}`; |
| 153 |
}; |
| 154 |
/** |
| 155 |
* Convert color name to CSS variable name |
| 156 |
* @param {string} name - Color name |
| 157 |
* @param {string} prefix - Prefix for the variable |
| 158 |
* @return {string} CSS variable name |
| 159 |
*/ |
| 160 |
const convertToVariableName = (name, prefix = "smart-post") => { |
| 161 |
return `--${prefix}-${name |
| 162 |
.toLowerCase() |
| 163 |
.replace(/[^a-z0-9]/g, "-") |
| 164 |
.replace(/-+/g, "-") |
| 165 |
.replace(/^-|-$/g, "")}`; |
| 166 |
}; |
| 167 |
export { DefaultPresetAttr, generateRootCSS, convertToVariableName }; |
| 168 |
|
| 169 |
const camelToKebab = (str) => { |
| 170 |
return str.replace(/[A-Z]/g, (m) => "-" + m.toLowerCase()); |
| 171 |
}; |
| 172 |
|
| 173 |
export const generateSizeRootCSS = (fontSizes, breakpoint) => { |
| 174 |
let css = ":root {"; |
| 175 |
|
| 176 |
// Devices breakpoint config |
| 177 |
const devices = { |
| 178 |
Desktop: { media: null, max: null }, |
| 179 |
Tablet: { |
| 180 |
media: `@media (max-width: ${breakpoint?.tablet}px)`, |
| 181 |
max: 1023, |
| 182 |
}, |
| 183 |
Mobile: { |
| 184 |
media: `@media (max-width: ${breakpoint?.mobile}px)`, |
| 185 |
max: 767, |
| 186 |
}, |
| 187 |
}; |
| 188 |
|
| 189 |
// Collect CSS by device |
| 190 |
const cssByDevice = { |
| 191 |
Desktop: "", |
| 192 |
Tablet: "", |
| 193 |
Mobile: "", |
| 194 |
}; |
| 195 |
|
| 196 |
fontSizes.forEach((sizeList) => { |
| 197 |
sizeList?.sizes?.forEach((item, index) => { |
| 198 |
const i = index + 1; |
| 199 |
Object.keys(devices).forEach((device) => { |
| 200 |
const fontSize = item.fontSize?.device?.[device] || ""; |
| 201 |
const fontUnit = item.fontSize?.unit?.[device] || "px"; |
| 202 |
if (fontSize) { |
| 203 |
cssByDevice[device] += ` --sp-smart-font-size-${sizeList.type}-${i}: ${fontSize}${fontUnit};`; |
| 204 |
} |
| 205 |
|
| 206 |
const lineHeight = item.lineHeight?.device?.[device] || ""; |
| 207 |
// const lineUnit = item.lineHeight?.unit?.[ device ] || 'px'; |
| 208 |
if (lineHeight) { |
| 209 |
cssByDevice[device] += ` --sp-smart-line-height-${sizeList.type}-${i}: ${lineHeight};`; |
| 210 |
} |
| 211 |
}); |
| 212 |
}); |
| 213 |
}); |
| 214 |
|
| 215 |
// Desktop root vars |
| 216 |
css += cssByDevice.Desktop; |
| 217 |
css += "}"; |
| 218 |
|
| 219 |
// Tablet & Mobile inside media queries |
| 220 |
["Tablet", "Mobile"].forEach((device) => { |
| 221 |
if (cssByDevice[device]) { |
| 222 |
css += `${devices[device].media} { :root {${cssByDevice[device]} }}`; |
| 223 |
} |
| 224 |
}); |
| 225 |
|
| 226 |
return css; |
| 227 |
}; |
| 228 |
|
| 229 |
const generateCSS = (obj, breakpoint) => { |
| 230 |
const className = `.sp-smart-post-wrapper :is(.sp-smart-${obj.slug}, .sp-smart-${obj.slug}.sp-smart-post-category a )`; |
| 231 |
const devices = ["Desktop", "Tablet", "Mobile"]; |
| 232 |
const properties = ["fontSize", "lineHeight", "letterSpacing", "wordSpacing"]; |
| 233 |
|
| 234 |
let cssClass = `${className}{`; |
| 235 |
let css = ""; |
| 236 |
|
| 237 |
// Typography |
| 238 |
if (obj.typography) { |
| 239 |
const { fontWeight, style, transform, decoration, family } = obj.typography; |
| 240 |
if (fontWeight) css += `font-weight:${fontWeight};`; |
| 241 |
if (style) css += `font-style:${style};`; |
| 242 |
if (transform) css += `text-transform:${transform};`; |
| 243 |
if (decoration) css += `text-decoration:${decoration};`; |
| 244 |
if (family) css += `font-family:${family};`; |
| 245 |
} |
| 246 |
|
| 247 |
// Desktop styles |
| 248 |
properties.forEach((prop) => { |
| 249 |
const value = obj[prop]?.device?.Desktop; |
| 250 |
const unit = obj[prop]?.unit?.Desktop || ""; |
| 251 |
if (value) css += `${camelToKebab(prop)}:${value}${unit};`; |
| 252 |
}); |
| 253 |
|
| 254 |
// css += `}`; |
| 255 |
|
| 256 |
// Tablet + Mobile responsive |
| 257 |
devices.forEach((device) => { |
| 258 |
if (device === "Desktop") return; |
| 259 |
let rules = ""; |
| 260 |
properties.forEach((prop) => { |
| 261 |
const value = obj[prop]?.device?.[device]; |
| 262 |
const unit = obj[prop]?.unit?.[device] || ""; |
| 263 |
if (value) rules += `${camelToKebab(prop)}:${value}${unit};`; |
| 264 |
}); |
| 265 |
|
| 266 |
if (rules) { |
| 267 |
if (device === "Tablet") { |
| 268 |
css += `@media(max-width:${breakpoint?.tablet}px){${rules}}`; |
| 269 |
} |
| 270 |
if (device === "Mobile") { |
| 271 |
css += `@media(max-width:${breakpoint?.mobile}px){${rules}}`; |
| 272 |
} |
| 273 |
} |
| 274 |
}); |
| 275 |
|
| 276 |
return css.length ? `${cssClass}${css}}` : ""; |
| 277 |
}; |
| 278 |
|
| 279 |
export const generateTypoSizesClass = (attr, breakpoint) => { |
| 280 |
const rootCSS = generateSizeRootCSS(attr, breakpoint); |
| 281 |
|
| 282 |
return `${rootCSS}${attr?.map((obj) => generateCSS(obj, breakpoint)).join(" ")}`; |
| 283 |
}; |
| 284 |
|
| 285 |
export const generateShadowRootCSS = (shadows) => { |
| 286 |
let css = ":root {"; |
| 287 |
|
| 288 |
shadows.forEach((shadow) => { |
| 289 |
const slug = shadow.slug; |
| 290 |
const x = shadow["x-offset"] || "0"; |
| 291 |
const y = shadow["y-offset"] || "0"; |
| 292 |
const blur = shadow["blur"] || "0"; |
| 293 |
const spread = shadow["speared"] || "0"; |
| 294 |
const color = shadow["color"] || "rgba(0,0,0,0.2)"; |
| 295 |
const type = shadow.type === "inset" ? "inset " : ""; |
| 296 |
|
| 297 |
css += ` --smart-post-shadow-${slug}: ${type}${x}px ${y}px ${blur}px ${spread}px ${color};`; |
| 298 |
}); |
| 299 |
|
| 300 |
css += "}"; |
| 301 |
|
| 302 |
return css; |
| 303 |
}; |
| 304 |
|
