scottyaslan commented on code in PR #8320:
URL: https://github.com/apache/nifi/pull/8320#discussion_r1474721812
##########
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 is used for the .zero class. If we look around the code we see
that is used for the flow status icons and the canvas component icons when
their counts are '0'. The tricky part for these colors is that I think we need
to better meet color contrast ratios especially in dark mode. I am open to
suggestions on what we want this color to be. I think it kind of follows your
comment above about the red stopped icon being too bright as well. Maybe we
just need to mute these colors a bit in dark mode?
Do you think the red stopped icon in light mode is too muted?
--
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]
