style(docs,stage-ui): improved color & functionality

docs/.vitepress/components/Home.vue

@@ -4,6 +4,10 @@ import { useI18n } from 'vue-i18n'
 import homeCover from '../assets/home-cover-2025-07-15.png'
 
 const { t } = useI18n()
+
+function handleClickTryLive() {
+  window.location.replace('https://airi.moeru.ai/')
+}
 </script>
 
 <template>
@@ -21,13 +25,13 @@ const { t } = useI18n()
         </div>
         <div class="relative z-10 w-full flex justify-center gap-4">
           <a
-            href="https://airi.moeru.ai/"
             :class="[
               'rounded-xl px-5 py-3 font-extrabold outline-none backdrop-blur-md active:scale-95 focus:outline-none',
               'text-slate-700 dark:text-cyan-200',
             ]"
             bg="primary/20 dark:primary/30 dark:hover:primary/40"
             transition="colors,transform duration-200 ease-in-out"
+            @click="() => handleClickTryLive()"
           >
             {{ t('docs.theme.home.try-live.title') }}
           </a>

docs/.vitepress/custom/Layout.vue

@@ -37,7 +37,7 @@ watch(lang, () => locale.value = lang.value, { immediate: true })
           <div class="w-full flex items-center justify-between gap-8 md:justify-normal">
             <a
               :href="withBase(`/${lang}/`)"
-              class="flex items-center gap-2"
+              class="flex translate-y--1 items-center gap-2"
             >
               <img
                 class="w-6 md:w-9"

packages/stage-ui/src/components/Layouts/Callout.vue

@@ -57,7 +57,6 @@ const themeClasses: Record<ThemeVariant, {
     flex flex-col gap-1
     overflow-hidden rounded-lg
     py-2 pl-4 pr-3
-    text-sm
     :class="[
       ...themeClasses[props.theme || 'violet'].container,
       // eslint-disable-next-line vue/prefer-separate-static-class

packages/stage-ui/src/components/Misc/Button.vue

@@ -43,13 +43,13 @@ const variantClasses: Record<ButtonVariant, {
   // lightened: string
 }> = {
   primary: {
-    default: 'bg-primary-100 hover:bg-primary-200 active:bg-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/60 dark:active:bg-primary-900/40 focus:ring-primary-300/60 dark:focus:ring-primary-600/30 border-2 border-solid border-primary-200/30 dark:border-primary-900/40 text-primary-950 dark:text-primary-100',
+    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-50 hover:bg-neutral-200 active:bg-neutral-300 dark:bg-neutral-600/40 dark:hover:bg-neutral-600/60 dark:active:bg-neutral-600/40 focus:ring-neutral-300/60 dark:focus:ring-neutral-600/30 border-2 border-solid border-neutral-200/50 dark:border-neutral-700/50 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-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',
   },
   danger: {
-    default: 'bg-red-100 hover:bg-red-200 active:bg-red-300 dark:bg-red-900/40 dark:hover:bg-red-900/60 dark:active:bg-red-900/40 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',
+    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',
   },
 }
 
@@ -62,7 +62,8 @@ const sizeClasses: Record<ButtonSize, string> = {
 
 // Base classes that are always applied
 const baseClasses = computed(() => [
-  'rounded-lg font-medium outline-none transition-all duration-150 ease-in-out',
+  'rounded-lg font-medium outline-none',
+  'transition-all duration-200 ease-in-out',
   'disabled:cursor-not-allowed disabled:opacity-50',
   props.block ? 'w-full' : '',
   sizeClasses[props.size],