From cdc0654597c0c7e70c387dd05a5f0ddd1c2a7177 Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Mon, 19 Feb 2024 18:07:42 +0100
Subject: [PATCH] feat(ProgressCircle): add new colors

---
 .../progress-circle/progress-circle.doc.mdx   |  6 +++++
 .../progress-circle.stories.ts                | 27 +++++++++++++++++++
 .../progress-circle/progress-circle.types.ts  | 10 ++++++-
 .../progress-circle.variants.ts               |  3 +++
 4 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/src/plugins/components/progress-circle/progress-circle.doc.mdx b/src/plugins/components/progress-circle/progress-circle.doc.mdx
index e6e44ef..fd6ee62 100644
--- a/src/plugins/components/progress-circle/progress-circle.doc.mdx
+++ b/src/plugins/components/progress-circle/progress-circle.doc.mdx
@@ -48,6 +48,12 @@ Progress circles can have different colors.
   <Story of={ProgressCircleStories.Warning} />
   <br />
   <Story of={ProgressCircleStories.Danger} />
+  <br />
+  <Story of={ProgressCircleStories.Light} />
+  <br />
+  <Story of={ProgressCircleStories.Dark} />
+  <br />
+  <Story of={ProgressCircleStories.Black} />
 </div>
 
 <br />
diff --git a/src/plugins/components/progress-circle/progress-circle.stories.ts b/src/plugins/components/progress-circle/progress-circle.stories.ts
index fc2034d..54d7059 100644
--- a/src/plugins/components/progress-circle/progress-circle.stories.ts
+++ b/src/plugins/components/progress-circle/progress-circle.stories.ts
@@ -130,4 +130,31 @@ export const Danger: Story = {
     value: 72,
   },
 }
+
+export const Light: Story = {
+  name: 'Color: light',
+  args: {
+    color: 'light',
+    size: 55,
+    value: 72,
+  },
+}
+
+export const Dark: Story = {
+  name: 'Color: dark',
+  args: {
+    color: 'dark',
+    size: 55,
+    value: 72,
+  },
+}
+
+export const Black: Story = {
+  name: 'Color: black',
+  args: {
+    color: 'black',
+    size: 55,
+    value: 72,
+  },
+}
 // #endregion
diff --git a/src/plugins/components/progress-circle/progress-circle.types.ts b/src/plugins/components/progress-circle/progress-circle.types.ts
index e9184fa..eeadf2d 100644
--- a/src/plugins/components/progress-circle/progress-circle.types.ts
+++ b/src/plugins/components/progress-circle/progress-circle.types.ts
@@ -5,7 +5,15 @@ export interface ProgressCircleProps extends Record<string, unknown> {
   max?: number
   size?: number
   thickness?: number
-  color?: 'primary' | 'info' | 'success' | 'warning' | 'danger'
+  color?:
+    | 'primary'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'light'
+    | 'dark'
+    | 'black'
   classes?: {
     wrapper?: string | string[]
     track?: string | string[]
diff --git a/src/plugins/components/progress-circle/progress-circle.variants.ts b/src/plugins/components/progress-circle/progress-circle.variants.ts
index 9e1260c..3cbdadf 100644
--- a/src/plugins/components/progress-circle/progress-circle.variants.ts
+++ b/src/plugins/components/progress-circle/progress-circle.variants.ts
@@ -1,6 +1,9 @@
 import type { ProgressCircleVariant } from './progress-circle.types'
 
 export const color = {
+  light: 'text-muted-500 dark:text-muted-400',
+  dark: 'text-muted-900 dark:text-muted-100',
+  black: 'text-black dark:text-white',
   primary: 'text-primary-500',
   info: 'text-info-500',
   success: 'text-success-500',