james-elliott opened a new pull request, #8480: URL: https://github.com/apache/nifi/pull/8480
NiFi’s new UI incorporates Angular Material 16. This uses the material theming SASS functions to allow for creation of dark and light themes. A Material theme has a few constituent parts - Color palettes - Typography - Density This change only is in regard to how NiFi uses the color palettes, but I’ll touch on the other pieces briefly for completeness. ### Density Density applies to the padding and spacing between components, and is only implemented on Angular components and not NiFi custom components. ### Typography Typography allows for declaration of type styles. In Material, type styles are composed of the following attributes. - font-size - line-height - font-weight - font-family - letter-spacing They can either be specified in the order above, or by name. NiFi does not currently implement typography using Angular theming. ### Palettes An Angular theme has 3 color palettes. Primary, Accent, and Warn. Primary and Accent are meant to be distinct colors, used to draw attention to important UI elements such as buttons and other form controls. The Warn palette is used to indicate errors or issues, like errors on form fields, or in NiFi’s case, things like invalid components. Palettes are organized into 10 main color values, with 4 optional alternate color values. In addition, each color value MUST be given a contrast. The contrast is often used in cases such as the text on a button. In Material Design 10 main colors are organized by value of 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, with 50 being the lightest, and 900 being the most intense or darkest. The main color values generally have the same hue, but have stepped brightness and saturation levels. The alternate colors are organized as A100, A200, A400, and A700. The alternate colors tend to be a small shift in hue and saturation levels, with brightness matching the corresponding main color values at 100, 200, 400, and 700 respectively. Palettes are further customized during declaration by assigning a “default”, “lighter”, and “darker” value. If they are not assigned directly, Angular will assign 500 as default, 100 as lighter, and 900 as darker. When we reference color values directly by their number, we’re ignoring any set “default”, “lighter”, or “darker” values in a palette. The reason for this is that the names of the color values should have meaning in relation to each other. If color 400 doesn’t have sufficient contrast in a dark theme, then we should be able to select color 300, knowing that it will be a lighter, brighter version of the same hue, and thus improve the contrast ratio. ### NiFi Material theming I would propose that we re-organize the NiFi palettes to better follow the semantics behind the numeric color values, as well as have NiFi components use “default”, “lighter”, and “darker” colors for the Material Primary, Accent, and Warn palettes as much as possible. The most notable exception would be the Warn palette and using the alternate values with a hue shift to allow for oranges and yellows in cases like invalid processors. ### NiFi Canvas theming With this change, the NiFi canvas theme is re-organized as well to match the color semantics. However, because the Canvas theme is unique in that it provides many of the values that are protected in Material theming, we can more safely reference some colors values directly. For example, NiFi Canvas Primary is the greyscale values available to be used as surface or on-surface colors in light and dark themes. This allows us to do things like assume that NiFi Canvas Primary at 500 is a midpoint between white and black, and apply it safely, like in the case of borders on the flow canvas. Or to use A200 as the color value for box-shadows. In order to preserve the semantics for Material surfaces while using the NiFi canvas themes, I added helper functions that will pull in the semantically appropriate color values depending on whether or not the theme is a dark theme or a light theme. ### Screens   The changes proposed here are represented on the left, with the current MAIN styling on the right. The dark themes are dramatically different, but I would argue the proposed dark theme matches the stylistic heritage of NiFi more, as well as doubling down on the “dark” aspect of dark mode. ### Miscellaneous #### Color reductions While changing the usage of color to almost exclusively use “default”, “lighter”, and “darker” it was necessary to combine some colors. In almost every case, the colors were different by only a few bits. For example #acacac vs #aaaaaa.  #aabec7 vs #abbdc5  #### Canvas theme By following the Material concepts of surface and on-surface, we can disentangle the navigation bar and icon colors from the necessary colors to contrast with the canvas. Because we can color the icons differently when dragging as opposed to default or hover/active states, we can use the surface logic to make sure the dragged icon will always contrast with the canvas. #### Accessibility Another helper function built into this theming approach is one that will check the contrast between a foreground color, and the background it will be used on. This helps to ensure a 4.5:1 contrast ratio which should mean that NiFi will have a WCAG 2.1 AA rating for color contrast. ### Light and Dark themes This approach also enabled me to re-use the same palettes for both dark and light themes. For the material theme, they were given different values for “default”, “lighter”, and “darker”. For the Canvas themes, the surface and on-surface paradigm meant that the same palettes could be used for both light and dark as well, without having to declare new values for “default”, “lighter”, and “darker”. -- 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]
