UI Foundations Kit adopted the latest CSS variables improvements from MUI to provide a more flexible and customizable theming experience. This sets up your app to support Pigment CSS and build on top of the built-in browser based CSS features of CSS variables.

This means that your app will automatically begin to take advantage of great features like:

• preventing dark/light mode flicker
• unlimited color schemes
• better debugging experience in browser dev tools
• and more

You can access theme tokens in your components via the theme directly:

<Button sx={{
  backgroundColor: theme.vars.palette.primary.main, // var(--mui-palette-primary-main)
  color: theme.vars.palette.primary.contrastText, // var(--mui-palette-primary-contrastText)
}}>
  Click me
</Button>

Or using regular CSS:

.feature-section {
  background-color: var(--mui-palette-grey-50);
}