rfellows commented on code in PR #8320:
URL: https://github.com/apache/nifi/pull/8320#discussion_r1474561240
##########
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss:
##########
@@ -65,6 +65,53 @@ $material-primary-light-palette: (
)
);
+// The $material-primary-dark-palette define the PRIMARY AND ACCENT palettes
for all Angular Material components used throughout Apache NiFi
+$material-primary-dark-palette: (
+ // 50 -> 900 are the PRIMARY colors
(mat.define-palette($material-primary-dark-palette, 300);) defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
for primary color #728e9b
+ 50: rgb(30, 45, 54), // .context-menu
+ 100: rgba(32, 47, 54, 1), // "lighter" hue for this palette. Also
.global-menu:hover, .navigation-control-header:hover,
.operation-control-header:hover, .new-canvas-item.icon.hovering, table
tr:hover, .CodeMirror.blank, .remote-banner, .process-group-details-banner,
.process-group-details-banner, remote-process-group-details-banner,
.remote-process-group-last-refresh-rect,
+ 200: #30444d, // .processor-stats-border, .process-group-stats-border,
.context-menu-item:hover, .process-group-banner, .remote-process-group-banner,
.a, button.nifi-button, button.nifi-button:disabled
+ 300: #3e5762, // .breadcrumb-container, .navigation-control,
.operation-control, .flow-status, .controller-bulletins,
.component-button-grip, .search-container, .nifi-navigation, .CodeMirror.blank
+ 400: #4d6b78, // Default hue for this palette (color="primary").
+ 500: #587a89, // .disabled, .not-transmitting, .splash,
.access-policies-header, .operation-context-type, .bulletin-board-header,
.counter-header, .stats-info, .active-thread-count-icon, .processor-type,
.port-transmission-icon, .operation-context-type, .flow-status.fa,
.flow-status.icon, .controller-bulletins, .prioritizers-list,
.controller-services-header, .login-title, .parameter-context-header,
.parameter-context-inheritance-list, .provenance-header, .flowfile-header,
.queue-listing-header, .settings-header, .summary-header, .user-header, table
th, button.global-menu-item.fa, button.global-menu-item.icon, .event-header,
.section-header,
+ 600: #718d9a, // .breadcrumb-container, .birdseye-brush
+ 700: #8aa2ad, // "darker" hue for this palette. Also
#status-history-chart-container text, #status-history-chart-control-container
text
+ 800: #abbcc5,
+ 900: #abbcc5,
+
+ // A100 -> A700 are the ACCENT color
(mat.define-palette($material-primary-dark-palette, A400, A100, A700);). These
color are the ANALOGOUS (or possibly the TRIADIC??) colors as defined by
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
for primary color #728e9b
+ // These colors are also used by some custom canvas components that
display the ANALOGOUS color for things like buttons, links, borders, info, etc.
+ A100: #2cd5d5, // .zero
Review Comment:
This color stands out a bit too much. In "light-mode" icons using this class
are almost disabled looking. This bright blue/teal doesn't convey that same
feeling. for start and stop it is ok, since those are green/red when non-zero
so it is obvious the teal color isn't it, but the disabled and other icons it
isn't as obvious by the coloring of the icon.
<img width="270" alt="Screenshot 2024-02-01 at 9 17 26 AM"
src="https://github.com/apache/nifi/assets/713866/85036b8d-9f20-412f-9b92-c19a9a736d4c";>
vs.
<img width="270" alt="Screenshot 2024-02-01 at 9 22 08 AM"
src="https://github.com/apache/nifi/assets/713866/75c37e50-5d17-464b-8fe1-711487fd3cb2";>
##########
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss:
##########
@@ -33,20 +33,15 @@
$canvas-primary-palette-A100:
mat.get-color-from-palette($canvas-primary-palette, 'A100');
$canvas-primary-palette-A700:
mat.get-color-from-palette($canvas-primary-palette, 'A700');
- #status-history-chart-container,
- #status-history-chart-control-container {
+ :host ::ng-deep #status-history-chart-container,
+ :host ::ng-deep #status-history-chart-control-container {
Review Comment:
Not sure if these are to blame or not, but the 2 charts in the status
history component have different background colors.
<img width="835" alt="Screenshot 2024-02-01 at 8 45 10 AM"
src="https://github.com/apache/nifi/assets/713866/7ded2ee1-5645-4bac-9868-df5e66e8a7f4";>
--
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]
