Added the tutorial 'Basic theming'. (#3378)

docs/tutorials/README.md

@@ -20,6 +20,7 @@ The tutorials are graded as follows:
 | [**Adding a new component**](new-component.md) | Basic | By definition, a _component_ controls a patch of screen called a _view_. For example, individual components define and control menus, tabs, forms, buttons and every simple or complex portion ofan application's layout. In this tutorial, you will learn how to create a component using [Angular CLI](https://cli.angular.io/) within an existing application. |
 | [**Adding a new view**](new-view.md) | Beginner | Every application developed in Angular is a single page application where the concepts of _view_ and _routing_ play a key role in the user experience. Being a single page application, the navigation between the different layouts (called _views_) is enabled through the _routing_. In this tutorial you will learn how to create a new view in your application and how to access it using a defined endpoint. |
 | [**Using components**](using-components.md) | Beginner | There are three different ways to use, extend and configure an ADF component: configuration properties, event listeners, and content projection / HTML extensions. In this tutorial you will see a practical example of each approach using the Login component. |
+| [**Basic theming**](basic-theming.md) | Beginner | In this tutorial you will see how to change the colours of your ADF application using a set of palettes. You will be introduced to the basics around palettes in Material Design and you will customise your own ADF application generated using Yeoman. |
 | [**Customizing the Login component**](customising-login.md) | Intermediate | In this tutorial you will learn how to customize the [\`Login\` component](https://alfresco.github.io/adf-component-catalog/components/LoginComponent.html) following the [technical documentation](https://alfresco.github.io/adf-component-catalog/components/LoginComponent.html). The task will be very simple. See the documentation for further details about customizing this component, along with examples. |
 | [**Working with a Data Table**](working-with-data-table.md) | Intermediate | In this tutorial you will learn how to populate a [\`DataTable\` component](https://alfresco.github.io/adf-component-catalog/components/DataTableComponent.html) with custom data from a generic back-end service or third party API. As an example we are going to use data from one of the available services on Alfresco Content Services. However, the procedure is much the same if want to use an Alfresco Process Services endpoint or a third party API. |
 | [**Working with the Nodes API Service**](working-with-nodes-api-service.md) | Intermediate | In this tutorial you will learn how to use the `NodesApiService` into an Angular application, to interact with your instance of Alfresco Content Services without consuming directly the REST endpoints. |

docs/tutorials/basic-theming.md

@@ -0,0 +1,87 @@
+---
+Level: Beginner
+---
+# Basic theming
+
+As introduced in the [user guide about theming](../user-guide/theming.md), the customisation of the [Cascading Style Sheets](https://en.wikipedia.org/wiki/Cascading_Style_Sheets) is something straightforward into an ADF application. In this tutorial you will see how to change it, using a step-by-step approach. The focus of this tutorial is [ADF apps built using Yeoman](./creating-the-app-using-yeoman.md), but you can re-use the same principles to customise the themes in all the ADF applications.
+
+## About the `adf-core` theming 
+
+As described into the [user guide about theming](../user-guide/theming.md), all happens into the `src/custom-style.scss` file defining the *primary*, the *accent* and the *warn* set of palettes. For a detailed description of the different types of palettes, check the [user guide about theming](../user-guide/theming.md).
+
+As you can see directly in the `css` file, the sets of palettes are defined by some predefined variables used in the source code as described below.
+
+    $primary: mat-palette($alfresco-accent-orange);
+    $accent:  mat-palette($alfresco-accent-purple);
+    $warn:    mat-palette($alfresco-warn);
+
+The `mat-palette` function is used to define the [Material Design](https://material.io/design/introduction/) Palettes from a collection of colours and `$alfresco-ecm-cyan`, `$alfresco-accent-purple` and `$alfresco-warn` are variables declared locally into the project to define the colours to be used in the application.
+
+As you can easily imagine, changing the parameter of the `mat-palette` function, you will change the colours of the entire application in one action.
+
+All the available variables containing the set of palettes for the application can be found in the `node_modules/@alfresco/adf-core/_theming.css` file. In that file you can find:
+
+ - `$alfresco-ecm-cyan`
+ - `$alfresco-dev-teal`
+ - `$alfresco-ecm-blue`
+ - `$alfresco-bpm-green`
+ - `$alfresco-warn`
+ - `$alfresco-accent-purple`
+ - `$alfresco-accent-orange`
+
+Check the `_theming.css` file to see the latest changes and how the variable are structured and defined in practice.
+
+## Changing the palette of your application
+
+As an example, let's change the set of palettes for the primary colours. In the `src/custom-style.scss` file, change the `$primary` definition as follows.
+
+    $primary: mat-palette($alfresco-ecm-blue);
+
+Once done, save the `custom-style.scss` file and you will see the application refreshed with different colours. That's all.
+
+## Developing your own palette
+
+In some cases you might want to do something more "customised", and you might want to choose your preferred colours for your application. In this case you simply need to develop your own palette into a local variable and use it as primary, accent or warn.
+
+As an example, let's edit the `src/custom-style.scss` file adding the following source code immediately before the definition of the `$primary` variable.
+
+    $my-own-brown: (
+        50: #f9f2ec,
+        100: #ecd9c6,
+        200: #dfbf9f,
+        300: #d2a679,
+        400: #c68c53,
+        500: #ac7339,
+        600: #86592d,
+        700: #604020,
+        800: #392613,
+        900: #130d06,
+        A100: #e6ccb3,
+        A200: #cc9966,
+        A400: #996633,
+        A700: #4d3319,
+        contrast: (
+            50: $black-87-opacity,
+            100: $black-87-opacity,
+            200: $black-87-opacity,
+            300: $black-87-opacity,
+            400: $black-87-opacity,
+            500: white,
+            600: white,
+            700: white,
+            800: $white-87-opacity,
+            900: $white-87-opacity,
+            A100: $black-87-opacity,
+            A200: white,
+            A400: white,
+            A700: white,
+        )
+    );
+
+Once done replace the `$primary` definition as follows and save the `custom-style.scss` file.
+
+    $primary: mat-palette($my-own-brown);
+
+After few seconds you will see the application refreshing with different colours in the upper menu. In the following screenshot you can see how the new palette looks like.
+
+![theming_palette](../docassets/images/theming_palette.png)

docs/user-guide/summary.json

@@ -13,6 +13,7 @@
             { "title": "Adding a new component", "file": "new-component.md"},
             { "title": "Adding a new view", "file": "new-view.md"},
             { "title": "Using components", "file": "using-components.md"},
+            { "title": "Basic theming", "file": "basic-theming.md"},
             { "title": "Customising the Login component", "file": "customising-login.md"},
             { "title": "Working with a DataTable", "file": "working-with-data-table.md"},
             { "title": "Working with the Nodes API Service", "file": "working-with-nodes-api-service.md"},