You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@nifi.apache.org by rf...@apache.org on 2024/05/02 13:47:14 UTC
(nifi) branch main updated: [NIFI-13093] use warn palette for all errors and introduce caution palette (#8721)
This is an automated email from the ASF dual-hosted git repository.
rfellows pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/nifi.git
The following commit(s) were added to refs/heads/main by this push:
new 9ac17833b8 [NIFI-13093] use warn palette for all errors and introduce caution palette (#8721)
9ac17833b8 is described below
commit 9ac17833b8050fefb6ddd3794de498282c8710b5
Author: Scott Aslan <sc...@users.noreply.github.com>
AuthorDate: Thu May 2 09:47:07 2024 -0400
[NIFI-13093] use warn palette for all errors and introduce caution palette (#8721)
* [NIFI-13093] use warn palette for all errors and introduce caution palette
* update semantic color names
* update warn palette darker hue
* import ErrorBanner component into cluster.component.spec.ts
* .primary-contrast
* some code clean up and reuse of .surface-contrast
* caution color cleanup
* update bulletin to use inverted contrast color and semantic caution-color class
This closes #8721
---
.../_bulletin-board-list.component-theme.scss | 34 --------
.../bulletin-board-list.component.ts | 4 +-
.../cluster/feature/cluster.component.spec.ts | 3 +-
.../cluster-node-detail-dialog.component.html | 2 +-
.../cluster-node-table.component.html | 4 +-
.../action-details/action-details.component.html | 4 +-
...flow-configuration-history-table.component.html | 10 +--
.../flow-designer/service/canvas-utils.service.ts | 2 +-
.../service/manager/connection-manager.service.ts | 18 ++---
.../service/manager/port-manager.service.ts | 8 +-
.../manager/process-group-manager.service.ts | 34 ++++----
.../service/manager/processor-manager.service.ts | 8 +-
.../remote-process-group-manager.service.ts | 8 +-
.../ui/canvas/_canvas.component-theme.scss | 82 +++++++------------
.../flow-designer/ui/canvas/canvas.component.ts | 6 +-
.../_navigation-control.component-theme.scss | 8 --
.../_operation-control.component-theme.scss | 11 ---
.../flow-status/_flow-status.component-theme.scss | 7 +-
.../header/flow-status/flow-status.component.html | 24 +++---
.../header/flow-status/flow-status.component.ts | 2 +-
.../_new-canvas-item.component-theme.scss | 20 +----
.../ui/canvas/header/search/search.component.html | 4 +-
.../create-connection.component.html | 2 +-
.../source-processor.component.html | 2 +-
.../save-version-dialog.component.html | 2 +-
.../create-process-group.component.html | 2 +-
.../edit-processor/edit-processor.component.html | 4 +-
.../ui/common/breadcrumbs/breadcrumbs.component.ts | 10 +--
.../manage-remote-ports.component.html | 14 ++--
.../edit-parameter-context.component.html | 4 +-
.../parameter-context-table.component.html | 2 +-
.../parameter-table/parameter-table.component.html | 8 +-
.../process-group-references.component.html | 2 +-
.../feature/_provenance.component-theme.scss | 2 +-
.../lineage/_lineage.component-theme.scss | 35 +++-----
.../lineage/lineage.component.ts | 2 +-
.../provenance-search-dialog.component.html | 2 +-
.../flowfile-dialog/flowfile-dialog.component.html | 10 +--
.../flow-analysis-rule-table.component.html | 4 +-
.../flow-analysis-rule-table.component.ts | 8 +-
...ch-parameter-provider-parameters.component.html | 6 +-
.../parameter-providers-references.component.html | 2 +-
.../parameter-providers-table.component.html | 4 +-
.../registry-client-table.component.html | 6 +-
.../reporting-task-table.component.html | 4 +-
.../reporting-task-table.component.ts | 10 +--
.../port-cluster-table.component.ts | 12 +--
.../processor-cluster-table.component.ts | 12 +--
...remote-process-group-cluster-table.component.ts | 4 +-
.../port-status-table.component.ts | 12 +--
.../process-group-status-table.component.ts | 10 +--
.../processor-status-table.component.ts | 12 +--
.../remote-process-group-status-table.component.ts | 4 +-
.../user-access-policies.component.html | 2 +-
.../change-component-version-dialog.html | 2 +-
.../_context-menu.component-theme.scss | 3 +-
.../controller-service-references.component.html | 8 +-
.../controller-service-references.component.ts | 10 +--
.../controller-service-table.component.html | 4 +-
.../controller-service-table.component.ts | 12 +--
.../disable-controller-service.component.html | 2 +-
.../enable-controller-service.component.html | 2 +-
.../extension-creation.component.html | 4 +-
.../navigation/_navigation.component-theme.scss | 22 ++----
.../parameter-references.component.html | 6 +-
.../parameter-references.component.ts | 10 +--
.../combo-editor/combo-editor.component.html | 8 +-
.../nf-editor/_nf-editor.component-theme.scss | 2 +-
.../property-table/property-table.component.html | 6 +-
.../provenance-event-dialog.component.html | 10 +--
.../status-history/status-history.component.ts | 2 +-
.../el-function-tip/el-function-tip.component.html | 2 +-
.../parameter-tip/parameter-tip.component.html | 2 +-
.../src/main/nifi/src/assets/styles/_app.scss | 91 ++++++++++++---------
.../nifi/src/assets/styles/_listing-table.scss | 30 +------
.../src/main/nifi/src/assets/themes/material.scss | 29 ++++++-
.../src/main/nifi/src/assets/themes/nifi.scss | 92 +++++++++-------------
.../src/main/nifi/src/styles.scss | 3 -
78 files changed, 384 insertions(+), 496 deletions(-)
diff --git a/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 b/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
deleted file mode 100644
index ce3ef0b1ad..0000000000
--- a/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
+++ /dev/null
@@ -1,34 +0,0 @@
-/*!
- * 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 generate-theme($nifi-theme) {
- // Get the color config from the theme.
- $nifi-theme-color-config: mat.get-color-config($nifi-theme);
-
- // Get the color palette from the color-config.
- $nifi-theme-warn-palette: map.get($nifi-theme-color-config, 'warn');
-
- // Get hues from palette
- $nifi-theme-warn-palette-A400: mat.get-color-from-palette($nifi-theme-warn-palette, 'A400');
-
- .bulletin-warn {
- color: $nifi-theme-warn-palette-A400;
- }
-}
diff --git a/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.ts b/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.ts
index 1839be610e..63a9419a1d 100644
--- a/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.ts
+++ b/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.ts
@@ -146,9 +146,9 @@ export class BulletinBoardList implements AfterViewInit {
return 'bulletin-error warn-color';
case 'warn':
case 'warning':
- return 'bulletin-warn';
+ return 'bulletin-warn caution-color';
default:
- return 'bulletin-normal nifi-success-darker';
+ return 'bulletin-normal success-color-darker';
}
}
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/cluster/feature/cluster.component.spec.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/cluster/feature/cluster.component.spec.ts
index 033d7b12b5..19239736db 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/cluster/feature/cluster.component.spec.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/cluster/feature/cluster.component.spec.ts
@@ -26,6 +26,7 @@ import { MatTabsModule } from '@angular/material/tabs';
import { selectClusterListing } from '../state/cluster-listing/cluster-listing.selectors';
import { clusterListingFeatureKey } from '../state/cluster-listing';
import { ClusterState } from '../state';
+import { ErrorBanner } from '../../../ui/common/error-banner/error-banner.component';
describe('Cluster', () => {
let component: Cluster;
@@ -44,7 +45,7 @@ describe('Cluster', () => {
};
TestBed.configureTestingModule({
declarations: [Cluster],
- imports: [ClusterNodeListing, MatTabsModule, RouterTestingModule, MockNavigation],
+ imports: [ClusterNodeListing, MatTabsModule, RouterTestingModule, MockNavigation, ErrorBanner],
providers: [
provideMockStore({
initialState,
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/cluster/ui/cluster-node-listing/cluster-node-detail-dialog/cluster-node-detail-dialog.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/cluster/ui/cluster-node-listing/cluster-node-detail-dialog/cluster-node-detail-dialog.component.html
index ddbdab730e..f8bb6ffb4e 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/cluster/ui/cluster-node-listing/cluster-node-detail-dialog/cluster-node-detail-dialog.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/cluster/ui/cluster-node-listing/cluster-node-detail-dialog/cluster-node-detail-dialog.component.html
@@ -39,7 +39,7 @@
</ul>
</div>
} @else {
- <div class="unset nifi-surface-default">No Events</div>
+ <div class="unset surface-color">No Events</div>
}
</div>
</div>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/cluster/ui/cluster-node-listing/cluster-node-table/cluster-node-table.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/cluster/ui/cluster-node-listing/cluster-node-table/cluster-node-table.component.html
index 4141b8cbdd..3b0559f4c0 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/cluster/ui/cluster-node-listing/cluster-node-table/cluster-node-table.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/cluster/ui/cluster-node-listing/cluster-node-table/cluster-node-table.component.html
@@ -119,7 +119,7 @@
</th>
<td mat-cell *matCellDef="let item" [title]="formatStartTime(item)">
@if (!item.nodeStartTime) {
- <div class="unset nifi-surface-default">No value set</div>
+ <div class="unset surface-color">No value set</div>
} @else {
{{ formatStartTime(item) }}
}
@@ -135,7 +135,7 @@
</th>
<td mat-cell *matCellDef="let item" [title]="formatHeartbeat(item)">
@if (!item.heartbeat) {
- <div class="unset nifi-surface-default">No value set</div>
+ <div class="unset surface-color">No value set</div>
} @else {
{{ formatHeartbeat(item) }}
}
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/action-details/action-details.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/action-details/action-details.component.html
index d975353a11..f4e784dbb0 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/action-details/action-details.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/action-details/action-details.component.html
@@ -194,7 +194,7 @@
<ng-template #formatValue let-value let-title="title">
@if (value != null) {
@if (value === '') {
- <div class="unset nifi-surface-default">Empty string set</div>
+ <div class="unset surface-color">Empty string set</div>
} @else {
@if (title == null) {
<div class="accent-color font-medium">{{ value }}</div>
@@ -205,7 +205,7 @@
}
}
} @else {
- <div class="unset nifi-surface-default">No value set</div>
+ <div class="unset surface-color">No value set</div>
}
</ng-template>
</mat-dialog-content>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-table/flow-configuration-history-table.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-table/flow-configuration-history-table.component.html
index 8b5767329a..9a5a4cccf5 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-table/flow-configuration-history-table.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-table/flow-configuration-history-table.component.html
@@ -57,11 +57,9 @@
<div class="overflow-ellipsis overflow-hidden whitespace-nowrap">Name</div>
</th>
<td mat-cell *matCellDef="let item" [title]="formatName(item)">
- <span
- [class.nifi-surface-default]="!item.action?.sourceName"
- [class.blank]="!item.action?.sourceName"
- >{{ formatName(item) }}</span
- >
+ <span [class.surface-color]="!item.action?.sourceName" [class.blank]="!item.action?.sourceName">{{
+ formatName(item)
+ }}</span>
</td>
</ng-container>
@@ -99,7 +97,7 @@
[class.even]="even"
(click)="select(row)"
[class.unset]="!canRead(row)"
- [class.nifi-surface-default]="!canRead(row)"
+ [class.surface-color]="!canRead(row)"
[class.selected]="isSelected(row)"></tr>
</table>
</div>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts
index e3f1fcd98b..bd5667bd4e 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts
@@ -1403,7 +1403,7 @@ export class CanvasUtils {
})
.attr('class', function () {
if (terminatedThreads > 0) {
- return `active-thread-count-icon nifi-warn-darker`;
+ return `active-thread-count-icon warn-color-darker`;
} else {
return `active-thread-count-icon primary-color`;
}
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/connection-manager.service.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/connection-manager.service.ts
index e03df6f7c2..209b777b9c 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/connection-manager.service.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/connection-manager.service.ts
@@ -990,21 +990,21 @@ export class ConnectionManager {
return '\uf04d';
}
})
- .classed('running nifi-success-lighter', function () {
+ .classed('running success-color-lighter', function () {
if (d.component.source.exists === false) {
return false;
} else {
return d.component.source.running;
}
})
- .classed('stopped nifi-warn-lighter', function () {
+ .classed('stopped warn-color-lighter', function () {
if (d.component.source.exists === false) {
return false;
} else {
return !d.component.source.running;
}
})
- .classed('is-missing-port invalid', function () {
+ .classed('is-missing-port invalid caution-color', function () {
return d.component.source.exists === false;
});
} else {
@@ -1105,21 +1105,21 @@ export class ConnectionManager {
return '\uf04d';
}
})
- .classed('running nifi-success-lighter', function () {
+ .classed('running success-color-lighter', function () {
if (d.component.destination.exists === false) {
return false;
} else {
return d.component.destination.running;
}
})
- .classed('stopped nifi-warn-lighter', function () {
+ .classed('stopped warn-color-lighter', function () {
if (d.component.destination.exists === false) {
return false;
} else {
return !d.component.destination.running;
}
})
- .classed('is-missing-port invalid', function () {
+ .classed('is-missing-port invalid caution-color', function () {
return d.component.destination.exists === false;
});
} else {
@@ -1454,7 +1454,7 @@ export class ConnectionManager {
return true;
}
})
- .classed('load-balance-icon-active fa-rotate-90 nifi-success-default', function (d: any) {
+ .classed('load-balance-icon-active fa-rotate-90 success-color', function (d: any) {
return d.permissions.canRead && d.component.loadBalanceStatus === 'LOAD_BALANCE_ACTIVE';
})
.classed('primary-color', function (d: any) {
@@ -1722,7 +1722,7 @@ export class ConnectionManager {
.attr('display', function (d: any) {
const predicted: number = d.status.aggregateSnapshot.predictions?.predictedPercentBytes ?? -1;
if (predicted >= 0) {
- return 'unset nifi-surface-default';
+ return 'unset surface-color';
} else {
// don't show it if there is not a valid prediction
return 'none';
@@ -1790,7 +1790,7 @@ export class ConnectionManager {
.attr('display', function (d: any) {
const predicted = d.status.aggregateSnapshot.predictions?.predictedPercentCount ?? -1;
if (predicted >= 0) {
- return 'unset nifi-surface-default';
+ return 'unset surface-color';
} else {
// don't show it if there not a valid prediction
return 'none';
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.ts
index 201027acda..d2b8b39a62 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.ts
@@ -389,9 +389,9 @@ export class PortManager {
if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
clazz = 'invalid';
} else if (d.status.aggregateSnapshot.runStatus === 'Running') {
- clazz = 'running nifi-success-lighter';
+ clazz = 'running success-color-lighter';
} else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
- clazz = 'stopped nifi-warn-lighter';
+ clazz = 'stopped warn-color-lighter';
}
return `run-status-icon ${clazz}`;
@@ -443,10 +443,10 @@ export class PortManager {
return '\ue80a';
}
})
- .classed('transmitting nifi-success-default', function (d: any) {
+ .classed('transmitting success-color', function (d: any) {
return d.status.transmitting === true;
})
- .classed('not-transmitting nifi-surface-default', function (d: any) {
+ .classed('not-transmitting surface-color', function (d: any) {
return d.status.transmitting !== true;
});
diff --git a/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 b/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
index b01207c02b..9abcc4356f 100644
--- a/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
+++ b/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
@@ -132,7 +132,7 @@ export class ProcessGroupManager {
.attr('y', 20)
.attr('width', 300)
.attr('height', 16)
- .attr('class', 'process-group-name');
+ .attr('class', 'process-group-name primary-contrast');
// process group name
processGroup.append('text').attr('x', 10).attr('y', 21).attr('class', 'version-control');
@@ -733,7 +733,7 @@ export class ProcessGroupManager {
// update transmitting
const transmitting = details
.select('text.process-group-transmitting')
- .classed('nifi-success-default', function (d: any) {
+ .classed('success-color', function (d: any) {
return d.permissions.canRead && d.activeRemotePortCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
@@ -757,7 +757,7 @@ export class ProcessGroupManager {
// update not transmitting
const notTransmitting = details
.select('text.process-group-not-transmitting')
- .classed('not-transmitting nifi-surface-default', function (d: any) {
+ .classed('not-transmitting surface-color', function (d: any) {
return d.permissions.canRead && d.inactiveRemotePortCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
@@ -789,7 +789,7 @@ export class ProcessGroupManager {
// update running
const running = details
.select('text.process-group-running')
- .classed('nifi-success-lighter', function (d: any) {
+ .classed('success-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.runningCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
@@ -821,7 +821,7 @@ export class ProcessGroupManager {
// update stopped
const stopped = details
.select('text.process-group-stopped')
- .classed('nifi-warn-lighter', function (d: any) {
+ .classed('warn-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.stoppedCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
@@ -853,7 +853,7 @@ export class ProcessGroupManager {
// update invalid
const invalid = details
.select('text.process-group-invalid')
- .classed('invalid', function (d: any) {
+ .classed('invalid caution-color', function (d: any) {
return d.permissions.canRead && d.component.invalidCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
@@ -885,7 +885,7 @@ export class ProcessGroupManager {
// update disabled
const disabled = details
.select('text.process-group-disabled')
- .classed('disabled nifi-surface-default', function (d: any) {
+ .classed('disabled surface-color', function (d: any) {
return d.permissions.canRead && d.component.disabledCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
@@ -917,7 +917,7 @@ export class ProcessGroupManager {
// up to date current
const upToDate = details
.select('text.process-group-up-to-date')
- .classed('nifi-success-default', function (d: any) {
+ .classed('success-color', function (d: any) {
return d.permissions.canRead && d.component.upToDateCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
@@ -941,7 +941,7 @@ export class ProcessGroupManager {
// update locally modified
const locallyModified = details
.select('text.process-group-locally-modified')
- .classed('nifi-surface-default', function (d: any) {
+ .classed('surface-color', function (d: any) {
return d.permissions.canRead && d.component.locallyModifiedCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
@@ -973,7 +973,7 @@ export class ProcessGroupManager {
// update stale
const stale = details
.select('text.process-group-stale')
- .classed('nifi-warn-lighter', function (d: any) {
+ .classed('warn-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.staleCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
@@ -1005,7 +1005,7 @@ export class ProcessGroupManager {
// update locally modified and stale
const locallyModifiedAndStale = details
.select('text.process-group-locally-modified-and-stale')
- .classed('nifi-warn-lighter', function (d: any) {
+ .classed('warn-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.locallyModifiedAndStaleCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
@@ -1039,7 +1039,7 @@ export class ProcessGroupManager {
// update sync failure
const syncFailure = details
.select('text.process-group-sync-failure')
- .classed('nifi-surface-default', function (d: any) {
+ .classed('surface-color', function (d: any) {
return d.permissions.canRead && d.component.syncFailureCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
@@ -1077,16 +1077,16 @@ export class ProcessGroupManager {
if (self.isUnderVersionControl(processGroupData)) {
const vciState = processGroupData.versionedFlowState;
if (vciState === 'SYNC_FAILURE') {
- return `version-control nifi-surface-default`;
+ return `version-control surface-color`;
} else if (vciState === 'LOCALLY_MODIFIED_AND_STALE') {
- return `version-control nifi-warn-lighter`;
+ return `version-control warn-color-lighter`;
} else if (vciState === 'STALE') {
- return `version-control nifi-warn-lighter`;
+ return `version-control warn-color-lighter`;
} else if (vciState === 'LOCALLY_MODIFIED') {
- return `version-control nifi-surface-default`;
+ return `version-control surface-color`;
} else {
// up to date
- return `version-control nifi-success-default`;
+ return `version-control success-color`;
}
} else {
return 'version-control surface-contrast';
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts
index bb336dcbff..9c77f0018a 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts
@@ -682,13 +682,13 @@ export class ProcessorManager {
let clazz = 'primary-color';
if (d.status.aggregateSnapshot.runStatus === 'Validating') {
- clazz = 'validating nifi-surface-default';
+ clazz = 'validating surface-color';
} else if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
- clazz = 'invalid';
+ clazz = 'invalid caution-color';
} else if (d.status.aggregateSnapshot.runStatus === 'Running') {
- clazz = 'running nifi-success-lighter';
+ clazz = 'running success-color-lighter';
} else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
- clazz = 'stopped nifi-warn-lighter';
+ clazz = 'stopped warn-color-lighter';
}
return `run-status-icon ${clazz}`;
diff --git a/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 b/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
index 9b2caee079..7b2d361fa5 100644
--- a/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
+++ b/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
@@ -131,7 +131,7 @@ export class RemoteProcessGroupManager {
.attr('y', 20)
.attr('width', 305)
.attr('height', 16)
- .attr('class', 'remote-process-group-name');
+ .attr('class', 'remote-process-group-name primary-contrast');
this.selectableBehavior.activate(remoteProcessGroup);
this.quickSelectBehavior.activate(remoteProcessGroup);
@@ -603,13 +603,13 @@ export class RemoteProcessGroupManager {
}
return family;
})
- .classed('invalid', function (d: any) {
+ .classed('invalid caution-color', function (d: any) {
return self.hasIssues(d);
})
- .classed('transmitting nifi-success-default', function (d: any) {
+ .classed('transmitting success-color', function (d: any) {
return !self.hasIssues(d) && d.status.transmissionStatus === 'Transmitting';
})
- .classed('not-transmitting nifi-surface-default', function (d: any) {
+ .classed('not-transmitting surface-color', function (d: any) {
return !self.hasIssues(d) && d.status.transmissionStatus !== 'Transmitting';
})
.each(function (this: any, d: any) {
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
index 2e427f37fb..f47910f778 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
@@ -26,41 +26,26 @@
// Get the palettes from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
$material-theme-accent-palette: map.get($material-theme-color-config, 'accent');
+ $material-theme-warn-palette: map.get($material-theme-color-config, 'warn');
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
$nifi-theme-success-palette: map.get($nifi-theme-color-config, 'accent');
- $nifi-theme-warn-palette: map.get($nifi-theme-color-config, 'warn');
+ $nifi-theme-caution-palette: map.get($nifi-theme-color-config, 'warn');
// Get hues from palette
$material-theme-primary-palette-darker: mat.get-color-from-palette($material-theme-primary-palette, darker);
$material-theme-primary-palette-lighter: mat.get-color-from-palette($material-theme-primary-palette, lighter);
$material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette, default);
- $material-theme-primary-palette-default-contrast: mat.get-color-from-palette(
- $material-theme-primary-palette,
- default-contrast
- );
- $material-theme-primary-palette-darker-contrast: mat.get-color-from-palette(
- $material-theme-primary-palette,
- darker-contrast
- );
-
$material-theme-accent-palette-default: mat.get-color-from-palette($material-theme-accent-palette, default);
// Canvas colors
$nifi-theme-surface-palette-default: mat.get-color-from-palette($nifi-theme-surface-palette, default);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
- $nifi-theme-surface-palette-300: mat.get-color-from-palette($nifi-theme-surface-palette, 300);
- $nifi-theme-surface-palette-900: mat.get-color-from-palette($nifi-theme-surface-palette, 900);
$nifi-theme-success-palette-lighter: mat.get-color-from-palette($nifi-theme-success-palette, lighter);
- $nifi-theme-success-palette-A700: mat.get-color-from-palette($nifi-theme-success-palette, 'A700');
$nifi-theme-success-palette-50: mat.get-color-from-palette($nifi-theme-success-palette, 50);
- $nifi-theme-success-palette-500: mat.get-color-from-palette($nifi-theme-success-palette, 500);
$nifi-theme-success-palette-900: mat.get-color-from-palette($nifi-theme-success-palette, 900);
- $nifi-theme-warn-palette-darker: mat.get-color-from-palette($nifi-theme-warn-palette, darker);
- $nifi-theme-warn-palette-800: mat.get-color-from-palette($nifi-theme-warn-palette, 800);
- $nifi-theme-warn-palette-A200: mat.get-color-from-palette($nifi-theme-warn-palette, 'A200');
- $nifi-theme-warn-palette-A400: mat.get-color-from-palette($nifi-theme-warn-palette, 'A400');
- $nifi-theme-warn-palette-A700: mat.get-color-from-palette($nifi-theme-warn-palette, 'A700');
+ $material-theme-warn-palette-darker: mat.get-color-from-palette($material-theme-warn-palette, darker);
+ $nifi-theme-caution-palette-darker: mat.get-color-from-palette($nifi-theme-caution-palette, darker);
// Shadows should always be darker. We explicitly set this so the SVG shadows are correct in both modes.
$drop-shadow-color: black;
@@ -144,7 +129,7 @@
}
g.component rect.border.unauthorized {
- stroke: $nifi-theme-warn-palette-darker !important;
+ stroke: $material-theme-warn-palette-darker !important;
}
g.component rect.border.ghost {
@@ -160,7 +145,7 @@
}
text.stats-label {
- fill: $surface-contrast;
+ @extend .surface-contrast;
}
text.stats-value {
@@ -180,7 +165,7 @@
}
rect.bulletin-background {
- fill: $nifi-theme-warn-palette-darker;
+ fill: $material-theme-warn-palette-darker;
}
text.active-thread-count {
@@ -197,7 +182,7 @@
*/
g.component.connectable-destination rect.border {
- stroke: $nifi-theme-success-palette-500;
+ stroke: #00ff00;
}
rect.component-selection,
@@ -219,7 +204,7 @@
}
#connection-full-drop-shadow feFlood {
- flood-color: $nifi-theme-warn-palette-darker;
+ flood-color: $material-theme-warn-palette-darker;
}
rect.processor-read-write-stats {
@@ -264,7 +249,7 @@
}
text.restricted {
- fill: $nifi-theme-warn-palette-darker;
+ fill: $material-theme-warn-palette-darker;
}
/*
@@ -280,7 +265,7 @@
}
g.connection rect.border.unauthorized {
- stroke: $nifi-theme-warn-palette-darker;
+ stroke: $material-theme-warn-palette-darker;
}
g.connection rect.border.full {
@@ -288,15 +273,15 @@
}
g.connection.selected rect.border {
- stroke: $nifi-theme-warn-palette-A700;
+ stroke: $nifi-theme-caution-palette-darker;
}
path.connector {
- stroke: $nifi-theme-warn-palette-800;
+ stroke: #ff0000;
}
path.connector.connectable {
- stroke: $nifi-theme-success-palette-500;
+ stroke: #00ff00;
}
g.connection path.connection-path {
@@ -305,11 +290,11 @@
}
g.connection path.connection-path.full {
- stroke: $nifi-theme-warn-palette-darker;
+ stroke: $material-theme-warn-palette-darker;
}
g.connection path.connection-path.unauthorized {
- stroke: $nifi-theme-warn-palette-darker;
+ stroke: $material-theme-warn-palette-darker;
}
g.connection rect.backpressure-tick {
@@ -352,11 +337,11 @@
}
g.connection rect.backpressure-percent.warning {
- fill: $nifi-theme-warn-palette-A400;
+ fill: $nifi-theme-caution-palette-darker;
}
g.connection rect.backpressure-percent.error {
- fill: $nifi-theme-warn-palette-darker;
+ fill: $material-theme-warn-palette-darker;
}
/* ghost connection */
@@ -367,7 +352,7 @@
}
g.connection path.connection-selection-path {
- stroke: $nifi-theme-warn-palette-A700;
+ stroke: $nifi-theme-caution-palette-darker;
fill: none;
}
@@ -376,25 +361,25 @@
}
g.connection rect.startpoint {
- stroke: $nifi-theme-warn-palette-800;
- fill: $nifi-theme-warn-palette-800;
+ stroke: #ff0000;
+ fill: #ff0000;
}
g.connection rect.midpoint {
- stroke: $nifi-theme-warn-palette-A700;
- fill: $nifi-theme-warn-palette-A700;
+ stroke: $nifi-theme-caution-palette-darker;
+ fill: $nifi-theme-caution-palette-darker;
}
g.connection rect.endpoint {
- stroke: $nifi-theme-success-palette-A700;
- fill: $nifi-theme-success-palette-A700;
+ stroke: #0000ff;
+ fill: #0000ff;
}
/* labels */
g.label rect.labelpoint {
- stroke: $nifi-theme-warn-palette-A700;
- fill: $nifi-theme-warn-palette-A700;
+ stroke: $nifi-theme-caution-palette-darker;
+ fill: $nifi-theme-caution-palette-darker;
}
/* funnels */
@@ -406,7 +391,7 @@
/* ports */
text.port-name {
- fill: $surface-contrast;
+ @extend .surface-contrast;
}
text.port-icon {
@@ -428,15 +413,6 @@
fill: if($is-dark, $material-theme-primary-palette-default, $material-theme-primary-palette-darker);
}
- text.process-group-name,
- text.remote-process-group-name {
- fill: if(
- $is-dark,
- $material-theme-primary-palette-default-contrast,
- $material-theme-primary-palette-darker-contrast
- );
- }
-
text.version-control,
text.not-transmitting,
text.transmitting,
@@ -454,7 +430,7 @@
}
g.process-group.drop rect.border {
- stroke: $nifi-theme-success-palette-A700;
+ stroke: #0000ff;
}
/* remote process group */
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.ts
index 5d12183dd2..be90b908fb 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.ts
@@ -329,11 +329,11 @@ export class Canvas implements OnInit, OnDestroy {
.attr('orient', 'auto')
.attr('class', function (d: string) {
if (d === 'ghost') {
- return 'ghost nifi-surface-default';
+ return 'ghost surface-color';
} else if (d === 'unauthorized') {
- return 'unauthorized nifi-warn-darker';
+ return 'unauthorized warn-color-darker';
} else if (d === 'full') {
- return 'full nifi-warn-darker';
+ return 'full warn-color-darker';
} else {
return 'surface-contrast';
}
diff --git a/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 b/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
index 246d2418dd..670f4d8815 100644
--- a/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
+++ b/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
@@ -29,14 +29,6 @@
$is-dark: map-get($nifi-theme-color-config, is-dark);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
- $nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
- $nifi-theme-surface-palette,
- darker-contrast
- );
- $nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
- $nifi-theme-surface-palette,
- lighter-contrast
- );
div.navigation-control {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
diff --git a/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 b/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
index 348a6e558f..252fb94c0c 100644
--- a/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
+++ b/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
@@ -29,14 +29,6 @@
$is-dark: map-get($nifi-theme-color-config, is-dark);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
- $nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
- $nifi-theme-surface-palette,
- darker-contrast
- );
- $nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
- $nifi-theme-surface-palette,
- lighter-contrast
- );
div.operation-control {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
@@ -50,9 +42,6 @@
transparent 35px
);
}
-
- .operation-context-type {
- }
}
}
}
diff --git a/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 b/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
index b6e3426872..e20ac3c9fc 100644
--- a/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
+++ b/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
@@ -25,14 +25,14 @@
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
- $nifi-theme-warn-palette: map.get($nifi-theme-color-config, 'warn');
+ $material-theme-warn-palette: map.get($material-theme-color-config, 'warn');
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($nifi-theme-color-config, is-dark);
$material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette);
$material-theme-primary-palette-lighter: mat.get-color-from-palette($material-theme-primary-palette, lighter);
- $nifi-theme-warn-palette-darker: mat.get-color-from-palette($nifi-theme-warn-palette, darker);
+ $material-theme-warn-palette-darker: mat.get-color-from-palette($material-theme-warn-palette, darker);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
@@ -55,6 +55,7 @@
);
.fa {
+ // invert the contrast colors since the surface is dark in light mode and light in dark mode
color: if(
$is-dark,
$nifi-theme-surface-palette-lighter-contrast,
@@ -64,7 +65,7 @@
}
.controller-bulletins.has-bulletins {
- background-color: $nifi-theme-warn-palette-darker;
+ background-color: $material-theme-warn-palette-darker;
}
}
}
diff --git a/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 b/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
index 40ef5dca11..1903fa5d2c 100644
--- a/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
+++ b/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
@@ -35,7 +35,7 @@
<div class="flex items-center gap-x-2" title="Transmitting Remote Process Groups">
<div
class="fa fa-bullseye"
- [class]="getActiveStyle(controllerStatus.activeRemotePortCount, 'nifi-success-default')"></div>
+ [class]="getActiveStyle(controllerStatus.activeRemotePortCount, 'success-color')"></div>
<div class="accent-color font-medium">
{{ formatValue(controllerStatus.activeRemotePortCount) }}
</div>
@@ -43,7 +43,7 @@
<div class="flex items-center gap-x-2" title="Not Transmitting Remote Process Groups">
<div
class="icon icon-transmit-false"
- [class]="getActiveStyle(controllerStatus.inactiveRemotePortCount, 'nifi-surface-default')"></div>
+ [class]="getActiveStyle(controllerStatus.inactiveRemotePortCount, 'surface-color')"></div>
<div class="accent-color font-medium">
{{ formatValue(controllerStatus.inactiveRemotePortCount) }}
</div>
@@ -51,7 +51,7 @@
<div class="flex items-center gap-x-2" title="Running Components">
<div
class="fa fa-play"
- [class]="getActiveStyle(controllerStatus.runningCount, 'nifi-success-lighter')"></div>
+ [class]="getActiveStyle(controllerStatus.runningCount, 'success-color-lighter')"></div>
<div class="accent-color font-medium">
{{ formatValue(controllerStatus.runningCount) }}
</div>
@@ -59,13 +59,15 @@
<div class="flex items-center gap-x-2" title="Stopped Components">
<div
class="fa fa-stop"
- [class]="getActiveStyle(controllerStatus.stoppedCount, 'nifi-warn-lighter')"></div>
+ [class]="getActiveStyle(controllerStatus.stoppedCount, 'warn-color-lighter')"></div>
<div class="accent-color font-medium">
{{ formatValue(controllerStatus.stoppedCount) }}
</div>
</div>
<div class="flex items-center gap-x-2" title="Invalid Components">
- <div class="fa fa-warning" [class]="getActiveStyle(controllerStatus.invalidCount, 'invalid')"></div>
+ <div
+ class="fa fa-warning invalid"
+ [class]="getActiveStyle(controllerStatus.invalidCount, 'caution-color')"></div>
<div class="accent-color font-medium">
{{ formatValue(controllerStatus.invalidCount) }}
</div>
@@ -73,7 +75,7 @@
<div class="flex items-center gap-x-2" title="Disabled Components">
<div
class="icon icon-enable-false"
- [class]="getActiveStyle(controllerStatus.disabledCount, 'nifi-surface-default')"></div>
+ [class]="getActiveStyle(controllerStatus.disabledCount, 'surface-color')"></div>
<div class="accent-color font-medium">
{{ formatValue(controllerStatus.disabledCount) }}
</div>
@@ -81,7 +83,7 @@
<div class="flex items-center gap-x-2" title="Up to date Versioned Process Groups">
<div
class="fa fa-check"
- [class]="getActiveStyle(controllerStatus.upToDateCount, 'nifi-success-default')"></div>
+ [class]="getActiveStyle(controllerStatus.upToDateCount, 'success-color')"></div>
<div class="accent-color font-medium">
{{ formatValue(controllerStatus.upToDateCount) }}
</div>
@@ -89,7 +91,7 @@
<div class="flex items-center gap-x-2" title="Locally modified Versioned Process Groups">
<div
class="fa fa-asterisk"
- [class]="getActiveStyle(controllerStatus.locallyModifiedCount, 'nifi-surface-default')"></div>
+ [class]="getActiveStyle(controllerStatus.locallyModifiedCount, 'surface-color')"></div>
<div class="accent-color font-medium">
{{ formatValue(controllerStatus.locallyModifiedCount) }}
</div>
@@ -97,7 +99,7 @@
<div class="flex items-center gap-x-2" title="Stale Versioned Process Groups">
<div
class="fa fa-arrow-circle-up"
- [class]="getActiveStyle(controllerStatus.staleCount, 'nifi-warn-lighter')"></div>
+ [class]="getActiveStyle(controllerStatus.staleCount, 'warn-color-lighter')"></div>
<div class="accent-color font-medium">
{{ formatValue(controllerStatus.staleCount) }}
</div>
@@ -105,7 +107,7 @@
<div class="flex items-center gap-x-2" title="Locally modified and stale Versioned Process Groups">
<div
class="fa fa-exclamation-circle"
- [class]="getActiveStyle(controllerStatus.locallyModifiedAndStaleCount, 'nifi-warn-lighter')"></div>
+ [class]="getActiveStyle(controllerStatus.locallyModifiedAndStaleCount, 'warn-color-lighter')"></div>
<div class="accent-color font-medium">
{{ formatValue(controllerStatus.locallyModifiedAndStaleCount) }}
</div>
@@ -113,7 +115,7 @@
<div class="flex items-center gap-x-2" title="Sync failure Versioned Process Groups">
<div
class="fa fa-question"
- [class]="getActiveStyle(controllerStatus.syncFailureCount, 'nifi-surface-default')"></div>
+ [class]="getActiveStyle(controllerStatus.syncFailureCount, 'surface-color')"></div>
<div class="accent-color font-medium">
{{ formatValue(controllerStatus.syncFailureCount) }}
</div>
diff --git a/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.ts b/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.ts
index d27f184685..c5ee2fb76a 100644
--- a/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.ts
+++ b/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.ts
@@ -69,7 +69,7 @@ export class FlowStatus {
this.clusterSummary?.connectedToCluster === false ||
this.clusterSummary?.connectedNodeCount != this.clusterSummary?.totalNodeCount
) {
- return 'nifi-warn-darker';
+ return 'warn-color-darker';
}
return 'primary-color';
diff --git a/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 b/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
index e8b4e0ed9e..fd5c529067 100644
--- a/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
+++ b/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
@@ -29,34 +29,22 @@
// Get hues from palette
$is-dark: map-get($material-theme-color-config, is-dark);
- $nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
- $nifi-theme-surface-palette,
- darker-contrast
- );
- $nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
- $nifi-theme-surface-palette,
- lighter-contrast
- );
$material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette);
$material-theme-primary-palette-lighter: mat.get-color-from-palette($material-theme-primary-palette, lighter);
$material-theme-primary-palette-darker: mat.get-color-from-palette($material-theme-primary-palette, darker);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
+ $hover: var(--mat-menu-item-hover-state-layer-color);
+
.new-canvas-item {
.icon {
&.hovering {
// This solution re-uses the highlight value used throughout the UI, but because we need to hide the non-hover
// version of the icons, we create a double layered gradient with the matching background color of the
// navigation bar, then put the highlight on top of it.
- background: linear-gradient(
- var(--mat-menu-item-hover-state-layer-color),
- var(--mat-menu-item-hover-state-layer-color)
- ),
- linear-gradient(
- if($is-dark, $nifi-theme-surface-palette-lighter, $nifi-theme-surface-palette-lighter),
- if($is-dark, $nifi-theme-surface-palette-lighter, $nifi-theme-surface-palette-lighter)
- );
+ background: linear-gradient($hover, $hover),
+ linear-gradient($nifi-theme-surface-palette-lighter, $nifi-theme-surface-palette-lighter);
.component-button-grip {
background: repeating-linear-gradient(
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.html
index 9ce65f41ec..ce5e8f1340 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.html
@@ -28,7 +28,7 @@
(overlayOutsideClick)="backdropClicked($event)">
<div class="search-results mat-elevation-z8 w-96 border p-2 text-sm max-h-96 overflow-y-auto">
@if (searching) {
- <div class="unset nifi-surface-default italic">Searching</div>
+ <div class="unset surface-color italic">Searching</div>
} @else {
@if (hasResults()) {
<ul>
@@ -170,7 +170,7 @@
}
</ul>
} @else {
- <div class="unset nifi-surface-default italic">No results matched the search terms</div>
+ <div class="unset surface-color italic">No results matched the search terms</div>
}
}
</div>
diff --git a/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 b/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
index 82a73182ec..c00bc2622c 100644
--- a/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
+++ b/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
@@ -94,7 +94,7 @@
</div>
<div class="flex flex-col mb-5">
<div>Id</div>
- <div class="unset nifi-surface-default">No value set</div>
+ <div class="unset surface-color">No value set</div>
</div>
<div>
<mat-form-field>
diff --git a/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 b/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
index 95f849c34d..8fbfc77a83 100644
--- a/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
+++ b/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
@@ -36,7 +36,7 @@
name="selected-{{ i }}"
(change)="handleChanged()"
[disabled]="isDisabled">
- <span [class.nifi-surface-default]="!item.available" [class.unset]="!item.available">{{
+ <span [class.surface-color]="!item.available" [class.unset]="!item.available">{{
item.relationshipName
}}</span>
</mat-checkbox>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/save-version-dialog/save-version-dialog.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/save-version-dialog/save-version-dialog.component.html
index 91314699bc..d13c413bc6 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/save-version-dialog/save-version-dialog.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/save-version-dialog/save-version-dialog.component.html
@@ -38,7 +38,7 @@
<div>
<div>Flow Description</div>
@if (versionControlInformation.flowDescription === '') {
- <div class="unset nifi-surface-default">Empty string set</div>
+ <div class="unset surface-color">Empty string set</div>
} @else {
<div class="accent-color">{{ versionControlInformation.flowDescription }}</div>
}
diff --git a/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 b/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
index aac174b676..737e4027ac 100644
--- a/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
+++ b/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
@@ -57,7 +57,7 @@
<div class="flex flex-col gap-y-3 mb-3">
<div class="flex flex-col">
<div>Parameter Context</div>
- <div class="unset nifi-surface-default">
+ <div class="unset surface-color">
Parameters will be imported from the uploaded Flow Definition.
</div>
</div>
diff --git a/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 b/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
index 0db42494cb..8cb5355223 100644
--- a/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
+++ b/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
@@ -221,7 +221,7 @@
(change)="runDurationChanged()"></run-duration-slider>
@if (shouldShowWarning()) {
<div class="w-80">
- <div class="fa fa-warning has-errors"></div>
+ <div class="fa fa-warning has-errors caution-color"></div>
Source Processors with a run duration greater than 0ms and no incoming
connections could lose data when NiFi is shutdown.
</div>
@@ -253,7 +253,7 @@
@if (request.entity.component.relationships.length > 0) {
<relationship-settings formControlName="relationshipConfiguration"></relationship-settings>
} @else {
- <div class="unset nifi-surface-default">This processor has no relationships.</div>
+ <div class="unset surface-color">This processor has no relationships.</div>
}
</div>
</mat-tab>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/common/breadcrumbs/breadcrumbs.component.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/common/breadcrumbs/breadcrumbs.component.ts
index 9f33a21077..62131580a3 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/common/breadcrumbs/breadcrumbs.component.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/common/breadcrumbs/breadcrumbs.component.ts
@@ -71,16 +71,16 @@ export class Breadcrumbs {
const vciState: string = breadcrumbEntity.versionedFlowState;
if (vciState) {
if (vciState === 'SYNC_FAILURE') {
- return 'sync-failure nifi-surface-default fa fa-question';
+ return 'sync-failure surface-color fa fa-question';
} else if (vciState === 'LOCALLY_MODIFIED_AND_STALE') {
- return 'locally-modified-and-stale nifi-warn-lighter fa fa-exclamation-circle';
+ return 'locally-modified-and-stale warn-color-lighter fa fa-exclamation-circle';
} else if (vciState === 'STALE') {
- return 'stale nifi-warn-lighter fa fa-arrow-circle-up';
+ return 'stale warn-color-lighter fa fa-arrow-circle-up';
} else if (vciState === 'LOCALLY_MODIFIED') {
- return 'locally-modified nifi-surface-default fa fa-asterisk';
+ return 'locally-modified surface-color fa fa-asterisk';
} else {
// up to date
- return 'up-to-date nifi-success-default fa fa-check';
+ return 'up-to-date success-color fa fa-check';
}
} else {
return '';
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/manage-remote-ports.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/manage-remote-ports.component.html
index b4e70d7a95..027931ca1f 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/manage-remote-ports.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/manage-remote-ports.component.html
@@ -76,7 +76,7 @@
}
@if (portExists(item)) {
<div
- class="pointer fa fa-warning invalid"
+ class="pointer fa fa-warning invalid caution-color"
nifiTooltip
[delayClose]="false"
[tooltipComponentType]="TextTip"
@@ -115,7 +115,7 @@
</th>
<td mat-cell *matCellDef="let item" [title]="formatTasks(item)">
<span
- [class.nifi-surface-default]="!item.concurrentlySchedulableTaskCount"
+ [class.surface-color]="!item.concurrentlySchedulableTaskCount"
[class.blank]="!item.concurrentlySchedulableTaskCount">
{{ formatTasks(item) }}
</span>
@@ -143,7 +143,7 @@
</th>
<td mat-cell *matCellDef="let item" [title]="formatCount(item)">
<span
- [class.nifi-surface-default]="isCountBlank(item)"
+ [class.surface-color]="isCountBlank(item)"
[class.blank]="isCountBlank(item)">
{{ formatCount(item) }}
</span>
@@ -159,7 +159,7 @@
</th>
<td mat-cell *matCellDef="let item" [title]="formatSize(item)">
<span
- [class.nifi-surface-default]="isSizeBlank(item)"
+ [class.surface-color]="isSizeBlank(item)"
[class.blank]="isSizeBlank(item)">
{{ formatSize(item) }}
</span>
@@ -175,7 +175,7 @@
</th>
<td mat-cell *matCellDef="let item" [title]="formatDuration(item)">
<span
- [class.nifi-surface-default]="isDurationBlank(item)"
+ [class.surface-color]="isDurationBlank(item)"
[class.blank]="isDurationBlank(item)">
{{ formatDuration(item) }}
</span>
@@ -201,13 +201,13 @@
@if (currentRpg) {
@if (port.transmitting) {
<div
- class="pointer nifi-success-default fa fa-bullseye"
+ class="pointer success-color fa fa-bullseye"
(click)="toggleTransmission(port)"
title="Transmitting: click to toggle port transmission"></div>
} @else {
@if (port.connected && port.exists) {
<div
- class="pointer not-transmitting icon icon-transmit-false nifi-surface-default"
+ class="pointer not-transmitting icon icon-transmit-false surface-color"
(click)="toggleTransmission(port)"
title="Not Transmitting: click to toggle port transmission"></div>
}
diff --git a/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 b/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
index 6e4a3b3ff1..90baf83c0d 100644
--- a/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
+++ b/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
@@ -35,7 +35,7 @@
<div class="fa fa-times warn-color"></div>
} @else {
@if (updateStep.complete) {
- <div class="fa fa-check nifi-success-default"></div>
+ <div class="fa fa-check success-color"></div>
} @else {
<div class="fa fa-spin fa-circle-o-notch primary-color"></div>
}
@@ -57,7 +57,7 @@
{{ getUpdatedParameters() }}
</div>
} @else {
- <div class="unset nifi-surface-default">No parameters updated</div>
+ <div class="unset surface-color">No parameters updated</div>
}
</div>
<div class="flex-1 flex flex-col">
diff --git a/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.html b/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.html
index 98cbf2a221..af9a4ecd70 100644
--- a/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.html
+++ b/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.html
@@ -30,7 +30,7 @@
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let item">
<div
- [ngClass]="{ unset: !canRead(item), 'nifi-surface-default': !canRead(item) }"
+ [ngClass]="{ unset: !canRead(item), 'surface-color': !canRead(item) }"
class="overflow-hidden overflow-ellipsis whitespace-nowrap">
{{ formatName(item) }}
</div>
diff --git a/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.html b/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.html
index e8613b69b5..6bdcb0d0c0 100644
--- a/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.html
+++ b/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.html
@@ -51,7 +51,7 @@
<th mat-header-cell *matHeaderCellDef>Value</th>
<td mat-cell *matCellDef="let item">
@if (isNull(item.entity.parameter.value)) {
- <div class="unset nifi-surface-default">No value set</div>
+ <div class="unset surface-color">No value set</div>
} @else {
<ng-container
*ngTemplateOutlet="
@@ -59,7 +59,7 @@
context: { $implicit: item.entity.parameter.value }
"></ng-container>
<ng-template #sensitive>
- <div class="sensitive nifi-surface-default">Sensitive value set</div>
+ <div class="sensitive surface-color">Sensitive value set</div>
</ng-template>
<ng-template #nonSensitive let-value>
<ng-container
@@ -69,7 +69,7 @@
"></ng-container>
</ng-template>
<ng-template #blank>
- <div class="empty nifi-surface-default">Empty string set</div>
+ <div class="empty surface-color">Empty string set</div>
</ng-template>
<ng-template #nonBlank let-value>
<div class="flex justify-between items-center">
@@ -135,7 +135,7 @@
@if (selectedItem) {
<span>{{ selectedItem.entity.parameter.name }}</span>
} @else {
- <span class="unset nifi-surface-default">None</span>
+ <span class="unset surface-color">None</span>
}
</div>
</div>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/process-group-references/process-group-references.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/process-group-references/process-group-references.component.html
index 50bfc5d5ae..d6376a1b6c 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/process-group-references/process-group-references.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/process-group-references/process-group-references.component.html
@@ -64,7 +64,7 @@
@if (references.length > 0) {
@for (reference of references; track reference) {
<li>
- <div class="unset nifi-surface-default">{{ reference.id }}</div>
+ <div class="unset surface-color">{{ reference.id }}</div>
</li>
}
}
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss
index 149c3b08a1..465a8b5ba3 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss
@@ -67,7 +67,7 @@
}
marker {
- fill: $surface-contrast;
+ @extend .surface-contrast;
}
circle.flowfile-link {
diff --git a/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 b/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
index 0c87c8bfc0..a1c03cd925 100644
--- a/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
+++ b/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
@@ -23,54 +23,41 @@
$material-theme-color-config: mat.get-color-config($material-theme);
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
- //// Get the color palette from the color-config.
+ // Get the color palette from the color-config.
+ $material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
$material-theme-accent-palette: map.get($material-theme-color-config, 'accent');
- $nifi-theme-warn-palette: map.get($nifi-theme-color-config, 'warn');
+ $material-theme-warn-palette: map.get($material-theme-color-config, 'warn');
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
// Get hues from palette
- $material-theme-accent-palette-default: mat.get-color-from-palette($material-theme-accent-palette, 'default');
+ $material-theme-primary-palette-darker: mat.get-color-from-palette($material-theme-primary-palette, darker);
+ $material-theme-accent-palette-default: mat.get-color-from-palette($material-theme-accent-palette, default);
$is-dark: map-get($nifi-theme-color-config, is-dark);
- $nifi-theme-warn-palette-darker: mat.get-color-from-palette($nifi-theme-warn-palette, 'darker');
- $nifi-theme-warn-palette-A200: mat.get-color-from-palette($nifi-theme-warn-palette, 'A200');
- $nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
- $nifi-theme-surface-palette,
- darker-contrast
- );
- $nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
- $nifi-theme-surface-palette,
- lighter-contrast
- );
- $surface-contrast: if(
- $is-dark,
- $nifi-theme-surface-palette-darker-contrast,
- $nifi-theme-surface-palette-lighter-contrast
- );
+ $material-theme-warn-palette-darker: mat.get-color-from-palette($material-theme-warn-palette, darker);
#lineage {
canvas,
svg {
text.event-type {
- fill: $surface-contrast;
+ @extend .surface-contrast;
}
path.link.selected {
- stroke: $nifi-theme-warn-palette-darker;
- fill: $nifi-theme-warn-palette-darker;
+ stroke: $material-theme-warn-palette-darker;
}
g.event circle.selected {
- fill: $nifi-theme-warn-palette-darker;
+ fill: $material-theme-warn-palette-darker;
}
g.event circle.context {
- fill: $nifi-theme-warn-palette-A200;
+ stroke: $material-theme-primary-palette-darker;
}
g.flowfile circle.context,
g.event circle.context {
- stroke: $material-theme-accent-palette-default;
+ stroke: if($is-dark, $material-theme-accent-palette-default, $material-theme-primary-palette-darker);
}
}
}
diff --git a/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 b/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
index 0ba0182818..9ee4a8e268 100644
--- a/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
+++ b/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
@@ -325,7 +325,7 @@ export class LineageComponent implements OnInit {
.attr('orient', 'auto')
.attr('class', function (d) {
if (d.indexOf('SELECTED') >= 0) {
- return 'nifi-warn-darker';
+ return 'warn-color-darker';
} else {
return 'surface-contrast';
}
diff --git a/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 b/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
index 5023ca9af3..6837b0834e 100644
--- a/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
+++ b/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
@@ -30,7 +30,7 @@
</div>
}
@if (request.options.searchableFields.length === 0) {
- <div class="unset nifi-surface-default mb-5">
+ <div class="unset surface-color mb-5">
No searchable fields are available. Search criteria based on date, time, and file size still available.
</div>
}
diff --git a/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 b/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
index 5852afa199..59bfeb5c0b 100644
--- a/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
+++ b/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
@@ -100,7 +100,7 @@
</div>
</ng-container>
<ng-template #noDuration>
- <div class="unset nifi-surface-default">No value set</div>
+ <div class="unset surface-color">No value set</div>
</ng-template>
</ng-template>
</div>
@@ -171,7 +171,7 @@
</div>
</div>
<ng-template #noContent>
- <div class="unset nifi-surface-default">No Content Available</div>
+ <div class="unset surface-color">No Content Available</div>
</ng-template>
</div>
</div>
@@ -202,7 +202,7 @@
<ng-template #formatValue let-value let-title="title">
<ng-container *ngIf="value != null; else nullValue">
<ng-container *ngIf="value === ''; else nonEmptyValue">
- <div class="unset nifi-surface-default">Empty string set</div>
+ <div class="unset surface-color">Empty string set</div>
</ng-container>
<ng-template #nonEmptyValue>
<div class="accent-color font-medium" *ngIf="title == null; else valueWithTitle">
@@ -214,7 +214,7 @@
</ng-template>
</ng-container>
<ng-template #nullValue>
- <div class="unset nifi-surface-default">No value set</div>
+ <div class="unset surface-color">No value set</div>
</ng-template>
</ng-template>
<ng-template #formatContentValue let-value let-title="title">
@@ -227,7 +227,7 @@
</ng-template>
</ng-container>
<ng-template #nullValue>
- <div class="unset nifi-surface-default">No value previously set</div>
+ <div class="unset surface-color">No value previously set</div>
</ng-template>
</ng-template>
</mat-dialog-content>
diff --git a/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.html b/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.html
index 53fb9f94df..37e2f01003 100644
--- a/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.html
+++ b/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.html
@@ -45,7 +45,7 @@
}
@if (hasErrors(item)) {
<div
- class="pointer fa fa-warning has-errors"
+ class="pointer fa fa-warning has-errors caution-color"
[delayClose]="false"
nifiTooltip
[tooltipComponentType]="ValidationErrorsTip"
@@ -71,7 +71,7 @@
@if (canRead(item)) {
{{ item.component.name }}
} @else {
- <div class="unset nifi-surface-default">{{ item.id }}</div>
+ <div class="unset surface-color">{{ item.id }}</div>
}
</td>
</ng-container>
diff --git a/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 b/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
index dbfc0fde4d..b332b22535 100644
--- a/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
+++ b/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
@@ -160,14 +160,14 @@ export class FlowAnalysisRuleTable {
getStateIcon(entity: FlowAnalysisRuleEntity): string {
if (entity.status.validationStatus === 'VALIDATING') {
- return 'validating nifi-surface-default fa fa-spin fa-circle-o-notch';
+ return 'validating surface-color fa fa-spin fa-circle-o-notch';
} else if (entity.status.validationStatus === 'INVALID') {
- return 'invalid fa fa-warning';
+ return 'invalid fa fa-warning caution-color';
} else {
if (entity.status.runStatus === 'DISABLED') {
- return 'disabled nifi-surface-default icon icon-enable-false';
+ return 'disabled surface-color icon icon-enable-false';
} else if (entity.status.runStatus === 'ENABLED') {
- return 'enabled nifi-success-default fa fa-flash';
+ return 'enabled success-color fa fa-flash';
}
}
return '';
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
index 59cf0b19b1..7931e1ec7d 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
@@ -50,7 +50,7 @@
</div>
<div
*ngIf="updateStep.complete; else stepInProgress"
- class="fa fa-check complete nifi-success-default"></div>
+ class="fa fa-check complete success-color"></div>
<ng-template #stepInProgress>
<div class="fa fa-spin fa-circle-o-notch primary-color"></div>
</ng-template>
@@ -111,7 +111,7 @@
</div>
<ng-template #none>
- <div class="unset nifi-surface-default">None</div>
+ <div class="unset surface-color">None</div>
</ng-template>
</div>
</div>
@@ -345,7 +345,7 @@
</div>
<ng-template #none>
- <div class="unset nifi-surface-default">None</div>
+ <div class="unset surface-color">None</div>
</ng-template>
</div>
</div>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-context-references/parameter-providers-references.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-context-references/parameter-providers-references.component.html
index ce0e5a60eb..7b2e81ad16 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-context-references/parameter-providers-references.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/parameter-context-references/parameter-providers-references.component.html
@@ -67,7 +67,7 @@
<div class="references">
@for (reference of references; track reference) {
<div class="flex items-center gap-x-2">
- <div class="unset nifi-surface-default">{{ reference.id }}</div>
+ <div class="unset surface-color">{{ reference.id }}</div>
</div>
}
</div>
diff --git a/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.html b/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.html
index 136bfaca23..32295786ff 100644
--- a/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.html
+++ b/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.html
@@ -41,7 +41,7 @@
<!-- Validation Errors -->
@if (hasErrors(item)) {
<div
- class="pointer fa fa-warning has-errors"
+ class="pointer fa fa-warning has-errors caution-color"
nifiTooltip
[delayClose]="false"
[tooltipComponentType]="ValidationErrorsTip"
@@ -61,7 +61,7 @@
<div
[ngClass]="{
unset: !canRead(item),
- 'nifi-surface-default': !canRead(item)
+ 'surface-color': !canRead(item)
}"
class="overflow-hidden overflow-ellipsis whitespace-nowrap">
{{ formatName(item) }}
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-client-table/registry-client-table.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-client-table/registry-client-table.component.html
index 65b56f3d72..d1273ff961 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-client-table/registry-client-table.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/registry-client-table/registry-client-table.component.html
@@ -33,7 +33,7 @@
<div class="flex items-center gap-x-2">
@if (hasErrors(item)) {
<div
- class="mr-3 pointer fa fa-warning has-errors"
+ class="mr-3 pointer fa fa-warning has-errors caution-color"
nifiTooltip
[tooltipComponentType]="ValidationErrorsTip"
[tooltipInputData]="getValidationErrorsTipData(item)"></div>
@@ -57,7 +57,7 @@
@if (canRead(item)) {
{{ item.component.name }}
} @else {
- <div class="unset nifi-surface-default">{{ item.id }}</div>
+ <div class="unset surface-color">{{ item.id }}</div>
}
</td>
</ng-container>
@@ -69,7 +69,7 @@
@if (canRead(item)) {
{{ item.component.description }}
} @else {
- <div class="unset nifi-surface-default">{{ item.id }}</div>
+ <div class="unset surface-color">{{ item.id }}</div>
}
</td>
</ng-container>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.html
index 13ec4ca82d..18a972ad6d 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.html
@@ -45,7 +45,7 @@
}
@if (hasErrors(item)) {
<div
- class="pointer fa fa-warning has-errors"
+ class="pointer fa fa-warning has-errors caution-color"
[delayClose]="false"
nifiTooltip
[tooltipComponentType]="ValidationErrorsTip"
@@ -69,7 +69,7 @@
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let item">
<div
- [ngClass]="{ unset: !canRead(item), 'nifi-surface-default': !canRead(item) }"
+ [ngClass]="{ unset: !canRead(item), 'surface-color': !canRead(item) }"
class="overflow-hidden overflow-ellipsis whitespace-nowrap">
{{ formatName(item) }}
</div>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.ts
index d11e605dbf..276e4ad148 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.ts
@@ -115,16 +115,16 @@ export class ReportingTaskTable {
getStateIcon(entity: ReportingTaskEntity): string {
if (entity.status.validationStatus === 'VALIDATING') {
- return 'validating nifi-surface-default fa fa-spin fa-circle-o-notch';
+ return 'validating surface-color fa fa-spin fa-circle-o-notch';
} else if (entity.status.validationStatus === 'INVALID') {
- return 'invalid fa fa-warning';
+ return 'invalid fa fa-warning caution-color';
} else {
if (entity.status.runStatus === 'STOPPED') {
- return 'fa fa-stop nifi-warn-lighter stopped';
+ return 'fa fa-stop warn-color-lighter stopped';
} else if (entity.status.runStatus === 'RUNNING') {
- return 'fa fa-play nifi-success-lighter running';
+ return 'fa fa-play success-color-lighter running';
} else {
- return 'icon icon-enable-false nifi-surface-default disabled';
+ return 'icon icon-enable-false surface-color disabled';
}
}
}
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/port-cluster-table/port-cluster-table.component.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/port-cluster-table/port-cluster-table.component.ts
index d3021d3d50..cda8e54017 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/port-cluster-table/port-cluster-table.component.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/port-cluster-table/port-cluster-table.component.ts
@@ -109,17 +109,17 @@ export class PortClusterTable extends ComponentClusterTable<NodePortStatusSnapsh
getRunStatusIcon(port: NodePortStatusSnapshot): string {
switch (port.statusSnapshot.runStatus.toLowerCase()) {
case 'running':
- return 'running fa fa-play nifi-success-lighter';
+ return 'running fa fa-play success-color-lighter';
case 'stopped':
- return 'stopped fa fa-stop nifi-warn-lighter';
+ return 'stopped fa fa-stop warn-color-lighter';
case 'enabled':
- return 'enabled fa fa-flash nifi-success-default';
+ return 'enabled fa fa-flash success-color';
case 'disabled':
- return 'disabled icon icon-enable-false nifi-surface-default';
+ return 'disabled icon icon-enable-false surface-color';
case 'validating':
- return 'validating fa fa-spin fa-circle-notch nifi-surface-default';
+ return 'validating fa fa-spin fa-circle-notch surface-color';
case 'invalid':
- return 'invalid fa fa-warning';
+ return 'invalid fa fa-warning caution-color';
default:
return '';
}
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/processor-cluster-table/processor-cluster-table.component.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/processor-cluster-table/processor-cluster-table.component.ts
index f8dd697808..4c9936524a 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/processor-cluster-table/processor-cluster-table.component.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/processor-cluster-table/processor-cluster-table.component.ts
@@ -120,17 +120,17 @@ export class ProcessorClusterTable extends ComponentClusterTable<NodeProcessorSt
getRunStatusIcon(processor: NodeProcessorStatusSnapshot): string {
switch (processor.statusSnapshot.runStatus.toLowerCase()) {
case 'running':
- return 'running fa fa-play nifi-success-lighter';
+ return 'running fa fa-play success-color-lighter';
case 'stopped':
- return 'stopped fa fa-stop nifi-warn-lighter';
+ return 'stopped fa fa-stop warn-color-lighter';
case 'enabled':
- return 'enabled fa fa-flash nifi-success-default';
+ return 'enabled fa fa-flash success-color';
case 'disabled':
- return 'disabled icon icon-enable-false nifi-surface-default';
+ return 'disabled icon icon-enable-false surface-color';
case 'validating':
- return 'validating fa fa-spin fa-circle-notch nifi-surface-default';
+ return 'validating fa fa-spin fa-circle-notch surface-color';
case 'invalid':
- return 'invalid fa fa-warning';
+ return 'invalid fa fa-warning caution-color';
default:
return '';
}
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/remote-process-group-cluster-table/remote-process-group-cluster-table.component.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/remote-process-group-cluster-table/remote-process-group-cluster-table.component.ts
index b1f2ac5607..1b1c2d0795 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/remote-process-group-cluster-table/remote-process-group-cluster-table.component.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/remote-process-group-cluster-table/remote-process-group-cluster-table.component.ts
@@ -112,9 +112,9 @@ export class RemoteProcessGroupClusterTable extends ComponentClusterTable<NodeRe
getTransmissionStatusIcon(rpg: NodeRemoteProcessGroupStatusSnapshot): string {
if (rpg.statusSnapshot.transmissionStatus === 'Transmitting') {
- return 'transmitting nifi-success-default fa fa-bullseye';
+ return 'transmitting success-color fa fa-bullseye';
} else {
- return 'not-transmitting icon icon-transmit-false nifi-surface-default';
+ return 'not-transmitting icon icon-transmit-false surface-color';
}
}
}
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.ts
index db9c97137e..41f7164064 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.ts
@@ -106,17 +106,17 @@ export class PortStatusTable extends ComponentStatusTable<PortStatusSnapshotEnti
getRunStatusIcon(port: PortStatusSnapshotEntity): string {
switch (port.portStatusSnapshot.runStatus.toLowerCase()) {
case 'running':
- return 'running fa fa-play nifi-success-lighter';
+ return 'running fa fa-play success-color-lighter';
case 'stopped':
- return 'stopped fa fa-stop nifi-warn-lighter';
+ return 'stopped fa fa-stop warn-color-lighter';
case 'enabled':
- return 'enabled fa fa-flash nifi-success-default';
+ return 'enabled fa fa-flash success-color';
case 'disabled':
- return 'disabled icon icon-enable-false nifi-surface-default';
+ return 'disabled icon icon-enable-false surface-color';
case 'validating':
- return 'validating fa fa-spin fa-circle-notch nifi-surface-default';
+ return 'validating fa fa-spin fa-circle-notch surface-color';
case 'invalid':
- return 'invalid fa fa-warning';
+ return 'invalid fa fa-warning caution-color';
default:
return '';
}
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/process-group-status-listing/process-group-status-table/process-group-status-table.component.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/process-group-status-listing/process-group-status-table/process-group-status-table.component.ts
index ce325be150..c018aa986c 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/process-group-status-listing/process-group-status-table/process-group-status-table.component.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/process-group-status-listing/process-group-status-table/process-group-status-table.component.ts
@@ -98,23 +98,23 @@ export class ProcessGroupStatusTable extends ComponentStatusTable<ProcessGroupSt
private versionedFlowStateMap: { [key: string]: { classes: string; label: string } } = {
STALE: {
- classes: 'stale fa fa-arrow-circle-up nifi-warn-lighter',
+ classes: 'stale fa fa-arrow-circle-up warn-color-lighter',
label: 'Stale'
},
LOCALLY_MODIFIED: {
- classes: 'locally-modified fa fa-asterisk nifi-surface-default',
+ classes: 'locally-modified fa fa-asterisk surface-color',
label: 'Locally modified'
},
UP_TO_DATE: {
- classes: 'up-to-date fa fa-check nifi-success-default',
+ classes: 'up-to-date fa fa-check success-color',
label: 'Up to date'
},
LOCALLY_MODIFIED_AND_STALE: {
- classes: 'locally-modified-and-stale fa fa-exclamation-circle nifi-warn-lighter',
+ classes: 'locally-modified-and-stale fa fa-exclamation-circle warn-color-lighter',
label: 'Locally modified and stale'
},
SYNC_FAILURE: {
- classes: 'sync-failure fa fa-question nifi-surface-default',
+ classes: 'sync-failure fa fa-question surface-color',
label: 'Sync failure'
}
};
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.ts
index adaedefbb8..8775de4efc 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.ts
@@ -112,17 +112,17 @@ export class ProcessorStatusTable extends ComponentStatusTable<ProcessorStatusSn
getRunStatusIcon(processor: ProcessorStatusSnapshotEntity): string {
switch (processor.processorStatusSnapshot.runStatus.toLowerCase()) {
case 'running':
- return 'running fa fa-play nifi-success-lighter';
+ return 'running fa fa-play success-color-lighter';
case 'stopped':
- return 'stopped fa fa-stop nifi-warn-lighter';
+ return 'stopped fa fa-stop warn-color-lighter';
case 'enabled':
- return 'enabled fa fa-flash nifi-success-default';
+ return 'enabled fa fa-flash success-color';
case 'disabled':
- return 'disabled icon icon-enable-false nifi-surface-default';
+ return 'disabled icon icon-enable-false surface-color';
case 'validating':
- return 'validating fa fa-spin fa-circle-notch nifi-surface-default';
+ return 'validating fa fa-spin fa-circle-notch surface-color';
case 'invalid':
- return 'invalid fa fa-warning';
+ return 'invalid fa fa-warning caution-color';
default:
return '';
}
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.ts
index a26afdb727..e92bb5dfef 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.ts
@@ -109,9 +109,9 @@ export class RemoteProcessGroupStatusTable extends ComponentStatusTable<RemotePr
getTransmissionStatusIcon(rpg: RemoteProcessGroupStatusSnapshotEntity): string {
if (rpg.remoteProcessGroupStatusSnapshot.transmissionStatus === 'Transmitting') {
- return 'transmitting nifi-success-default fa fa-bullseye';
+ return 'transmitting success-color fa fa-bullseye';
} else {
- return 'not-transmitting icon icon-transmit-false nifi-surface-default';
+ return 'not-transmitting icon icon-transmit-false surface-color';
}
}
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-access-policies/user-access-policies.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-access-policies/user-access-policies.component.html
index 52b6b3120f..fc832b65d4 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-access-policies/user-access-policies.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-access-policies/user-access-policies.component.html
@@ -42,7 +42,7 @@
{{ formatPolicy(item) }}
</div>
} @else {
- <div class="unset nifi-surface-default">{{ item.id }}</div>
+ <div class="unset surface-color">{{ item.id }}</div>
}
</td>
</ng-container>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/change-component-version-dialog/change-component-version-dialog.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/change-component-version-dialog/change-component-version-dialog.html
index 902669e7ca..32fdeea79f 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/change-component-version-dialog/change-component-version-dialog.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/change-component-version-dialog/change-component-version-dialog.html
@@ -65,7 +65,7 @@
{{ selected?.usageRestriction }}
</div>
} @else {
- <div class="unset nifi-surface-default">Not Restricted</div>
+ <div class="unset surface-color">Not Restricted</div>
}
</div>
<div>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
index 10d25cbe03..f5c8cd229f 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
@@ -33,7 +33,6 @@
$material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette, default);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
- $nifi-theme-success-palette-A700: mat.get-color-from-palette($nifi-theme-success-palette, 'A700');
$nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
$nifi-theme-surface-palette,
darker-contrast
@@ -61,7 +60,7 @@
&.show-focused {
.context-menu-item:focus {
- outline: $nifi-theme-success-palette-A700 solid 1px;
+ outline: #0000ff solid 1px;
}
}
}
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-references/controller-service-references.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-references/controller-service-references.component.html
index fac6d18961..1485870abb 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-references/controller-service-references.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-references/controller-service-references.component.html
@@ -90,7 +90,7 @@
<div class="flex items-center gap-x-2">
@if (isNonServiceInvalid(reference.component)) {
<div
- class="invalid fa fa-warning"
+ class="invalid fa fa-warning caution-color"
nifiTooltip
[tooltipComponentType]="ValidationErrorsTip"
[tooltipInputData]="getValidationErrorTipData(reference.component)"
@@ -128,7 +128,7 @@
<div class="flex items-center gap-x-2">
@if (isServiceInvalid(service.component)) {
<div
- class="invalid fa fa-warning"
+ class="invalid fa fa-warning caution-color"
nifiTooltip
[tooltipComponentType]="ValidationErrorsTip"
[tooltipInputData]="getValidationErrorTipData(service.component)"></div>
@@ -148,7 +148,7 @@
</div>
<div>
@if (service.component.referenceCycle) {
- <div class="unset nifi-surface-default">Reference cycle detected</div>
+ <div class="unset surface-color">Reference cycle detected</div>
} @else {
@if (service.component.referencingComponents.length > 0) {
<ng-container
@@ -175,7 +175,7 @@
<div class="references">
@for (reference of references; track reference) {
<div class="flex">
- <div class="unset nifi-surface-default">{{ reference.id }}</div>
+ <div class="unset surface-color">{{ reference.id }}</div>
</div>
}
</div>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-references/controller-service-references.component.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-references/controller-service-references.component.ts
index badf0cc5b6..127f768795 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-references/controller-service-references.component.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-references/controller-service-references.component.ts
@@ -85,19 +85,19 @@ export class ControllerServiceReferences {
getNonServiceStateIcon(reference: ControllerServiceReferencingComponent): string {
if (reference.state == 'STOPPED') {
- return 'stopped fa fa-stop nifi-warn-lighter';
+ return 'stopped fa fa-stop warn-color-lighter';
} else if (reference.state == 'RUNNING') {
- return 'running fa fa-play nifi-success-lighter';
+ return 'running fa fa-play success-color-lighter';
} else {
- return 'disabled icon icon-enable-false nifi-surface-default';
+ return 'disabled icon icon-enable-false surface-color';
}
}
getServiceStateIcon(reference: ControllerServiceReferencingComponent): string {
if (reference.state == 'ENABLED') {
- return 'enabled fa fa-flash nifi-success-default';
+ return 'enabled fa fa-flash success-color';
} else {
- return 'disabled icon icon-enable-false nifi-surface-default';
+ return 'disabled icon icon-enable-false surface-color';
}
}
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.html
index d2f5b42aa8..e31826e2fa 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.html
@@ -46,7 +46,7 @@
}
@if (hasErrors(item)) {
<div
- class="pointer fa fa-warning has-errors"
+ class="pointer fa fa-warning has-errors caution-color"
nifiTooltip
[delayClose]="false"
[tooltipComponentType]="ValidationErrorsTip"
@@ -70,7 +70,7 @@
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let item">
<div
- [ngClass]="{ unset: !canRead(item), 'nifi-surface-default': !canRead(item) }"
+ [ngClass]="{ unset: !canRead(item), 'surface-color': !canRead(item) }"
class="overflow-hidden overflow-ellipsis whitespace-nowrap">
{{ formatName(item) }}
</div>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.ts
index 4e5ac78d36..b0766ed4e6 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.ts
@@ -139,18 +139,18 @@ export class ControllerServiceTable {
getStateIcon(entity: ControllerServiceEntity): string {
if (entity.status.validationStatus === 'VALIDATING') {
- return 'validating nifi-surface-default fa fa-spin fa-circle-o-notch';
+ return 'validating surface-color fa fa-spin fa-circle-o-notch';
} else if (entity.status.validationStatus === 'INVALID') {
- return 'invalid fa fa-warning';
+ return 'invalid fa fa-warning caution-color';
} else {
if (entity.status.runStatus === 'DISABLED') {
- return 'disabled icon icon-enable-false nifi-surface-default';
+ return 'disabled icon icon-enable-false surface-color';
} else if (entity.status.runStatus === 'DISABLING') {
- return 'disabled icon icon-enable-false nifi-surface-default';
+ return 'disabled icon icon-enable-false surface-color';
} else if (entity.status.runStatus === 'ENABLED') {
- return 'enabled fa fa-flash nifi-success-default';
+ return 'enabled fa fa-flash success-color';
} else if (entity.status.runStatus === 'ENABLING') {
- return 'enabled fa fa-flash nifi-success-default';
+ return 'enabled fa fa-flash success-color';
}
}
return '';
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/disable-controller-service/disable-controller-service.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/disable-controller-service/disable-controller-service.component.html
index 9bb2060f43..d0037ea0f3 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/disable-controller-service/disable-controller-service.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/disable-controller-service/disable-controller-service.component.html
@@ -181,7 +181,7 @@
<div class="fa fa-spin fa-circle-o-notch primary-color"></div>
</ng-template>
<ng-template #stepComplete>
- <div class="complete fa fa-check nifi-success-default"></div>
+ <div class="complete fa fa-check success-color"></div>
</ng-template>
<ng-template #stepError>
<div class="fa fa-times warn-color"></div>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/enable-controller-service/enable-controller-service.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/enable-controller-service/enable-controller-service.component.html
index 4658a8356f..f90bda08e1 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/enable-controller-service/enable-controller-service.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/enable-controller-service/enable-controller-service.component.html
@@ -195,7 +195,7 @@
<div class="fa fa-spin fa-circle-o-notch primary-color"></div>
</ng-template>
<ng-template #stepComplete>
- <div class="complete fa fa-check nifi-success-default"></div>
+ <div class="complete fa fa-check success-color"></div>
</ng-template>
<ng-template #stepError>
<div class="fa fa-times warn-color"></div>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html
index 0b437023fd..7ed10bbfde 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html
@@ -108,13 +108,13 @@
<div class="selected-type-name accent-color">
{{ formatType(selectedType) }}
</div>
- <div class="selected-type-bundle nifi-surface-default">{{ formatBundle(selectedType) }}</div>
+ <div class="selected-type-bundle surface-color">{{ formatBundle(selectedType) }}</div>
</div>
<div class="selected-type-description" [title]="formatDescription(selectedType)">
{{ formatDescription(selectedType) }}
</div>
} @else {
- <div class="no-selected-type unset nifi-surface-default">No type selected</div>
+ <div class="no-selected-type unset surface-color">No type selected</div>
}
</div>
<div class="flex justify-end gap-x-2">
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
index 2b4422a371..00a945146a 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
@@ -28,9 +28,9 @@
// Get hues from palette
$is-dark: map-get($material-theme-color-config, is-dark);
- $material-theme-primary-palette-default-contrast: mat.get-color-from-palette(
+ $material-theme-primary-palette-lighter-contrast: mat.get-color-from-palette(
$material-theme-primary-palette,
- default-contrast
+ lighter-contrast
);
$material-theme-primary-palette-darker-contrast: mat.get-color-from-palette(
$material-theme-primary-palette,
@@ -50,27 +50,19 @@
.icon:disabled,
.icon.global-menu:disabled {
- @extend .nifi-surface-default;
+ @extend .surface-color;
}
.current-user {
- color: if(
- $is-dark,
- $material-theme-primary-palette-default-contrast,
- $material-theme-primary-palette-darker-contrast
- );
+ @extend .primary-contrast;
}
a {
- color: if(
- $is-dark,
- $material-theme-primary-palette-default-contrast,
- $material-theme-primary-palette-darker-contrast
- );
+ @extend .primary-contrast;
text-decoration-color: if(
$is-dark,
- $material-theme-primary-palette-default-contrast,
- $material-theme-primary-palette-darker-contrast
+ $material-theme-primary-palette-darker-contrast,
+ $material-theme-primary-palette-lighter-contrast
);
}
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/parameter-references/parameter-references.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/parameter-references/parameter-references.component.html
index 3affa59d60..06f69db1af 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/parameter-references/parameter-references.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/parameter-references/parameter-references.component.html
@@ -59,7 +59,7 @@
<div class="flex items-center gap-x-2">
@if (isNonServiceInvalid(reference.component)) {
<div
- class="invalid fa fa-warning"
+ class="invalid fa fa-warning caution-color"
nifiTooltip
[tooltipComponentType]="ValidationErrorsTip"
[tooltipInputData]="getValidationErrorTipData(reference.component)"></div>
@@ -95,7 +95,7 @@
<div class="flex items-center gap-x-2">
@if (isServiceInvalid(service.component)) {
<div
- class="invalid fa fa-warning"
+ class="invalid fa fa-warning caution-color"
nifiTooltip
[tooltipComponentType]="ValidationErrorsTip"
[tooltipInputData]="getValidationErrorTipData(service.component)"></div>
@@ -128,7 +128,7 @@
<div class="references">
@for (reference of references; track reference) {
<div class="flex">
- <div class="unset nifi-surface-default">{{ reference.id }}</div>
+ <div class="unset surface-color">{{ reference.id }}</div>
</div>
}
</div>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/parameter-references/parameter-references.component.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/parameter-references/parameter-references.component.ts
index 17ce2e4f34..3d459b972e 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/parameter-references/parameter-references.component.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/parameter-references/parameter-references.component.ts
@@ -110,19 +110,19 @@ export class ParameterReferences {
getNonServiceStateIcon(reference: AffectedComponent): string {
if (reference.state == 'STOPPED') {
- return 'stopped fa fa-stop nifi-warn-lighter';
+ return 'stopped fa fa-stop warn-color-lighter';
} else if (reference.state == 'RUNNING') {
- return 'running fa fa-play nifi-success-lighter';
+ return 'running fa fa-play success-color-lighter';
} else {
- return 'disabled icon icon-enable-false nifi-surface-default';
+ return 'disabled icon icon-enable-false surface-color';
}
}
getServiceStateIcon(reference: AffectedComponent): string {
if (reference.state == 'ENABLED') {
- return 'enabled fa fa-flash nifi-success-default';
+ return 'enabled fa fa-flash success-color';
} else {
- return 'disabled icon icon-enable-false nifi-surface-default';
+ return 'disabled icon icon-enable-false surface-color';
}
}
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.html
index 569dc4e32c..194d2c50af 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.html
@@ -39,7 +39,7 @@
[delayClose]="false">
<span
class="option-text"
- [class.nifi-surface-default]="allowableValue.value == null"
+ [class.surface-color]="allowableValue.value == null"
[class.unset]="allowableValue.value == null"
>{{ allowableValue.displayName }}</span
>
@@ -52,7 +52,7 @@
(mousedown)="preventDrag($event)">
<span
class="option-text"
- [class.nifi-surface-default]="allowableValue.value == null"
+ [class.surface-color]="allowableValue.value == null"
[class.unset]="allowableValue.value == null"
>{{ allowableValue.displayName }}</span
>
@@ -86,7 +86,7 @@
<span
class="option-text"
[class.unset]="parameterAllowableValue.value == null"
- [class.nifi-surface-default]="parameterAllowableValue.value == null"
+ [class.surface-color]="parameterAllowableValue.value == null"
>{{ parameterAllowableValue.displayName }}</span
>
</mat-option>
@@ -99,7 +99,7 @@
<span
class="option-text"
[class.unset]="parameterAllowableValue.value == null"
- [class.nifi-surface-default]="parameterAllowableValue.value == null"
+ [class.surface-color]="parameterAllowableValue.value == null"
>{{ parameterAllowableValue.displayName }}</span
>
</mat-option>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/_nf-editor.component-theme.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/_nf-editor.component-theme.scss
index 21d3d49d9a..24d2c44116 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/_nf-editor.component-theme.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/_nf-editor.component-theme.scss
@@ -75,7 +75,7 @@
}
.CodeMirror-code {
- color: $surface-contrast;
+ @extend .surface-contrast;
}
.CodeMirror-selected {
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.html
index b642e6b7b1..e13b73db36 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.html
@@ -59,7 +59,7 @@
#trigger="cdkOverlayOrigin"
(click)="openEditor(trigger, item, $event)">
@if (isNull(item.value)) {
- <div class="unset nifi-surface-default">No value set</div>
+ <div class="unset surface-color">No value set</div>
} @else {
<ng-container
*ngTemplateOutlet="
@@ -67,7 +67,7 @@
context: { $implicit: resolvePropertyValue(item) }
"></ng-container>
<ng-template #sensitive>
- <div class="sensitive nifi-surface-default">Sensitive value set</div>
+ <div class="sensitive surface-color">Sensitive value set</div>
</ng-template>
<ng-template #nonSensitive let-resolvedValue>
<ng-container
@@ -77,7 +77,7 @@
"></ng-container>
</ng-template>
<ng-template #blank>
- <div class="empty nifi-surface-default">Empty string set</div>
+ <div class="empty surface-color">Empty string set</div>
</ng-template>
<ng-template #nonBlank let-resolvedValue>
<div class="flex justify-between items-center">
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
index 3bd0bc376a..a3668d7cc9 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
@@ -181,7 +181,7 @@
</div>
</ng-container>
<ng-template #noDuration>
- <div class="unset nifi-surface-default">No value set</div>
+ <div class="unset surface-color">No value set</div>
</ng-template>
</ng-template>
</div>
@@ -213,7 +213,7 @@
</div>
</ng-container>
<ng-template #noUuids>
- <div class="unset nifi-surface-default">{{ emptyMessage }}</div>
+ <div class="unset surface-color">{{ emptyMessage }}</div>
</ng-template>
</ng-template>
</div>
@@ -420,7 +420,7 @@
<ng-template #formatValue let-value let-title="title">
<ng-container *ngIf="value != null; else nullValue">
<ng-container *ngIf="value === ''; else nonEmptyValue">
- <div class="unset nifi-surface-default">Empty string set</div>
+ <div class="unset surface-color">Empty string set</div>
</ng-container>
<ng-template #nonEmptyValue>
<div class="accent-color font-medium" *ngIf="title == null; else valueWithTitle">
@@ -432,7 +432,7 @@
</ng-template>
</ng-container>
<ng-template #nullValue>
- <div class="unset nifi-surface-default">No value set</div>
+ <div class="unset surface-color">No value set</div>
</ng-template>
</ng-template>
<ng-template #formatContentValue let-value let-title="title">
@@ -445,7 +445,7 @@
</ng-template>
</ng-container>
<ng-template #nullValue>
- <div class="unset nifi-surface-default">No value previously set</div>
+ <div class="unset surface-color">No value previously set</div>
</ng-template>
</ng-template>
</mat-dialog-content>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.ts
index 12b0c01537..b525682ec0 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.ts
@@ -272,7 +272,7 @@ export class StatusHistory implements OnInit, OnDestroy, AfterViewInit {
return nodeColor.color;
}
}
- return 'unset nifi-surface-default';
+ return 'unset surface-color';
}
protected readonly NIFI_NODE_CONFIG = NIFI_NODE_CONFIG;
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/el-function-tip/el-function-tip.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/el-function-tip/el-function-tip.component.html
index bf84151567..548a03b1ae 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/el-function-tip/el-function-tip.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/el-function-tip/el-function-tip.component.html
@@ -36,7 +36,7 @@
</ul>
</div>
} @else {
- <div class="unset nifi-surface-default ml-2">None</div>
+ <div class="unset surface-color ml-2">None</div>
}
</div>
@if (elFunction.subject) {
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/parameter-tip/parameter-tip.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/parameter-tip/parameter-tip.component.html
index 49908305d8..9bf8663a3a 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/parameter-tip/parameter-tip.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/parameter-tip/parameter-tip.component.html
@@ -22,7 +22,7 @@
@if (hasDescription(parameter)) {
<div>{{ parameter.description }}</div>
} @else {
- <div class="unset nifi-surface-default">No description provided</div>
+ <div class="unset surface-color">No description provided</div>
}
</div>
}
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
index cfccb3dda1..f13ec7030e 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
@@ -152,6 +152,20 @@
$material-theme-warn-palette: map.get($material-theme-color-config, 'warn');
// colors from the theme palettes
+ $is-dark: map-get($material-theme-color-config, is-dark);
+ $material-theme-primary-palette-darker-contrast: mat.get-color-from-palette(
+ $material-theme-primary-palette,
+ darker-contrast
+ );
+ $material-theme-primary-palette-lighter-contrast: mat.get-color-from-palette(
+ $material-theme-primary-palette,
+ lighter-contrast
+ );
+ $primary-contrast: if(
+ $is-dark,
+ $material-theme-primary-palette-darker-contrast,
+ $material-theme-primary-palette-lighter-contrast
+ );
$material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette, default);
$material-theme-primary-palette-lighter: mat.get-color-from-palette($material-theme-primary-palette, lighter);
$material-theme-primary-palette-darker: mat.get-color-from-palette($material-theme-primary-palette, darker);
@@ -159,9 +173,16 @@
$material-theme-accent-palette-lighter: mat.get-color-from-palette($material-theme-accent-palette, lighter);
$material-theme-accent-palette-darker: mat.get-color-from-palette($material-theme-accent-palette, darker);
$material-theme-warn-palette-default: mat.get-color-from-palette($material-theme-warn-palette, default);
+ $material-theme-warn-palette-lighter: mat.get-color-from-palette($material-theme-warn-palette, lighter);
+ $material-theme-warn-palette-darker: mat.get-color-from-palette($material-theme-warn-palette, darker);
// semantic classes for the material theme
+ .primary-contrast {
+ color: $primary-contrast;
+ fill: $primary-contrast;
+ }
+
.primary-color {
color: $material-theme-primary-palette-default;
fill: $material-theme-primary-palette-default;
@@ -182,6 +203,16 @@
fill: $material-theme-warn-palette-default;
}
+ .warn-color-lighter {
+ color: $material-theme-warn-palette-lighter;
+ fill: $material-theme-warn-palette-lighter;
+ }
+
+ .warn-color-darker {
+ color: $material-theme-warn-palette-darker;
+ fill: $material-theme-warn-palette-darker;
+ }
+
/* other classes and styles */
a {
@@ -193,6 +224,14 @@
text-decoration-color: $material-theme-primary-palette-darker;
}
+ .has-errors,
+ .invalid,
+ .stopped,
+ .running,
+ .transmitting {
+ text-shadow: if($is-dark, 0 0 4px rgba(0, 0, 0, 1), 0 0 4px rgba(255, 255, 255, 1));
+ }
+
/* overriding 3rd party styles */
$is-dark: map.get($material-theme-color-config, is-dark);
@@ -214,7 +253,7 @@
// Get the color palettes from the color-config.
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
$nifi-theme-success-palette: map.get($nifi-theme-color-config, 'accent');
- $nifi-theme-warn-palette: map.get($nifi-theme-color-config, 'warn');
+ $nifi-theme-caution-palette: map.get($nifi-theme-color-config, 'warn');
// default/lighter/darker colors from the nifi theme palettes
$is-dark: map-get($nifi-theme-color-config, is-dark);
@@ -239,13 +278,11 @@
$nifi-theme-surface-palette-darker-contrast,
$nifi-theme-surface-palette-lighter-contrast
);
- $nifi-theme-success-palette-default: mat.get-color-from-palette($nifi-theme-success-palette, 'default');
- $nifi-theme-success-palette-lighter: mat.get-color-from-palette($nifi-theme-success-palette, 'lighter');
- $nifi-theme-success-palette-darker: mat.get-color-from-palette($nifi-theme-success-palette, 'darker');
- $nifi-theme-warn-palette-default: mat.get-color-from-palette($nifi-theme-warn-palette, 'default');
- $nifi-theme-warn-palette-lighter: mat.get-color-from-palette($nifi-theme-warn-palette, 'lighter');
- $nifi-theme-warn-palette-darker: mat.get-color-from-palette($nifi-theme-warn-palette, 'darker');
- $nifi-theme-warn-palette-A200: mat.get-color-from-palette($nifi-theme-warn-palette, 'A200');
+ $nifi-theme-success-palette-default: mat.get-color-from-palette($nifi-theme-success-palette, default);
+ $nifi-theme-success-palette-lighter: mat.get-color-from-palette($nifi-theme-success-palette, lighter);
+ $nifi-theme-success-palette-darker: mat.get-color-from-palette($nifi-theme-success-palette, darker);
+ $nifi-theme-caution-palette-default: mat.get-color-from-palette($nifi-theme-caution-palette, default);
+ $nifi-theme-caution-palette-darker: mat.get-color-from-palette($nifi-theme-caution-palette, darker);
// semantic classes for contrast colors determined based on the light/dark mode of the theme.
@@ -265,56 +302,38 @@
//
// NOTE: nifi surface palette lighter/darker is purposefully omitted here. Any application of nifi surface colors should be as a background-color to a surface DOM element. The surface color should switch from light to dark depending on the mode for the theme.
- .nifi-surface-default {
+ .surface-color {
color: $nifi-theme-surface-palette-default;
fill: $nifi-theme-surface-palette-default;
}
- .nifi-success-default {
+ .success-color {
color: $nifi-theme-success-palette-default;
fill: $nifi-theme-success-palette-default;
}
- .nifi-success-lighter {
+ .success-color-lighter {
color: $nifi-theme-success-palette-lighter;
fill: $nifi-theme-success-palette-lighter;
}
- .nifi-success-darker {
+ .success-color-darker {
color: $nifi-theme-success-palette-darker;
fill: $nifi-theme-success-palette-darker;
}
- .nifi-warn-default {
- color: $nifi-theme-warn-palette-default;
- fill: $nifi-theme-warn-palette-default;
- }
-
- .nifi-warn-lighter {
- color: $nifi-theme-warn-palette-lighter;
- fill: $nifi-theme-warn-palette-lighter;
+ .caution-color {
+ color: $nifi-theme-caution-palette-default;
+ fill: $nifi-theme-caution-palette-default;
}
- .nifi-warn-darker {
- color: $nifi-theme-warn-palette-darker;
- fill: $nifi-theme-warn-palette-darker;
+ .caution-color-darker {
+ color: $nifi-theme-caution-palette-darker;
+ fill: $nifi-theme-caution-palette-darker;
}
/* other classes */
- .has-errors,
- .invalid {
- color: $nifi-theme-warn-palette-A200;
- fill: $nifi-theme-warn-palette-A200;
- text-shadow: if($is-dark, 0 0 4px rgba(0, 0, 0, 1), 0 0 4px rgba(255, 255, 255, 1));
- }
-
- .stopped,
- .running,
- .transmitting {
- text-shadow: if($is-dark, 0 0 4px rgba(0, 0, 0, 1), 0 0 4px rgba(255, 255, 255, 1));
- }
-
.tooltip {
background-color: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table.scss
index ad06e8990c..cf790cccba 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table.scss
@@ -65,26 +65,8 @@
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
// Get hues from palette
- $material-theme-primary-palette-default-contrast: mat.get-color-from-palette(
- $material-theme-primary-palette,
- default-contrast
- );
- $material-theme-primary-palette-darker-contrast: mat.get-color-from-palette(
- $material-theme-primary-palette,
- darker-contrast
- );
-
$is-dark: map-get($nifi-theme-color-config, is-dark);
- $nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
- $nifi-theme-surface-palette,
- darker-contrast
- );
- $nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
- $nifi-theme-surface-palette,
- lighter-contrast
- );
-
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$selected-row-color: if(
@@ -101,20 +83,12 @@
.listing-table {
table {
th {
+ @extend .primary-contrast;
background-color: $header-surface !important;
- color: if(
- $is-dark,
- $material-theme-primary-palette-default-contrast,
- $material-theme-primary-palette-darker-contrast
- );
user-select: none;
.mat-sort-header-arrow {
- color: if(
- $is-dark,
- $material-theme-primary-palette-default-contrast,
- $material-theme-primary-palette-darker-contrast
- );
+ @extend .primary-contrast;
}
}
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/material.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/material.scss
index e9f76e2298..de4314804a 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/material.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/material.scss
@@ -50,8 +50,33 @@ $material-primary-light-palette: (
A700: #ffffff,
)
);
+
$material-accent-light-palette: mat.$brown-palette;
-$warn-light-palette: mat.$red-palette;
+
+$warn-light-palette: (
+ 50: #ffebee,
+ 100: #ffccd2,
+ 200: #f49999,
+ 300: #eb7071,
+ 400: #f64e4c,
+ 500: #fa3b30,
+ 600: #ec3030,
+ 700: #ff1507,
+ 800: #ff0000,
+ 900: #ba554a, // g.component rect.border.unauthorized, #connection-full-drop-shadow feFlood, text.restricted, g.connection rect.border.unauthorized, g.connection path.connection-path.full, g.connection path.connection-path.unauthorized, .controller-bulletins.has-bulletins, path.link.selected, g.event circle.selected
+ contrast: (
+ 50: rgba(#000000, 0.87),
+ 100: rgba(#000000, 0.87),
+ 200: rgba(#000000, 0.87),
+ 300: rgba(#000000, 0.87),
+ 400: #ffffff,
+ 500: #ffffff,
+ 600: #ffffff,
+ 700: #ffffff,
+ 800: #ffffff,
+ 900: #ffffff
+ )
+);
// Dark and light palettes are identical for NiFi, their "default", "lighter", and "darker" values are different and set below.
$material-primary-dark-palette: $material-primary-light-palette;
@@ -104,7 +129,7 @@ $material-primary-dark: mat.define-palette($material-primary-dark-palette, 400,
// darker hue: snackbar action button text color, Should be darker as the action button is on a light background in dark mode.
$material-accent-dark: mat.define-palette($material-accent-dark-palette, 200, 100, 900);
// warn material palette color default hue must have enough contrast on top of the mat-app-background (#303030). For dark mode this is a minimum of 300 up to 500.
-$warn-dark: mat.define-palette($warn-dark-palette, 500, 200, 700);
+$warn-dark: mat.define-palette($warn-dark-palette, 600, 200, 300);
$material-theme-dark: mat.define-dark-theme(
(
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss
index 4a324ece25..1476e7e704 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss
@@ -15,12 +15,10 @@
* limitations under the License.
*/
-// Custom Colors following Material Design
-// For more information: https://m2.material.io/design/color/the-color-system.html
@use '@angular/material' as mat;
@use 'sass:map';
-$surface-light-palette: (
+$surface-palette: (
50: #ffffff,
100: #fafafa,
200: #f4f4f4,
@@ -41,29 +39,21 @@ $surface-light-palette: (
600: #ffffff,
700: #ffffff,
800: #ffffff,
- 900: #ffffff,
- A100: rgba(#000000, 0.87),
- A200: rgba(#000000, 0.87),
- A400: rgba(#000000, 0.87),
- A700: #ffffff,
+ 900: #ffffff
)
);
-$success-light-palette: (
+$success-palette: (
50: #e5ebed, // Used for the grid lines on the canvas in light mode
100: #c3e8d0,
200: #9dd9b2,
300: #73ca94,
400: #52bf7e,
- 500: #00ff00, // g.component.connectable-destination rect.border, path.connector.connectable
+ 500: #2cb367,
600: #2cb367,
700: #1A9964,
800: #016131,
900: #0d1411, // Used for the grid lines on the canvas in dark mode
- A100: #bfbfff,
- A200: #8080ff,
- A400: #4040ff,
- A700: #0000ff, // .context-menu-item:focus, g.connection rect.endpoint, g.process-group.drop rect.border
contrast: (
50: rgba(#000000, 0.87),
100: rgba(#000000, 0.87),
@@ -71,66 +61,58 @@ $success-light-palette: (
300: rgba(#000000, 0.87),
400: rgba(#000000, 0.87),
500: rgba(#000000, 0.87),
- 600: #ffffff,
- 700: #ffffff,
+ 600: rgba(#000000, 0.87),
+ 700: rgba(#000000, 0.87),
800: #ffffff,
- 900: #ffffff,
- A100: rgba(#000000, 0.87),
- A200: rgba(#000000, 0.87),
- A400: rgba(#000000, 0.87),
- A700: rgba(#000000, 0.87),
+ 900: #ffffff
)
);
-$nifi-warn-light-palette: (
- 50: #ffebee,
- 100: #ffccd2,
- 200: #f49999,
- 300: #eb7071,
- 400: #f64e4c,
- 500: #fa3b30,
- 600: #ec3030,
- 700: #ff1507,
- 800: #ff0000, // path.connector, g.connection rect.startpoint
- 900: #ba554a, // g.component rect.border.unauthorized, #connection-full-drop-shadow feFlood, text.restricted, g.connection rect.border.unauthorized, g.connection path.connection-path.full, g.connection path.connection-path.unauthorized, .controller-bulletins.has-bulletins, path.link.selected, g.event circle.selected
+$caution-palette: (
+ 50: #fffce9,
+ 100: #fff8c8,
+ 200: #fff3a2,
+ 300: #ffee7b,
+ 400: #fee95c,
+ 500: #fce43e,
+ 600: #fdd53d,
+ 700: #fabd36,
+ 800: #f7a52f,
+ 900: #f27d22,
A100: #ffef85,
- A200: #f8bf47, // g.event circle.context,
- A400: #bda500, // .bulletin-warn, .has-errors, .invalid, g.event circle.context, g.connection rect.backpressure-percent.warning,
- A700: #ffcc00, // g.connection.selected rect.border, g.connection path.connection-selection-path, g.connection rect.midpoint, g.label rect.labelpoint
+ A200: #f8bf47,
+ A400: #cf9f5d,
+ A700: #ffcc00,
contrast: (
50: rgba(#000000, 0.87),
100: rgba(#000000, 0.87),
200: rgba(#000000, 0.87),
300: rgba(#000000, 0.87),
400: rgba(#000000, 0.87),
- 500: #ffffff,
- 600: #ffffff,
- 700: #ffffff,
- 800: #ffffff,
- 900: #ffffff,
+ 500: rgba(#000000, 0.87),
+ 600: rgba(#000000, 0.87),
+ 700: rgba(#000000, 0.87),
+ 800: rgba(#000000, 0.87),
+ 900: rgba(#000000, 0.87),
A100: rgba(#000000, 0.87),
- A200: #ffffff,
- A400: #ffffff,
- A700: #ffffff,
+ A200: rgba(#000000, 0.87),
+ A400: rgba(#000000, 0.87),
+ A700: rgba(#000000, 0.87),
)
);
-$surface-dark-palette: $surface-light-palette;
-$success-dark-palette: $success-light-palette;
-$nifi-warn-dark-palette: $nifi-warn-light-palette;
-
// surface palette default color hue must have enough contrast on top of the mat-app-background. For light mode this is a minimum of 600 up to 900.
// For the lighter and darker hues these are used as the surface colors for canvas components, the birdseye, navigate/operate palettes etc. When the theme is in light mode the lighter hue is used as the surface color and the darker hue sets the contrast color hue.
-$surface-light-palette: mat.define-palette($surface-light-palette, 600, 100, 900);
-$success-light-palette: mat.define-palette($success-light-palette, 400, 200, 800);
-$nifi-warn-light-palette: mat.define-palette($nifi-warn-light-palette, 400, 200, 900);
+$surface-light-palette: mat.define-palette($surface-palette, 600, 100, 900);
+$success-light-palette: mat.define-palette($success-palette, 400, 200, 800);
+$caution-light-palette: mat.define-palette($caution-palette, A400, A200, A700);
$nifi-theme-light: mat.define-light-theme(
(
color: (
primary: $surface-light-palette,
accent: $success-light-palette,
- warn: $nifi-warn-light-palette
+ warn: $caution-light-palette
),
//typography: mat.define-typography-config(), // TODO: typography
density: -3
@@ -139,16 +121,16 @@ $nifi-theme-light: mat.define-light-theme(
// surface palette default color hue must have enough contrast on top of the mat-app-background. For light mode this is a minimum of 300 up to 500.
// For the lighter and darker hues these are used as the surface colors for canvas components, the birdseye, navigate/operate palettes etc. When the theme is in dark mode the darker hue is used as the surface color and the lighter hue sets the contrast color hue.
-$surface-dark-palette: mat.define-palette($surface-dark-palette, 500, 200, 800);
-$success-dark-palette: mat.define-palette($success-dark-palette, 400, 200, 800);
-$nifi-warn-dark-palette: mat.define-palette($nifi-warn-dark-palette, 600, 200, 300);
+$surface-dark-palette: mat.define-palette($surface-palette, 500, 200, 800);
+$success-dark-palette: mat.define-palette($success-palette, 400, 200, 800);
+$caution-dark-palette: mat.define-palette($caution-palette, A400, A200, A700);
$nifi-theme-dark: mat.define-dark-theme(
(
color: (
primary: $surface-dark-palette,
accent: $success-dark-palette,
- warn: $nifi-warn-dark-palette,
+ warn: $caution-dark-palette,
),
//typography: mat.define-typography-config(), // TODO: typography
density: -3
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss
index 287a21eca0..cb355de6bf 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss
@@ -22,7 +22,6 @@
@use 'assets/styles/app' as app;
@use 'assets/styles/listing-table' as listing-table;
@use 'app/app.component-theme' as app-component;
-@use 'app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component-theme' as bulletin-board-list;
@use 'app/pages/flow-designer/ui/canvas/canvas.component-theme' as canvas;
@use 'app/pages/flow-designer/ui/canvas/footer/footer.component-theme' as footer;
@use 'app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component-theme' as navigation-control;
@@ -80,7 +79,6 @@
@include app.generate-nifi-theme($nifi-theme-light);
@include app-component.generate-theme($material-theme-light);
@include listing-table.generate-theme($material-theme-light, $nifi-theme-light);
-@include bulletin-board-list.generate-theme($nifi-theme-light);
@include canvas.generate-theme($material-theme-light, $nifi-theme-light);
@include footer.generate-theme($nifi-theme-light);
@include navigation-control.generate-theme($nifi-theme-light);
@@ -111,7 +109,6 @@
@include app.generate-nifi-theme($nifi-theme-dark);
@include app-component.generate-theme($material-theme-dark);
@include listing-table.generate-theme($material-theme-dark, $nifi-theme-dark);
- @include bulletin-board-list.generate-theme($nifi-theme-dark);
@include canvas.generate-theme($material-theme-dark, $nifi-theme-dark);
@include footer.generate-theme($nifi-theme-dark);
@include navigation-control.generate-theme($nifi-theme-dark);