Customizing the Typography Theme for a Packaged Angular Component

Image by Pexels from Pixabay

Scenario

In Creating a Packaged and Themeable Angular Material Component we created a self contained installable Angular component that was also themeable.

Creating a Packaged and Themeable Angular Material Component

However only the color theme customization was implemented. Now we wish to add Typography theme customization as well.

Specifically we want to customize:

• font-size
• font-weight
• font-family
• line-height
• letter-spacing

Approach

Project

Since we are adding custom typography to our previously packaged component we will use that project as a starting point.

mkdir ~/Temp/clone
cd ~/Temp/clone
git clone git@github.com:fireflysemantics/big-workspace.git
cd big-workspace
npm i

We will also create a new branch to keep the modification separate from the previous creation.

git checkout -b typography

Since we will be publishing this modification to NPM lets rename the project in projects/big/package.json to @fireflysemantics/big-component-typography-example and change the version to 0.0.0 .

This is a link to the Github Branch in case you wish to view the file contents.

GitHub - fireflysemantics/big-workspace at typography

Implementation

Within the index.scss file that contains the color theme mixin for the fs-big component we create a big-component-typography mixin as well.

In this step we also added a @use ‘sass:map’ declaration. Also we are using !important to override the typography that we declared in the big-component local CSS file.

The typography config is retrieved via the line:

$config: map.get($theme, typography);

We then retrieve the values using Angular Typography helpers declared on mat .

@if ($config) {        
    fs-big {            
        font-size: mat.font-size($config, "fs-big-typography") !important;
        font-weight: mat.font-weight($config, "fs-big-typography") !important;            
        font-family: mat.font-family($config, "fs-big-typography") !important;            
        line-height: mat.line-height($config, "fs-big-typography") !important;            
        letter-spacing: mat.letter-spacing($config, "fs-big-typography") !important;        
     }    
}

In this step we also added a @use ‘sass:map’ declaration. Also we are using !important to override the typography that we declared in the big-component local CSS file.

Note that we are applying the typography directly to our component host element with the fs-big selector.

Local Testing

Now that we’ve added the custom typography class we can test it locally.

We will move all the theme related functionality from styles.scss to themes.scss .

In projects/test/src/themes.scss first add a @use sass:map since we will be using map.merge.

Also import the component theme index.scss .

@use '../../big/src/lib/theming' as theme;

Define the $big-typography-level .

$big-typography-level: mat.define-typography-level(
   $font-family: 'Open Sans',
   $font-weight: 800,
   $font-size: 3rem,
   $line-height: 1,
   $letter-spacing: 0.2em);

Then define the default typography config.

$config: mat.define-typography-config();

And merge in the custom typography level for our component.

$config: map.merge(
    $config,
    ( fs-big-typography: $big-typography-level)
);

Then update the theme definition so that it contains both the typography and color configuration.

$light-theme: mat.define-light-theme((
    color: (
        primary: $my-theme-primary,
        accent: $my-theme-accent,
        warn: $my-theme-warn
),
    typography: $config,
));

Also call the theme Mixins from the big component.

// =====================================
// Initialize custom component themes
// =====================================
@mixin custom-components-theme($theme) {
    @include theme.big-component-theme($theme);
    @include theme.big-component-typography($theme);
    // ====================================
    // If we had more component themes
    // we could include them here as well.
    // ====================================
}
@include mat.core-theme($theme);
@include custom-components-theme($theme);

This is the updated themes.scss file.

NPM Publish

We have changed the name of the component already so to publish it to NPM all we need to do is run this command.

cp README.md ./projects/big && npm run b && cd dist/big/ && npm publish --access public

It is now published to NPM.

@fireflysemantics/big-component-typography-example@0.0.0

Live Test

For the live test we will fork the Stackblitz from the previous article.

Open package.json and replace the dependency@fireflysemantics/big-component-example with @fireflysemantics/big-component-typography-example and set the version to * as that will give us the latest version.

Update the app.module.ts with the new namespace for the module.

import { BigModule } from '@fireflysemantics/big-component-typography-example';

Update the theme import within styles.scss using the new namespace.

@use '@fireflysemantics/big-component-typography-example/theming' as theme;

Then add the typography configuration to theme.scss . It should look like this.

Demo