support color

website/src/app.pcss

@@ -31,6 +31,8 @@
     --destructive: 0 72.2% 50.6%;
     --destructive-foreground: 210 40% 98%;
 
+    --support: 220 15 130;
+ 
     --ring: 222.2 84% 4.9%;
  
     --radius: 0.5rem;

website/src/lib/components/Menu.svelte

@@ -2,17 +2,7 @@
 	import * as Menubar from '$lib/components/ui/menubar/index.js';
 	import { Button } from '$lib/components/ui/button';
 	import Logo from './Logo.svelte';
-	import {
+	import { Plus, Copy, Download, Undo2, Redo2, Trash2, Upload, Cloud, Heart } from 'lucide-svelte';
-		Plus,
-		Copy,
-		Download,
-		Undo2,
-		Redo2,
-		Trash2,
-		HeartHandshake,
-		Upload,
-		Cloud
-	} from 'lucide-svelte';
 
 	import {
 		files,
@@ -153,8 +143,8 @@
 				variant="ghost"
 				href="https://ko-fi.com/gpxstudio"
 				target="_blank"
-				class="cursor-default h-fit rounded-sm"
+				class="cursor-default h-fit rounded-sm font-bold text-support hover:text-support"
-				>{$_('menu.donate')} <HeartHandshake size="16" class="ml-1" /></Button
+				>{$_('menu.donate')} <Heart size="16" class="ml-1" fill="rgb(var(--support))" /></Button
 			>
 		</div>
 	</div>

website/tailwind.config.js

@@ -47,7 +47,8 @@ const config = {
                 card: {
                     DEFAULT: "hsl(var(--card) / <alpha-value>)",
                     foreground: "hsl(var(--card-foreground) / <alpha-value>)"
-                }
+                },
+                support: "rgb(var(--support))",
             },
             borderRadius: {
                 lg: "var(--radius)",