[@mantine/core] Add autoContrast prop to Tooltip for automatic text color adjustment

- Introduced `autoContrast` prop to adjust tooltip text color based on background luminosity.
- Updated `varsResolver` to handle `autoContrast` logic and generate appropriate theme variables.
- Added a new story (`AutoContrast`) to demonstrate the `autoContrast` feature in Tooltip.

Author: Han5991

packages/@mantine/core/src/components/Tooltip/Tooltip.story.tsx

@@ -21,6 +21,40 @@ export function Usage() {
   );
 }
 
+export function AutoContrast() {
+  return (
+    <>
+      <div style={{ padding: 40 }}>
+        <Tooltip
+          position="right"
+          label="Tooltip label"
+          withArrow
+          transitionProps={{ duration: 0 }}
+          opened
+          color="cyan"
+          radius="md"
+        >
+          <button type="button">target</button>
+        </Tooltip>
+      </div>
+      <div style={{ padding: 40 }}>
+        <Tooltip
+          position="right"
+          label="Tooltip label"
+          withArrow
+          transitionProps={{ duration: 0 }}
+          opened
+          color="cyan"
+          radius="md"
+          autoContrast
+        >
+          <button type="button">target</button>
+        </Tooltip>
+      </div>
+    </>
+  );
+}
+
 export function Unstyled() {
   return (
     <div style={{ padding: 40 }}>

packages/@mantine/core/src/components/Tooltip/Tooltip.tsx

@@ -9,7 +9,6 @@ import {
   getDefaultZIndex,
   getRadius,
   getRefProp,
-  getThemeColor,
   isElement,
   useDirection,
   useProps,
@@ -82,6 +81,9 @@ export interface TooltipProps extends TooltipBaseProps {
 
   /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy), `'absolute'` by default */
   floatingStrategy?: FloatingStrategy;
+
+  /** Determines whether tooltip text color should depend on `background-color`. If luminosity of the `color` prop is less than `theme.luminosityThreshold`, then `theme.white` will be used for text color, otherwise `theme.black`. Overrides `theme.autoContrast`. */
+  autoContrast?: boolean;
 }
 
 export type TooltipFactory = Factory<{
@@ -112,14 +114,24 @@ const defaultProps: Partial<TooltipProps> = {
   positionDependencies: [],
   middlewares: { flip: true, shift: true, inline: false },
 };
+const varsResolver = createVarsResolver<TooltipFactory>(
+  (theme, { radius, color, variant, autoContrast }) => {
+    const colors = theme.variantColorResolver({
+      theme,
+      color: color || theme.primaryColor,
+      autoContrast,
+      variant: variant || 'filled',
+    });
 
-const varsResolver = createVarsResolver<TooltipFactory>((theme, { radius, color }) => ({
-  tooltip: {
-    '--tooltip-radius': radius === undefined ? undefined : getRadius(radius),
-    '--tooltip-bg': color ? getThemeColor(color, theme) : undefined,
-    '--tooltip-color': color ? 'var(--mantine-color-white)' : undefined,
-  },
-}));
+    return {
+      tooltip: {
+        '--tooltip-radius': radius === undefined ? undefined : getRadius(radius),
+        '--tooltip-bg': color ? colors.background : undefined,
+        '--tooltip-color': color ? colors.color : undefined,
+      },
+    };
+  }
+);
 
 export const Tooltip = factory<TooltipFactory>((_props, ref) => {
   const props = useProps('Tooltip', defaultProps, _props);
@@ -164,6 +176,7 @@ export const Tooltip = factory<TooltipFactory>((_props, ref) => {
     mod,
     floatingStrategy,
     middlewares,
+    autoContrast,
     ...others
   } = useProps('Tooltip', defaultProps, props);