Apply our gentler color theming to Alert stylings

Ref: RadiusNetworks/iris#3167 The colors were originally defined in Iris overrides, but those colors were only being applied to flash hashes. Error blocks and other bits here and there would have the original themed alerts come through, and these colors are more saturated and a bit "harsher". The original colors have been preserved in case they are used elsewhere, but the alerts themselves have been re-skinned to use the new color variables, which have been named in alignment with flashhash keys.
RadiusNetworks · Mar 23, 2021 · 1b97523 · 1b97523
1 parent cb0e45c
commit 1b97523
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/app/assets/stylesheets/radius-theme/app/alerts.scss b/app/assets/stylesheets/radius-theme/app/alerts.scss
@@ -9,6 +9,23 @@ $alerts-position:                               60px;
 $alerts-z-index:                                9090;
 $alerts-width:                                  350px;
 
+// Color overrides
+.alert-success {
+  @include alert-variant($alert-flash-notice-bg, $alert-flash-notice-border, $alert-flash-notice-color);
+}
+
+.alert-info {
+  @include alert-variant($alert-flash-info-bg, $alert-flash-info-border, $alert-flash-info-color);
+}
+
+.alert-warning {
+  @include alert-variant($alert-flash-warning-bg, $alert-flash-warning-border, $alert-flash-warning-color);
+}
+
+.alert-danger {
+  @include alert-variant($alert-flash-error-bg, $alert-flash-error-border, $alert-flash-error-color);
+}
+
 // Message container for positioning
 
 .alerts {

diff --git a/app/assets/stylesheets/radius-theme/app/variables.scss b/app/assets/stylesheets/radius-theme/app/variables.scss
@@ -652,8 +652,26 @@ $modal-sm:                    300px;
 
 //== Alerts
 //
-//## Define alert colors, border radius, and padding.
 
+//## Alert Colors defined using FlashHash keys -- Used in for alerts, form errors, and flashhashes
+$alert-flash-notice-color:  #468847;
+$alert-flash-notice-bg:     #dff0d8;
+$alert-flash-notice-border: #d6e9c6;
+
+$alert-flash-info-color:    #3a87ad;
+$alert-flash-info-bg:       #d9edf7;
+$alert-flash-info-border:   #bce8f1;
+
+$alert-flash-warning-color: #c09853;
+$alert-flash-warning-bg:    #fcf8e3;
+$alert-flash-warning-border:#fbeed5;
+
+$alert-flash-error-color:   #b94a48;
+$alert-flash-error-bg:      #f2dede;
+$alert-flash-error-border:  #eed3d7;
+
+//## Define alert colors, border radius, and padding.
+//## These are legacy definitions, preserved in case they are used elsewhere
 $alert-padding:               8px;
 $alert-border-radius:         $border-radius-small;
 $alert-link-font-weight:      bold;

diff --git a/lib/radius/rails/version.rb b/lib/radius/rails/version.rb
@@ -1,5 +1,5 @@
 module Radius
   module Rails
-    VERSION = "2.1.0"
+    VERSION = "2.1.1"
   end
 end