From 0e70f7a07e50b8ec6debc95c09ec91671de628ec Mon Sep 17 00:00:00 2001 From: Scott Aslan Date: Wed, 24 Apr 2024 16:07:32 -0400 Subject: [PATCH] [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 --- .../component-access-policies.component.html | 2 +- .../bulletin-board-list.component.ts | 2 +- .../service/canvas-utils.service.ts | 2 +- .../manager/connection-manager.service.ts | 17 +- .../service/manager/port-manager.service.ts | 2 +- .../manager/process-group-manager.service.ts | 4 +- .../remote-process-group-manager.service.ts | 2 +- .../ui/canvas/_canvas.component-theme.scss | 167 +++++++++--------- .../footer/_footer.component-theme.scss | 7 +- .../_navigation-control.component-theme.scss | 11 +- .../birdseye/_birdseye.component-theme.scss | 6 +- .../_operation-control.component-theme.scss | 8 +- .../operation-control.component.html | 4 +- .../_flow-status.component-theme.scss | 17 +- .../flow-status/flow-status.component.html | 4 +- .../flow-status/flow-status.component.ts | 2 +- .../_new-canvas-item.component-theme.scss | 24 +-- .../search/_search.component-theme.scss | 15 +- .../_prioritizers.component-theme.scss | 5 +- .../manage-remote-ports.component.html | 2 +- .../login/feature/_login.component-theme.scss | 8 +- ...r-context-inheritance.component-theme.scss | 5 +- .../feature/_provenance.component-theme.scss | 9 +- ...rovenance-event-table.component-theme.scss | 12 +- .../flow-analysis-rule-table.component.ts | 2 +- .../reporting-task-table.component.ts | 2 +- .../port-cluster-table.component.ts | 2 +- .../processor-cluster-table.component.ts | 2 +- ...e-process-group-cluster-table.component.ts | 2 +- .../port-status-table.component.ts | 2 +- ...rocessor-status-table.component-theme.scss | 8 +- .../processor-status-table.component.ts | 2 +- ...te-process-group-status-table.component.ts | 2 +- .../_component-context.component-theme.scss | 36 ---- .../_context-menu.component-theme.scss | 8 +- .../context-menu/context-menu.component.html | 12 +- ...controller-service-references.component.ts | 4 +- .../controller-service-table.component.ts | 4 +- .../_navigation.component-theme.scss | 24 ++- .../parameter-references.component.ts | 4 +- .../nf-editor/_nf-editor.component-theme.scss | 22 ++- .../_status-history.component-theme.scss | 7 +- .../src/main/nifi/src/assets/styles/_app.scss | 58 +++--- .../src/assets/styles/_listing-table.scss | 43 ++--- .../main/nifi/src/assets/themes/material.scss | 98 +--------- .../src/main/nifi/src/assets/themes/nifi.scss | 38 ++-- .../main/nifi/src/assets/themes/purple.scss | 8 +- .../src/main/nifi/src/assets/utils.scss | 78 +++----- .../src/main/nifi/src/styles.scss | 3 - 49 files changed, 333 insertions(+), 475 deletions(-) delete mode 100644 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 diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/component-access-policies.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/component-access-policies.component.html index e32c4d5f87..18810eed44 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/component-access-policies.component.html +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/component-access-policies/component-access-policies.component.html @@ -60,7 +60,7 @@
-
+
{{ policyComponentState.label }}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component.ts index 426fc933bf..1839be610e 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component.ts +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component.ts @@ -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'; diff --git a/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 b/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 index 10c56ff3fd..e3f1fcd98b 100644 --- a/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 +++ b/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 @@ -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`; } diff --git a/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 b/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 index 3cf2c574b5..809f0ed027 100644 --- a/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 +++ b/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 @@ -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'; diff --git a/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 b/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 index a0b8520139..8e5450b2fc 100644 --- a/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 +++ b/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 @@ -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; }); diff --git a/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 b/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 index 37b1402b09..e377b4f907 100644 --- a/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 +++ b/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 @@ -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) { diff --git a/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 b/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 index 8c91b736c7..c48e75cc7c 100644 --- a/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 +++ b/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 @@ -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) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss index ae039b5195..3f5ac8dbb3 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss @@ -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); } } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss index 8a72fa993b..4a30c4cd3b 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/footer/_footer.component-theme.scss @@ -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; } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss index 1291291c80..ab7a8f8e63 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/_navigation-control.component-theme.scss @@ -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); } } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/_birdseye.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/_birdseye.component-theme.scss index 35e389494e..a071dccf9d 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/_birdseye.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/_birdseye.component-theme.scss @@ -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; } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss index 69708847c3..6a22429bef 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/_operation-control.component-theme.scss @@ -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 { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.html index 03f21089f9..e35f9af139 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.html +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component.html @@ -20,7 +20,7 @@
@if (!operationCollapsed || !shouldDockWhenCollapsed) { -
Operation
+
Operation
}
@if (!operationCollapsed || !shouldDockWhenCollapsed) { @@ -39,7 +39,7 @@
-
{{ getContextName(selection) }}
+
{{ getContextName(selection) }}
{{ getContextType(selection) }}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss index 5b2fa50696..c9a0bfed27 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss @@ -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; diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.html index 7baa64aae9..156e9f15e7 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.html +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.html @@ -43,7 +43,7 @@
+ [class]="getActiveStyle(controllerStatus.inactiveRemotePortCount, 'on-surface-medium')">
{{ formatValue(controllerStatus.inactiveRemotePortCount) }}
@@ -73,7 +73,7 @@
+ [class]="getActiveStyle(controllerStatus.disabledCount, 'on-surface-medium')">
{{ formatValue(controllerStatus.disabledCount) }}
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.ts index 28fd39d02a..d27f184685 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.ts +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component.ts @@ -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'; diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss index 6a3647326c..d9f4aa7d3d 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/new-canvas-item/_new-canvas-item.component-theme.scss @@ -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; + } } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss index 3ed1a4be0a..51a1bcf7b7 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/search/_search.component-theme.scss @@ -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; } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/_prioritizers.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/_prioritizers.component-theme.scss index 674ff0fcaa..5c85ae8326 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/_prioritizers.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/prioritizers/_prioritizers.component-theme.scss @@ -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; } } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/manage-remote-ports.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/manage-remote-ports/manage-remote-ports.component.html index 174944b14b..f714465616 100644 --- a/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 +++ b/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 @@ -207,7 +207,7 @@ } @else { @if (port.connected && port.exists) {
} diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/feature/_login.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/feature/_login.component-theme.scss index c6f28f1148..c0d2ee2aee 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/feature/_login.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/feature/_login.component-theme.scss @@ -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; } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/_parameter-context-inheritance.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/_parameter-context-inheritance.component-theme.scss index 6f312aac98..1aff8bb1e2 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/_parameter-context-inheritance.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/_parameter-context-inheritance.component-theme.scss @@ -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; } } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss index 1bb338d10b..f5901d31e9 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/feature/_provenance.component-theme.scss @@ -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; } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/_provenance-event-table.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/_provenance-event-table.component-theme.scss index 7f0dc56b67..5709f34e74 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/_provenance-event-table.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/_provenance-event-table.component-theme.scss @@ -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; } } } diff --git a/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 b/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 index b25fc5333d..de351ad621 100644 --- a/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 +++ b/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 @@ -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'; } diff --git a/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 b/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 index 50eb9a44e9..b7ea47d167 100644 --- a/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 +++ b/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 @@ -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'; } } } diff --git a/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 b/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 index f672746fee..27cb023b40 100644 --- a/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 +++ b/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 @@ -115,7 +115,7 @@ export class PortClusterTable extends ComponentClusterTable -
+
@for (item of getMenuItems(menuId); track item) { @if (item.isSeparator) {
@@ -29,8 +25,8 @@ @if (menuComponent.menu; as subMenu) { }
-
{{ item.text }}
+
{{ item.text }}
} } diff --git a/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 b/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 index 8f0a12b9dd..27e0673340 100644 --- a/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 +++ b/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 @@ -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'; } } diff --git a/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 b/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 index b095b664f0..1bd28cfbb9 100644 --- a/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 +++ b/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 @@ -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') { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss index 032c18bea2..e932f7f1da 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/navigation/_navigation.component-theme.scss @@ -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; diff --git a/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 b/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 index bb44f280d6..0ceceaf968 100644 --- a/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 +++ b/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 @@ -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'; } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/_nf-editor.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/_nf-editor.component-theme.scss index 8fe7ad85de..4b31dd653f 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/_nf-editor.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/_nf-editor.component-theme.scss @@ -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; } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss index 0a8e1bb6b9..c2ecf600fd 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss @@ -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; } } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss index 361f73640e..bebff291c2 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss @@ -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 { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table.scss index 99dece746b..17e4ed59c0 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table.scss @@ -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); - //} } } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/material.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/material.scss index efdb4fa157..b2354a784c 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/material.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/material.scss @@ -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( diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss index 3746b4de04..5de3801b06 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss @@ -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( ( diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/purple.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/purple.scss index db8a6f7c44..a73b325348 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/purple.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/purple.scss @@ -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( diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/utils.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/utils.scss index 2c63e653dc..2cf292ca98 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/utils.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/utils.scss @@ -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. diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss index 1bad5b0310..030b43ada9 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss @@ -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); }