feat: add more bg-color

src/components/Configurator.vue

@@ -32,7 +32,10 @@
             <div
               :style="{ background: bgColor }"
               class="bg-color"
-              :class="{ active: bgColor === avatarOption.background.color }"
+              :class="{
+                active: bgColor === avatarOption.background.color,
+                transparent: bgColor === 'transparent',
+              }"
             ></div>
           </li>
         </ul>
@@ -210,8 +213,8 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
     .bg-color-list__item {
       position: relative;
       z-index: 1;
-      flex: 1;
-      padding: 0.6rem 0.5rem;
+      width: calc(100% / 7);
+      padding: 0.6rem 0;
       cursor: pointer;
       transition: transform 0.2s;
 
@@ -220,9 +223,27 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
         box-sizing: content-box;
         width: 1.3em;
         height: 1.3em;
+        margin: 0 auto;
         font-size: 16px;
         border-radius: 50%;
-        box-shadow: 0 0 0.1em 0.15em $color-configurator;
+        box-shadow: 0 0 0.05em 0.2em $color-configurator;
+
+        &.transparent {
+          background: #fff !important;
+
+          &::after {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            z-index: 1;
+            color: #ff4757;
+            font-weight: bold;
+            font-size: 1.8rem;
+            transform: translate(-50%, -50%) scale(0.5);
+            opacity: 1;
+            content: '\\';
+          }
+        }
 
         &::before {
           position: absolute;

src/utils/constant.ts

@@ -81,11 +81,15 @@ export const SETTINGS: Readonly<AvatarSettings> = {
     '#FFEBA4',
     '#506AF4',
     '#F48150',
+    '#48A99A',
+    '#C09FFF',
+    '#FD6F5D',
     'linear-gradient(45deg, #E3648C, #D97567)',
     'linear-gradient(62deg, #8EC5FC, #E0C3FC)',
     'linear-gradient(90deg, #ffecd2, #fcb69f)',
     'linear-gradient(120deg, #a1c4fd, #c2e9fb)',
     'linear-gradient(-135deg, #fccb90, #d57eeb)',
+    'transparent',
   ],
   skinColor: ['#F9C9B6', '#AC6651'],
   clothesColor: ['#9287FF', '#6BD9E9', '#FC909F', '#F4D150', '#77311D'],