minor #5339 Minor tweaks in the design of alerts (javiereguiluz)

This PR was squashed before being merged into the 4.x branch.

Discussion
----------

Minor tweaks in the design of alerts

The only change is to tweak the default colors to not use the Bootstrap ones but other colors which are very similar but belong to our color palette. Also, we've defined new darker colors for "dark mode" design.

Commits
-------

147865d Minor tweaks in the design of alerts

assets/css/easyadmin-theme/base.scss

@@ -777,6 +777,56 @@ body.ea-edit .content-header {
         box-shadow: none;
         outline: none;
     }
+
+    &:last-of-type {
+        border-bottom-width: 2px;
+    }
+
+    &.alert-primary {
+        background-color: var(--alert-primary-bg);
+        border-color: var(--alert-primary-border-color);
+        color: var(--alert-primary-color);
+    }
+    &.alert-secondary {
+        background-color: var(--alert-secondary-bg);
+        border-color: var(--alert-secondary-border-color);
+        color: var(--alert-secondary-color);
+    }
+    &.alert-success {
+        background-color: var(--alert-success-bg);
+        border-color: var(--alert-success-border-color);
+        color: var(--alert-success-color);
+    }
+    &.alert-info {
+        background-color: var(--alert-info-bg);
+        border-color: var(--alert-info-border-color);
+        color: var(--alert-info-color);
+    }
+    &.alert-warning {
+        background-color: var(--alert-warning-bg);
+        border-color: var(--alert-warning-border-color);
+        color: var(--alert-warning-color);
+    }
+    &.alert-danger {
+        background-color: var(--alert-danger-bg);
+        border-color: var(--alert-danger-border-color);
+        color: var(--alert-danger-color);
+    }
+    &.alert-light {
+        background-color: var(--alert-light-bg);
+        border-color: var(--alert-light-border-color);
+        color: var(--alert-light-color);
+    }
+    &.alert-dark {
+        background-color: var(--alert-dark-bg);
+        border-color: var(--alert-dark-border-color);
+        color: var(--alert-dark-color);
+    }
+}
+.ea-dark-scheme .alert:not(.alert-light), .alert.alert-dark {
+    .btn-close {
+        filter: invert(1);
+    }
 }
 
 // Utilities

assets/css/easyadmin-theme/variables-theme.scss

@@ -209,6 +209,30 @@
     --badge-dark-bg: var(--gray-900);
     --badge-light-box-shadow: none;
     --badge-dark-color: var(--gray-50);
+    --alert-primary-bg: var(--indigo-100);
+    --alert-primary-color: var(--indigo-800);
+    --alert-primary-border-color: var(--indigo-200);
+    --alert-secondary-bg: var(--gray-100);
+    --alert-secondary-color: var(--gray-800);
+    --alert-secondary-border-color: var(--gray-200);
+    --alert-success-bg: var(--emerald-100);
+    --alert-success-color: var(--emerald-900);
+    --alert-success-border-color: var(--emerald-200);
+    --alert-info-bg: var(--sky-100);
+    --alert-info-color: var(--sky-800);
+    --alert-info-border-color: var(--sky-200);
+    --alert-warning-bg: var(--orange-100);
+    --alert-warning-color: var(--orange-800);
+    --alert-warning-border-color: var(--orange-200);
+    --alert-danger-bg: var(--rose-100);
+    --alert-danger-color: var(--rose-800);
+    --alert-danger-border-color: var(--rose-200);
+    --alert-light-bg: var(--white);
+    --alert-light-color: var(--gray-800);
+    --alert-light-border-color: var(--gray-200);
+    --alert-dark-bg: var(--gray-800);
+    --alert-dark-color: var(--gray-50);
+    --alert-dark-border-color: var(--gray-500);
     --button-bg: var(--white);
     --button-color: var(--gray-700);
     --button-hover-color: var(--gray-800);
@@ -495,6 +519,30 @@
     --badge-dark-bg: rgba(0, 0, 0, 0.18);
     --badge-dark-box-shadow: inset 0 0 0 1px rgba(153, 153, 153, 0.3);
     --badge-dark-color: rgb(153, 153, 153);
+    --alert-primary-bg: var(--indigo-900);
+    --alert-primary-color: var(--indigo-100);
+    --alert-primary-border-color: var(--indigo-800);
+    --alert-secondary-bg: var(--true-gray-700);
+    --alert-secondary-color: var(--true-gray-300);
+    --alert-secondary-border-color: var(--true-gray-600);
+    --alert-success-bg: var(--emerald-800);
+    --alert-success-color: var(--emerald-100);
+    --alert-success-border-color: var(--emerald-700);
+    --alert-info-bg: var(--sky-800);
+    --alert-info-color: var(--sky-100);
+    --alert-info-border-color: var(--sky-700);
+    --alert-warning-bg: var(--orange-800);
+    --alert-warning-color: var(--orange-100);
+    --alert-warning-border-color: var(--orange-700);
+    --alert-danger-bg: var(--red-800);
+    --alert-danger-color: var(--red-100);
+    --alert-danger-border-color: var(--red-700);
+    --alert-light-bg: var(--true-gray-300);
+    --alert-light-color: var(--true-gray-800);
+    --alert-light-border-color: var(--true-gray-200);
+    --alert-dark-bg: var(--true-gray-900);
+    --alert-dark-color: var(--true-gray-200);
+    --alert-dark-border-color: var(--true-gray-700);
     --button-bg: var(--true-gray-600);
     --button-color: var(--true-gray-200);
     --button-hover-color: var(--true-gray-100);

src/Resources/public/entrypoints.json

@@ -2,8 +2,8 @@
   "entrypoints": {
     "app": {
       "css": [
-        "/app.862ddfd8.css",
-        "/app.862ddfd8.rtl.css"
+        "/app.0bf72e55.css",
+        "/app.0bf72e55.rtl.css"
       ],
       "js": [
         "/app.1e1ba55d.js"

src/Resources/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "app.css": "app.862ddfd8.css",
-  "app.rtl.css": "app.862ddfd8.rtl.css",
+  "app.css": "app.0bf72e55.css",
+  "app.rtl.css": "app.0bf72e55.rtl.css",
   "app.js": "app.1e1ba55d.js",
   "form.js": "form.f254eea2.js",
   "page-layout.js": "page-layout.3347892e.js",