feat: enhance global styles and component themes with new semantic colors; integrate ThemeProvider for improved theme management and update color usage across various components for consistency

This commit is contained in:
Julien Froidefond
2025-12-22 08:40:25 +01:00
parent 6c14484636
commit 4f13134ef0
39 changed files with 809 additions and 432 deletions

View File

@@ -36,13 +36,13 @@ export function SavingsTrendChart({
<CardTitle>Évolution des économies</CardTitle>
<div className="flex items-center gap-2">
{isPositive ? (
<TrendingUp className="w-4 h-4 text-emerald-600" />
<TrendingUp className="w-4 h-4 text-success" />
) : (
<TrendingDown className="w-4 h-4 text-red-600" />
<TrendingDown className="w-4 h-4 text-destructive" />
)}
<span
className={`text-sm font-semibold ${
isPositive ? "text-emerald-600" : "text-red-600"
isPositive ? "text-success" : "text-destructive"
}`}
>
{formatCurrency(latestSavings)}

View File

@@ -23,8 +23,8 @@ export function StatsSummaryCards({
<div className="grid gap-3 md:gap-4 grid-cols-2 md:grid-cols-4">
<Card className="stat-card-textured relative overflow-hidden">
{/* Icône en arrière-plan */}
<div className="absolute bottom-2 right-2 opacity-[0.04] dark:opacity-[0.03] z-0 pointer-events-none">
<TrendingUp className="h-16 w-16 md:h-20 md:w-20 text-emerald-600 dark:text-emerald-400" strokeWidth={1} />
<div className="absolute bottom-2 right-2 opacity-[0.04] z-0 pointer-events-none">
<TrendingUp className="h-16 w-16 md:h-20 md:w-20 text-success" strokeWidth={1} />
</div>
<CardHeader className="pb-3 px-5 pt-5 relative z-10">
<CardTitle className="text-[10px] md:text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
@@ -32,7 +32,7 @@ export function StatsSummaryCards({
</CardTitle>
</CardHeader>
<CardContent className="px-5 pb-5 pt-0 relative z-10">
<div className="text-xl md:text-2xl font-black text-emerald-600 dark:text-emerald-400 tracking-tight">
<div className="text-xl md:text-2xl font-black text-success tracking-tight">
{formatCurrency(totalIncome)}
</div>
</CardContent>
@@ -40,8 +40,8 @@ export function StatsSummaryCards({
<Card className="stat-card-textured relative overflow-hidden">
{/* Icône en arrière-plan */}
<div className="absolute bottom-2 right-2 opacity-[0.04] dark:opacity-[0.03] z-0 pointer-events-none">
<TrendingDown className="h-16 w-16 md:h-20 md:w-20 text-red-600 dark:text-red-400" strokeWidth={1} />
<div className="absolute bottom-2 right-2 opacity-[0.04] z-0 pointer-events-none">
<TrendingDown className="h-16 w-16 md:h-20 md:w-20 text-destructive" strokeWidth={1} />
</div>
<CardHeader className="pb-3 px-5 pt-5 relative z-10">
<CardTitle className="text-[10px] md:text-xs font-semibold text-muted-foreground/80 uppercase tracking-wider">
@@ -49,7 +49,7 @@ export function StatsSummaryCards({
</CardTitle>
</CardHeader>
<CardContent className="px-5 pb-5 pt-0 relative z-10">
<div className="text-xl md:text-2xl font-black text-red-600 dark:text-red-400 tracking-tight">
<div className="text-xl md:text-2xl font-black text-destructive tracking-tight">
{formatCurrency(totalExpenses)}
</div>
</CardContent>
@@ -57,7 +57,7 @@ export function StatsSummaryCards({
<Card className="stat-card-textured relative overflow-hidden">
{/* Icône en arrière-plan */}
<div className="absolute bottom-2 right-2 opacity-[0.04] dark:opacity-[0.03] z-0 pointer-events-none">
<div className="absolute bottom-2 right-2 opacity-[0.04] z-0 pointer-events-none">
<ArrowRight className="h-16 w-16 md:h-20 md:w-20 text-muted-foreground/40" strokeWidth={1} />
</div>
<CardHeader className="pb-3 px-5 pt-5 relative z-10">
@@ -74,12 +74,12 @@ export function StatsSummaryCards({
<Card className="stat-card-textured relative overflow-hidden">
{/* Icône en arrière-plan */}
<div className="absolute bottom-2 right-2 opacity-[0.04] dark:opacity-[0.03] z-0 pointer-events-none">
<div className="absolute bottom-2 right-2 opacity-[0.04] z-0 pointer-events-none">
<div className={cn(
"h-16 w-16 md:h-20 md:w-20 rounded-full border-2",
savings >= 0
? "border-emerald-600 dark:border-emerald-400"
: "border-red-600 dark:border-red-400"
? "border-success"
: "border-destructive"
)} />
</div>
<CardHeader className="pb-3 px-5 pt-5 relative z-10">
@@ -91,7 +91,7 @@ export function StatsSummaryCards({
<div
className={cn(
"text-xl md:text-2xl font-black tracking-tight",
savings >= 0 ? "text-emerald-600 dark:text-emerald-400" : "text-red-600 dark:text-red-400",
savings >= 0 ? "text-success" : "text-destructive",
)}
>
{formatCurrency(savings)}

View File

@@ -45,7 +45,7 @@ export function TopExpensesList({
<p className="font-medium text-xs md:text-sm truncate flex-1">
{expense.description}
</p>
<div className="text-red-600 font-semibold tabular-nums text-xs md:text-sm shrink-0">
<div className="text-destructive font-semibold tabular-nums text-xs md:text-sm shrink-0">
{formatCurrency(expense.amount)}
</div>
</div>