Theme builder support

[K20shores]

The material UI theme builder is awesome for someone like me who is less experienced at design. However, all of the variables exported from a theme are different than what this site expects.

Would you be open to a change that exclusively uses variables exported by material theme UI?

[sylhare]

Hello @K20shores, what's the css file that is generated from that file?
Let's see what are the differences, if it's just the variable then it might work, if it's the whole CSS, that might be a bigger job.

If you can provide an example that would be great.

[K20shores]

It generates quite a bit.

:: tree
.
├── colors.module.css
├── theme.css
├── theme.dark.css
├── theme.light.css
├── tokens.css
└── typography.module.css

• colors.module.css only defines a bunch of css classes that might make the style most usable, like primary, primary-text, on-primary, etc. If you scroll down on the builder page you'll see all the different options it provides
• theme.css only contains imports
• tokens.css is a long file containing all of the files
• typography.css contains css classes for all of the different fonts and sizes
• theme.dark.css and theme.light.css contain the things that change :root for each style

All downloadable files are here: material-theme.zip

[K20shores]

So that you don't have to unzip that, here's what theme.light.css looks like:

:root {
 --md-sys-color-primary: var(--md-sys-color-primary-light);
 --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
 --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
 --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
 --md-sys-color-secondary: var(--md-sys-color-secondary-light);
 --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
 --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
 --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
 --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
 --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
 --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
 --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
 --md-sys-color-error: var(--md-sys-color-error-light);
 --md-sys-color-error-container: var(--md-sys-color-error-container-light);
 --md-sys-color-on-error: var(--md-sys-color-on-error-light);
 --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
 --md-sys-color-background: var(--md-sys-color-background-light);
 --md-sys-color-on-background: var(--md-sys-color-on-background-light);
 --md-sys-color-surface: var(--md-sys-color-surface-light);
 --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
 --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
 --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
 --md-sys-color-outline: var(--md-sys-color-outline-light);
 --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
 --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
 --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
 --md-sys-color-shadow: var(--md-sys-color-shadow-light);
 --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
 --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
 --md-sys-color-scrim: var(--md-sys-color-scrim-light);
}

So really only those variables need to be mapped, I suppose

[sylhare]

I don't think we use that many colours in the Type-on-Strap theme 🤔 so it wouldn't have exactly the look and feel as on the site (unless we do a big makeover).

html, html[data-theme="light"] {
  --background: #ffffff;
  --blockquote: #eef7fa;
  --selection: #d4d4d4;
  --meta: #595959;
  --link: #0072B5;
  --header-background: #24292e;
  --header-text: #ffffff;
  --header-link: #383838;
  --code-background: #E0E0E0;
  --code-inline: #24292e;
  --text-shadow: #3f3f3f;
  --text: #262626;
  --h1: #262626;
  --h2: #262626;
  --h3: #262626;
  --h4: #262626;
  --h5: #262626;
  --h6: #262626;
  --border: rgba(0, 0, 0, 0.2);
}

The best bet would be to have a version of the Type-on-Strap scss theme variable that is matching to the values defined by the export so you'd just have to copy over the css and update the variables.

But the matching won't be perfect. I'd remove anything secondary/tertiary as we don't have that concept. For the rest it would be trial and error and see if it matches expectation.