From 37f429797216bef94dee02501cdb3381109a502b Mon Sep 17 00:00:00 2001
From: Max Litruv Boonzaayer <litruv@gmail.com>
Date: Thu, 12 Mar 2026 23:08:05 +1100
Subject: [PATCH] feat: add avatar border color customization and improve text
 contrast across user profile components

---
 src/app/components/presence/Presence.tsx      |  5 +-
 .../components/user-profile/CreatorChip.tsx   |  8 ++--
 src/app/components/user-profile/PowerChip.tsx |  7 ++-
 src/app/components/user-profile/UserChips.tsx | 25 ++++++----
 src/app/components/user-profile/UserHero.tsx  | 14 ++++--
 .../user-profile/UserRoomProfile.tsx          | 26 +++++-----
 src/app/features/settings/account/Profile.tsx | 43 ++++++++++-------
 src/app/utils/common.ts                       | 47 +++++++++++++++++++
 8 files changed, 127 insertions(+), 48 deletions(-)

diff --git a/src/app/components/presence/Presence.tsx b/src/app/components/presence/Presence.tsx
index 108852f..b5a7222 100644
--- a/src/app/components/presence/Presence.tsx
+++ b/src/app/components/presence/Presence.tsx
@@ -62,14 +62,15 @@ export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
 type AvatarPresenceProps = {
   badge: ReactNode;
   variant?: ContainerColor;
+  badgeBackgroundColor?: string;
 };
 export const AvatarPresence = as<'div', AvatarPresenceProps>(
-  ({ as: AsAvatarPresence, badge, variant = 'Surface', children, ...props }, ref) => (
+  ({ as: AsAvatarPresence, badge, variant = 'Surface', badgeBackgroundColor, children, ...props }, ref) => (
     <Box as={AsAvatarPresence} className={css.AvatarPresence} {...props} ref={ref}>
       {badge && (
         <div
           className={css.AvatarPresenceBadge}
-          style={{ backgroundColor: color[variant].Container }}
+          style={{ backgroundColor: badgeBackgroundColor || color[variant].Container }}
         >
           {badge}
         </div>
diff --git a/src/app/components/user-profile/CreatorChip.tsx b/src/app/components/user-profile/CreatorChip.tsx
index be39254..191c353 100644
--- a/src/app/components/user-profile/CreatorChip.tsx
+++ b/src/app/components/user-profile/CreatorChip.tsx
@@ -1,4 +1,4 @@
-import { Chip, config, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
+import { Chip, color, config, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
 import React, { MouseEventHandler, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { isKeyHotkey } from 'is-hotkey';
@@ -80,6 +80,7 @@ export function CreatorChip({ borderColor }: { borderColor?: string }) {
     >
       <Chip
         variant="Success"
+        fill={borderColor ? 'Soft' : 'None'}
         outlined
         radii="Pill"
         before={
@@ -95,8 +96,9 @@ export function CreatorChip({ borderColor }: { borderColor?: string }) {
         style={borderColor ? {
           backgroundColor: borderColor,
           border: 'none',
-          color: getContrastingTextColor(borderColor)
-        } : undefined}
+          color: getContrastingTextColor(borderColor),
+          opacity: 1
+        } : { backgroundColor: color.Surface.Container, opacity: 1 }}
       >
         <Text size="B300" truncate style={borderColor ? { color: getContrastingTextColor(borderColor) } : undefined}>
           {tag.name}
diff --git a/src/app/components/user-profile/PowerChip.tsx b/src/app/components/user-profile/PowerChip.tsx
index 6ff195e..59b2cd7 100644
--- a/src/app/components/user-profile/PowerChip.tsx
+++ b/src/app/components/user-profile/PowerChip.tsx
@@ -2,6 +2,7 @@ import {
   Box,
   Button,
   Chip,
+  color,
   config,
   Dialog,
   Header,
@@ -319,6 +320,7 @@ export function PowerChip({ userId, borderColor }: { userId: string; borderColor
       >
         <Chip
           variant={error ? 'Critical' : 'SurfaceVariant'}
+          fill={borderColor ? 'Soft' : 'None'}
           radii="Pill"
           before={
             cords ? (
@@ -336,8 +338,9 @@ export function PowerChip({ userId, borderColor }: { userId: string; borderColor
           style={borderColor ? {
             backgroundColor: borderColor,
             border: 'none',
-            color: getContrastingTextColor(borderColor)
-          } : undefined}
+            color: getContrastingTextColor(borderColor),
+            opacity: 1
+          } : { backgroundColor: color.Surface.Container, opacity: 1 }}
         >
           <Text size="B300" truncate style={borderColor ? { color: getContrastingTextColor(borderColor) } : undefined}>
             {tag.name}
diff --git a/src/app/components/user-profile/UserChips.tsx b/src/app/components/user-profile/UserChips.tsx
index 2d81067..029e971 100644
--- a/src/app/components/user-profile/UserChips.tsx
+++ b/src/app/components/user-profile/UserChips.tsx
@@ -8,6 +8,7 @@ import {
   PopOut,
   Menu,
   MenuItem,
+  color,
   config,
   Text,
   Line,
@@ -125,6 +126,7 @@ export function ServerChip({ server, borderColor }: { server: string; borderColo
     >
       <Chip
         variant={myServer === server ? 'SurfaceVariant' : 'Warning'}
+        fill={borderColor ? 'Soft' : 'None'}
         radii="Pill"
         before={
           cords ? (
@@ -138,8 +140,9 @@ export function ServerChip({ server, borderColor }: { server: string; borderColo
         style={borderColor ? {
           backgroundColor: borderColor,
           border: 'none',
-          color: getContrastingTextColor(borderColor)
-        } : undefined}
+          color: getContrastingTextColor(borderColor),
+          opacity: 1
+        } : { backgroundColor: color.Surface.Container, opacity: 1 }}
       >
         <Text size="B300" truncate style={borderColor ? { color: getContrastingTextColor(borderColor) } : undefined}>
           {server}
@@ -212,6 +215,7 @@ export function ShareChip({ userId, borderColor }: { userId: string; borderColor
     >
       <Chip
         variant={copied ? 'Success' : 'SurfaceVariant'}
+        fill={borderColor ? 'Soft' : 'None'}
         radii="Pill"
         before={
           cords ? (
@@ -225,8 +229,9 @@ export function ShareChip({ userId, borderColor }: { userId: string; borderColor
         style={borderColor ? {
           backgroundColor: borderColor,
           border: 'none',
-          color: getContrastingTextColor(borderColor)
-        } : undefined}
+          color: getContrastingTextColor(borderColor),
+          opacity: 1
+        } : { backgroundColor: color.Surface.Container, opacity: 1 }}
       >
         <Text size="B300" truncate style={borderColor ? { color: getContrastingTextColor(borderColor) } : undefined}>
           Share
@@ -413,6 +418,7 @@ export function MutualRoomsChip({ userId, borderColor }: { userId: string; borde
     >
       <Chip
         variant="SurfaceVariant"
+        fill={borderColor ? 'Soft' : 'None'}
         radii="Pill"
         before={mutualRoomsState.status === AsyncStatus.Loading && <Spinner size="50" />}
         disabled={
@@ -423,8 +429,9 @@ export function MutualRoomsChip({ userId, borderColor }: { userId: string; borde
         style={borderColor ? {
           backgroundColor: borderColor,
           border: 'none',
-          color: getContrastingTextColor(borderColor)
-        } : undefined}
+          color: getContrastingTextColor(borderColor),
+          opacity: 1
+        } : { backgroundColor: color.Surface.Container, opacity: 1 }}
       >
         <Text size="B300" style={borderColor ? { color: getContrastingTextColor(borderColor) } : undefined}>
           {mutualRoomsState.status === AsyncStatus.Success &&
@@ -521,14 +528,16 @@ export function OptionsChip({ userId, borderColor }: { userId: string; borderCol
     >
       <Chip 
         variant="SurfaceVariant" 
+        fill={borderColor ? 'Soft' : 'None'}
         radii="Pill" 
         onClick={open} 
         aria-pressed={!!cords}
         style={borderColor ? {
           backgroundColor: borderColor,
           border: 'none',
-          color: getContrastingTextColor(borderColor)
-        } : undefined}
+          color: getContrastingTextColor(borderColor),
+          opacity: 1
+        } : { backgroundColor: color.Surface.Container, opacity: 1 }}
       >
         {ignoring ? (
           <Spinner variant="Secondary" size="50" />
diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx
index c18e44b..62fbc1a 100644
--- a/src/app/components/user-profile/UserHero.tsx
+++ b/src/app/components/user-profile/UserHero.tsx
@@ -60,6 +60,8 @@ export function UserHero({ userId, avatarUrl, avatarMxc, presence }: UserHeroPro
       <div className={css.UserHeroAvatarContainer}>
         <AvatarPresence
           className={css.UserAvatarContainer}
+          style={profileStyle.avatarBorderColor ? { backgroundColor: profileStyle.avatarBorderColor } : undefined}
+          badgeBackgroundColor={profileStyle.avatarBorderColor}
           badge={
             presence && <PresenceBadge presence={presence.presence} status={presence.status} />
           }
@@ -69,10 +71,14 @@ export function UserHero({ userId, avatarUrl, avatarMxc, presence }: UserHeroPro
             onClick={avatarUrl ? () => setViewAvatar(avatarUrl) : undefined}
             className={css.UserHeroAvatar}
             size="500"
-            style={profileStyle.avatarBorderColor ? {
-              outline: `${toRem(4)} solid ${profileStyle.avatarBorderColor}`,
-              outlineOffset: toRem(-1),
-            } : undefined}
+            style={{
+              width: toRem(72),
+              height: toRem(72),
+              ...(profileStyle.avatarBorderColor ? {
+                outline: `${toRem(4)} solid ${profileStyle.avatarBorderColor}`,
+                outlineOffset: toRem(-1),
+              } : {}),
+            }}
           >
             <UserAvatar
               className={css.UserHeroAvatarImg}
diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx
index 5727a1a..4384a4e 100644
--- a/src/app/components/user-profile/UserRoomProfile.tsx
+++ b/src/app/components/user-profile/UserRoomProfile.tsx
@@ -23,7 +23,7 @@ import { useMemberPowerCompare } from '../../hooks/useMemberPowerCompare';
 import { CreatorChip } from './CreatorChip';
 import { getDirectCreatePath, withSearchParam } from '../../pages/pathUtils';
 import { DirectCreateSearchParams } from '../../pages/paths';
-import { getContrastingTextColor } from '../../utils/common';
+import { getContrastingTextColor, stripAlphaFromColor, getTextShadowColor } from '../../utils/common';
 import classNames from 'classnames';
 import { BreakWord, LineClamp3 } from '../../styles/Text.css';
 import colorMXID from '../../../util/colorMXID';
@@ -87,6 +87,10 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
     (canKickUser && membership === Membership.Join) ||
     (canBanUser && membership !== Membership.Ban);
 
+  const profileColor = profileStyle.avatarBorderColor ? stripAlphaFromColor(profileStyle.avatarBorderColor) : colorMXID(userId);
+  const profileTextShadow = `0 1px 4px ${getTextShadowColor(profileColor)}`;
+  const pillBgColor = profileStyle.avatarBorderColor ? stripAlphaFromColor(profileStyle.avatarBorderColor) : undefined;
+
   return (
     <Box direction="Column">
       <UserHero
@@ -111,7 +115,7 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
         <Text
           size="H4"
           className={classNames(BreakWord, LineClamp3)}
-          style={{ color: getMemberDisplayName(room, userId) !== userId ? (profileStyle.avatarBorderColor || colorMXID(userId)) : undefined }}
+          style={{ color: getMemberDisplayName(room, userId) !== userId ? profileColor : undefined, textShadow: profileTextShadow }}
         >
           {getMemberDisplayName(room, userId)}
         </Text>
@@ -120,7 +124,7 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
         <Text
           size="T200"
           className={BreakWord}
-          style={{ color: profileStyle.avatarBorderColor || colorMXID(userId), opacity: 0.8 }}
+          style={{ color: profileColor, textShadow: profileTextShadow }}
         >
           {userId}
         </Text>
@@ -129,8 +133,8 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
         {presence?.status && (
           <Box
             style={{
-              backgroundColor: profileStyle.avatarBorderColor || color.Surface.Container,
-              border: profileStyle.avatarBorderColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
+              backgroundColor: pillBgColor || color.Surface.Container,
+              border: pillBgColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
               padding: `${toRem(6)} ${toRem(10)}`,
               borderRadius: toRem(16),
               maxWidth: toRem(250),
@@ -140,7 +144,7 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
               size="T300" 
               className={BreakWord}
               style={{
-                color: profileStyle.avatarBorderColor ? getContrastingTextColor(profileStyle.avatarBorderColor) : undefined
+                color: pillBgColor ? getContrastingTextColor(pillBgColor) : undefined
               }}
             >
               {presence.status}
@@ -150,9 +154,9 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
         
         {/* Chips Row */}
         <Box alignItems="Center" gap="200" wrap="Wrap" justifyContent="Center">
-          {server && <ServerChip server={server} borderColor={profileStyle.avatarBorderColor} />}
-          <ShareChip userId={userId} borderColor={profileStyle.avatarBorderColor} />
-          {creator ? <CreatorChip borderColor={profileStyle.avatarBorderColor} /> : <PowerChip userId={userId} borderColor={profileStyle.avatarBorderColor} />}
+          {server && <ServerChip server={server} borderColor={pillBgColor} />}
+          <ShareChip userId={userId} borderColor={pillBgColor} />
+          {creator ? <CreatorChip borderColor={pillBgColor} /> : <PowerChip userId={userId} borderColor={pillBgColor} />}
         </Box>
         
         {/* Message Button */}
@@ -172,8 +176,8 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
         {/* Additional Chips if needed */}
         {userId !== myUserId && (
           <Box alignItems="Center" gap="200" wrap="Wrap" justifyContent="Center">
-            <MutualRoomsChip userId={userId} borderColor={profileStyle.avatarBorderColor} />
-            <OptionsChip userId={userId} borderColor={profileStyle.avatarBorderColor} />
+            <MutualRoomsChip userId={userId} borderColor={pillBgColor} />
+            <OptionsChip userId={userId} borderColor={pillBgColor} />
           </Box>
         )}
       </Box>
diff --git a/src/app/features/settings/account/Profile.tsx b/src/app/features/settings/account/Profile.tsx
index 307eb7a..7952386 100644
--- a/src/app/features/settings/account/Profile.tsx
+++ b/src/app/features/settings/account/Profile.tsx
@@ -37,7 +37,7 @@ import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
 import { UserAvatar } from '../../../components/user-avatar';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { useAuthenticatedMediaUrl } from '../../../hooks/useAuthenticatedMediaUrl';
-import { nameInitials, getContrastingTextColor } from '../../../utils/common';
+import { nameInitials, getContrastingTextColor, stripAlphaFromColor, getTextShadowColor } from '../../../utils/common';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useFilePicker } from '../../../hooks/useFilePicker';
 import { useObjectURL } from '../../../hooks/useObjectURL';
@@ -563,6 +563,11 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
     ? rgbaToHex(localBorderColor)
     : profileStyle.avatarBorderColor;
 
+  const previewPillBgColor = previewBorderColor ? stripAlphaFromColor(previewBorderColor) : undefined;
+  const previewProfileColor = previewBorderColor ? stripAlphaFromColor(previewBorderColor) : (userColor || colorMXID(userId));
+
+  const previewTextShadow = `0 1px 4px ${getTextShadowColor(previewProfileColor)}`;
+
   return (
     <Box direction="Column" gap="300">
       <Box
@@ -710,7 +715,7 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
                 as="button"
                 onClick={handleAvatarClick}
                 style={{
-                  backgroundColor: color.Surface.Container,
+                  backgroundColor: previewBorderColor || color.Surface.Container,
                   border: 'none',
                   padding: 0,
                   cursor: 'pointer',
@@ -718,6 +723,7 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
                 }}
               >
                 <AvatarPresence
+                  badgeBackgroundColor={previewBorderColor}
                   badge={
                     presence && (
                       <PresenceBadge presence={presence.presence} status={presence.status} />
@@ -727,6 +733,8 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
                   <Avatar
                     size="500"
                     style={{
+                      width: toRem(72),
+                      height: toRem(72),
                       outline: previewBorderColor
                         ? `${toRem(4)} solid ${previewBorderColor}`
                         : `${config.borderWidth.B600} solid ${color.Surface.Container}`,
@@ -905,7 +913,7 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
                     size="H4"
                     className={classNames(BreakWord, LineClamp3)}
                     title={profile.displayName || getMxIdLocalPart(userId)}
-                    style={{ color: userColor || colorMXID(userId) }}
+                    style={{ color: previewProfileColor, textShadow: previewTextShadow }}
                   >
                     {profile.displayName || getMxIdLocalPart(userId) || userId}
                   </Text>
@@ -937,7 +945,7 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
               size="T200"
               className={BreakWord}
               title={userId}
-              style={{ color: userColor || colorMXID(userId), opacity: 0.8 }}
+              style={{ color: previewProfileColor, textShadow: previewTextShadow }}
             >
               {userId}
             </Text>
@@ -947,8 +955,8 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
               onMouseEnter={() => setHoveredArea('status')}
               onMouseLeave={() => setHoveredArea(null)}
               style={{
-                backgroundColor: previewBorderColor || color.Surface.Container,
-                border: previewBorderColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
+                backgroundColor: previewPillBgColor || color.Surface.Container,
+                border: previewPillBgColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
                 padding: `${toRem(6)} ${toRem(10)}`,
                 borderRadius: toRem(16),
                 maxWidth: toRem(250),
@@ -998,16 +1006,15 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
                       size="T300"
                       className={BreakWord}
                       style={{
-                        opacity: presence?.status ? 1 : 0.5,
                         fontStyle: presence?.status ? 'normal' : 'italic',
-                        color: previewBorderColor ? getContrastingTextColor(previewBorderColor) : undefined,
+                        color: previewPillBgColor ? getContrastingTextColor(previewPillBgColor) : undefined,
                       }}
                     >
                       {presence?.status || 'Click to set a custom status...'}</Text>
                   </Box>
                   {presence?.status && hoveredArea === 'status' && (
                     <>
-                      <Icon size="50" src={Icons.Pencil} style={{ color: previewBorderColor ? getContrastingTextColor(previewBorderColor) : undefined }} />
+                      <Icon size="50" src={Icons.Pencil} style={{ color: previewPillBgColor ? getContrastingTextColor(previewPillBgColor) : undefined }} />
                       <Box
                         as="button"
                         onClick={(e) => {
@@ -1038,8 +1045,8 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
             <Box alignItems="Center" gap="200" wrap="Wrap" justifyContent="Center">
               <Box
                 style={{
-                  backgroundColor: previewBorderColor || color.Surface.Container,
-                  border: previewBorderColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
+                  backgroundColor: previewPillBgColor || color.Surface.Container,
+                  border: previewPillBgColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
                   padding: `${toRem(4)} ${toRem(8)}`,
                   borderRadius: toRem(16),
                 }}
@@ -1047,7 +1054,7 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
                 <Text 
                   size="B300" 
                   style={{
-                    color: previewBorderColor ? getContrastingTextColor(previewBorderColor) : undefined,
+                    color: previewPillBgColor ? getContrastingTextColor(previewPillBgColor) : undefined,
                   }}
                 >
                   ruv.wtf
@@ -1055,8 +1062,8 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
               </Box>
               <Box
                 style={{
-                  backgroundColor: previewBorderColor || color.Surface.Container,
-                  border: previewBorderColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
+                  backgroundColor: previewPillBgColor || color.Surface.Container,
+                  border: previewPillBgColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
                   padding: `${toRem(4)} ${toRem(8)}`,
                   borderRadius: toRem(16),
                 }}
@@ -1064,7 +1071,7 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
                 <Text 
                   size="B300"
                   style={{
-                    color: previewBorderColor ? getContrastingTextColor(previewBorderColor) : undefined,
+                    color: previewPillBgColor ? getContrastingTextColor(previewPillBgColor) : undefined,
                   }}
                 >
                   Share
@@ -1072,8 +1079,8 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
               </Box>
               <Box
                 style={{
-                  backgroundColor: previewBorderColor || color.Surface.Container,
-                  border: previewBorderColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
+                  backgroundColor: previewPillBgColor || color.Surface.Container,
+                  border: previewPillBgColor ? 'none' : `${toRem(1)} solid ${color.Surface.ContainerLine}`,
                   padding: `${toRem(4)} ${toRem(8)}`,
                   borderRadius: toRem(16),
                 }}
@@ -1081,7 +1088,7 @@ function ProfileBanner({ avatarRef, nameRef }: { avatarRef: React.RefObject<HTML
                 <Text 
                   size="B300"
                   style={{
-                    color: previewBorderColor ? getContrastingTextColor(previewBorderColor) : undefined,
+                    color: previewPillBgColor ? getContrastingTextColor(previewPillBgColor) : undefined,
                   }}
                 >
                   Admin
diff --git a/src/app/utils/common.ts b/src/app/utils/common.ts
index 87b00b7..90bc219 100644
--- a/src/app/utils/common.ts
+++ b/src/app/utils/common.ts
@@ -139,6 +139,32 @@ export const splitWithSpace = (content: string): string[] => {
   return trimmedContent.split(' ');
 };
 
+/**
+ * Strip alpha channel from a color, returning a fully opaque hex color
+ * Supports: #RGB, #RGBA, #RRGGBB, #RRGGBBAA, rgb(), rgba()
+ */
+export const stripAlphaFromColor = (color: string): string => {
+  // Handle rgba() format
+  const rgbaMatch = color.match(/rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+  if (rgbaMatch) {
+    const r = parseInt(rgbaMatch[1], 10).toString(16).padStart(2, '0');
+    const g = parseInt(rgbaMatch[2], 10).toString(16).padStart(2, '0');
+    const b = parseInt(rgbaMatch[3], 10).toString(16).padStart(2, '0');
+    return `#${r}${g}${b}`.toUpperCase();
+  }
+  
+  // Handle hex format
+  let hex = color.replace('#', '');
+  
+  // Convert shorthand #RGB or #RGBA to full form
+  if (hex.length === 3 || hex.length === 4) {
+    hex = hex.split('').map(c => c + c).join('');
+  }
+  
+  // Take only the first 6 characters (RGB), ignore alpha if present
+  return `#${hex.substring(0, 6).toUpperCase()}`;
+};
+
 /**
  * Calculate contrasting text color (black or white) for a given background color
  * @param bgColor - Hex color string (e.g., '#RRGGBB' or '#RRGGBBAA')
@@ -159,3 +185,24 @@ export const getContrastingTextColor = (bgColor: string): string => {
   // Return black for light backgrounds, white for dark backgrounds
   return luminance > 0.5 ? '#000000' : '#FFFFFF';
 };
+
+/**
+ * Calculate shadow color for text - white shadow only for very dark text
+ * @param textColor - Hex color string (e.g., '#RRGGBB')
+ * @returns '#FFFFFF' only for very dark text (close to black), '#000000' otherwise
+ */
+export const getTextShadowColor = (textColor: string): string => {
+  // Remove # if present
+  const hex = textColor.replace('#', '');
+  
+  // Parse RGB values (ignore alpha if present)
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  
+  // Calculate relative luminance using WCAG formula
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+  
+  // Return white shadow only for very dark text (luminance < 0.2)
+  return luminance < 0.2 ? '#FFFFFF' : '#000000';
+};