diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index a9384446d..63adb557f 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -1,8 +1,9 @@
 @use '@angular/material' as mat;
+@use 'sass:color';
 
 @use './styles/bootstrap';
 @use './styles/table' as t;
-@import './styles/variables';
+@use './styles/variables' as v;
 
 @import 'svgmap/style.min';
 
@@ -12,8 +13,10 @@
   --light-background: rgb(255, 255, 255);
 
   --dark-primary-text:
-    #{red($dark-primary-text)}, #{green($dark-primary-text)},
-    #{blue($dark-primary-text)}, #{alpha($dark-primary-text)};
+    #{color.channel(v.$dark-primary-text, 'red')},
+    #{color.channel(v.$dark-primary-text, 'green')},
+    #{color.channel(v.$dark-primary-text, 'blue')},
+    #{color.channel(v.$dark-primary-text, 'alpha')};
   --dark-secondary-text: 0, 0, 0, 0.54;
   --dark-accent-text: 0, 0, 0, 0.87;
   --dark-warn-text: 0, 0, 0, 0.87;
@@ -21,8 +24,10 @@
   --dark-dividers: 0, 0, 0, 0.12;
   --dark-focused: 0, 0, 0, 0.12;
   --light-primary-text:
-    #{red($light-primary-text)}, #{green($light-primary-text)},
-    #{blue($light-primary-text)}, #{alpha($light-primary-text)};
+    #{color.channel(v.$light-primary-text, 'red')},
+    #{color.channel(v.$light-primary-text, 'green')},
+    #{color.channel(v.$light-primary-text, 'blue')},
+    #{color.channel(v.$light-primary-text, 'alpha')};
   --light-secondary-text: 255, 255, 255, 0.7;
   --light-accent-text: 255, 255, 255, 1;
   --light-warn-text: 255, 255, 255, 1;