[Docs Site] Change pagination arrows to gray and reduce size (#20489)

KianNH · web-flow · commit 91855ce0ef0d · 2025-03-03T18:10:21.000Z
diff --git a/src/styles/pagination.css b/src/styles/pagination.css
@@ -32,7 +32,17 @@
 
 		& > svg {
 			align-self: self-end;
-			color: theme("colors.cl1.brand.orange");
+			color: var(--pagination-arrow-color);
+			font-size: 1.25rem;
+			margin-bottom: 1px;
 		}
 	}
 }
+
+:root[data-theme="light"] {
+	--pagination-arrow-color: theme("colors.cl1.gray.0");
+}
+
+:root[data-theme="dark"] {
+	--pagination-arrow-color: theme("colors.cl1.gray.9");
+}

Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,17 @@`
`32`	`32`
`33`	`33`	`& > svg {`
`34`	`34`	`align-self: self-end;`
`35`		`- color: theme("colors.cl1.brand.orange");`
	`35`	`+ color: var(--pagination-arrow-color);`
	`36`	`+ font-size: 1.25rem;`
	`37`	`+ margin-bottom: 1px;`
`36`	`38`	`}`
`37`	`39`	`}`
`38`	`40`	`}`
	`41`	`+`
	`42`	`+:root[data-theme="light"] {`
	`43`	`+ --pagination-arrow-color: theme("colors.cl1.gray.0");`
	`44`	`+}`
	`45`	`+`
	`46`	`+:root[data-theme="dark"] {`
	`47`	`+ --pagination-arrow-color: theme("colors.cl1.gray.9");`
	`48`	`+}`