james-elliott commented on code in PR #8608:
URL: https://github.com/apache/nifi/pull/8608#discussion_r1557714973
##########
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/bulletins/ui/bulletin-board/bulletin-board-list/bulletin-board-list.component.ts:
##########
@@ -143,12 +143,12 @@ export class BulletinBoardList implements AfterViewInit {
getSeverity(severity: string) {
switch (severity.toLowerCase()) {
case 'error':
- return 'bulletin-error';
+ return 'bulletin-error material-warn-darker';
Review Comment:
I can't seem to find where "material-warn-darker" is defined.
##########
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:
get-surface() doesn't have a mapping for 'lighter', it's going to return
whatever mat.get-color-from-palette($color-palette, NULL); is
--
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]
