scottyaslan opened a new pull request, #11322: URL: https://github.com/apache/nifi/pull/11322
<!-- Licensed to the Apache Software Foundation (ASF) under one or more --> <!-- contributor license agreements. See the NOTICE file distributed with --> <!-- this work for additional information regarding copyright ownership. --> <!-- The ASF licenses this file to You under the Apache License, Version 2.0 --> <!-- (the "License"); you may not use this file except in compliance with --> <!-- the License. You may obtain a copy of the License at --> <!-- http://www.apache.org/licenses/LICENSE-2.0 --> <!-- Unless required by applicable law or agreed to in writing, software --> <!-- distributed under the License is distributed on an "AS IS" BASIS, --> <!-- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. --> <!-- See the License for the specific language governing permissions and --> <!-- limitations under the License. --> # Summary [NIFI-16009](https://issues.apache.org/jira/browse/NIFI-16009) Refactor frontend theming to eliminate the centralized `*component-theme.scss` + global mixin registration pattern, replacing it with per-component style ownership and a single `material.scss` orchestrator. ## Background The NiFi Angular frontend themes components through a two-part pattern: a `_*.component-theme.scss` file alongside each component containing a `generate-theme()` mixin, and an `html {}` block in each app's `styles.scss` that `@use`s every theme file and `@include`s every mixin. This pattern has two structural problems. **Redundancy.** Angular Material v15+ (MDC) expresses all theming through CSS custom properties (`--mat-sys-*`, `--nf-*`). These cascade to all descendants automatically and already rebind for dark mode in `material.scss`. There is no scenario in which calling `@include canvas.generate-theme()` inside `html {}` produces a different result than those same styles placed in `canvas.component.scss`. The `styles.scss` mixin registry was emitting the same CSS twice — once for light mode, and again redundantly for dark mode via a double-call pattern. **Scalability.** Bundling all component styles into the eager `styles.scss` bundle prevents Angular's code-splitting from delivering component styles alongside their lazy-loaded feature modules. ## What Changed ### Shared library (`libs/shared/src/assets/`) - Deleted the `styles/` directory (`_app.scss`, `_listing-table.scss`, `_prism-theme.scss`, `_tailwind-theme.scss`) - `themes/material.scss` absorbs structural resets and semantic color utilities from the former `_app.scss`, becoming the sole eager global orchestrator - `themes/components/_table.scss` (new) — merged from `_listing-table.scss`; all `@extend` directives converted to inline CSS custom properties (`@extend` cannot cross Sass module boundaries) - `themes/components/_prism-theme.scss` (new) — moved from `styles/` - `themes/_tailwind-theme.scss` (new) — moved from `styles/` - `themes/purple.scss` deleted (unused alternative theme) - `themes/README.md` updated to document the new architecture and `::ng-deep` decision criteria ### Apps - **25 `_*.component-theme.scss` files deleted** across `apps/nifi`, `apps/nifi-jolt-transform-ui`, `apps/standard-content-viewer`, and `apps/update-attribute`; each component's styles migrated into its own `*.component.scss` - **`styles.scss` in all four apps** reduced from 80–105 lines with 20+ component registrations to ~30 lines: Tailwind, flowfont, `material.scss`, Font Awesome — no `html {}` block, no component mixin calls - `connector-canvas.component.scss` created (component previously lacked a stylesheet); `styleUrl` added to `connector-canvas.component.ts` ### `::ng-deep` audit All migrated styles that target DOM not created by Angular's template compiler use `:host ::ng-deep` with an inline comment explaining why. Styles targeting template-defined elements (Angular Material host elements, CDK directive classes, Material density mixins that emit CSS custom properties) do not use `::ng-deep`. A new `.cursor/rules/ng-deep.mdc` documents the decision criteria. ### Frontend (manual testing — no automated SCSS tests exist) Run each app in development mode and verify **light mode** and **dark mode**: **`apps/nifi`** - [ ] Canvas: component borders, labels, connection paths visible and correctly colored - [ ] Birdseye / navigation control: minimap SVG renders without missing styles - [ ] Search and canvas-header-search: results panel opens with correct background, shadow, and spacing - [ ] Provenance / lineage: SVG graph elements correctly colored - [ ] Status history: chart axes, labels, and controls render correctly - [ ] Documentation: expansion panel header title and description styled correctly - [ ] Navigation bar: secondary background, on-secondary text and icon colors correct **`apps/nifi-jolt-transform-ui`** - [ ] Editor height and button density correct **`apps/standard-content-viewer`** - [ ] Button density correct **`apps/update-attribute`** - [ ] Drag-and-drop list clears background color when dragging ### Issue Tracking - [Apache NiFi Jira](https://issues.apache.org/jira/browse/NIFI) issue created ### Pull Request Tracking - Pull Request title starts with Apache NiFi Jira issue number, such as `NIFI-16009` - Pull Request commit message starts with Apache NiFi Jira issue number, as such `NIFI-16009` - Pull request contains [commits signed](https://docs.github.com/en/authentication/managing-commit-signature-verification/signing-commits) with a registered key indicating `Verified` status ### Pull Request Formatting - Pull Request based on current revision of the `main` branch - Pull Request refers to a feature branch with one commit containing changes # Verification Please indicate the verification steps performed prior to pull request creation. ### Build - [ ] Build completed using `./mvnw clean install -P contrib-check` - [ ] JDK 21 - [ ] JDK 25 ### Licensing - [ ] New dependencies are compatible with the [Apache License 2.0](https://apache.org/licenses/LICENSE-2.0) according to the [License Policy](https://www.apache.org/legal/resolved.html) - [ ] New dependencies are documented in applicable `LICENSE` and `NOTICE` files ### Documentation - [ ] Documentation formatting appears as expected in rendered files -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
