diff --git a/frontend/src/app/main/ui/notifications/context_notification.scss b/frontend/src/app/main/ui/notifications/context_notification.scss
index 98e590494..eb01af8a7 100644
--- a/frontend/src/app/main/ui/notifications/context_notification.scss
+++ b/frontend/src/app/main/ui/notifications/context_notification.scss
@@ -7,60 +7,60 @@
 @import "refactor/common-refactor.scss";
 
 .context-notification {
-  --bg-color: var(--alert-background-color-default);
-  --fg-color: var(--alert-text-foreground-color-default);
-  --icon-color: var(--alert-icon-foreground-color-default);
-  --border-color: var(--alert-border-color-default);
+  ---context-notification-bg-color: var(--alert-background-color-default);
+  --context-notification-fg-color: var(--alert-text-foreground-color-default);
+  --context-notification-icon-color: var(--alert-icon-foreground-color-default);
+  --context-notification-border-color: var(--alert-border-color-default);
   display: grid;
   grid-template-columns: $s-16 auto 1fr;
   gap: $s-8;
   min-height: $s-32;
   width: 100%;
   padding: $s-8 $s-8 $s-8 $s-16;
-  border: $s-1 solid var(--border-color);
+  border: $s-1 solid var(--context-notification-border-color);
   border-radius: $br-8;
-  background-color: var(--bg-color);
+  background-color: var(--context-notification-bg-color);
 }
 
 .warning {
-  --bg-color: var(--alert-background-color-warning);
-  --fg-color: var(--alert-text-foreground-color-warning);
-  --icon-color: var(--alert-icon-foreground-color-warning);
-  --border-color: var(--alert-border-color-warning);
+  --context-notification-bg-color: var(--alert-background-color-warning);
+  --context-notification-fg-color: var(--alert-text-foreground-color-warning);
+  --context-notification-icon-color: var(--alert-icon-foreground-color-warning);
+  --context-notification-border-color: var(--alert-border-color-warning);
 }
 
 .success {
-  --bg-color: var(--alert-background-color-success);
-  --fg-color: var(--alert-text-foreground-color-success);
-  --icon-color: var(--alert-icon-foreground-color-success);
-  --border-color: var(--alert-border-color-success);
+  --context-notification-bg-color: var(--alert-background-color-success);
+  --context-notification-fg-color: var(--alert-text-foreground-color-success);
+  --context-notification-icon-color: var(--alert-icon-foreground-color-success);
+  --context-notification-border-color: var(--alert-border-color-success);
 }
 
 .info {
-  --bg-color: var(--alert-background-color-info);
-  --fg-color: var(--alert-text-foreground-color-info);
-  --icon-color: var(--alert-icon-foreground-color-info);
-  --border-color: var(--alert-border-color-info);
+  --context-notification-bg-color: var(--alert-background-color-info);
+  --context-notification-fg-color: var(--alert-text-foreground-color-info);
+  --context-notification-icon-color: var(--alert-icon-foreground-color-info);
+  --context-notification-border-color: var(--alert-border-color-info);
 }
 
 .default {
-  --bg-color: var(--alert-background-color-default);
-  --fg-color: var(--alert-text-foreground-color-default);
-  --icon-color: var(--alert-icon-foreground-color-default);
-  --border-color: var(--alert-border-color-default);
+  --context-notification-bg-color: var(--alert-background-color-default);
+  --context-notification-fg-color: var(--alert-text-foreground-color-default);
+  --context-notification-icon-color: var(--alert-icon-foreground-color-default);
+  --context-notification-border-color: var(--alert-border-color-default);
 }
 
 .error {
-  --bg-color: var(--alert-background-color-error);
-  --fg-color: var(--alert-text-foreground-color-error);
-  --icon-color: var(--alert-icon-foreground-color-error);
-  --border-color: var(--alert-border-color-error);
+  --context-notification-bg-color: var(--alert-background-color-error);
+  --context-notification-fg-color: var(--alert-text-foreground-color-error);
+  --context-notification-icon-color: var(--alert-icon-foreground-color-error);
+  --context-notification-border-color: var(--alert-border-color-error);
 }
 
 .icon {
   @extend .button-icon;
   align-self: self-start;
-  stroke: var(--icon-color);
+  stroke: var(--context-notification-icon-color);
 }
 
 .link-nav {
@@ -72,7 +72,7 @@
 .context-text {
   @include bodyMedTipography;
   align-self: center;
-  color: var(--fg-color);
+  color: var(--context-notification-fg-color);
   margin: auto 0;
 }
 
diff --git a/frontend/src/app/main/ui/notifications/inline_notification.scss b/frontend/src/app/main/ui/notifications/inline_notification.scss
index 698a63a7a..f70b77c6d 100644
--- a/frontend/src/app/main/ui/notifications/inline_notification.scss
+++ b/frontend/src/app/main/ui/notifications/inline_notification.scss
@@ -7,10 +7,10 @@
 @import "refactor/common-refactor.scss";
 
 .inline-notification {
-  --bg-color: var(--alert-background-color-default);
-  --fg-color: var(--alert-text-foreground-color-default);
-  --icon-color: var(--alert-icon-foreground-color-default);
-  --border-color: var(--alert-border-color-default);
+  --inline-notification-bg-color: var(--alert-background-color-default);
+  --inline-notification-fg-color: var(--alert-text-foreground-color-default);
+  --inline-notification-icon-color: var(--alert-icon-foreground-color-default);
+  --inline-notification-border-color: var(--alert-border-color-default);
   @include alertShadow;
   position: absolute;
   top: $s-72;
@@ -24,17 +24,17 @@
   max-width: $s-712;
   padding: $s-8 $s-8 $s-8 $s-16;
   margin-inline: auto;
-  border: $s-1 solid var(--border-color);
+  border: $s-1 solid var(--inline-notification-border-color);
   border-radius: $br-8;
   z-index: $z-index-modal;
-  background-color: var(--bg-color);
-  color: var(--fg-color);
+  background-color: var(--inline-notification-bg-color);
+  color: var(--inline-notification-fg-color);
 }
 
 .icon {
   @extend .button-icon;
   height: 100%;
-  stroke: var(--icon-color);
+  stroke: var(--inline-notification-icon-color);
 }
 
 .inline-text {
diff --git a/frontend/src/app/main/ui/notifications/toast_notification.scss b/frontend/src/app/main/ui/notifications/toast_notification.scss
index 851a5d35c..61e72b929 100644
--- a/frontend/src/app/main/ui/notifications/toast_notification.scss
+++ b/frontend/src/app/main/ui/notifications/toast_notification.scss
@@ -7,10 +7,10 @@
 @import "refactor/common-refactor.scss";
 
 .toast-notification {
-  --bg-color: var(--alert-background-color-default);
-  --fg-color: var(--alert-text-foreground-color-default);
-  --icon-color: var(--alert-icon-foreground-color-default);
-  --border-color: var(--alert-border-color-default);
+  --toast-notification-bg-color: var(--alert-background-color-default);
+  --toast-notification-fg-color: var(--alert-text-foreground-color-default);
+  --toast-notification-icon-color: var(--alert-icon-foreground-color-default);
+  --toast-notification-border-color: var(--alert-border-color-default);
   @include alertShadow;
   position: fixed;
   top: $s-16;
@@ -22,10 +22,10 @@
   min-width: $s-500;
   max-width: calc(10 * $s-100);
   padding: $s-8 $s-8 $s-8 $s-16;
-  border: $s-1 solid var(--border-color);
-  background-color: var(--bg-color);
+  border: $s-1 solid var(--toast-notification-border-color);
+  background-color: var(--toast-notification-bg-color);
   border-radius: $br-8;
-  color: var(--fg-color);
+  color: var(--toast-notification-fg-color);
   z-index: $z-index-alert;
 }
 
@@ -34,17 +34,17 @@
 }
 
 .warning {
-  --bg-color: var(--alert-background-color-warning);
-  --fg-color: var(--alert-text-foreground-color-warning);
-  --icon-color: var(--alert-icon-foreground-color-warning);
-  --border-color: var(--alert-border-color-warning);
+  --toast-notification-bg-color: var(--alert-background-color-warning);
+  --toast-notification-fg-color: var(--alert-text-foreground-color-warning);
+  --toast-notification-icon-color: var(--alert-icon-foreground-color-warning);
+  --toast-notification-border-color: var(--alert-border-color-warning);
 }
 
 .success {
-  --bg-color: var(--alert-background-color-success);
-  --fg-color: var(--alert-text-foreground-color-success);
-  --icon-color: var(--alert-icon-foreground-color-success);
-  --border-color: var(--alert-border-color-success);
+  --toast-notification-bg-color: var(--alert-background-color-success);
+  --toast-notification-fg-color: var(--alert-text-foreground-color-success);
+  --toast-notification-icon-color: var(--alert-icon-foreground-color-success);
+  --toast-notification-border-color: var(--alert-border-color-success);
 }
 
 .info {
@@ -55,17 +55,17 @@
 }
 
 .default {
-  --bg-color: var(--alert-background-color-default);
-  --fg-color: var(--alert-text-foreground-color-default);
-  --icon-color: var(--alert-icon-foreground-color-default);
-  --border-color: var(--alert-border-color-default);
+  --toast-notification-bg-color: var(--alert-background-color-default);
+  --toast-notification-fg-color: var(--alert-text-foreground-color-default);
+  --toast-notification-icon-color: var(--alert-icon-foreground-color-default);
+  --toast-notification-border-color: var(--alert-border-color-default);
 }
 
 .error {
-  --bg-color: var(--alert-background-color-error);
-  --fg-color: var(--alert-text-foreground-color-error);
-  --icon-color: var(--alert-icon-foreground-color-error);
-  --border-color: var(--alert-border-color-error);
+  --toast-notification-bg-color: var(--alert-background-color-error);
+  --toast-notification-fg-color: var(--alert-text-foreground-color-error);
+  --toast-notification-icon-color: var(--alert-icon-foreground-color-error);
+  --toast-notification-border-color: var(--alert-border-color-error);
 }
 
 .link-nav {
@@ -81,7 +81,7 @@
 .icon {
   @extend .button-icon;
   height: 100%;
-  stroke: var(--icon-color);
+  stroke: var(--toast-notification-icon-color);
 }
 
 .text {
@@ -99,5 +99,5 @@
 
 .close-icon {
   @extend .button-icon;
-  stroke: var(--icon-color);
+  stroke: var(--toast-notification-icon-color);
 }