From 4e5645c21ed6702219ee349cf42aec1505abbd28 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Tue, 1 Apr 2025 22:38:38 +0800
Subject: [PATCH] style(stage-ui): improved style

---
 .../stage-ui/src/components/Menu/IconItem.vue  |  6 +++---
 .../src/components/Menu/IconStatusItem.vue     |  8 ++++----
 packages/stage-ui/stories/themes.css           | 18 ++++++++++++++++++
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/packages/stage-ui/src/components/Menu/IconItem.vue b/packages/stage-ui/src/components/Menu/IconItem.vue
index 4a0032f6b..8bab53a3a 100644
--- a/packages/stage-ui/src/components/Menu/IconItem.vue
+++ b/packages/stage-ui/src/components/Menu/IconItem.vue
@@ -12,8 +12,8 @@ defineProps<{
   <RouterLink
     box="border"
     flex="~ row"
-    bg="neutral-50 dark:neutral-800"
-    border="neutral-100 dark:neutral-700 hover:primary-500/30 dark:hover:primary-400/30 solid 2"
+    bg="neutral-50 dark:neutral-800/50"
+    border="neutral-100 dark:neutral-800/25 hover:primary-500/30 dark:hover:primary-400/30 solid 2"
     drop-shadow="none hover:[0px_4px_4px_rgba(220,220,220,0.4)] active:[0px_0px_0px_rgba(220,220,220,0.25)] dark:hover:none"
     class="menu-icon-item"
     transition="all ease-in-out duration-400"
@@ -76,7 +76,7 @@ defineProps<{
 }
 
 .menu-icon-item::after {
-  --at-apply: 'bg-dotted-[neutral-200/80] hover:bg-dotted-[primary-300/50] dark:bg-dotted-[neutral-700/50] dark:hover:bg-dotted-[primary-200/20]';
+  --at-apply: 'bg-dotted-[neutral-200/60] hover:bg-dotted-[primary-300/50] dark:bg-dotted-[neutral-700/25] dark:hover:bg-dotted-[primary-200/20]';
   position: absolute;
   inset: 0;
   z-index: -2;
diff --git a/packages/stage-ui/src/components/Menu/IconStatusItem.vue b/packages/stage-ui/src/components/Menu/IconStatusItem.vue
index 7ec018013..29d6ee787 100644
--- a/packages/stage-ui/src/components/Menu/IconStatusItem.vue
+++ b/packages/stage-ui/src/components/Menu/IconStatusItem.vue
@@ -13,8 +13,8 @@ const props = defineProps<{
 <template>
   <div
     flex="~ col"
-    bg="neutral-200/50 dark:neutral-700"
-    border="neutral-100 dark:neutral-700 hover:primary-500/30 dark:hover:primary-400/30 solid 2"
+    bg="neutral-200/50 dark:neutral-800/50"
+    border="neutral-100 dark:neutral-800/25 hover:primary-500/30 dark:hover:primary-400/30 solid 2"
     drop-shadow="none hover:[0px_4px_4px_rgba(220,220,220,0.4)] active:[0px_0px_0px_rgba(220,220,220,0.25)] dark:hover:none"
     class="menu-icon-status-item"
     transition="all ease-in-out duration-400"
@@ -23,7 +23,7 @@ const props = defineProps<{
     <RouterLink
       flex="~ row"
       class="menu-icon-status-item-link"
-      bg="neutral-50 dark:neutral-800"
+      bg="white dark:neutral-900"
       transition="all ease-in-out duration-400"
       relative h-full w-full items-center overflow-hidden rounded-lg p-5 text-left
       :to=" props.to"
@@ -108,7 +108,7 @@ const props = defineProps<{
 }
 
 .menu-icon-status-item-link::after {
-  --at-apply: 'bg-dotted-[neutral-200/80] hover:bg-dotted-[primary-300/50] dark:bg-dotted-[neutral-700/50] dark:hover:bg-dotted-[primary-200/20]';
+  --at-apply: 'bg-dotted-[neutral-200/80] hover:bg-dotted-[primary-300/50] dark:bg-dotted-[neutral-700/40] dark:hover:bg-dotted-[primary-200/20]';
   position: absolute;
   inset: 0;
   z-index: -2;
diff --git a/packages/stage-ui/stories/themes.css b/packages/stage-ui/stories/themes.css
index 638ccb141..20760141c 100644
--- a/packages/stage-ui/stories/themes.css
+++ b/packages/stage-ui/stories/themes.css
@@ -24,3 +24,21 @@
   --theme-colors-chroma-900: calc(var(--theme-colors-chroma) * 0.7);
   --theme-colors-chroma-950: calc(var(--theme-colors-chroma) * 0.5);
 }
+
+*,
+::before,
+::after {
+  --_histoire-color-gray-50: 250 250 250;
+  --_histoire-color-gray-100: 244 244 245;
+  --_histoire-color-gray-200: 228 228 231;
+  --_histoire-color-gray-300: 212 212 216;
+  --_histoire-color-gray-400: 161 161 170;
+  --_histoire-color-gray-500: 113 113 122;
+  --_histoire-color-gray-600: 82 82 91;
+  --_histoire-color-gray-700: 18 18 18;
+  --_histoire-color-gray-750: 14 14 14;
+  --_histoire-color-gray-800: 10 10 10;
+  --_histoire-color-gray-850: 6 6 6;
+  --_histoire-color-gray-900: 2 2 2;
+  --_histoire-color-gray-950: 0 0 0;
+}