diff --git a/frontend/src/app/main/ui/ds/notifications/context-notification.stories.jsx b/frontend/src/app/main/ui/ds/notifications/context-notification.stories.jsx
index f724c2862..e809e5839 100644
--- a/frontend/src/app/main/ui/ds/notifications/context-notification.stories.jsx
+++ b/frontend/src/app/main/ui/ds/notifications/context-notification.stories.jsx
@@ -40,7 +40,7 @@ export default {
render: ({ ...args }) => ,
};
-export const Default = {};
+export const Base = {};
export const WithLongerText = {
args: {
@@ -63,6 +63,15 @@ export const WithHTML = {
},
};
+export const Default = {
+ args: {
+ level: "default",
+ },
+ parameters: {
+ controls: { exclude: ["level", "isHtml"] },
+ },
+};
+
export const Info = {
args: {
level: "info",
diff --git a/frontend/src/app/main/ui/ds/notifications/toast.cljs b/frontend/src/app/main/ui/ds/notifications/toast.cljs
index e0ff541c7..ee21818a1 100644
--- a/frontend/src/app/main/ui/ds/notifications/toast.cljs
+++ b/frontend/src/app/main/ui/ds/notifications/toast.cljs
@@ -18,7 +18,7 @@
[:map
[:class {:optional true} :string]
[:type {:optional true} [:maybe [:enum :toast :context]]]
- [:level {:optional true} [:maybe [:enum :info :warning :error :success]]]
+ [:level {:optional true} [:maybe [:enum :default :info :warning :error :success]]]
[:appearance {:optional true} [:enum :neutral :ghost]]
[:is-html {:optional true} :boolean]
[:on-close {:optional true} fn?]])
@@ -30,7 +30,7 @@
(let [class (dm/str class " " (stl/css :toast))
level (if (string? level)
(keyword level)
- (d/nilv level :info))
+ (d/nilv level :default))
type (if (string? type)
(keyword type)
(d/nilv type :context))
@@ -51,6 +51,7 @@
[:> "button" {:on-click on-close
:aria-label "Close"
:class (stl/css-case :close-button true
+ :level-default (= level :default)
:level-warning (= level :warning)
:level-error (= level :error)
:level-success (= level :success)
diff --git a/frontend/src/app/main/ui/ds/notifications/toast.scss b/frontend/src/app/main/ui/ds/notifications/toast.scss
index a572aac07..aabed6bd0 100644
--- a/frontend/src/app/main/ui/ds/notifications/toast.scss
+++ b/frontend/src/app/main/ui/ds/notifications/toast.scss
@@ -26,6 +26,10 @@
z-index: var(--toast-vertical-index);
}
+.level-default {
+ --toast-icon-color: var(--color-icon-default);
+}
+
.level-info {
--toast-icon-color: var(--color-accent-info);
}
diff --git a/frontend/src/app/main/ui/ds/notifications/toast.stories.jsx b/frontend/src/app/main/ui/ds/notifications/toast.stories.jsx
index daf2df4ee..99f8857fb 100644
--- a/frontend/src/app/main/ui/ds/notifications/toast.stories.jsx
+++ b/frontend/src/app/main/ui/ds/notifications/toast.stories.jsx
@@ -31,7 +31,7 @@ export default {
render: ({ ...args }) => ,
};
-export const Default = {};
+export const Base = {};
export const WithLongerText = {
args: {
@@ -51,6 +51,15 @@ export const WithHTML = {
},
};
+export const Default = {
+ args: {
+ level: "default",
+ },
+ parameters: {
+ controls: { exclude: ["level", "onClose"] },
+ },
+};
+
export const Info = {
args: {
level: "info",