fix: update text color to use muted-foreground for better accessibility

Author: DarthGigi

src/lib/components/header/Header.svelte

@@ -53,7 +53,7 @@
             <Avatar.Image loading="lazy" src="/img/app-icons/svg.svg" alt="SkyCrypt" class="pointer-events-none h-6 select-none" />
           {/if}
 
-          <Avatar.Fallback class="flex h-full items-center justify-center text-lg font-semibold text-foreground/60 uppercase">SC</Avatar.Fallback>
+          <Avatar.Fallback class="flex h-full items-center justify-center text-lg font-semibold text-muted-foreground uppercase">SC</Avatar.Fallback>
         </Avatar.Root>
       </Button.Root>
       <div class="flex flex-col items-start justify-center-safe gap-1">
@@ -65,7 +65,7 @@
         </Button.Root>
 
         {#if packageVersion}
-          <Button.Root class="text-xs leading-none font-normal text-foreground/60 transition-colors hover:text-primary/60 data-[cupcake=true]:text-yellow-500/60 data-[cupcake=true]:hover:text-yellow-500" rel="noreferrer" href="https://github.com/SkyCryptWebsite/SkyCrypt-Frontend/releases/tag/v{packageVersion}" target="_blank" data-cupcake={page.url.origin.includes("cupcake") || dev}>v{packageVersion}</Button.Root>
+          <Button.Root class="text-xs leading-none font-normal text-muted-foreground transition-colors hover:text-primary/60 data-[cupcake=true]:text-yellow-500/60 data-[cupcake=true]:hover:text-yellow-500" rel="noreferrer" href="https://github.com/SkyCryptWebsite/SkyCrypt-Frontend/releases/tag/v{packageVersion}" target="_blank" data-cupcake={page.url.origin.includes("cupcake") || dev}>v{packageVersion}</Button.Root>
         {/if}
       </div>
     </div>

src/lib/components/header/settings/Misc.svelte

@@ -67,7 +67,7 @@
         <Tooltip.Provider delayDuration={0}>
           <Tooltip.Root>
             <Tooltip.Trigger class="flex items-center gap-1">
-              <CircleQuestionMark class="size-4 h-lh text-foreground/60" />
+              <CircleQuestionMark class="size-4 h-lh text-muted-foreground" />
             </Tooltip.Trigger>
 
             <Tooltip.Content class="performance:bg-popover [&>div:last-child]:hidden rounded-xl bg-transparent glass border text-foreground glass-bg-popover p-4 text-sm">

src/lib/components/header/settings/Packs.svelte

@@ -58,7 +58,7 @@
       </div>
     </ScrollArea>
   {:else}
-    <p class="text-center text-sm text-foreground/60">No packs available.</p>
+    <p class="text-center text-sm text-muted-foreground">No packs available.</p>
   {/if}
   {#if hasPackConfigChanged}
     <Button

src/lib/components/header/settings/Themes.svelte

@@ -102,7 +102,7 @@
                 </Avatar.Root>
                 <div class="flex flex-col">
                   <h4 class="font-semibold text-foreground/90">{theme.metadata.name}</h4>
-                  <p class="overflow-hidden font-normal text-ellipsis whitespace-nowrap text-foreground/60">
+                  <p class="overflow-hidden font-normal text-ellipsis whitespace-nowrap text-muted-foreground">
                     by
                     <span class="text-foreground/80">{theme.metadata.author}</span>
                   </p>

src/lib/components/item/GearSlotColumn.svelte

@@ -18,7 +18,7 @@
 
 <div data-slot="gear-slot-column" class={cn("flex shrink-0 flex-col gap-2", className)}>
   {#if label}
-    <span class="text-center text-xs font-semibold tracking-wide text-foreground/60 uppercase">{label}</span>
+    <span class="text-center text-xs font-semibold tracking-wide text-muted-foreground uppercase">{label}</span>
   {/if}
 
   <div class="flex flex-col gap-2">

src/lib/components/item/item-content.svelte

@@ -94,7 +94,7 @@
         {/if}
         {#if hasColor}
           <div class="mt-4 flex max-w-72 items-center justify-start gap-4 rounded-[0.625rem] bg-foreground/5 p-2 transition-colors ease-out">
-            <div class="flex items-center gap-2 text-foreground/60">
+            <div class="flex items-center gap-2 text-muted-foreground">
               <TriangleAlert class="size-10" />
               <div class="text-sm font-semibold">Due to abuse, all leather armor uses default color values</div>
             </div>
@@ -116,9 +116,9 @@
                       <span class="underline">
                         {packData.name}
                       </span>
-                      <span class="text-sm text-foreground/60">{packData.version}</span>
+                      <span class="text-sm text-muted-foreground">{packData.version}</span>
                     </div>
-                    <div class="text-sm text-foreground/60">
+                    <div class="text-sm text-muted-foreground">
                       by <span class="text-foreground/80">{packData.author}</span>
                     </div>
                   </div>

src/lib/components/misc/CommandSearchGroup.svelte

@@ -15,7 +15,7 @@
   <Command.LinkItem value={item.ign} href="/stats/{item.ign}" keywords={[item.ign, item.uuid, "profile", "player", "favorite", "favorites"].filter(Boolean) as string[]}>
     <Avatar.Root class="size-4 shrink-0 bg-foreground/10">
       <Avatar.Image loading="lazy" src={item.uuid ? `https://nmsr.nickac.dev/face/${item.uuid}` : "https://nmsr.nickac.dev/face/bc8ea1f51f253ff5142ca11ae45193a4ad8c3ab5e9c6eec8ba7a4fcb7bac40"} alt={item.ign} class="aspect-square size-4 [image-rendering:pixelated]" />
-      <Avatar.Fallback class="flex h-full items-center justify-center text-lg font-semibold text-foreground/60 uppercase">
+      <Avatar.Fallback class="flex h-full items-center justify-center text-lg font-semibold text-muted-foreground uppercase">
         {item.ign.slice(0, 2)}
       </Avatar.Fallback>
     </Avatar.Root>

src/lib/components/misc/ContributorCard.svelte

@@ -65,7 +65,7 @@
                 {#if typeof Icon === "string"}
                   <img src={Icon} alt="Technoblade Icon" class="size-4" />
                 {:else}
-                  <Icon class={cn("size-4", options?.favorite ? "fill-[oklch(75.25%_0.0023_17.21)] stroke-[oklch(75.25%_0.0023_17.21)]" : "text-foreground/60")} />
+                  <Icon class={cn("size-4", options?.favorite ? "fill-[oklch(75.25%_0.0023_17.21)] stroke-[oklch(75.25%_0.0023_17.21)]" : "text-muted-foreground")} />
                 {/if}
               </div>
             {/snippet}
@@ -84,7 +84,7 @@
   <Button href={options?.tip ? undefined : resolve("/stats/[ign]", { ign: user.id })} class="relative flex h-full w-full min-w-0 items-center gap-4 rounded-xl p-5 text-left glass glass-brightness-150 dark:glass-brightness-50 glass-contrast-60 dark:glass-contrast-100">
     <Avatar.Root class="size-16 shrink-0">
       <Avatar.Image loading="lazy" src={options?.tip ? "https://nmsr.nickac.dev/face/bc8ea1f51f253ff5142ca11ae45193a4ad8c3ab5e9c6eec8ba7a4fcb7bac40" : `https://nmsr.nickac.dev/face/${user.id}`} alt={user.username} class={cn("aspect-square size-16 [image-rendering:pixelated]", options?.tip ? "rounded-xl bg-foreground/10" : "")} />
-      <Avatar.Fallback class="flex h-full items-center justify-center rounded-xl bg-foreground/10 text-lg font-semibold text-foreground/60 uppercase">
+      <Avatar.Fallback class="flex h-full items-center justify-center rounded-xl bg-foreground/10 text-lg font-semibold text-muted-foreground uppercase">
         {user.username?.slice(0, 2)}
       </Avatar.Fallback>
     </Avatar.Root>

src/lib/components/newsroom/PostCard.svelte

@@ -52,12 +52,12 @@
         {#if author.mcUuid}
           <Avatar.Root class="size-4 shrink-0">
             <Avatar.Image loading="lazy" src="https://nmsr.nickac.dev/face/{author.mcUuid}" alt={displayName} class="size-full [image-rendering:pixelated]" />
-            <Avatar.Fallback class="flex size-full items-center justify-center bg-foreground/10 text-[0.5rem] font-semibold text-foreground/60 uppercase">{initials}</Avatar.Fallback>
+            <Avatar.Fallback class="flex size-full items-center justify-center bg-foreground/10 text-[0.5rem] font-semibold text-muted-foreground uppercase">{initials}</Avatar.Fallback>
           </Avatar.Root>
         {/if}
-        <span class="truncate text-foreground/60">{displayName}</span>
+        <span class="truncate text-muted-foreground">{displayName}</span>
       </div>
-      <time datetime={post.publishedAt} class="shrink-0 text-foreground/60">{formatDate(post.publishedAt)}</time>
+      <time datetime={post.publishedAt} class="shrink-0 text-muted-foreground">{formatDate(post.publishedAt)}</time>
     </div>
 
     <svelte:element this={as} class="text-xl leading-tight font-bold text-background-foreground transition-colors">{post.title}</svelte:element>

src/lib/components/stats/AdditionStat.svelte

@@ -56,8 +56,8 @@
 {/if}
 
 {#snippet additionalStatLabel()}
-  <Item.Content class="flex text-base font-bold text-foreground/60 items-center flex-row w-fit">
-    <div class={!asterisk ? cn("my-0 flex items-center gap-1 font-bold text-foreground/60 data-[is-tooltip=false]:cursor-default", { "text-accent-2": maxed }, className) : "contents"}>
+  <Item.Content class="flex text-base font-bold text-muted-foreground items-center flex-row w-fit">
+    <div class={!asterisk ? cn("my-0 flex items-center gap-1 font-bold text-muted-foreground data-[is-tooltip=false]:cursor-default", { "text-accent-2": maxed }, className) : "contents"}>
       <div style={textRarityColor ? `color: var(--§${RARITY_COLORS[textRarityColor]})` : ""} class="capitalize">
         {text}:
       </div>