From b42bcb25b25285fac99660e95c16b95cab715f8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20K=C3=BChn?= <aku@odoo.com>
Date: Mon, 9 Oct 2023 19:11:35 +0200
Subject: [PATCH] [FIX] mail: style mention without `@extend`
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Follow-up of https://github.com/odoo/odoo/pull/132701

`@extend` was used to reuse classnames intended for styling,
such as `.btn`. However, this has the side-effect to increase
specificity on these classnames, which results in breaking style
on the website where the specificity on `.btn` must not change.

This commit fixes the issue by using a mixin rather than
`@extend`. Since using these mixins are not equivalent, we took
the opportunity to slightly improve the constrast of text color
and background.

closes odoo/odoo#138108

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 addons/mail/static/src/core/common/core.dark.scss |  4 ++++
 addons/mail/static/src/core/common/core.scss      | 11 +++--------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/addons/mail/static/src/core/common/core.dark.scss b/addons/mail/static/src/core/common/core.dark.scss
index f2f3f5d22de..20349cdc6fc 100644
--- a/addons/mail/static/src/core/common/core.dark.scss
+++ b/addons/mail/static/src/core/common/core.dark.scss
@@ -1,3 +1,7 @@
 .o-discuss-badge {
     --o-discuss-badge-bg: #{$primary}; // sync with --o-navbar-badge-bg
 }
+
+a.o_mail_redirect, a.o_channel_redirect {
+    @include button-variant(rgba($primary, .2), rgba($primary, .2), lighten($link-color, 5%), rgba($primary, .3), rgba($primary, .3), lighten($link-color, 10%));
+}
diff --git a/addons/mail/static/src/core/common/core.scss b/addons/mail/static/src/core/common/core.scss
index b1b7351c2d4..729b6f9581e 100644
--- a/addons/mail/static/src/core/common/core.scss
+++ b/addons/mail/static/src/core/common/core.scss
@@ -43,12 +43,7 @@
 }
 
 a.o_mail_redirect, a.o_channel_redirect {
-    background: rgba($primary, .2) !important;
-    @extend .btn;
-    @extend .btn-sm;
-    @extend .btn-link;
-    @extend .align-baseline;
-    @extend .fw-normal;
-    @extend .px-1;
-    @extend .py-0;
+    @include button-variant(rgba($primary, .2), rgba($primary, .2), darken($link-color, 5%), rgba($primary, .3), rgba($primary, .3), darken($link-color, 10%));
+    @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
+    padding: map-get($spacers, 1);
 }