feat: establish Apple-inspired global design system and add initial AI analysis UI components.

This commit is contained in:
Michael committed 2026-02-27 10:26:09 +01:00
1 parent a3600d7e05
commit 51a30b26e4
3 files changed
+36 -58

No files matched your search

+32 -54
View File
@@ -273,10 +273,12 @@
box-shadow: 0 0 0 3px var(--accent-bg);
}
/* ── Apple-style Action Buttons ── */
/* ── Apple-style Action Buttons (Glossy & Premium) ── */
/* ── Apple-style Action Buttons (Glossy & Premium v2) ── */
.apple-btn-primary,
.apple-btn-secondary {
.apple-btn-secondary,
.apple-btn-danger,
.apple-btn-ai,
.apple-btn-rules {
display: inline-flex;
align-items: center;
justify-content: center;
@@ -290,79 +292,55 @@
cursor: pointer;
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.apple-btn-primary {
background: linear-gradient(180deg, var(--brand-solid) 0%, var(--brand-hover) 100%);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 4px 12px rgba(16, 185, 129, 0.25),
inset 0 1px 1px rgba(255, 255, 255, 0.2);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
.apple-btn-primary:hover {
filter: brightness(1.1);
transform: translateY(-1px);
box-shadow:
0 6px 16px rgba(16, 185, 129, 0.35),
inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
.apple-btn-primary:active {
transform: scale(0.97) translateY(0);
filter: brightness(0.95);
}
.apple-btn-secondary {
.apple-btn-secondary,
.apple-btn-rules {
background: var(--bg-surface);
color: var(--text-primary);
border: 1px solid var(--border-strong);
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.apple-btn-secondary:hover {
background: var(--bg-elevated);
border-color: var(--text-muted);
transform: translateY(-1px);
}
.apple-btn-secondary:active {
transform: scale(0.97) translateY(0);
border-color: var(--border-strong);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.apple-btn-danger {
background: linear-gradient(180deg, var(--accent-error) 0%, #be123c 100%);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow:
0 4px 12px rgba(244, 63, 94, 0.25),
inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
.apple-btn-danger:hover {
filter: brightness(1.1);
transform: translateY(-1px);
box-shadow:
0 6px 16px rgba(244, 63, 94, 0.35);
box-shadow: 0 4px 12px rgba(244, 63, 94, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}
.apple-btn-ai {
background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow:
0 4px 15px rgba(168, 85, 247, 0.3),
inset 0 1px 1px rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.3);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.apple-btn-primary:hover,
.apple-btn-danger:hover,
.apple-btn-ai:hover {
filter: brightness(1.1);
transform: translateY(-1px) scale(1.02);
box-shadow: 0 6px 20px rgba(168, 85, 247, 0.4);
transform: translateY(-1px);
}
.apple-btn-secondary:hover,
.apple-btn-rules:hover {
background: var(--bg-elevated);
transform: translateY(-1px);
}
.apple-btn-primary:active,
.apple-btn-secondary:active,
.apple-btn-danger:active,
.apple-btn-ai:active,
.apple-btn-rules:active {
transform: scale(0.97) translateY(0);
}
/* Glass effect overlay for loading/success */
@@ -289,7 +289,7 @@ export function BulkAiAnalyzer() {
</button>
</div>
) : progress.current > 0 ? (
<div className="btn-action btn-action-success">
<div className="apple-btn-primary opacity-80 cursor-default">
<CheckCircle2 className="w-4 h-4" />
<span>
{progress.errors > 0 ? `Terminé (${progress.current - progress.errors}/${progress.total})` : `Analyse Terminée`}
@@ -66,7 +66,7 @@ export function SupplierAiContextModal({ codeFournisseur, nomFournisseur }: Supp
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<button className="btn-action btn-action-secondary">
<button className="apple-btn-rules">
<Brain className="w-4 h-4" />
Règles IA
</button>
@@ -91,10 +91,10 @@ export function SupplierAiContextModal({ codeFournisseur, nomFournisseur }: Supp
</div>
<DialogFooter>
<button className="btn-action btn-action-secondary" onClick={() => setOpen(false)} disabled={isSaving}>
<button className="apple-btn-secondary" onClick={() => setOpen(false)} disabled={isSaving}>
Annuler
</button>
<button onClick={handleSave} disabled={isSaving || isLoading} className="btn-action btn-action-primary">
<button onClick={handleSave} disabled={isSaving || isLoading} className="apple-btn-primary">
{isSaving ? "Enregistrement..." : "Enregistrer les règles"}
</button>
</DialogFooter>