Angularity

Core
Overview Exceptions Type Container Type-safe Providing
CDK
Overview Breakpoints
API References
theming-material / Class

TypescaleBuilder

Decorators:@Injectable
Implements:ThemeBuilder<TypescaleBuilderConfig>

Implementation of ThemeBuilder for generating theme tokens relevant to Material typescale levels.

Notes

A typescale is a selection of font styles that can be used across an app, ensuring a flexible, yet consistent, style that accommodates a range of purposes. See the specification for more details.

Each TypescaleConfig generates 5 theme tokens. For a typescale level named "display-large", the generated tokens will be "display-large-font", "display-large-weight", "display-large-size", "display-large-line-height", "display-large-tracking".

See Also

  • StandardTypescaleBuilder for a less-verbose usage if the desired typescale levels are identical to the Material specifications

Methods

build()

implements ThemeBuilder

No documentation has been provided.

Presentation
build(context: ThemeBuilderContext<TypescaleBuilderConfig>): ThemeTokens;
Parameters
NameTypeDescription
context
ThemeBuilderContext<TypescaleBuilderConfig>
Returns
ThemeTokens

buildTypescale()

No documentation has been provided.

Presentation
buildTypescale(config: TypescaleConfig): ThemeTokens;
Parameters
NameTypeDescription
config
TypescaleConfig
Returns
ThemeTokens

Example usage

const font = 'Roboto, sans-serif';
export const APP_TYPESCALES: TypescaleConfig[] = [
  {
    font,
    name: 'display-large',
    weight: '400',
    size: '57px',
    lineHeight: '64px',
    tracking: '-0.2px',
  },
  {
    font,
    name: 'display-medium',
    weight: '400',
    size: '45px',
    lineHeight: '52px',
    tracking: '0.0px',
  },
  ...
];
provideTheme(
  withThemeBuilder("typescale", TypescaleBuilder, APP_TYPESCALES),
),