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

[NIFI-13360] rename nifi theme to supplemental theme (#8926) 

* [NIFI-13360] rename nifi theme to supplemental theme

* Update nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/assets/styles/_app.scss

Co-authored-by: Rob Fellows <rob.fellows@gmail.com>

* Update nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/assets/styles/_app.scss

Co-authored-by: Rob Fellows <rob.fellows@gmail.com>

---------

Co-authored-by: Rob Fellows <rob.fellows@gmail.com>

This closes #8926
This commit is contained in:
Scott Aslan 2024-06-04 16:00:53 -05:00 committed by GitHub
parent a9c01903ee
commit 21f0ca47b0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
25 changed files with 476 additions and 314 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,18 +18,18 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $nifi-theme) {
@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.get-color-config($material-theme);
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
$supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
// Get the palettes from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
$material-theme-accent-palette: map.get($material-theme-color-config, 'accent');
$material-theme-warn-palette: map.get($material-theme-color-config, 'warn');
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
$nifi-theme-success-palette: map.get($nifi-theme-color-config, 'accent');
$nifi-theme-caution-palette: map.get($nifi-theme-color-config, 'warn');
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
$supplemental-theme-success-palette: map.get($supplemental-theme-color-config, 'accent');
$supplemental-theme-caution-palette: map.get($supplemental-theme-color-config, 'warn');
// Get hues from palette
$material-theme-primary-palette-darker: mat.get-color-from-palette($material-theme-primary-palette, darker);
@ -38,49 +38,62 @@
$material-theme-accent-palette-default: mat.get-color-from-palette($material-theme-accent-palette, default);
// Canvas colors
$nifi-theme-surface-palette-default: mat.get-color-from-palette($nifi-theme-surface-palette, default);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$nifi-theme-success-palette-lighter: mat.get-color-from-palette($nifi-theme-success-palette, lighter);
$nifi-theme-success-palette-50: mat.get-color-from-palette($nifi-theme-success-palette, 50);
$nifi-theme-success-palette-900: mat.get-color-from-palette($nifi-theme-success-palette, 900);
$supplemental-theme-surface-palette-default: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
default
);
$supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
);
$supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
$supplemental-theme-success-palette-lighter: mat.get-color-from-palette(
$supplemental-theme-success-palette,
lighter
);
$supplemental-theme-success-palette-50: mat.get-color-from-palette($supplemental-theme-success-palette, 50);
$supplemental-theme-success-palette-900: mat.get-color-from-palette($supplemental-theme-success-palette, 900);
$material-theme-warn-palette-darker: mat.get-color-from-palette($material-theme-warn-palette, darker);
$nifi-theme-caution-palette-darker: mat.get-color-from-palette($nifi-theme-caution-palette, darker);
$supplemental-theme-caution-palette-darker: mat.get-color-from-palette($supplemental-theme-caution-palette, darker);
// Shadows should always be darker. We explicitly set this so the SVG shadows are correct in both modes.
$is-dark: map-get($nifi-theme-color-config, is-dark);
$is-dark: map-get($supplemental-theme-color-config, is-dark);
$drop-shadow-color: black;
$connection-drop-shadow-color: if($is-dark, black, white);
$nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
$nifi-theme-surface-palette,
$supplemental-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
darker-contrast
);
$nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
$nifi-theme-surface-palette,
$supplemental-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
lighter-contrast
);
$surface-contrast: if(
$is-dark,
$nifi-theme-surface-palette-darker-contrast,
$nifi-theme-surface-palette-lighter-contrast
$supplemental-theme-surface-palette-darker-contrast,
$supplemental-theme-surface-palette-lighter-contrast
);
$alternate-surface: if(
$is-dark,
rgba($nifi-theme-surface-palette-darker-contrast, 0.28),
rgba($nifi-theme-surface-palette-lighter-contrast, 0.2)
rgba($supplemental-theme-surface-palette-darker-contrast, 0.28),
rgba($supplemental-theme-surface-palette-lighter-contrast, 0.2)
);
.canvas-background {
background-color: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
background-color: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
);
background-image: linear-gradient(
to right,
if($is-dark, $nifi-theme-success-palette-900, $nifi-theme-success-palette-50) 1px,
if($is-dark, $supplemental-theme-success-palette-900, $supplemental-theme-success-palette-50) 1px,
transparent 1px
),
linear-gradient(
to bottom,
if($is-dark, $nifi-theme-success-palette-900, $nifi-theme-success-palette-50) 1px,
if($is-dark, $supplemental-theme-success-palette-900, $supplemental-theme-success-palette-50) 1px,
transparent 1px
);
}
@ -101,19 +114,25 @@
}
g.component rect.body {
fill: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
}
rect.banner {
fill: rgba(if($is-dark, $nifi-theme-surface-palette-lighter, $nifi-theme-surface-palette-darker), 0.08);
fill: rgba(
if($is-dark, $supplemental-theme-surface-palette-lighter, $supplemental-theme-surface-palette-darker),
0.08
);
}
rect.odd {
fill: rgba(if($is-dark, $nifi-theme-surface-palette-lighter, $nifi-theme-surface-palette-darker), 0.025);
fill: rgba(
if($is-dark, $supplemental-theme-surface-palette-lighter, $supplemental-theme-surface-palette-darker),
0.025
);
}
rect.even {
fill: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
}
rect.row-border {
@ -121,7 +140,7 @@
}
g.component rect.body.unauthorized {
fill: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
}
g.component rect.border,
@ -139,11 +158,11 @@
}
g.component rect.border.ghost {
stroke: $nifi-theme-surface-palette-default !important;
stroke: $supplemental-theme-surface-palette-default !important;
}
g.component rect.processor-icon-container.unauthorized {
fill: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
}
g.component.selected rect.border {
@ -166,8 +185,8 @@
text.bulletin-icon {
fill: if(
$is-dark,
$nifi-theme-surface-palette-lighter-contrast,
$nifi-theme-surface-palette-darker-contrast
$supplemental-theme-surface-palette-lighter-contrast,
$supplemental-theme-surface-palette-darker-contrast
);
}
@ -211,7 +230,7 @@
}
rect.processor-read-write-stats {
fill: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
}
rect.processor-stats-border {
@ -221,8 +240,8 @@
text.processor-name {
fill: if(
$is-dark,
$nifi-theme-surface-palette-darker-contrast,
$nifi-theme-surface-palette-lighter-contrast
$supplemental-theme-surface-palette-darker-contrast,
$supplemental-theme-surface-palette-lighter-contrast
);
}
@ -231,24 +250,28 @@
}
circle.is-primary-background {
stroke: if($is-dark, $nifi-theme-surface-palette-lighter, $nifi-theme-surface-palette-darker);
fill: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
stroke: if(
$is-dark,
$supplemental-theme-surface-palette-lighter,
$supplemental-theme-surface-palette-darker
);
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
}
text.is-primary {
fill: if($is-dark, $nifi-theme-surface-palette-lighter, $nifi-theme-surface-palette-darker);
fill: if($is-dark, $supplemental-theme-surface-palette-lighter, $supplemental-theme-surface-palette-darker);
}
text.processor-bundle {
fill: $nifi-theme-surface-palette-default;
fill: $supplemental-theme-surface-palette-default;
}
rect.processor-icon-container {
fill: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
}
circle.restricted-background {
fill: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
}
text.restricted {
@ -267,11 +290,11 @@
}
g.connection rect.body {
fill: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
}
g.connection rect.body.unauthorized {
fill: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
}
g.connection rect.border.unauthorized {
@ -283,7 +306,7 @@
}
g.connection.selected rect.border {
stroke: $nifi-theme-caution-palette-darker;
stroke: $supplemental-theme-caution-palette-darker;
}
path.connector {
@ -298,7 +321,12 @@
fill: none;
stroke: $surface-contrast;
filter: drop-shadow(
0 3px 6px if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter)
0 3px 6px
if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
)
);
}
@ -316,7 +344,7 @@
g.connection rect.backpressure-tick.data-size-prediction.prediction-down,
g.connection rect.backpressure-tick.object-prediction.prediction-down {
fill: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
}
g.connection rect.backpressure-tick.data-size-prediction,
@ -332,7 +360,7 @@
}
g.connection rect.backpressure-tick.not-configured {
fill: $nifi-theme-surface-palette-default;
fill: $supplemental-theme-surface-palette-default;
}
g.connection rect.backpressure-object,
@ -346,11 +374,11 @@
}
g.connection rect.backpressure-percent {
fill: $nifi-theme-success-palette-lighter;
fill: $supplemental-theme-success-palette-lighter;
}
g.connection rect.backpressure-percent.warning {
fill: $nifi-theme-caution-palette-darker;
fill: $supplemental-theme-caution-palette-darker;
}
g.connection rect.backpressure-percent.error {
@ -361,11 +389,11 @@
g.connection.ghost path.connection-path,
g.connection.ghost rect.connection-label {
stroke: $nifi-theme-surface-palette-default;
stroke: $supplemental-theme-surface-palette-default;
}
g.connection path.connection-selection-path {
stroke: $nifi-theme-caution-palette-darker;
stroke: $supplemental-theme-caution-palette-darker;
fill: none;
}
@ -379,8 +407,8 @@
}
g.connection rect.midpoint {
stroke: $nifi-theme-caution-palette-darker;
fill: $nifi-theme-caution-palette-darker;
stroke: $supplemental-theme-caution-palette-darker;
fill: $supplemental-theme-caution-palette-darker;
}
g.connection rect.endpoint {
@ -391,8 +419,8 @@
/* labels */
g.label path.resizable-triangle {
fill: rgba($nifi-theme-surface-palette-lighter-contrast, 0.2);
stroke: rgba($nifi-theme-surface-palette-lighter-contrast, 0.2);
fill: rgba($supplemental-theme-surface-palette-lighter-contrast, 0.2);
stroke: rgba($supplemental-theme-surface-palette-lighter-contrast, 0.2);
}
/* funnels */
@ -414,7 +442,7 @@
/* process groups */
rect.process-group-stats-in-out {
fill: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
}
rect.process-group-stats-border {
@ -454,7 +482,7 @@
}
rect.remote-process-group-received-stats {
fill: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
}
text.remote-process-group-uri {

41
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/flow-designer/ui/canvas/change-color-dialog/_change-color-dialog.component-theme.scss
View File

@ -18,45 +18,56 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($nifi-theme) {
@mixin generate-theme($supplemental-theme) {
// Get the color config from the theme.
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
$supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
$is-dark: map-get($nifi-theme-color-config, is-dark);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$is-dark: map-get($supplemental-theme-color-config, is-dark);
$supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
);
$supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
$nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
$nifi-theme-surface-palette,
$supplemental-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
darker-contrast
);
$nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
$nifi-theme-surface-palette,
$supplemental-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
lighter-contrast
);
$alternate-surface: if(
$is-dark,
rgba($nifi-theme-surface-palette-darker-contrast, 0.28),
rgba($nifi-theme-surface-palette-lighter-contrast, 0.2)
rgba($supplemental-theme-surface-palette-darker-contrast, 0.28),
rgba($supplemental-theme-surface-palette-lighter-contrast, 0.2)
);
.preview {
.processor {
background-color: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
background-color: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
);
}
.odd {
background-color: rgba(
if($is-dark, $nifi-theme-surface-palette-lighter, $nifi-theme-surface-palette-darker),
if($is-dark, $supplemental-theme-surface-palette-lighter, $supplemental-theme-surface-palette-darker),
0.025
);
}
.even {
background-color: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
background-color: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
);
}
.row-border {

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

@ -18,12 +18,12 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($nifi-theme) {
@mixin generate-theme($supplemental-theme) {
// Get the color config from the theme.
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
$supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette

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

@ -18,21 +18,28 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($nifi-theme) {
@mixin generate-theme($supplemental-theme) {
// Get the color config from the theme.
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
$supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($nifi-theme-color-config, is-dark);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
$is-dark: map-get($supplemental-theme-color-config, is-dark);
$supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
$supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
);
div.navigation-control {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
background-color: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
background-color: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
);
.navigation-control-header {
&:hover {

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

@ -18,24 +18,31 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $nifi-theme) {
@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.get-color-config($material-theme);
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
$supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($nifi-theme-color-config, is-dark);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
$is-dark: map-get($supplemental-theme-color-config, is-dark);
$supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
$supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
);
$material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette, default);
$material-theme-primary-palette-lighter: mat.get-color-from-palette($material-theme-primary-palette, lighter);
#birdseye {
background: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
background: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
);
rect.birdseye-brush {
stroke: if($is-dark, $material-theme-primary-palette-default, $material-theme-primary-palette-lighter);

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

@ -18,21 +18,28 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($nifi-theme) {
@mixin generate-theme($supplemental-theme) {
// Get the color config from the theme.
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
$supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($nifi-theme-color-config, is-dark);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
$is-dark: map-get($supplemental-theme-color-config, is-dark);
$supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
$supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
);
div.operation-control {
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
background-color: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
background-color: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
);
.operation-control-header {
&:hover {

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

@ -18,34 +18,41 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $nifi-theme) {
@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.get-color-config($material-theme);
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
$supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
$material-theme-warn-palette: map.get($material-theme-color-config, 'warn');
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($nifi-theme-color-config, is-dark);
$is-dark: map-get($supplemental-theme-color-config, is-dark);
$material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette);
$material-theme-primary-palette-lighter: mat.get-color-from-palette($material-theme-primary-palette, lighter);
$material-theme-warn-palette-darker: mat.get-color-from-palette($material-theme-warn-palette, darker);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
$nifi-theme-surface-palette,
$supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
);
$supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
$supplemental-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
darker-contrast
);
$nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
$nifi-theme-surface-palette,
$supplemental-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
lighter-contrast
);
.flow-status {
background: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
background: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
);
.controller-bulletins {
background-color: if(
@ -58,8 +65,8 @@
// invert the contrast colors since the surface is dark in light mode and light in dark mode
color: if(
$is-dark,
$nifi-theme-surface-palette-lighter-contrast,
$nifi-theme-surface-palette-darker-contrast
$supplemental-theme-surface-palette-lighter-contrast,
$supplemental-theme-surface-palette-darker-contrast
);
}
}

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

@ -18,22 +18,25 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $nifi-theme) {
@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.get-color-config($material-theme);
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
$supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($material-theme-color-config, is-dark);
$material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette);
$material-theme-primary-palette-lighter: mat.get-color-from-palette($material-theme-primary-palette, lighter);
$material-theme-primary-palette-darker: mat.get-color-from-palette($material-theme-primary-palette, darker);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
$supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
$supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
);
$hover: var(--mat-menu-item-hover-state-layer-color);
@ -46,12 +49,19 @@
// 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($hover, $hover),
linear-gradient($nifi-theme-surface-palette-lighter, $nifi-theme-surface-palette-lighter) !important;
linear-gradient(
$supplemental-theme-surface-palette-lighter,
$supplemental-theme-surface-palette-lighter
) !important;
.component-button-grip {
background: repeating-linear-gradient(
90deg,
if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter),
if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
),
$material-theme-primary-palette-default 4px,
transparent 4px,
transparent 6px

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

@ -18,26 +18,37 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($nifi-theme) {
@mixin generate-theme($supplemental-theme) {
// Get the color config from the theme.
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
$supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
// Get the color palettes from the color-config.
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($nifi-theme-color-config, is-dark);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$is-dark: map-get($supplemental-theme-color-config, is-dark);
$supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
);
$supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
.search-container {
&:hover,
&.open {
background-color: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
background-color: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
);
}
.search-input {
background-color: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
background-color: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
);
}
}

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

@ -18,20 +18,27 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $nifi-theme) {
@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
$supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
// Get the color palettes from the color-config.
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($nifi-theme-color-config, is-dark);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
$is-dark: map-get($supplemental-theme-color-config, is-dark);
$supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
$supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
);
.login-background {
background: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter)
background: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
)
url(../../../../assets/icons/bg-error.png) left top no-repeat;
}
}

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

@ -18,39 +18,42 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $nifi-theme) {
@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.get-color-config($material-theme);
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
$supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
$material-theme-accent-palette: map.get($material-theme-color-config, 'accent');
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($material-theme-color-config, is-dark);
$material-theme-primary-palette-darker: mat.get-color-from-palette($material-theme-primary-palette, darker);
$material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette);
$material-theme-accent-palette-default: mat.get-color-from-palette($material-theme-accent-palette, default);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
$nifi-theme-surface-palette,
$supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
);
$supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
$supplemental-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
darker-contrast
);
$nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
$nifi-theme-surface-palette,
$supplemental-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
lighter-contrast
);
$surface-contrast: if(
$is-dark,
$nifi-theme-surface-palette-darker-contrast,
$nifi-theme-surface-palette-lighter-contrast
$supplemental-theme-surface-palette-darker-contrast,
$supplemental-theme-surface-palette-lighter-contrast
);
rect.lineage {
fill: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
}
g.flowfile-icon text {
@ -71,7 +74,7 @@
}
circle.flowfile-link {
fill: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
fill: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
stroke: $surface-contrast;
}
}

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

@ -18,21 +18,28 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($nifi-theme) {
@mixin generate-theme($supplemental-theme) {
// Get the color config from the theme.
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
$supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
// Get the color palettes from the color-config.
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($nifi-theme-color-config, is-dark);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$is-dark: map-get($supplemental-theme-color-config, is-dark);
$supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
);
$supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
.provenance-event-table {
.lineage {
background-color: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
background-color: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
);
}
}
}

8
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/pages/provenance/ui/provenance-event-listing/provenance-event-table/lineage/_lineage.component-theme.scss
View File

@ -18,22 +18,22 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $nifi-theme) {
@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.get-color-config($material-theme);
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
$supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
$material-theme-accent-palette: map.get($material-theme-color-config, 'accent');
$material-theme-warn-palette: map.get($material-theme-color-config, 'warn');
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$material-theme-primary-palette-darker: mat.get-color-from-palette($material-theme-primary-palette, darker);
$material-theme-accent-palette-default: mat.get-color-from-palette($material-theme-accent-palette, default);
$is-dark: map-get($nifi-theme-color-config, is-dark);
$is-dark: map-get($supplemental-theme-color-config, is-dark);
$material-theme-warn-palette-darker: mat.get-color-from-palette($material-theme-warn-palette, darker);
#lineage {

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

@ -18,22 +18,29 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($nifi-theme) {
@mixin generate-theme($supplemental-theme) {
// Get the color config from the theme.
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
$supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
// Get the color palettes from the color-config.
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($nifi-theme-color-config, is-dark);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
$is-dark: map-get($supplemental-theme-color-config, is-dark);
$supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
$supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
);
.processor-status-table {
.primary-node-only {
min-width: 16px;
background-color: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
background-color: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
);
}
}
}

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

@ -18,27 +18,30 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $nifi-theme) {
@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.get-color-config($material-theme);
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
$supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
$nifi-theme-success-palette: map.get($nifi-theme-color-config, 'accent');
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
$supplemental-theme-success-palette: map.get($supplemental-theme-color-config, 'accent');
// Get hues from palette
$is-dark: map-get($nifi-theme-color-config, is-dark);
$is-dark: map-get($supplemental-theme-color-config, is-dark);
$material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette, default);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
$nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
$nifi-theme-surface-palette,
$supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
$supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
);
$supplemental-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
darker-contrast
);
$nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
$nifi-theme-surface-palette,
$supplemental-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
lighter-contrast
);
@ -53,8 +56,8 @@
.context-menu-item:active {
background-color: if(
$is-dark,
rgba($nifi-theme-surface-palette-darker-contrast, 0.28),
rgba($nifi-theme-surface-palette-lighter-contrast, 0.2)
rgba($supplemental-theme-surface-palette-darker-contrast, 0.28),
rgba($supplemental-theme-surface-palette-lighter-contrast, 0.2)
);
}

2
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/ui/common/map-table/editors/text-editor/_text-editor.component-theme.scss
View File

@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $nifi-theme) {
@mixin generate-theme($material-theme, $supplemental-theme) {
.text-editor {
@include mat.button-density(-1);

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

@ -19,7 +19,7 @@
@use '@angular/material' as mat;
@use '../../../../../../../node_modules/@angular/material/core/theming/inspection' as inspection;
@mixin generate-theme($material-theme, $nifi-theme) {
@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.get-color-config($material-theme);

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

@ -18,7 +18,7 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $nifi-theme) {
@mixin generate-theme($material-theme, $supplemental-theme) {
.property-editor {
@include mat.button-density(-1);

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

@ -18,27 +18,27 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($nifi-theme) {
@mixin generate-theme($supplemental-theme) {
// Get the color config from the theme.
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
$supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($nifi-theme-color-config, is-dark);
$nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
$nifi-theme-surface-palette,
$is-dark: map-get($supplemental-theme-color-config, is-dark);
$supplemental-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
darker-contrast
);
$nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
$nifi-theme-surface-palette,
$supplemental-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
lighter-contrast
);
$alternate-surface: if(
$is-dark,
rgba($nifi-theme-surface-palette-darker-contrast, 0.28),
rgba($nifi-theme-surface-palette-lighter-contrast, 0.2)
rgba($supplemental-theme-surface-palette-darker-contrast, 0.28),
rgba($supplemental-theme-surface-palette-lighter-contrast, 0.2)
);
#status-history-chart-container,

17
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/app/ui/common/tooltips/property-hint-tip/_property-hint-tip.component-theme.scss
View File

@ -18,23 +18,26 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-theme($material-theme, $nifi-theme) {
@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.get-color-config($material-theme);
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
$supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($nifi-theme-color-config, is-dark);
$is-dark: map-get($supplemental-theme-color-config, is-dark);
$material-theme-primary-palette-lighter: mat.get-color-from-palette($material-theme-primary-palette, 'lighter');
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
);
$supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
.hint-pattern {
color: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
color: if($is-dark, $supplemental-theme-surface-palette-darker, $supplemental-theme-surface-palette-lighter);
background-color: $material-theme-primary-palette-lighter;
}
}

122
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/assets/styles/_app.scss
View File

@ -351,43 +351,55 @@
}
}
@mixin generate-nifi-theme($nifi-theme) {
@mixin generate-supplemental-theme($supplemental-theme) {
// Get the color config from the theme.
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
$supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
// Get the color palettes from the color-config.
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
$nifi-theme-success-palette: map.get($nifi-theme-color-config, 'accent');
$nifi-theme-caution-palette: map.get($nifi-theme-color-config, 'warn');
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
$supplemental-theme-success-palette: map.get($supplemental-theme-color-config, 'accent');
$supplemental-theme-caution-palette: map.get($supplemental-theme-color-config, 'warn');
// default/lighter/darker colors from the nifi theme palettes
$is-dark: map-get($nifi-theme-color-config, is-dark);
$nifi-theme-surface-palette-default: mat.get-color-from-palette($nifi-theme-surface-palette);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
$nifi-theme-surface-palette,
// default/lighter/darker colors from the supplemental theme palettes
$is-dark: map-get($supplemental-theme-color-config, is-dark);
$supplemental-theme-surface-palette-default: mat.get-color-from-palette($supplemental-theme-surface-palette);
$supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
);
$supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
$supplemental-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
darker-contrast
);
$nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
$nifi-theme-surface-palette,
$supplemental-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
lighter-contrast
);
$alternate-surface: if(
$is-dark,
rgba($nifi-theme-surface-palette-darker-contrast, 0.28),
rgba($nifi-theme-surface-palette-lighter-contrast, 0.2)
rgba($supplemental-theme-surface-palette-darker-contrast, 0.28),
rgba($supplemental-theme-surface-palette-lighter-contrast, 0.2)
);
$surface-contrast: if(
$is-dark,
$nifi-theme-surface-palette-darker-contrast,
$nifi-theme-surface-palette-lighter-contrast
$supplemental-theme-surface-palette-darker-contrast,
$supplemental-theme-surface-palette-lighter-contrast
);
$nifi-theme-success-palette-default: mat.get-color-from-palette($nifi-theme-success-palette, default);
$nifi-theme-success-palette-lighter: mat.get-color-from-palette($nifi-theme-success-palette, lighter);
$nifi-theme-success-palette-darker: mat.get-color-from-palette($nifi-theme-success-palette, darker);
$nifi-theme-caution-palette-default: mat.get-color-from-palette($nifi-theme-caution-palette, default);
$nifi-theme-caution-palette-darker: mat.get-color-from-palette($nifi-theme-caution-palette, darker);
$supplemental-theme-success-palette-default: mat.get-color-from-palette(
$supplemental-theme-success-palette,
default
);
$supplemental-theme-success-palette-lighter: mat.get-color-from-palette(
$supplemental-theme-success-palette,
lighter
);
$supplemental-theme-success-palette-darker: mat.get-color-from-palette($supplemental-theme-success-palette, darker);
$supplemental-theme-caution-palette-default: mat.get-color-from-palette(
$supplemental-theme-caution-palette,
default
);
$supplemental-theme-caution-palette-darker: mat.get-color-from-palette($supplemental-theme-caution-palette, darker);
// semantic classes for contrast colors determined based on the light/dark mode of the theme.
@ -405,42 +417,46 @@
// semantic classes for default/lighter/darker colors for each palette in each theme
//
// NOTE: nifi surface palette lighter/darker is purposefully omitted here. Any application of nifi surface colors should be as a background-color to a surface DOM element. The surface color should switch from light to dark depending on the mode for the theme.
// NOTE: supplemental surface palette lighter/darker is purposefully omitted here. Any application of supplemental surface colors should be as a background-color to a surface DOM element. The surface color should switch from light to dark depending on the mode for the theme.
.surface-color {
color: $nifi-theme-surface-palette-default;
fill: $nifi-theme-surface-palette-default;
color: $supplemental-theme-surface-palette-default;
fill: $supplemental-theme-surface-palette-default;
}
.success-color {
color: $nifi-theme-success-palette-default;
fill: $nifi-theme-success-palette-default;
color: $supplemental-theme-success-palette-default;
fill: $supplemental-theme-success-palette-default;
}
.success-color-lighter {
color: $nifi-theme-success-palette-lighter;
fill: $nifi-theme-success-palette-lighter;
color: $supplemental-theme-success-palette-lighter;
fill: $supplemental-theme-success-palette-lighter;
}
.success-color-darker {
color: $nifi-theme-success-palette-darker;
fill: $nifi-theme-success-palette-darker;
color: $supplemental-theme-success-palette-darker;
fill: $supplemental-theme-success-palette-darker;
}
.caution-color {
color: $nifi-theme-caution-palette-default;
fill: $nifi-theme-caution-palette-default;
color: $supplemental-theme-caution-palette-default;
fill: $supplemental-theme-caution-palette-default;
}
.caution-color-darker {
color: $nifi-theme-caution-palette-darker;
fill: $nifi-theme-caution-palette-darker;
color: $supplemental-theme-caution-palette-darker;
fill: $supplemental-theme-caution-palette-darker;
}
/* other classes */
.tooltip {
background-color: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
background-color: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
color: $surface-contrast;
}
@ -458,11 +474,19 @@
}
.cdk-drop-list {
background: if($is-dark, $nifi-theme-surface-palette-default, $nifi-theme-surface-palette-lighter);
background: if(
$is-dark,
$supplemental-theme-surface-palette-default,
$supplemental-theme-surface-palette-lighter
);
}
.cdk-drag {
background: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
background: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
);
}
span.grip {
@ -470,8 +494,12 @@
}
.cdk-drag-disabled {
color: $nifi-theme-surface-palette-default;
background: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter) !important;
color: $supplemental-theme-surface-palette-default;
background: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
) !important;
}
.cdk-drag-selected {
@ -479,8 +507,8 @@
// invert the contrast colors since the surface is dark in light mode and light in dark mode
color: if(
$is-dark,
$nifi-theme-surface-palette-lighter-contrast,
$nifi-theme-surface-palette-darker-contrast
$supplemental-theme-surface-palette-lighter-contrast,
$supplemental-theme-surface-palette-darker-contrast
);
}
@ -488,8 +516,8 @@
// invert the contrast colors since the surface is dark in light mode and light in dark mode
color: if(
$is-dark,
$nifi-theme-surface-palette-lighter-contrast,
$nifi-theme-surface-palette-darker-contrast
$supplemental-theme-surface-palette-lighter-contrast,
$supplemental-theme-surface-palette-darker-contrast
);
}
@ -497,8 +525,8 @@
// invert the contrast colors since the surface is dark in light mode and light in dark mode
color: if(
$is-dark,
$nifi-theme-surface-palette-lighter-contrast,
$nifi-theme-surface-palette-darker-contrast
$supplemental-theme-surface-palette-lighter-contrast,
$supplemental-theme-surface-palette-darker-contrast
);
}
}

44
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/assets/styles/_codemirror-theme.scss
View File

@ -18,32 +18,38 @@
@use 'sass:map';
@use '@angular/material' as mat;
@mixin generate-nifi-theme($material-theme, $nifi-theme) {
@mixin generate-codemirror-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.get-color-config($material-theme);
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
$supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
$material-theme-accent-palette: map.get($material-theme-color-config, 'accent');
// Get hues from palette
$is-dark: map-get($nifi-theme-color-config, is-dark);
$is-dark: map-get($supplemental-theme-color-config, is-dark);
$material-theme-primary-palette-lighter: mat.get-color-from-palette($material-theme-primary-palette, lighter);
$material-theme-primary-palette-darker: mat.get-color-from-palette($material-theme-primary-palette, darker);
$material-theme-primary-palette-default: mat.get-color-from-palette($material-theme-primary-palette, default);
$nifi-theme-surface-palette-default: mat.get-color-from-palette($nifi-theme-surface-palette, default);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$nifi-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
$nifi-theme-surface-palette,
$supplemental-theme-surface-palette-default: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
default
);
$supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
);
$supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
$supplemental-theme-surface-palette-darker-contrast: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
darker-contrast
);
$nifi-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
$nifi-theme-surface-palette,
$supplemental-theme-surface-palette-lighter-contrast: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
lighter-contrast
);
@ -56,7 +62,11 @@
height: 108px;
cursor: default;
line-height: normal;
background-color: if($is-dark, $nifi-theme-surface-palette-darker, $nifi-theme-surface-palette-lighter);
background-color: if(
$is-dark,
$supplemental-theme-surface-palette-darker,
$supplemental-theme-surface-palette-lighter
);
border: 1px solid var(--mdc-outlined-text-field-label-text-color);
}
@ -72,7 +82,11 @@
.cm-s-nifi .CodeMirror-cursor {
border-left: 1px solid
if($is-dark, $nifi-theme-surface-palette-darker-contrast, $nifi-theme-surface-palette-lighter-contrast);
if(
$is-dark,
$supplemental-theme-surface-palette-darker-contrast,
$supplemental-theme-surface-palette-lighter-contrast
);
}
.cm-s-nifi div.CodeMirror-selected {
@ -216,8 +230,8 @@
.cm-s-nifi .CodeMirror-matchingbracket {
text-decoration: underline;
color: $nifi-theme-surface-palette-darker-contrast !important;
background-color: $nifi-theme-surface-palette-default;
color: $supplemental-theme-surface-palette-darker-contrast !important;
background-color: $supplemental-theme-surface-palette-default;
opacity: 0.5;
filter: alpha(opacity=50);
}

15
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/assets/styles/_listing-table.scss
View File

@ -48,21 +48,24 @@
}
}
@mixin generate-theme($material-theme, $nifi-theme) {
@mixin generate-theme($material-theme, $supplemental-theme) {
// Get the color config from the theme.
$material-theme-color-config: mat.get-color-config($material-theme);
$nifi-theme-color-config: mat.get-color-config($nifi-theme);
$supplemental-theme-color-config: mat.get-color-config($supplemental-theme);
// Get the color palette from the color-config.
$material-theme-primary-palette: map.get($material-theme-color-config, 'primary');
$material-theme-accent-palette: map.get($material-theme-color-config, 'accent');
$nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
$supplemental-theme-surface-palette: map.get($supplemental-theme-color-config, 'primary');
// Get hues from palette
$is-dark: map-get($nifi-theme-color-config, is-dark);
$is-dark: map-get($supplemental-theme-color-config, is-dark);
$nifi-theme-surface-palette-lighter: mat.get-color-from-palette($nifi-theme-surface-palette, lighter);
$nifi-theme-surface-palette-darker: mat.get-color-from-palette($nifi-theme-surface-palette, darker);
$supplemental-theme-surface-palette-lighter: mat.get-color-from-palette(
$supplemental-theme-surface-palette,
lighter
);
$supplemental-theme-surface-palette-darker: mat.get-color-from-palette($supplemental-theme-surface-palette, darker);
$selected-row-color: if(
$is-dark,
mat.get-color-from-palette($material-theme-accent-palette, darker),

4
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/assets/themes/nifi.scss → nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/assets/themes/supplemental.scss
View File

@ -110,7 +110,7 @@ $surface-light-palette: mat.define-palette($surface-palette, 600, 100, 900);
$success-light-palette: mat.define-palette($success-palette, 400, 200, 800);
$caution-light-palette: mat.define-palette($caution-palette, A400, A200, A700);
$nifi-theme-light: mat.define-light-theme(
$supplemental-theme-light: mat.define-light-theme(
(
color: (
primary: $surface-light-palette,
@ -126,7 +126,7 @@ $surface-dark-palette: mat.define-palette($surface-palette, 500, 200, 800);
$success-dark-palette: mat.define-palette($success-palette, 400, 200, 800);
$caution-dark-palette: mat.define-palette($caution-palette, A400, A200, A700);
$nifi-theme-dark: mat.define-dark-theme(
$supplemental-theme-dark: mat.define-dark-theme(
(
color: (
primary: $surface-dark-palette,

95
nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/apps/nifi/src/styles.scss
View File

@ -58,8 +58,7 @@
@use 'codemirror/addon/fold/foldgutter.css';
@use 'codemirror/addon/hint/show-hint.css';
// To override the canvas theme, you need to set the variables $nifi-theme-light and $nifi-theme-dark
@import 'assets/themes/nifi';
@import 'assets/themes/supplemental';
// To override the NiFi theme, you need to set the variables $material-theme-light and $material-theme-dark
@import 'assets/themes/material';
@ -81,31 +80,31 @@
// generate light mode stylesheets
@include app.generate-material-theme($material-theme-light);
@include app.generate-nifi-theme($nifi-theme-light);
@include codemirror-theme.generate-nifi-theme($material-theme-light, $nifi-theme-light);
@include app.generate-supplemental-theme($supplemental-theme-light);
@include codemirror-theme.generate-codemirror-theme($material-theme-light, $supplemental-theme-light);
@include app-component.generate-theme($material-theme-light);
@include listing-table.generate-theme($material-theme-light, $nifi-theme-light);
@include canvas.generate-theme($material-theme-light, $nifi-theme-light);
@include footer.generate-theme($nifi-theme-light);
@include listing-table.generate-theme($material-theme-light, $supplemental-theme-light);
@include canvas.generate-theme($material-theme-light, $supplemental-theme-light);
@include footer.generate-theme($supplemental-theme-light);
@include extension-creation.generate-theme($material-theme-light);
@include navigation-control.generate-theme($nifi-theme-light);
@include birdseye-control.generate-theme($material-theme-light, $nifi-theme-light);
@include operation-control.generate-theme($nifi-theme-light);
@include flow-status.generate-theme($material-theme-light, $nifi-theme-light);
@include new-canvas-item.generate-theme($material-theme-light, $nifi-theme-light);
@include search.generate-theme($nifi-theme-light);
@include login.generate-theme($material-theme-light, $nifi-theme-light);
@include provenance-event-table.generate-theme($nifi-theme-light);
@include provenance.generate-theme($material-theme-light, $nifi-theme-light);
@include lineage.generate-theme($material-theme-light, $nifi-theme-light);
@include context-menu.generate-theme($material-theme-light, $nifi-theme-light);
@include navigation.generate-theme($material-theme-light, $nifi-theme-light);
@include nf-editor.generate-theme($material-theme-light, $nifi-theme-light);
@include status-history.generate-theme($nifi-theme-light);
@include property-hint-tip.generate-theme($material-theme-light, $nifi-theme-light);
@include processor-status-table.generate-theme($nifi-theme-light);
@include change-color-dialog.generate-theme($nifi-theme-light);
@include text-editor.generate-theme($material-theme-light, $nifi-theme-light);
@include navigation-control.generate-theme($supplemental-theme-light);
@include birdseye-control.generate-theme($material-theme-light, $supplemental-theme-light);
@include operation-control.generate-theme($supplemental-theme-light);
@include flow-status.generate-theme($material-theme-light, $supplemental-theme-light);
@include new-canvas-item.generate-theme($material-theme-light, $supplemental-theme-light);
@include search.generate-theme($supplemental-theme-light);
@include login.generate-theme($material-theme-light, $supplemental-theme-light);
@include provenance-event-table.generate-theme($supplemental-theme-light);
@include provenance.generate-theme($material-theme-light, $supplemental-theme-light);
@include lineage.generate-theme($material-theme-light, $supplemental-theme-light);
@include context-menu.generate-theme($material-theme-light, $supplemental-theme-light);
@include navigation.generate-theme($material-theme-light, $supplemental-theme-light);
@include nf-editor.generate-theme($material-theme-light, $supplemental-theme-light);
@include status-history.generate-theme($supplemental-theme-light);
@include property-hint-tip.generate-theme($material-theme-light, $supplemental-theme-light);
@include processor-status-table.generate-theme($supplemental-theme-light);
@include change-color-dialog.generate-theme($supplemental-theme-light);
@include text-editor.generate-theme($material-theme-light, $supplemental-theme-light);
.dark-theme {
// Include the dark theme color styles.
@ -113,29 +112,29 @@
// generate dark mode stylesheets
@include app.generate-material-theme($material-theme-dark);
@include app.generate-nifi-theme($nifi-theme-dark);
@include codemirror-theme.generate-nifi-theme($material-theme-dark, $nifi-theme-dark);
@include app.generate-supplemental-theme($supplemental-theme-dark);
@include codemirror-theme.generate-codemirror-theme($material-theme-dark, $supplemental-theme-dark);
@include app-component.generate-theme($material-theme-dark);
@include listing-table.generate-theme($material-theme-dark, $nifi-theme-dark);
@include canvas.generate-theme($material-theme-dark, $nifi-theme-dark);
@include footer.generate-theme($nifi-theme-dark);
@include listing-table.generate-theme($material-theme-dark, $supplemental-theme-dark);
@include canvas.generate-theme($material-theme-dark, $supplemental-theme-dark);
@include footer.generate-theme($supplemental-theme-dark);
@include extension-creation.generate-theme($material-theme-dark);
@include navigation-control.generate-theme($nifi-theme-dark);
@include birdseye-control.generate-theme($material-theme-dark, $nifi-theme-dark);
@include operation-control.generate-theme($nifi-theme-dark);
@include flow-status.generate-theme($material-theme-dark, $nifi-theme-dark);
@include new-canvas-item.generate-theme($material-theme-dark, $nifi-theme-dark);
@include search.generate-theme($nifi-theme-dark);
@include login.generate-theme($material-theme-dark, $nifi-theme-dark);
@include provenance-event-table.generate-theme($nifi-theme-dark);
@include provenance.generate-theme($material-theme-dark, $nifi-theme-dark);
@include lineage.generate-theme($material-theme-dark, $nifi-theme-dark);
@include context-menu.generate-theme($material-theme-dark, $nifi-theme-dark);
@include navigation.generate-theme($material-theme-dark, $nifi-theme-dark);
@include nf-editor.generate-theme($material-theme-dark, $nifi-theme-dark);
@include status-history.generate-theme($nifi-theme-dark);
@include property-hint-tip.generate-theme($material-theme-dark, $nifi-theme-dark);
@include processor-status-table.generate-theme($nifi-theme-dark);
@include change-color-dialog.generate-theme($nifi-theme-dark);
@include text-editor.generate-theme($material-theme-dark, $nifi-theme-dark);
@include navigation-control.generate-theme($supplemental-theme-dark);
@include birdseye-control.generate-theme($material-theme-dark, $supplemental-theme-dark);
@include operation-control.generate-theme($supplemental-theme-dark);
@include flow-status.generate-theme($material-theme-dark, $supplemental-theme-dark);
@include new-canvas-item.generate-theme($material-theme-dark, $supplemental-theme-dark);
@include search.generate-theme($supplemental-theme-dark);
@include login.generate-theme($material-theme-dark, $supplemental-theme-dark);
@include provenance-event-table.generate-theme($supplemental-theme-dark);
@include provenance.generate-theme($material-theme-dark, $supplemental-theme-dark);
@include lineage.generate-theme($material-theme-dark, $supplemental-theme-dark);
@include context-menu.generate-theme($material-theme-dark, $supplemental-theme-dark);
@include navigation.generate-theme($material-theme-dark, $supplemental-theme-dark);
@include nf-editor.generate-theme($material-theme-dark, $supplemental-theme-dark);
@include status-history.generate-theme($supplemental-theme-dark);
@include property-hint-tip.generate-theme($material-theme-dark, $supplemental-theme-dark);
@include processor-status-table.generate-theme($supplemental-theme-dark);
@include change-color-dialog.generate-theme($supplemental-theme-dark);
@include text-editor.generate-theme($material-theme-dark, $supplemental-theme-dark);
}