[12.x] Tailwind pagination styling/accessibility updates

[browner12]

The Problem

• the current Tailwind pagination fails accessibility compliance for contrast. There are many that don't hit AAA, and some that don't hit even AA. This is especially apparent in the dark mode.
• it is incredibly difficult to distinguish which page is currently selected, as the elements lack distinction between them

Here is the pagination as it currently exists, for both light and dark modes, and simple and length aware.

---

Here are a couple of the more egregious contrast failures.

---

The Solution

I tried to approach this with as light a touch as I could, since I know this would affect current live sites. I did my best to make the diffs as simple as possible. You may also view a live playground of the changes. All changes have been synced between tailwind.blade.php and simple-tailwind.blade.php.

• improve contrast ratios to pass AAA compliance
• better indication of selected item
• better indication of hovered item
• show appropriate cursors for non-interactable elements
• use a gap for flexed items. .justify-between alone does not guarantee space
• remove .relative as it does not do anything
• remove unnecessary z-indexes
• use a simple {{ }} echo in HTML attributes, as they do not need embedded HTML
• use rel="next" and rel="prev" consistently
• remove .ml-3 in favor of gap spacing

Here are the results:

[browner12]

Might be easier to compare them next to each other, too:

---

Light Narrow

---

Light Wide

---

Dark Narrow

---

Dark Wide