[Tooltip] Fix tooltip arrow css var background

[TimoWilhelm]

• I have followed (at least) the PR section of the contributing guide.

This PR fixes the Tooltip arrow background color, to use the same color as the tooltip if CSS variables are used.

[mui-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 5f878d4

[siriwatknp]

👍 Thanks for the fix!

Even though, the Tooltip background is alpha(palette.grey[700], 0.92)) but I'd say that your fix makes more sense.

[TimoWilhelm]

Even though, the Tooltip background is alpha(palette.grey[700], 0.92)) but I'd say that your fix makes more sense.

For some reason, the arrow was displaying in a different color in my case.

However, when using theme.vars.palette.Tooltip.bg it looks fine.

[propG]

Trying to get the back ground

[siriwatknp]

Even though, the Tooltip background is alpha(palette.grey[700], 0.92)) but I'd say that your fix makes more sense.

For some reason, the arrow was displaying in a different color in my case.

However, when using theme.vars.palette.Tooltip.bg it looks fine.

Sorry, I don't quite get it. Can you share the minimal reproduction via a CodeSandbox?

[TimoWilhelm]

@siriwatknp https://codesandbox.io/s/mui-issue-33753-6ijj4z?file=/src/App.tsx

[siriwatknp]

@siriwatknp https://codesandbox.io/s/mui-issue-33753-6ijj4z?file=/src/App.tsx

Ah, I see. This is a bug because there is no darkChannel in grey.

// TooltipArrow
color: theme.vars
    ? `rgba(${theme.vars.palette.grey.darkChannel} / 0.9)`
    : alpha(theme.palette.grey[700], 0.9),

[siriwatknp]

@TimoWilhelm Are you using CSS variables in your project? Would love to hear your feedback about the overall experience.

[TimoWilhelm]

Thanks for the quick PR review @siriwatknp.

Yep, I used CSS variables since it became available and my experience has been really positive so far. I strongly believe this is the future of the library.

My favorite features are avoiding the color-scheme flash with SSR and preventing any hydration mismatch errors.

I haven't found a nice way yet to access the CSS variables for styling beyond components (e.g. global scrollbar track/thumb) and I wish the CSP hash for the getInitColorSchemeScript was a bit easier to handle (#27651 (comment)) but overall I'm really happy with the current state of the CSS variable support!

[siriwatknp]

Thanks for the quick PR review @siriwatknp.

Yep, I used CSS variables since it became available and my experience has been really positive so far. I strongly believe this is the future of the library.

My favorite features are avoiding the color-scheme flash with SSR and preventing any hydration mismatch errors.

I haven't found a nice way yet to access the CSS variables for styling beyond components (e.g. global scrollbar track/thumb) and I wish the CSP hash for the getInitColorSchemeScript was a bit easier to handle (#27651 (comment)) but overall I'm really happy with the current state of the CSS variable support!

Thanks for sharing!