From 133a09f9956c48a2391ef834c3b6b5c2fe7fcdcf Mon Sep 17 00:00:00 2001 From: Julien Froidefond Date: Wed, 1 Oct 2025 22:23:29 +0200 Subject: [PATCH] feat: enhance Card and StyledCard components with new shadow and gradient effects - Added new shadow variables for light, medium, and heavy effects in `globals.css` to improve card depth. - Updated `Card` and `StyledCard` components to utilize these shadows and introduced gradient backgrounds for a more dynamic appearance. - Enhanced hover effects in `TaskCard` for improved user interaction with scaling and opacity transitions. --- src/app/globals.css | 165 +++++++++++++++++++++++++++++++ src/components/ui/Card.tsx | 22 ++--- src/components/ui/StyledCard.tsx | 28 +++--- src/components/ui/TaskCard.tsx | 2 +- 4 files changed, 191 insertions(+), 26 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 0c638a1..9705c58 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -30,6 +30,13 @@ --tfs-border: #f59e0b; /* amber-500 */ --jira-text: #1e40af; /* blue-800 - foncé pour contraste */ --tfs-text: #92400e; /* amber-800 - foncé pour contraste */ + + /* Effets de profondeur pour les cards */ + --card-shadow-light: rgba(0, 0, 0, 0.08); + --card-shadow-medium: rgba(0, 0, 0, 0.15); + --card-shadow-heavy: rgba(0, 0, 0, 0.25); + --card-glow-primary: rgba(8, 145, 178, 0.2); + --card-glow-accent: rgba(217, 119, 6, 0.2); } .light { @@ -62,6 +69,13 @@ --tfs-border: #f59e0b; /* amber-500 */ --jira-text: #1e40af; /* blue-800 - foncé pour contraste */ --tfs-text: #92400e; /* amber-800 - foncé pour contraste */ + + /* Effets de profondeur pour les cards */ + --card-shadow-light: rgba(0, 0, 0, 0.08); + --card-shadow-medium: rgba(0, 0, 0, 0.15); + --card-shadow-heavy: rgba(0, 0, 0, 0.25); + --card-glow-primary: rgba(8, 145, 178, 0.2); + --card-glow-accent: rgba(217, 119, 6, 0.2); } .dark { @@ -94,6 +108,13 @@ --tfs-border: #fb923c; /* orange-400 - plus clair pour contraste */ --jira-text: #93c5fd; /* blue-300 - clair pour contraste */ --tfs-text: #fdba74; /* orange-300 - clair pour contraste */ + + /* Effets de profondeur pour les cards */ + --card-shadow-light: rgba(255, 255, 255, 0.05); + --card-shadow-medium: rgba(255, 255, 255, 0.1); + --card-shadow-heavy: rgba(255, 255, 255, 0.15); + --card-glow-primary: rgba(6, 182, 212, 0.3); + --card-glow-accent: rgba(245, 158, 11, 0.3); } .dracula { @@ -126,6 +147,13 @@ --tfs-border: #ffb86c; /* dracula orange */ --jira-text: #f8f8f2; /* dracula foreground - texte principal */ --tfs-text: #f8f8f2; /* dracula foreground - texte principal */ + + /* Effets de profondeur pour les cards */ + --card-shadow-light: rgba(255, 255, 255, 0.05); + --card-shadow-medium: rgba(255, 255, 255, 0.1); + --card-shadow-heavy: rgba(255, 255, 255, 0.15); + --card-glow-primary: rgba(255, 121, 198, 0.3); + --card-glow-accent: rgba(255, 184, 108, 0.3); } .monokai { @@ -158,6 +186,13 @@ --tfs-border: #fd971f; /* monokai orange */ --jira-text: #f8f8f2; /* monokai foreground */ --tfs-text: #f8f8f2; /* monokai foreground */ + + /* Effets de profondeur pour les cards */ + --card-shadow-light: rgba(255, 255, 255, 0.05); + --card-shadow-medium: rgba(255, 255, 255, 0.1); + --card-shadow-heavy: rgba(255, 255, 255, 0.15); + --card-glow-primary: rgba(249, 38, 114, 0.3); + --card-glow-accent: rgba(253, 151, 31, 0.3); } .nord { @@ -190,6 +225,13 @@ --tfs-border: #d08770; /* nord12 - orange */ --jira-text: #d8dee9; /* nord4 - texte principal */ --tfs-text: #d8dee9; /* nord4 - texte principal */ + + /* Effets de profondeur pour les cards */ + --card-shadow-light: rgba(255, 255, 255, 0.05); + --card-shadow-medium: rgba(255, 255, 255, 0.1); + --card-shadow-heavy: rgba(255, 255, 255, 0.15); + --card-glow-primary: rgba(94, 129, 172, 0.3); + --card-glow-accent: rgba(208, 135, 112, 0.3); } .gruvbox { @@ -222,6 +264,13 @@ --tfs-border: #fe8019; /* gruvbox orange */ --jira-text: #ebdbb2; /* gruvbox fg */ --tfs-text: #ebdbb2; /* gruvbox fg */ + + /* Effets de profondeur pour les cards */ + --card-shadow-light: rgba(255, 255, 255, 0.05); + --card-shadow-medium: rgba(255, 255, 255, 0.1); + --card-shadow-heavy: rgba(255, 255, 255, 0.15); + --card-glow-primary: rgba(254, 128, 25, 0.3); + --card-glow-accent: rgba(250, 189, 47, 0.3); } .tokyo_night { @@ -254,6 +303,13 @@ --tfs-border: #ff9e64; /* tokyo-night orange */ --jira-text: #a9b1d6; /* tokyo-night fg */ --tfs-text: #a9b1d6; /* tokyo-night fg */ + + /* Effets de profondeur pour les cards */ + --card-shadow-light: rgba(255, 255, 255, 0.05); + --card-shadow-medium: rgba(255, 255, 255, 0.1); + --card-shadow-heavy: rgba(255, 255, 255, 0.15); + --card-glow-primary: rgba(122, 162, 247, 0.3); + --card-glow-accent: rgba(255, 158, 100, 0.3); } .catppuccin { @@ -286,6 +342,13 @@ --tfs-border: #fab387; /* catppuccin peach */ --jira-text: #cdd6f4; /* catppuccin text */ --tfs-text: #cdd6f4; /* catppuccin text */ + + /* Effets de profondeur pour les cards */ + --card-shadow-light: rgba(255, 255, 255, 0.05); + --card-shadow-medium: rgba(255, 255, 255, 0.1); + --card-shadow-heavy: rgba(255, 255, 255, 0.15); + --card-glow-primary: rgba(203, 166, 247, 0.3); + --card-glow-accent: rgba(250, 179, 135, 0.3); } .rose_pine { @@ -318,6 +381,13 @@ --tfs-border: #f6c177; /* rose-pine gold - orange/jaune */ --jira-text: #e0def4; /* rose-pine text */ --tfs-text: #e0def4; /* rose-pine text */ + + /* Effets de profondeur pour les cards */ + --card-shadow-light: rgba(255, 255, 255, 0.05); + --card-shadow-medium: rgba(255, 255, 255, 0.1); + --card-shadow-heavy: rgba(255, 255, 255, 0.15); + --card-glow-primary: rgba(196, 167, 231, 0.3); + --card-glow-accent: rgba(246, 193, 119, 0.3); } .one_dark { @@ -350,6 +420,13 @@ --tfs-border: #e5c07b; /* one-dark yellow */ --jira-text: #abb2bf; /* one-dark fg */ --tfs-text: #abb2bf; /* one-dark fg */ + + /* Effets de profondeur pour les cards */ + --card-shadow-light: rgba(255, 255, 255, 0.05); + --card-shadow-medium: rgba(255, 255, 255, 0.1); + --card-shadow-heavy: rgba(255, 255, 255, 0.15); + --card-glow-primary: rgba(97, 175, 239, 0.3); + --card-glow-accent: rgba(229, 192, 123, 0.3); } .material { @@ -382,6 +459,13 @@ --tfs-border: #ffab40; /* material secondary - orange */ --jira-text: #ffffff; /* material on-bg */ --tfs-text: #ffffff; /* material on-bg */ + + /* Effets de profondeur pour les cards */ + --card-shadow-light: rgba(255, 255, 255, 0.05); + --card-shadow-medium: rgba(255, 255, 255, 0.1); + --card-shadow-heavy: rgba(255, 255, 255, 0.15); + --card-glow-primary: rgba(187, 134, 252, 0.3); + --card-glow-accent: rgba(255, 171, 64, 0.3); } .solarized { @@ -414,6 +498,13 @@ --tfs-border: #b58900; /* solarized yellow */ --jira-text: #93a1a1; /* solarized base1 */ --tfs-text: #93a1a1; /* solarized base1 */ + + /* Effets de profondeur pour les cards */ + --card-shadow-light: rgba(255, 255, 255, 0.05); + --card-shadow-medium: rgba(255, 255, 255, 0.1); + --card-shadow-heavy: rgba(255, 255, 255, 0.15); + --card-glow-primary: rgba(38, 139, 210, 0.3); + --card-glow-accent: rgba(181, 137, 0, 0.3); } @theme inline { @@ -513,6 +604,80 @@ body.has-background-image .min-h-screen.bg-\[var\(--background\)\] { border-color: color-mix(in srgb, var(--destructive) 25%, var(--border)); } +/* Effets de texture sophistiqués pour les cards */ +.card-texture-subtle { + background-image: + radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), + radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%), + radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.03) 0%, transparent 50%); +} + +.card-texture-dark { + background-image: + radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%), + radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.02) 0%, transparent 50%), + radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.01) 0%, transparent 50%); +} + +/* Effets de brillance pour les cards */ +.card-shine { + position: relative; + overflow: hidden; +} + +.card-shine::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.2), + transparent + ); + transition: left 0.5s; +} + +.card-shine:hover::before { + left: 100%; +} + +/* Effets de profondeur améliorés */ +.card-depth-1 { + box-shadow: + 0 1px 3px var(--card-shadow-light), + 0 1px 2px var(--card-shadow-light); +} + +.card-depth-2 { + box-shadow: + 0 4px 6px -1px var(--card-shadow-light), + 0 2px 4px -1px var(--card-shadow-light); +} + +.card-depth-3 { + box-shadow: + 0 10px 15px -3px var(--card-shadow-medium), + 0 4px 6px -2px var(--card-shadow-light); +} + +.card-glow-primary { + box-shadow: + 0 0 0 1px var(--card-glow-primary), + 0 4px 6px -1px var(--card-shadow-light), + 0 2px 4px -1px var(--card-shadow-light); +} + +.card-glow-accent { + box-shadow: + 0 0 0 1px var(--card-glow-accent), + 0 4px 6px -1px var(--card-shadow-light), + 0 2px 4px -1px var(--card-shadow-light); +} + .outline-card-purple { @apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01]; color: var(--purple); diff --git a/src/components/ui/Card.tsx b/src/components/ui/Card.tsx index fdcafec..9be8169 100644 --- a/src/components/ui/Card.tsx +++ b/src/components/ui/Card.tsx @@ -11,9 +11,9 @@ interface CardProps extends HTMLAttributes { const Card = forwardRef( ({ className, variant = 'default', shadow = 'sm', border = 'default', background = 'default', ...props }, ref) => { const backgrounds = { - default: 'bg-[var(--card)] bg-gradient-to-b from-[var(--card)] to-[color-mix(in_srgb,var(--card)_80%,var(--background)_20%)]', - column: 'bg-[var(--card-column)] bg-gradient-to-b from-[var(--card-column)] to-[color-mix(in_srgb,var(--card-column)_80%,var(--background)_20%)]', - muted: 'bg-[var(--muted)]/10 bg-gradient-to-b from-[var(--muted)]/10 to-[color-mix(in_srgb,var(--muted)_4%,var(--background)_6%)]' + default: 'bg-[var(--card)] bg-gradient-to-br from-[var(--card)] via-[color-mix(in_srgb,var(--card)_90%,var(--background)_10%)] to-[color-mix(in_srgb,var(--card)_75%,var(--background)_25%)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_8%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_4%,transparent)] before:to-transparent before:opacity-80', + column: 'bg-[var(--card-column)] bg-gradient-to-br from-[var(--card-column)] via-[color-mix(in_srgb,var(--card-column)_90%,var(--background)_10%)] to-[color-mix(in_srgb,var(--card-column)_75%,var(--background)_25%)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_10%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_5%,transparent)] before:to-transparent before:opacity-90', + muted: 'bg-[var(--muted)]/15 bg-gradient-to-br from-[var(--muted)]/15 via-[color-mix(in_srgb,var(--muted)_10%,var(--background)_5%)] to-[color-mix(in_srgb,var(--muted)_8%,var(--background)_7%)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-transparent before:via-[color-mix(in_srgb,var(--muted)_12%,transparent)] before:to-transparent before:opacity-60' }; const borders = { @@ -25,18 +25,18 @@ const Card = forwardRef( const shadows = { none: '', - sm: 'shadow-sm', - md: 'shadow-md', - lg: 'shadow-lg' + sm: 'shadow-lg shadow-[var(--card-shadow-medium)]', + md: 'shadow-xl shadow-[var(--card-shadow-medium)]', + lg: 'shadow-2xl shadow-[var(--card-shadow-heavy)]' }; // Variants prédéfinis pour la rétrocompatibilité const variantStyles = { - default: '', - elevated: 'shadow-lg', - bordered: 'border-[var(--primary)]/30 shadow-lg', - column: 'bg-[var(--card-column)] shadow-lg', - glass: 'bg-[var(--card)]/30 border border-[var(--border)]/50 backdrop-blur-sm' + default: 'shadow-lg shadow-[var(--card-shadow-medium)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_6%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_3%,transparent)] before:to-transparent before:opacity-70', + elevated: 'shadow-xl shadow-[var(--card-shadow-heavy)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_8%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_4%,transparent)] before:to-[color-mix(in_srgb,var(--primary)_2%,transparent)] before:opacity-80', + bordered: 'border-[var(--primary)]/40 shadow-xl shadow-[var(--primary)]/20 relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_10%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_5%,transparent)] before:to-transparent before:opacity-90', + column: 'bg-[var(--card-column)] shadow-xl shadow-[var(--card-shadow-heavy)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_8%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_4%,transparent)] before:to-[color-mix(in_srgb,var(--primary)_2%,transparent)] before:opacity-80', + glass: 'bg-[var(--card)]/40 border border-[var(--border)]/60 backdrop-blur-md shadow-xl shadow-[var(--card-shadow-medium)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_12%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_6%,transparent)] before:to-transparent before:opacity-90' }; // Appliquer le variant si spécifié, sinon utiliser les props individuelles diff --git a/src/components/ui/StyledCard.tsx b/src/components/ui/StyledCard.tsx index 5fa1d5c..02ec673 100644 --- a/src/components/ui/StyledCard.tsx +++ b/src/components/ui/StyledCard.tsx @@ -9,24 +9,24 @@ interface StyledCardProps extends HTMLAttributes { const StyledCard = forwardRef( ({ className, variant = 'default', color = 'default', ...props }, ref) => { const variants = { - default: 'bg-[var(--card)]/50 border border-[var(--border)]/50', - outline: 'bg-transparent border border-[var(--border)]', - elevated: 'bg-[var(--card)]/80 border border-[var(--border)]/50 shadow-lg shadow-[var(--card)]/20', - bordered: 'bg-[var(--card)]/50 border border-[var(--primary)]/30 shadow-[var(--primary)]/10 shadow-lg', - column: 'bg-[var(--card-column)] border border-[var(--border)]/50 shadow-lg shadow-[var(--card)]/20' + default: 'bg-[var(--card)]/50 border border-[var(--border)]/50 relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-transparent before:via-[color-mix(in_srgb,var(--primary)_2%,transparent)] before:to-[color-mix(in_srgb,var(--primary)_1%,transparent)] before:opacity-40', + outline: 'bg-transparent border border-[var(--border)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_3%,transparent)] before:via-transparent before:to-transparent before:opacity-30', + elevated: 'bg-[var(--card)]/80 border border-[var(--border)]/50 shadow-lg shadow-[var(--card)]/20 relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_4%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_2%,transparent)] before:to-transparent before:opacity-50', + bordered: 'bg-[var(--card)]/50 border border-[var(--primary)]/30 shadow-[var(--primary)]/10 shadow-lg relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_6%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_3%,transparent)] before:to-[color-mix(in_srgb,var(--primary)_1%,transparent)] before:opacity-60', + column: 'bg-[var(--card-column)] border border-[var(--border)]/50 shadow-lg shadow-[var(--card)]/20 relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-transparent before:via-[color-mix(in_srgb,var(--primary)_3%,transparent)] before:to-[color-mix(in_srgb,var(--primary)_1%,transparent)] before:opacity-50' }; const colors = { default: '', - primary: 'bg-[color-mix(in_srgb,var(--primary)_8%,transparent)] border-[color-mix(in_srgb,var(--primary)_25%,var(--border))] text-[var(--primary)]', - success: 'bg-[color-mix(in_srgb,var(--success)_8%,transparent)] border-[color-mix(in_srgb,var(--success)_25%,var(--border))] text-[var(--success)]', - destructive: 'bg-[color-mix(in_srgb,var(--destructive)_8%,transparent)] border-[color-mix(in_srgb,var(--destructive)_25%,var(--border))] text-[var(--destructive)]', - accent: 'bg-[color-mix(in_srgb,var(--accent)_8%,transparent)] border-[color-mix(in_srgb,var(--accent)_25%,var(--border))] text-[var(--accent)]', - purple: 'bg-[color-mix(in_srgb,var(--purple)_8%,transparent)] border-[color-mix(in_srgb,var(--purple)_25%,var(--border))] text-[var(--purple)]', - yellow: 'bg-[color-mix(in_srgb,var(--yellow)_8%,transparent)] border-[color-mix(in_srgb,var(--yellow)_25%,var(--border))] text-[var(--yellow)]', - green: 'bg-[color-mix(in_srgb,var(--green)_8%,transparent)] border-[color-mix(in_srgb,var(--green)_25%,var(--border))] text-[var(--green)]', - blue: 'bg-[color-mix(in_srgb,var(--blue)_8%,transparent)] border-[color-mix(in_srgb,var(--blue)_25%,var(--border))] text-[var(--blue)]', - gray: 'bg-[color-mix(in_srgb,var(--gray)_8%,transparent)] border-[color-mix(in_srgb,var(--gray)_25%,var(--border))] text-[var(--gray)]' + primary: 'bg-gradient-to-br from-[color-mix(in_srgb,var(--primary)_12%,transparent)] via-[color-mix(in_srgb,var(--primary)_8%,transparent)] to-[color-mix(in_srgb,var(--primary)_4%,transparent)] border-[color-mix(in_srgb,var(--primary)_30%,var(--border))] text-[var(--primary)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--primary)_6%,transparent)] before:via-transparent before:to-transparent before:opacity-50', + success: 'bg-gradient-to-br from-[color-mix(in_srgb,var(--success)_12%,transparent)] via-[color-mix(in_srgb,var(--success)_8%,transparent)] to-[color-mix(in_srgb,var(--success)_4%,transparent)] border-[color-mix(in_srgb,var(--success)_30%,var(--border))] text-[var(--success)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--success)_6%,transparent)] before:via-transparent before:to-transparent before:opacity-50', + destructive: 'bg-gradient-to-br from-[color-mix(in_srgb,var(--destructive)_12%,transparent)] via-[color-mix(in_srgb,var(--destructive)_8%,transparent)] to-[color-mix(in_srgb,var(--destructive)_4%,transparent)] border-[color-mix(in_srgb,var(--destructive)_30%,var(--border))] text-[var(--destructive)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--destructive)_6%,transparent)] before:via-transparent before:to-transparent before:opacity-50', + accent: 'bg-gradient-to-br from-[color-mix(in_srgb,var(--accent)_12%,transparent)] via-[color-mix(in_srgb,var(--accent)_8%,transparent)] to-[color-mix(in_srgb,var(--accent)_4%,transparent)] border-[color-mix(in_srgb,var(--accent)_30%,var(--border))] text-[var(--accent)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--accent)_6%,transparent)] before:via-transparent before:to-transparent before:opacity-50', + purple: 'bg-gradient-to-br from-[color-mix(in_srgb,var(--purple)_12%,transparent)] via-[color-mix(in_srgb,var(--purple)_8%,transparent)] to-[color-mix(in_srgb,var(--purple)_4%,transparent)] border-[color-mix(in_srgb,var(--purple)_30%,var(--border))] text-[var(--purple)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--purple)_6%,transparent)] before:via-transparent before:to-transparent before:opacity-50', + yellow: 'bg-gradient-to-br from-[color-mix(in_srgb,var(--yellow)_12%,transparent)] via-[color-mix(in_srgb,var(--yellow)_8%,transparent)] to-[color-mix(in_srgb,var(--yellow)_4%,transparent)] border-[color-mix(in_srgb,var(--yellow)_30%,var(--border))] text-[var(--yellow)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--yellow)_6%,transparent)] before:via-transparent before:to-transparent before:opacity-50', + green: 'bg-gradient-to-br from-[color-mix(in_srgb,var(--green)_12%,transparent)] via-[color-mix(in_srgb,var(--green)_8%,transparent)] to-[color-mix(in_srgb,var(--green)_4%,transparent)] border-[color-mix(in_srgb,var(--green)_30%,var(--border))] text-[var(--green)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--green)_6%,transparent)] before:via-transparent before:to-transparent before:opacity-50', + blue: 'bg-gradient-to-br from-[color-mix(in_srgb,var(--blue)_12%,transparent)] via-[color-mix(in_srgb,var(--blue)_8%,transparent)] to-[color-mix(in_srgb,var(--blue)_4%,transparent)] border-[color-mix(in_srgb,var(--blue)_30%,var(--border))] text-[var(--blue)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--blue)_6%,transparent)] before:via-transparent before:to-transparent before:opacity-50', + gray: 'bg-gradient-to-br from-[color-mix(in_srgb,var(--gray)_12%,transparent)] via-[color-mix(in_srgb,var(--gray)_8%,transparent)] to-[color-mix(in_srgb,var(--gray)_4%,transparent)] border-[color-mix(in_srgb,var(--gray)_30%,var(--border))] text-[var(--gray)] relative before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-[color-mix(in_srgb,var(--gray)_6%,transparent)] before:via-transparent before:to-transparent before:opacity-50' }; return ( diff --git a/src/components/ui/TaskCard.tsx b/src/components/ui/TaskCard.tsx index 57dd561..38bdfd6 100644 --- a/src/components/ui/TaskCard.tsx +++ b/src/components/ui/TaskCard.tsx @@ -335,7 +335,7 @@ const TaskCard = forwardRef(