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

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.125",
+  "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.",