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
+--my-component-nr-xxx-background-color: var(--mat-sys-primary),  // bad
---theme-primary-color-50: mat.get-color-from-palette($primary, 50)  // good
+--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):

lib/content-services/src/lib/document-list/components/document-list.component.html

@@ -75,7 +75,6 @@
                     id="adf-document-list-loading"
                     class="adf-document-list-loading-margin"
                     [attr.aria-label]="'ADF-DOCUMENT-LIST.LOADER_LABEL' | translate"
-                    [color]="'primary'"
                     [mode]="'indeterminate'" />
             </div>
             <ng-content select="adf-custom-loading-content-template" />

lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.html

@@ -1,6 +1,6 @@
 <mat-card class="adf-permission-card" id="adf-permission-manager-card">
     <div *ngIf="(permissionList.data$ | async) === null && permissionList.loading$ | async" class="adf-permission-loader">
-        <mat-progress-spinner [color]="'primary'" [mode]="'indeterminate'" />
+        <mat-progress-spinner [mode]="'indeterminate'" />
     </div>
 
     <ng-container *ngIf="permissionList.error$ | async">

lib/core/feature-flags/src/lib/components/flags/flags.component.html

@@ -39,7 +39,7 @@
     <ng-container matColumnDef="value">
       <th mat-header-cell class="adf-val-col header-cell" *matHeaderCellDef>
         <div class="adf-input-field-buttons-container">
-          <button *ngIf="showPlusButton$ | async" mat-icon-button title="{{'CORE.FEATURE-FLAGS.ADD_NEW' | translate}}" color="accent" (click)="onAddButtonClick()">
+          <button *ngIf="showPlusButton$ | async" mat-icon-button title="{{'CORE.FEATURE-FLAGS.ADD_NEW' | translate}}" (click)="onAddButtonClick()">
             <mat-icon class="material-icons-outlined" adf-icon="add_circle" />
           </button>
           <button *ngIf="inputValue" matSuffix mat-icon-button aria-label="Clear" (click)="onClearInput()" class="adf-clear-button">

lib/core/src/lib/form/components/form-base.component.ts

@@ -16,7 +16,6 @@
  */
 
 import { Directive, EventEmitter, Input, Output } from '@angular/core';
-import { ThemePalette } from '@angular/material/core';
 import { FormFieldModel, FormFieldValidator, FormModel, FormOutcomeEvent, FormOutcomeModel } from './widgets';
 import { isOutcomeButtonVisible } from './helpers/buttons-visibility';
 
@@ -43,7 +42,6 @@ export abstract class FormBaseComponent {
     static readonly START_PROCESS_OUTCOME_ID: string = FormModel.START_PROCESS_OUTCOME;
 
     static readonly CUSTOM_OUTCOME_ID: string = '$custom';
-    static readonly COMPLETE_BUTTON_COLOR: ThemePalette = 'primary';
 
     /**
      * @deprecated Use {@link FormOutcomeModel.COMPLETE_ACTION} instead.
@@ -153,10 +151,6 @@ export abstract class FormBaseComponent {
         return titleEnabled;
     }
 
-    getColorForOutcome(outcomeName: string): ThemePalette {
-        return outcomeName === FormOutcomeModel.COMPLETE_ACTION ? FormBaseComponent.COMPLETE_BUTTON_COLOR : null;
-    }
-
     isOutcomeButtonEnabled(outcome?: FormOutcomeModel): boolean {
         if (this.form.readOnly) {
             return false;

lib/core/src/lib/form/components/widgets/button/button.widget.html

@@ -1,7 +1,6 @@
 <button
     mat-flat-button
     class="adf-button-widget__button"
-    [color]="'primary'"
     [matTooltip]="field?.tooltip"
     [matTooltipShowDelay]="tooltipShowDelay"
     [disabled]="field?.readOnly ?? false"

lib/core/src/lib/header/header.component.html

@@ -1,6 +1,6 @@
 <ng-container [ngSwitch]="variant">
     <ng-container *ngSwitchCase="'minimal'">
-        <adf-toolbar [color]="color">
+        <adf-toolbar>
             <adf-toolbar-title>
                 <ng-container *ngTemplateOutlet="toolbarTitleContent" />
             </adf-toolbar-title>
@@ -11,13 +11,13 @@
     </ng-container>
 
     <ng-container *ngSwitchCase="'extended'">
-        <adf-toolbar [color]="color">
+        <adf-toolbar>
             <adf-toolbar-title>
                 <ng-container *ngTemplateOutlet="toolbarTitleContent" />
             </adf-toolbar-title>
             <ng-container *ngTemplateOutlet="toolbarActions" />
         </adf-toolbar>
-        <adf-toolbar [color]="color">
+        <adf-toolbar>
             <ng-container *ngTemplateOutlet="navbarTemplate" />
         </adf-toolbar>
     </ng-container>

lib/core/src/lib/header/header.component.md

@@ -12,7 +12,6 @@ Displaying a minimal header with a logo and navbar:
 <adf-header
     variant="minimal"
     headerHeight="64px"
-    color="primary"
     [logoSrc]="src"
     [logoAlt]="alt"
     [logoHeight]="logoHeight"
@@ -47,8 +46,7 @@ Displaying an extended header with toolbar actions:
 ```html
 <adf-header variant="extended" [logoSrc]="src" [title]="title" [navbarItems]="items">
     <div adf-toolbar-actions>
-        <mat-button variant="flat">Secondary</mat-button>
+        <mat-button variant="flat">Primary</mat-button>
-        <mat-button variant="flat" color="accent">Primary</mat-button>
 
         <adf-toolbar-divider></adf-toolbar-divider>
 
@@ -90,8 +88,7 @@ import { HeaderComponent } from '@alfresco/adf-core';
 | `logoAlt`      | `string`        |              | The alt text for the logo.                                 |
 | `logoHeight`   | `string`        | `36px`       | The height of the logo.                                    |
 | `logoWidth`    | `string`        | `logoHeight` | The width of the logo.                                     |
-| `title`        | `string`        |              | The title to display in the header.                        |
+| `title`        | `string`        |              | The title to display in the header.                    |
-| `color`        | `ThemePalette`  |              | The theme color palette for the header.                    |
 | `navbarItems`  | `NavbarItem[]`  | `[]`         | Navigation items to display in the header.                 |
 
 ## Theming

lib/core/src/lib/header/header.component.ts

@@ -17,7 +17,6 @@
 
 import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ThemePalette } from '@angular/material/core';
 import { TOOLBAR_DIRECTIVES } from '../toolbar';
 import { NavbarItem } from './navbar/navbar-item.component';
 import { NavbarComponent } from './navbar/navbar.component';
@@ -59,9 +58,6 @@ export class HeaderComponent {
     @Input()
     title: string;
 
-    @Input()
-    color: ThemePalette;
-
     @Input()
     navbarItems: NavbarItem[] = [];
 }

lib/core/src/lib/icon/icon.component.html

@@ -1,7 +1,7 @@
 <ng-content />
 
 @if (isSvg) {
-  <mat-icon [color]="color" [svgIcon]="value" aria-hidden="true" />
+  <mat-icon [svgIcon]="value" aria-hidden="true" />
 } @else {
-  <mat-icon [fontSet]="fontSet" [color]="color" aria-hidden="true">{{ value }}</mat-icon>
+  <mat-icon [fontSet]="fontSet" aria-hidden="true">{{ value }}</mat-icon>
 }

lib/core/src/lib/icon/icon.component.ts

@@ -16,7 +16,6 @@
  */
 
 import { Component, Input, ViewEncapsulation, ChangeDetectionStrategy, inject, ElementRef, AfterContentInit } from '@angular/core';
-import { ThemePalette } from '@angular/material/core';
 import { MatIconModule } from '@angular/material/icon';
 import { ICON_ALIAS_MAP_TOKEN } from './icon-alias-map.token';
 
@@ -39,10 +38,6 @@ export class IconComponent implements AfterContentInit {
     private _value = DEFAULT_ICON_VALUE;
     private _isSvg = false;
 
-    /** Theme color palette for the component. */
-    @Input()
-    color: ThemePalette;
-
     /** Icon font set */
     @Input()
     fontSet: string;

lib/core/src/lib/layout/components/header/header.component.html

@@ -1,7 +1,6 @@
 <mat-toolbar
     class="adf-toolbar-container-row"
-    [color]="color"
+    [style.background-color]="backgroundColor"
-    [style.background-color]="color"
     [style.background-image]="backgroundImage ? 'url(' + backgroundImage + ')' : 'none'">
     <button
         *ngIf="showSidenavToggle && position === 'start'"

lib/core/src/lib/layout/components/header/header.component.spec.ts

@@ -22,7 +22,6 @@ import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { UnitTestingUtils } from '../../../testing/unit-testing-utils';
 import { provideRouter } from '@angular/router';
-import { MatToolbar } from '@angular/material/toolbar';
 
 describe('HeaderLayoutComponent', () => {
     let loader: HarnessLoader;
@@ -57,15 +56,8 @@ describe('HeaderLayoutComponent', () => {
             expect(testingUtils.getInnerTextByCSS('.adf-app-title')).toEqual('TEST TITLE');
         });
 
-        it('should have assigned correct color on toolbar', async () => {
-            component.color = 'primary';
-            fixture.detectChanges();
-
-            expect(testingUtils.getByDirective(MatToolbar).componentInstance.color).toBe('primary');
-        });
-
         it('should change background color when custom is provided', async () => {
-            component.color = '#42f57e';
+            component.backgroundColor = '#42f57e';
             fixture.detectChanges();
 
             const host = await testingUtils.getMatToolbarHost();

lib/core/src/lib/layout/components/header/header.component.stories.ts

@@ -34,20 +34,20 @@ const meta: Meta<HeaderLayoutComponent> = {
         docs: {
             description: {
                 component: `This component displays a customizable header for Alfresco applications that can be reused.
-                 Use the input properties to configure the left side (title, button) and the primary color of the header.
+                 Use the input properties to 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.`
             }
         }
     },
     argTypes: {
-        color: {
+        backgroundColor: {
             control: 'radio',
-            options: ['primary', 'accent', 'warn', '#42f57e', undefined],
+            options: ['#42f57e', '#f54242', '#4287f5', 'var(--mat-sys-surface)'],
             description: `Background color for the header.
-                It can be any hex color code or one of the Material theme colors: 'primary', 'accent' or 'warn'`,
+                It can be any hex color code or CSS variable.`,
             table: {
-                type: { summary: 'ThemePalette' },
+                type: { summary: 'string' },
-                defaultValue: { summary: 'undefined' }
+                defaultValue: { summary: 'var(--mat-sys-surface)' }
             }
         },
         expandedSidenav: {

lib/core/src/lib/layout/components/header/header.component.ts

@@ -15,9 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit, inject } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit } from '@angular/core';
-import { ThemePalette } from '@angular/material/core';
-import { AppConfigService } from '../../../app-config/app-config.service';
 import { CommonModule } from '@angular/common';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatButtonModule } from '@angular/material/button';
@@ -34,8 +32,6 @@ import { IconModule } from '../../../icon/icon.module';
     host: { class: 'adf-layout-header' }
 })
 export class HeaderLayoutComponent implements OnInit {
-    private readonly appConfigService = inject(AppConfigService);
-
     /** Title of the application. */
     @Input() title: string;
 
@@ -52,10 +48,9 @@ export class HeaderLayoutComponent implements OnInit {
     @Input() tooltip: string;
 
     /**
-     * Background color for the header. It can be any hex color code or one
+     * Background color for the header. It can be any hex color code or CSS variable.
-     * of the Material theme colors: 'primary', 'accent' or 'warn'.
      */
-    @Input() color: ThemePalette | string;
+    @Input() backgroundColor = 'var(--mat-sys-surface)';
 
     /** Path to a background image for the header. */
     @Input() backgroundImage = '';
@@ -84,11 +79,6 @@ export class HeaderLayoutComponent implements OnInit {
     }
 
     ngOnInit() {
-        const textColor = this.appConfigService.get<string | undefined>('headerTextColor');
-        if (textColor) {
-            document.documentElement.style.setProperty('--theme-header-text-color', textColor);
-        }
-
         if (!this.logo) {
             this.logo = './assets/images/logo.svg';
         }

lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.stories.ts

@@ -23,7 +23,7 @@ import { IconModule } from '../../../icon/icon.module';
 
 type SidenavLayoutStoryArgs = SidenavLayoutComponent & {
     title?: string;
-    color?: 'primary' | 'accent' | 'warn';
+    backgroundColor?: string;
     clicked?: any;
 };
 
@@ -112,14 +112,14 @@ const meta: Meta<SidenavLayoutStoryArgs> = {
                 category: 'Header'
             }
         },
-        color: {
+        backgroundColor: {
             control: 'radio',
-            options: ['primary', 'accent', 'warn', undefined],
+            options: ['#42f57e', '#f54242', '#4287f5', 'var(--mat-sys-surface)'],
             description: `Background color for the header.
-                It can be any hex color code or one of the Material theme colors: 'primary', 'accent' or 'warn'`,
+                It can be any hex color code or CSS variable.`,
             table: {
-                type: { summary: 'ThemePalette' },
+                type: { summary: 'string' },
-                defaultValue: { summary: 'undefined' },
+                defaultValue: { summary: 'var(--mat-sys-surface)' },
                 category: 'Header'
             }
         },
@@ -157,7 +157,7 @@ export const SidenavLayout: Story = {
         <div class="adf-sidenav-layout-full-space">
             <adf-sidenav-layout-header>
                 <ng-template>
-                    <adf-layout-header [title]="title" [color]="color"></adf-layout-header>
+                    <adf-layout-header [title]="title" [backgroundColor]="backgroundColor"></adf-layout-header>
                 </ng-template>
             </adf-sidenav-layout-header>
 

lib/core/src/lib/notifications/components/notification-history.component.html

@@ -8,7 +8,7 @@
     id="adf-notification-history-open-button"
     (menuOpened)="onMenuOpened()"
 >
-    <mat-icon aria-hidden="false" matBadge="&#8288;" [matBadgeHidden]="!notifications.length" class="adf-notification-history-menu_button-icon" matBadgeColor="accent" matBadgeSize="small" adf-icon="notifications" />
+    <mat-icon aria-hidden="false" matBadge="&#8288;" [matBadgeHidden]="!notifications.length" class="adf-notification-history-menu_button-icon" matBadgeSize="small" adf-icon="notifications" />
 </button>
 
 <mat-menu #menu="matMenu"

lib/core/src/lib/toolbar/toolbar.component.html

@@ -1,4 +1,4 @@
-<mat-toolbar class="adf-toolbar-container adf-toolbar-container-row" [color]="color">
+<mat-toolbar class="adf-toolbar-container adf-toolbar-container-row">
     <span class="adf-toolbar-title" *ngIf="title">{{ title | translate }}</span>
     <ng-content select="adf-toolbar-title" />
     <ng-content />

lib/core/src/lib/toolbar/toolbar.component.stories.ts

@@ -40,15 +40,6 @@ const meta: Meta<ToolbarStoryArgs> = {
         })
     ],
     argTypes: {
-        color: {
-            control: 'radio',
-            options: ['primary', 'accent', 'warn', undefined],
-            description: 'Toolbar color.',
-            table: {
-                type: { summary: 'ThemePalette' },
-                defaultValue: { summary: 'undefined' }
-            }
-        },
         title: {
             control: 'text',
             description: 'Toolbar title.',
@@ -112,7 +103,7 @@ export const Toolbar: Story = {
     render: (args: ToolbarComponent & { anyContentProjection: boolean } & { toolbarDivider: boolean } & { toolbarTitle: boolean }) => ({
         props: args,
         template: `
-    <adf-toolbar color="${args.color}" title="${args.title}">
+    <adf-toolbar title="${args.title}">
         <ng-container *ngIf="${args.toolbarTitle}"><adf-toolbar-title>Projected Title</adf-toolbar-title></ng-container>
         <ng-container *ngIf="${args.anyContentProjection}">
             <span style="color:red">projected content</span>

lib/core/src/lib/toolbar/toolbar.component.ts

@@ -16,7 +16,6 @@
  */
 
 import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
-import { ThemePalette } from '@angular/material/core';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { TranslatePipe } from '@ngx-translate/core';
 import { NgIf } from '@angular/common';
@@ -34,8 +33,4 @@ export class ToolbarComponent {
     /** Toolbar title. */
     @Input()
     title: string = '';
-
-    /** Toolbar color. Can be changed to empty value (default), `primary`, `accent` or `warn`. */
-    @Input()
-    color: ThemePalette;
 }

lib/core/src/lib/viewer/components/viewer.component.html

@@ -16,9 +16,8 @@
                                 [attr.aria-label]="'ADF_VIEWER.ACTIONS.INFO' | translate"
                                 title="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
                                 data-automation-id="adf-toolbar-left-sidebar"
-                                [color]="showLeftSidebar ? 'accent' : null"
                                 (click)="toggleLeftSidebar()">
-                            <mat-icon adf-icon="info_outline" />
+                            <mat-icon [class.adf-viewer-toolbar-left-sidebar-icon]="showLeftSidebar" adf-icon="info_outline" />
                         </button>
                     </ng-container>
 
@@ -111,9 +110,8 @@
                             [attr.aria-label]="'ADF_VIEWER.ACTIONS.INFO' | translate"
                             title="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
                             data-automation-id="adf-toolbar-sidebar"
-                            [color]="showRightSidebar ? 'accent' : null"
                             (click)="toggleRightSidebar()">
-                        <mat-icon adf-icon="info_outline" />
+                        <mat-icon [class.adf-viewer-toolbar-right-sidebar-icon]="showRightSidebar" adf-icon="info_outline" />
                     </button>
 
                 </ng-container>

lib/core/src/lib/viewer/components/viewer.component.scss

@@ -15,6 +15,16 @@
         width: auto;
     }
 
+    &-toolbar {
+        &-left-sidebar-icon {
+            color: var(--mat-sys-primary);
+        }
+
+        &-right-sidebar-icon {
+            color: var(--mat-sys-secondary);
+        }
+    }
+
     &-main {
         width: 0;
     }

lib/insights/src/lib/analytics-process/components/analytics-generator.component.html

@@ -4,10 +4,9 @@
             mat-icon-button
             *ngFor="let report of reports; let idx = index"
             [title]="report.title"
-            [color]="isCurrent(idx) ? 'primary' : null"
             (click)="selectCurrent(idx)"
         >
-            <mat-icon>{{ report.icon }}</mat-icon>
+            <mat-icon [class.adf-report-icons--selected]="isCurrent(idx)">{{ report.icon }}</mat-icon>
         </button>
     </div>
     <div class="adf-clear-both"></div>

lib/insights/src/lib/analytics-process/components/analytics-generator.component.scss

@@ -10,6 +10,10 @@
 .adf-report-icons {
     margin: 20px 0;
     float: left;
+
+    &--selected {
+        color: var(--mat-sys-primary);
+    }
 }
 
 .adf-full-width {

lib/process-services-cloud/src/lib/form/components/form-cloud.component.html

@@ -124,7 +124,6 @@
                                 @for (outcome of visibleOutcomes; track outcome.name) {
                                     <button
                                         [id]="'adf-form-' + outcome.name | formatSpace"
-                                        [color]="getColorForOutcome(outcome.name)"
                                         mat-button
                                         [disabled]="!isOutcomeButtonEnabled(outcome)"
                                         class="adf-cloud-form-custom-outcome-button"

lib/process-services-cloud/src/lib/form/components/form-cloud.component.spec.ts

@@ -258,10 +258,6 @@ describe('FormCloudComponent', () => {
         expect(validationSection).toBeNull();
     });
 
-    it('should return primary color for complete button', () => {
-        expect(formComponent.getColorForOutcome('COMPLETE')).toBe('primary');
-    });
-
     it('should not enable outcome button when model missing', () => {
         expect(formComponent.isOutcomeButtonVisible(null, false)).toBeFalsy();
     });

lib/process-services-cloud/src/lib/form/components/widgets/upload/upload-cloud.widget.html

@@ -41,7 +41,7 @@
         </div>
 
         <div *ngIf="(!hasFile || multipleOption) && !field.readOnly">
-            <button mat-raised-button color="primary" (click)="uploadFiles.click()" [title]="field.tooltip">
+            <button mat-raised-button (click)="uploadFiles.click()" [title]="field.tooltip">
                 {{ 'FORM.FIELD.UPLOAD' | translate }}<mat-icon adf-icon="file_upload" />
                 <input #uploadFiles [multiple]="multipleOption" type="file" [id]="field.form.nodeId" (change)="onFileChanged($event)" />
             </button>

lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html

@@ -29,7 +29,6 @@
                 <mat-progress-spinner
                     *ngIf="!customLoadingContent"
                     class="adf-cloud-process-list-loading-margin"
-                    [color]="'primary'"
                     [mode]="'indeterminate'" />
                 <ng-content select="adf-custom-loading-content-template" />
             </ng-template>

lib/process-services-cloud/src/lib/task/task-list/components/service-task-list/service-task-list-cloud.component.html

@@ -31,7 +31,6 @@
                 <ng-template>
                     <mat-progress-spinner
                         class="adf-cloud-task-list-loading-margin"
-                        [color]="'primary'"
                         [mode]="'indeterminate'" />
                 </ng-template>
             </adf-loading-content-template>

lib/process-services-cloud/src/lib/task/task-list/components/task-list/task-list-cloud.component.html

@@ -31,7 +31,6 @@
                 <ng-template>
                     <mat-progress-spinner
                         class="adf-cloud-task-list-loading-margin"
-                        [color]="'primary'"
                         [mode]="'indeterminate'" />
                 </ng-template>
             </adf-loading-content-template>

lib/process-services/src/lib/attachment/process-attachment-list/process-attachment-list.component.html

@@ -27,7 +27,7 @@
     <adf-loading-content-template>
         <ng-template>
             <!--Add your custom loading template here-->
-            <mat-progress-spinner class="adf-attachment-list-loading-margin" [color]="'primary'" [mode]="'indeterminate'" />
+            <mat-progress-spinner class="adf-attachment-list-loading-margin" [mode]="'indeterminate'" />
         </ng-template>
     </adf-loading-content-template>
 

lib/process-services/src/lib/attachment/task-attachment-list/task-attachment-list.component.html

@@ -25,7 +25,7 @@
             <adf-loading-content-template>
                 <ng-template>
                 <!--Add your custom loading template here-->
-                    <mat-progress-spinner class="adf-attachment-list-loading-margin" [color]="'primary'" [mode]="'indeterminate'" />
+                    <mat-progress-spinner class="adf-attachment-list-loading-margin" [mode]="'indeterminate'" />
                 </ng-template>
             </adf-loading-content-template>
 </adf-datatable>

lib/process-services/src/lib/form/form.component.html

@@ -34,7 +34,7 @@
         <mat-card-actions *ngIf="form.hasOutcomes()" class="adf-form-mat-card-actions" align="end">
             <ng-content select="adf-form-custom-outcomes" />
             <button [id]="'adf-form-'+ outcome.name  | formatSpace" *ngFor="let outcome of form.outcomes"
-                [color]="getColorForOutcome(outcome.name)" mat-button [disabled]="!isOutcomeButtonEnabled(outcome)"
+                mat-button [disabled]="!isOutcomeButtonEnabled(outcome)"
                 [class.adf-form-hide-button]="!isOutcomeButtonVisible(outcome, form.readOnly)"
                 (click)="onOutcomeClicked(outcome)">
                 {{outcome.name | translate | uppercase }}

lib/process-services/src/lib/form/form.component.spec.ts

@@ -154,10 +154,6 @@ describe('FormComponent', () => {
         expect(formComponent.isTitleEnabled()).toBeFalsy();
     });
 
-    it('should return primary color for complete button', () => {
-        expect(formComponent.getColorForOutcome('COMPLETE')).toBe('primary');
-    });
-
     it('should not enable outcome button when model missing', () => {
         expect(formComponent.isOutcomeButtonVisible(null, false)).toBeFalsy();
     });