NIFI-15951 modularize customized angular material themed components

[scottyaslan]

Summary

NIFI-15951

Summary

Decomposes the monolithic material.scss and _app.scss theme files into 22 per-component SCSS
partials under themes/components/. Each partial exposes a generate-material-theme() mixin that
is called from the bottom of material.scss.

Intentional Scope Changes

The following styles were intentionally narrowed or removed as part of this refactoring:

• mat.select-overrides() (trigger text size, line-height, tracking): Removed from global
  scope. These overrides were tightly coupled to the searchable-overlay pattern and are no longer
  applied globally to all mat-select instances.

• .mat-mdc-select-panel (margin-top, border, border-radius): Removed from global scope.
  Select panel border styling is now scoped to .searchable-overlay in _searchable-overlay.scss.

• .mat-mdc-option general styling (min-height, padding, font-weight, .fa icon sizing):
  Narrowed to .searchable-overlay scope. The typography-related option styles (font-size,
  letter-spacing, line-height) remain global within .mat-typography.text-base in
  _typography.scss.

• .mat-mdc-form-field-icon-prefix .fa and form-field padding (.mdc-text-field--outlined,
  .mat-mdc-form-field-has-icon-prefix): Narrowed from global scope to .searchable-overlay and
  searchable-select.component.scss respectively, as these paddings were only relevant to
  searchable components.

Bug Fix

• --themed-reusable-text-primary: The original _app.scss referenced this CSS custom property
  for .mat-mdc-form-field-icon-prefix .fa color, but this is a Balto/openflow-ui token that does
  not exist in NiFi. Corrected to var(--mat-app-text-color) in _searchable-overlay.scss.

Purple Theme Simplification

The purple theme previously duplicated component overrides (snackbar, checkbox, spinner, icon-button,
error-button) that were identical to the default theme. These have been removed. The purple theme now
only imports dialog as a demonstration of how secondary themes can selectively reuse NiFi's
component partials. Documentation comments explain the three available customization strategies.

Other Notes

• .mdc-dialog__content font-size intentionally changed from hardcoded 14px to var(--mat-sys-body-medium-size)
  to align with the typography scale. Currently resolves to the same value.
• hover:cursor-pointer added directly to copy-button template via Tailwind class, replacing a
  global .copy-button:hover rule.

Please complete the following tracking steps prior to pull request creation.

Issue Tracking

• Apache NiFi Jira issue created

Pull Request Tracking

• Pull Request title starts with Apache NiFi Jira issue number, such as NIFI-00000
• Pull Request commit message starts with Apache NiFi Jira issue number, as such NIFI-00000
• Pull request contains commits signed 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 according to the License Policy
• New dependencies are documented in applicable LICENSE and NOTICE files

Documentation

• Documentation formatting appears as expected in rendered files

[rfellows]

reviewing...

[rfellows]

A few things...

[rfellows]

The .darkMode { ... } block on lines 69–115 is byte-for-byte identical to the :root { ... } block on lines 21–67 — every value uses --mat-sys-* or --nf-* custom properties, all of which are already rebound under .darkMode at the material.scss level. Duplicating the rules under a .darkMode selector emits the same CSS twice and doesn't change any computed values.

This appears to be the most visible artifact of porting the openflow-ui runtime's per-partial pattern — runtime needs separate .darkMode blocks because Balto tokens sometimes need different values per mode at the consumer level, but NiFi's mode-aware values are reassigned at the variable level inside material.scss, so any rule that uses one of those custom properties is automatically mode-aware.

The same redundancy exists in:

• _drag-and-drop.scss (lines 84–106)
• _option.scss (lines 28–32)
• _paginator.scss (lines 27–31)
• _progress-bar.scss (lines 47–71)
• _searchable-overlay.scss (lines 93–107)
• _skeleton.scss (lines 27–31)
• _tree.scss (lines 28–32)
• _typography.scss (lines 134–140)

Suggest dropping the .darkMode { ... } block from each of these partials. Files where the dark-mode block is genuinely needed (different raw palette indices per mode) and should stay: _button.scss, _checkbox.scss, _progress-spinner.scss, _snackbar.scss.

[rfellows]

Light/dark asymmetry: the :root block sets display: inline !important; (line 23) but the .darkMode block omits it — so a mat-tree rendered with a .darkMode ancestor loses the display: inline override.

Either restore symmetry, or (preferred, see the broader .darkMode redundancy comment on _status-variant.scss) drop the .darkMode { ... } block entirely since both :root rules use no color tokens that vary by mode.

[rfellows]

The original _app.scss had an inline comment explaining this magic number: padding: 11px; //center the mat-icon-button inside the date picker form field. That comment was dropped during the move — please restore it so 11px doesn't read as an unexplained magic number.

[rfellows]

General observation about the .mat-mdc-option narrowing called out in the PR description.

The PR description lists narrowing .mat-mdc-option's general sizing/padding (min-height, padding, font-weight, .fa icon sizing) from global scope to .searchable-overlay as an Intentional Scope Change, on the basis that the previously-global rules were "tightly coupled to the searchable-overlay pattern." That assumption appears to be incorrect empirically — testing the resulting build, the two <mat-select> dropdowns on the Scheduling tab of the Processor Configuration dialog now render with visibly different option padding/sizing than before. They aren't searchable selects and don't carry the .searchable-overlay class wrapper, so they no longer pick up the min-height: 32px; padding: 8px 12px; ... rules that were globally applied before.

Almost certainly there are other surfaces in the same situation — any non-searchable <mat-select> / <mat-autocomplete> panel in the controller-services view, parameter-contexts dialog, processor properties drawer, etc. The same concern probably applies to the .mat-mdc-form-field-icon-prefix .fa and outlined-form-field padding that were narrowed for the same reason; an audit of <mat-select> usages outside .searchable-overlay is worth doing before merge.

Two ways to fix without giving up the modularization win:

1. Re-add the general .mat-mdc-option { min-height: 32px; padding: 8px 12px; font-weight: 400; ... } rules to this partial's :root block (alongside the existing [disabled] rule), and let .searchable-overlay further narrow as needed — most of its current values are the same anyway, so the override would mostly just be reinstating the global baseline.
2. Keep _searchable-overlay.scss as the only owner of those rules and explicitly walk the app to apply the .searchable-overlay class wrapper to every panel that should pick them up — likely a much larger and riskier change than (1).

(1) seems lower-risk for a refactor PR and matches the spirit of "behavior-preserving modularization." Recommend doing it before merge so we don't ship a visual regression.

Before PR:

After: