fix(nc-gui): base icon predefined color lightness issue

packages/nc-gui/components/general/BaseIconColorPicker.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import tinycolor from 'tinycolor2'
 
-import { NcProjectType } from '#imports'
+import { NcProjectType, baseIconColors } from '#imports'
 
 const props = withDefaults(
   defineProps<{

packages/nc-gui/components/general/ProjectIcon.vue

@@ -1,24 +1,28 @@
 <script lang="ts" setup>
 import tinycolor from 'tinycolor2'
-const { hoverable, color } = defineProps<{
+import { baseIconColors } from '#imports'
-  type?: string
+
-  hoverable?: boolean
+const props = withDefaults(
-  color?: string
+  defineProps<{
-}>()
+    type?: string
+    hoverable?: boolean
+    color?: string
+  }>(),
+  {
+    color: baseIconColors[0],
+  },
+)
+const { color } = toRefs(props)
 
 const iconColor = computed(() => {
-  return color
+  return color.value && tinycolor(color.value).isValid()
     ? {
-        tint: tinycolor(color || '#36BFFF')
+        tint: baseIconColors.includes(color.value) ? color.value : tinycolor(color.value).lighten(10).toHexString(),
-          .lighten(10)
+        shade: tinycolor(color.value).darken(40).toHexString(),
-          .toHexString(),
-        shade: tinycolor(color || '#36BFFF')
-          .darken(40)
-          .toHexString(),
       }
     : {
-        tint: '#36BFFF',
+        tint: baseIconColors[0],
-        shade: '#142966',
+        shade: tinycolor(baseIconColors[0]).darken(40).toHexString(),
       }
 })
 </script>