feat: new colors to the componenets (#78)

Close #76
openlitedotdev · Apr 3, 2024 · 64e5787 · 64e5787
2 parents 61f9961 + 3f37c32
commit 64e5787
Show file tree

Hide file tree

Showing 22 changed files with 181 additions and 154 deletions.
diff --git a/examples/with-vitejs/index.html b/examples/with-vitejs/index.html
@@ -1,12 +1,12 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="dark" style="color-scheme: ligth">
  <head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite + React + TS</title>
  </head>
- <body class="bg-black text-white">
+ <body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
  </body>

diff --git a/examples/with-vitejs/src/App.tsx b/examples/with-vitejs/src/App.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, ScrollArea, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@openui-org/react'
+import { Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, ScrollArea, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@openui-org/react'
 import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
 import imgPrueba from '/bghome.png'
@@ -10,9 +10,15 @@ function App() {
 
  return (
  <>
- <Button variant="ligth">
+ <Button variant="ghost">
  Examples UI
  </Button>
+ <Alert>
+ <AlertTitle>Hola</AlertTitle>
+ <AlertDescription>
+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem, tenetur?
+ </AlertDescription>
+ </Alert>
  <Select>
  <SelectTrigger>
  <SelectValue placeholder="Theme" />
@@ -40,7 +46,7 @@ function App() {
  </AlertDialogFooter>
  </AlertDialogContent>
  </AlertDialog>
- <Badge variant="ligth">
+ <Badge variant="error">
  Examples
  </Badge>
 
@@ -55,7 +61,7 @@ function App() {
  <CardDescription className="text-pretty text-dark-400 m">
  iPhone 12 combines elegant design with cutting-edge technology, giving you the best mobile experience. With its A14 Bionic chip, the fastest in a smartphone, intense games and professional applications run effortlessly.
  </CardDescription>
- <Button variant="ligth" className="w-full">Add To Cart</Button>
+ <Button className="w-full">Add To Cart</Button>
  </Card>
  <div className="w-60">
  <div className="space-y-1">

diff --git a/examples/with-vitejs/tailwind.config.js b/examples/with-vitejs/tailwind.config.js
@@ -2,6 +2,7 @@ import { react } from '@openui-org/react'
 
 /** @type {import('tailwindcss').Config} */
 export default {
+ darkMode: 'class',
  content: [
  './index.html',
  './src/**/*.{js,ts,jsx,tsx}',

diff --git a/packages/react/src/components/alert-dialog.tsx b/packages/react/src/components/alert-dialog.tsx
@@ -25,7 +25,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Overlay
  className={cn(
- 'fixed inset-0 z-50 bg-white/20 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+ 'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
  className,
  )}
  {...props}
@@ -43,7 +43,7 @@ const AlertDialogContent = React.forwardRef<
  <AlertDialogPrimitive.Content
  ref={ref}
  className={cn(
- 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-dark-900 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+ 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
  className,
  )}
  {...props}
@@ -91,7 +91,7 @@ const AlertDialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Title
  ref={ref}
- className={cn('text-lg font-semibold text-white', className)}
+ className={cn('text-sm text-muted-foreground', className)}
  {...props}
  />
 ))
@@ -117,7 +117,7 @@ const AlertDialogAction = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <AlertDialogPrimitive.Action
  ref={ref}
- className={cn(buttonVariants({ variant: 'ligth' }), className)}
+ className={cn(buttonVariants(), className)}
  {...props}
  />
 ))
@@ -130,7 +130,7 @@ const AlertDialogCancel = React.forwardRef<
  <AlertDialogPrimitive.Cancel
  ref={ref}
  className={cn(
- buttonVariants({ variant: 'error' }),
+ buttonVariants({ variant: 'outline' }),
  'mt-2 sm:mt-0',
  className,
  )}

diff --git a/packages/react/src/components/alert.tsx b/packages/react/src/components/alert.tsx
@@ -4,38 +4,40 @@ import { type VariantProps, cva } from 'class-variance-authority'
 import { cn } from '../lib/cn'
 
 const alertVariants = cva(
- 'relative w-full rounded-lg px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-white [&>svg~*]:pl-7',
+ 'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
  {
  variants: {
  variant: {
- dark: 'bg-dark-900 text-white hover:bg-dark-900/90',
- error: 'bg-error-500 dark:bg-error-500 hover:bg-error-500/90',
- success: 'bg-success-500 dark:bg-success-500 hover:bg-success-500/90',
- warn: 'bg-warn-500 dark:bg-warn-500 hover:bg-warn-500/90',
- ligth: 'bg-white dark:bg-white hover:bg-white/90',
+ default: 'bg-background text-foreground',
+ error: 'border-error/50 text-error dark:border-error [&>svg]:text-error',
  },
  },
  defaultVariants: {
- variant: 'dark',
+ variant: 'default',
  },
  },
 )
 
-const Alert = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>>(({ className, variant, ...props }, ref) => (
+const Alert = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
  <div
  ref={ref}
  role="alert"
  className={cn(alertVariants({ variant }), className)}
  {...props}
  />
 ))
-
 Alert.displayName = 'Alert'
 
-const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(({ className, ...props }, ref) => (
+const AlertTitle = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
  <h5
  ref={ref}
- className={cn('mb-1 text-lg font-medium leading-none tracking-tight', className)}
+ className={cn('mb-1 font-medium leading-none tracking-tight', className)}
  {...props}
  />
 ))
@@ -48,7 +50,7 @@ const AlertDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <div
  ref={ref}
- className={cn('text-base [&_p]:leading-relaxed', className)}
+ className={cn('text-sm [&_p]:leading-relaxed', className)}
  {...props}
  />
 ))

diff --git a/packages/react/src/components/avatar.tsx b/packages/react/src/components/avatar.tsx
@@ -36,7 +36,7 @@ const AvatarFallback = React.forwardRef<
  <AvatarPrimitive.Fallback
  ref={ref}
  className={cn(
- 'flex h-full w-full items-center justify-center rounded-full',
+ 'flex h-full w-full items-center justify-center rounded-full bg-muted',
  className,
  )}
  {...props}

diff --git a/packages/react/src/components/badge.tsx b/packages/react/src/components/badge.tsx
@@ -4,21 +4,18 @@ import { type VariantProps, cva } from 'class-variance-authority'
 import { cn } from '../lib/cn'
 
 const badgeVariants = cva(
- 'inline-flex items-center rounded border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent text-white shadow cursor-pointer',
+ 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
  {
  variants: {
  variant: {
- success: 'bg-success-500 hover:bg-success-400/90',
- primary: 'bg-primary-500 hover:bg-primary-500/90 text-black',
- secondary: 'bg-secondary-500 hover:bg-secondary/90',
- dark: 'bg-dark-900 hover:bg-dark-900/90',
- warn: 'bg-warn-500 hover:bg-warn-500/90',
- error: 'bg-error-500 hover:bg-error-500/90',
- ligth: 'bg-white hover:bg-white/90 text-black',
+ default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+ secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+ error: 'border-transparent bg-error text-error-foreground hover:bg-error/80',
+ outline: 'text-foreground',
  },
  },
  defaultVariants: {
- variant: 'dark',
+ variant: 'default',
  },
  },
 )

diff --git a/packages/react/src/components/button.tsx b/packages/react/src/components/button.tsx
@@ -5,48 +5,50 @@ import { type VariantProps, cva } from 'class-variance-authority'
 import { cn } from '../lib/cn'
 
 const buttonVariants = cva(
- 'inline-flex items-center justify-center whitespace-nowrap rounded text-base font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-white',
+ 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
  {
  variants: {
  variant: {
- success: 'bg-success-500 hover:bg-success-400/90',
- primary: 'bg-primary-500 shadow hover:bg-primary-500/90 text-black',
- secondary: 'bg-secondary-500 shadow hover:bg-secondary/90',
- dark: 'bg-dark-900 shadow hover:bg-dark-900/90',
- warn: 'bg-warn-500 shadow hover:bg-warn-500/90',
- error: 'bg-error-500 shadow hover:bg-error-500/90',
- ligth: 'bg-white shadow text-black hover:bg-white/90',
+ default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+ error: 'bg-error text-error-foreground hover:bg-error/90',
+ outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+ secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+ ghost: 'hover:bg-accent hover:text-accent-foreground',
+ link: 'text-primary underline-offset-4 hover:underline',
  },
  size: {
- sm: 'h-8 rounded-md px-3 text-xs',
- md: 'h-9 px-4 py-2',
- lg: 'h-10 rounded-md px-8',
- icon: 'size-9',
+ default: 'h-10 px-4 py-2',
+ sm: 'h-9 rounded-md px-3',
+ lg: 'h-11 rounded-md px-8',
+ icon: 'size-10',
  },
  },
  defaultVariants: {
- variant: 'dark',
- size: 'md',
+ variant: 'default',
+ size: 'default',
  },
  },
 )
 
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+ VariantProps<typeof buttonVariants> {
  asChild?: boolean
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, asChild = false, ...props }, ref) => {
- const Comp = asChild ? Slot : 'button'
- return (
- <Comp
- className={cn(buttonVariants({ variant, size, className }))}
- ref={ref}
- {...props}
- />
- )
-},
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : 'button'
+ return (
+ <Comp
+ className={cn(buttonVariants({ variant, size, className }))}
+ ref={ref}
+ {...props}
+ />
+ )
+ },
 )
 
 Button.displayName = 'Button'
 
-export { Button, buttonVariants, type VariantProps }
+export { Button, buttonVariants }
diff --git a/packages/react/src/components/card.tsx b/packages/react/src/components/card.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
  <div
  ref={ref}
  className={cn(
- 'rounded-xl shadow border border-dark-700/50',
+ 'rounded-lg border bg-card text-card-foreground shadow-sm',
  className,
  )}
  {...props}
@@ -47,7 +47,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <p
  ref={ref}
- className={cn('text-sm my-5', className)}
+ className={cn('text-sm text-muted-foreground', className)}
  {...props}
  />
 ))
@@ -67,7 +67,7 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <div
  ref={ref}
- className={cn('flex items-center ', className)}
+ className={cn('flex items-center p-6 pt-0', className)}
  {...props}
  />
 ))

diff --git a/packages/react/src/components/carousel.tsx b/packages/react/src/components/carousel.tsx
@@ -157,7 +157,7 @@ const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLD
 
 CarouselItem.displayName = 'CarouselItem'
 
-const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(({ className, variant = 'dark', size = 'icon', ...props }, ref) => {
+const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
 
  return (
@@ -187,7 +187,7 @@ CarouselPrevious.displayName = 'CarouselPrevious'
 const CarouselNext = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button>
->(({ className, variant = 'dark', size = 'icon', ...props }, ref) => {
+>(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
  const { orientation, scrollNext, canScrollNext } = useCarousel()
 
  return (

diff --git a/packages/react/src/components/dialog.tsx b/packages/react/src/components/dialog.tsx
@@ -18,7 +18,7 @@ const DialogOverlay = React.forwardRef<
  <DialogPrimitive.Overlay
  ref={ref}
  className={cn(
- 'fixed inset-0 z-50 bg-white/20 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+ 'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
  className,
  )}
  {...props}
@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
  <DialogPrimitive.Content
  ref={ref}
  className={cn(
- 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-dark-900 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+ 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
  className,
  )}
  {...props}
@@ -58,7 +58,7 @@ DialogContent.displayName = DialogPrimitive.Content.displayName
 function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return (
  <div
- className={cn('flex flex-col space-y-1.5 text-center sm:text-left text-medium', className)}
+ className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)}
  {...props}
  />
  )
@@ -81,7 +81,7 @@ const DialogTitle = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Tit
  <DialogPrimitive.Title
  ref={ref}
  className={cn(
- 'text-lg font-semibold leading-none tracking-tight text-white',
+ 'text-lg font-semibold leading-none tracking-tight',
  className,
  )}
  {...props}
@@ -93,7 +93,7 @@ DialogTitle.displayName = DialogPrimitive.Title.displayName
 const DialogDescription = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Description>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>>(({ className, ...props }, ref) => (
  <DialogPrimitive.Description
  ref={ref}
- className={cn('text-sm text-dark-400', className)}
+ className={cn('text-sm text-muted-foreground', className)}
  {...props}
  />
 ))

diff --git a/packages/react/src/components/input.tsx b/packages/react/src/components/input.tsx
@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type,
  <input
  type={type}
  className={cn(
- 'flex h-10 w-full rounded-md border border-dark-100/50 text-dark-900 px-3 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-dark-500 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 ring-offset-dark-100 focus-visible:ring-2 focus-visible:ring-dark-100/50 focus-visible:ring-offset-white dark:focus-visible:ring-offset-white',
+ 'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
  className,
  )}
  ref={ref}