snake_case icons and better toast styles

src-web/lib/responseBody.ts

@@ -1,6 +1,6 @@
 import { readFile } from '@tauri-apps/plugin-fs';
 import type { HttpResponse } from '@yaakapp/api';
-import { getCharsetFromContentType } from './models';
+import { getCharsetFromContentType } from './model_util';
 
 export async function getResponseBodyText(response: HttpResponse): Promise<string | null> {
   if (response.bodyPath) {

src-web/lib/theme/window.ts

@@ -98,14 +98,23 @@ function templateTagColorVariables(color: YaakColor): Partial<CSSVariables> {
   };
 }
 
+function toastColorVariables(color: YaakColor): Partial<CSSVariables> {
+  return {
+    text: color.lift(0.8),
+    textSubtle: color,
+    surface: color.translucify(0.9),
+    surfaceHighlight: color.translucify(0.8),
+    border: color.lift(0.3).translucify(0.6),
+  };
+}
+
 function bannerColorVariables(color: YaakColor): Partial<CSSVariables> {
   return {
     text: color.lift(0.8),
     textSubtle: color.translucify(0.3),
     textSubtlest: color,
-    surface: color,
+    surface: color.translucify(0.9),
     border: color.lift(0.3).translucify(0.4),
-    surfaceHighlight: color.translucify(0.9),
   };
 }
 
@@ -201,6 +210,15 @@ function bannerCSS(color: YaakColorKey, colors?: Partial<YaakColors>): string |
   );
 }
 
+function toastCSS(color: YaakColorKey, colors?: Partial<YaakColors>): string | null {
+  const yaakColor = colors?.[color];
+  if (yaakColor == null) {
+    return null;
+  }
+
+  return [variablesToCSS(`.x-theme-toast--${color}`, toastColorVariables(yaakColor))].join('\n\n');
+}
+
 function templateTagCSS(color: YaakColorKey, colors?: Partial<YaakColors>): string | null {
   const yaakColor = colors?.[color];
   if (yaakColor == null) {
@@ -253,6 +271,9 @@ export function getThemeCSS(theme: YaakTheme): string {
       ...Object.keys(colors ?? {}).map((key) =>
         bannerCSS(key as YaakColorKey, theme.components?.banner ?? colors),
       ),
+      ...Object.keys(colors ?? {}).map((key) =>
+        toastCSS(key as YaakColorKey, theme.components?.banner ?? colors),
+      ),
       ...Object.keys(colors ?? {}).map((key) =>
         templateTagCSS(key as YaakColorKey, theme.components?.templateTag ?? colors),
       ),