James Mingardi-Elliott 06c0113063
NIFI-12870 Semantic colors (#8480)
Next step to color theming

Update theming to reference colors semantically

Material and Canvas palettes are reordered so that in all cases they go from 50 = lightest / least amount of color to 900 = darkest / most amount of color applied.

Usage of color has been changed so that Material's primary, accent, and warn values are used by semantic reference of 'default', 'lighter' and 'darker' rather than explicit number values.

The Canvas palettes still have values referenced directly because they are a special case.

Added SASS utilities:
- To help ensure color contrast for text and backgrounds by checking for a 4.5:1 contrast ratio.
- To provide helper functions that somewhat replicate Material designs approach to Surface and On Surface concepts. This is how the same Canvas palettes can be used for light and dark modes.

Some minor tweaks to the styling of the flow canvas to bring custom NiFi components and the Angular Material components closer together visually.

Moved the Canvas theme declaration to a separate file so the Material themes can be more easily swapped out without needing to redeclare the Canvas themes.

This closes #8480
2024-03-13 17:29:29 -04:00
..