feat(Progress): add new colors

shuriken-ui · Feb 19, 2024 · ec19d3c · ec19d3c
1 parent cdc0654
commit ec19d3c
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 2 deletions.
diff --git a/src/plugins/components/progress/index.ts b/src/plugins/components/progress/index.ts
@@ -99,6 +99,21 @@ export default plugin(({ addComponents, theme }) => {
           [`@apply bg-${config.bar.color.danger}`]: {},
         },
       },
+      '&.nui-progress-light': {
+        '.nui-progress-bar': {
+          [`@apply ${config.bar.color.light}`]: {},
+        },
+      },
+      '&.nui-progress-dark': {
+        '.nui-progress-bar': {
+          [`@apply ${config.bar.color.dark}`]: {},
+        },
+      },
+      '&.nui-progress-black': {
+        '.nui-progress-bar': {
+          [`@apply ${config.bar.color.black}`]: {},
+        },
+      },
     },
   })
 }, config)
diff --git a/src/plugins/components/progress/progress.config.ts b/src/plugins/components/progress/progress.config.ts
@@ -15,6 +15,9 @@ export const defaultConfig = {
       success: 'success-500',
       warning: 'warning-500',
       danger: 'danger-500',
+      light: 'bg-muted-500 dark:bg-muted-400',
+      dark: 'bg-muted-900 dark:bg-muted-100',
+      black: 'bg-black dark:bg-white',
     },
     transition: {
       property: 'all',

diff --git a/src/plugins/components/progress/progress.doc.mdx b/src/plugins/components/progress/progress.doc.mdx
@@ -50,6 +50,12 @@ Progress bars can have different colors.
   <Story of={ProgressStories.ColorWarning} />
   <br />
   <Story of={ProgressStories.ColorDanger} />
+  <br />
+  <Story of={ProgressStories.ColorLight} />
+  <br />
+  <Story of={ProgressStories.ColorDark} />
+  <br />
+  <Story of={ProgressStories.ColorBlack} />
 </div>
 
 <br />

diff --git a/src/plugins/components/progress/progress.stories.ts b/src/plugins/components/progress/progress.stories.ts
@@ -12,7 +12,17 @@ const meta = {
   argTypes: {
     color: {
       control: { type: 'select' },
-      options: ['primary', 'info', 'success', 'warning', 'danger', 'none'],
+      options: [
+        'primary',
+        'info',
+        'success',
+        'warning',
+        'danger',
+        'light',
+        'dark',
+        'black',
+        'none',
+      ],
       defaultValue: 'primary',
     },
     contrast: {
@@ -163,6 +173,39 @@ export const ColorDanger: Story = {
     style: 'max-width: 320px; min-width: 320px;',
   },
 }
+
+export const ColorLight: Story = {
+  name: 'Color: light',
+  args: {
+    color: 'light',
+    size: 'sm',
+    rounded: 'full',
+    value: 72,
+    style: 'max-width: 320px; min-width: 320px;',
+  },
+}
+
+export const ColorDark: Story = {
+  name: 'Color: dark',
+  args: {
+    color: 'dark',
+    size: 'sm',
+    rounded: 'full',
+    value: 72,
+    style: 'max-width: 320px; min-width: 320px;',
+  },
+}
+
+export const ColorBlack: Story = {
+  name: 'Color: black',
+  args: {
+    color: 'black',
+    size: 'sm',
+    rounded: 'full',
+    value: 72,
+    style: 'max-width: 320px; min-width: 320px;',
+  },
+}
 // #endregion
 
 // #region State: indetermintate

diff --git a/src/plugins/components/progress/progress.types.ts b/src/plugins/components/progress/progress.types.ts
@@ -1,7 +1,15 @@
 import type { PropertyVariant } from '~/types/utils'
 
 export interface ProgressProps extends Record<string, unknown> {
-  color?: 'primary' | 'info' | 'success' | 'warning' | 'danger'
+  color?:
+    | 'primary'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'light'
+    | 'dark'
+    | 'black'
   contrast?: 'default' | 'contrast'
   rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'

diff --git a/src/plugins/components/progress/progress.variants.ts b/src/plugins/components/progress/progress.variants.ts
@@ -6,6 +6,9 @@ export const color = {
   success: 'nui-progress-success',
   warning: 'nui-progress-warning',
   danger: 'nui-progress-danger',
+  light: 'nui-progress-light',
+  dark: 'nui-progress-dark',
+  black: 'nui-progress-black',
 } as const satisfies ProgressVariant<'color'>
 
 export const contrast = {