Merge pull request #66 from fzzv/fix-in-dark-theme

fix: Color issues with some components in dark theme

Author: ariflogs

components/retroui/Select.tsx

@@ -15,7 +15,7 @@ const SelectTrigger = ({
   return (
     <SelectPrimitive.Trigger
       className={cn(
-        "flex h-10 min-w-40 items-center shadow-md justify-between border-2 border-input border-black bg-transparent px-4 py-2 ring-offset-background placeholder:text-muted-foreground focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-10 min-w-40 items-center shadow-md justify-between border-2 border-input border-border bg-transparent px-4 py-2 ring-offset-background placeholder:text-muted-foreground focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
@@ -42,7 +42,7 @@ const SelectContent = ({
     <SelectPrimitive.Portal>
       <SelectPrimitive.Content
         className={cn(
-          "relative z-50 min-w-[8rem] overflow-hidden border border-black bg-white text-popover-foreground shadow-md 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-[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",
+          "relative z-50 min-w-[8rem] overflow-hidden border border-border bg-background text-popover-foreground shadow-md 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-[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",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           className,

components/retroui/Tab.tsx

@@ -35,7 +35,7 @@ const TabsTrigger = ({ children, className, ...props }: ITabsTrigger) => {
   return (
     <Tab
       className={cn(
-        "px-4 py-1 border-2 border-transparent data-selected:border-black data-selected:bg-primary data-selected:font-semibold focus:outline-hidden",
+        "px-4 py-1 border-2 border-transparent data-selected:border-border data-selected:bg-primary data-selected:font-semibold focus:outline-hidden",
         className,
       )}
       {...props}
@@ -51,7 +51,7 @@ interface ITabsContent extends TabPanelProps {
 const TabsContent = ({ children, className, ...props }: ITabsContent) => {
   return (
     <TabPanel
-      className={cn("border-2 border-black mt-2 p-4", className)}
+      className={cn("border-2 border-border mt-2 p-4", className)}
       {...props}
     >
       {children}

components/retroui/Textarea.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { cn } from "@/lib/utils";
 
 export function Textarea({
   type = "text",
@@ -10,7 +11,10 @@ export function Textarea({
     <textarea
       placeholder={placeholder}
       rows={4}
-      className={`px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-hidden focus:shadow-xs ${className}`}
+      className={cn(
+        "px-4 py-2 w-full border-2 border-border shadow-md transition focus:outline-hidden focus:shadow-xs placeholder:text-muted-foreground",
+        className
+      )}
       {...props}
     />
   );

components/retroui/Toggle.tsx

@@ -15,7 +15,7 @@ const toggleVariants = cva(
                     "bg-transparent hover:bg-muted/70 hover:text-muted-foreground data-[state=on]:bg-muted",
                 outlined:
                     "border-2 border-input bg-transparent hover:bg-accent hover:text-accent-foreground/80 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
-                solid: "border-2 border-input bg-transparent hover:bg-black hover:text-white/90 hover:border-black data-[state=on]:bg-black data-[state=on]:text-white data-[state=on]:border-black",
+                solid: "border-2 border-input bg-transparent hover:bg-secondary hover:text-secondary-foreground hover:border-secondary data-[state=on]:bg-secondary data-[state=on]:text-secondary-foreground data-[state=on]:border-secondary",
                 "outline-muted":
                     "border-2 border-input bg-transparent hover:hover:bg-muted/70 hover:hover:text-muted-foreground data-[state=on]:bg-muted",
             },

preview/components/tab-style-default.tsx

@@ -1,27 +1,21 @@
-import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
+import { Tabs, TabsPanels, TabsTrigger, TabsContent, TabsTriggerList } from "@/components/retroui/Tab";
 
 export default function TabStyleDefault() {
   return (
-    <TabGroup>
-      <TabList>
-        <Tab className="px-4 py-1 border-2 border-transparent data-selected:border-black data-selected:bg-primary data-selected:font-semibold focus:outline-hidden">
-          Home
-        </Tab>
-        <Tab className="px-4 py-1 border-2 border-transparent data-selected:border-black data-selected:bg-primary data-selected:font-semibold focus:outline-hidden">
-          About
-        </Tab>
-        <Tab className="px-4 py-1 border-2 border-transparent data-selected:border-black data-selected:bg-primary data-selected:font-semibold focus:outline-hidden">
-          Contact
-        </Tab>
-      </TabList>
-      <TabPanels className="border-2 border-black mt-2 p-4">
-        <TabPanel>
+    <Tabs>
+      <TabsTriggerList>
+        <TabsTrigger>Home</TabsTrigger>
+        <TabsTrigger>About</TabsTrigger>
+        <TabsTrigger>Contact</TabsTrigger>
+      </TabsTriggerList>
+      <TabsPanels>
+        <TabsContent>
           Welcome to RetroUI, a retro styled UI library built with React,
           Tailwind CSS & Headless UI.
-        </TabPanel>
-        <TabPanel>This is the about section!</TabPanel>
-        <TabPanel>And, this is the contact section!</TabPanel>
-      </TabPanels>
-    </TabGroup>
+        </TabsContent>
+        <TabsContent>This is the about section!</TabsContent>
+        <TabsContent>And, this is the contact section!</TabsContent>
+      </TabsPanels>
+    </Tabs>
   );
 }

preview/components/textarea-style-default.tsx

@@ -1,9 +1,11 @@
+import { Textarea } from "@/components/retroui/Textarea";
+
 export default function TextareaStyleDefault() {
   return (
-    <textarea
+    <Textarea
       rows={4}
       placeholder="type something..."
-      className="px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-hidden focus:shadow-xs"
+      className="px-4 py-2 w-full border-2 shadow-md transition focus:outline-hidden focus:shadow-xs"
     />
   );
 }