Opacity for angular material typography

Question

I am able to use Angular Material's typography styles via:

.title {
  @include mat-typography-level-to-styles($typography-config, 'caption');
}

.title-with-opacity {
  @include mat-typography-level-to-styles($typography-config, 'caption');
  opacity: 0.54;
}

When applied, it looks like this:

However, the contrast are not applied automatically for typography level used.

Q: How do I get opacity (contrast) for typography level as specified by Material Design Specs without specifying them separately?

Answer 1

As far as I know,

@include mat-typography-level-to-styles($typography-config, 'caption');

It will include typography styles of level caption from default configuration which contains:

"Font Family(deafult family)", "Font size (default size)", "Font Weight (default weight)", "Line height (default height)", "Letter Spacing (null by default)" but not the opacity/contrast.

So, you will not get the contrast but you can use a custom configuration like:

    $custom-typography: mat-typography-config(
      $font-family: 'Roboto, monospace',
      // other default overrides
      $color: mat-color($primary, lighter-contrast)
    );

//include custom config like this
@include mat-typography-level-to-styles($custom-typography);

Another way:

.title-with-opacity {
  @include mat-typography-level-to-styles($typography-config, 'caption');
  color: mat-color($primary, lighter-contrast);
}

Note: Required files must be included.

The official documentation is not so good and if none of the above works, your own way of assigning value to opacity property is far better. Let me know if it works because this is untested method but the solution above is based on documentation.