Merge pull request #401 from sachin-dul/fix/reduce-mention-highlight-opacity

fix: reduce mention highlight background opacity

Author: 7w1

.changeset/reduce-mention-highlight-opacity.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Reduced the opacity of mention highlight backgrounds to be less visually intrusive while remaining noticeable.

src/app/components/message/layout/layout.css.ts

@@ -67,11 +67,11 @@ const HighlightVariant = styleVariants({
 
 const NotifyHighlightVariant = styleVariants({
   silent: {
-    backgroundColor: color.Secondary.Container,
+    backgroundColor: `color-mix(in srgb, ${color.Secondary.Container} 25%, transparent)`,
     boxShadow: `inset ${config.borderWidth.B700} 0 0 ${color.Secondary.ContainerLine}`,
   },
   loud: {
-    backgroundColor: color.Warning.Container,
+    backgroundColor: `color-mix(in srgb, ${color.Warning.Container} 25%, transparent)`,
     boxShadow: `inset ${config.borderWidth.B700} 0 0 ${color.Warning.ContainerLine}`,
   },
 });