refactor: improved color default and borders (#381)

src/components/elements/accordion/accordion-item.tsx

@@ -1,39 +1,20 @@
 import * as React from 'react'
 import * as AccordionPrimitive from '@radix-ui/react-accordion'
 import type { VariantProps } from '@/tailwind'
-import { Ripple, accordionItem, cn } from '@/tailwind'
+import { accordionItem, cn } from '@/tailwind'
 
 export interface Comp extends React.ElementRef<typeof AccordionPrimitive.Item> {}
-export type Props = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> & VariantProps<typeof accordionItem> & {
-  ripple?: boolean
-  rippleColor?: 'dark' | 'light'
-}
+export type Props = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> & VariantProps<typeof accordionItem>
 
 const AccordionItem = React.forwardRef<Comp, Props>(({
   className,
-  ripple = false,
-  rippleColor = 'dark',
-  color,
-  shadow,
-  radius,
-  separator,
   ...props
 }, ref) => {
-  const rippleEffect = ripple !== undefined && new Ripple()
-
-  const handleMouseDown = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    const onMouseDown = props?.onMouseDown
-
-    if (ripple && rippleEffect)
-      rippleEffect.create(e, rippleColor)
-
-    return typeof onMouseDown === 'function' && onMouseDown(e)
-  }
   return (
     <AccordionPrimitive.Item
       ref={ref}
-      className={cn(accordionItem({ color, shadow, radius, separator }), className)}
-      onMouseDown={handleMouseDown}
+      className={cn(accordionItem(), className)}
+
       {...props}
     />
   )

src/components/elements/accordion/accordion.tsx

@@ -6,10 +6,10 @@ import { accordion, cn } from '@/tailwind'
 export interface Comp extends React.ElementRef<typeof AccordionPrimitive.Root> {}
 export type Props = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & VariantProps<typeof accordion>
 
-const Accordion = React.forwardRef<Comp, Props>(({ className, shadow, radius, bordered, ...props }, ref) => (
+const Accordion = React.forwardRef<Comp, Props>(({ className, radius, bordered, ...props }, ref) => (
   <AccordionPrimitive.Root
     ref={ref}
-    className={cn(accordion({ shadow, radius, bordered }), className)}
+    className={cn(accordion({ radius, bordered }), className)}
     {...props}
   />
 ))

src/components/elements/button/button.tsx

@@ -17,11 +17,10 @@ const Button = React.forwardRef<Comp, Props>(
     className,
     variant,
     ripple = true,
-    rippleColor = 'dark',
+    rippleColor = 'light',
     size,
     outline,
     rounded,
-    shadow,
     asChild = false,
     ...props
   }, ref) => {
@@ -38,7 +37,7 @@ const Button = React.forwardRef<Comp, Props>(
     }
     return (
       <Comp
-        className={cn(button({ variant, outline, size, rounded, shadow }), className)}
+        className={cn(button({ variant, outline, size, rounded }), className)}
         ref={ref}
         onMouseDown={handleMouseDown}
         {...props}

src/components/forms/select/select-trigger.tsx

@@ -7,11 +7,11 @@ export interface Props extends React.ComponentPropsWithoutRef<typeof SelectPrimi
   VariantProps<typeof selectTrigger> {}
 export interface Comp extends React.ElementRef<typeof SelectPrimitive.Trigger> {}
 
-const SelectTrigger = React.forwardRef<Comp, Props>(({ className, shadow, variant, children, ...props }, ref) => {
+const SelectTrigger = React.forwardRef<Comp, Props>(({ className, variant, children, ...props }, ref) => {
   return (
     <SelectPrimitive.Trigger
       ref={ref}
-      className={cn(selectTrigger({ shadow, variant }), className)}
+      className={cn(selectTrigger({ variant }), className)}
       {...props}
     >
       {children}

src/components/layouts/card/card.tsx

@@ -11,7 +11,6 @@ export interface Props extends React.HTMLAttributes<HTMLDivElement>, VariantProp
 const Card = React.forwardRef<Comp, Props>(({
   className,
   rounded,
-  shadow,
   orientation,
   ripple = false,
   rippleColor = 'dark',
@@ -30,7 +29,7 @@ const Card = React.forwardRef<Comp, Props>(({
   return (
     <div
       ref={ref}
-      className={cn(card({ rounded, shadow, orientation }), className)}
+      className={cn(card({ rounded, orientation }), className)}
       onMouseDown={handleMouseDown}
       {...props}
     />

src/components/navigations/sheet/sheet-content.tsx

@@ -22,7 +22,7 @@ const SheetContent = React.forwardRef<Comp, Props>(({ side = 'right', shadow, cl
     >
       <div className="relative">
         {children}
-        <SheetPrimitive.Close className="absolute right-0 top-0 rounded-small opacity-80 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
+        <SheetPrimitive.Close className="absolute right-0 top-0 rounded-small opacity-80 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none px-4">
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="lucide lucide-x">
             <path d="M18 6 6 18" />
             <path d="m6 6 12 12" />

src/plugins/base.ts

@@ -1,30 +1,10 @@
 import type { LayoutTheme } from '@/types/theme'
 
 export const baseTheme: LayoutTheme = {
-  fontSize: {
-    small: '12px',
-    medium: '16px',
-    large: '20px',
-  },
   radius: {
-    small: '2px',
-    medium: '4px',
-    large: '8px',
-  },
-  lineHeight: {
-    small: '16px',
-    medium: '20px',
-    large: '24px',
-  },
-  borderWidth: {
-    small: '1px',
-    medium: '2px',
-    large: '3px',
-  },
-  boxShadow: {
-    small: '0px 2px 16px 0px rgba(0, 0, 0, 0.12)',
-    medium: '0px 8px 24px 0px rgba(0, 0, 0, 0.16)',
-    large: ' 0px 16px 48px -4px rgba(0, 0, 0, 0.24)',
+    small: '4px',
+    medium: '8px',
+    large: '12px',
   },
 }
 

src/plugins/colors/semantics.ts

@@ -12,22 +12,6 @@ export const base: SemanticBaseColors = {
       ...common.neutral,
       DEFAULT: '#11181C',
     },
-    content1: {
-      DEFAULT: '#FFFFFF',
-      foreground: '#11181C',
-    },
-    content2: {
-      DEFAULT: common.neutral[100],
-      foreground: common.neutral[800],
-    },
-    content3: {
-      DEFAULT: common.neutral[200],
-      foreground: common.neutral[700],
-    },
-    content4: {
-      DEFAULT: common.neutral[300],
-      foreground: common.neutral[600],
-    },
   },
   dark: {
     background: {
@@ -37,31 +21,15 @@ export const base: SemanticBaseColors = {
       ...swapColorValues(common.neutral),
       DEFAULT: '#ECEDEE',
     },
-    content1: {
-      DEFAULT: common.neutral[900],
-      foreground: common.neutral[50],
-    },
-    content2: {
-      DEFAULT: common.neutral[800],
-      foreground: common.neutral[100],
-    },
-    content3: {
-      DEFAULT: common.neutral[700],
-      foreground: common.neutral[200],
-    },
-    content4: {
-      DEFAULT: common.neutral[600],
-      foreground: common.neutral[300],
-    },
   },
 }
 
 export const themeColorsLight: ThemeColors = {
   ...base.light,
   default: {
     ...common.neutral,
-    foreground: readableColor(common.neutral[300]),
-    DEFAULT: common.neutral[300],
+    foreground: '#FFFFFF',
+    DEFAULT: '#000000',
   },
   primary: {
     ...common.azure,
@@ -88,9 +56,9 @@ export const themeColorsLight: ThemeColors = {
 export const themeColorsDark: ThemeColors = {
   ...base.dark,
   default: {
-    ...swapColorValues(common.neutral),
-    foreground: readableColor(common.neutral[700]),
-    DEFAULT: common.neutral[700],
+    ...common.neutral,
+    foreground: '#000000',
+    DEFAULT: '#FFFFFF',
   },
   primary: {
     ...swapColorValues(common.azure),

src/plugins/components/accordion.ts

@@ -12,12 +12,7 @@ import { cva } from 'class-variance-authority'
  */
 export const accordion = cva('mt-2 p-3', {
   variants: {
-    shadow: {
-      sm: 'shadow-small',
-      md: 'shadow-medium',
-      lg: 'shadow-large',
-      none: 'shadow-none',
-    },
+
     radius: {
       sm: 'rounded-small',
       md: 'rounded-medium',
@@ -32,8 +27,8 @@ export const accordion = cva('mt-2 p-3', {
     },
   },
   defaultVariants: {
-    shadow: 'none',
-    radius: 'sm',
+
+    radius: 'md',
     bordered: 'none',
   },
 })
@@ -48,7 +43,7 @@ export const accordion = cva('mt-2 p-3', {
  *   // accordion elements
  * </AccordionContent>
  */
-export const accordionContent = cva('overflow-hidden text-small transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down')
+export const accordionContent = cva('overflow-hidden text-small transition-all dropdown-out data-[state=open]:accordion-in')
 
 /**
  * Accordion wrapper **Class Variants** component
@@ -60,41 +55,7 @@ export const accordionContent = cva('overflow-hidden text-small transition-all d
  *   // accordion elements
  * </AccordionItem>
  */
-export const accordionItem = cva('px-4 py-2 my-3', {
-  variants: {
-    color: {
-      primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
-      warn: 'bg-warn text-warn-foreground hover:bg-warn/90',
-      success: 'bg-success text-success-foreground hover:bg-success/90',
-      error: 'bg-error text-error-foreground hover:bg-error/90',
-      none: 'bg-transparent',
-    },
-    shadow: {
-      sm: 'shadow-small',
-      md: 'shadow-medium',
-      lg: 'shadow-large',
-      none: 'shadow-none',
-    },
-    radius: {
-      sm: 'rounded-small',
-      md: 'rounded-medium',
-      lg: 'rounded-large',
-      none: 'rounded-none',
-    },
-    separator: {
-      sm: 'border-b-small',
-      md: 'border-b-medium',
-      lg: 'border-b-large',
-      none: 'border-b-none',
-    },
-  },
-  defaultVariants: {
-    shadow: 'none',
-    radius: 'none',
-    color: 'none',
-    separator: 'none',
-  },
-})
+export const accordionItem = cva('px-4 py-2 my-3 border-b border-default-300')
 
 /**
  * Accordion wrapper **Class Variants** component

src/plugins/components/alert.ts

@@ -13,24 +13,22 @@ import { cva } from 'class-variance-authority'
 export const alert = cva('relative w-full p-4 [&>svg~*]:pl-8 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 shadow-small', {
   variants: {
     variant: {
-      default: 'bg-default text-default-foreground',
+      default: 'border border-default-300 dark:bg-border-default-700 text-foreground',
       primary: 'bg-primary text-primary-foreground',
       error: 'bg-error text-error-foreground',
       warn: 'bg-warn text-warn-foreground',
       success: 'bg-success text-success-foreground',
     },
-
     rounded: {
       none: 'rounded-none',
       sm: 'rounded-small',
       md: 'rounded-medium',
       lg: 'rounded-large',
     },
-
   },
   defaultVariants: {
     variant: 'default',
-    rounded: 'sm',
+    rounded: 'md',
   },
 })
 

src/plugins/components/badge.ts

@@ -29,6 +29,6 @@ export const badge = cva('inline-flex gap-2 items-center px-2.5 py-0.5 text-smal
   },
   defaultVariants: {
     variant: 'default',
-    rounded: 'sm',
+    rounded: 'md',
   },
 })

src/plugins/components/button.ts

@@ -44,19 +44,14 @@ export const button = cva(
         lg: 'rounded-large',
         full: 'rounded-full',
       },
-      shadow: {
-        none: 'shadow-none',
-        sm: 'shadow-small',
-        md: 'shadow-medium',
-        lg: 'shadow-large',
-      },
+
     },
     defaultVariants: {
       variant: 'default',
       outline: 'none',
       size: 'sm',
-      rounded: 'sm',
-      shadow: 'none',
+      rounded: 'md',
+
     },
   },
 )

src/plugins/components/card.ts

@@ -10,28 +10,21 @@ import { cva } from 'class-variance-authority'
  *   // accordion elements
  * </Card>
  */
-export const card = cva('cursor-pointer flex border-[1px] border-default justify-between items-center', {
+export const card = cva('cursor-pointer flex border border-default-300 justify-between items-center', {
   variants: {
     rounded: {
       none: 'rounded-none',
       sm: 'rounded-small',
       md: 'rounded-medium',
       lg: 'rounded-large',
     },
-    shadow: {
-      none: 'shadow-none',
-      sm: 'shadow-small',
-      md: 'shadow-medium',
-      lg: 'shadow-large',
-    },
     orientation: {
       horizontal: 'flex-row',
       vertical: 'flex-col',
     },
   },
   defaultVariants: {
-    rounded: 'sm',
-    shadow: 'sm',
+    rounded: 'md',
     orientation: 'vertical',
   },
 })