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

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" color="accent">Primary</mat-button>
+        <mat-button variant="flat">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.                        |
-| `color`        | `ThemePalette`  |              | The theme color palette for the header.                    |
+| `title`        | `string`        |              | The title to display in 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]="color"
+    [style.background-color]="backgroundColor"
     [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' },
-                defaultValue: { summary: 'undefined' }
+                type: { summary: 'string' },
+                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 { ThemePalette } from '@angular/material/core';
-import { AppConfigService } from '../../../app-config/app-config.service';
+import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit } from '@angular/core';
 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
-     * of the Material theme colors: 'primary', 'accent' or 'warn'.
+     * Background color for the header. It can be any hex color code or CSS variable.
      */
-    @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' },
-                defaultValue: { summary: 'undefined' },
+                type: { summary: 'string' },
+                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;
     }