Apache
/
nifi
mirror of https://github.com/apache/nifi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[NIFI-13056][NIFI-13011] canvas icons, theming, and contrast ratio improvements (#8663) 

* [NIFI-13056] add missing .hidden class, update text.bulletin-icon, rect.bulletin-background, text.port-transmission-icon, rect.process-group-banner, rect.remote-process-group-banner, text.process-group-name, text.remote-process-group-name, and text.load-balance-icon-active colors to match legacy nifi

* fix ref to warn-color and declar color for .operation-context-name

* text.connection-from-run-status and text.connection-to-run-status colors

* load-balance-icon and load-balanace-icon-active semantic colors

* .expiration-icon semantic colors

* .penalized-icon semantic colors

* text.active-thread-count-icon semantic colors

* [NIFI-13011] canvas icons and contrast ratio improvements

* nifi surface palette usage now all based on default/lighter/darker theme configuration

* update codemirror colors

* update not-transmitting and disabled icon colors, add not-allowed cursor to disabled draggable icons

* update processor, PG, rpg, name color

* cleanup

* fix bulletin icon color in dark mode

* fix flow status clustered icon warn color

* update the nifi warn darker color

* update active thread count to accent default color

* ensure contrast for the PG and RPG header text

* final touches

* update navigation header icons to have proper contrast ratio

* update contrast ratio for purple theme

* update to material theme

This closes #8663
This commit is contained in:
Scott Aslan 2024-04-24 16:07:32 -04:00 committed by GitHub
parent b06c1779a3
commit 0e70f7a07e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
49 changed files with 333 additions and 475 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/component-access-policies.component.html
View File

@ -60,7 +60,7 @@
<i class="accent-color icon" [class]="getContextIcon()"></i>
</div>
<div class="flex flex-col">
<div class="operation-context-name on-surface-default">
<div class="operation-context-name">
{{ policyComponentState.label }}
</div>
<div class="operation-context-type primary-color">

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component.ts
View File

@ -143,7 +143,7 @@ export class BulletinBoardList implements AfterViewInit {
getSeverity(severity: string) {
switch (severity.toLowerCase()) {
case 'error':
return 'bulletin-error mat-warn';
return 'bulletin-error warn-color';
case 'warn':
case 'warning':
return 'bulletin-warn';

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/canvas-utils.service.ts
View File

@ -1403,7 +1403,7 @@ export class CanvasUtils {
})
.attr('class', function () {
if (terminatedThreads > 0) {
return `active-thread-count-icon mat-warn`;
return `active-thread-count-icon nifi-warn-darker`;
} else {
return `active-thread-count-icon primary-color`;
}

17
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/connection-manager.service.ts
View File

@ -1003,7 +1003,7 @@ export class ConnectionManager {
return !d.component.source.running;
}
})
.classed('is-missing-port', function () {
.classed('is-missing-port invalid', function () {
return d.component.source.exists === false;
});
} else {
@ -1118,7 +1118,7 @@ export class ConnectionManager {
return !d.component.destination.running;
}
})
.classed('is-missing-port', function () {
.classed('is-missing-port invalid', function () {
return d.component.destination.exists === false;
});
} else {
@ -1269,7 +1269,7 @@ export class ConnectionManager {
// expiration icon
queued
.append('text')
.attr('class', 'expiration-icon')
.attr('class', 'expiration-icon primary-color')
.attr('x', 208)
.attr('y', 14)
.text(function () {
@ -1428,9 +1428,9 @@ export class ConnectionManager {
// update the coloring of the backgrounds
backgrounds.forEach((background, i) => {
if (i % 2 === 0) {
background.attr('class', 'surface-darker');
background.attr('class', 'nifi-surface-darker');
} else {
background.attr('class', 'surface-default');
background.attr('class', 'nifi-surface-lighter');
}
});
@ -1453,9 +1453,12 @@ export class ConnectionManager {
return true;
}
})
.classed('load-balance-icon-active fa-rotate-90', function (d: any) {
.classed('load-balance-icon-active fa-rotate-90 nifi-success-default', function (d: any) {
return d.permissions.canRead && d.component.loadBalanceStatus === 'LOAD_BALANCE_ACTIVE';
})
.classed('primary-color', function (d: any) {
return d.permissions.canRead && d.component.loadBalanceStatus !== 'LOAD_BALANCE_ACTIVE';
})
.classed('load-balance-icon-184', function () {
return d.permissions.canRead && self.isExpirationConfigured(d.component);
})
@ -1598,7 +1601,7 @@ export class ConnectionManager {
connectionLabelContainer
.select('g.queued-container')
.append('text')
.attr('class', 'penalized-icon')
.attr('class', 'penalized-icon primary-color')
.attr('y', 14)
.text(function () {
return '\uf252';

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/port-manager.service.ts
View File

@ -446,7 +446,7 @@ export class PortManager {
.classed('transmitting nifi-success-default', function (d: any) {
return d.status.transmitting === true;
})
.classed('not-transmitting primary-color', function (d: any) {
.classed('not-transmitting on-surface-medium', function (d: any) {
return d.status.transmitting !== true;
});

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts
View File

@ -757,7 +757,7 @@ export class ProcessGroupManager {
// update not transmitting
const notTransmitting = details
.select('text.process-group-not-transmitting')
.classed('not-transmitting primary-color', function (d: any) {
.classed('not-transmitting on-surface-medium', function (d: any) {
return d.permissions.canRead && d.inactiveRemotePortCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {
@ -885,7 +885,7 @@ export class ProcessGroupManager {
// update disabled
const disabled = details
.select('text.process-group-disabled')
.classed('disabled', function (d: any) {
.classed('disabled on-surface-medium', function (d: any) {
return d.permissions.canRead && d.component.disabledCount > 0;
})
.classed('zero primary-color-lighter', function (d: any) {

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/remote-process-group-manager.service.ts
View File

@ -609,7 +609,7 @@ export class RemoteProcessGroupManager {
.classed('transmitting nifi-success-default', function (d: any) {
return !self.hasIssues(d) && d.status.transmissionStatus === 'Transmitting';
})
.classed('not-transmitting primary-color', function (d: any) {
.classed('not-transmitting on-surface-medium', function (d: any) {
return !self.hasIssues(d) && d.status.transmissionStatus !== 'Transmitting';
})
.each(function (this: any, d: any) {

167
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
View File

@ -34,24 +34,23 @@
// Get hues from palette
$material-theme-primary-palette-lighter: mat.get-color-from-palette($material-theme-primary-palette, lighter);
$material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette, 'default');
$material-theme-primary-palette-lighter-contrast: mat.get-color-from-palette(
$material-theme-primary-palette-darker-contrast: mat.get-color-from-palette(
$material-theme-primary-palette,
lighter-contrast
);
$material-theme-primary-palette-default-contrast: mat.get-color-from-palette(
$material-theme-primary-palette,
'default-contrast'
darker-contrast
);
$material-theme-accent-palette-default: mat.get-color-from-palette($material-theme-accent-palette, 'default');
$material-theme-accent-palette-darker: mat.get-color-from-palette($material-theme-accent-palette, 'darker');
// Canvas colors
$nifi-theme-surface-palette-default: mat.get-color-from-palette($nifi-theme-surface-palette, default);
$nifi-theme-surface-palette-A200: mat.get-color-from-palette($nifi-theme-surface-palette, 'A200');
$nifi-theme-surface-palette-A700: mat.get-color-from-palette($nifi-theme-surface-palette, 'A700');
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$nifi-theme-surface-palette-300: mat.get-color-from-palette($nifi-theme-surface-palette, 300);
$nifi-theme-surface-palette-900: mat.get-color-from-palette($nifi-theme-surface-palette, 900);
$nifi-theme-success-palette-lighter: mat.get-color-from-palette($nifi-theme-success-palette, lighter);
$nifi-theme-success-palette-A700: mat.get-color-from-palette($nifi-theme-success-palette, 'A700');
$nifi-theme-success-palette-50: mat.get-color-from-palette($nifi-theme-success-palette, 50);
$nifi-theme-success-palette-500: mat.get-color-from-palette($nifi-theme-success-palette, 500);
$nifi-theme-success-palette-900: mat.get-color-from-palette($nifi-theme-success-palette, 900);
$nifi-theme-warn-palette-darker: mat.get-color-from-palette($nifi-theme-warn-palette, 'darker');
$nifi-theme-warn-palette-800: mat.get-color-from-palette($nifi-theme-warn-palette, 800);
$nifi-theme-warn-palette-A200: mat.get-color-from-palette($nifi-theme-warn-palette, 'A200');
@ -61,18 +60,30 @@
// Shadows should always be darker. We explicitly set this so the SVG shadows are correct in both modes.
$drop-shadow-color: black;
$is-dark: map-get($nifi-theme-color-config, is-dark);
$banner-color: if(
$is-dark,
mat.get-color-from-palette($material-theme-primary-palette, darker),
mat.get-color-from-palette($material-theme-primary-palette, lighter)
);
$banner-opacity: if($is-dark, 0.8, 1);
$surface: utils.get-surface($nifi-theme-color-config);
$surface-darker: utils.get-surface($nifi-theme-color-config, darker);
$on-surface: utils.get-on-surface($nifi-theme-color-config);
$on-surface-lighter: utils.get-on-surface($nifi-theme-color-config, lighter);
$on-surface-highlight: utils.get-on-surface($nifi-theme-color-config, highlight);
$on-surface-medium: utils.get-on-surface($nifi-theme-color-config, medium);
$surface-alt: utils.get-surface($nifi-theme-color-config, default, 'accent');
.canvas-background {
background-color: $surface-darker;
background-image: linear-gradient(to right, $surface-alt 1px, transparent 1px),
linear-gradient(to bottom, $surface-alt 1px, transparent 1px);
background-color: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
background-image: linear-gradient(
to right,
if($is-dark, $nifi-theme-success-palette-900, $nifi-theme-success-palette-50) 1px,
transparent 1px
),
linear-gradient(
to bottom,
if($is-dark, $nifi-theme-success-palette-900, $nifi-theme-success-palette-50) 1px,
transparent 1px
);
}
/* svg styles */
@ -86,11 +97,11 @@
}
g.component rect.body {
fill: $surface;
fill: $nifi-theme-surface-palette-lighter;
}
g.component rect.body.unauthorized {
fill: $surface-darker;
fill: $nifi-theme-surface-palette-darker;
}
g.component rect.border,
@ -112,11 +123,11 @@
}
g.component rect.processor-icon-container.unauthorized {
fill: $surface-darker;
fill: $nifi-theme-surface-palette-darker;
}
g.component.selected rect.border {
stroke: utils.get-color-on-surface($material-theme-color-config, $surface);
stroke: utils.get-color-on-surface($material-theme-color-config, $nifi-theme-surface-palette-lighter);
}
text.stats-label {
@ -124,32 +135,32 @@
}
text.stats-value {
fill: utils.get-color-on-surface($material-theme-color-config, $surface, 'accent');
fill: utils.get-color-on-surface(
$material-theme-color-config,
$nifi-theme-surface-palette-lighter,
'accent'
);
}
text.stats-info {
fill: utils.get-color-on-surface($material-theme-color-config, $surface);
fill: utils.get-color-on-surface($material-theme-color-config, $nifi-theme-surface-palette-lighter);
}
text.bulletin-icon {
fill: $surface;
fill: $material-theme-primary-palette-darker-contrast;
}
rect.bulletin-background {
fill: utils.get-color-on-surface($material-theme-color-config, $surface, 'warn');
}
text.active-thread-count-icon {
fill: $material-theme-primary-palette-default;
fill: $nifi-theme-warn-palette-darker;
}
text.active-thread-count {
fill: $material-theme-accent-palette-darker;
fill: $material-theme-accent-palette-default;
}
path.component-comments {
fill: $nifi-theme-surface-palette-A200;
stroke: $nifi-theme-surface-palette-A200;
fill: $on-surface-lighter;
stroke: $on-surface-lighter;
}
/*
@ -168,7 +179,7 @@
}
text.add-connect {
fill: utils.get-color-on-surface($material-theme-color-config, $surface);
fill: utils.get-color-on-surface($material-theme-color-config, $nifi-theme-surface-palette-lighter);
}
/*
@ -183,7 +194,7 @@
}
rect.processor-read-write-stats {
fill: $surface;
fill: $nifi-theme-surface-palette-lighter;
}
rect.processor-stats-border {
@ -191,28 +202,28 @@
}
rect.processor-stats-in-out {
fill: $surface-darker;
fill: $nifi-theme-surface-palette-darker;
}
text.processor-name {
fill: $on-surface-medium;
fill: $on-surface;
}
text.processor-type {
fill: utils.get-color-on-surface($material-theme-color-config, $surface, 'accent');
fill: $material-theme-primary-palette-default;
}
text.processor-bundle {
fill: $nifi-theme-surface-palette-A700;
fill: $nifi-theme-surface-palette-default;
}
rect.processor-icon-container {
fill: $surface;
fill: $nifi-theme-surface-palette-lighter;
}
circle.restricted-background,
circle.is-primary-background {
fill: $surface;
fill: $nifi-theme-surface-palette-lighter;
}
text.restricted {
@ -224,11 +235,11 @@
*/
g.connection rect.body {
fill: $surface;
fill: $nifi-theme-surface-palette-lighter;
}
g.connection rect.body.unauthorized {
fill: $surface-darker;
fill: $nifi-theme-surface-palette-darker;
}
g.connection rect.border.unauthorized {
@ -236,7 +247,7 @@
}
g.connection rect.border.full {
stroke: $material-theme-accent-palette-darker;
stroke: $material-theme-accent-palette-default;
}
g.connection.selected rect.border {
@ -264,35 +275,18 @@
stroke: $nifi-theme-warn-palette-darker;
}
text.connection-from-run-status,
text.connection-to-run-status,
text.expiration-icon,
text.load-balance-icon,
text.penalized-icon {
fill: $material-theme-primary-palette-default;
}
text.load-balance-icon-active {
fill: $material-theme-accent-palette-darker;
}
text.connection-from-run-status.is-missing-port,
text.connection-to-run-status.is-missing-port {
fill: $nifi-theme-warn-palette-A200;
}
g.connection rect.backpressure-tick {
fill: transparent;
}
g.connection rect.backpressure-tick.data-size-prediction.prediction-down,
g.connection rect.backpressure-tick.object-prediction.prediction-down {
fill: $surface;
fill: $nifi-theme-surface-palette-lighter;
}
g.connection rect.backpressure-tick.data-size-prediction,
g.connection rect.backpressure-tick.object-prediction {
fill: $nifi-theme-surface-palette-A200;
fill: $on-surface-lighter;
}
g.connection rect.backpressure-tick.data-size-prediction.not-configured,
@ -375,7 +369,7 @@
/* ports */
text.port-name {
fill: $on-surface-medium;
fill: $on-surface;
}
text.port-icon {
@ -383,17 +377,14 @@
}
rect.remote-banner {
fill: $surface-alt;
}
text.port-transmission-icon {
fill: utils.get-color-on-surface($material-theme-color-config, $surface-alt);
fill: $nifi-theme-surface-palette-darker;
fill-opacity: $banner-opacity;
}
/* process groups */
rect.process-group-stats-in-out {
fill: $surface;
fill: $nifi-theme-surface-palette-lighter;
}
rect.process-group-stats-border {
@ -401,40 +392,46 @@
}
rect.process-group-queued-stats {
fill: $surface-darker;
fill: $nifi-theme-surface-palette-darker;
}
rect.process-group-read-write-stats {
fill: $surface-darker;
fill: $nifi-theme-surface-palette-darker;
}
rect.process-group-details-banner,
rect.remote-process-group-details-banner,
rect.remote-process-group-last-refresh-rect {
fill: $surface-alt;
fill: $nifi-theme-surface-palette-darker;
fill-opacity: $banner-opacity;
}
$pg-surface: utils.ensure-contrast(
$material-theme-primary-palette-default,
$material-theme-primary-palette-default-contrast,
$material-theme-primary-palette-lighter
);
rect.process-group-banner,
rect.remote-process-group-banner {
fill: $material-theme-primary-palette-default;
fill: $banner-color;
}
text.process-group-name,
text.remote-process-group-name {
fill: utils.ensure-contrast(
$material-theme-primary-palette-default-contrast,
$pg-surface,
$on-surface-medium
$on-surface,
$banner-color,
if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter)
);
}
text.version-control,
text.not-transmitting,
text.transmitting {
text-shadow: if($is-dark, 0 0 4px rgba(0, 0, 0, 1), 0 0 4px rgba(255, 255, 255, 1));
}
text.process-group-contents-count {
fill: utils.get-color-on-surface($material-theme-color-config, $surface, 'accent');
fill: utils.get-color-on-surface(
$material-theme-color-config,
$nifi-theme-surface-palette-lighter,
'accent'
);
}
g.process-group.drop rect.border {
@ -448,23 +445,23 @@
}
rect.remote-process-group-sent-stats {
fill: $surface-darker;
fill: $nifi-theme-surface-palette-darker;
}
rect.remote-process-group-received-stats {
fill: $surface;
fill: $nifi-theme-surface-palette-lighter;
}
text.remote-process-group-uri {
fill: utils.get-color-on-surface($material-theme-color-config, $surface);
fill: utils.get-color-on-surface($material-theme-color-config, $nifi-theme-surface-palette-lighter);
}
text.remote-process-group-transmission-secure {
fill: utils.get-color-on-surface($material-theme-color-config, $surface);
fill: utils.get-color-on-surface($material-theme-color-config, $nifi-theme-surface-palette-lighter);
}
text.remote-process-group-last-refresh {
fill: utils.get-color-on-surface($material-theme-color-config, $surface);
fill: utils.get-color-on-surface($material-theme-color-config, $nifi-theme-surface-palette-lighter);
}
}
}

7
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss
View File

@ -27,13 +27,12 @@
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
// Get hues from palette
$nifi-theme-surface-palette-A200: mat.get-color-from-palette($nifi-theme-surface-palette, 'A200');
$surface: utils.get-surface($nifi-theme-color-config);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, 'lighter');
$on-surface-lighter: utils.get-on-surface($nifi-theme-color-config, lighter);
.breadcrumb-container {
box-shadow: 0 1px 6px $nifi-theme-surface-palette-A200;
background-color: $surface;
box-shadow: 0 1px 6px $on-surface-lighter;
background-color: $nifi-theme-surface-palette-lighter;
border-top: 1px solid $on-surface-lighter;
}
}

11
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss
View File

@ -27,19 +27,18 @@
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
// Get hues from palette
$surface: utils.get-surface($nifi-theme-color-config);
$surface-highlight: utils.get-on-surface($nifi-theme-color-config, highlight);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, 'lighter');
$on-surface-highlight: utils.get-on-surface($nifi-theme-color-config, highlight);
$on-surface-lighter: utils.get-on-surface($nifi-theme-color-config, lighter);
$nifi-theme-surface-palette-A200: mat.get-color-from-palette($nifi-theme-surface-palette, 'A200');
div.navigation-control {
box-shadow: 0 1px 6px $nifi-theme-surface-palette-A200;
background-color: $surface;
box-shadow: 0 1px 6px $on-surface-lighter;
background-color: $nifi-theme-surface-palette-lighter;
border: 1px solid $on-surface-lighter;
.navigation-control-header {
&:hover {
background: linear-gradient(-90deg, $surface-highlight 34px, transparent 35px);
background: linear-gradient(-90deg, $on-surface-highlight 34px, transparent 35px);
}
}
}

6
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/_birdseye.component-theme.scss
View File

@ -28,13 +28,13 @@
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
// Get hues from palette
$surface: utils.get-surface($nifi-theme-color-config);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, 'lighter');
#birdseye {
background: $surface;
background: $nifi-theme-surface-palette-lighter;
rect.birdseye-brush {
stroke: utils.get-color-on-surface($material-theme-color-config, $surface);
stroke: utils.get-color-on-surface($material-theme-color-config, $nifi-theme-surface-palette-lighter);
fill: transparent;
}
}

8
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss
View File

@ -27,15 +27,13 @@
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
// Get hues from palette
$nifi-theme-surface-palette-A200: mat.get-color-from-palette($nifi-theme-surface-palette, 'A200');
$surface: utils.get-surface($nifi-theme-color-config);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, 'lighter');
$on-surface-lighter: utils.get-on-surface($nifi-theme-color-config, lighter);
$on-surface-highlight: utils.get-on-surface($nifi-theme-color-config, highlight);
div.operation-control {
box-shadow: 0 1px 6px $nifi-theme-surface-palette-A200;
background-color: $surface;
box-shadow: 0 1px 6px $on-surface-lighter;
background-color: $nifi-theme-surface-palette-lighter;
border: 1px solid $on-surface-lighter;
.operation-control-header {

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.html
View File

@ -20,7 +20,7 @@
<div class="flex items-center">
<div class="fa fa-hand-o-up primary-color"></div>
@if (!operationCollapsed || !shouldDockWhenCollapsed) {
<div class="operation-control-title on-surface-medium">Operation</div>
<div class="operation-control-title">Operation</div>
}
</div>
@if (!operationCollapsed || !shouldDockWhenCollapsed) {
@ -39,7 +39,7 @@
<i class="icon accent-color" [class]="getContextIcon(selection)"></i>
</div>
<div class="flex flex-col">
<div class="operation-context-name on-surface-medium">{{ getContextName(selection) }}</div>
<div class="operation-context-name">{{ getContextName(selection) }}</div>
<div class="operation-context-type primary-color">
{{ getContextType(selection) }}
</div>

17
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss
View File

@ -27,26 +27,33 @@
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
$nifi-theme-warn-palette: map.get($nifi-theme-color-config, 'warn');
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($nifi-theme-color-config, is-dark);
$material-theme-primary-palette-darker: mat.get-color-from-palette($material-theme-primary-palette, darker);
$material-theme-primary-palette-lighter: mat.get-color-from-palette($material-theme-primary-palette, lighter);
$material-theme-primary-palette-darker-contrast: mat.get-color-from-palette(
$material-theme-primary-palette,
darker-contrast
);
$nifi-theme-warn-palette-darker: mat.get-color-from-palette($nifi-theme-warn-palette, 'darker');
$surface: utils.get-surface($nifi-theme-color-config);
$surface-darker: utils.get-surface($nifi-theme-color-config, 'darker');
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$on-surface: utils.get-on-surface($nifi-theme-color-config);
$on-surface-lighter: utils.get-on-surface($nifi-theme-color-config, lighter);
.flow-status {
border-bottom: 1px solid $on-surface-lighter;
background: $surface-darker;
background: $nifi-theme-surface-palette-darker;
.controller-bulletins {
border-left: 1px solid $on-surface-lighter;
background-color: $material-theme-primary-palette-darker;
background-color: if(
$is-dark,
$material-theme-primary-palette-lighter,
$material-theme-primary-palette-darker
);
.fa {
color: $material-theme-primary-palette-darker-contrast;

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.html
View File

@ -43,7 +43,7 @@
<div class="flex items-center gap-x-2" title="Not Transmitting Remote Process Groups">
<div
class="icon icon-transmit-false"
[class]="getActiveStyle(controllerStatus.inactiveRemotePortCount, 'primary-color')"></div>
[class]="getActiveStyle(controllerStatus.inactiveRemotePortCount, 'on-surface-medium')"></div>
<div class="accent-color font-medium">
{{ formatValue(controllerStatus.inactiveRemotePortCount) }}
</div>
@ -73,7 +73,7 @@
<div class="flex items-center gap-x-2" title="Disabled Components">
<div
class="icon icon-enable-false"
[class]="getActiveStyle(controllerStatus.disabledCount, 'primary-color')"></div>
[class]="getActiveStyle(controllerStatus.disabledCount, 'on-surface-medium')"></div>
<div class="accent-color font-medium">
{{ formatValue(controllerStatus.disabledCount) }}
</div>

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.ts
View File

@ -69,7 +69,7 @@ export class FlowStatus {
this.clusterSummary?.connectedToCluster === false ||
this.clusterSummary?.connectedNodeCount != this.clusterSummary?.totalNodeCount
) {
return 'warning';
return 'nifi-warn-darker';
}
return 'primary-color';

24
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss
View File

@ -26,20 +26,18 @@
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
// Get hues from palette
$surface-darker: utils.get-surface($nifi-theme-color-config, darker);
$on-surface-highlight: utils.get-on-surface($nifi-theme-color-config, highlight);
$on-surface-lighter: utils.get-on-surface($nifi-theme-color-config, lighter);
// Use the same logic as _navigation.component-theme.scss to determine the bg color for hover
$hover-bg: mat.get-color-from-palette($material-theme-primary-palette, 'navbar');
@if ($hover-bg) {
// Nothing to do here, we have special color from the palette.
} @else {
// There was not a special value set for the navbar, so we use Angular Material behavior.
$hover-bg: mat.get-color-from-palette($material-theme-primary-palette, 'default');
}
$is-dark: map-get($material-theme-color-config, is-dark);
$hover-bg: if(
$is-dark,
mat.get-color-from-palette($material-theme-primary-palette, darker),
mat.get-color-from-palette($material-theme-primary-palette, lighter)
);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
.new-canvas-item {
.icon {
@ -62,9 +60,13 @@
}
&.cdk-drag-dragging {
color: utils.get-color-on-surface($material-theme-color-config, $surface-darker);
color: utils.get-color-on-surface($material-theme-color-config, $nifi-theme-surface-palette-darker);
mix-blend-mode: difference; // Make sure the dragged icon is always visible
}
}
.icon:disabled {
cursor: not-allowed;
}
}
}

15
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss
View File

@ -23,26 +23,29 @@
// Get the color config from the theme.
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
// Get the color palettes from the color-config.
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
// Get hues from palette
$surface: utils.get-surface($nifi-theme-color-config);
$surface-darker: utils.get-surface($nifi-theme-color-config, 'darker');
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, 'lighter');
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$on-surface-lighter: utils.get-on-surface($nifi-theme-color-config, lighter);
.search-container {
border-left: 1px solid $surface-darker;
border-left: 1px solid $nifi-theme-surface-palette-darker;
&:hover,
&.open {
background-color: $surface;
background-color: $nifi-theme-surface-palette-lighter;
border-left: 1px solid $on-surface-lighter;
}
.search-input {
background-color: $surface;
background-color: $nifi-theme-surface-palette-lighter;
}
}
.search-results {
background-color: $surface;
background-color: $nifi-theme-surface-palette-lighter;
}
}

5
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/_prioritizers.component-theme.scss
View File

@ -26,10 +26,11 @@
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
// Get hues from palette
$material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette, default);
$surface: utils.get-surface($nifi-theme-color-config);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, 'lighter');
.prioritizers {
.prioritizers-list {
@ -37,7 +38,7 @@
}
.prioritizer-draggable-item {
background: $surface;
background: $nifi-theme-surface-palette-lighter;
}
}
}

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/manage-remote-ports.component.html
View File

@ -207,7 +207,7 @@
} @else {
@if (port.connected && port.exists) {
<div
class="pointer not-transmitting icon icon-transmit-false primary-color"
class="pointer not-transmitting icon icon-transmit-false on-surface-medium"
(click)="toggleTransmission(port)"
title="Not Transmitting: click to toggle port transmission"></div>
}

8
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/feature/_login.component-theme.scss
View File

@ -20,12 +20,16 @@
@use '../../../../assets/utils.scss' as utils;
@mixin generate-theme($material-theme, $nifi-theme) {
// Get the color config from the theme.
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
// Get the color palettes from the color-config.
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
// Get hues from palette
$surface: utils.get-surface($nifi-theme-color-config);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, 'lighter');
.login-background {
background: $surface url(../../../../assets/icons/bg-error.png) left top no-repeat;
background: $nifi-theme-surface-palette-lighter url(../../../../assets/icons/bg-error.png) left top no-repeat;
}
}

5
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/_parameter-context-inheritance.component-theme.scss
View File

@ -26,11 +26,12 @@
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
// Get hues from palette
$material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette, default);
$surface: utils.get-surface($nifi-theme-color-config);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, 'lighter');
$on-surface: utils.get-on-surface($nifi-theme-color-config);
.parameter-context-inheritance {
@ -39,7 +40,7 @@
}
.parameter-context-draggable-item {
background: $surface;
background: $nifi-theme-surface-palette-lighter;
}
}
}

9
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss
View File

@ -27,16 +27,17 @@
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
$material-theme-accent-palette: map.get($material-theme-color-config, 'accent');
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
// Get hues from palette
$material-theme-primary-palette-lighter: mat.get-color-from-palette($material-theme-primary-palette, lighter);
$material-theme-accent-palette-default: mat.get-color-from-palette($material-theme-accent-palette, default);
$surface: utils.get-surface($nifi-theme-color-config);
$surface-darker: utils.get-surface($nifi-theme-color-config, darker);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, 'lighter');
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$on-surface: utils.get-on-surface($nifi-theme-color-config);
rect.lineage {
fill: $surface-darker;
fill: $nifi-theme-surface-palette-darker;
}
g.flowfile-icon text {
@ -57,7 +58,7 @@
}
circle.flowfile-link {
fill: $surface;
fill: $nifi-theme-surface-palette-lighter;
stroke: $on-surface;
}
}

12
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/_provenance-event-table.component-theme.scss
View File

@ -23,13 +23,17 @@
// Get the color config from the theme.
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
$surface-darker: utils.get-surface($nifi-theme-color-config, darker);
$nifi-theme-surface-palette-A100: mat.get-color-from-palette($nifi-theme-color-config, A100);
// Get the color palettes from the color-config.
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
// Get hues from palette
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$on-surface-lighter: utils.get-on-surface($nifi-theme-color-config, lighter);
.provenance-event-table {
.lineage {
border: 1px solid $nifi-theme-surface-palette-A100;
background-color: $surface-darker;
border: 1px solid $on-surface-lighter;
background-color: $nifi-theme-surface-palette-darker;
}
}
}

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/flow-analysis-rule-table/flow-analysis-rule-table.component.ts
View File

@ -171,7 +171,7 @@ export class FlowAnalysisRuleTable {
return 'invalid fa fa-warning';
} else {
if (entity.status.runStatus === 'DISABLED') {
return 'disabled primary-color icon icon-enable-false';
return 'disabled on-surface-medium icon icon-enable-false';
} else if (entity.status.runStatus === 'ENABLED') {
return 'enabled nifi-success-default fa fa-flash';
}

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/reporting-task-table/reporting-task-table.component.ts
View File

@ -130,7 +130,7 @@ export class ReportingTaskTable {
} else if (entity.status.runStatus === 'RUNNING') {
return 'fa fa-play nifi-success-lighter running';
} else {
return 'icon icon-enable-false primary-color disabled';
return 'icon icon-enable-false on-surface-medium disabled';
}
}
}

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/port-cluster-table/port-cluster-table.component.ts
View File

@ -115,7 +115,7 @@ export class PortClusterTable extends ComponentClusterTable<NodePortStatusSnapsh
case 'enabled':
return 'enabled fa fa-flash nifi-success-default';
case 'disabled':
return 'disabled icon icon-enable-false primary-color';
return 'disabled icon icon-enable-false on-surface-medium';
case 'validating':
return 'validating fa fa-spin fa-circle-notch nifi-surface-default';
case 'invalid':

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/processor-cluster-table/processor-cluster-table.component.ts
View File

@ -126,7 +126,7 @@ export class ProcessorClusterTable extends ComponentClusterTable<NodeProcessorSt
case 'enabled':
return 'enabled fa fa-flash nifi-success-default';
case 'disabled':
return 'disabled icon icon-enable-false primary-color';
return 'disabled icon icon-enable-false on-surface-medium';
case 'validating':
return 'validating fa fa-spin fa-circle-notch nifi-surface-default';
case 'invalid':

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/remote-process-group-cluster-table/remote-process-group-cluster-table.component.ts
View File

@ -114,7 +114,7 @@ export class RemoteProcessGroupClusterTable extends ComponentClusterTable<NodeRe
if (rpg.statusSnapshot.transmissionStatus === 'Transmitting') {
return 'transmitting nifi-success-default fa fa-bullseye';
} else {
return 'not-transmitting icon icon-transmit-false primary-color';
return 'not-transmitting icon icon-transmit-false on-surface-medium';
}
}
}

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/port-status-table/port-status-table.component.ts
View File

@ -112,7 +112,7 @@ export class PortStatusTable extends ComponentStatusTable<PortStatusSnapshotEnti
case 'enabled':
return 'enabled fa fa-flash nifi-success-default';
case 'disabled':
return 'disabled icon icon-enable-false primary-color';
return 'disabled icon icon-enable-false on-surface-medium';
case 'validating':
return 'validating fa fa-spin fa-circle-notch nifi-surface-default';
case 'invalid':

8
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/_processor-status-table.component-theme.scss
View File

@ -23,12 +23,16 @@
// Get the color config from the theme.
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
$surface: utils.get-surface($nifi-theme-color-config);
// Get the color palettes from the color-config.
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
// Get hues from palette
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, 'lighter');
.processor-status-table {
.primary-node-only {
min-width: 16px;
background-color: $surface;
background-color: $nifi-theme-surface-palette-lighter;
}
}
}

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component.ts
View File

@ -118,7 +118,7 @@ export class ProcessorStatusTable extends ComponentStatusTable<ProcessorStatusSn
case 'enabled':
return 'enabled fa fa-flash nifi-success-default';
case 'disabled':
return 'disabled icon icon-enable-false primary-color';
return 'disabled icon icon-enable-false on-surface-medium';
case 'validating':
return 'validating fa fa-spin fa-circle-notch nifi-surface-default';
case 'invalid':

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/remote-process-group-status-listing/remote-process-group-status-table/remote-process-group-status-table.component.ts
View File

@ -111,7 +111,7 @@ export class RemoteProcessGroupStatusTable extends ComponentStatusTable<RemotePr
if (rpg.remoteProcessGroupStatusSnapshot.transmissionStatus === 'Transmitting') {
return 'transmitting nifi-success-default fa fa-bullseye';
} else {
return 'not-transmitting icon icon-transmit-false primary-color';
return 'not-transmitting icon icon-transmit-false on-surface-medium';
}
}

36
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-context/_component-context.component-theme.scss
View File

@ -1,36 +0,0 @@
/*!
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($nifi-theme) {
// Get the color config from the theme.
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
// Get the color palette from the color-config.
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
// Get hues from palette
$nifi-theme-surface-palette-A200: mat.get-color-from-palette($nifi-theme-surface-palette, 'A200');
.component-context {
.component-context-name {
color: $nifi-theme-surface-palette-A200;
}
}
}

8
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
View File

@ -31,16 +31,16 @@
// Get hues from palette
$material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette, 'default');
$surface-darker: utils.get-surface($nifi-theme-color-config, darker);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$nifi-theme-surface-palette-default: mat.get-color-from-palette($nifi-theme-surface-palette, 'default');
$on-surface-highlight: utils.get-on-surface($nifi-theme-color-config, highlight);
$nifi-theme-surface-palette-A200: mat.get-color-from-palette($nifi-theme-surface-palette, 'A200');
$on-surface-lighter: utils.get-on-surface($nifi-theme-color-config, lighter);
$nifi-theme-success-palette-A700: mat.get-color-from-palette($nifi-theme-success-palette, 'A700');
div.context-menu {
background-color: $surface-darker;
background-color: $nifi-theme-surface-palette-darker;
border: 1px solid $material-theme-primary-palette-default;
box-shadow: 0 3px 6px $nifi-theme-surface-palette-A200;
box-shadow: 0 3px 6px $on-surface-lighter;
.context-menu-item:hover {
background-color: $on-surface-highlight;

12
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/context-menu.component.html
View File

@ -16,11 +16,7 @@
-->
<ng-template #menu>
<div
class="context-menu primary-color-darker"
[class.show-focused]="showFocused$ | async"
(keydown)="keydown()"
cdkMenu>
<div class="context-menu primary-color" [class.show-focused]="showFocused$ | async" (keydown)="keydown()" cdkMenu>
@for (item of getMenuItems(menuId); track item) {
@if (item.isSeparator) {
<hr />
@ -29,8 +25,8 @@
@if (menuComponent.menu; as subMenu) {
<button class="context-menu-item" cdkMenuItem [cdkMenuTriggerFor]="subMenu">
<div class="context-menu-item-img" [class]="item.clazz"></div>
<div class="context-menu-item-text on-surface-medium">{{ item.text }}</div>
<div class="context-menu-group-item-img fa fa-caret-right primary-color"></div>
<div class="context-menu-item-text on-surface-default">{{ item.text }}</div>
<div class="context-menu-group-item-img fa fa-caret-right"></div>
</button>
}
<fd-context-menu
@ -40,7 +36,7 @@
} @else {
<button class="context-menu-item" (click)="menuItemClicked(item, $event)" cdkMenuItem>
<div class="context-menu-item-img" [class]="item.clazz"></div>
<div class="context-menu-item-text on-surface-medium">{{ item.text }}</div>
<div class="context-menu-item-text on-surface-default">{{ item.text }}</div>
</button>
}
}

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-references/controller-service-references.component.ts
View File

@ -89,7 +89,7 @@ export class ControllerServiceReferences {
} else if (reference.state == 'RUNNING') {
return 'running fa fa-play nifi-success-lighter';
} else {
return 'disabled icon icon-enable-false primary-color';
return 'disabled icon icon-enable-false on-surface-medium';
}
}
@ -97,7 +97,7 @@ export class ControllerServiceReferences {
if (reference.state == 'ENABLED') {
return 'enabled fa fa-flash nifi-success-default';
} else {
return 'disabled primary-color icon icon-enable-false';
return 'disabled icon icon-enable-false on-surface-medium';
}
}

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/controller-service-table/controller-service-table.component.ts
View File

@ -155,9 +155,9 @@ export class ControllerServiceTable {
return 'invalid fa fa-warning';
} else {
if (entity.status.runStatus === 'DISABLED') {
return 'disabled primary-color icon icon-enable-false';
return 'disabled icon icon-enable-false on-surface-medium';
} else if (entity.status.runStatus === 'DISABLING') {
return 'disabled primary-color icon icon-enable-false';
return 'disabled icon icon-enable-false on-surface-medium';
} else if (entity.status.runStatus === 'ENABLED') {
return 'enabled fa fa-flash nifi-success-default';
} else if (entity.status.runStatus === 'ENABLING') {

24
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss
View File

@ -28,15 +28,17 @@
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
// Get hues from palette
$navbar-surface: mat.get-color-from-palette($material-theme-primary-palette, 'navbar');
$navbar-on-surface: mat.get-color-from-palette($material-theme-primary-palette, 'navbar-contrast');
@if ($navbar-surface) {
// Nothing to do here, we have special colors from the palette.
} @else {
// There was not a special value set for the navbar, so we use Angular Material behavior.
$navbar-surface: mat.get-color-from-palette($material-theme-primary-palette, 'default');
$navbar-on-surface: mat.get-color-from-palette($material-theme-primary-palette, 'default-contrast');
}
$is-dark: map-get($material-theme-color-config, is-dark);
$navbar-surface: if(
$is-dark,
mat.get-color-from-palette($material-theme-primary-palette, darker),
mat.get-color-from-palette($material-theme-primary-palette, lighter)
);
$navbar-on-surface: if(
$is-dark,
mat.get-color-from-palette($material-theme-primary-palette, lighter),
mat.get-color-from-palette($material-theme-primary-palette, darker)
);
.nifi-navigation {
background-color: $navbar-surface;
@ -51,10 +53,6 @@
@extend .nifi-surface-default;
}
.current-user {
color: $navbar-on-surface;
}
a {
color: $navbar-on-surface;
text-decoration-color: $navbar-on-surface;

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/parameter-references/parameter-references.component.ts
View File

@ -114,7 +114,7 @@ export class ParameterReferences {
} else if (reference.state == 'RUNNING') {
return 'running fa fa-play nifi-success-lighter';
} else {
return 'disabled icon icon-enable-false primary-color';
return 'disabled icon icon-enable-false on-surface-medium';
}
}
@ -122,7 +122,7 @@ export class ParameterReferences {
if (reference.state == 'ENABLED') {
return 'enabled fa fa-flash nifi-success-default';
} else {
return 'disabled primary-color icon icon-enable-false';
return 'disabled icon icon-enable-false on-surface-medium';
}
}

22
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/_nf-editor.component-theme.scss
View File

@ -31,17 +31,23 @@
// Get hues from palette
$material-theme-primary-palette-lighter: mat.get-color-from-palette($material-theme-primary-palette, lighter);
$material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette, default);
$nifi-theme-surface-palette-400-contrast: mat.get-color-from-palette($nifi-theme-surface-palette, '400-contrast');
$nifi-theme-surface-palette-default-contrast: mat.get-color-from-palette(
$nifi-theme-surface-palette,
'default-contrast'
);
$nifi-theme-surface-palette-default: mat.get-color-from-palette($nifi-theme-surface-palette, default);
$surface: utils.get-surface($nifi-theme-color-config);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$on-surface: utils.get-on-surface($nifi-theme-color-config);
$on-surface-lighter: utils.get-on-surface($nifi-theme-color-config, lighter);
$on-surface-medium: utils.get-on-surface($nifi-theme-color-config, medium);
.property-editor {
@include mat.button-density(-1);
.nf-editor {
.CodeMirror {
background-color: $surface;
background-color: $nifi-theme-surface-palette-lighter;
&.blank {
background: $material-theme-primary-palette-default;
@ -53,12 +59,20 @@
color: $on-surface;
}
.CodeMirror-gutters {
background: $nifi-theme-surface-palette-darker;
}
.CodeMirror-linenumber {
color: $on-surface-medium;
}
/*
Override some defaults...
*/
.cm-s-default .CodeMirror-matchingbracket {
color: $nifi-theme-surface-palette-400-contrast !important;
color: $on-surface-lighter !important;
background-color: $nifi-theme-surface-palette-default;
}
}

7
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss
View File

@ -27,19 +27,18 @@
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
// Get hues from palette
$nifi-theme-surface-palette-A100: mat.get-color-from-palette($nifi-theme-surface-palette, 'A100');
$nifi-theme-surface-palette-A700: mat.get-color-from-palette($nifi-theme-surface-palette, 'A700');
$on-surface-lighter: utils.get-on-surface($nifi-theme-color-config, lighter);
#status-history-chart-container,
#status-history-chart-control-container {
.axis path,
.axis line {
stroke: $nifi-theme-surface-palette-A100;
stroke: $on-surface-lighter;
}
.brush {
.selection {
stroke: $nifi-theme-surface-palette-A700;
stroke: $on-surface-lighter;
}
}
}

58
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
View File

@ -104,6 +104,10 @@
user-select: none;
}
.hidden {
display: none;
}
.mat-mdc-icon-button {
--mdc-icon-button-state-layer-size: 28px;
--mdc-icon-button-icon-size: 14px;
@ -233,10 +237,14 @@
$nifi-theme-warn-palette: map.get($nifi-theme-color-config, 'warn');
// default/lighter/darker colors from the nifi theme palettes
$is-dark: map-get($nifi-theme-color-config, is-dark);
$nifi-theme-surface-palette-default: mat.get-color-from-palette($nifi-theme-surface-palette, 'default');
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, 'lighter');
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, 'darker');
$nifi-theme-surface-palette-A200: mat.get-color-from-palette($nifi-theme-surface-palette, 'A200');
$on-surface-default: utils.get-on-surface($nifi-theme-color-config);
$on-surface-lighter: utils.get-on-surface($nifi-theme-color-config, lighter);
$on-surface-medium: utils.get-on-surface($nifi-theme-color-config, medium);
$on-surface-highlight: utils.get-on-surface($nifi-theme-color-config, highlight);
$nifi-theme-success-palette-default: mat.get-color-from-palette($nifi-theme-success-palette, 'default');
$nifi-theme-success-palette-lighter: mat.get-color-from-palette($nifi-theme-success-palette, 'lighter');
$nifi-theme-success-palette-darker: mat.get-color-from-palette($nifi-theme-success-palette, 'darker');
@ -247,39 +255,24 @@
// semantic classes for default/lighter/darker colors for each palette in each theme
.surface-default {
color: utils.get-surface($nifi-theme-color-config);
fill: utils.get-surface($nifi-theme-color-config);
}
.surface-darker {
color: utils.get-surface($nifi-theme-color-config, darker);
fill: utils.get-surface($nifi-theme-color-config, darker);
}
.on-surface-default {
color: utils.get-on-surface($nifi-theme-color-config);
fill: utils.get-on-surface($nifi-theme-color-config);
color: $on-surface-default;
fill: $on-surface-default;
}
.on-surface-lighter {
color: utils.get-on-surface($nifi-theme-color-config, lighter);
fill: utils.get-on-surface($nifi-theme-color-config, lighter);
}
.on-surface-darker {
color: utils.get-on-surface($nifi-theme-color-config, darker);
fill: utils.get-on-surface($nifi-theme-color-config, darker);
color: $on-surface-lighter;
fill: $on-surface-lighter;
}
.on-surface-medium {
color: utils.get-on-surface($nifi-theme-color-config, medium);
fill: utils.get-on-surface($nifi-theme-color-config, medium);
color: $on-surface-medium;
fill: $on-surface-medium;
}
.on-surface-highlight {
color: utils.get-on-surface($nifi-theme-color-config, highlight);
fill: utils.get-on-surface($nifi-theme-color-config, highlight);
color: $on-surface-highlight;
fill: $on-surface-highlight;
}
.nifi-surface-default {
@ -327,13 +320,10 @@
fill: $nifi-theme-warn-palette-darker;
}
// surface colors based on nifi theme
$surface-primary-default: utils.get-surface($nifi-theme-color-config);
// on surface colors based on nifi theme
$on-surface-primary-default: utils.get-on-surface($nifi-theme-color-config);
$on-surface-primary-lighter: utils.get-on-surface($nifi-theme-color-config, 'lighter');
$on-surface-primary-highlight: utils.get-on-surface($nifi-theme-color-config, 'highlight');
$on-surface-primary-lighter: utils.get-on-surface($nifi-theme-color-config, lighter);
$on-surface-primary-highlight: utils.get-on-surface($nifi-theme-color-config, highlight);
/* other classes and overriding 3rd party styles */
@ -347,7 +337,7 @@
}
.cdk-drag-preview {
box-shadow: 0 3px 6px $nifi-theme-surface-palette-A200;
box-shadow: 0 3px 6px $on-surface-lighter;
}
.has-errors,
@ -357,15 +347,15 @@
}
.tooltip {
background-color: $surface-primary-default;
background-color: $nifi-theme-surface-palette-lighter;
border-color: $on-surface-primary-default;
box-shadow: 0 2px 5px $nifi-theme-surface-palette-A200;
box-shadow: 0 2px 5px $on-surface-lighter;
color: $on-surface-primary-default;
}
.property-editor {
background-color: utils.get-surface($nifi-theme-color-config, darker);
box-shadow: 0 2px 5px $nifi-theme-surface-palette-A200;
background-color: $nifi-theme-surface-palette-darker;
box-shadow: 0 2px 5px $on-surface-lighter;
}
ngx-skeleton-loader .skeleton-loader {

43
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table.scss
View File

@ -62,33 +62,32 @@
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
$material-theme-accent-palette: map.get($material-theme-color-config, 'accent');
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
// Get hues from palette
$material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette, 'default');
$material-theme-primary-palette-default-contrast: mat.get-color-from-palette(
$material-theme-primary-palette,
'default-contrast'
);
$material-theme-primary-palette-darker: mat.get-color-from-palette($material-theme-primary-palette, 'darker');
$material-theme-primary-palette-darker-contrast: mat.get-color-from-palette(
$material-theme-primary-palette,
'darker-contrast'
);
$surface-darker: utils.get-surface($nifi-theme-color-config, darker);
$surface: utils.get-surface($nifi-theme-color-config);
$accent-surface: utils.get-surface($material-theme-color-config, default, 'accent');
$header-surface: utils.ensure-contrast(
$material-theme-primary-palette-default,
$surface,
$material-theme-primary-palette-darker
);
$header-on-surface: utils.ensure-contrast(
$material-theme-primary-palette-default-contrast,
$header-surface,
$material-theme-primary-palette-darker-contrast
);
$surface-highlight: utils.get-on-surface($nifi-theme-color-config, 'highlight');
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$surface-highlight: utils.get-on-surface($nifi-theme-color-config, highlight);
$on-surface-lighter: utils.get-on-surface($nifi-theme-color-config, lighter);
$is-dark: map-get($nifi-theme-color-config, is-dark);
$selected-row-color: if(
$is-dark,
mat.get-color-from-palette($material-theme-accent-palette, darker),
mat.get-color-from-palette($material-theme-accent-palette, lighter)
);
$header-surface: if(
$is-dark,
mat.get-color-from-palette($material-theme-primary-palette, darker),
mat.get-color-from-palette($material-theme-primary-palette, lighter)
);
.listing-table {
border-color: $on-surface-lighter;
@ -96,11 +95,11 @@
table {
th {
background-color: $header-surface !important;
color: $header-on-surface;
color: $material-theme-primary-palette-darker-contrast;
user-select: none;
.mat-sort-header-arrow {
color: $header-on-surface;
color: $material-theme-primary-palette-darker-contrast;
}
}
@ -115,16 +114,12 @@
}
.selected {
background-color: $accent-surface !important;
background-color: $selected-row-color !important;
}
.even {
background-color: $surface-darker;
background-color: $nifi-theme-surface-palette-darker;
}
//.icon {
// color: utils.get-color-on-surface($material-theme-color-config, $surface);
//}
}
}
}

98
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/material.scss
View File

@ -25,23 +25,17 @@
$on-surface-dark: rgba(#000000, .87);
$on-surface-light: #ffffff;
// The $material-primary-light-palette defines the PRIMARY palettes for all Angular Material components used throughout Apache NiFi
$material-primary-light-palette: (
// 50 -> 900 are the PRIMARY colors (mat.define-palette($material-primary-light-palette, 300);) defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b
50: rgba(#F9FAFB, 0.97),
100: #e5ebed,
200: #cbd8dd,
300: #abbdc5, // "lighter" hue for light mode: .nf-editor.CodeMirror.blank, circle.event-circle, .hint-pattern,
300: #abbdc5,
400: #8aa2ad,
500: #728e9b,
600: #597b8a, // "default" hue for light mode: .splash, text.active-thread-count-icon, text.connection-from-run-status, text.connection-to-run-status, text.expiration-icon, text.load-balance-icon, text.penalized-icon, rect.process-group-banner, rect.remote-process-group-banner, text.process-group-name, text.remote-process-group-name, text.process-group-contents-icon, text.remote-process-group-transmission-status, .prioritizers.prioritizers-list, .parameter-context-inheritance.parameter-context-inheritance-list, div.context-menu, .nf-editor.CodeMirror.blank,
700: #4e6c79, // "darker" hue for light mode: #status-history-chart-container text, #status-history-chart-control-container text, .controller-bulletins, .controller-bulletins.fa,
600: #597b8a,
700: #4e6c79,
800: #3f5863,
900: #31454e,
A100: rgba(#1491C1, 0.12),
A200: #aabec7,
A400: #44a3cf,
A700: #004849,
contrast: (
50: $on-surface-dark,
100: $on-surface-dark,
@ -59,91 +53,17 @@ $material-primary-light-palette: (
A700: $on-surface-light,
)
);
$material-accent-light-palette: (
50: #fff8cc,
100: #ebe2be,
200: #d7cbb0, // "lighter" hue for light mode:
300: #c4b5a2,
400: #b09e94,
500: #9c8886, // "default" hue for light mode: text.funnel-icon, text.port-icon
600: #8f7775,
700: #836563,
800: #765452, // "darker" hue for light mode .load-balance-icon-active, .hint-pattern, text.active-thread-count, g.connection rect.border.full
900: #4a3435,
A100: #e7ebbe,
A200: #d7d7b0,
A400: #b0ab94,
A700: #020202,
contrast: (
50: $on-surface-dark,
100: $on-surface-dark,
200: $on-surface-dark,
300: $on-surface-dark,
400: $on-surface-dark,
500: $on-surface-dark,
600: $on-surface-dark,
700: $on-surface-light,
800: $on-surface-light,
900: $on-surface-light,
A100: $on-surface-dark,
A200: $on-surface-dark,
A400: $on-surface-dark,
A700: $on-surface-dark,
)
);
// The $warn-light-palette defines the WARN palette both for all Angular Material components used throughout Apache NiFi
$warn-light-palette: (
// 50 -> 900 are the PRIMARY colors defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #f64e4c
50: #ffebee,
100: #ffccd2,
200: #f49999, // "lighter" hue for light mode:
300: #f57472,
400: #f64e4c, // "default" hue for light mode:
500: #fa3b30,
600: #ff1507,
700: #ff0000,
800: #ec3030,
900: #be0315, // "darker" hue for light mode:
A100: #ffef85,
A200: #f8bf47,
A400: #f29833,
A700: #eb711e,
contrast: (
50: $on-surface-dark,
100: $on-surface-dark,
200: $on-surface-dark,
300: $on-surface-dark,
400: $on-surface-dark,
500: $on-surface-dark,
600: $on-surface-dark,
700: $on-surface-dark,
800: $on-surface-dark,
900: $on-surface-light,
A100: $on-surface-dark,
A200: $on-surface-dark,
A400: $on-surface-dark,
A700: $on-surface-dark,
)
);
$material-accent-light-palette: mat.$brown-palette;
$warn-light-palette: mat.$red-palette;
// Dark and light palettes are identical for NiFi, their "default", "lighter", and "darker" values are different and set below.
$material-primary-dark-palette: $material-primary-light-palette;
$material-accent-dark-palette: $material-accent-light-palette;
$warn-dark-palette: $warn-light-palette;
// Append a special case to the light palette to preserve the legacy styling of NiFi's navigation bar.
$material-primary-light-palette: map.set($material-primary-light-palette, 'navbar', #aabdc5);
// We need to pull out the contrast palette and add the contrast to it, then restore it.
$contrasts: map.get($material-primary-light-palette, 'contrast');
$contrasts: map.set($contrasts, 'navbar', #004849);
$material-primary-light-palette: map.set($material-primary-light-palette, 'contrast', $contrasts);
// Define the palettes for your theme
$material-primary-light: mat.define-palette($material-primary-light-palette, 600, 300, 700);
$material-accent-light: mat.define-palette($material-accent-light-palette, 500, 200, 800);
$material-primary-light: mat.define-palette($material-primary-light-palette, 600, 300, 900);
$material-accent-light: mat.define-palette($material-accent-light-palette, 500, 50, A700);
$warn-light: mat.define-palette($warn-light-palette, 400, 200, 900);
// Create the theme objects. We can extract the values we need from the theme passed into the mixins.
@ -160,8 +80,8 @@ $material-theme-light: mat.define-light-theme(
);
// Create the color palettes used in our dark theme.
$material-primary-dark: mat.define-palette($material-primary-dark-palette, 400, 200, 600);
$material-accent-dark: mat.define-palette($material-accent-dark-palette, 400, 300, 700);
$material-primary-dark: mat.define-palette($material-primary-dark-palette, 500, 200, 800);
$material-accent-dark: mat.define-palette($material-accent-dark-palette, 200, A100, 500);
$warn-dark: mat.define-palette($warn-dark-palette, 500, 200, 700);
$material-theme-dark: mat.define-dark-theme(

38
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss
View File

@ -23,19 +23,15 @@
$surface-light-palette: (
50: #ffffff,
100: #fafafa, // "lighter" hue for light mode:
100: #fafafa,
200: #f4f4f4,
300: #e3e3e3,
400: #d8d8d8,
500: #acacac, // "default" hue for light mode: text.unset, g.component rect.border.ghost, g.connection rect.backpressure-tick.not-configured, g.connection.ghost path.connection-path, g.connection.ghost rect.connection-label,
500: #acacac,
600: #666666,
700: #444444, // "darker" hue for light mode:
700: #444444,
800: #303030,
900: #121212,
A100: #e5ebed, // .axis path, .axis line
A200: rgba(0, 0, 0, 0.25),
A400: rgba(#303030, .75),
A700: rgba(#000000, 0.87), // .brush.selection
contrast: (
50: rgba(#000000, 0.87), // This is used for the basis of $on-surface for light themes
100: rgba(#000000, 0.87),
@ -49,22 +45,22 @@ $surface-light-palette: (
900: #ffffff, // This is used as the basis for $on-surface for dark themes
A100: rgba(#000000, 0.87),
A200: rgba(#000000, 0.87),
A400: #ffffff,
A400: rgba(#000000, 0.87),
A700: #ffffff,
)
);
$success-light-palette: (
50: #e5ebed, // Used for the grid lines on the canvas. Called as the canvas access $surface value.
50: #e5ebed, // Used for the grid lines on the canvas in light mode
100: #c3e8d0,
200: #9dd9b2, // "lighter" hue for light mode:
200: #9dd9b2,
300: #73ca94,
400: #52bf7e, // "default" hue for light mode:
500: #00ff00, // g.component.connectable-destination rect.border, path.connector.connectable
400: #52bf7e,
500: #00ff00, // g.component.connectable-destination rect.border, path.connector.connectable
600: #2cb367,
700: #1A9964,
800: #016131, // "darker" hue for light mode:
900: #0d1411,
800: #016131,
900: #0d1411, // Used for the grid lines on the canvas in dark mode
A100: #bfbfff,
A200: #8080ff,
A400: #4040ff,
@ -90,16 +86,16 @@ $success-light-palette: (
$nifi-warn-light-palette: (
50: #ffebee,
100: #ffccd2,
200: #f49999, // "lighter" hue for light mode:
200: #f49999,
300: #eb7071,
400: #f64e4c, // "default" hue for light mode:
400: #f64e4c,
500: #fa3b30,
600: #ec3030,
700: #ff1507,
800: #ff0000, // path.connector, g.connection rect.startpoint
900: #ba554a, // "darker" hue for light mode: g.component rect.border.unauthorized, #connection-full-drop-shadow feFlood, text.restricted, g.connection rect.border.unauthorized, g.connection path.connection-path.full, g.connection path.connection-path.unauthorized, .controller-bulletins.has-bulletins, path.link.selected, g.event circle.selected
900: #ba554a, // g.component rect.border.unauthorized, #connection-full-drop-shadow feFlood, text.restricted, g.connection rect.border.unauthorized, g.connection path.connection-path.full, g.connection path.connection-path.unauthorized, .controller-bulletins.has-bulletins, path.link.selected, g.event circle.selected
A100: #ffef85,
A200: #f8bf47, //text.connection-from-run-status.is-missing-port, text.connection-to-run-status.is-missing-port, g.event circle.context,
A200: #f8bf47, // g.event circle.context,
A400: #bda500, // .bulletin-warn, .has-errors, .invalid, g.event circle.context, g.connection rect.backpressure-percent.warning,
A700: #ffcc00, // g.connection.selected rect.border, g.connection path.connection-selection-path, g.connection rect.midpoint, g.label rect.labelpoint
contrast: (
@ -124,7 +120,7 @@ $surface-dark-palette: $surface-light-palette;
$success-dark-palette: $success-light-palette;
$nifi-warn-dark-palette: $nifi-warn-light-palette;
$surface-light-palette: mat.define-palette($surface-light-palette);
$surface-light-palette: mat.define-palette($surface-light-palette, 500, 100, 200);
$success-light-palette: mat.define-palette($success-light-palette, 400, 200, 800);
$nifi-warn-light-palette: mat.define-palette($nifi-warn-light-palette, 400, 200, 900);
@ -140,9 +136,9 @@ $nifi-theme-light: mat.define-light-theme(
)
);
$surface-dark-palette: mat.define-palette($surface-dark-palette);
$surface-dark-palette: mat.define-palette($surface-dark-palette, 500, 900, 800);
$success-dark-palette: mat.define-palette($success-dark-palette, 400, 200, 800);
$nifi-warn-dark-palette: mat.define-palette($nifi-warn-dark-palette, 600, 200, 800);
$nifi-warn-dark-palette: mat.define-palette($nifi-warn-dark-palette, 600, 200, 300);
$nifi-theme-dark: mat.define-dark-theme(
(

8
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/purple.scss
View File

@ -26,8 +26,8 @@ $material-accent-dark-palette: $material-accent-light-palette;
$warn-dark-palette: $warn-light-palette;
// Define the palettes for your theme
$material-primary-light: mat.define-palette($material-primary-light-palette, 400, 100, 500);
$material-accent-light: mat.define-palette($material-accent-light-palette, 500, 200, 800);
$material-primary-light: mat.define-palette($material-primary-light-palette, 700, 200, 900);
$material-accent-light: mat.define-palette($material-accent-light-palette, 600, A100, A700);
$warn-light: mat.define-palette($warn-light-palette, 400, 200, 900);
// Create the theme objects. We can extract the values we need from the theme passed into the mixins.
@ -43,8 +43,8 @@ $material-theme-light: mat.define-light-theme(
);
// Create the color palettes used in our dark theme.
$material-primary-dark: mat.define-palette($material-primary-dark-palette, 200, 50, 400);
$material-accent-dark: mat.define-palette($material-accent-dark-palette, 400, 300, 700);
$material-primary-dark: mat.define-palette($material-primary-dark-palette, 100, 100, 600);
$material-accent-dark: mat.define-palette($material-accent-dark-palette, 200, A100, 500);
$warn-dark: mat.define-palette($warn-dark-palette, 500, 200, 700);
$material-theme-dark: mat.define-dark-theme(

78
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/utils.scss
View File

@ -18,75 +18,29 @@
@use 'sass:map';
@use '@angular/material' as mat;
// Returns a contrast compliant color
@function ensure-contrast($foreground, $background, $backup: #000000) {
$ratio: contrast($foreground, $background);
$backup-ratio: contrast($backup, $background);
@if $ratio < 4.5 {
@return $backup;
} @else {
@return $foreground;
}
}
/// Gets a 'default'/'darker' `$step` surface color from the theme's 'primary'/'accent'/'warn' `$palette` default color.
/// Calculates a contrast color from the nifi theme surface palette. The color is already calculated based on light/dark mode.
///
/// NOTE: This method is typically used to get a surface color from the material theme i.e. `$theme` is the material theme
/// NOTE: This method should only be used to get a surface color from the nifi theme i.e. `$theme` should be `$nifi-theme-color-config: mat.get-color-config($nifi-theme);`
///
/// @param {Map} $theme The theme from which to extract a palette.
/// @param {String} $step The 'default'/'lighter'/'darker'/'highlight' color from which to extract from the $paletteRef.
/// @param {String} $paletteRef The 'primary'/'accent'/'warn' palette from which to extract from the $theme.
/// @returns {Color} The color calculated from the given theme, paletteRef, and step.
@function get-surface($theme, $step: 'default', $paletteRef: 'primary') {
/// @param {String} $step The 'default'/'lighter'/'medium'/'highlight' color from which to extract.
/// @returns {Color} The color calculated from the given theme, and step.
@function get-on-surface($theme, $step: default) {
// Check to see if it's a dark theme
$is-dark: map.get($theme, is-dark);
$color-config: mat.get-color-config($theme);
$color-palette: map.get($theme, $paletteRef);
$value: if(
$is-dark,
(
default: 900,
darker: 800
),
(
default: 50,
darker: 100
)
);
//Grab 50 for light themes and 900 for dark themes
$surface: mat.get-color-from-palette($color-palette, map.get($value, $step));
@return $surface;
}
/// Gets a contrast color from the theme
///
/// NOTE: This method is typically used with `$theme` being the nifi theme
///
/// @param {Map} $theme The theme from which to extract a palette.
/// @param {String} $step The 'default'/'lighter'/'darker'/'highlight' color from which to extract from the $paletteRef.
/// @param {String} $paletteRef The 'primary'/'accent'/'warn' palette from which to extract from the $theme.
/// @returns {Color} The color calculated from the given theme, paletteRef, and step.
@function get-on-surface($theme, $step: default, $paletteRef: 'primary') {
// Check to see if it's a dark theme
$is-dark: map.get($theme, is-dark);
$color-config: mat.get-color-config($theme);
$color-palette: map.get($theme, $paletteRef);
$color-palette: map.get($theme, 'primary');
$value: if($is-dark, '900-contrast', '50-contrast');
//Grab 50 for light themes and 900 for dark themes
//Grab 50-contrast for light themes and 900-contrast for dark themes
$on-surface: mat.get-color-from-palette($color-palette, $value);
$highlight: if($is-dark, 0.1, 0.07);
$list: (
default: 1,
medium: if($is-dark, 0.87, 0.55),
lighter: if($is-dark, 0.28, 0.2),
highlight: if($is-dark, 0.15, 0.05),
medium: 0.87
highlight: if($is-dark, 0.15, 0.05)
);
$alpha: map.get($list, $step);
@ -99,7 +53,7 @@
/// Gets a color with valid contrast ratio to the surface it is on.
///
/// NOTE: This method is typically used with `$theme` being the material theme while the `$surface` color is typically a nifi theme calculated by `utils.get-surface($nifi-theme-color-config);`
/// NOTE: This method is typically used with `$theme` being the material theme while the `$surface` color is typically a nifi theme surface palette lighter/darker color`
///
/// @param {Map} $theme The theme from which to extract a palette.
/// @param {Color} $surface The color of the surface from which to ensure contrast.
@ -120,6 +74,18 @@
@return $on-surface;
}
// private function Returns a contrast compliant color or the $backup color (default to #000000)
@function ensure-contrast($foreground, $background, $backup: #000000) {
$ratio: contrast($foreground, $background);
$backup-ratio: contrast($backup, $background);
@if $ratio < 4.5 {
@return $backup;
} @else {
@return $foreground;
}
}
// private function
@function contrast($foreground, $background) {
// Calculate and modify the luminosity based on the W3C formula.

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss
View File

@ -44,7 +44,6 @@
@use 'app/ui/common/status-history/status-history.component-theme' as status-history;
@use 'app/ui/common/tooltips/property-hint-tip/property-hint-tip.component-theme' as property-hint-tip;
@use 'app/pages/summary/ui/processor-status-listing/processor-status-table/processor-status-table.component-theme' as processor-status-table;
@use 'app/ui/common/component-context/component-context.component-theme' as component-context;
// Plus imports for other components in your app.
@use '@fontsource/roboto/latin.css' as roboto-normal;
@ -103,7 +102,6 @@
@include status-history.generate-theme($nifi-theme-light);
@include property-hint-tip.generate-theme($material-theme-light);
@include processor-status-table.generate-theme($nifi-theme-light);
@include component-context.generate-theme($nifi-theme-light);
@include save-version-dialog.generate-theme($material-theme-light);
.dark-theme {
@ -136,6 +134,5 @@
@include status-history.generate-theme($nifi-theme-dark);
@include property-hint-tip.generate-theme($material-theme-dark);
@include processor-status-table.generate-theme($nifi-theme-dark);
@include component-context.generate-theme($nifi-theme-dark);
@include save-version-dialog.generate-theme($material-theme-dark);
}