scottyaslan commented on code in PR #8294: URL: https://github.com/apache/nifi/pull/8294#discussion_r1470525304
########## nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss: ########## @@ -122,341 +169,332 @@ $appFontPath: '~roboto-fontface/fonts'; @tailwind components; @tailwind utilities; -$nifi-primary-palette: ( - 50: #eef1f3, - 100: #d5dde1, - 200: #b9c7cd, - 300: #9cb0b9, - 400: #879faa, - 500: #728e9b, - 600: #6a8693, - 700: #5f7b89, - 800: #55717f, - 900: #425f6d, - A100: #c7ecff, - A200: #94daff, - A400: #61c9ff, - A700: #47c0ff, - contrast: ( - 50: #000000, - 100: #000000, - 200: #000000, - 300: #000000, - 400: #000000, - 500: #000000, - 600: #ffffff, - 700: #ffffff, - 800: #ffffff, - 900: #ffffff, - A100: #000000, - A200: #000000, - A400: #000000, - A700: #000000 - ) -); - -$nifi-accent-palette: ( - 50: #fcfcfd, - 100: #f7f8f9, - 200: #f1f4f5, - 300: #ebeff1, - 400: #e7ebee, - 500: #e3e8eb, - 600: #e0e5e9, - 700: #dce2e5, - 800: #d8dee2, - 900: #d0d8dd, - A100: #ffffff, - A200: #ffffff, - A400: #ffffff, - A700: #ffffff, - contrast: ( - 50: #000000, - 100: #000000, - 200: #000000, - 300: #000000, - 400: #000000, - 500: #000000, - 600: #000000, - 700: #000000, - 800: #000000, - 900: #000000, - A100: #000000, - A200: #000000, - A400: #000000, - A700: #000000 - ) -); - -// Define the palettes for your theme using the Material Design palettes available in palette.scss -// (imported above). For each palette, you can optionally specify a default, lighter, and darker -// hue. Available color palettes: https://material.io/design/color/ -$nifi-primary: mat.define-palette($nifi-primary-palette); -$nifi-accent: mat.define-palette($nifi-accent-palette); - -//#728e9b -//#aabbc3 -//#e3e8eb - -// The warn palette is optional (defaults to red). -$nifi-warn: mat.define-palette(mat.$red-palette); - -// Create the theme object. A theme consists of configurations for individual -// theming systems such as "color" or "typography". -$nifi-theme: mat.define-light-theme( - ( - color: ( - primary: $nifi-primary, - accent: $nifi-accent, - warn: $nifi-warn - ), - //typography: mat.define-typography-config(), - density: -3 - ) -); - -// Include theme styles for core and each component used in your app. -// Alternatively, you can import and @include the theme mixins for each component -// that you are using. -@include mat.all-component-themes($nifi-theme); - -/* You can add global styles to this file, and also import other style files */ - -html, -body { - height: 100%; -} - -body { - margin: 0; - //font-family: Roboto, 'Helvetica Neue', sans-serif; -} - -a { - font-size: 13px; - cursor: pointer; - color: #004849; - font-weight: normal; - display: inline-block; - font-family: Roboto; - text-decoration: underline; - text-decoration-color: #ccdadb; - text-underline-offset: 3px; -} +//General status styles. TODO - Reconsider this... separating canvas/style styles from html styles... +@mixin theme($material-theme, $canvas-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'); + + // 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); + $primary-palette-A100: mat.get-color-from-palette($primary-palette, 'A100'); + $primary-palette-A200: mat.get-color-from-palette($primary-palette, 'A200'); + $primary-palette-A400: mat.get-color-from-palette($primary-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); + $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); + $accent-palette-200: mat.get-color-from-palette($accent-palette, 200); + $accent-palette-400: mat.get-color-from-palette($accent-palette, 400); + $accent-palette-A200: mat.get-color-from-palette($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'); + + html, + body { + height: 100%; + } -a:hover { - text-decoration-color: #004849; -} + body { + margin: 0; + font-family: Roboto, 'Helvetica Neue', sans-serif; + } -header.nifi-header { - box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); - position: relative; -} + a { + font-size: 13px; + cursor: pointer; + color: $primary-palette-A400; + font-weight: normal; + display: inline-block; + font-family: Roboto; + text-decoration: underline; + text-decoration-color: $primary-palette-200; + text-underline-offset: 3px; + } -/* - Icon for styling mat-icon in forms throughout the application. - */ + a:hover { + text-decoration-color: $primary-palette-A400; + } -.info-icon { - font-size: 14px; - height: 14px !important; - width: 14px !important; -} -/* - This style is needed due to an incompatibility between material and tailwind. - */ + //Icon for styling mat-icon in forms throughout the application. + .info-icon { + font-size: 14px; + height: 14px !important; + width: 14px !important; + } -.mdc-notched-outline__notch { - border-right: none; -} + //This style is needed due to an incompatibility between material and tailwind. + .mdc-notched-outline__notch { + border-right: none; + } -/* - Dialog styles - */ + .small-dialog { + min-width: 320px; + } -.small-dialog { - min-width: 320px; -} + .medium-dialog { + min-width: 470px; + } -.medium-dialog { - min-width: 470px; -} + .medium-short-dialog { + max-height: 32%; + max-width: 34%; + min-height: 250px; + min-width: 440px; + font-size: 13px; + } -.medium-short-dialog { - max-height: 32%; - max-width: 34%; - min-height: 250px; - min-width: 440px; - font-size: 13px; -} + .large-dialog { + max-height: 72%; + max-width: 55%; + min-height: 560px; + min-width: 760px; + } -.large-dialog { - max-height: 72%; - max-width: 55%; - min-height: 560px; - min-width: 760px; -} + .edit-parameter-context-dialog { + max-height: 72%; + max-width: 55%; + min-width: 850px; + min-height: 575px; + } -.edit-parameter-context-dialog { - max-height: 72%; - max-width: 55%; - min-width: 850px; - min-height: 575px; -} + .tooltip { + position: fixed; + max-width: 500px; + padding: 10px; + background-color: $canvas-primary-palette-900; + border-radius: 2px; + border-width: 1px; + border-color: $canvas-primary-palette-200; + box-shadow: 0 2px 5px $canvas-primary-palette-50; + font-size: 13px; + font-family: Roboto; + font-weight: 400; + word-wrap: break-word; + white-space: normal; + color: $canvas-primary-palette-200; + z-index: 1; + + ul { + list-style: disc outside; + margin-left: 1em; + } + } -.tooltip { - position: fixed; - max-width: 500px; - padding: 10px; - background-color: #fff; - border-radius: 2px; - border-width: 1px; - border-color: #000; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); - font-size: 13px; - font-family: Roboto; - font-weight: 400; - word-wrap: break-word; - white-space: normal; - color: #000; - z-index: 1; - - ul { - list-style: disc outside; - margin-left: 1em; + .property-editor { + background-color: $canvas-primary-palette-900; + box-shadow: 0 2px 5px $canvas-primary-palette-50; + font-size: 13px; + font-family: Roboto; + font-weight: 400; } -} -.property-editor { - background-color: #fff; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); - font-size: 13px; - font-family: Roboto; - font-weight: 400; -} + .CodeMirror-hints { + font-size: 13px !important; + z-index: 1000 !important; + overflow-y: scroll !important; + } -.CodeMirror-hints { - font-size: 13px !important; - z-index: 1000 !important; - overflow-y: scroll !important; -} + .disabled { + color: $primary-palette-500 !important; + fill: $primary-palette-500 !important; + text-shadow: 0 0 4px $canvas-primary-palette-900; + } -/* - General status styles. TODO - Reconsider this... separating canvas/style styles from html styles... - */ + .enabled { + color: $primary-palette-A200 !important; + fill: $primary-palette-A200 !important; + text-shadow: 0 0 4px $canvas-primary-palette-900; + } -.disabled { - color: #728e9b !important; - fill: #728e9b !important; - text-shadow: 0 0 4px rgba(255, 255, 255, 1); -} + .stopped { + color: $warn-palette-200 !important; + fill: $warn-palette-200 !important; + text-shadow: 0 0 4px $canvas-primary-palette-900; + } -.enabled { - color: #44a3cf !important; - fill: #44a3cf !important; - text-shadow: 0 0 4px rgba(255, 255, 255, 1); -} + .running { + color: $accent-palette-200 !important; + fill: $accent-palette-200 !important; + text-shadow: 0 0 4px $canvas-primary-palette-900; + } Review Comment: Ok great catch! I updated the accent palette to be $nifi-canvas-accent-light-palette but didn't update the places we look those up. -- 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
