This is an automated email from the ASF dual-hosted git repository.
mcgilman 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 12c3280917 [NIFI-13839] ensure contrast ratio for success, warn, error
colors (#9343)
12c3280917 is described below
commit 12c328091749c1bec2d2be41f48d68b6b9c3967c
Author: Scott Aslan <[email protected]>
AuthorDate: Tue Oct 8 15:10:56 2024 -0600
[NIFI-13839] ensure contrast ratio for success, warn, error colors (#9343)
* [NIFI-13839] ensure contrast ratio for success, warn, error colors
* simplify secondary color
* final touches
* update purple theme
This closes #9343
---
.../feature/jolt-transform-json-ui.component.html | 6 +-
.../apps/nifi/src/app/_app.component-theme.scss | 12 +-
.../bulletin-board-list.component.ts | 4 +-
.../feature/_documentation.component-theme.scss | 17 +-
.../flow-designer/service/canvas-utils.service.ts | 6 +-
.../service/manager/connection-manager.service.ts | 10 +-
.../service/manager/port-manager.service.ts | 6 +-
.../manager/process-group-manager.service.ts | 18 +-
.../service/manager/processor-manager.service.ts | 4 +-
.../remote-process-group-manager.service.ts | 2 +-
.../ui/canvas/_canvas.component-theme.scss | 142 +++----
.../flow-designer/ui/canvas/canvas.component.ts | 4 +-
.../flow-analysis-drawer.component.html | 6 +-
.../_violation-details-dialog.component-theme.scss | 28 +-
.../flow-status/_flow-status.component-theme.scss | 71 ++--
.../header/flow-status/flow-status.component.html | 12 +-
.../header/flow-status/flow-status.component.ts | 2 +-
.../_new-canvas-item.component-theme.scss | 28 +-
.../ui/common/breadcrumbs/breadcrumbs.component.ts | 6 +-
.../edit-parameter-context.component.html | 2 +-
.../feature/_provenance.component-theme.scss | 11 +-
.../lineage/_lineage.component-theme.scss | 32 +-
.../lineage/lineage.component.ts | 2 +-
.../flow-analysis-rule-table.component.ts | 2 +-
...ch-parameter-provider-parameters.component.html | 2 +-
.../reporting-task-table.component.ts | 4 +-
.../port-cluster-table.component.ts | 6 +-
.../processor-cluster-table.component.ts | 6 +-
...remote-process-group-cluster-table.component.ts | 2 +-
.../port-status-table.component.ts | 6 +-
.../process-group-status-table.component.ts | 6 +-
.../processor-status-table.component.ts | 6 +-
.../remote-process-group-status-table.component.ts | 2 +-
.../_context-menu.component-theme.scss | 1 -
.../controller-service-references.component.ts | 6 +-
.../controller-service-table.component.ts | 4 +-
.../disable-controller-service.component.html | 2 +-
.../enable-controller-service.component.html | 2 +-
.../navigation/_navigation.component-theme.scss | 19 +-
.../parameter-references.component.ts | 6 +-
.../property-verification.component.html | 4 +-
.../_status-history.component-theme.scss | 1 -
.../_property-hint-tip.component-theme.scss | 17 +-
.../libs/shared/src/assets/styles/_app.scss | 140 ++-----
.../src/assets/styles/_codemirror-theme.scss | 39 +-
.../shared/src/assets/styles/_listing-table.scss | 28 +-
.../shared/src/assets/styles/_prism-theme.scss | 19 +-
.../libs/shared/src/assets/themes/material.scss | 155 +++++---
.../libs/shared/src/assets/themes/purple.scss | 436 ++++++++-------------
.../components/resizable/_resizeable-theme.scss | 1 -
50 files changed, 493 insertions(+), 860 deletions(-)
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/feature/jolt-transform-json-ui.component.html
b/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/feature/jolt-transform-json-ui.component.html
index c4692c842e..c041601544 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/feature/jolt-transform-json-ui.component.html
+++
b/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/pages/jolt-transform-json-ui/feature/jolt-transform-json-ui.component.html
@@ -110,7 +110,7 @@
} @else {
@if
(joltState.validate().validationResponse?.valid) {
<i
- class="fa fa-check
success-color mr-2"
+ class="fa fa-check
success-color-default mr-2"
nifiTooltip
[tooltipComponentType]="TextTip"
tooltipInputData="The
specification is valid."></i
@@ -150,7 +150,7 @@
} @else {
@if
(joltState.properties().savePropertiesResponse) {
<i
- class="fa fa-check
success-color text-shadow mr-2"
+ class="fa fa-check
success-color-default text-shadow mr-2"
nifiTooltip
[tooltipComponentType]="TextTip"
tooltipInputData="Properties
successfully saved!"></i
@@ -307,7 +307,7 @@
} @else {
@if
(joltState.transform().transformationResponse) {
<i
- class="fa fa-check
success-color mr-2"
+ class="fa fa-check
success-color-default mr-2"
nifiTooltip
[tooltipComponentType]="TextTip"
tooltipInputData="The
transform was successful."></i
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/_app.component-theme.scss
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/_app.component-theme.scss
index 54e106247d..16e5df2d7f 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/_app.component-theme.scss
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/_app.component-theme.scss
@@ -19,23 +19,13 @@
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $config) {
- $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true,
false);
$material-theme-secondary-palette-default: mat.get-theme-color(
$material-theme,
secondary,
map.get(map.get($config, secondary), default)
);
- $material-theme-secondary-palette-lighter: mat.get-theme-color(
- $material-theme,
- secondary,
- map.get(map.get($config, secondary), lighter)
- );
.splash {
- background-color: if(
- $is-material-dark,
- $material-theme-secondary-palette-default,
- $material-theme-secondary-palette-lighter
- );
+ background-color: $material-theme-secondary-palette-default;
}
}
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component.ts
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component.ts
index a8bba719eb..beba1f2f06 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component.ts
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component.ts
@@ -144,12 +144,12 @@ export class BulletinBoardList implements AfterViewInit {
getSeverity(severity: string) {
switch (severity.toLowerCase()) {
case 'error':
- return 'bulletin-error error-color-darker';
+ return 'bulletin-error error-color';
case 'warn':
case 'warning':
return 'bulletin-warn caution-color';
default:
- return 'bulletin-normal success-color-darker';
+ return 'bulletin-normal success-color-default';
}
}
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/documentation/feature/_documentation.component-theme.scss
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/documentation/feature/_documentation.component-theme.scss
index be383da153..39e3359353 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/documentation/feature/_documentation.component-theme.scss
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/documentation/feature/_documentation.component-theme.scss
@@ -19,24 +19,13 @@
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $config) {
- $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true,
false);
-
- $material-theme-tertiary-palette-darker: mat.get-theme-color(
+ $material-theme-tertiary-palette-variant: mat.get-theme-color(
$material-theme,
tertiary,
- map.get(map.get($config, tertiary), darker)
- );
- $material-theme-tertiary-palette-lighter: mat.get-theme-color(
- $material-theme,
- tertiary,
- map.get(map.get($config, tertiary), lighter)
+ map.get(map.get($config, tertiary), variant)
);
- $selected-item-color: if(
- $is-material-dark,
- $material-theme-tertiary-palette-darker,
- $material-theme-tertiary-palette-lighter
- );
+ $selected-item-color: $material-theme-tertiary-palette-variant;
.documentation {
h2 {
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 a8738c7c08..ba98f2af3c 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
@@ -1531,7 +1531,7 @@ export class CanvasUtils {
case ComponentType.OutputPort:
return `active-thread-count tertiary-color`;
default:
- return `active-thread-count neutral-contrast`;
+ return `active-thread-count secondary-contrast`;
}
})
.style('display', 'block')
@@ -1563,12 +1563,12 @@ export class CanvasUtils {
case ComponentType.InputPort:
case ComponentType.OutputPort:
if (terminatedThreads > 0) {
- return `active-thread-count-icon
error-color-darker`;
+ return `active-thread-count-icon error-color`;
} else {
return `active-thread-count-icon
primary-color`;
}
default:
- return `active-thread-count-icon neutral-contrast`;
+ return `active-thread-count-icon
secondary-contrast`;
}
})
.style('display', 'block')
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 f46db9aca6..f6a4a33bce 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
@@ -991,14 +991,14 @@ export class ConnectionManager {
return '\uf04d';
}
})
- .classed('running success-color-lighter',
function () {
+ .classed('running success-color-default',
function () {
if (d.component.source.exists === false) {
return false;
} else {
return d.component.source.running;
}
})
- .classed('stopped error-color-lighter',
function () {
+ .classed('stopped error-color-variant',
function () {
if (d.component.source.exists === false) {
return false;
} else {
@@ -1106,14 +1106,14 @@ export class ConnectionManager {
return '\uf04d';
}
})
- .classed('running success-color-lighter',
function () {
+ .classed('running success-color-default',
function () {
if (d.component.destination.exists ===
false) {
return false;
} else {
return d.component.destination.running;
}
})
- .classed('stopped error-color-lighter',
function () {
+ .classed('stopped error-color-variant',
function () {
if (d.component.destination.exists ===
false) {
return false;
} else {
@@ -1455,7 +1455,7 @@ export class ConnectionManager {
return true;
}
})
- .classed('load-balance-icon-active fa-rotate-90
success-color', function (d: any) {
+ .classed('load-balance-icon-active fa-rotate-90
success-color-variant', function (d: any) {
return d.permissions.canRead &&
d.component.loadBalanceStatus === 'LOAD_BALANCE_ACTIVE';
})
.classed('primary-color', function (d: any) {
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 3195e6e39a..a256e25b20 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
@@ -380,9 +380,9 @@ export class PortManager {
if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
clazz = 'invalid caution-color';
} else if (d.status.aggregateSnapshot.runStatus === 'Running')
{
- clazz = 'running success-color-lighter';
+ clazz = 'running success-color-default';
} else if (d.status.aggregateSnapshot.runStatus === 'Stopped')
{
- clazz = 'stopped error-color-lighter';
+ clazz = 'stopped error-color-variant';
}
return `run-status-icon ${clazz}`;
@@ -436,7 +436,7 @@ export class PortManager {
return '\ue80a';
}
})
- .classed('transmitting success-color', function (d: any) {
+ .classed('transmitting success-color-variant', function (d: any) {
return d.status.transmitting === true;
})
.classed('not-transmitting neutral-color', function (d: any) {
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 a22f190f39..cbcce92806 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
@@ -735,7 +735,7 @@ export class ProcessGroupManager {
// update transmitting
const transmitting = details
.select('text.process-group-transmitting')
- .classed('success-color', function (d: any) {
+ .classed('success-color-variant', function (d: any) {
return d.permissions.canRead &&
d.activeRemotePortCount > 0;
})
.classed('zero', function (d: any) {
@@ -791,7 +791,7 @@ export class ProcessGroupManager {
// update running
const running = details
.select('text.process-group-running')
- .classed('success-color-lighter', function (d: any) {
+ .classed('success-color-default', function (d: any) {
return d.permissions.canRead &&
d.component.runningCount > 0;
})
.classed('zero', function (d: any) {
@@ -823,7 +823,7 @@ export class ProcessGroupManager {
// update stopped
const stopped = details
.select('text.process-group-stopped')
- .classed('error-color-lighter', function (d: any) {
+ .classed('error-color-variant', function (d: any) {
return d.permissions.canRead &&
d.component.stoppedCount > 0;
})
.classed('zero', function (d: any) {
@@ -919,7 +919,7 @@ export class ProcessGroupManager {
// up to date current
const upToDate = details
.select('text.process-group-up-to-date')
- .classed('success-color', function (d: any) {
+ .classed('success-color-variant', function (d: any) {
return d.permissions.canRead &&
d.component.upToDateCount > 0;
})
.classed('zero', function (d: any) {
@@ -975,7 +975,7 @@ export class ProcessGroupManager {
// update stale
const stale = details
.select('text.process-group-stale')
- .classed('error-color-lighter', function (d: any) {
+ .classed('error-color-variant', function (d: any) {
return d.permissions.canRead && d.component.staleCount
> 0;
})
.classed('zero', function (d: any) {
@@ -1007,7 +1007,7 @@ export class ProcessGroupManager {
// update locally modified and stale
const locallyModifiedAndStale = details
.select('text.process-group-locally-modified-and-stale')
- .classed('error-color-lighter', function (d: any) {
+ .classed('error-color-variant', function (d: any) {
return d.permissions.canRead &&
d.component.locallyModifiedAndStaleCount > 0;
})
.classed('zero', function (d: any) {
@@ -1081,14 +1081,14 @@ export class ProcessGroupManager {
if (vciState === 'SYNC_FAILURE') {
return `version-control neutral-color`;
} else if (vciState ===
'LOCALLY_MODIFIED_AND_STALE') {
- return `version-control error-color-lighter`;
+ return `version-control error-color-variant`;
} else if (vciState === 'STALE') {
- return `version-control error-color-lighter`;
+ return `version-control error-color-variant`;
} else if (vciState === 'LOCALLY_MODIFIED') {
return `version-control neutral-color`;
} else {
// up to date
- return `version-control success-color`;
+ return `version-control success-color-default`;
}
} else {
return 'version-control neutral-contrast';
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 e29c446a16..4ca76c5ce6 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
@@ -692,9 +692,9 @@ export class ProcessorManager {
} else if (d.status.aggregateSnapshot.runStatus === 'Invalid')
{
clazz = 'invalid caution-color';
} else if (d.status.aggregateSnapshot.runStatus === 'Running')
{
- clazz = 'running success-color-lighter';
+ clazz = 'running success-color-default';
} else if (d.status.aggregateSnapshot.runStatus === 'Stopped')
{
- clazz = 'stopped error-color-lighter';
+ clazz = 'stopped error-color-variant';
}
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 dc91e50334..fd15621ca0 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
@@ -609,7 +609,7 @@ export class RemoteProcessGroupManager {
.classed('invalid caution-color', function (d: any) {
return self.hasIssues(d);
})
- .classed('transmitting success-color', function (d: any) {
+ .classed('transmitting success-color-variant', function (d: any) {
return !self.hasIssues(d) && d.status.transmissionStatus ===
'Transmitting';
})
.classed('not-transmitting neutral-color', function (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 8427e2d935..11eeabe155 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
@@ -20,20 +20,15 @@
@mixin generate-theme($material-theme, $config) {
$is-material-dark: if(mat.get-theme-type($material-theme) == dark, true,
false);
- $material-theme-secondary-palette-default: mat.get-theme-color(
- $material-theme,
- secondary,
- map.get(map.get($config, secondary), default)
- );
- $material-theme-secondary-palette-darker: mat.get-theme-color(
+ $material-theme-primary-palette-default: mat.get-theme-color(
$material-theme,
- secondary,
- map.get(map.get($config, secondary), darker)
+ primary,
+ map.get(map.get($config, primary), default)
);
- $material-theme-secondary-palette-lighter: mat.get-theme-color(
+ $material-theme-secondary-palette-default: mat.get-theme-color(
$material-theme,
secondary,
- map.get(map.get($config, secondary), lighter)
+ map.get(map.get($config, secondary), default)
);
$material-theme-tertiary-palette-default: mat.get-theme-color(
$material-theme,
@@ -45,15 +40,10 @@
error,
map.get(map.get($config, error), default)
);
- $material-theme-error-palette-darker: mat.get-theme-color(
- $material-theme,
- error,
- map.get(map.get($config, error), darker)
- );
$material-theme-neutral-palette-default: mat.get-theme-color(
$material-theme,
neutral,
- if($is-material-dark, 40, 35)
+ map.get(map.get($config, neutral), default)
);
$material-theme-neutral-palette-darker: mat.get-theme-color(
$material-theme,
@@ -65,12 +55,14 @@
neutral,
map.get(map.get($config, neutral), lighter)
);
+ $primary-contrast: map.get(map.get($config, primary), contrast);
+ $caution-contrast: map.get(map.get($config, caution), contrast);
+ $error-contrast: map.get(map.get($config, error), contrast);
$neutral-contrast: map.get(map.get($config, neutral), contrast);
$border-color: mat.get-theme-color($material-theme, neutral-variant,
map.get($config, neutral-variant));
- $success-lighter: map.get($config, success-lighter);
+ $success-lighter: map.get(map.get($config, success), lighter);
$success-default: map.get(map.get($config, success), default);
- $caution-default: map.get($config, caution);
- $on-primary: mat.get-theme-color($material-theme, on-primary);
+ $caution: map.get(map.get($config, caution), default);
// Shadows should always be darker. We explicitly set this so the SVG
shadows are correct in both modes.
$drop-shadow-color: black;
@@ -154,11 +146,7 @@
}
g.component rect.border.unauthorized {
- stroke: if(
- $is-material-dark,
- $material-theme-error-palette-default,
- $material-theme-error-palette-darker
- ) !important;
+ stroke: $material-theme-error-palette-default !important;
}
g.component rect.border.ghost {
@@ -174,11 +162,7 @@
}
g.component.selected rect.border {
- stroke: if(
- $is-material-dark,
- $material-theme-secondary-palette-default,
- $material-theme-secondary-palette-darker
- ) !important;
+ stroke: $material-theme-primary-palette-default !important;
}
text.stats-label {
@@ -191,33 +175,35 @@
}
text.stats-info {
- fill: if(
- $is-material-dark,
- $material-theme-secondary-palette-default,
- $material-theme-secondary-palette-darker
- );
+ fill: $material-theme-primary-palette-default;
}
text.bulletin-icon {
- &.error,
- &.warning,
&.info,
&.debug,
&.trace {
- fill: mat.get-theme-color($material-theme, surface);
+ fill: $primary-contrast;
+ }
+ }
+
+ text.bulletin-icon {
+ &.error {
+ fill: $error-contrast;
+ }
+ }
+
+ text.bulletin-icon {
+ &.warning {
+ fill: $caution-contrast;
}
}
rect.bulletin-background {
&.error {
- fill: if(
- $is-material-dark,
- $material-theme-error-palette-default,
- $material-theme-error-palette-darker
- );
+ fill: $material-theme-error-palette-default;
}
&.warning {
- fill: $caution-default;
+ fill: $caution;
}
&.info,
&.debug,
@@ -227,11 +213,7 @@
}
text.component-comments {
- fill: if(
- $is-material-dark,
- $material-theme-secondary-palette-default,
- $material-theme-secondary-palette-darker
- );
+ fill: $material-theme-primary-palette-default;
stroke: $border-color;
}
@@ -246,20 +228,12 @@
rect.component-selection,
rect.drag-selection,
rect.label-drag {
- stroke: if(
- $is-material-dark,
- $material-theme-secondary-palette-lighter,
- $material-theme-secondary-palette-darker
- );
+ stroke: $material-theme-primary-palette-default;
fill: transparent;
}
text.add-connect {
- fill: if(
- $is-material-dark,
- $material-theme-secondary-palette-default,
- $material-theme-secondary-palette-darker
- );
+ fill: $material-theme-primary-palette-default;
}
/*
@@ -286,11 +260,7 @@
}
text.processor-type {
- fill: if(
- $is-material-dark,
- $material-theme-secondary-palette-default,
- $material-theme-secondary-palette-darker
- );
+ fill: $material-theme-primary-palette-default;
}
circle.is-primary-background {
@@ -335,18 +305,14 @@
}
text.restricted {
- fill: if($is-material-dark, $material-theme-error-palette-default,
$material-theme-error-palette-darker);
+ fill: $material-theme-error-palette-default;
}
/*
Connection
*/
#connection-full-drop-shadow feFlood {
- flood-color: if(
- $is-material-dark,
- $material-theme-error-palette-default,
- $material-theme-error-palette-darker
- );
+ flood-color: $material-theme-error-palette-default;
}
g.connection {
@@ -370,7 +336,7 @@
}
g.connection rect.border.unauthorized {
- stroke: if($is-material-dark,
$material-theme-error-palette-default, $material-theme-error-palette-darker);
+ stroke: $material-theme-error-palette-default;
}
g.connection rect.border.full {
@@ -403,11 +369,11 @@
}
g.connection path.connection-path.full {
- stroke: if($is-material-dark,
$material-theme-error-palette-default, $material-theme-error-palette-darker);
+ stroke: $material-theme-error-palette-default;
}
g.connection path.connection-path.unauthorized {
- stroke: if($is-material-dark,
$material-theme-error-palette-default, $material-theme-error-palette-darker);
+ stroke: $material-theme-error-palette-default;
}
g.connection rect.backpressure-tick {
@@ -458,7 +424,7 @@
}
g.connection rect.backpressure-percent.error {
- fill: if($is-material-dark, $material-theme-error-palette-default,
$material-theme-error-palette-darker);
+ fill: $material-theme-error-palette-default;
}
/* ghost connection */
@@ -526,20 +492,12 @@
}
rect.process-group-stats-border {
- fill: if(
- $is-material-dark,
- $material-theme-secondary-palette-default,
- $material-theme-secondary-palette-lighter
- );
+ fill: $border-color;
}
rect.process-group-banner,
rect.remote-process-group-banner {
- fill: if(
- $is-material-dark,
- $material-theme-secondary-palette-default,
- $material-theme-secondary-palette-lighter
- );
+ fill: $material-theme-secondary-palette-default;
}
text.version-control,
@@ -578,27 +536,15 @@
}
text.remote-process-group-uri {
- fill: if(
- $is-material-dark,
- $material-theme-secondary-palette-lighter,
- $material-theme-secondary-palette-darker
- );
+ fill: $material-theme-primary-palette-default;
}
text.remote-process-group-transmission-secure {
- fill: if(
- $is-material-dark,
- $material-theme-secondary-palette-lighter,
- $material-theme-secondary-palette-darker
- );
+ fill: $material-theme-primary-palette-default;
}
text.remote-process-group-last-refresh {
- fill: if(
- $is-material-dark,
- $material-theme-secondary-palette-lighter,
- $material-theme-secondary-palette-darker
- );
+ fill: $material-theme-primary-palette-default;
}
}
}
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 be36d8f465..15d66fa510 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
@@ -357,9 +357,9 @@ export class Canvas implements OnInit, OnDestroy {
if (d === 'ghost') {
return 'ghost neutral-color';
} else if (d === 'unauthorized') {
- return 'unauthorized error-color-darker';
+ return 'unauthorized error-color';
} else if (d === 'full') {
- return 'full error-color-darker';
+ return 'full error-color';
} else {
return 'neutral-contrast';
}
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/flow-analysis-drawer.component.html
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/flow-analysis-drawer.component.html
index 553b483c45..259660457f 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/flow-analysis-drawer.component.html
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/flow-analysis-drawer.component.html
@@ -71,7 +71,7 @@
</mat-menu>
</div>
@if (violationsMap.size > 0 &&
violationsMap.get(rule.id)) {
- <div class="error-color-darker text-sm">
+ <div class="error-color text-sm">
<ng-container
[ngPlural]="violationsMap.get(rule.id).length">
<ng-template ngPluralCase="=1"
>{{
violationsMap.get(rule.id).length }} violation</ng-template
@@ -183,7 +183,7 @@
<ul>
@for (violation of enforcedViolations; track violation.scope) {
<li class="mt-2 pb-2 border-b last-of-type:border-0">
- <div class="error-color-darker">{{
getRuleName(violation.ruleId) }}</div>
+ <div class="error-color">{{ getRuleName(violation.ruleId)
}}</div>
<div class="flex align-center justify-between ml-2">
<div class="flex flex-col items-start">
<div
*ngIf="violation?.subjectPermissionDto?.canRead; else unauthorized">
@@ -212,7 +212,7 @@
<ul>
@for (violation of warningViolations; track violation.scope) {
<li class="mt-2 pb-2 border-b last-of-type:border-0">
- <div class="error-color-darker">{{
getRuleName(violation.ruleId) }}</div>
+ <div class="error-color">{{ getRuleName(violation.ruleId)
}}</div>
<div class="flex align-center justify-between ml-2">
<div class="flex flex-col items-start">
<div
*ngIf="violation?.subjectPermissionDto?.canRead; else unauthorized">
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/violation-details-dialog/_violation-details-dialog.component-theme.scss
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/violation-details-dialog/_violation-details-dialog.component-theme.scss
index 8d60683c13..218dad4ea7 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/violation-details-dialog/_violation-details-dialog.component-theme.scss
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-analysis-drawer/violation-details-dialog/_violation-details-dialog.component-theme.scss
@@ -19,50 +19,26 @@
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $config) {
- $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true,
false);
$material-theme-secondary-palette-default: mat.get-theme-color(
$material-theme,
secondary,
map.get(map.get($config, secondary), default)
);
- $material-theme-secondary-palette-darker: mat.get-theme-color(
- $material-theme,
- secondary,
- map.get(map.get($config, secondary), darker)
- );
- $material-theme-secondary-palette-lighter: mat.get-theme-color(
- $material-theme,
- secondary,
- map.get(map.get($config, secondary), lighter)
- );
$material-theme-error-palette-default: mat.get-theme-color(
$material-theme,
error,
map.get(map.get($config, error), default)
);
- $material-theme-error-palette-darker: mat.get-theme-color(
- $material-theme,
- error,
- map.get(map.get($config, error), darker)
- );
$neutral-contrast: map.get(map.get($config, neutral), contrast);
.pill.enforce {
- background-color: if(
- $is-material-dark,
- $material-theme-error-palette-default,
- $material-theme-error-palette-darker
- );
+ background-color: $material-theme-error-palette-default;
color: $neutral-contrast;
}
.pill.warn {
- background-color: if(
- $is-material-dark,
- $material-theme-secondary-palette-lighter,
- $material-theme-secondary-palette-darker
- );
+ background-color: $material-theme-secondary-palette-default;
color: $neutral-contrast;
}
}
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss
index ca0dc16566..d753fa35ad 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss
@@ -20,31 +20,16 @@
@mixin generate-theme($material-theme, $config) {
$is-material-dark: if(mat.get-theme-type($material-theme) == dark, true,
false);
- $material-theme-secondary-palette-darker: mat.get-theme-color(
- $material-theme,
- secondary,
- map.get(map.get($config, secondary), darker)
- );
- $material-theme-secondary-palette-lighter: mat.get-theme-color(
+ $material-theme-secondary-palette-default: mat.get-theme-color(
$material-theme,
secondary,
- map.get(map.get($config, secondary), lighter)
+ map.get(map.get($config, secondary), default)
);
$material-theme-error-palette-default: mat.get-theme-color(
$material-theme,
error,
map.get(map.get($config, error), default)
);
- $material-theme-error-palette-lighter: mat.get-theme-color(
- $material-theme,
- error,
- map.get(map.get($config, error), lighter)
- );
- $material-theme-error-palette-darker: mat.get-theme-color(
- $material-theme,
- error,
- map.get(map.get($config, error), darker)
- );
$material-theme-neutral-palette-darker: mat.get-theme-color(
$material-theme,
neutral,
@@ -61,15 +46,17 @@
map.get(map.get($config, neutral), default)
);
- $material-theme-secondary-palette-default: mat.get-theme-color(
+ $material-theme-primary-palette-default: mat.get-theme-color(
$material-theme,
- secondary,
- map.get(map.get($config, secondary), default)
+ primary,
+ map.get(map.get($config, primary), default)
);
- $on-primary: mat.get-theme-color($material-theme, on-primary);
- $success-default: map.get(map.get($config, success), default);
- $caution-default: map.get($config, caution);
+ $primary-contrast: map.get(map.get($config, primary), contrast);
+ $caution-contrast: map.get(map.get($config, caution), contrast);
+ $error-contrast: map.get(map.get($config, error), contrast);
+ $success: map.get(map.get($config, success), default);
+ $caution: map.get(map.get($config, caution), default);
.flow-status {
background-color: if(
@@ -82,53 +69,49 @@
background-color: unset;
.fa {
- color: $material-theme-secondary-palette-default;
+ color: $material-theme-primary-palette-default;
}
}
.controller-bulletins.has-bulletins {
.fa {
- color: mat.get-theme-color($material-theme, surface);
+ color: $primary-contrast;
}
&.error {
- background-color: if(
- $is-material-dark,
- $material-theme-error-palette-default,
- $material-theme-error-palette-darker
- );
+ .fa {
+ color: $error-contrast;
+ }
+
+ background-color: $material-theme-error-palette-default;
}
&.warning {
- background-color: $caution-default;
+ .fa {
+ color: $caution-contrast;
+ }
+
+ background-color: $caution;
}
&.info,
&.debug,
&.trace {
- background-color: $success-default;
+ background-color: $success;
}
}
.flow-analysis-notifications.warn {
- background-color: if(
- $is-material-dark,
- $material-theme-secondary-palette-lighter,
- $material-theme-secondary-palette-darker
- );
+ background-color: $material-theme-secondary-palette-default;
.fa {
- color: mat.get-theme-color($material-theme, surface);
+ color: $primary-contrast;
}
}
.flow-analysis-notifications.enforce {
- background-color: if(
- $is-material-dark,
- $material-theme-error-palette-default,
- $material-theme-error-palette-darker
- );
+ background-color: $material-theme-error-palette-default;
.fa {
- color: mat.get-theme-color($material-theme, surface);
+ color: $primary-contrast;
}
}
}
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.html
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.html
index 245d28e92c..14d6ec2be0 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.html
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.html
@@ -35,7 +35,7 @@
<div class="flex items-center gap-x-2" title="Transmitting Remote
Process Groups">
<div
class="fa fa-bullseye"
-
[class]="getActiveStyle(controllerStatus.activeRemotePortCount,
'success-color')"></div>
+
[class]="getActiveStyle(controllerStatus.activeRemotePortCount,
'success-color-variant')"></div>
<div class="tertiary-color font-medium">
{{ formatValue(controllerStatus.activeRemotePortCount) }}
</div>
@@ -51,7 +51,7 @@
<div class="flex items-center gap-x-2" title="Running Components">
<div
class="fa fa-play"
- [class]="getActiveStyle(controllerStatus.runningCount,
'success-color-lighter')"></div>
+ [class]="getActiveStyle(controllerStatus.runningCount,
'success-color-default')"></div>
<div class="tertiary-color font-medium">
{{ formatValue(controllerStatus.runningCount) }}
</div>
@@ -59,7 +59,7 @@
<div class="flex items-center gap-x-2" title="Stopped Components">
<div
class="fa fa-stop"
- [class]="getActiveStyle(controllerStatus.stoppedCount,
'error-color-lighter')"></div>
+ [class]="getActiveStyle(controllerStatus.stoppedCount,
'error-color-variant')"></div>
<div class="tertiary-color font-medium">
{{ formatValue(controllerStatus.stoppedCount) }}
</div>
@@ -83,7 +83,7 @@
<div class="flex items-center gap-x-2" title="Up to date Versioned
Process Groups">
<div
class="fa fa-check"
- [class]="getActiveStyle(controllerStatus.upToDateCount,
'success-color')"></div>
+ [class]="getActiveStyle(controllerStatus.upToDateCount,
'success-color-default')"></div>
<div class="tertiary-color font-medium">
{{ formatValue(controllerStatus.upToDateCount) }}
</div>
@@ -99,7 +99,7 @@
<div class="flex items-center gap-x-2" title="Stale Versioned
Process Groups">
<div
class="fa fa-arrow-circle-up"
- [class]="getActiveStyle(controllerStatus.staleCount,
'error-color-lighter')"></div>
+ [class]="getActiveStyle(controllerStatus.staleCount,
'error-color-variant')"></div>
<div class="tertiary-color font-medium">
{{ formatValue(controllerStatus.staleCount) }}
</div>
@@ -108,7 +108,7 @@
<div
class="fa fa-exclamation-circle"
[class]="
-
getActiveStyle(controllerStatus.locallyModifiedAndStaleCount,
'error-color-lighter')
+
getActiveStyle(controllerStatus.locallyModifiedAndStaleCount,
'error-color-variant')
"></div>
<div class="tertiary-color font-medium">
{{
formatValue(controllerStatus.locallyModifiedAndStaleCount) }}
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.ts
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.ts
index d7c67bb7a1..83b6233f99 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.ts
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.ts
@@ -109,7 +109,7 @@ export class FlowStatus {
this.clusterSummary?.connectedToCluster === false ||
this.clusterSummary?.connectedNodeCount !=
this.clusterSummary?.totalNodeCount
) {
- return 'error-color-darker';
+ return 'error-color';
}
return 'secondary-color';
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss
index 0a6b31f8a1..c6e38d1752 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss
@@ -19,22 +19,11 @@
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $config) {
- $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true,
false);
$material-theme-secondary-palette-default: mat.get-theme-color(
$material-theme,
secondary,
map.get(map.get($config, secondary), default)
);
- $material-theme-secondary-palette-darker: mat.get-theme-color(
- $material-theme,
- secondary,
- map.get(map.get($config, secondary), darker)
- );
- $material-theme-secondary-palette-lighter: mat.get-theme-color(
- $material-theme,
- secondary,
- map.get(map.get($config, secondary), lighter)
- );
$material-theme-neutral-palette-darker: mat.get-theme-color(
$material-theme,
neutral,
@@ -50,11 +39,7 @@
.new-canvas-item {
.icon {
- color: if(
- $is-material-dark,
- $material-theme-secondary-palette-darker,
- $material-theme-secondary-palette-darker
- );
+ @extend .secondary-contrast;
&.hovering {
@extend .mat-elevation-z2;
@@ -65,12 +50,7 @@
background: repeating-linear-gradient(
90deg,
$grip,
- if(
- $is-material-dark,
- $material-theme-secondary-palette-default,
- $material-theme-secondary-palette-darker
- )
- 4px,
+ $material-theme-secondary-palette-default 4px,
transparent 4px,
transparent 6px
);
@@ -78,8 +58,8 @@
}
&.cdk-drag-dragging {
- color: $material-theme-secondary-palette-lighter;
- mix-blend-mode: difference; // Make sure the dragged icon is
always visible
+ color: $material-theme-secondary-palette-default;
+ mix-blend-mode: hard-light; // Make sure the dragged icon is
always visible
}
}
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/common/breadcrumbs/breadcrumbs.component.ts
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/common/breadcrumbs/breadcrumbs.component.ts
index 97710c23ab..e20d72bcca 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/common/breadcrumbs/breadcrumbs.component.ts
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/flow-designer/ui/common/breadcrumbs/breadcrumbs.component.ts
@@ -79,14 +79,14 @@ export class Breadcrumbs {
if (vciState === 'SYNC_FAILURE') {
return 'sync-failure neutral-color fa fa-question';
} else if (vciState === 'LOCALLY_MODIFIED_AND_STALE') {
- return 'locally-modified-and-stale error-color-lighter fa
fa-exclamation-circle';
+ return 'locally-modified-and-stale error-color-variant fa
fa-exclamation-circle';
} else if (vciState === 'STALE') {
- return 'stale error-color-lighter fa fa-arrow-circle-up';
+ return 'stale error-color-variant fa fa-arrow-circle-up';
} else if (vciState === 'LOCALLY_MODIFIED') {
return 'locally-modified neutral-color fa fa-asterisk';
} else {
// up to date
- return 'up-to-date success-color fa fa-check';
+ return 'up-to-date success-color-default fa fa-check';
}
} else {
return '';
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.html
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.html
index 598f401977..65d254a1be 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.html
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.html
@@ -35,7 +35,7 @@
<div class="fa fa-times error-color"></div>
} @else {
@if (updateStep.complete) {
- <div class="fa fa-check
success-color"></div>
+ <div class="fa fa-check
success-color-default"></div>
} @else {
<div class="fa fa-spin
fa-circle-o-notch primary-color"></div>
}
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss
index 1fe56b7635..0add244987 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss
@@ -25,11 +25,6 @@
secondary,
map.get(map.get($config, secondary), default)
);
- $material-theme-secondary-palette-lighter: mat.get-theme-color(
- $material-theme,
- secondary,
- map.get(map.get($config, secondary), lighter)
- );
$material-theme-tertiary-palette-default: mat.get-theme-color(
$material-theme,
tertiary,
@@ -56,11 +51,7 @@
}
circle.event-circle {
- fill: if(
- $is-material-dark,
- $material-theme-secondary-palette-default,
- $material-theme-secondary-palette-lighter
- );
+ fill: $material-theme-secondary-palette-default;
stroke: $neutral-contrast;
}
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/_lineage.component-theme.scss
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/_lineage.component-theme.scss
index ab534ed62e..7bd752dd85 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/_lineage.component-theme.scss
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/_lineage.component-theme.scss
@@ -20,15 +20,10 @@
@mixin generate-theme($material-theme, $config) {
$is-material-dark: if(mat.get-theme-type($material-theme) == dark, true,
false);
- $material-theme-secondary-palette-darker: mat.get-theme-color(
+ $material-theme-secondary-palette-default: mat.get-theme-color(
$material-theme,
secondary,
- map.get(map.get($config, secondary), darker)
- );
- $material-theme-secondary-palette-lighter: mat.get-theme-color(
- $material-theme,
- secondary,
- map.get(map.get($config, secondary), lighter)
+ map.get(map.get($config, secondary), default)
);
$material-theme-tertiary-palette-default: mat.get-theme-color(
$material-theme,
@@ -40,11 +35,6 @@
error,
map.get(map.get($config, error), default)
);
- $material-theme-error-palette-darker: mat.get-theme-color(
- $material-theme,
- error,
- map.get(map.get($config, error), darker)
- );
#lineage {
canvas,
@@ -60,27 +50,15 @@
}
path.link.selected {
- stroke: if(
- $is-material-dark,
- $material-theme-error-palette-default,
- $material-theme-error-palette-darker
- );
+ stroke: $material-theme-error-palette-default;
}
g.event circle.selected {
- fill: if(
- $is-material-dark,
- $material-theme-error-palette-default,
- $material-theme-error-palette-darker
- );
+ fill: $material-theme-error-palette-default;
}
g.event circle.context {
- stroke: if(
- $is-material-dark,
- $material-theme-secondary-palette-darker,
- $material-theme-secondary-palette-lighter
- );
+ stroke: $material-theme-secondary-palette-default;
}
g.flowfile circle.context,
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/lineage.component.ts
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/lineage.component.ts
index 016b748802..85791bbd5e 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/lineage.component.ts
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/lineage.component.ts
@@ -325,7 +325,7 @@ export class LineageComponent implements OnInit {
.attr('orient', 'auto')
.attr('class', function (d) {
if (d.indexOf('SELECTED') >= 0) {
- return 'error-color-darker';
+ return 'error-color';
} else {
return 'neutral-contrast';
}
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rule-table/flow-analysis-rule-table.component.ts
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rule-table/flow-analysis-rule-table.component.ts
index e2414d0f64..4fb3b24493 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rule-table/flow-analysis-rule-table.component.ts
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rule-table/flow-analysis-rule-table.component.ts
@@ -168,7 +168,7 @@ export class FlowAnalysisRuleTable {
if (entity.status.runStatus === 'DISABLED') {
return 'disabled neutral-color icon icon-enable-false';
} else if (entity.status.runStatus === 'ENABLED') {
- return 'enabled success-color fa fa-flash';
+ return 'enabled success-color-variant fa fa-flash';
}
}
return '';
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
index ba3f6866fa..f0cc6b2baa 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
@@ -50,7 +50,7 @@
</div>
<div
*ngIf="updateStep.complete; else
stepInProgress"
- class="fa fa-check complete
success-color"></div>
+ class="fa fa-check complete
success-color-default"></div>
<ng-template #stepInProgress>
<div class="fa fa-spin fa-circle-o-notch
primary-color"></div>
</ng-template>
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.ts
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.ts
index 7c11890414..7663b77238 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.ts
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.ts
@@ -119,9 +119,9 @@ export class ReportingTaskTable {
return 'invalid fa fa-warning caution-color';
} else {
if (entity.status.runStatus === 'STOPPED') {
- return 'fa fa-stop error-color-lighter stopped';
+ return 'fa fa-stop error-color-variant stopped';
} else if (entity.status.runStatus === 'RUNNING') {
- return 'fa fa-play success-color-lighter running';
+ return 'fa fa-play success-color-default running';
} else {
return 'icon icon-enable-false neutral-color disabled';
}
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/port-cluster-table/port-cluster-table.component.ts
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/port-cluster-table/port-cluster-table.component.ts
index 7755aa0465..500a26d476 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/port-cluster-table/port-cluster-table.component.ts
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/port-cluster-table/port-cluster-table.component.ts
@@ -109,11 +109,11 @@ export class PortClusterTable extends
ComponentClusterTable<NodePortStatusSnapsh
getRunStatusIcon(port: NodePortStatusSnapshot): string {
switch (port.statusSnapshot.runStatus.toLowerCase()) {
case 'running':
- return 'running fa fa-play success-color-lighter';
+ return 'running fa fa-play success-color-default';
case 'stopped':
- return 'stopped fa fa-stop error-color-lighter';
+ return 'stopped fa fa-stop error-color-variant';
case 'enabled':
- return 'enabled fa fa-flash success-color';
+ return 'enabled fa fa-flash success-color-variant';
case 'disabled':
return 'disabled icon icon-enable-false neutral-color';
case 'validating':
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/processor-cluster-table/processor-cluster-table.component.ts
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/processor-cluster-table/processor-cluster-table.component.ts
index b85aab4bdc..848e525c64 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/processor-cluster-table/processor-cluster-table.component.ts
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/processor-cluster-table/processor-cluster-table.component.ts
@@ -120,11 +120,11 @@ export class ProcessorClusterTable extends
ComponentClusterTable<NodeProcessorSt
getRunStatusIcon(processor: NodeProcessorStatusSnapshot): string {
switch (processor.statusSnapshot.runStatus.toLowerCase()) {
case 'running':
- return 'running fa fa-play success-color-lighter';
+ return 'running fa fa-play success-color-default';
case 'stopped':
- return 'stopped fa fa-stop error-color-lighter';
+ return 'stopped fa fa-stop error-color-variant';
case 'enabled':
- return 'enabled fa fa-flash success-color';
+ return 'enabled fa fa-flash success-color-variant';
case 'disabled':
return 'disabled icon icon-enable-false neutral-color';
case 'validating':
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/remote-process-group-cluster-table/remote-process-group-cluster-table.component.ts
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/remote-process-group-cluster-table/remote-process-group-cluster-table.component.ts
index c4392e5e20..5806adc85d 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/remote-process-group-cluster-table/remote-process-group-cluster-table.component.ts
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/remote-process-group-cluster-table/remote-process-group-cluster-table.component.ts
@@ -112,7 +112,7 @@ export class RemoteProcessGroupClusterTable extends
ComponentClusterTable<NodeRe
getTransmissionStatusIcon(rpg: NodeRemoteProcessGroupStatusSnapshot):
string {
if (rpg.statusSnapshot.transmissionStatus === 'Transmitting') {
- return 'transmitting success-color fa fa-bullseye';
+ return 'transmitting success-color-variant fa fa-bullseye';
} else {
return 'not-transmitting icon icon-transmit-false neutral-color';
}
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.ts
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.ts
index b418a5819b..442dec0d14 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.ts
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.ts
@@ -110,11 +110,11 @@ export class PortStatusTable extends
ComponentStatusTable<PortStatusSnapshotEnti
getRunStatusIcon(port: PortStatusSnapshotEntity): string {
switch (port.portStatusSnapshot.runStatus.toLowerCase()) {
case 'running':
- return 'running fa fa-play success-color-lighter';
+ return 'running fa fa-play success-color-default';
case 'stopped':
- return 'stopped fa fa-stop error-color-lighter';
+ return 'stopped fa fa-stop error-color-variant';
case 'enabled':
- return 'enabled fa fa-flash success-color';
+ return 'enabled fa fa-flash success-color-variant';
case 'disabled':
return 'disabled icon icon-enable-false neutral-color';
case 'validating':
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/process-group-status-listing/process-group-status-table/process-group-status-table.component.ts
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/process-group-status-listing/process-group-status-table/process-group-status-table.component.ts
index 3029abd06a..5c995ea667 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/process-group-status-listing/process-group-status-table/process-group-status-table.component.ts
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/process-group-status-listing/process-group-status-table/process-group-status-table.component.ts
@@ -108,7 +108,7 @@ export class ProcessGroupStatusTable extends
ComponentStatusTable<ProcessGroupSt
private versionedFlowStateMap: { [key: string]: { classes: string; label:
string } } = {
STALE: {
- classes: 'stale fa fa-arrow-circle-up error-color-lighter',
+ classes: 'stale fa fa-arrow-circle-up error-color-variant',
label: 'Stale'
},
LOCALLY_MODIFIED: {
@@ -116,11 +116,11 @@ export class ProcessGroupStatusTable extends
ComponentStatusTable<ProcessGroupSt
label: 'Locally modified'
},
UP_TO_DATE: {
- classes: 'up-to-date fa fa-check success-color',
+ classes: 'up-to-date fa fa-check success-color-default',
label: 'Up to date'
},
LOCALLY_MODIFIED_AND_STALE: {
- classes: 'locally-modified-and-stale fa fa-exclamation-circle
error-color-lighter',
+ classes: 'locally-modified-and-stale fa fa-exclamation-circle
error-color-variant',
label: 'Locally modified and stale'
},
SYNC_FAILURE: {
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.ts
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.ts
index 1c8e0f92c1..054f098878 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.ts
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.ts
@@ -115,11 +115,11 @@ export class ProcessorStatusTable extends
ComponentStatusTable<ProcessorStatusSn
getRunStatusIcon(processor: ProcessorStatusSnapshotEntity): string {
switch (processor.processorStatusSnapshot.runStatus.toLowerCase()) {
case 'running':
- return 'running fa fa-play success-color-lighter';
+ return 'running fa fa-play success-color-default';
case 'stopped':
- return 'stopped fa fa-stop error-color-lighter';
+ return 'stopped fa fa-stop error-color-variant';
case 'enabled':
- return 'enabled fa fa-flash success-color';
+ return 'enabled fa fa-flash success-color-variant';
case 'disabled':
return 'disabled icon icon-enable-false neutral-color';
case 'validating':
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.ts
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.ts
index abc43f5b43..8808caba1c 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.ts
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.ts
@@ -113,7 +113,7 @@ export class RemoteProcessGroupStatusTable extends
ComponentStatusTable<RemotePr
getTransmissionStatusIcon(rpg: RemoteProcessGroupStatusSnapshotEntity):
string {
if (rpg.remoteProcessGroupStatusSnapshot.transmissionStatus ===
'Transmitting') {
- return 'transmitting success-color fa fa-bullseye';
+ return 'transmitting success-color-variant fa fa-bullseye';
} else {
return 'not-transmitting icon icon-transmit-false neutral-color';
}
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
index b1d63045fc..97519fa918 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
@@ -19,7 +19,6 @@
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $config) {
- $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true,
false);
$border-color: mat.get-theme-color($material-theme, neutral-variant,
map.get($config, neutral-variant));
div.context-menu {
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/controller-service/controller-service-references/controller-service-references.component.ts
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/controller-service/controller-service-references/controller-service-references.component.ts
index 92691fa11c..eacb8d5d0f 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/controller-service/controller-service-references/controller-service-references.component.ts
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/controller-service/controller-service-references/controller-service-references.component.ts
@@ -84,9 +84,9 @@ export class ControllerServiceReferences {
getNonServiceStateIcon(reference: ControllerServiceReferencingComponent):
string {
if (reference.state == 'STOPPED') {
- return 'stopped fa fa-stop error-color-lighter';
+ return 'stopped fa fa-stop error-color-variant';
} else if (reference.state == 'RUNNING') {
- return 'running fa fa-play success-color-lighter';
+ return 'running fa fa-play success-color-default';
} else {
return 'disabled icon icon-enable-false neutral-color';
}
@@ -94,7 +94,7 @@ export class ControllerServiceReferences {
getServiceStateIcon(reference: ControllerServiceReferencingComponent):
string {
if (reference.state == 'ENABLED') {
- return 'enabled fa fa-flash success-color';
+ return 'enabled fa fa-flash success-color-variant';
} else {
return 'disabled icon icon-enable-false neutral-color';
}
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.ts
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.ts
index 182ce4dbd8..c7c815d1f9 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.ts
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.ts
@@ -152,9 +152,9 @@ export class ControllerServiceTable {
} else if (entity.status.runStatus === 'DISABLING') {
return 'disabled icon icon-enable-false neutral-color';
} else if (entity.status.runStatus === 'ENABLED') {
- return 'enabled fa fa-flash success-color';
+ return 'enabled fa fa-flash success-color-variant';
} else if (entity.status.runStatus === 'ENABLING') {
- return 'enabled fa fa-flash success-color';
+ return 'enabled fa fa-flash success-color-variant';
}
}
return '';
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/controller-service/disable-controller-service/disable-controller-service.component.html
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/controller-service/disable-controller-service/disable-controller-service.component.html
index cfb9e265ae..5061e35b3d 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/controller-service/disable-controller-service/disable-controller-service.component.html
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/controller-service/disable-controller-service/disable-controller-service.component.html
@@ -181,7 +181,7 @@
<div class="fa fa-spin fa-circle-o-notch primary-color"></div>
</ng-template>
<ng-template #stepComplete>
- <div class="complete fa fa-check success-color"></div>
+ <div class="complete fa fa-check success-color-default"></div>
</ng-template>
<ng-template #stepError>
<div class="fa fa-times error-color"></div>
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/controller-service/enable-controller-service/enable-controller-service.component.html
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/controller-service/enable-controller-service/enable-controller-service.component.html
index 75a70a62c6..03914e28fc 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/controller-service/enable-controller-service/enable-controller-service.component.html
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/controller-service/enable-controller-service/enable-controller-service.component.html
@@ -194,7 +194,7 @@
<div class="fa fa-spin fa-circle-o-notch primary-color"></div>
</ng-template>
<ng-template #stepComplete>
- <div class="complete fa fa-check success-color"></div>
+ <div class="complete fa fa-check success-color-default"></div>
</ng-template>
<ng-template #stepError>
<div class="fa fa-times error-color"></div>
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
index df2429b312..07c3567b03 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
@@ -19,37 +19,22 @@
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $config) {
- $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true,
false);
$material-theme-secondary-palette-default: mat.get-theme-color(
$material-theme,
secondary,
map.get(map.get($config, secondary), default)
);
- $material-theme-secondary-palette-darker: mat.get-theme-color(
- $material-theme,
- secondary,
- map.get(map.get($config, secondary), darker)
- );
- $material-theme-secondary-palette-lighter: mat.get-theme-color(
- $material-theme,
- secondary,
- map.get(map.get($config, secondary), lighter)
- );
$secondary-contrast: map.get(map.get($config, secondary), contrast);
.nifi-navigation {
- background-color: if(
- $is-material-dark,
- $material-theme-secondary-palette-default,
- $material-theme-secondary-palette-lighter
- );
+ background-color: $material-theme-secondary-palette-default;
.global-menu-icon.global-menu {
@extend .secondary-contrast;
}
.global-menu-icon.global-menu:disabled {
- @extend .neutral-color;
+ @extend .secondary-contrast;
}
.current-user {
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/parameter-references/parameter-references.component.ts
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/parameter-references/parameter-references.component.ts
index fdf06a7c9b..2963ed0816 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/parameter-references/parameter-references.component.ts
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/parameter-references/parameter-references.component.ts
@@ -109,9 +109,9 @@ export class ParameterReferences {
getNonServiceStateIcon(reference: AffectedComponent): string {
if (reference.state == 'STOPPED') {
- return 'stopped fa fa-stop error-color-lighter';
+ return 'stopped fa fa-stop error-color-variant';
} else if (reference.state == 'RUNNING') {
- return 'running fa fa-play success-color-lighter';
+ return 'running fa fa-play success-color-default';
} else {
return 'disabled icon icon-enable-false neutral-color';
}
@@ -119,7 +119,7 @@ export class ParameterReferences {
getServiceStateIcon(reference: AffectedComponent): string {
if (reference.state == 'ENABLED') {
- return 'enabled fa fa-flash success-color';
+ return 'enabled fa fa-flash success-color-variant';
} else {
return 'disabled icon icon-enable-false neutral-color';
}
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/property-verification/property-verification.component.html
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/property-verification/property-verification.component.html
index 1eb865fa6d..2e1d6f94ab 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/property-verification/property-verification.component.html
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/property-verification/property-verification.component.html
@@ -41,13 +41,13 @@
<div class="flex gap-x-1">
@switch (result.outcome) {
@case (Outcome.SUCCESSFUL) {
- <div class="fa fa-check success-color
text-xl"></div>
+ <div class="fa fa-check
success-color-default text-xl"></div>
}
@case (Outcome.FAILED) {
<div class="fa fa-times error-color
text-xl"></div>
}
@case (Outcome.SKIPPED) {
- <div class="fa fa-exclamation
error-color-lighter text-xl"></div>
+ <div class="fa fa-exclamation error-color
text-xl"></div>
}
}
<div class="flex flex-col">
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss
index cda7bd39ea..18030cc1b1 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss
@@ -19,7 +19,6 @@
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $config) {
- $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true,
false);
$border-color: mat.get-theme-color($material-theme, neutral-variant,
map.get($config, neutral-variant));
#status-history-chart-container,
diff --git
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/tooltips/property-hint-tip/_property-hint-tip.component-theme.scss
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/tooltips/property-hint-tip/_property-hint-tip.component-theme.scss
index d4b85fc012..c31c391984 100644
---
a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/tooltips/property-hint-tip/_property-hint-tip.component-theme.scss
+++
b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/tooltips/property-hint-tip/_property-hint-tip.component-theme.scss
@@ -20,15 +20,10 @@
@mixin generate-theme($material-theme, $config) {
$is-material-dark: if(mat.get-theme-type($material-theme) == dark, true,
false);
- $material-theme-secondary-palette-default: mat.get-theme-color(
+ $material-theme-primary-palette-default: mat.get-theme-color(
$material-theme,
- secondary,
- map.get(map.get($config, secondary), default)
- );
- $material-theme-secondary-palette-lighter: mat.get-theme-color(
- $material-theme,
- secondary,
- map.get(map.get($config, secondary), lighter)
+ primary,
+ map.get(map.get($config, primary), default)
);
$material-theme-neutral-palette-darker: mat.get-theme-color(
$material-theme,
@@ -43,10 +38,6 @@
.hint-pattern {
color: if($is-material-dark, $material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter);
- background-color: if(
- $is-material-dark,
- $material-theme-secondary-palette-lighter,
- $material-theme-secondary-palette-default
- );
+ background-color: $material-theme-primary-palette-default;
}
}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_app.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_app.scss
index fb3ccf3522..67242ec1fc 100644
--- a/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_app.scss
+++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_app.scss
@@ -38,6 +38,7 @@
}
.tooltip {
+ max-height: 70vh;
max-width: 500px;
padding: 10px;
border-radius: 2px;
@@ -403,60 +404,30 @@
primary,
map.get(map.get($config, primary), default)
);
- $material-theme-primary-palette-darker: mat.get-theme-color(
- $material-theme,
- primary,
- map.get(map.get($config, primary), darker)
- );
- $material-theme-primary-palette-lighter: mat.get-theme-color(
- $material-theme,
- primary,
- map.get(map.get($config, primary), lighter)
- );
$material-theme-secondary-palette-default: mat.get-theme-color(
$material-theme,
secondary,
map.get(map.get($config, secondary), default)
);
- $material-theme-secondary-palette-darker: mat.get-theme-color(
- $material-theme,
- secondary,
- map.get(map.get($config, secondary), darker)
- );
- $material-theme-secondary-palette-lighter: mat.get-theme-color(
- $material-theme,
- secondary,
- map.get(map.get($config, secondary), lighter)
- );
$material-theme-tertiary-palette-default: mat.get-theme-color(
$material-theme,
tertiary,
map.get(map.get($config, tertiary), default)
);
- $material-theme-tertiary-palette-darker: mat.get-theme-color(
- $material-theme,
- tertiary,
- map.get(map.get($config, tertiary), darker)
- );
- $material-theme-tertiary-palette-lighter: mat.get-theme-color(
+ $material-theme-tertiary-palette-variant: mat.get-theme-color(
$material-theme,
tertiary,
- map.get(map.get($config, tertiary), lighter)
+ map.get(map.get($config, tertiary), variant)
);
$material-theme-error-palette-default: mat.get-theme-color(
$material-theme,
error,
map.get(map.get($config, error), default)
);
- $material-theme-error-palette-darker: mat.get-theme-color(
+ $material-theme-error-palette-variant: mat.get-theme-color(
$material-theme,
error,
- map.get(map.get($config, error), darker)
- );
- $material-theme-error-palette-lighter: mat.get-theme-color(
- $material-theme,
- error,
- map.get(map.get($config, error), lighter)
+ map.get(map.get($config, error), variant)
);
$material-theme-neutral-palette-default: mat.get-theme-color(
$material-theme,
@@ -476,24 +447,20 @@
$alternate-surface: map.get($config, alternate-surface);
$primary-contrast: map.get(map.get($config, primary), contrast);
$secondary-contrast: map.get(map.get($config, secondary), contrast);
+ $secondary-opacity: map.get(map.get($config, secondary), opacity);
$neutral-contrast: map.get(map.get($config, neutral), contrast);
$border-color: mat.get-theme-color($material-theme, neutral-variant,
map.get($config, neutral-variant));
$success-default: map.get(map.get($config, success), default);
- $success-darker: map.get(map.get($config, success), darker);
- $success-lighter: map.get(map.get($config, success), lighter);
- $caution: map.get($config, caution);
- $selected-row-color: if(
- $is-material-dark,
- $material-theme-tertiary-palette-darker,
- $material-theme-tertiary-palette-lighter
- );
+ $success-variant: map.get(map.get($config, success), variant);
+ $caution: map.get(map.get($config, caution), default);
+ $selected-row-color: $material-theme-tertiary-palette-variant;
// support dark-mode browser default inputs (time, color, ...)
input {
color-scheme: if($is-material-dark, dark, light);
}
- // semantic classes for the material theme
+ /* semantic color classes */
.primary-contrast {
color: $primary-contrast;
@@ -515,11 +482,6 @@
fill: $material-theme-secondary-palette-default;
}
- .secondary-color-lighter {
- color: $material-theme-secondary-palette-lighter;
- fill: $material-theme-secondary-palette-lighter;
- }
-
.tertiary-color {
color: $material-theme-tertiary-palette-default;
fill: $material-theme-tertiary-palette-default;
@@ -530,19 +492,9 @@
fill: $material-theme-error-palette-default;
}
- .error-color-lighter {
- color: $material-theme-error-palette-lighter;
- fill: $material-theme-error-palette-lighter;
- }
-
- .error-color-darker {
- color: $material-theme-error-palette-darker;
- fill: $material-theme-error-palette-darker;
- }
-
- .neutral-contrast {
- color: $neutral-contrast;
- fill: $neutral-contrast;
+ .error-color-variant {
+ color: $material-theme-error-palette-variant;
+ fill: $material-theme-error-palette-variant;
}
.neutral-color {
@@ -550,19 +502,14 @@
fill: $material-theme-neutral-palette-default;
}
- .success-color {
- color: $success-default;
- fill: $success-default;
+ .success-color-variant {
+ color: $success-variant;
+ fill: $success-variant;
}
- .success-color-lighter {
- color: $success-lighter;
- fill: $success-lighter;
- }
-
- .success-color-darker {
- color: $success-darker;
- fill: $success-darker;
+ .success-color-default {
+ color: $success-default;
+ fill: $success-default;
}
.caution-color {
@@ -574,21 +521,18 @@
background-color: $caution;
}
- // semantic classes for contrast colors determined based on the light/dark
mode of the theme.
-
- // will be black for light mode and white for dark mode
.neutral-contrast {
color: $neutral-contrast;
fill: $neutral-contrast;
}
- // will be a darker light grey for light mode and a brighter light grey
for dark mode
.border-color {
color: $border-color;
fill: $border-color;
}
- // color variants for theming angular material widgets
+ /* color variants for theming angular material widgets */
+
.tertiary-checkbox {
@include mat.checkbox-color($material-theme, $color-variant: tertiary);
}
@@ -623,20 +567,8 @@
}
a {
- color: if(
- $is-material-dark,
- $material-theme-secondary-palette-default,
- $material-theme-secondary-palette-darker
- );
- text-decoration-color: if(
- $is-material-dark,
- $material-theme-secondary-palette-lighter,
- $material-theme-secondary-palette-default
- );
- }
-
- a:hover {
- text-decoration-color: $material-theme-secondary-palette-default;
+ color: $material-theme-primary-palette-default;
+ text-decoration-color: $material-theme-primary-palette-default;
}
.has-errors,
@@ -649,7 +581,7 @@
}
.zero {
- opacity: if($is-material-dark, 0.6, 0.4) !important;
+ opacity: $secondary-opacity !important;
}
/* overriding 3rd party styles */
@@ -670,11 +602,7 @@
* {
// Because snackbars have different surface colors, we need to make
sure the action color has enough contrast.
- --mat-snack-bar-button-color: if(
- $is-material-dark,
- $material-theme-tertiary-palette-darker,
- $material-theme-tertiary-palette-lighter
- );
+ --mat-snack-bar-button-color: $material-theme-tertiary-palette-variant;
// markdown styles
@@ -834,28 +762,16 @@
}
.cdk-drop-list {
- color: if(
- $is-material-dark,
- $material-theme-secondary-palette-default,
- $material-theme-secondary-palette-darker
- );
+ color: $material-theme-secondary-palette-default;
}
.cdk-drop-list-dragging {
- background-color: if(
- $is-material-dark,
- $material-theme-secondary-palette-darker,
- $material-theme-secondary-palette-default
- ) !important;
+ background-color: $material-theme-secondary-palette-default !important;
}
.cdk-drag-selected {
.cdk-drag {
- background-color: if(
- $is-material-dark,
- $material-theme-secondary-palette-default,
- $material-theme-secondary-palette-darker
- );
+ background-color: $material-theme-secondary-palette-default;
}
}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_codemirror-theme.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_codemirror-theme.scss
index 34623c767e..dfd3177f6b 100644
---
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_codemirror-theme.scss
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_codemirror-theme.scss
@@ -25,15 +25,10 @@
secondary,
map.get(map.get($config, secondary), default)
);
- $material-theme-secondary-palette-darker: mat.get-theme-color(
+ $material-theme-tertiary-palette-variant: mat.get-theme-color(
$material-theme,
- secondary,
- map.get(map.get($config, secondary), darker)
- );
- $material-theme-secondary-palette-lighter: mat.get-theme-color(
- $material-theme,
- secondary,
- map.get(map.get($config, secondary), lighter)
+ tertiary,
+ map.get(map.get($config, tertiary), variant)
);
$material-theme-neutral-palette-default: mat.get-theme-color(
$material-theme,
@@ -52,6 +47,7 @@
);
$neutral-contrast: map.get(map.get($config, neutral), contrast);
$border-color: mat.get-theme-color($material-theme, neutral-variant,
map.get($config, neutral-variant));
+ $selected-color: $material-theme-tertiary-palette-variant;
.ngx-codemirror {
display: none;
@@ -85,19 +81,11 @@
}
.cm-s-nifi div.CodeMirror-selected {
- background: if(
- $is-material-dark,
- rgba($material-theme-secondary-palette-default, 0.4),
- rgba($material-theme-secondary-palette-lighter, 0.4)
- );
+ background: $selected-color;
}
.cm-s-nifi.CodeMirror-focused div.CodeMirror-selected {
- background: if(
- $is-material-dark,
- rgba($material-theme-secondary-palette-default, 0.4),
- rgba($material-theme-secondary-palette-lighter, 0.4)
- );
+ background: $selected-color;
}
.cm-s-nifi .CodeMirror-line::selection,
@@ -197,10 +185,7 @@
}
.cm-s-nifi .cm-meta {
- color: rgba(
- if($is-material-dark, $material-theme-secondary-palette-default,
$material-theme-secondary-palette-darker),
- if($is-material-dark, 0.87, 0.4)
- );
+ color: rgba($material-theme-secondary-palette-default, 0.87);
}
.cm-s-nifi .cm-attribute {
@@ -212,19 +197,13 @@
}
.cm-s-nifi .cm-qualifier {
- color: rgba(
- if($is-material-dark, $material-theme-secondary-palette-default,
$material-theme-secondary-palette-darker),
- if($is-material-dark, 0.87, 0.4)
- );
+ color: rgba($material-theme-secondary-palette-default, 0.87);
}
.cm-s-nifi .cm-variable-3,
.cm-s-nifi .cm-s-default,
.cm-s-nifi .cm-type {
- color: rgba(
- if($is-material-dark, $material-theme-secondary-palette-default,
$material-theme-secondary-palette-darker),
- if($is-material-dark, 0.87, 0.4)
- );
+ color: rgba($material-theme-secondary-palette-default, 0.87);
}
.cm-s-nifi .cm-error {
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_listing-table.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_listing-table.scss
index 0409fb501f..f9e161c1be 100644
---
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_listing-table.scss
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_listing-table.scss
@@ -70,45 +70,25 @@
}
@mixin generate-theme($material-theme, $config) {
- $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true,
false);
-
$material-theme-secondary-palette-default: mat.get-theme-color(
$material-theme,
secondary,
map.get(map.get($config, secondary), default)
);
- $material-theme-secondary-palette-lighter: mat.get-theme-color(
- $material-theme,
- secondary,
- map.get(map.get($config, secondary), lighter)
- );
- $material-theme-tertiary-palette-darker: mat.get-theme-color(
+ $material-theme-tertiary-palette-variant: mat.get-theme-color(
$material-theme,
tertiary,
- map.get(map.get($config, tertiary), darker)
- );
- $material-theme-tertiary-palette-lighter: mat.get-theme-color(
- $material-theme,
- tertiary,
- map.get(map.get($config, tertiary), lighter)
+ map.get(map.get($config, tertiary), variant)
);
// Get hues from palette
- $selected-row-color: if(
- $is-material-dark,
- $material-theme-tertiary-palette-darker,
- $material-theme-tertiary-palette-lighter
- );
+ $selected-row-color: $material-theme-tertiary-palette-variant;
.listing-table {
table {
th {
@extend .secondary-contrast;
- background-color: if(
- $is-material-dark,
- $material-theme-secondary-palette-default,
- $material-theme-secondary-palette-lighter
- ) !important;
+ background-color: $material-theme-secondary-palette-default
!important;
user-select: none;
.mat-sort-header-arrow {
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_prism-theme.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_prism-theme.scss
index 5c86e65f7d..55623bc659 100644
---
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_prism-theme.scss
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_prism-theme.scss
@@ -25,10 +25,10 @@
secondary,
map.get(map.get($config, secondary), default)
);
- $material-theme-secondary-palette-lighter: mat.get-theme-color(
+ $material-theme-tertiary-palette-variant: mat.get-theme-color(
$material-theme,
- secondary,
- map.get(map.get($config, secondary), lighter)
+ tertiary,
+ map.get(map.get($config, tertiary), variant)
);
$material-theme-neutral-palette-darker: mat.get-theme-color(
$material-theme,
@@ -40,6 +40,7 @@
neutral,
map.get(map.get($config, neutral), lighter)
);
+ $selected-color: $material-theme-tertiary-palette-variant;
code[class*='language-'],
pre[class*='language-'] {
@@ -66,11 +67,7 @@
code[class*='language-']::-moz-selection,
code[class*='language-'] ::-moz-selection {
text-shadow: none;
- background: if(
- $is-material-dark,
- rgba($material-theme-secondary-palette-default, 0.4),
- rgba($material-theme-secondary-palette-lighter, 0.4)
- );
+ background: if($is-material-dark, rgba($selected-color, 0.4),
rgba($selected-color, 0.4));
}
pre[class*='language-']::selection,
@@ -78,11 +75,7 @@
code[class*='language-']::selection,
code[class*='language-'] ::selection {
text-shadow: none;
- background: if(
- $is-material-dark,
- rgba($material-theme-secondary-palette-default, 0.4),
- rgba($material-theme-secondary-palette-lighter, 0.4)
- );
+ background: if($is-material-dark, rgba($selected-color, 0.4),
rgba($selected-color, 0.4));
}
@media print {
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/material.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/material.scss
index 662e8fd27b..5c27db62e3 100644
---
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/material.scss
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/material.scss
@@ -29,7 +29,7 @@
}
}
-$primary: (
+$primary-light: (
0: #000000,
10: #002020,
20: #003738,
@@ -48,7 +48,7 @@ $primary: (
100: #ffffff
);
-$secondary: (
+$secondary-light: (
0: #000000,
10: #314149,
20: #3f5863,
@@ -67,6 +67,25 @@ $secondary: (
100: #ffffff
);
+$primary-dark: (
+ 0: #000000,
+ 10: #000000,
+ 20: #000000,
+ 25: #4e6c79,
+ 30: #597b8a,
+ 35: #728e9b,
+ 40: #8aa2ad,
+ 50: #abbdc5,
+ 60: #abbdc5,
+ 70: #abbdc5,
+ 80: #cbd8dd,
+ 90: #cbd8dd,
+ 95: #cbd8dd,
+ 98: #cbd8dd,
+ 99: #cbd8dd,
+ 100: #ffffff
+);
+
$tertiary: (
0: #000000,
10: #3e2723,
@@ -88,26 +107,74 @@ $tertiary: (
$error: (
0: #000000,
- 10: #ba554a,
- 20: #ff0000,
- 25: #ff0000,
- 30: #ff1507,
- 35: #ec3030,
- 40: #f64e4c,
- 50: #f64e4c,
- 60: #f64e4c,
+ 10: #000000,
+ 20: #000000,
+ 25: #a8372a,
+ 30: #ba554a,
+ 35: #ba554a,
+ 40: #ba554a,
+ 50: #eb7071,
+ 60: #eb7071,
70: #eb7071,
- 80: #f49999,
- 90: #ffccd2,
- 95: #ffccd2,
+ 80: #eb7071,
+ 90: #f49999,
+ 95: #f49999,
98: #ffccd2,
99: #ffccd2,
100: #ffffff
);
+$neutral: (
+ 0: #000000,
+ 4: #121212,
+ 6: #303030,
+ 10: #303030,
+ 12: #303030,
+ 17: #303030,
+ 20: #444444,
+ 22: #444444,
+ 24: #444444,
+ 25: #666666,
+ 30: #666666,
+ 35: #666666,
+ 40: #82878d,
+ 50: #82878d,
+ 60: #82878d,
+ 70: #d8d8d8,
+ 80: #d8d8d8,
+ 87: #d8d8d8,
+ 90: #e3e3e3,
+ 92: #e3e3e3,
+ 94: #f4f4f4,
+ 95: #f4f4f4,
+ 96: #f4f4f4,
+ 98: #fafafa,
+ 99: #fafafa,
+ 100: #ffffff
+);
+
+$neutral-variant: (
+ 0: #000000,
+ 10: #666666,
+ 20: #666666,
+ 25: #666666,
+ 30: #666666,
+ 35: #666666,
+ 40: #acacac,
+ 50: #d8d8d8,
+ 60: #d8d8d8,
+ 70: #d8d8d8,
+ 80: #d8d8d8,
+ 90: #e3e3e3,
+ 95: #f4f4f4,
+ 98: #fafafa,
+ 99: #fafafa,
+ 100: #ffffff
+);
+
$m3-material-primary-light-palette: (
- primary: $primary,
- secondary: $secondary,
+ primary: $primary-light,
+ secondary: $secondary-light,
tertiary: $tertiary,
neutral: (
0: #000000,
@@ -159,8 +226,8 @@ $m3-material-primary-light-palette: (
);
$m3-material-primary-dark-palette: (
- primary: $secondary,
- secondary: $secondary,
+ primary: $primary-dark,
+ secondary: $primary-dark,
tertiary: $tertiary,
neutral: (
0: #000000,
@@ -271,33 +338,31 @@ $m3-light-theme: mat.define-theme(
$m3-light-theme-config: (
primary: (
- darker: 10,
default: 40,
- lighter: 80,
contrast: #ffffff
),
secondary: (
- darker: 10,
- default: 30,
- lighter: 70,
+ default: 50,
contrast: #000000,
+ opacity: 0.6,
new-canvas-item: (
grip: #ffffff,
hover: #ffffff
)
),
tertiary: (
- darker: 30,
default: 40,
- lighter: 90
+ variant: 90
),
success: (
- darker: #016131,
- default: #52bf7e,
- lighter: #9dd9b2
+ default: #31975b,
+ variant: #1390ca
),
alternate-surface: #ffffff,
- caution: #cf9f5d,
+ caution: (
+ default: #cf9338,
+ contrast: #ffffff
+ ),
neutral: (
darker: 4,
default: 35,
@@ -306,51 +371,49 @@ $m3-light-theme-config: (
),
neutral-variant: 50,
error: (
- darker: 10,
- default: 50,
- lighter: 80
+ variant: 50,
+ default: 40,
+ contrast: #ffffff
)
);
$m3-dark-theme-config: (
primary: (
- darker: 0,
default: 40,
- lighter: 99,
contrast: #000000
),
secondary: (
- darker: 0,
default: 40,
- lighter: 99,
contrast: #000000,
+ opacity: 0.5,
new-canvas-item: (
grip: #000000,
hover: #ffffff
)
),
tertiary: (
- darker: 10,
- default: 70,
- lighter: 80
+ variant: 10,
+ default: 70
),
success: (
- darker: #016131,
- default: #52bf7e,
- lighter: #9dd9b2
+ default: #31975b,
+ variant: #1390ca
),
alternate-surface: #444444,
- caution: #cf9f5d,
+ caution: (
+ default: #cf9338,
+ contrast: #ffffff
+ ),
neutral: (
darker: 10,
default: 40,
- lighter: 94,
+ lighter: 96,
contrast: #ffffff
),
neutral-variant: 35,
error: (
- darker: 35,
- default: 70,
- lighter: 80
+ variant: 90,
+ default: 50,
+ contrast: #ffffff
)
);
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/purple.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/purple.scss
index 65ce572a87..cff0453613 100644
--- a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/purple.scss
+++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/purple.scss
@@ -25,246 +25,146 @@
}
}
+$primary: (
+ 0: #000000,
+ 10: #311b92,
+ 20: #4527a0,
+ 25: #512da8,
+ 30: #5e35b1,
+ 35: #673ab7,
+ 40: #7e57c2,
+ 50: #9575cd,
+ 60: #b39ddb,
+ 70: #d1c4e9,
+ 80: #ede7f6,
+ 90: #ede7f6,
+ 95: #ede7f6,
+ 98: #ede7f6,
+ 99: #ede7f6,
+ 100: #ffffff
+);
+
+$secondary: (
+ 0: #000000,
+ 10: #311b92,
+ 20: #4527a0,
+ 25: #512da8,
+ 30: #5e35b1,
+ 35: #673ab7,
+ 40: #7e57c2,
+ 50: #9575cd,
+ 60: #b39ddb,
+ 70: #d1c4e9,
+ 80: #ede7f6,
+ 90: #ede7f6,
+ 95: #ede7f6,
+ 98: #ede7f6,
+ 99: #ede7f6,
+ 100: #ffffff
+);
+
+$tertiary: (
+ 0: #000000,
+ 10: #004d40,
+ 20: #00695c,
+ 25: #00796b,
+ 30: #00897b,
+ 35: #009688,
+ 40: #26a69a,
+ 50: #4db6ac,
+ 60: #80cbc4,
+ 70: #b2dfdb,
+ 80: #e0f2f1,
+ 90: #e0f2f1,
+ 95: #e0f2f1,
+ 98: #e0f2f1,
+ 99: #e0f2f1,
+ 100: #ffffff
+);
+
+$error: (
+ 0: #000000,
+ 10: #000000,
+ 20: #000000,
+ 25: #a8372a,
+ 30: #ba554a,
+ 35: #ba554a,
+ 40: #ba554a,
+ 50: #eb7071,
+ 60: #eb7071,
+ 70: #eb7071,
+ 80: #eb7071,
+ 90: #f49999,
+ 95: #f49999,
+ 98: #ffccd2,
+ 99: #ffccd2,
+ 100: #ffffff
+);
+
+$neutral: (
+ 0: #000000,
+ 4: #121212,
+ 6: #303030,
+ 10: #303030,
+ 12: #303030,
+ 17: #303030,
+ 20: #444444,
+ 22: #444444,
+ 24: #444444,
+ 25: #666666,
+ 30: #666666,
+ 35: #666666,
+ 40: #82878d,
+ 50: #82878d,
+ 60: #82878d,
+ 70: #d8d8d8,
+ 80: #d8d8d8,
+ 87: #d8d8d8,
+ 90: #e3e3e3,
+ 92: #e3e3e3,
+ 94: #f4f4f4,
+ 95: #f4f4f4,
+ 96: #f4f4f4,
+ 98: #fafafa,
+ 99: #fafafa,
+ 100: #ffffff
+);
+
+$neutral-variant: (
+ 0: #000000,
+ 10: #666666,
+ 20: #666666,
+ 25: #666666,
+ 30: #666666,
+ 35: #666666,
+ 40: #acacac,
+ 50: #d8d8d8,
+ 60: #d8d8d8,
+ 70: #d8d8d8,
+ 80: #d8d8d8,
+ 90: #e3e3e3,
+ 95: #f4f4f4,
+ 98: #fafafa,
+ 99: #fafafa,
+ 100: #ffffff
+);
+
$m3-material-primary-light-palette: (
- primary: (
- 0: #000000,
- 10: #311b92,
- 20: #4527a0,
- 25: #512da8,
- 30: #5e35b1,
- 35: #673ab7,
- 40: #7e57c2,
- 50: #9575cd,
- 60: #b39ddb,
- 70: #d1c4e9,
- 80: #ede7f6,
- 90: #ede7f6,
- 95: #ede7f6,
- 98: #ede7f6,
- 99: #ede7f6,
- 100: #ffffff
- ),
- secondary: (
- 0: #000000,
- 10: #311b92,
- 20: #4527a0,
- 25: #512da8,
- 30: #5e35b1,
- 35: #673ab7,
- 40: #7e57c2,
- 50: #9575cd,
- 60: #b39ddb,
- 70: #d1c4e9,
- 80: #ede7f6,
- 90: #ede7f6,
- 95: #ede7f6,
- 98: #ede7f6,
- 99: #ede7f6,
- 100: #ffffff
- ),
- tertiary: (
- 0: #000000,
- 10: #004d40,
- 20: #00695c,
- 25: #00796b,
- 30: #00897b,
- 35: #009688,
- 40: #26a69a,
- 50: #4db6ac,
- 60: #80cbc4,
- 70: #b2dfdb,
- 80: #e0f2f1,
- 90: #e0f2f1,
- 95: #e0f2f1,
- 98: #e0f2f1,
- 99: #e0f2f1,
- 100: #ffffff
- ),
- neutral: (
- 0: #000000,
- 4: #121212,
- 6: #121212,
- 10: #303030,
- 12: #303030,
- 17: #303030,
- 20: #444444,
- 22: #444444,
- 24: #444444,
- 25: #666666,
- 30: #666666,
- 35: #666666,
- 40: #acacac,
- 50: #acacac,
- 60: #acacac,
- 70: #d8d8d8,
- 80: #d8d8d8,
- 87: #d8d8d8,
- 90: #e3e3e3,
- 92: #f4f4f4,
- 94: #f4f4f4,
- 95: #fafafa,
- 96: #fafafa,
- 98: #fafafa,
- 99: #fafafa,
- 100: #ffffff
- ),
- neutral-variant: (
- 0: #000000,
- 10: #303030,
- 20: #444444,
- 25: #666666,
- 30: #666666,
- 35: #666666,
- 40: #acacac,
- 50: #d8d8d8,
- 60: #d8d8d8,
- 70: #d8d8d8,
- 80: #d8d8d8,
- 90: #e3e3e3,
- 95: #f4f4f4,
- 98: #fafafa,
- 99: #fafafa,
- 100: #ffffff
- ),
- error: (
- 0: #000000,
- 10: #b71c1c,
- 20: #c62828,
- 25: #d32f2f,
- 30: #e53935,
- 35: #f44336,
- 40: #ef5350,
- 50: #e57373,
- 60: #ef9a9a,
- 70: #ffcdd2,
- 80: #ffebee,
- 90: #ffebee,
- 95: #ffebee,
- 98: #ffebee,
- 99: #ffebee,
- 100: #ffffff
- )
+ primary: $primary,
+ secondary: $secondary,
+ tertiary: $tertiary,
+ neutral: $neutral,
+ neutral-variant: $neutral-variant,
+ error: $error
);
$m3-material-primary-dark-palette: (
- primary: (
- 0: #000000,
- 10: #311b92,
- 20: #4527a0,
- 25: #512da8,
- 30: #5e35b1,
- 35: #673ab7,
- 40: #7e57c2,
- 50: #9575cd,
- 60: #b39ddb,
- 70: #d1c4e9,
- 80: #ede7f6,
- 90: #ede7f6,
- 95: #ede7f6,
- 98: #ede7f6,
- 99: #ede7f6,
- 100: #ffffff
- ),
- secondary: (
- 0: #000000,
- 10: #311b92,
- 20: #4527a0,
- 25: #512da8,
- 30: #5e35b1,
- 35: #673ab7,
- 40: #7e57c2,
- 50: #9575cd,
- 60: #b39ddb,
- 70: #d1c4e9,
- 80: #ede7f6,
- 90: #ede7f6,
- 95: #ede7f6,
- 98: #ede7f6,
- 99: #ede7f6,
- 100: #ffffff
- ),
- tertiary: (
- 0: #000000,
- 10: #004d40,
- 20: #00695c,
- 25: #00796b,
- 30: #00897b,
- 35: #009688,
- 40: #26a69a,
- 50: #4db6ac,
- 60: #80cbc4,
- 70: #b2dfdb,
- 80: #e0f2f1,
- 90: #e0f2f1,
- 95: #e0f2f1,
- 98: #e0f2f1,
- 99: #e0f2f1,
- 100: #ffffff
- ),
- neutral: (
- 0: #000000,
- 4: #303030,
- 6: #303030,
- 10: #303030,
- 12: #444444,
- 17: #444444,
- 20: #444444,
- 22: #444444,
- 24: #444444,
- 25: #666666,
- 30: #666666,
- 35: #666666,
- 40: #acacac,
- 50: #acacac,
- 60: #acacac,
- 70: #d8d8d8,
- 80: #d8d8d8,
- 87: #d8d8d8,
- 90: #e3e3e3,
- 92: #e3e3e3,
- 94: #e3e3e3,
- 95: #f4f4f4,
- 96: #f4f4f4,
- 98: #fafafa,
- 99: #fafafa,
- 100: #ffffff
- ),
- neutral-variant: (
- 0: #000000,
- 10: #303030,
- 20: #444444,
- 25: #666666,
- 30: #666666,
- 35: #666666,
- 40: #666666,
- 50: #666666,
- 60: #666666,
- 70: #acacac,
- 80: #d8d8d8,
- 90: #e3e3e3,
- 95: #f4f4f4,
- 98: #fafafa,
- 99: #fafafa,
- 100: #ffffff
- ),
- error: (
- 0: #000000,
- 10: #ba554a,
- 20: #ff0000,
- 25: #ff0000,
- 30: #ff1507,
- 35: #ec3030,
- 40: #f64e4c,
- 50: #f64e4c,
- 60: #f64e4c,
- 70: #eb7071,
- 80: #f49999,
- 90: #ffccd2,
- 95: #ffccd2,
- 98: #ffccd2,
- 99: #ffccd2,
- 100: #ffffff
- )
+ primary: $primary,
+ secondary: $secondary,
+ tertiary: $tertiary,
+ neutral: $neutral,
+ neutral-variant: $neutral-variant,
+ error: $error
);
// Define a dark theme
@@ -327,33 +227,31 @@ $m3-light-theme: mat.define-theme(
$m3-light-theme-config: (
primary: (
- darker: 10,
default: 40,
- lighter: 80,
- contrast: #000000
+ contrast: #ffffff
),
secondary: (
- darker: 10,
- default: 35,
- lighter: 50,
+ default: 50,
contrast: #ffffff,
+ opacity: 0.6,
new-canvas-item: (
grip: #ffffff,
- hover: #ffffff
+ hover: #000000
)
),
tertiary: (
- darker: 30,
default: 40,
- lighter: 90
+ variant: 90
),
success: (
- darker: #016131,
- default: #52bf7e,
- lighter: #9dd9b2
+ default: #31975b,
+ variant: #1390ca
),
alternate-surface: #ffffff,
- caution: #cf9f5d,
+ caution: (
+ default: #cf9338,
+ contrast: #ffffff
+ ),
neutral: (
darker: 4,
default: 35,
@@ -362,51 +260,49 @@ $m3-light-theme-config: (
),
neutral-variant: 50,
error: (
- darker: 10,
- default: 50,
- lighter: 60
+ variant: 50,
+ default: 40,
+ contrast: #ffffff
)
);
$m3-dark-theme-config: (
primary: (
- darker: 10,
default: 40,
- lighter: 80,
contrast: #000000
),
secondary: (
- darker: 0,
- default: 50,
- lighter: 99,
- contrast: #000000,
+ default: 40,
+ contrast: #ffffff,
+ opacity: 0.5,
new-canvas-item: (
grip: #000000,
- hover: #ffffff
+ hover: #000000
)
),
tertiary: (
- darker: 10,
- default: 70,
- lighter: 80
+ variant: 10,
+ default: 70
),
success: (
- darker: #016131,
- default: #52bf7e,
- lighter: #9dd9b2
+ default: #31975b,
+ variant: #1390ca
),
alternate-surface: #444444,
- caution: #cf9f5d,
+ caution: (
+ default: #cf9338,
+ contrast: #ffffff
+ ),
neutral: (
darker: 10,
default: 40,
- lighter: 94,
+ lighter: 96,
contrast: #ffffff
),
neutral-variant: 35,
error: (
- darker: 35,
- default: 70,
- lighter: 80
+ variant: 90,
+ default: 50,
+ contrast: #ffffff
)
);
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/components/resizable/_resizeable-theme.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/components/resizable/_resizeable-theme.scss
index b4d052bf7d..16409d1451 100644
---
a/nifi-frontend/src/main/frontend/libs/shared/src/components/resizable/_resizeable-theme.scss
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/components/resizable/_resizeable-theme.scss
@@ -19,7 +19,6 @@
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $config) {
- $is-material-dark: if(mat.get-theme-type($material-theme) == dark, true,
false);
$border-color: mat.get-theme-color($material-theme, neutral-variant,
map.get($config, neutral-variant));
.resizable-triangle {
border-right-color: $border-color;
