Fix camera/receipt FAB icon contrast to pass WCAG 1.4.11

src/components/FloatingCameraButton/BaseFloatingCameraButton.tsx

@@ -32,7 +32,7 @@ type BaseFloatingCameraButtonProps = {
 };
 
 function BaseFloatingCameraButton({icon}: BaseFloatingCameraButtonProps) {
-    const {textLight} = useTheme();
+    const {floatingActionButtonIcon} = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {accountID} = useCurrentUserPersonalDetails();
@@ -108,7 +108,7 @@ function BaseFloatingCameraButton({icon}: BaseFloatingCameraButtonProps) {
                 testID="floating-camera-button-container"
             >
                 <Icon
-                    fill={textLight}
+                    fill={floatingActionButtonIcon}
                     src={icon}
                     width={variables.iconSizeNormal}
                     height={variables.iconSizeNormal}

src/components/FloatingReceiptButton.tsx

@@ -25,7 +25,7 @@ type FloatingReceiptButtonProps = WithSentryLabel & {
 };
 
 function FloatingReceiptButton({onPress, accessibilityLabel, role, sentryLabel}: FloatingReceiptButtonProps) {
-    const {successHover, textLight} = useTheme();
+    const {successHover, floatingActionButtonIcon} = useTheme();
     const styles = useThemeStyles();
     const borderRadius = styles.floatingActionButton.borderRadius;
     const fabPressable = useRef<HTMLDivElement | ViewType | Text | null>(null);
@@ -63,7 +63,7 @@ function FloatingReceiptButton({onPress, accessibilityLabel, role, sentryLabel}:
                         testID="floating-receipt-button-container"
                     >
                         <Icon
-                            fill={textLight}
+                            fill={floatingActionButtonIcon}
                             src={icons.ReceiptPlus}
                             width={variables.iconSizeSmall}
                             height={variables.iconSizeSmall}

src/styles/theme/themes/dark-contrast.ts

@@ -18,6 +18,7 @@ const darkContrastTheme = {
     ourMentionBG: colors.green100,
     ourMentionText: colors.green700,
     receiptPlaceholderPlus: colors.green800,
+    floatingActionButtonIcon: colors.productLight900,
 } satisfies ThemeColors;
 
 export default darkContrastTheme;

src/styles/theme/themes/dark.ts

@@ -43,6 +43,7 @@ const darkTheme = {
     signInPage: colors.green800,
     darkSupportingText: colors.productDark800,
     receiptPlaceholderPlus: colors.productLight100,
+    floatingActionButtonIcon: colors.productDark900,
 
     // Additional keys
     overlay: colors.productDark400,

src/styles/theme/themes/light-contrast.ts

@@ -15,6 +15,7 @@ const lightContrastTheme = {
     textLight: colors.productLight900,
     iconColorfulBackground: colors.yellow800,
     receiptPlaceholderPlus: colors.green800,
+    floatingActionButtonIcon: colors.productLight900,
 } satisfies ThemeColors;
 
 export default lightContrastTheme;

src/styles/theme/themes/light.ts

@@ -43,6 +43,7 @@ const lightTheme = {
     signInPage: colors.green800,
     darkSupportingText: colors.productDark800,
     receiptPlaceholderPlus: colors.productLight100,
+    floatingActionButtonIcon: colors.white,
 
     // Additional keys
     overlay: colors.productLight400,

src/styles/theme/types.ts

@@ -49,6 +49,7 @@ type ThemeColors = {
     signInPage: Color;
     darkSupportingText: Color;
     receiptPlaceholderPlus: Color;
+    floatingActionButtonIcon: Color;
 
     // Additional keys
     overlay: Color;