james-elliott commented on code in PR #8480: URL: https://github.com/apache/nifi/pull/8480#discussion_r1521524770
########## nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi-canvas.scss: ########## @@ -0,0 +1,185 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +// Custom Colors following Material Design +// For more information: https://m2.material.io/design/color/the-color-system.html +@use '@angular/material' as mat; + + +// The $nifi-canvas-light-palette defines the PRIMARY palette for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi +$nifi-canvas-light-palette: ( + // mat.define-palette($nifi-canvas-light-palette) + 50: #ffffff, // circle.flowfile-link, .processor-read-write-stats, .process-group-stats-in-out, .tooltip, .property-editor, .disabled, .enabled, .stopped, .running, .has-errors, .invalid, .validating, .transmitting, .not-transmitting, .up-to-date, .locally-modified, .sync-failure, .stale, .locally-modified-and-stale, g.component rect.body, text.bulletin-icon, rect.processor-icon-container, circle.restricted-background, circle.is-primary-background, g.connection rect.body, text.connection-to-run-status, text.expiration-icon, text.load-balance-icon, text.penalized-icon, g.connection rect.backpressure-tick.data-size-prediction.prediction-down, g.connection rect.backpressure-tick.object-prediction.prediction-down, text.version-control, .breadcrumb-container, #birdseye, .controller-bulletins .fa, .search-container:hover, .search-container.open, .login-background, table th, .mat-sort-header-arrow, .CodeMirror, #status-history-chart-container, #status-history-chart-control-container, # status-history-chart-control-container, + 100: #f9fafb, // .canvas-background, .navigation-control, .operation-control, .lineage + 200: #f4f6f7, // .tooltip, .cm-s-default .CodeMirror-matchingbracket, circle.flowfile-link + 300: #e3e8eb, // .even, .remote-process-group-sent-stats, .processor-stats-in-out, .process-group-queued-stats, .process-group-read-write-stats + 400: #d8d8d8, // g.connection rect.backpressure-object, g.connection rect.backpressure-data-size, .cdk-drag-disabled, .resizable-triangle + 500: #acacac, // .unset, .border.ghost, .backpressure-tick.not-configured, g.connection.ghost path.connection-path, g.connection.ghost rect.connection-label, .prioritizers-list, .prioritizer-draggable-item, .parameter-context-inheritance-list, .parameter-context-draggable-item + 600: #666666, // UNUSED + 700: #444444, + 800: #262626, + 900: #000000, + + // some analog colors for headers and hover states, inputs, stats, etc + A100: #e5ebed, // .tooltip, .property-editor, g.component rect.border, .component-comments, g.connection path.connection-path, g.connection rect.backpressure-tick.data-size-prediction, g.connection rect.backpressure-tick.object-prediction, g.connection rect.backpressure-object, g.connection rect.backpressure-data-size, .breadcrumb-container, .navigation-control, .operation-control, header.nifi-header, .new-canvas-item.icon.hovering, .cdk-drag-disabled, .cdk-drag-preview, .context-menu, .global-menu:hover, .unauthorized background in light themes + A200: rgba(0, 0, 0, 0.25), // .operation-context-name, text.stats-label, text.processor-name, text.port-name, text.process-group-name, text.remote-process-group-name, .navigation-control-title, .operation-control-title, .operation-context-name, .search-input, .context-menu-item-text, .current-user + A400: rgba(#303030, .75), // rect.component-selection, rect.drag-selection, rect.label-drag + A700: rgba(black, 0.87), // .unauthorized background in dark themes + // These are the $nifi-canvas-light-palette PRIMARY palette contrast colors. These color do not really get defined by https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors. + // Instead if we look to the Angular Material provided palettes we see that these fields are typically rgba(black, 0.87) or white. These values are particularly important + // for light mode and dark mode as these values set the colors for the text when displayed against the primary background on a button, badge, chip, etc. + // + // NOTE: Care should be taken here to ensure the values meet accessibility standards. + // + // NOTE: When creating the Material palette definition mat.define-palette($nifi-canvas-light-palette); + // Since 500 is the default the contrast-500 will be used as the default text color. + contrast: ( + 50: rgba(black, 0.87), // This is used for the basis of $on-surface for light themes + 100: rgba(black, 0.87), + 200: rgba(black, 0.87), + 300: rgba(black, 0.87), + 400: rgba(black, 0.87), + 500: rgba(black, 0.87), + 600: #ffffff, + 700: #ffffff, + 800: #ffffff, + 900: #ffffff, // This is used as the basis for $on-surface for dark themes + A100: rgba(black, 0.87), + A200: rgba(black, 0.87), + A400: #ffffff, + A700: #ffffff, + ) +); + +// The $nifi-canvas-accent-light-palette defines the ACCENT palette for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi +$nifi-canvas-accent-light-palette: ( + 50: #e5ebed, // Used for the grid lines on the canvas. Called as the canvas access $surface value. + 100: #c3e8d0, + 200: #9dd9b2, // .running "lighter" hue + 300: #73ca94, + 400: #52bf7e, // .up-to-date,.backpressure-percent "default" hue + 500: #00ff00, //.connectable-destination, .connector.connectable This is an exception to main colors and is explicitly called. + 600: #2cb367, + 700: #1A9964, + 800: #016131, // .version-control, .bulletin-normal "darker" hue for this palette + 900: #0d1411, + + A100: #bfbfff, //.selected + A200: #8080ff, // + A400: #4040ff, //.backpressure-percent-warning, .bulletin-warn, .backpressure-percent.warning, text.run-status-icon + A700: #0000ff, //g.connection.selected rect.border, .connection-selection-path, .midpoint, .labelpoint + + contrast: ( + 50: rgba(black, 0.87), + 100: rgba(black, 0.87), + 200: rgba(black, 0.87), + 300: rgba(black, 0.87), + 400: rgba(black, 0.87), + 500: rgba(black, 0.87), + 600: #ffffff, + 700: #ffffff, + 800: #ffffff, + 900: #ffffff, + A100: rgba(black, 0.87), + A200: rgba(black, 0.87), + A400: rgba(black, 0.87), + A700: rgba(black, 0.87), + ) +); + +// The $nifi-canvas-warn-light-palette defines the WARN palette both for all Angular Material components used throughout Apache NiFi and for all flow designer canvas components that make up the NiFi canvas theme used throughout Apache NiFi +$nifi-canvas-warn-light-palette: ( Review Comment: They only match about half of the colors. We explicitly use $canvas-warn-palette-800 for the 100% red square on connectors, and for the dashed line when dragging a connection. Keeping separate palettes for canvas usage means we can rely on them being somewhat protected from being changed due to a theme's want to color default Angular Material components. -- 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]
