style(ui): padronizar tipografia — font-medium para font-semibold

Padronização de peso tipográfico em títulos, rótulos de seção,
nomes de entidades e valores monetários em toda a interface.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Felipe Coutinho
2026-04-11 17:51:34 +00:00
parent 3bd8117b65
commit e8cc673e52
111 changed files with 361 additions and 272 deletions

View File

@@ -34,7 +34,7 @@ export function CalculatorDisplay({
<div className="mt-auto flex items-end justify-end gap-2">
<div
className={cn(
"truncate text-right font-medium tracking-tight tabular-nums leading-none transition-all",
"truncate text-right font-medium tracking-tight leading-none transition-all",
isResultView ? "text-2xl" : "text-3xl",
)}
>

View File

@@ -20,9 +20,9 @@ function MoneyValues({ amount, className, showPositiveSign = false }: Props) {
return (
<span
className={cn(
"inline-flex items-baseline transition-all duration-200 tracking-tighter",
"inline-flex items-baseline tabular-nums transition-all duration-200 tracking-tighter",
privacyMode &&
"blur-[6px] select-none hover:blur-none focus-within:blur-none",
"blur-sm select-none hover:blur-none focus-within:blur-none",
className,
)}
aria-label={privacyMode ? "Valor oculto" : displayValue}

View File

@@ -37,7 +37,7 @@ export default function MonthNavigation() {
};
return (
<Card className="sticky top-16 z-10 flex w-full flex-row p-4 backdrop-blur-xs supports-backdrop-filter:bg-card/80">
<Card className="sticky top-16 z-10 flex w-full flex-row p-4 backdrop-blur-xs supports-backdrop-filter:bg-card/80 ">
<div className="flex items-center gap-1">
<NavigationButton
direction="left"

View File

@@ -96,7 +96,7 @@ export function FeedbackDialogBody({ onClose }: { onClose?: () => void }) {
<Icon className={cn("h-5 w-5", item.color)} />
</div>
<div className="flex-1 text-left space-y-1">
<h3 className="font-medium text-sm flex items-center gap-2">
<h3 className="font-semibold text-sm flex items-center gap-2">
{item.title}
<RiExternalLinkLine className="h-3.5 w-3.5 text-muted-foreground" />
</h3>

View File

@@ -42,7 +42,7 @@ export function NavDropdown({ items }: NavDropdownProps) {
{item.icon}
</span>
<span className="flex flex-col min-w-0">
<span className="font-medium">{item.label}</span>
<span className="font-semibold">{item.label}</span>
{item.description && (
<span className="text-xs text-muted-foreground truncate lowercase">
{item.description}

View File

@@ -42,7 +42,7 @@ export function NavMenu() {
return (
<>
{/* Desktop */}
<nav className="hidden md:flex items-center justify-center flex-1 ">
<nav className="hidden md:flex items-center justify-center flex-1">
<NavigationMenu viewport={false}>
<NavigationMenuList className="gap-0">
<NavigationMenuItem>

View File

@@ -22,7 +22,7 @@ export function NavToolsDropdown({ onOpenCalculator }: NavToolsDropdownProps) {
<RiCalculatorLine className="size-4" />
</span>
<span className="flex flex-col flex-1 text-left">
<span className="font-medium">calculadora</span>
<span className="font-semibold">calculadora</span>
<span className="text-xs text-muted-foreground lowercase">
Faça cálculos rápidos
</span>
@@ -39,7 +39,7 @@ export function NavToolsDropdown({ onOpenCalculator }: NavToolsDropdownProps) {
)}
</span>
<span className="flex flex-col flex-1 text-left">
<span className="font-medium">privacidade</span>
<span className="font-semibold">privacidade</span>
<span className="text-xs text-muted-foreground lowercase">
Oculta valores na tela
</span>

View File

@@ -126,7 +126,9 @@ export function NavbarUser({
>
<RiHistoryLine className="size-4 text-muted-foreground shrink-0" />
<span className="flex-1">Changelog</span>
<Badge variant="outline">v{version}</Badge>
<Badge variant="outline" className="text-xs font-semibold">
v{version}
</Badge>
</Link>
<DialogTrigger asChild>
@@ -147,7 +149,7 @@ export function NavbarUser({
className={cn(itemClass, "text-success")}
>
<RiMegaphoneLine className="size-4 text-success shrink-0" />
<span className="flex-1 tracking-wide text-xs font-medium">
<span className="flex-1 tracking-wide text-xs font-bold">
Atualização {updateCheck.latestVersion} disponível
</span>
</Link>

View File

@@ -68,7 +68,7 @@ export function createSidebarNavData(
.map((pagador) => ({
title: pagador.name?.trim().length
? pagador.name.trim()
: "Payer sem nome",
: "Pagador sem nome",
url: `/payers/${pagador.id}`,
key: pagador.canEdit ? pagador.id : `${pagador.id}-shared`,
isShared: !pagador.canEdit,

View File

@@ -9,7 +9,7 @@ export default function PageDescription({
}) {
return (
<div>
<h1 className="text-xl font-medium flex items-center gap-1 tracking-tight">
<h1 className="text-2xl font-semibold flex items-center gap-1 ">
<span className="text-primary">{icon}</span>
{title}
</h1>

View File

@@ -89,7 +89,7 @@ export function PaymentSuccess({
</div>
<div className="space-y-2">
<DialogTitle className="text-xl font-medium">{title}</DialogTitle>
<DialogTitle className="text-xl font-semibold">{title}</DialogTitle>
<DialogDescription className="text-sm leading-relaxed">
{description}
</DialogDescription>

View File

@@ -98,7 +98,7 @@ function AlertDialogTitle({
return (
<AlertDialogPrimitive.Title
data-slot="alert-dialog-title"
className={cn("text-lg font-medium", className)}
className={cn("text-lg font-semibold", className)}
{...props}
/>
);

View File

@@ -266,7 +266,7 @@ function ChartTooltipContent({
</span>
</div>
{item.value !== undefined && item.value !== null && (
<span className="text-foreground font-mono font-medium tabular-nums">
<span className="text-foreground font-mono font-medium">
{item.value.toLocaleString()}
</span>
)}

View File

@@ -1,7 +1,7 @@
"use client";
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
import { RiCheckLine } from "@remixicon/react";
import { RiCheckLine, RiSubtractLine } from "@remixicon/react";
import type * as React from "react";
import { cn } from "@/shared/utils/ui";
@@ -13,7 +13,7 @@ function Checkbox({
<CheckboxPrimitive.Root
data-slot="checkbox"
className={cn(
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-lg border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-lg border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
{...props}
@@ -22,7 +22,8 @@ function Checkbox({
data-slot="checkbox-indicator"
className="grid place-content-center text-current transition-none"
>
<RiCheckLine className="size-3.5" />
<RiCheckLine className="size-3.5 [[data-state=indeterminate]_&]:hidden" />
<RiSubtractLine className="size-3.5 hidden [[data-state=indeterminate]_&]:block" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
);

View File

@@ -95,10 +95,7 @@ export const CurrencyInput = React.forwardRef<
value={displayValue}
onChange={handleChange}
onBlur={onBlur}
className={cn(
"text-left font-medium tabular-nums tracking-tight",
className,
)}
className={cn("text-left tracking-tight", className)}
/>
);
});

View File

@@ -106,7 +106,7 @@ function DialogTitle({
return (
<DialogPrimitive.Title
data-slot="dialog-title"
className={cn("text-lg leading-none font-medium", className)}
className={cn("text-lg leading-none font-semibold", className)}
{...props}
/>
);

View File

@@ -62,7 +62,7 @@ function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="empty-title"
className={cn("text-lg font-medium tracking-tight", className)}
className={cn("text-lg font-semibold tracking-tight", className)}
{...props}
/>
);

View File

@@ -586,7 +586,7 @@ function SidebarMenuBadge({
data-slot="sidebar-menu-badge"
data-sidebar="menu-badge"
className={cn(
"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium select-none",
"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
"peer-data-[size=sm]/menu-button:top-1",
"peer-data-[size=default]/menu-button:top-1.5",

View File

@@ -37,7 +37,7 @@ export default function WidgetCard({
<CardHeader>
<div className="flex w-full items-start justify-between">
<div>
<CardTitle className="flex items-center gap-1 tracking-tight">
<CardTitle className="flex items-center gap-1 ">
{icon && <span className="size-4">{icon}</span>}
{title}
</CardTitle>