Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[NIFI-13739] initial M3 theme #9270

Merged
merged 15 commits into from
Sep 23, 2024
Merged

[NIFI-13739] initial M3 theme #9270

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
6ee4cf2
[NIFI-13739] initial M3 theme
scottyaslan Sep 16, 2024
5aa3238
rename m3- themes
scottyaslan Sep 17, 2024
2771818
sync package-lock
scottyaslan Sep 17, 2024
6482efc
update theme imports
scottyaslan Sep 17, 2024
ca99bae
remove unused caution darker
scottyaslan Sep 18, 2024
5f966e7
update some class names, restore background colors for datepicker, ta…
scottyaslan Sep 18, 2024
8e48b07
configurable border color
scottyaslan Sep 19, 2024
135ec51
swap primary and secondary colors
scottyaslan Sep 19, 2024
5ce6f3e
a few more updates
scottyaslan Sep 19, 2024
79cb638
zero styles
scottyaslan Sep 19, 2024
fa3b576
bump deps
scottyaslan Sep 20, 2024
897a8bc
review feedback
scottyaslan Sep 20, 2024
a9f4fe1
adjust status history sizes
scottyaslan Sep 20, 2024
c68b9d4
update new canvas item hover and grip to be configurable via theme
scottyaslan Sep 20, 2024
8dbc7cc
rebase
scottyaslan Sep 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
configurable border color
  • Loading branch information
@scottyaslan
scottyaslan committed Sep 21, 2024
commit 8e48b07f74bf610e073e344a405a866e4669a60c
16 changes: 8 additions & 8 deletions ...ain/frontend/apps/nifi/src/app/pages/flow-designer/ui/canvas/_canvas.component-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
);
$primary-contrast: map.get(map.get($config, primary), contrast);
$neutral-contrast: map.get(map.get($config, neutral), contrast);
$alternate-surface: mat.get-theme-color($material-theme, neutral-variant, map.get($config, neutral-variant));
$border-color: mat.get-theme-color($material-theme, neutral-variant, map.get($config, neutral-variant));
$success-lighter: map.get($config, success-lighter);

// Shadows should always be darker. We explicitly set this so the SVG shadows are correct in both modes.
Expand Down Expand Up @@ -130,7 +130,7 @@
}

rect.row-border {
fill: $alternate-surface;
fill: $border-color;
}

g.component rect.body.unauthorized {
Expand All @@ -143,7 +143,7 @@

g.component rect.border,
g.connections rect.border {
stroke: $alternate-surface;
stroke: $border-color;
stroke-width: if(
$is-material-dark,
2,
Expand Down Expand Up @@ -210,7 +210,7 @@
$material-theme-primary-palette-default,
$material-theme-primary-palette-darker
);
stroke: $alternate-surface;
stroke: $border-color;
}

/*
Expand Down Expand Up @@ -256,7 +256,7 @@
}

rect.processor-stats-border {
fill: $alternate-surface;
fill: $border-color;
}

text.processor-name {
Expand Down Expand Up @@ -403,7 +403,7 @@

g.connection rect.backpressure-tick.data-size-prediction,
g.connection rect.backpressure-tick.object-prediction {
fill: $alternate-surface;
fill: $border-color;
}

g.connection rect.backpressure-tick.data-size-prediction.not-configured,
Expand All @@ -419,7 +419,7 @@

g.connection rect.backpressure-object,
g.connection rect.backpressure-data-size {
fill: $alternate-surface;
fill: $border-color;
}

g.connection rect.backpressure-object.not-configured,
Expand Down Expand Up @@ -544,7 +544,7 @@
/* remote process group */

rect.remote-process-group-stats-border {
fill: $alternate-surface;
fill: $border-color;
}

rect.remote-process-group-received-stats {
Expand Down
4 changes: 2 additions & 2 deletions ...ges/flow-designer/ui/canvas/change-color-dialog/_change-color-dialog.component-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
map.get(map.get($config, neutral), lighter)
);
$neutral-contrast: map.get(map.get($config, neutral), contrast);
$alternate-surface: mat.get-theme-color($material-theme, neutral-variant, map.get($config, neutral-variant));
$border-color: mat.get-theme-color($material-theme, neutral-variant, map.get($config, neutral-variant));

.preview {
.processor {
Expand All @@ -58,7 +58,7 @@
}

.row-border {
border-top: 1px solid $alternate-surface;
border-top: 1px solid $border-color;
}
}
}
4 changes: 2 additions & 2 deletions ...main/frontend/apps/nifi/src/app/ui/common/context-menu/_context-menu.component-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@

@mixin generate-theme($material-theme, $config) {
$is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
$alternate-surface: mat.get-theme-color($material-theme, neutral-variant, map.get($config, neutral-variant));
$border-color: mat.get-theme-color($material-theme, neutral-variant, map.get($config, neutral-variant));

div.context-menu {
.context-menu-item {
Expand All @@ -36,7 +36,7 @@
}

.context-menu-item:active {
background-color: $alternate-surface;
background-color: $border-color;
}

&.show-focused {
Expand Down
6 changes: 3 additions & 3 deletions .../frontend/apps/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,18 @@

@mixin generate-theme($material-theme, $config) {
$is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
$alternate-surface: mat.get-theme-color($material-theme, neutral-variant, map.get($config, neutral-variant));
$border-color: mat.get-theme-color($material-theme, neutral-variant, map.get($config, neutral-variant));

#status-history-chart-container,
#status-history-chart-control-container {
.axis path,
.axis line {
stroke: $alternate-surface;
stroke: $border-color;
}

.brush {
.selection {
stroke: $alternate-surface;
stroke: $border-color;
}
}
}
Expand Down
31 changes: 16 additions & 15 deletions nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -417,9 +417,10 @@
neutral,
map.get(map.get($config, neutral), lighter)
);
$alternate-surface: map.get($config, alternate-surface);
$primary-contrast: map.get(map.get($config, primary), contrast);
$neutral-contrast: map.get(map.get($config, neutral), contrast);
$alternate-surface: mat.get-theme-color($material-theme, neutral-variant, map.get($config, neutral-variant));
$border-color: mat.get-theme-color($material-theme, neutral-variant, map.get($config, neutral-variant));
$success-default: map.get(map.get($config, success), default);
$success-darker: map.get(map.get($config, success), darker);
$success-lighter: map.get(map.get($config, success), lighter);
Expand Down Expand Up @@ -506,9 +507,9 @@
}

// will be a darker light grey for light mode and a brighter light grey for dark mode
.alternate-surface {
color: $alternate-surface;
fill: $alternate-surface;
.border-color {
color: $border-color;
fill: $border-color;
}

// color variants for theming angular material widgets
Expand Down Expand Up @@ -579,7 +580,7 @@

*:not([class^='mat-']):not([class^='mdc-']):not([class^='resizable-triangle']) {
// Tailwind sets a default that doesn't shift with light and dark themes
border-color: $alternate-surface;
border-color: $border-color;
}

* {
Expand Down Expand Up @@ -698,35 +699,35 @@
}

.mat-expansion-panel {
background-color: mat.get-theme-color($material-theme, neutral, if($is-material-dark, 12, 100));
background-color: $alternate-surface;
}

.mat-datepicker-content {
background-color: mat.get-theme-color($material-theme, neutral, if($is-material-dark, 12, 100));
background-color: $alternate-surface;
box-shadow:
0px 2px 4px -1px rgba(0, 0, 0, 0.2),
0px 4px 5px 0px rgba(0, 0, 0, 0.14),
0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.mat-mdc-dialog-surface {
background-color: mat.get-theme-color($material-theme, neutral, if($is-material-dark, 12, 100));
background-color: $alternate-surface;
}

.mat-mdc-table {
background-color: mat.get-theme-color($material-theme, neutral, if($is-material-dark, 12, 100));
background-color: $alternate-surface;
}

.mat-drawer-backdrop.mat-drawer-shown {
background-color: if($is-material-dark, rgba(189, 189, 189, 0.6), rgba(0, 0, 0, 0.6));
}

.mat-mdc-card {
background-color: $alternate-surface;
}

.mat-drawer {
background-color: if(
$is-material-dark,
$material-theme-neutral-palette-darker,
$material-theme-neutral-palette-lighter
);
background-color: $alternate-surface;
}

.cdk-drop-list {
Expand Down Expand Up @@ -798,7 +799,7 @@
}

ngx-skeleton-loader .skeleton-loader {
background: $alternate-surface;
background: $border-color;
}

ngx-extended-pdf-viewer {
Expand Down
2 changes: 1 addition & 1 deletion nifi-frontend/src/main/frontend/libs/shared/src/assets/styles/_codemirror-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
map.get(map.get($config, neutral), lighter)
);
$neutral-contrast: map.get(map.get($config, neutral), contrast);
$alternate-surface: mat.get-theme-color($material-theme, neutral-variant, map.get($config, neutral-variant));
$border-color: mat.get-theme-color($material-theme, neutral-variant, map.get($config, neutral-variant));

.ngx-codemirror {
display: none;
Expand Down
2 changes: 2 additions & 0 deletions nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/material.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -344,6 +344,7 @@ $m3-light-theme-config: (
default: #52bf7e,
lighter: #9dd9b2
),
alternate-surface: #ffffff,
caution: #cf9f5d,
neutral: (
darker: 4,
Expand Down Expand Up @@ -381,6 +382,7 @@ $m3-dark-theme-config: (
default: #52bf7e,
lighter: #9dd9b2
),
alternate-surface: #444444,
caution: #cf9f5d,
neutral: (
darker: 10,
Expand Down
26 changes: 14 additions & 12 deletions nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/purple.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -335,12 +335,13 @@ $m3-light-theme-config: (
default: 40,
lighter: 90
),
success-default: #52bf7e,
success-darker: #016131,
success-lighter: #9dd9b2,
caution-default: #cf9f5d,
caution-darker: #ffcc00,
caution-lighter: #f8bf47,
success: (
darker: #016131,
default: #52bf7e,
lighter: #9dd9b2
),
alternate-surface: #ffffff,
caution: #cf9f5d,
neutral: (
darker: 4,
default: 35,
Expand Down Expand Up @@ -372,12 +373,13 @@ $m3-dark-theme-config: (
default: 70,
lighter: 80
),
success-default: #52bf7e,
success-darker: #016131,
success-lighter: #9dd9b2,
caution-default: #cf9f5d,
caution-darker: #ffcc00,
caution-lighter: #f8bf47,
success: (
darker: #016131,
default: #52bf7e,
lighter: #9dd9b2
),
alternate-surface: #444444,
caution: #cf9f5d,
neutral: (
darker: 10,
default: 40,
Expand Down
6 changes: 3 additions & 3 deletions nifi-frontend/src/main/frontend/libs/shared/src/components/resizable/_resizeable-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@

@mixin generate-theme($material-theme, $config) {
$is-material-dark: if(mat.get-theme-type($material-theme) == dark, true, false);
$alternate-surface: mat.get-theme-color($material-theme, neutral-variant, map.get($config, neutral-variant));
$border-color: mat.get-theme-color($material-theme, neutral-variant, map.get($config, neutral-variant));
.resizable-triangle {
border-right-color: $alternate-surface;
border-bottom-color: $alternate-surface;
border-right-color: $border-color;
border-bottom-color: $border-color;
}
}