fix: generate sass swatches compatible with the new color system

telerik · Mar 19, 2024 · b510c58 · b510c58
1 parent 634edce
commit b510c58
Showing 1 changed file with 52 additions and 6 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -65,29 +65,75 @@ function writeSwatches( cwds, options ) {
 
 function swatchJsonTransformer( json ) {
     const variables = [];
+    const universal = [];
+    const colorSystem = [];
+    const colorsMap = [];
 
     json.groups.forEach( (group) => {
-        for ( const [ name, meta ] of Object.entries(group.variables) ) {
-            variables.push({ name: name, value: meta.value });
+        if ( group.colorsMap ) {
+            for ( const [ name, meta ] of Object.entries(group.colorsMap) ) {
+                colorsMap.push({ name: name, value: meta.value });
+            }
+        } else if ( group.colorSystem ) {
+            for ( const [ name, meta ] of Object.entries(group.colorSystem) ) {
+                colorSystem.push({ name: name, value: meta.value });
+            }
+        } else {
+            if (group.variables) {
+                for ( const [ name, meta ] of Object.entries(group.variables) ) {
+                    variables.push({ name: name, value: meta.value });
+                }
+            }
+
+            if (group.universal) {
+                for ( const [ name, meta ] of Object.entries(group.universal) ) {
+                    universal.push({ name: name, value: meta.value });
+                }
+            }
         }
     });
 
     const templates = {
         modern: () => {
             const sassContent = [];
 
-            sassContent.push(`@use "../scss/index.scss" as kendo-theme;`);
-            sassContent.push(variables.map( (variable) => `kendo-theme.$${variable.name}: ${variable.value};`).join( '\n' ));
+            sassContent.push(`@use "../scss/index.scss" as kendo-theme with (`);
+            sassContent.push(colorSystem.map( (variable) => `\t$${variable.name}: ${variable.value},`).join( '\n' ));
+
+            if ( colorsMap.length ) {
+                sassContent.push(`\t$kendo-colors: (`);
+                sassContent.push(colorsMap.map( (color) => `\t${color.name}: ${color.value},`).join( '\n' ));
+                sassContent.push(`\t);`);
+            }
+
+            sassContent.push(variables.map( (variable) => `\t$${variable.name}: ${variable.value},`).join( '\n' ));
+
+            sassContent.push(`);\n`);
+
             sassContent.push(`@include kendo-theme.config();`);
             sassContent.push(`@include kendo-theme.styles();`);
 
             return sassContent.join( '\n' );
         },
         legacy: () => {
             const sassContent = [];
+            if ( !colorSystem.length ) {
+                sassContent.push(`$kendo-enable-color-system: false;\n`);
+            }
+            sassContent.push(colorSystem.map( (variable) => `$${variable.name}: ${variable.value};`).join( '\n' ));
+
+            if ( colorsMap.length ) {
+                sassContent.push(`\n$kendo-colors: (`);
+                sassContent.push(colorsMap.map( (color) => `\t${color.name}: ${color.value},`).join( '\n' ));
+                sassContent.push(`);\n`);
+            }
+
+            sassContent.push(`@if not ($kendo-enable-color-system) {`);
+            sassContent.push(variables.map( (variable) => `\t$${variable.name}: ${variable.value} !global;`).join( '\n' ));
+            sassContent.push(`};`);
 
-            sassContent.push(variables.map( (variable) => `$${variable.name}: ${variable.value};`).join( '\n' ));
-            sassContent.push(`@import "all.scss";`);
+            sassContent.push(universal.map( (variable) => `$${variable.name}: ${variable.value};`).join( '\n' ));
+            sassContent.push(`\n@import "all.scss";`);
 
             return sassContent.join( '\n' );
         }