style: cleaner pagination style

Author: TheComputerM

src/components/ProjectPagination.tsx

@@ -4,8 +4,8 @@ import { Pagination } from "@ark-ui/solid";
 import type { Page } from "astro";
 import { type Component, For } from "solid-js";
 import { paginationStyles } from "~/styles/pagination";
-import TablerChevronLeft from "~icons/tabler/chevron-left";
-import TablerChevronRight from "~icons/tabler/chevron-right";
+import TablerCaretLeftFilled from "~icons/tabler/caret-left-filled";
+import TablerCaretRightFilled from "~icons/tabler/caret-right-filled";
 
 export const ProjectPagination: Component<{
 	page: Page<CollectionEntry<"projects">>;
@@ -19,7 +19,7 @@ export const ProjectPagination: Component<{
 			class={paginationStyles.root}
 		>
 			<Pagination.PrevTrigger class={paginationStyles.trigger}>
-				<TablerChevronLeft />
+				<TablerCaretLeftFilled />
 			</Pagination.PrevTrigger>
 			<Pagination.Context>
 				{(api) => (
@@ -39,7 +39,7 @@ export const ProjectPagination: Component<{
 				)}
 			</Pagination.Context>
 			<Pagination.NextTrigger class={paginationStyles.trigger}>
-				<TablerChevronRight />
+				<TablerCaretRightFilled />
 			</Pagination.NextTrigger>
 		</Pagination.Root>
 	);

src/styles/button.ts

@@ -36,13 +36,37 @@ export const buttonStyles = cva({
 					backgroundColor: "fg.canvas",
 				},
 			},
+			outline: {
+				borderWidth: "base",
+				borderColor: "fg.default",
+				_hover: {
+					borderColor: "fg.canvas",
+				},
+				_selected: {
+					backgroundColor: "fg.default",
+					color: "bg.canvas",
+				},
+			},
 		},
 		size: {
-			md: {
+			sm: {
 				h: "8",
 				minW: "8",
 				textStyle: "sm",
-				px: "2",
+				px: "3",
+				gap: "2",
+			},
+			md: {
+				h: "9",
+				minW: "9",
+				px: "3.5",
+				gap: "2",
+			},
+			lg: {
+				h: "10",
+				minW: "10",
+				textStyle: "lg",
+				px: "4",
 				gap: "2",
 			},
 		},

src/styles/pagination.ts

@@ -1,26 +1,13 @@
-import { css } from "styled-system/css";
-import { token } from "styled-system/tokens";
+import { css, cx } from "styled-system/css";
 import { buttonStyles } from "./button";
 
 export const paginationStyles = {
 	root: css({
 		display: "flex",
 		justifyContent: "center",
-		alignItems: "stretch",
-		gap: "6",
+		alignItems: "center",
+		gap: "4",
 	}),
 	trigger: buttonStyles({ icon: true }),
-	item: css({
-		cursor: "pointer",
-		fontVariantNumeric: "tabular-nums",
-		backgroundColor: "bg.canvas",
-		px: "2",
-		fontSize: "lg",
-		"&[data-selected]": {
-			textDecoration: "underline",
-			textDecorationThickness: token.var("borderWidths.base"),
-			backgroundColor: "fg.default",
-			color: "bg.canvas",
-		},
-	}),
+	item: buttonStyles({ variant: "outline", icon: true }),
 };