Merge pull request #16611 from FawzyAshraf/master

Enable sass parser in ui/build to parse indirect color assignments

ui/.build/src/sass.ts

@@ -235,16 +235,30 @@ async function parseScss(src: string) {
 async function parseThemeColorDefs() {
   const themeFiles = await globArray('./common/css/theme/_*.scss', { absolute: false });
   const themes: string[] = ['dark'];
+  const capturedColors = new Map<string, string>();
   for (const themeFile of themeFiles ?? []) {
     const theme = /_([^/]+)\.scss/.exec(themeFile)?.[1];
     if (!theme) {
       env.log(`${errorMark} - invalid theme filename '${c.cyan(themeFile)}'`, { ctx: 'sass' });
       continue;
     }
     const text = fs.readFileSync(themeFile, 'utf8');
-    const colorMap = new Map<string, clr.Instance>();
     for (const match of text.matchAll(/\s\$c-([-a-z0-9]+):\s*([^;]+);/g)) {
-      colorMap.set(match[1], clr(match[2]));
+      capturedColors.set(match[1], match[2]);
+    }
+    const colorMap = new Map<string, clr.Instance>();
+    for (const [color, colorVal] of capturedColors) {
+      let val = colorVal;
+      const visitedVariables = new Set();
+      while (val.startsWith('$')) {
+        const inferredValue = capturedColors.get(val.substring(3)) ?? '#000';
+        if (visitedVariables.has(inferredValue)) {
+          break;
+        }
+        visitedVariables.add(inferredValue);
+        val = inferredValue;
+      }
+      colorMap.set(color, clr(val));
     }
     if (theme !== 'default') themes.push(theme);
     themeColorMap.set(theme, colorMap);

ui/common/css/theme/_default.scss

@@ -30,7 +30,7 @@ $c-shade: hsl(0, 0%, 30%);
 $c-inaccuracy: hsl(202, 78%, 62%);
 $c-mistake: hsl(41, 100%, 45%);
 $c-blunder: hsl(0, 69%, 60%);
-$c-good: $c-secondary;
+$c-good: hsl(88, 62%, 37%);
 $c-brilliant: hsl(129, 71%, 45%);
 $c-interesting: hsl(307, 80%, 70%);
 $c-paper: hsl(60, 56%, 91%);