scottyaslan commented on code in PR #8480:
URL: https://github.com/apache/nifi/pull/8480#discussion_r1523936096
##########
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss:
##########
@@ -187,149 +192,146 @@ $appFontPath: '~roboto-fontface/fonts';
$canvas-accent-palette: map.get($canvas-color-config, 'accent');
// Get hues from palette
- $primary-palette-50: mat.get-color-from-palette($primary-palette, 50);
- $primary-palette-200: mat.get-color-from-palette($primary-palette, 200);
- $primary-palette-500: mat.get-color-from-palette($primary-palette, 500);
- $accent-palette-A100: mat.get-color-from-palette($accent-palette, 'A100');
- $accent-palette-A200: mat.get-color-from-palette($accent-palette, 'A200');
- $accent-palette-A400: mat.get-color-from-palette($accent-palette, 'A400');
- $canvas-primary-palette-50:
mat.get-color-from-palette($canvas-primary-palette, 50);
- $canvas-primary-palette-200:
mat.get-color-from-palette($canvas-primary-palette, 200);
+
+ // Start with the canvas theme.
+ $canvas-primary-palette-A200:
mat.get-color-from-palette($canvas-primary-palette, A200);
$canvas-primary-palette-400:
mat.get-color-from-palette($canvas-primary-palette, 400);
- $canvas-primary-palette-900:
mat.get-color-from-palette($canvas-primary-palette, 900);
- $canvas-accent-palette-200:
mat.get-color-from-palette($canvas-accent-palette, 200);
- $canvas-accent-palette-400:
mat.get-color-from-palette($canvas-accent-palette, 400);
- $canvas-accent-palette-A200:
mat.get-color-from-palette($canvas-accent-palette, 'A200');
- $warn-palette-200: mat.get-color-from-palette($warn-palette, 200);
- $warn-palette-300: mat.get-color-from-palette($warn-palette, 300);
- $warn-palette-A100: mat.get-color-from-palette($warn-palette, 'A100');
- $warn-palette-A400: mat.get-color-from-palette($warn-palette, 'A400');
+ $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);
+
+ $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');
+
+ $accent-palette-default: mat.get-color-from-palette($accent-palette,
'default');
+ $accent-palette-lighter: mat.get-color-from-palette($accent-palette,
'lighter');
+
+ $warn-palette-lighter: mat.get-color-from-palette($warn-palette, lighter);
+ $warn-palette-default: mat.get-color-from-palette($warn-palette,
'default');
+
+ // Alternative hue for warn colors.
+ $warn-palette-A200: mat.get-color-from-palette($warn-palette, 'A200');
+
+ $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);
+
+ * { // Tailwind sets a default that doesn't shift with light and dark
themes
+ border-color: $on-surface-lighter;
+ }
a {
- color: $accent-palette-A400;
- text-decoration-color: $primary-palette-200;
+ color: utils.get-color-on-surface($color-config, $surface);
+ text-decoration-color: $primary-palette-lighter;
}
a:hover {
- text-decoration-color: $accent-palette-A400;
+ text-decoration-color: utils.get-color-on-surface($color-config,
$surface);
}
.tooltip {
- background-color: $canvas-primary-palette-900;
- border-color: $canvas-primary-palette-200;
- box-shadow: 0 2px 5px $canvas-primary-palette-50;
- color: $canvas-primary-palette-200;
+ background-color: $surface;
+ border-color: $on-surface;
+ box-shadow: 0 2px 5px $canvas-primary-palette-A200;
+ color: $on-surface;
}
.property-editor {
- background-color: $canvas-primary-palette-900;
- box-shadow: 0 2px 5px $canvas-primary-palette-50;
+ background-color: $surface;
+ box-shadow: 0 2px 5px $canvas-primary-palette-A200;
}
.disabled {
- color: $primary-palette-500 !important;
- fill: $primary-palette-500 !important;
- text-shadow: 0 0 4px $canvas-primary-palette-900;
+ color: $primary-palette-default !important;
+ fill: $primary-palette-default !important;
}
.enabled {
- color: $accent-palette-A200 !important;
- fill: $accent-palette-A200 !important;
- text-shadow: 0 0 4px $canvas-primary-palette-900;
+ color: $primary-palette-A400 !important;
+ fill: $primary-palette-A400 !important;
}
.stopped {
- color: $warn-palette-200 !important;
- fill: $warn-palette-200 !important;
- text-shadow: 0 0 4px $canvas-primary-palette-900;
+ color: $warn-palette-lighter !important;
+ fill: $warn-palette-lighter !important;
}
.running {
- color: $canvas-accent-palette-200 !important;
- fill: $canvas-accent-palette-200 !important;
- text-shadow: 0 0 4px $canvas-primary-palette-900;
+ color: $canvas-accent-palette-lighter !important;
+ fill: $canvas-accent-palette-lighter !important;
}
.has-errors,
.invalid {
- color: $canvas-accent-palette-A200 !important;
- fill: $canvas-accent-palette-A200 !important;
- text-shadow: 0 0 4px $canvas-primary-palette-900;
+ color: $warn-palette-A200 !important;
+ fill: $warn-palette-A200 !important;
}
.validating {
- color: $canvas-primary-palette-400 !important;
- fill: $canvas-primary-palette-400 !important;
- text-shadow: 0 0 4px $canvas-primary-palette-900;
+ color: $canvas-primary-palette-500 !important;
+ fill: $canvas-primary-palette-500 !important;
}
.transmitting {
- color: $accent-palette-A200 !important;
- fill: $accent-palette-A200 !important;
- text-shadow: 0 0 4px $canvas-primary-palette-900;
- }
-
- .not-transmitting {
- color: $primary-palette-500 !important;
- fill: $primary-palette-500 !important;
- text-shadow: 0 0 4px $canvas-primary-palette-900;
+ color: $canvas-accent-palette-default !important;
+ fill: $canvas-accent-palette-default !important;
}
.up-to-date {
- color: $canvas-accent-palette-400 !important;
- fill: $canvas-accent-palette-400 !important;
- text-shadow: 0 0 4px $canvas-primary-palette-900;
+ color: $canvas-accent-palette-default !important;
+ fill: $canvas-accent-palette-default !important;
}
.locally-modified,
.sync-failure {
- color: $warn-palette-A100 !important;
- fill: $warn-palette-A100 !important;
- text-shadow: 0 0 4px $canvas-primary-palette-900;
+ color: $accent-palette-lighter !important;
+ fill: $accent-palette-lighter !important;
}
.stale,
.locally-modified-and-stale {
- color: $warn-palette-300 !important;
- fill: $warn-palette-300 !important;
- text-shadow: 0 0 4px $canvas-primary-palette-900;
+ color: $warn-palette-default !important;
+ fill: $warn-palette-default !important;
}
.zero {
- color: $accent-palette-A100 !important;
- fill: $accent-palette-A100 !important;
- text-shadow: none !important;
+ opacity: 0.5;
}
.blank,
.unset,
.sensitive {
- color: $canvas-primary-palette-400 !important;
+ color: $canvas-primary-palette-500 !important;
}
button.nifi-button {
- border: 1px solid $primary-palette-200;
- background-color: $primary-palette-50;
- color: $accent-palette-A400;
+ color: utils.get-color-on-surface($color-config, $surface-darker);
}
button.nifi-button:hover {
- border-color: $accent-palette-A400;
+ background-color: $surface-highlight;
}
button.nifi-button:disabled {
- color: $primary-palette-200 !important;
+ color: $on-surface-lighter;
+ background-color: transparent;
cursor: not-allowed;
- border: 1px solid $primary-palette-200;
-
+
i {
- color: $primary-palette-200 !important;
+ color: $on-surface-lighter;
}
}
.value,
.refresh-timestamp {
- color: $warn-palette-A400;
+ color: utils.get-color-on-surface($color-config, $surface, 'accent');
+ }
+
+ .accent-palette-default {
+ color: $accent-palette-default;
}
ngx-skeleton-loader .skeleton-loader {
Review Comment:
I will update this in a follow on PR.
##########
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss:
##########
@@ -19,11 +19,15 @@
// For more information:
https://m2.material.io/design/color/the-color-system.html
@use '@angular/material' as mat;
+// Define some variables that are re-used throughout the theme.
+$on-surface-dark: rgba(black, 0.87);
+$on-surface-light: #ffffff;
+
// The $material-primary-light-palette define the PRIMARY AND ACCENT palettes
for all Angular Material components used throughout Apache NiFi
$material-primary-light-palette: (
Review Comment:
Looks good now.
--
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
