From 6ad614978cde4a3f65a0206b4a3b63ceee4a47db Mon Sep 17 00:00:00 2001
From: Sebin Song <songxevin@gmail.com>
Date: Wed, 4 Dec 2024 10:32:49 +1300
Subject: [PATCH] Two bug-fixes for forced-color mode (#2443)

* add forced-color media-query / forced-color-adjust css prop

* create a mixin for forced-color-mode / adjust cta colors with

* update colours to use system color in forced-color mode

* slider-btn to buttontext instead
---
 frontend/assets/style/_mixins.scss                |  6 ++++++
 frontend/views/components/modal/ModalClose.vue    |  8 ++++++++
 .../chatroom/image-viewer/PreviewImageArea.vue    | 15 +++++++++++++++
 3 files changed, 29 insertions(+)

diff --git a/frontend/assets/style/_mixins.scss b/frontend/assets/style/_mixins.scss
index 8be7245cc9..4e92f11e3c 100644
--- a/frontend/assets/style/_mixins.scss
+++ b/frontend/assets/style/_mixins.scss
@@ -55,6 +55,12 @@ $payment-table-desktop-bp: 1290px;
   }
 }
 
+@mixin if-forced-color-mode {
+  @media (forced-colors: active) {
+    @content;
+  }
+}
+
 %unselectable {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
diff --git a/frontend/views/components/modal/ModalClose.vue b/frontend/views/components/modal/ModalClose.vue
index 323ee6f733..b840694135 100644
--- a/frontend/views/components/modal/ModalClose.vue
+++ b/frontend/views/components/modal/ModalClose.vue
@@ -37,6 +37,10 @@ export default ({
   cursor: pointer;
   background-color: $general_1;
 
+  @include if-forced-color-mode {
+    border: 1px solid buttonborder;
+  }
+
   @include tablet {
     top: 1.5rem;
     right: 1.5rem;
@@ -87,6 +91,10 @@ export default ({
     transition: transform 0.15s ease-in;
     transform: translateX(-50%) translateY(-50%) rotate(45deg);
     transform-origin: center center;
+
+    @include if-forced-color-mode {
+      background-color: buttonborder;
+    }
   }
 
   &::after {
diff --git a/frontend/views/containers/chatroom/image-viewer/PreviewImageArea.vue b/frontend/views/containers/chatroom/image-viewer/PreviewImageArea.vue
index ef22d25f3f..de1240585b 100644
--- a/frontend/views/containers/chatroom/image-viewer/PreviewImageArea.vue
+++ b/frontend/views/containers/chatroom/image-viewer/PreviewImageArea.vue
@@ -488,6 +488,11 @@ img.c-preview-image {
     background-color: var(--image-viewer-slider-bg-color);
     border-radius: 0.5rem;
     opacity: 0.675;
+
+    @include if-forced-color-mode {
+      border: 1px solid buttonborder;
+      opacity: 1;
+    }
   }
 }
 
@@ -514,6 +519,16 @@ img.c-preview-image {
   &.show-slider-output ::v-deep .sOutput {
     display: inline-block;
   }
+
+  ::v-deep input.sInput {
+    forced-color-adjust: none;
+
+    @include if-forced-color-mode {
+      background: none;
+      border: 1px solid buttonborder;
+      color: buttontext;
+    }
+  }
 }
 
 .c-loader-animation {