inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Demo shell builds

Browse Source
This commit is contained in:
Vito Albano
2023-11-14 01:36:17 +00:00
committed by VitoAlbano
parent cd49d1d730
commit 9a53603550
4 changed files with 20 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
demo-shell/src/custom-style-dev.scss
View File

@@ -1,6 +1,7 @@
@use '@angular/material' as mat; @use '@angular/material' as mat;
@import '../../lib/core/src/lib/styles/index'; @import '../../lib/core/src/lib/styles/index';
@import '../../lib/core/src/lib/styles/typography'; @import '../../lib/core/src/lib/styles/typography';
// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles. // TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
// The following line adds: // The following line adds:
// 1. Default typography styles for all components // 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, // If you don't need the default component typographies but still want the hierarchy styles,
// you can delete this line and instead use: // you can delete this line and instead use:
// `@include mat.legacy-typography-hierarchy(mat.define-typography-config());` // `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
@include mat.all-component-typographies; @include mat.all-component-typographies;
@include mat.core(); @include mat.core;
$primary: mat.define-palette($alfresco-accent-orange); $primary: mat.define-palette($alfresco-accent-orange);
$accent: mat.define-palette($alfresco-accent-purple); $accent: mat.define-palette($alfresco-accent-purple);
@@ -28,19 +30,3 @@ $theme: mat.define-light-theme(
@include mat.all-component-themes($theme); @include mat.all-component-themes($theme);
@include alfresco-material-theme($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;
}

18
demo-shell/src/custom-style.scss
View File

@@ -1,5 +1,6 @@
@use '@angular/material' as mat; @use '@angular/material' as mat;
@import '~@alfresco/adf-core/theming'; @import '~@alfresco/adf-core/theming';
// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles. // TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
// The following line adds: // The following line adds:
// 1. Default typography styles for all components // 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, // If you don't need the default component typographies but still want the hierarchy styles,
// you can delete this line and instead use: // you can delete this line and instead use:
// `@include mat.legacy-typography-hierarchy($alfresco-typography);` // `@include mat.legacy-typography-hierarchy($alfresco-typography);`
@include mat.all-component-typographies($alfresco-typography); @include mat.all-component-typographies($alfresco-typography);
@include mat.core(); @include mat.core;
$primary: mat.define-palette($alfresco-accent-orange); $primary: mat.define-palette($alfresco-accent-orange);
$accent: mat.define-palette($alfresco-accent-purple); $accent: mat.define-palette($alfresco-accent-purple);
@@ -25,17 +27,3 @@ $theme: mat.define-light-theme(
@include mat.all-component-themes($theme); @include mat.all-component-themes($theme);
@include alfresco-material-theme($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;
}

8
lib/core/custom-theme/theme/typography.scss
View File

@@ -4,7 +4,7 @@
@function get-mat-typography($base-font-size, $font-family) { @function get-mat-typography($base-font-size, $font-family) {
$custom-typography: mat.define-legacy-typography-configmat.define-typography-config( $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-1: mat.define-typography-level(112px, 112px, 300),
$headline-2: mat.define-typography-level(56px, 56px, 400), $headline-2: mat.define-typography-level(56px, 56px, 400),
$headline-3: mat.define-typography-level(45px, 48px, 400), $headline-3: mat.define-typography-level(45px, 48px, 400),
@@ -18,8 +18,7 @@
$caption: mat.define-typography-level(12px, 20px, 400), $caption: mat.define-typography-level(12px, 20px, 400),
$button: mat.define-typography-level(14px, 14px, 500), $button: mat.define-typography-level(14px, 14px, 500),
// Line-height must be unit-less fraction of the font-size. // 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 { @if $base-font-size {
$custom-typography: mat.define-legacy-typography-configmat.define-typography-config( $custom-typography: mat.define-legacy-typography-configmat.define-typography-config(
@@ -36,8 +35,7 @@
$caption: mat.define-typography-level(0.86rem, 1.42rem, 400), $caption: mat.define-typography-level(0.86rem, 1.42rem, 400),
$button: mat.define-typography-level(1rem, 1rem, 500), $button: mat.define-typography-level(1rem, 1rem, 500),
$font-family: $default-font-family, $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 { @if $font-family {

22
lib/core/src/lib/styles/_index.scss
View File

@@ -74,19 +74,19 @@
// typography // typography
--theme-font-family: mat.font-family($typography), --theme-font-family: mat.font-family($typography),
--theme-body-1-font-size: mat.font-size($typography, body-1), --theme-body-1-font-size: mat.font-size($typography, body-2),
--theme-body-2-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-1), --theme-body-1-line-height: mat.line-height($typography, body-2),
--theme-display-1-font-size: mat.font-size($typography, display-1), --theme-display-1-font-size: mat.font-size($typography, headline-4),
--theme-display-3-font-size: mat.font-size($typography, display-3), --theme-display-3-font-size: mat.font-size($typography, headline-2),
--theme-display-4-font-size: mat.font-size($typography, display-4), --theme-display-4-font-size: mat.font-size($typography, headline-1),
--theme-caption-font-size: mat.font-size($typography, caption), --theme-caption-font-size: mat.font-size($typography, caption),
--theme-title-font-size: mat.font-size($typography, title), --theme-title-font-size: mat.font-size($typography, headline-6),
--theme-subheading-1-font-size: mat.font-size($typography, subheading-1), --theme-subheading-1-font-size: mat.font-size($typography, body-1),
--theme-subheading-2-font-size: mat.font-size($typography, subheading-2), --theme-subheading-2-font-size: mat.font-size($typography, subtitle-1),
--theme-button-font-size: mat.font-size($typography, button), --theme-button-font-size: mat.font-size($typography, button),
--theme-headline-font-size: mat.font-size($typography, headline), --theme-headline-font-size: mat.font-size($typography, headline-5),
--theme-headline-line-height: mat.line-height($typography, headline), --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-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'), --theme-adf-picture-1-font-size: map-get($custom-css-variables, 'theme-adf-picture-1-font-size'),