style(ui-transitions): colors

Signed-off-by: Neko Ayaka <neko@ayaka.moe>

docs/src/content/docs/references/Design Guidelines/tools.md

@@ -17,7 +17,11 @@ So, unless opacity is part of the typography design, please try to pick a best s
 
 Another great tool we use is called [Radix Colors](https://www.radix-ui.com/colors), it's kind of the building blocks of our interactive UI elements, since they built great color palettes with nice color theory backed, you can pick the suitable color from the palette as well.
 
-You may already learned that a _complementary color_ is, it was useful for the color contrast, [Color wheel - color theory and calculator | Canva Colors](https://www.canva.com/colors/color-wheel/) is one of the tool that can help you find the complementary color quickly and interactively.
+You may already learned that a _complementary color_ is, it was useful for the color contrast, here are several nice tools can help you choose the complementary color quickly and interactively:
+
+- [Color wheel - Figma](https://www.figma.com/color-wheel/)
+- [Color wheel - Canva Colors](https://www.canva.com/colors/color-wheel/)
+- [Paletton](https://paletton.com/#uid=55v1e0kk-p26VFOfrvbqEdSDDbg)
 
 ## Backgrounds & Patterns
 

packages/ui-transitions/playground/src/App.vue

@@ -8,7 +8,11 @@ const isDark = useDark()
 
 <template>
   <div class="app-container" h-full>
-    <StageTransitionGroup :primary-color="!isDark ? '#E9649C' : '#E02B77'" :secondary-color="!isDark ? '#64E9B1' : '#2BE094'">
+    <!-- https://paletton.com/#uid=54h1e0kl1++bM++qIEfl0f+Er8y -->
+    <StageTransitionGroup
+      :primary-color="!isDark ? '#FFA1B3' : '#FF5778'"
+      :secondary-color="!isDark ? '#A1FFD7' : '#57FFB7'"
+    >
       <router-view v-slot="{ Component, route: r }">
         <component :is="Component" :key="r.path" />
       </router-view>