Tune Studio display tokens for rails, radius, and amber CTA.

Co-authored-by: Cursor <cursoragent@cursor.com>

assets/css/display.css

@@ -19,6 +19,7 @@
   --card-pad: 0.75rem;
   --display-type-title: 1.75rem;
   --display-type-body: 0.875rem;
+  --display-viewer-radius: 0.75rem;
 }
 
 [data-display='studio'] {
@@ -27,6 +28,31 @@
   --card-pad: 1rem;
   --display-type-title: 1.875rem;
   --display-type-body: 0.9375rem;
+  --display-viewer-radius: 8px;
+}
+
+[data-display] .display-title {
+  font-size: var(--display-type-title);
+}
+
+[data-display] .display-body {
+  font-size: var(--display-type-body);
+}
+
+[data-display] .display-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--chrome-gap);
+}
+
+[data-display] .display-card {
+  border-radius: var(--display-radius);
+  border: 1px solid var(--display-border);
+  padding: var(--card-pad);
+}
+
+[data-display] .display-viewer {
+  border-radius: var(--display-viewer-radius);
 }
 
 [data-display] .display-rail {
@@ -42,6 +68,8 @@
   border: 1px solid var(--display-border);
   padding: 0.5rem 1rem;
   font-size: var(--display-type-body);
+  color: var(--display-fg);
+  background: transparent;
   outline: none;
   transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
 }
@@ -68,8 +96,14 @@
   padding: 0.625rem 1.25rem;
 }
 
+[data-display='classic'] .display-rail__seg {
+  min-height: 2.25rem;
+  padding: 0.375rem 0.75rem;
+  font-weight: 500;
+}
+
 [data-display] .display-cta {
-  border-radius: calc(var(--display-radius) + 4px);
+  border-radius: var(--display-radius);
   background: var(--display-amber);
   color: var(--display-amber-fg);
   font-weight: 600;
@@ -78,3 +112,7 @@
 [data-display] .display-cta:focus-visible {
   box-shadow: 0 0 0 2px var(--display-focus);
 }
+
+[data-display] .display-control {
+  border-radius: var(--display-radius);
+}

components/studio2/Bench.vue

@@ -1,13 +1,13 @@
 <template>
- <main class="w-full min-w-0 space-y-5 p-4 md:p-6 xl:p-8" :data-display="displayMode">
+ <main class="display-stack w-full min-w-0 p-4 md:p-6 xl:p-8" :data-display="displayMode">
   <header class="flex flex-wrap items-end justify-between gap-4">
    <div>
-    <h1 class="font-display text-3xl font-bold tracking-tight text-zinc-50">Studio 2</h1>
-    <p class="mt-1 text-sm text-zinc-400">One hero. Every shot.</p>
+    <h1 class="display-title font-display font-bold tracking-tight text-zinc-50">Studio 2</h1>
+    <p class="display-body mt-1 text-zinc-400">One hero. Every shot.</p>
    </div>
    <div class="flex flex-wrap items-center gap-3">
-    <label class="text-sm text-zinc-300">Folder
-     <select v-model="form.folderId" class="ml-2 rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 outline-none ring-amber-300/40 focus:ring-2">
+    <label class="display-body text-zinc-300">Folder
+     <select v-model="form.folderId" class="display-control ml-2 border border-white/10 bg-zinc-900 px-3 py-2 outline-none ring-amber-300/40 focus:ring-2">
       <option v-for="f in library.folders" :key="f.id" :value="f.id">{{ f.name }}</option>
      </select>
     </label>
@@ -28,9 +28,9 @@
    </div>
   </header>
 
-  <div class="min-w-0 space-y-3" style="gap: var(--chrome-gap)">
-   <label v-if="isClassic" class="block text-sm text-zinc-300">Task
-    <select :value="form.mode" class="mt-1 w-full max-w-xs rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 capitalize outline-none ring-amber-300/40 focus:ring-2" @change="chooseTask(($event.target as HTMLSelectElement).value)">
+  <div class="display-stack min-w-0">
+   <label v-if="isClassic" class="display-body block text-zinc-300">Task
+    <select :value="form.mode" class="display-control mt-1 w-full max-w-xs border border-white/10 bg-zinc-900 px-3 py-2 capitalize outline-none ring-amber-300/40 focus:ring-2" @change="onTaskSelect">
      <option v-for="task in tasks" :key="task" :value="task" class="capitalize">{{ task }}</option>
     </select>
    </label>
@@ -46,8 +46,8 @@
    </nav>
 
    <div v-if="form.mode!=='music'" class="min-w-0">
-    <label v-if="isClassic" class="block text-sm text-zinc-300">Model
-     <select v-model="form.engine" class="mt-1 w-full max-w-md rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 outline-none ring-amber-300/40 focus:ring-2">
+    <label v-if="isClassic" class="display-body block text-zinc-300">Model
+     <select v-model="form.engine" class="display-control mt-1 w-full max-w-md border border-white/10 bg-zinc-900 px-3 py-2 outline-none ring-amber-300/40 focus:ring-2">
       <option v-for="opt in engineOptions" :key="opt.value" :value="opt.value" :disabled="opt.disabled">{{ opt.label }}{{ opt.hint ? ' — '+opt.hint : '' }}</option>
      </select>
     </label>
@@ -68,12 +68,12 @@
      </button>
     </div>
    </div>
-   <p v-else class="text-sm text-zinc-400">Model · YuE2</p>
+   <p v-else class="display-body text-zinc-400">Model · YuE2</p>
   </div>
 
   <div class="grid min-w-0 gap-6 xl:grid-cols-[minmax(0,3fr)_minmax(24rem,2fr)] 2xl:gap-8">
    <section class="min-w-0 space-y-4">
-    <div class="relative flex min-h-80 items-center justify-center overflow-hidden rounded-3xl border border-white/10 bg-black">
+    <div class="display-viewer relative flex min-h-80 items-center justify-center overflow-hidden border border-white/10 bg-black">
      <button
       v-if="selected && xaigen && isStudio"
       type="button"
@@ -139,7 +139,7 @@
      </div>
     </div>
 
-    <section v-if="form.mode!=='music'" aria-label="Source" class="rounded-2xl border border-white/10 p-3">
+    <section v-if="form.mode!=='music'" aria-label="Source" class="display-card">
      <div class="mb-3 flex flex-wrap items-start justify-between gap-3">
       <h2 class="text-xs uppercase tracking-wider text-zinc-400">Source</h2>
       <div v-if="isStudio" class="flex flex-wrap gap-4 text-sm text-zinc-300" aria-label="Identity locks">
@@ -210,7 +210,7 @@
     </template>
 
     <p v-if="error" role="alert" class="text-sm text-red-300">{{ error }}</p>
-    <button type="button" :disabled="submitting" class="w-full rounded-2xl bg-amber-300 p-4 font-semibold text-black outline-none ring-amber-300/60 focus-visible:ring-2 disabled:opacity-50" @click="queue">{{ submitting?'Queuing…':'Queue' }}</button>
+    <button type="button" :disabled="submitting" class="display-cta w-full p-4 outline-none disabled:opacity-50" @click="queue">{{ submitting?'Queuing…':'Queue' }}</button>
 
     <h2 class="text-sm font-semibold text-zinc-300">Job queue</h2>
     <div v-for="job in upscales.filter(j=>j.folderId===form.folderId && ['queued','running'].includes(j.status))" :key="job.id" class="space-y-2 rounded-xl border border-amber-300/25 bg-zinc-900 p-4 text-sm" role="status">
@@ -392,6 +392,7 @@ function chooseTask(task:string){
  }
  const was=video.value;form.mode=task;form.startClipId='';if(video.value!==was){form.engine=video.value?(xaigen && form.engine==='ltx'?'ltx':'minimax'):'flux';form.settings.steps=video.value?8:24;form.settings.cfg=video.value?1.5:4}
 }
+function onTaskSelect(event:Event){chooseTask((event.target as HTMLSelectElement).value)}
 function chooseClip(id:string){if(!id){form.startClipId='';return}const clip=clips.value.find((c:any)=>c.id===id);if(clip){try{Object.assign(form,bindClip(form,clip,xaigen,loraMemory))}catch(e:any){error.value=e?.message||'Could not copy clip settings.';form.startClipId=clip.id;form.mode='extend';form.engine=xaigen && form.engine==='ltx'?'ltx':'minimax'}}}
 function selectOutput(item:any){selected.value=item;if(form.mode==='extend' && item?.kind==='clip')chooseClip(item.id)}
 function restore(item:any){Object.assign(form,restoreAll(form,item,xaigen,loraMemory));form.guides=form.guides||[];batchText.value=''}