feat: styles for the alert component (#347)

playground/app/page.tsx

@@ -1,11 +1,7 @@
-import { Button } from '@openlabs/ui'
-
 export default function Home() {
   return (
-
-    <main className="flex flex-col items-center justify-center w-screen h-screen">
-      <Button>Play</Button>
+    <main className="flex flex-col items-center justify-center w-screen h-screen gap-y-4 p-24">
+      {/** Add your example, before remove */}
     </main>
-
   )
 }

playground/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@openlabs/ui": "workspace:*",
+    "lucide-react": "0.427.0",
     "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18"

playground/tailwind.config.ts

@@ -11,6 +11,6 @@ const config: Config = {
   theme: {
     extend: {},
   },
-  plugins: [openui()],
+  plugins: [openui({ defaultTheme: 'light' })],
 }
 export default config

src/components/elements/alert/alert.tsx

@@ -6,16 +6,14 @@ export interface Props extends React.HTMLAttributes<HTMLDivElement>, VariantProp
 
 const Alert = React.forwardRef<Comp, Props>(({
   className,
-  background,
-  shadow,
-  outline,
+  variant,
   rounded,
   ...props
 }, ref) => (
   <div
     ref={ref}
     role="alert"
-    className={cn(alert({ background, shadow, rounded, outline }), className)}
+    className={cn(alert({ variant, rounded }), className)}
     {...props}
   />
 ))

src/plugins/colors/amber.ts

@@ -0,0 +1,12 @@
+export const amber = {
+  50: '#FEFCE8',
+  100: '#FDEDD3',
+  200: '#FBDBA7',
+  300: '#F9C97C',
+  400: '#Ff7B750',
+  500: '#F5A524',
+  600: '#C4841D',
+  700: '#936316',
+  800: '#62420E',
+  900: '#312107',
+}

src/plugins/colors/commons.ts

@@ -1,5 +1,5 @@
 import { azure } from './azure'
-import { cider } from './cider'
+import { amber } from './amber'
 import { cloud } from './cloud'
 import { crimson } from './crimson'
 import { emerald } from './emerald'
@@ -11,7 +11,7 @@ export const commonColors = {
   white: '#ffffff',
   black: '#000000',
   azure,
-  cider,
+  amber,
   cloud,
   crimson,
   emerald,

src/plugins/colors/semantics.ts

@@ -74,13 +74,13 @@ export const themeColorsLight: ThemeColors = {
     DEFAULT: common.emerald[500],
   },
   warn: {
-    ...common.cider,
-    foreground: readableColor(common.cider[500]),
-    DEFAULT: common.cider[500],
+    ...common.amber,
+    foreground: readableColor(common.amber[500]),
+    DEFAULT: common.amber[500],
   },
   error: {
     ...common.crimson,
-    foreground: common.white,
+    foreground: readableColor(common.crimson[500]),
     DEFAULT: common.crimson[500],
   },
 }
@@ -97,20 +97,19 @@ export const themeColorsDark: ThemeColors = {
     foreground: readableColor(common.azure[500]),
     DEFAULT: common.azure[500],
   },
-
   success: {
     ...swapColorValues(common.emerald),
     foreground: readableColor(common.emerald[500]),
     DEFAULT: common.emerald[500],
   },
   warn: {
-    ...swapColorValues(common.cider),
-    foreground: readableColor(common.cider[500]),
-    DEFAULT: common.cider[500],
+    ...swapColorValues(common.amber),
+    foreground: readableColor(common.amber[500]),
+    DEFAULT: common.amber[500],
   },
   error: {
     ...swapColorValues(common.crimson),
-    foreground: common.white,
+    foreground: readableColor(common.crimson[500]),
     DEFAULT: common.crimson[500],
   },
 }

src/plugins/components/alert.ts

@@ -10,28 +10,14 @@ import { cva } from 'class-variance-authority'
  *   // alert elements
  * </Alert>
  */
-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 [&>svg]:text-foreground', {
+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: {
-    outline: {
-      primary: 'border border-primary/30 dark:border-primary [&>svg]:text-primary text-primary/80',
-      error: 'border border-error/30 dark:border-error [&>svg]:text-error text-error/80',
-      warn: 'border border-warn/30 dark:border-warn [&>svg]:text-warn text-warn/80',
-      success: 'border border-success/30 dark:border-success [&>svg]:text-success text-success/80',
-      none: 'border border-transparent',
-    },
-    background: {
-      none: 'bg-transparent dark:bg-transparent',
-      primary: 'bg-primary/20 dark:bg-primary [&>svg]:text-primary text-primary/80 dark:text-primary-foreground dark:[&>svg]:text-white',
-      error: 'bg-error/20 [&>svg]:text-error text-error/80 dark:text-error-foreground dark:bg-error',
-      warn: 'bg-warn/20 [&>svg]:text-warn text-warn/80 dark:text-warn-foreground dark:bg-warn',
-      success: 'bg-success/20 [&>svg]:text-success text-success/80 dark:text-success-foreground dark:bg-success',
-    },
-
-    shadow: {
-      none: 'shadow-none',
-      sm: 'shadow-small',
-      md: 'shadow-medium',
-      lg: 'shadow-large',
+    variant: {
+      default: 'bg-default text-default-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: {
@@ -43,10 +29,8 @@ export const alert = cva('relative w-full p-4 [&>svg~*]:pl-8 [&>svg+div]:transla
 
   },
   defaultVariants: {
-    background: 'primary',
-    shadow: 'sm',
+    variant: 'default',
     rounded: 'sm',
-    outline: 'none',
   },
 })