💄(frontend) improve comments highlights

Updated comments styles to respect design proposal,
adding distinguishable highlighting, click and hover
style interactions.

Author: ZouicheOmar

CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to
 
 ## [Unreleased]
 
+### Changed
+
+- 💄(frontend) improve comments highlights #1961
+
 ## [v4.8.3] - 2026-03-23
 
 ### Changed

src/frontend/apps/e2e/__tests__/app-impress/doc-comments.spec.ts

@@ -131,12 +131,13 @@ test.describe('Doc Comments', () => {
     await thread.getByRole('paragraph').first().fill('This is a comment');
     await thread.locator('[data-test="save"]').click();
     await expect(thread.getByText('This is a comment').first()).toBeHidden();
+    await expect(editor.getByText('Hello')).toHaveClass('bn-thread-mark');
 
-    // Check background color changed
     await expect(editor.getByText('Hello')).toHaveCSS(
       'background-color',
-      'rgba(237, 180, 0, 0.4)',
+      'color(srgb 0.882353 0.831373 0.717647 / 0.4)',
     );
+
     await editor.first().click();
     await editor.getByText('Hello').click();
 
@@ -185,6 +186,7 @@ test.describe('Doc Comments', () => {
     await thread.getByText('This is an edited comment').first().hover();
     await thread.locator('[data-test="resolve"]').click();
     await expect(thread).toBeHidden();
+
     await expect(editor.getByText('Hello')).toHaveCSS(
       'background-color',
       'rgba(0, 0, 0, 0)',
@@ -196,18 +198,21 @@ test.describe('Doc Comments', () => {
 
     await thread.getByRole('paragraph').first().fill('This is a new comment');
     await thread.locator('[data-test="save"]').click();
+    await expect(editor.getByText('Hello')).toHaveClass('bn-thread-mark');
 
     await expect(editor.getByText('Hello')).toHaveCSS(
       'background-color',
-      'rgba(237, 180, 0, 0.4)',
+      'color(srgb 0.882353 0.831373 0.717647 / 0.4)',
     );
+
     await editor.first().click();
     await editor.getByText('Hello').click();
 
     await thread.getByText('This is a new comment').first().hover();
     await thread.locator('[data-test="moreactions"]').first().click();
     await getMenuItem(thread, 'Delete comment').click();
 
+    await expect(editor.getByText('Hello')).not.toHaveClass('bn-thread-mark');
     await expect(editor.getByText('Hello')).toHaveCSS(
       'background-color',
       'rgba(0, 0, 0, 0)',
@@ -263,7 +268,7 @@ test.describe('Doc Comments', () => {
 
     await expect(otherEditor.getByText('Hello')).toHaveCSS(
       'background-color',
-      'rgba(237, 180, 0, 0.4)',
+      'color(srgb 0.882353 0.831373 0.717647 / 0.4)',
     );
 
     // We change the role of the second user to reader
@@ -298,7 +303,7 @@ test.describe('Doc Comments', () => {
 
     await expect(otherEditor.getByText('Hello')).toHaveCSS(
       'background-color',
-      'rgba(237, 180, 0, 0.4)',
+      'color(srgb 0.882353 0.831373 0.717647 / 0.4)',
     );
     await otherEditor.getByText('Hello').click();
     await expect(
@@ -344,7 +349,7 @@ test.describe('Doc Comments', () => {
 
     await expect(editor1.getByText('Document One')).toHaveCSS(
       'background-color',
-      'rgba(237, 180, 0, 0.4)',
+      'color(srgb 0.882353 0.831373 0.717647 / 0.4)',
     );
 
     await editor1.getByText('Document One').click();

src/frontend/apps/impress/src/features/docs/doc-editor/components/comments/styles.tsx

@@ -8,12 +8,37 @@ export const cssComments = (
   & .--docs--main-editor .ProseMirror {
     // Comments marks in the editor
     .bn-editor {
-      .bn-thread-mark:not([data-orphan='true']),
-      .bn-thread-mark-selected:not([data-orphan='true']) {
-        background: ${canSeeComment ? '#EDB40066' : 'transparent'};
-        color: var(--c--globals--colors--gray-700);
+      // Resets blocknote comments styles
+      .bn-thread-mark,
+      .bn-thread-mark-selected {
+        background-color: transparent;
       }
 
+      ${canSeeComment &&
+      css`
+        .bn-thread-mark:not([data-orphan='true']) {
+          background-color: color-mix(
+            in srgb,
+            var(--c--contextuals--background--palette--yellow--tertiary) 40%,
+            transparent
+          );
+          border-bottom: 2px solid
+            var(--c--contextuals--background--palette--yellow--secondary);
+
+          mix-blend-mode: multiply;
+
+          transition:
+            background-color var(--c--globals--transitions--duration),
+            border-bottom-color var(--c--globals--transitions--duration);
+
+          &:has(.bn-thread-mark-selected) {
+            background-color: var(
+              --c--contextuals--background--palette--yellow--tertiary
+            );
+          }
+        }
+      `}
+
       [data-show-selection] {
         color: HighlightText;
       }