Merge pull request #19485 from mozilla/fix-text-color-aa-standard

fix(settings): meet WCAG AA standard for 3rd-party auth divider text

Author: toufali

packages/fxa-settings/src/components/ThirdPartyAuth/index.stories.tsx

@@ -16,13 +16,22 @@ export default {
 } as Meta;
 
 export const Default = () => {
+  // Default separator type is 'or'
   return (
     <AppLayout>
       <Subject showSeparator />
     </AppLayout>
   );
 };
 
+export const SignInWithSeparator = () => {
+  return (
+    <AppLayout>
+      <Subject showSeparator separatorType="signInWith" />
+    </AppLayout>
+  );
+};
+
 export const NoSeparator = () => {
   return (
     <AppLayout>

packages/fxa-settings/src/components/ThirdPartyAuth/index.tsx

@@ -64,7 +64,7 @@ const ThirdPartyAuth = ({
                   separatorType === 'signInWith' ? 'Sign in with' : 'or';
                 return (
                   <FtlMsg id={id}>
-                    <div className="mx-4 text-base text-grey-300 font-extralight">
+                    <div className="mx-4 text-base text-grey-500 font-extralight">
                       {defaultText}
                     </div>
                   </FtlMsg>