Fix arrow border color for night mode (#2073)

temporalio · May 2, 2024 · 6fb64f7 · 6fb64f7
1 parent 00395c3
commit 6fb64f7
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/src/lib/holocene/api-pagination.svelte b/src/lib/holocene/api-pagination.svelte
@@ -313,20 +313,22 @@
 
   .arrow-left {
     border-width: 6px 12px 6px 0;
-    border-color: transparent #18181b transparent transparent;
+
+    @apply border-b-transparent border-l-transparent border-r-primary border-t-transparent;
   }
 
   .arrow-left-disabled {
-    border-color: transparent #d4d4d8 transparent transparent;
+    @apply border-b-transparent border-l-transparent border-r-disabled border-t-transparent;
   }
 
   .arrow-right {
     border-width: 6px 0 6px 12px;
-    border-color: transparent transparent transparent #18181b;
+
+    @apply border-b-transparent border-l-primary border-r-transparent border-t-transparent;
   }
 
   .arrow-right-disabled {
-    border-color: transparent transparent transparent #d4d4d8;
+    @apply border-b-transparent border-l-disabled border-r-transparent border-t-transparent;
   }
 
   .caret {
@@ -337,6 +339,6 @@
   }
 
   .caret:disabled {
-    @apply cursor-not-allowed text-slate-400;
+    @apply cursor-not-allowed text-disabled;
   }
 </style>
diff --git a/src/lib/holocene/pagination.svelte b/src/lib/holocene/pagination.svelte
@@ -268,7 +268,7 @@
   }
 
   .caret:disabled {
-    @apply cursor-not-allowed text-slate-400;
+    @apply cursor-not-allowed text-disabled;
   }
 
   .arrow {
@@ -280,19 +280,21 @@
 
   .arrow-left {
     border-width: 6px 12px 6px 0;
-    border-color: transparent #18181b transparent transparent;
+
+    @apply border-b-transparent border-l-transparent border-r-primary border-t-transparent;
   }
 
   .arrow-left-disabled {
-    border-color: transparent #d4d4d8 transparent transparent;
+    @apply border-b-transparent border-l-transparent border-r-disabled border-t-transparent;
   }
 
   .arrow-right {
     border-width: 6px 0 6px 12px;
-    border-color: transparent transparent transparent #18181b;
+
+    @apply border-b-transparent border-l-primary border-r-transparent border-t-transparent;
   }
 
   .arrow-right-disabled {
-    border-color: transparent transparent transparent #d4d4d8;
+    @apply border-b-transparent border-l-disabled border-r-transparent border-t-transparent;
   }
 </style>