mirror of
https://github.com/apache/nifi.git
synced 2025-02-06 18:18:27 +00:00
[NIFI-12698] dark mode, [NIFI-12687] status history axis label fix (#8320)
* [NIFI-12698] dark mode, [NIFI-12687] status history axis label fix * prettier * lint fix * update input form field styles to support dark mode * adjust colors of flow status icons, and PG status icons, and softened the warn palette. Fix background of status history charts in dark mode * fix provenance text color in dark mode * leave the toggle for dark mode always visible to encourage testing This closes #8320
This commit is contained in:
Scott Aslan
GitHub
parent
d5ed02ec59
commit
c6f1d771e8
@ -33,6 +33,7 @@ npm-debug.log
|
||||
|
||||
# Theme
|
||||
src/assets/themes/*
|
||||
src/styles.scss
|
||||
|
||||
# System files
|
||||
.DS_Store
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($theme) {
|
||||
@mixin nifi-theme($theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($theme);
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($theme) {
|
||||
@mixin nifi-theme($theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($theme);
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($theme) {
|
||||
@mixin nifi-theme($theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($theme);
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($material-theme, $canvas-theme) {
|
||||
@mixin nifi-theme($material-theme, $canvas-theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($material-theme);
|
||||
$canvas-color-config: mat.get-color-config($canvas-theme);
|
||||
@ -29,7 +29,7 @@
|
||||
$canvas-primary-palette: map.get($canvas-color-config, 'primary');
|
||||
|
||||
// Get hues from palette
|
||||
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
|
||||
$primary-palette-700: mat.get-color-from-palette($primary-palette, 700);
|
||||
$warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200');
|
||||
$canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200');
|
||||
|
||||
@ -45,7 +45,7 @@
|
||||
}
|
||||
|
||||
.operation-context-type {
|
||||
color: $primary-palette-500;
|
||||
color: $primary-palette-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($theme) {
|
||||
@mixin nifi-theme($theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($theme);
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($material-theme, $canvas-theme) {
|
||||
@mixin nifi-theme($material-theme, $canvas-theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($material-theme);
|
||||
$canvas-color-config: mat.get-color-config($canvas-theme);
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($theme) {
|
||||
@mixin nifi-theme($theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($theme);
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($material-theme, $canvas-theme) {
|
||||
@mixin nifi-theme($material-theme, $canvas-theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($material-theme);
|
||||
$canvas-color-config: mat.get-color-config($canvas-theme);
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($material-theme, $canvas-theme) {
|
||||
@mixin nifi-theme($material-theme, $canvas-theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($material-theme);
|
||||
$canvas-color-config: mat.get-color-config($canvas-theme);
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($material-theme, $canvas-theme) {
|
||||
@mixin nifi-theme($material-theme, $canvas-theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($material-theme);
|
||||
$canvas-color-config: mat.get-color-config($canvas-theme);
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($material-theme, $canvas-theme) {
|
||||
@mixin nifi-theme($material-theme, $canvas-theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($material-theme);
|
||||
$canvas-color-config: mat.get-color-config($canvas-theme);
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($material-theme, $canvas-theme) {
|
||||
@mixin nifi-theme($material-theme, $canvas-theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($material-theme);
|
||||
$canvas-color-config: mat.get-color-config($canvas-theme);
|
||||
@ -31,7 +31,7 @@
|
||||
// Get hues from palette
|
||||
$primary-palette-100: mat.get-color-from-palette($primary-palette, 100);
|
||||
$primary-palette-300: mat.get-color-from-palette($primary-palette, 300);
|
||||
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
|
||||
$primary-palette-700: mat.get-color-from-palette($primary-palette, 700);
|
||||
$primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400');
|
||||
$warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200');
|
||||
$warn-palette-A400: mat.get-color-from-palette($warn-palette, 'A400');
|
||||
@ -73,7 +73,7 @@
|
||||
}
|
||||
|
||||
.operation-context-type {
|
||||
color: $primary-palette-500;
|
||||
color: $primary-palette-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($canvas-theme) {
|
||||
@mixin nifi-theme($canvas-theme) {
|
||||
// Get the color config from the theme.
|
||||
$canvas-color-config: mat.get-color-config($canvas-theme);
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($material-theme, $canvas-theme) {
|
||||
@mixin nifi-theme($material-theme, $canvas-theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($material-theme);
|
||||
$canvas-color-config: mat.get-color-config($canvas-theme);
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($material-theme, $canvas-theme) {
|
||||
@mixin nifi-theme($material-theme, $canvas-theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($material-theme);
|
||||
$canvas-color-config: mat.get-color-config($canvas-theme);
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($material-theme, $canvas-theme) {
|
||||
@mixin nifi-theme($material-theme, $canvas-theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($material-theme);
|
||||
$canvas-color-config: mat.get-color-config($canvas-theme);
|
||||
@ -32,6 +32,7 @@
|
||||
$canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900);
|
||||
$canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200');
|
||||
$canvas-primary-palette-A700: mat.get-color-from-palette($canvas-primary-palette, 'A700');
|
||||
$canvas-primary-palette-contrast-300: mat.get-color-from-palette($canvas-primary-palette, 'contrast-300');
|
||||
|
||||
.search-container {
|
||||
border-left: 1px solid $primary-palette-300;
|
||||
@ -44,10 +45,15 @@
|
||||
|
||||
.search-input {
|
||||
color: $canvas-primary-palette-A200;
|
||||
background-color: $canvas-primary-palette-900;
|
||||
}
|
||||
|
||||
.fa {
|
||||
color: $canvas-primary-palette-A700;
|
||||
}
|
||||
}
|
||||
|
||||
.search-results {
|
||||
background-color: $canvas-primary-palette-900;
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
<form [formGroup]="searchForm">
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
placeholder="Search"
|
||||
class="search-input"
|
||||
[class.open]="searchInputVisible"
|
||||
@ -34,7 +35,7 @@
|
||||
[cdkConnectedOverlayHasBackdrop]="true"
|
||||
[cdkConnectedOverlayBackdropClass]="'cdk-overlay-transparent-backdrop'"
|
||||
(backdropClick)="backdropClicked()">
|
||||
<div class="search-results bg-white w-96 border p-2 text-sm max-h-96 overflow-y-auto">
|
||||
<div class="search-results w-96 border p-2 text-sm max-h-96 overflow-y-auto">
|
||||
<div *ngIf="searching; else renderAllResults" class="unset italic">Searching</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
@ -30,13 +30,25 @@ import {
|
||||
import { ComponentType } from '../../../../../../state/shared';
|
||||
import { NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
|
||||
import { RouterLink } from '@angular/router';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
|
||||
@Component({
|
||||
selector: 'search',
|
||||
standalone: true,
|
||||
templateUrl: './search.component.html',
|
||||
styleUrls: ['./search.component.scss'],
|
||||
imports: [ReactiveFormsModule, CdkOverlayOrigin, CdkConnectedOverlay, NgIf, NgTemplateOutlet, RouterLink, NgForOf]
|
||||
imports: [
|
||||
ReactiveFormsModule,
|
||||
CdkOverlayOrigin,
|
||||
CdkConnectedOverlay,
|
||||
NgIf,
|
||||
NgTemplateOutlet,
|
||||
RouterLink,
|
||||
NgForOf,
|
||||
MatFormFieldModule,
|
||||
MatInputModule
|
||||
]
|
||||
})
|
||||
export class Search implements OnInit {
|
||||
protected readonly ComponentType = ComponentType;
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($material-theme, $canvas-theme) {
|
||||
@mixin nifi-theme($material-theme, $canvas-theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($material-theme);
|
||||
$canvas-color-config: mat.get-color-config($canvas-theme);
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($theme) {
|
||||
@mixin nifi-theme($theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($theme);
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($theme) {
|
||||
@mixin nifi-theme($theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($theme);
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($theme) {
|
||||
@mixin nifi-theme($theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($theme);
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin 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);
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($theme) {
|
||||
@mixin nifi-theme($theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($theme);
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($theme) {
|
||||
@mixin nifi-theme($theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($theme);
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($material-theme, $canvas-theme) {
|
||||
@mixin nifi-theme($material-theme, $canvas-theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($material-theme);
|
||||
$canvas-color-config: mat.get-color-config($canvas-theme);
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($material-theme, $canvas-theme) {
|
||||
@mixin nifi-theme($material-theme, $canvas-theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($material-theme);
|
||||
$canvas-color-config: mat.get-color-config($canvas-theme);
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($material-theme, $canvas-theme) {
|
||||
@mixin nifi-theme($material-theme, $canvas-theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($material-theme);
|
||||
$canvas-color-config: mat.get-color-config($canvas-theme);
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($material-theme, $canvas-theme) {
|
||||
@mixin nifi-theme($material-theme, $canvas-theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($material-theme);
|
||||
$canvas-color-config: mat.get-color-config($canvas-theme);
|
||||
@ -26,17 +26,23 @@
|
||||
// Get the color palette from the color-config.
|
||||
$primary-palette: map.get($color-config, 'primary');
|
||||
$warn-palette: map.get($color-config, 'warn');
|
||||
$canvas-primary-palette: map.get($canvas-color-config, 'primary');
|
||||
$canvas-accent-palette: map.get($canvas-color-config, 'accent');
|
||||
|
||||
// Get hues from palette
|
||||
$primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400');
|
||||
$warn-palette-400: mat.get-color-from-palette($warn-palette, 400);
|
||||
$warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200');
|
||||
$canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200');
|
||||
$canvas-accent-palette-A200: mat.get-color-from-palette($canvas-accent-palette, 'A200');
|
||||
|
||||
#lineage {
|
||||
canvas,
|
||||
svg {
|
||||
text.event-type {
|
||||
fill: $canvas-primary-palette-A200;
|
||||
}
|
||||
|
||||
path.link.selected {
|
||||
stroke: $warn-palette-400;
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($theme) {
|
||||
@mixin nifi-theme($theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($theme);
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($theme) {
|
||||
@mixin nifi-theme($theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($theme);
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($theme) {
|
||||
@mixin nifi-theme($theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($theme);
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($theme) {
|
||||
@mixin nifi-theme($theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($theme);
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($theme) {
|
||||
@mixin nifi-theme($theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($theme);
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($material-theme, $canvas-theme) {
|
||||
@mixin nifi-theme($material-theme, $canvas-theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($material-theme);
|
||||
$canvas-color-config: mat.get-color-config($canvas-theme);
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($material-theme, $canvas-theme) {
|
||||
@mixin nifi-theme($material-theme, $canvas-theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($material-theme);
|
||||
$canvas-color-config: mat.get-color-config($canvas-theme);
|
||||
|
||||
@ -20,11 +20,15 @@
|
||||
<div class="flex justify-between items-center">
|
||||
<h3 class="text-lg">Add {{ componentType }}</h3>
|
||||
<div>
|
||||
<input
|
||||
class="border px-1.5 py-1 w-64"
|
||||
type="text"
|
||||
(keyup)="filterTypes($event)"
|
||||
placeholder="Filter types..." />
|
||||
<mat-form-field>
|
||||
<mat-label>Filter types</mat-label>
|
||||
<input
|
||||
matInput
|
||||
class="border px-1.5 py-1 w-64"
|
||||
type="text"
|
||||
(keyup)="filterTypes($event)"
|
||||
placeholder="Filter types..." />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div class="type-table">
|
||||
|
||||
@ -27,6 +27,9 @@ import { NifiTooltipDirective } from '../tooltips/nifi-tooltip.directive';
|
||||
import { RestrictionsTip } from '../tooltips/restrictions-tip/restrictions-tip.component';
|
||||
import { ControllerServiceApiTip } from '../tooltips/controller-service-api-tip/controller-service-api-tip.component';
|
||||
import { NifiSpinnerDirective } from '../spinner/nifi-spinner.directive';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'extension-creation',
|
||||
@ -39,7 +42,10 @@ import { NifiSpinnerDirective } from '../spinner/nifi-spinner.directive';
|
||||
MatSortModule,
|
||||
NgIf,
|
||||
NifiTooltipDirective,
|
||||
NifiSpinnerDirective
|
||||
NifiSpinnerDirective,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
ReactiveFormsModule
|
||||
],
|
||||
styleUrls: ['./extension-creation.component.scss']
|
||||
})
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($material-theme, $canvas-theme) {
|
||||
@mixin nifi-theme($material-theme, $canvas-theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($material-theme);
|
||||
$canvas-color-config: mat.get-color-config($canvas-theme);
|
||||
@ -30,7 +30,6 @@
|
||||
// Get hues from palette
|
||||
$primary-palette-100: mat.get-color-from-palette($primary-palette, 100);
|
||||
$primary-palette-300: mat.get-color-from-palette($primary-palette, 300);
|
||||
$primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
|
||||
$primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400');
|
||||
$canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50);
|
||||
$canvas-primary-palette-A200: mat.get-color-from-palette($canvas-primary-palette, 'A200');
|
||||
@ -55,7 +54,7 @@
|
||||
button.global-menu-item {
|
||||
.fa,
|
||||
.icon {
|
||||
color: $primary-palette-500;
|
||||
color: $primary-palette-A400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -30,6 +30,7 @@
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
<div class="flex justify-between items-center gap-x-1" *ngIf="currentUser$ | async as user">
|
||||
<mat-slide-toggle color="primary" (click)="toggleTheme()"></mat-slide-toggle>
|
||||
<div class="flex flex-col justify-between items-end gap-y-1">
|
||||
<div class="current-user">{{ user.identity }}</div>
|
||||
<a href="#" *ngIf="allowLogin(user)">log in</a>
|
||||
|
||||
@ -15,8 +15,9 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component } from '@angular/core';
|
||||
import { AsyncPipe, NgIf, NgOptimizedImage } from '@angular/common';
|
||||
import { Component, Inject } from '@angular/core';
|
||||
import { AsyncPipe, DOCUMENT, NgIf, NgOptimizedImage } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MatDividerModule } from '@angular/material/divider';
|
||||
import { MatMenuModule } from '@angular/material/menu';
|
||||
import { getNodeStatusHistoryAndOpenDialog } from '../../../state/status-history/status-history.actions';
|
||||
@ -30,22 +31,35 @@ import { selectCurrentUser } from '../../../state/current-user/current-user.sele
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { NiFiState } from '../../../state';
|
||||
import { selectFlowConfiguration } from '../../../state/flow-configuration/flow-configuration.selectors';
|
||||
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
||||
|
||||
@Component({
|
||||
selector: 'navigation',
|
||||
standalone: true,
|
||||
imports: [NgOptimizedImage, AsyncPipe, MatDividerModule, MatMenuModule, NgIf, RouterLink, MatButtonModule],
|
||||
imports: [
|
||||
NgOptimizedImage,
|
||||
AsyncPipe,
|
||||
MatDividerModule,
|
||||
MatMenuModule,
|
||||
NgIf,
|
||||
RouterLink,
|
||||
MatButtonModule,
|
||||
MatSlideToggleModule,
|
||||
FormsModule
|
||||
],
|
||||
templateUrl: './navigation.component.html',
|
||||
styleUrls: ['./navigation.component.scss']
|
||||
})
|
||||
export class Navigation {
|
||||
currentUser$ = this.store.select(selectCurrentUser);
|
||||
flowConfiguration$ = this.store.select(selectFlowConfiguration);
|
||||
isDarkMode = false;
|
||||
|
||||
constructor(
|
||||
private store: Store<NiFiState>,
|
||||
private authStorage: AuthStorage,
|
||||
private authService: AuthService
|
||||
private authService: AuthService,
|
||||
@Inject(DOCUMENT) private _document: Document
|
||||
) {}
|
||||
|
||||
allowLogin(user: CurrentUser): boolean {
|
||||
@ -79,4 +93,11 @@ export class Navigation {
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
toggleTheme(value = !this.isDarkMode) {
|
||||
this.isDarkMode = value;
|
||||
this._document.body.classList.toggle('dark-theme', value);
|
||||
|
||||
// TODO: save to local storage or read OS settings???
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($material-theme, $canvas-theme) {
|
||||
@mixin nifi-theme($material-theme, $canvas-theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($material-theme);
|
||||
$canvas-color-config: mat.get-color-config($canvas-theme);
|
||||
@ -30,9 +30,10 @@
|
||||
// Get hues from palette
|
||||
$primary-palette-100: mat.get-color-from-palette($primary-palette, 100);
|
||||
$primary-palette-300: mat.get-color-from-palette($primary-palette, 300);
|
||||
$canvas-primary-palette-100: mat.get-color-from-palette($canvas-primary-palette, 100);
|
||||
$canvas-primary-palette-200: mat.get-color-from-palette($canvas-primary-palette, 200);
|
||||
$canvas-primary-palette-300: mat.get-color-from-palette($canvas-primary-palette, 300);
|
||||
$canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900);
|
||||
$canvas-primary-palette-contrast-900: mat.get-color-from-palette($canvas-primary-palette, 'contrast-900');
|
||||
|
||||
.property-editor {
|
||||
@include mat.button-density(-1);
|
||||
@ -40,7 +41,7 @@
|
||||
.nf-editor {
|
||||
.CodeMirror {
|
||||
border: 1px solid $canvas-primary-palette-300;
|
||||
background-color: $canvas-primary-palette-900;
|
||||
background-color: $canvas-primary-palette-contrast-900;
|
||||
|
||||
&.blank {
|
||||
background: $primary-palette-300;
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($theme) {
|
||||
@mixin nifi-theme($theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($theme);
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($material-theme, $canvas-theme) {
|
||||
@mixin nifi-theme($material-theme, $canvas-theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($material-theme);
|
||||
$canvas-color-config: mat.get-color-config($canvas-theme);
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($material-theme, $canvas-theme) {
|
||||
@mixin nifi-theme($material-theme, $canvas-theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($material-theme);
|
||||
$canvas-color-config: mat.get-color-config($canvas-theme);
|
||||
@ -33,30 +33,21 @@
|
||||
$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');
|
||||
|
||||
#status-history-chart-container,
|
||||
#status-history-chart-control-container {
|
||||
:host ::ng-deep #status-history-chart-container,
|
||||
:host ::ng-deep #status-history-chart-control-container {
|
||||
background-color: $canvas-primary-palette-900;
|
||||
|
||||
.axis path,
|
||||
.axis line {
|
||||
fill: none;
|
||||
stroke: $canvas-primary-palette-A100;
|
||||
}
|
||||
|
||||
.chart-line {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.brush .selection {
|
||||
stroke: $canvas-primary-palette-A700;
|
||||
}
|
||||
}
|
||||
|
||||
#status-history-chart-control-container {
|
||||
background-color: $canvas-primary-palette-900;
|
||||
}
|
||||
|
||||
#status-history-chart-container text,
|
||||
:host ::ng-deep #status-history-chart-container text,
|
||||
#status-history-chart-control-container text {
|
||||
fill: $primary-palette-700;
|
||||
}
|
||||
|
||||
@ -65,10 +65,6 @@
|
||||
.mat-mdc-dialog-content {
|
||||
max-height: unset;
|
||||
}
|
||||
|
||||
.selected-descriptor-container {
|
||||
height: 68px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -79,6 +75,7 @@
|
||||
|
||||
.axis path,
|
||||
.axis line {
|
||||
fill: none;
|
||||
shape-rendering: crispEdges;
|
||||
}
|
||||
|
||||
@ -87,6 +84,7 @@
|
||||
}
|
||||
|
||||
.chart-line {
|
||||
fill: none;
|
||||
stroke-width: 1.5px;
|
||||
}
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($theme) {
|
||||
@mixin nifi-theme($theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($theme);
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($theme) {
|
||||
@mixin nifi-theme($theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($theme);
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
@use 'sass:map';
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin theme($material-theme, $canvas-theme) {
|
||||
@mixin nifi-theme($material-theme, $canvas-theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($material-theme);
|
||||
$canvas-color-config: mat.get-color-config($canvas-theme);
|
||||
|
||||
@ -34,10 +34,10 @@ $material-primary-light-palette: (
|
||||
|
||||
// A100 -> A700 are the ACCENT color (mat.define-palette($material-primary-light-palette, A400, A100, A700);). These color are the ANALOGOUS (or possibly the TRIADIC??) colors as defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b
|
||||
// These colors are also used by some custom canvas components that display the ANALOGOUS color for things like buttons, links, borders, info, etc.
|
||||
A100: #c1dbd7, // .zero
|
||||
A200: #9dc4be, // .enabled, .transmitting, .load-balance-icon-active
|
||||
A400: #729b93, // 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(91, 109, 104, 1), // .hint-pattern
|
||||
A100: #aabec7, // .zero
|
||||
A200: #44a3cf, // .enabled, .transmitting, .load-balance-icon-active
|
||||
A400: #004849, // a, a:hover, button.nifi-button, button.nifi-button:hover, .add-tenant-to-policy-form.fa, .component.selected rect.border, .add-connect, .remote-process-group-uri, .remote-process-group-transmission-secure, .navigation-control.fa, .operation-control.fa, .new-canvas-item.icon, .upload-flow-definition, .lineage-controls.fa, .event circle.context, .nifi-navigation.icon, .listing-table.fa, .listing-table.icon, .context-menu
|
||||
A700: rgba(20, 145, 193, 0.12), // .hint-pattern
|
||||
|
||||
// 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
|
||||
@ -65,6 +65,53 @@ $material-primary-light-palette: (
|
||||
)
|
||||
);
|
||||
|
||||
// The $material-primary-dark-palette define the PRIMARY AND ACCENT palettes for all Angular Material components used throughout Apache NiFi
|
||||
$material-primary-dark-palette: (
|
||||
// 50 -> 900 are the PRIMARY colors (mat.define-palette($material-primary-dark-palette, 300);) defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b
|
||||
50: rgb(30, 45, 54), // .context-menu
|
||||
100: rgba(32, 47, 54, 1), // "lighter" hue for this palette. Also .global-menu:hover, .navigation-control-header:hover, .operation-control-header:hover, .new-canvas-item.icon.hovering, table tr:hover, .CodeMirror.blank, .remote-banner, .process-group-details-banner, .process-group-details-banner, remote-process-group-details-banner, .remote-process-group-last-refresh-rect,
|
||||
200: #30444d, // .processor-stats-border, .process-group-stats-border, .context-menu-item:hover, .process-group-banner, .remote-process-group-banner, .a, button.nifi-button, button.nifi-button:disabled
|
||||
300: #3e5762, // .breadcrumb-container, .navigation-control, .operation-control, .flow-status, .controller-bulletins, .component-button-grip, .search-container, .nifi-navigation, .CodeMirror.blank
|
||||
400: #4d6b78, // Default hue for this palette (color="primary").
|
||||
500: #587a89, // .disabled, .not-transmitting, .splash, .access-policies-header, .operation-context-type, .bulletin-board-header, .counter-header, .stats-info, .active-thread-count-icon, .processor-type, .port-transmission-icon, .operation-context-type, .flow-status.fa, .flow-status.icon, .controller-bulletins, .prioritizers-list, .controller-services-header, .login-title, .parameter-context-header, .parameter-context-inheritance-list, .provenance-header, .flowfile-header, .queue-listing-header, .settings-header, .summary-header, .user-header, table th, button.global-menu-item.fa, button.global-menu-item.icon, .event-header, .section-header,
|
||||
600: #718d9a, // .breadcrumb-container, .birdseye-brush
|
||||
700: #8aa2ad, // "darker" hue for this palette. Also #status-history-chart-container text, #status-history-chart-control-container text
|
||||
800: #abbcc5,
|
||||
900: #abbcc5,
|
||||
|
||||
// A100 -> A700 are the ACCENT color (mat.define-palette($material-primary-dark-palette, A400, A100, A700);). These color are the ANALOGOUS (or possibly the TRIADIC??) colors as defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b
|
||||
// These colors are also used by some custom canvas components that display the ANALOGOUS color for things like buttons, links, borders, info, etc.
|
||||
A100: #aabec7, // .zero
|
||||
A200: #44a3cf, // .enabled, .transmitting, .load-balance-icon-active
|
||||
A400: #009b9d, // a, a:hover, button.nifi-button, button.nifi-button:hover, .add-tenant-to-policy-form.fa, .component.selected rect.border, .add-connect, .remote-process-group-uri, .remote-process-group-transmission-secure, .navigation-control.fa, .operation-control.fa, .new-canvas-item.icon, .upload-flow-definition, .lineage-controls.fa, .event circle.context, .nifi-navigation.icon, .listing-table.fa, .listing-table.icon, .context-menu
|
||||
A700: #2cd5d5,//rgba(139, 208, 229, 1),//#aabec7 // .hint-pattern
|
||||
|
||||
// These are the $material-primary-dark-palette PRIMARY AND ACCENT contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors.
|
||||
// Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important
|
||||
// for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc.
|
||||
//
|
||||
// NOTE: Care should be taken here to ensure the values meet accessibility standards.
|
||||
//
|
||||
// NOTE: When creating the Material palette definition mat.define-palette($material-primary-dark-palette, 300);
|
||||
// Since 300, was set as the default the contrast-300 will be used as the default text color.
|
||||
contrast: (
|
||||
50: #ffffff,
|
||||
100: #ffffff,
|
||||
200: #ffffff,
|
||||
300: #ffffff,
|
||||
400: #ffffff,
|
||||
500: #ffffff,
|
||||
600: rgba(black, 0.87),
|
||||
700: rgba(black, 0.87),
|
||||
800: rgba(black, 0.87),
|
||||
900: rgba(black, 0.87),
|
||||
A100: #ffffff,
|
||||
A200: #ffffff,
|
||||
A400: rgba(black, 0.87),
|
||||
A700: rgba(black, 0.87),
|
||||
)
|
||||
);
|
||||
|
||||
// The $nifi-canvas-light-palette defines the PRIMARY palette for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi
|
||||
$nifi-canvas-light-palette: (
|
||||
// mat.define-palette($nifi-canvas-light-palette)
|
||||
@ -111,6 +158,52 @@ $nifi-canvas-light-palette: (
|
||||
)
|
||||
);
|
||||
|
||||
// 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, 0.5), // .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
|
||||
@ -157,6 +250,53 @@ $nifi-canvas-accent-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: (
|
||||
// 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),
|
||||
)
|
||||
);
|
||||
|
||||
// The $warn-light-palette defines the WARN palette both for all Angular Material components used throughout Apache NiFi and for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi
|
||||
$warn-light-palette: (
|
||||
// 50 -> 900 are the PRIMARY colors defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #f64e4c
|
||||
@ -173,7 +313,7 @@ $warn-light-palette: (
|
||||
|
||||
// A100 - A700 are the COMPLEMENTARY colors defined by the PRIMARY colors defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b which is the primary color of the $material-primary-light-palette.
|
||||
// These color are used for label values, stats, timestamps, counts, etc.
|
||||
A100: #b6abaa, //.sync-failure
|
||||
A100: #d0c3c2, //.sync-failure
|
||||
A200: #9c8886, // .operation-context-logo, .funnel-icon, .port-icon, .flowfile-icon
|
||||
A400: #765452, // .value, .refresh-timestamp, .stats-value, .active-thread-count, .process-group-contents-count, .operation-context-id, .selected-type-name
|
||||
A700: #4a3435, // .version-control
|
||||
@ -203,3 +343,50 @@ $warn-light-palette: (
|
||||
A700: #ffffff,
|
||||
)
|
||||
);
|
||||
|
||||
// The $warn-dark-palette defines the WARN palette both for all Angular Material components used throughout Apache NiFi and for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi
|
||||
$warn-dark-palette: (
|
||||
// 50 -> 900 are the PRIMARY colors defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #f64e4c
|
||||
50: #ffebee,
|
||||
100: #ffccd2, // "lighter" hue for this palette. Also .banner-error
|
||||
200: #f49999, //.stopped
|
||||
300: #eb7071, //.stale
|
||||
400: #f64e4c, // color="primary" Default hue for this palette. Also .unauthorized, .bulletin-background, .restricted, .connection-path.full, .connection-path.unauthorized, .backpressure-percent.error, .controller-bulletins.has-bulletins, .link.selected, circle.selected, .listing-message, .fa-shield
|
||||
500: #fa3b30,
|
||||
600: #ec3030, //.bulletin-error
|
||||
700: #ff1507, // "darker" hue for this palette
|
||||
800: #ff0000, //.connector, .startpoint
|
||||
900: #f10000,
|
||||
|
||||
// A100 - A700 are the COMPLEMENTARY colors defined by the PRIMARY colors defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b which is the primary color of the $material-primary-dark-palette.
|
||||
// These color are used for label values, stats, timestamps, counts, etc.
|
||||
A100: #ab777a, //.sync-failure
|
||||
A200: #b98481, // .operation-context-logo, .funnel-icon, .port-icon, .flowfile-icon
|
||||
A400: #d5bab7, // .value, .refresh-timestamp, .stats-value, .active-thread-count, .process-group-contents-count, .operation-context-id, .selected-type-name
|
||||
A700: #b6abaa, // .version-control
|
||||
|
||||
// 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),
|
||||
)
|
||||
);
|
||||
|
||||
@ -36,10 +36,10 @@ $material-primary-light-palette: (
|
||||
|
||||
// A100 -> A700 are the ACCENT color (mat.define-palette($material-primary-light-palette, A400, A100, A700);). These color are the ANALOGOUS (or possibly the TRIADIC??) colors as defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b
|
||||
// These colors are also used by some custom canvas components that display the ANALOGOUS color for things like buttons, links, borders, info, etc.
|
||||
A100: #c8cbe2, // .zero
|
||||
A200: #a5a9ce, // .enabled, .transmitting, .load-balance-icon-active
|
||||
A400: #6a6eab, // 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(68, 67, 136, 1), // .hint-pattern
|
||||
A100: #aabec7, // .zero
|
||||
A200: #44a3cf, // .enabled, .transmitting, .load-balance-icon-active
|
||||
A400: #004849, // a, a:hover, button.nifi-button, button.nifi-button:hover, .add-tenant-to-policy-form.fa, .component.selected rect.border, .add-connect, .remote-process-group-uri, .remote-process-group-transmission-secure, .navigation-control.fa, .operation-control.fa, .new-canvas-item.icon, .upload-flow-definition, .lineage-controls.fa, .event circle.context, .nifi-navigation.icon, .listing-table.fa, .listing-table.icon, .context-menu
|
||||
A700: rgba(20, 145, 193, 0.12), // .hint-pattern
|
||||
|
||||
// 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
|
||||
@ -67,6 +67,53 @@ $material-primary-light-palette: (
|
||||
)
|
||||
);
|
||||
|
||||
// The $material-primary-dark-palette define the PRIMARY AND ACCENT palettes for all Angular Material components used throughout Apache NiFi
|
||||
$material-primary-dark-palette: (
|
||||
// 50 -> 900 are the PRIMARY colors (mat.define-palette($material-primary-dark-palette, 300);) defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b
|
||||
50: rgba(69, 47, 101, 1), // .context-menu
|
||||
100: rgba(93, 57, 123, 1), // "lighter" hue for this palette. Also .global-menu:hover, .navigation-control-header:hover, .operation-control-header:hover, .new-canvas-item.icon.hovering, table tr:hover, .CodeMirror.blank, .remote-banner, .process-group-details-banner, .process-group-details-banner, remote-process-group-details-banner, .remote-process-group-last-refresh-rect,
|
||||
200: #6b3f86, // .processor-stats-border, .process-group-stats-border, .context-menu-item:hover, .process-group-banner, .remote-process-group-banner, .a, button.nifi-button, button.nifi-button:disabled
|
||||
300: #7b4690, // .breadcrumb-container, .navigation-control, .operation-control, .flow-status, .controller-bulletins, .component-button-grip, .search-container, .nifi-navigation, .CodeMirror.blank
|
||||
400: #874b98, // Default hue for this palette (color="primary").
|
||||
500: #985fa7, // .disabled, .not-transmitting, .splash, .access-policies-header, .operation-context-type, .bulletin-board-header, .counter-header, .stats-info, .active-thread-count-icon, .processor-type, .port-transmission-icon, .operation-context-type, .flow-status.fa, .flow-status.icon, .controller-bulletins, .prioritizers-list, .controller-services-header, .login-title, .parameter-context-header, .parameter-context-inheritance-list, .provenance-header, .flowfile-header, .queue-listing-header, .settings-header, .summary-header, .user-header, table th, button.global-menu-item.fa, button.global-menu-item.icon, .event-header, .section-header,
|
||||
600: #aa79b7, // .breadcrumb-container, .birdseye-brush
|
||||
700: #d3bada, // "darker" hue for this palette. Also #status-history-chart-container text, #status-history-chart-control-container text
|
||||
800: #dac3e0,
|
||||
900: #f0e7f2,
|
||||
|
||||
// A100 -> A700 are the ACCENT color (mat.define-palette($material-primary-dark-palette, A400, A100, A700);). These color are the ANALOGOUS (or possibly the TRIADIC??) colors as defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b
|
||||
// These colors are also used by some custom canvas components that display the ANALOGOUS color for things like buttons, links, borders, info, etc.
|
||||
A100: #2cd5d5, // .zero
|
||||
A200: #009b9d, // .enabled, .transmitting, .load-balance-icon-active
|
||||
A400: #44a3cf, // a, a:hover, button.nifi-button, button.nifi-button:hover, .add-tenant-to-policy-form.fa, .component.selected rect.border, .add-connect, .remote-process-group-uri, .remote-process-group-transmission-secure, .navigation-control.fa, .operation-control.fa, .new-canvas-item.icon, .upload-flow-definition, .lineage-controls.fa, .event circle.context, .nifi-navigation.icon, .listing-table.fa, .listing-table.icon, .context-menu
|
||||
A700: rgba(139, 208, 229, 1),//#aabec7 // .hint-pattern
|
||||
|
||||
// These are the $material-primary-dark-palette PRIMARY AND ACCENT contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors.
|
||||
// Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important
|
||||
// for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc.
|
||||
//
|
||||
// NOTE: Care should be taken here to ensure the values meet accessibility standards.
|
||||
//
|
||||
// NOTE: When creating the Material palette definition mat.define-palette($material-primary-dark-palette, 300);
|
||||
// Since 300, was set as the default the contrast-300 will be used as the default text color.
|
||||
contrast: (
|
||||
50: #ffffff,
|
||||
100: #ffffff,
|
||||
200: #ffffff,
|
||||
300: #ffffff,
|
||||
400: #ffffff,
|
||||
500: #ffffff,
|
||||
600: rgba(black, 0.87),
|
||||
700: rgba(black, 0.87),
|
||||
800: rgba(black, 0.87),
|
||||
900: rgba(black, 0.87),
|
||||
A100: #ffffff,
|
||||
A200: #ffffff,
|
||||
A400: rgba(black, 0.87),
|
||||
A700: rgba(black, 0.87),
|
||||
)
|
||||
);
|
||||
|
||||
// The $nifi-canvas-light-palette defines the PRIMARY palette for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi
|
||||
$nifi-canvas-light-palette: (
|
||||
// mat.define-palette($nifi-canvas-light-palette)
|
||||
@ -113,6 +160,52 @@ $nifi-canvas-light-palette: (
|
||||
)
|
||||
);
|
||||
|
||||
// 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, 0.5), // .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
|
||||
@ -159,6 +252,52 @@ $nifi-canvas-accent-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: (
|
||||
// 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
|
||||
$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
|
||||
@ -205,3 +344,50 @@ $warn-light-palette: (
|
||||
A700: #ffffff,
|
||||
)
|
||||
);
|
||||
|
||||
// The $warn-dark-palette defines the WARN palette both for all Angular Material components used throughout Apache NiFi and for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi
|
||||
$warn-dark-palette: (
|
||||
// 50 -> 900 are the PRIMARY colors defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #f64e4c
|
||||
50: #f10000,
|
||||
100: #ff0000, // "lighter" hue for this palette. Also .banner-error
|
||||
200: #ff1507, //.stopped
|
||||
300: #ec3030, //.stale
|
||||
400: #fa3b30, // color="primary" Default hue for this palette. Also .unauthorized, .bulletin-background, .restricted, .connection-path.full, .connection-path.unauthorized, .backpressure-percent.error, .controller-bulletins.has-bulletins, .link.selected, circle.selected, .listing-message, .fa-shield
|
||||
500: #f64e4c,
|
||||
600: #eb7071, //.bulletin-error
|
||||
700: #f49999, // "darker" hue for this palette
|
||||
800: #ffccd2, //.connector, .startpoint
|
||||
900: #ffebee,
|
||||
|
||||
// A100 - A700 are the COMPLEMENTARY colors defined by the PRIMARY colors defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors for primary color #728e9b which is the primary color of the $material-primary-dark-palette.
|
||||
// These color are used for label values, stats, timestamps, counts, etc.
|
||||
A100: #8e77ab, //.sync-failure
|
||||
A200: #9a81b9, // .operation-context-logo, .funnel-icon, .port-icon, .flowfile-icon
|
||||
A400: #c5b7d5, // .value, .refresh-timestamp, .stats-value, .active-thread-count, .process-group-contents-count, .operation-context-id, .selected-type-name
|
||||
A700: #afaab6, // .version-control
|
||||
|
||||
// These are the $nifi-canvas-accent-dark-palette PRIMARY palette contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors.
|
||||
// Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important
|
||||
// for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc.
|
||||
//
|
||||
// NOTE: Care should be taken here to ensure the values meet accessibility standards.
|
||||
//
|
||||
// NOTE: When creating the Material palette definition mat.define-palette($warn-dark-palette, 400, 100, 700);
|
||||
// Since 400 is the default the contrast-400 will be used as the default text color in some cases.
|
||||
contrast: (
|
||||
50: #ffffff,
|
||||
100: #ffffff,
|
||||
200: #ffffff,
|
||||
300: #ffffff,
|
||||
400: #ffffff,
|
||||
500: rgba(black, 0.87),
|
||||
600: rgba(black, 0.87),
|
||||
700: rgba(black, 0.87),
|
||||
800: rgba(black, 0.87),
|
||||
900: rgba(black, 0.87),
|
||||
A100: #ffffff,
|
||||
A200: #ffffff,
|
||||
A400: rgba(black, 0.87),
|
||||
A700: rgba(black, 0.87),
|
||||
)
|
||||
);
|
||||
|
||||
@ -22,41 +22,31 @@
|
||||
@use 'assets/styles/listing-table-theme' as listing-table;
|
||||
@use 'app/app.component-theme' as app-component;
|
||||
@use 'app/pages/access-policies/feature/access-policies.component-theme' as access-policies;
|
||||
@use 'app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/add-tenant-to-policy-dialog.component-theme' as
|
||||
add-tenant-to-policy;
|
||||
@use 'app/pages/access-policies/ui/component-access-policies/component-access-policies.component-theme' as
|
||||
component-access-policies;
|
||||
@use 'app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/add-tenant-to-policy-dialog.component-theme' as add-tenant-to-policy;
|
||||
@use 'app/pages/access-policies/ui/component-access-policies/component-access-policies.component-theme' as component-access-policies;
|
||||
@use 'app/pages/bulletins/feature/bulletins.component-theme' as bulletins;
|
||||
@use 'app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component-theme' as
|
||||
bulletin-board-list;
|
||||
@use 'app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component-theme' as bulletin-board-list;
|
||||
@use 'app/pages/counters/feature/counters.component-theme' as counters;
|
||||
@use 'app/pages/flow-designer/ui/canvas/canvas.component-theme' as canvas;
|
||||
@use 'app/pages/flow-designer/ui/canvas/footer/footer.component-theme' as footer;
|
||||
@use 'app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component-theme' as
|
||||
navigation-control;
|
||||
@use 'app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/birdseye.component-theme' as
|
||||
birdseye-control;
|
||||
@use 'app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component-theme' as
|
||||
operation-control;
|
||||
@use 'app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/navigation-control.component-theme' as navigation-control;
|
||||
@use 'app/pages/flow-designer/ui/canvas/graph-controls/navigation-control/birdseye/birdseye.component-theme' as birdseye-control;
|
||||
@use 'app/pages/flow-designer/ui/canvas/graph-controls/operation-control/operation-control.component-theme' as operation-control;
|
||||
@use 'app/pages/flow-designer/ui/canvas/header/flow-status/flow-status.component-theme' as flow-status;
|
||||
@use 'app/pages/flow-designer/ui/canvas/header/header.component-theme' as header;
|
||||
@use 'app/pages/flow-designer/ui/canvas/header/new-canvas-item/new-canvas-item.component-theme' as new-canvas-item;
|
||||
@use 'app/pages/flow-designer/ui/canvas/header/search/search.component-theme' as search;
|
||||
@use 'app/pages/flow-designer/ui/canvas/items/connection/prioritizers/prioritizers.component-theme' as prioritizers;
|
||||
@use 'app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/create-process-group.component-theme'
|
||||
as create-process-group;
|
||||
@use 'app/pages/flow-designer/ui/canvas/items/process-group/create-process-group/create-process-group.component-theme' as create-process-group;
|
||||
@use 'app/pages/flow-designer/ui/common/banner/banner.component-theme' as banner;
|
||||
@use 'app/pages/flow-designer/ui/controller-service/controller-services.component-theme' as controller-service;
|
||||
@use 'app/pages/login/feature/login.component-theme' as login;
|
||||
@use 'app/pages/login/ui/login-form/login-form.component-theme' as login-form;
|
||||
@use 'app/pages/provenance/feature/provenance.component-theme' as provenance;
|
||||
@use 'app/pages/provenance/ui/provenance-event-listing/provenance-event-table/provenance-event-table.component-theme' as
|
||||
provenance-event-table;
|
||||
@use 'app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/lineage.component-theme' as
|
||||
lineage;
|
||||
@use 'app/pages/provenance/ui/provenance-event-listing/provenance-event-table/provenance-event-table.component-theme' as provenance-event-table;
|
||||
@use 'app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/lineage.component-theme' as lineage;
|
||||
@use 'app/pages/parameter-contexts/feature/parameter-contexts.component-theme' as parameter-contexts;
|
||||
@use 'app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component-theme'
|
||||
as parameter-context-inheritance;
|
||||
@use 'app/pages/parameter-contexts/ui/parameter-context-listing/parameter-context-inheritance/parameter-context-inheritance.component-theme' as parameter-context-inheritance;
|
||||
@use 'app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component-theme' as flowfile-dialog;
|
||||
@use 'app/pages/queue/ui/queue-listing/flowfile-table/flowfile-table.component-theme' as flowfile-table;
|
||||
@use 'app/pages/settings/feature/settings.component-theme' as settings;
|
||||
@ -180,7 +170,7 @@ $appFontPath: '~roboto-fontface/fonts';
|
||||
@tailwind utilities;
|
||||
|
||||
//General status styles. TODO - Reconsider this... separating canvas/style styles from html styles...
|
||||
@mixin theme($material-theme, $canvas-theme) {
|
||||
@mixin nifi-colors($material-theme, $canvas-theme) {
|
||||
// Get the color config from the theme.
|
||||
$color-config: mat.get-color-config($material-theme);
|
||||
$canvas-color-config: mat.get-color-config($canvas-theme);
|
||||
@ -210,109 +200,25 @@ $appFontPath: '~roboto-fontface/fonts';
|
||||
$warn-palette-A100: mat.get-color-from-palette($warn-palette, 'A100');
|
||||
$warn-palette-A400: mat.get-color-from-palette($warn-palette, 'A400');
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Roboto, 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
color: $primary-palette-A400;
|
||||
font-weight: normal;
|
||||
display: inline-block;
|
||||
font-family: Roboto;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: $primary-palette-200;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration-color: $primary-palette-A400;
|
||||
}
|
||||
|
||||
//Icon for styling mat-icon in forms throughout the application.
|
||||
.info-icon {
|
||||
font-size: 14px;
|
||||
height: 14px !important;
|
||||
width: 14px !important;
|
||||
}
|
||||
|
||||
//This style is needed due to an incompatibility between material and tailwind.
|
||||
.mdc-notched-outline__notch {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.small-dialog {
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
.medium-dialog {
|
||||
min-width: 470px;
|
||||
}
|
||||
|
||||
.medium-short-dialog {
|
||||
max-height: 32%;
|
||||
max-width: 34%;
|
||||
min-height: 250px;
|
||||
min-width: 440px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.large-dialog {
|
||||
max-height: 72%;
|
||||
max-width: 55%;
|
||||
min-height: 560px;
|
||||
min-width: 760px;
|
||||
}
|
||||
|
||||
.edit-parameter-context-dialog {
|
||||
max-height: 72%;
|
||||
max-width: 55%;
|
||||
min-width: 850px;
|
||||
min-height: 575px;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: fixed;
|
||||
max-width: 500px;
|
||||
padding: 10px;
|
||||
background-color: $canvas-primary-palette-900;
|
||||
border-radius: 2px;
|
||||
border-width: 1px;
|
||||
border-color: $canvas-primary-palette-200;
|
||||
box-shadow: 0 2px 5px $canvas-primary-palette-50;
|
||||
font-size: 13px;
|
||||
font-family: Roboto;
|
||||
font-weight: 400;
|
||||
word-wrap: break-word;
|
||||
white-space: normal;
|
||||
color: $canvas-primary-palette-200;
|
||||
z-index: 1;
|
||||
|
||||
ul {
|
||||
list-style: disc outside;
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.property-editor {
|
||||
background-color: $canvas-primary-palette-900;
|
||||
box-shadow: 0 2px 5px $canvas-primary-palette-50;
|
||||
font-size: 13px;
|
||||
font-family: Roboto;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.CodeMirror-hints {
|
||||
font-size: 13px !important;
|
||||
z-index: 1000 !important;
|
||||
overflow-y: scroll !important;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
@ -393,21 +299,16 @@ $appFontPath: '~roboto-fontface/fonts';
|
||||
.blank,
|
||||
.unset,
|
||||
.sensitive {
|
||||
font-weight: normal !important;
|
||||
color: $canvas-primary-palette-400 !important;
|
||||
}
|
||||
|
||||
button.nifi-button {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
line-height: 28px;
|
||||
border: 1px solid $primary-palette-200;
|
||||
background-color: $primary-palette-50;
|
||||
color: $primary-palette-A400;
|
||||
}
|
||||
|
||||
button.nifi-button:hover {
|
||||
cursor: pointer;
|
||||
border-color: $primary-palette-A400;
|
||||
}
|
||||
|
||||
@ -424,6 +325,126 @@ $appFontPath: '~roboto-fontface/fonts';
|
||||
}
|
||||
}
|
||||
|
||||
.value,
|
||||
.refresh-timestamp {
|
||||
color: $warn-palette-A400;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin nifi-styles() {
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Roboto, 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
font-weight: normal;
|
||||
display: inline-block;
|
||||
font-family: Roboto;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
//Icon for styling mat-icon in forms throughout the application.
|
||||
.info-icon {
|
||||
font-size: 14px;
|
||||
height: 14px !important;
|
||||
width: 14px !important;
|
||||
}
|
||||
|
||||
//This style is needed due to an incompatibility between material and tailwind.
|
||||
.mdc-notched-outline__notch {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.small-dialog {
|
||||
min-width: 320px;
|
||||
}
|
||||
|
||||
.medium-dialog {
|
||||
min-width: 470px;
|
||||
}
|
||||
|
||||
.medium-short-dialog {
|
||||
max-height: 32%;
|
||||
max-width: 34%;
|
||||
min-height: 250px;
|
||||
min-width: 440px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.large-dialog {
|
||||
max-height: 72%;
|
||||
max-width: 55%;
|
||||
min-height: 560px;
|
||||
min-width: 760px;
|
||||
}
|
||||
|
||||
.edit-parameter-context-dialog {
|
||||
max-height: 72%;
|
||||
max-width: 55%;
|
||||
min-width: 850px;
|
||||
min-height: 575px;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: fixed;
|
||||
max-width: 500px;
|
||||
padding: 10px;
|
||||
border-radius: 2px;
|
||||
border-width: 1px;
|
||||
font-size: 13px;
|
||||
font-family: Roboto;
|
||||
font-weight: 400;
|
||||
word-wrap: break-word;
|
||||
white-space: normal;
|
||||
z-index: 1;
|
||||
|
||||
ul {
|
||||
list-style: disc outside;
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.property-editor {
|
||||
font-size: 13px;
|
||||
font-family: Roboto;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.CodeMirror-hints {
|
||||
font-size: 13px !important;
|
||||
z-index: 1000 !important;
|
||||
overflow-y: scroll !important;
|
||||
}
|
||||
|
||||
.blank,
|
||||
.unset,
|
||||
.sensitive {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
||||
button.nifi-button {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
button.nifi-button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button.nifi-button:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -431,12 +452,11 @@ $appFontPath: '~roboto-fontface/fonts';
|
||||
.value,
|
||||
.refresh-timestamp {
|
||||
font-weight: 500;
|
||||
color: $warn-palette-A400;
|
||||
}
|
||||
}
|
||||
|
||||
// Define the palettes for your theme
|
||||
$material-primary-light: mat.define-palette($material-primary-light-palette, 300);
|
||||
$material-primary-light: mat.define-palette($material-primary-light-palette);
|
||||
$material-accent-light: mat.define-palette($material-primary-light-palette, A400, A100, A700);
|
||||
$nifi-canvas-primary-light: mat.define-palette($nifi-canvas-light-palette);
|
||||
$nifi-canvas-accent-light: mat.define-palette($nifi-canvas-accent-light-palette, 400, 100, 700);
|
||||
@ -467,47 +487,132 @@ $nifi-canvas-theme-light: mat.define-light-theme(
|
||||
)
|
||||
);
|
||||
|
||||
// only include this once (not needed for dark mode)
|
||||
@include nifi-styles();
|
||||
|
||||
// generate light mode nifi stylesheets
|
||||
@include mat.all-component-themes($material-theme-light);
|
||||
@include app-component.theme($material-theme-light);
|
||||
@include theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include listing-table.theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include access-policies.theme($material-theme-light);
|
||||
@include add-tenant-to-policy.theme($material-theme-light);
|
||||
@include component-access-policies.theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include bulletins.theme($material-theme-light);
|
||||
@include bulletin-board-list.theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include counters.theme($material-theme-light);
|
||||
@include canvas.theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include banner.theme($material-theme-light);
|
||||
@include controller-service.theme($material-theme-light);
|
||||
@include footer.theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include navigation-control.theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include birdseye-control.theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include operation-control.theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include flow-status.theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include header.theme($nifi-canvas-theme-light);
|
||||
@include new-canvas-item.theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include search.theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include prioritizers.theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include create-process-group.theme($material-theme-light);
|
||||
@include login.theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include login-form.theme($material-theme-light);
|
||||
@include provenance-event-table.theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include provenance.theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include lineage.theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include parameter-context-inheritance.theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include parameter-contexts.theme($material-theme-light);
|
||||
@include flowfile-dialog.theme($material-theme-light);
|
||||
@include flowfile-table.theme($material-theme-light);
|
||||
@include settings.theme($material-theme-light);
|
||||
@include summary.theme($material-theme-light);
|
||||
@include users.theme($material-theme-light);
|
||||
@include context-menu.theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include extension-creation.theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include navigation.theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include nf-editor.theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include resizable.theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include system-diagnostics-dialog.theme($material-theme-light);
|
||||
@include status-history.theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include property-hint-tip.theme($material-theme-light);
|
||||
@include provenance-event-dialog.theme($material-theme-light);
|
||||
@include app-component.nifi-theme($material-theme-light);
|
||||
@include nifi-colors($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include listing-table.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include access-policies.nifi-theme($material-theme-light);
|
||||
@include add-tenant-to-policy.nifi-theme($material-theme-light);
|
||||
@include component-access-policies.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include bulletins.nifi-theme($material-theme-light);
|
||||
@include bulletin-board-list.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include counters.nifi-theme($material-theme-light);
|
||||
@include canvas.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include banner.nifi-theme($material-theme-light);
|
||||
@include controller-service.nifi-theme($material-theme-light);
|
||||
@include footer.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include navigation-control.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include birdseye-control.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include operation-control.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include flow-status.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include header.nifi-theme($nifi-canvas-theme-light);
|
||||
@include new-canvas-item.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include search.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include prioritizers.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include create-process-group.nifi-theme($material-theme-light);
|
||||
@include login.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include login-form.nifi-theme($material-theme-light);
|
||||
@include provenance-event-table.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include provenance.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include lineage.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include parameter-context-inheritance.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include parameter-contexts.nifi-theme($material-theme-light);
|
||||
@include flowfile-dialog.nifi-theme($material-theme-light);
|
||||
@include flowfile-table.nifi-theme($material-theme-light);
|
||||
@include settings.nifi-theme($material-theme-light);
|
||||
@include summary.nifi-theme($material-theme-light);
|
||||
@include users.nifi-theme($material-theme-light);
|
||||
@include context-menu.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include extension-creation.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include navigation.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include nf-editor.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include resizable.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include system-diagnostics-dialog.nifi-theme($material-theme-light);
|
||||
@include status-history.nifi-theme($material-theme-light, $nifi-canvas-theme-light);
|
||||
@include property-hint-tip.nifi-theme($material-theme-light);
|
||||
@include provenance-event-dialog.nifi-theme($material-theme-light);
|
||||
|
||||
.dark-theme {
|
||||
// Create the color palettes used in our dark theme.
|
||||
$material-primary-dark: mat.define-palette($material-primary-dark-palette);
|
||||
$material-accent-dark: mat.define-palette($material-primary-dark-palette, A400, A100, A700);
|
||||
$nifi-canvas-primary-dark: mat.define-palette($nifi-canvas-dark-palette);
|
||||
$nifi-canvas-accent-dark: mat.define-palette($nifi-canvas-accent-dark-palette);
|
||||
$warn-dark: mat.define-palette($warn-dark-palette, 600, 200, 800);
|
||||
|
||||
$material-theme-dark: mat.define-dark-theme(
|
||||
(
|
||||
color: (
|
||||
primary: $material-primary-dark,
|
||||
accent: $material-accent-dark,
|
||||
warn: $warn-dark
|
||||
),
|
||||
density: 0,
|
||||
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
|
||||
)
|
||||
);
|
||||
|
||||
// Include the dark theme color styles.
|
||||
@include mat.all-component-colors($material-theme-dark);
|
||||
|
||||
// generate dark mode nifi stylesheets
|
||||
@include app-component.nifi-theme($material-theme-dark);
|
||||
@include nifi-colors($material-theme-dark, $nifi-canvas-theme-dark);
|
||||
@include listing-table.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
|
||||
@include access-policies.nifi-theme($material-theme-dark);
|
||||
@include add-tenant-to-policy.nifi-theme($material-theme-dark);
|
||||
@include component-access-policies.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
|
||||
@include bulletins.nifi-theme($material-theme-dark);
|
||||
@include bulletin-board-list.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
|
||||
@include counters.nifi-theme($material-theme-dark);
|
||||
@include canvas.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
|
||||
@include banner.nifi-theme($material-theme-dark);
|
||||
@include controller-service.nifi-theme($material-theme-dark);
|
||||
@include footer.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
|
||||
@include navigation-control.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
|
||||
@include birdseye-control.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
|
||||
@include operation-control.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
|
||||
@include flow-status.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
|
||||
@include header.nifi-theme($nifi-canvas-theme-dark);
|
||||
@include new-canvas-item.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
|
||||
@include search.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
|
||||
@include prioritizers.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
|
||||
@include create-process-group.nifi-theme($material-theme-dark);
|
||||
@include login.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
|
||||
@include login-form.nifi-theme($material-theme-dark);
|
||||
@include provenance-event-table.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
|
||||
@include provenance.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
|
||||
@include lineage.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
|
||||
@include parameter-context-inheritance.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
|
||||
@include parameter-contexts.nifi-theme($material-theme-dark);
|
||||
@include flowfile-dialog.nifi-theme($material-theme-dark);
|
||||
@include flowfile-table.nifi-theme($material-theme-dark);
|
||||
@include settings.nifi-theme($material-theme-dark);
|
||||
@include summary.nifi-theme($material-theme-dark);
|
||||
@include users.nifi-theme($material-theme-dark);
|
||||
@include context-menu.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
|
||||
@include extension-creation.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
|
||||
@include navigation.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
|
||||
@include nf-editor.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
|
||||
@include resizable.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
|
||||
@include system-diagnostics-dialog.nifi-theme($material-theme-dark);
|
||||
@include status-history.nifi-theme($material-theme-dark, $nifi-canvas-theme-dark);
|
||||
@include property-hint-tip.nifi-theme($material-theme-dark);
|
||||
@include provenance-event-dialog.nifi-theme($material-theme-dark);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user