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 c6f1d771e8 [NIFI-12698] dark mode, [NIFI-12687] status history axis
label fix (#8320)
c6f1d771e8 is described below
commit c6f1d771e8af96453382e6f7e1cbef0280f153ba
Author: Scott Aslan <scottyas...@users.noreply.github.com>
AuthorDate: Thu Feb 1 16:59:43 2024 -0500
[NIFI-12698] dark mode, [NIFI-12687] status history axis label fix (#8320)
* [NIFI-12698] dark mode, [NIFI-12687] status history axis label fix
* prettier
* lint fix
* update input form field styles to support dark mode
* adjust colors of flow status icons, and PG status icons, and softened the
warn palette. Fix background of status history charts in dark mode
* fix provenance text color in dark mode
* leave the toggle for dark mode always visible to encourage testing
This closes #8320
---
.../src/main/nifi/.prettierignore | 1 +
.../main/nifi/src/app/_app.component-theme.scss | 2 +-
.../feature/_access-policies.component-theme.scss | 2 +-
...dd-tenant-to-policy-dialog.component-theme.scss | 2 +-
..._component-access-policies.component-theme.scss | 6 +-
.../feature/_bulletins.component-theme.scss | 2 +-
.../_bulletin-board-list.component-theme.scss | 2 +-
.../feature/_counters.component-theme.scss | 2 +-
.../ui/canvas/_canvas.component-theme.scss | 2 +-
.../ui/canvas/footer/_footer.component-theme.scss | 2 +-
.../_navigation-control.component-theme.scss | 2 +-
.../birdseye/_birdseye.component-theme.scss | 2 +-
.../_operation-control.component-theme.scss | 6 +-
.../ui/canvas/header/_header.component-theme.scss | 2 +-
.../flow-status/_flow-status.component-theme.scss | 2 +-
.../_new-canvas-item.component-theme.scss | 2 +-
.../header/search/_search.component-theme.scss | 8 +-
.../ui/canvas/header/search/search.component.html | 3 +-
.../ui/canvas/header/search/search.component.ts | 14 +-
.../_prioritizers.component-theme.scss | 2 +-
.../_create-process-group.component-theme.scss | 2 +-
.../ui/common/banner/_banner.component-theme.scss | 2 +-
.../_controller-services.component-theme.scss | 2 +-
.../login/feature/_login.component-theme.scss | 2 +-
.../ui/login-form/_login-form.component-theme.scss | 2 +-
.../_parameter-contexts.component-theme.scss | 2 +-
...ameter-context-inheritance.component-theme.scss | 2 +-
.../feature/_provenance.component-theme.scss | 2 +-
.../_provenance-event-table.component-theme.scss | 2 +-
.../lineage/_lineage.component-theme.scss | 8 +-
.../_flowfile-dialog.component-theme.scss | 2 +-
.../_flowfile-table.component-theme.scss | 2 +-
.../feature/_settings.component-theme.scss | 2 +-
.../summary/feature/_summary.component-theme.scss | 2 +-
.../users/feature/_users.component-theme.scss | 2 +-
.../_context-menu.component-theme.scss | 2 +-
.../_extension-creation.component-theme.scss | 2 +-
.../extension-creation.component.html | 14 +-
.../extension-creation.component.ts | 8 +-
.../navigation/_navigation.component-theme.scss | 5 +-
.../ui/common/navigation/navigation.component.html | 1 +
.../ui/common/navigation/navigation.component.ts | 29 +-
.../nf-editor/_nf-editor.component-theme.scss | 7 +-
.../_provenance-event-dialog.component-theme.scss | 2 +-
.../resizable/_resizable.component-theme.scss | 2 +-
.../_status-history.component-theme.scss | 17 +-
.../status-history/status-history.component.scss | 6 +-
..._system-diagnostics-dialog.component-theme.scss | 2 +-
.../_property-hint-tip.component-theme.scss | 2 +-
.../src/assets/styles/_listing-table-theme.scss | 2 +-
.../src/main/nifi/src/assets/themes/nifi.scss | 197 +++++++++-
.../src/main/nifi/src/assets/themes/purple.scss | 194 +++++++++-
.../src/main/nifi/src/styles.scss | 415 +++++++++++++--------
53 files changed, 767 insertions(+), 242 deletions(-)
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/.prettierignore
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/.prettierignore
index 4e65d169f6..0ea8adf100 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/.prettierignore
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/.prettierignore
@@ -33,6 +33,7 @@ npm-debug.log
# Theme
src/assets/themes/*
+src/styles.scss
# System files
.DS_Store
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/_app.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/_app.component-theme.scss
index 481c26f374..3afc567f46 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/_app.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/_app.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($theme) {
+@mixin nifi-theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/_access-policies.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/_access-policies.component-theme.scss
index c4bcb2b1fc..4cbbf1465a 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/_access-policies.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/_access-policies.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($theme) {
+@mixin nifi-theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/_add-tenant-to-policy-dialog.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/_add-tenant-to-policy-dialog.component-theme.scss
index 967468396d..09cdf1c0b0 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/_add-tenant-to-policy-dialog.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/_add-tenant-to-policy-dialog.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($theme) {
+@mixin nifi-theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/_component-access-policies.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/_component-access-policies.component-theme.scss
index 8bc5df1089..0878ecc65d 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/_component-access-policies.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/_component-access-policies.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($material-theme, $canvas-theme) {
+@mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
@@ -29,7 +29,7 @@
$canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette
- $primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
+ $primary-palette-700: mat.get-color-from-palette($primary-palette, 700);
$warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200');
$canvas-primary-palette-A200:
mat.get-color-from-palette($canvas-primary-palette, 'A200');
@@ -45,7 +45,7 @@
}
.operation-context-type {
- color: $primary-palette-500;
+ color: $primary-palette-700;
}
}
}
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/_bulletins.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/_bulletins.component-theme.scss
index 0b19e9ab10..572454e253 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/_bulletins.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/_bulletins.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($theme) {
+@mixin nifi-theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board-list/_bulletin-board-list.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board-list/_bulletin-board-list.component-theme.scss
index 828f553011..3e8f1351d6 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board-list/_bulletin-board-list.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board-list/_bulletin-board-list.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($material-theme, $canvas-theme) {
+@mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/_counters.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/_counters.component-theme.scss
index eeb6b3007a..d1954ee3dd 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/_counters.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/_counters.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($theme) {
+@mixin nifi-theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
index b2e8a3f504..0d585b4739 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($material-theme, $canvas-theme) {
+@mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss
index 89a28a5954..6a05d243b6 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($material-theme, $canvas-theme) {
+@mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss
index 2cfa7d3611..c9427ca039 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($material-theme, $canvas-theme) {
+@mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/_birdseye.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/_birdseye.component-theme.scss
index 8c9a2d00a4..20cdc01579 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/_birdseye.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/_birdseye.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($material-theme, $canvas-theme) {
+@mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss
index 415f986302..511f397412 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($material-theme, $canvas-theme) {
+@mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
@@ -31,7 +31,7 @@
// Get hues from palette
$primary-palette-100: mat.get-color-from-palette($primary-palette, 100);
$primary-palette-300: mat.get-color-from-palette($primary-palette, 300);
- $primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
+ $primary-palette-700: mat.get-color-from-palette($primary-palette, 700);
$primary-palette-A400: mat.get-color-from-palette($primary-palette,
'A400');
$warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200');
$warn-palette-A400: mat.get-color-from-palette($warn-palette, 'A400');
@@ -73,7 +73,7 @@
}
.operation-context-type {
- color: $primary-palette-500;
+ color: $primary-palette-700;
}
}
}
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/_header.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/_header.component-theme.scss
index 37879e3660..e22bb1e8ff 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/_header.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/_header.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($canvas-theme) {
+@mixin nifi-theme($canvas-theme) {
// Get the color config from the theme.
$canvas-color-config: mat.get-color-config($canvas-theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss
index 8d098c93c3..5289d0e53d 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($material-theme, $canvas-theme) {
+@mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss
index 242dc8d037..7c86b143fd 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($material-theme, $canvas-theme) {
+@mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss
index 1d1c67a2c5..ff73df19fe 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($material-theme, $canvas-theme) {
+@mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
@@ -32,6 +32,7 @@
$canvas-primary-palette-900:
mat.get-color-from-palette($canvas-primary-palette, 900);
$canvas-primary-palette-A200:
mat.get-color-from-palette($canvas-primary-palette, 'A200');
$canvas-primary-palette-A700:
mat.get-color-from-palette($canvas-primary-palette, 'A700');
+ $canvas-primary-palette-contrast-300:
mat.get-color-from-palette($canvas-primary-palette, 'contrast-300');
.search-container {
border-left: 1px solid $primary-palette-300;
@@ -44,10 +45,15 @@
.search-input {
color: $canvas-primary-palette-A200;
+ background-color: $canvas-primary-palette-900;
}
.fa {
color: $canvas-primary-palette-A700;
}
}
+
+ .search-results {
+ background-color: $canvas-primary-palette-900;
+ }
}
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.html
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.html
index 4249a64961..fc124d06a5 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.html
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.html
@@ -20,6 +20,7 @@
<form [formGroup]="searchForm">
<input
type="text"
+ matInput
placeholder="Search"
class="search-input"
[class.open]="searchInputVisible"
@@ -34,7 +35,7 @@
[cdkConnectedOverlayHasBackdrop]="true"
[cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
(backdropClick)="backdropClicked()">
- <div class="search-results bg-white w-96 border p-2 text-sm
max-h-96 overflow-y-auto">
+ <div class="search-results w-96 border p-2 text-sm max-h-96
overflow-y-auto">
<div *ngIf="searching; else renderAllResults" class="unset
italic">Searching</div>
</div>
</ng-template>
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.ts
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.ts
index bee859ebac..4e7b2eef5f 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.ts
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/search.component.ts
@@ -30,13 +30,25 @@ import {
import { ComponentType } from '../../../../../../state/shared';
import { NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
import { RouterLink } from '@angular/router';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
@Component({
selector: 'search',
standalone: true,
templateUrl: './search.component.html',
styleUrls: ['./search.component.scss'],
- imports: [ReactiveFormsModule, CdkOverlayOrigin, CdkConnectedOverlay,
NgIf, NgTemplateOutlet, RouterLink, NgForOf]
+ imports: [
+ ReactiveFormsModule,
+ CdkOverlayOrigin,
+ CdkConnectedOverlay,
+ NgIf,
+ NgTemplateOutlet,
+ RouterLink,
+ NgForOf,
+ MatFormFieldModule,
+ MatInputModule
+ ]
})
export class Search implements OnInit {
protected readonly ComponentType = ComponentType;
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/_prioritizers.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/_prioritizers.component-theme.scss
index debb8e6eec..67a5fe6ab4 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/_prioritizers.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/_prioritizers.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($material-theme, $canvas-theme) {
+@mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/_create-process-group.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/_create-process-group.component-theme.scss
index 40893b1273..def49ce033 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/_create-process-group.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/_create-process-group.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($theme) {
+@mixin nifi-theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/common/banner/_banner.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/common/banner/_banner.component-theme.scss
index 2783f57b77..71e4d7d64f 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/common/banner/_banner.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/common/banner/_banner.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($theme) {
+@mixin nifi-theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/controller-service/_controller-services.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/controller-service/_controller-services.component-theme.scss
index 313d900108..20858b80fb 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/controller-service/_controller-services.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/controller-service/_controller-services.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($theme) {
+@mixin nifi-theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/feature/_login.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/feature/_login.component-theme.scss
index e7e28fe59b..f60260c711 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/feature/_login.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/feature/_login.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($material-theme, $canvas-theme) {
+@mixin nifi-theme($material-theme, $canvas-theme) {
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/ui/login-form/_login-form.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/ui/login-form/_login-form.component-theme.scss
index b3bd945dc9..a657dbc1c0 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/ui/login-form/_login-form.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/ui/login-form/_login-form.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($theme) {
+@mixin nifi-theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/_parameter-contexts.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/_parameter-contexts.component-theme.scss
index 0845b8869f..410954f8b0 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/_parameter-contexts.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/_parameter-contexts.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($theme) {
+@mixin nifi-theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/_parameter-context-inheritance.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/_parameter-context-inheritance.component-theme.scss
index aac03a7a4e..0116242f7b 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/_parameter-context-inheritance.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/_parameter-context-inheritance.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($material-theme, $canvas-theme) {
+@mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss
index 2a8f8040f6..80e82167c6 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($material-theme, $canvas-theme) {
+@mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/_provenance-event-table.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/_provenance-event-table.component-theme.scss
index 29259f27d5..9d88b7000c 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/_provenance-event-table.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/_provenance-event-table.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($material-theme, $canvas-theme) {
+@mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/_lineage.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/_lineage.component-theme.scss
index aba6602f63..df08cfd6c1 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/_lineage.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/_lineage.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($material-theme, $canvas-theme) {
+@mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
@@ -26,17 +26,23 @@
// Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
$warn-palette: map.get($color-config, 'warn');
+ $canvas-primary-palette: map.get($canvas-color-config, 'primary');
$canvas-accent-palette: map.get($canvas-color-config, 'accent');
// Get hues from palette
$primary-palette-A400: mat.get-color-from-palette($primary-palette,
'A400');
$warn-palette-400: mat.get-color-from-palette($warn-palette, 400);
$warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200');
+ $canvas-primary-palette-A200:
mat.get-color-from-palette($canvas-primary-palette, 'A200');
$canvas-accent-palette-A200:
mat.get-color-from-palette($canvas-accent-palette, 'A200');
#lineage {
canvas,
svg {
+ text.event-type {
+ fill: $canvas-primary-palette-A200;
+ }
+
path.link.selected {
stroke: $warn-palette-400;
}
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/_flowfile-dialog.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/_flowfile-dialog.component-theme.scss
index 21f0a995ca..89456e69d2 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/_flowfile-dialog.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/_flowfile-dialog.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($theme) {
+@mixin nifi-theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/_flowfile-table.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/_flowfile-table.component-theme.scss
index 0a80eafa21..b58a34f0ab 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/_flowfile-table.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/_flowfile-table.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($theme) {
+@mixin nifi-theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/_settings.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/_settings.component-theme.scss
index 3b7864a4b3..cf13fc636a 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/_settings.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/_settings.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($theme) {
+@mixin nifi-theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/_summary.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/_summary.component-theme.scss
index 70d58126fb..8ebd576666 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/_summary.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/_summary.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($theme) {
+@mixin nifi-theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/_users.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/_users.component-theme.scss
index 9307f70205..ee08282a7f 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/_users.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/_users.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($theme) {
+@mixin nifi-theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
diff --git
a/nifi-nar-bundles/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-nar-bundles/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 009e965093..18a9bbf68d 100644
---
a/nifi-nar-bundles/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-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($material-theme, $canvas-theme) {
+@mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/_extension-creation.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/_extension-creation.component-theme.scss
index 760179a9bc..31f828f522 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/_extension-creation.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/_extension-creation.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($material-theme, $canvas-theme) {
+@mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
diff --git
a/nifi-nar-bundles/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-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html
index 06d67de62f..e442e90f46 100644
---
a/nifi-nar-bundles/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-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html
@@ -20,11 +20,15 @@
<div class="flex justify-between items-center">
<h3 class="text-lg">Add {{ componentType }}</h3>
<div>
- <input
- class="border px-1.5 py-1 w-64"
- type="text"
- (keyup)="filterTypes($event)"
- placeholder="Filter types..." />
+ <mat-form-field>
+ <mat-label>Filter types</mat-label>
+ <input
+ matInput
+ class="border px-1.5 py-1 w-64"
+ type="text"
+ (keyup)="filterTypes($event)"
+ placeholder="Filter types..." />
+ </mat-form-field>
</div>
</div>
<div class="type-table">
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.ts
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.ts
index ab439d166a..ad7c9b7223 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.ts
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.ts
@@ -27,6 +27,9 @@ import { NifiTooltipDirective } from
'../tooltips/nifi-tooltip.directive';
import { RestrictionsTip } from
'../tooltips/restrictions-tip/restrictions-tip.component';
import { ControllerServiceApiTip } from
'../tooltips/controller-service-api-tip/controller-service-api-tip.component';
import { NifiSpinnerDirective } from '../spinner/nifi-spinner.directive';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { ReactiveFormsModule } from '@angular/forms';
@Component({
selector: 'extension-creation',
@@ -39,7 +42,10 @@ import { NifiSpinnerDirective } from
'../spinner/nifi-spinner.directive';
MatSortModule,
NgIf,
NifiTooltipDirective,
- NifiSpinnerDirective
+ NifiSpinnerDirective,
+ MatFormFieldModule,
+ MatInputModule,
+ ReactiveFormsModule
],
styleUrls: ['./extension-creation.component.scss']
})
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
index c123fa78bf..0ac54c7d1b 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($material-theme, $canvas-theme) {
+@mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
@@ -30,7 +30,6 @@
// Get hues from palette
$primary-palette-100: mat.get-color-from-palette($primary-palette, 100);
$primary-palette-300: mat.get-color-from-palette($primary-palette, 300);
- $primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
$primary-palette-A400: mat.get-color-from-palette($primary-palette,
'A400');
$canvas-primary-palette-50:
mat.get-color-from-palette($canvas-primary-palette, 50);
$canvas-primary-palette-A200:
mat.get-color-from-palette($canvas-primary-palette, 'A200');
@@ -55,7 +54,7 @@
button.global-menu-item {
.fa,
.icon {
- color: $primary-palette-500;
+ color: $primary-palette-A400;
}
}
}
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/navigation.component.html
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/navigation.component.html
index e6e060ebc1..16450e9bf7 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/navigation.component.html
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/navigation.component.html
@@ -30,6 +30,7 @@
<ng-content></ng-content>
</div>
<div class="flex justify-between items-center gap-x-1"
*ngIf="currentUser$ | async as user">
+ <mat-slide-toggle color="primary"
(click)="toggleTheme()"></mat-slide-toggle>
<div class="flex flex-col justify-between items-end gap-y-1">
<div class="current-user">{{ user.identity }}</div>
<a href="#" *ngIf="allowLogin(user)">log in</a>
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/navigation.component.ts
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/navigation.component.ts
index 97b65669cd..0f6bbd0a54 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/navigation.component.ts
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/navigation.component.ts
@@ -15,8 +15,9 @@
* limitations under the License.
*/
-import { Component } from '@angular/core';
-import { AsyncPipe, NgIf, NgOptimizedImage } from '@angular/common';
+import { Component, Inject } from '@angular/core';
+import { AsyncPipe, DOCUMENT, NgIf, NgOptimizedImage } from '@angular/common';
+import { FormsModule } from '@angular/forms';
import { MatDividerModule } from '@angular/material/divider';
import { MatMenuModule } from '@angular/material/menu';
import { getNodeStatusHistoryAndOpenDialog } from
'../../../state/status-history/status-history.actions';
@@ -30,22 +31,35 @@ import { selectCurrentUser } from
'../../../state/current-user/current-user.sele
import { MatButtonModule } from '@angular/material/button';
import { NiFiState } from '../../../state';
import { selectFlowConfiguration } from
'../../../state/flow-configuration/flow-configuration.selectors';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
@Component({
selector: 'navigation',
standalone: true,
- imports: [NgOptimizedImage, AsyncPipe, MatDividerModule, MatMenuModule,
NgIf, RouterLink, MatButtonModule],
+ imports: [
+ NgOptimizedImage,
+ AsyncPipe,
+ MatDividerModule,
+ MatMenuModule,
+ NgIf,
+ RouterLink,
+ MatButtonModule,
+ MatSlideToggleModule,
+ FormsModule
+ ],
templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.scss']
})
export class Navigation {
currentUser$ = this.store.select(selectCurrentUser);
flowConfiguration$ = this.store.select(selectFlowConfiguration);
+ isDarkMode = false;
constructor(
private store: Store<NiFiState>,
private authStorage: AuthStorage,
- private authService: AuthService
+ private authService: AuthService,
+ @Inject(DOCUMENT) private _document: Document
) {}
allowLogin(user: CurrentUser): boolean {
@@ -79,4 +93,11 @@ export class Navigation {
})
);
}
+
+ toggleTheme(value = !this.isDarkMode) {
+ this.isDarkMode = value;
+ this._document.body.classList.toggle('dark-theme', value);
+
+ // TODO: save to local storage or read OS settings???
+ }
}
diff --git
a/nifi-nar-bundles/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-nar-bundles/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 714b7b54c0..ec0ccf4b18 100644
---
a/nifi-nar-bundles/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-nar-bundles/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
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($material-theme, $canvas-theme) {
+@mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
@@ -30,9 +30,10 @@
// Get hues from palette
$primary-palette-100: mat.get-color-from-palette($primary-palette, 100);
$primary-palette-300: mat.get-color-from-palette($primary-palette, 300);
+ $canvas-primary-palette-100:
mat.get-color-from-palette($canvas-primary-palette, 100);
$canvas-primary-palette-200:
mat.get-color-from-palette($canvas-primary-palette, 200);
$canvas-primary-palette-300:
mat.get-color-from-palette($canvas-primary-palette, 300);
- $canvas-primary-palette-900:
mat.get-color-from-palette($canvas-primary-palette, 900);
+ $canvas-primary-palette-contrast-900:
mat.get-color-from-palette($canvas-primary-palette, 'contrast-900');
.property-editor {
@include mat.button-density(-1);
@@ -40,7 +41,7 @@
.nf-editor {
.CodeMirror {
border: 1px solid $canvas-primary-palette-300;
- background-color: $canvas-primary-palette-900;
+ background-color: $canvas-primary-palette-contrast-900;
&.blank {
background: $primary-palette-300;
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/_provenance-event-dialog.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/_provenance-event-dialog.component-theme.scss
index 1517028f34..581d629e0e 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/_provenance-event-dialog.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/_provenance-event-dialog.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($theme) {
+@mixin nifi-theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/_resizable.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/_resizable.component-theme.scss
index 85a26f6235..fdb567981b 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/_resizable.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/_resizable.component-theme.scss
@@ -19,7 +19,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($material-theme, $canvas-theme) {
+@mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss
index 1418df260f..b5a5a54101 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($material-theme, $canvas-theme) {
+@mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
@@ -33,30 +33,21 @@
$canvas-primary-palette-A100:
mat.get-color-from-palette($canvas-primary-palette, 'A100');
$canvas-primary-palette-A700:
mat.get-color-from-palette($canvas-primary-palette, 'A700');
- #status-history-chart-container,
- #status-history-chart-control-container {
+ :host ::ng-deep #status-history-chart-container,
+ :host ::ng-deep #status-history-chart-control-container {
background-color: $canvas-primary-palette-900;
.axis path,
.axis line {
- fill: none;
stroke: $canvas-primary-palette-A100;
}
- .chart-line {
- fill: none;
- }
-
.brush .selection {
stroke: $canvas-primary-palette-A700;
}
}
- #status-history-chart-control-container {
- background-color: $canvas-primary-palette-900;
- }
-
- #status-history-chart-container text,
+ :host ::ng-deep #status-history-chart-container text,
#status-history-chart-control-container text {
fill: $primary-palette-700;
}
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.scss
index 9883d481f8..c691a340dc 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.scss
@@ -65,10 +65,6 @@
.mat-mdc-dialog-content {
max-height: unset;
}
-
- .selected-descriptor-container {
- height: 68px;
- }
}
}
@@ -79,6 +75,7 @@
.axis path,
.axis line {
+ fill: none;
shape-rendering: crispEdges;
}
@@ -87,6 +84,7 @@
}
.chart-line {
+ fill: none;
stroke-width: 1.5px;
}
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/_system-diagnostics-dialog.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/_system-diagnostics-dialog.component-theme.scss
index b6c6466f17..2551707f94 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/_system-diagnostics-dialog.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/_system-diagnostics-dialog.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($theme) {
+@mixin nifi-theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/property-hint-tip/_property-hint-tip.component-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/property-hint-tip/_property-hint-tip.component-theme.scss
index 804b6ec279..525c2c00e6 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/property-hint-tip/_property-hint-tip.component-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/property-hint-tip/_property-hint-tip.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($theme) {
+@mixin nifi-theme($theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table-theme.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table-theme.scss
index 02f1f321c6..feefd7e767 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table-theme.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin theme($material-theme, $canvas-theme) {
+@mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss
index b96c925f12..98efb4cecf 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss
@@ -34,10 +34,10 @@ $material-primary-light-palette: (
// A100 -> A700 are the ACCENT color
(mat.define-palette($material-primary-light-palette, A400, A100, A700);). These
color are the ANALOGOUS (or possibly the TRIADIC??) colors as defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
for primary color #728e9b
// These colors are also used by some custom canvas components that
display the ANALOGOUS color for things like buttons, links, borders, info, etc.
- A100: #c1dbd7, // .zero
- A200: #9dc4be, // .enabled, .transmitting, .load-balance-icon-active
- A400: #729b93, // a, a:hover, button.nifi-button,
button.nifi-button:hover, .add-tenant-to-policy-form.fa, .component.selected
rect.border, .add-connect, .remote-process-group-uri,
.remote-process-group-transmission-secure, .navigation-control.fa,
.operation-control.fa, .new-canvas-item.icon, .upload-flow-definition,
.lineage-controls.fa, .event circle.context, .nifi-navigation.icon,
.listing-table.fa, .listing-table.icon, .context-menu
- A700: rgba(91, 109, 104, 1), // .hint-pattern
+ A100: #aabec7, // .zero
+ A200: #44a3cf, // .enabled, .transmitting, .load-balance-icon-active
+ A400: #004849, // a, a:hover, button.nifi-button,
button.nifi-button:hover, .add-tenant-to-policy-form.fa, .component.selected
rect.border, .add-connect, .remote-process-group-uri,
.remote-process-group-transmission-secure, .navigation-control.fa,
.operation-control.fa, .new-canvas-item.icon, .upload-flow-definition,
.lineage-controls.fa, .event circle.context, .nifi-navigation.icon,
.listing-table.fa, .listing-table.icon, .context-menu
+ A700: rgba(20, 145, 193, 0.12), // .hint-pattern
// These are the $material-primary-light-palette PRIMARY AND ACCENT
contrast colors. These color do not really get defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors.
// Instead if we look to the Angular Material provided palettes we see
that these fields are typically rgba(black, 0.87) or white. These values are
particularly important
@@ -65,6 +65,53 @@ $material-primary-light-palette: (
)
);
+// The $material-primary-dark-palette define the PRIMARY AND ACCENT palettes
for all Angular Material components used throughout Apache NiFi
+$material-primary-dark-palette: (
+ // 50 -> 900 are the PRIMARY colors
(mat.define-palette($material-primary-dark-palette, 300);) defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
for primary color #728e9b
+ 50: rgb(30, 45, 54), // .context-menu
+ 100: rgba(32, 47, 54, 1), // "lighter" hue for this palette. Also
.global-menu:hover, .navigation-control-header:hover,
.operation-control-header:hover, .new-canvas-item.icon.hovering, table
tr:hover, .CodeMirror.blank, .remote-banner, .process-group-details-banner,
.process-group-details-banner, remote-process-group-details-banner,
.remote-process-group-last-refresh-rect,
+ 200: #30444d, // .processor-stats-border, .process-group-stats-border,
.context-menu-item:hover, .process-group-banner, .remote-process-group-banner,
.a, button.nifi-button, button.nifi-button:disabled
+ 300: #3e5762, // .breadcrumb-container, .navigation-control,
.operation-control, .flow-status, .controller-bulletins,
.component-button-grip, .search-container, .nifi-navigation, .CodeMirror.blank
+ 400: #4d6b78, // Default hue for this palette (color="primary").
+ 500: #587a89, // .disabled, .not-transmitting, .splash,
.access-policies-header, .operation-context-type, .bulletin-board-header,
.counter-header, .stats-info, .active-thread-count-icon, .processor-type,
.port-transmission-icon, .operation-context-type, .flow-status.fa,
.flow-status.icon, .controller-bulletins, .prioritizers-list,
.controller-services-header, .login-title, .parameter-context-header,
.parameter-context-inheritance-list, .provenance-header, .flowfile-header,
.queue-lis [...]
+ 600: #718d9a, // .breadcrumb-container, .birdseye-brush
+ 700: #8aa2ad, // "darker" hue for this palette. Also
#status-history-chart-container text, #status-history-chart-control-container
text
+ 800: #abbcc5,
+ 900: #abbcc5,
+
+ // A100 -> A700 are the ACCENT color
(mat.define-palette($material-primary-dark-palette, A400, A100, A700);). These
color are the ANALOGOUS (or possibly the TRIADIC??) colors as defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
for primary color #728e9b
+ // These colors are also used by some custom canvas components that
display the ANALOGOUS color for things like buttons, links, borders, info, etc.
+ A100: #aabec7, // .zero
+ A200: #44a3cf, // .enabled, .transmitting, .load-balance-icon-active
+ A400: #009b9d, // a, a:hover, button.nifi-button,
button.nifi-button:hover, .add-tenant-to-policy-form.fa, .component.selected
rect.border, .add-connect, .remote-process-group-uri,
.remote-process-group-transmission-secure, .navigation-control.fa,
.operation-control.fa, .new-canvas-item.icon, .upload-flow-definition,
.lineage-controls.fa, .event circle.context, .nifi-navigation.icon,
.listing-table.fa, .listing-table.icon, .context-menu
+ A700: #2cd5d5,//rgba(139, 208, 229, 1),//#aabec7 // .hint-pattern
+
+ // These are the $material-primary-dark-palette PRIMARY AND ACCENT
contrast colors. These color do not really get defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors.
+ // Instead if we look to the Angular Material provided palettes we see
that these fields are typically rgba(black, 0.87) or white. These values are
particularly important
+ // for light mode and dark mode as these values set the colors for the
text when displayed against the primary background on a button, badge, chip,
etc.
+ //
+ // NOTE: Care should be taken here to ensure the values meet accessibility
standards.
+ //
+ // NOTE: When creating the Material palette definition
mat.define-palette($material-primary-dark-palette, 300);
+ // Since 300, was set as the default the contrast-300 will be used as the
default text color.
+ contrast: (
+ 50: #ffffff,
+ 100: #ffffff,
+ 200: #ffffff,
+ 300: #ffffff,
+ 400: #ffffff,
+ 500: #ffffff,
+ 600: rgba(black, 0.87),
+ 700: rgba(black, 0.87),
+ 800: rgba(black, 0.87),
+ 900: rgba(black, 0.87),
+ A100: #ffffff,
+ A200: #ffffff,
+ A400: rgba(black, 0.87),
+ A700: rgba(black, 0.87),
+ )
+);
+
// The $nifi-canvas-light-palette defines the PRIMARY palette for all flow
designer canvas components that make up the NiFi canvas theme used throughout
Apache NiFi
$nifi-canvas-light-palette: (
// mat.define-palette($nifi-canvas-light-palette)
@@ -111,6 +158,52 @@ $nifi-canvas-light-palette: (
)
);
+// The $nifi-canvas-dark-palette defines the PRIMARY palette for all flow
designer canvas components that make up the NiFi canvas theme used throughout
Apache NiFi
+$nifi-canvas-dark-palette: (
+ // mat.define-palette($nifi-canvas-dark-palette)
+ 50: rgba(255, 255, 255, 1), // .tooltip, .property-editor, g.component
rect.border, .component-comments, g.connection path.connection-path,
g.connection rect.backpressure-tick.data-size-prediction, g.connection
rect.backpressure-tick.object-prediction, g.connection
rect.backpressure-object, g.connection rect.backpressure-data-size,
.breadcrumb-container, .navigation-control, .operation-control,
header.nifi-header, .new-canvas-item.icon.hovering, .cdk-drag-disabled,
.cdk-drag-preview, [...]
+ 100: #f4f6f7, //rgba(black, 0.87), // .prioritizer-draggable-item,
.parameter-context-draggable-item
+ 200: #e5ebed, // .tooltip, .cm-s-default .CodeMirror-matchingbracket,
circle.flowfile-link
+ 300: #f9fafb, // .context-menu-item:active, .CodeMirror, .cm-s-default
.CodeMirror-matchingbracket
+ 400: #d8d8d8, // .unset, .border.ghost, .backpressure-tick.not-configured,
g.connection.ghost path.connection-path, g.connection.ghost
rect.connection-label, .prioritizers-list, .prioritizer-draggable-item,
.parameter-context-inheritance-list, .parameter-context-draggable-item
+ 500: #acacac, // g.connection rect.backpressure-object, g.connection
rect.backpressure-data-size, .cdk-drag-disabled, .resizable-triangle
+ 600: #545454, // .canvas-background, .navigation-control,
.operation-control, .lineage
+ 700: #696060, // .canvas-background, g.component rect.body.unauthorized,
g.component rect.processor-icon-container.unauthorized, g.connection
rect.body.unauthorized, #birdseye, .lineage
+ 800: rgba(#6b6464, 0.5), // .even, .remote-process-group-sent-stats,
.processor-stats-in-out, .process-group-queued-stats,
.process-group-read-write-stats
+ 900: rgba(#252424, 0.97), // circle.flowfile-link,
.processor-read-write-stats, .process-group-stats-in-out, .tooltip,
.property-editor, .disabled, .enabled, .stopped, .running, .has-errors,
.invalid, .validating, .transmitting, .not-transmitting, .up-to-date,
.locally-modified, .sync-failure, .stale, .locally-modified-and-stale,
g.component rect.body, text.bulletin-icon, rect.processor-icon-container,
circle.restricted-background, circle.is-primary-background, g.connection
rect.body [...]
+
+ // some analog colors for headers and hover states, inputs, stats, etc
+ A100: #000, // .navigation-control-header:hover,
.operation-control-header:hover, .axis path, .axis line
+ A200: #e7e6e6, // .operation-context-name, text.stats-label,
text.processor-name, text.port-name, text.process-group-name,
text.remote-process-group-name, .navigation-control-title,
.operation-control-title, .operation-context-name, .search-input,
.context-menu-item-text, .current-user
+ A400: #b0b0b0, // rect.component-selection, rect.drag-selection,
rect.label-drag
+ A700: #b2b2b2, // text.processor-bundle, .search-container:hover,
.search-container.open, .search-container.fa, .selected-type-bundle, .brush
.selection
+
+ // These are the $nifi-canvas-dark-palette PRIMARY palette contrast
colors. These color do not really get defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors.
+ // Instead if we look to the Angular Material provided palettes we see
that these fields are typically rgba(black, 0.87) or white. These values are
particularly important
+ // for light mode and dark mode as these values set the colors for the
text when displayed against the primary background on a button, badge, chip,
etc.
+ //
+ // NOTE: Care should be taken here to ensure the values meet accessibility
standards.
+ //
+ // NOTE: When creating the Material palette definition
mat.define-palette($nifi-canvas-dark-palette);
+ // Since 500 is the default the contrast-500 will be used as the default
text color.
+ contrast: (
+ 50: #ffffff,
+ 100: #ffffff,
+ 200: #ffffff,
+ 300: #ffffff,
+ 400: #ffffff,
+ 500: #ffffff,
+ 600: rgba(black, 0.87),
+ 700: rgba(black, 0.87),
+ 800: rgba(black, 0.87),
+ 900: rgba(black, 0.87),
+ A100: #ffffff,
+ A200: #ffffff,
+ A400: rgba(black, 0.87),
+ A700: rgba(black, 0.87),
+ )
+);
+
// The $nifi-canvas-light-palette defines the ACCENT palette for all flow
designer canvas components that make up the NiFi canvas theme used throughout
Apache NiFi
$nifi-canvas-accent-light-palette: (
// 50 -> 900 are the PRIMARY colors defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
for primary color #52bf7e
@@ -157,6 +250,53 @@ $nifi-canvas-accent-light-palette: (
)
);
+// The $nifi-canvas-dark-palette defines the ACCENT palette for all flow
designer canvas components that make up the NiFi canvas theme used throughout
Apache NiFi
+$nifi-canvas-accent-dark-palette: (
+ // 50 -> 900 are the PRIMARY colors defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
for primary color #52bf7e
+ 50: #016131,
+ 100: #1A9964, // "lighter" hue for this palette.
+ 200: #2cb367, //.running
+ 300: #52bf7e, //.backpressure-percent
+ 400: #73ca94, // color="primary" Default hue for this palette. Also
.up-to-date
+ 500: #9dd9b2,
+ 600: #c3e8d0, //.version-control
+ 700: #e6f6ec, // "darker" hue for this palette Also .bulletin-normal
+ 800: #0000ff, //.endpoint, g.process-group.drop rect.border
+ 900: #00ff00, //.connectable-destination, .connector.connectable
+
+ // A100 - A700 are the ANALOGOUS colors but are more customized. These
colors are used to highlight, warn, denote midpoints and labelpoints, etc
+ A100: #cbaa09, //.selected
+ A200: #bda500, //.invalid, .is-missing-port, circle.context
+ A400: #f8bf47, //.backpressure-percent-warning, .bulletin-warn,
.backpressure-percent.warning, text.run-status-icon
+ A700: #948b4b, //g.connection.selected rect.border,
.connection-selection-path, .midpoint, .labelpoint
+
+ // These are the $nifi-canvas-accent-dark-palette PRIMARY palette contrast
colors. These color do not really get defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors.
+ // Instead if we look to the Angu
+ // lar Material provided palettes we see that these fields are typically
rgba(black, 0.87) or white. These values are particularly important
+ // for light mode and dark mode as these values set the colors for the
text when displayed against the primary background on a button, badge, chip,
etc.
+ //
+ // NOTE: Care should be taken here to ensure the values meet accessibility
standards.
+ //
+ // NOTE: When creating the Material palette definition
mat.define-palette($nifi-canvas-accent-dark-palette, 400, 100, 700);
+ // Since 400 is the default the contrast-400 will be used as the default
text color in some cases.
+ contrast: (
+ 50: #ffffff,
+ 100: #ffffff,
+ 200: #ffffff,
+ 300: #ffffff,
+ 400: #ffffff,
+ 500: #ffffff,
+ 600: rgba(black, 0.87),
+ 700: rgba(black, 0.87),
+ 800: rgba(black, 0.87),
+ 900: rgba(black, 0.87),
+ A100: #ffffff,
+ A200: #ffffff,
+ A400: rgba(black, 0.87),
+ A700: rgba(black, 0.87),
+ )
+);
+
// The $warn-light-palette defines the WARN palette both for all Angular
Material components used throughout Apache NiFi and for all flow designer
canvas components that make up the NiFi canvas theme used throughout Apache NiFi
$warn-light-palette: (
// 50 -> 900 are the PRIMARY colors defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
for primary color #f64e4c
@@ -173,7 +313,7 @@ $warn-light-palette: (
// A100 - A700 are the COMPLEMENTARY colors defined by the PRIMARY colors
defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
for primary color #728e9b which is the primary color of the
$material-primary-light-palette.
// These color are used for label values, stats, timestamps, counts, etc.
- A100: #b6abaa, //.sync-failure
+ A100: #d0c3c2, //.sync-failure
A200: #9c8886, // .operation-context-logo, .funnel-icon, .port-icon,
.flowfile-icon
A400: #765452, // .value, .refresh-timestamp, .stats-value,
.active-thread-count, .process-group-contents-count, .operation-context-id,
.selected-type-name
A700: #4a3435, // .version-control
@@ -203,3 +343,50 @@ $warn-light-palette: (
A700: #ffffff,
)
);
+
+// The $warn-dark-palette defines the WARN palette both for all Angular
Material components used throughout Apache NiFi and for all flow designer
canvas components that make up the NiFi canvas theme used throughout Apache NiFi
+$warn-dark-palette: (
+ // 50 -> 900 are the PRIMARY colors defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
for primary color #f64e4c
+ 50: #ffebee,
+ 100: #ffccd2, // "lighter" hue for this palette. Also .banner-error
+ 200: #f49999, //.stopped
+ 300: #eb7071, //.stale
+ 400: #f64e4c, // color="primary" Default hue for this palette. Also
.unauthorized, .bulletin-background, .restricted, .connection-path.full,
.connection-path.unauthorized, .backpressure-percent.error,
.controller-bulletins.has-bulletins, .link.selected, circle.selected,
.listing-message, .fa-shield
+ 500: #fa3b30,
+ 600: #ec3030, //.bulletin-error
+ 700: #ff1507, // "darker" hue for this palette
+ 800: #ff0000, //.connector, .startpoint
+ 900: #f10000,
+
+ // A100 - A700 are the COMPLEMENTARY colors defined by the PRIMARY colors
defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
for primary color #728e9b which is the primary color of the
$material-primary-dark-palette.
+ // These color are used for label values, stats, timestamps, counts, etc.
+ A100: #ab777a, //.sync-failure
+ A200: #b98481, // .operation-context-logo, .funnel-icon, .port-icon,
.flowfile-icon
+ A400: #d5bab7, // .value, .refresh-timestamp, .stats-value,
.active-thread-count, .process-group-contents-count, .operation-context-id,
.selected-type-name
+ A700: #b6abaa, // .version-control
+
+ // These are the $nifi-canvas-accent-dark-palette PRIMARY palette contrast
colors. These color do not really get defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors.
+ // Instead if we look to the Angular Material provided palettes we see
that these fields are typically rgba(black, 0.87) or white. These values are
particularly important
+ // for light mode and dark mode as these values set the colors for the
text when displayed against the primary background on a button, badge, chip,
etc.
+ //
+ // NOTE: Care should be taken here to ensure the values meet accessibility
standards.
+ //
+ // NOTE: When creating the Material palette definition
mat.define-palette($warn-dark-palette, 400, 100, 700);
+ // Since 400 is the default the contrast-400 will be used as the default
text color in some cases.
+ contrast: (
+ 50: #ffffff,
+ 100: #ffffff,
+ 200: #ffffff,
+ 300: #ffffff,
+ 400: #ffffff,
+ 500: rgba(black, 0.87),
+ 600: rgba(black, 0.87),
+ 700: rgba(black, 0.87),
+ 800: rgba(black, 0.87),
+ 900: rgba(black, 0.87),
+ A100: #ffffff,
+ A200: #ffffff,
+ A400: rgba(black, 0.87),
+ A700: rgba(black, 0.87),
+ )
+);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/purple.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/purple.scss
index 52e2dab337..e35d55fdce 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/purple.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/purple.scss
@@ -36,10 +36,10 @@ $material-primary-light-palette: (
// A100 -> A700 are the ACCENT color
(mat.define-palette($material-primary-light-palette, A400, A100, A700);). These
color are the ANALOGOUS (or possibly the TRIADIC??) colors as defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
for primary color #728e9b
// These colors are also used by some custom canvas components that
display the ANALOGOUS color for things like buttons, links, borders, info, etc.
- A100: #c8cbe2, // .zero
- A200: #a5a9ce, // .enabled, .transmitting, .load-balance-icon-active
- A400: #6a6eab, // a, a:hover, button.nifi-button,
button.nifi-button:hover, .add-tenant-to-policy-form.fa, .component.selected
rect.border, .add-connect, .remote-process-group-uri,
.remote-process-group-transmission-secure, .navigation-control.fa,
.operation-control.fa, .new-canvas-item.icon, .upload-flow-definition,
.lineage-controls.fa, .event circle.context, .nifi-navigation.icon,
.listing-table.fa, .listing-table.icon, .context-menu
- A700: rgba(68, 67, 136, 1), // .hint-pattern
+ A100: #aabec7, // .zero
+ A200: #44a3cf, // .enabled, .transmitting, .load-balance-icon-active
+ A400: #004849, // a, a:hover, button.nifi-button,
button.nifi-button:hover, .add-tenant-to-policy-form.fa, .component.selected
rect.border, .add-connect, .remote-process-group-uri,
.remote-process-group-transmission-secure, .navigation-control.fa,
.operation-control.fa, .new-canvas-item.icon, .upload-flow-definition,
.lineage-controls.fa, .event circle.context, .nifi-navigation.icon,
.listing-table.fa, .listing-table.icon, .context-menu
+ A700: rgba(20, 145, 193, 0.12), // .hint-pattern
// These are the $material-primary-light-palette PRIMARY AND ACCENT
contrast colors. These color do not really get defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors.
// Instead if we look to the Angular Material provided palettes we see
that these fields are typically rgba(black, 0.87) or white. These values are
particularly important
@@ -67,6 +67,53 @@ $material-primary-light-palette: (
)
);
+// The $material-primary-dark-palette define the PRIMARY AND ACCENT palettes
for all Angular Material components used throughout Apache NiFi
+$material-primary-dark-palette: (
+ // 50 -> 900 are the PRIMARY colors
(mat.define-palette($material-primary-dark-palette, 300);) defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
for primary color #728e9b
+ 50: rgba(69, 47, 101, 1), // .context-menu
+ 100: rgba(93, 57, 123, 1), // "lighter" hue for this palette. Also
.global-menu:hover, .navigation-control-header:hover,
.operation-control-header:hover, .new-canvas-item.icon.hovering, table
tr:hover, .CodeMirror.blank, .remote-banner, .process-group-details-banner,
.process-group-details-banner, remote-process-group-details-banner,
.remote-process-group-last-refresh-rect,
+ 200: #6b3f86, // .processor-stats-border, .process-group-stats-border,
.context-menu-item:hover, .process-group-banner, .remote-process-group-banner,
.a, button.nifi-button, button.nifi-button:disabled
+ 300: #7b4690, // .breadcrumb-container, .navigation-control,
.operation-control, .flow-status, .controller-bulletins,
.component-button-grip, .search-container, .nifi-navigation, .CodeMirror.blank
+ 400: #874b98, // Default hue for this palette (color="primary").
+ 500: #985fa7, // .disabled, .not-transmitting, .splash,
.access-policies-header, .operation-context-type, .bulletin-board-header,
.counter-header, .stats-info, .active-thread-count-icon, .processor-type,
.port-transmission-icon, .operation-context-type, .flow-status.fa,
.flow-status.icon, .controller-bulletins, .prioritizers-list,
.controller-services-header, .login-title, .parameter-context-header,
.parameter-context-inheritance-list, .provenance-header, .flowfile-header,
.queue-lis [...]
+ 600: #aa79b7, // .breadcrumb-container, .birdseye-brush
+ 700: #d3bada, // "darker" hue for this palette. Also
#status-history-chart-container text, #status-history-chart-control-container
text
+ 800: #dac3e0,
+ 900: #f0e7f2,
+
+ // A100 -> A700 are the ACCENT color
(mat.define-palette($material-primary-dark-palette, A400, A100, A700);). These
color are the ANALOGOUS (or possibly the TRIADIC??) colors as defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
for primary color #728e9b
+ // These colors are also used by some custom canvas components that
display the ANALOGOUS color for things like buttons, links, borders, info, etc.
+ A100: #2cd5d5, // .zero
+ A200: #009b9d, // .enabled, .transmitting, .load-balance-icon-active
+ A400: #44a3cf, // a, a:hover, button.nifi-button,
button.nifi-button:hover, .add-tenant-to-policy-form.fa, .component.selected
rect.border, .add-connect, .remote-process-group-uri,
.remote-process-group-transmission-secure, .navigation-control.fa,
.operation-control.fa, .new-canvas-item.icon, .upload-flow-definition,
.lineage-controls.fa, .event circle.context, .nifi-navigation.icon,
.listing-table.fa, .listing-table.icon, .context-menu
+ A700: rgba(139, 208, 229, 1),//#aabec7 // .hint-pattern
+
+ // These are the $material-primary-dark-palette PRIMARY AND ACCENT
contrast colors. These color do not really get defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors.
+ // Instead if we look to the Angular Material provided palettes we see
that these fields are typically rgba(black, 0.87) or white. These values are
particularly important
+ // for light mode and dark mode as these values set the colors for the
text when displayed against the primary background on a button, badge, chip,
etc.
+ //
+ // NOTE: Care should be taken here to ensure the values meet accessibility
standards.
+ //
+ // NOTE: When creating the Material palette definition
mat.define-palette($material-primary-dark-palette, 300);
+ // Since 300, was set as the default the contrast-300 will be used as the
default text color.
+ contrast: (
+ 50: #ffffff,
+ 100: #ffffff,
+ 200: #ffffff,
+ 300: #ffffff,
+ 400: #ffffff,
+ 500: #ffffff,
+ 600: rgba(black, 0.87),
+ 700: rgba(black, 0.87),
+ 800: rgba(black, 0.87),
+ 900: rgba(black, 0.87),
+ A100: #ffffff,
+ A200: #ffffff,
+ A400: rgba(black, 0.87),
+ A700: rgba(black, 0.87),
+ )
+);
+
// The $nifi-canvas-light-palette defines the PRIMARY palette for all flow
designer canvas components that make up the NiFi canvas theme used throughout
Apache NiFi
$nifi-canvas-light-palette: (
// mat.define-palette($nifi-canvas-light-palette)
@@ -113,6 +160,52 @@ $nifi-canvas-light-palette: (
)
);
+// The $nifi-canvas-dark-palette defines the PRIMARY palette for all flow
designer canvas components that make up the NiFi canvas theme used throughout
Apache NiFi
+$nifi-canvas-dark-palette: (
+ // mat.define-palette($nifi-canvas-dark-palette)
+ 50: rgba(255, 255, 255, 1), // .tooltip, .property-editor, g.component
rect.border, .component-comments, g.connection path.connection-path,
g.connection rect.backpressure-tick.data-size-prediction, g.connection
rect.backpressure-tick.object-prediction, g.connection
rect.backpressure-object, g.connection rect.backpressure-data-size,
.breadcrumb-container, .navigation-control, .operation-control,
header.nifi-header, .new-canvas-item.icon.hovering, .cdk-drag-disabled,
.cdk-drag-preview, [...]
+ 100: #f4f6f7, //rgba(black, 0.87), // .prioritizer-draggable-item,
.parameter-context-draggable-item
+ 200: #e5ebed, // .tooltip, .cm-s-default .CodeMirror-matchingbracket,
circle.flowfile-link
+ 300: #f9fafb, // .context-menu-item:active, .CodeMirror, .cm-s-default
.CodeMirror-matchingbracket
+ 400: #d8d8d8, // .unset, .border.ghost, .backpressure-tick.not-configured,
g.connection.ghost path.connection-path, g.connection.ghost
rect.connection-label, .prioritizers-list, .prioritizer-draggable-item,
.parameter-context-inheritance-list, .parameter-context-draggable-item
+ 500: #acacac, // g.connection rect.backpressure-object, g.connection
rect.backpressure-data-size, .cdk-drag-disabled, .resizable-triangle
+ 600: #545454, // .canvas-background, .navigation-control,
.operation-control, .lineage
+ 700: #696060, // .canvas-background, g.component rect.body.unauthorized,
g.component rect.processor-icon-container.unauthorized, g.connection
rect.body.unauthorized, #birdseye, .lineage
+ 800: rgba(#6b6464, 0.5), // .even, .remote-process-group-sent-stats,
.processor-stats-in-out, .process-group-queued-stats,
.process-group-read-write-stats
+ 900: rgba(#252424, 0.97), // circle.flowfile-link,
.processor-read-write-stats, .process-group-stats-in-out, .tooltip,
.property-editor, .disabled, .enabled, .stopped, .running, .has-errors,
.invalid, .validating, .transmitting, .not-transmitting, .up-to-date,
.locally-modified, .sync-failure, .stale, .locally-modified-and-stale,
g.component rect.body, text.bulletin-icon, rect.processor-icon-container,
circle.restricted-background, circle.is-primary-background, g.connection
rect.body [...]
+
+ // some analog colors for headers and hover states, inputs, stats, etc
+ A100: #000, // .navigation-control-header:hover,
.operation-control-header:hover, .axis path, .axis line
+ A200: #e7e6e6, // .operation-context-name, text.stats-label,
text.processor-name, text.port-name, text.process-group-name,
text.remote-process-group-name, .navigation-control-title,
.operation-control-title, .operation-context-name, .search-input,
.context-menu-item-text, .current-user
+ A400: #b0b0b0, // rect.component-selection, rect.drag-selection,
rect.label-drag
+ A700: #b2b2b2, // text.processor-bundle, .search-container:hover,
.search-container.open, .search-container.fa, .selected-type-bundle, .brush
.selection
+
+ // These are the $nifi-canvas-dark-palette PRIMARY palette contrast
colors. These color do not really get defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors.
+ // Instead if we look to the Angular Material provided palettes we see
that these fields are typically rgba(black, 0.87) or white. These values are
particularly important
+ // for light mode and dark mode as these values set the colors for the
text when displayed against the primary background on a button, badge, chip,
etc.
+ //
+ // NOTE: Care should be taken here to ensure the values meet accessibility
standards.
+ //
+ // NOTE: When creating the Material palette definition
mat.define-palette($nifi-canvas-dark-palette);
+ // Since 500 is the default the contrast-500 will be used as the default
text color.
+ contrast: (
+ 50: #ffffff,
+ 100: #ffffff,
+ 200: #ffffff,
+ 300: #ffffff,
+ 400: #ffffff,
+ 500: #ffffff,
+ 600: rgba(black, 0.87),
+ 700: rgba(black, 0.87),
+ 800: rgba(black, 0.87),
+ 900: rgba(black, 0.87),
+ A100: #ffffff,
+ A200: #ffffff,
+ A400: rgba(black, 0.87),
+ A700: rgba(black, 0.87),
+ )
+);
+
// The $nifi-canvas-light-palette defines the ACCENT palette for all flow
designer canvas components that make up the NiFi canvas theme used throughout
Apache NiFi
$nifi-canvas-accent-light-palette: (
// 50 -> 900 are the PRIMARY colors defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
for primary color #52bf7e
@@ -159,6 +252,52 @@ $nifi-canvas-accent-light-palette: (
)
);
+// The $nifi-canvas-dark-palette defines the ACCENT palette for all flow
designer canvas components that make up the NiFi canvas theme used throughout
Apache NiFi
+$nifi-canvas-accent-dark-palette: (
+ // 50 -> 900 are the PRIMARY colors defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
for primary color #52bf7e
+ 50: #016131,
+ 100: #1A9964, // "lighter" hue for this palette.
+ 200: #2cb367, //.running
+ 300: #52bf7e, //.backpressure-percent
+ 400: #73ca94, // color="primary" Default hue for this palette. Also
.up-to-date
+ 500: #9dd9b2,
+ 600: #c3e8d0, //.version-control
+ 700: #e6f6ec, // "darker" hue for this palette Also .bulletin-normal
+ 800: #0000ff, //.endpoint, g.process-group.drop rect.border
+ 900: #00ff00, //.connectable-destination, .connector.connectable
+
+ // A100 - A700 are the ANALOGOUS colors but are more customized. These
colors are used to highlight, warn, denote midpoints and labelpoints, etc
+ A100: #cbaa09, //.selected
+ A200: #bda500, //.invalid, .is-missing-port, circle.context
+ A400: #f8bf47, //.backpressure-percent-warning, .bulletin-warn,
.backpressure-percent.warning, text.run-status-icon
+ A700: #948b4b, //g.connection.selected rect.border,
.connection-selection-path, .midpoint, .labelpoint
+
+ // These are the $nifi-canvas-accent-dark-palette PRIMARY palette contrast
colors. These color do not really get defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors.
+ // Instead if we look to the Angular Material provided palettes we see
that these fields are typically rgba(black, 0.87) or white. These values are
particularly important
+ // for light mode and dark mode as these values set the colors for the
text when displayed against the primary background on a button, badge, chip,
etc.
+ //
+ // NOTE: Care should be taken here to ensure the values meet accessibility
standards.
+ //
+ // NOTE: When creating the Material palette definition
mat.define-palette($nifi-canvas-accent-dark-palette, 400, 100, 700);
+ // Since 400 is the default the contrast-400 will be used as the default
text color in some cases.
+ contrast: (
+ 50: #ffffff,
+ 100: #ffffff,
+ 200: #ffffff,
+ 300: #ffffff,
+ 400: #ffffff,
+ 500: #ffffff,
+ 600: rgba(black, 0.87),
+ 700: rgba(black, 0.87),
+ 800: rgba(black, 0.87),
+ 900: rgba(black, 0.87),
+ A100: #ffffff,
+ A200: #ffffff,
+ A400: rgba(black, 0.87),
+ A700: rgba(black, 0.87),
+ )
+);
+
// The $warn-light-palette defines the WARN palette both for all Angular
Material components used throughout Apache NiFi and for all flow designer
canvas components that make up the NiFi canvas theme used throughout Apache NiFi
$warn-light-palette: (
// 50 -> 900 are the PRIMARY colors defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
for primary color #f64e4c
@@ -205,3 +344,50 @@ $warn-light-palette: (
A700: #ffffff,
)
);
+
+// The $warn-dark-palette defines the WARN palette both for all Angular
Material components used throughout Apache NiFi and for all flow designer
canvas components that make up the NiFi canvas theme used throughout Apache NiFi
+$warn-dark-palette: (
+ // 50 -> 900 are the PRIMARY colors defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
for primary color #f64e4c
+ 50: #f10000,
+ 100: #ff0000, // "lighter" hue for this palette. Also .banner-error
+ 200: #ff1507, //.stopped
+ 300: #ec3030, //.stale
+ 400: #fa3b30, // color="primary" Default hue for this palette. Also
.unauthorized, .bulletin-background, .restricted, .connection-path.full,
.connection-path.unauthorized, .backpressure-percent.error,
.controller-bulletins.has-bulletins, .link.selected, circle.selected,
.listing-message, .fa-shield
+ 500: #f64e4c,
+ 600: #eb7071, //.bulletin-error
+ 700: #f49999, // "darker" hue for this palette
+ 800: #ffccd2, //.connector, .startpoint
+ 900: #ffebee,
+
+ // A100 - A700 are the COMPLEMENTARY colors defined by the PRIMARY colors
defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
for primary color #728e9b which is the primary color of the
$material-primary-dark-palette.
+ // These color are used for label values, stats, timestamps, counts, etc.
+ A100: #8e77ab, //.sync-failure
+ A200: #9a81b9, // .operation-context-logo, .funnel-icon, .port-icon,
.flowfile-icon
+ A400: #c5b7d5, // .value, .refresh-timestamp, .stats-value,
.active-thread-count, .process-group-contents-count, .operation-context-id,
.selected-type-name
+ A700: #afaab6, // .version-control
+
+ // These are the $nifi-canvas-accent-dark-palette PRIMARY palette contrast
colors. These color do not really get defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors.
+ // Instead if we look to the Angular Material provided palettes we see
that these fields are typically rgba(black, 0.87) or white. These values are
particularly important
+ // for light mode and dark mode as these values set the colors for the
text when displayed against the primary background on a button, badge, chip,
etc.
+ //
+ // NOTE: Care should be taken here to ensure the values meet accessibility
standards.
+ //
+ // NOTE: When creating the Material palette definition
mat.define-palette($warn-dark-palette, 400, 100, 700);
+ // Since 400 is the default the contrast-400 will be used as the default
text color in some cases.
+ contrast: (
+ 50: #ffffff,
+ 100: #ffffff,
+ 200: #ffffff,
+ 300: #ffffff,
+ 400: #ffffff,
+ 500: rgba(black, 0.87),
+ 600: rgba(black, 0.87),
+ 700: rgba(black, 0.87),
+ 800: rgba(black, 0.87),
+ 900: rgba(black, 0.87),
+ A100: #ffffff,
+ A200: #ffffff,
+ A400: rgba(black, 0.87),
+ A700: rgba(black, 0.87),
+ )
+);
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss
index 476026d32e..f156b10ee1 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss
@@ -22,41 +22,31 @@
@use 'assets/styles/listing-table-theme' as listing-table;
@use 'app/app.component-theme' as app-component;
@use 'app/pages/access-policies/feature/access-policies.component-theme' as
access-policies;
-@use
'app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/add-tenant-to-policy-dialog.component-theme'
as
- add-tenant-to-policy;
-@use
'app/pages/access-policies/ui/component-access-policies/component-access-policies.component-theme'
as
- component-access-policies;
+@use
'app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/add-tenant-to-policy-dialog.component-theme'
as add-tenant-to-policy;
+@use
'app/pages/access-policies/ui/component-access-policies/component-access-policies.component-theme'
as component-access-policies;
@use 'app/pages/bulletins/feature/bulletins.component-theme' as bulletins;
-@use
'app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component-theme'
as
- bulletin-board-list;
+@use
'app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component-theme'
as bulletin-board-list;
@use 'app/pages/counters/feature/counters.component-theme' as counters;
@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;
-@use
'app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/birdseye.component-theme'
as
- birdseye-control;
-@use
'app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component-theme'
as
- operation-control;
+@use
'app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component-theme'
as navigation-control;
+@use
'app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/birdseye.component-theme'
as birdseye-control;
+@use
'app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component-theme'
as operation-control;
@use
'app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component-theme'
as flow-status;
@use 'app/pages/flow-designer/ui/canvas/header/header.component-theme' as
header;
@use
'app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component-theme'
as new-canvas-item;
@use 'app/pages/flow-designer/ui/canvas/header/search/search.component-theme'
as search;
@use
'app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component-theme'
as prioritizers;
-@use
'app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/create-process-group.component-theme'
- as create-process-group;
+@use
'app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/create-process-group.component-theme'
as create-process-group;
@use 'app/pages/flow-designer/ui/common/banner/banner.component-theme' as
banner;
@use
'app/pages/flow-designer/ui/controller-service/controller-services.component-theme'
as controller-service;
@use 'app/pages/login/feature/login.component-theme' as login;
@use 'app/pages/login/ui/login-form/login-form.component-theme' as login-form;
@use 'app/pages/provenance/feature/provenance.component-theme' as provenance;
-@use
'app/pages/provenance/ui/provenance-event-listing/provenance-event-table/provenance-event-table.component-theme'
as
- provenance-event-table;
-@use
'app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/lineage.component-theme'
as
- lineage;
+@use
'app/pages/provenance/ui/provenance-event-listing/provenance-event-table/provenance-event-table.component-theme'
as provenance-event-table;
+@use
'app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/lineage.component-theme'
as lineage;
@use 'app/pages/parameter-contexts/feature/parameter-contexts.component-theme'
as parameter-contexts;
-@use
'app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component-theme'
- as parameter-context-inheritance;
+@use
'app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component-theme'
as parameter-context-inheritance;
@use
'app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component-theme'
as flowfile-dialog;
@use
'app/pages/queue/ui/queue-listing/flowfile-table/flowfile-table.component-theme'
as flowfile-table;
@use 'app/pages/settings/feature/settings.component-theme' as settings;
@@ -180,7 +170,7 @@ $appFontPath: '~roboto-fontface/fonts';
@tailwind utilities;
//General status styles. TODO - Reconsider this... separating canvas/style
styles from html styles...
-@mixin theme($material-theme, $canvas-theme) {
+@mixin nifi-colors($material-theme, $canvas-theme) {
// Get the color config from the theme.
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-theme);
@@ -210,109 +200,25 @@ $appFontPath: '~roboto-fontface/fonts';
$warn-palette-A100: mat.get-color-from-palette($warn-palette, 'A100');
$warn-palette-A400: mat.get-color-from-palette($warn-palette, 'A400');
- html,
- body {
- height: 100%;
- }
-
- body {
- margin: 0;
- font-family: Roboto, 'Helvetica Neue', sans-serif;
- }
-
a {
- font-size: 13px;
- cursor: pointer;
color: $primary-palette-A400;
- font-weight: normal;
- display: inline-block;
- font-family: Roboto;
- text-decoration: underline;
text-decoration-color: $primary-palette-200;
- text-underline-offset: 3px;
}
a:hover {
text-decoration-color: $primary-palette-A400;
}
- //Icon for styling mat-icon in forms throughout the application.
- .info-icon {
- font-size: 14px;
- height: 14px !important;
- width: 14px !important;
- }
-
- //This style is needed due to an incompatibility between material and
tailwind.
- .mdc-notched-outline__notch {
- border-right: none;
- }
-
- .small-dialog {
- min-width: 320px;
- }
-
- .medium-dialog {
- min-width: 470px;
- }
-
- .medium-short-dialog {
- max-height: 32%;
- max-width: 34%;
- min-height: 250px;
- min-width: 440px;
- font-size: 13px;
- }
-
- .large-dialog {
- max-height: 72%;
- max-width: 55%;
- min-height: 560px;
- min-width: 760px;
- }
-
- .edit-parameter-context-dialog {
- max-height: 72%;
- max-width: 55%;
- min-width: 850px;
- min-height: 575px;
- }
-
.tooltip {
- position: fixed;
- max-width: 500px;
- padding: 10px;
background-color: $canvas-primary-palette-900;
- border-radius: 2px;
- border-width: 1px;
border-color: $canvas-primary-palette-200;
box-shadow: 0 2px 5px $canvas-primary-palette-50;
- font-size: 13px;
- font-family: Roboto;
- font-weight: 400;
- word-wrap: break-word;
- white-space: normal;
color: $canvas-primary-palette-200;
- z-index: 1;
-
- ul {
- list-style: disc outside;
- margin-left: 1em;
- }
}
.property-editor {
background-color: $canvas-primary-palette-900;
box-shadow: 0 2px 5px $canvas-primary-palette-50;
- font-size: 13px;
- font-family: Roboto;
- font-weight: 400;
- }
-
- .CodeMirror-hints {
- font-size: 13px !important;
- z-index: 1000 !important;
- overflow-y: scroll !important;
}
.disabled {
@@ -393,21 +299,16 @@ $appFontPath: '~roboto-fontface/fonts';
.blank,
.unset,
.sensitive {
- font-weight: normal !important;
color: $canvas-primary-palette-400 !important;
}
button.nifi-button {
- height: 28px;
- width: 28px;
- line-height: 28px;
border: 1px solid $primary-palette-200;
background-color: $primary-palette-50;
color: $primary-palette-A400;
}
button.nifi-button:hover {
- cursor: pointer;
border-color: $primary-palette-A400;
}
@@ -424,6 +325,126 @@ $appFontPath: '~roboto-fontface/fonts';
}
}
+ .value,
+ .refresh-timestamp {
+ color: $warn-palette-A400;
+ }
+}
+
+@mixin nifi-styles() {
+ html,
+ body {
+ height: 100%;
+ }
+
+ body {
+ margin: 0;
+ font-family: Roboto, 'Helvetica Neue', sans-serif;
+ }
+
+ a {
+ font-size: 13px;
+ cursor: pointer;
+ font-weight: normal;
+ display: inline-block;
+ font-family: Roboto;
+ text-decoration: underline;
+ text-underline-offset: 3px;
+ }
+
+ //Icon for styling mat-icon in forms throughout the application.
+ .info-icon {
+ font-size: 14px;
+ height: 14px !important;
+ width: 14px !important;
+ }
+
+ //This style is needed due to an incompatibility between material and
tailwind.
+ .mdc-notched-outline__notch {
+ border-right: none;
+ }
+
+ .small-dialog {
+ min-width: 320px;
+ }
+
+ .medium-dialog {
+ min-width: 470px;
+ }
+
+ .medium-short-dialog {
+ max-height: 32%;
+ max-width: 34%;
+ min-height: 250px;
+ min-width: 440px;
+ font-size: 13px;
+ }
+
+ .large-dialog {
+ max-height: 72%;
+ max-width: 55%;
+ min-height: 560px;
+ min-width: 760px;
+ }
+
+ .edit-parameter-context-dialog {
+ max-height: 72%;
+ max-width: 55%;
+ min-width: 850px;
+ min-height: 575px;
+ }
+
+ .tooltip {
+ position: fixed;
+ max-width: 500px;
+ padding: 10px;
+ border-radius: 2px;
+ border-width: 1px;
+ font-size: 13px;
+ font-family: Roboto;
+ font-weight: 400;
+ word-wrap: break-word;
+ white-space: normal;
+ z-index: 1;
+
+ ul {
+ list-style: disc outside;
+ margin-left: 1em;
+ }
+ }
+
+ .property-editor {
+ font-size: 13px;
+ font-family: Roboto;
+ font-weight: 400;
+ }
+
+ .CodeMirror-hints {
+ font-size: 13px !important;
+ z-index: 1000 !important;
+ overflow-y: scroll !important;
+ }
+
+ .blank,
+ .unset,
+ .sensitive {
+ font-weight: normal !important;
+ }
+
+ button.nifi-button {
+ height: 28px;
+ width: 28px;
+ line-height: 28px;
+ }
+
+ button.nifi-button:hover {
+ cursor: pointer;
+ }
+
+ button.nifi-button:disabled {
+ cursor: not-allowed;
+ }
+
.pointer {
cursor: pointer;
}
@@ -431,12 +452,11 @@ $appFontPath: '~roboto-fontface/fonts';
.value,
.refresh-timestamp {
font-weight: 500;
- color: $warn-palette-A400;
}
}
// Define the palettes for your theme
-$material-primary-light: mat.define-palette($material-primary-light-palette,
300);
+$material-primary-light: mat.define-palette($material-primary-light-palette);
$material-accent-light: mat.define-palette($material-primary-light-palette,
A400, A100, A700);
$nifi-canvas-primary-light: mat.define-palette($nifi-canvas-light-palette);
$nifi-canvas-accent-light:
mat.define-palette($nifi-canvas-accent-light-palette, 400, 100, 700);
@@ -467,47 +487,132 @@ $nifi-canvas-theme-light: mat.define-light-theme(
)
);
+// only include this once (not needed for dark mode)
+@include nifi-styles();
+
+// generate light mode nifi stylesheets
@include mat.all-component-themes($material-theme-light);
-@include app-component.theme($material-theme-light);
-@include theme($material-theme-light, $nifi-canvas-theme-light);
-@include listing-table.theme($material-theme-light, $nifi-canvas-theme-light);
-@include access-policies.theme($material-theme-light);
-@include add-tenant-to-policy.theme($material-theme-light);
-@include component-access-policies.theme($material-theme-light,
$nifi-canvas-theme-light);
-@include bulletins.theme($material-theme-light);
-@include bulletin-board-list.theme($material-theme-light,
$nifi-canvas-theme-light);
-@include counters.theme($material-theme-light);
-@include canvas.theme($material-theme-light, $nifi-canvas-theme-light);
-@include banner.theme($material-theme-light);
-@include controller-service.theme($material-theme-light);
-@include footer.theme($material-theme-light, $nifi-canvas-theme-light);
-@include navigation-control.theme($material-theme-light,
$nifi-canvas-theme-light);
-@include birdseye-control.theme($material-theme-light,
$nifi-canvas-theme-light);
-@include operation-control.theme($material-theme-light,
$nifi-canvas-theme-light);
-@include flow-status.theme($material-theme-light, $nifi-canvas-theme-light);
-@include header.theme($nifi-canvas-theme-light);
-@include new-canvas-item.theme($material-theme-light,
$nifi-canvas-theme-light);
-@include search.theme($material-theme-light, $nifi-canvas-theme-light);
-@include prioritizers.theme($material-theme-light, $nifi-canvas-theme-light);
-@include create-process-group.theme($material-theme-light);
-@include login.theme($material-theme-light, $nifi-canvas-theme-light);
-@include login-form.theme($material-theme-light);
-@include provenance-event-table.theme($material-theme-light,
$nifi-canvas-theme-light);
-@include provenance.theme($material-theme-light, $nifi-canvas-theme-light);
-@include lineage.theme($material-theme-light, $nifi-canvas-theme-light);
-@include parameter-context-inheritance.theme($material-theme-light,
$nifi-canvas-theme-light);
-@include parameter-contexts.theme($material-theme-light);
-@include flowfile-dialog.theme($material-theme-light);
-@include flowfile-table.theme($material-theme-light);
-@include settings.theme($material-theme-light);
-@include summary.theme($material-theme-light);
-@include users.theme($material-theme-light);
-@include context-menu.theme($material-theme-light, $nifi-canvas-theme-light);
-@include extension-creation.theme($material-theme-light,
$nifi-canvas-theme-light);
-@include navigation.theme($material-theme-light, $nifi-canvas-theme-light);
-@include nf-editor.theme($material-theme-light, $nifi-canvas-theme-light);
-@include resizable.theme($material-theme-light, $nifi-canvas-theme-light);
-@include system-diagnostics-dialog.theme($material-theme-light);
-@include status-history.theme($material-theme-light, $nifi-canvas-theme-light);
-@include property-hint-tip.theme($material-theme-light);
-@include provenance-event-dialog.theme($material-theme-light);
+@include app-component.nifi-theme($material-theme-light);
+@include nifi-colors($material-theme-light, $nifi-canvas-theme-light);
+@include listing-table.nifi-theme($material-theme-light,
$nifi-canvas-theme-light);
+@include access-policies.nifi-theme($material-theme-light);
+@include add-tenant-to-policy.nifi-theme($material-theme-light);
+@include component-access-policies.nifi-theme($material-theme-light,
$nifi-canvas-theme-light);
+@include bulletins.nifi-theme($material-theme-light);
+@include bulletin-board-list.nifi-theme($material-theme-light,
$nifi-canvas-theme-light);
+@include counters.nifi-theme($material-theme-light);
+@include canvas.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
+@include banner.nifi-theme($material-theme-light);
+@include controller-service.nifi-theme($material-theme-light);
+@include footer.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
+@include navigation-control.nifi-theme($material-theme-light,
$nifi-canvas-theme-light);
+@include birdseye-control.nifi-theme($material-theme-light,
$nifi-canvas-theme-light);
+@include operation-control.nifi-theme($material-theme-light,
$nifi-canvas-theme-light);
+@include flow-status.nifi-theme($material-theme-light,
$nifi-canvas-theme-light);
+@include header.nifi-theme($nifi-canvas-theme-light);
+@include new-canvas-item.nifi-theme($material-theme-light,
$nifi-canvas-theme-light);
+@include search.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
+@include prioritizers.nifi-theme($material-theme-light,
$nifi-canvas-theme-light);
+@include create-process-group.nifi-theme($material-theme-light);
+@include login.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
+@include login-form.nifi-theme($material-theme-light);
+@include provenance-event-table.nifi-theme($material-theme-light,
$nifi-canvas-theme-light);
+@include provenance.nifi-theme($material-theme-light,
$nifi-canvas-theme-light);
+@include lineage.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
+@include parameter-context-inheritance.nifi-theme($material-theme-light,
$nifi-canvas-theme-light);
+@include parameter-contexts.nifi-theme($material-theme-light);
+@include flowfile-dialog.nifi-theme($material-theme-light);
+@include flowfile-table.nifi-theme($material-theme-light);
+@include settings.nifi-theme($material-theme-light);
+@include summary.nifi-theme($material-theme-light);
+@include users.nifi-theme($material-theme-light);
+@include context-menu.nifi-theme($material-theme-light,
$nifi-canvas-theme-light);
+@include extension-creation.nifi-theme($material-theme-light,
$nifi-canvas-theme-light);
+@include navigation.nifi-theme($material-theme-light,
$nifi-canvas-theme-light);
+@include nf-editor.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
+@include resizable.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
+@include system-diagnostics-dialog.nifi-theme($material-theme-light);
+@include status-history.nifi-theme($material-theme-light,
$nifi-canvas-theme-light);
+@include property-hint-tip.nifi-theme($material-theme-light);
+@include provenance-event-dialog.nifi-theme($material-theme-light);
+
+.dark-theme {
+ // Create the color palettes used in our dark theme.
+ $material-primary-dark: mat.define-palette($material-primary-dark-palette);
+ $material-accent-dark: mat.define-palette($material-primary-dark-palette,
A400, A100, A700);
+ $nifi-canvas-primary-dark: mat.define-palette($nifi-canvas-dark-palette);
+ $nifi-canvas-accent-dark:
mat.define-palette($nifi-canvas-accent-dark-palette);
+ $warn-dark: mat.define-palette($warn-dark-palette, 600, 200, 800);
+
+ $material-theme-dark: mat.define-dark-theme(
+ (
+ color: (
+ primary: $material-primary-dark,
+ accent: $material-accent-dark,
+ warn: $warn-dark
+ ),
+ density: 0,
+ typography: mat.define-typography-config(),
+ )
+ );
+
+ $nifi-canvas-theme-dark: mat.define-dark-theme(
+ (
+ color: (
+ primary: $nifi-canvas-primary-dark,
+ accent: $nifi-canvas-accent-dark,
+ warn: $warn-dark,
+ ),
+ //typography: mat.define-typography-config(), // TODO:
typography
+ density: -3
+ )
+ );
+
+ // Include the dark theme color styles.
+ @include mat.all-component-colors($material-theme-dark);
+
+ // generate dark mode nifi stylesheets
+ @include app-component.nifi-theme($material-theme-dark);
+ @include nifi-colors($material-theme-dark, $nifi-canvas-theme-dark);
+ @include listing-table.nifi-theme($material-theme-dark,
$nifi-canvas-theme-dark);
+ @include access-policies.nifi-theme($material-theme-dark);
+ @include add-tenant-to-policy.nifi-theme($material-theme-dark);
+ @include component-access-policies.nifi-theme($material-theme-dark,
$nifi-canvas-theme-dark);
+ @include bulletins.nifi-theme($material-theme-dark);
+ @include bulletin-board-list.nifi-theme($material-theme-dark,
$nifi-canvas-theme-dark);
+ @include counters.nifi-theme($material-theme-dark);
+ @include canvas.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
+ @include banner.nifi-theme($material-theme-dark);
+ @include controller-service.nifi-theme($material-theme-dark);
+ @include footer.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
+ @include navigation-control.nifi-theme($material-theme-dark,
$nifi-canvas-theme-dark);
+ @include birdseye-control.nifi-theme($material-theme-dark,
$nifi-canvas-theme-dark);
+ @include operation-control.nifi-theme($material-theme-dark,
$nifi-canvas-theme-dark);
+ @include flow-status.nifi-theme($material-theme-dark,
$nifi-canvas-theme-dark);
+ @include header.nifi-theme($nifi-canvas-theme-dark);
+ @include new-canvas-item.nifi-theme($material-theme-dark,
$nifi-canvas-theme-dark);
+ @include search.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
+ @include prioritizers.nifi-theme($material-theme-dark,
$nifi-canvas-theme-dark);
+ @include create-process-group.nifi-theme($material-theme-dark);
+ @include login.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
+ @include login-form.nifi-theme($material-theme-dark);
+ @include provenance-event-table.nifi-theme($material-theme-dark,
$nifi-canvas-theme-dark);
+ @include provenance.nifi-theme($material-theme-dark,
$nifi-canvas-theme-dark);
+ @include lineage.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
+ @include parameter-context-inheritance.nifi-theme($material-theme-dark,
$nifi-canvas-theme-dark);
+ @include parameter-contexts.nifi-theme($material-theme-dark);
+ @include flowfile-dialog.nifi-theme($material-theme-dark);
+ @include flowfile-table.nifi-theme($material-theme-dark);
+ @include settings.nifi-theme($material-theme-dark);
+ @include summary.nifi-theme($material-theme-dark);
+ @include users.nifi-theme($material-theme-dark);
+ @include context-menu.nifi-theme($material-theme-dark,
$nifi-canvas-theme-dark);
+ @include extension-creation.nifi-theme($material-theme-dark,
$nifi-canvas-theme-dark);
+ @include navigation.nifi-theme($material-theme-dark,
$nifi-canvas-theme-dark);
+ @include nf-editor.nifi-theme($material-theme-dark,
$nifi-canvas-theme-dark);
+ @include resizable.nifi-theme($material-theme-dark,
$nifi-canvas-theme-dark);
+ @include system-diagnostics-dialog.nifi-theme($material-theme-dark);
+ @include status-history.nifi-theme($material-theme-dark,
$nifi-canvas-theme-dark);
+ @include property-hint-tip.nifi-theme($material-theme-dark);
+ @include provenance-event-dialog.nifi-theme($material-theme-dark);
+}
