Expose --mantine-primary-color with enumeration (0 - 9)

[atumas-bananamilk]

What package has an issue?

@mantine/core

Describe the bug

After the breaking changes (v7) and migration to CSS variables, we decided to sync Tailwind with Mantine.

tailwind.config.js:

module.exports = {

  // sync darkmode with Mantine
  darkMode: 'class',

  // sync breakpoints with Mantine
  screens: {
    xs: '36em', // <-- FYI using 'var(--mantine-breakpoint-xs)' will not work
    sm: '48em',
    md: '62em',
    lg: '75em',
    xl: '88em',
  },

  // sync colors with Mantine
  backgroundColor: {
    white: 'var(--mantine-color-white)',
    red: {
      0: 'var(--mantine-color-red-0)',
      1: 'var(--mantine-color-red-1)',
      2: 'var(--mantine-color-red-2)',
      3: 'var(--mantine-color-red-3)',
      4: 'var(--mantine-color-red-4)',
      5: 'var(--mantine-color-red-5)',
      6: 'var(--mantine-color-red-6)',
      7: 'var(--mantine-color-red-7)',
      8: 'var(--mantine-color-red-8)',
      9: 'var(--mantine-color-red-9)',
    },
    ..
  }
}

Now we can refer to tailwind classes which are synced with Mantine:
e.g. className='bg-red-2 dark:bg-white'

The problem occurs with primary colors. Tailwind supports it:

tailwind.config.js:

backgroundColor: {
  primary: {
    0: 'var(<some value>)',
    1: 'var(<some value>)',
    ..
  },
}

However, Mantine doesn't support it - it doesn't expose enumared primary colors.
These aren't enough:
https://mantine.dev/styles/css-variables-list/#no-dependency:

---

👉 @rtivital Can you also expose primary color variables with enumeration?
Such as --mantine-primary-color-filled-5 or --mantine-primary-color-5?
This would allow us to refer using: bg-primary-5 dark:bg-primary-2
This is very crucial to our application.

Using bg-${theme.primaryColor}-5 doesn't work for any color (let's say red) but bg-red-5 works for some reason.

What version of @mantine/* packages do you have in package.json? (Note that all @mantine/* packages must have the same version in order to work correctly)

^7.2.2

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

No response

Do you know how to fix the issue

None

Do you want to send a pull request with a fix?

None

Possible fix

No response

[rtivital]

Fixed in 7.3.1

[franciscoBSalgueiro]

Can this also be added to vanilla-extract?

[rtivital]

I'll see whether that's possible

[atumas-bananamilk]

Fixed in 7.3.1

Thanks @rtivital really appreciate this!