From 42f9d05d1d7298add322fb4c1e8d1c732975bc1c Mon Sep 17 00:00:00 2001
From: Mateo Wartelle <mateowartelle@gmail.com>
Date: Sun, 12 Nov 2023 07:44:12 -0600
Subject: [PATCH] feat(progress): add missing colors for Progress component

- set default cyan
---
 examples/progress/progress.colors.tsx | 36 ++++++++++++++++++++++++---
 src/components/Progress/Progress.tsx  |  7 ++++--
 src/components/Progress/theme.ts      |  7 +++++-
 3 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/examples/progress/progress.colors.tsx b/examples/progress/progress.colors.tsx
index 20f85cabf..1e87a057c 100644
--- a/examples/progress/progress.colors.tsx
+++ b/examples/progress/progress.colors.tsx
@@ -11,7 +11,7 @@ function Component() {
     <div className="flex flex-col gap-2">
       <div className="text-base font-medium">Dark</div>
       <Progress progress={45} color="dark" />
-      <div className="text-base font-medium text-cyan-700">Blue</div>
+      <div className="text-base font-medium text-blue-700">Blue</div>
       <Progress progress={45} color="blue" />
       <div className="text-base font-medium text-red-700">Red</div>
       <Progress progress={45} color="red" />
@@ -23,6 +23,16 @@ function Component() {
       <Progress progress={45} color="indigo" />
       <div className="text-base font-medium text-purple-700">Purple</div>
       <Progress progress={45} color="purple" />
+      <div className="text-base font-medium text-cyan-700">Cyan</div>
+      <Progress progress={45} color="cyan" />
+      <div className="text-base font-medium text-gray-700">Gray</div>
+      <Progress progress={45} color="gray" />
+      <div className="text-base font-medium text-lime-700">Lime</div>
+      <Progress progress={45} color="lime" />
+      <div className="text-base font-medium text-pink-700">Pink</div>
+      <Progress progress={45} color="pink" />
+      <div className="text-base font-medium text-teal-700">Teal</div>
+      <Progress progress={45} color="teal" />
     </div>
   );
 }
@@ -36,7 +46,7 @@ function Component() {
     <div className="flex flex-col gap-2">
       <div className="text-base font-medium">Dark</div>
       <Progress progress={45} color="dark" />
-      <div className="text-base font-medium text-cyan-700">Blue</div>
+      <div className="text-base font-medium text-blue-700">Blue</div>
       <Progress progress={45} color="blue" />
       <div className="text-base font-medium text-red-700">Red</div>
       <Progress progress={45} color="red" />
@@ -48,6 +58,16 @@ function Component() {
       <Progress progress={45} color="indigo" />
       <div className="text-base font-medium text-purple-700">Purple</div>
       <Progress progress={45} color="purple" />
+      <div className="text-base font-medium text-cyan-700">Cyan</div>
+      <Progress progress={45} color="cyan" />
+      <div className="text-base font-medium text-gray-700">Gray</div>
+      <Progress progress={45} color="gray" />
+      <div className="text-base font-medium text-lime-700">Lime</div>
+      <Progress progress={45} color="lime" />
+      <div className="text-base font-medium text-pink-700">Pink</div>
+      <Progress progress={45} color="pink" />
+      <div className="text-base font-medium text-teal-700">Teal</div>
+      <Progress progress={45} color="teal" />
     </div>
   );
 }
@@ -58,7 +78,7 @@ function Component() {
     <div className="flex flex-col gap-2">
       <div className="text-base font-medium">Dark</div>
       <Progress progress={45} color="dark" />
-      <div className="text-base font-medium text-cyan-700">Blue</div>
+      <div className="text-base font-medium text-blue-700">Blue</div>
       <Progress progress={45} color="blue" />
       <div className="text-base font-medium text-red-700">Red</div>
       <Progress progress={45} color="red" />
@@ -70,6 +90,16 @@ function Component() {
       <Progress progress={45} color="indigo" />
       <div className="text-base font-medium text-purple-700">Purple</div>
       <Progress progress={45} color="purple" />
+      <div className="text-base font-medium text-cyan-700">Cyan</div>
+      <Progress progress={45} color="cyan" />
+      <div className="text-base font-medium text-gray-700">Gray</div>
+      <Progress progress={45} color="gray" />
+      <div className="text-base font-medium text-lime-700">Lime</div>
+      <Progress progress={45} color="lime" />
+      <div className="text-base font-medium text-pink-700">Pink</div>
+      <Progress progress={45} color="pink" />
+      <div className="text-base font-medium text-teal-700">Teal</div>
+      <Progress progress={45} color="teal" />
     </div>
   );
 }
diff --git a/src/components/Progress/Progress.tsx b/src/components/Progress/Progress.tsx
index d91cc351e..b1d49ae40 100644
--- a/src/components/Progress/Progress.tsx
+++ b/src/components/Progress/Progress.tsx
@@ -15,7 +15,10 @@ export interface FlowbiteProgressTheme {
 }
 
 export interface ProgressColor
-  extends Pick<FlowbiteColors, 'dark' | 'blue' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple'> {
+  extends Pick<
+    FlowbiteColors,
+    'dark' | 'blue' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple' | 'cyan' | 'gray' | 'lime' | 'pink' | 'teal'
+  > {
   [key: string]: string;
 }
 
@@ -36,7 +39,7 @@ export interface ProgressProps extends ComponentProps<'div'> {
 
 export const Progress: FC<ProgressProps> = ({
   className,
-  color = 'blue',
+  color = 'cyan',
   labelProgress = false,
   labelText = false,
   progress,
diff --git a/src/components/Progress/theme.ts b/src/components/Progress/theme.ts
index b29e97bf7..12cf460ef 100644
--- a/src/components/Progress/theme.ts
+++ b/src/components/Progress/theme.ts
@@ -6,12 +6,17 @@ export const progressTheme: FlowbiteProgressTheme = {
   bar: 'rounded-full text-center font-medium leading-none text-cyan-300 dark:text-cyan-100 space-x-2',
   color: {
     dark: 'bg-gray-600 dark:bg-gray-300',
-    blue: 'bg-cyan-600',
+    blue: 'bg-blue-600',
     red: 'bg-red-600 dark:bg-red-500',
     green: 'bg-green-600 dark:bg-green-500',
     yellow: 'bg-yellow-400',
     indigo: 'bg-indigo-600 dark:bg-indigo-500',
     purple: 'bg-purple-600 dark:bg-purple-500',
+    cyan: 'bg-cyan-600',
+    gray: 'bg-gray-500',
+    lime: 'bg-lime-600',
+    pink: 'bg-pink-500',
+    teal: 'bg-teal-600',
   },
   size: {
     sm: 'h-1.5',