From 9a53603550b39f623bb9bd454cf4a07840661165 Mon Sep 17 00:00:00 2001 From: Vito Albano Date: Tue, 14 Nov 2023 01:36:17 +0000 Subject: [PATCH] Demo shell builds --- demo-shell/src/custom-style-dev.scss | 20 +++---------------- demo-shell/src/custom-style.scss | 18 +++-------------- lib/core/custom-theme/theme/typography.scss | 8 +++----- lib/core/src/lib/styles/_index.scss | 22 ++++++++++----------- 4 files changed, 20 insertions(+), 48 deletions(-) diff --git a/demo-shell/src/custom-style-dev.scss b/demo-shell/src/custom-style-dev.scss index 84213af530..9f87b6f5b6 100644 --- a/demo-shell/src/custom-style-dev.scss +++ b/demo-shell/src/custom-style-dev.scss @@ -1,6 +1,7 @@ @use '@angular/material' as mat; @import '../../lib/core/src/lib/styles/index'; @import '../../lib/core/src/lib/styles/typography'; + // TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles. // The following line adds: // 1. Default typography styles for all components @@ -9,8 +10,9 @@ // If you don't need the default component typographies but still want the hierarchy styles, // you can delete this line and instead use: // `@include mat.legacy-typography-hierarchy(mat.define-typography-config());` + @include mat.all-component-typographies; -@include mat.core(); +@include mat.core; $primary: mat.define-palette($alfresco-accent-orange); $accent: mat.define-palette($alfresco-accent-purple); @@ -28,19 +30,3 @@ $theme: mat.define-light-theme( @include mat.all-component-themes($theme); @include alfresco-material-theme($theme); - -$typography: map-get($theme, typography); - -body, -html { - margin: 0; - height: 100%; - overflow: hidden; - font-size: mat.font-size($typography, body-1); - font-family: mat.font-family($typography); - line-height: mat.line-height($typography, body-1); -} - -body { - overflow: auto; -} diff --git a/demo-shell/src/custom-style.scss b/demo-shell/src/custom-style.scss index e5fce7f3a9..1f15d8dd74 100644 --- a/demo-shell/src/custom-style.scss +++ b/demo-shell/src/custom-style.scss @@ -1,5 +1,6 @@ @use '@angular/material' as mat; @import '~@alfresco/adf-core/theming'; + // TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles. // The following line adds: // 1. Default typography styles for all components @@ -8,8 +9,9 @@ // If you don't need the default component typographies but still want the hierarchy styles, // you can delete this line and instead use: // `@include mat.legacy-typography-hierarchy($alfresco-typography);` + @include mat.all-component-typographies($alfresco-typography); -@include mat.core(); +@include mat.core; $primary: mat.define-palette($alfresco-accent-orange); $accent: mat.define-palette($alfresco-accent-purple); @@ -25,17 +27,3 @@ $theme: mat.define-light-theme( @include mat.all-component-themes($theme); @include alfresco-material-theme($theme); - -body, -html { - margin: 0; - height: 100%; - overflow: hidden; - font-size: mat.font-size($alfresco-typography, body-1); - font-family: mat.font-family($alfresco-typography); - line-height: mat.line-height($alfresco-typography, body-1); -} - -body { - overflow: auto; -} diff --git a/lib/core/custom-theme/theme/typography.scss b/lib/core/custom-theme/theme/typography.scss index 0969bba9d4..541a44cf55 100644 --- a/lib/core/custom-theme/theme/typography.scss +++ b/lib/core/custom-theme/theme/typography.scss @@ -4,7 +4,7 @@ @function get-mat-typography($base-font-size, $font-family) { $custom-typography: mat.define-legacy-typography-configmat.define-typography-config( - $font-family: $default-font-family, + $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif', $headline-1: mat.define-typography-level(112px, 112px, 300), $headline-2: mat.define-typography-level(56px, 56px, 400), $headline-3: mat.define-typography-level(45px, 48px, 400), @@ -18,8 +18,7 @@ $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. - $in/* TODO(mdc-migration): No longer supported. Use `body-1` instead. put: mat.define-typography-level(16px, 1.25, 400), - */ ); + ); @if $base-font-size { $custom-typography: mat.define-legacy-typography-configmat.define-typography-config( @@ -36,8 +35,7 @@ $caption: mat.define-typography-level(0.86rem, 1.42rem, 400), $button: mat.define-typography-level(1rem, 1rem, 500), $font-family: $default-font-family, - $in/* TODO(mdc-migration): No longer supported. Use `body-1` instead. put: mat.define-typography-level(1.14em, 1.25, 400), - */ ); + ); } @if $font-family { diff --git a/lib/core/src/lib/styles/_index.scss b/lib/core/src/lib/styles/_index.scss index 903f593025..acb43a803e 100644 --- a/lib/core/src/lib/styles/_index.scss +++ b/lib/core/src/lib/styles/_index.scss @@ -74,19 +74,19 @@ // typography --theme-font-family: mat.font-family($typography), - --theme-body-1-font-size: mat.font-size($typography, body-1), - --theme-body-2-font-size: mat.font-size($typography, body-2), - --theme-body-1-line-height: mat.line-height($typography, body-1), - --theme-display-1-font-size: mat.font-size($typography, display-1), - --theme-display-3-font-size: mat.font-size($typography, display-3), - --theme-display-4-font-size: mat.font-size($typography, display-4), + --theme-body-1-font-size: mat.font-size($typography, body-2), + --theme-body-2-font-size: mat.font-size($typography, subtitle-2), + --theme-body-1-line-height: mat.line-height($typography, body-2), + --theme-display-1-font-size: mat.font-size($typography, headline-4), + --theme-display-3-font-size: mat.font-size($typography, headline-2), + --theme-display-4-font-size: mat.font-size($typography, headline-1), --theme-caption-font-size: mat.font-size($typography, caption), - --theme-title-font-size: mat.font-size($typography, title), - --theme-subheading-1-font-size: mat.font-size($typography, subheading-1), - --theme-subheading-2-font-size: mat.font-size($typography, subheading-2), + --theme-title-font-size: mat.font-size($typography, headline-6), + --theme-subheading-1-font-size: mat.font-size($typography, body-1), + --theme-subheading-2-font-size: mat.font-size($typography, subtitle-1), --theme-button-font-size: mat.font-size($typography, button), - --theme-headline-font-size: mat.font-size($typography, headline), - --theme-headline-line-height: mat.line-height($typography, headline), + --theme-headline-font-size: mat.font-size($typography, headline-5), + --theme-headline-line-height: mat.line-height($typography, headline-5), --theme-adf-icon-1-font-size: map-get($custom-css-variables, 'theme-adf-icon-1-font-size'), --theme-adf-picture-1-font-size: map-get($custom-css-variables, 'theme-adf-picture-1-font-size'),