diff --git a/examples/with-vitejs/tailwind.config.js b/examples/with-vitejs/tailwind.config.js
index dae17c8..6bcab11 100644
--- 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/CHANGELOG.md b/packages/react/CHANGELOG.md
index d20911d..9cb30d5 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -1,5 +1,22 @@
# @openui-org/react
+## 1.0.0
+
+### Major Changes
+
+- New Components with design of theme
+
+### Patch Changes
+
+- Updated dependencies
+ - @openui-org/theme@1.0.0
+
+## 0.13.0
+
+### Minor Changes
+
+- Add new component Sheet
+
## 0.12.1
### Patch Changes
diff --git a/packages/react/package.json b/packages/react/package.json
index 5872cb0..c09f7cb 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,7 +1,7 @@
{
"name": "@openui-org/react",
"type": "module",
- "version": "0.12.1",
+ "version": "1.0.0",
"description": "Open UI. A modern design system built with Shadcn UI and Tailwindcss",
"author": "",
"license": "MIT",
diff --git a/packages/react/src/components/alert-dialog.tsx b/packages/react/src/components/alert-dialog.tsx
index c643038..2fbb34e 100644
--- 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) => (
(({ className, ...props }, ref) => (
))
@@ -117,7 +117,7 @@ const AlertDialogAction = React.forwardRef<
>(({ className, ...props }, ref) => (
))
@@ -130,7 +130,7 @@ const AlertDialogCancel = React.forwardRef<
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 & VariantProps>(({ className, variant, ...props }, ref) => (
+const Alert = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes & VariantProps
+>(({ className, variant, ...props }, ref) => (
))
-
Alert.displayName = 'Alert'
-const AlertTitle = React.forwardRef>(({ className, ...props }, ref) => (
+const AlertTitle = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
))
@@ -48,7 +50,7 @@ const AlertDescription = React.forwardRef<
>(({ className, ...props }, ref) => (
))
diff --git a/packages/react/src/components/avatar.tsx b/packages/react/src/components/avatar.tsx
index f4f74c2..0bbb23f 100644
--- a/packages/react/src/components/avatar.tsx
+++ b/packages/react/src/components/avatar.tsx
@@ -36,7 +36,7 @@ const AvatarFallback = React.forwardRef<
, VariantProps {
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes,
+ VariantProps {
asChild?: boolean
}
-const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
- const Comp = asChild ? Slot : 'button'
- return (
-
- )
-},
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : 'button'
+ return (
+
+ )
+ },
)
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
index 2cc6e2f..779c05a 100644
--- a/packages/react/src/components/card.tsx
+++ b/packages/react/src/components/card.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
(({ className, ...props }, ref) => (
))
@@ -67,7 +67,7 @@ const CardFooter = React.forwardRef<
>(({ className, ...props }, ref) => (
))
diff --git a/packages/react/src/components/carousel.tsx b/packages/react/src/components/carousel.tsx
index ee581e9..8c858ca 100644
--- a/packages/react/src/components/carousel.tsx
+++ b/packages/react/src/components/carousel.tsx
@@ -157,7 +157,7 @@ const CarouselItem = React.forwardRef
>(({ className, variant = 'dark', size = 'icon', ...props }, ref) => {
+const CarouselPrevious = React.forwardRef>(({ 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
->(({ 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
index 0cbe348..043d77f 100644
--- a/packages/react/src/components/dialog.tsx
+++ b/packages/react/src/components/dialog.tsx
@@ -18,7 +18,7 @@ const DialogOverlay = React.forwardRef<
) {
return (
)
@@ -81,7 +81,7 @@ const DialogTitle = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => (
))
diff --git a/packages/react/src/components/dropdown-menu.tsx b/packages/react/src/components/dropdown-menu.tsx
index 9e09a32..7436bc6 100644
--- a/packages/react/src/components/dropdown-menu.tsx
+++ b/packages/react/src/components/dropdown-menu.tsx
@@ -80,7 +80,7 @@ const DropdownMenuItem = React.forwardRef<
(({ className, type,
,
React.ComponentPropsWithoutRef &
VariantProps
->(({ variant, size, className, ...props }, ref) => (
+>(({ size, className, ...props }, ref) => (
))
diff --git a/packages/react/src/components/menu.tsx b/packages/react/src/components/menu.tsx
index 2f0f1d0..a49aa1b 100644
--- a/packages/react/src/components/menu.tsx
+++ b/packages/react/src/components/menu.tsx
@@ -20,7 +20,7 @@ const Menubar = React.forwardRef<
-
+
@@ -193,7 +193,7 @@ const MenubarSeparator = React.forwardRef<
>(({ className, ...props }, ref) => (
))
diff --git a/packages/react/src/components/select.tsx b/packages/react/src/components/select.tsx
index 9de8ed5..a7be464 100644
--- a/packages/react/src/components/select.tsx
+++ b/packages/react/src/components/select.tsx
@@ -16,7 +16,7 @@ const SelectTrigger = React.forwardRef<
span]:line-clamp-1',
className,
)}
{...props}
@@ -74,7 +74,7 @@ const SelectContent = React.forwardRef<
(({ className, ...props }, ref) => (
))
@@ -118,12 +118,12 @@ const SelectItem = React.forwardRef<
-
+
@@ -135,9 +135,10 @@ SelectItem.displayName = SelectPrimitive.Item.displayName
const SelectSeparator = React.forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef
->(({ ...props }, ref) => (
+>(({ className, ...props }, ref) => (
))
diff --git a/packages/react/src/components/separator.tsx b/packages/react/src/components/separator.tsx
index 25b3feb..61ba3f6 100644
--- a/packages/react/src/components/separator.tsx
+++ b/packages/react/src/components/separator.tsx
@@ -16,7 +16,7 @@ const Separator = React.forwardRef<
decorative={decorative}
orientation={orientation}
className={cn(
- 'shrink-0 bg-black',
+ 'shrink-0 bg-border',
orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
className,
)}
diff --git a/packages/react/src/components/sheet.tsx b/packages/react/src/components/sheet.tsx
index 2184bbd..8d9e1ff 100644
--- a/packages/react/src/components/sheet.tsx
+++ b/packages/react/src/components/sheet.tsx
@@ -8,14 +8,16 @@ interface SheetContentProps extends React.ComponentPropsWithoutRef {}
const sheetVariants = cva(
- 'fixed z-50 gap-4 bg-dark-900 p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+ 'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
{
variants: {
side: {
- top: 'inset-x-0 top-0 border-b border-dark-700/50 data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
- bottom: 'inset-x-0 bottom-0 border-t border-dark-700/50 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
- left: 'inset-y-0 left-0 h-full w-3/4 border-r border-dark-700/50 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
- right: 'inset-y-0 right-0 h-full w-3/4 border-l border-dark-700/50 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+ top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+ bottom:
+ 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+ left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+ right:
+ 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
},
},
defaultVariants: {
@@ -95,7 +97,7 @@ SheetFooter.displayName = 'SheetFooter'
const SheetTitle = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => (
))
@@ -105,7 +107,7 @@ SheetTitle.displayName = SheetPrimitive.Title.displayName
const SheetDescription = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => (
))
diff --git a/packages/react/src/components/table.tsx b/packages/react/src/components/table.tsx
index 11a91ae..0b17ac0 100644
--- a/packages/react/src/components/table.tsx
+++ b/packages/react/src/components/table.tsx
@@ -21,7 +21,7 @@ const TableHeader = React.forwardRef<
HTMLTableSectionElement,
React.HTMLAttributes
>(({ className, ...props }, ref) => (
-
+
))
TableHeader.displayName = 'TableHeader'
@@ -32,7 +32,7 @@ const TableBody = React.forwardRef<
>(({ className, ...props }, ref) => (
))
@@ -46,7 +46,7 @@ const TableFooter = React.forwardRef<
tr]:last:border-b-0',
+ 'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
className,
)}
{...props}
@@ -62,7 +62,7 @@ const TableRow = React.forwardRef<
[role=checkbox]]:translate-y-[2px]',
+ 'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
className,
)}
{...props}
@@ -109,7 +109,7 @@ const TableCaption = React.forwardRef<
>(({ className, ...props }, ref) => (
))
diff --git a/packages/react/src/components/tooltip.tsx b/packages/react/src/components/tooltip.tsx
index d8766c2..c09a3fc 100644
--- a/packages/react/src/components/tooltip.tsx
+++ b/packages/react/src/components/tooltip.tsx
@@ -1,24 +1,13 @@
import * as React from 'react'
import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+
import { cn } from '../lib/cn'
-import { Button } from './button'
const TooltipProvider = TooltipPrimitive.Provider
const Tooltip = TooltipPrimitive.Root
-function TooltipTrigger({
- className,
- ...props
-}: React.ButtonHTMLAttributes) {
- return (
-
-
-
- )
-}
-
-TooltipTrigger.displayName = TooltipPrimitive.Trigger
+const TooltipTrigger = TooltipPrimitive.Trigger
const TooltipContent = React.forwardRef<
React.ElementRef,
@@ -28,12 +17,13 @@ const TooltipContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={cn(
- 'z-50 overflow-hidden rounded-md border border-dark-500 bg-dark-900/100 px-3 py-1.5 text-sm text-popover-foreground shadow-md',
+ 'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
className,
)}
{...props}
/>
))
+
TooltipContent.displayName = TooltipPrimitive.Content.displayName
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/packages/react/src/plugin.ts b/packages/react/src/plugin.ts
index ade5079..8ffcea7 100644
--- a/packages/react/src/plugin.ts
+++ b/packages/react/src/plugin.ts
@@ -1,6 +1,17 @@
import plugin from 'tailwindcss/plugin'
-import { config, cssBase } from '@openui-org/theme'
+import { base, config, dark, ligth } from '@openui-org/theme'
export const react = plugin(({ addBase }) => {
- addBase({ ...cssBase })
+ addBase({
+ '*': {
+ '@apply border-border': {},
+ },
+ 'body': {
+ '@apply bg-background text-foreground': {},
+ 'font-feature-settings': '"rlig" 1, "calt" 1',
+ },
+ })
+ addBase({ ...base })
+ addBase({ ...ligth })
+ addBase({ ...dark })
}, config)
diff --git a/packages/theme/CHANGELOG.md b/packages/theme/CHANGELOG.md
index 9c0b521..514302e 100644
--- a/packages/theme/CHANGELOG.md
+++ b/packages/theme/CHANGELOG.md
@@ -1,5 +1,11 @@
# @openui-org/theme
+## 1.0.0
+
+### Major Changes
+
+- New theme colors and borders
+
## 0.6.0
### Minor Changes
diff --git a/packages/theme/README.md b/packages/theme/README.md
new file mode 100644
index 0000000..44c22c6
--- /dev/null
+++ b/packages/theme/README.md
@@ -0,0 +1,3 @@
+# @openui-org/theme
+
+The theme official of Open UI
diff --git a/packages/theme/package.json b/packages/theme/package.json
index e04fcb7..8ea2ba9 100644
--- a/packages/theme/package.json
+++ b/packages/theme/package.json
@@ -1,7 +1,7 @@
{
"name": "@openui-org/theme",
"type": "module",
- "version": "0.6.0",
+ "version": "1.0.0",
"description": "",
"author": "",
"license": "MIT",
diff --git a/packages/theme/src/colors/dark.ts b/packages/theme/src/colors/dark.ts
deleted file mode 100644
index ac50d39..0000000
--- a/packages/theme/src/colors/dark.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export const dark = {
- 50: 'hsl(var(--dark-50))',
- 100: 'hsl(var(--dark-100))',
- 200: 'hsl(var(--dark-200))',
- 300: 'hsl(var(--dark-300))',
- 400: 'hsl(var(--dark-400))',
- 500: 'hsl(var(--dark-500))',
- 600: 'hsl(var(--dark-600))',
- 700: 'hsl(var(--dark-700))',
- 800: 'hsl(var(--dark-800))',
- 900: 'hsl(var(--dark-900))',
-}
diff --git a/packages/theme/src/colors/error.ts b/packages/theme/src/colors/error.ts
deleted file mode 100644
index 0759b04..0000000
--- a/packages/theme/src/colors/error.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export const error = {
- 50: 'hsl(var(--error-50))',
- 100: 'hsl(var(--error-100))',
- 200: 'hsl(var(--error-200))',
- 300: 'hsl(var(--error-300))',
- 400: 'hsl(var(--error-400))',
- 500: 'hsl(var(--error-500))',
- 600: 'hsl(var(--error-600))',
- 700: 'hsl(var(--error-700))',
- 800: 'hsl(var(--error-800))',
- 900: 'hsl(var(--error-900))',
-}
diff --git a/packages/theme/src/colors/index.ts b/packages/theme/src/colors/index.ts
deleted file mode 100644
index 91fda1c..0000000
--- a/packages/theme/src/colors/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export * from './success'
-export * from './primary'
-export * from './secondary'
-export * from './error'
-export * from './warn'
-export * from './dark'
diff --git a/packages/theme/src/colors/primary.ts b/packages/theme/src/colors/primary.ts
deleted file mode 100644
index 3144a13..0000000
--- a/packages/theme/src/colors/primary.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export const primary = {
- 50: 'hsl(var(--primary-50))',
- 100: 'hsl(var(--primary-100))',
- 200: 'hsl(var(--primary-200))',
- 300: 'hsl(var(--primary-300))',
- 400: 'hsl(var(--primary-400))',
- 500: 'hsl(var(--primary-500))',
- 600: 'hsl(var(--primary-600))',
- 700: 'hsl(var(--primary-700))',
- 800: 'hsl(var(--primary-800))',
- 900: 'hsl(var(--primary-900))',
-}
diff --git a/packages/theme/src/colors/secondary.ts b/packages/theme/src/colors/secondary.ts
deleted file mode 100644
index 84addcd..0000000
--- a/packages/theme/src/colors/secondary.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export const secondary = {
- 50: 'hsl(var(--secondary-50))',
- 100: 'hsl(var(--secondary-100))',
- 200: 'hsl(var(--secondary-200))',
- 300: 'hsl(var(--secondary-300))',
- 400: 'hsl(var(--secondary-400))',
- 500: 'hsl(var(--secondary-500))',
- 600: 'hsl(var(--secondary-600))',
- 700: 'hsl(var(--secondary-700))',
- 800: 'hsl(var(--secondary-800))',
- 900: 'hsl(var(--secondary-900))',
-}
diff --git a/packages/theme/src/colors/success.ts b/packages/theme/src/colors/success.ts
deleted file mode 100644
index e1ec104..0000000
--- a/packages/theme/src/colors/success.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export const success = {
- 50: 'hsl(var(--success-50))',
- 100: 'hsl(var(--success-100))',
- 200: 'hsl(var(--success-200))',
- 300: 'hsl(var(--success-300))',
- 400: 'hsl(var(--success-400))',
- 500: 'hsl(var(--success-500))',
- 600: 'hsl(var(--success-600))',
- 700: 'hsl(var(--success-700))',
- 800: 'hsl(var(--success-800))',
- 900: 'hsl(var(--success-900))',
-}
diff --git a/packages/theme/src/colors/warn.ts b/packages/theme/src/colors/warn.ts
deleted file mode 100644
index d12899b..0000000
--- a/packages/theme/src/colors/warn.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export const warn = {
- 50: 'hsl(var(--warn-50))',
- 100: 'hsl(var(--warn-100))',
- 200: 'hsl(var(--warn-200))',
- 300: 'hsl(var(--warn-300))',
- 400: 'hsl(var(--warn-400))',
- 500: 'hsl(var(--warn-500))',
- 600: 'hsl(var(--warn-600))',
- 700: 'hsl(var(--warn-700))',
- 800: 'hsl(var(--warn-800))',
- 900: 'hsl(var(--warn-900))',
-}
diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts
index f24e08d..0a192dc 100644
--- a/packages/theme/src/index.ts
+++ b/packages/theme/src/index.ts
@@ -1,3 +1,2 @@
-export * from './colors'
export * from './shadcn-ui'
export * from './tailwindcss'
diff --git a/packages/theme/src/radius.ts b/packages/theme/src/radius.ts
index 7959337..7aeac58 100644
--- a/packages/theme/src/radius.ts
+++ b/packages/theme/src/radius.ts
@@ -1,7 +1,5 @@
export const borderRadius = {
- DEFAULT: 'var(--radius)',
- sm: 'var(--radius-sm',
- md: 'var(--radius-md)',
- lg: 'var(--radius-lg)',
- full: 'var(--radius-full)',
+ lg: `var(--radius)`,
+ md: `calc(var(--radius) - 2px)`,
+ sm: 'calc(var(--radius) - 4px)',
}
diff --git a/packages/theme/src/shadcn-ui.ts b/packages/theme/src/shadcn-ui.ts
index b33cdce..8e57966 100644
--- a/packages/theme/src/shadcn-ui.ts
+++ b/packages/theme/src/shadcn-ui.ts
@@ -1,81 +1,5 @@
-export const cssBase = {
- '*': {
- 'font-family': 'var(--font-archivo)',
- },
+export const base = {
':root': {
- /* Colors */
- /* -- Color success -- */
- '--success-50': '140 92 95',
- '--success-100': '141 88 84',
- '--success-200': '141 89 76',
- '--success-300': '141 89 65',
- '--success-400': '141 89 58',
- '--success-500': '141 100 47',
- '--success-600': '141 100 43',
- '--success-700': '141 100 33',
- '--success-800': '141 100 26',
- '--success-900': '141 100 20',
-
- /* -- Color primary */
- '--primary-50': '64 92 95',
- '--primary-100': '64 88 84',
- '--primary-200': '64 89 76',
- '--primary-300': '64 89 65',
- '--primary-400': '64 89 58',
- '--primary-500': '64 100 47',
- '--primary-600': '64 100 43',
- '--primary-700': '64 100 33',
- '--primary-800': '64 100 26',
- '--primary-900': '64 100 20',
-
- /* -- Color secondary */
- '--secondary-50': '204 100 97',
- '--secondary-100': '204 94 94',
- '--secondary-200': '201 94 86',
- '--secondary-300': '199 95 74',
- '--secondary-400': '198 93 60',
- '--secondary-500': '199 89 48',
- '--secondary-600': '201 96 32',
- '--secondary-700': '201 90 27',
- '--secondary-800': '202 80 24',
- '--secondary-900': '204 80 16',
-
- /* -- Color danger */
- '--error-50': '0 92 95',
- '--error-100': '0 88 84',
- '--error-200': '0 89 76',
- '--error-300': '0 89 65',
- '--error-400': '0 89 58',
- '--error-500': '0 100 47',
- '--error-600': '0 100 43',
- '--error-700': '0 100 33',
- '--error-800': '0 100 26',
- '--error-900': '0 100 20',
-
- /* -- Color warn */
- '--warn-50': '35 92 95',
- '--warn-100': '35 88 84',
- '--warn-200': '35 89 76',
- '--warn-300': '35 89 65',
- '--warn-400': '35 89 58',
- '--warn-500': '35 100 47',
- '--warn-600': '35 100 43',
- '--warn-700': '35 100 33',
- '--warn-800': '35 100 26',
- '--warn-900': '35 100 20',
-
- /* -- Color dark */
- '--dark-50': '180 19 89',
- '--dark-100': '180 10 80',
- '--dark-200': '180 7 70',
- '--dark-300': '180 7 70',
- '--dark-400': '180 4 45',
- '--dark-500': '180 6 37',
- '--dark-600': '180 8 25',
- '--dark-700': '180 10 20',
- '--dark-800': '180 13 6',
- '--dark-900': '200 100 1',
-
/* Box Sahdow */
'--shadow-sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
'--shadow': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
@@ -88,12 +12,53 @@ export const cssBase = {
/** Border raidus */
'--radius': '0.5rem',
- '--radius-sm': '0.8rem',
- '--radius-md': '0.75rem',
- '--radius-lg': '0.875rem',
- '--radius-full': '50%',
+ },
+}
+
+export const ligth = {
+ ':root': {
+ '--background': '0 0% 100%',
+ '--foreground': '222.2 47.4% 11.2%',
+ '--muted': '210 40% 96.1%',
+ '--muted-foreground': '215.4 16.3% 46.9%',
+ '--popover': '0 0% 100%',
+ '--popover-foreground': '222.2 47.4% 11.2%',
+ '--border': '214.3 31.8% 91.4%',
+ '--input': '214.3 31.8% 91.4%',
+ '--card': '0 0% 100%',
+ '--card-foreground': '222.2 47.4% 11.2%',
+ '--primary': '222.2 47.4% 11.2%',
+ '--primary-foreground': '210 40% 98%',
+ '--secondary': '210 40% 96.1%',
+ '--secondary-foreground': '222.2 47.4% 11.2%',
+ '--accent': '210 40% 96.1%',
+ '--accent-foreground': '222.2 47.4% 11.2%',
+ '--error': '0 100% 50%',
+ '--error-foreground': '210 40% 98%',
+ '--ring': '215 20.2% 65.1%',
+ },
+}
- /** Font family */
- '--font-archivo': '"Archivo", sans-serif',
+export const dark = {
+ '.dark': {
+ '--background': '224 71% 4%',
+ '--foreground': '213 31% 91%',
+ '--muted': '223 47% 11%',
+ '--muted-foreground': '215.4 16.3% 56.9%',
+ '--accent': '216 34% 17%',
+ '--accent-foreground': '210 40% 98%',
+ '--popover': '224 71% 4%',
+ '--popover-foreground': '215 20.2% 65.1%',
+ '--border': '216 34% 17%',
+ '--input': '216 34% 17%',
+ '--card': '224 71% 4%',
+ '--card-foreground': '213 31% 91%',
+ '--primary': '210 40% 98%',
+ '--primary-foreground': '222.2 47.4% 1.2%',
+ '--secondary': '222.2 47.4% 11.2%',
+ '--secondary-foreground': '210 40% 98%',
+ '--error': '0 63% 31%',
+ '--error-foreground': '210 40% 98%',
+ '--ring': '216 34% 17%',
},
}
diff --git a/packages/theme/src/tailwindcss.ts b/packages/theme/src/tailwindcss.ts
index e4dfb13..9bd0655 100644
--- a/packages/theme/src/tailwindcss.ts
+++ b/packages/theme/src/tailwindcss.ts
@@ -1,6 +1,4 @@
import type { Config } from 'tailwindcss'
-import { fontFamily } from 'tailwindcss/defaultTheme'
-import { dark, error, primary, secondary, success, warn } from './colors'
import { boxShadow } from './box-shadows'
import { borderRadius } from './radius'
import { container } from './screens'
@@ -12,18 +10,42 @@ export const config: Config = {
container,
extend: {
colors: {
- success,
- primary,
- secondary,
- warn,
- dark,
- error,
+ border: 'hsl(var(--border))',
+ input: 'hsl(var(--input))',
+ ring: 'hsl(var(--ring))',
+ background: 'hsl(var(--background))',
+ foreground: 'hsl(var(--foreground))',
+ primary: {
+ DEFAULT: 'hsl(var(--primary))',
+ foreground: 'hsl(var(--primary-foreground))',
+ },
+ secondary: {
+ DEFAULT: 'hsl(var(--secondary))',
+ foreground: 'hsl(var(--secondary-foreground))',
+ },
+ error: {
+ DEFAULT: 'hsl(var(--error))',
+ foreground: 'hsl(var(--error-foreground))',
+ },
+ muted: {
+ DEFAULT: 'hsl(var(--muted))',
+ foreground: 'hsl(var(--muted-foreground))',
+ },
+ accent: {
+ DEFAULT: 'hsl(var(--accent))',
+ foreground: 'hsl(var(--accent-foreground))',
+ },
+ popover: {
+ DEFAULT: 'hsl(var(--popover))',
+ foreground: 'hsl(var(--popover-foreground))',
+ },
+ card: {
+ DEFAULT: 'hsl(var(--card))',
+ foreground: 'hsl(var(--card-foreground))',
+ },
},
boxShadow,
borderRadius,
- fontFamily: {
- archivo: ['var(--font-archivo)', ...fontFamily.sans],
- },
keyframes: {
'accordion-down': {
from: { height: '0' },