AAE-39830 Removing Material components color property (#11865)

* AAE-39830 Removing Material components color property

* AAE-39830 Style with class instead of color

* AAE-39830 Updating header component doc

* AAE-39830 Updating toolbar component doc

* AAE-39830 Removed unused theme variable and updated doc

docs/content-services/directives/inherited-button.directive.md

@@ -13,7 +13,6 @@ Update the current node by adding/removing the inherited permissions.
 
 ```html
     <button mat-raised-button
-            color="primary"
             adf-inherit-permission [nodeId]="nodeId"
             (updated)="onUpdatedPermissions($node)">PERMISSION</button>
 ```

docs/core/components/datatable.component.md

@@ -351,7 +351,6 @@ while the data for the table is loading:
             <!--Add your custom loading template here-->
             <mat-progress-spinner
                 class="adf-document-list-loading-margin"
-                [color]="'primary'"
                 [mode]="'indeterminate'">
             </mat-progress-spinner>
         </ng-template>

docs/core/components/header.component.md

@@ -16,7 +16,6 @@ Reusable header for Alfresco applications.
     title="title" 
     logo="logo.svg" 
     [redirectUrl]="'/home'"
-    color="primary"
     (clicked)=toggleMenu($event)>
 </adf-layout-header>
 ```
@@ -38,7 +37,7 @@ body of the element:
 
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
-| color | [`ThemePalette`](https://github.com/angular/components/blob/master/src/material/core/common-behaviors/color.ts) |  | Background color for the header. It can be any hex color code or one of the Material theme colors: 'primary', 'accent' or 'warn'. |
+| backgroundColor | [`string`] | Background color for the header. It can be any hex color code or CSS variable. |
 | expandedSidenav | `boolean` | true | expandedSidenav: Toggles the expanded state of the component. |
 | logo | `string` |  | Path to an image file for the application logo. |
 | position | `string` | "start" | The side of the page that the drawer is attached to (can be 'start' or 'end') |
@@ -58,5 +57,5 @@ body of the element:
 ## Details
 
 This component displays a customizable header that can be reused. Use the input properties to
-configure the left side (title, button) and the primary color of the header. The right part of the
+configure the left side (title, button) and the background color of the header. The right part of the
 header can contain other components which are transcluded in the header component.

docs/core/components/toolbar.component.md

@@ -19,7 +19,6 @@ Simple container for headers, titles, actions and breadcrumbs.
     -   [Properties](#properties)
 -   [Details](#details)
     -   [Dropdown menu](#dropdown-menu)
-    -   [Custom color](#custom-color)
 -   [See also](#see-also)
 
 ## Basic Usage
@@ -74,7 +73,6 @@ pushed to the right by a spacer:
 
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
-| color | [`ThemePalette`](https://github.com/angular/components/blob/master/src/material/core/common-behaviors/color.ts) |  | Toolbar color. Can be changed to empty value (default), `primary`, `accent` or `warn`. |
 | title | `string` | "" | Toolbar title. |
 
 ## Details
@@ -116,21 +114,6 @@ when you click the menu button:
 
 ![](../../docassets/images/adf-toolbar-04.png)
 
-### Custom color
-
-Besides the default color you can use 'primary', 'accent', or 'warn' values:
-
-You might also want to change colors to follow your application's color
-[theme](../../user-guide/theming.md):
-
-For example:
-
-![](../../docassets/images/adf-toolbar-05.png)
-
-![](../../docassets/images/adf-toolbar-06.png)
-
-![](../../docassets/images/adf-toolbar-07.png)
-
 ## See also
 
 -   [Toolbar Divider component](toolbar-divider.component.md)

docs/core/services/process-content.service.md

@@ -95,7 +95,7 @@ Let's say we have an upload button as follows:
 
 ```html
   <div>
-    <button mat-button color="accent" mat-mini-fab (click)="fileInput.click()">
+    <button mat-button mat-mini-fab (click)="fileInput.click()">
       <mat-icon>attachment</mat-icon>
     </button>
     <input hidden type="file" #fileInput (change)="onUploadFile($event)"/>

docs/user-guide/theming.md

@@ -40,21 +40,6 @@ ADF is based on Angular Material library, which offers solutions for theming you
 
 If you already setup Angular Material theming in the application you use ADF in, there is no need for taking additional steps to theme ADF components - colors, typography and other parts of the theme will be taken from your setup.
 
-## Customizing deprecated theme variables
-
-Currently we have an amount of custom variables around components to mange libraries look and feel consistently and globally. 
-
-While they are getting deprecated to be replaced with [Angular Material system variables](https://material.angular.dev/guide/system-variables), for seamless integration with Angular Material's theming, you can provide values for those variables inside the `:root` element.
-
-For example:
-```css
-:root {
-    --theme-primary-color: --mat-sys-primary;
-    --theme-accent-color: --mat-sys-tertiary;
-}
-```
-**No new variables should be added to the project**
-
 [Reference list of overridable variables](https://github.com/Alfresco/alfresco-ng2-components/blob/29d341cc3b6a0842a776464027dcb1154875a8f0/lib/core/src/lib/styles/_index.scss#L25)
 
 ## Default reusable class
@@ -73,14 +58,14 @@ For example:
 
 Avoid adding css variables with names related to components:
 ```
---my-component-nr-xxx-background-color: mat.get-color-from-palette($primary, 50),  // bad
---theme-primary-color-50: mat.get-color-from-palette($primary, 50)  // good
+--my-component-nr-xxx-background-color: var(--mat-sys-primary),  // bad
+--theme-primary-color-50: var(--mat-sys-primary)  // good
 ```
 
 Avoid adding css variables with custom values, values should come from the theme:
 ```
 --new-variable: yellow  // bad
---new-variable: mat.get-color-from-palette($primary, 50), // good 
+--new-variable: var(--mat-sys-primary), // good 
 ```
 
 When styling components use Angular Material system variables (colors, typography, elevation):