diff --git a/frontend/src/lib/styles/variables.scss b/frontend/src/lib/styles/variables.scss
index c9be5eb..5eaed0a 100644
--- a/frontend/src/lib/styles/variables.scss
+++ b/frontend/src/lib/styles/variables.scss
@@ -112,9 +112,9 @@
     --color-primary-shade: #{color.mix($color-primary, $color-black, 92%)};
     --color-primary-shade-darker: #{color.mix($color-primary, $color-black, 84%)};
     --color-primary-shade-rgb: #{toRGB(color.mix($color-primary, $color-black, 92%))};
-    --color-primary-opacity: rgba(var(--color-primary), 0.2);
-    --color-primary-opacity-hover: rgba(var(--color-primary), 0.25);
-    --color-primary-tint: rgba(var(--color-primary), 0.1);
+    --color-primary-opacity: #{color.change($color-primary, $alpha: 0.2)};
+    --color-primary-opacity-hover: #{color.change($color-primary, $alpha: 0.25)};
+    --color-primary-tint: #{color.change($color-primary, $alpha: 0.1)};
     --color-active: #{$color-green};
     --color-active-darker: #{color.mix($color-green, $color-black, 84%)};
     --color-success: #{$color-green};