@woodylab/payload 0.0.121 → 0.0.122
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/dist/generateCssVars.d.ts +0 -11
- package/dist/generateCssVars.js +0 -110
package/package.json
CHANGED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
declare function generateCssVars(settings: {
|
|
2
|
-
headingFont?: string;
|
|
3
|
-
textFont?: string;
|
|
4
|
-
foregroundColor?: string;
|
|
5
|
-
primaryColor?: string;
|
|
6
|
-
secondaryColor?: string;
|
|
7
|
-
accentColor?: string;
|
|
8
|
-
darkColor?: string;
|
|
9
|
-
lightColor?: string;
|
|
10
|
-
}): string;
|
|
11
|
-
export default generateCssVars;
|
package/dist/generateCssVars.js
DELETED
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
import hexToRgb from './hexToRgb';
|
|
2
|
-
function generateCssVars(settings) {
|
|
3
|
-
// Gestione robusta dei font
|
|
4
|
-
const fontWeights = [300, 400, 500, 600, 700, 800];
|
|
5
|
-
const fontsToImport = [settings.headingFont, settings.textFont]
|
|
6
|
-
.filter(Boolean)
|
|
7
|
-
.map((f) => {
|
|
8
|
-
if (!f)
|
|
9
|
-
return '';
|
|
10
|
-
// Aggiungiamo il parametro wght per specificare i pesi da caricare
|
|
11
|
-
return `@import url('https://fonts.googleapis.com/css2?family=${f.replace(/ /g, '+')}:wght@${fontWeights.join(';')}&display=swap');`;
|
|
12
|
-
})
|
|
13
|
-
.join('\n');
|
|
14
|
-
const generateOpacityVariants = (color, name) => {
|
|
15
|
-
if (!color) {
|
|
16
|
-
return '';
|
|
17
|
-
}
|
|
18
|
-
try {
|
|
19
|
-
const rgbValue = hexToRgb(color);
|
|
20
|
-
if (!rgbValue ||
|
|
21
|
-
typeof rgbValue.r !== 'number' ||
|
|
22
|
-
typeof rgbValue.g !== 'number' ||
|
|
23
|
-
typeof rgbValue.b !== 'number') {
|
|
24
|
-
console.warn(`Impossibile convertire il colore ${name}: ${color}`);
|
|
25
|
-
return '';
|
|
26
|
-
}
|
|
27
|
-
const { r, g, b } = rgbValue;
|
|
28
|
-
const opacityVars = Array.from({ length: 9 }, (_, i) => {
|
|
29
|
-
const opacity = (i + 1) * 10;
|
|
30
|
-
return `--color-${name}-${opacity}: rgba(${r}, ${g}, ${b}, ${opacity / 100});`;
|
|
31
|
-
}).join('\n');
|
|
32
|
-
return `
|
|
33
|
-
--color-${name}: rgb(${r}, ${g}, ${b}); /* Default (opacità 1) */
|
|
34
|
-
${opacityVars}
|
|
35
|
-
`;
|
|
36
|
-
}
|
|
37
|
-
catch (error) {
|
|
38
|
-
console.warn(`Errore nella generazione delle varianti di opacità per ${name}: ${error}`);
|
|
39
|
-
return '';
|
|
40
|
-
}
|
|
41
|
-
};
|
|
42
|
-
const generateBrightnessVariants = (color, name) => {
|
|
43
|
-
if (!color) {
|
|
44
|
-
return '';
|
|
45
|
-
}
|
|
46
|
-
try {
|
|
47
|
-
const rgbValue = hexToRgb(color);
|
|
48
|
-
if (!rgbValue ||
|
|
49
|
-
typeof rgbValue.r !== 'number' ||
|
|
50
|
-
typeof rgbValue.g !== 'number' ||
|
|
51
|
-
typeof rgbValue.b !== 'number') {
|
|
52
|
-
console.warn(`Impossibile convertire il colore ${name}: ${color}`);
|
|
53
|
-
return '';
|
|
54
|
-
}
|
|
55
|
-
const { r, g, b } = rgbValue;
|
|
56
|
-
const clamp = (value) => Math.max(0, Math.min(255, Math.round(value)));
|
|
57
|
-
const mixWith = (target, amount) => clamp(r + (target - r) * amount) +
|
|
58
|
-
',' +
|
|
59
|
-
clamp(g + (target - g) * amount) +
|
|
60
|
-
',' +
|
|
61
|
-
clamp(b + (target - b) * amount);
|
|
62
|
-
const lighter = Array.from({ length: 4 }, (_, i) => {
|
|
63
|
-
const step = (i + 1) / 5;
|
|
64
|
-
return `--color-${name}-light-${i + 1}: rgb(${mixWith(255, step)});`;
|
|
65
|
-
}).join('\n');
|
|
66
|
-
const darker = Array.from({ length: 4 }, (_, i) => {
|
|
67
|
-
const step = (i + 1) / 5;
|
|
68
|
-
return `--color-${name}-dark-${i + 1}: rgb(${mixWith(0, step)});`;
|
|
69
|
-
}).join('\n');
|
|
70
|
-
return `--color-${name}: rgb(${r}, ${g}, ${b});
|
|
71
|
-
${lighter}
|
|
72
|
-
${darker}
|
|
73
|
-
`;
|
|
74
|
-
}
|
|
75
|
-
catch (error) {
|
|
76
|
-
console.warn(`Errore nella generazione delle varianti di brightness per ${name}: ${error}`);
|
|
77
|
-
return '';
|
|
78
|
-
}
|
|
79
|
-
};
|
|
80
|
-
// Genera variabili solo per i colori forniti
|
|
81
|
-
const primaryVars = `${generateOpacityVariants(settings.primaryColor, 'primary')} ${generateBrightnessVariants(settings.primaryColor, 'primary')}`;
|
|
82
|
-
const secondaryVars = `${generateOpacityVariants(settings.secondaryColor, 'secondary')} ${generateBrightnessVariants(settings.secondaryColor, 'secondary')}`;
|
|
83
|
-
const accentVars = `${generateOpacityVariants(settings.secondaryColor, 'accent')} ${generateBrightnessVariants(settings.secondaryColor, 'accent')}`;
|
|
84
|
-
const darkVars = `${generateOpacityVariants(settings.secondaryColor, 'dark')} ${generateBrightnessVariants(settings.secondaryColor, 'dark')}`;
|
|
85
|
-
const lightVars = `${generateOpacityVariants(settings.secondaryColor, 'light')} ${generateBrightnessVariants(settings.secondaryColor, 'light')}`;
|
|
86
|
-
// Genera i valori dei font in modo sicuro
|
|
87
|
-
const headingFontValue = settings.headingFont
|
|
88
|
-
? `'${settings.headingFont}', sans-serif`
|
|
89
|
-
: 'system-layout, sans-serif';
|
|
90
|
-
const textFontValue = settings.textFont
|
|
91
|
-
? `'${settings.textFont}', sans-serif`
|
|
92
|
-
: 'system-layout, sans-serif';
|
|
93
|
-
return `
|
|
94
|
-
${fontsToImport}
|
|
95
|
-
|
|
96
|
-
:root {
|
|
97
|
-
--font-heading: ${headingFontValue};
|
|
98
|
-
--font-text: ${textFontValue};
|
|
99
|
-
--color-white: #ffffff;
|
|
100
|
-
--color-black: #000000;
|
|
101
|
-
--color-foreground: ${settings.foregroundColor || '#FFFFFF'};
|
|
102
|
-
${primaryVars}
|
|
103
|
-
${secondaryVars}
|
|
104
|
-
${accentVars}
|
|
105
|
-
${darkVars}
|
|
106
|
-
${lightVars}
|
|
107
|
-
}
|
|
108
|
-
`;
|
|
109
|
-
}
|
|
110
|
-
export default generateCssVars;
|