Fix form controls bugs in dark mode (#1573)

tabler · May 14, 2023 · a0a2d52 · a0a2d52
1 parent 260b53e
commit a0a2d52
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 14 deletions.
diff --git a/.changeset/odd-terms-tap.md 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
@@ -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
@@ -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
@@ -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,31 +124,28 @@
     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;
   }
 }
 
 .table-borderless {
   thead th {
     background: transparent;
   }
-}
+}