feat(react-tooltip): [CAP] visual refresh and brand appearance variant

change/@fluentui-react-tooltip-4e754b68-3248-46e0-848f-b1a15b42fa71.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: apply CAP visual refresh and add 'brand' appearance variant",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "egianoglio@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -2,7 +2,7 @@
 
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { createArrowStyles } from '@fluentui/react-positioning';
-import { tokens } from '@fluentui/react-theme';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { arrowHeight } from './private/constants';
 import type { TooltipSlots, TooltipState } from './Tooltip.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -20,15 +20,14 @@ const useStyles = makeStyles({
     boxSizing: 'border-box',
     maxWidth: '240px',
     cursor: 'default',
-    fontFamily: tokens.fontFamilyBase,
-    fontSize: tokens.fontSizeBase200,
-    lineHeight: tokens.lineHeightBase200,
     overflowWrap: 'break-word',
-    borderRadius: tokens.borderRadiusMedium,
     border: `1px solid ${tokens.colorTransparentStroke}`,
-    padding: '4px 11px 6px 11px', // '5px 12px 7px 12px' minus the border width '1px'
     backgroundColor: tokens.colorNeutralBackground1,
     color: tokens.colorNeutralForeground1,
+    ...typographyStyles.caption1Strong,
+    borderRadius: tokens.borderRadiusXLarge,
+    boxShadow: tokens.shadow8,
+    padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalMNudge}`,
 
     // TODO need to add versions of tokens.alias.shadow.shadow8, etc. that work with filter
     filter:
@@ -45,6 +44,11 @@ const useStyles = makeStyles({
     color: tokens.colorNeutralForegroundStaticInverted,
   },
 
+  brand: {
+    backgroundColor: tokens.colorBrandBackground,
+    color: tokens.colorNeutralForegroundOnBrand,
+  },
+
   arrow: createArrowStyles({ arrowHeight }),
 });
 
@@ -60,6 +64,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';