[onyekachi66]

Closes #1222

Description

What does this PR do?
This PR resolves a styling issue where the Pagination component was hardcoding raw hex colors (#121a2a and #00c389) directly in its Tailwind classes instead of utilizing the application's standard CSS custom properties. By replacing these hardcoded values with design tokens, the component now properly responds to the app's light/dark theme toggle alongside the rest of the component library.

Key Changes:

• Replaced bg-[#121a2a] and text-white with bg-[var(--bg)] and text-[var(--text)] on the Previous button.
• Replaced bg-[#00c389] and text-[#121a2a] with bg-[var(--accent)] and text-[var(--bg)] for the Current page indicator and the Next button.
• Adjusted the default inactive page styles to use bg-[var(--surface)] and text-[var(--text)].

Testing Instructions:

• Navigate to paginated screens (such as ValidationHistory or Notification).
• Verify that the Pagination component correctly displays the intended colors for both light and dark mode when toggling themes.

[drips-wave]

@onyekachi66 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits