[Joy] Able to remove default tokens from theme types

[siriwatknp]

Context

While working on #35741, I noticed some types augmentation are wrong and missing.

Before

A lot of theme augmentation does not work correctly:

• Removing typography key should allow the value to be undefined in the extendTheme().
• Cannot remove default token (palette, font, radius, and shadow) from theme types

After

sandbox: https://codesandbox.io/s/joy-cra-typescript-forked-g7u3b5?file=/src/App.tsx

• Able to remove default tokens and provide undefined to extendTheme() (before this, you have to use // @ts-ignore)

  declare module "@mui/joy/styles" {
    interface PalettePrimaryOverrides {
      50: false
    }
  }
  
  extendTheme({
    colorSchemes: { palette: { primary: {
      50: undefined, ✅
    }}}
  })

• theme.vars are sync with the module augmentation

---

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

[mui-bot]

Netlify deploy preview

https://deploy-preview-36006--material-ui.netlify.app/

Bundle size report

Details of bundle changes

Generated by 🚫 dangerJS against f7acf94

[mnajdova]

It's still not clear to me if this can really work, for example:

plainHoverBg: getCssVarColor(`palette-${color}-100`),

This variable will no longer point to a valid value. Should we expect developers to map all variables to point to this value to something new?

[siriwatknp]

You will also need to specify undefined as a value to the token (100: undefined).

That's the expected behavior. The goal is to let developers be able to customize the color range to match their design system needs (the tokens should not be limited to 50-900 range)

[siriwatknp]

Those lines only add/remove the theme typings.

[mnajdova]

Coming a bit late to the party, but this was my comment: https://codesandbox.io/s/joy-cra-typescript-forked-2dfxd5?file=/src/App.tsx I know you can make it technically correct, but components will break. We need to make sure we give detailed instructions of what needs to be done after some specific palette value is removed, for e.g. some tokens will need to be redefined.

[siriwatknp]

but components will break

In my point of view, this break is expected because you are changing the token structure. I agree with you that docs should address this clearly and I plan to add a page to the advanced section of Joy UI customization.

[siriwatknp]

@mnajdova @hbjORbj a little bump to your notifications 😅

[hbjORbj]

Yes much more solid typings. Looks good.