@webmate-studio/builder 0.2.74 → 0.2.76
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/src/design-tokens.js +81 -37
package/package.json
CHANGED
package/src/design-tokens.js
CHANGED
|
@@ -32,53 +32,92 @@ function generateSemanticColorUtilities(tokens) {
|
|
|
32
32
|
'infoDark': 'info-dark',
|
|
33
33
|
'infoLight': 'info-light',
|
|
34
34
|
|
|
35
|
-
// Base semantic colors
|
|
36
|
-
'bgBase': 'default',
|
|
37
|
-
'bgElevated': 'elevated',
|
|
38
|
-
'bgLifted': 'lifted',
|
|
39
|
-
'textBase': 'default',
|
|
40
|
-
'textSubtle': 'subtle',
|
|
41
|
-
'textMuted': 'muted',
|
|
42
|
-
'borderBase': 'default',
|
|
43
|
-
'borderSubtle': 'subtle',
|
|
44
|
-
'borderMuted': 'muted',
|
|
35
|
+
// Base semantic colors (use prefixed names to avoid conflicts)
|
|
36
|
+
'bgBase': 'bg-default',
|
|
37
|
+
'bgElevated': 'bg-elevated',
|
|
38
|
+
'bgLifted': 'bg-lifted',
|
|
39
|
+
'textBase': 'text-default',
|
|
40
|
+
'textSubtle': 'text-subtle',
|
|
41
|
+
'textMuted': 'text-muted',
|
|
42
|
+
'borderBase': 'border-default',
|
|
43
|
+
'borderSubtle': 'border-subtle',
|
|
44
|
+
'borderMuted': 'border-muted',
|
|
45
45
|
|
|
46
46
|
// Accent colors
|
|
47
|
-
'bgAccentBase': 'accent-default',
|
|
48
|
-
'bgAccentElevated': 'accent-elevated',
|
|
49
|
-
'bgAccentLifted': 'accent-lifted',
|
|
50
|
-
'textAccentBase': 'accent-default',
|
|
51
|
-
'textAccentSubtle': 'accent-subtle',
|
|
52
|
-
'textAccentMuted': 'accent-muted',
|
|
53
|
-
'borderAccentBase': 'accent-default',
|
|
54
|
-
'borderAccentSubtle': 'accent-subtle',
|
|
55
|
-
'borderAccentMuted': 'accent-muted'
|
|
47
|
+
'bgAccentBase': 'bg-accent-default',
|
|
48
|
+
'bgAccentElevated': 'bg-accent-elevated',
|
|
49
|
+
'bgAccentLifted': 'bg-accent-lifted',
|
|
50
|
+
'textAccentBase': 'text-accent-default',
|
|
51
|
+
'textAccentSubtle': 'text-accent-subtle',
|
|
52
|
+
'textAccentMuted': 'text-accent-muted',
|
|
53
|
+
'borderAccentBase': 'border-accent-default',
|
|
54
|
+
'borderAccentSubtle': 'border-accent-subtle',
|
|
55
|
+
'borderAccentMuted': 'border-accent-muted'
|
|
56
56
|
};
|
|
57
57
|
|
|
58
|
-
// Collect unique
|
|
59
|
-
const
|
|
58
|
+
// Collect unique class names (deduplicate)
|
|
59
|
+
const processedClasses = new Set();
|
|
60
60
|
|
|
61
|
-
for (const [tokenKey,
|
|
61
|
+
for (const [tokenKey, className] of Object.entries(colorMap)) {
|
|
62
62
|
if (!tokens.colors[tokenKey]) continue;
|
|
63
63
|
|
|
64
|
-
// Skip if we already processed this base name
|
|
65
|
-
if (processedNames.has(baseName)) continue;
|
|
66
|
-
processedNames.add(baseName);
|
|
67
|
-
|
|
68
64
|
const colorVar = `--color-${tokenKey.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
|
|
69
65
|
|
|
70
|
-
//
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
66
|
+
// Determine which type(s) of utility classes to generate based on className prefix
|
|
67
|
+
// If className already has prefix (bg-, text-, border-), generate only that variant
|
|
68
|
+
// Otherwise generate all three variants
|
|
69
|
+
|
|
70
|
+
if (className.startsWith('bg-')) {
|
|
71
|
+
// Only generate bg-* utility
|
|
72
|
+
if (!processedClasses.has(className)) {
|
|
73
|
+
processedClasses.add(className);
|
|
74
|
+
utilities += `\n.${className} {`;
|
|
75
|
+
utilities += `\n background-color: var(${colorVar});`;
|
|
76
|
+
utilities += `\n}`;
|
|
77
|
+
}
|
|
78
|
+
} else if (className.startsWith('text-')) {
|
|
79
|
+
// Only generate text-* utility
|
|
80
|
+
if (!processedClasses.has(className)) {
|
|
81
|
+
processedClasses.add(className);
|
|
82
|
+
utilities += `\n.${className} {`;
|
|
83
|
+
utilities += `\n color: var(${colorVar});`;
|
|
84
|
+
utilities += `\n}`;
|
|
85
|
+
}
|
|
86
|
+
} else if (className.startsWith('border-')) {
|
|
87
|
+
// Only generate border-* utility
|
|
88
|
+
if (!processedClasses.has(className)) {
|
|
89
|
+
processedClasses.add(className);
|
|
90
|
+
utilities += `\n.${className} {`;
|
|
91
|
+
utilities += `\n border-color: var(${colorVar});`;
|
|
92
|
+
utilities += `\n}`;
|
|
93
|
+
}
|
|
94
|
+
} else {
|
|
95
|
+
// No prefix: generate all three variants (for primary, secondary, etc.)
|
|
96
|
+
const textClass = `text-${className}`;
|
|
97
|
+
const bgClass = `bg-${className}`;
|
|
98
|
+
const borderClass = `border-${className}`;
|
|
99
|
+
|
|
100
|
+
if (!processedClasses.has(textClass)) {
|
|
101
|
+
processedClasses.add(textClass);
|
|
102
|
+
utilities += `\n.${textClass} {`;
|
|
103
|
+
utilities += `\n color: var(${colorVar});`;
|
|
104
|
+
utilities += `\n}`;
|
|
105
|
+
}
|
|
74
106
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
107
|
+
if (!processedClasses.has(bgClass)) {
|
|
108
|
+
processedClasses.add(bgClass);
|
|
109
|
+
utilities += `\n.${bgClass} {`;
|
|
110
|
+
utilities += `\n background-color: var(${colorVar});`;
|
|
111
|
+
utilities += `\n}`;
|
|
112
|
+
}
|
|
78
113
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
114
|
+
if (!processedClasses.has(borderClass)) {
|
|
115
|
+
processedClasses.add(borderClass);
|
|
116
|
+
utilities += `\n.${borderClass} {`;
|
|
117
|
+
utilities += `\n border-color: var(${colorVar});`;
|
|
118
|
+
utilities += `\n}`;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
82
121
|
}
|
|
83
122
|
|
|
84
123
|
return utilities;
|
|
@@ -681,7 +720,12 @@ export function generateTailwindV4Theme(tokens) {
|
|
|
681
720
|
|
|
682
721
|
// Text color (not responsive)
|
|
683
722
|
if (style.textColor) {
|
|
684
|
-
|
|
723
|
+
// Convert textColor to kebab-case (textBase -> text-base)
|
|
724
|
+
const colorKebab = style.textColor
|
|
725
|
+
.replace(/([A-Z])/g, '-$1')
|
|
726
|
+
.toLowerCase()
|
|
727
|
+
.replace(/^-/, '');
|
|
728
|
+
lines.push(` --text-${kebabName}-color: var(--color-${colorKebab});`);
|
|
685
729
|
}
|
|
686
730
|
}
|
|
687
731
|
}
|