Material-ui: Support the new Material Theme Editor

[theiliad]

Google recently introduced the new Material Theme Editor tool that allows heavy customization to material design. https://material.io/tools/theme-editor/

There must be a way for us to get the configs into a JSON... Assuming that that is a possibility, how would we go about supporting those customizations? And how important would this be to the material-ui team?

• [x] This is a v1.x issue (v0.x is no longer maintained).
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Take the plugin configs, and customize the components & overall styles, ideally at build time

Current Behavior

None

Steps to Reproduce (for bugs)

N/A

Context

This new functionality adds many new possibilities to material design, and we'll probably see a new wave of sites tapping into it. Would be great if we can add painless support.

Your Environment

N/A

[mbrookes]

@theiliad Thanks for your suggestion, however "theme editor" is some slightly misleading marketing on Google's behalf (that or the marketing person didn't understand the product - Hanlon's Razor and all that).

This Sketch plugin just makes it easier for designers to create visual mockups of Material components, including the new corner styles etc. It does nothing for developers actually translating those designs into real components.

Arguably it's a step backwards for web design. We shouldn't still be designing in one tool, and developing in another. Google can party like it's 1999, but we have other ideas. Watch this space!

[uvtzxpm]

There must be a way for us to get the configs into a JSON... Assuming that that is a possibility, how would we go about supporting those customizations? And how important would this be to the material-ui team?

Expected Behavior

Take the plugin configs, and customize the components & overall styles, ideally at build time

It's (probably) "possible" to take a "Material Theme Editor (Sketch Plugin)" JSON export (or however they store it), and convert it to a Material-UI JSS/CSS theme (https://material-ui.com/customization/themes/).

It's unlikely that anybody will ever make a tool to do that though. Too much work for too little gain. If you create a new Material Design theme in Sketch, you will need to manually make a Material-UI JSS/CSS theme yourself which looks the same.

Highly relevant to this new "Material Design theming" stuff: https://github.com/mui-org/material-ui/issues/11306

[theiliad]

I guess the question that comes to mind after reading both your comments @mbrookes @uvtzxpm is how widely is this plugin going to be used...

Let's wait it out and see how the public will pick this up

[mbrookes]

@theiliad

There must be a way for us to get the configs into a JSON

@uvtzxpm

It's (probably) "possible" to take a "Material Theme Editor (Sketch Plugin)" JSON export (or however they store it), and convert it to a Material-UI JSS/CSS theme

Okay, show me.

[uvtzxpm]

@mbrookes

Well, like I already said:

Too much work for too little gain. If you create a new Material Design theme in Sketch, you will need to manually make a Material-UI JSS/CSS theme yourself which looks the same.

It's clearly "possible" (notice the air quotes) to automate it, but just a complete waste of time.

Maybe if Sketch wasn't Mac only... 😂

[theiliad]

@mbrookes @uvtzxpm After some inspection I realized that the plugin is not fully stable yet, can't get it running on a few versions of Sketch. I don't think there's anything useful to go on with the plugin...

Now there are some extensions the new material design is introducing, such as border-radius. Now they actually allow a fully rectangular button rather than pushing for their own standard border-radius, and so on...

I'm going to move this conversation to the other issues I've seen in this repo regarding those, because I think it'd be cool if we allow those customizations in the theming API for material-ui

Opinions?

[liamdanielduffy]

@mbrookes It makes sense to me that this library would not directly integrate its theming with the sketch plugin that Google recently released.

However, could the material-ui library expose the same theming options that are found with the sketch plugin?

Again, I don't mean direct integration with the plugin itself.

Rather, just providing the same theming possibilities as the new Material theming spec through libraries existing api, like @theiliad described.

An example of what might be possible if this was implemented:

Using only this library's React components and theming api, I could fully recreate Google's own brand new material theme (described here) now found in the new Gmail, among other products.

[mbrookes]

@liamdanielduffy We've started on it, but some of the features are challenging (if not impossible) to deliver with current CSS capabilities (for exampled beveled corners with a drop shadow).

It'll be interesting to see what MCW do.

[oliviertassinari]

for exampled beveled corners with a drop shadow

@mbrookes MCW is creating 4 divs to be compliant. I find it crazy. I think that we can simply ignore this feature.

[liamdanielduffy]

@oliviertassinari even though its inelegant, it is possible right? This case study uses beveled corners to achieve some really cool designs, and I think it'd be nice to have.

Understand if more edge-case specs like this are not top priority right now, but if I can contribute in any way to this please let me know!

[mbrookes]

MCW is creating 4 divs to be compliant.

Oh, where did you find that? When I looked previously I didn't see it.

All the examples of bevelled corners in HTML / CSS I could find had crazy markup. (There isn't much choice really).

There was a draft proposal to add alternate corner styles to CSS, but it'll be a looooong time before that's mainstream, if ever.

[theiliad]

Another alternative I've seen, although, not a big fan of bringing SVG into the equation
http://leaverou.github.io/corner-shape/

[garrettmac]

This is the ~32nd most popular project on github and If this was a community driven effort I could see a lot of value here in parsing something like this out into an object for createMuiTheme
https://github.com/xaviervia/sketch2json

[oliviertassinari]

@garrettmac This is probably technically feasible. Will people use the tool?

[garrettmac]

I definitely believe so @oliviertassinari I would use it. It’s a solution my company would use. There has never been a tool that connects the UX and Dev experience like this and material is the most popular starting point for modern web apps. If there was a sketch extension that exports code (the reverse of what https://github.com/airbnb/react-sketchapp does) and it worked with accuracy that could give pause to the process in how we develop

[oliviertassinari]

@garrettmac If I had to invest time in improving the design tools integration, I would probably start with exposing a Sketch version of our components.
This Sketch plugin configurator -> MUI theme would be a good topic, but less important.

[mbrookes]

There is react-sketchapp, and we could possibly reuse some of my work to semi-automate the creation of Framer X wrapper components to create sketchapp components.

However, given that the Material Theme Editor gives you Material Design components, and Sketch comes with a Material Design sticker sheet as one of its default templates, I'm not sure I see the value. (Not being a Sketch user I might be missing something though.)