Add zinc as theming option

Author: thomask

src/constants/index.ts

@@ -18,7 +18,8 @@ export const COLORS = [
     "purple",
     "fuchsia",
     "pink",
-    "rose"
+    "rose",
+    "zinc"
 ] as const;
 
 export const DEFAULT_COLOR: ColorKeys = "blue";
@@ -57,7 +58,8 @@ export const BG_COLOR: Colors = {
         violet: "bg-violet-100",
         fuchsia: "bg-fuchsia-100",
         pink: "bg-pink-100",
-        rose: "bg-rose-100"
+        rose: "bg-rose-100",
+        zinc: "bg-zinc-100"
     },
     200: {
         blue: "bg-blue-200",
@@ -76,7 +78,8 @@ export const BG_COLOR: Colors = {
         violet: "bg-violet-200",
         fuchsia: "bg-fuchsia-200",
         pink: "bg-pink-200",
-        rose: "bg-rose-200"
+        rose: "bg-rose-200",
+        zinc: "bg-zinc-200"
     },
     500: {
         blue: "bg-blue-500",
@@ -95,7 +98,8 @@ export const BG_COLOR: Colors = {
         violet: "bg-violet-500",
         fuchsia: "bg-fuchsia-500",
         pink: "bg-pink-500",
-        rose: "bg-rose-500"
+        rose: "bg-rose-500",
+        zinc: "bg-zinc-500"
     },
     hover: {
         blue: "hover:bg-blue-600",
@@ -114,7 +118,8 @@ export const BG_COLOR: Colors = {
         violet: "hover:bg-violet-600",
         fuchsia: "hover:bg-fuchsia-600",
         pink: "hover:bg-pink-600",
-        rose: "hover:bg-rose-600"
+        rose: "hover:bg-rose-600",
+        zinc: "hover:bg-zinc-600"
     }
 };
 
@@ -136,7 +141,8 @@ export const TEXT_COLOR: Colors = {
         violet: "text-violet-500",
         fuchsia: "text-fuchsia-500",
         pink: "text-pink-500",
-        rose: "text-rose-500"
+        rose: "text-rose-500",
+        zinc: "text-zinc-500"
     },
     600: {
         blue: "text-blue-600 dark:text-blue-400 dark:hover:text-blue-400",
@@ -155,7 +161,8 @@ export const TEXT_COLOR: Colors = {
         violet: "text-violet-600 dark:text-violet-400 dark:hover:text-violet-400",
         fuchsia: "text-fuchsia-600 dark:text-fuchsia-400 dark:hover:text-fuchsia-400",
         pink: "text-pink-600 dark:text-pink-400 dark:hover:text-pink-400",
-        rose: "text-rose-600 dark:text-rose-400 dark:hover:text-rose-400"
+        rose: "text-rose-600 dark:text-rose-400 dark:hover:text-rose-400",
+        zinc: "text-zinc-600 dark:text-zinc-400 dark:hover:text-zinc-400"
     },
     hover: {
         blue: "hover:text-blue-700",
@@ -174,7 +181,8 @@ export const TEXT_COLOR: Colors = {
         violet: "hover:text-violet-700",
         fuchsia: "hover:text-fuchsia-700",
         pink: "hover:text-pink-700",
-        rose: "hover:text-rose-700"
+        rose: "hover:text-rose-700",
+        zinc: "hover:text-zinc-700"
     }
 };
 
@@ -196,7 +204,8 @@ export const BORDER_COLOR: Colors = {
         violet: "border-violet-500",
         fuchsia: "border-fuchsia-500",
         pink: "border-pink-500",
-        rose: "border-rose-500"
+        rose: "border-rose-500",
+        zinc: "border-zinc-500"
     },
     focus: {
         blue: "focus:border-blue-500",
@@ -215,7 +224,8 @@ export const BORDER_COLOR: Colors = {
         violet: "focus:border-violet-500",
         fuchsia: "focus:border-fuchsia-500",
         pink: "focus:border-pink-500",
-        rose: "focus:border-rose-500"
+        rose: "focus:border-rose-500",
+        zinc: "focus:border-zinc-500"
     }
 };
 
@@ -237,7 +247,8 @@ export const RING_COLOR: Colors = {
         violet: "focus:ring-violet-500",
         fuchsia: "focus:ring-fuchsia-500",
         pink: "focus:ring-pink-500",
-        rose: "focus:ring-rose-500"
+        rose: "focus:ring-rose-500",
+        zinc: "focus:ring-zinc-500"
     },
     "second-focus": {
         blue: "focus:ring-blue-500/20",
@@ -256,7 +267,8 @@ export const RING_COLOR: Colors = {
         violet: "focus:ring-violet-500/20",
         fuchsia: "focus:ring-fuchsia-500/20",
         pink: "focus:ring-pink-500/20",
-        rose: "focus:ring-rose-500/20"
+        rose: "focus:ring-rose-500/20",
+        zinc: "focus:ring-zinc-500/20"
     }
 };
 
@@ -278,6 +290,7 @@ export const BUTTON_COLOR: Colors = {
         violet: "focus:ring-violet-500/50 focus:bg-violet-100/50",
         fuchsia: "focus:ring-fuchsia-500/50 focus:bg-fuchsia-100/50",
         pink: "focus:ring-pink-500/50 focus:bg-pink-100/50",
-        rose: "focus:ring-rose-500/50 focus:bg-rose-100/50"
+        rose: "focus:ring-rose-500/50 focus:bg-rose-100/50",
+        zinc: "focus:ring-zinc-500/50 focus:bg-zinc-100/50"
     }
 };

tsconfig.json

@@ -20,7 +20,8 @@
         "skipLibCheck": true,
         "noEmit": true,
         "resolveJsonModule": true,
-        "isolatedModules": true
+        "isolatedModules": true,
+        "incremental": true
     },
     "include": ["src/**/*"],
     "exclude": ["node_modules"]