diff --git a/projects/aca-content/src/lib/ui/dynamic-theme/custom-theme.scss.tpl b/projects/aca-content/src/lib/ui/dynamic-theme/custom-theme.scss.tpl index 948076f90..21c355573 100644 --- a/projects/aca-content/src/lib/ui/dynamic-theme/custom-theme.scss.tpl +++ b/projects/aca-content/src/lib/ui/dynamic-theme/custom-theme.scss.tpl @@ -15,10 +15,9 @@ $text-color: map-get($theme-config, 'textColor'); $base-font-size: map-get($theme-config, 'baseFontSize'); $font-family: map-get($theme-config, 'fontFamily'); -$alfresco-typography: get-mat-typography( +$app-typography: get-mat-typography( $base-font-size, - $font-family, - $alfresco-typography + $font-family ); @include mat-core(); @@ -31,7 +30,7 @@ $custom-theme: mat-light-theme( accent: map-get($palettes, accent), warn: map-get($palettes, warning) ), - typography: $alfresco-typography + typography: $app-typography ) ); diff --git a/projects/aca-content/src/lib/ui/dynamic-theme/typography.scss b/projects/aca-content/src/lib/ui/dynamic-theme/typography.scss index 58e89cc07..3c5487fe5 100644 --- a/projects/aca-content/src/lib/ui/dynamic-theme/typography.scss +++ b/projects/aca-content/src/lib/ui/dynamic-theme/typography.scss @@ -3,10 +3,25 @@ @function get-mat-typography( $base-font-size, - $font-family, - $default-typography + $font-family ) { - $custom-typography: $default-typography; + $custom-typography: mat.define-typography-config( + $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif', + $display-4: mat.define-typography-level(112px, 112px, 300), + $display-3: mat.define-typography-level(56px, 56px, 400), + $display-2: mat.define-typography-level(45px, 48px, 400), + $display-1: mat.define-typography-level(34px, 40px, 400), + $headline: mat.define-typography-level(24px, 32px, 400), + $title: mat.define-typography-level(20px, 32px, 500), + $subheading-2: mat.define-typography-level(16px, 28px, 400), + $subheading-1: mat.define-typography-level(15px, 24px, 400), + $body-2: mat.define-typography-level(14px, 24px, 500), + $body-1: mat.define-typography-level(14px, 20px, 400), + $caption: mat.define-typography-level(12px, 20px, 400), + $button: mat.define-typography-level(14px, 14px, 500), + // Line-height must be unit-less fraction of the font-size. + $input: mat.define-typography-level(16px, 1.25, 400) + ); @if $base-font-size { $custom-typography: mat.define-typography-config(