feat(ProgressCircle): add new colors

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 />

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

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[]

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',