From 224db6548b6368e55091a12975abe613687b4b3e Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Mon, 6 Nov 2017 09:56:04 +0000 Subject: [PATCH] [ADF-1867] Typography Documentation (#2595) * Typography Documentation * doc fix after review --- docs/README.md | 1 + docs/summary.json | 3 +- docs/theming.md | 22 +++++++------- docs/typography.md | 75 ++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 90 insertions(+), 11 deletions(-) create mode 100644 docs/typography.md diff --git a/docs/README.md b/docs/README.md index 2c135a0782..a1bf0282c8 100644 --- a/docs/README.md +++ b/docs/README.md @@ -32,6 +32,7 @@ to the appropriate source file. - [Form Stencils with Angular 2](stencils.md) - [Angular Material Design](angular-material-design.md) - [Theming](theming.md) +- [Typography](typography.md) - [Walkthrough: adding indicators to highlight information about a node](metadata-indicators.md) diff --git a/docs/summary.json b/docs/summary.json index aea19b0351..71554379ac 100644 --- a/docs/summary.json +++ b/docs/summary.json @@ -3,5 +3,6 @@ { "title": "Form Stencils with Angular 2", "file": "stencils.md" }, { "title": "Angular Material Design", "file": "angular-material-design.md" }, { "title": "Theming", "file": "theming.md" }, + { "title": "Typography", "file": "typography.md" }, { "title": "Walkthrough: adding indicators to highlight information about a node", "file": "metadata-indicators.md" } -] \ No newline at end of file +] diff --git a/docs/theming.md b/docs/theming.md index 3bcc16172a..0cd36ed3e7 100644 --- a/docs/theming.md +++ b/docs/theming.md @@ -20,7 +20,7 @@ Available pre-built themes: * `adf-pink-bluegrey.css` * `adf-purple-green.css` -If you're using Angular CLI you can include one of the prebuilt theme in yours `styles.css` file: +If you're using Angular CLI you can include one of the prebuilt theme in your `styles.scss` file: ```css @import '~ng2-alfresco-core/prebuilt-themes/adf-blue-orange.css'; ``` @@ -36,7 +36,7 @@ When you want more customization than a pre-built theme offers, you can create y ```scss /* - * Include only packages what you are using (and core by default) + * Include only packages that you are using (and core by default) */ @import '~@angular/material/theming'; @import '~ng2-alfresco-core/styles/theming'; @@ -75,7 +75,7 @@ $theme: mat-light-theme($primary, $accent, $warn); ``` -Notes: if you are using the Generator or the demo shell you need only to change the`/app/theme.scss` with your set of colors +Notes: if you are using the Generator or the demo shell you need only to change the`/src/custom-style.scss` with your set of colors ### Multiple themes @@ -111,14 +111,16 @@ Any component with the `add-dark-theme` class will use the dark theme, while ot ## Default reusable class +```css .adf-hide-small // Display none vieweport <960px .adf-hide-xsmall // Display none vieweport <600px .adf-primary-color // Primary color -.adf-accent-color // Accent color -.adf-warn-color // Warn color -.adf-primary-contrast-text-color // Default contrast color for primary color -.adf-accent-contrast-text-color // Default contrast color for accent color -.adf-background-color // Dialog background color -.adf-primary-background-color // Primary background color -.adf-accent-background-color // Default background color for accent +.accent-color // Accent color +.warn-color // Warn color +.primary-contrast-text-color // Default contrast color for primary color +.accent-contrast-text-color // Default contrast color for accent color +.background-color // Dialog background color +.primary-background-color // Primary background color +.accent-background-color // Default background color for accent +``` \ No newline at end of file diff --git a/docs/typography.md b/docs/typography.md new file mode 100644 index 0000000000..9d73f6fc0e --- /dev/null +++ b/docs/typography.md @@ -0,0 +1,75 @@ +# ADF Typography + +## What is typography? + +Typography configuration lets you change the style of the text in your ADF app + +## Customization + +To get started you need to include your custom font in the `/src/index.html` header: + +```html + +``` + +After you need to change your `/src/custom-style.scss` to include the new font: + +```scss +/* + * Include only packages that you are using (and core by default) + */ +@import '~@angular/material/theming'; +@import '~ng2-alfresco-core/styles/theming'; +@import '~ng2-alfresco-core/styles/index'; +@import '~ng2-activiti-analytics/styles/index'; +@import '~ng2-activiti-diagrams/styles/index'; +@import '~ng2-activiti-form/styles/index'; +@import '~ng2-activiti-processlist/styles/index'; +@import '~ng2-activiti-tasklist/styles/index'; +@import '~ng2-alfresco-datatable/styles/index'; +@import '~ng2-alfresco-documentlist/styles/index'; +@import '~ng2-alfresco-login/styles/index'; +@import '~ng2-alfresco-upload/styles/index'; +@import '~ng2-alfresco-userinfo/styles/index'; + +$custom-typography: mat-typography-config( + $font-family: 'Muli, Roboto, "Helvetica Neue", sans-serif', + $display-4: mat-typography-level(112px, 112px, 300), + $display-3: mat-typography-level(56px, 56px, 400), + $display-2: mat-typography-level(45px, 48px, 400), + $display-1: mat-typography-level(34px, 40px, 400), + $headline: mat-typography-level(24px, 32px, 400), + $title: mat-typography-level(20px, 32px, 500), + $subheading-2: mat-typography-level(16px, 28px, 400), + $subheading-1: mat-typography-level(15px, 24px, 400), + $body-2: mat-typography-level(14px, 24px, 500), + $body-1: mat-typography-level(14px, 20px, 400), + $caption: mat-typography-level(12px, 20px, 400), + $button: mat-typography-level(14px, 14px, 500), + $input: mat-typography-level(16px, 1.25, 400) +); + +@include mat-core($custom-typography); + +$primary: mat-palette($alfresco-accent-orange); +$accent: mat-palette($alfresco-accent-purple); +$warn: mat-palette($alfresco-warn); +$theme: mat-light-theme($primary, $accent, $warn); + +@include angular-material-theme($theme); + +@include alfresco-core-theme($theme); +@include alfresco-activity-analytics-theme($theme); +@include alfresco-activity-diagrams-theme($theme); +@include alfresco-activity-form-theme($theme); +@include alfresco-activity-processlist-theme($theme); +@include alfresco-activity-tasklist-theme($theme); +@include alfresco-datatable-theme($theme); +@include alfresco-documentlist-theme($theme); +@include alfresco-login-theme($theme); +@include alfresco-upload-theme($theme); +@include alfresco-userinfo-theme($theme); + +``` + +for more details about typography refer to [Material 2 documentation](https://github.com/angular/material2/blob/master/guides/typography.md) \ No newline at end of file