feat(ui): globalise premium button hover sweep effect

Former-commit-id: bb7199442218d1023b231238b3ddbb4ee1d1be38

components/ui/Button.tsx

@@ -27,10 +27,10 @@ export const buttonVariantsMap = {
   accent: 'bg-accent text-primary-dark shadow-md hover:shadow-accent/30 hover:shadow-2xl',
   saturated: 'bg-saturated text-white shadow-md hover:shadow-primary/30 hover:shadow-2xl',
   outline:
-    'border-2 border-primary bg-transparent text-primary hover:text-white hover:shadow-primary/20 hover:shadow-xl',
-  ghost: 'text-primary hover:shadow-lg',
+    'border-2 border-primary bg-transparent text-primary hover:bg-primary/5 hover:shadow-primary/20 hover:shadow-xl',
+  ghost: 'text-primary hover:bg-primary/5 hover:shadow-lg',
   white:
-    'bg-white text-primary shadow-md hover:shadow-primary/30 hover:shadow-2xl hover:text-white',
+    'bg-white text-primary shadow-md hover:shadow-primary/30 hover:shadow-2xl',
   destructive:
     'bg-destructive text-destructive-foreground shadow-md hover:shadow-destructive/30 hover:shadow-2xl',
 };
@@ -42,15 +42,15 @@ export const buttonSizesMap = {
   xl: 'h-16 px-6 md:px-10 text-lg md:text-xl',
 };
 
-export const buttonOverlayColorsMap = {
-  primary: 'bg-primary-dark',
-  secondary: 'bg-secondary-light',
-  accent: 'bg-accent-dark',
-  saturated: 'bg-primary',
-  outline: 'bg-primary',
-  ghost: 'bg-primary-light/10',
-  white: 'bg-primary-light',
-  destructive: 'bg-destructive/90',
+export const buttonShineColorsMap = {
+  primary: 'via-white/30',
+  secondary: 'via-white/30',
+  accent: 'via-white/40',
+  saturated: 'via-white/30',
+  outline: 'via-primary/20',
+  ghost: 'via-primary/10',
+  white: 'via-primary/20',
+  destructive: 'via-white/30',
 };
 
 export function getButtonClasses(variant: keyof typeof buttonVariantsMap = 'primary', size: keyof typeof buttonSizesMap = 'md', className?: string) {
@@ -61,8 +61,8 @@ export function ButtonOverlay({ variant = 'primary' }: { variant?: keyof typeof
   return (
     <span
       className={cn(
-        'absolute inset-0 translate-y-[101%] group-hover/btn:translate-y-0 transition-transform duration-500 ease-out',
-        buttonOverlayColorsMap[variant]
+        'absolute top-0 -left-[150%] h-full w-[150%] bg-gradient-to-r from-transparent to-transparent skew-x-[-20deg] group-hover/btn:left-[100%] transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] z-0',
+        buttonShineColorsMap[variant]
       )}
     />
   );
@@ -79,12 +79,7 @@ export function Button({
 
   const content = (
     <>
-      <span
-        className={cn(
-          'relative z-10 flex items-center justify-center gap-2 transition-colors duration-500',
-          variant === 'white' ? 'group-hover/btn:text-primary-dark' : '',
-        )}
-      >
+      <span className="relative z-10 flex items-center justify-center gap-2">
         {props.children}
       </span>
       <ButtonOverlay variant={variant} />