fix(DataTable): fix hover+striped dark mode

gitsindonesia · Oct 26, 2023 · 4501e0b · 4501e0b
1 parent e6fa350
commit 4501e0b
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/packages/table/src/VDataTable.stories.ts b/packages/table/src/VDataTable.stories.ts
@@ -456,6 +456,12 @@ export const DarkMode: StoryFn<typeof VDataTable> = (args) => ({
 
   <p class="mt-10 mb-3">Bordered Variant</p>
   <VDataTable v-bind="args" bordered />
+
+  <p class="mt-10 mb-3">Hover Variant</p>
+  <VDataTable v-bind="args" hover />
+
+  <p class="mt-10 mb-3">Hover+Striped Variant</p>
+  <VDataTable v-bind="args" hover striped />
 </main>
 `,
 });

diff --git a/packages/themes/src/morpheme/_data-table.dark.scss b/packages/themes/src/morpheme/_data-table.dark.scss
@@ -25,9 +25,10 @@
 
     /* striped */
     --v-table-striped-bg-color: var(--color-gray-true-700);
+    --v-table-striped-even-bg-color: var(--color-gray-true-800);
 
     /* hover */
-    --v-table-hover-bg-color: var(--color-gray-true-700);
+    --v-table-hover-bg-color: var(--color-gray-true-600);
   }
 
   .v-table {
@@ -46,8 +47,11 @@
     &-th--sticky,
     &-td--sticky {
       background-color: var(--color-gray-true-800);
-      --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
-      filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+      --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04))
+        drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
+      filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
+        var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
+        var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
     }
 
     // pagination