feat(v1.4.0): design system semântico, correções de revalidação e melhorias de UX

- Adicionar tokens semânticos de estado (success, warning, info) no globals.css
- Migrar ~60+ componentes de cores hardcoded do Tailwind para tokens semânticos
- Unificar 3 arrays duplicados de cores de categorias em importação única
- Corrigir widgets de boleto/fatura que não atualizavam após pagamento
  (actions de fatura e antecipação não invalidavam cache do dashboard)
- Corrigir scroll em listas Popover+Command (modal prop)
- Adicionar link "detalhes" no card de orçamento para página da categoria
- Adicionar indicadores de tendência coloridos nos cards de métricas
- Estender cores de chart de 6 para 10
- Normalizar dark mode e remover tokens não utilizados

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
2026-02-07 15:14:59 +00:00
parent 390754c0e8
commit f50261208a
60 changed files with 324 additions and 305 deletions

View File

@@ -92,7 +92,7 @@ export function AnticipationCard({
{Number(anticipation.discount) > 0 && (
<div>
<dt className="text-muted-foreground">Desconto</dt>
<dd className="mt-1 font-medium tabular-nums text-green-600">
<dd className="mt-1 font-medium tabular-nums text-success">
- <MoneyValues amount={Number(anticipation.discount)} />
</dd>
</div>

View File

@@ -67,7 +67,7 @@ export function EstabelecimentoInput({
}, [estabelecimentos, searchValue]);
return (
<Popover open={open} onOpenChange={setOpen}>
<Popover open={open} onOpenChange={setOpen} modal>
<PopoverTrigger asChild>
<div className="relative">
<Input
@@ -112,7 +112,7 @@ export function EstabelecimentoInput({
className={cn(
"size-4 shrink-0",
value === item
? "opacity-100 text-green-500"
? "opacity-100 text-success"
: "opacity-5",
)}
/>

View File

@@ -30,7 +30,7 @@ export function InstallmentTimeline({
{/* Linha de conexão */}
<div className="absolute left-0 right-0 top-6 h-0.5 bg-border">
<div
className="h-full bg-green-600 transition-all duration-300"
className="h-full bg-success transition-all duration-300"
style={{
width: `${
((currentInstallment - 1) / (totalInstallments - 1)) * 100
@@ -41,7 +41,7 @@ export function InstallmentTimeline({
{/* Ponto 1: Data de Compra */}
<div className="relative z-10 flex flex-col items-center gap-2">
<div className="flex size-4 items-center justify-center rounded-full border-2 border-green-600 bg-green-600 shadow-sm">
<div className="flex size-4 items-center justify-center rounded-full border-2 border-success bg-success shadow-sm">
<RiCheckLine className="size-5 text-white" />
</div>
<div className="flex flex-col items-center">
@@ -57,7 +57,7 @@ export function InstallmentTimeline({
{/* Ponto 2: Parcela Atual */}
<div className="relative z-10 flex flex-col items-center gap-2">
<div
className={`flex size-4 items-center justify-center rounded-full border-2 shadow-sm border-orange-600 bg-orange-600`}
className={`flex size-4 items-center justify-center rounded-full border-2 shadow-sm border-warning bg-warning`}
>
<RiArrowDownFill className="size-5 text-white" />
</div>
@@ -74,7 +74,7 @@ export function InstallmentTimeline({
{/* Ponto 3: Última Parcela */}
<div className="relative z-10 flex flex-col items-center gap-2">
<div
className={`flex size-4 items-center justify-center rounded-full border-2 shadow-sm border-green-600 bg-green-600`}
className={`flex size-4 items-center justify-center rounded-full border-2 shadow-sm border-success bg-success`}
>
<RiCheckLine className="size-5 text-white" />
</div>