[Joy] Add palette customizer

[siriwatknp]

Preview: https://deploy-preview-35741--material-ui.netlify.app/joy-ui/customization/theme-builder/

Motivation

I need a tool that I can tweak the colors:

• replace the default palette with other design palettes (e.g. tailwind, stripe)
• add more tokens/remove the default tokens
• see how global variant change

and at the end, copy the code and the generated types (it isn't very pleasant to always look up the interfaces (TypeScript) to augment the theme).

or start building a prototype/reproduction in the sandbox.

Goal

Having a simple and friendly tool to get started with custom colors (maybe the name should not be "Theme builder" because it sounds complicated).

Target users

• Developers who are not experienced/start learning Joy UI.
• Developers who want to do a quick prototype.

[mui-bot]

Netlify deploy preview

• docs/data/joy/customization/theme-builder/theme-builder.md

Bundle size report

No bundle size changes

Generated by 🚫 dangerJS against eb73839

[oliviertassinari]

It's quite interesting! I think that the main problems this tool could solve for the community is:

a. having a quick customization tool for YOLO projects (e.g. indie developers) or developers working on internal tools (where they can't involve a designer, and still need the thing to feel on brand).
b. having the code to understand how the customization work, you can change something, and see the impact live.

Feedback on what I can identify:

1. I almost couldn't find this panel, I think that we could think of a way to make it easier to discover.

2. It would be great to have a Joy Design color palette before Tailwind CSS's one.
3. I think that we need to add analytics to this tool and check how it evolves. The goal is to see how people are using it. It's important to get a sense of whether is it used or not. Compare it to the Material UI color picker tool. This way we could find issues with discoverability or issue with tool<>use cases.
4. I'm quite curious about having an advanced version of this tool in Figma. I mean, I would expect the most advanced customization to be done by designers on the Figma design kit or developers in their localhost, live with the pages they built. For this tool in the docs, I suspect that it could ideal to focus on the simplest customization use cases. We have https://www.notion.so/mui-org/MUI-Theme-builder-62d796eebeea43078d188934d4acffa6 to talk about how we solve the advanced customization use cases.
5. https://themera.vercel.app/ feel simple, you pick one color and the variations are generated for you. To consider
6. A live feedback on the value hovered in could make it easier. I would also like to see where the default value fits on the scale.
7. It would be good to force the position of the select list below the select button:

8. It would help

---

I have found an issue with the z-index of the select which leads me to a rabbit hole 🐇:

1. @siriwatknp I can't find a theme.zIndex in Joy UI. Should we consider this to solve elevation conflicts? I would imagine that it's most beneficial when adding Joy UI to an existing codebase that has a different zIndex elevation convention. So maybe one base zIndex value is enough, then use it for Modal, Tooltip, Select, Autocomplete.
2. @michaldudak the MUI Base Select doesn't have the portal behavior anymore: https://mui.com/base/react-select/. I would expect this to be a blocker for the community to Material UI to MUI Base, e.g. [Dialog] overflow property cause issue with react-select control #7431, Dialog body hides Autocomplete dropdown #2632. I have created a reproduction https://codesandbox.io/s/sleepy-smoke-24ojx6?file=/demo.js.
3. https://mui.com/base/react-select/#introduction JavaScript version show the TypeScript version. It's because we wrote {{"demo": "UnstyledSelectIntroduction.tsx", "defaultCodeOpen": false, "bg": "gradient"}} and not {{"demo": "UnstyledSelectIntroduction.js", "defaultCodeOpen": false, "bg": "gradient"}}. It would be great to throw a JavaScript Error when this case happens (I mean when we use a .tsx demo directly without "hideToolbar": true). I noticed this because it breaks the export to codesandox. @mj12albert may be a small bug to work on to get you familiar with the codebase

[siriwatknp]

a. having a quick customization tool for YOLO projects (e.g. indie developers) or developers working on internal tools (where they can't involve a designer, and still need the thing to feel on brand).
b. having the code to understand how the customization work, you can change something, and see the impact live.

Absolutely, yes. This tool is for developers, not designers. You summarized it very well.

I almost couldn't find this panel, I think that we could think of a way to make it easier to discover. It would be great to have a Joy Design color palette before Tailwind CSS's one.

I see, will make it bold and may be using a modal to show more palettes. Also, will add a reset button.

I think that we need to add analytics to this tool and check how it evolves. The goal is to see how people are using it. It's important to get a sense of whether is it used or not. Compare it to the Material UI color picker tool. This way we could find issues with discoverability or issue with tool<>use cases.

Adding event tracking on the "show me the code" and "Open sandbox" should be enough to see how many people are using it.

I'm quite curious about having an advanced version of this tool in Figma. I mean, I would expect the most advanced customization to be done by designers on the Figma design kit or developers in their localhost, live with the pages they built.

To be clear, let's separate the advanced version of this PR. I created a Notion page to brainstorm ideas.

https://themera.vercel.app/ feel simple, you pick one color and the variations are generated for you. To consider

That'd be nice too (maybe in a separate PR). I can see its use case where I have a single branding color and I want to generate a palette for it.

A live feedback on the value hovered in could make it easier. I would also like to see where the default

Agreed

It would be good to force the position of the select list below the select button:

Sounds good.

[oliviertassinari]

If we want to tackle typography at one point, one benchmark for it https://hihayk.github.io/shaper/

[siriwatknp]

@oliviertassinari Here is the update on the browsing palette. Is this better than the previous version?

Screen.Recording.2566-01-27.at.11.19.32.mov

[oliviertassinari]

@siriwatknp It looks awesome 🔥

[danilo-leal]

Whoops ⎯ sorry about that ☝️ accidental misclick.

[siriwatknp]

@danilo-leal I think it is too complicated to show "using amber from Tailwind CSS ⎯ change here". The logic is I have to iterate all of the predefined colors (from tailwind and material design) and check if the custom palette matches any of those or not. If we have more palettes, when token changes we have to recalculate. This might not be performant.

[siriwatknp]

This component is a surprisingly intricate piece of code

I have extracted some utilities with tests. I think the code will be more organized when we add more things to the theme builder. I don't think we need to extract everything at this point because all of the components are used on this page.

[danilo-leal]

@siriwatknp That's ok! I think it'd be good if we had something reinforcing you were using a pre-made palette but I don't think it's hugely necessary.

One thing that I thought about though: I know the light / dark toggles within the ThemeBuilder component are independent of the global docs one but shouldn't we make it follow the docs regardless? That is, maintaining the capacity to override the docs but if I turn the whole docs to dark, maybe the Builder should go dark too... or no? Felt like that was something intuitive.

[siriwatknp]

One thing that I thought about though: I know the light / dark toggles within the ThemeBuilder component are independent of the global docs one but shouldn't we make it follow the docs regardless? That is, maintaining the capacity to override the docs but if I turn the whole docs to dark, maybe the Builder should go dark too... or no? Felt like that was something intuitive

Nice catch! it is fixed.

[danilo-leal]

Aside from this tiny piece of copy fix, I feel like this is looking great already for release 🎉

[mnajdova]

Just saw this one, looks super duper good. Well done 🎉