style: update Kanban components for improved background effects

- Adjusted background opacity in `Board` and `SwimlanesBase` components to enhance visual layering.
- Modified `Card` component to support a new `background` prop for better customization of column cards.
- Updated styles for `Card` variants to include new gradient effects and backdrop blur adjustments, improving overall aesthetics.
This commit is contained in:
Julien Froidefond
2025-10-02 13:38:31 +02:00
parent 46c1c5e9a1
commit d4e8dc144b
4 changed files with 7 additions and 6 deletions

View File

@@ -81,7 +81,7 @@ export function KanbanBoard({ tasks, onCreateTask, onEditTask, onUpdateStatus, c
}; };
const content = ( const content = (
<div className="h-full flex flex-col bg-[var(--background)]"> <div className="h-full flex flex-col bg-[var(--background)]/30">
{/* Espacement supérieur */} {/* Espacement supérieur */}
<div className="pt-4"></div> <div className="pt-4"></div>

View File

@@ -30,7 +30,7 @@ export function KanbanColumn({ id, tasks, onCreateTask, onEditTask, compactView
return ( return (
<div className="flex-shrink-0 w-72 md:w-72 lg:w-80 h-full"> <div className="flex-shrink-0 w-72 md:w-72 lg:w-80 h-full">
<DropZone ref={setNodeRef} isOver={isOver}> <DropZone ref={setNodeRef} isOver={isOver}>
<Card variant="column" className="h-full flex flex-col"> <Card background="column"variant="column" className="h-full flex flex-col">
<CardHeader className="pb-4"> <CardHeader className="pb-4">
<ColumnHeader <ColumnHeader
title={statusConfig.label} title={statusConfig.label}

View File

@@ -185,7 +185,7 @@ export function SwimlanesBase({
}; };
const content = ( const content = (
<div className="flex flex-col h-full bg-[var(--background)]"> <div className="flex flex-col h-full bg-[var(--background)]/30">
{/* Espacement supérieur */} {/* Espacement supérieur */}
<div className="flex-shrink-0 py-2"></div> <div className="flex-shrink-0 py-2"></div>

View File

@@ -12,7 +12,7 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
({ className, variant = 'default', shadow = 'sm', border = 'default', background = 'default', ...props }, ref) => { ({ className, variant = 'default', shadow = 'sm', border = 'default', background = 'default', ...props }, ref) => {
const backgrounds = { const backgrounds = {
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 before:pointer-events-none', 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 before:pointer-events-none',
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 before:pointer-events-none', column: 'bg-transparent bg-gradient-to-br from-transparent via-transparent to-transparent 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 before:pointer-events-none',
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 before:pointer-events-none' 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 before:pointer-events-none'
}; };
@@ -35,7 +35,7 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
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 before:pointer-events-none', 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 before:pointer-events-none',
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 before:pointer-events-none', 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 before:pointer-events-none',
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 before:pointer-events-none', 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 before:pointer-events-none',
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 before:pointer-events-none', column: 'bg-[var(--card-column)]/50 bg-gradient-to-br from-[var(--card-column)]/50 via-[color-mix(in_srgb,var(--card-column)_50%,var(--background)_50%)] to-[color-mix(in_srgb,var(--card-column)_40%,var(--background)_60%)] 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 before:pointer-events-none',
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 before:pointer-events-none' 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 before:pointer-events-none'
}; };
@@ -48,7 +48,8 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
<div <div
ref={ref} ref={ref}
className={cn( className={cn(
'rounded-lg backdrop-blur-sm transition-all duration-200', 'rounded-lg transition-all duration-200',
background === 'column' ? 'backdrop-blur-none' : 'backdrop-blur-sm',
finalBackground, finalBackground,
finalBorder, finalBorder,
finalShadow, finalShadow,