Fix form controls bugs in dark mode (#1573)

.changeset/odd-terms-tap.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fix form controls bugs in dark mode

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;

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) {

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;
   }
-}
+}