Vanilla CSS friendly tokens

[motss]

Description

May I ask if there is a compiled version of the typescale tokens for Vanilla CSS users? If no, is there a plan to output a list of CSS Custom Properties for all these tokens?

Thanks in advance.

[asyncLiz]

We list the typescale tokens in our typography doc. There is not a pre-compiled CSS or Lit stylesheet that has these tokens for usage in CSS yet, but we're working on it in #1050 this year!

In the meantime, you can use Sass to compile the tokens to a CSS stylesheet yourself to use.

Create a Sass file...

// my-stylesheet.scss
@use '@material/web/typography/typescale';
@use '@material/web/tokens';

:root {
  // Emit --md-sys-typescale-* tokens to use in your own CSS
  @include typescale.theme(tokens.md-sys-typescale-values());
}

// You can now reference properties in your CSS
.my-display {
  font-family: var(--md-sys-typescale-display-medium-font);
}

...then download MWC and Sass to compile it...

npm install @material/web sass
npx sass --load-path=node_modules my-stylesheet.scss my-stylesheet.css

...and use the resulting CSS stylesheet.

:root {
  --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand, Roboto);
}

.my-display {
  font-family: var(--md-sys-typescale-display-medium-font);
}

Tip: you can use similar APIs for color and typeface custom properties.

[neoacevedo]

Compiling with dart sass I get the following:

:root {
...
--md-sys-typescale-display-medium-font: var(--md-sys-typescale-display-medium-font, var(--md-ref-typeface-brand, Roboto));
...
}

But --md-ref-typeface-brand is not defined.

[asyncLiz]

The typeface tokens are emitted from a different mixin. Here's how you'd emit both sys-typescale and ref-typeface:

// my-stylesheet.scss
@use '@material/web/typography/typescale';
@use '@material/web/typography/typeface';
@use '@material/web/tokens';

:root {
  // Emit --md-sys-typescale-* tokens to use in your own CSS
  @include typescale.theme(tokens.md-sys-typescale-values());
  // Emit --md-ref-typeface-* tokens to use in your own CSS
  @include typeface.theme(tokens.md-ref-typeface-values());
}

// You can now reference properties in your CSS
.my-display {
  font-family: var(--md-sys-typescale-display-medium-font);

  &.branded {
    font-family: var(--md-ref-typeface-brand);
  }
}