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 21f0ca47b0 [NIFI-13360] rename nifi theme to supplemental theme (#8926)
21f0ca47b0 is described below
commit 21f0ca47b0c24e16dc4544a0568ebcc1033efd0a
Author: Scott Aslan <[email protected]>
AuthorDate: Tue Jun 4 16:00:53 2024 -0500
[NIFI-13360] rename nifi theme to supplemental theme (#8926)
* [NIFI-13360] rename nifi theme to supplemental theme
* Update
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/assets/styles/_app.scss
Co-authored-by: Rob Fellows <[email protected]>
* Update
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/assets/styles/_app.scss
Co-authored-by: Rob Fellows <[email protected]>
---------
Co-authored-by: Rob Fellows <[email protected]>
This closes #8926
---
.../ui/canvas/_canvas.component-theme.scss | 144 ++++++++++++---------
.../_change-color-dialog.component-theme.scss | 41 +++---
.../ui/canvas/footer/_footer.component-theme.scss | 6 +-
.../_navigation-control.component-theme.scss | 21 ++-
.../birdseye/_birdseye.component-theme.scss | 21 ++-
.../_operation-control.component-theme.scss | 21 ++-
.../flow-status/_flow-status.component-theme.scss | 33 +++--
.../_new-canvas-item.component-theme.scss | 24 +++-
.../header/search/_search.component-theme.scss | 27 ++--
.../login/feature/_login.component-theme.scss | 21 ++-
.../feature/_provenance.component-theme.scss | 29 +++--
.../_provenance-event-table.component-theme.scss | 21 ++-
.../lineage/_lineage.component-theme.scss | 8 +-
.../_processor-status-table.component-theme.scss | 21 ++-
.../_context-menu.component-theme.scss | 29 +++--
.../text-editor/_text-editor.component-theme.scss | 2 +-
.../navigation/_navigation.component-theme.scss | 2 +-
.../nf-editor/_nf-editor.component-theme.scss | 2 +-
.../_status-history.component-theme.scss | 20 +--
.../_property-hint-tip.component-theme.scss | 17 ++-
.../nifi/apps/nifi/src/assets/styles/_app.scss | 124 +++++++++++-------
.../nifi/src/assets/styles/_codemirror-theme.scss | 44 ++++---
.../nifi/src/assets/styles/_listing-table.scss | 15 ++-
.../assets/themes/{nifi.scss => supplemental.scss} | 4 +-
.../src/main/nifi/apps/nifi/src/styles.scss | 95 +++++++-------
25 files changed, 477 insertions(+), 315 deletions(-)
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
index f471c88d41..e713edfde3 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
@@ -18,18 +18,18 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin generate-theme($material-theme, $nifi-theme) {
+@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.get-color-config($material-theme);
- $nifi-theme-color-config: mat.get-color-config($nifi-theme);
+ $supplemental-theme-color-config:
mat.get-color-config($supplemental-theme);
// Get the palettes from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config,
'primary');
$material-theme-accent-palette: map.get($material-theme-color-config,
'accent');
$material-theme-warn-palette: map.get($material-theme-color-config,
'warn');
- $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
- $nifi-theme-success-palette: map.get($nifi-theme-color-config, 'accent');
- $nifi-theme-caution-palette: map.get($nifi-theme-color-config, 'warn');
+ $supplemental-theme-surface-palette:
map.get($supplemental-theme-color-config, 'primary');
+ $supplemental-theme-success-palette:
map.get($supplemental-theme-color-config, 'accent');
+ $supplemental-theme-caution-palette:
map.get($supplemental-theme-color-config, 'warn');
// Get hues from palette
$material-theme-primary-palette-darker:
mat.get-color-from-palette($material-theme-primary-palette, darker);
@@ -38,49 +38,62 @@
$material-theme-accent-palette-default:
mat.get-color-from-palette($material-theme-accent-palette, default);
// Canvas colors
- $nifi-theme-surface-palette-default:
mat.get-color-from-palette($nifi-theme-surface-palette, default);
- $nifi-theme-surface-palette-lighter:
mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
- $nifi-theme-surface-palette-darker:
mat.get-color-from-palette($nifi-theme-surface-palette, darker);
- $nifi-theme-success-palette-lighter:
mat.get-color-from-palette($nifi-theme-success-palette, lighter);
- $nifi-theme-success-palette-50:
mat.get-color-from-palette($nifi-theme-success-palette, 50);
- $nifi-theme-success-palette-900:
mat.get-color-from-palette($nifi-theme-success-palette, 900);
+ $supplemental-theme-surface-palette-default: mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
+ default
+ );
+ $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
+ lighter
+ );
+ $supplemental-theme-surface-palette-darker:
mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
+ $supplemental-theme-success-palette-lighter: mat.get-color-from-palette(
+ $supplemental-theme-success-palette,
+ lighter
+ );
+ $supplemental-theme-success-palette-50:
mat.get-color-from-palette($supplemental-theme-success-palette, 50);
+ $supplemental-theme-success-palette-900:
mat.get-color-from-palette($supplemental-theme-success-palette, 900);
$material-theme-warn-palette-darker:
mat.get-color-from-palette($material-theme-warn-palette, darker);
- $nifi-theme-caution-palette-darker:
mat.get-color-from-palette($nifi-theme-caution-palette, darker);
+ $supplemental-theme-caution-palette-darker:
mat.get-color-from-palette($supplemental-theme-caution-palette, darker);
// Shadows should always be darker. We explicitly set this so the SVG
shadows are correct in both modes.
- $is-dark: map-get($nifi-theme-color-config, is-dark);
+ $is-dark: map-get($supplemental-theme-color-config, is-dark);
$drop-shadow-color: black;
$connection-drop-shadow-color: if($is-dark, black, white);
- $nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
- $nifi-theme-surface-palette,
+ $supplemental-theme-surface-palette-darker-contrast:
mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
darker-contrast
);
- $nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
- $nifi-theme-surface-palette,
+ $supplemental-theme-surface-palette-lighter-contrast:
mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
lighter-contrast
);
$surface-contrast: if(
$is-dark,
- $nifi-theme-surface-palette-darker-contrast,
- $nifi-theme-surface-palette-lighter-contrast
+ $supplemental-theme-surface-palette-darker-contrast,
+ $supplemental-theme-surface-palette-lighter-contrast
);
$alternate-surface: if(
$is-dark,
- rgba($nifi-theme-surface-palette-darker-contrast, 0.28),
- rgba($nifi-theme-surface-palette-lighter-contrast, 0.2)
+ rgba($supplemental-theme-surface-palette-darker-contrast, 0.28),
+ rgba($supplemental-theme-surface-palette-lighter-contrast, 0.2)
);
.canvas-background {
- background-color: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ background-color: if(
+ $is-dark,
+ $supplemental-theme-surface-palette-darker,
+ $supplemental-theme-surface-palette-lighter
+ );
background-image: linear-gradient(
to right,
- if($is-dark, $nifi-theme-success-palette-900,
$nifi-theme-success-palette-50) 1px,
+ if($is-dark, $supplemental-theme-success-palette-900,
$supplemental-theme-success-palette-50) 1px,
transparent 1px
),
linear-gradient(
to bottom,
- if($is-dark, $nifi-theme-success-palette-900,
$nifi-theme-success-palette-50) 1px,
+ if($is-dark, $supplemental-theme-success-palette-900,
$supplemental-theme-success-palette-50) 1px,
transparent 1px
);
}
@@ -101,19 +114,25 @@
}
g.component rect.body {
- fill: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ fill: if($is-dark, $supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter);
}
rect.banner {
- fill: rgba(if($is-dark, $nifi-theme-surface-palette-lighter,
$nifi-theme-surface-palette-darker), 0.08);
+ fill: rgba(
+ if($is-dark, $supplemental-theme-surface-palette-lighter,
$supplemental-theme-surface-palette-darker),
+ 0.08
+ );
}
rect.odd {
- fill: rgba(if($is-dark, $nifi-theme-surface-palette-lighter,
$nifi-theme-surface-palette-darker), 0.025);
+ fill: rgba(
+ if($is-dark, $supplemental-theme-surface-palette-lighter,
$supplemental-theme-surface-palette-darker),
+ 0.025
+ );
}
rect.even {
- fill: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ fill: if($is-dark, $supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter);
}
rect.row-border {
@@ -121,7 +140,7 @@
}
g.component rect.body.unauthorized {
- fill: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ fill: if($is-dark, $supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter);
}
g.component rect.border,
@@ -139,11 +158,11 @@
}
g.component rect.border.ghost {
- stroke: $nifi-theme-surface-palette-default !important;
+ stroke: $supplemental-theme-surface-palette-default !important;
}
g.component rect.processor-icon-container.unauthorized {
- fill: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ fill: if($is-dark, $supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter);
}
g.component.selected rect.border {
@@ -166,8 +185,8 @@
text.bulletin-icon {
fill: if(
$is-dark,
- $nifi-theme-surface-palette-lighter-contrast,
- $nifi-theme-surface-palette-darker-contrast
+ $supplemental-theme-surface-palette-lighter-contrast,
+ $supplemental-theme-surface-palette-darker-contrast
);
}
@@ -211,7 +230,7 @@
}
rect.processor-read-write-stats {
- fill: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ fill: if($is-dark, $supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter);
}
rect.processor-stats-border {
@@ -221,8 +240,8 @@
text.processor-name {
fill: if(
$is-dark,
- $nifi-theme-surface-palette-darker-contrast,
- $nifi-theme-surface-palette-lighter-contrast
+ $supplemental-theme-surface-palette-darker-contrast,
+ $supplemental-theme-surface-palette-lighter-contrast
);
}
@@ -231,24 +250,28 @@
}
circle.is-primary-background {
- stroke: if($is-dark, $nifi-theme-surface-palette-lighter,
$nifi-theme-surface-palette-darker);
- fill: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ stroke: if(
+ $is-dark,
+ $supplemental-theme-surface-palette-lighter,
+ $supplemental-theme-surface-palette-darker
+ );
+ fill: if($is-dark, $supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter);
}
text.is-primary {
- fill: if($is-dark, $nifi-theme-surface-palette-lighter,
$nifi-theme-surface-palette-darker);
+ fill: if($is-dark, $supplemental-theme-surface-palette-lighter,
$supplemental-theme-surface-palette-darker);
}
text.processor-bundle {
- fill: $nifi-theme-surface-palette-default;
+ fill: $supplemental-theme-surface-palette-default;
}
rect.processor-icon-container {
- fill: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ fill: if($is-dark, $supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter);
}
circle.restricted-background {
- fill: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ fill: if($is-dark, $supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter);
}
text.restricted {
@@ -267,11 +290,11 @@
}
g.connection rect.body {
- fill: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ fill: if($is-dark, $supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter);
}
g.connection rect.body.unauthorized {
- fill: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ fill: if($is-dark, $supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter);
}
g.connection rect.border.unauthorized {
@@ -283,7 +306,7 @@
}
g.connection.selected rect.border {
- stroke: $nifi-theme-caution-palette-darker;
+ stroke: $supplemental-theme-caution-palette-darker;
}
path.connector {
@@ -298,7 +321,12 @@
fill: none;
stroke: $surface-contrast;
filter: drop-shadow(
- 0 3px 6px if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter)
+ 0 3px 6px
+ if(
+ $is-dark,
+ $supplemental-theme-surface-palette-darker,
+ $supplemental-theme-surface-palette-lighter
+ )
);
}
@@ -316,7 +344,7 @@
g.connection
rect.backpressure-tick.data-size-prediction.prediction-down,
g.connection rect.backpressure-tick.object-prediction.prediction-down {
- fill: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ fill: if($is-dark, $supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter);
}
g.connection rect.backpressure-tick.data-size-prediction,
@@ -332,7 +360,7 @@
}
g.connection rect.backpressure-tick.not-configured {
- fill: $nifi-theme-surface-palette-default;
+ fill: $supplemental-theme-surface-palette-default;
}
g.connection rect.backpressure-object,
@@ -346,11 +374,11 @@
}
g.connection rect.backpressure-percent {
- fill: $nifi-theme-success-palette-lighter;
+ fill: $supplemental-theme-success-palette-lighter;
}
g.connection rect.backpressure-percent.warning {
- fill: $nifi-theme-caution-palette-darker;
+ fill: $supplemental-theme-caution-palette-darker;
}
g.connection rect.backpressure-percent.error {
@@ -361,11 +389,11 @@
g.connection.ghost path.connection-path,
g.connection.ghost rect.connection-label {
- stroke: $nifi-theme-surface-palette-default;
+ stroke: $supplemental-theme-surface-palette-default;
}
g.connection path.connection-selection-path {
- stroke: $nifi-theme-caution-palette-darker;
+ stroke: $supplemental-theme-caution-palette-darker;
fill: none;
}
@@ -379,8 +407,8 @@
}
g.connection rect.midpoint {
- stroke: $nifi-theme-caution-palette-darker;
- fill: $nifi-theme-caution-palette-darker;
+ stroke: $supplemental-theme-caution-palette-darker;
+ fill: $supplemental-theme-caution-palette-darker;
}
g.connection rect.endpoint {
@@ -391,8 +419,8 @@
/* labels */
g.label path.resizable-triangle {
- fill: rgba($nifi-theme-surface-palette-lighter-contrast, 0.2);
- stroke: rgba($nifi-theme-surface-palette-lighter-contrast, 0.2);
+ fill: rgba($supplemental-theme-surface-palette-lighter-contrast,
0.2);
+ stroke: rgba($supplemental-theme-surface-palette-lighter-contrast,
0.2);
}
/* funnels */
@@ -414,7 +442,7 @@
/* process groups */
rect.process-group-stats-in-out {
- fill: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ fill: if($is-dark, $supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter);
}
rect.process-group-stats-border {
@@ -454,7 +482,7 @@
}
rect.remote-process-group-received-stats {
- fill: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ fill: if($is-dark, $supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter);
}
text.remote-process-group-uri {
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/_change-color-dialog.component-theme.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/_change-color-dialog.component-theme.scss
index 8cfc850d80..8ecfbe0b04 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/_change-color-dialog.component-theme.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/_change-color-dialog.component-theme.scss
@@ -18,45 +18,56 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin generate-theme($nifi-theme) {
+@mixin generate-theme($supplemental-theme) {
// Get the color config from the theme.
- $nifi-theme-color-config: mat.get-color-config($nifi-theme);
+ $supplemental-theme-color-config:
mat.get-color-config($supplemental-theme);
- $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
+ $supplemental-theme-surface-palette:
map.get($supplemental-theme-color-config, 'primary');
- $is-dark: map-get($nifi-theme-color-config, is-dark);
- $nifi-theme-surface-palette-lighter:
mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
- $nifi-theme-surface-palette-darker:
mat.get-color-from-palette($nifi-theme-surface-palette, darker);
+ $is-dark: map-get($supplemental-theme-color-config, is-dark);
+ $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
+ lighter
+ );
+ $supplemental-theme-surface-palette-darker:
mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
- $nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
- $nifi-theme-surface-palette,
+ $supplemental-theme-surface-palette-darker-contrast:
mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
darker-contrast
);
- $nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
- $nifi-theme-surface-palette,
+ $supplemental-theme-surface-palette-lighter-contrast:
mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
lighter-contrast
);
$alternate-surface: if(
$is-dark,
- rgba($nifi-theme-surface-palette-darker-contrast, 0.28),
- rgba($nifi-theme-surface-palette-lighter-contrast, 0.2)
+ rgba($supplemental-theme-surface-palette-darker-contrast, 0.28),
+ rgba($supplemental-theme-surface-palette-lighter-contrast, 0.2)
);
.preview {
.processor {
- background-color: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ background-color: if(
+ $is-dark,
+ $supplemental-theme-surface-palette-darker,
+ $supplemental-theme-surface-palette-lighter
+ );
}
.odd {
background-color: rgba(
- if($is-dark, $nifi-theme-surface-palette-lighter,
$nifi-theme-surface-palette-darker),
+ if($is-dark, $supplemental-theme-surface-palette-lighter,
$supplemental-theme-surface-palette-darker),
0.025
);
}
.even {
- background-color: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ background-color: if(
+ $is-dark,
+ $supplemental-theme-surface-palette-darker,
+ $supplemental-theme-surface-palette-lighter
+ );
}
.row-border {
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss
index a914896c6d..c8da8082dc 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss
@@ -18,12 +18,12 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin generate-theme($nifi-theme) {
+@mixin generate-theme($supplemental-theme) {
// Get the color config from the theme.
- $nifi-theme-color-config: mat.get-color-config($nifi-theme);
+ $supplemental-theme-color-config:
mat.get-color-config($supplemental-theme);
// Get the color palette from the color-config.
- $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
+ $supplemental-theme-surface-palette:
map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss
index 670f4d8815..b8b904a9ac 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss
@@ -18,21 +18,28 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin generate-theme($nifi-theme) {
+@mixin generate-theme($supplemental-theme) {
// Get the color config from the theme.
- $nifi-theme-color-config: mat.get-color-config($nifi-theme);
+ $supplemental-theme-color-config:
mat.get-color-config($supplemental-theme);
// Get the color palette from the color-config.
- $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
+ $supplemental-theme-surface-palette:
map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
- $is-dark: map-get($nifi-theme-color-config, is-dark);
- $nifi-theme-surface-palette-darker:
mat.get-color-from-palette($nifi-theme-surface-palette, darker);
- $nifi-theme-surface-palette-lighter:
mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
+ $is-dark: map-get($supplemental-theme-color-config, is-dark);
+ $supplemental-theme-surface-palette-darker:
mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
+ $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
+ lighter
+ );
div.navigation-control {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
- background-color: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ background-color: if(
+ $is-dark,
+ $supplemental-theme-surface-palette-darker,
+ $supplemental-theme-surface-palette-lighter
+ );
.navigation-control-header {
&:hover {
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/_birdseye.component-theme.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/_birdseye.component-theme.scss
index 3f0cb1bd51..7b333d77fd 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/_birdseye.component-theme.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/_birdseye.component-theme.scss
@@ -18,24 +18,31 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin generate-theme($material-theme, $nifi-theme) {
+@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.get-color-config($material-theme);
- $nifi-theme-color-config: mat.get-color-config($nifi-theme);
+ $supplemental-theme-color-config:
mat.get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config,
'primary');
- $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
+ $supplemental-theme-surface-palette:
map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
- $is-dark: map-get($nifi-theme-color-config, is-dark);
- $nifi-theme-surface-palette-darker:
mat.get-color-from-palette($nifi-theme-surface-palette, darker);
- $nifi-theme-surface-palette-lighter:
mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
+ $is-dark: map-get($supplemental-theme-color-config, is-dark);
+ $supplemental-theme-surface-palette-darker:
mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
+ $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
+ lighter
+ );
$material-theme-primary-palette-default:
mat.get-color-from-palette($material-theme-primary-palette, default);
$material-theme-primary-palette-lighter:
mat.get-color-from-palette($material-theme-primary-palette, lighter);
#birdseye {
- background: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ background: if(
+ $is-dark,
+ $supplemental-theme-surface-palette-darker,
+ $supplemental-theme-surface-palette-lighter
+ );
rect.birdseye-brush {
stroke: if($is-dark, $material-theme-primary-palette-default,
$material-theme-primary-palette-lighter);
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss
index 252fb94c0c..fa87b611c6 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss
@@ -18,21 +18,28 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin generate-theme($nifi-theme) {
+@mixin generate-theme($supplemental-theme) {
// Get the color config from the theme.
- $nifi-theme-color-config: mat.get-color-config($nifi-theme);
+ $supplemental-theme-color-config:
mat.get-color-config($supplemental-theme);
// Get the color palette from the color-config.
- $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
+ $supplemental-theme-surface-palette:
map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
- $is-dark: map-get($nifi-theme-color-config, is-dark);
- $nifi-theme-surface-palette-darker:
mat.get-color-from-palette($nifi-theme-surface-palette, darker);
- $nifi-theme-surface-palette-lighter:
mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
+ $is-dark: map-get($supplemental-theme-color-config, is-dark);
+ $supplemental-theme-surface-palette-darker:
mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
+ $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
+ lighter
+ );
div.operation-control {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
- background-color: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ background-color: if(
+ $is-dark,
+ $supplemental-theme-surface-palette-darker,
+ $supplemental-theme-surface-palette-lighter
+ );
.operation-control-header {
&:hover {
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss
index e20ac3c9fc..239b672216 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss
@@ -18,34 +18,41 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin generate-theme($material-theme, $nifi-theme) {
+@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.get-color-config($material-theme);
- $nifi-theme-color-config: mat.get-color-config($nifi-theme);
+ $supplemental-theme-color-config:
mat.get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config,
'primary');
$material-theme-warn-palette: map.get($material-theme-color-config,
'warn');
- $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
+ $supplemental-theme-surface-palette:
map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
- $is-dark: map-get($nifi-theme-color-config, is-dark);
+ $is-dark: map-get($supplemental-theme-color-config, is-dark);
$material-theme-primary-palette-default:
mat.get-color-from-palette($material-theme-primary-palette);
$material-theme-primary-palette-lighter:
mat.get-color-from-palette($material-theme-primary-palette, lighter);
$material-theme-warn-palette-darker:
mat.get-color-from-palette($material-theme-warn-palette, darker);
- $nifi-theme-surface-palette-lighter:
mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
- $nifi-theme-surface-palette-darker:
mat.get-color-from-palette($nifi-theme-surface-palette, darker);
- $nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
- $nifi-theme-surface-palette,
+ $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
+ lighter
+ );
+ $supplemental-theme-surface-palette-darker:
mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
+ $supplemental-theme-surface-palette-darker-contrast:
mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
darker-contrast
);
- $nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
- $nifi-theme-surface-palette,
+ $supplemental-theme-surface-palette-lighter-contrast:
mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
lighter-contrast
);
.flow-status {
- background: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ background: if(
+ $is-dark,
+ $supplemental-theme-surface-palette-darker,
+ $supplemental-theme-surface-palette-lighter
+ );
.controller-bulletins {
background-color: if(
@@ -58,8 +65,8 @@
// invert the contrast colors since the surface is dark in
light mode and light in dark mode
color: if(
$is-dark,
- $nifi-theme-surface-palette-lighter-contrast,
- $nifi-theme-surface-palette-darker-contrast
+ $supplemental-theme-surface-palette-lighter-contrast,
+ $supplemental-theme-surface-palette-darker-contrast
);
}
}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss
index a057da4b4c..e28b93ba3b 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss
@@ -18,22 +18,25 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin generate-theme($material-theme, $nifi-theme) {
+@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.get-color-config($material-theme);
- $nifi-theme-color-config: mat.get-color-config($nifi-theme);
+ $supplemental-theme-color-config:
mat.get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config,
'primary');
- $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
+ $supplemental-theme-surface-palette:
map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($material-theme-color-config, is-dark);
$material-theme-primary-palette-default:
mat.get-color-from-palette($material-theme-primary-palette);
$material-theme-primary-palette-lighter:
mat.get-color-from-palette($material-theme-primary-palette, lighter);
$material-theme-primary-palette-darker:
mat.get-color-from-palette($material-theme-primary-palette, darker);
- $nifi-theme-surface-palette-darker:
mat.get-color-from-palette($nifi-theme-surface-palette, darker);
- $nifi-theme-surface-palette-lighter:
mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
+ $supplemental-theme-surface-palette-darker:
mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
+ $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
+ lighter
+ );
$hover: var(--mat-menu-item-hover-state-layer-color);
@@ -46,12 +49,19 @@
// version of the icons, we create a double layered gradient
with the matching background color of the
// navigation bar, then put the highlight on top of it.
background: linear-gradient($hover, $hover),
- linear-gradient($nifi-theme-surface-palette-lighter,
$nifi-theme-surface-palette-lighter) !important;
+ linear-gradient(
+ $supplemental-theme-surface-palette-lighter,
+ $supplemental-theme-surface-palette-lighter
+ ) !important;
.component-button-grip {
background: repeating-linear-gradient(
90deg,
- if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter),
+ if(
+ $is-dark,
+ $supplemental-theme-surface-palette-darker,
+ $supplemental-theme-surface-palette-lighter
+ ),
$material-theme-primary-palette-default 4px,
transparent 4px,
transparent 6px
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss
index aa46c7a9a3..31f503dc4e 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss
@@ -18,26 +18,37 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin generate-theme($nifi-theme) {
+@mixin generate-theme($supplemental-theme) {
// Get the color config from the theme.
- $nifi-theme-color-config: mat.get-color-config($nifi-theme);
+ $supplemental-theme-color-config:
mat.get-color-config($supplemental-theme);
// Get the color palettes from the color-config.
- $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
+ $supplemental-theme-surface-palette:
map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
- $is-dark: map-get($nifi-theme-color-config, is-dark);
- $nifi-theme-surface-palette-lighter:
mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
- $nifi-theme-surface-palette-darker:
mat.get-color-from-palette($nifi-theme-surface-palette, darker);
+ $is-dark: map-get($supplemental-theme-color-config, is-dark);
+ $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
+ lighter
+ );
+ $supplemental-theme-surface-palette-darker:
mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
.search-container {
&:hover,
&.open {
- background-color: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ background-color: if(
+ $is-dark,
+ $supplemental-theme-surface-palette-darker,
+ $supplemental-theme-surface-palette-lighter
+ );
}
.search-input {
- background-color: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ background-color: if(
+ $is-dark,
+ $supplemental-theme-surface-palette-darker,
+ $supplemental-theme-surface-palette-lighter
+ );
}
}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/login/feature/_login.component-theme.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/login/feature/_login.component-theme.scss
index 095cca968d..ba8c11c077 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/login/feature/_login.component-theme.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/login/feature/_login.component-theme.scss
@@ -18,20 +18,27 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin generate-theme($material-theme, $nifi-theme) {
+@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
- $nifi-theme-color-config: mat.get-color-config($nifi-theme);
+ $supplemental-theme-color-config:
mat.get-color-config($supplemental-theme);
// Get the color palettes from the color-config.
- $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
+ $supplemental-theme-surface-palette:
map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
- $is-dark: map-get($nifi-theme-color-config, is-dark);
- $nifi-theme-surface-palette-darker:
mat.get-color-from-palette($nifi-theme-surface-palette, darker);
- $nifi-theme-surface-palette-lighter:
mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
+ $is-dark: map-get($supplemental-theme-color-config, is-dark);
+ $supplemental-theme-surface-palette-darker:
mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
+ $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
+ lighter
+ );
.login-background {
- background: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter)
+ background: if(
+ $is-dark,
+ $supplemental-theme-surface-palette-darker,
+ $supplemental-theme-surface-palette-lighter
+ )
url(../../../../assets/icons/bg-error.png) left top no-repeat;
}
}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss
index 465a8b5ba3..83692b7cc9 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss
@@ -18,39 +18,42 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin generate-theme($material-theme, $nifi-theme) {
+@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.get-color-config($material-theme);
- $nifi-theme-color-config: mat.get-color-config($nifi-theme);
+ $supplemental-theme-color-config:
mat.get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config,
'primary');
$material-theme-accent-palette: map.get($material-theme-color-config,
'accent');
- $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
+ $supplemental-theme-surface-palette:
map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($material-theme-color-config, is-dark);
$material-theme-primary-palette-darker:
mat.get-color-from-palette($material-theme-primary-palette, darker);
$material-theme-primary-palette-default:
mat.get-color-from-palette($material-theme-primary-palette);
$material-theme-accent-palette-default:
mat.get-color-from-palette($material-theme-accent-palette, default);
- $nifi-theme-surface-palette-lighter:
mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
- $nifi-theme-surface-palette-darker:
mat.get-color-from-palette($nifi-theme-surface-palette, darker);
- $nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
- $nifi-theme-surface-palette,
+ $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
+ lighter
+ );
+ $supplemental-theme-surface-palette-darker:
mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
+ $supplemental-theme-surface-palette-darker-contrast:
mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
darker-contrast
);
- $nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
- $nifi-theme-surface-palette,
+ $supplemental-theme-surface-palette-lighter-contrast:
mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
lighter-contrast
);
$surface-contrast: if(
$is-dark,
- $nifi-theme-surface-palette-darker-contrast,
- $nifi-theme-surface-palette-lighter-contrast
+ $supplemental-theme-surface-palette-darker-contrast,
+ $supplemental-theme-surface-palette-lighter-contrast
);
rect.lineage {
- fill: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ fill: if($is-dark, $supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter);
}
g.flowfile-icon text {
@@ -71,7 +74,7 @@
}
circle.flowfile-link {
- fill: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ fill: if($is-dark, $supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter);
stroke: $surface-contrast;
}
}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/_provenance-event-table.component-theme.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/_provenance-event-table.component-theme.scss
index e195213d83..a2bd16e1d9 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/_provenance-event-table.component-theme.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/_provenance-event-table.component-theme.scss
@@ -18,21 +18,28 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin generate-theme($nifi-theme) {
+@mixin generate-theme($supplemental-theme) {
// Get the color config from the theme.
- $nifi-theme-color-config: mat.get-color-config($nifi-theme);
+ $supplemental-theme-color-config:
mat.get-color-config($supplemental-theme);
// Get the color palettes from the color-config.
- $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
+ $supplemental-theme-surface-palette:
map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
- $is-dark: map-get($nifi-theme-color-config, is-dark);
- $nifi-theme-surface-palette-lighter:
mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
- $nifi-theme-surface-palette-darker:
mat.get-color-from-palette($nifi-theme-surface-palette, darker);
+ $is-dark: map-get($supplemental-theme-color-config, is-dark);
+ $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
+ lighter
+ );
+ $supplemental-theme-surface-palette-darker:
mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
.provenance-event-table {
.lineage {
- background-color: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ background-color: if(
+ $is-dark,
+ $supplemental-theme-surface-palette-darker,
+ $supplemental-theme-surface-palette-lighter
+ );
}
}
}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/_lineage.component-theme.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/_lineage.component-theme.scss
index f74eb00cd9..006342a6ad 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/_lineage.component-theme.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/_lineage.component-theme.scss
@@ -18,22 +18,22 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin generate-theme($material-theme, $nifi-theme) {
+@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.get-color-config($material-theme);
- $nifi-theme-color-config: mat.get-color-config($nifi-theme);
+ $supplemental-theme-color-config:
mat.get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config,
'primary');
$material-theme-accent-palette: map.get($material-theme-color-config,
'accent');
$material-theme-warn-palette: map.get($material-theme-color-config,
'warn');
- $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
+ $supplemental-theme-surface-palette:
map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$material-theme-primary-palette-darker:
mat.get-color-from-palette($material-theme-primary-palette, darker);
$material-theme-accent-palette-default:
mat.get-color-from-palette($material-theme-accent-palette, default);
- $is-dark: map-get($nifi-theme-color-config, is-dark);
+ $is-dark: map-get($supplemental-theme-color-config, is-dark);
$material-theme-warn-palette-darker:
mat.get-color-from-palette($material-theme-warn-palette, darker);
#lineage {
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/_processor-status-table.component-theme.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/_processor-status-table.component-theme.scss
index f511901b11..c8d6f9a488 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/_processor-status-table.component-theme.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/_processor-status-table.component-theme.scss
@@ -18,22 +18,29 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin generate-theme($nifi-theme) {
+@mixin generate-theme($supplemental-theme) {
// Get the color config from the theme.
- $nifi-theme-color-config: mat.get-color-config($nifi-theme);
+ $supplemental-theme-color-config:
mat.get-color-config($supplemental-theme);
// Get the color palettes from the color-config.
- $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
+ $supplemental-theme-surface-palette:
map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
- $is-dark: map-get($nifi-theme-color-config, is-dark);
- $nifi-theme-surface-palette-darker:
mat.get-color-from-palette($nifi-theme-surface-palette, darker);
- $nifi-theme-surface-palette-lighter:
mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
+ $is-dark: map-get($supplemental-theme-color-config, is-dark);
+ $supplemental-theme-surface-palette-darker:
mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
+ $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
+ lighter
+ );
.processor-status-table {
.primary-node-only {
min-width: 16px;
- background-color: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ background-color: if(
+ $is-dark,
+ $supplemental-theme-surface-palette-darker,
+ $supplemental-theme-surface-palette-lighter
+ );
}
}
}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
index f5c8cd229f..c580d79841 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
@@ -18,27 +18,30 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin generate-theme($material-theme, $nifi-theme) {
+@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.get-color-config($material-theme);
- $nifi-theme-color-config: mat.get-color-config($nifi-theme);
+ $supplemental-theme-color-config:
mat.get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config,
'primary');
- $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
- $nifi-theme-success-palette: map.get($nifi-theme-color-config, 'accent');
+ $supplemental-theme-surface-palette:
map.get($supplemental-theme-color-config, 'primary');
+ $supplemental-theme-success-palette:
map.get($supplemental-theme-color-config, 'accent');
// Get hues from palette
- $is-dark: map-get($nifi-theme-color-config, is-dark);
+ $is-dark: map-get($supplemental-theme-color-config, is-dark);
$material-theme-primary-palette-default:
mat.get-color-from-palette($material-theme-primary-palette, default);
- $nifi-theme-surface-palette-darker:
mat.get-color-from-palette($nifi-theme-surface-palette, darker);
- $nifi-theme-surface-palette-lighter:
mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
- $nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
- $nifi-theme-surface-palette,
+ $supplemental-theme-surface-palette-darker:
mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
+ $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
+ lighter
+ );
+ $supplemental-theme-surface-palette-darker-contrast:
mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
darker-contrast
);
- $nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
- $nifi-theme-surface-palette,
+ $supplemental-theme-surface-palette-lighter-contrast:
mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
lighter-contrast
);
@@ -53,8 +56,8 @@
.context-menu-item:active {
background-color: if(
$is-dark,
- rgba($nifi-theme-surface-palette-darker-contrast, 0.28),
- rgba($nifi-theme-surface-palette-lighter-contrast, 0.2)
+ rgba($supplemental-theme-surface-palette-darker-contrast,
0.28),
+ rgba($supplemental-theme-surface-palette-lighter-contrast, 0.2)
);
}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/ui/common/map-table/editors/text-editor/_text-editor.component-theme.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/ui/common/map-table/editors/text-editor/_text-editor.component-theme.scss
index 4028c7393f..3f7c985edd 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/ui/common/map-table/editors/text-editor/_text-editor.component-theme.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/ui/common/map-table/editors/text-editor/_text-editor.component-theme.scss
@@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin generate-theme($material-theme, $nifi-theme) {
+@mixin generate-theme($material-theme, $supplemental-theme) {
.text-editor {
@include mat.button-density(-1);
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
index 5f5adfa2af..be106e22ce 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
@@ -19,7 +19,7 @@
@use '@angular/material' as mat;
@use
'../../../../../../../node_modules/@angular/material/core/theming/inspection'
as inspection;
-@mixin generate-theme($material-theme, $nifi-theme) {
+@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.get-color-config($material-theme);
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/ui/common/property-table/editors/nf-editor/_nf-editor.component-theme.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/ui/common/property-table/editors/nf-editor/_nf-editor.component-theme.scss
index e482a65e21..db8108694f 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/ui/common/property-table/editors/nf-editor/_nf-editor.component-theme.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/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 generate-theme($material-theme, $nifi-theme) {
+@mixin generate-theme($material-theme, $supplemental-theme) {
.property-editor {
@include mat.button-density(-1);
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss
index 67a0e162db..8112f9e139 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss
@@ -18,27 +18,27 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin generate-theme($nifi-theme) {
+@mixin generate-theme($supplemental-theme) {
// Get the color config from the theme.
- $nifi-theme-color-config: mat.get-color-config($nifi-theme);
+ $supplemental-theme-color-config:
mat.get-color-config($supplemental-theme);
// Get the color palette from the color-config.
- $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
+ $supplemental-theme-surface-palette:
map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
- $is-dark: map-get($nifi-theme-color-config, is-dark);
- $nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
- $nifi-theme-surface-palette,
+ $is-dark: map-get($supplemental-theme-color-config, is-dark);
+ $supplemental-theme-surface-palette-darker-contrast:
mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
darker-contrast
);
- $nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
- $nifi-theme-surface-palette,
+ $supplemental-theme-surface-palette-lighter-contrast:
mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
lighter-contrast
);
$alternate-surface: if(
$is-dark,
- rgba($nifi-theme-surface-palette-darker-contrast, 0.28),
- rgba($nifi-theme-surface-palette-lighter-contrast, 0.2)
+ rgba($supplemental-theme-surface-palette-darker-contrast, 0.28),
+ rgba($supplemental-theme-surface-palette-lighter-contrast, 0.2)
);
#status-history-chart-container,
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/ui/common/tooltips/property-hint-tip/_property-hint-tip.component-theme.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/ui/common/tooltips/property-hint-tip/_property-hint-tip.component-theme.scss
index f1d3851ea0..f4b167dadd 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/ui/common/tooltips/property-hint-tip/_property-hint-tip.component-theme.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/ui/common/tooltips/property-hint-tip/_property-hint-tip.component-theme.scss
@@ -18,23 +18,26 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin generate-theme($material-theme, $nifi-theme) {
+@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.get-color-config($material-theme);
- $nifi-theme-color-config: mat.get-color-config($nifi-theme);
+ $supplemental-theme-color-config:
mat.get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config,
'primary');
- $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
+ $supplemental-theme-surface-palette:
map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
- $is-dark: map-get($nifi-theme-color-config, is-dark);
+ $is-dark: map-get($supplemental-theme-color-config, is-dark);
$material-theme-primary-palette-lighter:
mat.get-color-from-palette($material-theme-primary-palette, 'lighter');
- $nifi-theme-surface-palette-lighter:
mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
- $nifi-theme-surface-palette-darker:
mat.get-color-from-palette($nifi-theme-surface-palette, darker);
+ $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
+ lighter
+ );
+ $supplemental-theme-surface-palette-darker:
mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
.hint-pattern {
- color: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ color: if($is-dark, $supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter);
background-color: $material-theme-primary-palette-lighter;
}
}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/assets/styles/_app.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/assets/styles/_app.scss
index 0886670335..1d180ed273 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/assets/styles/_app.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/assets/styles/_app.scss
@@ -351,43 +351,55 @@
}
}
-@mixin generate-nifi-theme($nifi-theme) {
+@mixin generate-supplemental-theme($supplemental-theme) {
// Get the color config from the theme.
- $nifi-theme-color-config: mat.get-color-config($nifi-theme);
+ $supplemental-theme-color-config:
mat.get-color-config($supplemental-theme);
// Get the color palettes from the color-config.
- $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
- $nifi-theme-success-palette: map.get($nifi-theme-color-config, 'accent');
- $nifi-theme-caution-palette: map.get($nifi-theme-color-config, 'warn');
-
- // default/lighter/darker colors from the nifi theme palettes
- $is-dark: map-get($nifi-theme-color-config, is-dark);
- $nifi-theme-surface-palette-default:
mat.get-color-from-palette($nifi-theme-surface-palette);
- $nifi-theme-surface-palette-lighter:
mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
- $nifi-theme-surface-palette-darker:
mat.get-color-from-palette($nifi-theme-surface-palette, darker);
- $nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
- $nifi-theme-surface-palette,
+ $supplemental-theme-surface-palette:
map.get($supplemental-theme-color-config, 'primary');
+ $supplemental-theme-success-palette:
map.get($supplemental-theme-color-config, 'accent');
+ $supplemental-theme-caution-palette:
map.get($supplemental-theme-color-config, 'warn');
+
+ // default/lighter/darker colors from the supplemental theme palettes
+ $is-dark: map-get($supplemental-theme-color-config, is-dark);
+ $supplemental-theme-surface-palette-default:
mat.get-color-from-palette($supplemental-theme-surface-palette);
+ $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
+ lighter
+ );
+ $supplemental-theme-surface-palette-darker:
mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
+ $supplemental-theme-surface-palette-darker-contrast:
mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
darker-contrast
);
- $nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
- $nifi-theme-surface-palette,
+ $supplemental-theme-surface-palette-lighter-contrast:
mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
lighter-contrast
);
$alternate-surface: if(
$is-dark,
- rgba($nifi-theme-surface-palette-darker-contrast, 0.28),
- rgba($nifi-theme-surface-palette-lighter-contrast, 0.2)
+ rgba($supplemental-theme-surface-palette-darker-contrast, 0.28),
+ rgba($supplemental-theme-surface-palette-lighter-contrast, 0.2)
);
$surface-contrast: if(
$is-dark,
- $nifi-theme-surface-palette-darker-contrast,
- $nifi-theme-surface-palette-lighter-contrast
+ $supplemental-theme-surface-palette-darker-contrast,
+ $supplemental-theme-surface-palette-lighter-contrast
+ );
+ $supplemental-theme-success-palette-default: mat.get-color-from-palette(
+ $supplemental-theme-success-palette,
+ default
+ );
+ $supplemental-theme-success-palette-lighter: mat.get-color-from-palette(
+ $supplemental-theme-success-palette,
+ lighter
);
- $nifi-theme-success-palette-default:
mat.get-color-from-palette($nifi-theme-success-palette, default);
- $nifi-theme-success-palette-lighter:
mat.get-color-from-palette($nifi-theme-success-palette, lighter);
- $nifi-theme-success-palette-darker:
mat.get-color-from-palette($nifi-theme-success-palette, darker);
- $nifi-theme-caution-palette-default:
mat.get-color-from-palette($nifi-theme-caution-palette, default);
- $nifi-theme-caution-palette-darker:
mat.get-color-from-palette($nifi-theme-caution-palette, darker);
+ $supplemental-theme-success-palette-darker:
mat.get-color-from-palette($supplemental-theme-success-palette, darker);
+ $supplemental-theme-caution-palette-default: mat.get-color-from-palette(
+ $supplemental-theme-caution-palette,
+ default
+ );
+ $supplemental-theme-caution-palette-darker:
mat.get-color-from-palette($supplemental-theme-caution-palette, darker);
// semantic classes for contrast colors determined based on the light/dark
mode of the theme.
@@ -405,42 +417,46 @@
// semantic classes for default/lighter/darker colors for each palette in
each theme
//
- // NOTE: nifi surface palette lighter/darker is purposefully omitted here.
Any application of nifi surface colors should be as a background-color to a
surface DOM element. The surface color should switch from light to dark
depending on the mode for the theme.
+ // NOTE: supplemental surface palette lighter/darker is purposefully
omitted here. Any application of supplemental surface colors should be as a
background-color to a surface DOM element. The surface color should switch from
light to dark depending on the mode for the theme.
.surface-color {
- color: $nifi-theme-surface-palette-default;
- fill: $nifi-theme-surface-palette-default;
+ color: $supplemental-theme-surface-palette-default;
+ fill: $supplemental-theme-surface-palette-default;
}
.success-color {
- color: $nifi-theme-success-palette-default;
- fill: $nifi-theme-success-palette-default;
+ color: $supplemental-theme-success-palette-default;
+ fill: $supplemental-theme-success-palette-default;
}
.success-color-lighter {
- color: $nifi-theme-success-palette-lighter;
- fill: $nifi-theme-success-palette-lighter;
+ color: $supplemental-theme-success-palette-lighter;
+ fill: $supplemental-theme-success-palette-lighter;
}
.success-color-darker {
- color: $nifi-theme-success-palette-darker;
- fill: $nifi-theme-success-palette-darker;
+ color: $supplemental-theme-success-palette-darker;
+ fill: $supplemental-theme-success-palette-darker;
}
.caution-color {
- color: $nifi-theme-caution-palette-default;
- fill: $nifi-theme-caution-palette-default;
+ color: $supplemental-theme-caution-palette-default;
+ fill: $supplemental-theme-caution-palette-default;
}
.caution-color-darker {
- color: $nifi-theme-caution-palette-darker;
- fill: $nifi-theme-caution-palette-darker;
+ color: $supplemental-theme-caution-palette-darker;
+ fill: $supplemental-theme-caution-palette-darker;
}
/* other classes */
.tooltip {
- background-color: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ background-color: if(
+ $is-dark,
+ $supplemental-theme-surface-palette-darker,
+ $supplemental-theme-surface-palette-lighter
+ );
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
color: $surface-contrast;
}
@@ -458,11 +474,19 @@
}
.cdk-drop-list {
- background: if($is-dark, $nifi-theme-surface-palette-default,
$nifi-theme-surface-palette-lighter);
+ background: if(
+ $is-dark,
+ $supplemental-theme-surface-palette-default,
+ $supplemental-theme-surface-palette-lighter
+ );
}
.cdk-drag {
- background: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ background: if(
+ $is-dark,
+ $supplemental-theme-surface-palette-darker,
+ $supplemental-theme-surface-palette-lighter
+ );
}
span.grip {
@@ -470,8 +494,12 @@
}
.cdk-drag-disabled {
- color: $nifi-theme-surface-palette-default;
- background: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter) !important;
+ color: $supplemental-theme-surface-palette-default;
+ background: if(
+ $is-dark,
+ $supplemental-theme-surface-palette-darker,
+ $supplemental-theme-surface-palette-lighter
+ ) !important;
}
.cdk-drag-selected {
@@ -479,8 +507,8 @@
// invert the contrast colors since the surface is dark in light
mode and light in dark mode
color: if(
$is-dark,
- $nifi-theme-surface-palette-lighter-contrast,
- $nifi-theme-surface-palette-darker-contrast
+ $supplemental-theme-surface-palette-lighter-contrast,
+ $supplemental-theme-surface-palette-darker-contrast
);
}
@@ -488,8 +516,8 @@
// invert the contrast colors since the surface is dark in light
mode and light in dark mode
color: if(
$is-dark,
- $nifi-theme-surface-palette-lighter-contrast,
- $nifi-theme-surface-palette-darker-contrast
+ $supplemental-theme-surface-palette-lighter-contrast,
+ $supplemental-theme-surface-palette-darker-contrast
);
}
@@ -497,8 +525,8 @@
// invert the contrast colors since the surface is dark in light
mode and light in dark mode
color: if(
$is-dark,
- $nifi-theme-surface-palette-lighter-contrast,
- $nifi-theme-surface-palette-darker-contrast
+ $supplemental-theme-surface-palette-lighter-contrast,
+ $supplemental-theme-surface-palette-darker-contrast
);
}
}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/assets/styles/_codemirror-theme.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/assets/styles/_codemirror-theme.scss
index 4317f197e9..7f156230ad 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/assets/styles/_codemirror-theme.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/assets/styles/_codemirror-theme.scss
@@ -18,32 +18,38 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin generate-nifi-theme($material-theme, $nifi-theme) {
+@mixin generate-codemirror-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.get-color-config($material-theme);
- $nifi-theme-color-config: mat.get-color-config($nifi-theme);
+ $supplemental-theme-color-config:
mat.get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config,
'primary');
- $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
+ $supplemental-theme-surface-palette:
map.get($supplemental-theme-color-config, 'primary');
$material-theme-accent-palette: map.get($material-theme-color-config,
'accent');
// Get hues from palette
- $is-dark: map-get($nifi-theme-color-config, is-dark);
+ $is-dark: map-get($supplemental-theme-color-config, is-dark);
$material-theme-primary-palette-lighter:
mat.get-color-from-palette($material-theme-primary-palette, lighter);
$material-theme-primary-palette-darker:
mat.get-color-from-palette($material-theme-primary-palette, darker);
$material-theme-primary-palette-default:
mat.get-color-from-palette($material-theme-primary-palette, default);
- $nifi-theme-surface-palette-default:
mat.get-color-from-palette($nifi-theme-surface-palette, default);
- $nifi-theme-surface-palette-lighter:
mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
- $nifi-theme-surface-palette-darker:
mat.get-color-from-palette($nifi-theme-surface-palette, darker);
- $nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
- $nifi-theme-surface-palette,
+ $supplemental-theme-surface-palette-default: mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
+ default
+ );
+ $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
+ lighter
+ );
+ $supplemental-theme-surface-palette-darker:
mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
+ $supplemental-theme-surface-palette-darker-contrast:
mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
darker-contrast
);
- $nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
- $nifi-theme-surface-palette,
+ $supplemental-theme-surface-palette-lighter-contrast:
mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
lighter-contrast
);
@@ -56,7 +62,11 @@
height: 108px;
cursor: default;
line-height: normal;
- background-color: if($is-dark, $nifi-theme-surface-palette-darker,
$nifi-theme-surface-palette-lighter);
+ background-color: if(
+ $is-dark,
+ $supplemental-theme-surface-palette-darker,
+ $supplemental-theme-surface-palette-lighter
+ );
border: 1px solid var(--mdc-outlined-text-field-label-text-color);
}
@@ -72,7 +82,11 @@
.cm-s-nifi .CodeMirror-cursor {
border-left: 1px solid
- if($is-dark, $nifi-theme-surface-palette-darker-contrast,
$nifi-theme-surface-palette-lighter-contrast);
+ if(
+ $is-dark,
+ $supplemental-theme-surface-palette-darker-contrast,
+ $supplemental-theme-surface-palette-lighter-contrast
+ );
}
.cm-s-nifi div.CodeMirror-selected {
@@ -216,8 +230,8 @@
.cm-s-nifi .CodeMirror-matchingbracket {
text-decoration: underline;
- color: $nifi-theme-surface-palette-darker-contrast !important;
- background-color: $nifi-theme-surface-palette-default;
+ color: $supplemental-theme-surface-palette-darker-contrast !important;
+ background-color: $supplemental-theme-surface-palette-default;
opacity: 0.5;
filter: alpha(opacity=50);
}
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/assets/styles/_listing-table.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/assets/styles/_listing-table.scss
index 761d94cd44..f3d45a7185 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/assets/styles/_listing-table.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/assets/styles/_listing-table.scss
@@ -48,21 +48,24 @@
}
}
-@mixin generate-theme($material-theme, $nifi-theme) {
+@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.get-color-config($material-theme);
- $nifi-theme-color-config: mat.get-color-config($nifi-theme);
+ $supplemental-theme-color-config:
mat.get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config,
'primary');
$material-theme-accent-palette: map.get($material-theme-color-config,
'accent');
- $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
+ $supplemental-theme-surface-palette:
map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
- $is-dark: map-get($nifi-theme-color-config, is-dark);
+ $is-dark: map-get($supplemental-theme-color-config, is-dark);
- $nifi-theme-surface-palette-lighter:
mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
- $nifi-theme-surface-palette-darker:
mat.get-color-from-palette($nifi-theme-surface-palette, darker);
+ $supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
+ $supplemental-theme-surface-palette,
+ lighter
+ );
+ $supplemental-theme-surface-palette-darker:
mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
$selected-row-color: if(
$is-dark,
mat.get-color-from-palette($material-theme-accent-palette, darker),
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/assets/themes/nifi.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/assets/themes/supplemental.scss
similarity index 97%
rename from
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/assets/themes/nifi.scss
rename to
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/assets/themes/supplemental.scss
index 8b243eb13d..c9b151b8df 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/assets/themes/nifi.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/assets/themes/supplemental.scss
@@ -110,7 +110,7 @@ $surface-light-palette:
mat.define-palette($surface-palette, 600, 100, 900);
$success-light-palette: mat.define-palette($success-palette, 400, 200, 800);
$caution-light-palette: mat.define-palette($caution-palette, A400, A200, A700);
-$nifi-theme-light: mat.define-light-theme(
+$supplemental-theme-light: mat.define-light-theme(
(
color: (
primary: $surface-light-palette,
@@ -126,7 +126,7 @@ $surface-dark-palette: mat.define-palette($surface-palette,
500, 200, 800);
$success-dark-palette: mat.define-palette($success-palette, 400, 200, 800);
$caution-dark-palette: mat.define-palette($caution-palette, A400, A200, A700);
-$nifi-theme-dark: mat.define-dark-theme(
+$supplemental-theme-dark: mat.define-dark-theme(
(
color: (
primary: $surface-dark-palette,
diff --git
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/styles.scss
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/styles.scss
index 8709f533cd..f1f7714cb3 100644
---
a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/styles.scss
+++
b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/styles.scss
@@ -58,8 +58,7 @@
@use 'codemirror/addon/fold/foldgutter.css';
@use 'codemirror/addon/hint/show-hint.css';
-// To override the canvas theme, you need to set the variables
$nifi-theme-light and $nifi-theme-dark
-@import 'assets/themes/nifi';
+@import 'assets/themes/supplemental';
// To override the NiFi theme, you need to set the variables
$material-theme-light and $material-theme-dark
@import 'assets/themes/material';
@@ -81,31 +80,31 @@
// generate light mode stylesheets
@include app.generate-material-theme($material-theme-light);
-@include app.generate-nifi-theme($nifi-theme-light);
-@include codemirror-theme.generate-nifi-theme($material-theme-light,
$nifi-theme-light);
+@include app.generate-supplemental-theme($supplemental-theme-light);
+@include codemirror-theme.generate-codemirror-theme($material-theme-light,
$supplemental-theme-light);
@include app-component.generate-theme($material-theme-light);
-@include listing-table.generate-theme($material-theme-light,
$nifi-theme-light);
-@include canvas.generate-theme($material-theme-light, $nifi-theme-light);
-@include footer.generate-theme($nifi-theme-light);
+@include listing-table.generate-theme($material-theme-light,
$supplemental-theme-light);
+@include canvas.generate-theme($material-theme-light,
$supplemental-theme-light);
+@include footer.generate-theme($supplemental-theme-light);
@include extension-creation.generate-theme($material-theme-light);
-@include navigation-control.generate-theme($nifi-theme-light);
-@include birdseye-control.generate-theme($material-theme-light,
$nifi-theme-light);
-@include operation-control.generate-theme($nifi-theme-light);
-@include flow-status.generate-theme($material-theme-light, $nifi-theme-light);
-@include new-canvas-item.generate-theme($material-theme-light,
$nifi-theme-light);
-@include search.generate-theme($nifi-theme-light);
-@include login.generate-theme($material-theme-light, $nifi-theme-light);
-@include provenance-event-table.generate-theme($nifi-theme-light);
-@include provenance.generate-theme($material-theme-light, $nifi-theme-light);
-@include lineage.generate-theme($material-theme-light, $nifi-theme-light);
-@include context-menu.generate-theme($material-theme-light, $nifi-theme-light);
-@include navigation.generate-theme($material-theme-light, $nifi-theme-light);
-@include nf-editor.generate-theme($material-theme-light, $nifi-theme-light);
-@include status-history.generate-theme($nifi-theme-light);
-@include property-hint-tip.generate-theme($material-theme-light,
$nifi-theme-light);
-@include processor-status-table.generate-theme($nifi-theme-light);
-@include change-color-dialog.generate-theme($nifi-theme-light);
-@include text-editor.generate-theme($material-theme-light, $nifi-theme-light);
+@include navigation-control.generate-theme($supplemental-theme-light);
+@include birdseye-control.generate-theme($material-theme-light,
$supplemental-theme-light);
+@include operation-control.generate-theme($supplemental-theme-light);
+@include flow-status.generate-theme($material-theme-light,
$supplemental-theme-light);
+@include new-canvas-item.generate-theme($material-theme-light,
$supplemental-theme-light);
+@include search.generate-theme($supplemental-theme-light);
+@include login.generate-theme($material-theme-light,
$supplemental-theme-light);
+@include provenance-event-table.generate-theme($supplemental-theme-light);
+@include provenance.generate-theme($material-theme-light,
$supplemental-theme-light);
+@include lineage.generate-theme($material-theme-light,
$supplemental-theme-light);
+@include context-menu.generate-theme($material-theme-light,
$supplemental-theme-light);
+@include navigation.generate-theme($material-theme-light,
$supplemental-theme-light);
+@include nf-editor.generate-theme($material-theme-light,
$supplemental-theme-light);
+@include status-history.generate-theme($supplemental-theme-light);
+@include property-hint-tip.generate-theme($material-theme-light,
$supplemental-theme-light);
+@include processor-status-table.generate-theme($supplemental-theme-light);
+@include change-color-dialog.generate-theme($supplemental-theme-light);
+@include text-editor.generate-theme($material-theme-light,
$supplemental-theme-light);
.dark-theme {
// Include the dark theme color styles.
@@ -113,29 +112,29 @@
// generate dark mode stylesheets
@include app.generate-material-theme($material-theme-dark);
- @include app.generate-nifi-theme($nifi-theme-dark);
- @include codemirror-theme.generate-nifi-theme($material-theme-dark,
$nifi-theme-dark);
+ @include app.generate-supplemental-theme($supplemental-theme-dark);
+ @include codemirror-theme.generate-codemirror-theme($material-theme-dark,
$supplemental-theme-dark);
@include app-component.generate-theme($material-theme-dark);
- @include listing-table.generate-theme($material-theme-dark,
$nifi-theme-dark);
- @include canvas.generate-theme($material-theme-dark, $nifi-theme-dark);
- @include footer.generate-theme($nifi-theme-dark);
+ @include listing-table.generate-theme($material-theme-dark,
$supplemental-theme-dark);
+ @include canvas.generate-theme($material-theme-dark,
$supplemental-theme-dark);
+ @include footer.generate-theme($supplemental-theme-dark);
@include extension-creation.generate-theme($material-theme-dark);
- @include navigation-control.generate-theme($nifi-theme-dark);
- @include birdseye-control.generate-theme($material-theme-dark,
$nifi-theme-dark);
- @include operation-control.generate-theme($nifi-theme-dark);
- @include flow-status.generate-theme($material-theme-dark,
$nifi-theme-dark);
- @include new-canvas-item.generate-theme($material-theme-dark,
$nifi-theme-dark);
- @include search.generate-theme($nifi-theme-dark);
- @include login.generate-theme($material-theme-dark, $nifi-theme-dark);
- @include provenance-event-table.generate-theme($nifi-theme-dark);
- @include provenance.generate-theme($material-theme-dark, $nifi-theme-dark);
- @include lineage.generate-theme($material-theme-dark, $nifi-theme-dark);
- @include context-menu.generate-theme($material-theme-dark,
$nifi-theme-dark);
- @include navigation.generate-theme($material-theme-dark, $nifi-theme-dark);
- @include nf-editor.generate-theme($material-theme-dark, $nifi-theme-dark);
- @include status-history.generate-theme($nifi-theme-dark);
- @include property-hint-tip.generate-theme($material-theme-dark,
$nifi-theme-dark);
- @include processor-status-table.generate-theme($nifi-theme-dark);
- @include change-color-dialog.generate-theme($nifi-theme-dark);
- @include text-editor.generate-theme($material-theme-dark,
$nifi-theme-dark);
+ @include navigation-control.generate-theme($supplemental-theme-dark);
+ @include birdseye-control.generate-theme($material-theme-dark,
$supplemental-theme-dark);
+ @include operation-control.generate-theme($supplemental-theme-dark);
+ @include flow-status.generate-theme($material-theme-dark,
$supplemental-theme-dark);
+ @include new-canvas-item.generate-theme($material-theme-dark,
$supplemental-theme-dark);
+ @include search.generate-theme($supplemental-theme-dark);
+ @include login.generate-theme($material-theme-dark,
$supplemental-theme-dark);
+ @include provenance-event-table.generate-theme($supplemental-theme-dark);
+ @include provenance.generate-theme($material-theme-dark,
$supplemental-theme-dark);
+ @include lineage.generate-theme($material-theme-dark,
$supplemental-theme-dark);
+ @include context-menu.generate-theme($material-theme-dark,
$supplemental-theme-dark);
+ @include navigation.generate-theme($material-theme-dark,
$supplemental-theme-dark);
+ @include nf-editor.generate-theme($material-theme-dark,
$supplemental-theme-dark);
+ @include status-history.generate-theme($supplemental-theme-dark);
+ @include property-hint-tip.generate-theme($material-theme-dark,
$supplemental-theme-dark);
+ @include processor-status-table.generate-theme($supplemental-theme-dark);
+ @include change-color-dialog.generate-theme($supplemental-theme-dark);
+ @include text-editor.generate-theme($material-theme-dark,
$supplemental-theme-dark);
}
