[joy-ui] Introduce color inversion utilities

[siriwatknp]

Sandbox: https://codesandbox.io/s/joy-ui-cra-ts-forked-h8prkz?file=/src/App.tsx

closes #38912

For detailed motivation, read #38912.

The utilities let developers apply the color inversion on any component.

Breaking Changes

• Color inversion context has been removed. To apply color inversion on any parent component, use an independent function named applySolidInversion or applySoftInversion to the sx prop or styled.

  + import { applySolidInversion } from '@mui/joy/styles';
  
  <Box
   sx={[
     { bgcolor: 'black', },
     applySolidInversion('neutral'),
   ]}
  >

• Child components that have explicit color prop will use the color inversion variables by default. To opt out for a specific component, set data-skip-inverted-colors attribute to the component.

  <Card invertedColors variant="solid" color="primary">
    <div>
       <Stack>
          <Button variant="soft" color="warning"
                  data-skip-inverted-colors // to prevent the button from being inverted
          > 

Todo

• Remove context subscription from all components
• Update docs

---

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

• docs/data/joy/main-features/color-inversion/color-inversion.md

@mui/joy: parsed: +0.60% , gzip: -0.20% 😍

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 394f4e0

[siriwatknp]

@mnajdova This PR is the changes I mentioned to you last week. It's the draft to prove that the new implementation works better and is easier to customize. Please have a look and if it looks good to you, I will apply the changes to all components with more tests.

preview: https://deploy-preview-38916--material-ui.netlify.app/experiments/joy/color-inversion/

[mnajdova]

This PR tackles much more than what the title indicates. It's not just about removing the context, it's changing the API too.

What do you think about doing the following:

• keep the API (the invertedColors prop) for the components that we believe it should be supported in
• export a applyColorInversion(variant, color) util for custom components (or one-off Joy UI components that we don't support it by default
• remove the context usage.

[mnajdova]

Do we plan to expose 4 different methods? Can't we have one where we would accept the variant & the color?

[siriwatknp]

Do we plan to expose 4 different methods? Can't we have one where we would accept the variant & the color?

We need 2 functions so far since only soft and solid come with a background. I think a separate function sounds better in the long term.

[siriwatknp]

This PR tackles much more than what the title indicates. It's not just about removing the context, it's changing the API too.

What do you think about doing the following:

• keep the API (the invertedColors prop) for the components that we believe it should be supported in
• export a applyColorInversion(variant, color) util for custom components (or one-off Joy UI components that we don't support it by default
• remove the context usage.

Sounds good to me. Changed the PR title to "Introduce color inversion utilities" and preserved the current API (invertedColors prop). I will create another PR to remove the color inversion context.

[mnajdova]

So much cleaner 🤩 I love that we staged the work into removing context only. I wonder if we even need to drop the feature at all, I think we can experiment with this for a while.

[mnajdova]

Does it work with custom colors too if developers add them in the theme?

[siriwatknp]

Yes, they can add more color by augmenting the ColorPalettePropOverrides from the theme.

[mnajdova]

Not a deal breaker for this PR, but we have too many info callouts on this page. Every second paragraph feels like a callout. I would rather convert them to text, as otherwise they don't serve the purpose to "call out".

[rogier-mars-mck]

With the new approach, how do I configure the settings for a particular variant (soft, solid) and color? Previously this could be done via the CssVarsThemeOptions['colorInversion'] property of the theme.

[siriwatknp]

With the new approach, how do I configure the settings for a particular variant (soft, solid) and color? Previously this could be done via the CssVarsThemeOptions['colorInversion'] property of the theme.

The easiest and fastest way is to use sx prop:

<Card
  variant="solid"
  color="primary"
  invertedColors
  sx={theme => ({
    "& :not([data-skip-inverted-colors], [data-skip-inverted-colors] *)" {
      [theme.getColorSchemeSelector('light' | 'dark')]: {
        '--variant-plainColor': …
        …
      }
    }
  })}
>

You just need to use the same selectors as it is internally used.