fix(stage-web): reduce saturation (#75)

* feat(stage-web): theme presets
* refactor: use @culorijs to convert color
* fix: brush
* fix(stage-web): reduce saturation

apps/stage-web/src/components/Backgrounds/Cross.vue

@@ -11,7 +11,7 @@ https://www.magicpattern.design/tools/css-backgrounds
 */
 .cross-background-container {
   background-color: #ffffff;
-  --cross-color: oklch(0.85 var(--theme-colors-chroma) var(--theme-colors-hue) / 0.2);
+  --cross-color: oklch(0.85 calc(var(--theme-colors-chroma) * 0.3) var(--theme-colors-hue) / 0.2);
   background:
     radial-gradient(circle, transparent 20%, #ffffff 20%, #ffffff 80%, transparent 80%, transparent),
     radial-gradient(circle, transparent 20%, #ffffff 20%, #ffffff 80%, transparent 80%, transparent) 25px 25px,
@@ -26,7 +26,7 @@ https://www.magicpattern.design/tools/css-backgrounds
 
 .dark .cross-background-container {
   background-color: #121212;
-  --cross-color: oklch(0.2 var(--theme-colors-chroma) var(--theme-colors-hue));
+  --cross-color: oklch(0.2 calc(var(--theme-colors-chroma) * 0.3) var(--theme-colors-hue));
   background:
     radial-gradient(circle, transparent 20%, #121212 20%, #121212 80%, transparent 80%, transparent),
     radial-gradient(circle, transparent 20%, #121212 20%, #121212 80%, transparent 80%, transparent) 25px 25px,

apps/stage-web/src/pages/index.vue

@@ -4,11 +4,11 @@ import { useDark } from '@vueuse/core'
 import { ref } from 'vue'
 
 import Cross from '../components/Backgrounds/Cross.vue'
-import AnimatedBackground from '../components/Layouts/AnimatedBackground.vue'
 import Header from '../components/Layouts/Header.vue'
 import InteractiveArea from '../components/Layouts/InteractiveArea.vue'
 import MobileHeader from '../components/Layouts/MobileHeader.vue'
 import MobileInteractiveArea from '../components/Layouts/MobileInteractiveArea.vue'
+import AnimatedWave from '../components/Widgets/AnimatedWave.vue'
 
 const dark = useDark()
 const paused = ref(false)
@@ -20,7 +20,11 @@ function handleSettingsOpen(open: boolean) {
 
 <template>
   <Cross>
-    <AnimatedBackground :fill-color="dark ? 'oklch(29% var(--theme-colors-chroma) var(--theme-colors-hue))' : 'color-mix(in srgb, oklch(95% var(--theme-colors-chroma-50) var(--theme-colors-hue)) 80%, oklch(100% 0 360))'">
+    <AnimatedWave
+      :fill-color="dark
+        ? 'oklch(35% calc(var(--theme-colors-chroma) * 0.6) var(--theme-colors-hue))'
+        : 'color-mix(in srgb, oklch(95% calc(var(--theme-colors-chroma-50) * 0.5) var(--theme-colors-hue)) 80%, oklch(100% 0 360))'"
+    >
       <div relative flex="~ col" z-2 h-100vh w-100vw of-hidden>
         <!-- header -->
         <div>
@@ -34,7 +38,7 @@ function handleSettingsOpen(open: boolean) {
           <MobileInteractiveArea class="hidden <md:block" mx2 mb2 @settings-open="handleSettingsOpen" />
         </div>
       </div>
-    </AnimatedBackground>
+    </AnimatedWave>
   </Cross>
 </template>