From eff74a2862f45a7d23066f139be5abf42585bf45 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Wed, 16 Jul 2025 18:51:24 +0800
Subject: [PATCH] style(stage-ui): improved colors

---
 packages/stage-ui/src/components/Layouts/Section.vue | 5 +++--
 packages/stage-ui/src/components/Misc/Button.vue     | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/stage-ui/src/components/Layouts/Section.vue b/packages/stage-ui/src/components/Layouts/Section.vue
index 8c21ae9aa..30673cd5f 100644
--- a/packages/stage-ui/src/components/Layouts/Section.vue
+++ b/packages/stage-ui/src/components/Layouts/Section.vue
@@ -15,12 +15,13 @@ withDefaults(defineProps<{
   <Collapsable :default="expand">
     <template #trigger="slotProps">
       <button
-        class="w-full flex items-center justify-between rounded-lg px-4 py-3 outline-none transition-all duration-250 ease-in-out"
+        class="w-full flex items-center justify-between rounded-lg px-3 py-2 outline-none transition-all duration-250 ease-in-out sm:px-4 sm:py-3"
+        text="neutral-600 dark:neutral-400 sm sm:base"
         bg="neutral-100 dark:neutral-800"
         hover="bg-neutral-200 dark:bg-neutral-700"
         @click="slotProps.setVisible(!slotProps.visible)"
       >
-        <div flex gap-1.5>
+        <div flex items-center gap-1.5>
           <div :class="icon" size-6 />
           {{ title }}
         </div>
diff --git a/packages/stage-ui/src/components/Misc/Button.vue b/packages/stage-ui/src/components/Misc/Button.vue
index 235b76686..5880f757f 100644
--- a/packages/stage-ui/src/components/Misc/Button.vue
+++ b/packages/stage-ui/src/components/Misc/Button.vue
@@ -46,7 +46,7 @@ const variantClasses: Record<ButtonVariant, {
     default: 'bg-primary-500/15 hover:bg-primary-500/20 active:bg-primary-500/30 dark:bg-primary-700/30 dark:hover:bg-primary-700/40 dark:active:bg-primary-700/30 focus:ring-primary-300/60 dark:focus:ring-primary-600/30 border-2 border-solid border-primary-500/5 dark:border-primary-900/40 text-primary-950 dark:text-primary-100',
   },
   secondary: {
-    default: 'bg-neutral-400/15 hover:bg-neutral-400/20 active:bg-neutral-400/30 dark:bg-neutral-600/30 dark:hover:bg-neutral-600/40 dark:active:bg-neutral-600/30 focus:ring-neutral-300/30 dark:focus:ring-neutral-600/60 dark:focus:ring-neutral-600/30 border-2 border-solid border-neutral-300/30 dark:border-neutral-700/30 text-neutral-950 dark:text-neutral-100',
+    default: 'bg-neutral-400/15 hover:bg-neutral-400/20 active:bg-neutral-400/30 dark:bg-neutral-700/60 dark:hover:bg-neutral-700/80 dark:active:bg-neutral-700/60 focus:ring-neutral-300/30 dark:focus:ring-neutral-600/60 dark:focus:ring-neutral-600/30 border-2 border-solid border-neutral-300/30 dark:border-neutral-700/30 text-neutral-950 dark:text-neutral-100',
   },
   danger: {
     default: 'bg-red-500/15 hover:bg-red-500/20 active:bg-red-500/30 dark:bg-red-700/30 dark:hover:bg-red-700/40 dark:active:bg-red-700/30 focus:ring-red-300/30 dark:focus:ring-red-600/60 dark:focus:ring-red-600/30 border-2 border-solid border-red-200/30 dark:border-red-900/30 text-red-950 dark:text-red-100',