@webmate-studio/builder 0.2.121 → 0.2.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/src/design-tokens.js +19 -0
package/package.json
CHANGED
package/src/design-tokens.js
CHANGED
|
@@ -94,6 +94,12 @@ function generateSemanticColorUtilities(tokens) {
|
|
|
94
94
|
addUtility(className, 'color', colorVar);
|
|
95
95
|
} else if (className.startsWith('border-')) {
|
|
96
96
|
addUtility(className, 'border-color', colorVar);
|
|
97
|
+
// Also generate divide-* variant (border color on children via divide-y/divide-x)
|
|
98
|
+
const divideCls = className.replace('border-', 'divide-');
|
|
99
|
+
if (!processedClasses.has(divideCls)) {
|
|
100
|
+
processedClasses.add(divideCls);
|
|
101
|
+
utilities += `\n.${divideCls} > :not(:first-child) {\n border-color: var(${colorVar});\n}`;
|
|
102
|
+
}
|
|
97
103
|
} else {
|
|
98
104
|
addUtility(`text-${className}`, 'color', colorVar);
|
|
99
105
|
addUtility(`bg-${className}`, 'background-color', colorVar);
|
|
@@ -134,6 +140,19 @@ function generateSemanticColorUtilities(tokens) {
|
|
|
134
140
|
utilities += `\n}`;
|
|
135
141
|
}
|
|
136
142
|
}
|
|
143
|
+
|
|
144
|
+
// Generate divide-* opacity variants for border-* classes
|
|
145
|
+
if (className.startsWith('border-')) {
|
|
146
|
+
const divideCls = className.replace('border-', 'divide-');
|
|
147
|
+
for (const step of opacitySteps) {
|
|
148
|
+
const opacityCls = `${divideCls}\\/${step}`;
|
|
149
|
+
if (processedClasses.has(opacityCls)) continue;
|
|
150
|
+
processedClasses.add(opacityCls);
|
|
151
|
+
utilities += `\n.${opacityCls} > :not(:first-child) {`;
|
|
152
|
+
utilities += `\n border-color: color-mix(in srgb, var(${colorVar}) ${step}%, transparent);`;
|
|
153
|
+
utilities += `\n}`;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
137
156
|
}
|
|
138
157
|
|
|
139
158
|
utilities += '\n}'; // Close @layer utilities
|