From 4fc19e46b9d0f4fe4e6d2f56093d97c93d1e9b73 Mon Sep 17 00:00:00 2001 From: James Mingardi-Elliott Date: Tue, 27 Feb 2024 16:57:13 -0500 Subject: [PATCH] NIFI-12870 Semantic colors Next step to color theming Update theming to reference colors semantically Material and Canvas palettes are reordered so that in all cases they go from 50 = lightest / least amount of color to 900 = darkest / most amount of color applied. Usage of color has been changed so that Material's primary, accent, and warn values are used by semantic reference of 'default', 'lighter' and 'darker' rather than explicit number values. The Canvas palettes still have values referenced directly because they are a special case. Added SASS utilities: - To help ensure color contrast for text and backgrounds by checking for a 4.5:1 contrast ratio. - To provide helper functions that somewhat replicate Material designs approach to Surface and On Surface concepts. This is how the same Canvas palettes can be used for light and dark modes. Some minor tweaks to the styling of the flow canvas to bring custom NiFi components and the Angular Material components closer together visually. Moved the Canvas theme declaration to a separate file so the Material themes can be more easily swapped out without needing to redeclare the Canvas themes. --- .../src/main/nifi/angular.json | 3 +- .../nifi/src/app/_app.component-theme.scss | 16 +- .../_access-policies.component-theme.scss | 4 +- ...nant-to-policy-dialog.component-theme.scss | 4 +- .../override-policy-dialog.component.html | 4 +- ...onent-access-policies.component-theme.scss | 16 +- .../feature/_bulletins.component-theme.scss | 4 +- .../_bulletin-board-list.component-theme.scss | 13 +- .../bulletin-board.component.html | 2 +- .../feature/_counters.component-theme.scss | 4 +- .../service/canvas-utils.service.ts | 4 +- .../manager/connection-manager.service.ts | 6 +- .../service/manager/port-manager.service.ts | 8 +- .../manager/process-group-manager.service.ts | 4 +- .../manager/processor-manager.service.ts | 10 +- .../ui/canvas/_canvas.component-theme.scss | 326 +++++++------ .../ui/canvas/canvas.component.scss | 4 - .../ui/canvas/canvas.component.ts | 4 +- .../footer/_footer.component-theme.scss | 19 +- .../_navigation-control.component-theme.scss | 28 +- .../birdseye/_birdseye.component-theme.scss | 13 +- .../_operation-control.component-theme.scss | 38 +- .../header/_header.component-theme.scss | 7 - .../_flow-status.component-theme.scss | 34 +- .../_new-canvas-item.component-theme.scss | 43 +- .../search/_search.component-theme.scss | 29 +- .../_prioritizers.component-theme.scss | 25 +- ..._create-process-group.component-theme.scss | 6 +- .../relationship-settings.component.html | 4 +- ...-remote-process-group.component-theme.scss | 2 +- .../banner/_banner.component-theme.scss | 8 +- .../_controller-services.component-theme.scss | 4 +- .../_manage-remote-ports.component-theme.scss | 10 +- .../login/feature/_login.component-theme.scss | 10 +- .../_login-form.component-theme.scss | 4 +- .../_parameter-contexts.component-theme.scss | 4 +- ...r-context-inheritance.component-theme.scss | 25 +- .../feature/_provenance.component-theme.scss | 36 +- ...rovenance-event-table.component-theme.scss | 13 +- .../lineage/_lineage.component-theme.scss | 26 +- .../lineage/lineage.component.ts | 2 +- .../_flowfile-dialog.component-theme.scss | 4 +- .../_flowfile-table.component-theme.scss | 8 +- .../feature/_settings.component-theme.scss | 11 +- .../feature/_summary.component-theme.scss | 11 +- .../users/feature/_users.component-theme.scss | 4 +- .../_component-context.component-theme.scss | 14 +- .../_context-menu.component-theme.scss | 30 +- .../edit-parameter-dialog.component.html | 4 +- .../edit-tenant-dialog.component.html | 4 +- .../_extension-creation.component-theme.scss | 54 +- .../_navigation.component-theme.scss | 43 +- .../new-property-dialog.component.html | 4 +- .../nf-editor/_nf-editor.component-theme.scss | 30 +- ...ovenance-event-dialog.component-theme.scss | 4 +- .../resizable/_resizable.component-theme.scss | 6 +- .../_status-history.component-theme.scss | 9 +- ...em-diagnostics-dialog.component-theme.scss | 4 +- .../_property-hint-tip.component-theme.scss | 4 +- .../assets/styles/_listing-table-theme.scss | 46 +- .../nifi/src/assets/themes/nifi-canvas.scss | 186 +++++++ .../src/main/nifi/src/assets/themes/nifi.scss | 461 ++++-------------- .../main/nifi/src/assets/themes/purple.scss | 422 +++------------- .../src/main/nifi/src/assets/utils.scss | 186 +++++++ .../src/main/nifi/src/styles.scss | 150 +++--- 65 files changed, 1173 insertions(+), 1352 deletions(-) create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi-canvas.scss create mode 100644 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/utils.scss diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/angular.json b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/angular.json index 7ec3cfdd5448..84c1979e8237 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/angular.json +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/angular.json @@ -98,6 +98,7 @@ } }, "cli": { - "schematicCollections": ["@angular-eslint/schematics"] + "schematicCollections": ["@angular-eslint/schematics"], + "analytics": false } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/_app.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/_app.component-theme.scss index b3f95a096847..9c9b304e34dd 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/_app.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/_app.component-theme.scss @@ -30,19 +30,19 @@ $canvas-accent-palette: map.get($canvas-color-config, 'accent'); // Get hues from palette - $primary-palette-300: mat.get-color-from-palette($primary-palette, 300); - $primary-palette-500: mat.get-color-from-palette($primary-palette, 500); - $accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400'); + $primary-palette-lighter: mat.get-color-from-palette($primary-palette, lighter); + $primary-palette-default: mat.get-color-from-palette($primary-palette, default); + $accent-palette-default: mat.get-color-from-palette($accent-palette, 'default'); $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200'); - $canvas-accent-palette-500: mat.get-color-from-palette($canvas-accent-palette, 500); + $canvas-accent-palette-default: mat.get-color-from-palette($canvas-accent-palette, default); .splash { - background-color: $primary-palette-500; + background-color: $primary-palette-default; } // https://github.com/angular/components/issues/11426 .nifi-snackbar .mdc-snackbar__surface { - background-color: $primary-palette-300 !important; + background-color: $primary-palette-lighter !important; } // https://github.com/angular/components/issues/11426 @@ -52,10 +52,10 @@ // https://github.com/angular/components/issues/11426 .nifi-snackbar .mat-mdc-button:not(:disabled) .mdc-button__label { - color: $accent-palette-A400; + color: $accent-palette-default; } .fa.fa-check.complete { - color: $canvas-accent-palette-500; + color: $canvas-accent-palette-default; } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/_access-policies.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/_access-policies.component-theme.scss index 4cbbf1465a74..ac09e0890495 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/_access-policies.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/feature/_access-policies.component-theme.scss @@ -26,9 +26,9 @@ $primary-palette: map.get($color-config, 'primary'); // Get hues from palette - $primary-palette-500: mat.get-color-from-palette($primary-palette, 500); + $primary-palette-default: mat.get-color-from-palette($primary-palette, default); .access-policies-header { - color: $primary-palette-500; + color: $primary-palette-default; } } 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/common/add-tenant-to-policy-dialog/_add-tenant-to-policy-dialog.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/_add-tenant-to-policy-dialog.component-theme.scss index 2476207bdd4f..89844e18b2ab 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/_add-tenant-to-policy-dialog.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/_add-tenant-to-policy-dialog.component-theme.scss @@ -26,11 +26,11 @@ $accent-palette: map.get($color-config, 'accent'); // Get hues from palette - $accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400'); + $accent-palette-default: mat.get-color-from-palette($accent-palette, 'default'); .add-tenant-to-policy-form { .fa { - color: $accent-palette-A400; + color: $accent-palette-default; } } } 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/common/override-policy-dialog/override-policy-dialog.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/common/override-policy-dialog/override-policy-dialog.component.html index 6fbdd6c2fa05..715a7e693396 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/override-policy-dialog/override-policy-dialog.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/common/override-policy-dialog/override-policy-dialog.component.html @@ -20,8 +20,8 @@

Override Policy

Do you want to override with a copy of the inherited policy or an empty policy?
- Copy - Empty + Copy + Empty 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-theme.scss 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-theme.scss index 0878ecc65d99..2055d2131ecf 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-theme.scss +++ 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-theme.scss @@ -17,6 +17,7 @@ @use 'sass:map'; @use '@angular/material' as mat; +@use '../../../../../assets/utils.scss' as utils; @mixin nifi-theme($material-theme, $canvas-theme) { // Get the color config from the theme. @@ -25,27 +26,26 @@ // Get the color palette from the color-config. $primary-palette: map.get($color-config, 'primary'); - $warn-palette: map.get($color-config, 'warn'); - $canvas-primary-palette: map.get($canvas-color-config, 'primary'); + $accent-palette: map.get($color-config, 'accent'); // Get hues from palette - $primary-palette-700: mat.get-color-from-palette($primary-palette, 700); - $warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200'); - $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200'); + $primary-palette-darker: mat.get-color-from-palette($primary-palette, darker); + $accent-palette-default: mat.get-color-from-palette($accent-palette, 'default'); + $on-surface: utils.get-on-surface($canvas-color-config); .component-access-policies { .operation-context-logo { .icon { - color: $warn-palette-A200; + color: $accent-palette-default; } } .operation-context-name { - color: $canvas-primary-palette-A200; + color: $on-surface; } .operation-context-type { - color: $primary-palette-700; + color: $primary-palette-darker; } } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/_bulletins.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/_bulletins.component-theme.scss index 572454e25313..6aec26c0d06a 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/_bulletins.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/feature/_bulletins.component-theme.scss @@ -26,9 +26,9 @@ $primary-palette: map.get($color-config, 'primary'); // Get hues from palette - $primary-palette-500: mat.get-color-from-palette($primary-palette, 500); + $primary-palette-default: mat.get-color-from-palette($primary-palette, default); .bulletin-board-header { - color: $primary-palette-500; + color: $primary-palette-default; } } 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-theme.scss 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-theme.scss index 3e8f1351d61a..e28a0568bc7e 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-theme.scss +++ 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-theme.scss @@ -26,21 +26,22 @@ // Get the color palette from the color-config. $warn-palette: map.get($color-config, 'warn'); $canvas-accent-palette: map.get($canvas-color-config, 'accent'); + $canvas-warn-palette: map.get($canvas-color-config, 'warn'); // Get hues from palette - $canvas-accent-palette-700: mat.get-color-from-palette($canvas-accent-palette, 700); - $canvas-accent-palette-A400: mat.get-color-from-palette($canvas-accent-palette, 'A400'); - $warn-palette-600: mat.get-color-from-palette($warn-palette, 600); + $canvas-accent-palette-darker: mat.get-color-from-palette($canvas-accent-palette, darker); + $canvas-warn-palette-A400: mat.get-color-from-palette($canvas-warn-palette, 'A400'); + $warn-palette-default: mat.get-color-from-palette($warn-palette, default); .bulletin-error { - color: $warn-palette-600; + color: $warn-palette-default; } .bulletin-warn { - color: $canvas-accent-palette-A400; + color: $canvas-warn-palette-A400; } .bulletin-normal { - color: $canvas-accent-palette-700; + color: $canvas-accent-palette-darker; } } 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.component.html 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.component.html index 043f3a6fa8fd..1b5df94263d1 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.component.html +++ 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.component.html @@ -30,7 +30,7 @@
- Auto-refresh
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/_counters.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/_counters.component-theme.scss index d1954ee3dd5a..4f997617a8ee 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/_counters.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/counters/feature/_counters.component-theme.scss @@ -26,9 +26,9 @@ $primary-palette: map.get($color-config, 'primary'); // Get hues from palette - $primary-palette-500: mat.get-color-from-palette($primary-palette, 500); + $primary-palette-default: mat.get-color-from-palette($primary-palette, default); .counter-header { - color: $primary-palette-500; + color: $primary-palette-default; } } 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 4f3c284e822c..30d4cb21ca7d 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 @@ -1253,9 +1253,9 @@ export class CanvasUtils { }) .attr('class', function () { if (terminatedThreads > 0) { - return `active-thread-count-icon warn-400`; + return `active-thread-count-icon warn-default`; } else { - return `active-thread-count-icon primary-500`; + return `active-thread-count-icon primary-default`; } }) .style('display', 'block') 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 1fbc0d7f0347..616e77b860a3 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 @@ -1424,16 +1424,16 @@ export class ConnectionManager { // update the coloring of the backgrounds backgrounds.forEach((background, i) => { if (i % 2 === 0) { - background.attr('class', 'primary-contrast-800'); + background.attr('class', 'surface-darker'); } else { - background.attr('class', 'primary-contrast-900'); + background.attr('class', 'surface'); } }); // update the coloring of the label borders borders.forEach((border, i) => { if (i > 0) { - border.attr('class', 'primary-200'); + border.attr('class', 'canvas-primary-lighter'); } else { border.attr('class', '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/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 0def655caaf0..39025cce2c88 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 @@ -386,14 +386,14 @@ export class PortManager { updated .select('text.run-status-icon') .attr('class', function (d: any) { - let clazz = 'primary-500'; + let clazz = 'primary-default'; if (d.status.aggregateSnapshot.runStatus === 'Invalid') { - clazz = 'canvas-accent-A200'; + clazz = 'canvas-warn-A200'; } else if (d.status.aggregateSnapshot.runStatus === 'Running') { - clazz = 'canvas-accent-200'; + clazz = 'canvas-accent-lighter'; } else if (d.status.aggregateSnapshot.runStatus === 'Stopped') { - clazz = 'warn-200'; + clazz = 'warn-lighter'; } return `run-status-icon ${clazz}`; 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 d7120dab75b3..d5d4e09dfe64 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 @@ -1087,10 +1087,10 @@ export class ProcessGroupManager { } else if (vciState === 'LOCALLY_MODIFIED') { return `version-control primary-contrast-A700`; } else { - return `version-control canvas-accent-600`; + return `version-control canvas-accent-darker`; } } else { - return 'version-control primary-contrast-200'; + return 'version-control on-surface'; } }) .text(function () { 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/processor-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/processor-manager.service.ts index 21b86db0aa1a..9c176c040b11 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/processor-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/processor-manager.service.ts @@ -670,16 +670,16 @@ export class ProcessorManager { updated .select('text.run-status-icon') .attr('class', function (d: any) { - let clazz = 'primary-500'; + let clazz = 'primary-default'; if (d.status.aggregateSnapshot.runStatus === 'Validating') { - clazz = 'warn-contrast-300'; + clazz = 'canvas-primary-500'; } else if (d.status.aggregateSnapshot.runStatus === 'Invalid') { - clazz = 'canvas-accent-A400'; + clazz = 'canvas-warn-A200'; } else if (d.status.aggregateSnapshot.runStatus === 'Running') { - clazz = 'canvas-accent-200'; + clazz = 'canvas-accent-lighter'; } else if (d.status.aggregateSnapshot.runStatus === 'Stopped') { - clazz = 'warn-200'; + clazz = 'warn-lighter'; } return `run-status-icon ${clazz}`; 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 5dee394e9900..ea4df773854d 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 @@ -17,6 +17,7 @@ @use 'sass:map'; @use '@angular/material' as mat; +@use '../../../../../assets/utils.scss' as utils; @mixin nifi-theme($material-theme, $canvas-theme) { // Get the color config from the theme. @@ -29,51 +30,58 @@ $warn-palette: map.get($color-config, 'warn'); $canvas-primary-palette: map.get($canvas-color-config, 'primary'); $canvas-accent-palette: map.get($canvas-color-config, 'accent'); + $canvas-warn-palette: map.get($canvas-color-config, 'warn'); // Get hues from palette - $primary-palette-100: mat.get-color-from-palette($primary-palette, 100); - $primary-palette-200: mat.get-color-from-palette($primary-palette, 200); - $primary-palette-500: mat.get-color-from-palette($primary-palette, 500); - $accent-palette-A200: mat.get-color-from-palette($accent-palette, 'A200'); - $accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400'); - $canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50); - $canvas-primary-palette-200: mat.get-color-from-palette($canvas-primary-palette, 200); - $canvas-primary-palette-300: mat.get-color-from-palette($canvas-primary-palette, 300); - $canvas-primary-palette-400: mat.get-color-from-palette($canvas-primary-palette, 400); + $primary-palette-lighter: mat.get-color-from-palette($primary-palette, lighter); + $primary-palette-default: mat.get-color-from-palette($primary-palette, 'default'); + $primary-palette-lighter-contrast: mat.get-color-from-palette($primary-palette, lighter-contrast); + $primary-palette-default-contrast: mat.get-color-from-palette($primary-palette, 'default-contrast'); + $accent-palette-default: mat.get-color-from-palette($accent-palette, 'default'); + $accent-palette-darker: mat.get-color-from-palette($accent-palette, 'darker'); + + // Canvas colors $canvas-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500); - $canvas-primary-palette-600: mat.get-color-from-palette($canvas-primary-palette, 600); - $canvas-primary-palette-700: mat.get-color-from-palette($canvas-primary-palette, 700); - $canvas-primary-palette-800: mat.get-color-from-palette($canvas-primary-palette, 800); - $canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900); + $canvas-primary-palette-A100: mat.get-color-from-palette($canvas-primary-palette, A100); $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200'); - $canvas-primary-palette-A400: mat.get-color-from-palette($canvas-primary-palette, 'A400'); $canvas-primary-palette-A700: mat.get-color-from-palette($canvas-primary-palette, 'A700'); - $canvas-accent-palette-200: mat.get-color-from-palette($canvas-accent-palette, 200); - $canvas-accent-palette-300: mat.get-color-from-palette($canvas-accent-palette, 300); - $canvas-accent-palette-600: mat.get-color-from-palette($canvas-accent-palette, 600); - $canvas-accent-palette-800: mat.get-color-from-palette($canvas-accent-palette, 800); - $canvas-accent-palette-900: mat.get-color-from-palette($canvas-accent-palette, 900); - $canvas-accent-palette-A200: mat.get-color-from-palette($canvas-accent-palette, 'A200'); - $canvas-accent-palette-A400: mat.get-color-from-palette($canvas-accent-palette, 'A400'); + $canvas-accent-palette-lighter: mat.get-color-from-palette($canvas-accent-palette, lighter); + $canvas-accent-palette-default: mat.get-color-from-palette($canvas-accent-palette, default); + $canvas-accent-palette-darker: mat.get-color-from-palette($canvas-accent-palette, darker); $canvas-accent-palette-A700: mat.get-color-from-palette($canvas-accent-palette, 'A700'); - $warn-palette-200: mat.get-color-from-palette($warn-palette, 200); + $canvas-accent-palette-500: mat.get-color-from-palette($canvas-accent-palette, 500); + $canvas-warn-palette-800: mat.get-color-from-palette($canvas-warn-palette, 800); + $canvas-warn-palette-A200: mat.get-color-from-palette($canvas-warn-palette, 'A200'); + $canvas-warn-palette-A400: mat.get-color-from-palette($canvas-warn-palette, 'A400'); + $canvas-warn-palette-A700: mat.get-color-from-palette($canvas-warn-palette, 'A700'); $warn-palette-400: mat.get-color-from-palette($warn-palette, 400); - $warn-palette-800: mat.get-color-from-palette($warn-palette, 800); - $warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200'); - $warn-palette-A400: mat.get-color-from-palette($warn-palette, 'A400'); - $warn-palette-A700: mat.get-color-from-palette($warn-palette, 'A700'); + $warn-palette-700: mat.get-color-from-palette($warn-palette, 700); + $warn-palette-lighter: mat.get-color-from-palette($warn-palette, lighter); + $warn-palette-default: mat.get-color-from-palette($warn-palette, 'default'); + $warn-palette-darker: mat.get-color-from-palette($warn-palette, 'darker'); + + // 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($canvas-color-config, is-dark); + + $surface: utils.get-surface($canvas-color-config); + $surface-darker: utils.get-surface($canvas-color-config, darker); + $on-surface: utils.get-on-surface($canvas-color-config); + $on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter); + $on-surface-medium: utils.get-on-surface($canvas-color-config, medium); + $surface-alt: utils.get-surface($canvas-color-config, default, 'accent'); .canvas-background { - background-color: $canvas-primary-palette-600; - background-image: linear-gradient(to right, $canvas-primary-palette-700 1px, transparent 1px), - linear-gradient(to bottom, $canvas-primary-palette-700 1px, transparent 1px); + background-color: $surface-darker; + background-image: linear-gradient(to right, $surface-alt 1px, transparent 1px), + linear-gradient(to bottom, $surface-alt 1px, transparent 1px); } /* svg styles */ svg.canvas-svg { text.unset { - fill: $canvas-primary-palette-400; + fill: $canvas-primary-palette-500; } /* @@ -83,60 +91,60 @@ fill: transparent; } - .warn-200 { - fill: $warn-palette-200; + .warn-lighter { + fill: $warn-palette-lighter; } .warn-400 { fill: $warn-palette-400; } - .warn-A700 { - fill: $warn-palette-A700; + .warn-default { + fill: $warn-palette-default; } - .warn-contrast-300 { - fill: $canvas-primary-palette-400; + .canvas-primary-500 { + fill: $canvas-primary-palette-500; } - .canvas-accent-200 { - fill: $canvas-accent-palette-200; + .canvas-accent-lighter { + fill: $canvas-accent-palette-lighter; } - .canvas-accent-600 { - fill: $canvas-accent-palette-600; + .canvas-primary-lighter { + fill: $canvas-primary-palette-A200; } - .canvas-accent-A200 { - fill: $canvas-accent-palette-A200; + .canvas-accent-darker { + fill: $canvas-accent-palette-darker; } - .canvas-accent-A400 { - fill: $canvas-accent-palette-A400; + .canvas-warn-A200 { + fill: $canvas-warn-palette-A200; } - .primary-200 { - fill: $primary-palette-200; + .primary-lighter { + fill: $primary-palette-lighter; } - .primary-500 { - fill: $primary-palette-500; + .primary-default { + fill: $primary-palette-default; } - .primary-contrast-200 { - fill: $canvas-primary-palette-200; + .on-surface { + fill: $on-surface; } - .primary-contrast-300 { - fill: $canvas-primary-palette-300; + .canvas-primary-palette-500 { + fill: $canvas-primary-palette-500; } - .primary-contrast-800 { - fill: $canvas-primary-palette-800; + .surface-darker { + fill: $surface-darker; } - .primary-contrast-900 { - fill: $canvas-primary-palette-900; + .surface { + fill: $surface; } .primary-contrast-A700 { @@ -144,64 +152,70 @@ } g.component rect.body { - fill: $canvas-primary-palette-900; + fill: $surface; } g.component rect.body.unauthorized { - fill: $canvas-primary-palette-700; + fill: $surface-darker; } - g.component rect.border { - stroke: $canvas-primary-palette-50; + g.component rect.border, + g.connections rect.border { + stroke: $on-surface-lighter; + stroke-width: if( + $is-dark, + 2, + 1 + ); // Dark mode gets a wider stroke to provide contrast between the canvas and components } g.component rect.border.unauthorized { - stroke: $warn-palette-400 !important; + stroke: $warn-palette-darker !important; } g.component rect.border.ghost { - stroke: $canvas-primary-palette-400 !important; + stroke: $canvas-primary-palette-500 !important; } g.component rect.processor-icon-container.unauthorized { - fill: $canvas-primary-palette-700 !important; + fill: $surface-darker; } g.component.selected rect.border { - stroke: $accent-palette-A400 !important; + stroke: utils.get-color-on-surface($color-config, $surface); } text.stats-label { - fill: $canvas-primary-palette-A200; + fill: $on-surface-medium; } text.stats-value { - fill: $warn-palette-A400; + fill: utils.get-color-on-surface($color-config, $surface, 'accent'); } text.stats-info { - fill: $primary-palette-500; + fill: utils.get-color-on-surface($color-config, $surface); } text.bulletin-icon { - fill: $canvas-primary-palette-900; + fill: $surface; } rect.bulletin-background { - fill: $warn-palette-400; + fill: utils.get-color-on-surface($color-config, $surface, 'warn'); } text.active-thread-count-icon { - fill: $primary-palette-500; + fill: $primary-palette-default; } text.active-thread-count { - fill: $warn-palette-A400; + fill: $accent-palette-darker; } path.component-comments { - fill: $canvas-primary-palette-50; - stroke: $canvas-primary-palette-50; + fill: $canvas-primary-palette-A200; + stroke: $canvas-primary-palette-A200; } /* @@ -209,49 +223,49 @@ */ g.component.connectable-destination rect.border { - stroke: $canvas-accent-palette-900; + stroke: $canvas-accent-palette-500; } rect.component-selection, rect.drag-selection, rect.label-drag { - stroke: $canvas-primary-palette-A400; + stroke: $on-surface-medium; fill: transparent; } text.add-connect { - fill: $accent-palette-A400; + fill: utils.get-color-on-surface($color-config, $surface); } /* Processor */ #component-drop-shadow feFlood { - flood-color: $canvas-primary-palette-200; + flood-color: $drop-shadow-color; } #connection-full-drop-shadow feFlood { - flood-color: $warn-palette-400; + flood-color: $warn-palette-default; } rect.processor-read-write-stats { - fill: $canvas-primary-palette-900; + fill: $surface; } rect.processor-stats-border { - fill: $primary-palette-200; + fill: $on-surface-lighter; } rect.processor-stats-in-out { - fill: $canvas-primary-palette-800; + fill: $surface-darker; } text.processor-name { - fill: $canvas-primary-palette-A200; + fill: $on-surface-medium; } text.processor-type { - fill: $primary-palette-500; + fill: utils.get-color-on-surface($color-config, $surface, 'accent'); } text.processor-bundle { @@ -259,16 +273,16 @@ } rect.processor-icon-container { - fill: $canvas-primary-palette-900; + fill: $surface; } circle.restricted-background, circle.is-primary-background { - fill: $canvas-primary-palette-900; + fill: $surface; } text.restricted { - fill: $warn-palette-400; + fill: $warn-palette-default; } /* @@ -276,44 +290,44 @@ */ g.connection rect.body { - fill: $canvas-primary-palette-900; + fill: $surface; } g.connection rect.body.unauthorized { - fill: $canvas-primary-palette-700; + fill: $surface-darker; } g.connection rect.border.unauthorized { - stroke: $warn-palette-400; + stroke: $warn-palette-default; } g.connection rect.border.full { - stroke: $warn-palette-A700; + stroke: $accent-palette-darker; } g.connection.selected rect.border { - stroke: $canvas-accent-palette-A700; + stroke: $canvas-warn-palette-A700; } path.connector { - stroke: $warn-palette-800; + stroke: $warn-palette-700; } path.connector.connectable { - stroke: $canvas-accent-palette-900; + stroke: $canvas-accent-palette-500; } g.connection path.connection-path { fill: none; - stroke: $canvas-primary-palette-50; + stroke: $on-surface; } g.connection path.connection-path.full { - stroke: $warn-palette-400; + stroke: $warn-palette-default; } g.connection path.connection-path.unauthorized { - stroke: $warn-palette-400; + stroke: $warn-palette-default; } text.connection-from-run-status, @@ -321,17 +335,16 @@ text.expiration-icon, text.load-balance-icon, text.penalized-icon { - fill: $primary-palette-500; - text-shadow: 0 0 4px $canvas-primary-palette-900; + fill: $primary-palette-default; } text.load-balance-icon-active { - fill: $accent-palette-A200; + fill: $accent-palette-darker; } text.connection-from-run-status.is-missing-port, text.connection-to-run-status.is-missing-port { - fill: $canvas-accent-palette-A200; + fill: $canvas-warn-palette-A200; } g.connection rect.backpressure-tick { @@ -340,12 +353,12 @@ g.connection rect.backpressure-tick.data-size-prediction.prediction-down, g.connection rect.backpressure-tick.object-prediction.prediction-down { - fill: $canvas-primary-palette-900; + fill: $surface; } g.connection rect.backpressure-tick.data-size-prediction, g.connection rect.backpressure-tick.object-prediction { - fill: $canvas-primary-palette-50; + fill: $canvas-primary-palette-A200; } g.connection rect.backpressure-tick.data-size-prediction.not-configured, @@ -356,12 +369,12 @@ } g.connection rect.backpressure-tick.not-configured { - fill: $canvas-primary-palette-400; + fill: $canvas-primary-palette-500; } g.connection rect.backpressure-object, g.connection rect.backpressure-data-size { - fill: $canvas-primary-palette-500; + fill: $on-surface-lighter; } g.connection rect.backpressure-object.not-configured, @@ -370,26 +383,26 @@ } g.connection rect.backpressure-percent { - fill: $canvas-accent-palette-300; + fill: $canvas-accent-palette-default; } g.connection rect.backpressure-percent.warning { - fill: $canvas-accent-palette-A400; + fill: $canvas-warn-palette-A400; } g.connection rect.backpressure-percent.error { - fill: $warn-palette-400; + fill: $warn-palette-default; } /* ghost connection */ g.connection.ghost path.connection-path, g.connection.ghost rect.connection-label { - stroke: $canvas-primary-palette-400; + stroke: $canvas-primary-palette-500; } g.connection path.connection-selection-path { - stroke: $canvas-accent-palette-A700; + stroke: $canvas-warn-palette-A700; fill: none; } @@ -398,141 +411,134 @@ } g.connection rect.startpoint { - stroke: $warn-palette-800; - fill: $warn-palette-800; + stroke: $canvas-warn-palette-800; + fill: $canvas-warn-palette-800; } g.connection rect.midpoint { - stroke: $canvas-accent-palette-A700; - fill: $canvas-accent-palette-A700; + stroke: $canvas-warn-palette-A700; + fill: $canvas-warn-palette-A700; } g.connection rect.endpoint { - stroke: $canvas-accent-palette-800; - fill: $canvas-accent-palette-800; + stroke: $canvas-accent-palette-A700; + fill: $canvas-accent-palette-A700; } /* labels */ g.label rect.labelpoint { - stroke: $canvas-accent-palette-A700; - fill: $canvas-accent-palette-A700; + stroke: $canvas-warn-palette-A700; + fill: $canvas-warn-palette-A700; } /* funnels */ text.funnel-icon { - fill: $warn-palette-A200; + fill: $accent-palette-default; } /* ports */ text.port-name { - fill: $canvas-primary-palette-A200; + fill: $on-surface-medium; } text.port-icon { - fill: $warn-palette-A200; + fill: $accent-palette-default; } rect.remote-banner { - fill: $primary-palette-100; + fill: $surface-alt; } text.port-transmission-icon { - fill: $primary-palette-500; + fill: utils.get-color-on-surface($color-config, $surface-alt); } /* process groups */ rect.process-group-stats-in-out { - fill: $canvas-primary-palette-900; + fill: $surface; } rect.process-group-stats-border { - fill: $primary-palette-200; + fill: $on-surface-lighter; } rect.process-group-queued-stats { - fill: $canvas-primary-palette-800; + fill: $surface-darker; } rect.process-group-read-write-stats { - fill: $canvas-primary-palette-800; + fill: $surface-darker; } - rect.process-group-details-banner { - fill: $primary-palette-100; + rect.process-group-details-banner, + rect.remote-process-group-details-banner, + rect.remote-process-group-last-refresh-rect { + fill: $surface-alt; } - text.process-group-name { - fill: $canvas-primary-palette-A200; + text.version-control { + text-shadow: 0 0 4px $surface; } - text.version-control { - text-shadow: 0 0 4px $canvas-primary-palette-900; + $pg-surface: utils.ensure-contrast( + $primary-palette-default, + $primary-palette-default-contrast, + $primary-palette-lighter + ); + rect.process-group-banner, + rect.remote-process-group-banner { + fill: $pg-surface; } - rect.process-group-banner { - fill: $primary-palette-200; + text.process-group-name, + text.remote-process-group-name { + fill: utils.ensure-contrast($primary-palette-default-contrast, $pg-surface, $on-surface-medium); } text.process-group-contents-count { - fill: $warn-palette-A400; + fill: utils.get-color-on-surface($color-config, $surface, 'accent'); } g.process-group.drop rect.border { - stroke: $canvas-accent-palette-800; + stroke: $canvas-accent-palette-A700; } text.process-group-contents-icon { - fill: $primary-palette-500; + fill: $primary-palette-default; } /* remote process group */ rect.remote-process-group-stats-border { - fill: $primary-palette-200; + fill: $on-surface-lighter; } rect.remote-process-group-sent-stats { - fill: $canvas-primary-palette-800; + fill: $surface-darker; } rect.remote-process-group-received-stats { - fill: $canvas-primary-palette-900; - } - - rect.remote-process-group-details-banner { - fill: $primary-palette-100; - } - - rect.remote-process-group-last-refresh-rect { - fill: $primary-palette-100; - } - - text.remote-process-group-name { - fill: $canvas-primary-palette-A200; + fill: $surface; } text.remote-process-group-uri { - fill: $accent-palette-A400; - } - - rect.remote-process-group-banner { - fill: $primary-palette-200; + fill: utils.get-color-on-surface($color-config, $surface); } text.remote-process-group-transmission-status { - fill: $primary-palette-500; + fill: $primary-palette-default-contrast; } text.remote-process-group-transmission-secure { - fill: $accent-palette-A400; + fill: utils.get-color-on-surface($color-config, $surface); } text.remote-process-group-last-refresh { - fill: $primary-palette-500; + fill: utils.get-color-on-surface($color-config, $surface); } } } 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.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.scss index c52049eb4910..4d8ef1fdb915 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.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.scss @@ -47,10 +47,6 @@ font-family: Roboto; } - g.component rect.border { - stroke-width: 1; - } - g.component rect.border.unauthorized { stroke-width: 3; stroke-dasharray: 4; 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.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/canvas.component.ts index 37686388219f..ef2ad47503ef 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.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/canvas.component.ts @@ -339,13 +339,13 @@ export class Canvas implements OnInit, OnDestroy { .attr('orient', 'auto') .attr('class', function (d: string) { if (d === 'ghost') { - return 'primary-contrast-300'; + return 'canvas-primary-palette-500'; } else if (d === 'unauthorized') { return 'warn-400'; } else if (d === 'full') { return 'warn-400'; } else { - return 'primary-contrast-200'; + return 'on-surface'; } }) .append('path') 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 c39b21fd62dc..b55d8333ec88 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 @@ -17,26 +17,25 @@ @use 'sass:map'; @use '@angular/material' as mat; +@use '../../../../../../assets/utils.scss' as utils; @mixin nifi-theme($material-theme, $canvas-theme) { // Get the color config from the theme. - $color-config: mat.get-color-config($material-theme); $canvas-color-config: mat.get-color-config($canvas-theme); // Get the color palette from the color-config. - $primary-palette: map.get($color-config, 'primary'); $canvas-primary-palette: map.get($canvas-color-config, 'primary'); // Get hues from palette - $primary-palette-300: mat.get-color-from-palette($primary-palette, 300); - $primary-palette-600: mat.get-color-from-palette($primary-palette, 600); - $canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50); - $canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900); + $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, A200); + $surface: utils.get-surface($canvas-color-config); + $on-surface: utils.get-on-surface($canvas-color-config); + $on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter); .breadcrumb-container { - box-shadow: 0 1px 6px $canvas-primary-palette-50; - background-color: $canvas-primary-palette-900; - border-top: 1px solid $primary-palette-300; - color: $primary-palette-600; + box-shadow: 0 1px 6px $canvas-primary-palette-A200; + background-color: $surface; + border-top: 1px solid $on-surface-lighter; + color: $on-surface; } } 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 48c907926fad..85bb7748aa54 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 @@ -17,6 +17,7 @@ @use 'sass:map'; @use '@angular/material' as mat; +@use '../../../../../../../assets/utils.scss' as utils; @mixin nifi-theme($material-theme, $canvas-theme) { // Get the color config from the theme. @@ -24,39 +25,34 @@ $canvas-color-config: mat.get-color-config($canvas-theme); // Get the color palette from the color-config. - $primary-palette: map.get($color-config, 'primary'); - $accent-palette: map.get($color-config, 'accent'); $canvas-primary-palette: map.get($canvas-color-config, 'primary'); // Get hues from palette - $primary-palette-100: mat.get-color-from-palette($primary-palette, 100); - $primary-palette-300: mat.get-color-from-palette($primary-palette, 300); - $accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400'); - $canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50); - $canvas-primary-palette-600: mat.get-color-from-palette($canvas-primary-palette, 600); - $canvas-primary-palette-A100: mat.get-color-from-palette($canvas-primary-palette, 'A100'); + $on-surface-medium: utils.get-on-surface($canvas-color-config, medium); + $on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter); + $surface: utils.get-surface($canvas-color-config); + $surface-darker: utils.get-surface($canvas-color-config, darker); + $surface-highlight: utils.get-on-surface($canvas-color-config, highlight); $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200'); div.navigation-control { - box-shadow: 0 1px 6px $canvas-primary-palette-50; - background-color: $canvas-primary-palette-600; - border-top: 1px solid $primary-palette-300; - border-right: 1px solid $primary-palette-300; - border-bottom: 1px solid $primary-palette-300; + box-shadow: 0 1px 6px $canvas-primary-palette-A200; + background-color: $surface; + border: 1px solid $on-surface-lighter; .fa, .icon { - color: $accent-palette-A400; + color: utils.get-color-on-surface($color-config, $surface-darker); } .navigation-control-header { &:hover { - background: linear-gradient(90deg, $canvas-primary-palette-A100 252px, $primary-palette-100 34px); + background: linear-gradient(-90deg, $surface-highlight 34px, transparent 35px); } } .navigation-control-title { - color: $canvas-primary-palette-A200; + color: $on-surface-medium; } } } 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 20cdc0157963..530f7705049f 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 @@ -17,6 +17,7 @@ @use 'sass:map'; @use '@angular/material' as mat; +@use '../../../../../../../../assets/utils.scss' as utils; @mixin nifi-theme($material-theme, $canvas-theme) { // Get the color config from the theme. @@ -24,20 +25,18 @@ $canvas-color-config: mat.get-color-config($canvas-theme); // Get the color palette from the color-config. - $primary-palette: map.get($color-config, 'primary'); $canvas-primary-palette: map.get($canvas-color-config, 'primary'); // Get hues from palette - $primary-palette-600: mat.get-color-from-palette($primary-palette, 600); - $canvas-primary-palette-700: mat.get-color-from-palette($canvas-primary-palette, 700); - $canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900); + $canvas-primary-palette-A100: mat.get-color-from-palette($canvas-primary-palette, A100); + $surface: utils.get-surface($canvas-color-config); #birdseye { - background: $canvas-primary-palette-900; - border: 1px solid $canvas-primary-palette-700; + background: $surface; + border: 1px solid $canvas-primary-palette-A100; rect.birdseye-brush { - stroke: $primary-palette-600; + stroke: utils.get-color-on-surface($color-config, $surface); 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 a562bf3a09f5..6f85e54422fc 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 @@ -17,6 +17,7 @@ @use 'sass:map'; @use '@angular/material' as mat; +@use '../../../../../../../assets/utils.scss' as utils; @mixin nifi-theme($material-theme, $canvas-theme) { // Get the color config from the theme. @@ -24,57 +25,50 @@ $canvas-color-config: mat.get-color-config($canvas-theme); // Get the color palette from the color-config. - $primary-palette: map.get($color-config, 'primary'); $accent-palette: map.get($color-config, 'accent'); - $warn-palette: map.get($color-config, 'warn'); $canvas-primary-palette: map.get($canvas-color-config, 'primary'); // Get hues from palette - $primary-palette-100: mat.get-color-from-palette($primary-palette, 100); - $primary-palette-300: mat.get-color-from-palette($primary-palette, 300); - $primary-palette-700: mat.get-color-from-palette($primary-palette, 700); - $accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400'); - $warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200'); - $warn-palette-A400: mat.get-color-from-palette($warn-palette, 'A400'); - $canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50); - $canvas-primary-palette-600: mat.get-color-from-palette($canvas-primary-palette, 600); - $canvas-primary-palette-A100: mat.get-color-from-palette($canvas-primary-palette, 'A100'); + $accent-palette-default: mat.get-color-from-palette($accent-palette, default); $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200'); + $surface: utils.get-surface($canvas-color-config); + $on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter); + $on-surface-medium: utils.get-on-surface($canvas-color-config, medium); + $surface-highlight: utils.get-on-surface($canvas-color-config, highlight); + div.operation-control { - box-shadow: 0 1px 6px $canvas-primary-palette-50; - background-color: $canvas-primary-palette-600; - border-top: 1px solid $primary-palette-300; - border-right: 1px solid $primary-palette-300; - border-bottom: 1px solid $primary-palette-300; + box-shadow: 0 1px 6px $canvas-primary-palette-A200; + background-color: $surface; + border: 1px solid $on-surface-lighter; .fa, .icon { - color: $accent-palette-A400; + color: utils.get-color-on-surface($color-config, $surface); } .operation-control-header { &:hover { - background: linear-gradient(90deg, $canvas-primary-palette-A100 252px, $primary-palette-100 34px); + background: linear-gradient(-90deg, $surface-highlight 34px, transparent 35px); } } .operation-control-title { - color: $canvas-primary-palette-A200; + color: $on-surface-medium; } .operation-context-logo { .icon { - color: $warn-palette-A200; + color: $accent-palette-default; } } .operation-context-name { - color: $canvas-primary-palette-A200; + color: $on-surface-medium; } .operation-context-type { - color: $primary-palette-700; + color: utils.get-color-on-surface($color-config, $surface); } } } 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/_header.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/_header.component-theme.scss index e22bb1e8ff98..bd7feb61676d 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/_header.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/_header.component-theme.scss @@ -20,11 +20,4 @@ @mixin nifi-theme($canvas-theme) { // Get the color config from the theme. - $canvas-color-config: mat.get-color-config($canvas-theme); - - // Get the color palette from the color-config. - $canvas-primary-palette: map.get($canvas-color-config, 'primary'); - - // Get hues from palette - $canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50); } 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 85ae5701350b..45fb803ae5e2 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 @@ -17,6 +17,7 @@ @use 'sass:map'; @use '@angular/material' as mat; +@use '../../../../../../../assets/utils.scss' as utils; @mixin nifi-theme($material-theme, $canvas-theme) { // Get the color config from the theme. @@ -26,42 +27,47 @@ // Get the color palette from the color-config. $primary-palette: map.get($color-config, 'primary'); $warn-palette: map.get($color-config, 'warn'); - $canvas-primary-palette: map.get($canvas-color-config, 'primary'); // Get hues from palette - $primary-palette-300: mat.get-color-from-palette($primary-palette, 300); - $primary-palette-500: mat.get-color-from-palette($primary-palette, 500); - $warn-palette-400: mat.get-color-from-palette($warn-palette, 400); - $warn-palette-A400: mat.get-color-from-palette($warn-palette, 'A400'); - $canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900); + $primary-palette-darker: mat.get-color-from-palette($primary-palette, darker); + $primary-palette-darker-contrast: mat.get-color-from-palette($primary-palette, darker-contrast); + $warn-palette-default: mat.get-color-from-palette($warn-palette, default); + $warn-palette-default-contrast: mat.get-color-from-palette($warn-palette, default-constrast); + + $surface: utils.get-surface($canvas-color-config); + $on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter); .flow-status { - border-bottom: 1px solid $primary-palette-300; + border-bottom: 1px solid $on-surface-lighter; + background: $surface; .fa, .icon { - color: $primary-palette-500; + color: utils.get-color-on-surface($color-config, $surface); } .warning { - color: $warn-palette-400; + color: $warn-palette-default; } .status-value { - color: $warn-palette-A400; + color: utils.get-color-on-surface($color-config, $surface, 'accent'); } .controller-bulletins { - border-left: 1px solid $primary-palette-300; - background-color: $primary-palette-500; + border-left: 1px solid $on-surface-lighter; + background-color: $primary-palette-darker; } .controller-bulletins.has-bulletins { - background-color: $warn-palette-400; + background-color: $warn-palette-default; + } + .controller-bulletins.has-bulletins .fa { + background-color: $warn-palette-default-contrast; } .controller-bulletins .fa { - color: $canvas-primary-palette-900; + color: $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/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 eb7e240fd8f0..0f83eb7e74d2 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 @@ -17,6 +17,7 @@ @use 'sass:map'; @use '@angular/material' as mat; +@use '../../../../../../../assets/utils.scss' as utils; @mixin nifi-theme($material-theme, $canvas-theme) { // Get the color config from the theme. @@ -25,33 +26,47 @@ // Get the color palette from the color-config. $primary-palette: map.get($color-config, 'primary'); - $accent-palette: map.get($color-config, 'accent'); - $canvas-primary-palette: map.get($canvas-color-config, 'primary'); // Get hues from palette - $primary-palette-100: mat.get-color-from-palette($primary-palette, 100); - $primary-palette-300: mat.get-color-from-palette($primary-palette, 300); - $accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400'); - $canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50); + $primary-palette-default: mat.get-color-from-palette($primary-palette, default); + $primary-palette-default-contrast: mat.get-color-from-palette($primary-palette, default-contrast); + $primary-palette-lighter: mat.get-color-from-palette($primary-palette, lighter); + $surface-darker: utils.get-surface($canvas-color-config, darker); + $on-surface-highlight: utils.get-on-surface($canvas-color-config, highlight); + $on-surface-lighter: utils.get-on-surface($canvas-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($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($primary-palette, "default"); + } .new-canvas-item { .icon { - color: $accent-palette-A400; - &.hovering { - background-color: $primary-palette-100; - box-shadow: 0 3px 6px $canvas-primary-palette-50; + // This solution re-uses the highlight value used throughout the UI, but because we need to hide the non-hover + // version of the icons, we create a double layered gradient with the matching background color of the + // navigation bar, then put the highlight on top of it. + background: linear-gradient($on-surface-highlight, $on-surface-highlight), + linear-gradient($hover-bg, $hover-bg); .component-button-grip { background: repeating-linear-gradient( 90deg, - $primary-palette-300, - $primary-palette-300 4px, - $primary-palette-300 4px, - $primary-palette-300 6px + $on-surface-lighter, + $on-surface-lighter 4px, + transparent 4px, + transparent 6px ); } } + &.cdk-drag-dragging { + color: utils.get-color-on-surface($color-config, $surface-darker); + mix-blend-mode: difference; // Make sure the dragged icon is always visible + } } } } 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 448531fe62a9..66c6bc6e56c6 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 @@ -17,43 +17,38 @@ @use 'sass:map'; @use '@angular/material' as mat; +@use '../../../../../../../assets/utils.scss' as utils; @mixin nifi-theme($material-theme, $canvas-theme) { // Get the color config from the theme. - $color-config: mat.get-color-config($material-theme); $canvas-color-config: mat.get-color-config($canvas-theme); - // Get the color palette from the color-config. - $primary-palette: map.get($color-config, 'primary'); - $canvas-primary-palette: map.get($canvas-color-config, 'primary'); - // Get hues from palette - $primary-palette-300: mat.get-color-from-palette($primary-palette, 300); - $canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900); - $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200'); - $canvas-primary-palette-A700: mat.get-color-from-palette($canvas-primary-palette, 'A700'); - $canvas-primary-palette-contrast-300: mat.get-color-from-palette($canvas-primary-palette, '300-contrast'); + $surface: utils.get-surface($canvas-color-config); + $on-surface: utils.get-on-surface($canvas-color-config); + $on-surface-medium: utils.get-on-surface($canvas-color-config, medium); + $on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter); .search-container { - border-left: 1px solid $primary-palette-300; + border-left: 1px solid $on-surface-lighter; &:hover, &.open { - background-color: $canvas-primary-palette-900; - border-left: 1px solid $canvas-primary-palette-A700; + background-color: $surface; + border-left: 1px solid $on-surface-lighter; } .search-input { - color: $canvas-primary-palette-A200; - background-color: $canvas-primary-palette-900; + color: $on-surface; + background-color: $surface; } .fa { - color: $canvas-primary-palette-A700; + color: $on-surface-medium; } } .search-results { - background-color: $canvas-primary-palette-900; + background-color: $surface; } } 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 67a5fe6ab417..d1045ad11947 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 @@ -17,6 +17,7 @@ @use 'sass:map'; @use '@angular/material' as mat; +@use '../../../../../../../../assets/utils.scss' as utils; @mixin nifi-theme($material-theme, $canvas-theme) { // Get the color config from the theme. @@ -28,32 +29,32 @@ $canvas-primary-palette: map.get($canvas-color-config, 'primary'); // Get hues from palette - $primary-palette-500: mat.get-color-from-palette($primary-palette, 500); - $canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50); - $canvas-primary-palette-100: mat.get-color-from-palette($canvas-primary-palette, 100); - $canvas-primary-palette-400: mat.get-color-from-palette($canvas-primary-palette, 400); + $primary-palette-default: mat.get-color-from-palette($primary-palette, default); + $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, A200); $canvas-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500); - $canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900); + $surface: utils.get-surface($canvas-color-config); + $on-surface: utils.get-on-surface($canvas-color-config); + $on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter); .prioritizers { .prioritizers-list { - background: $primary-palette-500; + background: $primary-palette-default; - border: solid 1px $canvas-primary-palette-400; + border: solid 1px $canvas-primary-palette-500; .cdk-drag-disabled { - background: $canvas-primary-palette-500; + background: $on-surface-lighter; } } .prioritizer-draggable-item { - border-bottom: solid 1px $canvas-primary-palette-400; - color: $canvas-primary-palette-100; - background: $canvas-primary-palette-900; + border-bottom: solid 1px $canvas-primary-palette-500; + color: $on-surface; + background: $surface; } .cdk-drag-preview { - box-shadow: 0 3px 6px $canvas-primary-palette-50; + box-shadow: 0 3px 6px $canvas-primary-palette-A200; } } } 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/process-group/create-process-group/_create-process-group.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/process-group/create-process-group/_create-process-group.component-theme.scss index 86883fb2fa44..9d455d90e3a1 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/process-group/create-process-group/_create-process-group.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/process-group/create-process-group/_create-process-group.component-theme.scss @@ -26,13 +26,11 @@ $accent-palette: map.get($color-config, 'accent'); // Get hues from palette - $accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400'); - - // Get hues from palette + $accent-palette-default: mat.get-color-from-palette($accent-palette, 'default'); .create-process-group-form { .upload-flow-definition { - color: $accent-palette-A400; + color: $accent-palette-default; } } } 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/processor/edit-processor/relationship-settings/relationship-settings.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/items/processor/edit-processor/relationship-settings/relationship-settings.component.html index 3f7ba9dff232..58d09c9cb38e 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/processor/edit-processor/relationship-settings/relationship-settings.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/items/processor/edit-processor/relationship-settings/relationship-settings.component.html @@ -91,8 +91,8 @@ (change)="handleChanged()" [disabled]="isDisabled" class="flex gap-x-2"> - Penalize - Yield + Penalize + Yield
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/remote-process-group/create-remote-process-group/_create-remote-process-group.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/remote-process-group/create-remote-process-group/_create-remote-process-group.component-theme.scss index 4fa732184006..a361eca8991b 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/remote-process-group/create-remote-process-group/_create-remote-process-group.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/remote-process-group/create-remote-process-group/_create-remote-process-group.component-theme.scss @@ -26,5 +26,5 @@ $accent-palette: map.get($color-config, 'accent'); // Get hues from palette - $accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400'); + $accent-palette-default: mat.get-color-from-palette($accent-palette, 'default'); } 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/common/banner/_banner.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/common/banner/_banner.component-theme.scss index 71e4d7d64fe3..60728ad27d61 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/common/banner/_banner.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/common/banner/_banner.component-theme.scss @@ -17,20 +17,18 @@ @use 'sass:map'; @use '@angular/material' as mat; +@use '../../../../../../assets/utils.scss' as utils; @mixin nifi-theme($theme) { // Get the color config from the theme. $color-config: mat.get-color-config($theme); - // Get the color palette from the color-config. - $warn-palette: map.get($color-config, 'warn'); - // Get hues from palette - $warn-palette-100: mat.get-color-from-palette($warn-palette, 100); + $warn-surface: utils.get-surface($color-config, default, 'warn'); div { &.error { - background-color: $warn-palette-100; + background-color: $warn-surface; } } } 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/controller-service/_controller-services.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/controller-service/_controller-services.component-theme.scss index 20858b80fbfc..99367449f0ac 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/controller-service/_controller-services.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/controller-service/_controller-services.component-theme.scss @@ -26,9 +26,9 @@ $primary-palette: map.get($color-config, 'primary'); // Get hues from palette - $primary-palette-500: mat.get-color-from-palette($primary-palette, 500); + $primary-palette-default: mat.get-color-from-palette($primary-palette, default); .controller-services-header { - color: $primary-palette-500; + color: $primary-palette-default; } } 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-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/manage-remote-ports/_manage-remote-ports.component-theme.scss index 30dd724e1685..c46e1179170b 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-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/manage-remote-ports/_manage-remote-ports.component-theme.scss @@ -25,20 +25,20 @@ // Get the color palette from the color-config. $primary-palette: map.get($color-config, 'primary'); - $canvas-accent-palette: map.get($canvas-color-config, 'accent'); + $canvas-warn-palette: map.get($canvas-color-config, 'warn'); // Get hues from palette - $primary-palette-500: mat.get-color-from-palette($primary-palette, 500); - $canvas-accent-palette-A200: mat.get-color-from-palette($canvas-accent-palette, 'A200'); + $primary-palette-default: mat.get-color-from-palette($primary-palette, default); + $canvas-warn-palette-A200: mat.get-color-from-palette($canvas-warn-palette, 'A200'); .manage-remote-ports-header { - color: $primary-palette-500; + color: $primary-palette-default; } .manage-remote-ports-table { .listing-table { .fa.fa-warning { - color: $canvas-accent-palette-A200; + color: $canvas-warn-palette-A200; } } } 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 f60260c711a2..332603ac609f 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 @@ -17,19 +17,15 @@ @use 'sass:map'; @use '@angular/material' as mat; +@use '../../../../assets/utils.scss' as utils; @mixin nifi-theme($material-theme, $canvas-theme) { - $color-config: mat.get-color-config($material-theme); $canvas-color-config: mat.get-color-config($canvas-theme); - // Get the color palette from the color-config. - $primary-palette: map.get($color-config, 'primary'); - $canvas-primary-palette: map.get($canvas-color-config, 'primary'); - // Get hues from palette - $canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900); + $surface: utils.get-surface($canvas-color-config); .login-background { - background: $canvas-primary-palette-900 url(../../../../assets/icons/bg-error.png) left top no-repeat; + background: $surface 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/login/ui/login-form/_login-form.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/ui/login-form/_login-form.component-theme.scss index a657dbc1c00b..68e8b1fdc307 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/ui/login-form/_login-form.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/login/ui/login-form/_login-form.component-theme.scss @@ -26,11 +26,11 @@ $primary-palette: map.get($color-config, 'primary'); // Get hues from palette - $primary-palette-500: mat.get-color-from-palette($primary-palette, 500); + $primary-palette-default: mat.get-color-from-palette($primary-palette, default); .login-form { .login-title { - color: $primary-palette-500; + color: $primary-palette-default; } } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/_parameter-contexts.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/feature/_parameter-contexts.component-theme.scss index 410954f8b066..9438b0407c1f 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/feature/_parameter-contexts.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/feature/_parameter-contexts.component-theme.scss @@ -26,9 +26,9 @@ $primary-palette: map.get($color-config, 'primary'); // Get hues from palette - $primary-palette-500: mat.get-color-from-palette($primary-palette, 500); + $primary-palette-default: mat.get-color-from-palette($primary-palette, default); .parameter-context-header { - color: $primary-palette-500; + color: $primary-palette-default; } } 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 0116242f7b5e..49e398f2de04 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 @@ -17,6 +17,7 @@ @use 'sass:map'; @use '@angular/material' as mat; +@use '../../../../../../assets/utils.scss' as utils; @mixin nifi-theme($material-theme, $canvas-theme) { // Get the color config from the theme. @@ -28,31 +29,33 @@ $canvas-primary-palette: map.get($canvas-color-config, 'primary'); // Get hues from palette - $primary-palette-500: mat.get-color-from-palette($primary-palette, 500); - $canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50); - $canvas-primary-palette-100: mat.get-color-from-palette($canvas-primary-palette, 100); - $canvas-primary-palette-400: mat.get-color-from-palette($canvas-primary-palette, 400); + $primary-palette-default: mat.get-color-from-palette($primary-palette, default); + $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, A200); $canvas-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500); + $surface: utils.get-surface($canvas-color-config); + $on-surface: utils.get-on-surface($canvas-color-config); + $on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter); + .parameter-context-inheritance { .parameter-context-inheritance-list { - background: $primary-palette-500; + background: $primary-palette-default; - border: solid 1px $canvas-primary-palette-400; + border: solid 1px $canvas-primary-palette-500; .cdk-drag-disabled { - background: $canvas-primary-palette-500; + background: $on-surface-lighter; } } .parameter-context-draggable-item { - border-bottom: solid 1px $canvas-primary-palette-400; - color: $canvas-primary-palette-100; - background: white; + border-bottom: solid 1px $canvas-primary-palette-500; + color: $on-surface; + background: $surface; } .cdk-drag-preview { - box-shadow: 0 3px 6px $canvas-primary-palette-50; + box-shadow: 0 3px 6px $canvas-primary-palette-A200; } } } 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 80e82167c641..369411a6a968 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 @@ -17,6 +17,7 @@ @use 'sass:map'; @use '@angular/material' as mat; +@use '../../../../assets/utils.scss' as utils; @mixin nifi-theme($material-theme, $canvas-theme) { // Get the color config from the theme. @@ -25,40 +26,43 @@ // Get the color palette from the color-config. $primary-palette: map.get($color-config, 'primary'); - $warn-palette: map.get($color-config, 'warn'); - $canvas-primary-palette: map.get($canvas-color-config, 'primary'); + $accent-palette: map.get($color-config, 'accent'); // Get hues from palette - $primary-palette-300: mat.get-color-from-palette($primary-palette, 300); - $primary-palette-500: mat.get-color-from-palette($primary-palette, 500); - $canvas-primary-palette-200: mat.get-color-from-palette($canvas-primary-palette, 200); - $canvas-primary-palette-600: mat.get-color-from-palette($canvas-primary-palette, 600); - $canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900); - $warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200'); + $primary-palette-lighter: mat.get-color-from-palette($primary-palette, lighter); + $primary-palette-default: mat.get-color-from-palette($primary-palette, default); + $accent-palette-default: mat.get-color-from-palette($accent-palette, default); + $surface: utils.get-surface($canvas-color-config); + $surface-darker: utils.get-surface($canvas-color-config, darker); + $on-surface: utils.get-on-surface($canvas-color-config); .provenance-header { - color: $primary-palette-500; + color: $primary-palette-default; } rect.lineage { - fill: $canvas-primary-palette-600; + fill: $surface-darker; } g.flowfile-icon text { - fill: $warn-palette-A200; + fill: $accent-palette-default; // Accent palette } circle.event-circle { - fill: $primary-palette-300; - stroke: $canvas-primary-palette-200; + fill: $primary-palette-lighter; + stroke: $on-surface; } path.link { - stroke: $canvas-primary-palette-200; + stroke: $on-surface; + } + + marker { + fill: $on-surface; } circle.flowfile-link { - fill: $canvas-primary-palette-900; - stroke: $canvas-primary-palette-200; + fill: $surface; + 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 6a46994c0903..968ddb064a48 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 @@ -17,6 +17,7 @@ @use 'sass:map'; @use '@angular/material' as mat; +@use '../../../../../../assets/utils.scss' as utils; @mixin nifi-theme($material-theme, $canvas-theme) { // Get the color config from the theme. @@ -24,23 +25,21 @@ $canvas-color-config: mat.get-color-config($canvas-theme); // Get the color palette from the color-config. - $accent-palette: map.get($color-config, 'accent'); $canvas-primary-palette: map.get($canvas-color-config, 'primary'); // Get hues from palette - $accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400'); - $canvas-primary-palette-600: mat.get-color-from-palette($canvas-primary-palette, 600); - $canvas-primary-palette-700: mat.get-color-from-palette($canvas-primary-palette, 700); + $surface-darker: utils.get-surface($canvas-color-config, darker); + $canvas-primary-palette-A100: mat.get-color-from-palette($canvas-primary-palette, A100); .provenance-event-table { .lineage { - border: 1px solid $canvas-primary-palette-700; - background-color: $canvas-primary-palette-600; + border: 1px solid $canvas-primary-palette-A100; + background-color: $surface-darker; .lineage-controls { .fa, .icon { - color: $accent-palette-A400; + color: utils.get-color-on-surface($color-config, $surface-darker); } } } 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/lineage/_lineage.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/lineage/_lineage.component-theme.scss index 58d8249e4380..1dc455bfc438 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/lineage/_lineage.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/lineage/_lineage.component-theme.scss @@ -17,6 +17,7 @@ @use 'sass:map'; @use '@angular/material' as mat; +@use '../../../../../../../assets/utils.scss' as utils; @mixin nifi-theme($material-theme, $canvas-theme) { // Get the color config from the theme. @@ -26,42 +27,41 @@ // Get the color palette from the color-config. $accent-palette: map.get($color-config, 'accent'); $warn-palette: map.get($color-config, 'warn'); - $canvas-primary-palette: map.get($canvas-color-config, 'primary'); - $canvas-accent-palette: map.get($canvas-color-config, 'accent'); + $canvas-warn-palette: map.get($canvas-color-config, 'warn'); // Get hues from palette - $accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400'); - $warn-palette-400: mat.get-color-from-palette($warn-palette, 400); - $warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200'); - $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200'); - $canvas-accent-palette-A200: mat.get-color-from-palette($canvas-accent-palette, 'A200'); + $accent-palette-default: mat.get-color-from-palette($accent-palette, 'default'); + $warn-palette-default: mat.get-color-from-palette($warn-palette, default); + $canvas-warn-palette-A200: mat.get-color-from-palette($canvas-warn-palette, 'A200'); + $on-surface: utils.get-on-surface($canvas-color-config); #lineage { canvas, svg { text.event-type { - fill: $canvas-primary-palette-A200; + fill: $on-surface; } path.link.selected { - stroke: $warn-palette-400; + stroke: $warn-palette-default; + fill: $warn-palette-default; } g.event circle.selected { - fill: $warn-palette-400; + fill: $warn-palette-default; } g.event circle.context { - fill: $canvas-accent-palette-A200; + fill: $canvas-warn-palette-A200; } g.flowfile circle.context, g.event circle.context { - stroke: $accent-palette-A400; + stroke: $accent-palette-default; } .flowfile-icon { - color: $warn-palette-A200; + color: $accent-palette-default; } } } 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/lineage/lineage.component.ts 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/lineage/lineage.component.ts index 3ef3754b9584..08c46dd4c69c 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/lineage/lineage.component.ts +++ 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/lineage/lineage.component.ts @@ -315,7 +315,7 @@ export class LineageComponent implements OnInit { if (d.indexOf('SELECTED') >= 0) { return 'warn-400'; } else { - return 'primary-contrast-200'; + return 'on-surface'; } }) .append('path') diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/_flowfile-dialog.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/_flowfile-dialog.component-theme.scss index 89456e69d260..ba6d348b6cba 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/_flowfile-dialog.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/_flowfile-dialog.component-theme.scss @@ -26,13 +26,13 @@ $primary-palette: map.get($color-config, 'primary'); // Get hues from palette - $primary-palette-500: mat.get-color-from-palette($primary-palette, 500); + $primary-palette-default: mat.get-color-from-palette($primary-palette, default); .flowfile { .mdc-dialog__content { .tab-content { .flowfile-header { - color: $primary-palette-500; + color: $primary-palette-default; } } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/_flowfile-table.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/_flowfile-table.component-theme.scss index b58a34f0abd3..d008dac19a05 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/_flowfile-table.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-table/_flowfile-table.component-theme.scss @@ -27,16 +27,16 @@ $warn-palette: map.get($color-config, 'warn'); // Get hues from palette - $primary-palette-500: mat.get-color-from-palette($primary-palette, 500); - $warn-palette-400: mat.get-color-from-palette($warn-palette, 400); + $primary-palette-default: mat.get-color-from-palette($primary-palette, default); + $warn-palette-default: mat.get-color-from-palette($warn-palette, default); .flowfile-table { .queue-listing-header { - color: $primary-palette-500; + color: $primary-palette-default; } .listing-message { - color: $warn-palette-400; + color: $warn-palette-default; } } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/_settings.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/_settings.component-theme.scss index cf13fc636a23..7de25dba480b 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/_settings.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/feature/_settings.component-theme.scss @@ -17,18 +17,17 @@ @use 'sass:map'; @use '@angular/material' as mat; +@use '../../../../../node_modules/@angular/material/core/theming/inspection' as inspection; +@use '../../../../assets/utils.scss' as utils; @mixin nifi-theme($theme) { // Get the color config from the theme. $color-config: mat.get-color-config($theme); - // Get the color palette from the color-config. - $primary-palette: map.get($color-config, 'primary'); - - // Get hues from palette - $primary-palette-500: mat.get-color-from-palette($primary-palette, 500); + // Get the surface color from material so we can ensure best contrast + $surface: inspection.get-theme-color($theme, background, background); .settings-header { - color: $primary-palette-500; + color: utils.get-color-on-surface($color-config, $surface); } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/_summary.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/_summary.component-theme.scss index 8ebd57666691..6ef8cedadb22 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/_summary.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/feature/_summary.component-theme.scss @@ -17,18 +17,17 @@ @use 'sass:map'; @use '@angular/material' as mat; +@use '../../../../../node_modules/@angular/material/core/theming/inspection' as inspection; +@use '../../../../assets/utils.scss' as utils; @mixin nifi-theme($theme) { // Get the color config from the theme. $color-config: mat.get-color-config($theme); - // Get the color palette from the color-config. - $primary-palette: map.get($color-config, 'primary'); - - // Get hues from palette - $primary-palette-500: mat.get-color-from-palette($primary-palette, 500); + // Get the surface color from material so we can ensure best contrast + $surface: inspection.get-theme-color($theme, background, background); .summary-header { - color: $primary-palette-500; + color: utils.get-color-on-surface($color-config, $surface); } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/_users.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/_users.component-theme.scss index ee08282a7f41..ad525d82e016 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/_users.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/feature/_users.component-theme.scss @@ -26,9 +26,9 @@ $primary-palette: map.get($color-config, 'primary'); // Get hues from palette - $primary-palette-500: mat.get-color-from-palette($primary-palette, 500); + $primary-palette-default: mat.get-color-from-palette($primary-palette, default); .user-header { - color: $primary-palette-500; + color: $primary-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/component-context/_component-context.component-theme.scss b/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 index 10194ed036e4..8bae82e45cfc 100644 --- a/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 +++ b/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 @@ -26,24 +26,22 @@ // Get the color palette from the color-config. $primary-palette: map.get($color-config, 'primary'); $accent-palette: map.get($color-config, 'accent'); - $warn-palette: map.get($color-config, 'warn'); $canvas-primary-palette: map.get($canvas-color-config, 'primary'); // Get hues from palette - $primary-palette-700: mat.get-color-from-palette($primary-palette, 700); - $accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400'); - $warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200'); + $primary-palette-darker: mat.get-color-from-palette($primary-palette, darker); + $accent-palette-default: mat.get-color-from-palette($accent-palette, 'default'); $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200'); .component-context { .fa, .icon { - color: $accent-palette-A400; + color: $accent-palette-default; } .component-context-logo { .icon { - color: $warn-palette-A200; + color: $accent-palette-default; } } @@ -52,11 +50,11 @@ } .component-context-type { - color: $primary-palette-700; + color: $primary-palette-darker; } .component-context-id { - color: $warn-palette-A200; + color: $accent-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/context-menu/_context-menu.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss index c0738622bdd0..9b00cb14b19a 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss @@ -17,6 +17,7 @@ @use 'sass:map'; @use '@angular/material' as mat; +@use '../../../../assets/utils.scss' as utils; @mixin nifi-theme($material-theme, $canvas-theme) { // Get the color config from the theme. @@ -25,42 +26,41 @@ // Get the color palette from the color-config. $primary-palette: map.get($color-config, 'primary'); - $accent-palette: map.get($color-config, 'accent'); $canvas-primary-palette: map.get($canvas-color-config, 'primary'); $canvas-accent-palette: map.get($canvas-color-config, 'accent'); // Get hues from palette - $primary-palette-50: mat.get-color-from-palette($primary-palette, 50); - $primary-palette-200: mat.get-color-from-palette($primary-palette, 200); - $accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400'); - $canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50); - $canvas-primary-palette-300: mat.get-color-from-palette($canvas-primary-palette, 300); + $primary-palette-default: mat.get-color-from-palette($primary-palette, 'default'); + $surface-darker: utils.get-surface($canvas-color-config, darker); + $canvas-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500); + $on-surface-medium: utils.get-on-surface($canvas-color-config, medium); + $on-surface-highlight: utils.get-on-surface($canvas-color-config, highlight); $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200'); - $canvas-accent-palette-800: mat.get-color-from-palette($canvas-accent-palette, 800); + $canvas-accent-palette-A700: mat.get-color-from-palette($canvas-accent-palette, 'A700'); div.context-menu { - background-color: $primary-palette-50; - border: 1px solid $accent-palette-A400; - box-shadow: 0 3px 6px $canvas-primary-palette-50; - color: $accent-palette-A400; + background-color: $surface-darker; + border: 1px solid $primary-palette-default; + box-shadow: 0 3px 6px $canvas-primary-palette-A200; + color: utils.get-color-on-surface($color-config, $surface-darker); .context-menu-item { .context-menu-item-text { - color: $canvas-primary-palette-A200; + color: $on-surface-medium; } } .context-menu-item:hover { - background-color: $primary-palette-200; + background-color: $on-surface-highlight; } .context-menu-item:active { - background-color: $canvas-primary-palette-300; + background-color: $canvas-primary-palette-500; } &.show-focused { .context-menu-item:focus { - outline: $canvas-accent-palette-800 solid 1px; + outline: $canvas-accent-palette-A700 solid 1px; } } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/edit-parameter-dialog/edit-parameter-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/edit-parameter-dialog/edit-parameter-dialog.component.html index b99f2db7f145..963f10decd76 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/edit-parameter-dialog/edit-parameter-dialog.component.html +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/edit-parameter-dialog/edit-parameter-dialog.component.html @@ -41,8 +41,8 @@

{{ isNew ? 'Add' : 'Edit' }} Parameter

- Yes - No + Yes + No
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/edit-tenant/edit-tenant-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/edit-tenant/edit-tenant-dialog.component.html index 5ea13dfb8203..638b109b410d 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/edit-tenant/edit-tenant-dialog.component.html +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/edit-tenant/edit-tenant-dialog.component.html @@ -21,8 +21,8 @@

{{ isNew ? 'Add' : 'Edit' }} {{ isUser ? 'User' : 'User Gro
- Individual - Group + Individual + Group
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/_extension-creation.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/_extension-creation.component-theme.scss index 31f828f5225a..fefc8d1e3224 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/_extension-creation.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/_extension-creation.component-theme.scss @@ -17,6 +17,7 @@ @use 'sass:map'; @use '@angular/material' as mat; +@use '../../../../assets/utils.scss' as utils; @mixin nifi-theme($material-theme, $canvas-theme) { // Get the color config from the theme. @@ -25,19 +26,28 @@ // Get the color palette from the color-config. $primary-palette: map.get($color-config, 'primary'); + $accent-palette: map.get($color-config, 'accent'); $warn-palette: map.get($color-config, 'warn'); - $canvas-primary-palette: map.get($canvas-color-config, 'primary'); - $canvas-accent-palette: map.get($canvas-color-config, 'accent'); // Get hues from palette - $primary-palette-100: mat.get-color-from-palette($primary-palette, 100); - $primary-palette-500: mat.get-color-from-palette($primary-palette, 500); - $canvas-primary-palette-800: mat.get-color-from-palette($canvas-primary-palette, 800); - $canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900); - $canvas-primary-palette-A700: mat.get-color-from-palette($canvas-primary-palette, 'A700'); - $canvas-accent-palette-A100: mat.get-color-from-palette($canvas-accent-palette, 'A100'); - $warn-palette-400: mat.get-color-from-palette($warn-palette, 400); - $warn-palette-A400: mat.get-color-from-palette($warn-palette, 'A400'); + $primary-palette-default: mat.get-color-from-palette($primary-palette, 'default'); + $primary-palette-default-contrast: mat.get-color-from-palette($primary-palette, 'default-contrast'); + $primary-palette-darker: mat.get-color-from-palette($primary-palette, 'darker'); + $primary-palette-darker-contrast: mat.get-color-from-palette($primary-palette, 'darker-contrast'); + $accent-palette-default: mat.get-color-from-palette($accent-palette, 'default'); + $warn-palette-default: mat.get-color-from-palette($warn-palette, default); + + $surface-darker: utils.get-surface($canvas-color-config, darker); + $surface: utils.get-surface($canvas-color-config); + $accent-surface: utils.get-surface($color-config, default, 'accent'); + $header-surface: utils.ensure-contrast($primary-palette-default, $surface, $primary-palette-darker); + $header-on-surface: utils.ensure-contrast( + $primary-palette-default-contrast, + $header-surface, + $primary-palette-darker-contrast + ); + $surface-highlight: utils.get-on-surface($canvas-color-config, 'highlight'); + $on-surface-medium: utils.get-on-surface($canvas-color-config, medium); .extension-creation-dialog { @include mat.button-density(-1); @@ -45,38 +55,38 @@ .type-table { table { th { - background-color: $primary-palette-500; - color: $canvas-primary-palette-900; + background-color: $header-surface; + color: $header-on-surface; + + .mat-sort-header-arrow { + color: $header-on-surface; + } } tr:hover { - background-color: $primary-palette-100 !important; + background-color: $surface-highlight !important; } .selected { - background-color: $canvas-accent-palette-A100 !important; + background-color: $accent-surface !important; } .even { - background-color: $canvas-primary-palette-800; + background-color: $surface-darker; } .fa.fa-shield { - color: $warn-palette-400; + color: $warn-palette-default; } } } .selected-type-name { - color: $warn-palette-A400; + color: $accent-palette-default; } .selected-type-bundle { - color: $canvas-primary-palette-A700; + color: $on-surface-medium; } } - - .mat-sort-header-arrow { - color: $canvas-primary-palette-900; - } } 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 f6b8bc4489fe..db536e4a1824 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 @@ -17,45 +17,56 @@ @use 'sass:map'; @use '@angular/material' as mat; +@use '../../../../../node_modules/@angular/material/core/theming/inspection' as inspection; +@use '../../../../assets/utils.scss' as utils; @mixin nifi-theme($material-theme, $canvas-theme) { // Get the color config from the theme. $color-config: mat.get-color-config($material-theme); - $canvas-color-config: mat.get-color-config($canvas-theme); // Get the color palette from the color-config. $primary-palette: map.get($color-config, 'primary'); - $accent-palette: map.get($color-config, 'accent'); - $canvas-primary-palette: map.get($canvas-color-config, 'primary'); // Get hues from palette - $primary-palette-100: mat.get-color-from-palette($primary-palette, 100); - $primary-palette-300: mat.get-color-from-palette($primary-palette, 300); - $accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400'); - $canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50); - $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200'); + $navbar-surface: mat.get-color-from-palette($primary-palette, "navbar"); + $navbar-on-surface: mat.get-color-from-palette($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($primary-palette, "default"); + $navbar-on-surface: mat.get-color-from-palette($primary-palette, "default-contrast"); + } + + // We need this to get the right color value for the global menu items. + $surface: inspection.get-theme-color($material-theme, background, background); .nifi-navigation { - background-color: $primary-palette-300; + background-color: $navbar-surface; - .icon { - color: $accent-palette-A400; + .icon, + .icon.global-menu { + color: $navbar-on-surface; } .current-user { - color: $canvas-primary-palette-A200; + color: $navbar-on-surface; + } + + a { + color: $navbar-on-surface; + text-decoration-color: $navbar-on-surface; } - .global-menu:hover { - background-color: $primary-palette-100; - box-shadow: 0 3px 6px $canvas-primary-palette-50; + a:hover { + opacity: 0.6; } } button.global-menu-item { .fa, .icon { - color: $accent-palette-A400; + color: utils.get-color-on-surface($color-config, $surface); } } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/new-property-dialog/new-property-dialog.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/new-property-dialog/new-property-dialog.component.html index 345c35c078cd..f4784cf8eb36 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/new-property-dialog/new-property-dialog.component.html +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/new-property-dialog/new-property-dialog.component.html @@ -30,8 +30,8 @@

Add Property

- Yes - No + Yes + No
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 895d4a1a9e57..4a9ae8626f21 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 @@ -17,6 +17,7 @@ @use 'sass:map'; @use '@angular/material' as mat; +@use '../../../../../../assets/utils.scss' as utils; @mixin nifi-theme($material-theme, $canvas-theme) { // Get the color config from the theme. @@ -28,31 +29,30 @@ $canvas-primary-palette: map.get($canvas-color-config, 'primary'); // Get hues from palette - $primary-palette-100: mat.get-color-from-palette($primary-palette, 100); - $primary-palette-300: mat.get-color-from-palette($primary-palette, 300); - $canvas-primary-palette-100: mat.get-color-from-palette($canvas-primary-palette, 100); - $canvas-primary-palette-200: mat.get-color-from-palette($canvas-primary-palette, 200); - $canvas-primary-palette-300: mat.get-color-from-palette($canvas-primary-palette, 300); - $canvas-primary-palette-contrast-200: mat.get-color-from-palette($canvas-primary-palette, '200-contrast'); - $canvas-primary-palette-contrast-900: mat.get-color-from-palette($canvas-primary-palette, '900-contrast'); + $primary-palette-lighter: mat.get-color-from-palette($primary-palette, lighter); + $primary-palette-default: mat.get-color-from-palette($primary-palette, default); + $canvas-primary-palette-500-contrast: mat.get-color-from-palette($canvas-primary-palette, 400-contrast); + $canvas-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500); + $surface: utils.get-surface($canvas-color-config); + $on-surface: utils.get-on-surface($canvas-color-config); .property-editor { @include mat.button-density(-1); .nf-editor { .CodeMirror { - border: 1px solid $canvas-primary-palette-300; - background-color: $canvas-primary-palette-contrast-900; + border: 1px solid $canvas-primary-palette-500; + background-color: $surface; &.blank { - background: $primary-palette-300; - color: $primary-palette-100; - border: 1px solid $primary-palette-300; + background: $primary-palette-default; + color: $primary-palette-lighter; + border: 1px solid $primary-palette-default; } } .CodeMirror-code { - color: $canvas-primary-palette-contrast-200; + color: $on-surface; } /* @@ -60,8 +60,8 @@ */ .cm-s-default .CodeMirror-matchingbracket { - color: $canvas-primary-palette-200 !important; - background-color: $canvas-primary-palette-300; + color: $canvas-primary-palette-500-contrast !important; + background-color: $canvas-primary-palette-500; } } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/_provenance-event-dialog.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/_provenance-event-dialog.component-theme.scss index 581d629e0e82..40483370a7f2 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/_provenance-event-dialog.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/_provenance-event-dialog.component-theme.scss @@ -26,7 +26,7 @@ $primary-palette: map.get($color-config, 'primary'); // Get hues from palette - $primary-palette-500: mat.get-color-from-palette($primary-palette, '500'); + $primary-palette-default: mat.get-color-from-palette($primary-palette, 'default'); .provenance-event { @include mat.button-density(-1); @@ -34,7 +34,7 @@ .mdc-dialog__content { .tab-content { .event-header { - color: $primary-palette-500; + color: $primary-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/resizable/_resizable.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/_resizable.component-theme.scss index fdb567981b1e..3f2efdb8b7aa 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/_resizable.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/resizable/_resizable.component-theme.scss @@ -18,6 +18,7 @@ @use 'sass:math' as math; @use 'sass:map'; @use '@angular/material' as mat; +@use '../../../../assets/utils.scss' as utils; @mixin nifi-theme($material-theme, $canvas-theme) { // Get the color config from the theme. @@ -26,13 +27,12 @@ // Get the color palette from the color-config. $primary-palette: map.get($color-config, 'primary'); - $canvas-primary-palette: map.get($canvas-color-config, 'primary'); // Get hues from palette - $canvas-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500); + $on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter); $handle-size: 15px; - $handle-color: $canvas-primary-palette-500; + $handle-color: $on-surface-lighter; .resizable-triangle { border-right: math.div($handle-size, 2) solid $handle-color; 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 b5a5a541010e..7cae5e2335b2 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 @@ -17,6 +17,7 @@ @use 'sass:map'; @use '@angular/material' as mat; +@use '../../../../assets/utils.scss' as utils; @mixin nifi-theme($material-theme, $canvas-theme) { // Get the color config from the theme. @@ -28,14 +29,14 @@ $canvas-primary-palette: map.get($canvas-color-config, 'primary'); // Get hues from palette - $primary-palette-700: mat.get-color-from-palette($primary-palette, 700); - $canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900); + $primary-palette-darker: mat.get-color-from-palette($primary-palette, darker); + $surface: utils.get-surface($canvas-color-config); $canvas-primary-palette-A100: mat.get-color-from-palette($canvas-primary-palette, 'A100'); $canvas-primary-palette-A700: mat.get-color-from-palette($canvas-primary-palette, 'A700'); :host ::ng-deep #status-history-chart-container, :host ::ng-deep #status-history-chart-control-container { - background-color: $canvas-primary-palette-900; + background-color: $surface; .axis path, .axis line { @@ -49,6 +50,6 @@ :host ::ng-deep #status-history-chart-container text, #status-history-chart-control-container text { - fill: $primary-palette-700; + fill: $primary-palette-darker; } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/_system-diagnostics-dialog.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/_system-diagnostics-dialog.component-theme.scss index 2551707f9429..92f0404835cf 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/_system-diagnostics-dialog.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/_system-diagnostics-dialog.component-theme.scss @@ -26,12 +26,12 @@ $primary-palette: map.get($color-config, 'primary'); // Get hues from palette - $primary-palette-500: mat.get-color-from-palette($primary-palette, 500); + $primary-palette-default: mat.get-color-from-palette($primary-palette, default); .system-diagnostics { .tab-content { .section-header { - color: $primary-palette-500; + color: $primary-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/tooltips/property-hint-tip/_property-hint-tip.component-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/property-hint-tip/_property-hint-tip.component-theme.scss index 50de6312892c..ebcda7ac7587 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/property-hint-tip/_property-hint-tip.component-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/tooltips/property-hint-tip/_property-hint-tip.component-theme.scss @@ -26,9 +26,9 @@ $accent-palette: map.get($color-config, 'accent'); // Get hues from palette - $accent-palette-A700: mat.get-color-from-palette($accent-palette, 'A700'); + $accent-palette-darker: mat.get-color-from-palette($accent-palette, 'darker'); .hint-pattern { - background-color: $accent-palette-A700; + background-color: $accent-palette-darker; } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table-theme.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table-theme.scss index bcc5f6a9f679..7ff0b6488fd4 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table-theme.scss +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_listing-table-theme.scss @@ -17,6 +17,7 @@ @use 'sass:map'; @use '@angular/material' as mat; +@use '../../assets/utils.scss' as utils; @mixin nifi-theme($material-theme, $canvas-theme) { // Get the color config from the theme. @@ -25,17 +26,22 @@ // Get the color palette from the color-config. $primary-palette: map.get($color-config, 'primary'); - $accent-palette: map.get($color-config, 'accent'); - $canvas-primary-palette: map.get($canvas-color-config, 'primary'); - $canvas-accent-palette: map.get($canvas-color-config, 'accent'); // Get hues from palette - $primary-palette-100: mat.get-color-from-palette($primary-palette, 100); - $primary-palette-500: mat.get-color-from-palette($primary-palette, 500); - $accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400'); - $canvas-primary-palette-800: mat.get-color-from-palette($canvas-primary-palette, 800); - $canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900); - $canvas-accent-palette-A100: mat.get-color-from-palette($canvas-accent-palette, 'A100'); + $primary-palette-default: mat.get-color-from-palette($primary-palette, 'default'); + $primary-palette-default-contrast: mat.get-color-from-palette($primary-palette, 'default-contrast'); + $primary-palette-darker: mat.get-color-from-palette($primary-palette, 'darker'); + $primary-palette-darker-contrast: mat.get-color-from-palette($primary-palette, 'darker-contrast'); + $surface-darker: utils.get-surface($canvas-color-config, darker); + $surface: utils.get-surface($canvas-color-config); + $accent-surface: utils.get-surface($color-config, default, 'accent'); + $header-surface: utils.ensure-contrast($primary-palette-default, $surface, $primary-palette-darker); + $header-on-surface: utils.ensure-contrast( + $primary-palette-default-contrast, + $header-surface, + $primary-palette-darker-contrast + ); + $surface-highlight: utils.get-on-surface($canvas-color-config, 'highlight'); .listing-table { table { @@ -52,32 +58,36 @@ } th { - background-color: $primary-palette-500 !important; - color: $canvas-primary-palette-900; + background-color: $header-surface !important; + color: $header-on-surface; user-select: none; + + .mat-sort-header-arrow { + color: $header-on-surface; + } } tr:hover { - background-color: $primary-palette-100 !important; + background-color: $surface-highlight !important; } .selected { - background-color: $canvas-accent-palette-A100 !important; + background-color: $accent-surface !important; } .even { - background-color: $canvas-primary-palette-800; + background-color: $surface-darker; } .fa { - color: $accent-palette-A400; + color: utils.get-color-on-surface($color-config, $surface); width: 10px; height: 14px; text-align: center; } .icon { - color: $accent-palette-A400; + color: utils.get-color-on-surface($color-config, $surface); width: 10px; text-align: center; } @@ -100,10 +110,6 @@ } } - .mat-sort-header-arrow { - color: $canvas-primary-palette-900; - } - .mat-sort-header-content { overflow: hidden; } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi-canvas.scss b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi-canvas.scss new file mode 100644 index 000000000000..32dae17a2eda --- /dev/null +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi-canvas.scss @@ -0,0 +1,186 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +// Custom Colors following Material Design +// For more information: https://m2.material.io/design/color/the-color-system.html +@use '@angular/material' as mat; + + + +// The $nifi-canvas-light-palette defines the PRIMARY palette for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi +$nifi-canvas-light-palette: ( + // mat.define-palette($nifi-canvas-light-palette) + 50: #ffffff, // circle.flowfile-link, .processor-read-write-stats, .process-group-stats-in-out, .tooltip, .property-editor, .disabled, .enabled, .stopped, .running, .has-errors, .invalid, .validating, .transmitting, .not-transmitting, .up-to-date, .locally-modified, .sync-failure, .stale, .locally-modified-and-stale, g.component rect.body, text.bulletin-icon, rect.processor-icon-container, circle.restricted-background, circle.is-primary-background, g.connection rect.body, text.connection-to-run-status, text.expiration-icon, text.load-balance-icon, text.penalized-icon, g.connection rect.backpressure-tick.data-size-prediction.prediction-down, g.connection rect.backpressure-tick.object-prediction.prediction-down, text.version-control, .breadcrumb-container, #birdseye, .controller-bulletins .fa, .search-container:hover, .search-container.open, .login-background, table th, .mat-sort-header-arrow, .CodeMirror, #status-history-chart-container, #status-history-chart-control-container, #status-history-chart-control-container, + 100: #f9fafb, // .canvas-background, .navigation-control, .operation-control, .lineage + 200: #f4f6f7, // .tooltip, .cm-s-default .CodeMirror-matchingbracket, circle.flowfile-link + 300: #e3e8eb, // .even, .remote-process-group-sent-stats, .processor-stats-in-out, .process-group-queued-stats, .process-group-read-write-stats + 400: #d8d8d8, // g.connection rect.backpressure-object, g.connection rect.backpressure-data-size, .cdk-drag-disabled, .resizable-triangle + 500: #acacac, // .unset, .border.ghost, .backpressure-tick.not-configured, g.connection.ghost path.connection-path, g.connection.ghost rect.connection-label, .prioritizers-list, .prioritizer-draggable-item, .parameter-context-inheritance-list, .parameter-context-draggable-item + 600: #666666, // UNUSED + 700: #444444, + 800: #262626, + 900: #000000, + + // some analog colors for headers and hover states, inputs, stats, etc + A100: #e5ebed, // .tooltip, .property-editor, g.component rect.border, .component-comments, g.connection path.connection-path, g.connection rect.backpressure-tick.data-size-prediction, g.connection rect.backpressure-tick.object-prediction, g.connection rect.backpressure-object, g.connection rect.backpressure-data-size, .breadcrumb-container, .navigation-control, .operation-control, header.nifi-header, .new-canvas-item.icon.hovering, .cdk-drag-disabled, .cdk-drag-preview, .context-menu, .global-menu:hover, .unauthorized background in light themes + A200: rgba(0, 0, 0, 0.25), // .operation-context-name, text.stats-label, text.processor-name, text.port-name, text.process-group-name, text.remote-process-group-name, .navigation-control-title, .operation-control-title, .operation-context-name, .search-input, .context-menu-item-text, .current-user + A400: rgba(#303030, .75), // rect.component-selection, rect.drag-selection, rect.label-drag + A700: rgba(#000000, 0.87), // .unauthorized background in dark themes + // These are the $nifi-canvas-light-palette PRIMARY palette contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. + // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(#000000, 0.87) or white. These values are particularly important + // for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc. + // + // NOTE: Care should be taken here to ensure the values meet accessibility standards. + // + // NOTE: When creating the Material palette definition mat.define-palette($nifi-canvas-light-palette); + // Since 500 is the default the contrast-500 will be used as the default text color. + contrast: ( + 50: rgba(#000000, 0.87), // This is used for the basis of $on-surface for light themes + 100: rgba(#000000, 0.87), + 200: rgba(#000000, 0.87), + 300: rgba(#000000, 0.87), + 400: rgba(#000000, 0.87), + 500: rgba(#000000, 0.87), + 600: #ffffff, + 700: #ffffff, + 800: #ffffff, + 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, + A700: #ffffff, + ) +); + +// The $nifi-canvas-accent-light-palette defines the ACCENT palette for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi +$nifi-canvas-accent-light-palette: ( + 50: #e5ebed, // Used for the grid lines on the canvas. Called as the canvas access $surface value. + 100: #c3e8d0, + 200: #9dd9b2, // .running "lighter" hue + 300: #73ca94, + 400: #52bf7e, // .up-to-date,.backpressure-percent "default" hue + 500: #00ff00, //.connectable-destination, .connector.connectable This is an exception to main colors and is explicitly called. + 600: #2cb367, + 700: #1A9964, + 800: #016131, // .version-control, .bulletin-normal "darker" hue for this palette + 900: #0d1411, + + A100: #bfbfff, //.selected + A200: #8080ff, // + A400: #4040ff, //.backpressure-percent-warning, .bulletin-warn, .backpressure-percent.warning, text.run-status-icon + A700: #0000ff, //g.connection.selected rect.border, .connection-selection-path, .midpoint, .labelpoint + + contrast: ( + 50: rgba(#000000, 0.87), + 100: rgba(#000000, 0.87), + 200: rgba(#000000, 0.87), + 300: rgba(#000000, 0.87), + 400: rgba(#000000, 0.87), + 500: rgba(#000000, 0.87), + 600: #ffffff, + 700: #ffffff, + 800: #ffffff, + 900: #ffffff, + A100: rgba(#000000, 0.87), + A200: rgba(#000000, 0.87), + A400: rgba(#000000, 0.87), + A700: rgba(#000000, 0.87), + ) +); + +// The $nifi-canvas-warn-light-palette defines the WARN palette both for all Angular Material components used throughout Apache NiFi and for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi +$nifi-canvas-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, // "lighter" hue for this palette. Also .banner-error + 200: #f49999, //.stopped + 300: #eb7071, //.stale + 400: #f64e4c, // color="primary" Default hue for this palette. Also .unauthorized, .restricted, .connection-path.full, .connection-path.unauthorized, .backpressure-percent.error, .controller-bulletins.has-bulletins, .link.selected, circle.selected, .listing-message, .fa-shield + 500: #fa3b30, + 600: #ec3030, //.bulletin-error + 700: #ff1507, + 800: #ff0000, //.connector, .startpoint + 900: #ba554a, // "darker" hue for this palette .bulletin-background + + // A100 - A700 are the COMPLEMENTARY colors defined by the PRIMARY colors defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b which is the primary color of the $material-primary-light-palette. + // These color are used for label values, stats, timestamps, counts, etc. + A100: #ffef85, //.selected + A200: #f8bf47, //.invalid, .is-missing-port, circle.context + A400: #bda500, //.backpressure-percent-warning, .bulletin-warn, .backpressure-percent.warning, text.run-status-icon + A700: #ffcc00, //g.connection.selected rect.border, .connection-selection-path, .midpoint, .labelpoint + + contrast: ( + 50: rgba(#000000, 0.87), + 100: rgba(#000000, 0.87), + 200: rgba(#000000, 0.87), + 300: rgba(#000000, 0.87), + 400: rgba(#000000, 0.87), + 500: #ffffff, + 600: #ffffff, + 700: #ffffff, + 800: #ffffff, + 900: #ffffff, + A100: rgba(#000000, 0.87), + A200: #ffffff, + A400: #ffffff, + A700: #ffffff, + ) +); + +// The $nifi-canvas-dark-palette defines the PRIMARY palette for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi +$nifi-canvas-dark-palette: $nifi-canvas-light-palette; + +// The $nifi-canvas-dark-palette defines the ACCENT palette for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi +$nifi-canvas-accent-dark-palette: $nifi-canvas-accent-light-palette; + +// The $nifi-canvas-warn-dark-palette defines the WARN palette both for all Angular Material components used throughout Apache NiFi and for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi +$nifi-canvas-warn-dark-palette: $nifi-canvas-warn-light-palette; + +// Define the palettes for the canvas theme +$nifi-canvas-primary-light: mat.define-palette($nifi-canvas-light-palette); +$nifi-canvas-accent-light: mat.define-palette($nifi-canvas-accent-light-palette, 400, 200, 800); +$nifi-canvas-warn-light: mat.define-palette($nifi-canvas-warn-light-palette, 400, 100, 900); + +// Create the theme objects. We can extract the values we need from the theme passed into the mixins. +$nifi-canvas-theme-light: mat.define-light-theme( + ( + color: ( + primary: $nifi-canvas-primary-light, + accent: $nifi-canvas-accent-light, + warn: $nifi-canvas-warn-light + ), + //typography: mat.define-typography-config(), // TODO: typography + density: -3 + ) +); + +// Create the color palettes used in our dark canvas theme. +$nifi-canvas-primary-dark: mat.define-palette($nifi-canvas-dark-palette); +$nifi-canvas-accent-dark: mat.define-palette($nifi-canvas-accent-dark-palette, 400, 200, 800); +$nifi-canvas-warn-dark: mat.define-palette($nifi-canvas-warn-dark-palette, 600, 200, 800); + +$nifi-canvas-theme-dark: mat.define-dark-theme( + ( + color: ( + primary: $nifi-canvas-primary-dark, + accent: $nifi-canvas-accent-dark, + warn: $nifi-canvas-warn-dark, + ), + //typography: mat.define-typography-config(), // TODO: typography + density: -3 + ) +); 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 34bf7d8bcc69..d1b925e53859 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 @@ -17,13 +17,18 @@ // Custom Colors following Material Design // For more information: https://m2.material.io/design/color/the-color-system.html +@use 'sass:map'; @use '@angular/material' as mat; +// Define some variables that are re-used throughout the theme. +$on-surface-dark: rgba(#000000, .87); +$on-surface-light: #ffffff; + // The $material-primary-light-palette define the PRIMARY AND ACCENT 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(249, 250, 251, 0.97), // .context-menu - 100: rgba(233, 239, 243, 1), // "lighter" hue for this palette. Also .global-menu:hover, .navigation-control-header:hover, .operation-control-header:hover, .new-canvas-item.icon.hovering, table tr:hover, .CodeMirror.blank, .remote-banner, .process-group-details-banner, .process-group-details-banner, remote-process-group-details-banner, .remote-process-group-last-refresh-rect, + 50: rgba(#F9FAFB, 0.97), + 100: #e5ebed, // "lighter" hue for this palette. Also .global-menu:hover, .navigation-control-header:hover, .operation-control-header:hover, .new-canvas-item.icon.hovering, table tr:hover, .CodeMirror.blank, .remote-banner, .process-group-details-banner, .process-group-details-banner, remote-process-group-details-banner, .remote-process-group-last-refresh-rect, 200: #cbd8dd, // .processor-stats-border, .process-group-stats-border, .context-menu-item:hover, .process-group-banner, .remote-process-group-banner, .a, button.nifi-button, button.nifi-button:disabled 300: #abbdc5, // .breadcrumb-container, .navigation-control, .operation-control, .flow-status, .controller-bulletins, .component-button-grip, .search-container, .nifi-navigation, .CodeMirror.blank 400: #8aa2ad, // Default hue for this palette (color="primary"). @@ -35,11 +40,10 @@ $material-primary-light-palette: ( // A100 -> A700 are the ACCENT color (mat.define-palette($material-primary-light-palette, A400, A100, A700);). These color are the ANALOGOUS (or possibly the TRIADIC??) colors as defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b // These colors are also used by some custom canvas components that display the ANALOGOUS color for things like buttons, links, borders, info, etc. - A100: #aabec7, // .zero - A200: #44a3cf, // .enabled, .transmitting, .load-balance-icon-active - A400: #004849, // a, a:hover, button.nifi-button, button.nifi-button:hover, .add-tenant-to-policy-form.fa, .component.selected rect.border, .add-connect, .remote-process-group-uri, .remote-process-group-transmission-secure, .navigation-control.fa, .operation-control.fa, .new-canvas-item.icon, .upload-flow-definition, .lineage-controls.fa, .event circle.context, .nifi-navigation.icon, .listing-table.fa, .listing-table.icon, .context-menu - A700: rgba(20, 145, 193, 0.12), // .hint-pattern - + A100: rgba(#1491C1, 0.12), // .hint-pattern + A200: #aabec7, // .zero + A400: #44a3cf, // .enabled, .transmitting, .load-balance-icon-active + A700: #004849, // a, a:hover, button.nifi-button, button.nifi-button:hover, .add-tenant-to-policy-form.fa, .component.selected rect.border, .add-connect, .remote-process-group-uri, .remote-process-group-transmission-secure, .navigation-control.fa, .operation-control.fa, .new-canvas-item.icon, .upload-flow-definition, .lineage-controls.fa, .event circle.context, .nifi-navigation.icon, .listing-table.fa, .listing-table.icon, .context-menu // These are the $material-primary-light-palette PRIMARY AND ACCENT contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important // for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc. @@ -49,252 +53,53 @@ $material-primary-light-palette: ( // NOTE: When creating the Material palette definition mat.define-palette($material-primary-light-palette, 300); // Since 300, was set as the default the contrast-300 will be used as the default text color. contrast: ( - 50: rgba(black, 0.87), - 100: rgba(black, 0.87), - 200: rgba(black, 0.87), - 300: #ffffff, - 400: #ffffff, - 500: #ffffff, - 600: #ffffff, - 700: #ffffff, - 800: #ffffff, - 900: #ffffff, - A100: rgba(black, 0.87), - A200: rgba(black, 0.87), - A400: #ffffff, - A700: #ffffff, - ) -); - -// The $material-primary-dark-palette define the PRIMARY AND ACCENT palettes for all Angular Material components used throughout Apache NiFi -$material-primary-dark-palette: ( - // 50 -> 900 are the PRIMARY colors (mat.define-palette($material-primary-dark-palette, 300);) defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b - 50: rgb(30, 45, 54), // .context-menu - 100: rgba(32, 47, 54, 1), // "lighter" hue for this palette. Also .global-menu:hover, .navigation-control-header:hover, .operation-control-header:hover, .new-canvas-item.icon.hovering, table tr:hover, .CodeMirror.blank, .remote-banner, .process-group-details-banner, .process-group-details-banner, remote-process-group-details-banner, .remote-process-group-last-refresh-rect, - 200: #30444d, // .processor-stats-border, .process-group-stats-border, .context-menu-item:hover, .process-group-banner, .remote-process-group-banner, .a, button.nifi-button, button.nifi-button:disabled - 300: #3e5762, // .breadcrumb-container, .navigation-control, .operation-control, .flow-status, .controller-bulletins, .component-button-grip, .search-container, .nifi-navigation, .CodeMirror.blank - 400: #4d6b78, // Default hue for this palette (color="primary"). - 500: #587a89, // .disabled, .not-transmitting, .splash, .access-policies-header, .operation-context-type, .bulletin-board-header, .counter-header, .stats-info, .active-thread-count-icon, .processor-type, .port-transmission-icon, .operation-context-type, .flow-status.fa, .flow-status.icon, .controller-bulletins, .prioritizers-list, .controller-services-header, .login-title, .parameter-context-header, .parameter-context-inheritance-list, .provenance-header, .flowfile-header, .queue-listing-header, .settings-header, .summary-header, .user-header, table th, button.global-menu-item.fa, button.global-menu-item.icon, .event-header, .section-header, - 600: #718d9a, // .breadcrumb-container, .birdseye-brush - 700: #8aa2ad, // "darker" hue for this palette. Also #status-history-chart-container text, #status-history-chart-control-container text - 800: #abbcc5, - 900: #abbcc5, - - // A100 -> A700 are the ACCENT color (mat.define-palette($material-primary-dark-palette, A400, A100, A700);). These color are the ANALOGOUS (or possibly the TRIADIC??) colors as defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b - // These colors are also used by some custom canvas components that display the ANALOGOUS color for things like buttons, links, borders, info, etc. - A100: #aabec7, // .zero - A200: #44a3cf, // .enabled, .transmitting, .load-balance-icon-active - A400: #009b9d, // a, a:hover, button.nifi-button, button.nifi-button:hover, .add-tenant-to-policy-form.fa, .component.selected rect.border, .add-connect, .remote-process-group-uri, .remote-process-group-transmission-secure, .navigation-control.fa, .operation-control.fa, .new-canvas-item.icon, .upload-flow-definition, .lineage-controls.fa, .event circle.context, .nifi-navigation.icon, .listing-table.fa, .listing-table.icon, .context-menu - A700: #2cd5d5,//rgba(139, 208, 229, 1),//#aabec7 // .hint-pattern - - // These are the $material-primary-dark-palette PRIMARY AND ACCENT contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. - // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important - // for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc. - // - // NOTE: Care should be taken here to ensure the values meet accessibility standards. - // - // NOTE: When creating the Material palette definition mat.define-palette($material-primary-dark-palette, 300); - // Since 300, was set as the default the contrast-300 will be used as the default text color. - contrast: ( - 50: #ffffff, - 100: #ffffff, - 200: #ffffff, - 300: #ffffff, - 400: #ffffff, - 500: #ffffff, - 600: rgba(black, 0.87), - 700: rgba(black, 0.87), - 800: rgba(black, 0.87), - 900: rgba(black, 0.87), - A100: #ffffff, - A200: #ffffff, - A400: rgba(black, 0.87), - A700: rgba(black, 0.87), - ) -); - -// The $nifi-canvas-light-palette defines the PRIMARY palette for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi -$nifi-canvas-light-palette: ( - // mat.define-palette($nifi-canvas-light-palette) - 50: rgba(0, 0, 0, 0.25), // .tooltip, .property-editor, g.component rect.border, .component-comments, g.connection path.connection-path, g.connection rect.backpressure-tick.data-size-prediction, g.connection rect.backpressure-tick.object-prediction, g.connection rect.backpressure-object, g.connection rect.backpressure-data-size, .breadcrumb-container, .navigation-control, .operation-control, header.nifi-header, .new-canvas-item.icon.hovering, .cdk-drag-disabled, .cdk-drag-preview, .context-menu, .global-menu:hover, - 100: rgba(black, 0.87), // .prioritizer-draggable-item, .parameter-context-draggable-item - 200: #000, // .tooltip, .cm-s-default .CodeMirror-matchingbracket, circle.flowfile-link - 300: #aaaaaa, // .context-menu-item:active, .CodeMirror, .cm-s-default .CodeMirror-matchingbracket - 400: #acacac, // .unset, .border.ghost, .backpressure-tick.not-configured, g.connection.ghost path.connection-path, g.connection.ghost rect.connection-label, .prioritizers-list, .prioritizer-draggable-item, .parameter-context-inheritance-list, .parameter-context-draggable-item - 500: #d8d8d8, // g.connection rect.backpressure-object, g.connection rect.backpressure-data-size, .cdk-drag-disabled, .resizable-triangle - 600: #f9fafb, // .canvas-background, .navigation-control, .operation-control, .lineage - 700: #e5ebed, // .canvas-background, g.component rect.body.unauthorized, g.component rect.processor-icon-container.unauthorized, g.connection rect.body.unauthorized, #birdseye, .lineage - 800: #f4f6f7, // .even, .remote-process-group-sent-stats, .processor-stats-in-out, .process-group-queued-stats, .process-group-read-write-stats - 900: rgba(255, 255, 255, 1), // circle.flowfile-link, .processor-read-write-stats, .process-group-stats-in-out, .tooltip, .property-editor, .disabled, .enabled, .stopped, .running, .has-errors, .invalid, .validating, .transmitting, .not-transmitting, .up-to-date, .locally-modified, .sync-failure, .stale, .locally-modified-and-stale, g.component rect.body, text.bulletin-icon, rect.processor-icon-container, circle.restricted-background, circle.is-primary-background, g.connection rect.body, text.connection-to-run-status, text.expiration-icon, text.load-balance-icon, text.penalized-icon, g.connection rect.backpressure-tick.data-size-prediction.prediction-down, g.connection rect.backpressure-tick.object-prediction.prediction-down, text.version-control, .breadcrumb-container, #birdseye, .controller-bulletins .fa, .search-container:hover, .search-container.open, .login-background, table th, .mat-sort-header-arrow, .CodeMirror, #status-history-chart-container, #status-history-chart-control-container, #status-history-chart-control-container, - - // some analog colors for headers and hover states, inputs, stats, etc - A100: rgba(227, 232, 235, 0), // .navigation-control-header:hover, .operation-control-header:hover, .axis path, .axis line - A200: #262626, // .operation-context-name, text.stats-label, text.processor-name, text.port-name, text.process-group-name, text.remote-process-group-name, .navigation-control-title, .operation-control-title, .operation-context-name, .search-input, .context-menu-item-text, .current-user - A400: #444, // rect.component-selection, rect.drag-selection, rect.label-drag - A700: #666, // text.processor-bundle, .search-container:hover, .search-container.open, .search-container.fa, .selected-type-bundle, .brush .selection - - // These are the $nifi-canvas-light-palette PRIMARY palette contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. - // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important - // for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc. - // - // NOTE: Care should be taken here to ensure the values meet accessibility standards. - // - // NOTE: When creating the Material palette definition mat.define-palette($nifi-canvas-light-palette); - // Since 500 is the default the contrast-500 will be used as the default text color. - contrast: ( - 50: rgba(black, 0.87), - 100: rgba(black, 0.87), - 200: rgba(black, 0.87), - 300: rgba(black, 0.87), - 400: #ffffff, - 500: #ffffff, - 600: #ffffff, - 700: #ffffff, - 800: #ffffff, - 900: #ffffff, - A100: rgba(black, 0.87), - A200: rgba(black, 0.87), - A400: #ffffff, - A700: #ffffff, + 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-light, + 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-light, ) ); -// The $nifi-canvas-dark-palette defines the PRIMARY palette for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi -$nifi-canvas-dark-palette: ( - // mat.define-palette($nifi-canvas-dark-palette) - 50: rgba(255, 255, 255, 1), // .tooltip, .property-editor, g.component rect.border, .component-comments, g.connection path.connection-path, g.connection rect.backpressure-tick.data-size-prediction, g.connection rect.backpressure-tick.object-prediction, g.connection rect.backpressure-object, g.connection rect.backpressure-data-size, .breadcrumb-container, .navigation-control, .operation-control, header.nifi-header, .new-canvas-item.icon.hovering, .cdk-drag-disabled, .cdk-drag-preview, .context-menu, .global-menu:hover, - 100: #f4f6f7, //rgba(black, 0.87), // .prioritizer-draggable-item, .parameter-context-draggable-item - 200: #e5ebed, // .tooltip, .cm-s-default .CodeMirror-matchingbracket, circle.flowfile-link - 300: #f9fafb, // .context-menu-item:active, .CodeMirror, .cm-s-default .CodeMirror-matchingbracket - 400: #d8d8d8, // .unset, .border.ghost, .backpressure-tick.not-configured, g.connection.ghost path.connection-path, g.connection.ghost rect.connection-label, .prioritizers-list, .prioritizer-draggable-item, .parameter-context-inheritance-list, .parameter-context-draggable-item - 500: #acacac, // g.connection rect.backpressure-object, g.connection rect.backpressure-data-size, .cdk-drag-disabled, .resizable-triangle - 600: #545454, // .canvas-background, .navigation-control, .operation-control, .lineage - 700: #696060, // .canvas-background, g.component rect.body.unauthorized, g.component rect.processor-icon-container.unauthorized, g.connection rect.body.unauthorized, #birdseye, .lineage - 800: rgba(#6b6464, 1), // .even, .remote-process-group-sent-stats, .processor-stats-in-out, .process-group-queued-stats, .process-group-read-write-stats - 900: rgba(#252424, 0.97), // circle.flowfile-link, .processor-read-write-stats, .process-group-stats-in-out, .tooltip, .property-editor, .disabled, .enabled, .stopped, .running, .has-errors, .invalid, .validating, .transmitting, .not-transmitting, .up-to-date, .locally-modified, .sync-failure, .stale, .locally-modified-and-stale, g.component rect.body, text.bulletin-icon, rect.processor-icon-container, circle.restricted-background, circle.is-primary-background, g.connection rect.body, text.connection-to-run-status, text.expiration-icon, text.load-balance-icon, text.penalized-icon, g.connection rect.backpressure-tick.data-size-prediction.prediction-down, g.connection rect.backpressure-tick.object-prediction.prediction-down, text.version-control, .breadcrumb-container, #birdseye, .controller-bulletins .fa, .search-container:hover, .search-container.open, .login-background, table th, .mat-sort-header-arrow, .CodeMirror, #status-history-chart-container, #status-history-chart-control-container, #status-history-chart-control-container, - - // some analog colors for headers and hover states, inputs, stats, etc - A100: #000, // .navigation-control-header:hover, .operation-control-header:hover, .axis path, .axis line - A200: #e7e6e6, // .operation-context-name, text.stats-label, text.processor-name, text.port-name, text.process-group-name, text.remote-process-group-name, .navigation-control-title, .operation-control-title, .operation-context-name, .search-input, .context-menu-item-text, .current-user - A400: #b0b0b0, // rect.component-selection, rect.drag-selection, rect.label-drag - A700: #b2b2b2, // text.processor-bundle, .search-container:hover, .search-container.open, .search-container.fa, .selected-type-bundle, .brush .selection - - // These are the $nifi-canvas-dark-palette PRIMARY palette contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. - // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important - // for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc. - // - // NOTE: Care should be taken here to ensure the values meet accessibility standards. - // - // NOTE: When creating the Material palette definition mat.define-palette($nifi-canvas-dark-palette); - // Since 500 is the default the contrast-500 will be used as the default text color. +$material-accent-light-palette: ( + 50: #fff8cc, + 100: #ebe2be, + 200: #d7cbb0, // lighter + 300: #c4b5a2, + 400: #b09e94, + 500: #9c8886, // default + 600: #8f7775, + 700: #836563, + 800: #765452, // darker + 900: #4a3435, + A100: #e7ebbe, + A200: #d7d7b0, + A400: #b0ab94, + A700: #020202, contrast: ( - 50: #ffffff, - 100: #ffffff, - 200: #ffffff, - 300: #ffffff, - 400: #ffffff, - 500: #ffffff, - 600: rgba(black, 0.87), - 700: rgba(black, 0.87), - 800: rgba(black, 0.87), - 900: rgba(black, 0.87), - A100: #ffffff, - A200: #ffffff, - A400: rgba(black, 0.87), - A700: rgba(black, 0.87), - ) -); - -// The $nifi-canvas-light-palette defines the ACCENT palette for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi -$nifi-canvas-accent-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 #52bf7e - 50: #e6f6ec, - 100: #c3e8d0, // "lighter" hue for this palette. - 200: #9dd9b2, //.running - 300: #73ca94, //.backpressure-percent - 400: #52bf7e, // color="primary" Default hue for this palette. Also .up-to-date - 500: #2cb367, - 600: #1A9964, //.version-control - 700: #016131, // "darker" hue for this palette Also .bulletin-normal - 800: #0000ff, //.endpoint, g.process-group.drop rect.border - 900: #00ff00, //.connectable-destination, .connector.connectable - - // A100 - A700 are the ANALOGOUS colors but are more customized. These colors are used to highlight, warn, denote midpoints and labelpoints, etc - A100: #ffef85, //.selected - A200: #f8bf47, //.invalid, .is-missing-port, circle.context - A400: #bda500, //.backpressure-percent-warning, .bulletin-warn, .backpressure-percent.warning, text.run-status-icon - A700: #ffcc00, //g.connection.selected rect.border, .connection-selection-path, .midpoint, .labelpoint - - // These are the $nifi-canvas-accent-light-palette PRIMARY palette contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. - // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important - // for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc. - // - // NOTE: Care should be taken here to ensure the values meet accessibility standards. - // - // NOTE: When creating the Material palette definition mat.define-palette($nifi-canvas-accent-light-palette, 400, 100, 700); - // Since 400 is the default the contrast-400 will be used as the default text color in some cases. - contrast: ( - 50: rgba(black, 0.87), - 100: rgba(black, 0.87), - 200: rgba(black, 0.87), - 300: rgba(black, 0.87), - 400: rgba(black, 0.87), - 500: rgba(black, 0.87), - 600: #ffffff, - 700: #ffffff, - 800: #ffffff, - 900: #ffffff, - A100: rgba(black, 0.87), - A200: rgba(black, 0.87), - A400: rgba(black, 0.87), - A700: rgba(black, 0.87), - ) -); - -// The $nifi-canvas-dark-palette defines the ACCENT palette for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi -$nifi-canvas-accent-dark-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 #52bf7e - 50: #016131, - 100: #1A9964, // "lighter" hue for this palette. - 200: #2cb367, //.running - 300: #52bf7e, //.backpressure-percent - 400: #73ca94, // color="primary" Default hue for this palette. Also .up-to-date - 500: #9dd9b2, - 600: #c3e8d0, //.version-control - 700: #e6f6ec, // "darker" hue for this palette Also .bulletin-normal - 800: #0000ff, //.endpoint, g.process-group.drop rect.border - 900: #00ff00, //.connectable-destination, .connector.connectable - - // A100 - A700 are the ANALOGOUS colors but are more customized. These colors are used to highlight, warn, denote midpoints and labelpoints, etc - A100: #cbaa09, //.selected - A200: #bda500, //.invalid, .is-missing-port, circle.context - A400: #f8bf47, //.backpressure-percent-warning, .bulletin-warn, .backpressure-percent.warning, text.run-status-icon - A700: #948b4b, //g.connection.selected rect.border, .connection-selection-path, .midpoint, .labelpoint - - // These are the $nifi-canvas-accent-dark-palette PRIMARY palette contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. - // Instead if we look to the Angu - // lar Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important - // for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc. - // - // NOTE: Care should be taken here to ensure the values meet accessibility standards. - // - // NOTE: When creating the Material palette definition mat.define-palette($nifi-canvas-accent-dark-palette, 400, 100, 700); - // Since 400 is the default the contrast-400 will be used as the default text color in some cases. - contrast: ( - 50: #ffffff, - 100: #ffffff, - 200: #ffffff, - 300: #ffffff, - 400: #ffffff, - 500: #ffffff, - 600: rgba(black, 0.87), - 700: rgba(black, 0.87), - 800: rgba(black, 0.87), - 900: rgba(black, 0.87), - A100: #ffffff, - A200: #ffffff, - A400: rgba(black, 0.87), - A700: rgba(black, 0.87), + 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, ) ); @@ -302,102 +107,54 @@ $nifi-canvas-accent-dark-palette: ( $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, // "lighter" hue for this palette. Also .banner-error - 200: #f49999, //.stopped - 300: #eb7071, //.stale - 400: #f64e4c, // color="primary" Default hue for this palette. Also .unauthorized, .bulletin-background, .restricted, .connection-path.full, .connection-path.unauthorized, .backpressure-percent.error, .controller-bulletins.has-bulletins, .link.selected, circle.selected, .listing-message, .fa-shield + 100: #ffccd2, + 200: #f49999, // "lighter" hue for this palette..stopped + 300: #f57472, + 400: #f64e4c, // color="primary" Default hue for this palette. Also .unauthorized, .restricted, .connection-path.full, .connection-path.unauthorized, .backpressure-percent.error, .controller-bulletins.has-bulletins, .link.selected, circle.selected, .listing-message, .fa-shield, .stale 500: #fa3b30, - 600: #ec3030, //.bulletin-error - 700: #ff1507, // "darker" hue for this palette - 800: #ff0000, //.connector, .startpoint - 900: #f10000, - - // A100 - A700 are the COMPLEMENTARY colors defined by the PRIMARY colors defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b which is the primary color of the $material-primary-light-palette. - // These color are used for label values, stats, timestamps, counts, etc. - A100: #d0c3c2, //.sync-failure - A200: #9c8886, // .operation-context-logo, .funnel-icon, .port-icon, .flowfile-icon - A400: #765452, // .value, .refresh-timestamp, .stats-value, .active-thread-count, .process-group-contents-count, .operation-context-id, .selected-type-name - A700: #4a3435, // .version-control - - // These are the $nifi-canvas-accent-light-palette PRIMARY palette contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. - // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important - // for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc. - // - // NOTE: Care should be taken here to ensure the values meet accessibility standards. - // - // NOTE: When creating the Material palette definition mat.define-palette($warn-light-palette, 400, 100, 700); - // Since 400 is the default the contrast-400 will be used as the default text color in some cases. + 600: #ff1507, // .bulletin-error + 700: #ff0000, //.connector, .startpoint + 800: #ec3030, + 900: #ba554a, // "darker" hue for this palette .bulletin-background + A100: #ffef85, //.sync-failure + A200: #f8bf47, //.invalid, .is-missing-port, circle.context + A400: #f29833, // .value, .refresh-timestamp, .stats-value, .active-thread-count, .process-group-contents-count, .operation-context-id, .selected-type-name + A700: #eb711e, // .version-control contrast: ( - 50: rgba(black, 0.87), - 100: rgba(black, 0.87), - 200: rgba(black, 0.87), - 300: rgba(black, 0.87), - 400: rgba(black, 0.87), - 500: #ffffff, - 600: #ffffff, - 700: #ffffff, - 800: #ffffff, - 900: #ffffff, - A100: rgba(black, 0.87), - A200: #ffffff, - A400: #ffffff, - A700: #ffffff, + 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, ) ); -// The $warn-dark-palette defines the WARN palette both for all Angular Material components used throughout Apache NiFi and for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi -$warn-dark-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, // "lighter" hue for this palette. Also .banner-error - 200: #f49999, //.stopped - 300: #eb7071, //.stale - 400: #f64e4c, // color="primary" Default hue for this palette. Also .unauthorized, .bulletin-background, .restricted, .connection-path.full, .connection-path.unauthorized, .backpressure-percent.error, .controller-bulletins.has-bulletins, .link.selected, circle.selected, .listing-message, .fa-shield - 500: #fa3b30, - 600: #ec3030, //.bulletin-error - 700: #ff1507, // "darker" hue for this palette - 800: #ff0000, //.connector, .startpoint - 900: #f10000, +// 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; - // A100 - A700 are the COMPLEMENTARY colors defined by the PRIMARY colors defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b which is the primary color of the $material-primary-dark-palette. - // These color are used for label values, stats, timestamps, counts, etc. - A100: #ab777a, //.sync-failure - A200: #b98481, // .operation-context-logo, .funnel-icon, .port-icon, .flowfile-icon - A400: #d5bab7, // .value, .refresh-timestamp, .stats-value, .active-thread-count, .process-group-contents-count, .operation-context-id, .selected-type-name - A700: #b6abaa, // .version-control +// 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); - // These are the $nifi-canvas-accent-dark-palette PRIMARY palette contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. - // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important - // for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc. - // - // NOTE: Care should be taken here to ensure the values meet accessibility standards. - // - // NOTE: When creating the Material palette definition mat.define-palette($warn-dark-palette, 400, 100, 700); - // Since 400 is the default the contrast-400 will be used as the default text color in some cases. - contrast: ( - 50: #ffffff, - 100: #ffffff, - 200: #ffffff, - 300: #ffffff, - 400: #ffffff, - 500: rgba(black, 0.87), - 600: rgba(black, 0.87), - 700: rgba(black, 0.87), - 800: rgba(black, 0.87), - 900: rgba(black, 0.87), - A100: #ffffff, - A200: #ffffff, - A400: rgba(black, 0.87), - A700: rgba(black, 0.87), - ) -); +// 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, 100, 900); -$material-accent-light: mat.define-palette($material-primary-light-palette, A400, A100, A700); -$nifi-canvas-primary-light: mat.define-palette($nifi-canvas-light-palette); -$nifi-canvas-accent-light: mat.define-palette($nifi-canvas-accent-light-palette, 400, 100, 700); -$warn-light: mat.define-palette($warn-light-palette, 400, 100, 700); +$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); +$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. $material-theme-light: mat.define-light-theme( @@ -412,24 +169,10 @@ $material-theme-light: mat.define-light-theme( ) ); -$nifi-canvas-theme-light: mat.define-light-theme( - ( - color: ( - primary: $nifi-canvas-primary-light, - accent: $nifi-canvas-accent-light, - warn: $warn-light - ), - //typography: mat.define-typography-config(), // TODO: typography - density: -3 - ) -); - // Create the color palettes used in our dark theme. -$material-primary-dark: mat.define-palette($material-primary-dark-palette); -$material-accent-dark: mat.define-palette($material-primary-dark-palette, A400, A100, A700); -$nifi-canvas-primary-dark: mat.define-palette($nifi-canvas-dark-palette); -$nifi-canvas-accent-dark: mat.define-palette($nifi-canvas-accent-dark-palette); -$warn-dark: mat.define-palette($warn-dark-palette, 600, 200, 800); +$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); +$warn-dark: mat.define-palette($warn-dark-palette, 500, 200, 700); $material-theme-dark: mat.define-dark-theme( ( @@ -442,15 +185,3 @@ $material-theme-dark: mat.define-dark-theme( typography: mat.define-typography-config(), ) ); - -$nifi-canvas-theme-dark: mat.define-dark-theme( - ( - color: ( - primary: $nifi-canvas-primary-dark, - accent: $nifi-canvas-accent-dark, - warn: $warn-dark, - ), - //typography: mat.define-typography-config(), // TODO: typography - density: -3 - ) -); 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 40eb88e23a12..075c973468ad 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 @@ -17,14 +17,18 @@ @use '@angular/material' as mat; +// Define some variables that are re-used throughout the theme. +$on-surface-dark: rgba(black, 0.87); +$on-surface-light: #ffffff; + // Custom Colors following Material Design // For more information: https://m2.material.io/design/color/the-color-system.html // The $material-primary-light-palette define the PRIMARY AND ACCENT 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(240, 231, 242, 1), // .context-menu - 100: rgba(218, 195, 224, 1), // "lighter" hue for this palette. Also .global-menu:hover, .navigation-control-header:hover, .operation-control-header:hover, .new-canvas-item.icon.hovering, table tr:hover, .CodeMirror.blank, .remote-banner, .process-group-details-banner, .process-group-details-banner, remote-process-group-details-banner, .remote-process-group-last-refresh-rect, + 50: #f0e7f2, // .context-menu + 100: #dac3e0, // "lighter" hue for this palette. Also .global-menu:hover, .navigation-control-header:hover, .operation-control-header:hover, .new-canvas-item.icon.hovering, table tr:hover, .CodeMirror.blank, .remote-banner, .process-group-details-banner, .process-group-details-banner, remote-process-group-details-banner, .remote-process-group-last-refresh-rect, 200: #c29dcc, // .processor-stats-border, .process-group-stats-border, .context-menu-item:hover, .process-group-banner, .remote-process-group-banner, .a, button.nifi-button, button.nifi-button:disabled 300: #aa79b7, // .breadcrumb-container, .navigation-control, .operation-control, .flow-status, .controller-bulletins, .component-button-grip, .search-container, .nifi-navigation, .CodeMirror.blank 400: #985fa7, // Default hue for this palette (color="primary"). @@ -36,10 +40,10 @@ $material-primary-light-palette: ( // A100 -> A700 are the ACCENT color (mat.define-palette($material-primary-light-palette, A400, A100, A700);). These color are the ANALOGOUS (or possibly the TRIADIC??) colors as defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b // These colors are also used by some custom canvas components that display the ANALOGOUS color for things like buttons, links, borders, info, etc. - A100: #aabec7, // .zero - A200: #44a3cf, // .enabled, .transmitting, .load-balance-icon-active - A400: #004849, // a, a:hover, button.nifi-button, button.nifi-button:hover, .add-tenant-to-policy-form.fa, .component.selected rect.border, .add-connect, .remote-process-group-uri, .remote-process-group-transmission-secure, .navigation-control.fa, .operation-control.fa, .new-canvas-item.icon, .upload-flow-definition, .lineage-controls.fa, .event circle.context, .nifi-navigation.icon, .listing-table.fa, .listing-table.icon, .context-menu - A700: rgba(20, 145, 193, 0.12), // .hint-pattern + A100: rgba(20, 145, 193, 0.12), // .hint-pattern + A200: #aabec7, // .zero + A400: #44a3cf, // .enabled, .transmitting, .load-balance-icon-active + A700: #004849, // a, a:hover, button.nifi-button, button.nifi-button:hover, .add-tenant-to-policy-form.fa, .component.selected rect.border, .add-connect, .remote-process-group-uri, .remote-process-group-transmission-secure, .navigation-control.fa, .operation-control.fa, .new-canvas-item.icon, .upload-flow-definition, .lineage-controls.fa, .event circle.context, .nifi-navigation.icon, .listing-table.fa, .listing-table.icon, .context-menu // These are the $material-primary-light-palette PRIMARY AND ACCENT contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important @@ -50,354 +54,69 @@ $material-primary-light-palette: ( // NOTE: When creating the Material palette definition mat.define-palette($material-primary-light-palette, 300); // Since 300, was set as the default the contrast-300 will be used as the default text color. contrast: ( - 50: rgba(black, 0.87), - 100: rgba(black, 0.87), - 200: rgba(black, 0.87), - 300: #ffffff, - 400: #ffffff, - 500: #ffffff, - 600: #ffffff, - 700: #ffffff, - 800: #ffffff, - 900: #ffffff, - A100: rgba(black, 0.87), - A200: rgba(black, 0.87), - A400: #ffffff, - A700: #ffffff, + 50: $on-surface-dark, + 100: $on-surface-dark, + 200: $on-surface-dark, + 300: $on-surface-light, + 400: $on-surface-light, + 500: $on-surface-light, + 600: $on-surface-light, + 700: $on-surface-light, + 800: $on-surface-light, + 900: $on-surface-light, + A100: $on-surface-dark, + A200: $on-surface-dark, + A400: $on-surface-light, + A700: $on-surface-light, ) ); // The $material-primary-dark-palette define the PRIMARY AND ACCENT palettes for all Angular Material components used throughout Apache NiFi -$material-primary-dark-palette: ( - // 50 -> 900 are the PRIMARY colors (mat.define-palette($material-primary-dark-palette, 300);) defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b - 50: rgba(69, 47, 101, 1), // .context-menu - 100: rgba(93, 57, 123, 1), // "lighter" hue for this palette. Also .global-menu:hover, .navigation-control-header:hover, .operation-control-header:hover, .new-canvas-item.icon.hovering, table tr:hover, .CodeMirror.blank, .remote-banner, .process-group-details-banner, .process-group-details-banner, remote-process-group-details-banner, .remote-process-group-last-refresh-rect, - 200: #6b3f86, // .processor-stats-border, .process-group-stats-border, .context-menu-item:hover, .process-group-banner, .remote-process-group-banner, .a, button.nifi-button, button.nifi-button:disabled - 300: #7b4690, // .breadcrumb-container, .navigation-control, .operation-control, .flow-status, .controller-bulletins, .component-button-grip, .search-container, .nifi-navigation, .CodeMirror.blank - 400: #874b98, // Default hue for this palette (color="primary"). - 500: #985fa7, // .disabled, .not-transmitting, .splash, .access-policies-header, .operation-context-type, .bulletin-board-header, .counter-header, .stats-info, .active-thread-count-icon, .processor-type, .port-transmission-icon, .operation-context-type, .flow-status.fa, .flow-status.icon, .controller-bulletins, .prioritizers-list, .controller-services-header, .login-title, .parameter-context-header, .parameter-context-inheritance-list, .provenance-header, .flowfile-header, .queue-listing-header, .settings-header, .summary-header, .user-header, table th, button.global-menu-item.fa, button.global-menu-item.icon, .event-header, .section-header, - 600: #aa79b7, // .breadcrumb-container, .birdseye-brush - 700: #d3bada, // "darker" hue for this palette. Also #status-history-chart-container text, #status-history-chart-control-container text - 800: #dac3e0, - 900: #f0e7f2, - - // A100 -> A700 are the ACCENT color (mat.define-palette($material-primary-dark-palette, A400, A100, A700);). These color are the ANALOGOUS (or possibly the TRIADIC??) colors as defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b - // These colors are also used by some custom canvas components that display the ANALOGOUS color for things like buttons, links, borders, info, etc. - A100: #2cd5d5, // .zero - A200: #009b9d, // .enabled, .transmitting, .load-balance-icon-active - A400: #44a3cf, // a, a:hover, button.nifi-button, button.nifi-button:hover, .add-tenant-to-policy-form.fa, .component.selected rect.border, .add-connect, .remote-process-group-uri, .remote-process-group-transmission-secure, .navigation-control.fa, .operation-control.fa, .new-canvas-item.icon, .upload-flow-definition, .lineage-controls.fa, .event circle.context, .nifi-navigation.icon, .listing-table.fa, .listing-table.icon, .context-menu - A700: rgba(139, 208, 229, 1),//#aabec7 // .hint-pattern - - // These are the $material-primary-dark-palette PRIMARY AND ACCENT contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. - // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important - // for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc. - // - // NOTE: Care should be taken here to ensure the values meet accessibility standards. - // - // NOTE: When creating the Material palette definition mat.define-palette($material-primary-dark-palette, 300); - // Since 300, was set as the default the contrast-300 will be used as the default text color. - contrast: ( - 50: #ffffff, - 100: #ffffff, - 200: #ffffff, - 300: #ffffff, - 400: #ffffff, - 500: #ffffff, - 600: rgba(black, 0.87), - 700: rgba(black, 0.87), - 800: rgba(black, 0.87), - 900: rgba(black, 0.87), - A100: #ffffff, - A200: #ffffff, - A400: rgba(black, 0.87), - A700: rgba(black, 0.87), - ) -); - -// The $nifi-canvas-light-palette defines the PRIMARY palette for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi -$nifi-canvas-light-palette: ( - // mat.define-palette($nifi-canvas-light-palette) - 50: rgba(0, 0, 0, 0.25), // .tooltip, .property-editor, g.component rect.border, .component-comments, g.connection path.connection-path, g.connection rect.backpressure-tick.data-size-prediction, g.connection rect.backpressure-tick.object-prediction, g.connection rect.backpressure-object, g.connection rect.backpressure-data-size, .breadcrumb-container, .navigation-control, .operation-control, header.nifi-header, .new-canvas-item.icon.hovering, .cdk-drag-disabled, .cdk-drag-preview, .context-menu, .global-menu:hover, - 100: rgba(black, 0.87), // .prioritizer-draggable-item, .parameter-context-draggable-item - 200: #000, // .tooltip, .cm-s-default .CodeMirror-matchingbracket, circle.flowfile-link - 300: #aaaaaa, // .context-menu-item:active, .CodeMirror, .cm-s-default .CodeMirror-matchingbracket - 400: #acacac, // .unset, .border.ghost, .backpressure-tick.not-configured, g.connection.ghost path.connection-path, g.connection.ghost rect.connection-label, .prioritizers-list, .prioritizer-draggable-item, .parameter-context-inheritance-list, .parameter-context-draggable-item - 500: #d8d8d8, // g.connection rect.backpressure-object, g.connection rect.backpressure-data-size, .cdk-drag-disabled, .resizable-triangle - 600: #f9fafb, // .canvas-background, .navigation-control, .operation-control, .lineage - 700: #e5ebed, // .canvas-background, g.component rect.body.unauthorized, g.component rect.processor-icon-container.unauthorized, g.connection rect.body.unauthorized, #birdseye, .lineage - 800: #f4f6f7, // .even, .remote-process-group-sent-stats, .processor-stats-in-out, .process-group-queued-stats, .process-group-read-write-stats - 900: rgba(255, 255, 255, 1), // circle.flowfile-link, .processor-read-write-stats, .process-group-stats-in-out, .tooltip, .property-editor, .disabled, .enabled, .stopped, .running, .has-errors, .invalid, .validating, .transmitting, .not-transmitting, .up-to-date, .locally-modified, .sync-failure, .stale, .locally-modified-and-stale, g.component rect.body, text.bulletin-icon, rect.processor-icon-container, circle.restricted-background, circle.is-primary-background, g.connection rect.body, text.connection-to-run-status, text.expiration-icon, text.load-balance-icon, text.penalized-icon, g.connection rect.backpressure-tick.data-size-prediction.prediction-down, g.connection rect.backpressure-tick.object-prediction.prediction-down, text.version-control, .breadcrumb-container, #birdseye, .controller-bulletins .fa, .search-container:hover, .search-container.open, .login-background, table th, .mat-sort-header-arrow, .CodeMirror, #status-history-chart-container, #status-history-chart-control-container, #status-history-chart-control-container, - - // some analog colors for headers and hover states, inputs, stats, etc - A100: rgba(227, 232, 235, 0), // .navigation-control-header:hover, .operation-control-header:hover, .axis path, .axis line - A200: #262626, // .operation-context-name, text.stats-label, text.processor-name, text.port-name, text.process-group-name, text.remote-process-group-name, .navigation-control-title, .operation-control-title, .operation-context-name, .search-input, .context-menu-item-text, .current-user - A400: #444, // rect.component-selection, rect.drag-selection, rect.label-drag - A700: #666, // text.processor-bundle, .search-container:hover, .search-container.open, .search-container.fa, .selected-type-bundle, .brush .selection - - // These are the $nifi-canvas-light-palette PRIMARY palette contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. - // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important - // for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc. - // - // NOTE: Care should be taken here to ensure the values meet accessibility standards. - // - // NOTE: When creating the Material palette definition mat.define-palette($nifi-canvas-light-palette); - // Since 500 is the default the contrast-500 will be used as the default text color. - contrast: ( - 50: rgba(black, 0.87), - 100: rgba(black, 0.87), - 200: rgba(black, 0.87), - 300: rgba(black, 0.87), - 400: #ffffff, - 500: #ffffff, - 600: #ffffff, - 700: #ffffff, - 800: #ffffff, - 900: #ffffff, - A100: rgba(black, 0.87), - A200: rgba(black, 0.87), - A400: #ffffff, - A700: #ffffff, - ) -); - -// The $nifi-canvas-dark-palette defines the PRIMARY palette for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi -$nifi-canvas-dark-palette: ( - // mat.define-palette($nifi-canvas-dark-palette) - 50: rgba(255, 255, 255, 1), // .tooltip, .property-editor, g.component rect.border, .component-comments, g.connection path.connection-path, g.connection rect.backpressure-tick.data-size-prediction, g.connection rect.backpressure-tick.object-prediction, g.connection rect.backpressure-object, g.connection rect.backpressure-data-size, .breadcrumb-container, .navigation-control, .operation-control, header.nifi-header, .new-canvas-item.icon.hovering, .cdk-drag-disabled, .cdk-drag-preview, .context-menu, .global-menu:hover, - 100: #f4f6f7, //rgba(black, 0.87), // .prioritizer-draggable-item, .parameter-context-draggable-item - 200: #e5ebed, // .tooltip, .cm-s-default .CodeMirror-matchingbracket, circle.flowfile-link - 300: #f9fafb, // .context-menu-item:active, .CodeMirror, .cm-s-default .CodeMirror-matchingbracket - 400: #d8d8d8, // .unset, .border.ghost, .backpressure-tick.not-configured, g.connection.ghost path.connection-path, g.connection.ghost rect.connection-label, .prioritizers-list, .prioritizer-draggable-item, .parameter-context-inheritance-list, .parameter-context-draggable-item - 500: #acacac, // g.connection rect.backpressure-object, g.connection rect.backpressure-data-size, .cdk-drag-disabled, .resizable-triangle - 600: #545454, // .canvas-background, .navigation-control, .operation-control, .lineage - 700: #696060, // .canvas-background, g.component rect.body.unauthorized, g.component rect.processor-icon-container.unauthorized, g.connection rect.body.unauthorized, #birdseye, .lineage - 800: rgba(#6b6464, 1), // .even, .remote-process-group-sent-stats, .processor-stats-in-out, .process-group-queued-stats, .process-group-read-write-stats - 900: rgba(#252424, 0.97), // circle.flowfile-link, .processor-read-write-stats, .process-group-stats-in-out, .tooltip, .property-editor, .disabled, .enabled, .stopped, .running, .has-errors, .invalid, .validating, .transmitting, .not-transmitting, .up-to-date, .locally-modified, .sync-failure, .stale, .locally-modified-and-stale, g.component rect.body, text.bulletin-icon, rect.processor-icon-container, circle.restricted-background, circle.is-primary-background, g.connection rect.body, text.connection-to-run-status, text.expiration-icon, text.load-balance-icon, text.penalized-icon, g.connection rect.backpressure-tick.data-size-prediction.prediction-down, g.connection rect.backpressure-tick.object-prediction.prediction-down, text.version-control, .breadcrumb-container, #birdseye, .controller-bulletins .fa, .search-container:hover, .search-container.open, .login-background, table th, .mat-sort-header-arrow, .CodeMirror, #status-history-chart-container, #status-history-chart-control-container, #status-history-chart-control-container, - - // some analog colors for headers and hover states, inputs, stats, etc - A100: #000, // .navigation-control-header:hover, .operation-control-header:hover, .axis path, .axis line - A200: #e7e6e6, // .operation-context-name, text.stats-label, text.processor-name, text.port-name, text.process-group-name, text.remote-process-group-name, .navigation-control-title, .operation-control-title, .operation-context-name, .search-input, .context-menu-item-text, .current-user - A400: #b0b0b0, // rect.component-selection, rect.drag-selection, rect.label-drag - A700: #b2b2b2, // text.processor-bundle, .search-container:hover, .search-container.open, .search-container.fa, .selected-type-bundle, .brush .selection - - // These are the $nifi-canvas-dark-palette PRIMARY palette contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. - // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important - // for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc. - // - // NOTE: Care should be taken here to ensure the values meet accessibility standards. - // - // NOTE: When creating the Material palette definition mat.define-palette($nifi-canvas-dark-palette); - // Since 500 is the default the contrast-500 will be used as the default text color. - contrast: ( - 50: #ffffff, - 100: #ffffff, - 200: #ffffff, - 300: #ffffff, - 400: #ffffff, - 500: #ffffff, - 600: rgba(black, 0.87), - 700: rgba(black, 0.87), - 800: rgba(black, 0.87), - 900: rgba(black, 0.87), - A100: #ffffff, - A200: #ffffff, - A400: rgba(black, 0.87), - A700: rgba(black, 0.87), - ) -); - -// The $nifi-canvas-light-palette defines the ACCENT palette for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi -$nifi-canvas-accent-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 #52bf7e - 50: #e6f6ec, - 100: #c3e8d0, // "lighter" hue for this palette. - 200: #9dd9b2, //.running - 300: #73ca94, //.backpressure-percent - 400: #52bf7e, // color="primary" Default hue for this palette. Also .up-to-date - 500: #2cb367, - 600: #1A9964, //.version-control - 700: #016131, // "darker" hue for this palette Also .bulletin-normal - 800: #0000ff, //.endpoint, g.process-group.drop rect.border - 900: #00ff00, //.connectable-destination, .connector.connectable - - // A100 - A700 are the ANALOGOUS colors but are more customized. These colors are used to highlight, warn, denote midpoints and labelpoints, etc - A100: #ffef85, //.selected - A200: #f8bf47, //.invalid, .is-missing-port, circle.context - A400: #bda500, //.backpressure-percent-warning, .bulletin-warn, .backpressure-percent.warning, text.run-status-icon - A700: #ffcc00, //g.connection.selected rect.border, .connection-selection-path, .midpoint, .labelpoint - - // These are the $nifi-canvas-accent-light-palette PRIMARY palette contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. - // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important - // for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc. - // - // NOTE: Care should be taken here to ensure the values meet accessibility standards. - // - // NOTE: When creating the Material palette definition mat.define-palette($nifi-canvas-accent-light-palette, 400, 100, 700); - // Since 400 is the default the contrast-400 will be used as the default text color in some cases. - contrast: ( - 50: rgba(black, 0.87), - 100: rgba(black, 0.87), - 200: rgba(black, 0.87), - 300: rgba(black, 0.87), - 400: rgba(black, 0.87), - 500: rgba(black, 0.87), - 600: #ffffff, - 700: #ffffff, - 800: #ffffff, - 900: #ffffff, - A100: rgba(black, 0.87), - A200: rgba(black, 0.87), - A400: rgba(black, 0.87), - A700: rgba(black, 0.87), - ) -); - -// The $nifi-canvas-dark-palette defines the ACCENT palette for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi -$nifi-canvas-accent-dark-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 #52bf7e - 50: #016131, - 100: #1A9964, // "lighter" hue for this palette. - 200: #2cb367, //.running - 300: #52bf7e, //.backpressure-percent - 400: #73ca94, // color="primary" Default hue for this palette. Also .up-to-date - 500: #9dd9b2, - 600: #c3e8d0, //.version-control - 700: #e6f6ec, // "darker" hue for this palette Also .bulletin-normal - 800: #0000ff, //.endpoint, g.process-group.drop rect.border - 900: #00ff00, //.connectable-destination, .connector.connectable - - // A100 - A700 are the ANALOGOUS colors but are more customized. These colors are used to highlight, warn, denote midpoints and labelpoints, etc - A100: #cbaa09, //.selected - A200: #bda500, //.invalid, .is-missing-port, circle.context - A400: #f8bf47, //.backpressure-percent-warning, .bulletin-warn, .backpressure-percent.warning, text.run-status-icon - A700: #948b4b, //g.connection.selected rect.border, .connection-selection-path, .midpoint, .labelpoint - - // These are the $nifi-canvas-accent-dark-palette PRIMARY palette contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. - // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important - // for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc. - // - // NOTE: Care should be taken here to ensure the values meet accessibility standards. - // - // NOTE: When creating the Material palette definition mat.define-palette($nifi-canvas-accent-dark-palette, 400, 100, 700); - // Since 400 is the default the contrast-400 will be used as the default text color in some cases. - contrast: ( - 50: #ffffff, - 100: #ffffff, - 200: #ffffff, - 300: #ffffff, - 400: #ffffff, - 500: #ffffff, - 600: rgba(black, 0.87), - 700: rgba(black, 0.87), - 800: rgba(black, 0.87), - 900: rgba(black, 0.87), - A100: #ffffff, - A200: #ffffff, - A400: rgba(black, 0.87), - A700: rgba(black, 0.87), - ) -); +$material-primary-dark-palette: $material-primary-light-palette; +// The $warn-light-palette defines the WARN palette both for all Angular Material components used throughout Apache NiFi and for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi // The $warn-light-palette defines the WARN palette both for all Angular Material components used throughout Apache NiFi and for all flow designer canvas components that make up the NiFi canvas theme 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, // "lighter" hue for this palette. Also .banner-error - 200: #f49999, //.stopped - 300: #eb7071, //.stale - 400: #f64e4c, // color="primary" Default hue for this palette. Also .unauthorized, .bulletin-background, .restricted, .connection-path.full, .connection-path.unauthorized, .backpressure-percent.error, .controller-bulletins.has-bulletins, .link.selected, circle.selected, .listing-message, .fa-shield + 100: #ffccd2, + 200: #f49999, // "lighter" hue for this palette..stopped + 300: #f57472, + 400: #f64e4c, // color="primary" Default hue for this palette. Also .unauthorized, .restricted, .connection-path.full, .connection-path.unauthorized, .backpressure-percent.error, .controller-bulletins.has-bulletins, .link.selected, circle.selected, .listing-message, .fa-shield, .stale 500: #fa3b30, - 600: #ec3030, //.bulletin-error - 700: #ff1507, // "darker" hue for this palette - 800: #ff0000, //.connector, .startpoint - 900: #f10000, - - // A100 - A700 are the COMPLEMENTARY colors defined by the PRIMARY colors defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b which is the primary color of the $material-primary-light-palette. - // These color are used for label values, stats, timestamps, counts, etc. - A100: #b6abaa, //.sync-failure - A200: #9c8886, // .operation-context-logo, .funnel-icon, .port-icon, .flowfile-icon - A400: #765452, // .value, .refresh-timestamp, .stats-value, .active-thread-count, .process-group-contents-count, .operation-context-id, .selected-type-name - A700: #4a3435, // .version-control - - // These are the $nifi-canvas-accent-light-palette PRIMARY palette contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. - // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important - // for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc. - // - // NOTE: Care should be taken here to ensure the values meet accessibility standards. - // - // NOTE: When creating the Material palette definition mat.define-palette($warn-light-palette, 400, 100, 700); - // Since 400 is the default the contrast-400 will be used as the default text color in some cases. + 600: #ff1507, // .bulletin-error + 700: #ff0000, //.connector, .startpoint + 800: #ec3030, + 900: #ba554a, // "darker" hue for this palette .bulletin-background + A100: #ffef85, //.sync-failure + A200: #f8bf47, //.invalid, .is-missing-port, circle.context + A400: #f29833, // .value, .refresh-timestamp, .stats-value, .active-thread-count, .process-group-contents-count, .operation-context-id, .selected-type-name + A700: #eb711e, // .version-control contrast: ( - 50: rgba(black, 0.87), - 100: rgba(black, 0.87), - 200: rgba(black, 0.87), - 300: rgba(black, 0.87), - 400: rgba(black, 0.87), - 500: #ffffff, - 600: #ffffff, - 700: #ffffff, - 800: #ffffff, - 900: #ffffff, - A100: rgba(black, 0.87), - A200: #ffffff, - A400: #ffffff, - A700: #ffffff, + 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, ) ); // The $warn-dark-palette defines the WARN palette both for all Angular Material components used throughout Apache NiFi and for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi -$warn-dark-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: #f10000, - 100: #ff0000, // "lighter" hue for this palette. Also .banner-error - 200: #ff1507, //.stopped - 300: #ec3030, //.stale - 400: #fa3b30, // color="primary" Default hue for this palette. Also .unauthorized, .bulletin-background, .restricted, .connection-path.full, .connection-path.unauthorized, .backpressure-percent.error, .controller-bulletins.has-bulletins, .link.selected, circle.selected, .listing-message, .fa-shield - 500: #f64e4c, - 600: #eb7071, //.bulletin-error - 700: #f49999, // "darker" hue for this palette - 800: #ffccd2, //.connector, .startpoint - 900: #ffebee, - - // A100 - A700 are the COMPLEMENTARY colors defined by the PRIMARY colors defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b which is the primary color of the $material-primary-dark-palette. - // These color are used for label values, stats, timestamps, counts, etc. - A100: #8e77ab, //.sync-failure - A200: #9a81b9, // .operation-context-logo, .funnel-icon, .port-icon, .flowfile-icon - A400: #c5b7d5, // .value, .refresh-timestamp, .stats-value, .active-thread-count, .process-group-contents-count, .operation-context-id, .selected-type-name - A700: #afaab6, // .version-control - - // These are the $nifi-canvas-accent-dark-palette PRIMARY palette contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. - // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important - // for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc. - // - // NOTE: Care should be taken here to ensure the values meet accessibility standards. - // - // NOTE: When creating the Material palette definition mat.define-palette($warn-dark-palette, 400, 100, 700); - // Since 400 is the default the contrast-400 will be used as the default text color in some cases. - contrast: ( - 50: #ffffff, - 100: #ffffff, - 200: #ffffff, - 300: #ffffff, - 400: #ffffff, - 500: rgba(black, 0.87), - 600: rgba(black, 0.87), - 700: rgba(black, 0.87), - 800: rgba(black, 0.87), - 900: rgba(black, 0.87), - A100: #ffffff, - A200: #ffffff, - A400: rgba(black, 0.87), - A700: rgba(black, 0.87), - ) -); +$warn-dark-palette: $warn-light-palette; // Define the palettes for your theme $material-primary-light: mat.define-palette($material-primary-light-palette); -$material-accent-light: mat.define-palette($material-primary-light-palette, A400, A100, A700); -$nifi-canvas-primary-light: mat.define-palette($nifi-canvas-light-palette); -$nifi-canvas-accent-light: mat.define-palette($nifi-canvas-accent-light-palette, 400, 100, 700); -$warn-light: mat.define-palette($warn-light-palette, 400, 100, 700); +$material-accent-light: mat.define-palette($material-primary-light-palette, A700, A200, A100); +$warn-light: mat.define-palette($warn-light-palette, 400, 100, 600); // Create the theme objects. We can extract the values we need from the theme passed into the mixins. $material-theme-light: mat.define-light-theme( @@ -412,24 +131,10 @@ $material-theme-light: mat.define-light-theme( ) ); -$nifi-canvas-theme-light: mat.define-light-theme( - ( - color: ( - primary: $nifi-canvas-primary-light, - accent: $nifi-canvas-accent-light, - warn: $warn-light - ), - //typography: mat.define-typography-config(), // TODO: typography - density: -3 - ) -); - // Create the color palettes used in our dark theme. $material-primary-dark: mat.define-palette($material-primary-dark-palette); -$material-accent-dark: mat.define-palette($material-primary-dark-palette, A400, A100, A700); -$nifi-canvas-primary-dark: mat.define-palette($nifi-canvas-dark-palette); -$nifi-canvas-accent-dark: mat.define-palette($nifi-canvas-accent-dark-palette); -$warn-dark: mat.define-palette($warn-dark-palette, 600, 200, 800); +$material-accent-dark: mat.define-palette($material-primary-dark-palette, A700, A200, A100); +$warn-dark: mat.define-palette($warn-dark-palette, 800, 200, 700); $material-theme-dark: mat.define-dark-theme( ( @@ -442,16 +147,3 @@ $material-theme-dark: mat.define-dark-theme( typography: mat.define-typography-config(), ) ); - -$nifi-canvas-theme-dark: mat.define-dark-theme( - ( - color: ( - primary: $nifi-canvas-primary-dark, - accent: $nifi-canvas-accent-dark, - warn: $warn-dark, - ), - //typography: mat.define-typography-config(), // TODO: typography - density: -3 - ) -); - 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 new file mode 100644 index 000000000000..7f9b8d3546bd --- /dev/null +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/utils.scss @@ -0,0 +1,186 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@use 'sass:map'; +@use '@angular/material' as mat; + +@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; + } +} + +@function get-surface($theme, $step: default, $palette: '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, $palette); + + $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; +} + +@function get-on-surface($theme, $step: default, $palette: '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, 'primary'); + + $value: if($is-dark, '900-contrast', '50-contrast'); + + //Grab 50 for light themes and 900 for dark themes + $on-surface: mat.get-color-from-palette($color-palette, $value); + $highlight: if($is-dark, 0.1, 0.07); + + $list: ( + default: 1, + lighter: if($is-dark, 0.28, 0.2), + highlight: if($is-dark, 0.15, 0.05), + medium: 0.87 + ); + + $alpha: map.get($list, $step); + $alpha: if($alpha, $alpha, 1); + + $on-surface: rgba($on-surface, $alpha); + + @return $on-surface; +} + +@function get-color-on-surface($theme, $surface: #ffffff, $palette: '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, $palette); + + $default: mat.get-color-from-palette($color-palette, default); + $high-contrast: mat.get-color-from-palette($color-palette, if($is-dark, lighter, darker)); + + $on-surface: ensure-contrast($default, $surface, $high-contrast); + + @return $on-surface; +} + +@function contrast($foreground, $background) { + // Calculate and modify the luminosity based on the W3C formula. + $foreground-luminosity: luminosity($foreground) + 0.05; + $background-luminosity: luminosity($background) + 0.05; + + $ratio: 0; + // Invert the colors to get the ratio when the background is brighter than the foreground. + @if ($background-luminosity > $foreground-luminosity) { + $ratio: calc($background-luminosity / $foreground-luminosity); + } @else { + $ratio: calc($foreground-luminosity / $background-luminosity); + } + + @return $ratio; +} + +@function luminosity($color) { + // Get the index so we can lookup the pre-calculated values. + // We add 1 because the list index starts at 1, not 0. + $r: red($color) + 1; + $g: green($color) + 1; + $b: blue($color) + 1; + + // Lookup the pre-calculated values. + $r: nth($rgb-lookup, $r); + $g: nth($rgb-lookup, $g); + $b: nth($rgb-lookup, $b); + + // Apply the weights for each color channel, and add them together. + $luminosity: $r * 0.2126 + $g * 0.7152 + $b * 0.0722; + + @return $luminosity; +} + +/* + * This is a lookup list of the outputs of the middle luminosity calculation used by W3C + * to determine contrast ratios. SASS cannot do exponent calculations so this is necessary. + * + * Indexes 1 through 10 are calculated as (8bit value for RGB / 255) / 12.92 + * Indexes 11 through 256 are calculated as ((8bit value for RGB / 255) + 0.055) / 1.055) ^ 2.4 + * + */ +$rgb-lookup: 0 0.0003035269835488375 0.000607053967097675 0.0009105809506465125 0.00121410793419535 + 0.0015176349177441874 0.001821161901293025 0.0021246888848418626 0.0024282158683907 0.0027317428519395373 + 0.003035269835488375 0.003346535763899161 0.003676507324047436 0.004024717018496307 0.004391442037410293 + 0.004776953480693729 0.005181516702338386 0.005605391624202723 0.006048833022857054 0.006512090792594475 + 0.006995410187265387 0.007499032043226175 0.008023192985384994 0.008568125618069307 0.009134058702220787 + 0.00972121732023785 0.010329823029626936 0.010960094006488246 0.011612245179743885 0.012286488356915872 + 0.012983032342173012 0.013702083047289686 0.014443843596092545 0.01520851442291271 0.01599629336550963 + 0.016807375752887384 0.017641954488384078 0.018500220128379697 0.019382360956935723 0.0202885630566524 + 0.021219010376003555 0.022173884793387385 0.02315336617811041 0.024157632448504756 0.02518685962736163 + 0.026241221894849898 0.027320891639074894 0.028426039504420793 0.0295568344378088 0.030713443732993635 + 0.03189603307301153 0.033104766570885055 0.03433980680868217 0.03560131487502034 0.03688945040110004 + 0.0382043715953465 0.03954623527673284 0.04091519690685319 0.042311410620809675 0.043735029256973465 + 0.04518620438567554 0.046665086336880095 0.04817182422688942 0.04970656598412723 0.05126945837404324 + 0.052860647023180246 0.05448027644244237 0.05612849004960009 0.05780543019106723 0.0595112381629812 + 0.06124605423161761 0.06301001765316767 0.06480326669290577 0.06662593864377289 0.06847816984440017 + 0.07036009569659588 0.07227185068231748 0.07421356838014963 0.07618538148130785 0.07818742180518633 + 0.08021982031446832 0.0822827071298148 0.08437621154414882 0.08650046203654976 0.08865558628577294 + 0.09084171118340768 0.09305896284668745 0.0953074666309647 0.09758734714186246 0.09989872824711389 + 0.10224173308810132 0.10461648409110419 0.10702310297826761 0.10946171077829933 0.1119324278369056 + 0.11443537382697373 0.11697066775851084 0.11953842798834562 0.12213877222960187 0.12477181756095049 + 0.12743768043564743 0.1301364766903643 0.13286832155381798 0.13563332965520566 0.13843161503245183 + 0.14126329114027164 0.14412847085805777 0.14702726649759498 0.14995978981060856 0.15292615199615017 + 0.1559264637078274 0.1589608350608804 0.162029375639111 0.1651321945016676 0.16826940018969075 0.1714411007328226 + 0.17464740365558504 0.17788841598362912 0.18116424424986022 0.184474994500441 0.18782077230067787 + 0.19120168274079138 0.1946178304415758 0.19806931955994886 0.20155625379439707 0.20507873639031693 + 0.20863687014525575 0.21223075741405523 0.21586050011389926 0.2195261997292692 0.2232279573168085 + 0.22696587351009836 0.23074004852434915 0.23455058216100522 0.238397573812271 0.24228112246555486 + 0.24620132670783548 0.25015828472995344 0.25415209433082675 0.2581828529215958 0.26225065752969623 + 0.26635560480286247 0.2704977910130658 0.27467731206038465 0.2788942634768104 0.2831487404299921 0.2874408377269175 + 0.29177064981753587 0.2961382707983211 0.3005437944157765 0.3049873140698863 0.30946892281750854 0.31398871337571754 + 0.31854677812509186 0.32314320911295075 0.3277780980565422 0.33245153634617935 0.33716361504833037 + 0.3419144249086609 0.3467040563550296 0.35153259950043936 0.3564001441459435 0.3613067797835095 0.3662525955988395 + 0.3712376804741491 0.3762621229909065 0.38132601143253014 0.386429433787049 0.39157247774972326 0.39675523072562685 + 0.4019777798321958 0.4072402119017367 0.41254261348390375 0.4178850708481375 0.4232676699860717 0.4286904966139066 + 0.43415363617474895 0.4396571738409188 0.44520119451622786 0.45078578283822346 0.45641102318040466 + 0.4620769996544071 0.467783796112159 0.47353149614800955 0.4793201831008268 0.4851499400560704 0.4910208498478356 + 0.4969329950608704 0.5028864580325687 0.5088813208549338 0.5149176653765214 0.5209955732043543 0.5271151257058131 + 0.5332764040105052 0.5394794890121072 0.5457244613701866 0.5520114015120001 0.5583403896342679 0.5647115057049292 + 0.5711248294648731 0.5775804404296506 0.5840784178911641 0.5906188409193369 0.5972017883637634 0.6038273388553378 + 0.6104955708078648 0.6172065624196511 0.6239603916750761 0.6307571363461468 0.6375968739940326 0.6444796819705821 + 0.6514056374198242 0.6583748172794485 0.665387298282272 0.6724431569576875 0.6795424696330938 0.6866853124353135 + 0.6938717612919899 0.7011018919329731 0.7083757798916868 0.7156935005064807 0.7230551289219693 0.7304607400903537 + 0.7379104087727308 0.7454042095403874 0.7529422167760779 0.7605245046752924 0.768151147247507 0.7758222183174236 + 0.7835377915261935 0.7912979403326302 0.799102738014409 0.8069522576692516 0.8148465722161012 0.8227857543962835 + 0.8307698767746546 0.83879901174074 0.846873231509858 0.8549926081242338 0.8631572134541023 0.8713671191987972 + 0.8796223968878317 0.8879231178819663 0.8962693533742664 0.9046611743911496 0.9130986517934192 0.9215818562772946 + 0.9301108583754237 0.938685728457888 0.9473065367331999 0.9559733532492861 0.9646862478944651 0.9734452903984125 + 0.9822505503331171 0.9911020971138298 1; 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 bd9dce75684c..486bc6a41ce5 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 @@ -73,8 +73,13 @@ @use 'codemirror/lib/codemirror.css'; @use 'codemirror/addon/hint/show-hint.css'; +@use 'assets/utils.scss' as utils; + // NOTE: for faster developer cycles during theme development the theme can also be changed here. // Ex: @import 'assets/themes/purple'; +// To override the canvas theme, you need to set the variables $nifi-canvas-theme-light and $nifi-canvas-theme-dark +@import 'assets/themes/nifi-canvas'; +// To override the NiFi theme, you need to set the variables $material-theme-light and $material-theme-dark @import 'assets/themes/nifi'; $fontPrimary: 'Roboto', sans-serif; @@ -187,149 +192,146 @@ $appFontPath: '~roboto-fontface/fonts'; $canvas-accent-palette: map.get($canvas-color-config, 'accent'); // Get hues from palette - $primary-palette-50: mat.get-color-from-palette($primary-palette, 50); - $primary-palette-200: mat.get-color-from-palette($primary-palette, 200); - $primary-palette-500: mat.get-color-from-palette($primary-palette, 500); - $accent-palette-A100: mat.get-color-from-palette($accent-palette, 'A100'); - $accent-palette-A200: mat.get-color-from-palette($accent-palette, 'A200'); - $accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400'); - $canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50); - $canvas-primary-palette-200: mat.get-color-from-palette($canvas-primary-palette, 200); + + // Start with the canvas theme. + $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, A200); $canvas-primary-palette-400: mat.get-color-from-palette($canvas-primary-palette, 400); - $canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900); - $canvas-accent-palette-200: mat.get-color-from-palette($canvas-accent-palette, 200); - $canvas-accent-palette-400: mat.get-color-from-palette($canvas-accent-palette, 400); - $canvas-accent-palette-A200: mat.get-color-from-palette($canvas-accent-palette, 'A200'); - $warn-palette-200: mat.get-color-from-palette($warn-palette, 200); - $warn-palette-300: mat.get-color-from-palette($warn-palette, 300); - $warn-palette-A100: mat.get-color-from-palette($warn-palette, 'A100'); - $warn-palette-A400: mat.get-color-from-palette($warn-palette, 'A400'); + $canvas-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500); + $canvas-accent-palette-lighter: mat.get-color-from-palette($canvas-accent-palette, lighter); + $canvas-accent-palette-default: mat.get-color-from-palette($canvas-accent-palette, default); + + $primary-palette-lighter: mat.get-color-from-palette($primary-palette, lighter); + $primary-palette-default: mat.get-color-from-palette($primary-palette, 'default'); + $primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400'); + + $accent-palette-default: mat.get-color-from-palette($accent-palette, 'default'); + $accent-palette-lighter: mat.get-color-from-palette($accent-palette, 'lighter'); + + $warn-palette-lighter: mat.get-color-from-palette($warn-palette, lighter); + $warn-palette-default: mat.get-color-from-palette($warn-palette, 'default'); + + // Alternative hue for warn colors. + $warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200'); + + $surface: utils.get-surface($canvas-color-config); + $surface-darker: utils.get-surface($canvas-color-config, darker); + $surface-highlight: utils.get-on-surface($canvas-color-config, highlight); + $on-surface: utils.get-on-surface($canvas-color-config); + $on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter); + + * { // Tailwind sets a default that doesn't shift with light and dark themes + border-color: $on-surface-lighter; + } a { - color: $accent-palette-A400; - text-decoration-color: $primary-palette-200; + color: utils.get-color-on-surface($color-config, $surface); + text-decoration-color: $primary-palette-lighter; } a:hover { - text-decoration-color: $accent-palette-A400; + text-decoration-color: utils.get-color-on-surface($color-config, $surface); } .tooltip { - background-color: $canvas-primary-palette-900; - border-color: $canvas-primary-palette-200; - box-shadow: 0 2px 5px $canvas-primary-palette-50; - color: $canvas-primary-palette-200; + background-color: $surface; + border-color: $on-surface; + box-shadow: 0 2px 5px $canvas-primary-palette-A200; + color: $on-surface; } .property-editor { - background-color: $canvas-primary-palette-900; - box-shadow: 0 2px 5px $canvas-primary-palette-50; + background-color: $surface; + box-shadow: 0 2px 5px $canvas-primary-palette-A200; } .disabled { - color: $primary-palette-500 !important; - fill: $primary-palette-500 !important; - text-shadow: 0 0 4px $canvas-primary-palette-900; + color: $primary-palette-default !important; + fill: $primary-palette-default !important; } .enabled { - color: $accent-palette-A200 !important; - fill: $accent-palette-A200 !important; - text-shadow: 0 0 4px $canvas-primary-palette-900; + color: $primary-palette-A400 !important; + fill: $primary-palette-A400 !important; } .stopped { - color: $warn-palette-200 !important; - fill: $warn-palette-200 !important; - text-shadow: 0 0 4px $canvas-primary-palette-900; + color: $warn-palette-lighter !important; + fill: $warn-palette-lighter !important; } .running { - color: $canvas-accent-palette-200 !important; - fill: $canvas-accent-palette-200 !important; - text-shadow: 0 0 4px $canvas-primary-palette-900; + color: $canvas-accent-palette-lighter !important; + fill: $canvas-accent-palette-lighter !important; } .has-errors, .invalid { - color: $canvas-accent-palette-A200 !important; - fill: $canvas-accent-palette-A200 !important; - text-shadow: 0 0 4px $canvas-primary-palette-900; + color: $warn-palette-A200 !important; + fill: $warn-palette-A200 !important; } .validating { - color: $canvas-primary-palette-400 !important; - fill: $canvas-primary-palette-400 !important; - text-shadow: 0 0 4px $canvas-primary-palette-900; + color: $canvas-primary-palette-500 !important; + fill: $canvas-primary-palette-500 !important; } .transmitting { - color: $accent-palette-A200 !important; - fill: $accent-palette-A200 !important; - text-shadow: 0 0 4px $canvas-primary-palette-900; - } - - .not-transmitting { - color: $primary-palette-500 !important; - fill: $primary-palette-500 !important; - text-shadow: 0 0 4px $canvas-primary-palette-900; + color: $canvas-accent-palette-default !important; + fill: $canvas-accent-palette-default !important; } .up-to-date { - color: $canvas-accent-palette-400 !important; - fill: $canvas-accent-palette-400 !important; - text-shadow: 0 0 4px $canvas-primary-palette-900; + color: $canvas-accent-palette-default !important; + fill: $canvas-accent-palette-default !important; } .locally-modified, .sync-failure { - color: $warn-palette-A100 !important; - fill: $warn-palette-A100 !important; - text-shadow: 0 0 4px $canvas-primary-palette-900; + color: $accent-palette-lighter !important; + fill: $accent-palette-lighter !important; } .stale, .locally-modified-and-stale { - color: $warn-palette-300 !important; - fill: $warn-palette-300 !important; - text-shadow: 0 0 4px $canvas-primary-palette-900; + color: $warn-palette-default !important; + fill: $warn-palette-default !important; } .zero { - color: $accent-palette-A100 !important; - fill: $accent-palette-A100 !important; - text-shadow: none !important; + opacity: 0.5; } .blank, .unset, .sensitive { - color: $canvas-primary-palette-400 !important; + color: $canvas-primary-palette-500 !important; } button.nifi-button { - border: 1px solid $primary-palette-200; - background-color: $primary-palette-50; - color: $accent-palette-A400; + color: utils.get-color-on-surface($color-config, $surface-darker); } button.nifi-button:hover { - border-color: $accent-palette-A400; + background-color: $surface-highlight; } button.nifi-button:disabled { - color: $primary-palette-200 !important; + color: $on-surface-lighter; + background-color: transparent; cursor: not-allowed; - border: 1px solid $primary-palette-200; - + i { - color: $primary-palette-200 !important; + color: $on-surface-lighter; } } .value, .refresh-timestamp { - color: $warn-palette-A400; + color: utils.get-color-on-surface($color-config, $surface, 'accent'); + } + + .accent-palette-default { + color: $accent-palette-default; } ngx-skeleton-loader .skeleton-loader {