From 5529b9cb5dfab01e1bf094fec294fd6106b99402 Mon Sep 17 00:00:00 2001
From: junkwarrior87 <115852752+junkwarrior87@users.noreply.github.com>
Date: Mon, 10 Mar 2025 17:26:29 +0800
Subject: [PATCH] chore(stage-web): make the buttons follow the color scheme
 (#67)

* chore(stage-web): make the buttons follow the color scheme
* remove blank lines generated by lint
* use complementary colors
---
 .../components/Layouts/InteractiveArea.vue    |  8 ++---
 apps/stage-web/uno.config.ts                  | 33 +++++++++++--------
 2 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/apps/stage-web/src/components/Layouts/InteractiveArea.vue b/apps/stage-web/src/components/Layouts/InteractiveArea.vue
index b7efc779a..5a3550b38 100644
--- a/apps/stage-web/src/components/Layouts/InteractiveArea.vue
+++ b/apps/stage-web/src/components/Layouts/InteractiveArea.vue
@@ -203,9 +203,9 @@ onAfterSend(async () => {
     </div>
     <div flex="~ row" gap-2>
       <button
-        bg="cyan-100 hover:cyan-200 dark:cyan-800 dark:hover:cyan-700"
+        bg="complementary-100 hover:complementary-200 dark:complementary-800 dark:hover:complementary-700"
         transition="all duration-250 ease-in-out"
-        text="cyan-400"
+        text="complementary-400"
         mb-6 flex cursor-pointer items-center justify-center gap-2 rounded-full px-4 py-2
         @click="handleLoadWhisper"
       >
@@ -248,9 +248,9 @@ onAfterSend(async () => {
           </fieldset>
         </TransitionVertical>
         <label
-          bg="cyan-100 hover:cyan-200 dark:cyan-800 dark:hover:cyan-700"
+          bg="complementary-100 hover:complementary-200 dark:complementary-800 dark:hover:complementary-700"
           transition="all duration-250 ease-in-out"
-          text="cyan-400"
+          text="complementary-400"
           mb-6 flex cursor-pointer items-center justify-center gap-2 rounded-full px-4 py-2
         >
           <input v-model="showMicrophoneSelect" type="checkbox" hidden>
diff --git a/apps/stage-web/uno.config.ts b/apps/stage-web/uno.config.ts
index 4034f50c3..d1a75c088 100644
--- a/apps/stage-web/uno.config.ts
+++ b/apps/stage-web/uno.config.ts
@@ -12,6 +12,23 @@ import {
 } from 'unocss'
 import { parseColor } from 'unocss/preset-mini'
 
+function createColorSchemeConfig(hueOffset = 0) {
+  return {
+    DEFAULT: `oklch(62% var(--theme-colors-chroma) calc(var(--theme-colors-hue) + ${hueOffset}))`,
+    50: `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-50) calc(var(--theme-colors-hue) + ${hueOffset})) 30%, oklch(100% 0 360))`,
+    100: `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-100) calc(var(--theme-colors-hue) + ${hueOffset})) 80%, oklch(100% 0 360))`,
+    200: `oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + ${hueOffset}))`,
+    300: `oklch(85% var(--theme-colors-chroma-300) calc(var(--theme-colors-hue) + ${hueOffset}))`,
+    400: `oklch(74% var(--theme-colors-chroma-400) calc(var(--theme-colors-hue) + ${hueOffset}))`,
+    500: `oklch(62% var(--theme-colors-chroma) calc(var(--theme-colors-hue) + ${hueOffset}))`,
+    600: `oklch(54% var(--theme-colors-chroma-600) calc(var(--theme-colors-hue) + ${hueOffset}))`,
+    700: `oklch(49% var(--theme-colors-chroma-700) calc(var(--theme-colors-hue) + ${hueOffset}))`,
+    800: `oklch(42% var(--theme-colors-chroma-800) calc(var(--theme-colors-hue) + ${hueOffset}))`,
+    900: `oklch(37% var(--theme-colors-chroma-900) calc(var(--theme-colors-hue) + ${hueOffset}))`,
+    950: `oklch(29% var(--theme-colors-chroma-950) calc(var(--theme-colors-hue) + ${hueOffset}))`,
+  }
+}
+
 export default defineConfig({
   presets: [
     presetWind3(),
@@ -73,20 +90,8 @@ export default defineConfig({
   ],
   theme: {
     colors: {
-      primary: {
-        DEFAULT: 'oklch(62% var(--theme-colors-chroma) var(--theme-colors-hue))',
-        50: 'color-mix(in srgb, oklch(95% var(--theme-colors-chroma-50) var(--theme-colors-hue)) 30%, oklch(100% 0 360))',
-        100: 'color-mix(in srgb, oklch(95% var(--theme-colors-chroma-100) var(--theme-colors-hue)) 80%, oklch(100% 0 360))',
-        200: 'oklch(90% var(--theme-colors-chroma-200) var(--theme-colors-hue))',
-        300: 'oklch(85% var(--theme-colors-chroma-300) var(--theme-colors-hue))',
-        400: 'oklch(74% var(--theme-colors-chroma-400) var(--theme-colors-hue))',
-        500: 'oklch(62% var(--theme-colors-chroma) var(--theme-colors-hue))',
-        600: 'oklch(54% var(--theme-colors-chroma-600) var(--theme-colors-hue))',
-        700: 'oklch(49% var(--theme-colors-chroma-700) var(--theme-colors-hue))',
-        800: 'oklch(42% var(--theme-colors-chroma-800) var(--theme-colors-hue))',
-        900: 'oklch(37% var(--theme-colors-chroma-900) var(--theme-colors-hue))',
-        950: 'oklch(29% var(--theme-colors-chroma-950) var(--theme-colors-hue))',
-      },
+      primary: createColorSchemeConfig(),
+      complementary: createColorSchemeConfig(180),
     },
   },
 })