diff --git a/frontend/src/app/main/ui/ds/colors.scss b/frontend/src/app/main/ui/ds/colors.scss index 527b854521..ce535caa48 100644 --- a/frontend/src/app/main/ui/ds/colors.scss +++ b/frontend/src/app/main/ui/ds/colors.scss @@ -86,6 +86,9 @@ $grayish-red: #bfbfbf; --color-foreground-error: #{$red-500}; --color-accent-info: #{$blue-500}; --color-background-info: #{$blue-200}; + --color-background-default: #{$white}; + --color-accent-default: #{$gray-100}; + --color-icon-default: #{$blue-teal-700}; --color-background-primary: #{$white}; --color-background-secondary: #{$gray-200}; @@ -124,6 +127,9 @@ $grayish-red: #bfbfbf; --color-foreground-error: #{$red-500}; --color-accent-info: #{$blue-500}; --color-background-info: #{$blue-950}; + --color-background-default: #{$gray-950}; + --color-accent-default: #{$gray-800}; + --color-icon-default: #{$grayish-blue-500}; --color-background-primary: #{$gray-950}; --color-background-secondary: #{$black}; 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 14ac864b35..f724c28623 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 @@ -21,7 +21,7 @@ export default { control: { type: "select" }, }, level: { - options: ["info", "error", "warning", "success"], + options: ["default", "info", "error", "warning", "success"], control: { type: "select" }, }, }, @@ -30,7 +30,7 @@ export default { isHtml: false, type: "context", appearance: "neutral", - level: "info", + level: "default", }, parameters: { controls: { diff --git a/frontend/src/app/main/ui/ds/notifications/context_notification.cljs b/frontend/src/app/main/ui/ds/notifications/context_notification.cljs index fc867f898a..2b2cd6c48f 100644 --- a/frontend/src/app/main/ui/ds/notifications/context_notification.cljs +++ b/frontend/src/app/main/ui/ds/notifications/context_notification.cljs @@ -17,7 +17,7 @@ [:class {:optional true} :string] [:type {:optional true} [:maybe [:enum :toast :context]]] [:appearance {:optional true} [:enum :neutral :ghost]] - [:level {:optional true} [:maybe [:enum :info :warning :error :success]]] + [:level {:optional true} [:maybe [:enum :default :info :warning :error :success]]] [:is-html {:optional true} :boolean]]) (mf/defc context-notification* @@ -28,13 +28,14 @@ [{:keys [class type appearance level is-html children] :rest props}] (let [class (dm/str class " " (stl/css-case :contextual-notification true :contain-html is-html + :level-default (= level :default) :level-warning (= level :warning) :level-error (= level :error) :level-success (= level :success) :level-info (= level :info))) level (if (string? level) (keyword level) - (d/nilv level :info)) + (d/nilv level :default)) type (if (string? type) (keyword type) (d/nilv type :context)) diff --git a/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.cljs b/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.cljs index 6fc6064c81..e69475d1f1 100644 --- a/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.cljs +++ b/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.cljs @@ -15,6 +15,7 @@ [level] (case level :info i/info + :default i/msg-neutral :warning i/msg-neutral :error i/delete-text :success i/status-tick @@ -22,7 +23,7 @@ (def ^:private schema:notification-pill [:map - [:level [:enum :info :warning :error :success]] + [:level [:enum :default :info :warning :error :success]] [:type [:enum :toast :context]] [:appearance {:optional true} [:enum :neutral :ghost]] [:is-html {:optional true} :boolean]]) @@ -36,6 +37,7 @@ :appearance-ghost (= appearance :ghost) :type-toast (= type :toast) :type-context (= type :context) + :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/shared/notification_pill.scss b/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.scss index dbdac24285..3b6e4d5ff3 100644 --- a/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.scss +++ b/frontend/src/app/main/ui/ds/notifications/shared/notification_pill.scss @@ -43,6 +43,13 @@ background-color: transparent; } +.level-default { + --notification-bg-color: var(--color-background-default); + --notification-fg-color: var(--color-foreground-primary); + --notification-border-color: var(--color-accent-default); + --notification-icon-color: var(--color-icon-default); +} + .level-info { --notification-bg-color: var(--color-background-info); --notification-fg-color: var(--color-foreground-primary);