diff --git a/ui/.build/src/sass.ts b/ui/.build/src/sass.ts
index bbf63ed84bf9f..40d7352741b56 100644
--- a/ui/.build/src/sass.ts
+++ b/ui/.build/src/sass.ts
@@ -235,6 +235,7 @@ 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) {
@@ -242,9 +243,22 @@ async function parseThemeColorDefs() {
       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);
diff --git a/ui/common/css/theme/_default.scss b/ui/common/css/theme/_default.scss
index f28ffa0780e5c..52e44c64d9527 100644
--- a/ui/common/css/theme/_default.scss
+++ b/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%);