senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(ui): elevate Tabs and Accordion to SaaS Premium

Browse source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
senke 2026-02-07 14:17:49 +01:00
parent 5ac6931999
commit 688a4fe67d
5 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/web/src/components/ui/accordion/AccordionItem.tsx
View file

@ -8,7 +8,7 @@ export const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps
({ value, open, onToggle, className, children, ...props }, ref) => (
<div
ref={ref}
className={cn('border-b border-kodo-steel/30', className)}
className={cn('border-b border-border', className)}
{...props}
>
{React.Children.map(children, (child) => {

4
apps/web/src/components/ui/accordion/AccordionTrigger.tsx
View file

@ -13,7 +13,7 @@ export const AccordionTrigger = React.forwardRef<
onClick={onToggle}
className={cn(
'flex w-full items-center justify-between py-4 text-left font-medium transition-all',
'hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-steel focus-visible:ring-offset-2 focus-visible:ring-offset-kodo-void',
'hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
'[&[data-state=open]>svg]:rotate-180',
className,
)}
@ -24,7 +24,7 @@ export const AccordionTrigger = React.forwardRef<
{children}
<ChevronDown
className={cn(
'h-4 w-4 shrink-0 text-kodo-secondary transition-transform duration-200',
'h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-[var(--duration-normal)]',
open && 'rotate-180',
)}
/>

2
apps/web/src/components/ui/tabs/TabsContent.tsx
View file

@ -15,7 +15,7 @@ export const TabsContent = React.forwardRef<HTMLDivElement, TabsContentProps>(
<div
ref={ref}
className={cn(
'mt-2 ring-offset-kodo-void focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-steel focus-visible:ring-offset-2',
'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
className,
)}
{...props}

2
apps/web/src/components/ui/tabs/TabsList.tsx
View file

@ -8,7 +8,7 @@ export const TabsList = React.forwardRef<HTMLDivElement, TabsListProps>(
<div
ref={ref}
className={cn(
'inline-flex h-10 items-center justify-center rounded-md bg-kodo-graphite p-1 text-kodo-content-dim border border-kodo-steel/30',
'inline-flex h-10 items-center justify-center rounded-xl bg-muted p-1 text-muted-foreground border border-border',
className,
)}
{...props}

8
apps/web/src/components/ui/tabs/TabsTrigger.tsx
View file

@ -25,12 +25,12 @@ export const TabsTrigger = React.forwardRef<
onClick={() => onValueChange?.(triggerValue)}
className={cn(
'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-4 py-1.5 text-sm font-bold uppercase tracking-wider',
'ring-offset-kodo-void transition-all duration-200',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-kodo-steel focus-visible:ring-offset-2',
'ring-offset-background transition-all duration-[var(--duration-normal)]',
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
'disabled:pointer-events-none disabled:opacity-50',
isActive
? 'bg-kodo-cyan text-kodo-void'
: 'text-kodo-content-dim hover:text-kodo-text-main',
? 'bg-primary text-primary-foreground'
: 'text-muted-foreground hover:text-foreground',
className,
)}
{...props}