[NIFI-13739] initial M3 theme (#9270)

* [NIFI-13739] initial M3 theme

* rename m3- themes

* sync package-lock

* update theme imports

* remove unused caution darker

* update some class names, restore background colors for datepicker, table, expansion panel, and dialog surfaces, use secondary color variants

* configurable border color

* swap primary and secondary colors

* a few more updates

* zero styles

* bump deps

* review feedback

* adjust status history sizes

* update new canvas item hover and grip to be configurable via theme

* rebase

This closes #9270

nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/feature/_jolt-transform-json-ui.component-theme.scss

@@ -18,7 +18,7 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $supplemental-theme) {
+@mixin generate-theme($material-theme, $config) {
     .jolt-transform-json-ui {
         @include mat.button-density(-1);
 

nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/feature/jolt-transform-json-ui.component.html

@@ -68,7 +68,7 @@ <h3 class="primary-color">Advanced</h3>
                                 <div class="jolt-spec-editor grow mb-2">
                                     <div class="h-full flex flex-col">
                                         <div>
-                                            <div class="mat-body-strong">
+                                            <div class="font-bold">
                                                 Jolt Specification
                                                 <i
                                                     class="fa fa-info-circle primary-color ml-2"
@@ -80,7 +80,7 @@ <h3 class="primary-color">Advanced</h3>
                                         <div class="flex justify-end mb-2">
                                             <button
                                                 mat-icon-button
-                                                color="primary"
+                                                class="primary-icon-button"
                                                 nifiTooltip
                                                 [tooltipComponentType]="TextTip"
                                                 [tooltipInputData]="getFormatTooltip()"
@@ -192,16 +192,11 @@ <h3 class="primary-color">Advanced</h3>
                             <div class="flex flex-1 justify-between">
                                 <button
                                     mat-stroked-button
-                                    color="primary"
                                     (click)="validateJoltSpec()"
                                     [disabled]="isValidateDisabled()">
                                     Validate
                                 </button>
-                                <button
-                                    color="primary"
-                                    mat-flat-button
-                                    (click)="saveProperties()"
-                                    [disabled]="isSaveDisabled()">
+                                <button mat-flat-button (click)="saveProperties()" [disabled]="isSaveDisabled()">
                                     Save
                                 </button>
                             </div>
@@ -246,7 +241,7 @@ <h3 class="primary-color">Advanced</h3>
                                             <div class="flex justify-end mb-4">
                                                 <button
                                                     mat-icon-button
-                                                    color="primary"
+                                                    class="primary-icon-button"
                                                     nifiTooltip
                                                     [tooltipComponentType]="TextTip"
                                                     [tooltipInputData]="getFormatTooltip()"
@@ -288,8 +283,8 @@ <h3 class="primary-color">Advanced</h3>
                                                         <button
                                                             title="Clear All"
                                                             mat-icon-button
+                                                            class="primary-icon-button"
                                                             [disabled]="isEmpty()"
-                                                            color="primary"
                                                             type="button"
                                                             (click)="clearAttributesClicked()">
                                                             <i class="fa fa-eraser"></i>
@@ -348,7 +343,6 @@ <h3 class="primary-color">Advanced</h3>
                             <div class="flex flex-1 justify-start">
                                 <button
                                     mat-stroked-button
-                                    color="primary"
                                     (click)="transformJoltSpec()"
                                     [disabled]="isTransformDisabled()">
                                     Transform
@@ -396,7 +390,7 @@ <h3 class="primary-color">Advanced</h3>
         } @else {
             @if (processorDetailsLoading$ | async) {
                 <div class="h-full flex items-center justify-center">
-                    <mat-spinner color="primary"></mat-spinner>
+                    <mat-spinner></mat-spinner>
                 </div>
             } @else if (processorDetailsError()) {
                 <div class="flex flex-1 justify-center items-center">

nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/index.html

@@ -23,7 +23,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" type="image/svg+xml" href="assets/icons/nifi-drop.svg" />
     </head>
-    <body class="mat-app-background mat-typography">
+    <body class="mat-app-background mat-typography text-base">
         <nifi-jolt-transform-json-ui></nifi-jolt-transform-json-ui>
     </body>
 </html>

nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/styles.scss

@@ -15,8 +15,6 @@
  * limitations under the License.
  */
 
-// Custom Theming for Angular Material
-// For more information: https://v16.material.angular.io/guide/theming-your-components
 @use '@angular/material' as mat;
 @use 'sass:map';
 @use 'libs/shared/src/assets/styles/app' as app;
@@ -30,8 +28,6 @@
 @use 'codemirror/addon/lint/lint.css';
 
 @import 'font-awesome';
-@import 'libs/shared/src/assets/themes/supplemental';
-// To override the NiFi theme, you need to set the variables $material-theme-light and $material-theme-dark
 @import 'libs/shared/src/assets/themes/material';
 
 // Include the common styles for Angular Material. We include this here so that you only
@@ -47,24 +43,20 @@
 @include app.styles();
 @include listing-table.styles();
 
-// Include the light theme color styles.
-@include mat.all-component-themes($material-theme-light);
-
-// generate light mode stylesheets
-@include app.generate-material-theme($material-theme-light);
-@include app.generate-supplemental-theme($supplemental-theme-light);
-@include codemirror-theme.generate-codemirror-theme($material-theme-light, $supplemental-theme-light);
-@include listing-table.generate-theme($material-theme-light, $supplemental-theme-light);
-@include jolt-transform-json-ui.generate-theme($material-theme-light, $supplemental-theme-light);
-
-.dark-theme {
-    // Include the dark theme color styles.
-    @include mat.all-component-colors($material-theme-dark);
-
-    // generate dark mode stylesheets
-    @include app.generate-material-theme($material-theme-dark);
-    @include app.generate-supplemental-theme($supplemental-theme-dark);
-    @include codemirror-theme.generate-codemirror-theme($material-theme-dark, $supplemental-theme-dark);
-    @include listing-table.generate-theme($material-theme-dark, $supplemental-theme-dark);
-    @include jolt-transform-json-ui.generate-theme($material-theme-dark, $supplemental-theme-dark);
+html {
+    @include mat.typography-hierarchy($m3-light-theme);
+    @include mat.all-component-themes($m3-light-theme);
+    @include app.generate-material-theme($m3-light-theme, $m3-light-theme-config);
+    @include codemirror-theme.generate-codemirror-theme($m3-light-theme, $m3-light-theme-config);
+    @include listing-table.generate-theme($m3-light-theme, $m3-light-theme-config);
+    @include jolt-transform-json-ui.generate-theme($m3-light-theme, $m3-light-theme-config);
+
+    .dark-theme {
+        //@include mat.typography-hierarchy($m3-dark-theme);
+        @include mat.all-component-colors($m3-dark-theme);
+        @include app.generate-material-theme($m3-dark-theme, $m3-dark-theme-config);
+        @include codemirror-theme.generate-codemirror-theme($m3-dark-theme, $m3-dark-theme-config);
+        @include listing-table.generate-theme($m3-dark-theme, $m3-dark-theme-config);
+        @include jolt-transform-json-ui.generate-theme($m3-dark-theme, $m3-dark-theme-config);
+    }
 }

nifi-frontend/src/main/frontend/apps/nifi/src/app/_app.component-theme.scss

@@ -18,19 +18,24 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme) {
-    // Get the color config from the theme.
-    $material-theme-color-config: mat.m2-get-color-config($material-theme);
-
-    // Get the color palette from the color-config.
-    $material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
-
-    // Get hues from palette
-    $is-dark: map-get($material-theme-color-config, is-dark);
-    $material-theme-primary-palette-default: mat.m2-get-color-from-palette($material-theme-primary-palette, default);
-    $material-theme-primary-palette-darker: mat.m2-get-color-from-palette($material-theme-primary-palette, darker);
+@mixin generate-theme($material-theme, $config) {
+    $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
+    $material-theme-secondary-palette-default: mat.get-theme-color(
+        $material-theme,
+        secondary,
+        map.get(map.get($config, secondary), default)
+    );
+    $material-theme-secondary-palette-lighter: mat.get-theme-color(
+        $material-theme,
+        secondary,
+        map.get(map.get($config, secondary), lighter)
+    );
 
     .splash {
-        background-color: if($is-dark, $material-theme-primary-palette-default, $material-theme-primary-palette-darker);
+        background-color: if(
+            $is-material-dark,
+            $material-theme-secondary-palette-default,
+            $material-theme-secondary-palette-lighter
+        );
     }
 }

nifi-frontend/src/main/frontend/apps/nifi/src/app/app.component.html

@@ -18,7 +18,7 @@
 @if (guardLoading) {
     <div class="splash h-screen p-20">
         <div class="splash-img h-full flex items-center justify-center">
-            <mat-spinner color="warn"></mat-spinner>
+            <mat-spinner class="error-spinner"></mat-spinner>
         </div>
     </div>
 } @else {

nifi-frontend/src/main/frontend/apps/nifi/src/app/app.module.ts

@@ -54,6 +54,7 @@ import { PropertyVerificationEffects } from './state/property-verification/prope
 import { loadingInterceptor } from './service/interceptors/loading.interceptor';
 import { LoginConfigurationEffects } from './state/login-configuration/login-configuration.effects';
 import { BannerTextEffects } from './state/banner-text/banner-text.effects';
+import { MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions } from '@angular/material/tooltip';
 
 const entry = localStorage.getItem('disable-animations');
 let disableAnimations: string = entry !== null ? JSON.parse(entry).item : '';
@@ -63,6 +64,12 @@ if (disableAnimations !== 'true' && disableAnimations !== 'false') {
     disableAnimations = window.matchMedia('(prefers-reduced-motion: reduce)').matches.toString();
 }
 
+export const customTooltipDefaults: MatTooltipDefaultOptions = {
+    showDelay: 2000,
+    hideDelay: 0,
+    touchendHideDelay: 1000
+};
+
 @NgModule({
     declarations: [AppComponent],
     bootstrap: [AppComponent],
@@ -111,7 +118,8 @@ if (disableAnimations !== 'true' && disableAnimations !== 'false') {
                 cookieName: '__Secure-Request-Token',
                 headerName: 'Request-Token'
             })
-        )
+        ),
+        { provide: MAT_TOOLTIP_DEFAULT_OPTIONS, useValue: customTooltipDefaults }
     ]
 })
 export class AppModule {}

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/add-tenant-to-policy-dialog.component.html

@@ -43,17 +43,13 @@ <h2 mat-dialog-title>Add Users/Groups To Policy</h2>
             </div>
         }
         @if (filteredUsers.length === 0 && filteredUserGroups.length === 0) {
-            <div class="accent-color font-medium">All users and groups are assigned to this policy.</div>
+            <div class="tertiary-color font-medium">All users and groups are assigned to this policy.</div>
         }
     </mat-dialog-content>
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
             <button mat-button mat-dialog-close>Cancel</button>
-            <button
-                mat-button
-                [disabled]="addTenantsForm.invalid || saving.value"
-                (click)="addClicked()"
-                color="primary">
+            <button mat-flat-button [disabled]="addTenantsForm.invalid || saving.value" (click)="addClicked()">
                 <span *nifiSpinner="saving.value">Add</span>
             </button>
         </mat-dialog-actions>

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/access-policies/ui/common/override-policy-dialog/override-policy-dialog.component.html

@@ -20,14 +20,12 @@ <h2 mat-dialog-title>Override Policy</h2>
     <mat-dialog-content>
         <div class="mb-5">Do you want to override with a copy of the inherited policy or an empty policy?</div>
         <mat-radio-group formControlName="override">
-            <mat-radio-button color="primary" value="copy">Copy</mat-radio-button>
-            <mat-radio-button color="primary" value="empty">Empty</mat-radio-button>
+            <mat-radio-button value="copy">Copy</mat-radio-button>
+            <mat-radio-button value="empty">Empty</mat-radio-button>
         </mat-radio-group>
     </mat-dialog-content>
     <mat-dialog-actions align="end">
         <button mat-button mat-dialog-close>Cancel</button>
-        <button mat-button [disabled]="overridePolicyForm.invalid" (click)="overrideClicked()" color="primary">
-            Override
-        </button>
+        <button mat-flat-button [disabled]="overridePolicyForm.invalid" (click)="overrideClicked()">Override</button>
     </mat-dialog-actions>
 </form>

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/access-policies/ui/component-access-policies/component-access-policies.component.html

@@ -57,7 +57,7 @@
                                     </div>
                                 </div>
                             </form>
-                            <div class="accent-color font-medium my-2">
+                            <div class="tertiary-color font-medium my-2">
                                 <div>
                                     @switch (accessPolicyState.policyStatus) {
                                         @case (PolicyStatus.NotFound) {
@@ -90,15 +90,15 @@
                             <div class="flex gap-x-2">
                                 <button
                                     mat-icon-button
-                                    color="primary"
+                                    class="primary-icon-button"
                                     title="Add users/groups to this policy"
                                     [disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
                                     (click)="addTenantToPolicy()">
                                     <i class="fa fa-user-plus"></i>
                                 </button>
                                 <button
                                     mat-icon-button
-                                    color="primary"
+                                    class="primary-icon-button"
                                     title="Delete this policy"
                                     [disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
                                     (click)="deletePolicy()">
@@ -120,11 +120,11 @@
                     }
                     <div class="flex justify-between mt-2">
                         <div class="text-sm flex items-center gap-x-2">
-                            <button mat-icon-button color="primary" (click)="refreshGlobalAccessPolicy()">
+                            <button mat-icon-button class="primary-icon-button" (click)="refreshGlobalAccessPolicy()">
                                 <i class="fa fa-refresh" [class.fa-spin]="accessPolicyState.status === 'loading'"></i>
                             </button>
                             <div>Last updated:</div>
-                            <div class="accent-color font-medium">
+                            <div class="tertiary-color font-medium">
                                 {{ accessPolicyState.loadedTimestamp }}
                             </div>
                         </div>

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/access-policies/ui/global-access-policies/global-access-policies.component.html

@@ -79,7 +79,7 @@
                                 </div>
                             </div>
                         </form>
-                        <div class="accent-color font-medium my-2">
+                        <div class="tertiary-color font-medium my-2">
                             <div>
                                 @switch (accessPolicyState.policyStatus) {
                                     @case (PolicyStatus.NotFound) {
@@ -112,15 +112,15 @@
                         <div class="flex gap-x-2 items-center">
                             <button
                                 mat-icon-button
-                                color="primary"
+                                class="primary-icon-button"
                                 title="Add users/groups to this policy"
                                 [disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
                                 (click)="addTenantToPolicy()">
                                 <i class="fa fa-user-plus"></i>
                             </button>
                             <button
                                 mat-icon-button
-                                color="primary"
+                                class="primary-icon-button"
                                 title="Delete this policy"
                                 [disabled]="accessPolicyState.policyStatus !== PolicyStatus.Found"
                                 (click)="deletePolicy()">
@@ -142,11 +142,11 @@
                 }
                 <div class="flex justify-between mt-2">
                     <div class="text-sm flex items-center gap-x-2">
-                        <button mat-icon-button color="primary" (click)="refreshGlobalAccessPolicy()">
+                        <button mat-icon-button class="primary-icon-button" (click)="refreshGlobalAccessPolicy()">
                             <i class="fa fa-refresh" [class.fa-spin]="accessPolicyState.status === 'loading'"></i>
                         </button>
                         <div>Last updated:</div>
-                        <div class="accent-color font-medium">
+                        <div class="tertiary-color font-medium">
                             {{ accessPolicyState.loadedTimestamp }}
                         </div>
                     </div>

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component.ts

@@ -144,7 +144,7 @@ export class BulletinBoardList implements AfterViewInit {
     getSeverity(severity: string) {
         switch (severity.toLowerCase()) {
             case 'error':
-                return 'bulletin-error warn-color';
+                return 'bulletin-error error-color-darker';
             case 'warn':
             case 'warning':
                 return 'bulletin-warn caution-color';

nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board.component.html

@@ -30,18 +30,18 @@
             <div class="flex justify-between">
                 <div class="text-sm flex items-center gap-x-2">
                     <div class="mr-6">
-                        <mat-slide-toggle color="primary" [checked]="autoRefresh" (change)="autoRefreshToggle($event)"
+                        <mat-slide-toggle [checked]="autoRefresh" (change)="autoRefreshToggle($event)"
                             >Auto-refresh</mat-slide-toggle
                         >
                     </div>
                     <button
                         mat-icon-button
-                        color="primary"
+                        class="primary-icon-button"
                         (click)="refreshBulletinBoard(bulletinBoardState.lastBulletinId)">
                         <i class="fa fa-refresh" [class.fa-spin]="bulletinBoardState.status === 'loading'"></i>
                     </button>
                     <div>Last updated:</div>
-                    <div class="accent-color font-medium">
+                    <div class="tertiary-color font-medium">
                         {{ bulletinBoardState.loadedTimestamp }}
                     </div>
                 </div>