Some transitions depend on --mantine-scale which is only included in styles.css

[DanielGibbsNZ]

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?

7.15.2

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

Some transitions e.g. rotate-left are dependent on the --mantine-scale CSS variable. This means that when importing individual CSS files instead of styles.css those transitions don't work and the transition is rendered as fade instead. This appears to be the case for any component that uses Transition (e.g. Modal, Tooltip etc.).

Reproduction:

import { MantineProvider, Tooltip } from "@mantine/core";
import "@mantine/core/styles/Tooltip.css";

export default function App() {
  return (
    <MantineProvider>
      <Tooltip
        label="Tooltip label"
        transitionProps={{ transition: "rotate-left", duration: 1000 }}
        style={{ background: "#000", color: "#fff", padding: 10 }}
      >
        <button type="button">Hover over me</button>
      </Tooltip>
    </MantineProvider>
  );
}

If I import @mantine/core/styles.css or even just define --mantine-scale: 1 then the transitions work as expected.

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

https://codesandbox.io/p/sandbox/mantine-react-template-forked-g56xc7

Possible fix

This seems very similar to #6458 so perhaps a similar fix is needed? It looks like removing the use of rem() in src/components/Transition/transitions.ts should do it. Is this an acceptable fix?

Self-service

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

[rtivital]

Fixed in 7.15.3