[NIFI-14258] tokenize theme (#9733)

* [NIFI-14258] tokenize theme * override material design styles via angular material mixins * restore material build time file * system-token service, extract all styles, add unit tests * final touches * linting * update paths, update drag/drop colors, update listings background color to inherit, remove comment * update darkMode class name This closes #9733
apache · Feb 27, 2025 · d60f5b2 · d60f5b2
1 parent 3e0c5c0
commit d60f5b2
Show file tree

Hide file tree

Showing 67 changed files with 2,120 additions and 1,860 deletions.
diff --git a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/app.component.ts b/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/app/app.component.ts
@@ -36,7 +36,7 @@ export class AppComponent {
         // Initially check if dark mode is enabled on system
         const darkModeOn = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-        // If dark mode is enabled then directly switch to the dark-theme
+        // If dark mode is enabled then directly switch to the dark theme
         this.themingService.toggleTheme(darkModeOn, theme);
 
         if (window.matchMedia) {

diff --git a/...src/app/pages/jolt-transform-json-ui/feature/_jolt-transform-json-ui.component-theme.scss b/...src/app/pages/jolt-transform-json-ui/feature/_jolt-transform-json-ui.component-theme.scss
@@ -18,7 +18,7 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
+@mixin generate-theme() {
     .jolt-transform-json-ui {
         @include mat.button-density(-1);
 

diff --git a/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/styles.scss b/nifi-frontend/src/main/frontend/apps/nifi-jolt-transform-ui/src/styles.scss
@@ -30,12 +30,6 @@
 @use 'font-awesome';
 @use 'libs/shared/src/assets/themes/material';
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
-@include mat.elevation-classes();
-@include mat.app-background();
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -45,19 +39,15 @@
 @include listing-table.styles();
 
 html {
-    @include mat.typography-hierarchy(material.$m3-light-theme);
-    @include mat.all-component-themes(material.$m3-light-theme);
-    @include app.generate-material-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include codemirror-theme.generate-codemirror-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include listing-table.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-    @include jolt-transform-json-ui.generate-theme(material.$m3-light-theme, material.$m3-light-theme-config);
-
-    .dark-theme {
-        //@include mat.typography-hierarchy($m3-dark-theme);
-        @include mat.all-component-colors(material.$m3-dark-theme);
-        @include app.generate-material-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include codemirror-theme.generate-codemirror-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include listing-table.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
-        @include jolt-transform-json-ui.generate-theme(material.$m3-dark-theme, material.$m3-dark-theme-config);
+    @include app.generate-material-theme();
+    @include codemirror-theme.generate-codemirror-theme();
+    @include listing-table.generate-theme();
+    @include jolt-transform-json-ui.generate-theme();
+
+    .darkMode {
+        @include app.generate-material-theme();
+        @include codemirror-theme.generate-codemirror-theme();
+        @include listing-table.generate-theme();
+        @include jolt-transform-json-ui.generate-theme();
     }
 }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/_app.component-theme.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/_app.component-theme.scss
@@ -18,14 +18,8 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
-    $material-theme-secondary-palette-default: mat.get-theme-color(
-        $material-theme,
-        secondary,
-        map.get(map.get($config, secondary), default)
-    );
-
+@mixin generate-theme() {
     .splash {
-        background-color: $material-theme-secondary-palette-default;
+        background-color: var(--mat-sys-secondary);
     }
 }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/app.component.ts b/nifi-frontend/src/main/frontend/apps/nifi/src/app/app.component.ts
@@ -107,7 +107,7 @@ export class AppComponent implements OnDestroy {
         // Initially check if dark mode is enabled on system
         const darkModeOn = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-        // If dark mode is enabled then directly switch to the dark-theme
+        // If dark mode is enabled then directly switch to the dark theme
         this.themingService.toggleTheme(darkModeOn, theme);
 
         if (window.matchMedia) {

diff --git a/.../apps/nifi/src/app/pages/content-viewer/ui/external-viewer/external-viewer.component.html b/.../apps/nifi/src/app/pages/content-viewer/ui/external-viewer/external-viewer.component.html
@@ -16,5 +16,10 @@
   -->
 
 @if (frameSource) {
-    <iframe class="h-full w-full" [src]="frameSource" *recreateView="frameSource"></iframe>
+    <iframe
+        #iframeRef
+        class="h-full w-full"
+        [src]="frameSource"
+        *recreateView="frameSource"
+        (load)="systemTokensService.appendStyleSheet(iframeRef)"></iframe>
 }
diff --git a/...nd/apps/nifi/src/app/pages/content-viewer/ui/external-viewer/external-viewer.component.ts b/...nd/apps/nifi/src/app/pages/content-viewer/ui/external-viewer/external-viewer.component.ts
@@ -19,7 +19,7 @@ import { Component, OnDestroy, SecurityContext } from '@angular/core';
 import { NiFiState } from '../../../../state';
 import { Store } from '@ngrx/store';
 import { selectRef } from '../../state/content/content.selectors';
-import { isDefinedAndNotNull } from '@nifi/shared';
+import { isDefinedAndNotNull, SystemTokensService } from '@nifi/shared';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { HttpParams } from '@angular/common/http';
@@ -42,7 +42,8 @@ export class ExternalViewer implements OnDestroy {
 
     constructor(
         private store: Store<NiFiState>,
-        private domSanitizer: DomSanitizer
+        private domSanitizer: DomSanitizer,
+        protected systemTokensService: SystemTokensService
     ) {
         this.store
             .select(selectRef)

diff --git a/...rontend/apps/nifi/src/app/pages/documentation/feature/_documentation.component-theme.scss b/...rontend/apps/nifi/src/app/pages/documentation/feature/_documentation.component-theme.scss
@@ -18,15 +18,7 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 
-@mixin generate-theme($material-theme, $config) {
-    $material-theme-tertiary-palette-variant: mat.get-theme-color(
-        $material-theme,
-        tertiary,
-        map.get(map.get($config, tertiary), variant)
-    );
-
-    $selected-item-color: $material-theme-tertiary-palette-variant;
-
+@mixin generate-theme() {
     .documentation {
         h2 {
             margin-bottom: 12px !important;
@@ -35,11 +27,18 @@
         .extension-links,
         .external-links {
             a:hover {
-                background-color: var(--mat-menu-item-hover-state-layer-color) !important;
+                background-color: var(
+                    --mat-menu-item-hover-state-layer-color,
+                    color-mix(
+                        in srgb,
+                        var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%),
+                        transparent
+                    )
+                ) !important;
             }
 
             a.selected {
-                background-color: $selected-item-color !important;
+                background-color: var(--mat-sys-tertiary-container) !important;
             }
         }