From 76f5b269f8af2850d9bbce04f4dd9d8e6cdfba3c Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Sat, 16 May 2026 19:04:37 +0300
Subject: [PATCH] refactor: use shadow theme tokens, remove ProjectCard
 translate-hover
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace inline var(--blue) arbitrary shadow values with typed theme
tokens (shadow-brutal-xl, shadow-brutal-2xl). Remove translate on
ProjectCard hover — shadow-only interaction is less distracting in
a dense grid layout.
---
 src/entities/project/ui/ProjectCard/ProjectCard.test.tsx | 2 +-
 src/entities/project/ui/ProjectCard/ProjectCard.tsx      | 7 +------
 src/widgets/Navigation/ui/SidebarNav.tsx                 | 2 +-
 3 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/entities/project/ui/ProjectCard/ProjectCard.test.tsx b/src/entities/project/ui/ProjectCard/ProjectCard.test.tsx
index e42f144..e16c08f 100644
--- a/src/entities/project/ui/ProjectCard/ProjectCard.test.tsx
+++ b/src/entities/project/ui/ProjectCard/ProjectCard.test.tsx
@@ -41,7 +41,7 @@ describe('ProjectCard', () => {
     it('card has hover transition classes', () => {
       const { container } = render(<ProjectCard {...DEFAULT_PROPS} />);
       const card = container.firstChild as HTMLElement;
-      expect(card).toHaveClass('group', 'transition-all', 'duration-300');
+      expect(card).toHaveClass('group', 'transition-shadow', 'duration-300');
     });
 
     it('year badge has correct classes', () => {
diff --git a/src/entities/project/ui/ProjectCard/ProjectCard.tsx b/src/entities/project/ui/ProjectCard/ProjectCard.tsx
index 4b1c9f1..862b7d9 100644
--- a/src/entities/project/ui/ProjectCard/ProjectCard.tsx
+++ b/src/entities/project/ui/ProjectCard/ProjectCard.tsx
@@ -30,12 +30,7 @@ type Props = {
  */
 export function ProjectCard({ title, year, description, tags, imageUrl }: Props) {
   return (
-    <Card
-      className={cn(
-        'group hover:translate-x-[2px] hover:translate-y-[2px]',
-        'hover:shadow-[10px_10px_0_var(--blue)] transition-all duration-300',
-      )}
-    >
+    <Card className={cn('group hover:shadow-brutal-xl transition-shadow duration-300')}>
       <CardHeader>
         <div className="flex flex-row justify-between items-start mb-3">
           <CardTitle className="flex-1">{title}</CardTitle>
diff --git a/src/widgets/Navigation/ui/SidebarNav.tsx b/src/widgets/Navigation/ui/SidebarNav.tsx
index 1109ac9..d48543d 100644
--- a/src/widgets/Navigation/ui/SidebarNav.tsx
+++ b/src/widgets/Navigation/ui/SidebarNav.tsx
@@ -53,7 +53,7 @@ export function SidebarNav({ items }: Props) {
             className={cn(
               'block w-full text-left brutal-border bg-cream px-6 py-4 transition-all duration-300',
               isActive(item)
-                ? 'shadow-[12px_12px_0_var(--blue)] opacity-100 translate-x-0'
+                ? 'shadow-brutal-2xl opacity-100 translate-x-0'
                 : 'opacity-40 shadow-none hover:opacity-60',
             )}
           >