Note header: apply note custom colors over the note icons (#8100)

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.use-note-color,
-:root .reference-link:hover,
+:root .reference-link.use-note-color:hover,
-.ck-content a.reference-link > span,
+.ck-content a.reference-link.use-note-color > span,
-.board-note {
+.board-note.use-note-color {
     color: var(--light-theme-custom-color, inherit);
 }
 

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-background-color: #444444;
-    --note-icon-button-hover-background-color: #d0d0d0;
+    --note-icon-color: #d4d4d4;
-    --note-icon-button-color: black;
+    --note-icon-hover-background-color: #555555;
 
     --promoted-attribute-card-background-color: #ffffff21;
     --promoted-attribute-card-shadow: none;
@@ -297,10 +297,10 @@
     --custom-bg-color: hsl(var(--custom-color-hue), 20%, 33%, 0.4);
 }
 
-:root .reference-link,
+:root .reference-link.use-note-color,
-:root .reference-link:hover,
+:root .reference-link.use-note-color:hover,
-.ck-content a.reference-link > span,
+.ck-content a.reference-link.use-note-color > span,
-.board-note {
+.board-note.use-note-color {
     color: var(--dark-theme-custom-color, inherit);
 }
 
@@ -325,3 +325,10 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
 .use-note-color {
     --custom-color: var(--dark-theme-custom-color);
 }
+
+.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%);
+}

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-background-color: #4f4f4f;
-    --note-icon-button-hover-background-color: #737373;
+    --note-icon-color: white;
-    --note-icon-button-color: white;
+    --note-icon-hover-background-color: #737373;
 
     --promoted-attribute-card-background-color: #00000014;
     --promoted-attribute-card-shadow: none;
@@ -296,3 +296,10 @@
     --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,
+.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%);
+}

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-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-button-background-color);
+            background: var(--note-icon-custom-background-color, var(--note-icon-background-color));
         }
 
         &:focus-visible {
-            outline: 2px solid 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-button-hover-background-color);
+            background: var(--note-icon-hover-custom-background-color, var(--note-icon-hover-background-color));
             transition: background 200ms ease-out;
         }
     }

apps/client/src/widgets/note_wrapper.ts

@@ -63,6 +63,7 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
         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);
 
@@ -89,11 +90,11 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
 
     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"].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();
         }