-
Last updated:
-
{{ state.loadedTimestamp }}
+
{{ state.loadedTimestamp }}
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-table/flow-configuration-history-table.component.html b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-table/flow-configuration-history-table.component.html
index ab3165762b08b..5104489f8563c 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-table/flow-configuration-history-table.component.html
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/flow-configuration-history-table/flow-configuration-history-table.component.html
@@ -51,7 +51,7 @@
Name
-
{{
+ {{
formatName(item)
}}
@@ -102,7 +102,7 @@
@if (canRead(item)) {
}
@@ -118,7 +118,7 @@
[class.even]="even"
(click)="select(row)"
[class.unset]="!canRead(row)"
- [class.surface-color]="!canRead(row)"
+ [class.neutral-color]="!canRead(row)"
[class.selected]="isSelected(row)">
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts
index 7ffb4c778b047..2b4e9fc33a49d 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts
@@ -1451,7 +1451,7 @@ export class CanvasUtils {
case ComponentType.Processor:
case ComponentType.InputPort:
case ComponentType.OutputPort:
- return `active-thread-count accent-color`;
+ return `active-thread-count tertiary-color`;
default:
return `active-thread-count primary-contrast`;
}
@@ -1485,9 +1485,9 @@ export class CanvasUtils {
case ComponentType.InputPort:
case ComponentType.OutputPort:
if (terminatedThreads > 0) {
- return `active-thread-count-icon warn-color-darker`;
+ return `active-thread-count-icon error-color-darker`;
} else {
- return `active-thread-count-icon primary-color`;
+ return `active-thread-count-icon secondary-color`;
}
default:
return `active-thread-count-icon primary-contrast`;
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/manager/connection-manager.service.ts b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/manager/connection-manager.service.ts
index 1cb5daf9fc924..021d861002bf3 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/manager/connection-manager.service.ts
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/manager/connection-manager.service.ts
@@ -998,7 +998,7 @@ export class ConnectionManager {
return d.component.source.running;
}
})
- .classed('stopped warn-color-lighter', function () {
+ .classed('stopped error-color-lighter', function () {
if (d.component.source.exists === false) {
return false;
} else {
@@ -1113,7 +1113,7 @@ export class ConnectionManager {
return d.component.destination.running;
}
})
- .classed('stopped warn-color-lighter', function () {
+ .classed('stopped error-color-lighter', function () {
if (d.component.destination.exists === false) {
return false;
} else {
@@ -1271,7 +1271,7 @@ export class ConnectionManager {
// expiration icon
queued
.append('text')
- .attr('class', 'expiration-icon primary-color')
+ .attr('class', 'expiration-icon secondary-color')
.attr('x', 208)
.attr('y', 14)
.text(function () {
@@ -1458,7 +1458,7 @@ export class ConnectionManager {
.classed('load-balance-icon-active fa-rotate-90 success-color', function (d: any) {
return d.permissions.canRead && d.component.loadBalanceStatus === 'LOAD_BALANCE_ACTIVE';
})
- .classed('primary-color', function (d: any) {
+ .classed('secondary-color', function (d: any) {
return d.permissions.canRead && d.component.loadBalanceStatus !== 'LOAD_BALANCE_ACTIVE';
})
.classed('load-balance-icon-184', function () {
@@ -1603,7 +1603,7 @@ export class ConnectionManager {
connectionLabelContainer
.select('g.queued-container')
.append('text')
- .attr('class', 'penalized-icon primary-color')
+ .attr('class', 'penalized-icon secondary-color')
.attr('y', 14)
.text(function () {
return '\uf252';
@@ -1723,7 +1723,7 @@ export class ConnectionManager {
.attr('display', function (d: any) {
const predicted: number = d.status.aggregateSnapshot.predictions?.predictedPercentBytes ?? -1;
if (predicted >= 0) {
- return 'unset surface-color';
+ return 'unset neutral-color';
} else {
// don't show it if there is not a valid prediction
return 'none';
@@ -1791,7 +1791,7 @@ export class ConnectionManager {
.attr('display', function (d: any) {
const predicted = d.status.aggregateSnapshot.predictions?.predictedPercentCount ?? -1;
if (predicted >= 0) {
- return 'unset surface-color';
+ return 'unset neutral-color';
} else {
// don't show it if there not a valid prediction
return 'none';
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.ts b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.ts
index bc961bb727377..55b87f4f87f99 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.ts
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.ts
@@ -375,14 +375,14 @@ export class PortManager {
updated
.select('text.run-status-icon')
.attr('class', function (d: any) {
- let clazz = 'primary-color';
+ let clazz = 'secondary-color';
if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
clazz = 'invalid caution-color';
} else if (d.status.aggregateSnapshot.runStatus === 'Running') {
clazz = 'running success-color-lighter';
} else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
- clazz = 'stopped warn-color-lighter';
+ clazz = 'stopped error-color-lighter';
}
return `run-status-icon ${clazz}`;
@@ -439,7 +439,7 @@ export class PortManager {
.classed('transmitting success-color', function (d: any) {
return d.status.transmitting === true;
})
- .classed('not-transmitting surface-color', function (d: any) {
+ .classed('not-transmitting neutral-color', function (d: any) {
return d.status.transmitting !== true;
});
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts
index 6d6711a0a4c40..dbb4c3a30a633 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts
@@ -253,7 +253,7 @@ export class ProcessGroupManager {
.append('text')
.attr('x', 10)
.attr('y', 49)
- .attr('class', 'process-group-transmitting process-group-contents-icon primary-color-lighter')
+ .attr('class', 'process-group-transmitting process-group-contents-icon primary-color')
.attr('font-family', 'FontAwesome')
.text('\uf140')
.append('title')
@@ -269,10 +269,7 @@ export class ProcessGroupManager {
details
.append('text')
.attr('y', 49)
- .attr(
- 'class',
- 'process-group-not-transmitting process-group-contents-icon primary-color-lighter'
- )
+ .attr('class', 'process-group-not-transmitting process-group-contents-icon primary-color')
.attr('font-family', 'flowfont')
.text('\ue80a')
.append('title')
@@ -288,7 +285,7 @@ export class ProcessGroupManager {
details
.append('text')
.attr('y', 49)
- .attr('class', 'process-group-running process-group-contents-icon primary-color-lighter')
+ .attr('class', 'process-group-running process-group-contents-icon primary-color')
.attr('font-family', 'FontAwesome')
.text('\uf04b')
.append('title')
@@ -304,7 +301,7 @@ export class ProcessGroupManager {
details
.append('text')
.attr('y', 49)
- .attr('class', 'process-group-stopped process-group-contents-icon primary-color-lighter')
+ .attr('class', 'process-group-stopped process-group-contents-icon primary-color')
.attr('font-family', 'FontAwesome')
.text('\uf04d')
.append('title')
@@ -320,7 +317,7 @@ export class ProcessGroupManager {
details
.append('text')
.attr('y', 49)
- .attr('class', 'process-group-invalid process-group-contents-icon primary-color-lighter')
+ .attr('class', 'process-group-invalid process-group-contents-icon primary-color')
.attr('font-family', 'FontAwesome')
.text('\uf071')
.append('title')
@@ -336,7 +333,7 @@ export class ProcessGroupManager {
details
.append('text')
.attr('y', 49)
- .attr('class', 'process-group-disabled process-group-contents-icon primary-color-lighter')
+ .attr('class', 'process-group-disabled process-group-contents-icon primary-color')
.attr('font-family', 'flowfont')
.text('\ue802')
.append('title')
@@ -355,7 +352,7 @@ export class ProcessGroupManager {
.attr('y', function () {
return processGroupData.dimensions.height - 7;
})
- .attr('class', 'process-group-up-to-date process-group-contents-icon primary-color-lighter')
+ .attr('class', 'process-group-up-to-date process-group-contents-icon primary-color')
.attr('font-family', 'FontAwesome')
.text('\uf00c')
.append('title')
@@ -375,10 +372,7 @@ export class ProcessGroupManager {
.attr('y', function () {
return processGroupData.dimensions.height - 7;
})
- .attr(
- 'class',
- 'process-group-locally-modified process-group-contents-icon primary-color-lighter'
- )
+ .attr('class', 'process-group-locally-modified process-group-contents-icon primary-color')
.attr('font-family', 'FontAwesome')
.text('\uf069')
.append('title')
@@ -398,7 +392,7 @@ export class ProcessGroupManager {
.attr('y', function () {
return processGroupData.dimensions.height - 7;
})
- .attr('class', 'process-group-stale process-group-contents-icon primary-color-lighter')
+ .attr('class', 'process-group-stale process-group-contents-icon primary-color')
.attr('font-family', 'FontAwesome')
.text('\uf0aa')
.append('title')
@@ -420,7 +414,7 @@ export class ProcessGroupManager {
})
.attr(
'class',
- 'process-group-locally-modified-and-stale process-group-contents-icon primary-color-lighter'
+ 'process-group-locally-modified-and-stale process-group-contents-icon primary-color'
)
.attr('font-family', 'FontAwesome')
.text('\uf06a')
@@ -441,7 +435,7 @@ export class ProcessGroupManager {
.attr('y', function () {
return processGroupData.dimensions.height - 7;
})
- .attr('class', 'process-group-sync-failure process-group-contents-icon primary-color-lighter')
+ .attr('class', 'process-group-sync-failure process-group-contents-icon primary-color')
.attr('font-family', 'FontAwesome')
.text('\uf128')
.append('title')
@@ -765,7 +759,7 @@ export class ProcessGroupManager {
// update not transmitting
const notTransmitting = details
.select('text.process-group-not-transmitting')
- .classed('not-transmitting surface-color', function (d: any) {
+ .classed('not-transmitting neutral-color', function (d: any) {
return d.permissions.canRead && d.inactiveRemotePortCount > 0;
})
.classed('zero', function (d: any) {
@@ -829,7 +823,7 @@ export class ProcessGroupManager {
// update stopped
const stopped = details
.select('text.process-group-stopped')
- .classed('warn-color-lighter', function (d: any) {
+ .classed('error-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.stoppedCount > 0;
})
.classed('zero', function (d: any) {
@@ -893,7 +887,7 @@ export class ProcessGroupManager {
// update disabled
const disabled = details
.select('text.process-group-disabled')
- .classed('disabled surface-color', function (d: any) {
+ .classed('disabled neutral-color', function (d: any) {
return d.permissions.canRead && d.component.disabledCount > 0;
})
.classed('zero', function (d: any) {
@@ -949,7 +943,7 @@ export class ProcessGroupManager {
// update locally modified
const locallyModified = details
.select('text.process-group-locally-modified')
- .classed('surface-color', function (d: any) {
+ .classed('neutral-color', function (d: any) {
return d.permissions.canRead && d.component.locallyModifiedCount > 0;
})
.classed('zero', function (d: any) {
@@ -981,7 +975,7 @@ export class ProcessGroupManager {
// update stale
const stale = details
.select('text.process-group-stale')
- .classed('warn-color-lighter', function (d: any) {
+ .classed('error-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.staleCount > 0;
})
.classed('zero', function (d: any) {
@@ -1013,7 +1007,7 @@ export class ProcessGroupManager {
// update locally modified and stale
const locallyModifiedAndStale = details
.select('text.process-group-locally-modified-and-stale')
- .classed('warn-color-lighter', function (d: any) {
+ .classed('error-color-lighter', function (d: any) {
return d.permissions.canRead && d.component.locallyModifiedAndStaleCount > 0;
})
.classed('zero', function (d: any) {
@@ -1047,7 +1041,7 @@ export class ProcessGroupManager {
// update sync failure
const syncFailure = details
.select('text.process-group-sync-failure')
- .classed('surface-color', function (d: any) {
+ .classed('neutral-color', function (d: any) {
return d.permissions.canRead && d.component.syncFailureCount > 0;
})
.classed('zero', function (d: any) {
@@ -1085,19 +1079,19 @@ export class ProcessGroupManager {
if (self.isUnderVersionControl(processGroupData)) {
const vciState = processGroupData.versionedFlowState;
if (vciState === 'SYNC_FAILURE') {
- return `version-control surface-color`;
+ return `version-control neutral-color`;
} else if (vciState === 'LOCALLY_MODIFIED_AND_STALE') {
- return `version-control warn-color-lighter`;
+ return `version-control error-color-lighter`;
} else if (vciState === 'STALE') {
- return `version-control warn-color-lighter`;
+ return `version-control error-color-lighter`;
} else if (vciState === 'LOCALLY_MODIFIED') {
- return `version-control surface-color`;
+ return `version-control neutral-color`;
} else {
// up to date
return `version-control success-color`;
}
} else {
- return 'version-control surface-contrast';
+ return 'version-control neutral-contrast';
}
})
.text(function () {
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts
index 286185dfdb471..84dc9f144dff6 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts
@@ -603,7 +603,7 @@ export class ProcessorManager {
//update the processor icon
processor
.select('text.processor-icon')
- .classed('unauthorized accent-color', !processorData.permissions.canRead);
+ .classed('unauthorized tertiary-color', !processorData.permissions.canRead);
//update the processor border
processor.select('rect.border').classed('unauthorized', !processorData.permissions.canRead);
@@ -651,7 +651,7 @@ export class ProcessorManager {
} else {
// undo changes made above
processor.select('text.processor-icon').attr('class', () => {
- return 'processor-icon accent-color';
+ return 'processor-icon tertiary-color';
});
processor.select('rect.processor-icon-container').style('fill', null);
processor.select('rect.border').style('stroke', null);
@@ -685,16 +685,16 @@ export class ProcessorManager {
updated
.select('text.run-status-icon')
.attr('class', (d: any) => {
- let clazz = 'primary-color';
+ let clazz = 'secondary-color';
if (d.status.aggregateSnapshot.runStatus === 'Validating') {
- clazz = 'validating surface-color';
+ clazz = 'validating neutral-color';
} else if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
clazz = 'invalid caution-color';
} else if (d.status.aggregateSnapshot.runStatus === 'Running') {
clazz = 'running success-color-lighter';
} else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
- clazz = 'stopped warn-color-lighter';
+ clazz = 'stopped error-color-lighter';
}
return `run-status-icon ${clazz}`;
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/manager/remote-process-group-manager.service.ts b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/manager/remote-process-group-manager.service.ts
index 5636ae4c720aa..58f652658611d 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/manager/remote-process-group-manager.service.ts
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/service/manager/remote-process-group-manager.service.ts
@@ -612,7 +612,7 @@ export class RemoteProcessGroupManager {
.classed('transmitting success-color', function (d: any) {
return !self.hasIssues(d) && d.status.transmissionStatus === 'Transmitting';
})
- .classed('not-transmitting surface-color', function (d: any) {
+ .classed('not-transmitting neutral-color', function (d: any) {
return !self.hasIssues(d) && d.status.transmissionStatus !== 'Transmitting';
})
.each(function (this: any, d: any) {
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
index 0267a05b518e3..2ae59a8087f17 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
@@ -18,98 +18,71 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin generate-theme($material-theme, $supplemental-theme) {
- // Get the color config from the theme.
- $material-theme-color-config: mat.m2-get-color-config($material-theme);
- $supplemental-theme-color-config: mat.m2-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');
- $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.m2-get-color-from-palette($material-theme-primary-palette, darker);
- $material-theme-primary-palette-lighter: mat.m2-get-color-from-palette($material-theme-primary-palette, lighter);
- $material-theme-primary-palette-default: mat.m2-get-color-from-palette($material-theme-primary-palette, default);
- $material-theme-accent-palette-default: mat.m2-get-color-from-palette($material-theme-accent-palette, default);
-
- // Canvas colors
- $supplemental-theme-surface-palette-default: mat.m2-get-color-from-palette(
- $supplemental-theme-surface-palette,
- default
+@mixin generate-theme($material-theme, $config) {
+ $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
+ $material-theme-primary-palette-default: mat.get-theme-color(
+ $material-theme,
+ primary,
+ map.get(map.get($config, primary), default)
);
- $supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
- $supplemental-theme-surface-palette,
- lighter
+ $material-theme-primary-palette-darker: mat.get-theme-color(
+ $material-theme,
+ primary,
+ map.get(map.get($config, primary), darker)
);
- $supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
- $supplemental-theme-surface-palette,
- darker
+ $material-theme-primary-palette-lighter: mat.get-theme-color(
+ $material-theme,
+ primary,
+ map.get(map.get($config, primary), lighter)
);
- $supplemental-theme-success-palette-lighter: mat.m2-get-color-from-palette(
- $supplemental-theme-success-palette,
- lighter
+ $material-theme-tertiary-palette-default: mat.get-theme-color(
+ $material-theme,
+ tertiary,
+ map.get(map.get($config, tertiary), default)
);
- $supplemental-theme-success-palette-50: mat.m2-get-color-from-palette($supplemental-theme-success-palette, 50);
- $supplemental-theme-success-palette-900: mat.m2-get-color-from-palette($supplemental-theme-success-palette, 900);
- $material-theme-warn-palette-darker: mat.m2-get-color-from-palette($material-theme-warn-palette, darker);
- $supplemental-theme-caution-palette-darker: mat.m2-get-color-from-palette(
- $supplemental-theme-caution-palette,
- darker
+ $material-theme-error-palette-default: mat.get-theme-color(
+ $material-theme,
+ error,
+ map.get(map.get($config, error), default)
);
-
- // Shadows should always be darker. We explicitly set this so the SVG shadows are correct in both modes.
- $is-dark: map-get($supplemental-theme-color-config, is-dark);
- $drop-shadow-color: black;
- $connection-drop-shadow-color: if($is-dark, black, white);
-
- $supplemental-theme-surface-palette-darker-contrast: mat.m2-get-color-from-palette(
- $supplemental-theme-surface-palette,
- darker-contrast
+ $material-theme-error-palette-darker: mat.get-theme-color(
+ $material-theme,
+ error,
+ map.get(map.get($config, error), darker)
);
- $supplemental-theme-surface-palette-lighter-contrast: mat.m2-get-color-from-palette(
- $supplemental-theme-surface-palette,
- lighter-contrast
+ $material-theme-neutral-palette-default: mat.get-theme-color(
+ $material-theme,
+ neutral,
+ if($is-material-dark, 40, 35)
);
- $surface-contrast: if(
- $is-dark,
- $supplemental-theme-surface-palette-darker-contrast,
- $supplemental-theme-surface-palette-lighter-contrast
+ $material-theme-neutral-palette-darker: mat.get-theme-color(
+ $material-theme,
+ neutral,
+ map.get(map.get($config, neutral), darker)
);
- $alternate-surface: if(
- $is-dark,
- rgba($supplemental-theme-surface-palette-darker-contrast, 0.28),
- rgba($supplemental-theme-surface-palette-lighter-contrast, 0.2)
+ $material-theme-neutral-palette-lighter: mat.get-theme-color(
+ $material-theme,
+ neutral,
+ map.get(map.get($config, neutral), lighter)
);
+ $primary-contrast: map.get(map.get($config, primary), contrast);
+ $neutral-contrast: map.get(map.get($config, neutral), contrast);
+ $alternate-surface: mat.get-theme-color($material-theme, neutral-variant, map.get($config, neutral-variant));
+ $success-lighter: map.get($config, success-lighter);
+ $caution-darker: map.get($config, caution-darker);
- .canvas-background {
- background-color: if(
- $is-dark,
- $supplemental-theme-surface-palette-darker,
- $supplemental-theme-surface-palette-lighter
- );
- background-image: linear-gradient(
- to right,
- if($is-dark, $supplemental-theme-success-palette-900, $supplemental-theme-success-palette-50) 1px,
- transparent 1px
- ),
- linear-gradient(
- to bottom,
- if($is-dark, $supplemental-theme-success-palette-900, $supplemental-theme-success-palette-50) 1px,
- transparent 1px
- );
- }
+ // Shadows should always be darker. We explicitly set this so the SVG shadows are correct in both modes.
+ $drop-shadow-color: black;
+ $connection-drop-shadow-color: if($is-material-dark, black, white);
- mat-sidenav {
+ .canvas-background {
background-color: if(
- $is-dark,
- $supplemental-theme-surface-palette-darker,
- $supplemental-theme-surface-palette-lighter
+ $is-material-dark,
+ $material-theme-neutral-palette-darker,
+ $material-theme-neutral-palette-lighter
);
+ background-image: linear-gradient(to right, if($is-material-dark, #0d1411, #e5ebed) 1px, transparent 1px),
+ linear-gradient(to bottom, if($is-material-dark, #0d1411, #e5ebed) 1px, transparent 1px);
}
/* svg styles */
@@ -120,7 +93,7 @@
*/
g.component {
- font-family: mat.get-theme-typography($material-theme, body-1, font-family);
+ font-family: mat.get-theme-typography($material-theme, body-medium, font-family);
}
.transparent {
@@ -128,25 +101,33 @@
}
g.component rect.body {
- fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
+ fill: if(
+ $is-material-dark,
+ $material-theme-neutral-palette-darker,
+ $material-theme-neutral-palette-lighter
+ );
}
rect.banner {
fill: rgba(
- if($is-dark, $supplemental-theme-surface-palette-lighter, $supplemental-theme-surface-palette-darker),
+ if($is-material-dark, $material-theme-neutral-palette-lighter, $material-theme-neutral-palette-darker),
0.08
);
}
rect.odd {
fill: rgba(
- if($is-dark, $supplemental-theme-surface-palette-lighter, $supplemental-theme-surface-palette-darker),
+ if($is-material-dark, $material-theme-neutral-palette-lighter, $material-theme-neutral-palette-darker),
0.025
);
}
rect.even {
- fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
+ fill: if(
+ $is-material-dark,
+ $material-theme-neutral-palette-darker,
+ $material-theme-neutral-palette-lighter
+ );
}
rect.row-border {
@@ -154,62 +135,82 @@
}
g.component rect.body.unauthorized {
- fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
+ fill: if(
+ $is-material-dark,
+ $material-theme-neutral-palette-darker,
+ $material-theme-neutral-palette-lighter
+ );
}
g.component rect.border,
g.connections rect.border {
stroke: $alternate-surface;
stroke-width: if(
- $is-dark,
+ $is-material-dark,
2,
1
); // Dark mode gets a wider stroke to provide contrast between the canvas and components
}
g.component rect.border.unauthorized {
- stroke: $material-theme-warn-palette-darker !important;
+ stroke: if(
+ $is-material-dark,
+ $material-theme-error-palette-default,
+ $material-theme-error-palette-darker
+ ) !important;
}
g.component rect.border.ghost {
- stroke: $supplemental-theme-surface-palette-default !important;
+ stroke: $material-theme-neutral-palette-default !important;
}
g.component rect.processor-icon-container.unauthorized {
- fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
+ fill: if(
+ $is-material-dark,
+ $material-theme-neutral-palette-darker,
+ $material-theme-neutral-palette-lighter
+ );
}
g.component.selected rect.border {
- stroke: $material-theme-primary-palette-default !important;
+ stroke: if(
+ $is-material-dark,
+ $material-theme-primary-palette-default,
+ $material-theme-primary-palette-darker
+ ) !important;
}
text.stats-label {
- @extend .surface-contrast;
- font-family: mat.get-theme-typography($material-theme, body-1, font-family);
+ @extend .neutral-contrast;
+ font-family: mat.get-theme-typography($material-theme, body-medium, font-family);
}
text.stats-value {
- fill: $material-theme-accent-palette-default;
+ fill: $material-theme-tertiary-palette-default;
}
text.stats-info {
- fill: $material-theme-primary-palette-default;
+ fill: if(
+ $is-material-dark,
+ $material-theme-primary-palette-default,
+ $material-theme-primary-palette-darker
+ );
}
text.bulletin-icon {
- fill: if(
- $is-dark,
- $supplemental-theme-surface-palette-lighter-contrast,
- $supplemental-theme-surface-palette-darker-contrast
- );
+ fill: mat.get-theme-color($material-theme, surface);
}
rect.bulletin-background {
- fill: $material-theme-warn-palette-darker;
+ fill: if($is-material-dark, $material-theme-error-palette-default, $material-theme-error-palette-darker);
}
text.component-comments {
- fill: $material-theme-primary-palette-default;
+ fill: if(
+ $is-material-dark,
+ $material-theme-primary-palette-default,
+ $material-theme-primary-palette-darker
+ );
stroke: $alternate-surface;
}
@@ -224,12 +225,20 @@
rect.component-selection,
rect.drag-selection,
rect.label-drag {
- stroke: if($is-dark, $material-theme-primary-palette-lighter, $material-theme-primary-palette-default);
+ stroke: if(
+ $is-material-dark,
+ $material-theme-primary-palette-lighter,
+ $material-theme-primary-palette-darker
+ );
fill: transparent;
}
text.add-connect {
- fill: $material-theme-primary-palette-default;
+ fill: if(
+ $is-material-dark,
+ $material-theme-primary-palette-default,
+ $material-theme-primary-palette-darker
+ );
}
/*
@@ -240,7 +249,11 @@
}
rect.processor-read-write-stats {
- fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
+ fill: if(
+ $is-material-dark,
+ $material-theme-neutral-palette-darker,
+ $material-theme-neutral-palette-lighter
+ );
}
rect.processor-stats-border {
@@ -248,75 +261,103 @@
}
text.processor-name {
- fill: if(
- $is-dark,
- $supplemental-theme-surface-palette-darker-contrast,
- $supplemental-theme-surface-palette-lighter-contrast
- );
+ fill: $neutral-contrast;
}
text.processor-type {
- fill: $material-theme-primary-palette-default;
+ fill: if(
+ $is-material-dark,
+ $material-theme-primary-palette-default,
+ $material-theme-primary-palette-darker
+ );
}
circle.is-primary-background {
stroke: if(
- $is-dark,
- $supplemental-theme-surface-palette-lighter,
- $supplemental-theme-surface-palette-darker
+ $is-material-dark,
+ $material-theme-neutral-palette-lighter,
+ $material-theme-neutral-palette-darker
+ );
+ fill: if(
+ $is-material-dark,
+ $material-theme-neutral-palette-darker,
+ $material-theme-neutral-palette-lighter
);
- fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
}
text.is-primary {
- fill: if($is-dark, $supplemental-theme-surface-palette-lighter, $supplemental-theme-surface-palette-darker);
+ fill: if(
+ $is-material-dark,
+ $material-theme-neutral-palette-lighter,
+ $material-theme-neutral-palette-darker
+ );
}
text.processor-bundle {
- fill: $supplemental-theme-surface-palette-default;
+ fill: $material-theme-neutral-palette-default;
}
rect.processor-icon-container {
- fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
+ fill: if(
+ $is-material-dark,
+ $material-theme-neutral-palette-darker,
+ $material-theme-neutral-palette-lighter
+ );
}
circle.restricted-background {
- fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
+ fill: if(
+ $is-material-dark,
+ $material-theme-neutral-palette-darker,
+ $material-theme-neutral-palette-lighter
+ );
}
text.restricted {
- fill: $material-theme-warn-palette-darker;
+ fill: if($is-material-dark, $material-theme-error-palette-default, $material-theme-error-palette-darker);
}
/*
Connection
*/
#connection-full-drop-shadow feFlood {
- flood-color: $material-theme-warn-palette-darker;
+ flood-color: if(
+ $is-material-dark,
+ $material-theme-error-palette-default,
+ $material-theme-error-palette-darker
+ );
}
g.connection {
- font-family: mat.get-theme-typography($material-theme, body-1, font-family);
+ font-family: mat.get-theme-typography($material-theme, body-medium, font-family);
}
g.connection rect.body {
- fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
+ fill: if(
+ $is-material-dark,
+ $material-theme-neutral-palette-darker,
+ $material-theme-neutral-palette-lighter
+ );
}
g.connection rect.body.unauthorized {
- fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
+ fill: if(
+ $is-material-dark,
+ $material-theme-neutral-palette-darker,
+ $material-theme-neutral-palette-lighter
+ );
}
g.connection rect.border.unauthorized {
- stroke: $material-theme-warn-palette-darker;
+ stroke: if($is-material-dark, $material-theme-error-palette-default, $material-theme-error-palette-darker);
}
g.connection rect.border.full {
- stroke: $material-theme-accent-palette-default;
+ stroke: $material-theme-tertiary-palette-default;
}
g.connection.selected rect.border {
- stroke: $supplemental-theme-caution-palette-darker;
+ stroke: $caution-darker;
}
path.connector {
@@ -329,23 +370,23 @@
g.connection path.connection-path {
fill: none;
- stroke: $surface-contrast;
+ stroke: $neutral-contrast;
filter: drop-shadow(
0 3px 6px
if(
- $is-dark,
- $supplemental-theme-surface-palette-darker,
- $supplemental-theme-surface-palette-lighter
+ $is-material-dark,
+ $material-theme-neutral-palette-darker,
+ $material-theme-neutral-palette-lighter
)
);
}
g.connection path.connection-path.full {
- stroke: $material-theme-warn-palette-darker;
+ stroke: if($is-material-dark, $material-theme-error-palette-default, $material-theme-error-palette-darker);
}
g.connection path.connection-path.unauthorized {
- stroke: $material-theme-warn-palette-darker;
+ stroke: if($is-material-dark, $material-theme-error-palette-default, $material-theme-error-palette-darker);
}
g.connection rect.backpressure-tick {
@@ -354,7 +395,11 @@
g.connection rect.backpressure-tick.data-size-prediction.prediction-down,
g.connection rect.backpressure-tick.object-prediction.prediction-down {
- fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
+ fill: if(
+ $is-material-dark,
+ $material-theme-neutral-palette-darker,
+ $material-theme-neutral-palette-lighter
+ );
}
g.connection rect.backpressure-tick.data-size-prediction,
@@ -370,7 +415,7 @@
}
g.connection rect.backpressure-tick.not-configured {
- fill: $supplemental-theme-surface-palette-default;
+ fill: $material-theme-neutral-palette-default;
}
g.connection rect.backpressure-object,
@@ -384,26 +429,26 @@
}
g.connection rect.backpressure-percent {
- fill: $supplemental-theme-success-palette-lighter;
+ fill: $success-lighter;
}
g.connection rect.backpressure-percent.warning {
- fill: $supplemental-theme-caution-palette-darker;
+ fill: $caution-darker;
}
g.connection rect.backpressure-percent.error {
- fill: $material-theme-warn-palette-darker;
+ fill: if($is-material-dark, $material-theme-error-palette-default, $material-theme-error-palette-darker);
}
/* ghost connection */
g.connection.ghost path.connection-path,
g.connection.ghost rect.connection-label {
- stroke: $supplemental-theme-surface-palette-default;
+ stroke: $material-theme-neutral-palette-default;
}
g.connection path.connection-selection-path {
- stroke: $supplemental-theme-caution-palette-darker;
+ stroke: $caution-darker;
fill: none;
}
@@ -417,8 +462,8 @@
}
g.connection rect.midpoint {
- stroke: $supplemental-theme-caution-palette-darker;
- fill: $supplemental-theme-caution-palette-darker;
+ stroke: $caution-darker;
+ fill: $caution-darker;
}
g.connection rect.endpoint {
@@ -429,39 +474,51 @@
/* labels */
g.label path.resizable-triangle {
- fill: rgba($supplemental-theme-surface-palette-lighter-contrast, 0.2);
- stroke: rgba($supplemental-theme-surface-palette-lighter-contrast, 0.2);
+ fill: rgba($material-theme-neutral-palette-darker, 0.2);
+ stroke: rgba($material-theme-neutral-palette-darker, 0.2);
}
/* funnels */
text.funnel-icon {
- fill: $material-theme-accent-palette-default;
+ fill: $material-theme-tertiary-palette-default;
}
/* ports */
text.port-name {
- @extend .surface-contrast;
+ @extend .neutral-contrast;
}
text.port-icon {
- fill: $material-theme-accent-palette-default;
+ fill: $material-theme-tertiary-palette-default;
}
/* process groups */
rect.process-group-stats-in-out {
- fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
+ fill: if(
+ $is-material-dark,
+ $material-theme-neutral-palette-darker,
+ $material-theme-neutral-palette-lighter
+ );
}
rect.process-group-stats-border {
- fill: if($is-dark, $material-theme-primary-palette-default, $material-theme-primary-palette-darker);
+ fill: if(
+ $is-material-dark,
+ $material-theme-primary-palette-default,
+ $material-theme-primary-palette-lighter
+ );
}
rect.process-group-banner,
rect.remote-process-group-banner {
- fill: if($is-dark, $material-theme-primary-palette-default, $material-theme-primary-palette-darker);
+ fill: if(
+ $is-material-dark,
+ $material-theme-primary-palette-default,
+ $material-theme-primary-palette-lighter
+ );
}
text.version-control,
@@ -473,12 +530,12 @@
text.stopped,
text.process-group-running,
text.process-group-stopped {
- text-shadow: if($is-dark, 0 0 4px rgba(0, 0, 0, 1), 0 0 4px rgba(255, 255, 255, 1));
+ text-shadow: if($is-material-dark, 0 0 4px rgba(0, 0, 0, 1), 0 0 4px rgba(255, 255, 255, 1));
}
text.process-group-contents-count {
- fill: $material-theme-accent-palette-default;
- font-family: mat.get-theme-typography($material-theme, body-1, font-family);
+ fill: $material-theme-tertiary-palette-default;
+ font-family: mat.get-theme-typography($material-theme, body-medium, font-family);
}
g.process-group.drop rect.border {
@@ -492,19 +549,35 @@
}
rect.remote-process-group-received-stats {
- fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
+ fill: if(
+ $is-material-dark,
+ $material-theme-neutral-palette-darker,
+ $material-theme-neutral-palette-lighter
+ );
}
text.remote-process-group-uri {
- fill: if($is-dark, $material-theme-primary-palette-lighter, $material-theme-primary-palette-default);
+ fill: if(
+ $is-material-dark,
+ $material-theme-primary-palette-lighter,
+ $material-theme-primary-palette-darker
+ );
}
text.remote-process-group-transmission-secure {
- fill: if($is-dark, $material-theme-primary-palette-lighter, $material-theme-primary-palette-default);
+ fill: if(
+ $is-material-dark,
+ $material-theme-primary-palette-lighter,
+ $material-theme-primary-palette-darker
+ );
}
text.remote-process-group-last-refresh {
- fill: if($is-dark, $material-theme-primary-palette-lighter, $material-theme-primary-palette-default);
+ fill: if(
+ $is-material-dark,
+ $material-theme-primary-palette-lighter,
+ $material-theme-primary-palette-darker
+ );
}
}
}
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.ts b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.ts
index 35169c1e7516a..be36d8f465e5a 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.ts
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/canvas.component.ts
@@ -355,13 +355,13 @@ export class Canvas implements OnInit, OnDestroy {
.attr('orient', 'auto')
.attr('class', (d: string) => {
if (d === 'ghost') {
- return 'ghost surface-color';
+ return 'ghost neutral-color';
} else if (d === 'unauthorized') {
- return 'unauthorized warn-color-darker';
+ return 'unauthorized error-color-darker';
} else if (d === 'full') {
- return 'full warn-color-darker';
+ return 'full error-color-darker';
} else {
- return 'surface-contrast';
+ return 'neutral-contrast';
}
})
.append('path')
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/_change-color-dialog.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/_change-color-dialog.component-theme.scss
index d03df40b15a3e..b73709f8a16ce 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/_change-color-dialog.component-theme.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/_change-color-dialog.component-theme.scss
@@ -18,58 +18,42 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@mixin generate-theme($supplemental-theme) {
- // Get the color config from the theme.
- $supplemental-theme-color-config: mat.m2-get-color-config($supplemental-theme);
-
- $supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
-
- $is-dark: map-get($supplemental-theme-color-config, is-dark);
- $supplemental-theme-surface-palette-lighter: mat.m2-get-color-from-palette(
- $supplemental-theme-surface-palette,
- lighter
+@mixin generate-theme($material-theme, $config) {
+ $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
+ $material-theme-neutral-palette-darker: mat.get-theme-color(
+ $material-theme,
+ neutral,
+ map.get(map.get($config, neutral), darker)
);
- $supplemental-theme-surface-palette-darker: mat.m2-get-color-from-palette(
- $supplemental-theme-surface-palette,
- darker
- );
-
- $supplemental-theme-surface-palette-darker-contrast: mat.m2-get-color-from-palette(
- $supplemental-theme-surface-palette,
- darker-contrast
- );
- $supplemental-theme-surface-palette-lighter-contrast: mat.m2-get-color-from-palette(
- $supplemental-theme-surface-palette,
- lighter-contrast
- );
-
- $alternate-surface: if(
- $is-dark,
- rgba($supplemental-theme-surface-palette-darker-contrast, 0.28),
- rgba($supplemental-theme-surface-palette-lighter-contrast, 0.2)
+ $material-theme-neutral-palette-lighter: mat.get-theme-color(
+ $material-theme,
+ neutral,
+ map.get(map.get($config, neutral), lighter)
);
+ $neutral-contrast: map.get(map.get($config, neutral), contrast);
+ $alternate-surface: mat.get-theme-color($material-theme, neutral-variant, map.get($config, neutral-variant));
.preview {
.processor {
background-color: if(
- $is-dark,
- $supplemental-theme-surface-palette-darker,
- $supplemental-theme-surface-palette-lighter
+ $is-material-dark,
+ $material-theme-neutral-palette-darker,
+ $material-theme-neutral-palette-lighter
);
}
.odd {
background-color: rgba(
- if($is-dark, $supplemental-theme-surface-palette-lighter, $supplemental-theme-surface-palette-darker),
+ if($is-material-dark, $material-theme-neutral-palette-lighter, $material-theme-neutral-palette-darker),
0.025
);
}
.even {
background-color: if(
- $is-dark,
- $supplemental-theme-surface-palette-darker,
- $supplemental-theme-surface-palette-lighter
+ $is-material-dark,
+ $material-theme-neutral-palette-darker,
+ $material-theme-neutral-palette-lighter
);
}
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/change-color-dialog.component.html b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/change-color-dialog.component.html
index b51e538c9fdc3..511f2db363207 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/change-color-dialog.component.html
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/change-color-dialog.component.html
@@ -23,7 +23,7 @@
Change Color
Color
-
Use default color
@@ -34,7 +34,7 @@