search

material-components / material-web

Material Design Web Components
https://material-web.dev
Apache License 2.0
9.35k stars 894 forks source link

[Typography] Package as JS module #2506

Closed aress31 closed 3 years ago

aress31 commented 3 years ago

Could it be possible to get the official styles from the Material typography packaged as JS module so that they could easily be used/imported within lit-element classes. Ideally they should be responsive/fluid out of the box.

So far this is my personal work around:

import { css } from 'lit';

// TODO: Make typography fluid rather than responsive
export const headline1 = css`
  .m-headline1 {
    font-family: var(
      --mdc-typography-headline1-font-family,
      var(--mdc-typography-font-family, Roboto, sans-serif)
    );
    font-size: 3.5rem;
    /* font-size: var(--mdc-typography-headline1-font-size, 6rem); */
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: subpixel-antialiased;
    font-weight: var(
      --mdc-typography-headline1-font-weight,
      300
    );
    letter-spacing: var(
      --mdc-typography-headline1-letter-spacing,
      -0.015625em
    );
    line-height: var(
      --mdc-typography-headline1-line-height,
      6rem
    );
    -webkit-text-decoration: var(
      --mdc-typography-headline1-text-decoration,
      inherit
    );
    text-decoration: var(
      --mdc-typography-headline1-text-decoration,
      inherit
    );
    text-transform: var(
      --mdc-typography-headline1-text-transform,
      inherit
    );
  }
  @media (min-width: 600px) {
    .m-headline1 {
      font-size: 4.7129rem;
    }
  }
  @media (min-width: 960px) {
    .m-headline1 {
      font-size: 5.3556rem;
    }
  }
  @media (min-width: 1280px) {
    .m-headline1 {
      font-size: 5.9983rem;
    }
  }
`;

export const headline2 = css`
  .m-headline2 {
    font-family: var(
      --mdc-typography-headline2-font-family,
      var(--mdc-typography-font-family, Roboto, sans-serif)
    );
    font-size: 2.375rem;
    /* font-size: var(
      --mdc-typography-headline2-font-size,
      3.75rem
    ); */
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: subpixel-antialiased;
    font-weight: var(
      --mdc-typography-headline2-font-weight,
      300
    );
    letter-spacing: var(
      --mdc-typography-headline2-letter-spacing,
      -0.0083333333em
    );
    line-height: 2.375rem;
    /* line-height: var(
      --mdc-typography-headline2-line-height,
      3.75rem
    ); */
    -webkit-text-decoration: var(
      --mdc-typography-headline2-text-decoration,
      inherit
    );
    text-decoration: var(
      --mdc-typography-headline2-text-decoration,
      inherit
    );
    text-transform: var(
      --mdc-typography-headline2-text-transform,
      inherit
    );
  }
  @media (min-width: 600px) {
    .m-headline2 {
      font-size: 2.9167rem;
      line-height: 2.9167rem;
    }
  }
  @media (min-width: 960px) {
    .m-headline2 {
      font-size: 3.3333rem;
      line-height: 3.3333rem;
    }
  }
  @media (min-width: 1280px) {
    .m-headline2 {
      font-size: 3.75rem;
      line-height: 3.75rem;
    }
  }
`;

export const headline3 = css`
  .m-headline3 {
    font-family: var(
      --mdc-typography-headline3-font-family,
      var(--mdc-typography-font-family, Roboto, sans-serif)
    );
    font-size: 2rem;
    /* font-size: var(--mdc-typography-headline3-font-size, 3rem); */
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: subpixel-antialiased;
    font-weight: var(
      --mdc-typography-headline3-font-weight,
      400
    );
    letter-spacing: var(
      --mdc-typography-headline3-letter-spacing,
      normal
    );
    line-height: 2.125rem;
    /* line-height: var(
      --mdc-typography-headline3-line-height,
      3.125rem
    ); */
    -webkit-text-decoration: var(
      --mdc-typography-headline3-text-decoration,
      inherit
    );
    text-decoration: var(
      --mdc-typography-headline3-text-decoration,
      inherit
    );
    text-transform: var(
      --mdc-typography-headline3-text-transform,
      inherit
    );
  }
  @media (min-width: 600px) {
    .m-headline3 {
      font-size: 2.5707rem;
      line-height: 2.6957rem;
    }
  }
  @media (min-width: 960px) {
    .m-headline3 {
      font-size: 2.7849rem;
      line-height: 2.9099rem;
    }
  }
  @media (min-width: 1280px) {
    .m-headline3 {
      font-size: 2.9991rem;
      line-height: 3.1241rem;
    }
  }
`;

export const headline4 = css`
  .m-headline4 {
    font-family: var(
      --mdc-typography-headline4-font-family,
      var(--mdc-typography-font-family, Roboto, sans-serif)
    );
    font-size: 1.5625rem;
    /* font-size: var(
      --mdc-typography-headline4-font-size,
      2.125rem
    ); */
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: subpixel-antialiased;
    font-weight: var(
      --mdc-typography-headline4-font-weight,
      400
    );
    letter-spacing: var(
      --mdc-typography-headline4-letter-spacing,
      0.0073529412em
    );
    line-height: 1.9375rem;
    /* line-height: var(
      --mdc-typography-headline4-line-height,
      2.5rem
    ); */
    -webkit-text-decoration: var(
      --mdc-typography-headline4-text-decoration,
      inherit
    );
    text-decoration: var(
      --mdc-typography-headline4-text-decoration,
      inherit
    );
    text-transform: var(
      --mdc-typography-headline4-text-transform,
      inherit
    );
  }
  @media (min-width: 600px) {
    .m-headline4 {
      font-size: 1.8219rem;
      line-height: 2.1969rem;
    }
  }
  @media (min-width: 960px) {
    .m-headline4 {
      font-size: 2.0243rem;
      line-height: 2.3993rem;
    }
  }
  @media (min-width: 1280px) {
    .m-headline4 {
      font-size: 2.0243rem;
      line-height: 2.3993rem;
    }
  }
`;

export const headline5 = css`
  .m-headline5 {
    font-family: var(
      --mdc-typography-headline5-font-family,
      var(--mdc-typography-font-family, Roboto, sans-serif)
    );
    font-size: 1.25rem;
    /* font-size: var(
      --mdc-typography-headline5-font-size,
      1.5rem
    ); */
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: subpixel-antialiased;
    font-weight: var(
      --mdc-typography-headline5-font-weight,
      400
    );
    letter-spacing: var(
      --mdc-typography-headline5-letter-spacing,
      normal
    );
    line-height: 1.75rem;
    /* line-height: var(
      --mdc-typography-headline5-line-height,
      2rem
    ); */
    -webkit-text-decoration: var(
      --mdc-typography-headline5-text-decoration,
      inherit
    );
    text-decoration: var(
      --mdc-typography-headline5-text-decoration,
      inherit
    );
    text-transform: var(
      --mdc-typography-headline5-text-transform,
      inherit
    );
  }
  @media (min-width: 600px) {
    .m-headline5 {
      font-size: 1.3118rem;
      line-height: 1.8118;
    }
  }
  @media (min-width: 960px) {
    .m-headline5 {
      font-size: 1.4993rem;
      line-height: 1.9993;
    }
  }
  @media (min-width: 1280px) {
    .m-headline5 {
      font-size: 1.4993rem;
      line-height: 1.9993;
    }
  }
`;

export const headline6 = css`
  .m-headline6 {
    font-family: var(
      --mdc-typography-headline6-font-family,
      var(--mdc-typography-font-family, Roboto, sans-serif)
    );
    font-size: 1.125rem;
    /* font-size: var(
      --mdc-typography-headline6-font-size,
      1.25rem
    ); */
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: subpixel-antialiased;
    font-weight: var(
      --mdc-typography-headline6-font-weight,
      500
    );
    letter-spacing: var(
      --mdc-typography-headline6-letter-spacing,
      0.0125em
    );
    line-height: 1.875rem;
    /* line-height: var(
      --mdc-typography-headline6-line-height,
      2rem
    ); */
    -webkit-text-decoration: var(
      --mdc-typography-headline6-text-decoration,
      inherit
    );
    text-decoration: var(
      --mdc-typography-headline6-text-decoration,
      inherit
    );
    text-transform: var(
      --mdc-typography-headline6-text-transform,
      inherit
    );
  }
  @media (min-width: 600px) {
    .m-headline6 {
      font-size: 1.25rem;
      line-height: 2rem;
    }
  }
  @media (min-width: 960px) {
    .m-headline6 {
      font-size: 1.25rem;
      line-height: 2rem;
    }
  }
  @media (min-width: 1280px) {
    .m-headline6 {
      font-size: 1.25rem;
      line-height: 2rem;
    }
  }
`;

export const subtitle1 = css`
  .m-subtitle1 {
    font-family: var(
      --mdc-typography-subtitle1-font-family,
      var(--mdc-typography-font-family, Roboto, sans-serif)
    );
    font-size: 1rem;
    font-size: var(--mdc-typography-subtitle1-font-size, 1rem);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: subpixel-antialiased;
    font-weight: var(
      --mdc-typography-subtitle1-font-weight,
      400
    );
    letter-spacing: var(
      --mdc-typography-subtitle1-letter-spacing,
      0.009375em
    );
    line-height: var(
      --mdc-typography-subtitle1-line-height,
      1.75rem
    );
    -webkit-text-decoration: var(
      --mdc-typography-subtitle1-text-decoration,
      inherit
    );
    text-decoration: var(
      --mdc-typography-subtitle1-text-decoration,
      inherit
    );
    text-transform: var(
      --mdc-typography-subtitle1-text-transform,
      inherit
    );
  }
`;

export const subtitle2 = css`
  .m-subtitle2 {
    font-family: var(
      --mdc-typography-subtitle2-font-family,
      var(--mdc-typography-font-family, Roboto, sans-serif)
    );
    font-size: var(
      --mdc-typography-subtitle2-font-size,
      0.875rem
    );
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: subpixel-antialiased;
    font-weight: var(
      --mdc-typography-subtitle2-font-weight,
      500
    );
    letter-spacing: var(
      --mdc-typography-subtitle2-letter-spacing,
      0.0071428571em
    );
    line-height: var(
      --mdc-typography-subtitle2-line-height,
      1.375rem
    );
    -webkit-text-decoration: var(
      --mdc-typography-subtitle2-text-decoration,
      inherit
    );
    text-decoration: var(
      --mdc-typography-subtitle2-text-decoration,
      inherit
    );
    text-transform: var(
      --mdc-typography-subtitle2-text-transform,
      inherit
    );
  }
`;

export const body1 = css`
  .m-body1 {
    font-family: var(
      --mdc-typography-body1-font-family,
      var(--mdc-typography-font-family, Roboto, sans-serif)
    );
    font-size: var(--mdc-typography-body1-font-size, 1rem);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: subpixel-antialiased;
    font-weight: var(--mdc-typography-body1-font-weight, 400);
    letter-spacing: var(
      --mdc-typography-body1-letter-spacing,
      0.03125em
    );
    line-height: var(
      --mdc-typography-body1-line-height,
      1.5rem
    );
    -webkit-text-decoration: var(
      --mdc-typography-body1-text-decoration,
      inherit
    );
    text-decoration: var(
      --mdc-typography-body1-text-decoration,
      inherit
    );
    text-transform: var(
      --mdc-typography-body1-text-transform,
      inherit
    );
  }
`;

export const body2 = css`
  .m-body2 {
    font-family: var(
      --mdc-typography-body2-font-family,
      var(--mdc-typography-font-family, Roboto, sans-serif)
    );
    font-size: var(--mdc-typography-body2-font-size, 0.875rem);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: subpixel-antialiased;
    font-weight: var(--mdc-typography-body2-font-weight, 400);
    letter-spacing: var(
      --mdc-typography-body2-letter-spacing,
      0.0178571429em
    );
    line-height: var(
      --mdc-typography-body2-line-height,
      1.25rem
    );
    -webkit-text-decoration: var(
      --mdc-typography-body2-text-decoration,
      inherit
    );
    text-decoration: var(
      --mdc-typography-body2-text-decoration,
      inherit
    );
    text-transform: var(
      --mdc-typography-body2-text-transform,
      inherit
    );
  }
`;

export const caption = css`
  .m-caption {
    font-family: var(
      --mdc-typography-caption-font-family,
      var(--mdc-typography-font-family, Roboto, sans-serif)
    );
    font-size: var(--mdc-typography-caption-font-size, 0.75rem);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: subpixel-antialiased;
    font-weight: var(--mdc-typography-caption-font-weight, 400);
    letter-spacing: var(
      --mdc-typography-caption-letter-spacing,
      0.0333333333em
    );
    line-height: var(
      --mdc-typography-caption-line-height,
      1.25rem
    );
    -webkit-text-decoration: var(
      --mdc-typography-caption-text-decoration,
      inherit
    );
    text-decoration: var(
      --mdc-typography-caption-text-decoration,
      inherit
    );
    text-transform: var(
      --mdc-typography-caption-text-transform,
      inherit
    );
  }
`;

export const button = css`
  .m-button {
    font-family: var(
      --mdc-typography-button-font-family,
      var(--mdc-typography-font-family, Roboto, sans-serif)
    );
    font-size: var(--mdc-typography-button-font-size, 0.875rem);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: subpixel-antialiased;
    font-weight: var(--mdc-typography-button-font-weight, 500);
    letter-spacing: var(
      --mdc-typography-button-letter-spacing,
      0.0892857143em
    );
    line-height: var(
      --mdc-typography-button-line-height,
      2.25rem
    );
    -webkit-text-decoration: var(
      --mdc-typography-button-text-decoration,
      none
    );
    text-decoration: var(
      --mdc-typography-button-text-decoration,
      none
    );
    text-transform: var(
      --mdc-typography-button-text-transform,
      uppercase
    );
  }
`;

export const overline = css`
  .m-overline {
    font-family: var(
      --mdc-typography-overline-font-family,
      var(--mdc-typography-font-family, Roboto, sans-serif)
    );
    font-size: var(
      --mdc-typography-overline-font-size,
      0.75rem
    );
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: subpixel-antialiased;
    font-weight: var(
      --mdc-typography-overline-font-weight,
      500
    );
    letter-spacing: var(
      --mdc-typography-overline-letter-spacing,
      0.1666666667em
    );
    line-height: var(
      --mdc-typography-overline-line-height,
      2rem
    );
    -webkit-text-decoration: var(
      --mdc-typography-overline-text-decoration,
      none
    );
    text-decoration: var(
      --mdc-typography-overline-text-decoration,
      none
    );
    text-transform: var(
      --mdc-typography-overline-text-transform,
      uppercase
    );
  }
`;

That could be part of a helper folder providing devs with easy of the box and standard Material typography styles to use.

I investigated the @material node package and found this style file which unfortunately cannot be used as it is in lit based project:

image

Looking forward to your feedback, ares

asyncLiz commented 3 years ago

This is a duplicate of #1050