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

NIFI-12870 Semantic colors (#8480) 

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.

This closes #8480
This commit is contained in:
James Mingardi-Elliott 2024-03-13 17:29:29 -04:00 committed by GitHub
parent 7db1664a7e
commit 06c0113063
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
65 changed files with 1174 additions and 1353 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/angular.json
View File

@ -98,6 +98,7 @@
} }
}, },
"cli": { "cli": {
"schematicCollections": ["@angular-eslint/schematics"] "schematicCollections": ["@angular-eslint/schematics"],
"analytics": false
} }
} }

16
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/_app.component-theme.scss
View File

@ -30,19 +30,19 @@
$canvas-accent-palette: map.get($canvas-color-config, 'accent'); $canvas-accent-palette: map.get($canvas-color-config, 'accent');
// Get hues from palette // Get hues from palette
$primary-palette-300: mat.get-color-from-palette($primary-palette, 300); $primary-palette-lighter: mat.get-color-from-palette($primary-palette, lighter);
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500); $primary-palette-default: mat.get-color-from-palette($primary-palette, default);
$accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400'); $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-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 { .splash {
background-color: $primary-palette-500; background-color: $primary-palette-default;
} }
// https://github.com/angular/components/issues/11426 // https://github.com/angular/components/issues/11426
.nifi-snackbar .mdc-snackbar__surface { .nifi-snackbar .mdc-snackbar__surface {
background-color: $primary-palette-300 !important; background-color: $primary-palette-lighter !important;
} }
// https://github.com/angular/components/issues/11426 // https://github.com/angular/components/issues/11426
@ -52,10 +52,10 @@
// https://github.com/angular/components/issues/11426 // https://github.com/angular/components/issues/11426
.nifi-snackbar .mat-mdc-button:not(:disabled) .mdc-button__label { .nifi-snackbar .mat-mdc-button:not(:disabled) .mdc-button__label {
color: $accent-palette-A400; color: $accent-palette-default;
} }
.fa.fa-check.complete { .fa.fa-check.complete {
color: $canvas-accent-palette-500; color: $canvas-accent-palette-default;
} }
} }

4
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
View File

@ -26,9 +26,9 @@
$primary-palette: map.get($color-config, 'primary'); $primary-palette: map.get($color-config, 'primary');
// Get hues from palette // 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 { .access-policies-header {
color: $primary-palette-500; color: $primary-palette-default;
} }
} }

4
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
View File

@ -26,11 +26,11 @@
$accent-palette: map.get($color-config, 'accent'); $accent-palette: map.get($color-config, 'accent');
// Get hues from palette // 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 { .add-tenant-to-policy-form {
.fa { .fa {
color: $accent-palette-A400; color: $accent-palette-default;
} }
} }
} }

4
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
View File

@ -20,8 +20,8 @@
<mat-dialog-content class="w-96"> <mat-dialog-content class="w-96">
<div class="mb-5">Do you want to override with a copy of the inherited policy or an empty policy?</div> <div class="mb-5">Do you want to override with a copy of the inherited policy or an empty policy?</div>
<mat-radio-group formControlName="override"> <mat-radio-group formControlName="override">
<mat-radio-button value="copy">Copy</mat-radio-button> <mat-radio-button color="primary" value="copy">Copy</mat-radio-button>
<mat-radio-button value="empty">Empty</mat-radio-button> <mat-radio-button color="primary" value="empty">Empty</mat-radio-button>
</mat-radio-group> </mat-radio-group>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions align="end"> <mat-dialog-actions align="end">

16
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
View File

@ -17,6 +17,7 @@
@use 'sass:map'; @use 'sass:map';
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use '../../../../../assets/utils.scss' as utils;
@mixin nifi-theme($material-theme, $canvas-theme) { @mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme. // Get the color config from the theme.
@ -25,27 +26,26 @@
// Get the color palette from the color-config. // Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary'); $primary-palette: map.get($color-config, 'primary');
$warn-palette: map.get($color-config, 'warn'); $accent-palette: map.get($color-config, 'accent');
$canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette // Get hues from palette
$primary-palette-700: mat.get-color-from-palette($primary-palette, 700); $primary-palette-darker: mat.get-color-from-palette($primary-palette, darker);
$warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200'); $accent-palette-default: mat.get-color-from-palette($accent-palette, 'default');
$canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200'); $on-surface: utils.get-on-surface($canvas-color-config);
.component-access-policies { .component-access-policies {
.operation-context-logo { .operation-context-logo {
.icon { .icon {
color: $warn-palette-A200; color: $accent-palette-default;
} }
} }
.operation-context-name { .operation-context-name {
color: $canvas-primary-palette-A200; color: $on-surface;
} }
.operation-context-type { .operation-context-type {
color: $primary-palette-700; color: $primary-palette-darker;
} }
} }
} }

4
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
View File

@ -26,9 +26,9 @@
$primary-palette: map.get($color-config, 'primary'); $primary-palette: map.get($color-config, 'primary');
// Get hues from palette // 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 { .bulletin-board-header {
color: $primary-palette-500; color: $primary-palette-default;
} }
} }

13
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
View File

@ -26,21 +26,22 @@
// Get the color palette from the color-config. // Get the color palette from the color-config.
$warn-palette: map.get($color-config, 'warn'); $warn-palette: map.get($color-config, 'warn');
$canvas-accent-palette: map.get($canvas-color-config, 'accent'); $canvas-accent-palette: map.get($canvas-color-config, 'accent');
$canvas-warn-palette: map.get($canvas-color-config, 'warn');
// Get hues from palette // Get hues from palette
$canvas-accent-palette-700: mat.get-color-from-palette($canvas-accent-palette, 700); $canvas-accent-palette-darker: mat.get-color-from-palette($canvas-accent-palette, darker);
$canvas-accent-palette-A400: mat.get-color-from-palette($canvas-accent-palette, 'A400'); $canvas-warn-palette-A400: mat.get-color-from-palette($canvas-warn-palette, 'A400');
$warn-palette-600: mat.get-color-from-palette($warn-palette, 600); $warn-palette-default: mat.get-color-from-palette($warn-palette, default);
.bulletin-error { .bulletin-error {
color: $warn-palette-600; color: $warn-palette-default;
} }
.bulletin-warn { .bulletin-warn {
color: $canvas-accent-palette-A400; color: $canvas-warn-palette-A400;
} }
.bulletin-normal { .bulletin-normal {
color: $canvas-accent-palette-700; color: $canvas-accent-palette-darker;
} }
} }

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

@ -30,7 +30,7 @@
<div class="flex justify-between"> <div class="flex justify-between">
<div class="refresh-container flex items-center gap-x-2"> <div class="refresh-container flex items-center gap-x-2">
<div class="mr-6"> <div class="mr-6">
<mat-slide-toggle [checked]="autoRefresh" (change)="autoRefreshToggle($event)" <mat-slide-toggle color="primary" [checked]="autoRefresh" (change)="autoRefreshToggle($event)"
>Auto-refresh</mat-slide-toggle >Auto-refresh</mat-slide-toggle
> >
</div> </div>

4
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
View File

@ -26,9 +26,9 @@
$primary-palette: map.get($color-config, 'primary'); $primary-palette: map.get($color-config, 'primary');
// Get hues from palette // 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 { .counter-header {
color: $primary-palette-500; color: $primary-palette-default;
} }
} }

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

@ -1253,9 +1253,9 @@ export class CanvasUtils {
}) })
.attr('class', function () { .attr('class', function () {
if (terminatedThreads > 0) { if (terminatedThreads > 0) {
return `active-thread-count-icon warn-400`; return `active-thread-count-icon warn-default`;
} else { } else {
return `active-thread-count-icon primary-500`; return `active-thread-count-icon primary-default`;
} }
}) })
.style('display', 'block') .style('display', 'block')

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

@ -1424,16 +1424,16 @@ export class ConnectionManager {
// update the coloring of the backgrounds // update the coloring of the backgrounds
backgrounds.forEach((background, i) => { backgrounds.forEach((background, i) => {
if (i % 2 === 0) { if (i % 2 === 0) {
background.attr('class', 'primary-contrast-800'); background.attr('class', 'surface-darker');
} else { } else {
background.attr('class', 'primary-contrast-900'); background.attr('class', 'surface');
} }
}); });
// update the coloring of the label borders // update the coloring of the label borders
borders.forEach((border, i) => { borders.forEach((border, i) => {
if (i > 0) { if (i > 0) {
border.attr('class', 'primary-200'); border.attr('class', 'canvas-primary-lighter');
} else { } else {
border.attr('class', 'transparent'); border.attr('class', 'transparent');
} }

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

@ -386,14 +386,14 @@ export class PortManager {
updated updated
.select('text.run-status-icon') .select('text.run-status-icon')
.attr('class', function (d: any) { .attr('class', function (d: any) {
let clazz = 'primary-500'; let clazz = 'primary-default';
if (d.status.aggregateSnapshot.runStatus === 'Invalid') { if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
clazz = 'canvas-accent-A200'; clazz = 'canvas-warn-A200';
} else if (d.status.aggregateSnapshot.runStatus === 'Running') { } else if (d.status.aggregateSnapshot.runStatus === 'Running') {
clazz = 'canvas-accent-200'; clazz = 'canvas-accent-lighter';
} else if (d.status.aggregateSnapshot.runStatus === 'Stopped') { } else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
clazz = 'warn-200'; clazz = 'warn-lighter';
} }
return `run-status-icon ${clazz}`; return `run-status-icon ${clazz}`;

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

@ -1087,10 +1087,10 @@ export class ProcessGroupManager {
} else if (vciState === 'LOCALLY_MODIFIED') { } else if (vciState === 'LOCALLY_MODIFIED') {
return `version-control primary-contrast-A700`; return `version-control primary-contrast-A700`;
} else { } else {
return `version-control canvas-accent-600`; return `version-control canvas-accent-darker`;
} }
} else { } else {
return 'version-control primary-contrast-200'; return 'version-control on-surface';
} }
}) })
.text(function () { .text(function () {

10
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
View File

@ -670,16 +670,16 @@ export class ProcessorManager {
updated updated
.select('text.run-status-icon') .select('text.run-status-icon')
.attr('class', function (d: any) { .attr('class', function (d: any) {
let clazz = 'primary-500'; let clazz = 'primary-default';
if (d.status.aggregateSnapshot.runStatus === 'Validating') { if (d.status.aggregateSnapshot.runStatus === 'Validating') {
clazz = 'warn-contrast-300'; clazz = 'canvas-primary-500';
} else if (d.status.aggregateSnapshot.runStatus === 'Invalid') { } else if (d.status.aggregateSnapshot.runStatus === 'Invalid') {
clazz = 'canvas-accent-A400'; clazz = 'canvas-warn-A200';
} else if (d.status.aggregateSnapshot.runStatus === 'Running') { } else if (d.status.aggregateSnapshot.runStatus === 'Running') {
clazz = 'canvas-accent-200'; clazz = 'canvas-accent-lighter';
} else if (d.status.aggregateSnapshot.runStatus === 'Stopped') { } else if (d.status.aggregateSnapshot.runStatus === 'Stopped') {
clazz = 'warn-200'; clazz = 'warn-lighter';
} }
return `run-status-icon ${clazz}`; return `run-status-icon ${clazz}`;

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

@ -17,6 +17,7 @@
@use 'sass:map'; @use 'sass:map';
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use '../../../../../assets/utils.scss' as utils;
@mixin nifi-theme($material-theme, $canvas-theme) { @mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme. // Get the color config from the theme.
@ -29,51 +30,58 @@
$warn-palette: map.get($color-config, 'warn'); $warn-palette: map.get($color-config, 'warn');
$canvas-primary-palette: map.get($canvas-color-config, 'primary'); $canvas-primary-palette: map.get($canvas-color-config, 'primary');
$canvas-accent-palette: map.get($canvas-color-config, 'accent'); $canvas-accent-palette: map.get($canvas-color-config, 'accent');
$canvas-warn-palette: map.get($canvas-color-config, 'warn');
// Get hues from palette // Get hues from palette
$primary-palette-100: mat.get-color-from-palette($primary-palette, 100); $primary-palette-lighter: mat.get-color-from-palette($primary-palette, lighter);
$primary-palette-200: mat.get-color-from-palette($primary-palette, 200); $primary-palette-default: mat.get-color-from-palette($primary-palette, 'default');
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500); $primary-palette-lighter-contrast: mat.get-color-from-palette($primary-palette, lighter-contrast);
$accent-palette-A200: mat.get-color-from-palette($accent-palette, 'A200'); $primary-palette-default-contrast: mat.get-color-from-palette($primary-palette, 'default-contrast');
$accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400'); $accent-palette-default: mat.get-color-from-palette($accent-palette, 'default');
$canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50); $accent-palette-darker: mat.get-color-from-palette($accent-palette, 'darker');
$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 colors
$canvas-primary-palette-400: mat.get-color-from-palette($canvas-primary-palette, 400);
$canvas-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500); $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-A100: mat.get-color-from-palette($canvas-primary-palette, A100);
$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-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200'); $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-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-lighter: mat.get-color-from-palette($canvas-accent-palette, lighter);
$canvas-accent-palette-300: mat.get-color-from-palette($canvas-accent-palette, 300); $canvas-accent-palette-default: mat.get-color-from-palette($canvas-accent-palette, default);
$canvas-accent-palette-600: mat.get-color-from-palette($canvas-accent-palette, 600); $canvas-accent-palette-darker: mat.get-color-from-palette($canvas-accent-palette, darker);
$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-A700: mat.get-color-from-palette($canvas-accent-palette, 'A700'); $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-400: mat.get-color-from-palette($warn-palette, 400);
$warn-palette-800: mat.get-color-from-palette($warn-palette, 800); $warn-palette-700: mat.get-color-from-palette($warn-palette, 700);
$warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200'); $warn-palette-lighter: mat.get-color-from-palette($warn-palette, lighter);
$warn-palette-A400: mat.get-color-from-palette($warn-palette, 'A400'); $warn-palette-default: mat.get-color-from-palette($warn-palette, 'default');
$warn-palette-A700: mat.get-color-from-palette($warn-palette, 'A700'); $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 { .canvas-background {
background-color: $canvas-primary-palette-600; background-color: $surface-darker;
background-image: linear-gradient(to right, $canvas-primary-palette-700 1px, transparent 1px), background-image: linear-gradient(to right, $surface-alt 1px, transparent 1px),
linear-gradient(to bottom, $canvas-primary-palette-700 1px, transparent 1px); linear-gradient(to bottom, $surface-alt 1px, transparent 1px);
} }
/* svg styles */ /* svg styles */
svg.canvas-svg { svg.canvas-svg {
text.unset { text.unset {
fill: $canvas-primary-palette-400; fill: $canvas-primary-palette-500;
} }
/* /*
@ -83,60 +91,60 @@
fill: transparent; fill: transparent;
} }
.warn-200 { .warn-lighter {
fill: $warn-palette-200; fill: $warn-palette-lighter;
} }
.warn-400 { .warn-400 {
fill: $warn-palette-400; fill: $warn-palette-400;
} }
.warn-A700 { .warn-default {
fill: $warn-palette-A700; fill: $warn-palette-default;
} }
.warn-contrast-300 { .canvas-primary-500 {
fill: $canvas-primary-palette-400; fill: $canvas-primary-palette-500;
} }
.canvas-accent-200 { .canvas-accent-lighter {
fill: $canvas-accent-palette-200; fill: $canvas-accent-palette-lighter;
} }
.canvas-accent-600 { .canvas-primary-lighter {
fill: $canvas-accent-palette-600; fill: $canvas-primary-palette-A200;
} }
.canvas-accent-A200 { .canvas-accent-darker {
fill: $canvas-accent-palette-A200; fill: $canvas-accent-palette-darker;
} }
.canvas-accent-A400 { .canvas-warn-A200 {
fill: $canvas-accent-palette-A400; fill: $canvas-warn-palette-A200;
} }
.primary-200 { .primary-lighter {
fill: $primary-palette-200; fill: $primary-palette-lighter;
} }
.primary-500 { .primary-default {
fill: $primary-palette-500; fill: $primary-palette-default;
} }
.primary-contrast-200 { .on-surface {
fill: $canvas-primary-palette-200; fill: $on-surface;
} }
.primary-contrast-300 { .canvas-primary-palette-500 {
fill: $canvas-primary-palette-300; fill: $canvas-primary-palette-500;
} }
.primary-contrast-800 { .surface-darker {
fill: $canvas-primary-palette-800; fill: $surface-darker;
} }
.primary-contrast-900 { .surface {
fill: $canvas-primary-palette-900; fill: $surface;
} }
.primary-contrast-A700 { .primary-contrast-A700 {
@ -144,64 +152,70 @@
} }
g.component rect.body { g.component rect.body {
fill: $canvas-primary-palette-900; fill: $surface;
} }
g.component rect.body.unauthorized { g.component rect.body.unauthorized {
fill: $canvas-primary-palette-700; fill: $surface-darker;
} }
g.component rect.border { g.component rect.border,
stroke: $canvas-primary-palette-50; 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 { g.component rect.border.unauthorized {
stroke: $warn-palette-400 !important; stroke: $warn-palette-darker !important;
} }
g.component rect.border.ghost { g.component rect.border.ghost {
stroke: $canvas-primary-palette-400 !important; stroke: $canvas-primary-palette-500 !important;
} }
g.component rect.processor-icon-container.unauthorized { g.component rect.processor-icon-container.unauthorized {
fill: $canvas-primary-palette-700 !important; fill: $surface-darker;
} }
g.component.selected rect.border { g.component.selected rect.border {
stroke: $accent-palette-A400 !important; stroke: utils.get-color-on-surface($color-config, $surface);
} }
text.stats-label { text.stats-label {
fill: $canvas-primary-palette-A200; fill: $on-surface-medium;
} }
text.stats-value { text.stats-value {
fill: $warn-palette-A400; fill: utils.get-color-on-surface($color-config, $surface, 'accent');
} }
text.stats-info { text.stats-info {
fill: $primary-palette-500; fill: utils.get-color-on-surface($color-config, $surface);
} }
text.bulletin-icon { text.bulletin-icon {
fill: $canvas-primary-palette-900; fill: $surface;
} }
rect.bulletin-background { rect.bulletin-background {
fill: $warn-palette-400; fill: utils.get-color-on-surface($color-config, $surface, 'warn');
} }
text.active-thread-count-icon { text.active-thread-count-icon {
fill: $primary-palette-500; fill: $primary-palette-default;
} }
text.active-thread-count { text.active-thread-count {
fill: $warn-palette-A400; fill: $accent-palette-darker;
} }
path.component-comments { path.component-comments {
fill: $canvas-primary-palette-50; fill: $canvas-primary-palette-A200;
stroke: $canvas-primary-palette-50; stroke: $canvas-primary-palette-A200;
} }
/* /*
@ -209,49 +223,49 @@
*/ */
g.component.connectable-destination rect.border { g.component.connectable-destination rect.border {
stroke: $canvas-accent-palette-900; stroke: $canvas-accent-palette-500;
} }
rect.component-selection, rect.component-selection,
rect.drag-selection, rect.drag-selection,
rect.label-drag { rect.label-drag {
stroke: $canvas-primary-palette-A400; stroke: $on-surface-medium;
fill: transparent; fill: transparent;
} }
text.add-connect { text.add-connect {
fill: $accent-palette-A400; fill: utils.get-color-on-surface($color-config, $surface);
} }
/* /*
Processor Processor
*/ */
#component-drop-shadow feFlood { #component-drop-shadow feFlood {
flood-color: $canvas-primary-palette-200; flood-color: $drop-shadow-color;
} }
#connection-full-drop-shadow feFlood { #connection-full-drop-shadow feFlood {
flood-color: $warn-palette-400; flood-color: $warn-palette-default;
} }
rect.processor-read-write-stats { rect.processor-read-write-stats {
fill: $canvas-primary-palette-900; fill: $surface;
} }
rect.processor-stats-border { rect.processor-stats-border {
fill: $primary-palette-200; fill: $on-surface-lighter;
} }
rect.processor-stats-in-out { rect.processor-stats-in-out {
fill: $canvas-primary-palette-800; fill: $surface-darker;
} }
text.processor-name { text.processor-name {
fill: $canvas-primary-palette-A200; fill: $on-surface-medium;
} }
text.processor-type { text.processor-type {
fill: $primary-palette-500; fill: utils.get-color-on-surface($color-config, $surface, 'accent');
} }
text.processor-bundle { text.processor-bundle {
@ -259,16 +273,16 @@
} }
rect.processor-icon-container { rect.processor-icon-container {
fill: $canvas-primary-palette-900; fill: $surface;
} }
circle.restricted-background, circle.restricted-background,
circle.is-primary-background { circle.is-primary-background {
fill: $canvas-primary-palette-900; fill: $surface;
} }
text.restricted { text.restricted {
fill: $warn-palette-400; fill: $warn-palette-default;
} }
/* /*
@ -276,44 +290,44 @@
*/ */
g.connection rect.body { g.connection rect.body {
fill: $canvas-primary-palette-900; fill: $surface;
} }
g.connection rect.body.unauthorized { g.connection rect.body.unauthorized {
fill: $canvas-primary-palette-700; fill: $surface-darker;
} }
g.connection rect.border.unauthorized { g.connection rect.border.unauthorized {
stroke: $warn-palette-400; stroke: $warn-palette-default;
} }
g.connection rect.border.full { g.connection rect.border.full {
stroke: $warn-palette-A700; stroke: $accent-palette-darker;
} }
g.connection.selected rect.border { g.connection.selected rect.border {
stroke: $canvas-accent-palette-A700; stroke: $canvas-warn-palette-A700;
} }
path.connector { path.connector {
stroke: $warn-palette-800; stroke: $warn-palette-700;
} }
path.connector.connectable { path.connector.connectable {
stroke: $canvas-accent-palette-900; stroke: $canvas-accent-palette-500;
} }
g.connection path.connection-path { g.connection path.connection-path {
fill: none; fill: none;
stroke: $canvas-primary-palette-50; stroke: $on-surface;
} }
g.connection path.connection-path.full { g.connection path.connection-path.full {
stroke: $warn-palette-400; stroke: $warn-palette-default;
} }
g.connection path.connection-path.unauthorized { g.connection path.connection-path.unauthorized {
stroke: $warn-palette-400; stroke: $warn-palette-default;
} }
text.connection-from-run-status, text.connection-from-run-status,
@ -321,17 +335,16 @@
text.expiration-icon, text.expiration-icon,
text.load-balance-icon, text.load-balance-icon,
text.penalized-icon { text.penalized-icon {
fill: $primary-palette-500; fill: $primary-palette-default;
text-shadow: 0 0 4px $canvas-primary-palette-900;
} }
text.load-balance-icon-active { text.load-balance-icon-active {
fill: $accent-palette-A200; fill: $accent-palette-darker;
} }
text.connection-from-run-status.is-missing-port, text.connection-from-run-status.is-missing-port,
text.connection-to-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 { g.connection rect.backpressure-tick {
@ -340,12 +353,12 @@
g.connection rect.backpressure-tick.data-size-prediction.prediction-down, g.connection rect.backpressure-tick.data-size-prediction.prediction-down,
g.connection rect.backpressure-tick.object-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.data-size-prediction,
g.connection rect.backpressure-tick.object-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, g.connection rect.backpressure-tick.data-size-prediction.not-configured,
@ -356,12 +369,12 @@
} }
g.connection rect.backpressure-tick.not-configured { 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-object,
g.connection rect.backpressure-data-size { g.connection rect.backpressure-data-size {
fill: $canvas-primary-palette-500; fill: $on-surface-lighter;
} }
g.connection rect.backpressure-object.not-configured, g.connection rect.backpressure-object.not-configured,
@ -370,26 +383,26 @@
} }
g.connection rect.backpressure-percent { g.connection rect.backpressure-percent {
fill: $canvas-accent-palette-300; fill: $canvas-accent-palette-default;
} }
g.connection rect.backpressure-percent.warning { g.connection rect.backpressure-percent.warning {
fill: $canvas-accent-palette-A400; fill: $canvas-warn-palette-A400;
} }
g.connection rect.backpressure-percent.error { g.connection rect.backpressure-percent.error {
fill: $warn-palette-400; fill: $warn-palette-default;
} }
/* ghost connection */ /* ghost connection */
g.connection.ghost path.connection-path, g.connection.ghost path.connection-path,
g.connection.ghost rect.connection-label { g.connection.ghost rect.connection-label {
stroke: $canvas-primary-palette-400; stroke: $canvas-primary-palette-500;
} }
g.connection path.connection-selection-path { g.connection path.connection-selection-path {
stroke: $canvas-accent-palette-A700; stroke: $canvas-warn-palette-A700;
fill: none; fill: none;
} }
@ -398,141 +411,134 @@
} }
g.connection rect.startpoint { g.connection rect.startpoint {
stroke: $warn-palette-800; stroke: $canvas-warn-palette-800;
fill: $warn-palette-800; fill: $canvas-warn-palette-800;
} }
g.connection rect.midpoint { g.connection rect.midpoint {
stroke: $canvas-accent-palette-A700; stroke: $canvas-warn-palette-A700;
fill: $canvas-accent-palette-A700; fill: $canvas-warn-palette-A700;
} }
g.connection rect.endpoint { g.connection rect.endpoint {
stroke: $canvas-accent-palette-800; stroke: $canvas-accent-palette-A700;
fill: $canvas-accent-palette-800; fill: $canvas-accent-palette-A700;
} }
/* labels */ /* labels */
g.label rect.labelpoint { g.label rect.labelpoint {
stroke: $canvas-accent-palette-A700; stroke: $canvas-warn-palette-A700;
fill: $canvas-accent-palette-A700; fill: $canvas-warn-palette-A700;
} }
/* funnels */ /* funnels */
text.funnel-icon { text.funnel-icon {
fill: $warn-palette-A200; fill: $accent-palette-default;
} }
/* ports */ /* ports */
text.port-name { text.port-name {
fill: $canvas-primary-palette-A200; fill: $on-surface-medium;
} }
text.port-icon { text.port-icon {
fill: $warn-palette-A200; fill: $accent-palette-default;
} }
rect.remote-banner { rect.remote-banner {
fill: $primary-palette-100; fill: $surface-alt;
} }
text.port-transmission-icon { text.port-transmission-icon {
fill: $primary-palette-500; fill: utils.get-color-on-surface($color-config, $surface-alt);
} }
/* process groups */ /* process groups */
rect.process-group-stats-in-out { rect.process-group-stats-in-out {
fill: $canvas-primary-palette-900; fill: $surface;
} }
rect.process-group-stats-border { rect.process-group-stats-border {
fill: $primary-palette-200; fill: $on-surface-lighter;
} }
rect.process-group-queued-stats { rect.process-group-queued-stats {
fill: $canvas-primary-palette-800; fill: $surface-darker;
} }
rect.process-group-read-write-stats { rect.process-group-read-write-stats {
fill: $canvas-primary-palette-800; fill: $surface-darker;
} }
rect.process-group-details-banner { rect.process-group-details-banner,
fill: $primary-palette-100; 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.version-control {
text-shadow: 0 0 4px $canvas-primary-palette-900; text-shadow: 0 0 4px $surface;
} }
rect.process-group-banner { $pg-surface: utils.ensure-contrast(
fill: $primary-palette-200; $primary-palette-default,
$primary-palette-default-contrast,
$primary-palette-lighter
);
rect.process-group-banner,
rect.remote-process-group-banner {
fill: $pg-surface;
}
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 { 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 { g.process-group.drop rect.border {
stroke: $canvas-accent-palette-800; stroke: $canvas-accent-palette-A700;
} }
text.process-group-contents-icon { text.process-group-contents-icon {
fill: $primary-palette-500; fill: $primary-palette-default;
} }
/* remote process group */ /* remote process group */
rect.remote-process-group-stats-border { rect.remote-process-group-stats-border {
fill: $primary-palette-200; fill: $on-surface-lighter;
} }
rect.remote-process-group-sent-stats { rect.remote-process-group-sent-stats {
fill: $canvas-primary-palette-800; fill: $surface-darker;
} }
rect.remote-process-group-received-stats { rect.remote-process-group-received-stats {
fill: $canvas-primary-palette-900; fill: $surface;
}
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;
} }
text.remote-process-group-uri { text.remote-process-group-uri {
fill: $accent-palette-A400; fill: utils.get-color-on-surface($color-config, $surface);
}
rect.remote-process-group-banner {
fill: $primary-palette-200;
} }
text.remote-process-group-transmission-status { text.remote-process-group-transmission-status {
fill: $primary-palette-500; fill: $primary-palette-default-contrast;
} }
text.remote-process-group-transmission-secure { 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 { text.remote-process-group-last-refresh {
fill: $primary-palette-500; fill: utils.get-color-on-surface($color-config, $surface);
} }
} }
} }

4
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
View File

@ -47,10 +47,6 @@
font-family: Roboto; font-family: Roboto;
} }
g.component rect.border {
stroke-width: 1;
}
g.component rect.border.unauthorized { g.component rect.border.unauthorized {
stroke-width: 3; stroke-width: 3;
stroke-dasharray: 4; stroke-dasharray: 4;

4
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
View File

@ -339,13 +339,13 @@ export class Canvas implements OnInit, OnDestroy {
.attr('orient', 'auto') .attr('orient', 'auto')
.attr('class', function (d: string) { .attr('class', function (d: string) {
if (d === 'ghost') { if (d === 'ghost') {
return 'primary-contrast-300'; return 'canvas-primary-palette-500';
} else if (d === 'unauthorized') { } else if (d === 'unauthorized') {
return 'warn-400'; return 'warn-400';
} else if (d === 'full') { } else if (d === 'full') {
return 'warn-400'; return 'warn-400';
} else { } else {
return 'primary-contrast-200'; return 'on-surface';
} }
}) })
.append('path') .append('path')

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

@ -17,26 +17,25 @@
@use 'sass:map'; @use 'sass:map';
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use '../../../../../../assets/utils.scss' as utils;
@mixin nifi-theme($material-theme, $canvas-theme) { @mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the 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); $canvas-color-config: mat.get-color-config($canvas-theme);
// Get the color palette from the color-config. // Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
$canvas-primary-palette: map.get($canvas-color-config, 'primary'); $canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette // Get hues from palette
$primary-palette-300: mat.get-color-from-palette($primary-palette, 300); $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, A200);
$primary-palette-600: mat.get-color-from-palette($primary-palette, 600); $surface: utils.get-surface($canvas-color-config);
$canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50); $on-surface: utils.get-on-surface($canvas-color-config);
$canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900); $on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter);
.breadcrumb-container { .breadcrumb-container {
box-shadow: 0 1px 6px $canvas-primary-palette-50; box-shadow: 0 1px 6px $canvas-primary-palette-A200;
background-color: $canvas-primary-palette-900; background-color: $surface;
border-top: 1px solid $primary-palette-300; border-top: 1px solid $on-surface-lighter;
color: $primary-palette-600; color: $on-surface;
} }
} }

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

@ -17,6 +17,7 @@
@use 'sass:map'; @use 'sass:map';
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use '../../../../../../../assets/utils.scss' as utils;
@mixin nifi-theme($material-theme, $canvas-theme) { @mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme. // Get the color config from the theme.
@ -24,39 +25,34 @@
$canvas-color-config: mat.get-color-config($canvas-theme); $canvas-color-config: mat.get-color-config($canvas-theme);
// Get the color palette from the color-config. // 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-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette // Get hues from palette
$primary-palette-100: mat.get-color-from-palette($primary-palette, 100); $on-surface-medium: utils.get-on-surface($canvas-color-config, medium);
$primary-palette-300: mat.get-color-from-palette($primary-palette, 300); $on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter);
$accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400'); $surface: utils.get-surface($canvas-color-config);
$canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50); $surface-darker: utils.get-surface($canvas-color-config, darker);
$canvas-primary-palette-600: mat.get-color-from-palette($canvas-primary-palette, 600); $surface-highlight: utils.get-on-surface($canvas-color-config, highlight);
$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-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200');
div.navigation-control { div.navigation-control {
box-shadow: 0 1px 6px $canvas-primary-palette-50; box-shadow: 0 1px 6px $canvas-primary-palette-A200;
background-color: $canvas-primary-palette-600; background-color: $surface;
border-top: 1px solid $primary-palette-300; border: 1px solid $on-surface-lighter;
border-right: 1px solid $primary-palette-300;
border-bottom: 1px solid $primary-palette-300;
.fa, .fa,
.icon { .icon {
color: $accent-palette-A400; color: utils.get-color-on-surface($color-config, $surface-darker);
} }
.navigation-control-header { .navigation-control-header {
&:hover { &: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 { .navigation-control-title {
color: $canvas-primary-palette-A200; color: $on-surface-medium;
} }
} }
} }

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

@ -17,6 +17,7 @@
@use 'sass:map'; @use 'sass:map';
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use '../../../../../../../../assets/utils.scss' as utils;
@mixin nifi-theme($material-theme, $canvas-theme) { @mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme. // Get the color config from the theme.
@ -24,20 +25,18 @@
$canvas-color-config: mat.get-color-config($canvas-theme); $canvas-color-config: mat.get-color-config($canvas-theme);
// Get the color palette from the color-config. // Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
$canvas-primary-palette: map.get($canvas-color-config, 'primary'); $canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette // Get hues from palette
$primary-palette-600: mat.get-color-from-palette($primary-palette, 600); $canvas-primary-palette-A100: mat.get-color-from-palette($canvas-primary-palette, A100);
$canvas-primary-palette-700: mat.get-color-from-palette($canvas-primary-palette, 700); $surface: utils.get-surface($canvas-color-config);
$canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900);
#birdseye { #birdseye {
background: $canvas-primary-palette-900; background: $surface;
border: 1px solid $canvas-primary-palette-700; border: 1px solid $canvas-primary-palette-A100;
rect.birdseye-brush { rect.birdseye-brush {
stroke: $primary-palette-600; stroke: utils.get-color-on-surface($color-config, $surface);
fill: transparent; fill: transparent;
} }
} }

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

@ -17,6 +17,7 @@
@use 'sass:map'; @use 'sass:map';
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use '../../../../../../../assets/utils.scss' as utils;
@mixin nifi-theme($material-theme, $canvas-theme) { @mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme. // Get the color config from the theme.
@ -24,57 +25,50 @@
$canvas-color-config: mat.get-color-config($canvas-theme); $canvas-color-config: mat.get-color-config($canvas-theme);
// Get the color palette from the color-config. // Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary');
$accent-palette: map.get($color-config, 'accent'); $accent-palette: map.get($color-config, 'accent');
$warn-palette: map.get($color-config, 'warn');
$canvas-primary-palette: map.get($canvas-color-config, 'primary'); $canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette // Get hues from palette
$primary-palette-100: mat.get-color-from-palette($primary-palette, 100); $accent-palette-default: mat.get-color-from-palette($accent-palette, default);
$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');
$canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200'); $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 { div.operation-control {
box-shadow: 0 1px 6px $canvas-primary-palette-50; box-shadow: 0 1px 6px $canvas-primary-palette-A200;
background-color: $canvas-primary-palette-600; background-color: $surface;
border-top: 1px solid $primary-palette-300; border: 1px solid $on-surface-lighter;
border-right: 1px solid $primary-palette-300;
border-bottom: 1px solid $primary-palette-300;
.fa, .fa,
.icon { .icon {
color: $accent-palette-A400; color: utils.get-color-on-surface($color-config, $surface);
} }
.operation-control-header { .operation-control-header {
&:hover { &: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 { .operation-control-title {
color: $canvas-primary-palette-A200; color: $on-surface-medium;
} }
.operation-context-logo { .operation-context-logo {
.icon { .icon {
color: $warn-palette-A200; color: $accent-palette-default;
} }
} }
.operation-context-name { .operation-context-name {
color: $canvas-primary-palette-A200; color: $on-surface-medium;
} }
.operation-context-type { .operation-context-type {
color: $primary-palette-700; color: utils.get-color-on-surface($color-config, $surface);
} }
} }
} }

7
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
View File

@ -20,11 +20,4 @@
@mixin nifi-theme($canvas-theme) { @mixin nifi-theme($canvas-theme) {
// Get the color config from the 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);
} }

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

@ -17,6 +17,7 @@
@use 'sass:map'; @use 'sass:map';
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use '../../../../../../../assets/utils.scss' as utils;
@mixin nifi-theme($material-theme, $canvas-theme) { @mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme. // Get the color config from the theme.
@ -26,42 +27,47 @@
// Get the color palette from the color-config. // Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary'); $primary-palette: map.get($color-config, 'primary');
$warn-palette: map.get($color-config, 'warn'); $warn-palette: map.get($color-config, 'warn');
$canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette // Get hues from palette
$primary-palette-300: mat.get-color-from-palette($primary-palette, 300); $primary-palette-darker: mat.get-color-from-palette($primary-palette, darker);
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500); $primary-palette-darker-contrast: mat.get-color-from-palette($primary-palette, darker-contrast);
$warn-palette-400: mat.get-color-from-palette($warn-palette, 400); $warn-palette-default: mat.get-color-from-palette($warn-palette, default);
$warn-palette-A400: mat.get-color-from-palette($warn-palette, 'A400'); $warn-palette-default-contrast: mat.get-color-from-palette($warn-palette, default-constrast);
$canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900);
$surface: utils.get-surface($canvas-color-config);
$on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter);
.flow-status { .flow-status {
border-bottom: 1px solid $primary-palette-300; border-bottom: 1px solid $on-surface-lighter;
background: $surface;
.fa, .fa,
.icon { .icon {
color: $primary-palette-500; color: utils.get-color-on-surface($color-config, $surface);
} }
.warning { .warning {
color: $warn-palette-400; color: $warn-palette-default;
} }
.status-value { .status-value {
color: $warn-palette-A400; color: utils.get-color-on-surface($color-config, $surface, 'accent');
} }
.controller-bulletins { .controller-bulletins {
border-left: 1px solid $primary-palette-300; border-left: 1px solid $on-surface-lighter;
background-color: $primary-palette-500; background-color: $primary-palette-darker;
} }
.controller-bulletins.has-bulletins { .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 { .controller-bulletins .fa {
color: $canvas-primary-palette-900; color: $primary-palette-darker-contrast;
} }
} }
} }

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

@ -17,6 +17,7 @@
@use 'sass:map'; @use 'sass:map';
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use '../../../../../../../assets/utils.scss' as utils;
@mixin nifi-theme($material-theme, $canvas-theme) { @mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme. // Get the color config from the theme.
@ -25,33 +26,47 @@
// Get the color palette from the color-config. // Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary'); $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 // Get hues from palette
$primary-palette-100: mat.get-color-from-palette($primary-palette, 100); $primary-palette-default: mat.get-color-from-palette($primary-palette, default);
$primary-palette-300: mat.get-color-from-palette($primary-palette, 300); $primary-palette-default-contrast: mat.get-color-from-palette($primary-palette, default-contrast);
$accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400'); $primary-palette-lighter: mat.get-color-from-palette($primary-palette, lighter);
$canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50); $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 { .new-canvas-item {
.icon { .icon {
color: $accent-palette-A400;
&.hovering { &.hovering {
background-color: $primary-palette-100; // This solution re-uses the highlight value used throughout the UI, but because we need to hide the non-hover
box-shadow: 0 3px 6px $canvas-primary-palette-50; // 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 { .component-button-grip {
background: repeating-linear-gradient( background: repeating-linear-gradient(
90deg, 90deg,
$primary-palette-300, $on-surface-lighter,
$primary-palette-300 4px, $on-surface-lighter 4px,
$primary-palette-300 4px, transparent 4px,
$primary-palette-300 6px 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
}
} }
} }
} }

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

@ -17,43 +17,38 @@
@use 'sass:map'; @use 'sass:map';
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use '../../../../../../../assets/utils.scss' as utils;
@mixin nifi-theme($material-theme, $canvas-theme) { @mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the 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); $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 // Get hues from palette
$primary-palette-300: mat.get-color-from-palette($primary-palette, 300); $surface: utils.get-surface($canvas-color-config);
$canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900); $on-surface: utils.get-on-surface($canvas-color-config);
$canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200'); $on-surface-medium: utils.get-on-surface($canvas-color-config, medium);
$canvas-primary-palette-A700: mat.get-color-from-palette($canvas-primary-palette, 'A700'); $on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter);
$canvas-primary-palette-contrast-300: mat.get-color-from-palette($canvas-primary-palette, '300-contrast');
.search-container { .search-container {
border-left: 1px solid $primary-palette-300; border-left: 1px solid $on-surface-lighter;
&:hover, &:hover,
&.open { &.open {
background-color: $canvas-primary-palette-900; background-color: $surface;
border-left: 1px solid $canvas-primary-palette-A700; border-left: 1px solid $on-surface-lighter;
} }
.search-input { .search-input {
color: $canvas-primary-palette-A200; color: $on-surface;
background-color: $canvas-primary-palette-900; background-color: $surface;
} }
.fa { .fa {
color: $canvas-primary-palette-A700; color: $on-surface-medium;
} }
} }
.search-results { .search-results {
background-color: $canvas-primary-palette-900; background-color: $surface;
} }
} }

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

@ -17,6 +17,7 @@
@use 'sass:map'; @use 'sass:map';
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use '../../../../../../../../assets/utils.scss' as utils;
@mixin nifi-theme($material-theme, $canvas-theme) { @mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme. // Get the color config from the theme.
@ -28,32 +29,32 @@
$canvas-primary-palette: map.get($canvas-color-config, 'primary'); $canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette // 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);
$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);
$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);
$canvas-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500); $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 {
.prioritizers-list { .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 { .cdk-drag-disabled {
background: $canvas-primary-palette-500; background: $on-surface-lighter;
} }
} }
.prioritizer-draggable-item { .prioritizer-draggable-item {
border-bottom: solid 1px $canvas-primary-palette-400; border-bottom: solid 1px $canvas-primary-palette-500;
color: $canvas-primary-palette-100; color: $on-surface;
background: $canvas-primary-palette-900; background: $surface;
} }
.cdk-drag-preview { .cdk-drag-preview {
box-shadow: 0 3px 6px $canvas-primary-palette-50; box-shadow: 0 3px 6px $canvas-primary-palette-A200;
} }
} }
} }

6
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
View File

@ -26,13 +26,11 @@
$accent-palette: map.get($color-config, 'accent'); $accent-palette: map.get($color-config, 'accent');
// Get hues from palette // 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');
// Get hues from palette
.create-process-group-form { .create-process-group-form {
.upload-flow-definition { .upload-flow-definition {
color: $accent-palette-A400; color: $accent-palette-default;
} }
} }
} }

4
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
View File

@ -91,8 +91,8 @@
(change)="handleChanged()" (change)="handleChanged()"
[disabled]="isDisabled" [disabled]="isDisabled"
class="flex gap-x-2"> class="flex gap-x-2">
<mat-radio-button value="PENALIZE_FLOWFILE">Penalize</mat-radio-button> <mat-radio-button color="primary" value="PENALIZE_FLOWFILE">Penalize</mat-radio-button>
<mat-radio-button value="YIELD_PROCESSOR">Yield</mat-radio-button> <mat-radio-button color="primary" value="YIELD_PROCESSOR">Yield</mat-radio-button>
</mat-radio-group> </mat-radio-group>
</div> </div>
<div> <div>

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/create-remote-process-group/_create-remote-process-group.component-theme.scss
View File

@ -26,5 +26,5 @@
$accent-palette: map.get($color-config, 'accent'); $accent-palette: map.get($color-config, 'accent');
// Get hues from palette // 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');
} }

8
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
View File

@ -17,20 +17,18 @@
@use 'sass:map'; @use 'sass:map';
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use '../../../../../../assets/utils.scss' as utils;
@mixin nifi-theme($theme) { @mixin nifi-theme($theme) {
// Get the color config from the theme. // Get the color config from the theme.
$color-config: mat.get-color-config($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 // 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 { div {
&.error { &.error {
background-color: $warn-palette-100; background-color: $warn-surface;
} }
} }
} }

4
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
View File

@ -26,9 +26,9 @@
$primary-palette: map.get($color-config, 'primary'); $primary-palette: map.get($color-config, 'primary');
// Get hues from palette // 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 { .controller-services-header {
color: $primary-palette-500; color: $primary-palette-default;
} }
} }

10
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
View File

@ -25,20 +25,20 @@
// Get the color palette from the color-config. // Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary'); $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 // 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);
$canvas-accent-palette-A200: mat.get-color-from-palette($canvas-accent-palette, 'A200'); $canvas-warn-palette-A200: mat.get-color-from-palette($canvas-warn-palette, 'A200');
.manage-remote-ports-header { .manage-remote-ports-header {
color: $primary-palette-500; color: $primary-palette-default;
} }
.manage-remote-ports-table { .manage-remote-ports-table {
.listing-table { .listing-table {
.fa.fa-warning { .fa.fa-warning {
color: $canvas-accent-palette-A200; color: $canvas-warn-palette-A200;
} }
} }
} }

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

@ -17,19 +17,15 @@
@use 'sass:map'; @use 'sass:map';
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use '../../../../assets/utils.scss' as utils;
@mixin nifi-theme($material-theme, $canvas-theme) { @mixin nifi-theme($material-theme, $canvas-theme) {
$color-config: mat.get-color-config($material-theme);
$canvas-color-config: mat.get-color-config($canvas-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 // 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 { .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;
} }
} }

4
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
View File

@ -26,11 +26,11 @@
$primary-palette: map.get($color-config, 'primary'); $primary-palette: map.get($color-config, 'primary');
// Get hues from palette // 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-form {
.login-title { .login-title {
color: $primary-palette-500; color: $primary-palette-default;
} }
} }
} }

4
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
View File

@ -26,9 +26,9 @@
$primary-palette: map.get($color-config, 'primary'); $primary-palette: map.get($color-config, 'primary');
// Get hues from palette // 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 { .parameter-context-header {
color: $primary-palette-500; color: $primary-palette-default;
} }
} }

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

@ -17,6 +17,7 @@
@use 'sass:map'; @use 'sass:map';
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use '../../../../../../assets/utils.scss' as utils;
@mixin nifi-theme($material-theme, $canvas-theme) { @mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme. // Get the color config from the theme.
@ -28,31 +29,33 @@
$canvas-primary-palette: map.get($canvas-color-config, 'primary'); $canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette // 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);
$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);
$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);
$canvas-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500); $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 {
.parameter-context-inheritance-list { .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 { .cdk-drag-disabled {
background: $canvas-primary-palette-500; background: $on-surface-lighter;
} }
} }
.parameter-context-draggable-item { .parameter-context-draggable-item {
border-bottom: solid 1px $canvas-primary-palette-400; border-bottom: solid 1px $canvas-primary-palette-500;
color: $canvas-primary-palette-100; color: $on-surface;
background: white; background: $surface;
} }
.cdk-drag-preview { .cdk-drag-preview {
box-shadow: 0 3px 6px $canvas-primary-palette-50; box-shadow: 0 3px 6px $canvas-primary-palette-A200;
} }
} }
} }

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

@ -17,6 +17,7 @@
@use 'sass:map'; @use 'sass:map';
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use '../../../../assets/utils.scss' as utils;
@mixin nifi-theme($material-theme, $canvas-theme) { @mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme. // Get the color config from the theme.
@ -25,40 +26,43 @@
// Get the color palette from the color-config. // Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary'); $primary-palette: map.get($color-config, 'primary');
$warn-palette: map.get($color-config, 'warn'); $accent-palette: map.get($color-config, 'accent');
$canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette // Get hues from palette
$primary-palette-300: mat.get-color-from-palette($primary-palette, 300); $primary-palette-lighter: mat.get-color-from-palette($primary-palette, lighter);
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500); $primary-palette-default: mat.get-color-from-palette($primary-palette, default);
$canvas-primary-palette-200: mat.get-color-from-palette($canvas-primary-palette, 200); $accent-palette-default: mat.get-color-from-palette($accent-palette, default);
$canvas-primary-palette-600: mat.get-color-from-palette($canvas-primary-palette, 600); $surface: utils.get-surface($canvas-color-config);
$canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900); $surface-darker: utils.get-surface($canvas-color-config, darker);
$warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200'); $on-surface: utils.get-on-surface($canvas-color-config);
.provenance-header { .provenance-header {
color: $primary-palette-500; color: $primary-palette-default;
} }
rect.lineage { rect.lineage {
fill: $canvas-primary-palette-600; fill: $surface-darker;
} }
g.flowfile-icon text { g.flowfile-icon text {
fill: $warn-palette-A200; fill: $accent-palette-default; // Accent palette
} }
circle.event-circle { circle.event-circle {
fill: $primary-palette-300; fill: $primary-palette-lighter;
stroke: $canvas-primary-palette-200; stroke: $on-surface;
} }
path.link { path.link {
stroke: $canvas-primary-palette-200; stroke: $on-surface;
}
marker {
fill: $on-surface;
} }
circle.flowfile-link { circle.flowfile-link {
fill: $canvas-primary-palette-900; fill: $surface;
stroke: $canvas-primary-palette-200; stroke: $on-surface;
} }
} }

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

@ -17,6 +17,7 @@
@use 'sass:map'; @use 'sass:map';
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use '../../../../../../assets/utils.scss' as utils;
@mixin nifi-theme($material-theme, $canvas-theme) { @mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme. // Get the color config from the theme.
@ -24,23 +25,21 @@
$canvas-color-config: mat.get-color-config($canvas-theme); $canvas-color-config: mat.get-color-config($canvas-theme);
// Get the color palette from the color-config. // Get the color palette from the color-config.
$accent-palette: map.get($color-config, 'accent');
$canvas-primary-palette: map.get($canvas-color-config, 'primary'); $canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette // Get hues from palette
$accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400'); $surface-darker: utils.get-surface($canvas-color-config, darker);
$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);
$canvas-primary-palette-700: mat.get-color-from-palette($canvas-primary-palette, 700);
.provenance-event-table { .provenance-event-table {
.lineage { .lineage {
border: 1px solid $canvas-primary-palette-700; border: 1px solid $canvas-primary-palette-A100;
background-color: $canvas-primary-palette-600; background-color: $surface-darker;
.lineage-controls { .lineage-controls {
.fa, .fa,
.icon { .icon {
color: $accent-palette-A400; color: utils.get-color-on-surface($color-config, $surface-darker);
} }
} }
} }

26
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
View File

@ -17,6 +17,7 @@
@use 'sass:map'; @use 'sass:map';
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use '../../../../../../../assets/utils.scss' as utils;
@mixin nifi-theme($material-theme, $canvas-theme) { @mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme. // Get the color config from the theme.
@ -26,42 +27,41 @@
// Get the color palette from the color-config. // Get the color palette from the color-config.
$accent-palette: map.get($color-config, 'accent'); $accent-palette: map.get($color-config, 'accent');
$warn-palette: map.get($color-config, 'warn'); $warn-palette: map.get($color-config, 'warn');
$canvas-primary-palette: map.get($canvas-color-config, 'primary'); $canvas-warn-palette: map.get($canvas-color-config, 'warn');
$canvas-accent-palette: map.get($canvas-color-config, 'accent');
// Get hues from palette // 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');
$warn-palette-400: mat.get-color-from-palette($warn-palette, 400); $warn-palette-default: mat.get-color-from-palette($warn-palette, default);
$warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200'); $canvas-warn-palette-A200: mat.get-color-from-palette($canvas-warn-palette, 'A200');
$canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200'); $on-surface: utils.get-on-surface($canvas-color-config);
$canvas-accent-palette-A200: mat.get-color-from-palette($canvas-accent-palette, 'A200');
#lineage { #lineage {
canvas, canvas,
svg { svg {
text.event-type { text.event-type {
fill: $canvas-primary-palette-A200; fill: $on-surface;
} }
path.link.selected { path.link.selected {
stroke: $warn-palette-400; stroke: $warn-palette-default;
fill: $warn-palette-default;
} }
g.event circle.selected { g.event circle.selected {
fill: $warn-palette-400; fill: $warn-palette-default;
} }
g.event circle.context { g.event circle.context {
fill: $canvas-accent-palette-A200; fill: $canvas-warn-palette-A200;
} }
g.flowfile circle.context, g.flowfile circle.context,
g.event circle.context { g.event circle.context {
stroke: $accent-palette-A400; stroke: $accent-palette-default;
} }
.flowfile-icon { .flowfile-icon {
color: $warn-palette-A200; color: $accent-palette-default;
} }
} }
} }

2
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
View File

@ -315,7 +315,7 @@ export class LineageComponent implements OnInit {
if (d.indexOf('SELECTED') >= 0) { if (d.indexOf('SELECTED') >= 0) {
return 'warn-400'; return 'warn-400';
} else { } else {
return 'primary-contrast-200'; return 'on-surface';
} }
}) })
.append('path') .append('path')

4
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
View File

@ -26,13 +26,13 @@
$primary-palette: map.get($color-config, 'primary'); $primary-palette: map.get($color-config, 'primary');
// Get hues from palette // 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 { .flowfile {
.mdc-dialog__content { .mdc-dialog__content {
.tab-content { .tab-content {
.flowfile-header { .flowfile-header {
color: $primary-palette-500; color: $primary-palette-default;
} }
} }
} }

8
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
View File

@ -27,16 +27,16 @@
$warn-palette: map.get($color-config, 'warn'); $warn-palette: map.get($color-config, 'warn');
// Get hues from palette // 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);
$warn-palette-400: mat.get-color-from-palette($warn-palette, 400); $warn-palette-default: mat.get-color-from-palette($warn-palette, default);
.flowfile-table { .flowfile-table {
.queue-listing-header { .queue-listing-header {
color: $primary-palette-500; color: $primary-palette-default;
} }
.listing-message { .listing-message {
color: $warn-palette-400; color: $warn-palette-default;
} }
} }
} }

11
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
View File

@ -17,18 +17,17 @@
@use 'sass:map'; @use 'sass:map';
@use '@angular/material' as mat; @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) { @mixin nifi-theme($theme) {
// Get the color config from the theme. // Get the color config from the theme.
$color-config: mat.get-color-config($theme); $color-config: mat.get-color-config($theme);
// Get the color palette from the color-config. // Get the surface color from material so we can ensure best contrast
$primary-palette: map.get($color-config, 'primary'); $surface: inspection.get-theme-color($theme, background, background);
// Get hues from palette
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
.settings-header { .settings-header {
color: $primary-palette-500; color: utils.get-color-on-surface($color-config, $surface);
} }
} }

11
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
View File

@ -17,18 +17,17 @@
@use 'sass:map'; @use 'sass:map';
@use '@angular/material' as mat; @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) { @mixin nifi-theme($theme) {
// Get the color config from the theme. // Get the color config from the theme.
$color-config: mat.get-color-config($theme); $color-config: mat.get-color-config($theme);
// Get the color palette from the color-config. // Get the surface color from material so we can ensure best contrast
$primary-palette: map.get($color-config, 'primary'); $surface: inspection.get-theme-color($theme, background, background);
// Get hues from palette
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
.summary-header { .summary-header {
color: $primary-palette-500; color: utils.get-color-on-surface($color-config, $surface);
} }
} }

4
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
View File

@ -26,9 +26,9 @@
$primary-palette: map.get($color-config, 'primary'); $primary-palette: map.get($color-config, 'primary');
// Get hues from palette // 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 { .user-header {
color: $primary-palette-500; color: $primary-palette-default;
} }
} }

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

@ -26,24 +26,22 @@
// Get the color palette from the color-config. // Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary'); $primary-palette: map.get($color-config, 'primary');
$accent-palette: map.get($color-config, 'accent'); $accent-palette: map.get($color-config, 'accent');
$warn-palette: map.get($color-config, 'warn');
$canvas-primary-palette: map.get($canvas-color-config, 'primary'); $canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette // Get hues from palette
$primary-palette-700: mat.get-color-from-palette($primary-palette, 700); $primary-palette-darker: mat.get-color-from-palette($primary-palette, darker);
$accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400'); $accent-palette-default: mat.get-color-from-palette($accent-palette, 'default');
$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-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200');
.component-context { .component-context {
.fa, .fa,
.icon { .icon {
color: $accent-palette-A400; color: $accent-palette-default;
} }
.component-context-logo { .component-context-logo {
.icon { .icon {
color: $warn-palette-A200; color: $accent-palette-default;
} }
} }
@ -52,11 +50,11 @@
} }
.component-context-type { .component-context-type {
color: $primary-palette-700; color: $primary-palette-darker;
} }
.component-context-id { .component-context-id {
color: $warn-palette-A200; color: $accent-palette-default;
} }
} }
} }

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

@ -17,6 +17,7 @@
@use 'sass:map'; @use 'sass:map';
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use '../../../../assets/utils.scss' as utils;
@mixin nifi-theme($material-theme, $canvas-theme) { @mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme. // Get the color config from the theme.
@ -25,42 +26,41 @@
// Get the color palette from the color-config. // Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary'); $primary-palette: map.get($color-config, 'primary');
$accent-palette: map.get($color-config, 'accent');
$canvas-primary-palette: map.get($canvas-color-config, 'primary'); $canvas-primary-palette: map.get($canvas-color-config, 'primary');
$canvas-accent-palette: map.get($canvas-color-config, 'accent'); $canvas-accent-palette: map.get($canvas-color-config, 'accent');
// Get hues from palette // Get hues from palette
$primary-palette-50: mat.get-color-from-palette($primary-palette, 50); $primary-palette-default: mat.get-color-from-palette($primary-palette, 'default');
$primary-palette-200: mat.get-color-from-palette($primary-palette, 200); $surface-darker: utils.get-surface($canvas-color-config, darker);
$accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400'); $canvas-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500);
$canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50); $on-surface-medium: utils.get-on-surface($canvas-color-config, medium);
$canvas-primary-palette-300: mat.get-color-from-palette($canvas-primary-palette, 300); $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-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 { div.context-menu {
background-color: $primary-palette-50; background-color: $surface-darker;
border: 1px solid $accent-palette-A400; border: 1px solid $primary-palette-default;
box-shadow: 0 3px 6px $canvas-primary-palette-50; box-shadow: 0 3px 6px $canvas-primary-palette-A200;
color: $accent-palette-A400; color: utils.get-color-on-surface($color-config, $surface-darker);
.context-menu-item { .context-menu-item {
.context-menu-item-text { .context-menu-item-text {
color: $canvas-primary-palette-A200; color: $on-surface-medium;
} }
} }
.context-menu-item:hover { .context-menu-item:hover {
background-color: $primary-palette-200; background-color: $on-surface-highlight;
} }
.context-menu-item:active { .context-menu-item:active {
background-color: $canvas-primary-palette-300; background-color: $canvas-primary-palette-500;
} }
&.show-focused { &.show-focused {
.context-menu-item:focus { .context-menu-item:focus {
outline: $canvas-accent-palette-800 solid 1px; outline: $canvas-accent-palette-A700 solid 1px;
} }
} }
} }

4
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
View File

@ -41,8 +41,8 @@
<div class="flex flex-col mb-4"> <div class="flex flex-col mb-4">
<label>Sensitive Value</label> <label>Sensitive Value</label>
<mat-radio-group formControlName="sensitive"> <mat-radio-group formControlName="sensitive">
<mat-radio-button [value]="true">Yes</mat-radio-button> <mat-radio-button color="primary" [value]="true">Yes</mat-radio-button>
<mat-radio-button [value]="false">No</mat-radio-button> <mat-radio-button color="primary" [value]="false">No</mat-radio-button>
</mat-radio-group> </mat-radio-group>
</div> </div>
<div> <div>

4
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
View File

@ -21,8 +21,8 @@
<mat-dialog-content> <mat-dialog-content>
<div class="mb-6"> <div class="mb-6">
<mat-radio-group formControlName="tenantType" (change)="tenantTypeChanged()"> <mat-radio-group formControlName="tenantType" (change)="tenantTypeChanged()">
<mat-radio-button [value]="USER">Individual</mat-radio-button> <mat-radio-button color="primary" [value]="USER">Individual</mat-radio-button>
<mat-radio-button [value]="USER_GROUP">Group</mat-radio-button> <mat-radio-button color="primary" [value]="USER_GROUP">Group</mat-radio-button>
</mat-radio-group> </mat-radio-group>
</div> </div>
<div class="mb-2"> <div class="mb-2">

54
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
View File

@ -17,6 +17,7 @@
@use 'sass:map'; @use 'sass:map';
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use '../../../../assets/utils.scss' as utils;
@mixin nifi-theme($material-theme, $canvas-theme) { @mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme. // Get the color config from the theme.
@ -25,19 +26,28 @@
// Get the color palette from the color-config. // Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary'); $primary-palette: map.get($color-config, 'primary');
$accent-palette: map.get($color-config, 'accent');
$warn-palette: map.get($color-config, 'warn'); $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 // Get hues from palette
$primary-palette-100: mat.get-color-from-palette($primary-palette, 100); $primary-palette-default: mat.get-color-from-palette($primary-palette, 'default');
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500); $primary-palette-default-contrast: mat.get-color-from-palette($primary-palette, 'default-contrast');
$canvas-primary-palette-800: mat.get-color-from-palette($canvas-primary-palette, 800); $primary-palette-darker: mat.get-color-from-palette($primary-palette, 'darker');
$canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900); $primary-palette-darker-contrast: mat.get-color-from-palette($primary-palette, 'darker-contrast');
$canvas-primary-palette-A700: mat.get-color-from-palette($canvas-primary-palette, 'A700'); $accent-palette-default: mat.get-color-from-palette($accent-palette, 'default');
$canvas-accent-palette-A100: mat.get-color-from-palette($canvas-accent-palette, 'A100'); $warn-palette-default: mat.get-color-from-palette($warn-palette, default);
$warn-palette-400: mat.get-color-from-palette($warn-palette, 400);
$warn-palette-A400: mat.get-color-from-palette($warn-palette, 'A400'); $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 { .extension-creation-dialog {
@include mat.button-density(-1); @include mat.button-density(-1);
@ -45,38 +55,38 @@
.type-table { .type-table {
table { table {
th { th {
background-color: $primary-palette-500; background-color: $header-surface;
color: $canvas-primary-palette-900; color: $header-on-surface;
.mat-sort-header-arrow {
color: $header-on-surface;
}
} }
tr:hover { tr:hover {
background-color: $primary-palette-100 !important; background-color: $surface-highlight !important;
} }
.selected { .selected {
background-color: $canvas-accent-palette-A100 !important; background-color: $accent-surface !important;
} }
.even { .even {
background-color: $canvas-primary-palette-800; background-color: $surface-darker;
} }
.fa.fa-shield { .fa.fa-shield {
color: $warn-palette-400; color: $warn-palette-default;
} }
} }
} }
.selected-type-name { .selected-type-name {
color: $warn-palette-A400; color: $accent-palette-default;
} }
.selected-type-bundle { .selected-type-bundle {
color: $canvas-primary-palette-A700; color: $on-surface-medium;
} }
} }
.mat-sort-header-arrow {
color: $canvas-primary-palette-900;
}
} }

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

@ -17,45 +17,56 @@
@use 'sass:map'; @use 'sass:map';
@use '@angular/material' as mat; @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) { @mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme. // Get the color config from the theme.
$color-config: mat.get-color-config($material-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. // Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary'); $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 // Get hues from palette
$primary-palette-100: mat.get-color-from-palette($primary-palette, 100); $navbar-surface: mat.get-color-from-palette($primary-palette, "navbar");
$primary-palette-300: mat.get-color-from-palette($primary-palette, 300); $navbar-on-surface: mat.get-color-from-palette($primary-palette, "navbar-contrast");
$accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400'); @if ($navbar-surface) {
$canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50); // Nothing to do here, we have special colors from the palette.
$canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200'); } @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 { .nifi-navigation {
background-color: $primary-palette-300; background-color: $navbar-surface;
.icon { .icon,
color: $accent-palette-A400; .icon.global-menu {
color: $navbar-on-surface;
} }
.current-user { .current-user {
color: $canvas-primary-palette-A200; color: $navbar-on-surface;
} }
.global-menu:hover { a {
background-color: $primary-palette-100; color: $navbar-on-surface;
box-shadow: 0 3px 6px $canvas-primary-palette-50; text-decoration-color: $navbar-on-surface;
}
a:hover {
opacity: 0.6;
} }
} }
button.global-menu-item { button.global-menu-item {
.fa, .fa,
.icon { .icon {
color: $accent-palette-A400; color: utils.get-color-on-surface($color-config, $surface);
} }
} }
} }

4
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
View File

@ -30,8 +30,8 @@
<div class="flex flex-col"> <div class="flex flex-col">
<label>Sensitive Value</label> <label>Sensitive Value</label>
<mat-radio-group formControlName="sensitive"> <mat-radio-group formControlName="sensitive">
<mat-radio-button [value]="true">Yes</mat-radio-button> <mat-radio-button color="primary" [value]="true">Yes</mat-radio-button>
<mat-radio-button [value]="false">No</mat-radio-button> <mat-radio-button color="primary" [value]="false">No</mat-radio-button>
</mat-radio-group> </mat-radio-group>
</div> </div>
</mat-dialog-content> </mat-dialog-content>

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

@ -17,6 +17,7 @@
@use 'sass:map'; @use 'sass:map';
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use '../../../../../../assets/utils.scss' as utils;
@mixin nifi-theme($material-theme, $canvas-theme) { @mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme. // Get the color config from the theme.
@ -28,31 +29,30 @@
$canvas-primary-palette: map.get($canvas-color-config, 'primary'); $canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette // Get hues from palette
$primary-palette-100: mat.get-color-from-palette($primary-palette, 100); $primary-palette-lighter: mat.get-color-from-palette($primary-palette, lighter);
$primary-palette-300: mat.get-color-from-palette($primary-palette, 300); $primary-palette-default: mat.get-color-from-palette($primary-palette, default);
$canvas-primary-palette-100: mat.get-color-from-palette($canvas-primary-palette, 100); $canvas-primary-palette-500-contrast: mat.get-color-from-palette($canvas-primary-palette, 400-contrast);
$canvas-primary-palette-200: mat.get-color-from-palette($canvas-primary-palette, 200); $canvas-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500);
$canvas-primary-palette-300: mat.get-color-from-palette($canvas-primary-palette, 300); $surface: utils.get-surface($canvas-color-config);
$canvas-primary-palette-contrast-200: mat.get-color-from-palette($canvas-primary-palette, '200-contrast'); $on-surface: utils.get-on-surface($canvas-color-config);
$canvas-primary-palette-contrast-900: mat.get-color-from-palette($canvas-primary-palette, '900-contrast');
.property-editor { .property-editor {
@include mat.button-density(-1); @include mat.button-density(-1);
.nf-editor { .nf-editor {
.CodeMirror { .CodeMirror {
border: 1px solid $canvas-primary-palette-300; border: 1px solid $canvas-primary-palette-500;
background-color: $canvas-primary-palette-contrast-900; background-color: $surface;
&.blank { &.blank {
background: $primary-palette-300; background: $primary-palette-default;
color: $primary-palette-100; color: $primary-palette-lighter;
border: 1px solid $primary-palette-300; border: 1px solid $primary-palette-default;
} }
} }
.CodeMirror-code { .CodeMirror-code {
color: $canvas-primary-palette-contrast-200; color: $on-surface;
} }
/* /*
@ -60,8 +60,8 @@
*/ */
.cm-s-default .CodeMirror-matchingbracket { .cm-s-default .CodeMirror-matchingbracket {
color: $canvas-primary-palette-200 !important; color: $canvas-primary-palette-500-contrast !important;
background-color: $canvas-primary-palette-300; background-color: $canvas-primary-palette-500;
} }
} }
} }

4
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
View File

@ -26,7 +26,7 @@
$primary-palette: map.get($color-config, 'primary'); $primary-palette: map.get($color-config, 'primary');
// Get hues from palette // 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 { .provenance-event {
@include mat.button-density(-1); @include mat.button-density(-1);
@ -34,7 +34,7 @@
.mdc-dialog__content { .mdc-dialog__content {
.tab-content { .tab-content {
.event-header { .event-header {
color: $primary-palette-500; color: $primary-palette-default;
} }
} }
} }

6
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
View File

@ -18,6 +18,7 @@
@use 'sass:math' as math; @use 'sass:math' as math;
@use 'sass:map'; @use 'sass:map';
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use '../../../../assets/utils.scss' as utils;
@mixin nifi-theme($material-theme, $canvas-theme) { @mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme. // Get the color config from the theme.
@ -26,13 +27,12 @@
// Get the color palette from the color-config. // Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary'); $primary-palette: map.get($color-config, 'primary');
$canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette // 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-size: 15px;
$handle-color: $canvas-primary-palette-500; $handle-color: $on-surface-lighter;
.resizable-triangle { .resizable-triangle {
border-right: math.div($handle-size, 2) solid $handle-color; border-right: math.div($handle-size, 2) solid $handle-color;

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

@ -17,6 +17,7 @@
@use 'sass:map'; @use 'sass:map';
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use '../../../../assets/utils.scss' as utils;
@mixin nifi-theme($material-theme, $canvas-theme) { @mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme. // Get the color config from the theme.
@ -28,14 +29,14 @@
$canvas-primary-palette: map.get($canvas-color-config, 'primary'); $canvas-primary-palette: map.get($canvas-color-config, 'primary');
// Get hues from palette // Get hues from palette
$primary-palette-700: mat.get-color-from-palette($primary-palette, 700); $primary-palette-darker: mat.get-color-from-palette($primary-palette, darker);
$canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900); $surface: utils.get-surface($canvas-color-config);
$canvas-primary-palette-A100: mat.get-color-from-palette($canvas-primary-palette, 'A100'); $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'); $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-container,
:host ::ng-deep #status-history-chart-control-container { :host ::ng-deep #status-history-chart-control-container {
background-color: $canvas-primary-palette-900; background-color: $surface;
.axis path, .axis path,
.axis line { .axis line {
@ -49,6 +50,6 @@
:host ::ng-deep #status-history-chart-container text, :host ::ng-deep #status-history-chart-container text,
#status-history-chart-control-container text { #status-history-chart-control-container text {
fill: $primary-palette-700; fill: $primary-palette-darker;
} }
} }

4
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
View File

@ -26,12 +26,12 @@
$primary-palette: map.get($color-config, 'primary'); $primary-palette: map.get($color-config, 'primary');
// Get hues from palette // 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 { .system-diagnostics {
.tab-content { .tab-content {
.section-header { .section-header {
color: $primary-palette-500; color: $primary-palette-default;
} }
} }
} }

4
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
View File

@ -26,9 +26,9 @@
$accent-palette: map.get($color-config, 'accent'); $accent-palette: map.get($color-config, 'accent');
// Get hues from palette // 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 { .hint-pattern {
background-color: $accent-palette-A700; background-color: $accent-palette-darker;
} }
} }

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

@ -17,6 +17,7 @@
@use 'sass:map'; @use 'sass:map';
@use '@angular/material' as mat; @use '@angular/material' as mat;
@use '../../assets/utils.scss' as utils;
@mixin nifi-theme($material-theme, $canvas-theme) { @mixin nifi-theme($material-theme, $canvas-theme) {
// Get the color config from the theme. // Get the color config from the theme.
@ -25,17 +26,22 @@
// Get the color palette from the color-config. // Get the color palette from the color-config.
$primary-palette: map.get($color-config, 'primary'); $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 // Get hues from palette
$primary-palette-100: mat.get-color-from-palette($primary-palette, 100); $primary-palette-default: mat.get-color-from-palette($primary-palette, 'default');
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500); $primary-palette-default-contrast: mat.get-color-from-palette($primary-palette, 'default-contrast');
$accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400'); $primary-palette-darker: mat.get-color-from-palette($primary-palette, 'darker');
$canvas-primary-palette-800: mat.get-color-from-palette($canvas-primary-palette, 800); $primary-palette-darker-contrast: mat.get-color-from-palette($primary-palette, 'darker-contrast');
$canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900); $surface-darker: utils.get-surface($canvas-color-config, darker);
$canvas-accent-palette-A100: mat.get-color-from-palette($canvas-accent-palette, 'A100'); $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 { .listing-table {
table { table {
@ -52,32 +58,36 @@
} }
th { th {
background-color: $primary-palette-500 !important; background-color: $header-surface !important;
color: $canvas-primary-palette-900; color: $header-on-surface;
user-select: none; user-select: none;
.mat-sort-header-arrow {
color: $header-on-surface;
}
} }
tr:hover { tr:hover {
background-color: $primary-palette-100 !important; background-color: $surface-highlight !important;
} }
.selected { .selected {
background-color: $canvas-accent-palette-A100 !important; background-color: $accent-surface !important;
} }
.even { .even {
background-color: $canvas-primary-palette-800; background-color: $surface-darker;
} }
.fa { .fa {
color: $accent-palette-A400; color: utils.get-color-on-surface($color-config, $surface);
width: 10px; width: 10px;
height: 14px; height: 14px;
text-align: center; text-align: center;
} }
.icon { .icon {
color: $accent-palette-A400; color: utils.get-color-on-surface($color-config, $surface);
width: 10px; width: 10px;
text-align: center; text-align: center;
} }
@ -100,10 +110,6 @@
} }
} }
.mat-sort-header-arrow {
color: $canvas-primary-palette-900;
}
.mat-sort-header-content { .mat-sort-header-content {
overflow: hidden; overflow: hidden;
} }

186
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi-canvas.scss Normal file
View File

@ -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
)
);

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

@ -17,13 +17,18 @@
// Custom Colors following Material Design // Custom Colors following Material Design
// For more information: https://m2.material.io/design/color/the-color-system.html // For more information: https://m2.material.io/design/color/the-color-system.html
@use 'sass:map';
@use '@angular/material' as mat; @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 // The $material-primary-light-palette define the PRIMARY AND ACCENT palettes for all Angular Material components used throughout Apache NiFi
$material-primary-light-palette: ( $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 -> 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 50: rgba(#F9FAFB, 0.97),
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, 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 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 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"). 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 // 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. // 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 A100: rgba(#1491C1, 0.12), // .hint-pattern
A200: #44a3cf, // .enabled, .transmitting, .load-balance-icon-active A200: #aabec7, // .zero
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 A400: #44a3cf, // .enabled, .transmitting, .load-balance-icon-active
A700: rgba(20, 145, 193, 0.12), // .hint-pattern 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. // 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 // 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. // 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); // 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. // Since 300, was set as the default the contrast-300 will be used as the default text color.
contrast: ( contrast: (
50: rgba(black, 0.87), 50: $on-surface-dark,
100: rgba(black, 0.87), 100: $on-surface-dark,
200: rgba(black, 0.87), 200: $on-surface-dark,
300: #ffffff, 300: $on-surface-dark,
400: #ffffff, 400: $on-surface-dark,
500: #ffffff, 500: $on-surface-dark,
600: #ffffff, 600: $on-surface-light,
700: #ffffff, 700: $on-surface-light,
800: #ffffff, 800: $on-surface-light,
900: #ffffff, 900: $on-surface-light,
A100: rgba(black, 0.87), A100: $on-surface-dark,
A200: rgba(black, 0.87), A200: $on-surface-dark,
A400: #ffffff, A400: $on-surface-dark,
A700: #ffffff, 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-accent-light-palette: (
$material-primary-dark-palette: ( 50: #fff8cc,
// 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 100: #ebe2be,
50: rgb(30, 45, 54), // .context-menu 200: #d7cbb0, // lighter
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, 300: #c4b5a2,
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 400: #b09e94,
300: #3e5762, // .breadcrumb-container, .navigation-control, .operation-control, .flow-status, .controller-bulletins, .component-button-grip, .search-container, .nifi-navigation, .CodeMirror.blank 500: #9c8886, // default
400: #4d6b78, // Default hue for this palette (color="primary"). 600: #8f7775,
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, 700: #836563,
600: #718d9a, // .breadcrumb-container, .birdseye-brush 800: #765452, // darker
700: #8aa2ad, // "darker" hue for this palette. Also #status-history-chart-container text, #status-history-chart-control-container text 900: #4a3435,
800: #abbcc5, A100: #e7ebbe,
900: #abbcc5, A200: #d7d7b0,
A400: #b0ab94,
// 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 A700: #020202,
// 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: ( contrast: (
50: #ffffff, 50: $on-surface-dark,
100: #ffffff, 100: $on-surface-dark,
200: #ffffff, 200: $on-surface-dark,
300: #ffffff, 300: $on-surface-dark,
400: #ffffff, 400: $on-surface-dark,
500: #ffffff, 500: $on-surface-dark,
600: rgba(black, 0.87), 600: $on-surface-dark,
700: rgba(black, 0.87), 700: $on-surface-light,
800: rgba(black, 0.87), 800: $on-surface-light,
900: rgba(black, 0.87), 900: $on-surface-light,
A100: #ffffff, A100: $on-surface-dark,
A200: #ffffff, A200: $on-surface-dark,
A400: rgba(black, 0.87), A400: $on-surface-dark,
A700: rgba(black, 0.87), A700: $on-surface-dark,
)
);
// 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 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),
) )
); );
@ -302,102 +107,54 @@ $nifi-canvas-accent-dark-palette: (
$warn-light-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 -> 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, 50: #ffebee,
100: #ffccd2, // "lighter" hue for this palette. Also .banner-error 100: #ffccd2,
200: #f49999, //.stopped 200: #f49999, // "lighter" hue for this palette..stopped
300: #eb7071, //.stale 300: #f57472,
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 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, 500: #fa3b30,
600: #ec3030, //.bulletin-error 600: #ff1507, // .bulletin-error
700: #ff1507, // "darker" hue for this palette 700: #ff0000, //.connector, .startpoint
800: #ff0000, //.connector, .startpoint 800: #ec3030,
900: #f10000, 900: #ba554a, // "darker" hue for this palette .bulletin-background
A100: #ffef85, //.sync-failure
// 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. A200: #f8bf47, //.invalid, .is-missing-port, circle.context
// These color are used for label values, stats, timestamps, counts, etc. A400: #f29833, // .value, .refresh-timestamp, .stats-value, .active-thread-count, .process-group-contents-count, .operation-context-id, .selected-type-name
A100: #d0c3c2, //.sync-failure A700: #eb711e, // .version-control
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.
contrast: ( contrast: (
50: rgba(black, 0.87), 50: $on-surface-dark,
100: rgba(black, 0.87), 100: $on-surface-dark,
200: rgba(black, 0.87), 200: $on-surface-dark,
300: rgba(black, 0.87), 300: $on-surface-dark,
400: rgba(black, 0.87), 400: $on-surface-dark,
500: #ffffff, 500: $on-surface-dark,
600: #ffffff, 600: $on-surface-dark,
700: #ffffff, 700: $on-surface-dark,
800: #ffffff, 800: $on-surface-dark,
900: #ffffff, 900: $on-surface-light,
A100: rgba(black, 0.87), A100: $on-surface-dark,
A200: #ffffff, A200: $on-surface-dark,
A400: #ffffff, A400: $on-surface-dark,
A700: #ffffff, 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 // Dark and light palettes are identical for NiFi, their "default", "lighter", and "darker" values are different and set below.
$warn-dark-palette: ( $material-primary-dark-palette: $material-primary-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 $material-accent-dark-palette: $material-accent-light-palette;
50: #ffebee, $warn-dark-palette: $warn-light-palette;
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,
// 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. // Append a special case to the light palette to preserve the legacy styling of NiFi's navigation bar.
// These color are used for label values, stats, timestamps, counts, etc. $material-primary-light-palette: map.set($material-primary-light-palette, 'navbar', #aabdc5);
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
// 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. // We need to pull out the contrast palette and add the contrast to it, then restore it.
// 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 $contrasts: map.get($material-primary-light-palette, 'contrast');
// 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. $contrasts: map.set($contrasts, 'navbar', #004849);
// $material-primary-light-palette: map.set($material-primary-light-palette, 'contrast', $contrasts);
// 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),
)
);
// Define the palettes for your theme // Define the palettes for your theme
$material-primary-light: mat.define-palette($material-primary-light-palette, 600, 100, 900); $material-primary-light: mat.define-palette($material-primary-light-palette, 600, 300, 700);
$material-accent-light: mat.define-palette($material-primary-light-palette, A400, A100, A700); $material-accent-light: mat.define-palette($material-accent-light-palette, 500, 200, 800);
$nifi-canvas-primary-light: mat.define-palette($nifi-canvas-light-palette); $warn-light: mat.define-palette($warn-light-palette, 400, 200, 900);
$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);
// Create the theme objects. We can extract the values we need from the theme passed into the mixins. // 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( $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. // Create the color palettes used in our dark theme.
$material-primary-dark: mat.define-palette($material-primary-dark-palette); $material-primary-dark: mat.define-palette($material-primary-dark-palette, 400, 200, 600);
$material-accent-dark: mat.define-palette($material-primary-dark-palette, A400, A100, A700); $material-accent-dark: mat.define-palette($material-accent-dark-palette, 400, 300, 700);
$nifi-canvas-primary-dark: mat.define-palette($nifi-canvas-dark-palette); $warn-dark: mat.define-palette($warn-dark-palette, 500, 200, 700);
$nifi-canvas-accent-dark: mat.define-palette($nifi-canvas-accent-dark-palette);
$warn-dark: mat.define-palette($warn-dark-palette, 600, 200, 800);
$material-theme-dark: mat.define-dark-theme( $material-theme-dark: mat.define-dark-theme(
( (
@ -442,15 +185,3 @@ $material-theme-dark: mat.define-dark-theme(
typography: mat.define-typography-config(), 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
)
);

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

@ -17,14 +17,18 @@
@use '@angular/material' as mat; @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 // Custom Colors following Material Design
// For more information: https://m2.material.io/design/color/the-color-system.html // 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 // The $material-primary-light-palette define the PRIMARY AND ACCENT palettes for all Angular Material components used throughout Apache NiFi
$material-primary-light-palette: ( $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 -> 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 50: #f0e7f2, // .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, 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 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 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"). 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 // 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. // 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 A100: rgba(20, 145, 193, 0.12), // .hint-pattern
A200: #44a3cf, // .enabled, .transmitting, .load-balance-icon-active A200: #aabec7, // .zero
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 A400: #44a3cf, // .enabled, .transmitting, .load-balance-icon-active
A700: rgba(20, 145, 193, 0.12), // .hint-pattern 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. // 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 // 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); // 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. // Since 300, was set as the default the contrast-300 will be used as the default text color.
contrast: ( contrast: (
50: rgba(black, 0.87), 50: $on-surface-dark,
100: rgba(black, 0.87), 100: $on-surface-dark,
200: rgba(black, 0.87), 200: $on-surface-dark,
300: #ffffff, 300: $on-surface-light,
400: #ffffff, 400: $on-surface-light,
500: #ffffff, 500: $on-surface-light,
600: #ffffff, 600: $on-surface-light,
700: #ffffff, 700: $on-surface-light,
800: #ffffff, 800: $on-surface-light,
900: #ffffff, 900: $on-surface-light,
A100: rgba(black, 0.87), A100: $on-surface-dark,
A200: rgba(black, 0.87), A200: $on-surface-dark,
A400: #ffffff, A400: $on-surface-light,
A700: #ffffff, A700: $on-surface-light,
) )
); );
// The $material-primary-dark-palette define the PRIMARY AND ACCENT palettes for all Angular Material components used throughout Apache NiFi // The $material-primary-dark-palette define the PRIMARY AND ACCENT palettes for all Angular Material components used throughout Apache NiFi
$material-primary-dark-palette: ( $material-primary-dark-palette: $material-primary-light-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),
)
);
// 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 // 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: ( $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 -> 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, 50: #ffebee,
100: #ffccd2, // "lighter" hue for this palette. Also .banner-error 100: #ffccd2,
200: #f49999, //.stopped 200: #f49999, // "lighter" hue for this palette..stopped
300: #eb7071, //.stale 300: #f57472,
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 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, 500: #fa3b30,
600: #ec3030, //.bulletin-error 600: #ff1507, // .bulletin-error
700: #ff1507, // "darker" hue for this palette 700: #ff0000, //.connector, .startpoint
800: #ff0000, //.connector, .startpoint 800: #ec3030,
900: #f10000, 900: #ba554a, // "darker" hue for this palette .bulletin-background
A100: #ffef85, //.sync-failure
// 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. A200: #f8bf47, //.invalid, .is-missing-port, circle.context
// These color are used for label values, stats, timestamps, counts, etc. A400: #f29833, // .value, .refresh-timestamp, .stats-value, .active-thread-count, .process-group-contents-count, .operation-context-id, .selected-type-name
A100: #b6abaa, //.sync-failure A700: #eb711e, // .version-control
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.
contrast: ( contrast: (
50: rgba(black, 0.87), 50: $on-surface-dark,
100: rgba(black, 0.87), 100: $on-surface-dark,
200: rgba(black, 0.87), 200: $on-surface-dark,
300: rgba(black, 0.87), 300: $on-surface-dark,
400: rgba(black, 0.87), 400: $on-surface-dark,
500: #ffffff, 500: $on-surface-dark,
600: #ffffff, 600: $on-surface-dark,
700: #ffffff, 700: $on-surface-dark,
800: #ffffff, 800: $on-surface-dark,
900: #ffffff, 900: $on-surface-light,
A100: rgba(black, 0.87), A100: $on-surface-dark,
A200: #ffffff, A200: $on-surface-dark,
A400: #ffffff, A400: $on-surface-dark,
A700: #ffffff, 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 // 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: ( $warn-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: #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),
)
);
// Define the palettes for your theme // Define the palettes for your theme
$material-primary-light: mat.define-palette($material-primary-light-palette); $material-primary-light: mat.define-palette($material-primary-light-palette);
$material-accent-light: mat.define-palette($material-primary-light-palette, A400, A100, A700); $material-accent-light: mat.define-palette($material-primary-light-palette, A700, A200, A100);
$nifi-canvas-primary-light: mat.define-palette($nifi-canvas-light-palette); $warn-light: mat.define-palette($warn-light-palette, 400, 100, 600);
$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);
// Create the theme objects. We can extract the values we need from the theme passed into the mixins. // 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( $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. // Create the color palettes used in our dark theme.
$material-primary-dark: mat.define-palette($material-primary-dark-palette); $material-primary-dark: mat.define-palette($material-primary-dark-palette);
$material-accent-dark: mat.define-palette($material-primary-dark-palette, A400, A100, A700); $material-accent-dark: mat.define-palette($material-primary-dark-palette, A700, A200, A100);
$nifi-canvas-primary-dark: mat.define-palette($nifi-canvas-dark-palette); $warn-dark: mat.define-palette($warn-dark-palette, 800, 200, 700);
$nifi-canvas-accent-dark: mat.define-palette($nifi-canvas-accent-dark-palette);
$warn-dark: mat.define-palette($warn-dark-palette, 600, 200, 800);
$material-theme-dark: mat.define-dark-theme( $material-theme-dark: mat.define-dark-theme(
( (
@ -442,16 +147,3 @@ $material-theme-dark: mat.define-dark-theme(
typography: mat.define-typography-config(), 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
)
);

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

@ -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;

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

@ -73,8 +73,13 @@
@use 'codemirror/lib/codemirror.css'; @use 'codemirror/lib/codemirror.css';
@use 'codemirror/addon/hint/show-hint.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. // NOTE: for faster developer cycles during theme development the theme can also be changed here.
// Ex: @import 'assets/themes/purple'; // 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'; @import 'assets/themes/nifi';
$fontPrimary: 'Roboto', sans-serif; $fontPrimary: 'Roboto', sans-serif;
@ -187,149 +192,146 @@ $appFontPath: '~roboto-fontface/fonts';
$canvas-accent-palette: map.get($canvas-color-config, 'accent'); $canvas-accent-palette: map.get($canvas-color-config, 'accent');
// Get hues from palette // 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); // Start with the canvas theme.
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500); $canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, A200);
$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);
$canvas-primary-palette-400: mat.get-color-from-palette($canvas-primary-palette, 400); $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-primary-palette-500: mat.get-color-from-palette($canvas-primary-palette, 500);
$canvas-accent-palette-200: mat.get-color-from-palette($canvas-accent-palette, 200); $canvas-accent-palette-lighter: mat.get-color-from-palette($canvas-accent-palette, lighter);
$canvas-accent-palette-400: mat.get-color-from-palette($canvas-accent-palette, 400); $canvas-accent-palette-default: mat.get-color-from-palette($canvas-accent-palette, default);
$canvas-accent-palette-A200: mat.get-color-from-palette($canvas-accent-palette, 'A200');
$warn-palette-200: mat.get-color-from-palette($warn-palette, 200); $primary-palette-lighter: mat.get-color-from-palette($primary-palette, lighter);
$warn-palette-300: mat.get-color-from-palette($warn-palette, 300); $primary-palette-default: mat.get-color-from-palette($primary-palette, 'default');
$warn-palette-A100: mat.get-color-from-palette($warn-palette, 'A100'); $primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400');
$warn-palette-A400: mat.get-color-from-palette($warn-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 { a {
color: $accent-palette-A400; color: utils.get-color-on-surface($color-config, $surface);
text-decoration-color: $primary-palette-200; text-decoration-color: $primary-palette-lighter;
} }
a:hover { a:hover {
text-decoration-color: $accent-palette-A400; text-decoration-color: utils.get-color-on-surface($color-config, $surface);
} }
.tooltip { .tooltip {
background-color: $canvas-primary-palette-900; background-color: $surface;
border-color: $canvas-primary-palette-200; border-color: $on-surface;
box-shadow: 0 2px 5px $canvas-primary-palette-50; box-shadow: 0 2px 5px $canvas-primary-palette-A200;
color: $canvas-primary-palette-200; color: $on-surface;
} }
.property-editor { .property-editor {
background-color: $canvas-primary-palette-900; background-color: $surface;
box-shadow: 0 2px 5px $canvas-primary-palette-50; box-shadow: 0 2px 5px $canvas-primary-palette-A200;
} }
.disabled { .disabled {
color: $primary-palette-500 !important; color: $primary-palette-default !important;
fill: $primary-palette-500 !important; fill: $primary-palette-default !important;
text-shadow: 0 0 4px $canvas-primary-palette-900;
} }
.enabled { .enabled {
color: $accent-palette-A200 !important; color: $primary-palette-A400 !important;
fill: $accent-palette-A200 !important; fill: $primary-palette-A400 !important;
text-shadow: 0 0 4px $canvas-primary-palette-900;
} }
.stopped { .stopped {
color: $warn-palette-200 !important; color: $warn-palette-lighter !important;
fill: $warn-palette-200 !important; fill: $warn-palette-lighter !important;
text-shadow: 0 0 4px $canvas-primary-palette-900;
} }
.running { .running {
color: $canvas-accent-palette-200 !important; color: $canvas-accent-palette-lighter !important;
fill: $canvas-accent-palette-200 !important; fill: $canvas-accent-palette-lighter !important;
text-shadow: 0 0 4px $canvas-primary-palette-900;
} }
.has-errors, .has-errors,
.invalid { .invalid {
color: $canvas-accent-palette-A200 !important; color: $warn-palette-A200 !important;
fill: $canvas-accent-palette-A200 !important; fill: $warn-palette-A200 !important;
text-shadow: 0 0 4px $canvas-primary-palette-900;
} }
.validating { .validating {
color: $canvas-primary-palette-400 !important; color: $canvas-primary-palette-500 !important;
fill: $canvas-primary-palette-400 !important; fill: $canvas-primary-palette-500 !important;
text-shadow: 0 0 4px $canvas-primary-palette-900;
} }
.transmitting { .transmitting {
color: $accent-palette-A200 !important; color: $canvas-accent-palette-default !important;
fill: $accent-palette-A200 !important; fill: $canvas-accent-palette-default !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;
} }
.up-to-date { .up-to-date {
color: $canvas-accent-palette-400 !important; color: $canvas-accent-palette-default !important;
fill: $canvas-accent-palette-400 !important; fill: $canvas-accent-palette-default !important;
text-shadow: 0 0 4px $canvas-primary-palette-900;
} }
.locally-modified, .locally-modified,
.sync-failure { .sync-failure {
color: $warn-palette-A100 !important; color: $accent-palette-lighter !important;
fill: $warn-palette-A100 !important; fill: $accent-palette-lighter !important;
text-shadow: 0 0 4px $canvas-primary-palette-900;
} }
.stale, .stale,
.locally-modified-and-stale { .locally-modified-and-stale {
color: $warn-palette-300 !important; color: $warn-palette-default !important;
fill: $warn-palette-300 !important; fill: $warn-palette-default !important;
text-shadow: 0 0 4px $canvas-primary-palette-900;
} }
.zero { .zero {
color: $accent-palette-A100 !important; opacity: 0.5;
fill: $accent-palette-A100 !important;
text-shadow: none !important;
} }
.blank, .blank,
.unset, .unset,
.sensitive { .sensitive {
color: $canvas-primary-palette-400 !important; color: $canvas-primary-palette-500 !important;
} }
button.nifi-button { button.nifi-button {
border: 1px solid $primary-palette-200; color: utils.get-color-on-surface($color-config, $surface-darker);
background-color: $primary-palette-50;
color: $accent-palette-A400;
} }
button.nifi-button:hover { button.nifi-button:hover {
border-color: $accent-palette-A400; background-color: $surface-highlight;
} }
button.nifi-button:disabled { button.nifi-button:disabled {
color: $primary-palette-200 !important; color: $on-surface-lighter;
background-color: transparent;
cursor: not-allowed; cursor: not-allowed;
border: 1px solid $primary-palette-200;
i { i {
color: $primary-palette-200 !important; color: $on-surface-lighter;
} }
} }
.value, .value,
.refresh-timestamp { .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 { ngx-skeleton-loader .skeleton-loader {