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