Using "m3 theme builder" styles in materializecss

[danice]

The m3 theme builder website allows you to choose a color and generates a list of variables to create a dark / light styles following its m3 color recommendations.

The web looks gorgeous, but it's really very limited, as you can only choose 1 color to generate all the stuff (well, that's the idea, someone at google had something like a mystic-color-revelation, that allows to know how all colours of your site should look like from a given one!)

My first direct idea is to generate a materializecss "meta style" that just uses this variables coming form theme-builder.
It will look like this (left side are materializecss variables, right side are the ones generated by the site. Constants are because it's not finished, all should be vars):

:root {
    --surface-color: var(--md-sys-color-surface);
    --background-color: var(--md-sys-color-background);

    --font-color-main: var(--md-sys-color-on-background);
    --font-color-medium: rgba(255, 255, 255, 0.60);
    --font-color-disabled: rgba(255, 255, 255, 0.38);

    --font-on-primary-color-main: var(--md-sys-color-primary);
    --font-on-primary-color-dark-main: rgba(255, 255, 255, 0.87);
    --font-on-primary-color-dark-medium: rgba(255, 255, 255, 0.60);
    --font-on-primary-color-medium: rgba(0, 0, 0, 0.56);
    --font-on-primary-color-disabled: rgba(0, 0, 0, 0.38);

    --hover-color: rgba(255, 255, 255, 0.04);
    --focus-color: rgba(255, 255, 255, 0.12);
    --focus-color-solid: #424242;

    --background-color-disabled: rgba(255, 255, 255, 0.12);
    --background-color-level-4dp: rgba(255, 255, 255, 0.09);
    --background-color-level-16dp-solid: #262626;
    --background-color-card: var(--surface-color);
    --background-color-slight-emphasis: rgba(255, 255, 255, 0.05);

    --separator-color: #424242; /* borders between components */

    --error-color: #CF6679;

    --slider-track-color: rgba(255, 255, 255, 0.26);
    --switch-thumb-off-color: #bababa;

    --primary-color: var(--md-sys-color-primary);
    --primary-color-dark: var(--md-sys-color-primary-dark);
    --primary-color-numeric: 38, 166, 154;
    --primary-color-raised-hover-solid: var(--md-ref-palette-primary70);
    --primary-color-raised-focus-solid: var(--md-ref-palette-primary80);
    --primary-color-font-medium-color: rgba(var(--primary-color-numeric), 0.7);
    --primary-color-font-disabled-color: rgba(var(--primary-color-numeric), 0.4);
    --primary-color-hover-opaque: rgba(var(--primary-color-numeric), 0.06);
    --primary-color-focus-opaque: rgba(var(--primary-color-numeric), 0.18);

    --secondary-color: var(--md-sys-color-secondary);
    --secondary-color-hover-solid: var(--md-ref-palette-secondary70);

    --md_sys_color_on-surface: 230, 225, 229;
}

We aware that each of this variables, like --md-sys-color-surface in fact have 2 values as they are defined depending on the selected theme:

:root[theme='theme-dark'] {
 --md-sys-color-primary: var(--md-sys-color-primary-dark);
 --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
 .....

A simple starting point will be to simple include besides the existing light/dark themes this other theme with some m3 example generated values, but the user would be able to generate new files from m3 web and replace the values with he/she favourite colours.

A more autonomous way of getting the same thing will be to allow the user to define the 1 primary colour ($hue) or the primary, secondary and tertiary and generate the same --md-sys variables following the m3 styles rules, someway similar as explained here:

$primaryColor: hsl($hue 30% 90%);
$secondaryColor: hsl($hueComplement 25% 20%);
$accentColor: hsl($hueAnalogousV1 50% 50%);
$primaryDark500: hsl($hue 20% 85%);
$primaryDark600: hsl($hue 20% 75%);
$secondaryLight500: hsl($hueComplement 5% 30%),
$secondaryLight900: hsl($hueComplement 5% 95%),

My final idea would be that the materialize web site offers a color picker and changes all its look using themes derived from the selected color (a light and a dark theme, that could also be independently toggled by the user).
This would convert the materialize web page to something similar to the m3 theme builder... ready to use!.

[wuda-io]

This sounds awesome! I think we will have to update a lot of CSS-Vars but it would be worth it.
Maybe we can also get rid of SCSS and use CSS directly.. Wdyt?

I also considered your approach in the beta release #403 We should then remove the Color Palette from the core-css completely and only use primary and secondary colors for a smaller size-overhead. What are your thoughts?

[danice]

1. About this SCSS / CSS question: I have no experience with it, but for what I have read I think it would be a good idea move to PostCss. It allows to extend Css in various ways, configurable via pluggins. For example it allows to use today new features that are in the way to become Css standards (i.e. nesting-rules with PostCSS Nesting plugin).

2. I don't know. I would begin with small experiments to see how it goes. I can prepare for the main page what I commented at the beginning, a version of the dark /light themes using M3 variables and then let's see...(just as an experiment, not for a PR). Then we can begin to try to generate the palette with calculations...
   About the size, what M3 generates is more or less the same size as the color palette.

One question, when you say "we will have to update a lot of CSS-Vars" what are you referring to? using directly --md-.... vars in the framework? If it is that, I think that it could be an important breaking change for people that has defined it's own style using that variables. We can just keep this indirection level and just define the vars with the M3 list of values, like:
--surface-color: var(--md-sys-color-surface);

[danice]

I have set a branch "m3-styles" with a proof of 2 styles (one in each commit)

and

The pending work is finish the assignation of the correct styles in _theme_variables.scss. Now there is a block for the dark theme, but when all variables are assigned that will not be necessary, as the theme change will come from theme.dark.module.scss and theme.light.module.scss variable re-assignation.

All the new added files are copied directly from the ones generated by M3 theme builder (just changing the extension). The only one that changes for each new style is "tokens.module".

[danice]

I have been checking this library: material-foundation/ material-color-utilities.
With this utilities is very easy to implement the on-the-fly theme update based on a user selected color:

I have implemented that in my materialize-docs-vite (I tried to implement that in current materialize project, but it was not so clear how to import the package in a plain js project).

Important: this material-foundation/ material-color-utilities has not being added as a requirement of materializecss components, is just used in website. In fact we could use this to generate (from materializecss website) a _theme_variables.scss file with theme colors from user selection and avoid to use tokens.module.scss, theme.light.module.scss, theme.dark.module.scss and colors.module.scss.
If the user want it's website to have this user-selected colors (or dynamic colors that it's also included in the library, or M3 color classes) he/she should include a separate library with all this stuff.

So the proposal will be:

• in matelializecss go back to a fixed _theme_variables.scss with constants (and remove *. module.scss files)
• allow users to generate a _theme_variables.scss file with constants colors from materializecss website following M3 styles
• prepare a separate optional library that will allow to use dinamic colors and M3 list of styles (this library will include material-foundation library and all *. module.scss stuff)

What do you think?

@wuda-io did you had time to check y materialize-docs-vite project? how do you see it?
I propose to use this project as a start point for the commented new website project. For the moment it could perfectly co-exist with current website. The only problem is that changes in documentation or website should be applied in both projects.
I can prepare a PR for the website project... (BTW i would rename it to something like materializecss-website so the forks don't have to be renamed...)

[Jerit3787]

@danice Hi, just wandering. While you’re working on the new website, is it possible to retain versions of the docs site like others? I wonder if we can’t do using any library, we could just save the static versions of it in a folders? I kinda feeling weird when we are saving different versions of the library’s docs in a different domain.

[danice]

do you mean maintain docs for materialize 1 in the same website?
I suppose this could be done, for example leaving root directory for last version an just having a v1 folder with documents for that version.
Well, the tricky part is that those pages have to use version 1 of the components... but I suppose it could be done.

[Jerit3787]

yeah, something like that. after reading that again, I missed about the components. If we going to work like that, then we need to maintain the older versions as well. Well, I think it's okay for now actually.