From e099f8978eea9acc29e22e5ffa61cdb200e1805f Mon Sep 17 00:00:00 2001 From: klac503 Date: Mon, 9 Dec 2024 06:47:52 -0800 Subject: [PATCH] Set line-height & letter-spacing The --mat-* css variables associated with line-height and letter-spacing styles are not correlated with the --fds-* css variables. This causes css classes which reference the --mat-* variables to be incorrect. --- .../lib/core/typography/_typography.scss | 52 +++++++++++++++---- 1 file changed, 41 insertions(+), 11 deletions(-) diff --git a/libs/angular-theme/lib/core/typography/_typography.scss b/libs/angular-theme/lib/core/typography/_typography.scss index bd0c47c7..f596118a 100644 --- a/libs/angular-theme/lib/core/typography/_typography.scss +++ b/libs/angular-theme/lib/core/typography/_typography.scss @@ -9,67 +9,97 @@ $typography-config: mat.m2-define-typography-config( mat.m2-define-typography-level( $font-family: map.get(fds-variables.$properties, 'headline-1', 'font-family'), $font-size: map.get(fds-variables.$properties, 'headline-1', 'font-size'), - $font-weight: map.get(fds-variables.$properties, 'headline-1', 'font-weight') + $font-weight: map.get(fds-variables.$properties, 'headline-1', 'font-weight'), + $line-height: map.get(fds-variables.$properties, 'headline-1', 'line-height'), + $letter-spacing: map.get(fds-variables.$properties, 'headline-1', 'letter-spacing') ), $headline-2: mat.m2-define-typography-level( $font-family: map.get(fds-variables.$properties, 'headline-2', 'font-family'), $font-size: map.get(fds-variables.$properties, 'headline-2', 'font-size'), - $font-weight: map.get(fds-variables.$properties, 'headline-2', 'font-weight') + $font-weight: map.get(fds-variables.$properties, 'headline-2', 'font-weight'), + $line-height: map.get(fds-variables.$properties, 'headline-2', 'line-height'), + $letter-spacing: map.get(fds-variables.$properties, 'headline-2', 'letter-spacing') ), $headline-3: mat.m2-define-typography-level( $font-family: map.get(fds-variables.$properties, 'headline-3', 'font-family'), $font-size: map.get(fds-variables.$properties, 'headline-3', 'font-size'), - $font-weight: map.get(fds-variables.$properties, 'headline-3', 'font-weight') + $font-weight: map.get(fds-variables.$properties, 'headline-3', 'font-weight'), + $line-height: map.get(fds-variables.$properties, 'headline-3', 'line-height'), + $letter-spacing: map.get(fds-variables.$properties, 'headline-3', 'letter-spacing') ), $headline-4: mat.m2-define-typography-level( $font-family: map.get(fds-variables.$properties, 'headline-4', 'font-family'), $font-size: map.get(fds-variables.$properties, 'headline-4', 'font-size'), - $font-weight: map.get(fds-variables.$properties, 'headline-4', 'font-weight') + $font-weight: map.get(fds-variables.$properties, 'headline-4', 'font-weight'), + $line-height: map.get(fds-variables.$properties, 'headline-4', 'line-height'), + $letter-spacing: map.get(fds-variables.$properties, 'headline-4', 'letter-spacing') ), $headline-5: mat.m2-define-typography-level( $font-family: map.get(fds-variables.$properties, 'headline-5', 'font-family'), $font-size: map.get(fds-variables.$properties, 'headline-5', 'font-size'), - $font-weight: map.get(fds-variables.$properties, 'headline-5', 'font-weight') + $font-weight: map.get(fds-variables.$properties, 'headline-5', 'font-weight'), + $line-height: map.get(fds-variables.$properties, 'headline-5', 'line-height'), + $letter-spacing: map.get(fds-variables.$properties, 'headline-5', 'letter-spacing') ), $headline-6: mat.m2-define-typography-level( $font-family: map.get(fds-variables.$properties, 'headline-6', 'font-family'), $font-size: map.get(fds-variables.$properties, 'headline-6', 'font-size'), - $font-weight: map.get(fds-variables.$properties, 'headline-6', 'font-weight') + $font-weight: map.get(fds-variables.$properties, 'headline-6', 'font-weight'), + $line-height: map.get(fds-variables.$properties, 'headline-6', 'line-height'), + $letter-spacing: map.get(fds-variables.$properties, 'headline-6', 'letter-spacing') ), $subtitle-1: mat.m2-define-typography-level( $font-family: map.get(fds-variables.$properties, 'subtitle-1', 'font-family'), $font-size: map.get(fds-variables.$properties, 'subtitle-1', 'font-size'), - $font-weight: map.get(fds-variables.$properties, 'subtitle-1', 'font-weight') + $font-weight: map.get(fds-variables.$properties, 'subtitle-1', 'font-weight'), + $line-height: map.get(fds-variables.$properties, 'subtitle-1', 'line-height'), + $letter-spacing: map.get(fds-variables.$properties, 'subtitle-1', 'letter-spacing') ), $subtitle-2: mat.m2-define-typography-level( $font-family: map.get(fds-variables.$properties, 'subtitle-2', 'font-family'), $font-size: map.get(fds-variables.$properties, 'subtitle-2', 'font-size'), - $font-weight: map.get(fds-variables.$properties, 'subtitle-2', 'font-weight') + $font-weight: map.get(fds-variables.$properties, 'subtitle-2', 'font-weight'), + $line-height: map.get(fds-variables.$properties, 'subtitle-2', 'line-height'), + $letter-spacing: map.get(fds-variables.$properties, 'subtitle-2', 'letter-spacing') ), $body-1: mat.m2-define-typography-level( $font-family: map.get(fds-variables.$properties, 'body-1', 'font-family'), $font-size: map.get(fds-variables.$properties, 'body-1', 'font-size'), - $font-weight: map.get(fds-variables.$properties, 'body-1', 'font-weight') + $font-weight: map.get(fds-variables.$properties, 'body-1', 'font-weight'), + $line-height: map.get(fds-variables.$properties, 'body-1', 'line-height'), + $letter-spacing: map.get(fds-variables.$properties, 'body-1', 'letter-spacing') ), $body-2: mat.m2-define-typography-level( $font-family: map.get(fds-variables.$properties, 'body-2', 'font-family'), $font-size: map.get(fds-variables.$properties, 'body-2', 'font-size'), - $font-weight: map.get(fds-variables.$properties, 'body-2', 'font-weight') + $font-weight: map.get(fds-variables.$properties, 'body-2', 'font-weight'), + $line-height: map.get(fds-variables.$properties, 'body-2', 'line-height'), + $letter-spacing: map.get(fds-variables.$properties, 'body-2', 'letter-spacing') ), $caption: mat.m2-define-typography-level( $font-family: map.get(fds-variables.$properties, 'caption', 'font-family'), $font-size: map.get(fds-variables.$properties, 'caption', 'font-size'), - $font-weight: map.get(fds-variables.$properties, 'caption', 'font-weight') + $font-weight: map.get(fds-variables.$properties, 'caption', 'font-weight'), + $line-height: map.get(fds-variables.$properties, 'caption', 'line-height'), + $letter-spacing: map.get(fds-variables.$properties, 'caption', 'letter-spacing') + ), + $button: + mat.m2-define-typography-level( + $font-family: map.get(fds-variables.$properties, 'button-1', 'font-family'), + $font-size: map.get(fds-variables.$properties, 'button-1', 'font-size'), + $font-weight: map.get(fds-variables.$properties, 'button-1', 'font-weight'), + $line-height: map.get(fds-variables.$properties, 'button-1', 'line-height'), + $letter-spacing: map.get(fds-variables.$properties, 'button-1', 'letter-spacing') ) ); @include mat.typography-hierarchy($typography-config);