@7365admin1/layer-common 3.2.2-staging.149 → 3.2.2-staging.150

package/components/HidCameraCaptureDialog.vue

@@ -5,21 +5,23 @@
     persistent
     @update:model-value="emit('update:modelValue', $event)"
   >
-    <v-card class="camera-dialog" rounded="lg">
-      <v-card-title class="d-flex align-center justify-space-between pa-4">
-        <span class="text-subtitle-1 font-weight-bold">Take Facial Photo</span>
+    <!-- `rounded="lg"` is dropped, not replaced. Measured on the glass, the card
+         read 16px BEFORE and after: the `.rounded-lg` utility it compiled to was
+         already being overridden, so the prop stated a radius the card never
+         had. `.screen-modal` states the same 16px as `--r-modal`, on purpose. -->
+    <v-card class="camera-dialog screen-modal">
+      <v-card-title class="d-flex align-center justify-space-between">
+        <span>Take Facial Photo</span>
         <v-btn
           icon="mdi-close"
           variant="text"
-          size="small"
+          class="screen-modal__close"
           aria-label="Close camera"
           @click="close"
         />
       </v-card-title>
 
-      <v-divider />
-
-      <v-card-text class="pa-4">
+      <v-card-text class="screen-modal__body">
         <div class="camera-viewport">
           <video
             ref="videoElement"
@@ -42,18 +44,20 @@
 
         <canvas ref="canvasElement" class="d-none" />
 
-        <div class="text-caption text-medium-emphasis mt-3 text-center">
+        <div class="camera-dialog__hint text-center">
           Keep your face centered and make sure the area is well lit.
         </div>
       </v-card-text>
 
-      <v-divider />
-
-      <v-card-actions class="pa-4">
-        <v-btn variant="text" @click="close">Cancel</v-btn>
-        <v-spacer />
+      <!-- `color="primary"` on a `v-btn` is the design's FOREGROUND token - the
+           link ink - not a fill, so the capture button was accent-on-accent.
+           `.screen-btn-primary` states the fill the design does draw. -->
+      <div class="screen-modal__footer">
+        <v-btn class="text-none screen-btn-ghost" variant="flat" @click="close">
+          Cancel
+        </v-btn>
         <v-btn
-          color="primary"
+          class="text-none screen-btn-primary"
           variant="flat"
           prepend-icon="mdi-camera"
           :disabled="starting || !!cameraError || !stream"
@@ -61,7 +65,7 @@
         >
           Take Photo
         </v-btn>
-      </v-card-actions>
+      </div>
     </v-card>
   </v-dialog>
 </template>
@@ -175,10 +179,23 @@ onBeforeUnmount(stopCamera);
   width: 100%;
   overflow: hidden;
   aspect-ratio: 3 / 4;
-  border-radius: 8px;
+  border-radius: var(--r-inner);
+  /* Deliberately NOT a theme surface: this is the stage a video sits on, and it
+     stays dark in both themes so the preview does not flash white on light.
+     Its own `#ffffff` text below is paired with it, not with the theme. */
   background: #111722;
 }
 
+/* The design's small helper line, not Vuetify's `text-caption` /
+   `text-medium-emphasis` pair. */
+.camera-dialog__hint {
+  margin-top: 12px;
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: 500;
+  color: var(--muted);
+}
+
 .camera-preview {
   width: 100%;
   height: 100%;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.149",
+  "version": "3.2.2-staging.150",
   "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.",