scottyaslan commented on code in PR #8608:
URL: https://github.com/apache/nifi/pull/8608#discussion_r1557805191
##########
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss:
##########
@@ -127,186 +131,274 @@
}
}
-@mixin colors($material-theme, $canvas-theme) {
+@mixin generate-material-theme($material-theme, $nifi-theme) {
// Get the color config from the theme.
- $color-config: mat.get-color-config($material-theme);
- $canvas-color-config: mat.get-color-config($canvas-theme);
-
- // Get the color palette from the color-config.
- $primary-palette: map.get($color-config, 'primary');
- $accent-palette: map.get($color-config, 'accent');
- $warn-palette: map.get($color-config, 'warn');
- $canvas-primary-palette: map.get($canvas-color-config, 'primary');
- $canvas-accent-palette: map.get($canvas-color-config, 'accent');
-
- // Get hues from palette
+ $material-theme-color-config: mat.get-color-config($material-theme);
+ $nifi-theme-color-config: mat.get-color-config($nifi-theme);
+
+ // Get the palettes
+ $material-theme-primary-palette: map.get($material-theme-color-config,
'primary');
+ $nifi-theme-warn-palette: map.get($nifi-theme-color-config, 'warn');
+
+ // colors from the theme palettes
+ $material-theme-primary-palette-A200:
mat.get-color-from-palette($material-theme-primary-palette, 'A200');
+ $material-theme-primary-palette-A400:
mat.get-color-from-palette($material-theme-primary-palette, 'A400');
+ $nifi-theme-warn-palette-A200:
mat.get-color-from-palette($nifi-theme-warn-palette, 'A200');
+
+ // semantic classes for the material theme
+
+ .mat-primary {
+ color: utils.get-color-on-surface(
+ $material-theme-color-config,
+ utils.get-surface($nifi-theme-color-config),
+ 'primary'
+ ) !important;
+ fill: utils.get-color-on-surface(
+ $material-theme-color-config,
+ utils.get-surface($nifi-theme-color-config),
+ 'primary'
+ ) !important;
+ }
+
+ .mat-accent {
+ color: utils.get-color-on-surface(
+ $material-theme-color-config,
+ utils.get-surface($nifi-theme-color-config),
+ 'accent'
+ ) !important;
+ fill: utils.get-color-on-surface(
+ $material-theme-color-config,
+ utils.get-surface($nifi-theme-color-config),
+ 'accent'
+ ) !important;
+ }
+
+ .mat-warn {
+ color: utils.get-color-on-surface(
+ $material-theme-color-config,
+ utils.get-surface($nifi-theme-color-config),
+ 'warn'
+ ) !important;
+ fill: utils.get-color-on-surface(
+ $material-theme-color-config,
+ utils.get-surface($nifi-theme-color-config),
+ 'warn'
+ ) !important;
+ }
+
+ /* other classes and overriding 3rd party styles */
- // Start with the canvas theme.
- $canvas-primary-palette-A200:
mat.get-color-from-palette($canvas-primary-palette, A200);
- $canvas-primary-palette-500:
mat.get-color-from-palette($canvas-primary-palette, 500);
- $canvas-accent-palette-lighter:
mat.get-color-from-palette($canvas-accent-palette, lighter);
- $canvas-accent-palette-default:
mat.get-color-from-palette($canvas-accent-palette, default);
+ a {
+ // calculate the color for text on top of a material theme primary
palette default color element
+ color: utils.get-color-on-surface(
+ $material-theme-color-config,
+ utils.get-surface($material-theme-color-config)
+ );
+ // get the lighter color from the material theme primary palette
+ text-decoration-color:
mat.get-color-from-palette($material-theme-primary-palette, 'lighter');
+ }
- $primary-palette-lighter: mat.get-color-from-palette($primary-palette,
lighter);
- $primary-palette-default: mat.get-color-from-palette($primary-palette,
'default');
- $primary-palette-A400: mat.get-color-from-palette($primary-palette,
'A400');
+ a:hover {
+ // calculate the color for text on top of a material theme primary
palette default colored element
+ text-decoration-color: utils.get-color-on-surface(
+ $material-theme-color-config,
+ utils.get-surface($material-theme-color-config)
+ );
+ }
- $accent-palette-lighter: mat.get-color-from-palette($accent-palette,
'lighter');
+ .mat-mdc-icon-button {
+ // calculate the color for text on top of a nifi theme accent palette
darker colored element
+ color: utils.get-color-on-surface(
+ $material-theme-color-config,
+ utils.get-surface($nifi-theme-color-config, 'darker')
+ ) !important;
+ }
- $warn-palette-lighter: mat.get-color-from-palette($warn-palette, lighter);
- $warn-palette-default: mat.get-color-from-palette($warn-palette,
'default');
+ .enabled {
+ color: $material-theme-primary-palette-A400 !important;
+ fill: $material-theme-primary-palette-A400 !important;
+ }
- // Alternative hue for warn colors.
- $warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200');
+ .has-errors,
+ .invalid {
+ color: $nifi-theme-warn-palette-A200 !important;
+ fill: $nifi-theme-warn-palette-A200 !important;
+ }
- $surface: utils.get-surface($canvas-color-config);
- $surface-darker: utils.get-surface($canvas-color-config, darker);
- $surface-highlight: utils.get-on-surface($canvas-color-config, highlight);
- $on-surface: utils.get-on-surface($canvas-color-config);
- $on-surface-lighter: utils.get-on-surface($canvas-color-config, lighter);
+ .zero {
+ color: $material-theme-primary-palette-A200 !important;
+ fill: $material-theme-primary-palette-A200 !important;
+ opacity: 0.5;
+ }
// Because snackbars have different surface colors, we need to make sure
the action color has enough contrast.
- $is-dark: map.get($color-config, is-dark);
+ $is-dark: map.get($material-theme-color-config, 'is-dark');
$snack-surface: if($is-dark, #d9d9d9, #333333);
- $snack-action-color: utils.get-color-on-surface($color-config,
$snack-surface, 'accent');
+ // calculate the color for text on top of themed snackbar surface colored
element
+ $snack-action-color:
utils.get-color-on-surface($material-theme-color-config, $snack-surface,
'accent');
* {
// Tailwind sets a default that doesn't shift with light and dark
themes
- border-color: $on-surface-lighter;
--mat-snack-bar-button-color: #{$snack-action-color};
}
+}
- .cdk-drag-disabled {
- cursor: not-allowed !important;
- background: $on-surface-lighter !important;
+@mixin generate-nifi-theme($nifi-theme) {
+ // Get the color config from the theme.
+ $nifi-theme-color-config: mat.get-color-config($nifi-theme);
+
+ // Get the color palettes from the color-config.
+ $nifi-theme-surface-palette: map.get($nifi-theme-color-config, 'primary');
+ $nifi-theme-success-palette: map.get($nifi-theme-color-config, 'accent');
+ $nifi-theme-warn-palette: map.get($nifi-theme-color-config, 'warn');
+
+ // default/lighter/darker colors from the nifi theme palettes
+ $nifi-theme-surface-palette-default:
mat.get-color-from-palette($nifi-theme-surface-palette, 'default');
+ $nifi-theme-surface-palette-lighter:
mat.get-color-from-palette($nifi-theme-surface-palette, 'lighter');
+ $nifi-theme-surface-palette-darker:
mat.get-color-from-palette($nifi-theme-surface-palette, 'darker');
+ $nifi-theme-surface-palette-A200:
mat.get-color-from-palette($nifi-theme-surface-palette, 'A200');
+ $nifi-theme-success-palette-default:
mat.get-color-from-palette($nifi-theme-success-palette, 'default');
+ $nifi-theme-success-palette-lighter:
mat.get-color-from-palette($nifi-theme-success-palette, 'lighter');
+ $nifi-theme-success-palette-darker:
mat.get-color-from-palette($nifi-theme-success-palette, 'darker');
+ $nifi-theme-warn-palette-default:
mat.get-color-from-palette($nifi-theme-warn-palette, 'default');
+ $nifi-theme-warn-palette-lighter:
mat.get-color-from-palette($nifi-theme-warn-palette, 'lighter');
+ $nifi-theme-warn-palette-darker:
mat.get-color-from-palette($nifi-theme-warn-palette, 'darker');
+
+ // semantic classes for default/lighter/darker colors for each palette in
each theme
+ .surface-default {
+ color: utils.get-surface($nifi-theme-color-config) !important;
+ fill: utils.get-surface($nifi-theme-color-config) !important;
}
- .cdk-drag-preview {
- box-sizing: border-box;
- border-radius: 4px;
- box-shadow: 0 3px 6px $canvas-primary-palette-A200;
+ .surface-lighter {
+ color: utils.get-surface($nifi-theme-color-config, lighter) !important;
+ fill: utils.get-surface($nifi-theme-color-config, lighter) !important;
Review Comment:
oh yea my bad. Good catch.
--
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: issues-unsubscr...@nifi.apache.org
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
