fix(ui): add light mode colors to warning alert

Author: luis-dk

testgen/ui/components/frontend/js/components/alert.js

@@ -4,7 +4,7 @@
  * @property {string?} icon
  * @property {number?} timeout
  * @property {boolean?} closeable
- * @property {'info'|'success'|'error'} type
+ * @property {'info'|'success'|'warn'|'error'} type
  */
 import van from '../van.min.js';
 import { getValue, loadStylesheet, getRandomId } from '../utils.js';
@@ -35,11 +35,7 @@ const Alert = (/** @type Properties */ props, /** @type Array<HTMLElement> */ ..
         {
             ...props,
             id: elementId,
-            class: () => (getValue(props.class) ?? '') + ` tg-alert flex-row`,
-            style: () => {
-                const colors = alertTypeColors[getValue(props.type)];
-                return `color: ${colors.color}; background-color: ${colors.backgroundColor};`;
-            },
+            class: () => `tg-alert flex-row ${getValue(props.class) ?? ''} tg-alert-${getValue(props.type)}`,
             role: 'alert',
         },
         () => {
@@ -74,6 +70,34 @@ stylesheet.replace(`
     font-size: 16px;
     line-height: 24px;
 }
+
+.tg-alert-info {
+    background-color: rgba(28, 131, 225, 0.1);
+    color: rgb(0, 66, 128);
+}
+
+.tg-alert-success {
+    background-color: rgba(33, 195, 84, 0.1);
+    color: rgb(23, 114, 51);
+}
+
+.tg-alert-error {
+    background-color: rgba(255, 43, 43, 0.09);
+    color: rgb(125, 53, 59);
+}
+
+.tg-alert-warn {
+    background-color: rgba(255, 227, 18, 0.1);
+    color: rgb(146, 108, 5);
+}
+
+@media (prefers-color-scheme: dark) {
+    .tg-alert-warn {
+        background-color: rgba(255, 227, 18, 0.2);
+        color: rgb(255, 255, 194);
+    }
+}
+
 .tg-alert > .tg-icon {
     color: inherit !important;
 }