feat: update color presets for improved dark mode support and add ColorConfig interface properties

Author: subhadeeproy3902

src/lib/constants.ts

@@ -1,81 +1,68 @@
-
 export const SHADCN_PRESETS: ColorPreset[] = [
   {
     name: "Zinc",
     colors: {
-      primary: "240 5.9% 10%",
-      secondary: "240 3.7% 15.9%",
+      primary: "0 0% 98%",
+      secondary: "240 4.8% 95.9%",
+      "secondary-dark": "240 3.7% 15.9%",
       accent: "240 4.8% 95.9%",
+      "accent-dark": "240 3.7% 15.9%",
       destructive: "0 84.2% 60.2%",
+      muted: "240 4.8% 95.9%",
+      "muted-dark": "240 3.7% 15.9%",
+      border: "240 5.9% 90%",
+      "border-dark": "240 3.7% 15.9%",
+      input: "240 5.9% 90%",
+      "input-dark": "240 3.7% 15.9%",
+      ring: "240 5.9% 10%"
     },
-    backgroundLight: "240 5% 98%",
-    backgroundDark: "240 10% 4%",
-    cardLight: "240 5% 96%",
-    cardDark: "240 10% 6%",
+    backgroundLight: "0 0% 100%",
+    backgroundDark: "240 10% 3.9%",
+    cardLight: "0 0% 100%",
+    cardDark: "240 10% 3.9%",
   },
   {
-    name: "Slate",
+    name: "Rose",
     colors: {
-      primary: "222.2 47.4% 11.2%",
-      secondary: "215 27.9% 16.9%",
-      accent: "210 40% 96.1%",
-      destructive: "0 84.2% 60.2%",
-    },
-    backgroundLight: "222 5% 98%",
-    backgroundDark: "222 10% 4%",
-    cardLight: "222 5% 96%",
-    cardDark: "222 10% 6%",
-  },
-  {
-    name: "Stone",
-    colors: {
-      primary: "22.2 21.4% 11.2%",
-      secondary: "60 3.7% 15.9%",
-      accent: "60 4.8% 95.9%",
-      destructive: "0 84.2% 60.2%",
-    },
-    backgroundLight: "22 5% 98%",
-    backgroundDark: "22 10% 4%",
-    cardLight: "22 5% 96%",
-    cardDark: "22 10% 6%",
-  },
-  {
-    name: "Red",
-    colors: {
-      primary: "0 72.2% 50.6%",
-      secondary: "0 47.4% 11.2%",
-      accent: "0 4.8% 95.9%",
-      destructive: "0 84.2% 60.2%",
-    },
-    backgroundLight: "0 5% 98%",
-    backgroundDark: "0 10% 4%",
-    cardLight: "0 5% 96%",
-    cardDark: "0 10% 6%",
-  },
-  {
-    name: "Orange",
-    colors: {
-      primary: "24.6 95% 53.1%",
-      secondary: "40 47.4% 11.2%",
-      accent: "20 4.8% 95.9%",
+      primary: "346.8 77.2% 49.8%",
+      secondary: "240 4.8% 95.9%",
+      "secondary-dark": "240 3.7% 15.9%",
+      accent: "240 4.8% 95.9%",
+      "accent-dark": "240 3.7% 15.9%",
       destructive: "0 84.2% 60.2%",
+      muted: "240 4.8% 95.9%",
+      "muted-dark": "240 3.7% 15.9%",
+      border: "240 5.9% 90%",
+      "border-dark": "240 3.7% 15.9%",
+      input: "240 5.9% 90%",
+      "input-dark": "240 3.7% 15.9%",
+      ring: "346.8 77.2% 49.8%"
     },
-    backgroundLight: "24 5% 98%",
-    backgroundDark: "24 10% 4%",
-    cardLight: "24 5% 96%",
-    cardDark: "24 10% 6%",
+    backgroundLight: "0 0% 100%",
+    backgroundDark: "20 14.3% 4.1%",
+    cardLight: "0 0% 100%",
+    cardDark: "24 9.8% 10%",
   },
   {
     name: "Blue",
     colors: {
       primary: "221.2 83.2% 53.3%",
-      secondary: "215 27.9% 16.9%",
+      secondary: "210 40% 96.1%",
+      "secondary-dark": "215 27.9% 16.9%",
       accent: "210 40% 96.1%",
+      "accent-dark": "215 27.9% 16.9%",
       destructive: "0 84.2% 60.2%",
+      muted: "210 40% 96.1%",
+      "muted-dark": "215 27.9% 16.9%",
+      border: "214.3 31.8% 91.4%",
+      "border-dark": "215 27.9% 16.9%",
+      input: "214.3 31.8% 91.4%",
+      "input-dark": "215 27.9% 16.9%",
+      ring: "221.2 83.2% 53.3%"
     },
-    backgroundLight: "221 5% 98%",
-    backgroundDark: "221 10% 4%",
-    cardLight: "221 5% 96%",
-    cardDark: "221 10% 6%",
-  },
+    backgroundLight: "0 0% 100%",
+    backgroundDark: "224 71.4% 4.1%",
+    cardLight: "0 0% 100%",
+    cardDark: "224 71.4% 4.1%",
+  }
 ];

src/types/index.d.ts

@@ -1,4 +1,8 @@
 interface ColorConfig {
+  primary: string;
+  secondary: string;
+  accent: string;
+  destructive: string;
   [key: string]: string;
 }