feat: update colors

Author: adrian-ub

apps/v4/src/registry/new-york-v4/ui/accordion.ts

@@ -62,7 +62,7 @@ export class UbAccordionItemDirective {
 export class UbAccordionTriggerDirective {
   class = input<ClassValue>()
   computedClass = computed(() => {
-    return cn('ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all hover:underline focus-visible:ring-4 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&>*>svg]:group-data-[state=open]:rotate-180', this.class())
+    return cn('focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>*>svg]:rotate-180', this.class())
   })
 }
 

apps/v4/src/registry/new-york-v4/ui/alert.ts

@@ -12,7 +12,7 @@ const alertVariants = cva(
       variant: {
         default: 'bg-background text-foreground',
         destructive:
-          'border-destructive/50 text-destructive dark:text-destructive-foreground/80 dark:border-destructive [&>*>svg]:text-current dark:bg-destructive/50',
+          'text-destructive-foreground [&>*>svg]:text-current *:data-[slot=alert-description]:text-destructive-foreground/80',
       },
     },
     defaultVariants: {

apps/v4/src/registry/new-york-v4/ui/badge.ts

@@ -5,16 +5,16 @@ import { cva } from 'class-variance-authority'
 import { cn } from '~/lib/utils'
 
 export const badgeVariants = cva(
-  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-semibold w-fit whitespace-nowrap shrink-0 [&>*>svg]:size-3 gap-1 [&>*>svg]:pointer-events-none ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 focus-visible:ring-4 focus-visible:outline-1 aria-invalid:focus-visible:ring-0 transition-[color,box-shadow]',
+  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>*>svg]:size-3 gap-1 [&>*>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-auto',
   {
     variants: {
       variant: {
         default:
-          'border-transparent bg-primary text-primary-foreground shadow-sm [a&]:hover:bg-primary/90',
+          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
         secondary:
           'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
         destructive:
-          'border-transparent bg-destructive text-destructive-foreground shadow-sm [a&]:hover:bg-destructive/90',
+          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
         outline:
           'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
       },

apps/v4/src/registry/new-york-v4/ui/button.ts

@@ -6,14 +6,14 @@ import { cva } from 'class-variance-authority'
 import { cn } from '~/lib/utils'
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 [&_svg]:shrink-0 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 focus-visible:ring-4 focus-visible:outline-1 aria-invalid:focus-visible:ring-0',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=\'size-\'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
   {
     variants: {
       variant: {
         default:
           'bg-primary text-primary-foreground shadow-sm hover:bg-primary/90',
         destructive:
-          'bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90',
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
         outline:
           'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
         secondary:

apps/v4/src/registry/new-york-v4/ui/card.ts

@@ -40,7 +40,7 @@ export class UbCardHeaderDirective {
 export class UbCardTitleDirective {
   readonly class = input<string>()
   protected computedClass = computed(() =>
-    cn('leading-none font-semibold tracking-tight', this.class()),
+    cn('leading-none font-semibold', this.class()),
   )
 }
 

apps/v4/src/registry/new-york-v4/ui/dialog.ts

@@ -105,7 +105,7 @@ export class UbDialogFooterDirective {
 })
 export class UbDialogTitleDirective {
   class = input<string>()
-  computedClass = computed(() => cn('text-lg leading-none font-semibold tracking-tight', this.class()))
+  computedClass = computed(() => cn('text-lg leading-none font-semibold', this.class()))
 }
 
 @Directive({

apps/v4/src/registry/new-york-v4/ui/dropdown-menu.ts

@@ -81,7 +81,7 @@ export class UbDropdownMenuItemDirective {
   })
 
   computedClass = computed(() => cn(
-    'focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+    'focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
     this.inset() && 'pl-8',
     this.class(),
   ))
@@ -150,7 +150,7 @@ export class UbDropdownMenuShortcutDirective {
     },
   ],
 })
-export class UbDropdownMenuSubContentDirective {}
+export class UbDropdownMenuSubContentDirective { }
 
 @Component({
   standalone: true,

apps/v4/src/registry/new-york-v4/ui/input.ts

@@ -28,7 +28,9 @@ export class UbInputDirective<Type extends InputType> {
 
   protected computedClass = computed(() =>
     cn(
-      'border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground aria-invalid:outline-destructive/60 aria-invalid:ring-destructive/20 dark:aria-invalid:outline-destructive dark:aria-invalid:ring-destructive/50 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 aria-invalid:outline-destructive/60 dark:aria-invalid:outline-destructive dark:aria-invalid:ring-destructive/40 aria-invalid:ring-destructive/20 aria-invalid:border-destructive/60 dark:aria-invalid:border-destructive flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-4 focus-visible:outline-1 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:focus-visible:ring-[3px] aria-invalid:focus-visible:outline-none md:text-sm dark:aria-invalid:focus-visible:ring-4',
+      'border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
       this.class(),
     ),
   )

apps/v4/src/registry/new-york-v4/ui/sonner.ts

@@ -61,9 +61,9 @@ export class ToasterComponent {
         'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
       description: 'group-[.toast]:text-muted-foreground',
       actionButton:
-        'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+        'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground font-medium',
       cancelButton:
-        'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+        'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground font-medium',
     },
   })
 

apps/v4/src/registry/new-york-v4/ui/tabs.ts

@@ -64,7 +64,7 @@ export class UbTabsTriggerDirective {
   readonly class = input<string>()
   protected computedClass = computed(() =>
     cn(
-      'data-[state=active]:bg-background data-[state=active]:text-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 inline-flex items-center justify-center gap-2 rounded-md px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-invalid:focus-visible:ring-0 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      'data-[state=active]:bg-background data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring inline-flex items-center justify-center gap-2 rounded-md px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
       this.class(),
     ),
   )
@@ -86,7 +86,7 @@ export class UbTabsContentDirective {
   readonly class = input<string>()
   protected computedClass = computed(() =>
     cn(
-      'ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 flex-1 transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 aria-invalid:focus-visible:ring-0',
+      'flex-1 outline-none',
       this.class(),
     ),
   )