Fix background color and rounded corners issues on Table paginator

Author: zxyctn

src/app.postcss

@@ -13,7 +13,8 @@ body {
 	--tw-ring-color: #00000;
 }
 
-.svelte-select, .svelte-select-list {
+.svelte-select,
+.svelte-select-list {
 	@apply dark:!bg-zinc-700 border dark:!border-zinc-500;
 }
 
@@ -25,3 +26,22 @@ body {
 	@apply dark:!text-black;
 }
 
+.paginator-controls button {
+	@apply variant-filled-primary !text-on-primary-token;
+}
+
+.paginator-controls button:hover {
+	@apply !variant-filled-primary opacity-90;
+}
+
+.paginator-controls button:disabled:hover {
+	@apply !variant-filled-surface;
+}
+
+.paginator-controls button.active {
+	@apply variant-filled-secondary !text-on-secondary-token;
+}
+
+.paginator-controls button:disabled {
+	@apply variant-filled-surface !text-on-surface-token;
+}

src/lib/components/Table/TablePagination.svelte

@@ -67,9 +67,9 @@
 			on:page={(page) => ($pageIndex = page.detail)}
 			settings={paginationSettings}
 			select="hidden"
-			buttonClasses="disabled:!variant-filled-surface !px-3 !py-1.5 !fill-current !variant-filled-primary"
-			active="!variant-filled-secondary"
-			controlVariant="text-on-primary-token"
+			active="active"
+			controlVariant=""
+			regionControl="btn-group"
 			maxNumerals={1}
 			showNumerals
 		/>