Usage of CSS variables in the Card component

[ccrvlh]

Currently, the card component hardcodes the colors used, white and dark-6:

mantine/packages/@mantine/core/src/components/Card/Card.module.css

Lines 11 to 18 in 40e5b1b

	@mixin where-light {
	background-color: var(--mantine-color-white);
	}
	@mixin where-dark {
	background-color: var(--mantine-color-dark-6);
	}
	}

Looking at the CSS variables, it seems it would be helpful to have this use --mantine-colors-default or something similar. That would allow customization via he cssVariableOverride without having to create a custom component with the Theme.

[rtivital]

You can customize backgroud-color Card styles with Styles API using classNames. You do not need to use CSS variables for this.

[ccrvlh]

From what I understand you mean I could extend the component in the theme?

    Paper: {
      styles: (_: MantineTheme) => ({
        root: {
          backgroundColor: 'var(--mantine-color-default)',
        },
      }),
    },

I guess my point here is that this has a few downsides:

• need to extend a specific component, rather then just editing a global color
• can't control the variable resolution for light/dark
• would still need to control de variable resolution if you want global changes
• use hard coded colors, when there are global variables that resolve to those same colors

So I guess my question is about the logic behind hard coding those colors, vs just using the -default var, that will resolve to those same colors, while giving more flexibility and easier customization.