feat(react-tooltip): [CAP] Adds a brand appearance variant

packages/react-components/react-tooltip/library/etc/react-tooltip.api.md

@@ -37,7 +37,7 @@ export const tooltipClassNames: SlotClassNames<TooltipSlots>;
 
 // @public
 export type TooltipProps = ComponentProps<TooltipSlots> & TriggerProps<TooltipTriggerProps> & Pick<PortalProps, 'mountNode'> & {
-    appearance?: 'normal' | 'inverted';
+    appearance?: 'normal' | 'inverted' | 'brand';
     hideDelay?: number;
     onVisibleChange?: (event: React_2.PointerEvent<HTMLElement> | React_2.FocusEvent<HTMLElement> | undefined, data: OnVisibleChangeData) => void;
     positioning?: PositioningShorthand;

packages/react-components/react-tooltip/library/src/components/Tooltip/Tooltip.types.ts

@@ -54,10 +54,11 @@ export type TooltipProps = ComponentProps<TooltipSlots> &
      * The tooltip's visual appearance.
      * * `normal` - Uses the theme's background and text colors.
      * * `inverted` - Higher contrast variant that uses the theme's inverted colors.
+     * * `brand` - Uses the brand colors from the theme.
      *
      * @default normal
      */
-    appearance?: 'normal' | 'inverted';
+    appearance?: 'normal' | 'inverted' | 'brand';
     /**
      * Delay before the tooltip is hidden, in milliseconds.
      *

packages/react-components/react-tooltip/library/src/components/Tooltip/useTooltipStyles.styles.ts

@@ -45,6 +45,11 @@ const useStyles = makeStyles({
     color: tokens.colorNeutralForegroundStaticInverted,
   },
 
+  brand: {
+    backgroundColor: tokens.colorBrandBackground,
+    color: tokens.colorNeutralForegroundOnBrand,
+  },
+
   arrow: createArrowStyles({ arrowHeight }),
 });
 
@@ -60,6 +65,7 @@ export const useTooltipStyles_unstable = (state: TooltipState): TooltipState =>
     tooltipClassNames.content,
     styles.root,
     state.appearance === 'inverted' && styles.inverted,
+    state.appearance === 'brand' && styles.brand,
     state.visible && styles.visible,
     state.content.className,
   );

packages/react-components/react-tooltip/stories/src/Tooltip/TooltipBrand.stories.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { JSXElement } from '@fluentui/react-components';
+import { Button, Tooltip } from '@fluentui/react-components';
+import { SlideTextFilled } from '@fluentui/react-icons';
+
+export const Brand = (): JSXElement => (
+  <Tooltip appearance="brand" content="Example brand tooltip" relationship="label">
+    <Button icon={<SlideTextFilled />} size="large" />
+  </Tooltip>
+);
+
+Brand.storyName = 'Appearance: brand';
+Brand.parameters = {
+  docs: {
+    description: {
+      story: "The `appearance` prop can be set to `brand` to use the theme's brand colors.",
+    },
+  },
+};

packages/react-components/react-tooltip/stories/src/Tooltip/index.stories.tsx

@@ -8,6 +8,7 @@ export { Default } from './TooltipDefault.stories';
 export { RelationshipLabel } from './TooltipRelationshipLabel.stories';
 export { RelationshipDescription } from './TooltipRelationshipDescription.stories';
 export { Inverted } from './TooltipInverted.stories';
+export { Brand } from './TooltipBrand.stories';
 export { WithArrow } from './TooltipWithArrow.stories';
 export { Styled } from './TooltipStyled.stories';
 export { CustomMount } from './TooltipCustomMount.stories';