From f80ce1d6eceb5840372a50dc4d767dc781cfc723 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Thu, 13 Mar 2025 14:58:06 +0800
Subject: [PATCH] feat(stage-ui): better hue slider

---
 .../src/pages/settings/themes/index.vue       | 10 +++++---
 .../Form/Radio/RadioCardDetail.story.vue      |  5 +++-
 .../Form/Radio/RadioCardSimple.story.vue      |  5 +++-
 .../src/components/Menu/IconItem.story.vue    |  1 +
 .../components/Menu/IconStatusItem.story.vue  |  1 +
 packages/stage-ui/src/stores/settings.ts      |  2 +-
 .../stories/ThemeColorsHueControl.vue         |  8 +++---
 packages/stage-ui/stories/main.css            | 25 +++++++++++++++++--
 8 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/apps/stage-web/src/pages/settings/themes/index.vue b/apps/stage-web/src/pages/settings/themes/index.vue
index 6b8acacbd..7d7eb8a06 100644
--- a/apps/stage-web/src/pages/settings/themes/index.vue
+++ b/apps/stage-web/src/pages/settings/themes/index.vue
@@ -365,11 +365,11 @@ function isColorSelected(hexColor: string): boolean {
 
 <style>
 .primary-color-bar {
-  @apply w-full h-full flex-1 flex items-center justify-center;
+  --at-apply: w-full h-full flex-1 flex items-center justify-center;
 }
 
 .theme-hue-slider {
-  @apply rounded-lg appearance-none;
+  --at-apply: rounded-lg appearance-none;
   background: linear-gradient(
     to right,
     oklch(85% 0.2 0),
@@ -383,11 +383,13 @@ function isColorSelected(hexColor: string): boolean {
 }
 
 .theme-hue-slider::-webkit-slider-thumb {
-  @apply w-2 h-12 appearance-none rounded-md bg-neutral-500/80 dark:bg-neutral-400/80 cursor-pointer shadow-md border-2 border-white hover:bg-neutral-500 dark:hover:bg-neutral-400 transition-colors duration-200;
+  --at-apply: w-2 h-12 appearance-none rounded-md bg-neutral-500/80 dark: bg-neutral-400/80 cursor-pointer shadow-md
+    border-2 border-white hover: bg-neutral-500 dark: hover: bg-neutral-400 transition-colors duration-200;
 }
 
 .theme-hue-slider::-moz-range-thumb {
-  @apply w-2 h-12 bg-neutral-500/80 rounded-md  dark:bg-neutral-400/80 cursor-pointer shadow-md border-2 border-white border-box hover:bg-neutral-500 dark:hover:bg-neutral-400 transition-colors duration-200;
+  --at-apply: w-2 h-12 bg-neutral-500/80 rounded-md dark: bg-neutral-400/80 cursor-pointer shadow-md border-2
+    border-white border-box hover: bg-neutral-500 dark: hover: bg-neutral-400 transition-colors duration-200;
 }
 
 .transparency-grid {
diff --git a/packages/stage-ui/src/components/Form/Radio/RadioCardDetail.story.vue b/packages/stage-ui/src/components/Form/Radio/RadioCardDetail.story.vue
index 2d3928f3d..adee1ddfa 100644
--- a/packages/stage-ui/src/components/Form/Radio/RadioCardDetail.story.vue
+++ b/packages/stage-ui/src/components/Form/Radio/RadioCardDetail.story.vue
@@ -7,7 +7,10 @@ const modelValue = ref('test')
 </script>
 
 <template>
-  <Story :layout="{ type: 'grid', width: 500 }">
+  <Story
+    title="Radio Card (detail)"
+    :layout="{ type: 'grid', width: 500 }"
+  >
     <Variant id="default" title="Default">
       <RadioCardDetail
         id="test"
diff --git a/packages/stage-ui/src/components/Form/Radio/RadioCardSimple.story.vue b/packages/stage-ui/src/components/Form/Radio/RadioCardSimple.story.vue
index 73de6b392..c2f40525e 100644
--- a/packages/stage-ui/src/components/Form/Radio/RadioCardSimple.story.vue
+++ b/packages/stage-ui/src/components/Form/Radio/RadioCardSimple.story.vue
@@ -7,7 +7,10 @@ const modelValue = ref('test')
 </script>
 
 <template>
-  <Story :layout="{ type: 'grid', width: 500 }">
+  <Story
+    title="Radio Card (simple)"
+    :layout="{ type: 'grid', width: 500 }"
+  >
     <Variant id="default" title="Default">
       <RadioCardSimple
         id="test"
diff --git a/packages/stage-ui/src/components/Menu/IconItem.story.vue b/packages/stage-ui/src/components/Menu/IconItem.story.vue
index 3f78d7b56..81eb6a06c 100644
--- a/packages/stage-ui/src/components/Menu/IconItem.story.vue
+++ b/packages/stage-ui/src/components/Menu/IconItem.story.vue
@@ -5,6 +5,7 @@ import IconItem from './IconItem.vue'
 
 <template>
   <Story
+    title="Menu Icon Item"
     :layout="{ type: 'grid', width: 500 }"
   >
     <template #controls>
diff --git a/packages/stage-ui/src/components/Menu/IconStatusItem.story.vue b/packages/stage-ui/src/components/Menu/IconStatusItem.story.vue
index 6ffb3d71b..64d4975af 100644
--- a/packages/stage-ui/src/components/Menu/IconStatusItem.story.vue
+++ b/packages/stage-ui/src/components/Menu/IconStatusItem.story.vue
@@ -5,6 +5,7 @@ import IconStatusItem from './IconStatusItem.vue'
 
 <template>
   <Story
+    title="Menu Icon Item (with Status)"
     :layout="{ type: 'grid', width: 500 }"
   >
     <template #controls>
diff --git a/packages/stage-ui/src/stores/settings.ts b/packages/stage-ui/src/stores/settings.ts
index daedc753c..5c0d9fa44 100644
--- a/packages/stage-ui/src/stores/settings.ts
+++ b/packages/stage-ui/src/stores/settings.ts
@@ -2,7 +2,7 @@ import { useDevicesList, useLocalStorage } from '@vueuse/core'
 import { defineStore } from 'pinia'
 import { computed, onMounted, ref, watch } from 'vue'
 
-export const DEFAULT_THEME_COLORS_HUE = 354.31
+export const DEFAULT_THEME_COLORS_HUE = 178.17
 
 export const useSettings = defineStore('settings', () => {
   const selectedAudioDevice = ref<MediaDeviceInfo>()
diff --git a/packages/stage-ui/stories/ThemeColorsHueControl.vue b/packages/stage-ui/stories/ThemeColorsHueControl.vue
index c4bebc232..a88b214df 100644
--- a/packages/stage-ui/stories/ThemeColorsHueControl.vue
+++ b/packages/stage-ui/stories/ThemeColorsHueControl.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from 'vue'
 
-const DEFAULT_THEME_COLORS_HUE = 354.31
+const DEFAULT_THEME_COLORS_HUE = 178.17
 
 const themeColorsHue = ref(DEFAULT_THEME_COLORS_HUE)
 
@@ -21,7 +21,7 @@ watch(themeColorsHue, () => {
 </script>
 
 <template>
-  <div px-4 py-2>
+  <div px-4 py-2 flex="~ col">
     <input
       v-model="themeColorsHue"
       type="range"
@@ -32,7 +32,9 @@ watch(themeColorsHue, () => {
     >
 
     <button
-      class="mt-2 rounded-md bg-neutral-100 px-2 py-1 text-xs transition-colors dark:bg-neutral-800 hover:bg-neutral-200 dark:hover:bg-neutral-700"
+      class="mt-2 rounded-md px-2 py-1 text-xs transition-colors"
+      bg="neutral-200 dark:neutral-800 hover:neutral-200 dark:hover:neutral-700"
+      text="neutral-700 dark:neutral-300"
       @click="resetToDefault"
     >
       Reset to Default
diff --git a/packages/stage-ui/stories/main.css b/packages/stage-ui/stories/main.css
index 39511c0ca..234a84af6 100755
--- a/packages/stage-ui/stories/main.css
+++ b/packages/stage-ui/stories/main.css
@@ -41,11 +41,12 @@ html.htw-dark {
 }
 
 .primary-color-bar {
-  @apply w-full h-full flex-1 flex items-center justify-center;
+  --at-apply: w-full h-full flex-1 flex items-center justify-center;
 }
 
 .theme-hue-slider {
-  @apply flex-1 w-full h-2 rounded-full appearance-none;
+  outline: none;
+  --at-apply: rounded-lg appearance-none h-10;
   background: linear-gradient(
     to right,
     oklch(85% 0.2 0),
@@ -57,3 +58,23 @@ html.htw-dark {
     oklch(85% 0.2 360)
   );
 }
+
+.theme-hue-slider::-webkit-slider-thumb {
+  --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
+    hover: bg-neutral-800 transition-colors duration-200;
+}
+
+.htw-dark .theme-hue-slider::-webkit-slider-thumb {
+  --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-200 cursor-pointer shadow-md border-2 border-white
+    hover: bg-neutral-300 transition-colors duration-200;
+}
+
+.theme-hue-slider::-moz-range-thumb {
+  --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-lg border-2 border-neutral-500
+    hover: bg-neutral-800 transition-colors duration-200;
+}
+
+.htw-dark .theme-hue-slider::-moz-range-thumb {
+  --at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-md border-2 border-white
+    hover: bg-neutral-300 transition-colors duration-200;
+}