Material Color Scheme/Theme converter

[davie-robertson]

I guess a few of us may be migrating to web-awesome from md-components due to the latter being placed in maintenance mode.

I've been impressed with https://material-foundation.github.io/material-theme-builder/ and I was wondering if anyone has worked out an easy way of converting material CSS vars across to a wa theme vars?

If not, I may go and build something to do that. Are there current any design docs that would make this easier?

[KonnorRogers]

Soooo after quickly poking through I noticed the theme builder never saves the font, but the CSS file looks something like this:

.light {
  --md-sys-color-primary: rgb(65 95 145);
  --md-sys-color-surface-tint: rgb(65 95 145);
  --md-sys-color-on-primary: rgb(255 255 255);
  --md-sys-color-primary-container: rgb(214 227 255);
  --md-sys-color-on-primary-container: rgb(0 27 62);
  --md-sys-color-secondary: rgb(86 95 113);
  --md-sys-color-on-secondary: rgb(255 255 255);
  --md-sys-color-secondary-container: rgb(218 226 249);
  --md-sys-color-on-secondary-container: rgb(19 28 43);
  --md-sys-color-tertiary: rgb(112 85 117);
  --md-sys-color-on-tertiary: rgb(255 255 255);
  --md-sys-color-tertiary-container: rgb(250 216 253);
  --md-sys-color-on-tertiary-container: rgb(40 19 46);
  --md-sys-color-error: rgb(186 26 26);
  --md-sys-color-on-error: rgb(255 255 255);
  --md-sys-color-error-container: rgb(255 218 214);
  --md-sys-color-on-error-container: rgb(65 0 2);
  --md-sys-color-background: rgb(249 249 255);
  --md-sys-color-on-background: rgb(25 28 32);
  --md-sys-color-surface: rgb(249 249 255);
  --md-sys-color-on-surface: rgb(25 28 32);
  --md-sys-color-surface-variant: rgb(224 226 236);
  --md-sys-color-on-surface-variant: rgb(68 71 78);
  --md-sys-color-outline: rgb(116 119 127);
  --md-sys-color-outline-variant: rgb(196 198 208);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(46 48 54);
  --md-sys-color-inverse-on-surface: rgb(240 240 247);
  --md-sys-color-inverse-primary: rgb(170 199 255);
  --md-sys-color-primary-fixed: rgb(214 227 255);
  --md-sys-color-on-primary-fixed: rgb(0 27 62);
  --md-sys-color-primary-fixed-dim: rgb(170 199 255);
  --md-sys-color-on-primary-fixed-variant: rgb(40 71 119);
  --md-sys-color-secondary-fixed: rgb(218 226 249);
  --md-sys-color-on-secondary-fixed: rgb(19 28 43);
  --md-sys-color-secondary-fixed-dim: rgb(190 198 220);
  --md-sys-color-on-secondary-fixed-variant: rgb(62 71 89);
  --md-sys-color-tertiary-fixed: rgb(250 216 253);
  --md-sys-color-on-tertiary-fixed: rgb(40 19 46);
  --md-sys-color-tertiary-fixed-dim: rgb(221 188 224);
  --md-sys-color-on-tertiary-fixed-variant: rgb(87 62 92);
  --md-sys-color-surface-dim: rgb(217 217 224);
  --md-sys-color-surface-bright: rgb(249 249 255);
  --md-sys-color-surface-container-lowest: rgb(255 255 255);
  --md-sys-color-surface-container-low: rgb(243 243 250);
  --md-sys-color-surface-container: rgb(237 237 244);
  --md-sys-color-surface-container-high: rgb(231 232 238);
  --md-sys-color-surface-container-highest: rgb(226 226 233);
}

Which may be fairly easy to map 1:1 to Web Awesome tokens since @lindsaym-fa went with a similar token approach.

The "color theming" would be the best place to start to find the list of variables we use. I don't know if we plan to officially support any token converter unfortunately, since its really hard to stay in sync and some things always map 1:1

https://backers.webawesome.com/docs/theming/color

[davie-robertson]

Thanks Konnor, I wasn't expecting you to build something, I'm happy to do that - I was just wondering if there was some sort of cross-walk between the two. I'll take a look at that link and see what I can come up with.

There's a few other vars to address too (in fact the whole token sheet is on their github), others include things such as:

--font-family: 'Noto Sans', sans-serif;
  --alt-font-family: 'Epilogue', serif;
  --md-outlined-button-container-shape: 5px;
  --md-elevated-button-container-shape: 5px;
  --md-filled-button-container-shape: 5px;
  --md-filled-icon-button-container-color: var(--md-sys-color-primary);
  --my-brand-font: 'Noto Sans', sans-serif;
  --my-headline-font: 'Epilogue', serif;
  --my-title-font: 'Epilogue';
  --my-plain-font: system-ui;

  --md-ref-typeface-brand: var(--my-brand-font);
  --md-ref-typeface-plain: var(--my-plain-font);

  --md-sys-typescale-headline-font: var(--my-headline-font);
  --md-sys-typescale-title-font: var(--my-headline-font);```