From 42ed8cfc194b16705dd3d2141aa8ba89c96c4de1 Mon Sep 17 00:00:00 2001
From: hirakei1203 <hirano.keitaro.64x@gmail.com>
Date: Fri, 28 Oct 2022 22:11:26 +0900
Subject: [PATCH] add color classes

---
 src/components/Progress/Progress.vue                   |  4 ++--
 .../Progress/composables/useProgressClasses.ts         | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Progress/Progress.vue b/src/components/Progress/Progress.vue
index 3af26b4..9d4665a 100644
--- a/src/components/Progress/Progress.vue
+++ b/src/components/Progress/Progress.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
-    <div class="bg-blue-600 h-2.5 rounded-full" :class="wrapperClasses" style="width: 45%"></div>
+    <div class="h-2.5 rounded-full" :class="wrapperClasses" style="width: 45%"></div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -11,7 +11,7 @@ import { useProgressClasses } from './composables/useProgressClasses'
 const props = defineProps({
   color: {
     type: String, // 'dark' | 'blue' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple'
-    default: 'yellow',
+    default: 'pink',
   },
   label: {
     type: String,
diff --git a/src/components/Progress/composables/useProgressClasses.ts b/src/components/Progress/composables/useProgressClasses.ts
index a77e86c..d3f67d7 100644
--- a/src/components/Progress/composables/useProgressClasses.ts
+++ b/src/components/Progress/composables/useProgressClasses.ts
@@ -8,16 +8,16 @@ export type ProgressClassMap<T extends string> = { default: Record<T, string> }
 
 const progressColorClasses: ProgressClassMap<ProgressVariant> = {
   default: {
-    default: '',
-    blue: 'bg-blue-600',
-    alternative: '',
+    default: 'bg-blue-600 dark:bg-blue-600',
+    blue: 'bg-blue-600 dark:bg-blue-600',
+    alternative: 'dark:bg-gray-800',
     dark: 'bg-gray-600 dark:bg-gray-300',
-    light: '',
+    light: 'bg-white dark:bg-gray-800',
     green: 'bg-green-600 dark:bg-green-500',
     red: 'bg-red-600 dark:bg-red-500',
     yellow: 'bg-yellow-400',
     purple: 'bg-purple-600 dark:bg-purple-500',
-    pink: '',
+    pink: 'bg-pink-700 dark:bg-pink-600',
   },
 }