Jakob Wennberg
3d02a74147
Raw palette: SalaryCalendar was the only file in the salary cluster still on bg-red-100 / text-amber-800 style classes, with zero dark: variants, so every absence pill rendered paper-white on a near-black page. All 30 are now alpha-over-token on the semantic scale, which needs no dark: variant (the approach badge.tsx already takes). Eight absence types share four tones, so fill carries a second axis: filled vs outlined separates the types whose Lucide icon is identical (Heart is parental, pregnancy and care_relative; Activity is study and other_leave). Primitives: - select and dropdown-menu now scale from their trigger via the Radix transform-origin variables instead of from their own middle. Dialog stays centred: modals are not anchored to a trigger. - toast used fade-out-80, the one animate-* class with no @utility in globals.css, so --tw-exit-opacity fell back to 1 and the toast slid away at full opacity. Enter and exit now also share one path per breakpoint (top on mobile where the viewport is a full-width bar, right on desktop where it is a corner card) using max-sm:/sm: rather than stacking both, which would have produced a diagonal. - slide-over exited on ease-in, which delays the moment the user has already decided to leave; it enters on the drawer curve and now leaves on it too. - progress animated transition-all where only transform changes. - One app-wide TooltipProvider in the root layout. skipDelayDuration is provider-scoped, so a provider per instance meant the grace window could never fire and every account number in a huvudbok re-paid the full 200ms. Also: nine hand-rolled animate-pulse placeholders in three different greys to the Skeleton primitive, 25 CardTitle text-lg to the locked text-base, two always-on chips to muted text (a chip on every row is not an exception), the three extensions titles onto the display face, the help filter chips onto pill geometry, and the dead border-border/60 on the /import row. Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
28 lines
821 B
TypeScript
28 lines
821 B
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import * as ProgressPrimitive from "@radix-ui/react-progress"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const Progress = React.forwardRef<
|
|
React.ElementRef<typeof ProgressPrimitive.Root>,
|
|
React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
|
|
>(({ className, value, ...props }, ref) => (
|
|
<ProgressPrimitive.Root
|
|
ref={ref}
|
|
className={cn(
|
|
"relative h-4 w-full overflow-hidden rounded-full bg-secondary",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<ProgressPrimitive.Indicator
|
|
className="h-full w-full flex-1 bg-primary transition-transform duration-300 ease-linear"
|
|
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
|
|
/>
|
|
</ProgressPrimitive.Root>
|
|
))
|
|
Progress.displayName = ProgressPrimitive.Root.displayName
|
|
|
|
export { Progress }
|