inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-06-30 18:15:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-12716 updated the typography documentation (#8277)

Browse Source 
* AAE-12716 updated the typography documentation

* tests trigger
This commit is contained in:
tomasz hanaj 2023-02-16 14:38:34 +01:00 committed by GitHub
parent 05e2033633
commit c00c7643b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 53 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
docs/user-guide/theming.md
View File

@ -70,19 +70,22 @@ When you want more customization than a pre-built theme offers, you can create y
/* /*
* Include only packages that you are using (and core by default) * Include only packages that you are using (and core by default)
*/ */
@use '@angular/material' as mat;
@import '~@angular/material/theming'; @import '~@angular/material/theming';
@import '~@alfresco/adf-core/theming'; @import '~@alfresco/adf-core/theming';
@include mat-core($alfresco-typography); @include mat.core();
$primary: mat-palette($alfresco-accent-orange); $primary: mat.define-palette($alfresco-accent-orange);
$accent: mat-palette($alfresco-accent-purple); $accent: mat.define-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn); $warn: mat.define-palette($alfresco-warn);
$theme: mat-light-theme(( $theme: mat.define-light-theme((
color: ( color: (
primary: $primary, primary: $primary,
accent: $accent, accent: $accent,
) warn: $warn,
),
typography: $alfresco-typography
)); ));
@include angular-material-theme($theme); @include angular-material-theme($theme);
@ -103,21 +106,25 @@ You can create multiple themes for your application:
@include mat-core($alfresco-typography); @include mat-core($alfresco-typography);
$primary: mat-palette($alfresco-accent-orange); $primary: mat.define-palette($alfresco-accent-orange);
$accent: mat-palette($alfresco-accent-purple); $accent: mat.define-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn); $warn: mat.define-palette($alfresco-warn);
$theme: mat-light-theme(( $theme: mat.define-light-theme((
color: ( color: (
primary: $primary, primary: $primary,
accent: $accent, accent: $accent,
) warn: $warn,
),
typography: $alfresco-typography
)); ));
$dark-theme: mat-dark-theme(( $dark-theme: mat.define-dark-theme((
color: ( color: (
primary: $primary, primary: $primary,
accent: $accent, accent: $accent,
) warn: $warn,
),
typography: $alfresco-typography
)); ));
@include alfresco-material-theme($theme); @include alfresco-material-theme($theme);

52
docs/user-guide/typography.md
View File

@ -14,13 +14,16 @@ To get started you need to include your custom font in the `/src/index.html` hea
```html ```html
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
``` ```
When adding custom typography, please be aware of angular material version
(there are two different versions of typography levels: 2014 and 2018). Current
version is 14.
After you need to change your `/src/custom-style.scss` to include the new font: After you need to change your `/src/custom-style.scss` to include the new font:
```scss ```scss
/* /*
* Include only packages that you are using (and core by default) * Include only packages that you are using (and core by default)
*/ */
@use '@angular/material' as mat;
@import '~@angular/material/theming'; @import '~@angular/material/theming';
@import '~ng2-alfresco-core/styles/theming'; @import '~ng2-alfresco-core/styles/theming';
@import '~ng2-alfresco-core/styles/index'; @import '~ng2-alfresco-core/styles/index';
@ -35,29 +38,38 @@ After you need to change your `/src/custom-style.scss` to include the new font:
@import '~ng2-alfresco-upload/styles/index'; @import '~ng2-alfresco-upload/styles/index';
@import '~ng2-alfresco-userinfo/styles/index'; @import '~ng2-alfresco-userinfo/styles/index';
$custom-typography: mat-typography-config( $custom-typography: mat.define-typography-config(
$font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif', $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif',
$display-4: mat-typography-level(112px, 112px, 300), $display-4: mat.define-typography-level(112px, 112px, 300),
$display-3: mat-typography-level(56px, 56px, 400), $display-3: mat.define-typography-level(56px, 56px, 400),
$display-2: mat-typography-level(45px, 48px, 400), $display-2: mat.define-typography-level(45px, 48px, 400),
$display-1: mat-typography-level(34px, 40px, 400), $display-1: mat.define-typography-level(34px, 40px, 400),
$headline: mat-typography-level(24px, 32px, 400), $headline: mat.define-typography-level(24px, 32px, 400),
$title: mat-typography-level(20px, 32px, 500), $title: mat.define-typography-level(20px, 32px, 500),
$subheading-2: mat-typography-level(16px, 28px, 400), $subheading-2: mat.define-typography-level(16px, 28px, 400),
$subheading-1: mat-typography-level(15px, 24px, 400), $subheading-1: mat.define-typography-level(15px, 24px, 400),
$body-2: mat-typography-level(14px, 24px, 500), $body-2: mat.define-typography-level(14px, 24px, 500),
$body-1: mat-typography-level(14px, 20px, 400), $body-1: mat.define-typography-level(14px, 20px, 400),
$caption: mat-typography-level(12px, 20px, 400), $caption: mat.define-typography-level(12px, 20px, 400),
$button: mat-typography-level(14px, 14px, 500), $button: mat.define-typography-level(14px, 14px, 500),
$input: mat-typography-level(16px, 1.25, 400) $input: mat.define-typography-level(16px, 1.25, 400)
); );
@include mat-core($custom-typography); @include mat.core();
$primary: mat-palette($alfresco-accent-orange); $primary: mat.define-palette($alfresco-accent-orange);
$accent: mat-palette($alfresco-accent-purple); $accent: mat.define-palette($alfresco-accent-purple);
$warn: mat-palette($alfresco-warn); $warn: mat.define-palette($alfresco-warn);
$theme: mat-light-theme($primary, $accent, $warn); $theme: mat.define-light-theme(
(
color: (
primary: $primary,
accent: $accent,
warn: $warn,
),
typography: $custom-typography
)
);
@include angular-material-theme($theme); @include angular-material-theme($theme);