From c9fae88a86caec99112f6c07ebf187d98f44c4f8 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Wed, 17 Dec 2025 22:48:47 +0200 Subject: [PATCH 01/12] style/note: add custom note color CSS variables on the split containers --- apps/client/src/widgets/note_wrapper.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/client/src/widgets/note_wrapper.ts b/apps/client/src/widgets/note_wrapper.ts index d743d9ffa..9eaed96c7 100644 --- a/apps/client/src/widgets/note_wrapper.ts +++ b/apps/client/src/widgets/note_wrapper.ts @@ -63,6 +63,7 @@ export default class NoteWrapperWidget extends FlexContainer { this.$widget.addClass(utils.getNoteTypeClass(note.type)); this.$widget.addClass(utils.getMimeTypeClass(note.mime)); this.$widget.addClass(`view-mode-${this.noteContext?.viewScope?.viewMode ?? "default"}`); + this.$widget.addClass(note.getColorClass()); this.$widget.toggleClass(["bgfx", "options"], note.isOptions()); this.$widget.toggleClass("protected", note.isProtected); @@ -93,7 +94,7 @@ export default class NoteWrapperWidget extends FlexContainer { const noteId = this.noteContext?.noteId; if ( loadResults.isNoteReloaded(noteId) || - loadResults.getAttributeRows().find((attr) => attr.type === "label" && ["cssClass", "language", "viewType"].includes(attr.name ?? "") && attributeService.isAffecting(attr, this.noteContext?.note)) + loadResults.getAttributeRows().find((attr) => attr.type === "label" && ["cssClass", "language", "viewType", "color"].includes(attr.name ?? "") && attributeService.isAffecting(attr, this.noteContext?.note)) ) { this.refresh(); } From 76c16f3a622cb20c9029ffa7ba5c889d6fcd275c Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 18 Dec 2025 00:53:09 +0200 Subject: [PATCH 02/12] style/note icon: apply the note custom color on the icon --- apps/client/src/stylesheets/theme-next-dark.css | 5 +++++ apps/client/src/stylesheets/theme-next-light.css | 5 +++++ apps/client/src/widgets/note_icon.css | 6 +++--- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index 248efee75..87ead0e47 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -325,3 +325,8 @@ body .todo-list input[type="checkbox"]:not(:checked):before { .use-note-color { --custom-color: var(--dark-theme-custom-color); } + +.note-split.with-hue { + --note-icon-custom-background-color: hsl(var(--custom-color-hue), 8%, 29.4%); + --note-icon-custom-color: hsl(var(--custom-color-hue), 89%, 78%); +} \ No newline at end of file diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index d1364ebd4..d24d002cc 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -296,3 +296,8 @@ --modal-border-color: hsl(var(--custom-color-hue), 33%, 41%); --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 40%, 88%); } + +.note-split.with-hue { + --note-icon-custom-background-color: hsl(var(--custom-color-hue), 50%, 86.7%); + --note-icon-custom-color: hsl(var(--custom-color-hue), 36%, 23%); +} \ No newline at end of file diff --git a/apps/client/src/widgets/note_icon.css b/apps/client/src/widgets/note_icon.css index 7168daf5b..7bcb794a4 100644 --- a/apps/client/src/widgets/note_icon.css +++ b/apps/client/src/widgets/note_icon.css @@ -90,7 +90,7 @@ body.experimental-feature-new-layout { &::before { position: relative; z-index: 1; - color: var(--note-icon-button-color); + color: var(--note-icon-custom-color, var(--note-icon-button-color)); } /* The background circle */ @@ -99,11 +99,11 @@ body.experimental-feature-new-layout { position: absolute; inset: 0; border-radius: 50%; - background: var(--note-icon-button-background-color); + background: var(--note-icon-custom-background-color, var(--note-icon-button-background-color)); } &:focus-visible { - outline: 2px solid var(--note-icon-button-color); + outline: 2px solid var(--note-icon-custom-color, var(--note-icon-button-color)); } &:hover:not(.bx-empty:disabled)::after { From ea2dd0293fa8590df1f03eb9504c4819d1ee48bd Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 18 Dec 2025 02:05:49 +0200 Subject: [PATCH 03/12] style/note icon: tweak colors --- apps/client/src/stylesheets/theme-next-light.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index d24d002cc..db0177579 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -298,6 +298,6 @@ } .note-split.with-hue { - --note-icon-custom-background-color: hsl(var(--custom-color-hue), 50%, 86.7%); + --note-icon-custom-background-color: hsl(var(--custom-color-hue), 53.8%, 87.3%); --note-icon-custom-color: hsl(var(--custom-color-hue), 36%, 23%); } \ No newline at end of file From 7cfc67cf9fe0e3a172032a30af4edf0334de9592 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Thu, 18 Dec 2025 03:14:21 +0200 Subject: [PATCH 04/12] style/note icon: tweak colors --- apps/client/src/stylesheets/theme-next-dark.css | 4 ++-- apps/client/src/stylesheets/theme-next-light.css | 5 +++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index 87ead0e47..574476806 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -327,6 +327,6 @@ body .todo-list input[type="checkbox"]:not(:checked):before { } .note-split.with-hue { - --note-icon-custom-background-color: hsl(var(--custom-color-hue), 8%, 29.4%); - --note-icon-custom-color: hsl(var(--custom-color-hue), 89%, 78%); + --note-icon-custom-background-color: hsl(var(--custom-color-hue), 15.8%, 30.9%); + --note-icon-custom-color: hsl(var(--custom-color-hue), 100%, 76.5%); } \ No newline at end of file diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index db0177579..30396e854 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -298,6 +298,11 @@ } .note-split.with-hue { + /* --note-icon-custom-background-color: hsl(var(--custom-color-hue), 53.8%, 87.3%); --note-icon-custom-color: hsl(var(--custom-color-hue), 36%, 23%); + */ + --note-icon-custom-background-color: hsl(var(--custom-color-hue), 44.5%, 43.1%); + --note-icon-custom-color: hsl(var(--custom-color-hue), 91.3%, 91%); + } \ No newline at end of file From 5bcec9fcfdb95171cdd443d5d07ae781c815df19 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 19 Dec 2025 01:21:52 +0200 Subject: [PATCH 05/12] style/note icon: add hover effect for custom colors --- apps/client/src/stylesheets/theme-next-dark.css | 1 + apps/client/src/stylesheets/theme-next-light.css | 2 +- apps/client/src/widgets/note_icon.css | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index 574476806..ff1482399 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -329,4 +329,5 @@ body .todo-list input[type="checkbox"]:not(:checked):before { .note-split.with-hue { --note-icon-custom-background-color: hsl(var(--custom-color-hue), 15.8%, 30.9%); --note-icon-custom-color: hsl(var(--custom-color-hue), 100%, 76.5%); + --note-icon-hover-custom-background-color: hsl(var(--custom-color-hue), 28.3%, 36.7%); } \ No newline at end of file diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index 30396e854..1d819576a 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -304,5 +304,5 @@ */ --note-icon-custom-background-color: hsl(var(--custom-color-hue), 44.5%, 43.1%); --note-icon-custom-color: hsl(var(--custom-color-hue), 91.3%, 91%); - + --note-icon-hover-custom-background-color: hsl(var(--custom-color-hue), 55.1%, 50.2%); } \ No newline at end of file diff --git a/apps/client/src/widgets/note_icon.css b/apps/client/src/widgets/note_icon.css index 7bcb794a4..80e0732f9 100644 --- a/apps/client/src/widgets/note_icon.css +++ b/apps/client/src/widgets/note_icon.css @@ -107,7 +107,7 @@ body.experimental-feature-new-layout { } &:hover:not(.bx-empty:disabled)::after { - background: var(--note-icon-button-hover-background-color); + background: var(--note-icon-hover-custom-background-color, --note-icon-button-hover-background-color); transition: background 200ms ease-out; } } From b8af9616900d127ea05b599a110c0dbed75cab02 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 19 Dec 2025 01:23:56 +0200 Subject: [PATCH 06/12] style/note icon: refactor variable names --- apps/client/src/stylesheets/theme-next-dark.css | 6 +++--- apps/client/src/stylesheets/theme-next-light.css | 6 +++--- apps/client/src/widgets/note_icon.css | 10 +++++----- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index ff1482399..419dd59c5 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -199,9 +199,9 @@ --badge-background-color: #ffffff1a; --badge-text-color: var(--muted-text-color); - --note-icon-button-background-color: #a6a6a6; - --note-icon-button-hover-background-color: #d0d0d0; - --note-icon-button-color: black; + --note-icon-background-color: #a6a6a6; + --note-icon-color: black; + --note-icon-hover-background-color: #d0d0d0; --promoted-attribute-card-background-color: #ffffff21; --promoted-attribute-card-shadow: none; diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index 1d819576a..a5cbfae80 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -191,9 +191,9 @@ --badge-background-color: #00000011; --badge-text-color: var(--muted-text-color); - --note-icon-button-background-color: #4f4f4f; - --note-icon-button-hover-background-color: #737373; - --note-icon-button-color: white; + --note-icon-background-color: #4f4f4f; + --note-icon-color: white; + --note-icon-hover-background-color: #737373; --promoted-attribute-card-background-color: #00000014; --promoted-attribute-card-shadow: none; diff --git a/apps/client/src/widgets/note_icon.css b/apps/client/src/widgets/note_icon.css index 80e0732f9..5277e22f9 100644 --- a/apps/client/src/widgets/note_icon.css +++ b/apps/client/src/widgets/note_icon.css @@ -77,7 +77,7 @@ div.note-icon-widget { body.experimental-feature-new-layout { .note-icon-widget button.note-icon { - --input-focus-outline-color: var(--note-icon-button-hover-background-color); + --input-focus-outline-color: var(--note-icon-hover-background-color); position: relative; background: transparent !important; @@ -90,7 +90,7 @@ body.experimental-feature-new-layout { &::before { position: relative; z-index: 1; - color: var(--note-icon-custom-color, var(--note-icon-button-color)); + color: var(--note-icon-custom-color, var(--note-icon-color)); } /* The background circle */ @@ -99,15 +99,15 @@ body.experimental-feature-new-layout { position: absolute; inset: 0; border-radius: 50%; - background: var(--note-icon-custom-background-color, var(--note-icon-button-background-color)); + background: var(--note-icon-custom-background-color, var(--note-icon-background-color)); } &:focus-visible { - outline: 2px solid var(--note-icon-custom-color, var(--note-icon-button-color)); + outline: 2px solid var(--note-icon-custom-color, var(--note-icon-color)); } &:hover:not(.bx-empty:disabled)::after { - background: var(--note-icon-hover-custom-background-color, --note-icon-button-hover-background-color); + background: var(--note-icon-hover-custom-background-color, --note-icon-hover-background-color); transition: background 200ms ease-out; } } From 5123f7b67889bfed1dc386d720eed62a16b869d9 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 19 Dec 2025 01:38:34 +0200 Subject: [PATCH 07/12] style/note icon: fix broken hover color for monochrome icons --- apps/client/src/widgets/note_icon.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/client/src/widgets/note_icon.css b/apps/client/src/widgets/note_icon.css index 5277e22f9..e715d5699 100644 --- a/apps/client/src/widgets/note_icon.css +++ b/apps/client/src/widgets/note_icon.css @@ -107,7 +107,7 @@ body.experimental-feature-new-layout { } &:hover:not(.bx-empty:disabled)::after { - background: var(--note-icon-hover-custom-background-color, --note-icon-hover-background-color); + background: var(--note-icon-hover-custom-background-color, var(--note-icon-hover-background-color)); transition: background 200ms ease-out; } } From 3f7514c9c76ca0c32b67c587ccd2a6ee22daecb7 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 19 Dec 2025 01:39:36 +0200 Subject: [PATCH 08/12] style/note icon: tweak dark mode colors --- apps/client/src/stylesheets/theme-next-dark.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index 419dd59c5..cd39b569a 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -199,9 +199,9 @@ --badge-background-color: #ffffff1a; --badge-text-color: var(--muted-text-color); - --note-icon-background-color: #a6a6a6; - --note-icon-color: black; - --note-icon-hover-background-color: #d0d0d0; + --note-icon-background-color: #444444; + --note-icon-color: #d4d4d4; + --note-icon-hover-background-color: #555555; --promoted-attribute-card-background-color: #ffffff21; --promoted-attribute-card-shadow: none; From 46da1187490aaf5489839726867313a26efa4d67 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 19 Dec 2025 01:43:11 +0200 Subject: [PATCH 09/12] style/note icon: cleanup --- apps/client/src/stylesheets/theme-next-light.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index a5cbfae80..8c69593a5 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -298,10 +298,6 @@ } .note-split.with-hue { - /* - --note-icon-custom-background-color: hsl(var(--custom-color-hue), 53.8%, 87.3%); - --note-icon-custom-color: hsl(var(--custom-color-hue), 36%, 23%); - */ --note-icon-custom-background-color: hsl(var(--custom-color-hue), 44.5%, 43.1%); --note-icon-custom-color: hsl(var(--custom-color-hue), 91.3%, 91%); --note-icon-hover-custom-background-color: hsl(var(--custom-color-hue), 55.1%, 50.2%); From 58e24c98ed90d5a7ff4db79cf792e6e94ed448b0 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 19 Dec 2025 01:55:52 +0200 Subject: [PATCH 10/12] style/note icon: fix the parent note color being applied over note links and board items --- apps/client/src/stylesheets/theme-light.css | 8 ++++---- apps/client/src/stylesheets/theme-next-dark.css | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/client/src/stylesheets/theme-light.css b/apps/client/src/stylesheets/theme-light.css index 777ccbd61..cad8d9b4b 100644 --- a/apps/client/src/stylesheets/theme-light.css +++ b/apps/client/src/stylesheets/theme-light.css @@ -89,10 +89,10 @@ html { --custom-color: var(--light-theme-custom-color); } -:root .reference-link, -:root .reference-link:hover, -.ck-content a.reference-link > span, -.board-note { +:root .reference-link.use-note-color, +:root .reference-link.use-note-color:hover, +.ck-content a.reference-link.use-note-color > span, +.board-note.use-note-color { color: var(--light-theme-custom-color, inherit); } diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index cd39b569a..f7ab0d91b 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -297,10 +297,10 @@ --custom-bg-color: hsl(var(--custom-color-hue), 20%, 33%, 0.4); } -:root .reference-link, -:root .reference-link:hover, -.ck-content a.reference-link > span, -.board-note { +:root .reference-link.use-note-color, +:root .reference-link.use-note-color:hover, +.ck-content a.reference-link.use-note-color > span, +.board-note.use-note-color { color: var(--dark-theme-custom-color, inherit); } From 0de05ed16e9b2bf2c1944d34e2344f0249541f3c Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 19 Dec 2025 02:01:03 +0200 Subject: [PATCH 11/12] style/note icon: apply note custom colors over the icons of the quick edit dialog as well --- apps/client/src/stylesheets/theme-next-dark.css | 3 ++- apps/client/src/stylesheets/theme-next-light.css | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css index f7ab0d91b..f4848739e 100644 --- a/apps/client/src/stylesheets/theme-next-dark.css +++ b/apps/client/src/stylesheets/theme-next-dark.css @@ -326,7 +326,8 @@ body .todo-list input[type="checkbox"]:not(:checked):before { --custom-color: var(--dark-theme-custom-color); } -.note-split.with-hue { +.note-split.with-hue, +.quick-edit-dialog-wrapper.with-hue { --note-icon-custom-background-color: hsl(var(--custom-color-hue), 15.8%, 30.9%); --note-icon-custom-color: hsl(var(--custom-color-hue), 100%, 76.5%); --note-icon-hover-custom-background-color: hsl(var(--custom-color-hue), 28.3%, 36.7%); diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css index 8c69593a5..0f71df9c3 100644 --- a/apps/client/src/stylesheets/theme-next-light.css +++ b/apps/client/src/stylesheets/theme-next-light.css @@ -297,7 +297,8 @@ --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 40%, 88%); } -.note-split.with-hue { +.note-split.with-hue, +.quick-edit-dialog-wrapper.with-hue { --note-icon-custom-background-color: hsl(var(--custom-color-hue), 44.5%, 43.1%); --note-icon-custom-color: hsl(var(--custom-color-hue), 91.3%, 91%); --note-icon-hover-custom-background-color: hsl(var(--custom-color-hue), 55.1%, 50.2%); From 32f7ae1edd65ec6e3ebdcd5e968586b6330f8a16 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 19 Dec 2025 02:12:00 +0200 Subject: [PATCH 12/12] client: refactor --- apps/client/src/widgets/note_wrapper.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/client/src/widgets/note_wrapper.ts b/apps/client/src/widgets/note_wrapper.ts index 9eaed96c7..2b8959d11 100644 --- a/apps/client/src/widgets/note_wrapper.ts +++ b/apps/client/src/widgets/note_wrapper.ts @@ -90,11 +90,11 @@ export default class NoteWrapperWidget extends FlexContainer { async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { // listening on changes of note.type and CSS class - + const LABELS_CAUSING_REFRESH = ["cssClass", "language", "viewType", "color"]; const noteId = this.noteContext?.noteId; if ( loadResults.isNoteReloaded(noteId) || - loadResults.getAttributeRows().find((attr) => attr.type === "label" && ["cssClass", "language", "viewType", "color"].includes(attr.name ?? "") && attributeService.isAffecting(attr, this.noteContext?.note)) + loadResults.getAttributeRows().find((attr) => attr.type === "label" && LABELS_CAUSING_REFRESH.includes(attr.name ?? "") && attributeService.isAffecting(attr, this.noteContext?.note)) ) { this.refresh(); }