@stacksjs/defaults 0.75.328 → 0.75.330

package/resources/components/Dashboard/Feedback/FeedbackForm.stx

@@ -221,7 +221,7 @@ function another() {
           </label>
 
           <label class="block mb-4">
-            <span class="block mb-1.5 font-medium text-neutral-700 text-sm dark:text-neutral-200">Details <span class="font-normal text-neutral-400">(optional)</span></span>
+            <span class="block mb-1.5 font-medium text-neutral-700 text-sm dark:text-neutral-200">Details <span class="font-normal text-neutral-500 dark:text-neutral-400">(optional)</span></span>
             <textarea
               x-model="description"
               rows="6"
@@ -233,7 +233,7 @@ function another() {
           </label>
 
           <div class="mb-5">
-            <span class="block mb-1.5 font-medium text-neutral-700 text-sm dark:text-neutral-200">Screenshot <span class="font-normal text-neutral-400">(optional)</span></span>
+            <span class="block mb-1.5 font-medium text-neutral-700 text-sm dark:text-neutral-200">Screenshot <span class="font-normal text-neutral-500 dark:text-neutral-400">(optional)</span></span>
 
             <div :if="screenshot()" class="flex gap-3 items-center p-3 bg-neutral-50 dark:bg-neutral-800/50 border border-neutral-200 rounded-lg dark:border-neutral-700">
               <img :src="preview()" alt="The screenshot you chose" class="object-cover h-14 w-14 bg-white dark:bg-neutral-900 border border-neutral-200 rounded dark:border-neutral-700" />
@@ -246,7 +246,7 @@ function another() {
             <label :else class="flex flex-col items-center justify-center px-4 py-6 text-center border border-dashed border-neutral-300 rounded-lg dark:border-neutral-600 hover:border-blue-400 dark:hover:border-blue-600 transition-colors cursor-pointer" @dragover.prevent @drop.prevent="drop($event)">
               <span class="h-6 w-6 text-neutral-400 i-hugeicons-image-upload"></span>
               <span class="mt-2 font-medium text-neutral-700 text-sm dark:text-neutral-200">Choose an image, drop it here, or paste it</span>
-              <span class="mt-1 text-neutral-400 text-xs">PNG, JPEG, WebP or GIF, up to {{ megabytes(sizeLimit()) }}</span>
+              <span class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">PNG, JPEG, WebP or GIF, up to {{ megabytes(sizeLimit()) }}</span>
               <input
                 ref="feedbackScreenshotInput"
                 type="file"
@@ -269,7 +269,7 @@ function another() {
           </button>
         </form>
 
-        <p class="mt-4 text-center text-neutral-400 text-xs dark:text-neutral-500">
+        <p class="mt-4 text-center text-neutral-500 text-xs dark:text-neutral-500">
           This link lets you send feedback. It does not sign you in, and it cannot read anything back.
         </p>
       </div>

package/resources/components/Dashboard/FileViewer/MediaCard.stx

@@ -97,6 +97,6 @@ const badgeClass = derived(() => kind() === 'video'
   </div>
   <div class="px-3 py-2.5">
     <p :title="currentItem().name" class="font-medium text-[13px] text-stone-800 truncate dark:text-white">{{ currentItem().name }}</p>
-    <p class="mt-0.5 capitalize text-[11px] text-stone-400 dark:text-neutral-500">{{ currentItem().type === 'folder' ? 'Folder' : kind() }}</p>
+    <p class="mt-0.5 capitalize text-[11px] text-stone-500 dark:text-neutral-500">{{ currentItem().type === 'folder' ? 'Folder' : kind() }}</p>
   </div>
 </div>

package/resources/components/Dashboard/FileViewer/MediaInfoPanel.stx

@@ -90,10 +90,10 @@ const kindLabel = derived(() => currentItem().type === 'folder' ? 'Folder' : `${
   </div>
   <h4 class="mt-4 break-words font-semibold text-[15px] text-stone-800 dark:text-white">{{ currentItem().name }}</h4>
   <dl class="mt-4 space-y-3 text-[13px]">
-    <div class="flex gap-4 items-start justify-between"><dt class="text-stone-400 dark:text-neutral-500">Type</dt><dd class="capitalize font-medium text-right text-stone-700 dark:text-neutral-200">{{ kindLabel() }}</dd></div>
-    <div class="flex gap-4 items-start justify-between"><dt class="text-stone-400 dark:text-neutral-500">Size</dt><dd class="font-medium text-right text-stone-700 dark:text-neutral-200">{{ sizeLabel() }}</dd></div>
-    <div class="flex gap-4 items-start justify-between"><dt class="text-stone-400 dark:text-neutral-500">Location</dt><dd class="break-all font-medium text-right text-stone-700 dark:text-neutral-200">{{ locationLabel() }}</dd></div>
-    <div class="flex gap-4 items-start justify-between"><dt class="text-stone-400 dark:text-neutral-500">Modified</dt><dd class="font-medium text-right text-stone-700 dark:text-neutral-200">{{ formatWhen(currentItem().lastModified) }}</dd></div>
+    <div class="flex gap-4 items-start justify-between"><dt class="text-stone-500 dark:text-neutral-500">Type</dt><dd class="capitalize font-medium text-right text-stone-700 dark:text-neutral-200">{{ kindLabel() }}</dd></div>
+    <div class="flex gap-4 items-start justify-between"><dt class="text-stone-500 dark:text-neutral-500">Size</dt><dd class="font-medium text-right text-stone-700 dark:text-neutral-200">{{ sizeLabel() }}</dd></div>
+    <div class="flex gap-4 items-start justify-between"><dt class="text-stone-500 dark:text-neutral-500">Location</dt><dd class="break-all font-medium text-right text-stone-700 dark:text-neutral-200">{{ locationLabel() }}</dd></div>
+    <div class="flex gap-4 items-start justify-between"><dt class="text-stone-500 dark:text-neutral-500">Modified</dt><dd class="font-medium text-right text-stone-700 dark:text-neutral-200">{{ formatWhen(currentItem().lastModified) }}</dd></div>
   </dl>
   <span :if="currentItem().shared" class="inline-flex gap-1 items-center self-start mt-5 px-2 py-1 font-medium text-[11px] text-indigo-700 dark:text-indigo-300 bg-indigo-100 dark:bg-indigo-500/15 rounded-full"><span class="h-3 w-3 i-hugeicons-share-01"></span>Public disk</span>
 </div>

package/resources/components/Dashboard/GlobalSearch.stx

@@ -152,7 +152,7 @@ onDestroy(() => {
         @input="scheduleSearch($event.target.value)"
       />
       <span :if="isSearching()" class="shrink-0 h-5 w-5 text-blue-500 animate-spin i-hugeicons-loading-03"></span>
-      <kbd :if="!isSearching()" class="shrink-0 px-1.5 py-0.5 font-medium text-[10px] text-neutral-400 bg-neutral-100 dark:bg-neutral-700 border border-neutral-200 rounded dark:border-neutral-600">
+      <kbd :if="!isSearching()" class="shrink-0 px-1.5 py-0.5 font-medium text-[10px] text-neutral-500 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-700 border border-neutral-200 rounded dark:border-neutral-600">
         ESC
       </kbd>
     </div>
@@ -170,7 +170,7 @@ onDestroy(() => {
       <template :if="!error() && Object.keys(results()).length > 0">
         <template :for="group in resultGroups()">
           <div class="pb-1 pt-3 px-3">
-            <h3 class="px-1 font-semibold text-neutral-400 text-xs tracking-wider uppercase">
+            <h3 class="px-1 font-semibold text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">
               {{ group.type }}
             </h3>
           </div>
@@ -203,11 +203,11 @@ onDestroy(() => {
       </div>
 
       <div :if="!error() && !query().trim() && !isSearching()" class="px-4 py-8 text-center">
-        <p class="text-neutral-400 text-sm">Search fields declared by each model's useSearch trait.</p>
+        <p class="text-neutral-500 text-sm dark:text-neutral-400">Search fields declared by each model's useSearch trait.</p>
       </div>
     </div>
 
-    <div class="flex gap-4 items-center px-4 py-2.5 text-neutral-400 text-xs border-neutral-200 border-t dark:border-neutral-700">
+    <div class="flex gap-4 items-center px-4 py-2.5 text-neutral-500 text-xs dark:text-neutral-400 border-neutral-200 border-t dark:border-neutral-700">
       <span class="flex gap-1 items-center">
         <kbd class="px-1 py-0.5 text-[10px] bg-neutral-100 dark:bg-neutral-700 border border-neutral-200 rounded dark:border-neutral-600">↑↓</kbd>
         Navigate

package/resources/components/Dashboard/Infrastructure/CloudDashboard.stx

@@ -243,7 +243,7 @@ onMount(() => {
     </div>
   </section>
 
-  <footer :if="snapshot()?.generatedAt" class="text-neutral-400 text-right text-xs dark:text-neutral-500">Snapshot {{ formatDate(snapshot()?.generatedAt || null) }}</footer>
+  <footer :if="snapshot()?.generatedAt" class="text-neutral-500 text-right text-xs dark:text-neutral-500">Snapshot {{ formatDate(snapshot()?.generatedAt || null) }}</footer>
 
   <CloudDetailsDialog :open="Boolean(selectedResource())" :item="selectedResource()" @close="closeResource" />
 </div>

package/resources/components/Dashboard/Infrastructure/DnsDashboard.stx

@@ -254,7 +254,7 @@ onMount(() => {
   <section class="overflow-hidden bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
     <header class="flex items-center justify-between px-5 py-4 border-b border-neutral-200 dark:border-neutral-700">
       <div><h2 class="font-semibold text-neutral-900 dark:text-white">Nameservers</h2><p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">Configured delegation targets.</p></div>
-      <span class="font-mono text-neutral-400 text-xs">{{ nameservers().length }}</span>
+      <span class="font-mono text-neutral-500 text-xs dark:text-neutral-400">{{ nameservers().length }}</span>
     </header>
     <div :if="nameservers().length > 0" class="grid gap-3 sm:grid-cols-2 p-5">
       <div :for="nameserver in nameservers()" class="flex gap-3 items-center p-3 bg-neutral-50 dark:bg-neutral-800 rounded-lg">
@@ -263,7 +263,7 @@ onMount(() => {
       </div>
     </div>
     <p :if="nameservers().length === 0" class="p-5 text-neutral-500 text-sm dark:text-neutral-400">No nameservers configured.</p>
-    <p :if="generatedAt()" class="px-5 py-3 text-neutral-400 text-xs dark:text-neutral-500 bg-neutral-50 dark:bg-neutral-800/50 border-neutral-100 border-t dark:border-neutral-800">Snapshot {{ formatDate(generatedAt()) }}</p>
+    <p :if="generatedAt()" class="px-5 py-3 text-neutral-500 text-xs dark:text-neutral-500 bg-neutral-50 dark:bg-neutral-800/50 border-neutral-100 border-t dark:border-neutral-800">Snapshot {{ formatDate(generatedAt()) }}</p>
   </section>
 
   <DnsRecordDialog :open="Boolean(selectedRecord())" :record="selectedRecord()" @close="closeRecord" />

package/resources/components/Dashboard/Infrastructure/LogsDashboard.stx

@@ -266,7 +266,7 @@ onDestroy(() => {
     <div class="p-5 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
       <div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
         <div><h2 class="font-semibold text-neutral-900 dark:text-white">Query logs</h2><p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">Search message, project, file, and stack trace.</p></div>
-        <p :if="generatedAt()" class="text-neutral-400 text-xs dark:text-neutral-500">Snapshot {{ formatDate(generatedAt()) }}</p>
+        <p :if="generatedAt()" class="text-neutral-500 text-xs dark:text-neutral-500">Snapshot {{ formatDate(generatedAt()) }}</p>
       </div>
       <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3 mt-5">
         <label class="block relative sm:col-span-2 xl:col-span-1">
@@ -296,7 +296,7 @@ onDestroy(() => {
             <td class="px-5 py-4 text-neutral-500 whitespace-nowrap dark:text-neutral-400">{{ formatDate(record.timestamp) }}</td>
             <td class="px-5 py-4"><LogLevelBadge :type="record.type" /></td>
             <td class="px-5 py-4 font-mono text-neutral-700 text-xs dark:text-neutral-300">{{ record.source || 'Not recorded' }}</td>
-            <td class="px-5 py-4 max-w-md"><p class="font-medium text-neutral-900 dark:text-white">{{ record.message }}</p><p :if="record.file" class="mt-1 font-mono text-neutral-400 text-xs truncate dark:text-neutral-500">{{ record.file }}</p></td>
+            <td class="px-5 py-4 max-w-md"><p class="font-medium text-neutral-900 dark:text-white">{{ record.message }}</p><p :if="record.file" class="mt-1 font-mono text-neutral-500 text-xs truncate dark:text-neutral-500">{{ record.file }}</p></td>
             <td class="px-5 py-4 text-neutral-600 whitespace-nowrap dark:text-neutral-300">{{ record.project || 'Not recorded' }}</td>
             <td class="px-5 py-4 text-right"><Button variant="ghost" iconOnly :ariaLabel="'Inspect log ' + record.id" @click="openLog(record)"><span class="block h-5 w-5 i-hugeicons-view"></span></Button></td>
           </tr>

package/resources/components/Dashboard/Infrastructure/MailboxesDashboard.stx

@@ -217,7 +217,7 @@ onMount(() => {
 
   <section class="grid gap-4 grid-cols-1 xl:grid-cols-2">
     <div class="overflow-hidden bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
-      <header class="flex items-center justify-between px-5 py-4 border-b border-neutral-200 dark:border-neutral-700"><div><h2 class="font-semibold text-neutral-900 dark:text-white">Forwarding</h2><p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">Configured address copies.</p></div><span class="font-mono text-neutral-400 text-xs">{{ forwards().length }}</span></header>
+      <header class="flex items-center justify-between px-5 py-4 border-b border-neutral-200 dark:border-neutral-700"><div><h2 class="font-semibold text-neutral-900 dark:text-white">Forwarding</h2><p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">Configured address copies.</p></div><span class="font-mono text-neutral-500 text-xs dark:text-neutral-400">{{ forwards().length }}</span></header>
       <div :if="forwards().length > 0" class="divide-neutral-100 divide-y dark:divide-neutral-800">
         <div :for="forward in forwards()" class="px-5 py-4">
           <p class="font-medium font-mono text-neutral-900 text-sm dark:text-white">{{ forward.source }}</p>
@@ -228,12 +228,12 @@ onMount(() => {
     </div>
 
     <div class="overflow-hidden bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
-      <header class="flex items-center justify-between px-5 py-4 border-b border-neutral-200 dark:border-neutral-700"><div><h2 class="font-semibold text-neutral-900 dark:text-white">Retention</h2><p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">Configured mail storage policy.</p></div><span class="font-mono text-neutral-400 text-xs">{{ server().storage.length }}</span></header>
+      <header class="flex items-center justify-between px-5 py-4 border-b border-neutral-200 dark:border-neutral-700"><div><h2 class="font-semibold text-neutral-900 dark:text-white">Retention</h2><p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">Configured mail storage policy.</p></div><span class="font-mono text-neutral-500 text-xs dark:text-neutral-400">{{ server().storage.length }}</span></header>
       <dl :if="server().storage.length > 0" class="grid gap-4 sm:grid-cols-2 p-5 text-sm">
         <div :for="item in server().storage"><dt class="capitalize text-neutral-500 dark:text-neutral-400">{{ storageLabel(item) }}</dt><dd class="mt-1 font-medium text-neutral-900 dark:text-white">{{ item.value }}</dd></div>
       </dl>
       <p :if="server().storage.length === 0" class="p-5 text-neutral-500 text-sm dark:text-neutral-400">No storage policy configured.</p>
-      <p :if="generatedAt()" class="px-5 py-3 text-neutral-400 text-xs dark:text-neutral-500 bg-neutral-50 dark:bg-neutral-800/50 border-neutral-100 border-t dark:border-neutral-800">Snapshot {{ formatDate(generatedAt()) }}</p>
+      <p :if="generatedAt()" class="px-5 py-3 text-neutral-500 text-xs dark:text-neutral-500 bg-neutral-50 dark:bg-neutral-800/50 border-neutral-100 border-t dark:border-neutral-800">Snapshot {{ formatDate(generatedAt()) }}</p>
     </div>
   </section>
 

package/resources/components/Dashboard/Infrastructure/ServerlessDashboard.stx

@@ -214,7 +214,7 @@ onMount(() => {
   <section :if="links().length > 0">
     <h2 class="font-semibold text-neutral-900 dark:text-white">Manifest relationships</h2>
     <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">Accessible relationship records derived from the same manifests.</p>
-    <ul class="grid gap-3 md:grid-cols-2 mt-4">
+    <ul class="grid gap-3 grid-cols-1 md:grid-cols-2 mt-4">
       <li :for="link in links()" class="flex gap-3 items-center p-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
         <span class="font-semibold text-neutral-900 text-sm truncate dark:text-white">{{ relationshipName(link.source) }}</span>
         <span class="shrink-0 px-2 py-1 text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded-full">{{ link.type }}</span>
@@ -240,7 +240,7 @@ onMount(() => {
     </div>
   </section>
 
-  <footer :if="generatedAt()" class="text-neutral-400 text-right text-xs dark:text-neutral-500">Snapshot {{ formatDate(generatedAt()) }}</footer>
+  <footer :if="generatedAt()" class="text-neutral-500 text-right text-xs dark:text-neutral-500">Snapshot {{ formatDate(generatedAt()) }}</footer>
 
   <CloudDetailsDialog :open="Boolean(selectedResource())" :item="selectedResource()" @close="closeResource" />
 </div>

package/resources/components/Dashboard/Infrastructure/ServersDashboard.stx

@@ -268,7 +268,7 @@ onMount(() => {
         <h2 class="font-semibold text-neutral-900 dark:text-white">Configured request path</h2>
         <p class="mt-1 text-neutral-500 text-xs dark:text-neutral-400">A structural view of declared routing, with no inferred health data.</p>
       </div>
-      <p class="text-neutral-400 text-xs dark:text-neutral-500">Source: config/cloud.ts</p>
+      <p class="text-neutral-500 text-xs dark:text-neutral-500">Source: config/cloud.ts</p>
     </div>
     <div class="grid gap-3 grid-cols-1 md:grid-cols-[1fr_auto_1fr_auto_1fr] mt-5">
       <div class="flex gap-3 items-center p-4 bg-rose-50 dark:bg-rose-950/25 border border-rose-100 rounded-xl dark:border-rose-900/50">
@@ -312,7 +312,7 @@ onMount(() => {
       <div class="overflow-hidden bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
         <div class="flex items-center justify-between px-5 py-4 border-b border-neutral-200 dark:border-neutral-700">
           <div><h3 class="font-semibold text-neutral-900 text-sm dark:text-white">Definitions</h3><p class="mt-0.5 text-neutral-500 text-xs dark:text-neutral-400">Desired compute configuration</p></div>
-          <span class="font-mono text-neutral-400 text-xs">{{ filteredServers().length }}</span>
+          <span class="font-mono text-neutral-500 text-xs dark:text-neutral-400">{{ filteredServers().length }}</span>
         </div>
         <div class="divide-neutral-100 divide-y dark:divide-neutral-800">
           <button :for="server in filteredServers()" type="button" class="flex gap-4 items-center px-5 py-4 w-full text-left hover:bg-neutral-50 dark:hover:bg-neutral-800/70" @click="inspectServer(server)">
@@ -327,7 +327,7 @@ onMount(() => {
       <div class="overflow-hidden bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
         <div class="flex items-center justify-between px-5 py-4 border-b border-neutral-200 dark:border-neutral-700">
           <div><h3 class="font-semibold text-neutral-900 text-sm dark:text-white">Deployments</h3><p class="mt-0.5 text-neutral-500 text-xs dark:text-neutral-400">Persisted provider state</p></div>
-          <span class="font-mono text-neutral-400 text-xs">{{ filteredDeployments().length }}</span>
+          <span class="font-mono text-neutral-500 text-xs dark:text-neutral-400">{{ filteredDeployments().length }}</span>
         </div>
         <div class="divide-neutral-100 divide-y dark:divide-neutral-800">
           <button :for="deployment in filteredDeployments()" type="button" class="flex gap-4 items-center px-5 py-4 w-full text-left hover:bg-neutral-50 dark:hover:bg-neutral-800/70" @click="inspectDeployment(deployment)">
@@ -352,7 +352,7 @@ onMount(() => {
         <article :for="event in events()" class="flex gap-3 px-5 py-4">
           <span :class="'mt-0.5 h-5 w-5 shrink-0 ' + eventIcon(event)"></span>
           <div class="flex-1 min-w-0"><p class="font-medium text-neutral-900 text-sm dark:text-white">{{ event.service }}</p><p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">{{ event.message }}</p></div>
-          <time class="shrink-0 text-neutral-400 text-xs dark:text-neutral-500">{{ formatDate(event.timestamp) }}</time>
+          <time class="shrink-0 text-neutral-500 text-xs dark:text-neutral-500">{{ formatDate(event.timestamp) }}</time>
         </article>
       </div>
     </div>
@@ -366,7 +366,7 @@ onMount(() => {
         </div>
         <p :if="environments().length === 0" class="text-neutral-500 text-sm dark:text-neutral-400">No environments configured.</p>
       </div>
-      <p :if="generatedAt()" class="mt-5 pt-4 text-neutral-400 text-xs dark:text-neutral-500 border-neutral-100 border-t dark:border-neutral-800">Snapshot {{ formatDate(generatedAt()) }}</p>
+      <p :if="generatedAt()" class="mt-5 pt-4 text-neutral-500 text-xs dark:text-neutral-500 border-neutral-100 border-t dark:border-neutral-800">Snapshot {{ formatDate(generatedAt()) }}</p>
     </div>
   </section>
 

package/resources/components/Dashboard/Kanban/KanbanBoardDashboard.stx

@@ -376,7 +376,7 @@
         <div>
           <h1 class="font-semibold text-2xl text-zinc-900 dark:text-zinc-100" :text="board.name"></h1>
           <p :if="board.description" class="mt-1 text-sm text-zinc-500" :text="board.description"></p>
-          <p class="mt-2 text-xs text-zinc-400">
+          <p class="mt-2 text-xs text-zinc-500 dark:text-zinc-400">
             <span :text="columns.length + ' columns'"></span>
             <span> · </span>
             <span :text="totalCards() + ' cards'"></span>

package/resources/components/Dashboard/Kanban/KanbanBoardsDashboard.stx

@@ -200,7 +200,7 @@
               class="mt-1 line-clamp-2 text-xs text-zinc-500"
               :text="board.description"
             ></p>
-            <p class="mt-3 text-xs text-zinc-400" :text="cardCountText(board.cardCount)"></p>
+            <p class="mt-3 text-xs text-zinc-500 dark:text-zinc-400" :text="cardCountText(board.cardCount)"></p>
           </div>
         </StxLink>
         <span class="absolute right-3 top-4 opacity-0 focus-within:opacity-100 group-hover:opacity-100 transition-opacity">
@@ -232,7 +232,7 @@
         </div>
 
         <div>
-          <label for="kanban-board-description" class="block mb-1 font-medium text-xs text-zinc-700 dark:text-zinc-300">Description <span class="text-zinc-400">(optional)</span></label>
+          <label for="kanban-board-description" class="block mb-1 font-medium text-xs text-zinc-700 dark:text-zinc-300">Description <span class="text-zinc-500 dark:text-zinc-400">(optional)</span></label>
           <textarea
             id="kanban-board-description"
             x-model="draftDescription"

package/resources/components/Dashboard/Kanban/KanbanCardDialog.stx

@@ -294,7 +294,7 @@ function formatTimestamp(iso: string | null | undefined): string {
               </div>
               <div class="px-2 py-1.5">
                 <p class="text-[10px] text-zinc-500 dark:text-zinc-400" :text="attachment.mimeType"></p>
-                <p class="text-[10px] text-zinc-400" :text="formatBytes(attachment.sizeBytes)"></p>
+                <p class="text-[10px] text-zinc-500 dark:text-zinc-400" :text="formatBytes(attachment.sizeBytes)"></p>
               </div>
             </li>
           </ul>
@@ -317,14 +317,14 @@ function formatTimestamp(iso: string | null | undefined): string {
             </div>
           </div>
 
-          <div :if="cardComments().length === 0 && !loadingCard()" class="italic text-xs text-zinc-400">No comments yet.</div>
+          <div :if="cardComments().length === 0 && !loadingCard()" class="italic text-xs text-zinc-500 dark:text-zinc-400">No comments yet.</div>
           <ul class="space-y-3">
             <li :for="comment in cardComments" class="flex gap-3">
               <span class="inline-flex flex-shrink-0 items-center justify-center h-7 w-7 font-medium text-[10px] text-white bg-violet-500 rounded-full" :text="initialsOf(comment.authorName, comment.authorEmail)"></span>
               <div class="flex-1 min-w-0">
                 <div class="flex flex-wrap gap-2 items-baseline">
                   <span class="font-medium text-xs text-zinc-700 dark:text-zinc-200" :text="comment.authorName || comment.authorEmail || 'Unknown'"></span>
-                  <span class="text-[10px] text-zinc-400" :text="formatTimestamp(comment.createdAt)"></span>
+                  <span class="text-[10px] text-zinc-500 dark:text-zinc-400" :text="formatTimestamp(comment.createdAt)"></span>
                   <template :if="editingCommentId() !== comment.id">
                     <Button variant="ghost" size="xs" @click="startCommentEdit(comment.id, comment.body)">Edit</Button>
                     <Button variant="ghost" size="xs" @click="requestDelete('comment', comment.id)"><span class="text-red-500">Delete</span></Button>
@@ -365,7 +365,7 @@ function formatTimestamp(iso: string | null | undefined): string {
 
           <div :if="!showLabelPicker()" class="flex flex-wrap gap-1">
             <span :for="label in cardLabels" :class="`px-2 py-0.5 text-xs font-medium rounded ${labelChipClass(label.color)}`" :text="label.name"></span>
-            <span :if="cardLabels().length === 0" class="italic text-xs text-zinc-400">None</span>
+            <span :if="cardLabels().length === 0" class="italic text-xs text-zinc-500 dark:text-zinc-400">None</span>
           </div>
 
           <div :if="showLabelPicker()" class="space-y-2">
@@ -407,11 +407,11 @@ function formatTimestamp(iso: string | null | undefined): string {
               <span class="inline-flex items-center justify-center h-6 w-6 font-medium text-[10px] text-white bg-violet-500 rounded-full" :text="initialsOf(assignee.name, assignee.email)"></span>
               <span :text="assignee.name || assignee.email || 'Unknown'"></span>
             </div>
-            <span :if="cardAssignees().length === 0" class="italic text-xs text-zinc-400">Unassigned</span>
+            <span :if="cardAssignees().length === 0" class="italic text-xs text-zinc-500 dark:text-zinc-400">Unassigned</span>
           </div>
 
           <div :if="showAssigneePicker()" class="overflow-y-auto space-y-1 max-h-48">
-            <p :if="kanban.users().length === 0" class="italic text-xs text-zinc-400">No users to assign.</p>
+            <p :if="kanban.users().length === 0" class="italic text-xs text-zinc-500 dark:text-zinc-400">No users to assign.</p>
             <button :for="user in kanban.users" type="button" :aria-pressed="String(cardAssignees().some(assignee => assignee.userId === user.id))" @click="toggleAssignee(user.id)" class="flex gap-2 items-center px-2 py-1.5 w-full text-left text-xs hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded">
               <span class="inline-flex flex-shrink-0 items-center justify-center h-6 w-6 font-medium text-[10px] text-white bg-violet-500 rounded-full" :text="initialsOf(user.name, user.email)"></span>
               <span class="flex-1 text-zinc-700 truncate dark:text-zinc-200" :text="user.name || user.email"></span>
@@ -426,8 +426,8 @@ function formatTimestamp(iso: string | null | undefined): string {
         </section>
 
         <section class="pt-3 border-t border-zinc-200 dark:border-zinc-800">
-          <p class="text-[10px] text-zinc-400">Created <span :text="formatTimestamp(openCard()?.createdAt)"></span></p>
-          <p :if="openCard()?.updatedAt && openCard()?.updatedAt !== openCard()?.createdAt" class="text-[10px] text-zinc-400">Updated <span :text="formatTimestamp(openCard()?.updatedAt)"></span></p>
+          <p class="text-[10px] text-zinc-500 dark:text-zinc-400">Created <span :text="formatTimestamp(openCard()?.createdAt)"></span></p>
+          <p :if="openCard()?.updatedAt && openCard()?.updatedAt !== openCard()?.createdAt" class="text-[10px] text-zinc-500 dark:text-zinc-400">Updated <span :text="formatTimestamp(openCard()?.updatedAt)"></span></p>
         </section>
       </aside>
     </div>

package/resources/components/Dashboard/Marketing/AbandonedCartsDashboard.stx

@@ -165,11 +165,11 @@ onMount(() => {
   <div :if="loadError()" role="alert" class="flex gap-4 items-center justify-between p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900"><span>{{ loadError() }}</span><Button variant="secondary" size="sm" @click="loadCarts()">Retry</Button></div>
 
   <section aria-label="Cart recovery metrics" class="grid gap-3 grid-cols-2 lg:grid-cols-5">
-    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Sitting there</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().open.toLocaleString() }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Carts abandoned or expired</p></article>
-    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Worth</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ money(summary().openValue) }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ money(summary().averageValue) }} average</p></article>
-    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Chased</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().contacted.toLocaleString() }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Written to and still cold</p></article>
-    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Recovered</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ money(summary().recoveredValue) }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ summary().recovered.toLocaleString() }} carts checked out after an email</p></article>
-    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Recovery rate</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ percentage(summary().recoveryRate) }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Of the carts actually chased</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Sitting there</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().open.toLocaleString() }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Carts abandoned or expired</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Worth</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ money(summary().openValue) }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">{{ money(summary().averageValue) }} average</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Chased</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().contacted.toLocaleString() }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Written to and still cold</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Recovered</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ money(summary().recoveredValue) }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">{{ summary().recovered.toLocaleString() }} carts checked out after an email</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Recovery rate</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ percentage(summary().recoveryRate) }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Of the carts actually chased</p></article>
   </section>
 
   <section :if="campaigns().length > 0" aria-label="Recovery campaigns" class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">

package/resources/components/Dashboard/Marketing/CampaignsDashboard.stx

@@ -273,11 +273,11 @@ onMount(() => {
   <div :if="loadError()" role="alert" class="flex gap-4 items-center justify-between p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900"><span>{{ loadError() }}</span><Button variant="secondary" size="sm" @click="loadCampaigns()">Retry</Button></div>
 
   <section aria-label="Campaign metrics" class="grid gap-3 grid-cols-2 lg:grid-cols-5">
-    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Campaigns</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().total }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Persisted records</p></article>
-    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Live</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().live }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Scheduled, sending, or active</p></article>
-    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Completed</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().sent }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Sent or completed</p></article>
-    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Recipients</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().recipients.toLocaleString() }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Persisted successful sends</p></article>
-    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Delivery issues</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().failedDeliveries.toLocaleString() }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Failed, bounced, or complained</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Campaigns</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().total }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Persisted records</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Live</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().live }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Scheduled, sending, or active</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Completed</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().sent }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Sent or completed</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Recipients</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().recipients.toLocaleString() }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Persisted successful sends</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Delivery issues</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().failedDeliveries.toLocaleString() }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Failed, bounced, or complained</p></article>
   </section>
 
   <section class="space-y-3">

package/resources/components/Dashboard/Marketing/MarketingListsDashboard.stx

@@ -206,10 +206,10 @@ onMount(() => {
   </div>
 
   <section aria-label="Email list metrics" class="grid gap-3 grid-cols-2 lg:grid-cols-4">
-    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Email lists</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().total }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ summary().active }} active</p></article>
-    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Memberships</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().subscribers.toLocaleString() }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Subscribed and pending</p></article>
-    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">New this week</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().newThisWeek.toLocaleString() }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Subscribed membership rows</p></article>
-    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Campaigns</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().campaigns.toLocaleString() }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Linked campaign records</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Email lists</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().total }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">{{ summary().active }} active</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Memberships</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().subscribers.toLocaleString() }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Subscribed and pending</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">New this week</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().newThisWeek.toLocaleString() }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Subscribed membership rows</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Campaigns</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().campaigns.toLocaleString() }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Linked campaign records</p></article>
   </section>
 
   <section class="space-y-3">

package/resources/components/Dashboard/Marketing/SocialPostsDashboard.stx

@@ -189,10 +189,10 @@ onMount(() => {
   <div :if="summary().failed > 0" class="flex gap-3 items-start p-4 text-red-800 text-sm dark:text-red-200 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900"><span class="shrink-0 mt-0.5 h-5 w-5 i-hugeicons-alert-02"></span><p>{{ summary().failed }} {{ summary().failed === 1 ? 'post has' : 'posts have' }} a failed status and may need review.</p></div>
 
   <section aria-label="Social post metrics" class="grid gap-3 grid-cols-2 lg:grid-cols-4">
-    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Social posts</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().total }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ summary().published }} published, {{ summary().drafts }} drafts</p></article>
-    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Scheduled</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().scheduled }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Persisted schedule times</p></article>
-    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Reach</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().reach.toLocaleString() }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Recorded platform reach</p></article>
-    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Engagement</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().engagement.toLocaleString() }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">Likes, shares, and comments</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Social posts</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().total }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">{{ summary().published }} published, {{ summary().drafts }} drafts</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Scheduled</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().scheduled }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Persisted schedule times</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Reach</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().reach.toLocaleString() }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Recorded platform reach</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Engagement</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ summary().engagement.toLocaleString() }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-500">Likes, shares, and comments</p></article>
   </section>
 
   <section class="space-y-3">

package/resources/components/Dashboard/Models/ModelsOverview.stx

@@ -204,7 +204,7 @@ onMount(() => {
             <div :if="model.apiUri" class="flex gap-2 items-center mt-4">
               <span class="inline-flex px-2 py-0.5 font-medium text-green-700 text-xs dark:text-green-300 bg-green-50 dark:bg-green-950/40 rounded">API</span>
               <code class="text-neutral-500 text-xs truncate dark:text-neutral-400">{{ model.apiUri }}</code>
-              <span class="ml-auto text-neutral-400 text-xs">{{ model.apiRoutes.length }} routes</span>
+              <span class="ml-auto text-neutral-500 text-xs dark:text-neutral-400">{{ model.apiRoutes.length }} routes</span>
             </div>
           </StxLink>
         </div>

package/resources/components/Dashboard/Navbar.stx

@@ -58,12 +58,12 @@ useClickOutside(userMenu, () => setDropdownOpen(false))
   <div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
     <StxLink
       to="/models"
-      class="flex relative flex-1 items-center pl-8 text-gray-400 sm:text-sm hover:text-gray-600 dark:hover:text-neutral-200 transition-colors"
+      class="flex relative flex-1 items-center pl-8 text-gray-500 sm:text-sm dark:text-gray-400 hover:text-gray-600 dark:hover:text-neutral-200 transition-colors"
       aria-label="Search model records"
     >
       <span aria-hidden="true" class="absolute left-0 h-5 w-5 i-hugeicons-search-01"></span>
       <span>Search model records</span>
-      <kbd class="ml-auto px-1.5 py-0.5 font-medium text-[10px] text-neutral-400 bg-neutral-100 dark:bg-neutral-700 border border-neutral-200 rounded dark:border-neutral-600">
+      <kbd class="ml-auto px-1.5 py-0.5 font-medium text-[10px] text-neutral-500 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-700 border border-neutral-200 rounded dark:border-neutral-600">
         ⌘K
       </kbd>
     </StxLink>

package/resources/components/Dashboard/Operations/AuditDashboard.stx

@@ -12,5 +12,5 @@ onMount(() => void load())
   <PageHeader title="Operations" description="Inspect the append-only operator event stream with actor and operation correlation."><template #actions><Button variant="secondary" :loading="loading()" @click="load"><span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button></template></PageHeader>
   <OperationsNavigation active="audit" />
   <section class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4"><StatsCard title="Events" :value="String(data()?.summary.events || 0)" icon="i-hugeicons-activity-03" iconBg="primary" :loading="loading()" /><StatsCard title="Operators" :value="String(data()?.summary.operators || 0)" icon="i-hugeicons-user-group" iconBg="neutral" :loading="loading()" /><StatsCard title="Failures" :value="String(data()?.summary.failures || 0)" icon="i-hugeicons-alert-02" iconBg="warning" :loading="loading()" /><StatsCard title="Latest sequence" :value="String(data()?.summary.latestSequence || 0)" icon="i-hugeicons-list-view" iconBg="success" :loading="loading()" /></section>
-  <section class="overflow-hidden bg-white dark:bg-neutral-900 border border-gray-200 rounded-lg dark:border-neutral-800"><div class="px-4 py-4 border-b border-gray-200 dark:border-neutral-800"><h2 class="font-semibold text-gray-900 dark:text-white">Operator events</h2><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Events are sequence ordered and retained in the ts-cloud control plane.</p></div><div :if="!loading() && !data()?.events.length" class="px-6 py-12 text-center text-gray-500 text-sm dark:text-neutral-400">No operator events have been recorded.</div><div class="overflow-auto max-h-[42rem] divide-gray-100 divide-y dark:divide-neutral-800"><div :for="event in data()?.events || []" class="grid gap-2 md:grid-cols-[5rem_1fr_10rem_12rem] px-4 py-3"><span class="font-mono text-gray-400 text-xs">#{{ event.sequence }}</span><div><p class="font-medium text-gray-900 text-sm dark:text-white">{{ event.type }}</p><p class="mt-1 font-mono text-gray-500 text-xs dark:text-neutral-400">{{ event.operationId || event.id }}</p></div><span class="text-gray-600 text-sm dark:text-neutral-300">{{ event.actorName }}</span><time class="text-gray-500 text-xs dark:text-neutral-400">{{ date(event.createdAt) }}</time></div></div></section>
+  <section class="overflow-hidden bg-white dark:bg-neutral-900 border border-gray-200 rounded-lg dark:border-neutral-800"><div class="px-4 py-4 border-b border-gray-200 dark:border-neutral-800"><h2 class="font-semibold text-gray-900 dark:text-white">Operator events</h2><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Events are sequence ordered and retained in the ts-cloud control plane.</p></div><div :if="!loading() && !data()?.events.length" class="px-6 py-12 text-center text-gray-500 text-sm dark:text-neutral-400">No operator events have been recorded.</div><div class="overflow-auto max-h-[42rem] divide-gray-100 divide-y dark:divide-neutral-800"><div :for="event in data()?.events || []" class="grid gap-2 md:grid-cols-[5rem_1fr_10rem_12rem] px-4 py-3"><span class="font-mono text-gray-500 text-xs dark:text-gray-400">#{{ event.sequence }}</span><div><p class="font-medium text-gray-900 text-sm dark:text-white">{{ event.type }}</p><p class="mt-1 font-mono text-gray-500 text-xs dark:text-neutral-400">{{ event.operationId || event.id }}</p></div><span class="text-gray-600 text-sm dark:text-neutral-300">{{ event.actorName }}</span><time class="text-gray-500 text-xs dark:text-neutral-400">{{ date(event.createdAt) }}</time></div></div></section>
 </div>

package/resources/components/Dashboard/Operations/OperationHistory.stx

@@ -55,7 +55,7 @@ function statusVariant(state: OperatorOperation['state']): 'default' | 'primary'
         <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ operation.actorName }} at {{ formatDate(operation.finishedAt || operation.createdAt) }}</p>
         <p :if="operation.error" class="mt-1 text-red-600 text-xs dark:text-red-400">{{ operation.error }}</p>
       </div>
-      <code class="font-mono text-[11px] text-gray-400 dark:text-neutral-500">{{ operation.id }}</code>
+      <code class="font-mono text-[11px] text-gray-500 dark:text-neutral-500">{{ operation.id }}</code>
     </li>
   </ul>
 </Card>

package/resources/components/Dashboard/Operations/RecoveryJobList.stx

@@ -26,7 +26,7 @@ function variant(status: RecoveryJob['status']): 'default' | 'primary' | 'succes
         <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ job.progress.phase || 'queued' }} · {{ formatDate(job.finishedAt || job.startedAt || job.createdAt) }}</p>
         <p :if="job.error" class="mt-1 text-red-600 text-xs dark:text-red-400">{{ job.error }}</p>
       </div>
-      <code class="font-mono text-[11px] text-gray-400 dark:text-neutral-500">{{ job.id }}</code>
+      <code class="font-mono text-[11px] text-gray-500 dark:text-neutral-500">{{ job.id }}</code>
     </li>
   </ul>
 </Card>

package/resources/components/Dashboard/Remote/RemoteConsole.stx

@@ -109,7 +109,7 @@ onMount(() => {
             <span class="h-4 w-4 i-hugeicons-command-line"></span>
             Open terminal
           </Button>
-          <span :if="!entry.terminal" class="text-gray-400 text-xs dark:text-neutral-500">Named commands only</span>
+          <span :if="!entry.terminal" class="text-gray-500 text-xs dark:text-neutral-500">Named commands only</span>
         </li>
       </template>
     </ul>

package/resources/components/Dashboard/Settings/SettingsDashboard.stx

@@ -220,7 +220,7 @@ void loadFiles()
           >
             <span class="flex-none h-4 w-4 i-hugeicons-settings-02"></span>
             <span class="flex-1 font-medium text-sm truncate">{{ file.title }}</span>
-            <span class="text-[10px] text-neutral-400">{{ file.size < 1024 ? file.size + ' B' : Math.round(file.size / 1024) + ' KB' }}</span>
+            <span class="text-[10px] text-neutral-500 dark:text-neutral-400">{{ file.size < 1024 ? file.size + ' B' : Math.round(file.size / 1024) + ' KB' }}</span>
           </button>
         </template>
       </nav>

package/resources/components/Dashboard/UI/Checkbox.stx

@@ -44,7 +44,7 @@ const iconClass = derived(() => [
 const labelClass = derived(() => [
   sizeClasses[liveSize()]?.label || sizeClasses.md.label,
   'font-medium',
-  liveDisabled() ? 'text-neutral-400 dark:text-neutral-500' : 'text-neutral-700 dark:text-neutral-200',
+  liveDisabled() ? 'text-neutral-500 dark:text-neutral-500' : 'text-neutral-700 dark:text-neutral-200',
 ].join(' '))
 const descriptionClass = derived(() => [
   sizeClasses[liveSize()]?.description || sizeClasses.md.description,

package/resources/components/Dashboard/UI/MetricCards.stx

@@ -26,7 +26,7 @@ const columns = useReactiveProp('columns', 'grid-cols-2 lg:grid-cols-4')
     <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
       <p class="text-gray-500 text-xs dark:text-neutral-400">{{ item.label }}</p>
       <p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ item.value }}</p>
-      <p :if="item.detail" class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ item.detail }}</p>
+      <p :if="item.detail" class="mt-1 text-gray-500 text-xs dark:text-neutral-500">{{ item.detail }}</p>
     </article>
   </template>
 </section>

package/resources/components/Dashboard/UI/Pagination.stx

@@ -100,7 +100,7 @@ function emitItemsPerPage(event: Event): void {
     </Button>
 
     <template :for="page in visiblePages()">
-      <span :if="typeof page !== 'number'" class="px-2 text-neutral-400 dark:text-neutral-500">...</span>
+      <span :if="typeof page !== 'number'" class="px-2 text-neutral-500 dark:text-neutral-500">...</span>
       <Button :if="typeof page === 'number' && page === currentPage()" @click="goToPage(page)">
         <span aria-current="page">{{ page }}</span>
       </Button>