Typography component or way to use typography styles

[fernandopasik]

Is your feature request related to a problem? Please describe.
I'm trying to style individual elements with the material typography guidelines.

Describe the solution you'd like
Implement @material/mwc-typography component

Describe alternatives you've considered
I've tried to import @material/typography/dist/mdc.typography.css to use the css classes in my component like .mdc-typography--body1, but I can't find an easy way or tool to include that style in my lit-html components

[fernandopasik]

My current workaround far from ideal is to use just the css variables

.my-class {
    font-size: var(--mdc-typography-body1-font-size, 1rem);
    line-height: var(--mdc-typography-body1-line-height, 1.5rem);
    font-weight: var(--mdc-typography-body1-font-weight, 400);
}

[asyncliz]

This is definitely on our roadmap!

I would recommend a plugin/loader for your build system that can turn a CSS file into a LitElement CSSResult, and use that to import @material/typography in the meantime.

import {style} from '@material/typography/dist/mdc.typography.css';

You can then include the style CSSResult in your LitElement styles.

Alternatively, you can include the raw CSS string into a <style> tag of your component's render function. Not as ideal, but it may be easier to get a CSS-to-string loader set up than CSS-to-CSSResult.

[fernandopasik]

Thanks for the quick response and the suggestion.

Would it be another alternative to use a sass plugin and call the right mixin for the typography style (which mixin would that be)?

[asyncliz]

Absolutely. You could transform Sass into your component's CSS. You'll want the typography() mixin and provide it one of the text styles.

@use "@material/typography";

.my-headline {
  @include typography.typography(headline1);
}

[Alos]

It would be awesome if this was implemented out of the box

[aress31]

@asyncliz would you mind providing working code or a tutorial on the steps to follow to be able to use Material typography in MWC based project (without SASS, just following the open-wc standard)?

[aress31]

Any update on this feature? :)