fix(react-link): fix link brand and inverted appearance

apps/vr-tests-react-components/src/stories/Link/AnchorLink.stories.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { Meta } from '@storybook/react';
 import { Link, LinkProps } from '@fluentui/react-link';
 
-import { InvertedBackground, steps } from './utils';
+import { InvertedBackground, BrandBackground, steps } from './utils';
 import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL } from '../../utilities';
 import type { StoryParameters } from 'storywright';
 
@@ -70,6 +70,15 @@ export const InvertedDisabled = () => (
 );
 InvertedDisabled.storyName = 'Inverted disabled';
 
+export const Brand = () => (
+  <BrandBackground>
+    <AnchorLink>Link on brand background</AnchorLink>
+  </BrandBackground>
+);
+
+export const BrandDarkMode = getStoryVariant(Brand, DARK_MODE);
+export const BrandHighContrast = getStoryVariant(Brand, HIGH_CONTRAST);
+
 export const InvertedDisabledHighContrast = getStoryVariant(InvertedDisabled, HIGH_CONTRAST);
 
 export const InvertedDisabledDarkMode = getStoryVariant(InvertedDisabled, DARK_MODE);

apps/vr-tests-react-components/src/stories/Link/ButtonLink.stories.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import type { Meta } from '@storybook/react';
 import { Link, LinkProps } from '@fluentui/react-link';
 
-import { InvertedBackground, steps } from './utils';
+import { InvertedBackground, BrandBackground, steps } from './utils';
 import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL } from '../../utilities';
 import type { StoryParameters } from 'storywright';
 
@@ -63,6 +63,15 @@ export const InvertedDisabled = () => (
 );
 InvertedDisabled.storyName = 'Inverted disabled';
 
+export const Brand = () => (
+  <BrandBackground>
+    <ButtonLink>Link on brand background</ButtonLink>
+  </BrandBackground>
+);
+
+export const BrandDarkMode = getStoryVariant(Brand, DARK_MODE);
+export const BrandHighContrast = getStoryVariant(Brand, HIGH_CONTRAST);
+
 export const InvertedDisabledHighContrast = getStoryVariant(InvertedDisabled, HIGH_CONTRAST);
 
 export const InvertedDisabledDarkMode = getStoryVariant(InvertedDisabled, DARK_MODE);

apps/vr-tests-react-components/src/stories/Link/SpanLink.stories.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { Meta } from '@storybook/react';
 import { Link, LinkProps } from '@fluentui/react-link';
 
-import { InvertedBackground, steps } from './utils';
+import { InvertedBackground, BrandBackground, steps } from './utils';
 import { DARK_MODE, getStoryVariant, HIGH_CONTRAST, RTL } from '../../utilities';
 import type { StoryParameters } from 'storywright';
 
@@ -42,7 +42,6 @@ export const InlineDisabledFocusable = () => (
     used alongside other text content.
   </div>
 );
-
 export const Inverted = () => (
   <InvertedBackground>
     <SpanLink>Link on inverted background</SpanLink>
@@ -72,4 +71,14 @@ export const WrapsCorrectlyAsAnInlineElement = () => (
     expected.
   </div>
 );
+
+export const Brand = () => (
+  <BrandBackground>
+    <SpanLink>Link on brand background</SpanLink>
+  </BrandBackground>
+);
+
+export const BrandDarkMode = getStoryVariant(Brand, DARK_MODE);
+export const BrandHighContrast = getStoryVariant(Brand, HIGH_CONTRAST);
+
 WrapsCorrectlyAsAnInlineElement.storyName = 'Wraps correctly as an inline element';

apps/vr-tests-react-components/src/stories/Link/utils.tsx

@@ -11,6 +11,13 @@ const useInvertedBackgroundStyles = makeStyles({
   },
 });
 
+const useBrandBackgroundStyles = makeStyles({
+  root: {
+    ...shorthands.padding('14px'),
+    backgroundColor: tokens.colorBrandBackgroundStatic,
+  },
+});
+
 export const InvertedBackground: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const styles = useInvertedBackgroundStyles();
   return (
@@ -20,6 +27,15 @@ export const InvertedBackground: React.FC<{ children: React.ReactNode }> = ({ ch
   );
 };
 
+export const BrandBackground: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const styles = useBrandBackgroundStyles();
+  return (
+    <div className={styles.root}>
+      <BackgroundAppearanceProvider value="brand">{children}</BackgroundAppearanceProvider>
+    </div>
+  );
+};
+
 export const steps = new Steps()
   .snapshot('default')
   .hover('.fui-Link')

change/@fluentui-react-link-be0dc59d-3e7e-4f18-b070-9f094e989eda.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add brand appearance variant",
+  "packageName": "@fluentui/react-link",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-shared-contexts-c6042978-85d9-480f-a2b0-67d6c410a7bc.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add brand appearance variant for background context",
+  "packageName": "@fluentui/react-shared-contexts",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-link/library/src/components/Link/useLinkStyles.styles.ts

@@ -91,8 +91,16 @@ const useStyles = makeStyles({
       color: tokens.colorNeutralForegroundDisabled,
     },
   },
-
   inverted: {
+    color: tokens.colorNeutralForegroundInverted2,
+    ':hover': {
+      color: tokens.colorNeutralForegroundInverted2,
+    },
+    ':active': {
+      color: tokens.colorNeutralForegroundInverted2,
+    },
+  },
+  brand: {
     color: tokens.colorNeutralForegroundInvertedLink,
     ':hover': {
       color: tokens.colorNeutralForegroundInvertedLinkHover,
@@ -117,6 +125,7 @@ export const useLinkStyles_unstable = (state: LinkState): LinkState => {
     root.as === 'button' && styles.button,
     appearance === 'subtle' && styles.subtle,
     backgroundAppearance === 'inverted' && styles.inverted,
+    backgroundAppearance === 'brand' && styles.brand,
     inline && styles.inline,
     disabled && styles.disabled,
     state.root.className,

packages/react-components/react-shared-contexts/library/etc/react-shared-contexts.api.md

@@ -28,7 +28,7 @@ export { AnnounceProvider }
 export { AnnounceProvider as AnnounceProvider_unstable }
 
 // @internal (undocumented)
-export type BackgroundAppearanceContextValue = 'inverted' | undefined;
+export type BackgroundAppearanceContextValue = 'inverted' | 'brand' | undefined;
 
 // @internal (undocumented)
 export const BackgroundAppearanceProvider: React_2.Provider<BackgroundAppearanceContextValue>;

packages/react-components/react-shared-contexts/library/src/BackgroundAppearanceContext/BackgroundAppearanceContext.ts

@@ -5,7 +5,7 @@ import * as React from 'react';
 /**
  * @internal
  */
-export type BackgroundAppearanceContextValue = 'inverted' | undefined;
+export type BackgroundAppearanceContextValue = 'inverted' | 'brand' | undefined;
 
 /**
  * @internal