Some elements do not respect override of `var(--mantine-color-text)`

[HelloItsKarina]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

8.2.8

What package has an issue?

@mantine/core

What framework do you use?

Vite

In which browsers you can reproduce the issue?

All

Describe the bug

Hi all, thanks for your work on this awesome UI library.

I override my body text by defining...

const cssVariablesResolver = () => ({
  variables: {
    '--mantine-color-text': 'var(--mantine-color-red-6)',
  },
})

...and then passing it like so:

<MantineProvider cssVariablesResolver={cssVariablesResolver}>

Almost everything throughout the app respects my definition of var(--mantine-color-text). Here are some instances in which it's not respected:

(1) In @mantine/notifications, a notification's title and message elements do not respect my override:

(2) In @mantine/charts/PieChart, the tooltip label associated with segment name does not respect my override.

(3) In @mantine/charts/AreaChart, the tooltip labels associated with the dataKey (x-axis) and the value (y-axis) do not respect my override.

"How could you want red body text?"

I don't. 😅 I actually want dark grey body text. I just used red to make clear in my examples which text is and isn't respecting my override.

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

• I would be willing to implement a fix for this issue

[rtivital]

--mantine-color-text is the default color of the body element. Some components might override their text color depending on context – it is not a strict rule. In other words, --mantine-color-text is used when there are no other styles defined.