✨ Add a default appearance to context notifications

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};

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: {

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))

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)

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);