Add extra messages formats

bootstrap_barrio.libraries.yml

@@ -249,7 +249,19 @@ monserrat_lato:
 
 # Colors
 
-messages_light:
+messages_white:
+  version: VERSION
+  css:
+    component:
+      css/colors/messages/messages-white.css: {}
+
+messages_gray:
+  version: VERSION
+  css:
+    component:
+      css/colors/messages/messages-gray.css: {}
+
+      messages_light:
   version: VERSION
   css:
     component:

config/install/bootstrap_barrio.settings.yml

@@ -44,7 +44,7 @@ bootstrap_barrio_file: 'custom'
 
 # Colors.
 # ----------------------------
-bootstrap_barrio_system_messages: 'messages_light'
+bootstrap_barrio_system_messages: 'messages_white'
 
 # Tables.
 # ----------------------------

css/colors/messages/messages-gray.css

+/**
+ * @file
+ * Visual styles for Bootstrap Barrio's system messages.
+ */
+
+.alert-success {
+  color: white;
+  background-color: #333;
+  border-left: #28a745 15px solid;
+}
+.alert-success::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-check-box" width="1em" height="1em" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M15.354 2.646a.5.5 0 010 .708l-7 7a.5.5 0 01-.708 0l-3-3a.5.5 0 11.708-.708L8 9.293l6.646-6.647a.5.5 0 01.708 0z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M1.5 13A1.5 1.5 0 003 14.5h10a1.5 1.5 0 001.5-1.5V8a.5.5 0 00-1 0v5a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V3a.5.5 0 01.5-.5h8a.5.5 0 000-1H3A1.5 1.5 0 001.5 3v10z" clip-rule="evenodd"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1.5rem 1.5rem;
+          background-size: 1.5rem 1.5rem;
+  background-position: 0 0.4rem;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.alert-warning {
+  color: white;
+  background-color: #333;
+  border-left: #ff8800 15px solid;
+}
+.alert-warning::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-info-circle" width="1em" height="1em" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 15A7 7 0 108 1a7 7 0 000 14zm0 1A8 8 0 108 0a8 8 0 000 16z" clip-rule="evenodd"/><path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z"/><circle cx="8" cy="4.5" r="1"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1.5rem 1.5rem;
+          background-size: 1.5rem 1.5rem;
+  background-position: 0 0.4rem;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.alert-danger {
+  color: white;
+  background-color: #333;
+  border-left: #cc0000 15px solid;
+}
+.alert-danger::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-exclamation-triangle" width="1em" height="1em" viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.938 2.016a.146.146 0 00-.054.057L1.027 13.74a.176.176 0 00-.002.183c.016.03.037.05.054.06.015.01.034.017.066.017h13.713a.12.12 0 00.066-.017.163.163 0 00.055-.06.176.176 0 00-.003-.183L8.12 2.073a.146.146 0 00-.054-.057A.13.13 0 008.002 2a.13.13 0 00-.064.016zm1.044-.45a1.13 1.13 0 00-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z" clip-rule="evenodd"/><path d="M7.002 12a1 1 0 112 0 1 1 0 01-2 0zM7.1 5.995a.905.905 0 111.8 0l-.35 3.507a.552.552 0 01-1.1 0L7.1 5.995z"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1.5rem 1.5rem;
+          background-size: 1.5rem 1.5rem;
+  background-position: 0 0.4rem;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.alert-dismissible .close {
+  opacity: 0.6;
+}

css/colors/messages/messages-white.css

+/**
+ * @file
+ * Visual styles for Bootstrap Barrio's system messages.
+ */
+
+.alert-success {
+  color: #333;
+  background-color: white;
+  border-left: #28a745 15px solid;
+}
+.alert-success::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-check-box" width="1em" height="1em" viewBox="0 0 16 16" fill="#28a745" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M15.354 2.646a.5.5 0 010 .708l-7 7a.5.5 0 01-.708 0l-3-3a.5.5 0 11.708-.708L8 9.293l6.646-6.647a.5.5 0 01.708 0z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M1.5 13A1.5 1.5 0 003 14.5h10a1.5 1.5 0 001.5-1.5V8a.5.5 0 00-1 0v5a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V3a.5.5 0 01.5-.5h8a.5.5 0 000-1H3A1.5 1.5 0 001.5 3v10z" clip-rule="evenodd"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1.5rem 1.5rem;
+          background-size: 1.5rem 1.5rem;
+  background-position: 0 0.4rem;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.alert-warning {
+  color: #333;
+  background-color: white;
+  border-left: #ff8800 15px solid;
+}
+.alert-warning::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-info-circle" width="1em" height="1em" viewBox="0 0 16 16" fill="#ff8800" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 15A7 7 0 108 1a7 7 0 000 14zm0 1A8 8 0 108 0a8 8 0 000 16z" clip-rule="evenodd"/><path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588z"/><circle cx="8" cy="4.5" r="1"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1.5rem 1.5rem;
+          background-size: 1.5rem 1.5rem;
+  background-position: 0 0.4rem;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.alert-danger {
+  color: #333;
+  background-color: white;
+  border-left: #cc0000 15px solid;
+}
+.alert-danger::before {
+  display: inline-block;
+  content: "";
+  background-image: url('data:image/svg+xml,<svg class="bi bi-exclamation-triangle" width="1em" height="1em" viewBox="0 0 16 16" fill="#cc0000" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.938 2.016a.146.146 0 00-.054.057L1.027 13.74a.176.176 0 00-.002.183c.016.03.037.05.054.06.015.01.034.017.066.017h13.713a.12.12 0 00.066-.017.163.163 0 00.055-.06.176.176 0 00-.003-.183L8.12 2.073a.146.146 0 00-.054-.057A.13.13 0 008.002 2a.13.13 0 00-.064.016zm1.044-.45a1.13 1.13 0 00-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z" clip-rule="evenodd"/><path d="M7.002 12a1 1 0 112 0 1 1 0 01-2 0zM7.1 5.995a.905.905 0 111.8 0l-.35 3.507a.552.552 0 01-1.1 0L7.1 5.995z"/></svg>');
+  background-repeat: no-repeat;
+  -webkit-background-size: 1.5rem 1.5rem;
+          background-size: 1.5rem 1.5rem;
+  background-position: 0 0.4rem;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.alert-dismissible .close {
+  opacity: 0.6;
+}

subtheme/config/install/bootstrap_barrio_subtheme.settings.yml

@@ -44,7 +44,7 @@ bootstrap_barrio_file: 'custom'
 
 # Colors.
 # ----------------------------
-bootstrap_barrio_system_messages: 'messages_light'
+bootstrap_barrio_system_messages: 'messages_white'
 
 # Tables.
 # ----------------------------

theme-settings.php

@@ -693,8 +693,10 @@ function bootstrap_barrio_form_system_theme_settings_alter(&$form, FormStateInte
     '#default_value' => theme_get_setting('bootstrap_barrio_system_messages'),
     '#empty_option' => t('Default'),
     '#options' => [
-      'messages_light' => t('Light'),
-      'messages_dark' => t('Dark'),
+      'messages_white' => t('White'),
+      'messages_gray' => t('Gray'),
+      'messages_light' => t('Light color'),
+      'messages_dark' => t('Dark color'),
     ],
     '#description' => t('Replace the standard color scheme for system messages with a Google Material Design color scheme.'),
   ];