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.
This commit is contained in:
Julien Froidefond
@@ -11,9 +11,9 @@ interface CardProps extends HTMLAttributes<HTMLDivElement> {
|
||||
const Card = forwardRef<HTMLDivElement, CardProps>(
|
||||
({ 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<HTMLDivElement, CardProps>(
|
||||
|
||||
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
|
||||
|
||||
@@ -9,24 +9,24 @@ interface StyledCardProps extends HTMLAttributes<HTMLDivElement> {
|
||||
const StyledCard = forwardRef<HTMLDivElement, StyledCardProps>(
|
||||
({ 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 (
|
||||
|
||||
@@ -335,7 +335,7 @@ const TaskCard = forwardRef<HTMLDivElement, TaskCardProps>(
|
||||
<Card
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'hover:scale-[1.02] hover:shadow-lg hover:shadow-[var(--primary)]/10 hover:border-[var(--primary)]/20 hover:-translate-y-1 transition-all duration-300 ease-out cursor-pointer group',
|
||||
'hover:scale-[1.03] hover:shadow-2xl hover:shadow-[var(--primary)]/25 hover:border-[var(--primary)]/50 hover:-translate-y-2 transition-all duration-300 ease-out cursor-pointer group 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-0 hover:before:opacity-100 before:transition-opacity before:duration-300',
|
||||
isDragging && 'opacity-50 rotate-3 scale-105',
|
||||
(status === 'done' || status === 'archived') && 'opacity-60',
|
||||
status === 'freeze' && 'opacity-60 bg-gradient-to-br from-transparent via-[var(--muted)]/10 to-transparent bg-[length:4px_4px] bg-[linear-gradient(45deg,transparent_25%,var(--border)_25%,var(--border)_50%,transparent_50%,transparent_75%,var(--border)_75%,var(--border))]',
|
||||
|
||||
Reference in New Issue
Block a user