Why color must have 10 variant?

[I-am-tk]

I recently started using Mantine. It is a great project. But these are the thing that I found can be made better. Especially the theme object.

• Mantine's color system only allows 10 variants of color. It would be better if we could use more than 10 variants. Currently, to add more variants of color, I have to use theme. other.
• Almost every property in the theme object has a fixed type. for example the font size. Its type is fontSizes: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number>; It can have only 5 variant, which is very rigid. I am not able to add custom properties in fontSizes, something like `2xl: some value.
• utility classes are very useful. Is there a way to add utility classes in the Mantine provider so that we can access it when we are creating classes using createStyles method.

It's been 3days since I started using Mantine. If there are some ways to solve the problems I faced, I would like to know.

[rtivital]

Mantine's color system only allows 10 variants of color

You can add any amount of colors, Mantine components will use first 10. If you use TypeScript add as any.

Almost every property in the theme object has a fixed type

Same as with colors, add any values – manage types on your side.

Is there a way to add utility classes in the Mantine provider

https://mantine.dev/theming/global-styles/

[I-am-tk]

Thank you,
Some doubt regarding the global style and the color.

• The component which returns the Global component should be called inside the MantineThemeProvider?
• How to set any type for the colors. I have made a declaration file but I am still getting typescript error Source has 12 element(s) but target allows only 10. Any help would be helpful.

Thanks for making this amazing library.

[rtivital]

• There is not such thing as MantineThemeProvider, if you need theme subscription in your Global component, render it inside MantineProvider, otherwise it does not matter
• https://codesandbox.io/s/fast-monad-yd6nfb?file=/src/App.tsx

[I-am-tk]

Sorry, I meant MantineProvider.
The example you provided doesn't give IntelliSense support. Is there any other way to so that I can get IntelliSense as well on Vscode.

[rtivital]

https://mantine.dev/theming/extend-theme/#typescript

[I-am-tk]

Hi @rtivital, Sorry to bother you again but I am still stuck on this as I am getting Typescript errors. I am new to typescript. I even made the declaration file as it was in the link you shared before but still, I am getting a Typescript error.

This is what I want. I want my colors to be in this form

   theme = {
       colors: {
            warning: {
                  "25":  "",
                  "50" : ""
                 "100":  "",
                 "200" : ""
                 "300":  "",
                  "400" : ""
                  "500":  "",
                  "600" : "",
                  "700": "",
                  "800": "",
                  "900": ""
             }
       }
   }

and then I want to pass it in MantineProvider

<MantineProvider theme={theme}>
        .....
</MantineProvider>