From a0a2d520c6c9c548da84b99a982330a323d98661 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Mon, 15 May 2023 00:41:49 +0200
Subject: [PATCH] Fix form controls bugs in dark mode (#1573)

---
 .changeset/odd-terms-tap.md |  5 +++++
 src/scss/_variables.scss    |  2 +-
 src/scss/ui/_grid.scss      |  4 ++--
 src/scss/ui/_tables.scss    | 23 ++++++++++++-----------
 4 files changed, 20 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/odd-terms-tap.md

diff --git a/.changeset/odd-terms-tap.md b/.changeset/odd-terms-tap.md
new file mode 100644
index 000000000..32b0a6d7d
--- /dev/null
+++ b/.changeset/odd-terms-tap.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix form controls bugs in dark mode
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index bd8a44f9b..c8191a458 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -823,7 +823,7 @@ $input-border-color-translucent: var(
 ) !default;
 $input-placeholder-color: $text-muted-light !default;
 
-$input-group-addon-bg: $light !default;
+$input-group-addon-bg: var(--#{$prefix}bg-surface-secondary) !default;
 $input-group-addon-color: var(--#{$prefix}muted) !default;
 
 $input-border-radius: var(--#{$prefix}border-radius) !default;
diff --git a/src/scss/ui/_grid.scss b/src/scss/ui/_grid.scss
index 9963cd0b2..228958f33 100644
--- a/src/scss/ui/_grid.scss
+++ b/src/scss/ui/_grid.scss
@@ -74,7 +74,7 @@
 
   .divide-y#{$name-prefixed} {
     > :not(template) ~ :not(template) {
-      border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent !important;
+      border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent) !important;
     }
 
     > :not(template):not(:first-child) {
@@ -88,7 +88,7 @@
 
   .divide-x#{$name-prefixed} {
     > :not(template) ~ :not(template) {
-      border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $border-color-translucent !important;
+      border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent) !important;
     }
 
     > :not(template):not(:first-child) {
diff --git a/src/scss/ui/_tables.scss b/src/scss/ui/_tables.scss
index 34fec2982..35baae0cc 100644
--- a/src/scss/ui/_tables.scss
+++ b/src/scss/ui/_tables.scss
@@ -88,7 +88,8 @@
         }
 
         tr {
-          border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $table-border-color;
+          border-bottom: var(--#{$prefix}border-width)
+            var(--#{$prefix}border-style) $table-border-color;
         }
 
         .btn {
@@ -99,6 +100,9 @@
   }
 }
 
+/**
+Table sort
+ */
 .table-sort {
   font: inherit;
   color: inherit;
@@ -120,26 +124,23 @@
     color: var(--#{$prefix}body-color);
   }
 
-  &:after,
-  &.asc:after,
-  &.desc:after {
+  &:after {
     content: "";
     display: inline-flex;
     width: 1rem;
     height: 1rem;
     vertical-align: bottom;
-    background: $table-sort-bg-image no-repeat center;
-    opacity: .2;
+    mask-image: $table-sort-bg-image;
+    background: currentColor;
+    margin-left: .25rem;
   }
 
   &.asc:after {
-    background: $table-sort-desc-bg-image no-repeat center;
-    opacity: 1;
+    mask-image: $table-sort-desc-bg-image;
   }
 
   &.desc:after {
-    background: $table-sort-asc-bg-image no-repeat center;
-    opacity: 1;
+    mask-image: $table-sort-asc-bg-image;
   }
 }
 
@@ -147,4 +148,4 @@
   thead th {
     background: transparent;
   }
-}
\ No newline at end of file
+}