From ea29ebf47ce14cd0311d21863b791c58b760f34a Mon Sep 17 00:00:00 2001
From: Ibrahim Mammadov <zxyctn@gmail.com>
Date: Mon, 20 Jan 2025 10:59:00 +0100
Subject: [PATCH 1/2] Update controlVariant class on Table pagination component

---
 src/lib/components/Table/TablePagination.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/Table/TablePagination.svelte b/src/lib/components/Table/TablePagination.svelte
index 5904314..4ac2995 100644
--- a/src/lib/components/Table/TablePagination.svelte
+++ b/src/lib/components/Table/TablePagination.svelte
@@ -69,11 +69,12 @@
 			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"
 			maxNumerals={1}
 			showNumerals
 		/>
 	</div>
-	<div class="flex justify-end items-center">
+	<div class="flex justify-end items-center text-on-primary-token">
 		<span class="text-xs text-gray-500">{indexInformation}</span>
 	</div>
 </div>

From 173eb9abda6698a99b68d6c73ae05fab82ea1af5 Mon Sep 17 00:00:00 2001
From: Ibrahim Mammadov <zxyctn@gmail.com>
Date: Tue, 21 Jan 2025 14:24:01 +0100
Subject: [PATCH 2/2] Fix background color and rounded corners issues on Table
 paginator

---
 src/app.postcss                               | 22 ++++++++++++++++++-
 .../components/Table/TablePagination.svelte   |  6 ++---
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/app.postcss b/src/app.postcss
index e12220b..7bfd0d4 100644
--- a/src/app.postcss
+++ b/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;
+}
diff --git a/src/lib/components/Table/TablePagination.svelte b/src/lib/components/Table/TablePagination.svelte
index 4ac2995..a4daa20 100644
--- a/src/lib/components/Table/TablePagination.svelte
+++ b/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
 		/>