refactor(stage-ui): many minor tweaks, unified dialog drawer component style

packages/stage-ui/src/components/scenarios/dialogs/about/about-dialog.vue

@@ -20,7 +20,11 @@ onMounted(() => screenSafeArea.update())
     <slot name="trigger" />
     <DialogPortal>
       <DialogOverlay class="fixed inset-0 z-[9999] bg-black/50 backdrop-blur-sm data-[state=closed]:animate-fadeOut data-[state=open]:animate-fadeIn" />
-      <DialogContent class="fixed left-1/2 top-1/2 z-[9999] max-h-full max-w-2xl w-[92dvw] transform overflow-y-scroll rounded-2xl bg-white/95 p-6 shadow-xl outline-none backdrop-blur-md scrollbar-none -translate-x-1/2 -translate-y-1/2 data-[state=closed]:animate-contentHide data-[state=open]:animate-contentShow dark:bg-neutral-900/90">
+      <DialogContent
+        :class="[
+          'fixed left-1/2 top-1/2 z-[9999] max-h-full max-w-2xl w-[92dvw] transform overflow-y-scroll rounded-2xl bg-white/95 p-6 shadow-xl outline-none backdrop-blur-md scrollbar-none -translate-x-1/2 -translate-y-1/2 data-[state=closed]:animate-contentHide data-[state=open]:animate-contentShow dark:bg-neutral-900/90',
+        ]"
+      >
         <slot />
       </DialogContent>
     </DialogPortal>
@@ -28,8 +32,22 @@ onMounted(() => screenSafeArea.update())
   <DrawerRoot v-else :open="showDialog" should-scale-background @update:open="value => showDialog = value">
     <DrawerPortal>
       <DrawerOverlay class="fixed inset-0" />
-      <DrawerContent class="fixed bottom-0 left-0 right-0 z-1000 mt-20 h-full max-h-[96%] flex flex-col rounded-t-2xl bg-neutral-50/95 px-4 pt-4 outline-none backdrop-blur-md dark:bg-neutral-900/90" :style="{ paddingBottom: `${Math.max(Number.parseFloat(screenSafeArea.bottom.value.replace('px', '')), 24)}px` }">
-        <DrawerHandle />
+      <DrawerContent
+        :class="[
+          'fixed bottom-0 left-0 right-0 z-1000',
+          'mt-20 px-4 pt-4',
+          'flex flex-col',
+          'h-full max-h-[90%]',
+          'rounded-t-[32px] outline-none backdrop-blur-md',
+          'bg-neutral-50/85 dark:bg-neutral-900/90',
+        ]"
+        :style="{ paddingBottom: `${Math.max(Number.parseFloat(screenSafeArea.bottom.value.replace('px', '')), 24)}px` }"
+      >
+        <DrawerHandle
+          :class="[
+            '[div&]:bg-neutral-400 [div&]:dark:bg-neutral-600',
+          ]"
+        />
         <slot />
       </DrawerContent>
     </DrawerPortal>

packages/stage-ui/src/components/scenarios/dialogs/audio-input/hearing-config-dialog.vue

@@ -61,8 +61,22 @@ onMounted(() => screenSafeArea.update())
     </DrawerTrigger>
     <DrawerPortal>
       <DrawerOverlay class="fixed inset-0" />
-      <DrawerContent class="fixed bottom-0 left-0 right-0 z-1000 mt-20 h-full max-h-67 flex flex-col rounded-t-2xl bg-neutral-50 px-4 pt-4 outline-none backdrop-blur-md dark:bg-neutral-900/95" :style="{ paddingBottom: `${Math.max(Number.parseFloat(screenSafeArea.bottom.value.replace('px', '')), 24)}px` }">
-        <DrawerHandle my-2 />
+      <DrawerContent
+        :class="[
+          'fixed bottom-0 left-0 right-0 z-1000',
+          'mt-20 px-4 pt-4',
+          'flex flex-col',
+          'h-full max-h-80',
+          'rounded-t-[32px] outline-none backdrop-blur-md',
+          'bg-neutral-50/85 dark:bg-neutral-900/90',
+        ]"
+        :style="{ paddingBottom: `${Math.max(Number.parseFloat(screenSafeArea.bottom.value.replace('px', '')), 24)}px` }"
+      >
+        <DrawerHandle
+          :class="[
+            '[div&]:bg-neutral-400 [div&]:dark:bg-neutral-600',
+          ]"
+        />
         <HearingConfig
           v-model:enabled="enabled"
           v-model:selected-audio-input="selectedAudioInput"

packages/stage-ui/src/components/scenarios/dialogs/background-picker/background-picker-dialog.vue

@@ -50,8 +50,22 @@ onMounted(() => screenSafeArea.update())
   <DrawerRoot v-else :open="showDialog" should-scale-background @update:open="value => showDialog = value">
     <DrawerPortal>
       <DrawerOverlay class="fixed inset-0" />
-      <DrawerContent class="fixed bottom-0 left-0 right-0 z-1000 mt-20 h-full max-h-[85%] flex flex-col rounded-t-2xl bg-neutral-50 px-4 pt-4 outline-none backdrop-blur-md dark:bg-neutral-900/95" :style="{ paddingBottom: `${Math.max(Number.parseFloat(screenSafeArea.bottom.value.replace('px', '')), 24)}px` }">
-        <DrawerHandle />
+      <DrawerContent
+        :class="[
+          'fixed bottom-0 left-0 right-0 z-1000',
+          'mt-20 px-4 pt-4',
+          'flex flex-col',
+          'h-full max-h-[85%]',
+          'rounded-t-[32px] outline-none backdrop-blur-md',
+          'bg-neutral-50/85 dark:bg-neutral-900/90',
+        ]"
+        :style="{ paddingBottom: `${Math.max(Number.parseFloat(screenSafeArea.bottom.value.replace('px', '')), 24)}px` }"
+      >
+        <DrawerHandle
+          :class="[
+            '[div&]:bg-neutral-400 [div&]:dark:bg-neutral-600',
+          ]"
+        />
         <BackgroundPicker
           v-model="selected"
           :options="props.options"

packages/stage-ui/src/components/scenarios/dialogs/background-picker/background-picker.vue

@@ -206,7 +206,7 @@ async function applySelection(isImport = false) {
 </script>
 
 <template>
-  <div class="h-full min-h-0 flex flex-col">
+  <div class="h-full min-h-0 flex flex-col py-2">
     <div class="flex-1 overflow-x-hidden overflow-y-auto overscroll-contain p-1 scrollbar-none">
       <div class="flex flex-col gap-4">
         <div class="grid grid-cols-2 gap-3 md:grid-cols-3">

packages/stage-ui/src/components/scenarios/dialogs/model-selector/model-selector-dialog.vue

@@ -45,7 +45,17 @@ onMounted(() => screenSafeArea.update())
     </DrawerTrigger>
     <DrawerPortal v-if="showDialog">
       <DrawerOverlay class="fixed inset-0" />
-      <DrawerContent class="fixed bottom-0 left-0 right-0 z-1000 mt-20 h-full max-h-[80%] flex flex-col rounded-t-2xl bg-neutral-50 px-4 pt-4 outline-none backdrop-blur-md sm:max-h-[75%] dark:bg-neutral-900/95" :style="{ paddingBottom: `${Math.max(Number.parseFloat(screenSafeArea.bottom.value.replace('px', '')), 24)}px` }">
+      <DrawerContent
+        :class="[
+          'fixed bottom-0 left-0 right-0 z-1000',
+          'mt-20 px-4 pt-4',
+          'flex flex-col',
+          'h-full max-h-170',
+          'rounded-t-[32px] outline-none backdrop-blur-md',
+          'bg-neutral-50/85 dark:bg-neutral-900/90',
+        ]"
+        :style="{ paddingBottom: `${Math.max(Number.parseFloat(screenSafeArea.bottom.value.replace('px', '')), 24)}px` }"
+      >
         <DrawerHandle />
         <ModelManager :selected-model="props.selectedModel" @close="showDialog = false" @pick="value => emits('pick', value)" />
       </DrawerContent>

packages/stage-ui/src/components/scenarios/dialogs/model-selector/model-selector.vue

@@ -190,8 +190,8 @@ vrmDialog.onChange(handleAddVRMModel)
             aspect="12/16"
             px-1 py-2
           >
-            <img v-if="model.previewImage" :src="model.previewImage" h-full w-full rounded-lg object-cover :class="[highlightDisplayModelCard && highlightDisplayModelCard === model.id ? 'ring-3 ring-primary-400' : 'ring-0 ring-transparent']" transition="all duration-200 ease-in-out">
-            <div v-else bg="neutral-100 dark:neutral-900" relative h-full w-full flex flex-col items-center justify-center gap-2 overflow-hidden rounded-lg :class="[highlightDisplayModelCard && highlightDisplayModelCard === model.id ? 'ring-3 ring-primary-400' : 'ring-0 ring-transparent']" transition="all duration-200 ease-in-out">
+            <img v-if="model.previewImage" :src="model.previewImage" h-full w-full rounded-xl object-cover :class="[highlightDisplayModelCard && highlightDisplayModelCard === model.id ? 'ring-3 ring-primary-400' : 'ring-0 ring-transparent']" transition="all duration-200 ease-in-out">
+            <div v-else bg="neutral-100 dark:neutral-900" relative h-full w-full flex flex-col items-center justify-center gap-2 overflow-hidden rounded-xl :class="[highlightDisplayModelCard && highlightDisplayModelCard === model.id ? 'ring-3 ring-primary-400' : 'ring-0 ring-transparent']" transition="all duration-200 ease-in-out">
               <div i-solar:question-square-bold-duotone text-4xl opacity-75 />
               <div translate-y="100%" absolute top-0 flex flex-col translate-x--7 rotate-45 scale-250 gap-0 opacity-5>
                 <div text="sm sm:sm" translate-x-7 translate-y--2 text-nowrap>
@@ -207,7 +207,7 @@ vrmDialog.onChange(handleAddVRMModel)
             </div>
           </div>
           <div w-full flex flex-col>
-            <div w-full flex-1 p-2>
+            <div w-full flex-1 px-2 py-4>
               <EditableRoot
                 v-slot="{ isEditing }"
                 :default-value="model.name"

packages/stage-ui/src/components/scenarios/dialogs/onboarding/onboarding-dialog.vue

@@ -44,9 +44,29 @@ onMounted(() => screenSafeArea.update())
   </DialogRoot>
   <DrawerRoot v-else :open="showDialog" should-scale-background @update:open="value => showDialog = value">
     <DrawerPortal>
-      <DrawerOverlay class="fixed inset-0" />
-      <DrawerContent class="fixed bottom-0 left-0 right-0 z-1000 mt-20 h-full max-h-[96%] flex flex-col rounded-t-2xl bg-neutral-50 px-4 pt-4 outline-none backdrop-blur-md dark:bg-neutral-900/95" :style="{ paddingBottom: `${Math.max(Number.parseFloat(screenSafeArea.bottom.value.replace('px', '')), 24)}px` }">
-        <DrawerHandle />
+      <DrawerOverlay
+        :class="[
+          'fixed inset-0 z-900',
+          'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0',
+          'bg-black/30 backdrop-blur-sm',
+        ]"
+      />
+      <DrawerContent
+        :class="[
+          'fixed bottom-0 left-0 right-0 z-1000',
+          'mt-20 px-4 pt-4',
+          'flex flex-col',
+          'h-full max-h-[90%]',
+          'rounded-t-[32px] outline-none backdrop-blur-md',
+          'bg-neutral-50/85 dark:bg-neutral-900/90',
+        ]"
+        :style="{ paddingBottom: `${Math.max(Number.parseFloat(screenSafeArea.bottom.value.replace('px', '')), 24)}px` }"
+      >
+        <DrawerHandle
+          :class="[
+            '[div&]:bg-neutral-400 [div&]:dark:bg-neutral-600',
+          ]"
+        />
         <div class="min-h-0 min-w-0 w-full flex flex-1 flex-col overflow-hidden">
           <Onboarding :extra-steps="props.extraSteps" @configured="emit('configured')" @skipped="emit('skipped')" />
         </div>

packages/ui/src/components/misc/button.vue

@@ -44,7 +44,7 @@ const variantClasses: Record<ButtonVariant, Record<ButtonTheme, {
   'primary': {
     default: {
       default: [
-        'rounded-lg',
+        'rounded-xl',
         'backdrop-blur-md',
         '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',
@@ -57,7 +57,7 @@ const variantClasses: Record<ButtonVariant, Record<ButtonTheme, {
   'secondary': {
     default: {
       default: [
-        'rounded-lg',
+        'rounded-xl',
         'backdrop-blur-md',
         'bg-neutral-100/55 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',
@@ -70,7 +70,7 @@ const variantClasses: Record<ButtonVariant, Record<ButtonTheme, {
   'secondary-muted': {
     default: {
       default: [
-        'rounded-lg',
+        'rounded-xl',
         'backdrop-blur-md',
         'hover:bg-neutral-50/50 active:bg-neutral-50/90 hover:dark:bg-neutral-800/50 active:dark:bg-neutral-800/90',
         'border-2 border-solid border-neutral-100/60 dark:border-neutral-800/30',
@@ -83,7 +83,7 @@ const variantClasses: Record<ButtonVariant, Record<ButtonTheme, {
   'danger': {
     default: {
       default: [
-        'rounded-lg',
+        'rounded-xl',
         'backdrop-blur-md',
         '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-2 focus:ring-red-300/30 dark:focus:ring-red-600/60 dark:focus:ring-red-600/30',
@@ -95,7 +95,7 @@ const variantClasses: Record<ButtonVariant, Record<ButtonTheme, {
   'caution': {
     default: {
       default: [
-        'rounded-lg',
+        'rounded-xl',
         'backdrop-blur-md',
         'bg-amber-400/20 hover:bg-amber-400/25 active:bg-amber-400/35 dark:bg-amber-500/20 dark:hover:bg-amber-500/30 dark:active:bg-amber-500/35',
         'focus:ring-2 focus:ring-amber-300/40 dark:focus:ring-amber-400/40',