fix: Add subtle transition to links

sapegin · May 17, 2024 · ca16b1b · ca16b1b
1 parent d066ffe
commit ca16b1b
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/src/panda-preset/patterns/link.ts b/src/panda-preset/patterns/link.ts
@@ -15,6 +15,9 @@ export const link: PatternConfig = {
 			lineHeight: 'inherit',
 			textDecoration: 'underline',
 			color: 'primary',
+			transitionDuration: 'hover',
+			transitionTimingFunction: 'hover',
+			transitionProperty: 'all',
 			_visited: {
 				color: 'primary',
 			},

diff --git a/src/panda-preset/patterns/quotedLink.ts b/src/panda-preset/patterns/quotedLink.ts
@@ -15,6 +15,9 @@ export const quotedLink: PatternConfig = {
 			lineHeight: 'inherit',
 			textDecoration: 'none',
 			color: 'inherit',
+			transitionDuration: 'hover',
+			transitionTimingFunction: 'hover',
+			transitionProperty: 'all',
 			_hover: {
 				cursor: 'pointer',
 			},

diff --git a/src/panda-preset/theme.ts b/src/panda-preset/theme.ts
@@ -66,6 +66,14 @@ export const theme = {
 			button: { value: '0.25em' },
 			round: { value: '99999em' },
 		},
+		easings: {
+			fade: { value: 'ease-out' },
+			hover: { value: 'ease-in' },
+		},
+		durations: {
+			fade: { value: '0.15s' },
+			hover: { value: '0.1s' },
+		},
 	},
 	semanticTokens: {
 		fontSizes: {