add success global notice style/level

3 files changed, 45 insertions, 0 deletions

diff --git a/src/App.scss b/src/App.scss
index 2a1d7b1b..a3b1c87a 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -698,6 +698,15 @@ nav {
       color: var(--alertWarningPanelText, $fallback--text);
     }
   }
+
+  &.success {
+    background-color: var(--alertSuccess, $fallback--alertWarning);
+    color: var(--alertSuccessText, $fallback--text);
+
+    .panel-heading & {
+      color: var(--alertSuccessPanelText, $fallback--text);
+    }
+  }
 }
 
 .faint {
diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index 049e23db..a45f4586 100644
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@@ -71,6 +71,14 @@
     }
   }
 
+  .global-success {
+    background-color: var(--alertPopupSuccess, $fallback--cGreen);
+    color: var(--alertPopupSuccessText, $fallback--text);
+    .svg-inline--fa {
+      color: var(--alertPopupSuccessText, $fallback--text);
+    }
+  }
+
   .global-info {
     background-color: var(--alertPopupNeutral, $fallback--fg);
     color: var(--alertPopupNeutralText, $fallback--text);
diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js
index bec1eebd..14aac975 100644
--- a/src/services/theme_data/pleromafe.js
+++ b/src/services/theme_data/pleromafe.js
@@ -616,6 +616,23 @@ export const SLOT_INHERITANCE = {
     textColor: true
   },
 
+  alertSuccess: {
+    depends: ['cGreen'],
+    opacity: 'alert'
+  },
+  alertSuccessText: {
+    depends: ['text'],
+    layer: 'alert',
+    variant: 'alertSuccess',
+    textColor: true
+  },
+  alertSuccessPanelText: {
+    depends: ['panelText'],
+    layer: 'alertPanel',
+    variant: 'alertSuccess',
+    textColor: true
+  },
+
   alertNeutral: {
     depends: ['text'],
     opacity: 'alert'
@@ -656,6 +673,17 @@ export const SLOT_INHERITANCE = {
     textColor: true
   },
 
+  alertPopupSuccess: {
+    depends: ['alertSuccess'],
+    opacity: 'alertPopup'
+  },
+  alertPopupSuccessText: {
+    depends: ['alertSuccessText'],
+    layer: 'popover',
+    variant: 'alertPopupSuccess',
+    textColor: true
+  },
+
   alertPopupNeutral: {
     depends: ['alertNeutral'],
     opacity: 'alertPopup'