[NIFI-12655] theme NiFi following Material Design spec and leveraging Angular Material themes (#8294)

* [NIFI-12655] theme nifi following Material Design and leveraging Angular Material themes

* update accent palette usage to $nifi-canvas-accent-light-palette

* fix layout of create process group dialog

This closes #8294

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/pom.xml

@@ -30,6 +30,12 @@
         <node.version>v20.5.1</node.version>
         <frontend.source>${basedir}/src/main/nifi</frontend.source>
         <frontend.working.dir>${project.build.directory}/frontend-working-directory</frontend.working.dir>
+        <copy-rename-maven-plugin.version>1.0</copy-rename-maven-plugin.version>
+        <!--
+            String name of the theme file to be used.
+            Ex: 'purple' // will overwrite the nifi.scss theme file with the 'purple' theme.
+        -->
+        <frontend.theme>nifi</frontend.theme>
     </properties>
 
     <build>
@@ -85,6 +91,27 @@
                     </execution>
                 </executions>
             </plugin>
+            <plugin>
+                <groupId>com.coderplus.maven.plugins</groupId>
+                <artifactId>copy-rename-maven-plugin</artifactId>
+                <version>${copy-rename-maven-plugin.version}</version>
+                <executions>
+                    <!--
+                        Copy theme.
+                    -->
+                    <execution>
+                        <id>copy-theme</id>
+                        <phase>initialize</phase>
+                        <goals>
+                            <goal>copy</goal>
+                        </goals>
+                        <configuration>
+                            <sourceFile>${frontend.working.dir}/src/assets/themes/${frontend.theme}.scss</sourceFile>
+                            <destinationFile>${frontend.working.dir}/src/assets/themes/nifi.scss</destinationFile>
+                        </configuration>
+                    </execution>
+                </executions>
+            </plugin>
             <plugin>
                 <groupId>com.github.eirslett</groupId>
                 <artifactId>frontend-maven-plugin</artifactId>

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/_app.component-theme.scss

@@ -0,0 +1,34 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+
+    // Get hues from palette
+    $primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
+
+    .splash {
+        background-color: $primary-palette-500;
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/app.component.html

@@ -17,8 +17,10 @@
 
 <div class="splash h-screen p-20" *ngIf="guardLoading">
     <div class="splash-img h-full flex items-center justify-center">
-        <mat-spinner color="warn"></mat-spinner>
+        <mat-spinner color="primary"></mat-spinner>
     </div>
 </div>
 
-<router-outlet></router-outlet>
+<div class="mat-app-background">
+    <router-outlet></router-outlet>
+</div>

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/app.component.scss

@@ -16,8 +16,6 @@
  */
 
 .splash {
-    background-color: #7098ad;
-
     .splash-img {
         background: transparent url(../assets/icons/nifi-drop-splash.svg) no-repeat center center;
     }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/_access-policies.component-theme.scss

@@ -0,0 +1,34 @@
+/*!
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+
+    // Get hues from palette
+    $primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
+
+    .access-policies-header {
+        color: $primary-palette-500;
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/access-policies.component.scss

@@ -14,7 +14,3 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-
-.access-policies-header {
-    color: #728e9b;
-}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/_add-tenant-to-policy-dialog.component-theme.scss

@@ -0,0 +1,36 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+
+    // Get hues from palette
+    $primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400');
+
+    .add-tenant-to-policy-form {
+        .fa {
+            color: $primary-palette-A400;
+        }
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/add-tenant-to-policy-dialog.component.html

@@ -42,7 +42,7 @@
         </div>
     </mat-dialog-content>
     <mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
-        <button mat-raised-button mat-dialog-close color="accent">Cancel</button>
+        <button mat-stroked-button mat-dialog-close color="primary">Cancel</button>
         <button
             mat-raised-button
             [disabled]="addTenantsForm.invalid || saving.value"

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/add-tenant-to-policy-dialog.component.scss

@@ -20,10 +20,6 @@
 .add-tenant-to-policy-form {
     @include mat.button-density(-1);
 
-    .fa {
-        color: #004849;
-    }
-
     mat-selection-list {
         max-height: 250px;
         overflow: auto;

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/policy-table/policy-table.component.ts

@@ -37,7 +37,7 @@ export interface TenantItem {
     standalone: true,
     templateUrl: './policy-table.component.html',
     imports: [MatTableModule, MatSortModule, NgIf],
-    styleUrls: ['./policy-table.component.scss', '../../../../../../assets/styles/listing-table.scss']
+    styleUrls: ['./policy-table.component.scss']
 })
 export class PolicyTable {
     displayedColumns: string[] = ['user', 'actions'];

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/_component-access-policies.component-theme.scss

@@ -0,0 +1,51 @@
+/*!
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($material-theme, $canvas-theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($material-theme);
+    $canvas-color-config: mat.get-color-config($canvas-theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+    $warn-palette: map.get($color-config, 'warn');
+    $canvas-primary-palette: map.get($canvas-color-config, 'primary');
+
+    // Get hues from palette
+    $primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
+    $warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200');
+    $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200');
+
+    .component-access-policies {
+        .operation-context-logo {
+            .icon {
+                color: $warn-palette-A200;
+            }
+        }
+
+        .operation-context-name {
+            color: $canvas-primary-palette-A200;
+        }
+
+        .operation-context-type {
+            color: $primary-palette-500;
+        }
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/component-access-policies.component.scss

@@ -29,20 +29,14 @@
     .operation-context-logo {
         .icon {
             font-size: 36px;
-            color: #ad9897;
         }
     }
 
     .operation-context-name {
         font-size: 18px;
-        color: #262626;
         width: 370px;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
     }
-
-    .operation-context-type {
-        color: #728e9b;
-    }
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/_bulletins.component-theme.scss

@@ -0,0 +1,34 @@
+/*!
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+
+    // Get hues from palette
+    $primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
+
+    .bulletin-board-header {
+        color: $primary-palette-500;
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/bulletins.component.scss

@@ -14,7 +14,3 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-
-.bulletin-board-header {
-    color: #728e9b;
-}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board-list/_bulletin-board-list.component-theme.scss

@@ -0,0 +1,46 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($material-theme, $canvas-theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($material-theme);
+    $canvas-color-config: mat.get-color-config($canvas-theme);
+
+    // Get the color palette from the color-config.
+    $warn-palette: map.get($color-config, 'warn');
+    $canvas-accent-palette: map.get($canvas-color-config, 'accent');
+
+    // Get hues from palette
+    $canvas-accent-palette-700: mat.get-color-from-palette($canvas-accent-palette, 700);
+    $canvas-accent-palette-A400: mat.get-color-from-palette($canvas-accent-palette, 'A400');
+    $warn-palette-600: mat.get-color-from-palette($warn-palette, 600);
+
+    .bulletin-error {
+        color: $warn-palette-600;
+    }
+
+    .bulletin-warn {
+        color: $canvas-accent-palette-A400;
+    }
+
+    .bulletin-normal {
+        color: $canvas-accent-palette-700;
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component.scss

@@ -15,18 +15,6 @@
  * limitations under the License.
  */
 
-.bulletin-error {
-    color: #ec3030;
-}
-
-.bulletin-warn {
-    color: #bda500;
-}
-
-.bulletin-normal {
-    color: #016131;
-}
-
 .link {
     font-size: 16px;
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/_counters.component-theme.scss

@@ -0,0 +1,34 @@
+/*!
+ *  Licensed to the Apache Software Foundation (ASF) under one or more
+ *  contributor license agreements.  See the NOTICE file distributed with
+ *  this work for additional information regarding copyright ownership.
+ *  The ASF licenses this file to You under the Apache License, Version 2.0
+ *  (the "License"); you may not use this file except in compliance with
+ *  the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+
+    // Get hues from palette
+    $primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
+
+    .counter-header {
+        color: $primary-palette-500;
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/counters.component.scss

@@ -1,4 +1,4 @@
-/*!
+/*
  * Licensed to the Apache Software Foundation (ASF) under one or more
  * contributor license agreements.  See the NOTICE file distributed with
  * this work for additional information regarding copyright ownership.
@@ -14,7 +14,3 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-.counter-header {
-    color: #728e9b;
-}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/ui/counter-listing/counter-table/counter-table.component.ts

@@ -26,7 +26,7 @@ import { NiFiCommon } from '../../../../../service/nifi-common.service';
 @Component({
     selector: 'counter-table',
     templateUrl: './counter-table.component.html',
-    styleUrls: ['./counter-table.component.scss', '../../../../../../assets/styles/listing-table.scss']
+    styleUrls: ['./counter-table.component.scss']
 })
 export class CounterTable implements AfterViewInit {
     private _canModifyCounters: boolean = false;

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts

@@ -1229,11 +1229,11 @@ export class CanvasUtils {
                     const bBox = activeThreadCount.node().getBBox();
                     return d.dimensions.width - bBox.width - 20;
                 })
-                .style('fill', function () {
+                .attr('class', function () {
                     if (terminatedThreads > 0) {
-                        return '#ba554a';
+                        return `active-thread-count-icon warn-400`;
                     } else {
-                        return '#728e9b';
+                        return `active-thread-count-icon primary-500`;
                     }
                 })
                 .style('display', 'block')

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/connection-manager.service.ts

@@ -1432,18 +1432,18 @@ export class ConnectionManager {
                     // update the coloring of the backgrounds
                     backgrounds.forEach((background, i) => {
                         if (i % 2 === 0) {
-                            background.attr('fill', '#f4f6f7');
+                            background.attr('class', 'primary-contrast-800');
                         } else {
-                            background.attr('fill', '#ffffff');
+                            background.attr('class', 'primary-contrast-900');
                         }
                     });
 
                     // update the coloring of the label borders
                     borders.forEach((border, i) => {
                         if (i > 0) {
-                            border.attr('fill', '#c7d2d7');
+                            border.attr('class', 'primary-200');
                         } else {
-                            border.attr('fill', 'transparent');
+                            border.attr('class', 'transparent');
                         }
                     });
 

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.ts

@@ -151,7 +151,6 @@ export class PortManager {
             .attr('class', 'remote-banner')
             .attr('width', this.remotePortDimensions.width)
             .attr('height', PortManager.OFFSET_VALUE)
-            .attr('fill', '#e3e8eb')
             .classed('hidden', this.isLocalPort);
 
         // port icon
@@ -386,18 +385,18 @@ export class PortManager {
         // update the run status
         updated
             .select('text.run-status-icon')
-            .attr('fill', function (d: any) {
+            .attr('class', function (d: any) {
-                let fill: string = '#728e9b';
+                let clazz: string = 'primary-500';
 
                 if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
-                    fill = '#cf9f5d';
+                    clazz = 'canvas-accent-A200';
                 } else if (d.status.aggregateSnapshot.runStatus === 'Running') {
-                    fill = '#7dc7a0';
+                    clazz = 'canvas-accent-200';
                 } else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
-                    fill = '#d18686';
+                    clazz = 'warn-200';
                 }
 
-                return fill;
+                return `run-status-icon ${clazz}`;
             })
             .attr('font-family', function (d: any) {
                 let family: string = 'FontAwesome';

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts

@@ -121,11 +121,11 @@ export class ProcessGroupManager {
         // process group name background
         processGroup
             .append('rect')
+            .attr('class', 'process-group-banner')
             .attr('width', function (d: any) {
                 return d.dimensions.width;
             })
-            .attr('height', 32)
+            .attr('height', 32);
-            .attr('fill', '#b8c6cd');
 
         // process group name
         processGroup
@@ -227,16 +227,17 @@ export class ProcessGroupManager {
 
                     details
                         .append('rect')
+                        .attr('class', 'process-group-details-banner')
                         .attr('x', 0)
                         .attr('y', 32)
                         .attr('width', function () {
                             return processGroupData.dimensions.width;
                         })
-                        .attr('height', 24)
+                        .attr('height', 24);
-                        .attr('fill', '#e3e8eb');
 
                     details
                         .append('rect')
+                        .attr('class', 'process-group-details-banner')
                         .attr('x', 0)
                         .attr('y', function () {
                             return processGroupData.dimensions.height - 24;
@@ -244,8 +245,7 @@ export class ProcessGroupManager {
                         .attr('width', function () {
                             return processGroupData.dimensions.width;
                         })
-                        .attr('height', 24)
+                        .attr('height', 24);
-                        .attr('fill', '#e3e8eb');
 
                     // --------
                     // contents
@@ -456,79 +456,79 @@ export class ProcessGroupManager {
                     // queued
                     details
                         .append('rect')
+                        .attr('class', 'process-group-queued-stats')
                         .attr('width', function () {
                             return processGroupData.dimensions.width;
                         })
                         .attr('height', 19)
                         .attr('x', 0)
-                        .attr('y', 66)
+                        .attr('y', 66);
-                        .attr('fill', '#f4f6f7');
 
                     // border
                     details
                         .append('rect')
+                        .attr('class', 'process-group-stats-border')
                         .attr('width', function () {
                             return processGroupData.dimensions.width;
                         })
                         .attr('height', 1)
                         .attr('x', 0)
-                        .attr('y', 84)
+                        .attr('y', 84);
-                        .attr('fill', '#c7d2d7');
 
                     // in
                     details
                         .append('rect')
+                        .attr('class', 'process-group-stats-in-out')
                         .attr('width', function () {
                             return processGroupData.dimensions.width;
                         })
                         .attr('height', 19)
                         .attr('x', 0)
-                        .attr('y', 85)
+                        .attr('y', 85);
-                        .attr('fill', '#ffffff');
 
                     // border
                     details
                         .append('rect')
+                        .attr('class', 'process-group-stats-border')
                         .attr('width', function () {
                             return processGroupData.dimensions.width;
                         })
                         .attr('height', 1)
                         .attr('x', 0)
-                        .attr('y', 103)
+                        .attr('y', 103);
-                        .attr('fill', '#c7d2d7');
 
                     // read/write
                     details
                         .append('rect')
+                        .attr('class', 'process-group-read-write-stats')
                         .attr('width', function () {
                             return processGroupData.dimensions.width;
                         })
                         .attr('height', 19)
                         .attr('x', 0)
-                        .attr('y', 104)
+                        .attr('y', 104);
-                        .attr('fill', '#f4f6f7');
 
                     // border
                     details
                         .append('rect')
+                        .attr('class', 'process-group-stats-border')
                         .attr('width', function () {
                             return processGroupData.dimensions.width;
                         })
                         .attr('height', 1)
                         .attr('x', 0)
-                        .attr('y', 122)
+                        .attr('y', 122);
-                        .attr('fill', '#c7d2d7');
 
                     // out
                     details
                         .append('rect')
+                        .attr('class', 'process-group-stats-in-out')
                         .attr('width', function () {
                             return processGroupData.dimensions.width;
                         })
                         .attr('height', 19)
                         .attr('x', 0)
-                        .attr('y', 123)
+                        .attr('y', 123);
-                        .attr('fill', '#ffffff');
 
                     // -----
                     // stats
@@ -1075,22 +1075,22 @@ export class ProcessGroupManager {
                 const versionControl = processGroup
                     .select('text.version-control')
                     .style('visibility', self.isUnderVersionControl(processGroupData) ? 'visible' : 'hidden')
-                    .style('fill', function () {
+                    .attr('class', function () {
                         if (self.isUnderVersionControl(processGroupData)) {
                             const vciState = processGroupData.versionedFlowState;
                             if (vciState === 'SYNC_FAILURE') {
-                                return '#666666';
+                                return `version-control primary-contrast-A700`;
                             } else if (vciState === 'LOCALLY_MODIFIED_AND_STALE') {
-                                return '#BA554A';
+                                return `version-control warn-400`;
                             } else if (vciState === 'STALE') {
-                                return '#BA554A';
+                                return `version-control warn-400`;
                             } else if (vciState === 'LOCALLY_MODIFIED') {
-                                return '#666666';
+                                return `version-control primary-contrast-A700`;
                             } else {
-                                return '#1A9964';
+                                return `version-control canvas-accent-600`;
                             }
                         } else {
-                            return '#000';
+                            return 'version-control primary-contrast-200';
                         }
                     })
                     .text(function () {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts

@@ -228,79 +228,79 @@ export class ProcessorManager {
                     // in
                     details
                         .append('rect')
+                        .attr('class', 'processor-stats-in-out')
                         .attr('width', function () {
                             return processorData.dimensions.width;
                         })
                         .attr('height', 19)
                         .attr('x', 0)
-                        .attr('y', 50)
+                        .attr('y', 50);
-                        .attr('fill', '#f4f6f7');
 
                     // border
                     details
                         .append('rect')
+                        .attr('class', 'processor-stats-border')
                         .attr('width', function () {
                             return processorData.dimensions.width;
                         })
                         .attr('height', 1)
                         .attr('x', 0)
-                        .attr('y', 68)
+                        .attr('y', 68);
-                        .attr('fill', '#c7d2d7');
 
                     // read/write
                     details
                         .append('rect')
+                        .attr('class', 'processor-read-write-stats')
                         .attr('width', function () {
                             return processorData.dimensions.width;
                         })
                         .attr('height', 19)
                         .attr('x', 0)
-                        .attr('y', 69)
+                        .attr('y', 69);
-                        .attr('fill', '#ffffff');
 
                     // border
                     details
                         .append('rect')
+                        .attr('class', 'processor-stats-border')
                         .attr('width', function () {
                             return processorData.dimensions.width;
                         })
                         .attr('height', 1)
                         .attr('x', 0)
-                        .attr('y', 87)
+                        .attr('y', 87);
-                        .attr('fill', '#c7d2d7');
 
                     // out
                     details
                         .append('rect')
+                        .attr('class', 'processor-stats-in-out')
                         .attr('width', function () {
                             return processorData.dimensions.width;
                         })
                         .attr('height', 20)
                         .attr('x', 0)
-                        .attr('y', 88)
+                        .attr('y', 88);
-                        .attr('fill', '#f4f6f7');
 
                     // border
                     details
                         .append('rect')
+                        .attr('class', 'processor-stats-border')
                         .attr('width', function () {
                             return processorData.dimensions.width;
                         })
                         .attr('height', 1)
                         .attr('x', 0)
-                        .attr('y', 106)
+                        .attr('y', 106);
-                        .attr('fill', '#c7d2d7');
 
                     // tasks/time
                     details
                         .append('rect')
+                        .attr('class', 'processor-read-write-stats')
                         .attr('width', function () {
                             return processorData.dimensions.width;
                         })
                         .attr('height', 19)
                         .attr('x', 0)
-                        .attr('y', 107)
+                        .attr('y', 107);
-                        .attr('fill', '#ffffff');
 
                     // stats label container
                     const processorStatsLabel = details.append('g').attr('transform', 'translate(10, 55)');
@@ -669,20 +669,20 @@ export class ProcessorManager {
         // update the run status
         updated
             .select('text.run-status-icon')
-            .attr('fill', function (d: any) {
+            .attr('class', function (d: any) {
-                let fill: string = '#728e9b';
+                let clazz: string = 'primary-500';
 
                 if (d.status.aggregateSnapshot.runStatus === 'Validating') {
-                    fill = '#a8a8a8';
+                    clazz = 'warn-contrast-300';
                 } else if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
-                    fill = '#cf9f5d';
+                    clazz = 'canvas-accent-A400';
                 } else if (d.status.aggregateSnapshot.runStatus === 'Running') {
-                    fill = '#7dc7a0';
+                    clazz = 'canvas-accent-200';
                 } else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
-                    fill = '#d18686';
+                    clazz = 'warn-200';
                 }
 
-                return fill;
+                return `run-status-icon ${clazz}`;
             })
             .attr('font-family', function (d: any) {
                 let family: string = 'FontAwesome';

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/remote-process-group-manager.service.ts

@@ -120,11 +120,11 @@ export class RemoteProcessGroupManager {
         // remote process group name background
         remoteProcessGroup
             .append('rect')
+            .attr('class', 'remote-process-group-banner')
             .attr('width', function (d: any) {
                 return d.dimensions.width;
             })
-            .attr('height', 32)
+            .attr('height', 32);
-            .attr('fill', '#b8c6cd');
 
         // remote process group name
         remoteProcessGroup
@@ -182,13 +182,13 @@ export class RemoteProcessGroupManager {
 
                     details
                         .append('rect')
+                        .attr('class', 'remote-process-group-details-banner')
                         .attr('x', 0)
                         .attr('y', 32)
                         .attr('width', function () {
                             return remoteProcessGroupData.dimensions.width;
                         })
-                        .attr('height', 24)
+                        .attr('height', 24);
-                        .attr('fill', '#e3e8eb');
 
                     // -------
                     // details
@@ -217,35 +217,35 @@ export class RemoteProcessGroupManager {
                     // sent
                     details
                         .append('rect')
+                        .attr('class', 'remote-process-group-sent-stats')
                         .attr('width', function () {
                             return remoteProcessGroupData.dimensions.width;
                         })
                         .attr('height', 19)
                         .attr('x', 0)
-                        .attr('y', 66)
+                        .attr('y', 66);
-                        .attr('fill', '#f4f6f7');
 
                     // border
                     details
                         .append('rect')
+                        .attr('class', 'remote-process-group-stats-border')
                         .attr('width', function () {
                             return remoteProcessGroupData.dimensions.width;
                         })
                         .attr('height', 1)
                         .attr('x', 0)
-                        .attr('y', 84)
+                        .attr('y', 84);
-                        .attr('fill', '#c7d2d7');
 
                     // received
                     details
                         .append('rect')
+                        .attr('class', 'remote-process-group-received-stats')
                         .attr('width', function () {
                             return remoteProcessGroupData.dimensions.width;
                         })
                         .attr('height', 19)
                         .attr('x', 0)
-                        .attr('y', 85)
+                        .attr('y', 85);
-                        .attr('fill', '#ffffff');
 
                     // -----
                     // stats
@@ -342,6 +342,7 @@ export class RemoteProcessGroupManager {
 
                     details
                         .append('rect')
+                        .attr('class', 'remote-process-group-last-refresh-rect')
                         .attr('x', 0)
                         .attr('y', function () {
                             return remoteProcessGroupData.dimensions.height - 24;
@@ -349,8 +350,7 @@ export class RemoteProcessGroupManager {
                         .attr('width', function () {
                             return remoteProcessGroupData.dimensions.width;
                         })
-                        .attr('height', 24)
+                        .attr('height', 24);
-                        .attr('fill', '#e3e8eb');
 
                     details
                         .append('text')

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss

@@ -0,0 +1,537 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($material-theme, $canvas-theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($material-theme);
+    $canvas-color-config: mat.get-color-config($canvas-theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+    $warn-palette: map.get($color-config, 'warn');
+    $canvas-primary-palette: map.get($canvas-color-config, 'primary');
+    $canvas-accent-palette: map.get($canvas-color-config, 'accent');
+
+    // Get hues from palette
+    $primary-palette-100: mat.get-color-from-palette($primary-palette, 100);
+    $primary-palette-200: mat.get-color-from-palette($primary-palette, 200);
+    $primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
+    $primary-palette-A200: mat.get-color-from-palette($primary-palette, 'A200');
+    $primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400');
+    $canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50);
+    $canvas-primary-palette-200: mat.get-color-from-palette($canvas-primary-palette, 200);
+    $canvas-primary-palette-300: mat.get-color-from-palette($canvas-primary-palette, 300);
+    $canvas-primary-palette-400: mat.get-color-from-palette($canvas-primary-palette, 400);
+    $canvas-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500);
+    $canvas-primary-palette-600: mat.get-color-from-palette($canvas-primary-palette, 600);
+    $canvas-primary-palette-700: mat.get-color-from-palette($canvas-primary-palette, 700);
+    $canvas-primary-palette-800: mat.get-color-from-palette($canvas-primary-palette, 800);
+    $canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900);
+    $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200');
+    $canvas-primary-palette-A400: mat.get-color-from-palette($canvas-primary-palette, 'A400');
+    $canvas-primary-palette-A700: mat.get-color-from-palette($canvas-primary-palette, 'A700');
+    $canvas-accent-palette-200: mat.get-color-from-palette($canvas-accent-palette, 200);
+    $canvas-accent-palette-300: mat.get-color-from-palette($canvas-accent-palette, 300);
+    $canvas-accent-palette-600: mat.get-color-from-palette($canvas-accent-palette, 600);
+    $canvas-accent-palette-800: mat.get-color-from-palette($canvas-accent-palette, 800);
+    $canvas-accent-palette-900: mat.get-color-from-palette($canvas-accent-palette, 900);
+    $canvas-accent-palette-A200: mat.get-color-from-palette($canvas-accent-palette, 'A200');
+    $canvas-accent-palette-A400: mat.get-color-from-palette($canvas-accent-palette, 'A400');
+    $canvas-accent-palette-A700: mat.get-color-from-palette($canvas-accent-palette, 'A700');
+    $warn-palette-200: mat.get-color-from-palette($warn-palette, 200);
+    $warn-palette-400: mat.get-color-from-palette($warn-palette, 400);
+    $warn-palette-800: mat.get-color-from-palette($warn-palette, 800);
+    $warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200');
+    $warn-palette-A400: mat.get-color-from-palette($warn-palette, 'A400');
+    $warn-palette-A700: mat.get-color-from-palette($warn-palette, 'A700');
+
+    .canvas-background {
+        background-color: $canvas-primary-palette-600;
+        background-image: linear-gradient(to right, $canvas-primary-palette-700 1px, transparent 1px),
+        linear-gradient(to bottom, $canvas-primary-palette-700 1px, transparent 1px);
+    }
+
+    /* svg styles */
+
+    svg.canvas-svg {
+        text.unset {
+            fill: $canvas-primary-palette-400;
+        }
+
+        /*
+          All components
+      */
+        .transparent {
+            fill: transparent
+        }
+
+        .warn-200 {
+            fill: $warn-palette-200;
+        }
+
+        .warn-400 {
+            fill: $warn-palette-400;
+        }
+
+        .warn-A700 {
+            fill: $warn-palette-A700;
+        }
+
+        .warn-contrast-300 {
+            fill: $canvas-primary-palette-400;
+        }
+
+        .canvas-accent-200 {
+            fill: $canvas-accent-palette-200;
+        }
+
+        .canvas-accent-600 {
+            fill: $canvas-accent-palette-600;
+        }
+
+        .canvas-accent-A200 {
+            fill: $canvas-accent-palette-A200;
+        }
+
+        .canvas-accent-A400 {
+            fill: $canvas-accent-palette-A400;
+        }
+
+        .primary-200 {
+            fill: $primary-palette-200;
+        }
+
+        .primary-500 {
+            fill: $primary-palette-500;
+        }
+
+        .primary-contrast-200 {
+            fill: $canvas-primary-palette-200;
+        }
+
+        .primary-contrast-300 {
+            fill: $canvas-primary-palette-300;
+        }
+
+        .primary-contrast-800 {
+            fill: $canvas-primary-palette-800;
+        }
+
+        .primary-contrast-900 {
+            fill: $canvas-primary-palette-900;
+        }
+
+        .primary-contrast-A700 {
+            fill: $canvas-primary-palette-A700;
+        }
+
+        g.component rect.body {
+            fill: $canvas-primary-palette-900;
+        }
+
+        g.component rect.body.unauthorized {
+            fill: $canvas-primary-palette-700;
+        }
+
+        g.component rect.border {
+            stroke: $canvas-primary-palette-50;
+        }
+
+        g.component rect.border.unauthorized {
+            stroke: $warn-palette-400 !important;
+        }
+
+        g.component rect.border.ghost {
+            stroke: $canvas-primary-palette-400 !important;
+        }
+
+        g.component rect.processor-icon-container.unauthorized {
+            fill: $canvas-primary-palette-700 !important;
+        }
+
+        g.component.selected rect.border {
+            stroke: $primary-palette-A400 !important;
+        }
+
+        text.stats-label {
+            fill: $canvas-primary-palette-A200;
+        }
+
+        text.stats-value {
+            fill: $warn-palette-A400;
+        }
+
+        text.stats-info {
+            fill: $primary-palette-500;
+        }
+
+        text.bulletin-icon {
+            fill: $canvas-primary-palette-900;
+        }
+
+        rect.bulletin-background {
+            fill: $warn-palette-400;
+        }
+
+        text.active-thread-count-icon {
+            fill: $primary-palette-500;
+        }
+
+        text.active-thread-count {
+            fill: $warn-palette-A400;
+        }
+
+        path.component-comments {
+            fill: $canvas-primary-palette-50;
+            stroke: $canvas-primary-palette-50;
+        }
+
+        /*
+          Selection
+      */
+
+        g.component.connectable-destination rect.border {
+            stroke: $canvas-accent-palette-900;
+        }
+
+        rect.component-selection,
+        rect.drag-selection,
+        rect.label-drag {
+            stroke: $canvas-primary-palette-A400;
+            fill: transparent;
+        }
+
+        text.add-connect {
+            fill: $primary-palette-A400;
+        }
+
+        /*
+          Processor
+      */
+        #component-drop-shadow feFlood {
+            flood-color: $canvas-primary-palette-200;
+        }
+
+        #connection-full-drop-shadow feFlood {
+            flood-color: $warn-palette-400;
+        }
+
+        rect.processor-read-write-stats {
+            fill: $canvas-primary-palette-900;
+        }
+
+        rect.processor-stats-border {
+            fill: $primary-palette-200;
+        }
+
+        rect.processor-stats-in-out {
+            fill: $canvas-primary-palette-800;
+        }
+
+        text.processor-name {
+            fill: $canvas-primary-palette-A200;
+        }
+
+        text.processor-type {
+            fill: $primary-palette-500;
+        }
+
+        text.processor-bundle {
+            fill: $canvas-primary-palette-A700;
+        }
+
+        rect.processor-icon-container {
+            fill: $canvas-primary-palette-900;
+        }
+
+        circle.restricted-background,
+        circle.is-primary-background {
+            fill: $canvas-primary-palette-900;
+        }
+
+        text.restricted {
+            fill: $warn-palette-400;
+        }
+
+        /*
+          Connection
+      */
+
+        g.connection rect.body {
+            fill: $canvas-primary-palette-900;
+        }
+
+        g.connection rect.body.unauthorized {
+            fill: $canvas-primary-palette-700;
+        }
+
+        g.connection rect.border.unauthorized {
+            stroke: $warn-palette-400;
+        }
+
+        g.connection rect.border.full {
+            stroke: $warn-palette-A700;
+        }
+
+        g.connection.selected rect.border {
+            stroke: $canvas-accent-palette-A700;
+        }
+
+        path.connector {
+            stroke: $warn-palette-800;
+        }
+
+        path.connector.connectable {
+            stroke: $canvas-accent-palette-900;
+        }
+
+        g.connection path.connection-path {
+            fill: none;
+            stroke: $canvas-primary-palette-50;
+        }
+
+        g.connection path.connection-path.full {
+            stroke: $warn-palette-400;
+        }
+
+        g.connection path.connection-path.unauthorized {
+            stroke: $warn-palette-400;
+        }
+
+        text.connection-from-run-status,
+        text.connection-to-run-status,
+        text.expiration-icon,
+        text.load-balance-icon,
+        text.penalized-icon {
+            fill: $primary-palette-500;
+            text-shadow: 0 0 4px $canvas-primary-palette-900;
+        }
+
+        text.load-balance-icon-active {
+            fill: $primary-palette-A200;
+        }
+
+        text.connection-from-run-status.is-missing-port,
+        text.connection-to-run-status.is-missing-port {
+            fill: $canvas-accent-palette-A200;
+        }
+
+        g.connection rect.backpressure-tick {
+            fill: transparent;
+        }
+
+        g.connection rect.backpressure-tick.data-size-prediction.prediction-down,
+        g.connection rect.backpressure-tick.object-prediction.prediction-down {
+            fill: $canvas-primary-palette-900;
+        }
+
+        g.connection rect.backpressure-tick.data-size-prediction,
+        g.connection rect.backpressure-tick.object-prediction {
+            fill: $canvas-primary-palette-50;
+        }
+
+        g.connection rect.backpressure-tick.data-size-prediction.not-configured,
+        g.connection rect.backpressure-tick.object-prediction.not-configured,
+        g.connection rect.backpressure-tick.data-size-prediction.prediction-down.not-configured,
+        g.connection rect.backpressure-tick.object-prediction.prediction-down.not-configured {
+            fill: transparent;
+        }
+
+        g.connection rect.backpressure-tick.not-configured {
+            fill: $canvas-primary-palette-400;
+        }
+
+        g.connection rect.backpressure-object,
+        g.connection rect.backpressure-data-size {
+            fill: $canvas-primary-palette-500
+        }
+
+        g.connection rect.backpressure-object.not-configured,
+        g.connection rect.backpressure-data-size.not-configured {
+            fill: transparent;
+        }
+
+        g.connection rect.backpressure-percent {
+            fill: $canvas-accent-palette-300;
+        }
+
+        g.connection rect.backpressure-percent.warning {
+            fill: $canvas-accent-palette-A400;
+        }
+
+        g.connection rect.backpressure-percent.error {
+            fill: $warn-palette-400;
+        }
+
+        /* ghost connection */
+
+        g.connection.ghost path.connection-path,
+        g.connection.ghost rect.connection-label {
+            stroke: $canvas-primary-palette-400;
+        }
+
+        g.connection path.connection-selection-path {
+            stroke: $canvas-accent-palette-A700;
+            fill: none;
+        }
+
+        g.connection path.connection-path-selectable {
+            fill: none;
+        }
+
+        g.connection rect.startpoint {
+            stroke: $warn-palette-800;
+            fill: $warn-palette-800;
+        }
+
+        g.connection rect.midpoint {
+            stroke: $canvas-accent-palette-A700;
+            fill: $canvas-accent-palette-A700;
+        }
+
+        g.connection rect.endpoint {
+            stroke: $canvas-accent-palette-800;
+            fill: $canvas-accent-palette-800;
+        }
+
+        /* labels */
+
+        g.label rect.labelpoint {
+            stroke: $canvas-accent-palette-A700;
+            fill: $canvas-accent-palette-A700;
+        }
+
+        /* funnels */
+
+        text.funnel-icon {
+            fill: $warn-palette-A200;
+        }
+
+        /* ports */
+
+        text.port-name {
+            fill: $canvas-primary-palette-A200;
+        }
+
+        text.port-icon {
+            fill: $warn-palette-A200;
+        }
+
+        rect.remote-banner {
+            fill: $primary-palette-100;
+        }
+
+        text.port-transmission-icon {
+            fill: $primary-palette-500;
+        }
+
+        /* process groups */
+
+        rect.process-group-stats-in-out {
+            fill: $canvas-primary-palette-900;
+        }
+
+        rect.process-group-stats-border {
+            fill: $primary-palette-200;
+        }
+
+        rect.process-group-queued-stats {
+            fill: $canvas-primary-palette-800;
+        }
+
+        rect.process-group-read-write-stats {
+            fill: $canvas-primary-palette-800;
+        }
+
+        rect.process-group-details-banner {
+            fill: $primary-palette-100;
+        }
+
+        text.process-group-name {
+            fill: $canvas-primary-palette-A200;
+        }
+
+        text.version-control {
+            text-shadow: 0 0 4px $canvas-primary-palette-900;
+        }
+
+        rect.process-group-banner {
+            fill: $primary-palette-200;
+        }
+
+        text.process-group-contents-count {
+            fill: $warn-palette-A400;
+        }
+
+        g.process-group.drop rect.border {
+            stroke: $canvas-accent-palette-800;
+        }
+
+        text.process-group-contents-icon {
+            fill: $primary-palette-500;
+        }
+
+        /* remote process group */
+
+        rect.remote-process-group-stats-border {
+            fill: $primary-palette-200;
+        }
+
+        rect.remote-process-group-sent-stats {
+            fill: $canvas-primary-palette-800;
+        }
+
+        rect.remote-process-group-received-stats {
+            fill: $canvas-primary-palette-900;
+        }
+
+        rect.remote-process-group-details-banner {
+            fill: $primary-palette-100;
+        }
+
+        rect.remote-process-group-last-refresh-rect {
+            fill: $primary-palette-100;
+        }
+
+        text.remote-process-group-name {
+            fill: $canvas-primary-palette-A200;
+        }
+
+        text.remote-process-group-uri {
+            fill: $primary-palette-A400;
+        }
+
+        rect.remote-process-group-banner {
+            fill: $primary-palette-200;
+        }
+
+        text.remote-process-group-transmission-status {
+            fill: $primary-palette-500;
+        }
+
+        text.remote-process-group-transmission-secure {
+            fill: $primary-palette-A400;
+        }
+
+        text.remote-process-group-last-refresh {
+            fill: $primary-palette-500;
+        }
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.scss

@@ -16,10 +16,7 @@
  */
 
 .canvas-background {
-    background-color: #f9fafb;
     background-size: 14px 14px;
-    background-image: linear-gradient(to right, rgba(229, 235, 237, 1) 1px, transparent 1px),
-        linear-gradient(to bottom, rgba(229, 235, 237, 1) 1px, transparent 1px);
     z-index: 1;
     overflow: hidden;
 }
@@ -36,7 +33,6 @@
     text.unset {
         font-style: italic;
         font-weight: normal;
-        fill: #aaa;
     }
 
     .moveable {
@@ -51,48 +47,30 @@
         font-family: Roboto;
     }
 
-    g.component rect.body {
-        fill: #ffffff;
-    }
-
-    g.component rect.body.unauthorized {
-        fill: #f4f6f7;
-    }
-
     g.component rect.border {
-        stroke: rgba(0, 0, 0, 0.25);
         stroke-width: 1;
     }
 
     g.component rect.border.unauthorized {
         stroke-width: 3;
-        stroke: #ba554a !important;
         stroke-dasharray: 4;
     }
 
     g.component rect.border.ghost {
         stroke-width: 3;
-        stroke: #aaaaaa !important;
         stroke-dasharray: 4;
     }
 
-    g.component rect.processor-icon-container.unauthorized {
-        fill: #f4f6f7 !important;
-    }
-
     g.component.selected rect.border {
-        stroke: #004849 !important;
         stroke-width: 3;
     }
 
     text.stats-label {
-        fill: #262626;
         font-size: 12px;
         font-family: Roboto Slab;
     }
 
     text.stats-value {
-        fill: #775351;
         font-size: 12px;
         font-weight: bold;
     }
@@ -104,38 +82,25 @@
     }
 
     text.stats-info {
-        fill: #728e9b;
         font-size: 12px;
     }
 
     text.bulletin-icon {
         font-size: 13px;
         font-family: FontAwesome;
-        fill: #ffffff;
-    }
-
-    rect.bulletin-background {
-        fill: #ba554a;
     }
 
     text.active-thread-count-icon {
         font-family: flowfont;
         font-size: 12px;
-        fill: #728e9b;
         text-anchor: end;
     }
 
     text.active-thread-count {
-        fill: #775351;
         font-size: 12px;
         font-weight: bold;
     }
 
-    path.component-comments {
-        fill: #000;
-        stroke: #000;
-    }
-
     text.spin {
         -webkit-animation-name: rotate;
         -webkit-animation-duration: 2s;
@@ -183,23 +148,19 @@
   */
 
     g.component.connectable-destination rect.border {
-        stroke: #00ff00;
         stroke-width: 3;
     }
 
     rect.component-selection,
     rect.drag-selection,
     rect.label-drag {
-        stroke: #444444;
         stroke-opacity: 0.5;
-        fill: transparent;
     }
 
     text.add-connect {
         cursor: pointer;
         font-family: flowfont;
         font-size: 28px;
-        fill: #004849;
     }
 
     /*
@@ -207,24 +168,17 @@
   */
 
     text.processor-name {
-        fill: #262626;
         font-size: 14px;
     }
 
     text.processor-type {
-        fill: #728e9b;
         font-size: 12px;
     }
 
     text.processor-bundle {
-        fill: #666;
         font-size: 10px;
     }
 
-    rect.processor-icon-container {
-        fill: #ffffff;
-    }
-
     text.processor-icon {
         font-family: flowfont;
         font-size: 30px;
@@ -233,14 +187,12 @@
     circle.restricted-background,
     circle.is-primary-background {
         visibility: hidden;
-        fill: rgba(255, 255, 255, 0.9);
     }
 
     text.restricted {
         visibility: hidden;
         font-family: FontAwesome;
         font-size: 12px;
-        fill: #ba554a;
     }
 
     text.is-primary {
@@ -262,59 +214,38 @@
         font-family: Roboto;
     }
 
-    g.connection rect.body {
-        fill: #ffffff;
-    }
-
-    g.connection rect.body.unauthorized {
-        fill: #f4f6f7;
-    }
-
     g.connection rect.border.unauthorized {
         stroke-width: 1.5;
-        stroke: #ba554a;
         stroke-dasharray: 3, 3;
     }
 
     g.connection rect.border.full {
-        stroke: rgba(186, 85, 74, 0.65);
         stroke-width: 1;
     }
 
     g.connection.selected rect.border {
-        /*stroke: #004849;*/
-        stroke: #ffcc00;
         stroke-width: 3;
     }
 
     path.connector {
         fill: none;
         pointer-events: none;
-        stroke: #ff0000;
         stroke-width: 3;
         stroke-opacity: 0.5;
         stroke-dasharray: 2;
     }
 
     path.connector.connectable {
-        stroke: #00ff00;
         stroke-width: 3;
         stroke-dasharray: 4;
     }
 
     g.connection path.connection-path {
-        fill: none;
-        stroke: #000000;
         stroke-width: 2;
         cursor: pointer;
     }
 
-    g.connection path.connection-path.full {
-        stroke: #ba554a;
-    }
-
     g.connection path.connection-path.unauthorized {
-        stroke: #ba554a;
         stroke-dasharray: 3, 3;
     }
 
@@ -323,14 +254,8 @@
     text.expiration-icon,
     text.load-balance-icon,
     text.penalized-icon {
-        fill: #728e9b;
         font-family: FontAwesome;
         font-size: 12px;
-        text-shadow: 0 0 4px rgba(255, 255, 255, 1);
-    }
-
-    text.load-balance-icon-active {
-        fill: #44a3cf;
     }
 
     text.load-balance-icon-184 {
@@ -341,67 +266,15 @@
         transform-origin: 213px 10px 0;
     }
 
-    text.connection-from-run-status.is-missing-port,
-    text.connection-to-run-status.is-missing-port {
-        fill: #cf9f5d;
-    }
-
-    g.connection rect.backpressure-tick {
-        fill: transparent;
-    }
-
-    g.connection rect.backpressure-tick.data-size-prediction.prediction-down,
-    g.connection rect.backpressure-tick.object-prediction.prediction-down {
-        fill: white;
-    }
-
-    g.connection rect.backpressure-tick.data-size-prediction,
-    g.connection rect.backpressure-tick.object-prediction {
-        fill: black;
-    }
-
-    g.connection rect.backpressure-tick.data-size-prediction.not-configured,
-    g.connection rect.backpressure-tick.object-prediction.not-configured,
-    g.connection rect.backpressure-tick.data-size-prediction.prediction-down.not-configured,
-    g.connection rect.backpressure-tick.object-prediction.prediction-down.not-configured {
-        fill: transparent;
-    }
-
-    g.connection rect.backpressure-tick.not-configured {
-        fill: #acacac;
-    }
-
-    g.connection rect.backpressure-object,
-    g.connection rect.backpressure-data-size {
-        fill: #d8d8d8;
-    }
-
-    /**/
     g.connection rect.backpressure-object > title > tspan,
     g.connection rect.backpressure-data-size > title > tspan {
         display: block;
     }
 
-    /**/
-
-    g.connection rect.backpressure-object.not-configured,
-    g.connection rect.backpressure-data-size.not-configured {
-        fill: transparent;
-    }
-
     g.connection rect.backpressure-percent {
-        fill: #67b796;
         pointer-events: none;
     }
 
-    g.connection rect.backpressure-percent.warning {
-        fill: #cea958;
-    }
-
-    g.connection rect.backpressure-percent.error {
-        fill: #ba554a;
-    }
-
     /* grouped connection */
 
     g.connection.grouped path.connection-path,
@@ -413,21 +286,17 @@
 
     g.connection.ghost path.connection-path,
     g.connection.ghost rect.connection-label {
-        stroke: #aaaaaa;
         stroke-dasharray: 4;
     }
 
     g.connection path.connection-selection-path {
         visibility: hidden;
         stroke-width: 1;
-        stroke: #ffcc00;
-        fill: none;
     }
 
     g.connection path.connection-path-selectable {
         visibility: hidden;
         stroke-width: 20;
-        fill: none;
         cursor: pointer;
     }
 
@@ -444,20 +313,11 @@
         visibility: visible;
     }
 
-    g.connection rect.startpoint {
-        stroke: #ff0000;
-        fill: #ff0000;
-    }
-
     g.connection rect.midpoint {
-        stroke: #ffcc00;
-        fill: #ffcc00;
         cursor: pointer;
     }
 
     g.connection rect.endpoint {
-        stroke: #0000ff;
-        fill: #0000ff;
         cursor: pointer;
     }
 
@@ -466,8 +326,6 @@
     g.label rect.labelpoint {
         display: none;
         stroke-width: 1;
-        stroke: #ffcc00;
-        fill: #ffcc00;
         cursor: se-resize;
     }
 
@@ -478,7 +336,6 @@
     /* funnels */
 
     text.funnel-icon {
-        fill: #ad9897;
         font-family: flowfont;
         font-size: 30px;
     }
@@ -486,19 +343,16 @@
     /* ports */
 
     text.port-name {
-        fill: #262626;
         font-size: 14px;
     }
 
     text.port-icon {
-        fill: #ad9897;
         font-family: flowfont;
         font-size: 30px;
     }
 
     text.port-transmission-icon {
         font-size: 15px;
-        fill: #728e9b;
     }
 
     /* active thread count */
@@ -510,59 +364,49 @@
     /* process groups */
 
     text.process-group-name {
-        fill: #262626;
         font-size: 14px;
     }
 
     text.version-control {
         font-family: FontAwesome;
         font-size: 18px;
-        text-shadow: 0 0 4px rgba(255, 255, 255, 1);
         visibility: hidden;
     }
 
     text.process-group-contents-count {
-        fill: #775351;
         font-size: 15px;
         font-weight: 500;
         font-family: Roboto, sans-serif;
     }
 
     g.process-group.drop rect.border {
-        stroke: #0000ff;
         stroke-width: 3;
     }
 
     text.process-group-contents-icon {
         font-size: 15px;
-        fill: #728e9b;
     }
 
     /* remote process group */
 
     text.remote-process-group-name {
-        fill: #262626;
         font-size: 14px;
     }
 
     text.remote-process-group-uri {
-        fill: #004849;
         font-size: 12px;
     }
 
     text.remote-process-group-transmission-status {
         font-size: 15px;
-        fill: #728e9b;
     }
 
     text.remote-process-group-transmission-secure {
         font-family: FontAwesome;
         font-size: 13px;
-        fill: #004849;
     }
 
     text.remote-process-group-last-refresh {
-        fill: #728e9b;
         font-size: 10px;
     }
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.ts

@@ -313,15 +313,15 @@ export class Canvas implements OnInit, OnDestroy {
             .attr('markerWidth', 6)
             .attr('markerHeight', 6)
             .attr('orient', 'auto')
-            .attr('fill', function (d: string) {
+            .attr('class', function (d: string) {
                 if (d === 'ghost') {
-                    return '#aaaaaa';
+                    return 'primary-contrast-300';
                 } else if (d === 'unauthorized') {
-                    return '#ba554a';
+                    return 'warn-400';
                 } else if (d === 'full') {
-                    return '#ba554a';
+                    return 'warn-400';
                 } else {
-                    return '#000000';
+                    return 'primary-contrast-200';
                 }
             })
             .append('path')
@@ -352,7 +352,6 @@ export class Canvas implements OnInit, OnDestroy {
         // color/opacity
         componentDropShadowFilter
             .append('feFlood')
-            .attr('flood-color', '#000000')
             .attr('flood-opacity', 0.4)
             .attr('result', 'offsetColor');
 
@@ -394,7 +393,6 @@ export class Canvas implements OnInit, OnDestroy {
         // color/opacity
         connectionFullDropShadowFilter
             .append('feFlood')
-            .attr('flood-color', '#ba554a')
             .attr('flood-opacity', 1)
             .attr('result', 'offsetColor');
 

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss

@@ -0,0 +1,42 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($material-theme, $canvas-theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($material-theme);
+    $canvas-color-config: mat.get-color-config($canvas-theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+    $canvas-primary-palette: map.get($canvas-color-config, 'primary');
+
+    // Get hues from palette
+    $primary-palette-300: mat.get-color-from-palette($primary-palette, 300);
+    $primary-palette-600: mat.get-color-from-palette($primary-palette, 600);
+    $canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50);
+    $canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900);
+
+    .breadcrumb-container {
+        box-shdowa: 0 1px 6px $canvas-primary-palette-50;
+        background-color: $canvas-primary-palette-900;
+        border-top: 1px solid $primary-palette-300;
+        color: $primary-palette-600;
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/footer.component.html

@@ -16,7 +16,7 @@
   -->
 
 <footer>
-    <div class="bg-nifi-accent breadcrumb-container">
+    <div class="breadcrumb-container">
         <breadcrumbs
             [entity]="(breadcrumbs$ | async)!"
             [currentProcessGroupId]="(currentProcessGroupId$ | async)!"></breadcrumbs>

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/footer.component.scss

@@ -16,9 +16,5 @@
  */
 
 .breadcrumb-container {
-    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
-    background-color: rgba(249, 250, 251, 0.9);
-    border-top: 1px solid #aabbc3;
-    color: #598599;
     z-index: 3;
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss

@@ -0,0 +1,61 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($material-theme, $canvas-theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($material-theme);
+    $canvas-color-config: mat.get-color-config($canvas-theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+    $canvas-primary-palette: map.get($canvas-color-config, 'primary');
+
+    // Get hues from palette
+    $primary-palette-100: mat.get-color-from-palette($primary-palette, 100);
+    $primary-palette-300: mat.get-color-from-palette($primary-palette, 300);
+    $primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400');
+    $canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50);
+    $canvas-primary-palette-600: mat.get-color-from-palette($canvas-primary-palette, 600);
+    $canvas-primary-palette-A100: mat.get-color-from-palette($canvas-primary-palette, 'A100');
+    $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200');
+
+    div.navigation-control {
+        box-shadow: 0 1px 6px $canvas-primary-palette-50;
+        background-color: $canvas-primary-palette-600;
+        border-top: 1px solid $primary-palette-300;
+        border-right: 1px solid $primary-palette-300;
+        border-bottom: 1px solid $primary-palette-300;
+
+        .fa,
+        .icon {
+            color: $primary-palette-A400;
+        }
+
+        .navigation-control-header {
+            &:hover {
+                background: linear-gradient(90deg, $canvas-primary-palette-A100 252px, $primary-palette-100 34px);
+            }
+        }
+
+        .navigation-control-title {
+            color: $canvas-primary-palette-A200;
+        }
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/_birdseye.component-theme.scss

@@ -0,0 +1,44 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($material-theme, $canvas-theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($material-theme);
+    $canvas-color-config: mat.get-color-config($canvas-theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+    $canvas-primary-palette: map.get($canvas-color-config, 'primary');
+
+    // Get hues from palette
+    $primary-palette-600: mat.get-color-from-palette($primary-palette, 600);
+    $canvas-primary-palette-700: mat.get-color-from-palette($canvas-primary-palette, 700);
+    $canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900);
+
+    #birdseye {
+        background: $canvas-primary-palette-900;
+        border: 1px solid $canvas-primary-palette-700;
+
+        rect.birdseye-brush {
+            stroke: $primary-palette-600;
+            fill: transparent;
+        }
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/birdseye.component.scss

@@ -18,9 +18,7 @@
 :host ::ng-deep #birdseye {
     width: 266px;
     height: 150px;
-    background: #fff;
     overflow: hidden;
-    border: 1px solid #e5ebed;
     box-sizing: content-box;
 
     canvas,
@@ -28,9 +26,4 @@
         position: absolute;
         overflow: hidden;
     }
-
-    rect.birdseye-brush {
-        stroke: #7098ad;
-        fill: transparent;
-    }
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component.scss

@@ -16,17 +16,11 @@
  */
 
 div.navigation-control {
-    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
-    background-color: rgba(249, 250, 251, 0.9);
-    border-top: 1px solid #aabbc3;
-    border-right: 1px solid #aabbc3;
-    border-bottom: 1px solid #aabbc3;
     margin-bottom: 2px;
 
     .fa,
     .icon {
         font-size: 18px;
-        color: #004849;
     }
 
     .navigation-control-header {
@@ -36,16 +30,11 @@ div.navigation-control {
             line-height: 34px;
             text-align: center;
         }
-
-        &:hover {
-            background: linear-gradient(90deg, rgba(227, 232, 235, 0) 252px, rgba(227, 232, 235, 1) 34px);
-        }
     }
 
     .navigation-control-title {
         font-size: 12px;
         font-family: 'Roboto Slab';
-        color: #262626;
         letter-spacing: 0.05rem;
     }
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss

@@ -0,0 +1,79 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($material-theme, $canvas-theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($material-theme);
+    $canvas-color-config: mat.get-color-config($canvas-theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+    $warn-palette: map.get($color-config, 'warn');
+    $canvas-primary-palette: map.get($canvas-color-config, 'primary');
+
+    // Get hues from palette
+    $primary-palette-100: mat.get-color-from-palette($primary-palette, 100);
+    $primary-palette-300: mat.get-color-from-palette($primary-palette, 300);
+    $primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
+    $primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400');
+    $warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200');
+    $warn-palette-A400: mat.get-color-from-palette($warn-palette, 'A400');
+    $canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50);
+    $canvas-primary-palette-600: mat.get-color-from-palette($canvas-primary-palette, 600);
+    $canvas-primary-palette-A100: mat.get-color-from-palette($canvas-primary-palette, 'A100');
+    $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200');
+
+    div.operation-control {
+        box-shadow: 0 1px 6px $canvas-primary-palette-50;
+        background-color: $canvas-primary-palette-600;
+        border-top: 1px solid $primary-palette-300;
+        border-right: 1px solid $primary-palette-300;
+        border-bottom: 1px solid $primary-palette-300;
+
+        .fa,
+        .icon {
+            color: $primary-palette-A400;
+        }
+
+        .operation-control-header {
+            &:hover {
+                background: linear-gradient(90deg, $canvas-primary-palette-A100 252px, $primary-palette-100 34px);
+            }
+        }
+
+        .operation-control-title {
+            color: $canvas-primary-palette-A200;
+        }
+
+        .operation-context-logo {
+            .icon {
+                color: $warn-palette-A200;
+            }
+        }
+
+        .operation-context-name {
+            color: $canvas-primary-palette-A200;
+        }
+
+        .operation-context-type {
+            color: $primary-palette-500;
+        }
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.scss

@@ -16,17 +16,11 @@
  */
 
 div.operation-control {
-    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
-    background-color: rgba(249, 250, 251, 0.9);
-    border-top: 1px solid #aabbc3;
-    border-right: 1px solid #aabbc3;
-    border-bottom: 1px solid #aabbc3;
     margin-bottom: 2px;
 
     .fa,
     .icon {
         font-size: 18px;
-        color: #004849;
     }
 
     .operation-control-header {
@@ -36,16 +30,11 @@ div.operation-control {
             line-height: 34px;
             text-align: center;
         }
-
-        &:hover {
-            background: linear-gradient(90deg, rgba(227, 232, 235, 0) 252px, rgba(227, 232, 235, 1) 34px);
-        }
     }
 
     .operation-control-title {
         font-size: 12px;
         font-family: 'Roboto Slab';
-        color: #262626;
         letter-spacing: 0.05rem;
     }
 
@@ -56,13 +45,11 @@ div.operation-control {
 
         .icon {
             font-size: 32px;
-            color: #ad9897;
         }
     }
 
     .operation-context-name {
         font-size: 15px;
-        color: #262626;
         height: 20px;
         width: 225px;
         text-overflow: ellipsis;
@@ -72,12 +59,10 @@ div.operation-control {
 
     .operation-context-type {
         font-size: 12px;
-        color: #728e9b;
     }
 
     .operation-context-id {
         height: 18px;
         font-size: 12px;
-        color: #775351;
     }
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/_header.component-theme.scss

@@ -0,0 +1,30 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($canvas-theme) {
+    // Get the color config from the theme.
+    $canvas-color-config: mat.get-color-config($canvas-theme);
+
+    // Get the color palette from the color-config.
+    $canvas-primary-palette: map.get($canvas-color-config, 'primary');
+
+    // Get hues from palette
+    $canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50);
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss

@@ -0,0 +1,63 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($material-theme, $canvas-theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($material-theme);
+    $canvas-color-config: mat.get-color-config($canvas-theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+    $warn-palette: map.get($color-config, 'warn');
+    $canvas-primary-palette: map.get($canvas-color-config, 'primary');
+
+    // Get hues from palette
+    $primary-palette-300: mat.get-color-from-palette($primary-palette, 300);
+    $primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
+    $warn-palette-400: mat.get-color-from-palette($warn-palette, 400);
+    $warn-palette-A400: mat.get-color-from-palette($warn-palette, 'A400');
+    $canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900);
+
+    .flow-status {
+        border-bottom: 1px solid $primary-palette-300;
+
+        .fa,
+        .icon {
+            color: $primary-palette-500;
+        }
+
+        .status-value {
+            color: $warn-palette-A400;
+        }
+
+        .controller-bulletins {
+            border-left: 1px solid $primary-palette-300;
+            background-color: $primary-palette-500;
+        }
+
+        .controller-bulletins.has-bulletins {
+            background-color: $warn-palette-400;
+        }
+
+        .controller-bulletins .fa {
+            color: $canvas-primary-palette-900;
+        }
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.html

@@ -15,7 +15,7 @@
   ~ limitations under the License.
   -->
 
-<div class="bg-nifi-accent h-8 flow-status">
+<div class="h-8 flow-status">
     <div class="flex justify-between">
         <div class="flex flex-1 justify-around pr-20">
             <div

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.scss

@@ -16,34 +16,21 @@
  */
 
 .flow-status {
-    border-bottom: 1px solid #aabbc3;
     box-sizing: content-box;
     font-size: 15px;
 
     .fa,
     .icon {
         font-style: normal;
-        color: #728e9b;
     }
 
     .status-value {
         white-space: nowrap;
         font-weight: 500;
-        color: #775351;
         text-shadow: none;
     }
 
     .controller-bulletins {
-        border-left: 1px solid #aabbc3;
-        background-color: #728e9b;
         cursor: default;
     }
-
-    .controller-bulletins.has-bulletins {
-        background-color: #ba554a;
-    }
-
-    .controller-bulletins .fa {
-        color: #fff;
-    }
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss

@@ -0,0 +1,56 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($material-theme, $canvas-theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($material-theme);
+    $canvas-color-config: mat.get-color-config($canvas-theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+    $canvas-primary-palette: map.get($canvas-color-config, 'primary');
+
+    // Get hues from palette
+    $primary-palette-100: mat.get-color-from-palette($primary-palette, 100);
+    $primary-palette-300: mat.get-color-from-palette($primary-palette, 300);
+    $primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400');
+    $canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50);
+
+    .new-canvas-item {
+        .icon {
+            color: $primary-palette-A400;
+
+            &.hovering {
+                background-color: $primary-palette-100;
+                box-shadow: 0 3px 6px $canvas-primary-palette-50;
+
+                .component-button-grip {
+                    background: repeating-linear-gradient(
+                            90deg,
+                            $primary-palette-300,
+                            $primary-palette-300 4px,
+                            $primary-palette-300 4px,
+                            $primary-palette-300 6px
+                    );
+                }
+            }
+        }
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component.html

@@ -14,9 +14,9 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -->
-
+<div class="new-canvas-item">
-<div class="h-16 w-16 pl-1.5 flex items-center justify-center relative icon" [class]="iconClass"></div>
+    <div class="h-16 w-16 pl-1.5 flex items-center justify-center relative icon" [class]="iconClass"></div>
-<button
+    <button
         class="h-16 w-16 pl-1.5 -mt-16 flex items-center justify-center relative icon"
         [class]="isHovering() ? iconHoverClass + ' hovering' : iconClass"
         [class.dragging]="dragging"
@@ -27,4 +27,5 @@
         (cdkDragStarted)="onDragStarted($event)"
         (cdkDragEnded)="onDragEnded($event)">
         <span class="h-1 absolute left-[3px] right-[3px] bottom-0.5 component-button-grip"></span>
-</button>
+    </button>
+</div>

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component.scss

@@ -17,25 +17,12 @@
 
 .icon {
     font-size: 32px;
-    color: #004849;
 
     &.hovering {
         cursor: move;
         cursor: grab;
         cursor: -moz-grab;
         cursor: -webkit-grab;
-        background-color: #e3e8eb;
-        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
-
-        .component-button-grip {
-            background: repeating-linear-gradient(
-                90deg,
-                rgba(170, 187, 195, 1),
-                rgba(170, 187, 195, 1) 4px,
-                rgba(170, 187, 195, 0) 4px,
-                rgba(170, 187, 195, 0) 6px
-            );
-        }
     }
 
     &.dragging {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss

@@ -0,0 +1,53 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($material-theme, $canvas-theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($material-theme);
+    $canvas-color-config: mat.get-color-config($canvas-theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+    $canvas-primary-palette: map.get($canvas-color-config, 'primary');
+
+    // Get hues from palette
+    $primary-palette-300: mat.get-color-from-palette($primary-palette, 300);
+    $canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900);
+    $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200');
+    $canvas-primary-palette-A700: mat.get-color-from-palette($canvas-primary-palette, 'A700');
+
+    .search-container {
+        border-left: 1px solid $primary-palette-300;
+
+        &:hover,
+        &.open {
+            background-color: $canvas-primary-palette-900;
+            border-left: 1px solid $canvas-primary-palette-A700;
+        }
+
+        .search-input {
+            color: $canvas-primary-palette-A200;
+        }
+
+        .fa {
+            color: $canvas-primary-palette-A700;
+        }
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.scss

@@ -16,21 +16,12 @@
  */
 
 .search-container {
-    border-left: 1px solid #aabbc3;
-
-    &:hover,
-    &.open {
-        background-color: #ffffff;
-        border-left: 1px solid #004849;
-    }
-
     .search-input {
         width: 0;
         height: 32px;
         outline: none;
         font-size: 13px;
         line-height: 13px;
-        color: #262626;
         transition: width 400ms ease-in-out;
     }
 
@@ -38,8 +29,4 @@
         width: 200px;
         transition: width 400ms ease-in-out;
     }
-
-    .fa {
-        color: #004849;
-    }
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.ts

@@ -37,8 +37,8 @@ import { RouterLink } from '@angular/router';
     selector: 'search',
     standalone: true,
     templateUrl: './search.component.html',
-    imports: [ReactiveFormsModule, CdkOverlayOrigin, CdkConnectedOverlay, NgIf, NgTemplateOutlet, RouterLink, NgForOf],
+    styleUrls: ['./search.component.scss'],
-    styleUrls: ['./search.component.scss']
+    imports: [ReactiveFormsModule, CdkOverlayOrigin, CdkConnectedOverlay, NgIf, NgTemplateOutlet, RouterLink, NgForOf]
 })
 export class Search implements OnInit {
     protected readonly ComponentType = ComponentType;

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.html

@@ -162,7 +162,7 @@
         </mat-tab-group>
     </mat-dialog-content>
     <mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
-        <button color="accent" mat-raised-button mat-dialog-close>Cancel</button>
+        <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
         <button
             [disabled]="createConnectionForm.invalid || saving.value"
             type="button"

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/edit-connection/edit-connection.component.html

@@ -162,7 +162,7 @@
         </mat-tab-group>
     </mat-dialog-content>
     <mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
-        <button color="accent" mat-raised-button mat-dialog-close="CANCELLED">Cancel</button>
+        <button color="primary" mat-stroked-button mat-dialog-close="CANCELLED">Cancel</button>
         <button
             [disabled]="!editConnectionForm.dirty || editConnectionForm.invalid || saving.value"
             type="button"

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/_prioritizers.component-theme.scss

@@ -0,0 +1,59 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($material-theme, $canvas-theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($material-theme);
+    $canvas-color-config: mat.get-color-config($canvas-theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+    $canvas-primary-palette: map.get($canvas-color-config, 'primary');
+
+    // Get hues from palette
+    $primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
+    $canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50);
+    $canvas-primary-palette-100: mat.get-color-from-palette($canvas-primary-palette, 100);
+    $canvas-primary-palette-400: mat.get-color-from-palette($canvas-primary-palette, 400);
+    $canvas-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500);
+    $canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900);
+
+    .prioritizers {
+        .prioritizers-list {
+            background: $primary-palette-500;
+
+            border: solid 1px $canvas-primary-palette-400;
+
+            .cdk-drag-disabled {
+                background: $canvas-primary-palette-500;
+            }
+        }
+
+        .prioritizer-draggable-item {
+            border-bottom: solid 1px $canvas-primary-palette-400;
+            color: $canvas-primary-palette-100;
+            background: $canvas-primary-palette-900;
+        }
+
+        .cdk-drag-preview {
+            box-shadow: 0 3px 6px $canvas-primary-palette-50;
+        }
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.scss

@@ -17,31 +17,24 @@
 
 .prioritizers {
     .prioritizers-list {
-        background: #eaeef0;
-
-        border: solid 1px #ccc;
         min-height: 66px;
         border-radius: 4px;
         overflow: hidden;
         display: block;
 
         .cdk-drag-disabled {
-            background: #ccc;
             cursor: not-allowed;
         }
     }
 
     .prioritizer-draggable-item {
         padding: 20px 10px;
-        border-bottom: solid 1px #ccc;
-        color: rgba(0, 0, 0, 0.87);
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
         box-sizing: border-box;
         cursor: grab;
-        background: white;
         font-size: 14px;
 
         &:last-child {
@@ -52,10 +45,6 @@
     .cdk-drag-preview {
         box-sizing: border-box;
         border-radius: 4px;
-        box-shadow:
-            0 5px 5px -3px rgba(0, 0, 0, 0.2),
-            0 8px 10px 1px rgba(0, 0, 0, 0.14),
-            0 3px 14px 2px rgba(0, 0, 0, 0.12);
     }
 
     .cdk-drag-placeholder {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component.ts

@@ -56,14 +56,14 @@ import {
         CdkDrag,
         NgForOf
     ],
-    styleUrls: ['./prioritizers.component.scss'],
     providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => Prioritizers),
             multi: true
         }
-    ]
+    ],
+    styleUrls: ['./prioritizers.component.scss']
 })
 export class Prioritizers implements ControlValueAccessor {
     @Input() set allPrioritizers(allPrioritizers: DocumentedType[]) {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-processor/source-processor.component.html

@@ -30,6 +30,7 @@
             <div *ngFor="let item of relationshipItems; index as i" class="flex flex-col gap-y-1.5">
                 <div class="flex items-center gap-x-2">
                     <mat-checkbox
+                        color="primary"
                         [(ngModel)]="item.selected"
                         name="selected-{{ i }}"
                         (change)="handleChanged()"

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/port/create-port/create-port.component.html

@@ -44,7 +44,7 @@
         </mat-form-field>
     </mat-dialog-content>
     <mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
-        <button color="accent" mat-raised-button mat-dialog-close>Cancel</button>
+        <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
         <button
             [disabled]="!createPortForm.dirty || createPortForm.invalid || saving.value"
             type="button"

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/port/edit-port/edit-port.component.html

@@ -33,7 +33,7 @@
         </div>
         <div *ngIf="portTypeLabel == 'Output Port'" class="mb-3.5">
             <mat-label>Failure Port</mat-label>
-            <mat-checkbox formControlName="portFunction"></mat-checkbox>
+            <mat-checkbox color="primary" formControlName="portFunction"></mat-checkbox>
         </div>
         <div>
             <mat-form-field>
@@ -43,7 +43,7 @@
         </div>
     </mat-dialog-content>
     <mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
-        <button color="accent" mat-raised-button mat-dialog-close>Cancel</button>
+        <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
         <button
             [disabled]="!editPortForm.dirty || editPortForm.invalid || saving.value"
             type="button"

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/_create-process-group.component-theme.scss

@@ -0,0 +1,38 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+
+    // Get hues from palette
+    $primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400');
+
+    // Get hues from palette
+
+    .create-process-group-form {
+        .upload-flow-definition {
+            color: $primary-palette-A400;
+        }
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/create-process-group.component.html

@@ -68,7 +68,7 @@
         </div>
     </mat-dialog-content>
     <mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
-        <button color="accent" mat-raised-button mat-dialog-close>Cancel</button>
+        <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
         <button
             [disabled]="!createProcessGroupForm.dirty || createProcessGroupForm.invalid || saving.value"
             type="button"

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/create-process-group.component.scss

@@ -26,6 +26,5 @@
 
     .upload-flow-definition {
         font-size: 18px;
-        color: #004849;
     }
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/edit-process-group/edit-process-group.component.html

@@ -52,6 +52,7 @@
                         </div>
                         <div class="-mt-6 mb-4">
                             <mat-checkbox
+                                color="primary"
                                 formControlName="applyParameterContextRecursively"
                                 name="applyParameterContextRecursively">
                                 Apply Recursively
@@ -148,7 +149,7 @@
         </mat-tab-group>
     </mat-dialog-content>
     <mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
-        <button color="accent" mat-raised-button mat-dialog-close>Cancel</button>
+        <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
         <button
             [disabled]="!editProcessGroupForm.dirty || editProcessGroupForm.invalid || saving.value"
             class="h-8"

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/group-components/group-components.component.html

@@ -44,7 +44,7 @@
         </mat-form-field>
     </mat-dialog-content>
     <mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
-        <button color="accent" mat-raised-button mat-dialog-close>Cancel</button>
+        <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
         <button
             [disabled]="!createProcessGroupForm.dirty || createProcessGroupForm.invalid || saving.value"
             type="button"

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.html

@@ -184,7 +184,7 @@
         </mat-tab-group>
     </mat-dialog-content>
     <mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
-        <button color="accent" mat-raised-button mat-dialog-close>Cancel</button>
+        <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
         <button
             [disabled]="!editProcessorForm.dirty || editProcessorForm.invalid || saving.value"
             type="button"

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/relationship-settings/relationship-settings.component.html

@@ -31,6 +31,7 @@
                     <div class="value">{{ relationship.name }}</div>
                     <div class="flex items-center gap-x-2">
                         <mat-checkbox
+                            color="primary"
                             [(ngModel)]="relationship.autoTerminate"
                             name="autoTerminate-{{ i }}"
                             (change)="handleChanged()"

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/common/banner/_banner.component-theme.scss

@@ -0,0 +1,36 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($theme);
+
+    // Get the color palette from the color-config.
+    $warn-palette: map.get($color-config, 'warn');
+
+    // Get hues from palette
+    $warn-palette-100: mat.get-color-from-palette($warn-palette, 100);
+
+    div {
+        &.error {
+            background-color: $warn-palette-100;
+        }
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/controller-service/_controller-services.component-theme.scss

@@ -0,0 +1,34 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+
+    // Get hues from palette
+    $primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
+
+    .controller-services-header {
+        color: $primary-palette-500;
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/controller-service/controller-services.component.scss

@@ -15,10 +15,6 @@
  * limitations under the License.
  */
 
-.controller-services-header {
-    color: #728e9b;
-}
-
 .refresh-container {
     line-height: normal;
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/feature/_login.component-theme.scss

@@ -0,0 +1,35 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($material-theme, $canvas-theme) {
+    $color-config: mat.get-color-config($material-theme);
+    $canvas-color-config: mat.get-color-config($canvas-theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+    $canvas-primary-palette: map.get($canvas-color-config, 'primary');
+
+    // Get hues from palette
+    $canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900);
+
+    .login-background {
+        background: $canvas-primary-palette-900 url(../../../../assets/icons/bg-error.png) left top no-repeat;
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/feature/login.component.scss

@@ -14,7 +14,3 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-.login-background {
-    background: #fff url(../../../../assets/icons/bg-error.png) left top no-repeat;
-}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/ui/login-form/_login-form.component-theme.scss

@@ -0,0 +1,36 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+
+    // Get hues from palette
+    $primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
+
+    .login-form {
+        .login-title {
+            color: $primary-palette-500;
+        }
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/ui/login-form/login-form.component.scss

@@ -20,7 +20,6 @@
         font-size: 18px;
         font-weight: 600;
         font-family: Roboto Slab;
-        color: #728e9b;
     }
 
     .mat-mdc-form-field {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/_parameter-contexts.component-theme.scss

@@ -0,0 +1,34 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+
+    // Get hues from palette
+    $primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
+
+    .parameter-context-header {
+        color: $primary-palette-500;
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/parameter-contexts.component.scss

@@ -14,7 +14,3 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-.parameter-context-header {
-    color: #728e9b;
-}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.html

@@ -118,12 +118,12 @@
             <button color="primary" mat-raised-button mat-dialog-close>Close</button>
         </ng-container>
         <ng-template #updateInProgressActions>
-            <button color="accent" mat-raised-button mat-dialog-close>Cancel</button>
+            <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
         </ng-template>
     </mat-dialog-actions>
     <ng-template #editFormActions>
         <mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
-            <button color="accent" mat-raised-button mat-dialog-close>Cancel</button>
+            <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
             <button
                 [disabled]="!editParameterContextForm.dirty || editParameterContextForm.invalid || saving.value"
                 type="button"

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.scss

@@ -18,8 +18,6 @@
 @use '@angular/material' as mat;
 
 .parameter-context-edit-form {
-    //@include mat.dialog-density(-2);
-    //@include mat.tabs-density(-2);
     @include mat.button-density(-1);
 
     .mdc-dialog__content {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/_parameter-context-inheritance.component-theme.scss

@@ -0,0 +1,58 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($material-theme, $canvas-theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($material-theme);
+    $canvas-color-config: mat.get-color-config($canvas-theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+    $canvas-primary-palette: map.get($canvas-color-config, 'primary');
+
+    // Get hues from palette
+    $primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
+    $canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50);
+    $canvas-primary-palette-100: mat.get-color-from-palette($canvas-primary-palette, 100);
+    $canvas-primary-palette-400: mat.get-color-from-palette($canvas-primary-palette, 400);
+    $canvas-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500);
+
+    .parameter-context-inheritance {
+        .parameter-context-inheritance-list {
+            background: $primary-palette-500;
+
+            border: solid 1px $canvas-primary-palette-400;
+
+            .cdk-drag-disabled {
+                background: $canvas-primary-palette-500;
+            }
+        }
+
+        .parameter-context-draggable-item {
+            border-bottom: solid 1px $canvas-primary-palette-400;
+            color: $canvas-primary-palette-100;
+            background: white;
+        }
+
+        .cdk-drag-preview {
+            box-shadow: 0 3px 6px $canvas-primary-palette-50;
+        }
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component.scss

@@ -17,31 +17,24 @@
 
 .parameter-context-inheritance {
     .parameter-context-inheritance-list {
-        background: #eaeef0;
-
-        border: solid 1px #ccc;
         min-height: 66px;
         border-radius: 4px;
         overflow: hidden;
         display: block;
 
         .cdk-drag-disabled {
-            background: #ccc;
             cursor: not-allowed;
         }
     }
 
     .parameter-context-draggable-item {
         padding: 20px 10px;
-        border-bottom: solid 1px #ccc;
-        color: rgba(0, 0, 0, 0.87);
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
         box-sizing: border-box;
         cursor: grab;
-        background: white;
         font-size: 14px;
 
         &:last-child {
@@ -52,10 +45,6 @@
     .cdk-drag-preview {
         box-sizing: border-box;
         border-radius: 4px;
-        box-shadow:
-            0 5px 5px -3px rgba(0, 0, 0, 0.2),
-            0 8px 10px 1px rgba(0, 0, 0, 0.14),
-            0 3px 14px 2px rgba(0, 0, 0, 0.12);
     }
 
     .cdk-drag-placeholder {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component.ts

@@ -59,14 +59,14 @@ import {
         CdkDrag,
         NgForOf
     ],
-    styleUrls: ['./parameter-context-inheritance.component.scss'],
     providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => ParameterContextInheritance),
             multi: true
         }
-    ]
+    ],
+    styleUrls: ['./parameter-context-inheritance.component.scss']
 })
 export class ParameterContextInheritance implements ControlValueAccessor {
     @Input() set allParameterContexts(allParameterContexts: ParameterContextEntity[]) {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-table/parameter-context-table.component.ts

@@ -26,7 +26,7 @@ import { CurrentUser } from '../../../../../state/current-user';
 @Component({
     selector: 'parameter-context-table',
     templateUrl: './parameter-context-table.component.html',
-    styleUrls: ['./parameter-context-table.component.scss', '../../../../../../assets/styles/listing-table.scss']
+    styleUrls: ['./parameter-context-table.component.scss']
 })
 export class ParameterContextTable {
     @Input() initialSortColumn: 'name' | 'provider' | 'description' = 'name';

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-table/parameter-table.component.ts

@@ -57,7 +57,7 @@ export interface ParameterItem {
         NifiTooltipDirective,
         ParameterReferences
     ],
-    styleUrls: ['./parameter-table.component.scss', '../../../../../../assets/styles/listing-table.scss'],
+    styleUrls: ['./parameter-table.component.scss'],
     providers: [
         {
             provide: NG_VALUE_ACCESSOR,

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss

@@ -0,0 +1,64 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($material-theme, $canvas-theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($material-theme);
+    $canvas-color-config: mat.get-color-config($canvas-theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+    $warn-palette: map.get($color-config, 'warn');
+    $canvas-primary-palette: map.get($canvas-color-config, 'primary');
+
+    // Get hues from palette
+    $primary-palette-300: mat.get-color-from-palette($primary-palette, 300);
+    $primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
+    $canvas-primary-palette-200: mat.get-color-from-palette($canvas-primary-palette, 200);
+    $canvas-primary-palette-600: mat.get-color-from-palette($canvas-primary-palette, 600);
+    $canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900);
+    $warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200');
+
+    .provenance-header {
+        color: $primary-palette-500;
+    };
+
+    rect.lineage {
+        fill: $canvas-primary-palette-600;
+    }
+
+    g.flowfile-icon text {
+        fill: $warn-palette-A200;
+    }
+
+    circle.event-circle {
+        fill: $primary-palette-300;
+        stroke: $canvas-primary-palette-200;
+    }
+
+    path.link {
+        stroke: $canvas-primary-palette-200;
+    }
+
+    circle.flowfile-link {
+        fill: $canvas-primary-palette-900;
+        stroke: $canvas-primary-palette-200;
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/provenance.component.scss

@@ -14,7 +14,3 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-.provenance-header {
-    color: #728e9b;
-}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/_provenance-event-table.component-theme.scss

@@ -0,0 +1,48 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($material-theme, $canvas-theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($material-theme);
+    $canvas-color-config: mat.get-color-config($canvas-theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+    $canvas-primary-palette: map.get($canvas-color-config, 'primary');
+
+    // Get hues from palette
+    $primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400');
+    $canvas-primary-palette-600: mat.get-color-from-palette($canvas-primary-palette, 600);
+    $canvas-primary-palette-700: mat.get-color-from-palette($canvas-primary-palette, 700);
+
+    .provenance-event-table {
+        .lineage {
+            border: 1px solid $canvas-primary-palette-700;
+            background-color: $canvas-primary-palette-600;
+
+            .lineage-controls {
+                .fa,
+                .icon {
+                    color: $primary-palette-A400;
+                }
+            }
+        }
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/_lineage.component-theme.scss

@@ -0,0 +1,63 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($material-theme, $canvas-theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($material-theme);
+    $canvas-color-config: mat.get-color-config($canvas-theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+    $warn-palette: map.get($color-config, 'warn');
+    $canvas-accent-palette: map.get($canvas-color-config, 'accent');
+
+    // Get hues from palette
+    $primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400');
+    $warn-palette-400: mat.get-color-from-palette($warn-palette, 400);
+    $warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200');
+    $canvas-accent-palette-A200: mat.get-color-from-palette($canvas-accent-palette, 'A200');
+
+    #lineage {
+
+        canvas,
+        svg {
+            path.link.selected {
+                stroke: $warn-palette-400;
+            }
+
+            g.event circle.selected {
+                fill: $warn-palette-400;
+            }
+
+            g.event circle.context {
+                fill: $canvas-accent-palette-A200;
+            }
+
+            g.flowfile circle.context,
+            g.event circle.context {
+                stroke: $primary-palette-A400;
+            }
+
+            .flowfile-icon {
+                color: $warn-palette-A200;
+            }
+        }
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/lineage.component.scss

@@ -24,23 +24,11 @@
         position: absolute;
         overflow: hidden;
 
-        path.link.selected {
-            stroke: #ba554a;
-        }
-
         g.event {
             cursor: pointer;
             user-select: none;
         }
 
-        g.event circle.selected {
-            fill: #ba554a;
-        }
-
-        g.event circle.context {
-            fill: #cf9f5d;
-        }
-
         text.event-type {
             font-family: Roboto;
             font-size: 11px;
@@ -63,7 +51,6 @@
 
         g.flowfile circle.context,
         g.event circle.context {
-            stroke: #004849;
             stroke-width: 1.5px;
         }
 
@@ -71,7 +58,6 @@
             font-family: flowfont;
             content: '\e808';
             font-size: 16px;
-            color: #ad9897;
         }
     }
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/lineage.component.ts

@@ -280,9 +280,9 @@ export class LineageComponent implements OnInit {
             .on('dblclick.zoom', null);
 
         svg.append('rect')
+            .attr('class', 'lineage')
             .attr('width', '100%')
             .attr('height', '100%')
-            .attr('fill', '#f9fafb')
             .on('mousedown', function (event, d) {
                 // hide the context menu if necessary
                 self.clearSelectionContext();
@@ -311,11 +311,11 @@ export class LineageComponent implements OnInit {
             .attr('markerWidth', 6)
             .attr('markerHeight', 6)
             .attr('orient', 'auto')
-            .attr('fill', function (d) {
+            .attr('class', function (d) {
                 if (d.indexOf('SELECTED') >= 0) {
-                    return '#ba554a';
+                    return 'warn-400';
                 } else {
-                    return '#000000';
+                    return 'primary-contrast-200';
                 }
             })
             .append('path')
@@ -723,9 +723,8 @@ export class LineageComponent implements OnInit {
         // node
         flowfiles
             .append('circle')
+            .attr('class', 'flowfile-link')
             .attr('r', 16)
-            .attr('fill', '#fff')
-            .attr('stroke', '#000')
             .attr('stroke-width', 1.0)
             .on('mouseover', function (event: MouseEvent, d: any) {
                 self.lineageContainerElement
@@ -759,7 +758,6 @@ export class LineageComponent implements OnInit {
             .append('text')
             .attr('font-family', 'flowfont')
             .attr('font-size', '18px')
-            .attr('fill', '#ad9897')
             .attr('transform', function () {
                 return 'translate(0,15)';
             })
@@ -822,12 +820,11 @@ export class LineageComponent implements OnInit {
 
         events
             .append('circle')
+            .attr('class', 'event-circle')
             .classed('selected', function (d: any) {
                 return d.id === self.eventId;
             })
             .attr('r', 8)
-            .attr('fill', '#aabbc3')
-            .attr('stroke', '#000')
             .attr('stroke-width', 1.0)
             .attr('id', function (d: any) {
                 return `event-node-${d.id}`;
@@ -956,7 +953,6 @@ export class LineageComponent implements OnInit {
             .insert('path', '.node')
             .attr('class', 'link')
             .attr('stroke-width', 1.5)
-            .attr('stroke', '#000')
             .attr('fill', 'none')
             .attr('d', function (d: any) {
                 return `M${d.source.x},${d.source.y}L${d.source.x},${d.source.y}`;

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/provenance-event-table.component.scss

@@ -26,9 +26,6 @@
     }
 
     .lineage {
-        border: 1px solid #e5ebed;
-        background-color: #f9fafb;
-
         .lineage-controls {
             position: absolute;
             top: 5px;
@@ -37,7 +34,6 @@
 
             .fa,
             .icon {
-                color: #004849;
                 width: 14px;
                 height: 14px;
                 text-align: center;

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/provenance-event-table.component.ts

@@ -59,7 +59,7 @@ import { MatSliderModule } from '@angular/material/slider';
         LineageComponent,
         MatSliderModule
     ],
-    styleUrls: ['./provenance-event-table.component.scss', '../../../../../../assets/styles/listing-table.scss']
+    styleUrls: ['./provenance-event-table.component.scss']
 })
 export class ProvenanceEventTable implements AfterViewInit {
     @Input() set events(events: ProvenanceEventSummary[]) {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-search-dialog/provenance-search-dialog.component.html

@@ -25,7 +25,10 @@
                     <input matInput formControlName="value" type="text" />
                 </mat-form-field>
                 <div class="-mt-6 mb-4">
-                    <mat-checkbox formControlName="inverse" name="inverse"> Exclude </mat-checkbox>
+                    <mat-checkbox
+                        color="primary"
+                        formControlName="inverse"
+                        name="inverse"> Exclude </mat-checkbox>
                 </div>
             </div>
         </ng-container>
@@ -62,7 +65,7 @@
         </div>
     </mat-dialog-content>
     <mat-dialog-actions align="end">
-        <button color="accent" mat-raised-button mat-dialog-close>Cancel</button>
+        <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
         <button
             [disabled]="provenanceOptionsForm.invalid"
             type="button"

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/_flowfile-dialog.component-theme.scss

@@ -0,0 +1,40 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+
+    // Get hues from palette
+    $primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
+
+    .flowfile {
+        .mdc-dialog__content {
+            .tab-content {
+                .flowfile-header {
+                    color: $primary-palette-500;
+                }
+            }
+        }
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html

@@ -151,15 +151,15 @@
                                         "></ng-container>
                                 </div>
                                 <div class="flex">
-                                    <button color="accent" mat-raised-button (click)="downloadContentClicked()">
+                                    <button color="primary" mat-stroked-button (click)="downloadContentClicked()">
                                         <i class="fa fa-download"></i>
                                         Download
                                     </button>
                                     <button
                                         *ngIf="contentViewerAvailable"
                                         class="ml-3"
-                                        color="accent"
+                                        color="primary"
-                                        mat-raised-button
+                                        mat-stroked-button
                                         (click)="viewContentClicked()">
                                         <i class="fa fa-eye"></i>
                                         View

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.scss

@@ -30,7 +30,6 @@
             overflow-y: auto;
 
             .flowfile-header {
-                color: #728e9b;
                 font-size: 15px;
                 font-family: 'Roboto Slab';
                 font-style: normal;

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.ts

@@ -31,6 +31,7 @@ import { NiFiCommon } from '../../../../../service/nifi-common.service';
     selector: 'flowfile-dialog',
     standalone: true,
     templateUrl: './flowfile-dialog.component.html',
+    styleUrls: ['./flowfile-dialog.component.scss'],
     imports: [
         ReactiveFormsModule,
         MatDialogModule,
@@ -45,8 +46,7 @@ import { NiFiCommon } from '../../../../../service/nifi-common.service';
         NgTemplateOutlet,
         FormsModule,
         KeyValuePipe
-    ],
+    ]
-    styleUrls: ['./flowfile-dialog.component.scss']
 })
 export class FlowFileDialog {
     @Input() contentViewerAvailable!: boolean;

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/_flowfile-table.component-theme.scss

@@ -0,0 +1,42 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+    $warn-palette: map.get($color-config, 'warn');
+
+    // Get hues from palette
+    $primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
+    $warn-palette-400: mat.get-color-from-palette($warn-palette, 400);
+
+    .flowfile-table {
+        .queue-listing-header {
+            color: $primary-palette-500;
+        }
+
+        .listing-message {
+            color: $warn-palette-400;
+        }
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/flowfile-table.component.scss

@@ -16,14 +16,6 @@
  */
 
 .flowfile-table {
-    .queue-listing-header {
-        color: #728e9b;
-    }
-
-    .listing-message {
-        color: #ba554a;
-    }
-
     .listing-table {
         table {
             .mat-column-moreDetails {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/flowfile-table.component.ts

@@ -31,7 +31,7 @@ import { CurrentUser } from '../../../../../state/current-user';
     standalone: true,
     templateUrl: './flowfile-table.component.html',
     imports: [MatTableModule, NgForOf, NgIf, RouterLink],
-    styleUrls: ['./flowfile-table.component.scss', '../../../../../../assets/styles/listing-table.scss']
+    styleUrls: ['./flowfile-table.component.scss']
 })
 export class FlowFileTable implements AfterViewInit {
     @Input() connectionLabel!: string;

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/_settings.component-theme.scss

@@ -0,0 +1,34 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+    // Get the color config from the theme.
+    $color-config: mat.get-color-config($theme);
+
+    // Get the color palette from the color-config.
+    $primary-palette: map.get($color-config, 'primary');
+
+    // Get hues from palette
+    $primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
+
+    .settings-header {
+        color: $primary-palette-500;
+    }
+}

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/settings.component.scss

@@ -15,10 +15,6 @@
  * limitations under the License.
  */
 
-.settings-header {
-    color: #728e9b;
-}
-
 .settings-tabs {
     border-bottom-width: 1px;
 }

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/edit-flow-analysis-rule/edit-flow-analysis-rule.component.html

@@ -80,7 +80,7 @@
         </mat-tab-group>
     </mat-dialog-content>
     <mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
-        <button color="accent" mat-raised-button mat-dialog-close>Cancel</button>
+        <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
         <button
             [disabled]="!editFlowAnalysisRuleForm.dirty || editFlowAnalysisRuleForm.invalid || saving.value"
             type="button"

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rule-table/flow-analysis-rule-table.component.ts

@@ -46,7 +46,7 @@ import { CurrentUser } from '../../../../../state/current-user';
         NifiTooltipDirective,
         RouterLink
     ],
-    styleUrls: ['./flow-analysis-rule-table.component.scss', '../../../../../../assets/styles/listing-table.scss']
+    styleUrls: ['./flow-analysis-rule-table.component.scss']
 })
 export class FlowAnalysisRuleTable {
     @Input() set flowAnalysisRules(flowAnalysisRuleEntities: FlowAnalysisRuleEntity[]) {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-providers-table/parameter-providers-table.component.ts

@@ -46,7 +46,7 @@ export type SupportedColumns = 'name' | 'type' | 'bundle';
         RouterLink
     ],
     templateUrl: './parameter-providers-table.component.html',
-    styleUrls: ['./parameter-providers-table.component.scss', '../../../../../../assets/styles/listing-table.scss']
+    styleUrls: ['./parameter-providers-table.component.scss']
 })
 export class ParameterProvidersTable {
     @Input() initialSortColumn: SupportedColumns = 'name';

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/create-registry-client/create-registry-client.component.html

@@ -56,7 +56,7 @@
         </div>
     </mat-dialog-content>
     <mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
-        <button color="accent" mat-raised-button mat-dialog-close>Cancel</button>
+        <button color="primary" mat-stroked-button mat-dialog-close>Cancel</button>
         <button
             [disabled]="!createRegistryClientForm.dirty || createRegistryClientForm.invalid || saving.value"
             type="button"