style: improve link contrast in both light and dark mode (refs #12)

acdh-oeaw · Dec 2, 2024 · ecd4d56 · ecd4d56
1 parent d643e67
commit ecd4d56
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 9 deletions.
diff --git a/app/[locale]/search/page.tsx b/app/[locale]/search/page.tsx
@@ -22,9 +22,10 @@ function FilterMenu(props: { attribute: string }) {
 					count: 'before:content-["("] after:content-[")"]',
 					disabledShowMore: "hidden",
 					label: "px-1",
+					list: "text-[--color-link]",
 					root: "py-2 text-right",
-					selectedItem: "font-bold",
-					showMore: "text-sm pb-4",
+					selectedItem: "font-bold text-[--color-link-active]",
+					showMore: "text-sm pb-4 text-[--color-link]",
 				}}
 				showMore={true}
 				showMoreLimit={100}

diff --git a/components/app-link.tsx b/components/app-link.tsx
@@ -14,7 +14,7 @@ export function AppLink(props: AppLinkProps): ReactNode {
 		<Link
 			{...rest}
 			className={cn(
-				"text-on-background/60 transition aria-[current]:font-medium aria-[current]:text-on-background/80 hover:text-on-background/80 focus-visible:text-on-background/80",
+				"text-[--color-link] transition aria-[current]:font-medium aria-[current]:text-[--color-link-active] hover:text-[--color-link-hover] focus-visible:text-[--color-link-hover]",
 				className,
 			)}
 		>

diff --git a/components/disclosure-button.tsx b/components/disclosure-button.tsx
@@ -10,8 +10,8 @@ interface DisclosureButtonProps {
 
 export function DisclosureButton(props: DisclosureButtonProps): ReactNode {
 	const className = props.state
-		? "text-link lowercase transition font-medium text-on-background/80"
-		: "text-link lowercase text-on-background/60 transition hover:text-on-background/80 focus-visible:text-on-background/80";
+		? "text-link lowercase transition font-medium text-[--color-link-active]"
+		: "text-link lowercase text-[--color-link] transition hover:text-[--color-link-hover] focus-visible:text-[--color-link-hover]";
 	return (
 		<button
 			aria-controls={props.controls}

diff --git a/components/single-refinement-list.tsx b/components/single-refinement-list.tsx
@@ -49,8 +49,8 @@ export function SingleRefinementList(props: SingleRefinementListProps) {
 								items.every((i) => {
 									return !i.isRefined;
 								})
-									? "font-medium text-on-background/80"
-									: "text-on-background/60"
+									? "font-medium text-[--color-link-active]"
+									: "text-[--color-link]"
 							}`}
 						>
 							{props.allLabel}
@@ -63,7 +63,7 @@ export function SingleRefinementList(props: SingleRefinementListProps) {
 					return (
 						<label
 							key={item.label}
-							className="block py-0.5 text-right focus-within:outline focus-within:outline-2"
+							className="block py-1 text-right focus-within:outline focus-within:outline-2"
 						>
 							<input
 								checked={item.isRefined}
@@ -75,7 +75,7 @@ export function SingleRefinementList(props: SingleRefinementListProps) {
 								type="radio"
 							/>
 							<span
-								className={`hover:cursor-pointer ${item.isRefined ? "font-medium text-on-background/80" : "text-on-background/60"}`}
+								className={`hover:cursor-pointer ${item.isRefined ? "font-medium text-[--color-link-active]" : "text-[--color-link]"}`}
 							>
 								{item.label}
 							</span>

diff --git a/styles/index.css b/styles/index.css
@@ -24,6 +24,9 @@ body {
 
 /* stylelint-disable-next-line no-duplicate-selectors */
 :root {
+	--color-link: theme("colors.slate.500");
+	--color-link-active: theme("colors.slate.900");
+	--color-link-hover: theme("colors.slate.700");
 	--color-background: theme("colors.neutral.0");
 	--color-on-background: theme("colors.neutral.950");
 	--color-surface: theme("colors.neutral.0");
@@ -54,6 +57,9 @@ body {
 }
 
 :root[data-ui-color-scheme="dark"] {
+	--color-link: theme("colors.slate.400");
+	--color-link-active: theme("colors.slate.100");
+	--color-link-hover: theme("colors.slate.300");
 	--color-background: theme("colors.neutral.950");
 	--color-on-background: theme("colors.neutral.50");
 	--color-surface: theme("colors.neutral.950");