From 2b2ce642ae6a8a142368b46a200fc8ccf204dcd5 Mon Sep 17 00:00:00 2001 From: Bartosz Sekula Date: Fri, 14 Apr 2023 17:21:43 +0200 Subject: [PATCH] [AAE-13640] Custom theme fix (#3122) --- .../src/lib/ui/dynamic-theme/typography.scss | 139 ++++++++++-------- 1 file changed, 77 insertions(+), 62 deletions(-) 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 eeb2399be1..f49848e431 100644 --- a/projects/aca-content/src/lib/ui/dynamic-theme/typography.scss +++ b/projects/aca-content/src/lib/ui/dynamic-theme/typography.scss @@ -2,78 +2,93 @@ @use '@angular/material' as mat; @import '../variables/font-family'; -@function get-mat-typography( - $base-font-size, - $font-family -) { +@function get-mat-typography($base-font-size, $font-family) { + $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( - $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) + $display-4: mat.define-typography-level(8rem, 8rem, 300), + $display-3: mat.define-typography-level(4rem, 4rem, 400), + $display-2: mat.define-typography-level(3.21rem, 3.21rem, 400), + $display-1: mat.define-typography-level(2.42rem, 2.85rem, 400), + $headline: mat.define-typography-level(1.71rem, 2.28rem, 400), + $title: mat.define-typography-level(1.42rem, 2.28rem, 500), + $subheading-2: mat.define-typography-level(1.14rem, 2rem, 400), + $subheading-1: mat.define-typography-level(1.07rem, 1.71rem, 400), + $body-2: mat.define-typography-level(1rem, 1.71rem, 500), + $body-1: mat.define-typography-level(1rem, 1.42rem, 400), + $caption: mat.define-typography-level(0.86rem, 1.42rem, 400), + $button: mat.define-typography-level(1rem, 1rem, 500), + $font-family: $default-font-family, + $input: mat.define-typography-level(1.14em, 1.25, 400) ); + } - @if $base-font-size { - $custom-typography: mat.define-typography-config( - $display-4: mat.define-typography-level(8rem, 8rem, 300), - $display-3: mat.define-typography-level(4rem, 4rem, 400), - $display-2: mat.define-typography-level(3.21rem, 3.21rem, 400), - $display-1: mat.define-typography-level(2.42rem, 2.85rem, 400), - $headline: mat.define-typography-level(1.71rem, 2.28rem, 400), - $title: mat.define-typography-level(1.42rem, 2.28rem, 500), - $subheading-2: mat.define-typography-level(1.14rem, 2rem, 400), - $subheading-1: mat.define-typography-level(1.07rem, 1.71rem, 400), - $body-2: mat.define-typography-level(1rem, 1.71rem, 500), - $body-1: mat.define-typography-level(1rem, 1.42rem, 400), - $caption: mat.define-typography-level(0.86rem, 1.42rem, 400), - $button: mat.define-typography-level(1rem, 1rem, 500), - $font-family: $default-font-family, - $input: mat.define-typography-level(1.14em, 1.25, 400) + @if $font-family { + @each $key, $level in $custom-typography { + @if type-of($level) == 'map' { + $new-level: map-merge( + $level, + ( + font-family: $font-family + ) + ); + $custom-typography: map-merge( + $custom-typography, + ( + $key: $new-level + ) ); + } } - @if $font-family { - @each $key, $level in $custom-typography { - @if type-of($level) == 'map' { - $new-level: map-merge($level, (font-family: $font-family)); - $custom-typography: map-merge($custom-typography, ($key: $new-level)); - } - } - - $custom-typography: map-merge($custom-typography, (font-family: $font-family)); - } + $custom-typography: map-merge( + $custom-typography, + ( + font-family: $font-family + ) + ); + } - @return $custom-typography; -}; + @return $custom-typography; +} @function get-custom-adf-font-sizes() { - @return ( - 'theme-adf-icon-1-font-size': 1.2rem, - 'theme-adf-picture-1-font-size': 1.28rem, - 'theme-adf-task-footer-font-size': 1.28rem, - 'theme-adf-task-title-font-size': 1.28rem - ) -}; + @return ( + 'theme-adf-icon-1-font-size': 1.2rem, + 'theme-adf-picture-1-font-size': 1.28rem, + 'theme-adf-task-footer-font-size': 1.28rem, + 'theme-adf-task-title-font-size': 1.28rem, + 'theme-adf-spacing': 16px + ); +} @mixin base-font-size($font-size) { - html, body { - font-size: $font-size !important; - } -}; + html, + body { + font-size: $font-size !important; + } +} @mixin base-font-family($font-family) { - html, body { - font-family: $font-family !important; - } -}; + html, + body { + font-family: $font-family !important; + } +}