@7365admin1/layer-common 3.2.2-staging.126 → 3.2.2-staging.127

package/components/AreaFormDialog.vue

@@ -1,30 +1,40 @@
 <template>
   <v-dialog v-model="showDialog" max-width="450">
-    <v-card>
-      <v-toolbar>
-        <template v-if="$slots.header">
-          <slot
-            name="header"
-            :title="
-              prop.mode === 'edit'
-                ? `Edit ${prop.entityType}`
-                : `Add New ${prop.entityType}`
-            "
-            :close="close"
-          />
-        </template>
-        <template v-else>
-          <v-row no-gutters class="fill-height px-6" align="center">
-            <span class="font-weight-bold text-h6 text-capitalize">{{
-              prop.mode === "edit"
-                ? `Edit ${prop.entityType}`
-                : `Add New ${prop.entityType}`
-            }}</span>
-          </v-row>
-        </template>
-      </v-toolbar>
+    <v-card class="screen-modal">
+      <!-- Was a bare `v-toolbar`, which Vuetify paints from its own `surface` -
+           a grey slab across the top of the card, visibly lighter than the card
+           on the dark theme - carrying a `text-h6` (20px/500 Roboto) heading.
+           The design's modal heading is the `v-card-title` row on the card's own
+           surface, and it carries the design's own title size and weight. The
+           `header` slot keeps its title/close payload unchanged. -->
+      <template v-if="$slots.header">
+        <slot
+          name="header"
+          :title="
+            prop.mode === 'edit'
+              ? `Edit ${prop.entityType}`
+              : `Add New ${prop.entityType}`
+          "
+          :close="close"
+        />
+      </template>
+      <v-card-title v-else class="d-flex align-center text-capitalize">
+        {{
+          prop.mode === "edit"
+            ? `Edit ${prop.entityType}`
+            : `Add New ${prop.entityType}`
+        }}
+        <v-spacer />
+        <v-btn
+          variant="text"
+          icon="mdi-close"
+          class="screen-modal__close"
+          aria-label="Close"
+          @click="close"
+        />
+      </v-card-title>
 
-      <v-card-text class="pa-4">
+      <v-card-text class="screen-modal__body">
         <v-form ref="formRef" v-model="valid">
           <v-row no-gutters class="pa-0">
             <v-col v-if="prop.showType" cols="12" class="pa-0 mb-2">
@@ -35,7 +45,7 @@
                 density="comfortable"
                 variant="outlined"
                 hide-details
-                class="w-100 mb-0"
+                class="filter-field w-100 mb-0"
               />
             </v-col>
 
@@ -49,7 +59,7 @@
               <v-text-field
                 v-model="model"
                 :rules="[requiredRule]"
-                class="mb-0"
+                class="filter-field mb-0"
               />
             </v-col>
 
@@ -68,18 +78,21 @@
                 chips
                 closable-chips
                 placeholder="Select units"
-                class="mb-0"
+                class="filter-field mb-0"
               />
             </v-col>
 
             <v-col v-if="prop.showOptional" cols="12" class="mb-4">
               <v-row dense justify="center">
                 <v-col cols="6" class="pa-0">
+                  <!-- `color="primary"` on a `v-btn` is the design's FOREGROUND
+                       token; this is a plain text toggle, so it takes the
+                       accent's INK form, which the theme test already holds at
+                       >= 4.5:1 on the card. -->
                   <v-btn
                     block
-                    color="primary"
                     variant="text"
-                    class="text-none font-weight-bold"
+                    class="text-none font-weight-bold area-form-dialog__optional"
                     text="Optional"
                     @click="show = !show"
                   ></v-btn>
@@ -101,6 +114,7 @@
                         density="comfortable"
                         type="number"
                         min="1"
+                        class="filter-field"
                       ></v-text-field>
                     </v-col>
                   </v-row>
@@ -111,36 +125,24 @@
         </v-form>
       </v-card-text>
 
-      <v-toolbar class="pa-0" density="compact">
-        <v-row no-gutters>
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="text"
-              class="text-none"
-              size="large"
-              @click="close"
-              height="48"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              class="text-none font-weight-bold rounded-0"
-              height="48"
-              :loading="submitting"
-              @click="submit"
-            >
-              {{ prop.mode === "edit" ? "Save" : "Create" }}
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <!-- Was a second `v-toolbar` holding two square 48px bars - the primary a
+           hardcoded `color="black"`, which is neither theme's accent and reads
+           as a hole in the dark modal - with `rounded-0` forcing 0px corners.
+           This is the design's shared modal footer: a bordered strip with a
+           ghost secondary and the primary beside it, both 40px at 10px. -->
+      <div class="screen-modal__footer">
+        <v-btn class="text-none screen-btn-ghost" variant="outlined" @click="close">
+          Cancel
+        </v-btn>
+        <v-btn
+          class="text-none screen-btn-primary"
+          variant="flat"
+          :loading="submitting"
+          @click="submit"
+        >
+          {{ prop.mode === "edit" ? "Save" : "Create" }}
+        </v-btn>
+      </div>
     </v-card>
   </v-dialog>
 </template>
@@ -268,3 +270,13 @@ async function submit() {
   }
 }
 </script>
+
+<style scoped>
+/* The "Optional" reveal is plain text, not a filled button, so it takes the
+   accent's INK form. `--accent-strong` is the FILL that a white label sits on;
+   `--accent-text` is the one `utils/theme.test.ts` holds at >= 4.5:1 against
+   the card in both themes. */
+.area-form-dialog__optional {
+  color: var(--accent-text);
+}
+</style>

package/components/AttachmentsViewer.vue

@@ -6,8 +6,10 @@
 
                 <!-- Loading Skeleton -->
                 <template v-if="loading && files?.length > 0">
-                    <v-card v-for="(file, index) in files" :key="index" height="50px" flat border="sm black"
-                        class="mb-2">
+                    <!-- `border="sm black"` painted a literal black hairline on
+                         both themes; the design's rule is `--border`. -->
+                    <v-card v-for="(file, index) in files" :key="index" height="50px" flat
+                        class="att-skeleton mb-2">
                         <v-skeleton-loader type="list-item" class="mb-2" />
                     </v-card>
                 </template>
@@ -17,7 +19,7 @@
 
                     <!-- Videos -->
                     <template v-if="videosArray.length > 0">
-                        <div v-if="showFileTypeTitle" class="text-caption text-medium-emphasis mb-1">Videos ({{
+                        <div v-if="showFileTypeTitle" class="att-group mb-1">Videos ({{
                             videosArray.length }})</div>
                         <v-list density="compact" class="pa-0 rounded-lg border mb-2">
                             <template v-for="(item, i) in videosArray" :key="item._id">
@@ -26,11 +28,11 @@
                                     :subtitle="item.mimeType" class="cursor-pointer"
                                     @click="openMediaViewer(item._id, item.mimeType)">
                                     <template #prepend>
-                                        <v-icon :color="getFileIconColor(item.mimeType)" class="mr-3">{{
+                                        <v-icon :class="[getFileIconClass(item.mimeType), 'mr-3']">{{
                                             getFileIcon(item.mimeType) }}</v-icon>
                                     </template>
                                     <template #append>
-                                        <v-icon size="16" color="grey-lighten-1">mdi-play-circle-outline</v-icon>
+                                        <v-icon size="16" class="att-icon--muted">mdi-play-circle-outline</v-icon>
                                     </template>
                                 </v-list-item>
                             </template>
@@ -39,7 +41,7 @@
 
                     <!-- Photos -->
                     <template v-if="photosArray.length > 0">
-                        <div v-if="showFileTypeTitle" class="text-caption text-medium-emphasis mb-1"
+                        <div v-if="showFileTypeTitle" class="att-group mb-1"
                             :class="{ 'mt-3': videosArray.length > 0 }">
                             Photos ({{ photosArray.length }})</div>
                         <v-list density="compact" class="pa-0 rounded-lg border mb-2">
@@ -50,16 +52,16 @@
                                         <v-avatar size="36" rounded="sm" class="mr-3">
                                             <v-img :src="imageCover(item._id)" cover>
                                                 <template #error>
-                                                    <v-icon color="green" size="20">mdi-image</v-icon>
+                                                    <v-icon size="20" class="att-icon--ok">mdi-image</v-icon>
                                                 </template>
                                             </v-img>
                                         </v-avatar>
                                     </template>
-                                    <v-list-item-title class="text-body-2">{{ item.file.name }}</v-list-item-title>
-                                    <v-list-item-subtitle class="text-caption">{{ item.mimeType
+                                    <v-list-item-title class="att-name">{{ item.file.name }}</v-list-item-title>
+                                    <v-list-item-subtitle class="att-meta">{{ item.mimeType
                                         }}</v-list-item-subtitle>
                                     <template #append>
-                                        <v-icon size="16" color="grey-lighten-1">mdi-eye-outline</v-icon>
+                                        <v-icon size="16" class="att-icon--muted">mdi-eye-outline</v-icon>
                                     </template>
                                 </v-list-item>
                             </template>
@@ -68,7 +70,7 @@
 
                     <!-- Documents & Other Files -->
                     <template v-if="filesArray.length > 0">
-                        <div v-if="showFileTypeTitle" class="text-caption text-medium-emphasis mb-1"
+                        <div v-if="showFileTypeTitle" class="att-group mb-1"
                             :class="{ 'mt-3': videosArray.length > 0 || photosArray.length > 0 }">Files ({{
                                 filesArray.length }})</div>
                         <v-list density="compact" class="pa-0 rounded-lg border mb-2">
@@ -77,14 +79,14 @@
                                 <v-list-item class="cursor-pointer"
                                     @click="openDocumentViewer(item._id, item.file.name, item.mimeType)">
                                     <template #prepend>
-                                        <v-icon :color="getFileIconColor(item.mimeType)" class="mr-3">{{
+                                        <v-icon :class="[getFileIconClass(item.mimeType), 'mr-3']">{{
                                             getFileIcon(item.mimeType) }}</v-icon>
                                     </template>
-                                    <v-list-item-title class="text-body-2">{{ item.file.name }}</v-list-item-title>
-                                    <v-list-item-subtitle class="text-caption">{{ item.mimeType
+                                    <v-list-item-title class="att-name">{{ item.file.name }}</v-list-item-title>
+                                    <v-list-item-subtitle class="att-meta">{{ item.mimeType
                                         }}</v-list-item-subtitle>
                                     <template #append>
-                                        <v-icon size="16" color="grey-lighten-1">mdi-open-in-new</v-icon>
+                                        <v-icon size="16" class="att-icon--muted">mdi-open-in-new</v-icon>
                                     </template>
                                 </v-list-item>
                             </template>
@@ -185,13 +187,20 @@ function getFileIcon(mimeType: string): string {
     return 'mdi-file-outline';
 }
 
-function getFileIconColor(mimeType: string): string {
-    if (mimeType === 'application/pdf') return 'red';
-    if (mimeType.includes('word') || mimeType.includes('document')) return 'blue';
-    if (mimeType.includes('excel') || mimeType.includes('spreadsheet')) return 'green';
-    if (mimeType.includes('powerpoint') || mimeType.includes('presentation')) return 'orange';
-    if (mimeType.startsWith('video/')) return 'purple';
-    return 'grey';
+/**
+ * Was Vuetify's raw palette names - `red`, `blue`, `green`, `orange`, `purple`,
+ * `grey` - which are the same six hexes in both themes and none of them a token.
+ * The handoff draws NO file-type icon palette, so this keeps the distinctions
+ * the screen already made and states each one in the token that already carries
+ * that tone. `purple` has no counterpart at all, so video takes the muted tone
+ * with the rest; that one IS a change of meaning and is recorded as such.
+ */
+function getFileIconClass(mimeType: string): string {
+    if (mimeType === 'application/pdf') return 'att-icon--err';
+    if (mimeType.includes('word') || mimeType.includes('document')) return 'att-icon--info';
+    if (mimeType.includes('excel') || mimeType.includes('spreadsheet')) return 'att-icon--ok';
+    if (mimeType.includes('powerpoint') || mimeType.includes('presentation')) return 'att-icon--warn';
+    return 'att-icon--muted';
 }
 
 function getByType(prefix: 'image/' | 'video/' | 'other') {
@@ -311,3 +320,56 @@ function inferMimeType(ext?: string): string {
     return mimeMap[ext] || 'application/octet-stream';
 }
 </script>
+
+<style scoped>
+/* The group heading was `text-caption text-medium-emphasis` - Vuetify's 12px
+   Roboto at 60% alpha. The design's sub-line is `--muted` at the card's own
+   caption size. */
+.att-group {
+    font-family: var(--font-sans);
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--muted);
+}
+
+/* Row title and meta were `text-body-2` / `text-caption`, i.e. Roboto again.
+   These take the design's cell type, the same pair every converted table row
+   uses. */
+.att-name {
+    font-family: var(--font-sans);
+    font-size: 13.5px;
+    font-weight: 600;
+    color: var(--text);
+}
+
+.att-meta {
+    font-family: var(--font-sans);
+    font-size: 12px;
+    color: var(--muted);
+}
+
+.att-skeleton {
+    border: 1px solid var(--border);
+    border-radius: var(--r-inner);
+}
+
+.att-icon--err {
+    color: var(--err);
+}
+
+.att-icon--info {
+    color: var(--info);
+}
+
+.att-icon--ok {
+    color: var(--ok);
+}
+
+.att-icon--warn {
+    color: var(--warn);
+}
+
+.att-icon--muted {
+    color: var(--muted);
+}
+</style>

package/components/FileInput.vue

@@ -6,6 +6,9 @@
       accept="image/*"
       :prepend-icon="prependIcon"
       :loading="isFileUploading"
+      variant="outlined"
+      density="comfortable"
+      class="filter-field"
       hide-details
       chips
       multiple
@@ -16,7 +19,16 @@
     >
       <template v-slot:append v-if="hasLabel">
         <slot name="append">
-          <v-btn color="primary" height="50px" @click="openCameraDialog">
+          <!-- `color="primary"` on a `v-btn` is the design's FOREGROUND token,
+               so this drew accent-on-accent; the fill is `primary-button`, which
+               is what `.screen-btn-primary` states. `height="50px"` was also
+               10px taller than the design's 40px button. -->
+          <v-btn
+            class="text-none screen-btn-primary"
+            variant="flat"
+            aria-label="Take a picture"
+            @click="openCameraDialog"
+          >
             <v-icon>mdi-camera</v-icon>
           </v-btn>
         </slot>
@@ -32,64 +44,69 @@
       persistent
       @after-enter="startCamera"
     >
-      <v-container
-        class="d-flex justify-center"
-        max-height="90vh"
-        width="800"
-        max-width="800"
-      >
-        <v-card elevation="2" class="d-flex flex-column align-center pa-2">
-          <v-toolbar>
-            <v-card-title class="text-h5">Take a Picture</v-card-title>
-            <v-spacer></v-spacer>
-            <v-btn
-              color="grey-darken-1"
-              icon="mdi-close"
-              @click="closeCameraDialog"
-            ></v-btn>
-          </v-toolbar>
-
-          <div
-            id="reader"
-            class="d-flex justify-center align-center"
-            style="
-              position: relative;
-              width: 500px;
-              min-width: 400px;
-              height: 400px;
-            "
+      <!-- Was a `v-container` wrapping a factory 4px `v-card` with a bare
+           `v-toolbar` across the top - Vuetify paints that toolbar from its own
+           `surface`, a grey slab visibly lighter than the card on dark. The
+           design's modal is the card itself: 16px radius on `--card`, a
+           `v-card-title` row, and the borderless 32px close. -->
+      <v-card class="screen-modal d-flex flex-column align-center">
+        <v-card-title class="d-flex align-center w-100">
+          Take a Picture
+          <v-spacer />
+          <v-btn
+            variant="text"
+            icon="mdi-close"
+            class="screen-modal__close"
+            aria-label="Close camera"
+            @click="closeCameraDialog"
+          />
+        </v-card-title>
+
+        <div
+          id="reader"
+          class="d-flex justify-center align-center"
+          style="
+            position: relative;
+            width: 500px;
+            min-width: 400px;
+            height: 400px;
+          "
+        >
+          <video
+            ref="video"
+            style="flex: 1; height: 400px; min-width: 300px"
+            class="video-shutter"
+            autoplay
+          ></video>
+          <canvas
+            ref="canvas"
+            style="flex: 1; height: 400px; min-width: 300px; display: none"
+          ></canvas>
+        </div>
+
+        <!-- Was a two-column `v-row` of Vuetify `primary` / `secondary` icon
+             buttons - `secondary` is not a design token at all, and `primary` is
+             the foreground one. The design's icon button is the 36px bordered
+             square, and the capture action is the primary of the pair, so it
+             sits on the shared modal footer in the primary's place. -->
+        <div class="screen-modal__footer w-100">
+          <v-btn
+            class="text-none screen-btn-ghost"
+            variant="outlined"
+            aria-label="Switch camera"
+            @click="switchCamera"
+          >
+            <v-icon>mdi-camera-switch</v-icon>
+          </v-btn>
+          <v-btn
+            class="text-none screen-btn-primary"
+            variant="flat"
+            @click="captureImageFromCamera"
           >
-            <video
-              ref="video"
-              style="flex: 1; height: 400px; min-width: 300px"
-              class="video-shutter"
-              autoplay
-            ></video>
-            <canvas
-              ref="canvas"
-              style="flex: 1; height: 400px; min-width: 300px; display: none"
-            ></canvas>
-          </div>
-
-          <v-row align="center" justify="center">
-            <v-col cols="6">
-              <v-btn color="primary" icon class="mt-4" @click="switchCamera">
-                <v-icon>mdi-camera-switch</v-icon>
-              </v-btn>
-            </v-col>
-            <v-col cols="6">
-              <v-btn
-                color="secondary"
-                icon
-                class="mt-4"
-                @click="captureImageFromCamera"
-              >
-                <v-icon large>mdi-camera-outline</v-icon>
-              </v-btn>
-            </v-col>
-          </v-row>
-        </v-card>
-      </v-container>
+            <v-icon>mdi-camera-outline</v-icon>
+          </v-btn>
+        </div>
+      </v-card>
     </v-dialog>
   </div>
 

package/components/PhotoUpload.vue

@@ -1,9 +1,9 @@
 <template>
   <v-row no-gutters class="mb-6">
     <v-col cols="12">
-      <div class="text-subtitle-2 font-weight-bold mb-3">
+      <div class="photo-upload__title mb-3">
         {{ title }}
-        <span v-if="required" class="text-error">*</span>
+        <span v-if="required" class="photo-upload__req">*</span>
       </div>
 
       <v-sheet
@@ -17,13 +17,13 @@
         <v-icon
           :icon="uploading ? 'mdi-loading mdi-spin' : 'mdi-camera-plus-outline'"
           size="56"
-          :color="uploading ? 'grey' : 'primary'"
           class="mb-3"
+          :class="uploading ? 'photo-upload__icon--wait' : 'photo-upload__icon'"
         />
-        <div class="text-body-1 font-weight-medium mb-1">
+        <div class="photo-upload__lead mb-1">
           {{ uploading ? "Uploading Photo..." : "Add Photo" }}
         </div>
-        <div class="text-caption text-medium-emphasis">
+        <div class="photo-upload__hint">
           {{ uploading ? "Please wait" : "Take a photo or upload from device" }}
         </div>
       </v-sheet>
@@ -50,8 +50,8 @@
           icon="mdi-close"
           size="x-small"
           variant="tonal"
-          color="error"
-          class="delete-btn"
+          aria-label="Remove photo"
+          class="delete-btn photo-upload__remove"
           @click.stop="removePhoto(index)"
           style="position: absolute; top: -8px; right: -8px"
         />
@@ -60,11 +60,13 @@
   </v-row>
 
   <v-dialog v-model="showPhotoPreview" max-width="900">
-    <v-card>
+    <v-card class="screen-modal">
       <v-card-actions class="pa-2 justify-end">
         <v-btn
           icon="mdi-close"
           variant="text"
+          class="screen-modal__close"
+          aria-label="Close photo preview"
           @click="showPhotoPreview = false"
         />
       </v-card-actions>
@@ -75,46 +77,47 @@
   </v-dialog>
 
   <v-dialog v-model="photoOptionsDialog" max-width="420">
-    <v-card>
-      <v-card-title class="d-flex align-center pa-4">
-        <span class="text-h6 font-weight-bold">Add Photo</span>
+    <v-card class="screen-modal">
+      <!-- `text-h6` is 20px/500 Roboto; the design's modal heading is the
+           `v-card-title` row's own size and weight. -->
+      <v-card-title class="d-flex align-center">
+        Add Photo
         <v-spacer />
         <v-btn
           icon="mdi-close"
           variant="text"
-          size="small"
+          class="screen-modal__close"
+          aria-label="Close"
           @click="photoOptionsDialog = false"
         />
       </v-card-title>
 
-      <v-divider />
-
-      <v-card-text class="pa-4">
+      <v-card-text class="screen-modal__body">
         <v-list class="pa-0" bg-color="transparent">
           <v-list-item class="rounded-lg mb-2" @click="openCameraFromOptions">
             <template v-slot:prepend>
-              <v-avatar color="primary" variant="tonal" size="48">
-                <v-icon icon="mdi-camera" color="primary" />
+              <v-avatar variant="flat" size="48" class="photo-upload__avatar">
+                <v-icon icon="mdi-camera" />
               </v-avatar>
             </template>
-            <v-list-item-title class="font-weight-medium mb-1">
+            <v-list-item-title class="photo-upload__lead mb-1">
               Take a Photo
             </v-list-item-title>
-            <v-list-item-subtitle class="text-caption">
+            <v-list-item-subtitle class="photo-upload__hint">
               Use device camera to capture an image
             </v-list-item-subtitle>
           </v-list-item>
 
           <v-list-item class="rounded-lg" @click="triggerFileInput">
             <template v-slot:prepend>
-              <v-avatar color="primary" variant="tonal" size="48">
-                <v-icon icon="mdi-upload" color="primary" />
+              <v-avatar variant="flat" size="48" class="photo-upload__avatar">
+                <v-icon icon="mdi-upload" />
               </v-avatar>
             </template>
-            <v-list-item-title class="font-weight-medium mb-1">
+            <v-list-item-title class="photo-upload__lead mb-1">
               Upload a Photo
             </v-list-item-title>
-            <v-list-item-subtitle class="text-caption">
+            <v-list-item-subtitle class="photo-upload__hint">
               Select an image from your device
             </v-list-item-subtitle>
           </v-list-item>
@@ -124,17 +127,22 @@
   </v-dialog>
 
   <v-dialog v-model="showCameraDialog" max-width="720">
-    <v-card>
-      <v-toolbar density="compact">
-        <v-toolbar-title class="text-subtitle-1 font-weight-medium">
-          Camera
-        </v-toolbar-title>
+    <!-- Was a bare `v-toolbar`, which Vuetify paints from its own `surface` -
+         a grey slab across the top of the card, lighter than the card on the
+         dark theme. -->
+    <v-card class="screen-modal">
+      <v-card-title class="d-flex align-center">
+        Camera
         <v-spacer />
-        <v-btn icon @click="closeCameraDialog">
-          <v-icon>mdi-close</v-icon>
-        </v-btn>
-      </v-toolbar>
-      <v-card-text>
+        <v-btn
+          icon="mdi-close"
+          variant="text"
+          class="screen-modal__close"
+          aria-label="Close camera"
+          @click="closeCameraDialog"
+        />
+      </v-card-title>
+      <v-card-text class="screen-modal__body">
         <div class="d-flex flex-column align-center">
           <div style="width: 100%; max-width: 640px">
             <video
@@ -146,33 +154,32 @@
             />
           </div>
           <canvas ref="canvasRef" style="display: none"></canvas>
-          <div class="text-caption grey--text mt-2">
+          <div class="screen-hint mt-2">
             Tip: Allow camera permissions to use this feature.
           </div>
         </div>
       </v-card-text>
-      <v-card-actions>
+      <!-- Was a `v-card-actions` holding a plain text CANCEL and a 56px
+           `color="black"` bar forced to `rounded-0` - black is neither theme's
+           accent and reads as a hole in the dark modal. This is the design's
+           shared modal footer: ghost secondary, then the primary. -->
+      <div class="screen-modal__footer">
         <v-btn
-          text
+          class="text-none screen-btn-ghost"
+          variant="outlined"
           @click="closeCameraDialog"
-          class="text-none font-weight-medium"
         >
-          CANCEL
+          Cancel
         </v-btn>
-        <v-spacer />
         <v-btn
-          block
+          class="text-none screen-btn-primary"
           variant="flat"
-          color="black"
-          class="text-none font-weight-bold rounded-0"
-          height="56"
-          size="large"
           @click="capturePhoto"
         >
           <v-icon class="mr-2">mdi-camera</v-icon>
-          CAPTURE
+          Capture
         </v-btn>
-      </v-card-actions>
+      </div>
     </v-card>
   </v-dialog>
 
@@ -393,13 +400,68 @@ onBeforeUnmount(() => {
 </script>
 
 <style scoped>
+/* Was `rgb(var(--v-theme-primary))`, i.e. the design's FOREGROUND token used
+   as a rule and a wash. `--accent-strong` is the accent's fill form, which is
+   what a hover state on a drop zone is. */
 .upload-area {
   &:hover:not(.upload-disabled) {
-    border-color: rgb(var(--v-theme-primary)) !important;
-    background-color: rgba(var(--v-theme-primary), 0.04);
+    border-color: var(--accent-strong) !important;
+    background-color: var(--accent-soft);
   }
 }
 
+/* The section title was `text-subtitle-2 font-weight-bold` and the two leads
+   `text-body-1 font-weight-medium` - Vuetify Roboto at Vuetify's sizes. These
+   take the design's card-title and cell type. */
+.photo-upload__title {
+  font-family: var(--font-sans);
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  color: var(--text);
+}
+
+.photo-upload__req {
+  color: var(--err);
+}
+
+.photo-upload__lead {
+  font-family: var(--font-sans);
+  font-size: 13.5px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+/* Was `text-caption text-medium-emphasis` / `grey--text`, Vuetify's 60% alpha.
+   `--muted` is the design's sub-line and follows the theme. */
+.photo-upload__hint {
+  font-family: var(--font-sans);
+  font-size: 12px;
+  color: var(--muted);
+}
+
+/* The drop-zone glyph was `color="primary"`, the FOREGROUND token; the
+   accent's ink form is the one held at >= 4.5:1 on the card. */
+.photo-upload__icon {
+  color: var(--accent-text);
+}
+
+.photo-upload__icon--wait {
+  color: var(--muted);
+}
+
+/* The two option tiles were `v-avatar color="primary" variant="tonal"` with a
+   `primary` glyph inside - accent on accent. */
+.photo-upload__avatar {
+  background: var(--accent-soft);
+  color: var(--accent-text);
+}
+
+/* `color="error"` is Vuetify's palette red, not the theme's `--err`. */
+.photo-upload__remove {
+  background: var(--err-bg);
+  color: var(--err);
+}
+
 .upload-disabled {
   cursor: not-allowed !important;
   opacity: 0.6;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.126",
+  "version": "3.2.2-staging.127",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",