search

material-foundation / material-theme-builder

Visualize dynamic color and create a custom Material Theme.
https://material-foundation.github.io/material-theme-builder/
Apache License 2.0
363 stars 28 forks source link

[Web] Generated CSS has obsolete tokens #83

Closed JoJk0 closed 1 year ago

JoJk0 commented 1 year ago

Describe the bug Generated typography CSS has wrong token names.

To Reproduce Steps to reproduce the behavior:

  1. Go to https://m3.material.io/theme-builder#/custom
  2. Export CSS of the theme
  3. Open CSS file
  4. Observe the incorrect CSS variables
.headline1, .display-small {
  font-family: var(--md-sys-typescale-headline1-font);
  font-weight: var(--md-sys-typescale-headline1-weight);
  font-size: var(--md-sys-typescale-headline1-size);
  line-height: var(--md-sys-typescale-headline1-line-height);
  letter-spacing: var(--md-sys-typescale-headline1-tracking);
}

Expected behavior Generate CSS with correct variables complying to the current spec on https://m3.material.io/styles/typography/type-scale-tokens

.headline1, .display-small {
  font-family: var(--md-sys-typescale-display-small-font);
  font-weight: var(--md-sys-typescale-display-small-weight);
  font-size: var(--md-sys-typescale-display-small-size);
  line-height: var(--md-sys-typescale-display-small-line-height);
  letter-spacing: var(--md-sys-typescale-display-small-tracking);
}

Desktop (please complete the following information):

rodydavis commented 1 year ago

On the latest version of Material theme builder for the web we removed the M2 class names from the export.