Color-specific style overrides

[jerguslejko]

We are using <Button variant="light" color="gray" /> as a "secondary" button in our app. However, the color contrast on this button is a not great, so we're utilising Styles on MantineProvider to override the color with a darker gray like so:

<MantineProvider
  styles={{
    Button: theme => ({
      light: { color: theme.colors.gray[8] },
    }),
  }}
>
  ...
</MantineProvider>

While this works for the gray button, it breaks all other variant="light" buttons. See this codesandbox for how it breaks variant="light" color="red" buttons (I'd like the text to be red there).

Any suggestions on how to accomplish what I'm trying to do? I want to darken the gray on variant="light" color="gray" button without affecting the other styles.

Thanks

[rtivital]

Currently, it's not supported to get component params in provider styles, this option will be available in upcoming 4.0

[jerguslejko]

right. what do you recommend instead?

[rtivital]

Create a wrapper component that will check color and apply corresponding styles

[jerguslejko]

right, makes sense.

is there a roadmap for v4?

[rtivital]

No we do not share a public roadmap

[jerguslejko]

understandable :)

have a good one @rtivital