fix: avatar colors

packages/ui/src/components/avatar.css

@@ -1,5 +1,6 @@
 [data-component="avatar"] {
   --avatar-bg: var(--color-surface-info-base);
+  --avatar-fg: var(--color-text-base);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10,7 +11,7 @@
   font-weight: 500;
   text-transform: uppercase;
   background-color: var(--avatar-bg);
-  color: oklch(from var(--avatar-bg) calc(l * 0.72) calc(c * 8) h);
+  color: var(--avatar-fg);
 }
 
 [data-component="avatar"][data-has-image] {

packages/ui/src/components/avatar.tsx

@@ -4,11 +4,21 @@ export interface AvatarProps extends ComponentProps<"div"> {
   fallback: string
   src?: string
   background?: string
+  foreground?: string
   size?: "small" | "normal" | "large"
 }
 
 export function Avatar(props: AvatarProps) {
-  const [split, rest] = splitProps(props, ["fallback", "src", "background", "size", "class", "classList", "style"])
+  const [split, rest] = splitProps(props, [
+    "fallback",
+    "src",
+    "background",
+    "foreground",
+    "size",
+    "class",
+    "classList",
+    "style",
+  ])
   const src = split.src // did this so i can zero it out to test fallback
   return (
     <div
@@ -23,6 +33,7 @@ export function Avatar(props: AvatarProps) {
       style={{
         ...(typeof split.style === "object" ? split.style : {}),
         ...(!src && split.background ? { "--avatar-bg": split.background } : {}),
+        ...(!src && split.foreground ? { "--avatar-fg": split.foreground } : {}),
       }}
     >
       <Show when={src} fallback={split.fallback?.[0]}>