chore: scope theming variables used in illustrations (#12687)

Author: nnaydenow

packages/tools/lib/create-illustrations/index.js

@@ -1,5 +1,6 @@
 const fs = require("fs").promises;
 const path = require("path");
+const { scopeThemingVariables } = require("../css-processors/scope-variables.mjs");
 
 const generate = async (argv) => {
 	if (argv.length < 7) {
@@ -91,7 +92,7 @@ const generate = async (argv) => {
 	console.log(`Generating illustrations from ${srcPath} to ${destPath}`)
 
 	const svgImportTemplate = svgContent => {
-		return `export default \`${svgContent}\`;`
+		return `export default \`${scopeThemingVariables(svgContent)}\`;`
 	};
 	const svgToJs = async fileName => {
 		const svg = await fs.readFile(path.join(srcPath, fileName), { encoding: "utf-8" });

packages/tools/lib/css-processors/scope-variables.mjs

@@ -45,6 +45,7 @@ const scopeUi5Variables = (cssText, packageJSON, inputFile) => {
 	return newText.replaceAll("--sap", `--ui5-sap`);
 }
 
+// Used with CSS text and SVG file content (illustrations)
 const scopeThemingVariables = (cssText) => {
 	return cssText.replaceAll("--sap", `--ui5-sap`);
 }