chore(ui-kit): fixes for design token parser filter

propeldata · May 23, 2024 · 5a9fa59 · 5a9fa59
1 parent e721c35
commit 5a9fa59
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/packages/ui-kit/scripts/design-tokens/parse.mts b/packages/ui-kit/scripts/design-tokens/parse.mts
@@ -232,6 +232,10 @@ const main = async (isProdEnv = false) => {
 
     const themes = variablesJSON.collections.find(({ name }) => name === '1. Color Modes')?.modes
 
+    // Parse theme tokens
+    let lightTheme = getThemeTokens({ name: 'light', themes, variables, tokens })
+    let darkTheme = getThemeTokens({ name: 'dark', themes, variables, tokens })
+
     if (isProdEnv) {
       await buildSASSFiles(spinner)
 
@@ -243,14 +247,12 @@ const main = async (isProdEnv = false) => {
 
       variables = variables.filter((variable) => currentVariablesList.includes(variable.cssName))
       tokens = tokens.filter((token) => currentVariablesList.includes(token.cssName))
+      lightTheme = lightTheme?.filter((token) => currentVariablesList.includes(token.cssName))
+      darkTheme = darkTheme?.filter((token) => currentVariablesList.includes(token.cssName))
 
       succeedMessage = `Filter out all design variables (${variables.length} from ${statsBefore.variables}) and tokens (${tokens.length} from ${statsBefore.tokens}) not in use`
     }
 
-    // Parse theme tokens
-    const lightTheme = getThemeTokens({ name: 'light', themes, variables, tokens })
-    const darkTheme = getThemeTokens({ name: 'dark', themes, variables, tokens })
-
     // Generate _variables.scss
     writeToFileSync(
       '_variables.scss',

diff --git a/packages/ui-kit/src/components/PieChart/PieChart.module.scss b/packages/ui-kit/src/components/PieChart/PieChart.module.scss
@@ -7,6 +7,18 @@
   overflow: auto;
   padding: 0;
 
+  --pie-bg-25: var(--propel-brand-25);
+  --pie-bg-50: var(--propel-brand-50);
+  --pie-bg-100: var(--propel-brand-100);
+  --pie-bg-200: var(--propel-brand-200);
+  --pie-bg-300: var(--propel-brand-300);
+  --pie-bg-400: var(--propel-brand-400);
+  --pie-bg-500: var(--propel-brand-500);
+  --pie-bg-600: var(--propel-brand-600);
+  --pie-bg-700: var(--propel-brand-700);
+  --pie-bg-900: var(--propel-brand-900);
+  --pie-bg-empty: var(--propel-background-brand-primary);
+
   canvas {
     height: var(--propel-component-height);
   }