fix: better contrast in note text

juanfran · Jan 8, 2025 · 1302424 · 1302424
1 parent bf11ab9
commit 1302424
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 11 deletions.
diff --git a/libs/nodes/src/lib/note/note.component.scss b/libs/nodes/src/lib/note/note.component.scss
@@ -6,7 +6,6 @@
 
 .name {
   bottom: 0.5rem;
-  color: var(--orange);
   font-size: 1.125rem;
   height: 1.75rem;
   left: 1rem;
@@ -176,14 +175,12 @@ textarea {
   height: var(--emoji-height);
 }
 
-.name,
-.characters {
-  color: var(--black);
+.name{
+  color: var(--contrast-color);
 }
 
 .vote,
-.name,
-.characters {
+.name {
   pointer-events: none;
   z-index: 1;
 }

diff --git a/libs/nodes/src/lib/note/note.component.ts b/libs/nodes/src/lib/note/note.component.ts
@@ -62,6 +62,7 @@ import { defaultNoteColor } from '.';
     '[style.--custom-fg]': '"#000"',
     '[style.--custom-light]': 'lightColor()',
     '[style.--custom-main]': 'color()',
+    '[style.--contrast-color]': 'contrastColor()',
     '[style.transform]': '"rotate(" + this.rotation() + "deg)"',
     '[style.--rotate-angle]': 'rotateAngle()',
   },
@@ -91,21 +92,26 @@ export class NoteComponent {
   width = computed(() => {
     return this.node().content.width;
   });
+  bgColor = computed(() => {
+    return this.node().content.color ?? defaultNoteColor;
+  });
 
   rotation = signal(0);
   rotateAngle = signal('0deg');
+  contrast = computed(() => {
+    return contrast(this.bgColor(), '#ffffff');
+  });
+  contrastColor = computed(() => {
+    return this.contrast() > 2 ? '#ffffff' : '#000000';
+  });
 
   defaultTextColor = computed(() => {
     // if the note has text, the color is by the current text color
     if (this.node().content.text.length) {
       return null;
     }
 
-    const color = this.node().content.color ?? defaultNoteColor;
-
-    const contrastColor = contrast(color, '#ffffff');
-
-    return contrastColor > 2 ? '#ffffff' : '#000000';
+    return this.contrast() > 2 ? '#ffffff' : '#000000';
   });
 
   generateRandomRotation() {