feat: support color pick

src/assets/widgets/clothes/collared.svg

@@ -9,7 +9,7 @@
     <title>clothes - collared</title>
     <path
       d="M142.771 67.5777C142.771 67.5779 142.771 67.5779 144 66L142.771 67.5779L144.493 68.9188L145.679 67.0874L145.679 67.087L145.681 67.0841L145.69 67.0697L145.731 67.0072C145.742 66.9904 145.755 66.971 145.769 66.9491C145.803 66.8975 145.847 66.8318 145.9 66.7529C146.05 66.5278 146.275 66.1947 146.57 65.7695C147.158 64.919 148.023 63.7016 149.118 62.2463C151.312 59.3316 154.416 55.482 158.071 51.7183C161.737 47.9446 165.898 44.3176 170.198 41.7935C174.514 39.2597 178.777 37.9491 182.733 38.4825C225.171 44.2046 256.402 63.002 276.674 91.0006H3.37453C19.6742 61.6588 42.8579 42.9825 80.4446 34.4127C82.0464 34.0474 84.2242 34.1581 86.9471 34.7915C89.6421 35.4183 92.7146 36.5194 96.0282 37.9759C102.655 40.8887 110.052 45.1363 117.004 49.5364C123.945 53.9299 130.39 58.4425 135.104 61.8597C137.459 63.5674 139.379 64.9995 140.709 66.0036C141.374 66.5056 141.891 66.9005 142.241 67.1693C142.416 67.3037 142.55 67.4065 142.639 67.4754L142.739 67.553L142.764 67.5722L142.77 67.5767L142.771 67.5777Z"
-      fill="#9287FF"
+      fill="$fillColor"
       stroke="black"
       stroke-width="4"
     />
@@ -54,4 +54,4 @@
       stroke-linejoin="round"
     />
   </g>
-</svg>
\ No newline at end of file
+</svg>

src/assets/widgets/clothes/crew.svg

@@ -9,7 +9,7 @@
     <title>clothes - crew</title>
     <path
       d="M182.552 38.4488L182.692 38.4809L182.836 38.4927C228.961 42.2969 256.62 62.7848 276.694 90.9997H3.37453C19.6742 61.6579 42.8579 42.9816 80.4446 34.4117C96.4579 30.7606 115.113 28.9394 137 28.9395C146.456 28.9395 153.814 30.3819 160.796 32.2853C163.383 32.9904 165.983 33.7805 168.643 34.5887C173.045 35.9265 177.611 37.3141 182.552 38.4488Z"
-      fill="#9287FF"
+      fill="$fillColor"
       stroke="black"
       stroke-width="4"
     />
@@ -20,4 +20,4 @@
       stroke-width="4"
     />
   </g>
-</svg>
\ No newline at end of file
+</svg>

src/assets/widgets/clothes/open.svg

@@ -9,9 +9,9 @@
     <title>clothes - open</title>
     <path
       d="M276.366 90.8628H3.45626C3.49074 90.7926 3.52546 90.7219 3.5604 90.6507C8.10518 81.395 16.4899 64.319 27.4025 49.0413C33.5961 40.3702 40.5303 32.3872 47.9416 26.7719C55.3538 21.1558 63.0614 18.0405 70.8916 18.7256C85.946 20.0429 99.3549 28.2854 112.817 36.5604C114.092 37.3444 115.368 38.1288 116.646 38.9076C131.131 47.7349 146.005 55.9312 162.365 52.3445C167.899 51.1311 171.629 48.5345 173.976 45.1797C176.29 41.8727 177.122 38.0292 177.266 34.5166C177.41 30.9989 176.871 27.6738 176.311 25.2562C176.049 24.1257 175.779 23.1785 175.564 22.4839C179.189 18.8351 183.027 16.71 186.989 15.7533C191.284 14.7164 195.876 15.0158 200.707 16.4448C210.437 19.3229 220.847 26.6969 231.007 36.1789C249.621 53.5516 266.7 77.3231 276.366 90.8628Z"
-      fill="#9287FF"
+      fill="$fillColor"
       stroke="black"
       stroke-width="4.27431"
     />
   </g>
-</svg>
\ No newline at end of file
+</svg>

src/assets/widgets/tops/danny.svg

@@ -9,9 +9,9 @@
     <title>tops - danny</title>
     <path
       d="M123.788 17.4887L123.864 17.4969L123.941 17.4991C150.61 18.2835 171.342 28.8969 186.013 41.8493C200.069 54.2583 208.463 68.7231 211.2 78.5817C207.14 80.8991 200.185 82.8931 191.315 84.5285C181.639 86.3123 170.022 87.615 158.168 88.5436C134.462 90.4007 109.978 90.7491 98.5428 90.5005L92.4699 90.3685L97.2764 94.0826C99.774 96.0125 103.099 97.3557 106.615 98.3003C110.156 99.2517 114.034 99.8354 117.746 100.167C121.57 100.509 125.299 100.589 128.387 100.51C117.8 108.672 104.325 114.948 91.0384 119.6C75.6922 124.973 60.7685 128.12 51.2093 129.521L49.0601 129.836L49.551 131.952C52.8984 146.381 59.0518 171.603 63.179 188.519C65.01 196.025 66.4422 201.895 67.0537 204.463C68.1379 209.017 71.5518 215.508 75.4484 221.491C79.0412 227.008 83.2329 232.38 86.7703 235.687L78.9322 267.5H49.3714C57.7091 254.787 59.469 240.097 57.7689 224.517C55.9286 207.653 50.0074 189.513 43.7659 171.35C43.1514 169.562 42.5339 167.774 41.9165 165.986C36.2326 149.527 30.5644 133.113 27.4936 117.382C24.0922 99.9582 23.9407 83.6514 30.3264 69.3137C40.6653 46.0999 58.9929 32.6198 77.3255 25.1911C95.701 17.745 113.945 16.4399 123.788 17.4887Z"
-      fill="white"
+      fill="$fillColor"
       stroke="#171921"
       stroke-width="4"
     />
   </g>
-</svg>
\ No newline at end of file
+</svg>

src/assets/widgets/tops/fonze.svg

@@ -9,23 +9,23 @@
     <title>tops - fonze</title>
     <path
       d="M210.177 51.3965C201.855 91.2936 103.499 96.8962 83.6772 96.8962C31.6548 102.823 56.6248 165.262 66.1772 196.396C58.6772 197.396 59.6772 206.396 30.6772 134.896C7.47724 77.6964 73.1831 42.8337 121.999 30.9995C170.815 19.1653 189.499 2.50195 189.499 2.50195C210.177 11 215.116 27.7185 210.177 51.3965Z"
-      fill="black"
+      fill="$fillColor"
     />
     <path
       d="M205.134 124.947L189.316 71.5069L199.354 62.3644C210.109 99.4523 210.601 120.988 205.134 124.947Z"
-      fill="black"
+      fill="$fillColor"
     />
     <path
       d="M80 170C74.4 142.8 60.3333 147.667 51 149L41 105L81.5844 96.5056C82.3363 96.2656 83.1408 96.0955 84 96L81.5844 96.5056C63.4332 102.299 75.9565 148.796 91 168L80 170Z"
-      fill="black"
+      fill="$fillColor"
     />
     <path
       d="M24.9887 67.3632C33.8341 62.9091 44.2805 65.4873 48.3981 67.3331L36.6273 82.2134C39.6625 77.3568 30.1329 70.2897 24.9887 67.3632Z"
-      fill="black"
+      fill="$fillColor"
     />
     <path
       d="M10 84.4996C21.6 77.6996 32.8333 79.9996 37 81.9996L32.5 97.5C31.3 89.1 17 85.3331 10 84.4996Z"
-      fill="black"
+      fill="$fillColor"
     />
   </g>
-</svg>
\ No newline at end of file
+</svg>

src/assets/widgets/tops/funny.svg

@@ -23,4 +23,4 @@
       stroke-width="4"
     />
   </g>
-</svg>
\ No newline at end of file
+</svg>

src/assets/widgets/tops/pixie.svg

@@ -9,7 +9,7 @@
     <title>tops - pixie</title>
     <path
       d="M121.837 88.8195C121.051 87.0776 121.051 87.0779 121.05 87.0783L121.047 87.0794L121.04 87.0828L121.015 87.0942C120.994 87.1038 120.964 87.1177 120.925 87.1357C120.89 87.1518 120.848 87.1714 120.799 87.1943C120.74 87.2223 120.67 87.2553 120.591 87.2932C120.301 87.4313 119.882 87.6353 119.352 87.9045C118.291 88.4426 116.782 89.2418 114.972 90.2948C111.356 92.3984 106.515 95.527 101.628 99.626C91.9116 107.776 81.7052 120.03 81.0904 135.926C80.8259 142.765 79.9706 175.806 80.1619 188.433C80.323 199.065 85.8253 210.481 93.4581 221.008C100.109 230.18 108.508 238.857 116.832 246.008C79.0664 247.501 50.4555 242.546 31.1209 237.121C21.038 234.292 13.4742 231.334 8.44733 229.094C6.46024 228.208 4.86951 227.434 3.67627 226.825C12.7707 220.141 20.3578 208.682 25.3638 191.675C30.8537 173.024 33.288 147.554 31.1521 113.963C29.2166 83.5247 44.0087 57.8092 66.3601 39.629C88.7347 21.4301 118.55 10.9109 146.238 10.9109C161.221 10.9109 173.377 13.8448 183.177 20.9616C192.98 28.081 200.668 39.5619 206.363 57.1322L206.758 58.3516L208.036 58.4485C220.412 59.3865 229.115 64.4881 235.532 72.6621C242.017 80.924 246.24 92.4216 249.336 106.232C251.376 115.332 249.389 124.311 247.001 134.651L246.89 135.133C244.553 145.25 241.952 156.505 243.096 169.666C244.126 181.51 248.853 193.135 252.782 202.074C253.287 203.222 253.776 204.321 254.242 205.368C255.617 208.455 256.793 211.096 257.586 213.253C258.118 214.698 258.425 215.79 258.523 216.566C258.573 216.963 258.555 217.168 258.542 217.254C258.097 217.665 257.273 218.12 255.957 218.522C254.588 218.94 252.864 219.248 250.882 219.442C246.921 219.828 242.138 219.738 237.544 219.296C232.942 218.853 228.638 218.067 225.623 217.108C224.092 216.622 223.033 216.134 222.436 215.711C222.345 215.646 222.275 215.591 222.222 215.546C222.594 214.259 223.132 212.723 223.753 210.949C226.947 201.824 232.348 186.398 228.855 166.08C226.766 153.924 221.189 132.457 216.162 114.11C213.643 104.919 211.255 96.4828 209.496 90.3444C208.616 87.275 207.894 84.7798 207.391 83.0515C207.14 82.1874 206.944 81.515 206.81 81.0584L206.658 80.5384L206.619 80.4055L206.609 80.3717L206.607 80.3632L206.606 80.361C206.606 80.3605 206.606 80.3602 204.772 80.8993L206.606 80.3602L205.677 77.2011L203.395 79.5745L203.395 79.5751L203.391 79.579L203.372 79.5991C203.353 79.6178 203.325 79.6471 203.286 79.6867C203.208 79.7659 203.088 79.8861 202.928 80.0445C202.607 80.3612 202.123 80.8304 201.482 81.4293C200.199 82.6271 198.286 84.343 195.784 86.3943C190.779 90.4982 183.428 95.9376 174.067 101.257C156.25 111.382 131.216 121.037 101.246 120.29C110.86 111.359 116.392 104.018 119.562 98.7007C121.329 95.736 122.36 93.4028 122.955 91.7777C123.252 90.9654 123.44 90.3309 123.555 89.8839C123.613 89.6605 123.653 89.484 123.68 89.3558C123.693 89.2917 123.703 89.2397 123.711 89.1998C123.714 89.1799 123.717 89.1631 123.72 89.1493L123.723 89.1309L123.724 89.1235L123.724 89.1202C123.725 89.1187 123.725 89.1172 121.837 88.8195ZM121.837 88.8195L121.051 87.0776L124.276 85.6229L123.725 89.1172L121.837 88.8195ZM222.068 215.388C222.071 215.388 222.082 215.402 222.097 215.428C222.073 215.401 222.066 215.388 222.068 215.388Z"
-      fill="#d2eff3"
+      fill="$fillColor"
       stroke="black"
       stroke-width="3.82184"
     />
@@ -19,4 +19,4 @@
       stroke-width="4"
     />
   </g>
-</svg>
\ No newline at end of file
+</svg>

src/assets/widgets/tops/punk.svg

@@ -14,11 +14,11 @@
     />
     <path
       d="M85.7923 14.7636C85.7923 14.7636 91.5301 10.802 115.746 4.70097C139.963 -1.40007 148.792 0.983287 148.792 0.983287L160.581 73.815C160.581 73.815 152.542 73.6416 132.548 78.0085C112.555 82.3754 102.986 87.6748 102.986 87.6748L85.7923 14.7636Z"
-      fill="#171921"
+      fill="$fillColor"
     />
     <path
       d="M48.9855 89.6758C42.1855 48.0758 72.3188 21.5091 85.9855 14.1758L102.985 87.6758C83.7855 48.0758 57.6521 72.5091 48.9855 89.6758Z"
-      fill="#171921"
+      fill="$fillColor"
     />
     <path
       opacity="0.35"
@@ -26,4 +26,4 @@
       fill="#717376"
     />
   </g>
-</svg>
\ No newline at end of file
+</svg>

src/assets/widgets/tops/wave.svg

@@ -9,9 +9,9 @@
     <title>tops - wave</title>
     <path
       d="M209.76 336.932C209.271 336.902 208.865 336.872 208.544 336.847C202.393 327.458 196.789 311.969 192.447 296.059C188.226 280.589 185.261 264.968 184.147 254.649C221.22 243.931 244.458 205.667 238.871 166.189C238.864 166.117 238.856 166.067 238.856 166.066C238.848 166.006 238.837 165.938 238.825 165.867C238.802 165.724 238.768 165.532 238.726 165.3C238.641 164.832 238.516 164.172 238.353 163.346C238.028 161.693 237.552 159.358 236.942 156.532C235.722 150.88 233.967 143.249 231.825 135.155C229.685 127.065 227.152 118.485 224.372 110.945C221.613 103.46 218.541 96.8015 215.264 92.7056L214.967 92.3351L214.532 92.1463C212.6 91.3081 210.593 90.3741 208.499 89.3991C198.568 84.775 186.659 79.2299 171.235 78.6199C152.46 77.8774 128.684 84.3957 96.5441 107.706L94.5214 109.173L96.467 110.74C112.393 123.574 115.836 140.598 115.1 155.048C114.539 166.077 111.551 175.459 109.865 180.149C108.704 178.452 107.964 176.319 107.408 173.814C107.023 172.083 106.743 170.258 106.449 168.347L106.403 168.045C106.096 166.051 105.769 163.97 105.292 161.961C104.341 157.95 102.732 153.941 99.1602 151.102C95.5807 148.257 90.3641 146.848 82.7671 147.272L80.5398 147.396L81.0046 149.578L92.3634 202.891L92.3824 202.98L92.41 203.068C96.4679 215.93 103.426 227.078 112.323 235.88C112.399 236.007 112.509 236.193 112.65 236.434C112.939 236.928 113.356 237.653 113.861 238.563C114.87 240.384 116.229 242.941 117.621 245.886C120.435 251.835 123.282 259.138 123.83 265.102C124.386 271.154 122.865 278.962 121.123 285.412C120.26 288.605 119.361 291.406 118.677 293.407C118.535 293.824 118.402 294.206 118.281 294.549C113.249 292.144 108.754 292.323 104.902 294.565C100.738 296.989 97.6892 301.625 95.4191 306.781C91.2706 316.202 89.2756 328.42 88.3551 336.002C63.4846 330.298 44.281 324.507 31.2149 320.107C24.5012 317.846 19.408 315.953 15.9993 314.627C14.2949 313.964 13.0117 313.443 12.1575 313.089C11.9454 313.002 11.7598 312.924 11.6007 312.857C11.4477 312.466 11.2377 311.916 10.9828 311.219C10.4158 309.667 9.62676 307.384 8.74853 304.479C6.99149 298.667 4.88057 290.38 3.4734 280.502C0.656265 260.725 0.676883 234.696 11.8698 209.384C13.679 205.292 15.94 201.089 18.3903 196.533C27.8582 178.931 40.1551 156.07 40.1551 114.084C40.1551 83.4931 55.0029 57.7305 76.8623 39.5692C98.7415 21.3915 127.56 10.9109 155.237 10.9109C170.368 10.9109 182.533 12.6444 192.311 18.5511C202.028 24.4212 209.679 34.5978 215.362 52.1322C215.94 53.9168 217.851 55.0074 219.719 54.4015C231.034 50.7304 248.191 54.4361 262.673 63.8904C277.091 73.3032 288.289 88.0455 288.289 105.814C288.289 121.24 285.647 131.664 283.071 141.815L283.071 141.815C279.952 154.104 276.94 165.974 279.065 185.313C279.774 191.762 281.216 196.336 283.231 200.128C285.213 203.859 287.712 206.747 290.345 209.792L290.405 209.861C296.679 217.113 299.534 223.079 300.455 228.327C301.375 233.562 300.412 238.31 298.623 243.237C297.723 245.712 296.629 248.197 295.47 250.815L295.37 251.04C294.249 253.573 293.074 256.225 292.019 259.016C289.836 264.787 288.133 271.223 288.302 278.851C288.446 285.326 289.594 289.764 291.311 293.122C293.008 296.442 295.199 298.565 297.111 300.417L297.162 300.466C298.905 302.155 300.355 303.577 301.428 305.57C302.387 307.351 303.098 309.702 303.217 313.232C279.208 327.511 255.445 333.413 237.601 335.734C228.565 336.91 221.057 337.166 215.818 337.129C213.199 337.11 211.149 337.019 209.76 336.932Z"
-      fill="#FC909F"
+      fill="$fillColor"
       stroke="black"
       stroke-width="3.82184"
     />
   </g>
-</svg>
\ No newline at end of file
+</svg>

src/components/Configurator.vue

@@ -22,11 +22,11 @@
       </SectionWrapper>
 
       <SectionWrapper :title="t('label.backgroundColor')">
-        <ul class="bg-color-list">
+        <ul class="color-list">
           <li
             v-for="bgColor in SETTINGS.backgroundColor"
             :key="bgColor"
-            class="bg-color-list__item"
+            class="color-list__item"
             @click="switchBgColor(bgColor)"
           >
             <div
@@ -57,8 +57,28 @@
             }"
             @click="switchWidget(s.widgetType, it.widgetShape)"
             v-html="it.svgRaw"
-          ></li>
+          />
         </ul>
+
+        <details
+          v-if="
+            s.widgetType === WidgetType.Tops ||
+            s.widgetType === WidgetType.Clothes
+          "
+          class="color-picker"
+        >
+          <summary class="color">颜色</summary>
+          <ul class="color-list">
+            <li
+              v-for="fillColor in SETTINGS.commonColors"
+              :key="fillColor"
+              class="color-list__item"
+              @click="setWidgetColor(s.widgetType, fillColor)"
+            >
+              <div :style="{ background: fillColor }" class="bg-color" />
+            </li>
+          </ul>
+        </details>
       </SectionWrapper>
     </div>
   </PerfectScrollbar>
@@ -70,9 +90,14 @@ import { useI18n } from 'vue-i18n'
 
 import PerfectScrollbar from '@/components/PerfectScrollbar.vue'
 import SectionWrapper from '@/components/SectionWrapper.vue'
-import { type WidgetShape, type WrapperShape, WidgetType } from '@/enums'
+import {
+  type WidgetShape,
+  type WrapperShape,
+  BeardShape,
+  WidgetType,
+} from '@/enums'
 import { useAvatarOption } from '@/hooks'
-import { SETTINGS } from '@/utils/constant'
+import { AVATAR_LAYER, SETTINGS } from '@/utils/constant'
 import { previewData } from '@/utils/dynamic-data'
 
 const { t } = useI18n()
@@ -156,6 +181,24 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
         [widgetType]: {
           ...avatarOption.value.widgets?.[widgetType],
           shape: widgetShape,
+          ...(widgetShape === BeardShape.Scruff
+            ? { zIndex: AVATAR_LAYER['mouth'].zIndex - 1 }
+            : undefined),
+        },
+      },
+    })
+  }
+}
+
+function setWidgetColor(widgetType: WidgetType, fillColor: string) {
+  if (avatarOption.value.widgets?.[widgetType]) {
+    setAvatarOption({
+      ...avatarOption.value,
+      widgets: {
+        ...avatarOption.value.widgets,
+        [widgetType]: {
+          ...avatarOption.value.widgets?.[widgetType],
+          fillColor,
         },
       },
     })
@@ -206,12 +249,23 @@ function switchWidget(widgetType: WidgetType, widgetShape: WidgetShape) {
     }
   }
 
-  .bg-color-list {
+  .color-picker {
+    margin-top: 1rem;
+
+    summary {
+      color: darken(var.$color-text, 20);
+      font-size: small;
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+
+  .color-list {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
 
-    .bg-color-list__item {
+    .color-list__item {
       position: relative;
       z-index: 1;
       width: calc(100% / 7);

src/components/VueColorAvatar.vue

@@ -26,7 +26,7 @@ import { ref, toRefs, watchEffect } from 'vue'
 import { WrapperShape } from '@/enums'
 import { type AvatarOption } from '@/types'
 import { getRandomAvatarOption } from '@/utils'
-import { AVATAR_LAYER, NONE } from '@/utils/constant'
+import { AVATAR_LAYER, NONE, SETTINGS } from '@/utils/constant'
 import { widgetData } from '@/utils/dynamic-data'
 
 import Background from './widgets/Background.vue'
@@ -62,9 +62,9 @@ const svgContent = ref('')
 
 watchEffect(async () => {
   const sortedList = Object.entries(avatarOption.value.widgets).sort(
-    (i, ii) => {
-      const ix = AVATAR_LAYER[i[0]]?.zIndex ?? 0
-      const iix = AVATAR_LAYER[ii[0]]?.zIndex ?? 0
+    ([prevShape, prev], [nextShape, next]) => {
+      const ix = prev.zIndex ?? AVATAR_LAYER[prevShape]?.zIndex ?? 0
+      const iix = next.zIndex ?? AVATAR_LAYER[nextShape]?.zIndex ?? 0
       return ix - iix
     }
   )
@@ -86,9 +86,12 @@ watchEffect(async () => {
 
   const svgRawList = await Promise.all(promises).then((raw) => {
     return raw.map((svgRaw, i) => {
+      const widgetFillColor = sortedList[i][1].fillColor
+
       const content = svgRaw
         .slice(svgRaw.indexOf('>', svgRaw.indexOf('<svg')) + 1)
         .replace('</svg>', '')
+        .replaceAll('$fillColor', widgetFillColor || 'transparent')
 
       return `
         <g id="vue-color-avatar-${sortedList[i][0]}">

src/layouts/Sider.vue

@@ -41,13 +41,13 @@ const { isCollapsed, openSider, closeSider } = useSider()
   .trigger {
     position: absolute;
     top: 50%;
-    left: 0;
+    left: 1px;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 1.2rem;
     height: 4rem;
-    background-color: lighten(var.$color-configurator, 2);
+    background-color: var.$color-configurator;
     border-radius: 0.4rem 0 0 0.4rem;
     transform: translate(-100%, -50%);
     cursor: pointer;

src/types/index.ts

@@ -67,7 +67,7 @@ export interface AvatarSettings {
   glassesShape: GlassesShape[]
   clothesShape: ClothesShape[]
 
+  commonColors: string[]
   backgroundColor: string[]
   skinColor: string[]
-  clothesColor: string[]
 }

src/utils/constant.ts

@@ -71,7 +71,7 @@ export const SETTINGS: Readonly<AvatarSettings> = {
   beardShape: Object.values(BeardShape),
   clothesShape: Object.values(ClothesShape),
 
-  backgroundColor: [
+  commonColors: [
     '#6BD9E9',
     '#FC909F',
     '#F4D150',
@@ -84,15 +84,20 @@ export const SETTINGS: Readonly<AvatarSettings> = {
     '#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',
   ],
+
+  get backgroundColor() {
+    return [
+      ...this.commonColors,
+      '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'],
 }
 
 export const SCREEN = {
@@ -107,7 +112,7 @@ export const SPECIAL_AVATARS: Readonly<AvatarOption[]> = [
   {
     wrapperShape: 'squircle',
     background: {
-      color: '#E0DDFF',
+      color: 'linear-gradient(62deg, #8EC5FC, #E0C3FC)',
     },
     widgets: {
       face: {
@@ -115,6 +120,7 @@ export const SPECIAL_AVATARS: Readonly<AvatarOption[]> = [
       },
       tops: {
         shape: TopsShape.Pixie,
+        fillColor: '#d2eff3',
       },
       ear: {
         shape: EarShape.Attached,
@@ -142,13 +148,14 @@ export const SPECIAL_AVATARS: Readonly<AvatarOption[]> = [
       },
       clothes: {
         shape: ClothesShape.Crew,
+        fillColor: '#e0ddff',
       },
     },
   },
   {
     wrapperShape: 'squircle',
     background: {
-      color: '#F4D150',
+      color: '#fd6f5d',
     },
     widgets: {
       face: {
@@ -183,6 +190,7 @@ export const SPECIAL_AVATARS: Readonly<AvatarOption[]> = [
       },
       clothes: {
         shape: ClothesShape.Crew,
+        fillColor: '#f4d150',
       },
     },
   },

src/utils/index.ts

@@ -7,7 +7,7 @@ import {
 } from '@/enums'
 import { type AvatarOption, type None } from '@/types'
 
-import { NONE, SETTINGS, SPECIAL_AVATARS } from './constant'
+import { AVATAR_LAYER, NONE, SETTINGS, SPECIAL_AVATARS } from './constant'
 
 /**
  * get a random value from an array
@@ -34,6 +34,12 @@ function getRandomValue<Item = unknown>(
   return randomValue
 }
 
+export function getRandomFillColor() {
+  return SETTINGS.commonColors[
+    Math.floor(Math.random() * SETTINGS.commonColors.length)
+  ]
+}
+
 export function getRandomAvatarOption(
   presetOption: Partial<AvatarOption> = {},
   useOption: Partial<AvatarOption> = {}
@@ -48,6 +54,10 @@ export function getRandomAvatarOption(
     topList = SETTINGS.topsShape.filter((shape) => !topList.includes(shape))
   }
 
+  const beardShape = getRandomValue<BeardShape | None>(beardList, {
+    usually: [NONE],
+  })
+
   const avatarOption: AvatarOption = {
     gender,
 
@@ -68,6 +78,7 @@ export function getRandomAvatarOption(
         shape: getRandomValue(topList, {
           avoid: [useOption.widgets?.tops?.shape],
         }),
+        fillColor: getRandomFillColor(),
       },
       ear: {
         shape: getRandomValue(SETTINGS.earShape, {
@@ -105,14 +116,18 @@ export function getRandomAvatarOption(
         }),
       },
       beard: {
-        shape: getRandomValue<BeardShape | None>(beardList, {
-          usually: [NONE],
-        }),
+        shape: beardShape,
+
+        // HACK:
+        ...(beardShape === BeardShape.Scruff
+          ? { zIndex: AVATAR_LAYER['mouth'].zIndex - 1 }
+          : undefined),
       },
       clothes: {
         shape: getRandomValue(SETTINGS.clothesShape, {
           avoid: [useOption.widgets?.clothes?.shape],
         }),
+        fillColor: getRandomFillColor(),
       },
     },
   }
@@ -141,22 +156,22 @@ export function showConfetti() {
 
     const duration = performance.now() + 1 * 1000
 
-    const colors = ['#6967fe', '#85e9f4', '#e16984']
+    const confettiColors = ['#6967fe', '#85e9f4', '#e16984']
 
     void (function frame() {
       myConfetti({
-        particleCount: colors.length,
+        particleCount: confettiColors.length,
         angle: 60,
         spread: 55,
         origin: { x: 0 },
-        colors: colors,
+        colors: confettiColors,
       })
       myConfetti({
-        particleCount: colors.length,
+        particleCount: confettiColors.length,
         angle: 120,
         spread: 55,
         origin: { x: 1 },
-        colors: colors,
+        colors: confettiColors,
       })
 
       if (performance.now() < duration) {