Merge pull request #68 from Logging-Stuff/theme-fix

Theme fix

Author: ariflogs

app/global.css

@@ -53,24 +53,25 @@
   --border: #000;
   --background-image: url("/images/banner_void_2.svg");
 }
+
 .dark {
-  --background: #000000;
-  --foreground: #eaeaea;
-  --card: #1e1e1e;
-  --card-foreground: #eaeaea;
-  --primary: #ffcc00;
-  --primary-hover: #ffdb33;
+  --background: #1a1a1a;
+  --foreground: #f5f5f5;
+  --card: #242424;
+  --card-foreground: #f5f5f5;
+  --primary: #ffdb33;
+  --primary-hover: #ffcc00;
   --primary-foreground: #000;
-  --secondary: #fff;
-  --secondary-foreground: #000;
-  --muted: #5a5a5a;
-  --muted-foreground: #aeaeae;
-  --accent: #ffd966;
+  --secondary: #3a3a3a;
+  --secondary-foreground: #f5f5f5;
+  --muted: #3f3f46;
+  --muted-foreground: #a0a0a0;
+  --accent: #fae583;
   --accent-foreground: #000;
   --destructive: #e63946;
   --destructive-foreground: #fff;
-  --border: #eee;
-  --background-image: url("/images/bg_void_3.png");
+  --border: #3a3a3a;
+  --background-image: url("/images/bg_void_3.svg"); /* Optional: A different image for dark mode */
 }
 
 .bg-image {

components/retroui/Checkbox.tsx

@@ -6,7 +6,7 @@ import { Check } from "lucide-react";
 const checkboxVariants = cva("border-2", {
   variants: {
     variant: {
-      default: "data-[state=checked]:bg-primary",
+      default: "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground ",
       outline: "",
       solid:
         "data-[state=checked]:bg-foreground data-[state=checked]:text-background",

components/retroui/Select.tsx

@@ -72,7 +72,7 @@ const SelectItem = ({
 }: SelectPrimitive.SelectItemProps) => (
   <SelectPrimitive.Item
     className={cn(
-      "relative flex w-full cursor-default select-none items-center py-1.5 px-2 outline-hidden hover:bg-primary data-disabled:pointer-events-none data-disabled:opacity-50",
+      "relative flex w-full cursor-default select-none items-center py-1.5 px-2 outline-hidden hover:bg-primary hover:text-primary-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className,
     )}
     {...props}

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-border 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:text-primary-foreground data-selected:font-semibold focus:outline-hidden",
         className,
       )}
       {...props}

components/retroui/Tooltip.tsx

@@ -12,7 +12,7 @@ const tooltipContentVariants = cva(
     variants: {
       variant: {
         default: "bg-background text-foreground",
-        primary: "bg-primary text-foreground",
+        primary: "bg-primary text-primary-foreground",
         solid: "bg-black text-white",
       },
     },

content/docs/install/nextjs.mdx

@@ -157,22 +157,22 @@ Save your theme as CSS variables in `global.css`:
 }
 
 .dark {
-  --background: #000000;
-  --foreground: #eaeaea;
-  --card: #1e1e1e;
-  --card-foreground: #eaeaea;
-  --primary: #ffcc00;
-  --primary-hover: #ffdb33;
+  --background: #1a1a1a;
+  --foreground: #f5f5f5;
+  --card: #242424;
+  --card-foreground: #f5f5f5;
+  --primary: #ffdb33;
+  --primary-hover: #ffcc00;
   --primary-foreground: #000;
-  --secondary: #fff;
-  --secondary-foreground: #000;
-  --muted: #5a5a5a;
-  --muted-foreground: #aeaeae;
-  --accent: #ffd966;
+  --secondary: #3a3a3a;
+  --secondary-foreground: #f5f5f5;
+  --muted: #3f3f46;
+  --muted-foreground: #a0a0a0;
+  --accent: #fae583;
   --accent-foreground: #000;
   --destructive: #e63946;
   --destructive-foreground: #fff;
-  --border: #eee;
+  --border: #3a3a3a;
 }
 ```
 

content/docs/install/vite.mdx

@@ -188,22 +188,22 @@ Save your theme as CSS variables in `styles.css` file:
 }
 
 .dark {
-  --background: #000000;
-  --foreground: #eaeaea;
-  --card: #1e1e1e;
-  --card-foreground: #eaeaea;
-  --primary: #ffcc00;
-  --primary-hover: #ffdb33;
+  --background: #1a1a1a;
+  --foreground: #f5f5f5;
+  --card: #242424;
+  --card-foreground: #f5f5f5;
+  --primary: #ffdb33;
+  --primary-hover: #ffcc00;
   --primary-foreground: #000;
-  --secondary: #fff;
-  --secondary-foreground: #000;
-  --muted: #5a5a5a;
-  --muted-foreground: #aeaeae;
-  --accent: #ffd966;
+  --secondary: #3a3a3a;
+  --secondary-foreground: #f5f5f5;
+  --muted: #3f3f46;
+  --muted-foreground: #a0a0a0;
+  --accent: #fae583;
   --accent-foreground: #000;
   --destructive: #e63946;
   --destructive-foreground: #fff;
-  --border: #eee;
+  --border: #3a3a3a;
 }
 ```
 

public/r/checkbox.json

@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "components/retroui/Checkbox.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport { Check } from \"lucide-react\";\n\nconst checkboxVariants = cva(\"border-2\", {\n  variants: {\n    variant: {\n      default: \"data-[state=checked]:bg-primary\",\n      outline: \"\",\n      solid:\n        \"data-[state=checked]:bg-foreground data-[state=checked]:text-background\",\n    },\n    size: {\n      sm: \"h-4 w-4\",\n      md: \"h-5 w-5\",\n      lg: \"h-6 w-6\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\ninterface CheckboxProps\n  extends React.ComponentProps<typeof CheckboxPrimitive.Root>,\n    VariantProps<typeof checkboxVariants> {}\n\nexport const Checkbox = ({\n  className,\n  size,\n  variant,\n  ...props\n}: CheckboxProps) => (\n  <CheckboxPrimitive.Root\n    className={cn(\n      checkboxVariants({\n        size,\n        variant,\n      }),\n      className,\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator className=\"h-full w-full\">\n      <Check className=\"h-full w-full\" />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n);\n",
+      "content": "import { cn } from \"@/lib/utils\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport { Check } from \"lucide-react\";\n\nconst checkboxVariants = cva(\"border-2\", {\n  variants: {\n    variant: {\n      default: \"data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground \",\n      outline: \"\",\n      solid:\n        \"data-[state=checked]:bg-foreground data-[state=checked]:text-background\",\n    },\n    size: {\n      sm: \"h-4 w-4\",\n      md: \"h-5 w-5\",\n      lg: \"h-6 w-6\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\ninterface CheckboxProps\n  extends React.ComponentProps<typeof CheckboxPrimitive.Root>,\n    VariantProps<typeof checkboxVariants> {}\n\nexport const Checkbox = ({\n  className,\n  size,\n  variant,\n  ...props\n}: CheckboxProps) => (\n  <CheckboxPrimitive.Root\n    className={cn(\n      checkboxVariants({\n        size,\n        variant,\n      }),\n      className,\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator className=\"h-full w-full\">\n      <Check className=\"h-full w-full\" />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n);\n",
       "type": "registry:component",
       "target": "components/retroui/Checkbox.tsx"
     }

public/r/radio.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "components/retroui/Radio.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\nimport * as RadioPrimitive from \"@radix-ui/react-radio-group\";\nimport { cva, VariantProps } from \"class-variance-authority\";\n\nconst radioVariants = cva(\"border-black border-2\", {\n  variants: {\n    variant: {\n      default: \"\",\n      outline: \"\",\n      solid: \"\",\n    },\n    size: {\n      sm: \"h-4 w-4\",\n      md: \"h-5 w-5\",\n      lg: \"h-6 w-6\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\nconst radioIndicatorVariants = cva(\"flex \", {\n  variants: {\n    variant: {\n      default: \"bg-primary border-2 border-black\",\n      outline: \"border-2 border-black\",\n      solid: \"bg-black\",\n    },\n    size: {\n      sm: \"h-2 w-2\",\n      md: \"h-2.5 w-2.5\",\n      lg: \"h-3.5 w-3.5\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\ninterface RadioGroupProps\n  extends React.ComponentProps<typeof RadioPrimitive.Root> {}\n\nexport const RadioGroupRoot = ({ className, ...props }: RadioGroupProps) => (\n  <RadioPrimitive.Root className={cn(\"grid gap-2\", className)} {...props} />\n);\n\ninterface RadioProps\n  extends React.ComponentProps<typeof RadioPrimitive.Item>,\n    VariantProps<typeof radioVariants> {}\n\nexport const RadioItem = ({\n  children,\n  className,\n  size,\n  variant,\n  ...props\n}: RadioProps) => (\n  <RadioPrimitive.Item\n    {...props}\n    className={cn(\n      radioVariants({\n        size,\n        variant,\n      }),\n      className,\n    )}\n  >\n    <RadioPrimitive.Indicator className=\"flex justify-center items-center\">\n      <span className={radioIndicatorVariants({ size, variant })}></span>\n    </RadioPrimitive.Indicator>\n    {children}\n  </RadioPrimitive.Item>\n);\n\nconst RadioComponent = Object.assign(RadioGroupRoot, {\n  Item: RadioItem,\n});\n\nexport { RadioComponent as RadioGroup };\n",
+      "content": "import { cn } from \"@/lib/utils\";\nimport * as RadioPrimitive from \"@radix-ui/react-radio-group\";\nimport { cva, VariantProps } from \"class-variance-authority\";\n\nconst radioVariants = cva(\"border-border border-2\", {\n  variants: {\n    variant: {\n      default: \"\",\n      outline: \"\",\n      solid: \"\",\n    },\n    size: {\n      sm: \"h-4 w-4\",\n      md: \"h-5 w-5\",\n      lg: \"h-6 w-6\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\nconst radioIndicatorVariants = cva(\"flex \", {\n  variants: {\n    variant: {\n      default: \"bg-primary border-2 border-border\",\n      outline: \"border-2 border-border\",\n      solid: \"bg-border\",\n    },\n    size: {\n      sm: \"h-2 w-2\",\n      md: \"h-2.5 w-2.5\",\n      lg: \"h-3.5 w-3.5\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\ninterface RadioGroupProps\n  extends React.ComponentProps<typeof RadioPrimitive.Root> {}\n\nexport const RadioGroupRoot = ({ className, ...props }: RadioGroupProps) => (\n  <RadioPrimitive.Root className={cn(\"grid gap-2\", className)} {...props} />\n);\n\ninterface RadioProps\n  extends React.ComponentProps<typeof RadioPrimitive.Item>,\n    VariantProps<typeof radioVariants> {}\n\nexport const RadioItem = ({\n  children,\n  className,\n  size,\n  variant,\n  ...props\n}: RadioProps) => (\n  <RadioPrimitive.Item\n    {...props}\n    className={cn(\n      radioVariants({\n        size,\n        variant,\n      }),\n      className,\n    )}\n  >\n    <RadioPrimitive.Indicator className=\"flex justify-center items-center\">\n      <span className={radioIndicatorVariants({ size, variant })}></span>\n    </RadioPrimitive.Indicator>\n    {children}\n  </RadioPrimitive.Item>\n);\n\nconst RadioComponent = Object.assign(RadioGroupRoot, {\n  Item: RadioItem,\n});\n\nexport { RadioComponent as RadioGroup };\n",
       "type": "registry:component",
       "target": "components/retroui/Radio.tsx"
     }

public/r/select.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "components/retroui/Select.tsx",
-      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport React from \"react\";\n\nconst Select = SelectPrimitive.Root;\n\nconst SelectTrigger = ({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.SelectTriggerProps) => {\n  return (\n    <SelectPrimitive.Trigger\n      className={cn(\n        \"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\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDown className=\"ml-2 h-4 w-4\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n};\n\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectIcon = SelectPrimitive.Icon;\n\nconst SelectContent = ({\n  className,\n  children,\n  position = \"popper\",\n  ...props\n}: SelectPrimitive.SelectContentProps) => {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        className={cn(\n          \"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\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className,\n        )}\n        position={position}\n        {...props}\n      >\n        <SelectPrimitive.Viewport\n          className={cn(\n            position === \"popper\" &&\n              \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\",\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n};\n\nconst SelectGroup = SelectPrimitive.Group;\n\nconst SelectItem = ({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.SelectItemProps) => (\n  <SelectPrimitive.Item\n    className={cn(\n      \"relative flex w-full cursor-default select-none items-center py-1.5 px-2 outline-hidden hover:bg-primary data-disabled:pointer-events-none data-disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n\n    <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4 text-foreground\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n  </SelectPrimitive.Item>\n);\nconst SelectLabel = SelectPrimitive.Label;\nconst SelectSeparator = SelectPrimitive.Separator;\n\nconst SelectObj = Object.assign(Select, {\n  Trigger: SelectTrigger,\n  Value: SelectValue,\n  Icon: SelectIcon,\n  Content: SelectContent,\n  Group: SelectGroup,\n  Item: SelectItem,\n  Label: SelectLabel,\n  Separator: SelectSeparator,\n});\n\nexport { SelectObj as Select };\n",
+      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { Check, ChevronDown } from \"lucide-react\";\nimport React from \"react\";\n\nconst Select = SelectPrimitive.Root;\n\nconst SelectTrigger = ({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.SelectTriggerProps) => {\n  return (\n    <SelectPrimitive.Trigger\n      className={cn(\n        \"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\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDown className=\"ml-2 h-4 w-4\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n};\n\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectIcon = SelectPrimitive.Icon;\n\nconst SelectContent = ({\n  className,\n  children,\n  position = \"popper\",\n  ...props\n}: SelectPrimitive.SelectContentProps) => {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        className={cn(\n          \"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\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className,\n        )}\n        position={position}\n        {...props}\n      >\n        <SelectPrimitive.Viewport\n          className={cn(\n            position === \"popper\" &&\n              \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\",\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n};\n\nconst SelectGroup = SelectPrimitive.Group;\n\nconst SelectItem = ({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.SelectItemProps) => (\n  <SelectPrimitive.Item\n    className={cn(\n      \"relative flex w-full cursor-default select-none items-center py-1.5 px-2 outline-hidden hover:bg-primary hover:text-primary-foreground data-disabled:pointer-events-none data-disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n\n    <span className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <Check className=\"h-4 w-4 text-foreground\" />\n      </SelectPrimitive.ItemIndicator>\n    </span>\n  </SelectPrimitive.Item>\n);\nconst SelectLabel = SelectPrimitive.Label;\nconst SelectSeparator = SelectPrimitive.Separator;\n\nconst SelectObj = Object.assign(Select, {\n  Trigger: SelectTrigger,\n  Value: SelectValue,\n  Icon: SelectIcon,\n  Content: SelectContent,\n  Group: SelectGroup,\n  Item: SelectItem,\n  Label: SelectLabel,\n  Separator: SelectSeparator,\n});\n\nexport { SelectObj as Select };\n",
       "type": "registry:component",
       "target": "components/retroui/Select.tsx"
     }