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

@@ -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;

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 {

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 {