This is an automated email from the ASF dual-hosted git repository.
rfellows pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/nifi.git
The following commit(s) were added to refs/heads/main by this push:
new 970c01e5cf0 NIFI-15951 modularize customized angular material themed
components (#11262)
970c01e5cf0 is described below
commit 970c01e5cf0c72a261c26d80c45e24dfdb9f85a3
Author: Scott Aslan <[email protected]>
AuthorDate: Fri Jun 5 16:14:33 2026 -0400
NIFI-15951 modularize customized angular material themed components (#11262)
* NIFI-15951 modularize customized angular material themed components
* address searchable-select and multi-select-option component theming
inheritance issues
* address review feedback
* lint and prettier
* address feedback
---
.../libs/shared/src/assets/styles/_app.scss | 568 +--------------------
.../src/assets/themes/components/_button.scss | 92 ++++
.../shared/src/assets/themes/components/_card.scss | 38 ++
.../src/assets/themes/components/_checkbox.scss | 40 ++
.../src/assets/themes/components/_date-picker.scss | 33 ++
.../src/assets/themes/components/_dialog.scss | 39 ++
.../assets/themes/components/_drag-and-drop.scss | 83 +++
.../assets/themes/components/_expansion-panel.scss | 43 ++
.../src/assets/themes/components/_form-field.scss | 57 +++
.../src/assets/themes/components/_markdown.scss | 151 ++++++
.../shared/src/assets/themes/components/_menu.scss | 53 ++
.../src/assets/themes/components/_option.scss | 107 ++++
.../src/assets/themes/components/_paginator.scss | 26 +
.../assets/themes/components/_progress-bar.scss | 46 ++
.../themes/components/_progress-spinner.scss | 40 ++
.../themes/components/_searchable-overlay.scss | 62 +++
.../src/assets/themes/components/_sidenav.scss | 29 ++
.../src/assets/themes/components/_skeleton.scss | 26 +
.../src/assets/themes/components/_snackbar.scss | 36 ++
.../assets/themes/components/_status-variant.scss | 68 +++
.../shared/src/assets/themes/components/_tab.scss | 34 ++
.../shared/src/assets/themes/components/_tree.scss | 27 +
.../src/assets/themes/components/_typography.scss | 133 +++++
.../libs/shared/src/assets/themes/material.scss | 345 ++-----------
.../libs/shared/src/assets/themes/purple.scss | 100 +---
.../copy-button/copy-button.component.ts | 4 +-
.../multi-select-option.component.scss | 100 +---
.../multi-select-option.component.ts | 2 +-
.../searchable-select.component.scss | 6 +
29 files changed, 1353 insertions(+), 1035 deletions(-)
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_app.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_app.scss
index 8e174a81124..8205c29d22f 100644
--- a/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_app.scss
+++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_app.scss
@@ -19,8 +19,7 @@
@use '@angular/material' as mat;
@mixin styles() {
- /* other classes and styles */
-
+ /* Nifi classes and styles */
html,
body {
height: 100%;
@@ -37,11 +36,6 @@
text-underline-offset: 3px;
}
- .mat-mdc-form-field-infix {
- min-width: 180px !important;
- width: 180px !important;
- }
-
.tooltip {
max-height: 70vh;
max-width: 500px;
@@ -99,15 +93,6 @@
cursor: pointer;
}
- .copy-button:hover {
- cursor: pointer;
- }
-
- .dialog-tab-content,
- .dialog-content {
- height: 50vh;
- }
-
.flex-2 {
display: flex;
flex: 2;
@@ -125,341 +110,20 @@
transform: rotate(-45deg);
}
- /* overriding 3rd party styles */
-
- .mat-mdc-dialog-actions {
- border: none !important;
- }
-
- .mat-tree {
- display: inline !important;
- background-color: unset !important;
- }
-
- .mat-mdc-card-header-text {
- width: 100%;
- }
-
- // center input text in form fields
- .mdc-text-field--outlined .mat-mdc-form-field-infix {
- line-height: 24px;
- }
-
- .mat-expansion-panel-body {
- overflow-y: auto;
- }
-
- .mat-expansion-panel-header.mat-expanded {
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
- }
-
- .mat-content.mat-content-hide-toggle {
- margin-right: 0 !important;
- height: 48px;
- }
-
- .mat-mdc-menu-panel {
- max-width: 420px;
-
- .fa {
- width: 14px;
- height: 14px;
- text-align: center;
- }
-
- .icon {
- display: inline-block;
- width: 14px;
- text-align: center;
- }
- }
-
- .cdk-drag-disabled {
- cursor: not-allowed !important;
- }
-
- .cdk-drag-placeholder {
- opacity: 0;
- }
-
- .cdk-drop-list-dragging {
- cursor: grabbing;
- }
-
- .cdk-drag:hover {
- cursor: grab;
- }
-
- .cdk-list {
- min-height: 34px;
- border-radius: 4px;
- overflow: hidden;
- display: block;
- user-select: none;
- }
-
- span.grip {
- width: 12px;
- height: 36px;
- display: block;
- line-height: 6px;
- letter-spacing: 1px;
- }
-
- .cdk-drag:hover {
- span.grip::after {
- content: '.. .. .. .. ..';
- }
- }
+ /* end Nifi classes and styles */
- .cdk-drag-disabled {
- font-style: italic;
- }
-
- .cdk-drag:hover {
- span.grip::after {
- content: '.. .. .. .. ..';
- }
- }
-
- .mdc-notched-outline__notch {
- border-right: none;
- }
+ /* overriding 3rd party styles */
.CodeMirror-hints {
z-index: 1000 !important;
overflow-y: scroll !important;
}
- .mat-mdc-tab-header {
- user-select: none;
- }
-
- .mat-mdc-icon-button {
- &.mat-mdc-button-base.mdc-icon-button {
- padding: 0;
- }
- }
-
- mat-datepicker-toggle
.mat-mdc-icon-button.mat-mdc-button-base.mdc-icon-button {
- padding: 11px; //center the mat-icon-button inside the date picker
form field
- }
-
- .mat-mdc-paginator {
- background-color: unset !important;
- }
-
- .mdc-dialog__content {
- font-size: 14px !important;
- }
-
- .mat-mdc-menu-content {
- height: 100%;
- }
-
- .mat-mdc-menu-content .mat-mdc-menu-item {
- min-height: 2.25rem;
- }
-
- .mat-typography.text-base {
- font-family: var(--mat-sys-body-medium-font);
- line-height: var(--mat-sys-body-medium-line-height);
- font-size: var(--mat-sys-body-medium-size);
- font-weight: var(--mat-sys-body-medium-weight);
- letter-spacing: normal;
-
- h2 {
- margin: unset;
- line-height: 28px;
- font-size: 18px;
- font-weight: 700;
- }
-
- h3 {
- margin: 0 0 16px;
- line-height: 28px;
- font-size: 20px;
- font-weight: 700;
- }
-
- h4 {
- margin: unset;
- line-height: 20px;
- font-size: 14px;
- font-weight: 400;
- }
-
- a {
- letter-spacing: normal;
- }
-
- .mdc-text-field--outlined .mdc-floating-label {
- font-size: var(--mat-sys-body-medium-size);
- letter-spacing: normal;
- line-height: normal;
- }
-
- .mat-mdc-select {
- font-size: var(--mat-sys-body-medium-size);
- letter-spacing: normal;
- line-height: normal;
- }
-
- .mat-mdc-option {
- font-size: var(--mat-sys-body-medium-size);
- letter-spacing: normal;
- line-height: normal;
- }
-
- .mat-mdc-form-field {
- font-size: var(--mat-sys-body-medium-size);
- letter-spacing: normal;
- line-height: normal;
- }
-
- .mat-tree-node,
- .mat-nested-tree-node {
- font-size: var(--mat-sys-body-medium-size);
- letter-spacing: normal;
- line-height: normal;
- }
-
- .mat-mdc-header-cell {
- font-weight: 700;
- }
-
- .mat-expansion-panel-header {
- font-size: var(--mat-sys-body-medium-size);
- letter-spacing: normal;
- line-height: normal;
- font-weight: 700;
- }
-
- .mat-expansion-panel-content {
- font-size: var(--mat-sys-body-medium-size);
- letter-spacing: normal;
- line-height: 20px;
- }
-
- .mat-mdc-menu-content,
- .mat-mdc-menu-content .mat-mdc-menu-item .mat-mdc-menu-item-text {
- --mat-menu-item-label-text-weight:
var(--mat-sys-body-medium-weight);
- }
-
- .mdc-list-item__primary-text {
- font-size: var(--mat-sys-body-medium-size);
- letter-spacing: normal;
- line-height: normal;
- }
-
- .mat-drawer {
- color: var(--mat-app-text-color);
- }
- }
-
- // markdown styles
- .mat-typography.text-base markdown {
- h1 {
- margin: 16px 0;
- line-height: 28px;
- font-size: 20px;
- font-weight: 700;
- }
-
- h2 {
- margin: 16px 0;
- line-height: 28px;
- font-size: 18px;
- font-weight: 700;
- }
-
- h3 {
- margin: 16px 0;
- line-height: 28px;
- font-size: 16px;
- font-weight: 600;
- }
-
- h4 {
- margin: unset;
- line-height: 20px;
- font-size: 14px;
- font-weight: 600;
- }
-
- h5 {
- margin: unset;
- line-height: 20px;
- font-size: 12px;
- font-weight: 400;
- }
-
- h6 {
- margin: unset;
- line-height: 12px;
- font-size: 10px;
- font-weight: 400;
- }
-
- ul {
- list-style: disc outside;
- margin: 1em;
- }
-
- ol {
- list-style: auto outside;
- margin: 1em;
- }
-
- p {
- margin: 8px 0;
- }
-
- table {
- display: table;
- border-width: 1px;
- margin-bottom: 1em;
- width: 100%;
- table-layout: fixed;
- text-align: left;
- border-collapse: separate;
- border-spacing: 0;
-
- th {
- user-select: none;
- }
-
- td,
- th {
- border-bottom-width: 1px;
- border-bottom-style: solid;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- cursor: default;
- text-wrap: wrap;
- padding: 8px;
- word-break: break-word;
- }
-
- th {
- text-transform: uppercase;
- }
-
- ul {
- list-style-type: disc;
- list-style-position: inside;
- text-wrap: wrap;
- word-break: break-all;
- }
- }
- }
+ /* end overriding 3rd party styles */
}
@mixin generate-material-theme() {
/* semantic color classes */
-
.primary-contrast {
color: var(--mat-sys-on-primary);
fill: var(--mat-sys-on-primary);
@@ -529,7 +193,9 @@
fill: var(--nf-disabled);
}
- /* other classes and styles */
+ /* end semantic color classes */
+
+ /* Nifi classes and styles */
.tooltip {
background-color: var(--mat-sys-background);
@@ -565,6 +231,8 @@
opacity: var(--nf-zero-opactiy) !important;
}
+ /* end Nifi classes and styles */
+
/* overriding 3rd party styles */
*:not([class^='mat-']):not([class^='mdc-']):not([class^='resizable-triangle']):not([class^='CodeMirror-cursor'])
{
@@ -581,221 +249,5 @@
border-color: var(--mat-sys-outline);
}
- * {
- // markdown styles
- markdown {
- table {
- th {
- @extend .neutral-contrast;
- }
-
- tbody {
- tr:hover {
- 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;
- }
- }
- }
- }
- }
-
- .mat-datepicker-content {
- box-shadow:
- 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
- 0px 4px 5px 0px rgba(0, 0, 0, 0.14),
- 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
- }
-
- .cdk-drop-list-dragging {
- background-color: var(--mat-sys-secondary) !important;
- }
-
- .cdk-drop-list {
- background: var(--mat-sys-surface-container-low);
- }
-
- .cdk-drag {
- color: var(--mat-sys-on-surface);
- background: var(--mat-sys-surface);
- }
-
- .cdk-drag-disabled {
- color: var(--nf-disabled);
- background: var(--mat-sys-background) !important;
- }
-
- span.grip {
- color: var(--mat-sys-on-surface);
- }
-
- ngx-skeleton-loader .skeleton-loader {
- background: var(--mat-sys-outline);
- }
-
- .markdown-clipboard-toolbar {
- opacity: 0;
- transition: opacity 250ms ease-out;
- }
-
- .markdown-clipboard-toolbar.hover {
- opacity: 1;
- }
-
- .searchable-overlay {
- .mat-mdc-form-field {
- width: 100%;
- }
-
- .search-filter {
- .mdc-text-field--focused {
- outline: none;
- border-radius: 6px;
- border-color: var(--mat-sys-primary);
- }
-
- @include mat.form-field-overrides(
- (
- outlined-container-shape: 6px
- )
- );
-
- button.primary-icon-button {
- @include mat.icon-button-overrides(
- (
- state-layer-size: 16px,
- icon-size: 10px
- )
- );
- }
-
- .fa {
- display: flex;
- justify-content: center;
- color: inherit;
- }
- }
-
- &.mat-mdc-select-panel,
- .mat-mdc-menu-content {
- padding: 0 0 8px 0;
- }
- }
-
- //form-field
- .mat-mdc-form-field-icon-prefix {
- .fa {
- font-size: 16px;
- color: var(--themed-reusable-text-primary);
- padding: 0 4px 0 0;
- }
- }
-
- .mdc-text-field--outlined,
- .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper {
- padding-left: 12px;
- padding-right: 12px;
- }
-
- // mat-select
- @include mat.select-overrides(
- (
- trigger-text-size: var(--mat-sys-body-medium-size),
- trigger-text-line-height: 16px,
- trigger-text-tracking: normal
- )
- );
-
- // mat-select panel appearance
- .mat-mdc-select-panel {
- margin-top: 8px;
- border-color: var(--mat-sys-outline);
- border-width: 1px;
- border-top-left-radius: 6px !important;
- border-top-right-radius: 6px !important;
- border-bottom-left-radius: 6px;
- border-bottom-right-radius: 6px;
- }
-
- // mat-option
- .mat-mdc-option[disabled] {
- color: var(--nf-disabled);
- opacity: 1;
- }
-
- // mat-select mat-option sizing, alignment, typography
- .mat-mdc-option {
- min-height: 32px;
- padding-top: 8px;
- padding-bottom: 8px;
- padding-left: 12px;
- padding-right: 12px;
- font-weight: 400;
-
- .mdc-list-item__primary-text {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap !important;
- font-weight: 500;
- color: inherit;
- }
-
- .fa {
- font-size: 16px;
- min-width: 16px;
- flex: 0 0 16px;
- color: inherit;
- margin-right: 4px;
- }
- }
-
- /* progress-bar status overrides */
-
- .progress-bar-success {
- @include mat.progress-bar-overrides(
- (
- active-indicator-color: var(--nf-success-default)
- )
- );
- }
-
- .progress-bar-caution {
- @include mat.progress-bar-overrides(
- (
- active-indicator-color: var(--nf-caution-default)
- )
- );
- }
-
- .progress-bar-error {
- @include mat.progress-bar-overrides(
- (
- active-indicator-color: var(--mat-sys-error)
- )
- );
- }
-
- // buttons
- .mdc-button:disabled {
- pointer-events: auto;
- cursor: not-allowed;
- }
-
- // mat-card
- @include mat.card-overrides(
- (
- title-text-size: 16px,
- title-text-line-height: 20px,
- title-text-weight: 600,
- subtitle-text-size: 14px,
- subtitle-text-line-height: 20px,
- subtitle-text-tracking: normal,
- subtitle-text-weight: 400
- )
- );
+ /* end overriding 3rd party styles */
}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_button.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_button.scss
new file mode 100644
index 00000000000..9152906b159
--- /dev/null
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_button.scss
@@ -0,0 +1,92 @@
+/*!
+ * 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.
+ */
+
+@use '@angular/material' as mat;
+
+@mixin generate-material-theme() {
+ :root {
+ @include mat.button-overrides(
+ (
+ filled-container-shape: 4px,
+ filled-label-text-tracking: normal,
+ filled-label-text-weight: 400,
+ outlined-container-shape: 4px,
+ outlined-label-text-tracking: normal,
+ outlined-label-text-weight: 400,
+ outlined-horizontal-padding: 15px,
+ outlined-container-height: 32px,
+ text-container-shape: 4px,
+ text-label-text-tracking: normal,
+ text-label-text-weight: 400
+ )
+ );
+
+ .mdc-button:disabled {
+ pointer-events: auto;
+ cursor: not-allowed;
+ }
+
+ @include mat.icon-button-overrides(
+ (
+ state-layer-size: 36px,
+ icon-size: 14px
+ )
+ );
+
+ .mat-mdc-icon-button {
+ &.mat-mdc-button-base.mdc-icon-button {
+ padding: 0;
+ }
+ }
+
+ .primary-icon-button {
+ @include mat.icon-button-overrides(
+ (
+ icon-color: var(--md-ref-palette-primary-40)
+ )
+ );
+ }
+
+ .error-button {
+ @include mat.button-overrides(
+ (
+ filled-container-color: var(--md-ref-palette-error-40),
+ filled-label-text-color: var(--md-ref-palette-error-100)
+ )
+ );
+ }
+ }
+
+ .darkMode {
+ .primary-icon-button {
+ @include mat.icon-button-overrides(
+ (
+ icon-color: var(--md-ref-palette-primary-80)
+ )
+ );
+ }
+
+ .error-button {
+ @include mat.button-overrides(
+ (
+ filled-container-color: var(--md-ref-palette-error-50),
+ filled-label-text-color: var(--md-ref-palette-error-100)
+ )
+ );
+ }
+ }
+}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_card.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_card.scss
new file mode 100644
index 00000000000..dc0a52aa0d7
--- /dev/null
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_card.scss
@@ -0,0 +1,38 @@
+/*!
+ * 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.
+ */
+
+@use '@angular/material' as mat;
+
+@mixin generate-material-theme() {
+ :root {
+ @include mat.card-overrides(
+ (
+ title-text-size: 16px,
+ title-text-line-height: 20px,
+ title-text-weight: 600,
+ subtitle-text-size: 14px,
+ subtitle-text-line-height: 20px,
+ subtitle-text-tracking: normal,
+ subtitle-text-weight: 400
+ )
+ );
+
+ .mat-mdc-card-header-text {
+ width: 100%;
+ }
+ }
+}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_checkbox.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_checkbox.scss
new file mode 100644
index 00000000000..10aa378ee5e
--- /dev/null
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_checkbox.scss
@@ -0,0 +1,40 @@
+/*!
+ * 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.
+ */
+
+@use '@angular/material' as mat;
+
+@mixin generate-material-theme() {
+ :root {
+ .tertiary-checkbox {
+ @include mat.checkbox-overrides(
+ (
+ selected-icon-color: var(--md-ref-palette-tertiary-40)
+ )
+ );
+ }
+ }
+
+ .darkMode {
+ .tertiary-checkbox {
+ @include mat.checkbox-overrides(
+ (
+ selected-icon-color: var(--md-ref-palette-tertiary-70)
+ )
+ );
+ }
+ }
+}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_date-picker.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_date-picker.scss
new file mode 100644
index 00000000000..65e00eda7e6
--- /dev/null
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_date-picker.scss
@@ -0,0 +1,33 @@
+/*!
+ * 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.
+ */
+
+@use '@angular/material' as mat;
+
+@mixin generate-material-theme() {
+ :root {
+ mat-datepicker-toggle
.mat-mdc-icon-button.mat-mdc-button-base.mdc-icon-button {
+ padding: 11px; //center the mat-icon-button inside the date picker
form field
+ }
+
+ .mat-datepicker-content {
+ box-shadow:
+ 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
+ 0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+ 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+ }
+ }
+}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_dialog.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_dialog.scss
new file mode 100644
index 00000000000..c896be361c4
--- /dev/null
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_dialog.scss
@@ -0,0 +1,39 @@
+/*!
+ * 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.
+ */
+
+@use '@angular/material' as mat;
+
+@mixin generate-material-theme() {
+ :root {
+ @include mat.dialog-overrides(
+ (
+ content-padding: 20px 24px,
+ headline-padding: 0 24px 9px,
+ container-shape: 6px
+ )
+ );
+
+ .dialog-tab-content,
+ .dialog-content {
+ height: 50vh;
+ }
+
+ .mat-mdc-dialog-actions {
+ border: none !important;
+ }
+ }
+}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_drag-and-drop.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_drag-and-drop.scss
new file mode 100644
index 00000000000..95aa10d40a5
--- /dev/null
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_drag-and-drop.scss
@@ -0,0 +1,83 @@
+/*!
+ * 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.
+ */
+
+@use '@angular/material' as mat;
+
+@mixin generate-material-theme() {
+ :root {
+ .cdk-drop-list {
+ background: var(--mat-sys-surface-container-low);
+ }
+
+ .cdk-drag {
+ color: var(--mat-sys-on-surface);
+ background: var(--mat-sys-surface);
+ }
+
+ .cdk-drag-disabled {
+ cursor: not-allowed !important;
+ color: var(--nf-disabled);
+ background: var(--mat-sys-background) !important;
+ }
+
+ .cdk-drag-placeholder {
+ opacity: 0;
+ }
+
+ .cdk-drop-list-dragging {
+ cursor: grabbing;
+ background-color: var(--mat-sys-secondary) !important;
+ }
+
+ .cdk-drag:hover {
+ cursor: grab;
+ }
+
+ .cdk-list {
+ min-height: 34px;
+ border-radius: 4px;
+ overflow: hidden;
+ display: block;
+ user-select: none;
+ }
+
+ span.grip {
+ width: 12px;
+ height: 36px;
+ display: block;
+ line-height: 6px;
+ letter-spacing: 1px;
+ color: var(--mat-sys-on-surface);
+ }
+
+ .cdk-drag:hover {
+ span.grip::after {
+ content: '.. .. .. .. ..';
+ }
+ }
+
+ .cdk-drag-disabled {
+ font-style: italic;
+ }
+
+ .cdk-drag:hover {
+ span.grip::after {
+ content: '.. .. .. .. ..';
+ }
+ }
+ }
+}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_expansion-panel.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_expansion-panel.scss
new file mode 100644
index 00000000000..097464ad23d
--- /dev/null
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_expansion-panel.scss
@@ -0,0 +1,43 @@
+/*!
+ * 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.
+ */
+
+@use '@angular/material' as mat;
+
+@mixin generate-material-theme() {
+ :root {
+ @include mat.expansion-overrides(
+ (
+ container-shape: 6px,
+ header-expanded-state-height: 50px
+ )
+ );
+
+ .mat-expansion-panel-body {
+ overflow-y: auto;
+ }
+
+ .mat-expansion-panel-header.mat-expanded {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+
+ .mat-content.mat-content-hide-toggle {
+ margin-right: 0 !important;
+ height: 48px;
+ }
+ }
+}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_form-field.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_form-field.scss
new file mode 100644
index 00000000000..2cdf5cda126
--- /dev/null
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_form-field.scss
@@ -0,0 +1,57 @@
+/*!
+ * 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.
+ */
+
+@use '@angular/material' as mat;
+
+@mixin generate-material-theme() {
+ :root {
+ .mdc-notched-outline__notch {
+ border-right: none;
+ }
+
+ .mat-mdc-form-field-infix {
+ min-width: 180px !important;
+ width: 180px !important;
+ }
+
+ .mdc-text-field--outlined .mat-mdc-form-field-infix {
+ line-height: 24px;
+ }
+
+ .mat-mdc-form-field-icon-prefix {
+ .fa {
+ font-size: 16px;
+ padding: 0 4px 0 0;
+ }
+ }
+
+ mat-select-trigger {
+ button.primary-icon-button {
+ @include mat.icon-button-overrides(
+ (
+ state-layer-size: 16px,
+ icon-size: 10px
+ )
+ );
+ }
+ }
+
+ .mat-mdc-form-field-type-mat-select:not(.mat-form-field-disabled)
.mat-mdc-text-field-wrapper {
+ cursor: default;
+ }
+ }
+}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_markdown.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_markdown.scss
new file mode 100644
index 00000000000..8b191552ed6
--- /dev/null
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_markdown.scss
@@ -0,0 +1,151 @@
+/*!
+ * 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.
+ */
+
+@use '@angular/material' as mat;
+
+@mixin generate-material-theme() {
+ :root {
+ .mat-typography.text-base markdown {
+ h1 {
+ margin: 16px 0;
+ line-height: 28px;
+ font-size: 20px;
+ font-weight: 700;
+ }
+
+ h2 {
+ margin: 16px 0;
+ line-height: 28px;
+ font-size: 18px;
+ font-weight: 700;
+ }
+
+ h3 {
+ margin: 16px 0;
+ line-height: 28px;
+ font-size: 16px;
+ font-weight: 600;
+ }
+
+ h4 {
+ margin: unset;
+ line-height: 20px;
+ font-size: 14px;
+ font-weight: 600;
+ }
+
+ h5 {
+ margin: unset;
+ line-height: 20px;
+ font-size: 12px;
+ font-weight: 400;
+ }
+
+ h6 {
+ margin: unset;
+ line-height: 12px;
+ font-size: 10px;
+ font-weight: 400;
+ }
+
+ ul {
+ list-style: disc outside;
+ margin: 1em;
+ }
+
+ ol {
+ list-style: auto outside;
+ margin: 1em;
+ }
+
+ p {
+ margin: 8px 0;
+ }
+
+ table {
+ display: table;
+ border-width: 1px;
+ margin-bottom: 1em;
+ width: 100%;
+ table-layout: fixed;
+ text-align: left;
+ border-collapse: separate;
+ border-spacing: 0;
+
+ th {
+ user-select: none;
+ }
+
+ td,
+ th {
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ cursor: default;
+ text-wrap: wrap;
+ padding: 8px;
+ word-break: break-word;
+ }
+
+ th {
+ text-transform: uppercase;
+ }
+
+ ul {
+ list-style-type: disc;
+ list-style-position: inside;
+ text-wrap: wrap;
+ word-break: break-all;
+ }
+ }
+ }
+
+ .markdown-clipboard-toolbar {
+ opacity: 0;
+ transition: opacity 250ms ease-out;
+ }
+
+ .markdown-clipboard-toolbar.hover {
+ opacity: 1;
+ }
+
+ * {
+ markdown {
+ table {
+ th {
+ @extend .neutral-contrast !optional;
+ }
+
+ tbody {
+ tr:hover {
+ 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;
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_menu.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_menu.scss
new file mode 100644
index 00000000000..097c140b3a8
--- /dev/null
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_menu.scss
@@ -0,0 +1,53 @@
+/*!
+ * 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.
+ */
+
+@use '@angular/material' as mat;
+
+@mixin generate-material-theme() {
+ :root {
+ @include mat.menu-overrides(
+ (
+ divider-top-spacing: 0,
+ divider-bottom-spacing: 0
+ )
+ );
+
+ .mat-mdc-menu-panel {
+ max-width: 420px;
+
+ .fa {
+ width: 14px;
+ height: 14px;
+ text-align: center;
+ }
+
+ .icon {
+ display: inline-block;
+ width: 14px;
+ text-align: center;
+ }
+ }
+
+ .mat-mdc-menu-content {
+ height: 100%;
+ }
+
+ .mat-mdc-menu-content .mat-mdc-menu-item {
+ min-height: 2.25rem;
+ }
+ }
+}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_option.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_option.scss
new file mode 100644
index 00000000000..d36225beabe
--- /dev/null
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_option.scss
@@ -0,0 +1,107 @@
+/*!
+ * 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.
+ */
+
+@use '@angular/material' as mat;
+
+@mixin generate-material-theme() {
+ :root {
+ @include mat.option-overrides(
+ (
+ selected-state-layer-color: var(--mat-sys-secondary-container),
+ selected-state-label-text-color:
var(--mat-sys-on-secondary-container)
+ )
+ );
+
+ .mat-mdc-option {
+ .mdc-list-item__primary-text {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap !important;
+ }
+
+ .fa {
+ font-size: 16px;
+ min-width: 16px;
+ flex: 0 0 16px;
+ color: inherit;
+ margin-right: 4px;
+ flex-shrink: 0;
+ }
+ }
+
+ .mat-mdc-option.mdc-list-item {
+ min-height: 48px;
+ padding: 0 16px;
+ align-items: center;
+ background: transparent;
+ }
+
+ .mdc-list-item.mdc-list-item--disabled {
+ cursor: default;
+ color: var(--nf-disabled);
+ }
+
+ .mat-mdc-option[disabled] {
+ color: var(--nf-disabled);
+ opacity: 1;
+ }
+
+ // MatOption's component styles are only auto-injected by Angular
Material when a real
+ // <mat-option> element is rendered. MultiSelectOption provides
MatOption via DI but uses
+ // a custom element, so the state-layer background rules are declared
explicitly here.
+ .mat-mdc-option:hover:not(.mdc-list-item--disabled) {
+ background-color: var(
+ --mat-option-hover-state-layer-color,
+ color-mix(
+ in srgb,
+ var(--mat-sys-on-surface)
calc(var(--mat-sys-hover-state-layer-opacity) * 100%),
+ transparent
+ )
+ );
+ }
+
+ .mat-mdc-option:focus.mdc-list-item,
+ .mat-mdc-option.mat-mdc-option-active.mdc-list-item {
+ background-color: var(
+ --mat-option-focus-state-layer-color,
+ color-mix(
+ in srgb,
+ var(--mat-sys-on-surface)
calc(var(--mat-sys-focus-state-layer-opacity) * 100%),
+ transparent
+ )
+ );
+ outline: 0;
+ }
+
+
.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(
+ .mat-mdc-option-active,
+ .mat-mdc-option-multiple,
+ :focus,
+ :hover
+ ) {
+ background-color: var(--mat-option-selected-state-layer-color,
var(--mat-sys-secondary-container));
+
+ .mdc-list-item__primary-text {
+ color: var(--mat-option-selected-state-label-text-color,
var(--mat-sys-on-secondary-container));
+ }
+ }
+
+ .mat-mdc-option-active .mat-focus-indicator::before {
+ content: '';
+ }
+ }
+}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_paginator.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_paginator.scss
new file mode 100644
index 00000000000..00c62d1f2a4
--- /dev/null
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_paginator.scss
@@ -0,0 +1,26 @@
+/*!
+ * 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.
+ */
+
+@use '@angular/material' as mat;
+
+@mixin generate-material-theme() {
+ :root {
+ .mat-mdc-paginator {
+ background-color: unset !important;
+ }
+ }
+}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_progress-bar.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_progress-bar.scss
new file mode 100644
index 00000000000..f39dcfd23fb
--- /dev/null
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_progress-bar.scss
@@ -0,0 +1,46 @@
+/*!
+ * 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.
+ */
+
+@use '@angular/material' as mat;
+
+@mixin generate-material-theme() {
+ :root {
+ .progress-bar-success {
+ @include mat.progress-bar-overrides(
+ (
+ active-indicator-color: var(--nf-success-default)
+ )
+ );
+ }
+
+ .progress-bar-caution {
+ @include mat.progress-bar-overrides(
+ (
+ active-indicator-color: var(--nf-caution-default)
+ )
+ );
+ }
+
+ .progress-bar-error {
+ @include mat.progress-bar-overrides(
+ (
+ active-indicator-color: var(--mat-sys-error)
+ )
+ );
+ }
+ }
+}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_progress-spinner.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_progress-spinner.scss
new file mode 100644
index 00000000000..be6d9b4c1a4
--- /dev/null
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_progress-spinner.scss
@@ -0,0 +1,40 @@
+/*!
+ * 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.
+ */
+
+@use '@angular/material' as mat;
+
+@mixin generate-material-theme() {
+ :root {
+ .tertiary-spinner {
+ @include mat.progress-spinner-overrides(
+ (
+ active-indicator-color: var(--md-ref-palette-tertiary-40)
+ )
+ );
+ }
+ }
+
+ .darkMode {
+ .tertiary-spinner {
+ @include mat.progress-spinner-overrides(
+ (
+ active-indicator-color: var(--md-ref-palette-tertiary-70)
+ )
+ );
+ }
+ }
+}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_searchable-overlay.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_searchable-overlay.scss
new file mode 100644
index 00000000000..45fe94d88d1
--- /dev/null
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_searchable-overlay.scss
@@ -0,0 +1,62 @@
+/*!
+ * 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.
+ */
+
+@use '@angular/material' as mat;
+
+@mixin generate-material-theme() {
+ :root {
+ .searchable-overlay {
+ .mat-mdc-form-field {
+ width: 100%;
+ }
+
+ .search-filter {
+ .mdc-text-field--focused {
+ outline: none;
+ border-radius: 6px;
+ border-color: var(--mat-sys-primary);
+ }
+
+ @include mat.form-field-overrides(
+ (
+ outlined-container-shape: 6px
+ )
+ );
+
+ button.primary-icon-button {
+ @include mat.icon-button-overrides(
+ (
+ state-layer-size: 16px,
+ icon-size: 10px
+ )
+ );
+ }
+
+ .fa {
+ display: flex;
+ justify-content: center;
+ color: inherit;
+ }
+ }
+
+ &.mat-mdc-select-panel,
+ .mat-mdc-menu-content {
+ padding: 0 0 8px 0;
+ }
+ }
+ }
+}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_sidenav.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_sidenav.scss
new file mode 100644
index 00000000000..c01b5b50ed3
--- /dev/null
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_sidenav.scss
@@ -0,0 +1,29 @@
+/*!
+ * 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.
+ */
+
+@use '@angular/material' as mat;
+
+@mixin generate-material-theme() {
+ :root {
+ @include mat.sidenav-overrides(
+ (
+ container-width: auto,
+ container-shape: 0
+ )
+ );
+ }
+}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_skeleton.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_skeleton.scss
new file mode 100644
index 00000000000..53cbc6e5842
--- /dev/null
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_skeleton.scss
@@ -0,0 +1,26 @@
+/*!
+ * 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.
+ */
+
+@use '@angular/material' as mat;
+
+@mixin generate-material-theme() {
+ :root {
+ ngx-skeleton-loader .skeleton-loader {
+ background: var(--mat-sys-outline);
+ }
+ }
+}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_snackbar.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_snackbar.scss
new file mode 100644
index 00000000000..5c57f232a91
--- /dev/null
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_snackbar.scss
@@ -0,0 +1,36 @@
+/*!
+ * 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.
+ */
+
+@use '@angular/material' as mat;
+
+@mixin generate-material-theme() {
+ :root {
+ @include mat.snack-bar-overrides(
+ (
+ button-color: var(--md-ref-palette-secondary-80)
+ )
+ );
+ }
+
+ .darkMode {
+ @include mat.snack-bar-overrides(
+ (
+ button-color: #004849
+ )
+ );
+ }
+}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_status-variant.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_status-variant.scss
new file mode 100644
index 00000000000..9c50ee6adfc
--- /dev/null
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_status-variant.scss
@@ -0,0 +1,68 @@
+/*!
+ * 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.
+ */
+
+@use '@angular/material' as mat;
+
+@mixin generate-material-theme() {
+ :root {
+ // NOTE: The following styles are for the status badge and status
banner components. The `.status-variant` class should only be applied to a div
or span element that should adhear to the variant color and background.
+ .status-variant {
+ &.neutral {
+ color: var(--mat-sys-on-surface);
+ background-color: var(--mat-sys-surface-dim);
+ }
+ &.critical {
+ color: var(--mat-sys-on-error);
+ background-color: var(--mat-sys-error);
+ }
+ &.caution {
+ color: var(--nf-caution-contrast);
+ background-color: var(--nf-caution-default);
+ }
+ &.success {
+ color: var(--nf-success-contrast);
+ background-color: var(--nf-success-default);
+ }
+ &.info {
+ color: var(--nf-success-contrast);
+ background-color: var(--nf-success-variant);
+ }
+
+ .fa {
+ &.neutral {
+ color: var(--mat-sys-on-surface);
+ }
+
+ &.critical {
+ color: var(--mat-sys-on-error);
+ }
+
+ &.caution {
+ color: var(--nf-caution-contrast);
+ }
+
+ &.success {
+ color: var(--nf-success-contrast);
+ }
+
+ &.info {
+ color: var(--nf-success-contrast);
+ }
+ }
+ }
+ }
+}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_tab.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_tab.scss
new file mode 100644
index 00000000000..0affca85925
--- /dev/null
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_tab.scss
@@ -0,0 +1,34 @@
+/*!
+ * 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.
+ */
+
+@use '@angular/material' as mat;
+
+@mixin generate-material-theme() {
+ :root {
+ @include mat.tabs-overrides(
+ (
+ label-text-tracking: normal,
+ label-text-weight: 400,
+ container-height: 36px
+ )
+ );
+
+ .mat-mdc-tab-header {
+ user-select: none;
+ }
+ }
+}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_tree.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_tree.scss
new file mode 100644
index 00000000000..de7b65b3118
--- /dev/null
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_tree.scss
@@ -0,0 +1,27 @@
+/*!
+ * 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.
+ */
+
+@use '@angular/material' as mat;
+
+@mixin generate-material-theme() {
+ :root {
+ .mat-tree {
+ display: inline !important;
+ background-color: unset !important;
+ }
+ }
+}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_typography.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_typography.scss
new file mode 100644
index 00000000000..efa7e1904ee
--- /dev/null
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/components/_typography.scss
@@ -0,0 +1,133 @@
+/*!
+ * 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.
+ */
+
+@use '@angular/material' as mat;
+
+@use '@fontsource/inter' as inter-normal;
+@use '@fontsource/inter/400.css' as inter-400;
+@use '@fontsource/inter/400-italic.css' as inter-italic;
+@use '@fontsource/inter/700.css' as inter-700;
+
+@layer base {
+ @font-face {
+ font-family: 'Inter';
+ }
+}
+
+@mixin generate-material-theme() {
+ :root {
+ .mat-typography.text-base {
+ font-family: var(--mat-sys-body-medium-font);
+ line-height: var(--mat-sys-body-medium-line-height);
+ font-size: var(--mat-sys-body-medium-size);
+ font-weight: var(--mat-sys-body-medium-weight);
+ letter-spacing: normal;
+
+ h2 {
+ margin: unset;
+ line-height: 28px;
+ font-size: 18px;
+ font-weight: 700;
+ }
+
+ h3 {
+ margin: 0 0 16px;
+ line-height: 28px;
+ font-size: 20px;
+ font-weight: 700;
+ }
+
+ h4 {
+ margin: unset;
+ line-height: 20px;
+ font-size: 14px;
+ font-weight: 400;
+ }
+
+ a {
+ letter-spacing: normal;
+ }
+
+ .mdc-text-field--outlined .mdc-floating-label {
+ font-size: var(--mat-sys-body-medium-size);
+ letter-spacing: normal;
+ line-height: normal;
+ }
+
+ .mat-mdc-select {
+ font-size: var(--mat-sys-body-medium-size);
+ letter-spacing: normal;
+ line-height: normal;
+ }
+
+ .mat-mdc-option {
+ font-size: var(--mat-sys-body-medium-size);
+ letter-spacing: normal;
+ line-height: normal;
+ }
+
+ .mat-mdc-form-field {
+ font-size: var(--mat-sys-body-medium-size);
+ letter-spacing: normal;
+ line-height: normal;
+ }
+
+ .mdc-dialog__content {
+ font-size: var(--mat-sys-body-medium-size) !important;
+ }
+
+ .mat-tree-node,
+ .mat-nested-tree-node {
+ font-size: var(--mat-sys-body-medium-size);
+ letter-spacing: normal;
+ line-height: normal;
+ }
+
+ .mat-mdc-header-cell {
+ font-weight: 700;
+ }
+
+ .mat-expansion-panel-header {
+ font-size: var(--mat-sys-body-medium-size);
+ letter-spacing: normal;
+ line-height: normal;
+ font-weight: 700;
+ }
+
+ .mat-expansion-panel-content {
+ font-size: var(--mat-sys-body-medium-size);
+ letter-spacing: normal;
+ line-height: 20px;
+ }
+
+ .mat-mdc-menu-content,
+ .mat-mdc-menu-content .mat-mdc-menu-item .mat-mdc-menu-item-text {
+ --mat-menu-item-label-text-weight:
var(--mat-sys-body-medium-weight);
+ }
+
+ .mdc-list-item__primary-text {
+ font-size: var(--mat-sys-body-medium-size);
+ letter-spacing: normal;
+ line-height: normal;
+ }
+
+ .mat-drawer {
+ color: var(--mat-app-text-color);
+ }
+ }
+ }
+}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/material.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/material.scss
index e84a58b109c..42ceeb695c2 100644
---
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/material.scss
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/material.scss
@@ -18,16 +18,28 @@
@use 'sass:map';
@use '@angular/material' as mat;
-@use '@fontsource/inter' as inter-normal;
-@use '@fontsource/inter/400.css' as inter-400;
-@use '@fontsource/inter/400-italic.css' as inter-italic;
-@use '@fontsource/inter/700.css' as inter-700;
-
-@layer base {
- @font-face {
- font-family: 'Inter';
- }
-}
+@use './components/button' as buttons;
+@use './components/card' as card;
+@use './components/checkbox' as checkbox;
+@use './components/date-picker' as date-picker;
+@use './components/dialog' as dialog;
+@use './components/drag-and-drop' as drag-and-drop;
+@use './components/expansion-panel' as expansion;
+@use './components/form-field' as form-field;
+@use './components/markdown' as markdown;
+@use './components/menu' as menu;
+@use './components/option' as option;
+@use './components/paginator' as paginator;
+@use './components/progress-bar' as progress-bar;
+@use './components/progress-spinner' as progress-spinner;
+@use './components/searchable-overlay' as searchable-overlay;
+@use './components/sidenav' as sidenav;
+@use './components/skeleton' as skeleton;
+@use './components/snackbar' as snackbar;
+@use './components/status-variant' as status-variant;
+@use './components/tab' as tab;
+@use './components/tree' as tree;
+@use './components/typography' as typography;
:root {
/* Material Design color palettes and typography for light mode. These are
used by Angular Material SASS api's to define the theme for all Angular
Material components. These variable should NOT be referenced outside of the
theme file. */
@@ -262,151 +274,6 @@
inverse-tertiary: var(--md-ref-palette-tertiary-80)
)
);
-
- @include mat.sidenav-overrides(
- (
- container-width: auto,
- container-shape: 0
- )
- );
-
- @include mat.expansion-overrides(
- (
- container-shape: 6px,
- header-expanded-state-height: 50px
- )
- );
-
- @include mat.menu-overrides(
- (
- divider-top-spacing: 0,
- divider-bottom-spacing: 0
- )
- );
-
- @include mat.dialog-overrides(
- (
- content-padding: 20px 24px,
- headline-padding: 0 24px 9px,
- container-shape: 6px
- )
- );
-
- @include mat.icon-button-overrides(
- (
- state-layer-size: 36px,
- icon-size: 14px
- )
- );
-
- @include mat.button-overrides(
- (
- filled-container-shape: 4px,
- filled-label-text-tracking: normal,
- filled-label-text-weight: 400,
- outlined-container-shape: 4px,
- outlined-label-text-tracking: normal,
- outlined-label-text-weight: 400,
- outlined-horizontal-padding: 15px,
- outlined-container-height: 32px,
- text-container-shape: 4px,
- text-label-text-tracking: normal,
- text-label-text-weight: 400
- )
- );
-
- @include mat.tabs-overrides(
- (
- label-text-tracking: normal,
- label-text-weight: 400,
- container-height: 36px
- )
- );
-
- @include mat.snack-bar-overrides(
- (
- button-color: var(--md-ref-palette-secondary-80)
- )
- );
-
- .tertiary-checkbox {
- @include mat.checkbox-overrides(
- (
- selected-icon-color: var(--md-ref-palette-tertiary-40)
- )
- );
- }
-
- .primary-icon-button {
- @include mat.icon-button-overrides(
- (
- icon-color: var(--md-ref-palette-primary-40)
- )
- );
- }
-
- .error-button {
- @include mat.button-overrides(
- (
- filled-container-color: var(--md-ref-palette-error-40),
- filled-label-text-color: var(--md-ref-palette-error-100)
- )
- );
- }
-
- .tertiary-spinner {
- @include mat.progress-spinner-overrides(
- (
- active-indicator-color: var(--md-ref-palette-tertiary-40)
- )
- );
- }
-
- // NOTE: The following styles are for the status badge and status banner
components. The `.status-variant` class should only be applied to a div or span
element that should adhear to the variant color and background.
- .status-variant {
- &.neutral {
- color: var(--mat-sys-on-surface);
- background-color: var(--mat-sys-surface-dim);
- }
- &.critical {
- color: var(--mat-sys-on-error);
- background-color: var(--mat-sys-error);
- }
- &.caution {
- color: var(--nf-caution-contrast);
- background-color: var(--nf-caution-default);
- }
- &.success {
- color: var(--nf-success-contrast);
- background-color: var(--nf-success-default);
- }
- &.info {
- color: var(--nf-success-contrast);
- background-color: var(--nf-success-variant);
- }
-
- .fa {
- &.neutral {
- color: var(--mat-sys-on-surface);
- }
-
- &.critical {
- color: var(--mat-sys-on-error);
- }
-
- &.caution {
- color: var(--nf-caution-contrast);
- }
-
- &.success {
- color: var(--nf-success-contrast);
- }
-
- &.info {
- color: var(--nf-success-contrast);
- }
- }
- }
}
// Note: Color palettes are generated from primary: #6750a4
@@ -801,149 +668,27 @@ html {
inverse-tertiary: var(--md-ref-palette-tertiary-70)
)
);
-
- @include mat.sidenav-overrides(
- (
- container-width: auto,
- container-shape: 0
- )
- );
-
- @include mat.expansion-overrides(
- (
- container-shape: 6px,
- header-expanded-state-height: 50px
- )
- );
-
- @include mat.menu-overrides(
- (
- divider-top-spacing: 0,
- divider-bottom-spacing: 0
- )
- );
-
- @include mat.dialog-overrides(
- (
- content-padding: 20px 24px,
- headline-padding: 0 24px 9px,
- container-shape: 6px
- )
- );
-
- @include mat.icon-button-overrides(
- (
- state-layer-size: 36px,
- icon-size: 14px
- )
- );
-
- @include mat.button-overrides(
- (
- filled-container-shape: 4px,
- filled-label-text-tracking: normal,
- filled-label-text-weight: 400,
- outlined-container-shape: 4px,
- outlined-label-text-tracking: normal,
- outlined-label-text-weight: 400,
- outlined-horizontal-padding: 15px,
- outlined-container-height: 32px,
- text-container-shape: 4px,
- text-label-text-tracking: normal,
- text-label-text-weight: 400
- )
- );
-
- @include mat.tabs-overrides(
- (
- label-text-tracking: normal,
- label-text-weight: 400,
- container-height: 36px
- )
- );
-
- @include mat.snack-bar-overrides(
- (
- button-color: #004849
- )
- );
-
- .tertiary-checkbox {
- @include mat.checkbox-overrides(
- (
- selected-icon-color: var(--md-ref-palette-tertiary-70)
- )
- );
- }
-
- .primary-icon-button {
- @include mat.icon-button-overrides(
- (
- icon-color: var(--md-ref-palette-primary-80)
- )
- );
- }
-
- .error-button {
- @include mat.button-overrides(
- (
- filled-container-color: var(--md-ref-palette-error-50),
- filled-label-text-color: var(--md-ref-palette-error-100)
- )
- );
- }
-
- .tertiary-spinner {
- @include mat.progress-spinner-overrides(
- (
- active-indicator-color: var(--md-ref-palette-tertiary-70)
- )
- );
- }
-
- // NOTE: The following styles are for the status badge and status banner
components. The `.status-variant` class should only be applied to a div or span
element that should adhear to the variant color and background.
- .status-variant {
- &.neutral {
- color: var(--mat-sys-on-surface);
- background-color: var(--mat-sys-surface-dim);
- }
- &.critical {
- color: var(--mat-sys-on-error);
- background-color: var(--mat-sys-error);
- }
- &.caution {
- color: var(--nf-caution-contrast);
- background-color: var(--nf-caution-default);
- }
- &.success {
- color: var(--nf-success-contrast);
- background-color: var(--nf-success-default);
- }
- &.info {
- color: var(--nf-success-contrast);
- background-color: var(--nf-success-variant);
- }
-
- .fa {
- &.neutral {
- color: var(--mat-sys-on-surface);
- }
-
- &.critical {
- color: var(--mat-sys-on-error);
- }
-
- &.caution {
- color: var(--nf-caution-contrast);
- }
-
- &.success {
- color: var(--nf-success-contrast);
- }
-
- &.info {
- color: var(--nf-success-contrast);
- }
- }
- }
}
+
+@include buttons.generate-material-theme();
+@include card.generate-material-theme();
+@include checkbox.generate-material-theme();
+@include date-picker.generate-material-theme();
+@include dialog.generate-material-theme();
+@include drag-and-drop.generate-material-theme();
+@include expansion.generate-material-theme();
+@include form-field.generate-material-theme();
+@include markdown.generate-material-theme();
+@include menu.generate-material-theme();
+@include option.generate-material-theme();
+@include paginator.generate-material-theme();
+@include progress-bar.generate-material-theme();
+@include progress-spinner.generate-material-theme();
+@include searchable-overlay.generate-material-theme();
+@include sidenav.generate-material-theme();
+@include skeleton.generate-material-theme();
+@include snackbar.generate-material-theme();
+@include status-variant.generate-material-theme();
+@include tab.generate-material-theme();
+@include tree.generate-material-theme();
+@include typography.generate-material-theme();
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/purple.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/purple.scss
index fa8ca407515..2374626356c 100644
--- a/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/purple.scss
+++ b/nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/purple.scss
@@ -18,6 +18,26 @@
@use 'sass:map';
@use '@angular/material' as mat;
+// ---------------------------------------------------------------------------
+// OPTION 1: Do nothing to use Angular Material with no component overrides
+// ---------------------------------------------------------------------------
+
+//---------------------------------------------------------------------------
+// OPTION 2: Reuse NiFi's existing component customizations
+// ---------------------------------------------------------------------------
+// Import partials from ./components/ and call their generate-material-theme()
+// mixin. These encapsulate the overrides used by the default NiFi theme
+// (material.scss). You can import as many or as few as you need.
+@use './components/dialog' as dialog;
+
+// ---------------------------------------------------------------------------
+// OPTION 3: Write your own component overrides from scratch
+// ---------------------------------------------------------------------------
+// Angular Material exposes per-component *-overrides() mixins that accept a
+// map of token overrides. Each component has its own set of tokens.
+//
+// To discover available tokens for a component, consult the Angular Material
+// source or docs: https://material.angular.io/guide/theming#component-styles
@layer base {
//fonts are loaded by the browser
@font-face {
@@ -257,45 +277,6 @@
inverse-tertiary: var(--md-ref-palette-tertiary-80)
)
);
-
- @include mat.snack-bar-overrides(
- (
- button-color: var(--md-ref-palette-secondary-80)
- )
- );
-
- .tertiary-checkbox {
- @include mat.checkbox-overrides(
- (
- selected-icon-color: var(--md-ref-palette-tertiary-40)
- )
- );
- }
-
- .primary-icon-button {
- @include mat.icon-button-overrides(
- (
- icon-color: var(--md-ref-palette-primary-40)
- )
- );
- }
-
- .error-button {
- @include mat.button-overrides(
- (
- filled-container-color: var(--md-ref-palette-error-40),
- filled-label-text-color: var(--md-ref-palette-error-100)
- )
- );
- }
-
- .tertiary-spinner {
- @include mat.progress-spinner-overrides(
- (
- active-indicator-color: var(--md-ref-palette-tertiary-40)
- )
- );
- }
}
// Note: Color palettes are generated from primary: #6750a4
@@ -694,43 +675,6 @@ html {
inverse-tertiary: var(--md-ref-palette-tertiary-70)
)
);
-
- @include mat.snack-bar-overrides(
- (
- button-color: #004849
- )
- );
-
- .tertiary-checkbox {
- @include mat.checkbox-overrides(
- (
- selected-icon-color: var(--md-ref-palette-tertiary-70)
- )
- );
- }
-
- .primary-icon-button {
- @include mat.icon-button-overrides(
- (
- icon-color: var(--md-ref-palette-primary-80)
- )
- );
- }
-
- .error-button {
- @include mat.button-overrides(
- (
- filled-container-color: var(--md-ref-palette-error-50),
- filled-label-text-color: var(--md-ref-palette-error-100)
- )
- );
- }
-
- .tertiary-spinner {
- @include mat.progress-spinner-overrides(
- (
- active-indicator-color: var(--md-ref-palette-tertiary-70)
- )
- );
- }
}
+
+@include dialog.generate-material-theme();
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/components/copy-button/copy-button.component.ts
b/nifi-frontend/src/main/frontend/libs/shared/src/components/copy-button/copy-button.component.ts
index 5097454d537..0abd65ce54b 100644
---
a/nifi-frontend/src/main/frontend/libs/shared/src/components/copy-button/copy-button.component.ts
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/components/copy-button/copy-button.component.ts
@@ -20,7 +20,9 @@ import { MatIconButton } from '@angular/material/button';
@Component({
selector: 'copy-button',
- template: ` <button mat-icon-button class="primary-icon-button"><i
class="fa fa-copy"></i></button>`,
+ template: ` <button mat-icon-button class="primary-icon-button
hover:cursor-pointer">
+ <i class="fa fa-copy"></i>
+ </button>`,
imports: [MatIconButton]
})
export class CopyButtonComponent {}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/components/multi-select-option/multi-select-option.component.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/components/multi-select-option/multi-select-option.component.scss
index b493f6266ec..0b2f38497d3 100644
---
a/nifi-frontend/src/main/frontend/libs/shared/src/components/multi-select-option/multi-select-option.component.scss
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/components/multi-select-option/multi-select-option.component.scss
@@ -15,106 +15,12 @@
* limitations under the License.
*/
-@use '@angular/material' as mat;
-
-// Forward --mat-option-* CSS custom properties onto multi-select-option
elements.
-// mat.theme() only emits system-level --mat-sys-* tokens; component-specific
tokens
-// need to be set explicitly for custom elements that extend MatOption.
-multi-select-option {
- @include mat.option-overrides(
- (
- hover-state-layer-color: color-mix(
- in srgb,
- var(--mat-sys-on-surface)
calc(var(--mat-sys-hover-state-layer-opacity) * 100%),
- transparent
- ),
- focus-state-layer-color: color-mix(
- in srgb,
- var(--mat-sys-on-surface)
calc(var(--mat-sys-focus-state-layer-opacity) * 100%),
- transparent
- ),
- selected-state-layer-color: var(--mat-sys-secondary-container),
- selected-state-label-text-color:
var(--mat-sys-on-secondary-container),
- label-text-color: var(--mat-sys-on-surface)
- )
- );
-}
-
.multi-select-option {
display: flex;
flex-direction: row;
- .mat-pseudo-checkbox {
- height: 16px;
- width: 16px;
- margin-left: 4px;
- --mat-pseudo-checkbox-minimal-selected-checkmark-color: var(
- --mat-option-selected-state-label-text-color,
- var(--mat-sys-on-secondary-container)
- );
- }
-
- .mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-checked::after {
- height: 4px;
- width: 10px;
- }
-
- // State layer rules mirrored from
@angular/material/core/option/option.scss (Material 3, v20).
- // multi-select-option extends MatOption but has its own template/styles,
so MatOption's
- // compiled CSS is not automatically loaded. The mat.option-overrides()
above sets the
- // --mat-option-* tokens; these rules consume them (with color-mix
fallbacks).
- // On Angular Material upgrades, diff against:
@angular/material/core/option/option.scss
-
- &.mdc-list-item {
- background: transparent;
- }
-
- &:hover:not(.mdc-list-item--disabled) {
- cursor: pointer;
- background-color: var(
- --mat-option-hover-state-layer-color,
- color-mix(
- in srgb,
- var(--mat-sys-on-surface)
calc(var(--mat-sys-hover-state-layer-opacity) * 100%),
- transparent
- )
- );
- }
-
- &:focus.mdc-list-item,
- &.mat-mdc-option-active.mdc-list-item {
- background-color: var(
- --mat-option-focus-state-layer-color,
- color-mix(
- in srgb,
- var(--mat-sys-on-surface)
calc(var(--mat-sys-focus-state-layer-opacity) * 100%),
- transparent
- )
- );
- outline: 0;
- }
-
-
&.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-active,
:focus, :hover) {
- background-color: var(--mat-option-selected-state-layer-color,
var(--mat-sys-secondary-container));
-
- .mdc-list-item__primary-text {
- color: var(--mat-option-selected-state-label-text-color,
var(--mat-sys-on-secondary-container));
- }
- }
-
- &.mdc-list-item.mdc-list-item--disabled {
- cursor: default;
- color: var(--nf-disabled);
- }
-
- // When hover/focus/active overrides the selected background, revert the
checkmark
- // to the regular label color so it remains visible against the state
layer.
- &:hover .mat-pseudo-checkbox,
- &:focus .mat-pseudo-checkbox,
- &.mat-mdc-option-active .mat-pseudo-checkbox {
- --mat-pseudo-checkbox-minimal-selected-checkmark-color: var(
- --mat-option-label-text-color,
- var(--mat-sys-on-surface)
- );
+ .mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-checked::after,
+ .mat-pseudo-checkbox-minimal.mat-pseudo-checkbox-indeterminate::after {
+ color: var(--mat-sys-on-secondary-container);
}
}
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/components/multi-select-option/multi-select-option.component.ts
b/nifi-frontend/src/main/frontend/libs/shared/src/components/multi-select-option/multi-select-option.component.ts
index 56b4be33b75..360da9c427d 100644
---
a/nifi-frontend/src/main/frontend/libs/shared/src/components/multi-select-option/multi-select-option.component.ts
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/components/multi-select-option/multi-select-option.component.ts
@@ -32,7 +32,7 @@ import { MatPseudoCheckbox, MatRipple } from
'@angular/material/core';
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [{ provide: MatOption, useExisting: MultiSelectOption }],
- host: { class: 'multi-select-option', role: 'option' }
+ host: { class: 'multi-select-option mat-mdc-option mdc-list-item', role:
'option' }
})
export class MultiSelectOption extends MatOption {
/**
diff --git
a/nifi-frontend/src/main/frontend/libs/shared/src/components/searchable-select/searchable-select.component.scss
b/nifi-frontend/src/main/frontend/libs/shared/src/components/searchable-select/searchable-select.component.scss
index 617fa12ade1..b104bf9783d 100644
---
a/nifi-frontend/src/main/frontend/libs/shared/src/components/searchable-select/searchable-select.component.scss
+++
b/nifi-frontend/src/main/frontend/libs/shared/src/components/searchable-select/searchable-select.component.scss
@@ -23,6 +23,12 @@
.mat-mdc-form-field {
width: 100%;
}
+
+ .mdc-text-field--outlined,
+ .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper {
+ padding-left: 12px;
+ padding-right: 12px;
+ }
}
.searchable-overlay {
