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

package/components/AttendanceCheckInOutDialog.vue

@@ -1,23 +1,19 @@
 <template>
   <v-dialog v-model="showDialog" max-width="450" persistent>
-    <v-card>
-      <v-toolbar>
-        <v-row no-gutters class="fill-height px-6" align="center">
-          <span class="font-weight-bold text-h6">{{
-            action === "checkIn" ? "Check In" : "Check Out"
-          }}</span>
-        </v-row>
-      </v-toolbar>
-
-      <v-card-text class="pa-4">
+    <v-card class="screen-modal">
+      <!-- Was a bare `v-toolbar` at each end of the card, which Vuetify paints
+           from its own `surface` - two grey slabs visibly lighter than the card
+           on the dark theme - carrying a `text-h6` (20px/500) heading. The
+           design's modal heading is the card's own `v-card-title` row. -->
+      <v-card-title>
+        {{ action === "checkIn" ? "Check In" : "Check Out" }}
+      </v-card-title>
+
+      <v-card-text class="screen-modal__body">
         <v-form ref="formRef" v-model="valid">
           <v-row no-gutters class="pa-0">
             <v-col cols="12" class="pa-0">
-              <v-card
-                variant="outlined"
-                class="mb-2"
-                style="height: 400px; position: relative; overflow: hidden"
-              >
+              <v-card variant="outlined" class="mb-2 attendance-capture__stage">
                 <div
                   v-if="loadingCamera"
                   class="d-flex align-center justify-center"
@@ -56,17 +52,15 @@
                   "
                 />
 
+                <!-- `background: #f5f5f5` was a literal light grey, so on the
+                     dark theme this placeholder was a white slab inside a dark
+                     card. It follows the theme now. -->
                 <div
                   v-else-if="!loadingCamera"
-                  class="d-flex align-center justify-center flex-column"
-                  style="height: 100%; background: #f5f5f5"
+                  class="d-flex align-center justify-center flex-column attendance-capture__placeholder"
                 >
-                  <v-icon size="64" color="grey" class="mb-2"
-                    >mdi-camera-off</v-icon
-                  >
-                  <span class="text-caption text-grey"
-                    >Initializing camera...</span
-                  >
+                  <v-icon size="64" class="mb-2">mdi-camera-off</v-icon>
+                  <span>Initializing camera...</span>
                 </div>
               </v-card>
             </v-col>
@@ -86,71 +80,47 @@
         </v-form>
       </v-card-text>
 
-      <v-toolbar class="pa-0" density="compact">
-        <v-row no-gutters>
-          <v-col v-if="!capturedImage" cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="text"
-              class="text-none"
-              size="large"
-              @click="close"
-              height="56"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-
-          <v-col v-if="!capturedImage" cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              class="text-none font-weight-bold rounded-0"
-              height="56"
-              size="large"
-              @click="capturePhoto"
-              :disabled="!showCamera"
-            >
-              <v-icon class="mr-2">mdi-camera</v-icon>
-              Capture Photo
-            </v-btn>
-          </v-col>
-
-          <template v-else>
-            <v-col cols="6" class="pa-0">
-              <v-btn
-                block
-                variant="text"
-                class="text-none"
-                size="large"
-                @click="retakePhoto"
-                height="56"
-                :disabled="submitting"
-              >
-                <v-icon class="mr-2">mdi-camera-retake</v-icon>
-                Retake
-              </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="56"
-                size="large"
-                :loading="submitting"
-                @click="submit"
-              >
-                <v-icon class="mr-2">mdi-check</v-icon>
-                Submit
-              </v-btn>
-            </v-col>
-          </template>
-        </v-row>
-      </v-toolbar>
+      <!-- `color="black"` was a literal, not a token: a pure-black 56px slab
+           with `rounded-0`, on both themes. `.screen-btn-primary` is the fill
+           the design draws, and the footer gives the pair the design's 40px
+           height and 10px radius. -->
+      <div class="screen-modal__footer">
+        <template v-if="!capturedImage">
+          <v-btn class="text-none screen-btn-ghost" variant="flat" @click="close">
+            Cancel
+          </v-btn>
+          <v-btn
+            class="text-none screen-btn-primary"
+            variant="flat"
+            prepend-icon="mdi-camera"
+            :disabled="!showCamera"
+            @click="capturePhoto"
+          >
+            Capture Photo
+          </v-btn>
+        </template>
+
+        <template v-else>
+          <v-btn
+            class="text-none screen-btn-ghost"
+            variant="flat"
+            prepend-icon="mdi-camera-retake"
+            :disabled="submitting"
+            @click="retakePhoto"
+          >
+            Retake
+          </v-btn>
+          <v-btn
+            class="text-none screen-btn-primary"
+            variant="flat"
+            prepend-icon="mdi-check"
+            :loading="submitting"
+            @click="submit"
+          >
+            Submit
+          </v-btn>
+        </template>
+      </div>
     </v-card>
   </v-dialog>
 </template>
@@ -418,3 +388,30 @@ watch(showDialog, async (newVal) => {
   }
 });
 </script>
+
+<style scoped>
+/* The camera stage. `height: 400px` and the rest were inline styles; the box is
+   the design's inner radius on the card's own border. */
+.attendance-capture__stage {
+  position: relative;
+  height: 400px;
+  overflow: hidden;
+  border-radius: var(--r-inner);
+  border-color: var(--border);
+}
+
+/* Was `background: #f5f5f5` with `text-grey` / `text-caption` on it - a literal
+   light slab that stayed light on the dark theme. Both ends follow the theme. */
+.attendance-capture__placeholder {
+  height: 100%;
+  background: var(--thead);
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: 500;
+  color: var(--muted);
+}
+
+.attendance-capture__placeholder .v-icon {
+  color: var(--muted);
+}
+</style>

package/components/Chat/SkeletonLoader.vue

@@ -58,12 +58,19 @@ const chatSkeletons = ref([
   overflow-y: auto;
 }
 
+/*
+ * `background-color: white` used to sit here and never applied: the footer
+ * carries `color="background"`, and Vuetify's `.bg-background` sets the
+ * background with `!important`. It is deleted rather than out-specified - the
+ * theme colour is the one that should win, and a literal white would have been
+ * wrong in the dark theme anyway. The border was a literal `#ddd` for the same
+ * reason and is now the shared rule colour.
+ */
 .chat-footer {
   position: sticky;
   bottom: 0;
   width: 100%;
-  background-color: white;
-  border-top: 1px solid #ddd;
+  border-top: 1px solid var(--border);
   display: flex;
   justify-content: center;
   align-items: center;

package/components/ClientMain.vue

@@ -855,20 +855,18 @@ onUnmounted(() => {
 /* ===== TABLE ===== */
 .table-scroll { overflow-x: auto; }
 table { width: 100%; border-collapse: collapse; font-size: 13px; }
+/* `.table-card thead th` / `tbody td` in screens.css state the design's table
+   header and cell with `!important`; the padding, font, colour and background
+   this block used to set never applied. Only what still applies is kept. */
 thead th {
-  padding: 10px 16px;
   text-align: left;
-  font-weight: 600;
-  font-size: 13px;
-  color: var(--text2);
   border-bottom: 1px solid var(--border);
   white-space: nowrap;
-  background: var(--card);
 }
 tbody tr { border-bottom: 1px solid var(--hover); transition: background 0.1s; }
 tbody tr:last-child { border-bottom: none; }
 tbody tr:hover { background: var(--thead); }
-tbody td { padding: 14px 16px; vertical-align: middle; }
+tbody td { vertical-align: middle; }
 
 .empty { text-align: center; color: var(--muted); padding: 48px 0 !important; }
 .td-name { font-weight: 500; color: var(--text); }

package/components/Input/DatePicker.vue

@@ -106,6 +106,5 @@ defineExpose({
 .hidden-input {
     opacity: 0;
     height: 0;
-    width: 1px;
 }
 </style>

package/components/Input/DateTimePicker.vue

@@ -197,6 +197,5 @@ defineExpose({
 .hidden-input {
   opacity: 0;
   height: 0;
-  width: 1px;
 }
 </style>

package/components/PlanStatusBadge.vue

@@ -1,12 +1,11 @@
 <template>
-  <v-chip
-    :color="isActive ? 'success' : 'grey'"
-    size="small"
-    variant="tonal"
-    class="font-weight-medium"
-  >
-    {{ isActive ? 'Active' : 'Deactive' }}
-  </v-chip>
+  <!--
+    The design's status pill, not Vuetify's tonal chip. The word is passed
+    through so `utils/status.ts` picks the tone: "Active" -> ok, and "Deactive"
+    is not a word the map names, so it comes out neutral - the same two colours
+    the old `success` / `grey` chip drew, now from the shared tokens.
+  -->
+  <StatusChip :status="isActive ? 'Active' : 'Deactive'" />
 </template>
 
 <script setup lang="ts">

package/components/PlateNumberDisplay.vue

@@ -4,13 +4,16 @@
       {{ formatted }}
     </span>
 
-    <v-chip
+    <!--
+      The overflow count is a tag, not a status, so it takes the design's
+      dotless neutral chip rather than Vuetify's default grey one.
+    -->
+    <StatusChip
       v-if="extraCount > 0 && !showAll"
-      density="comfortable"
-      size="small"
-    >
-      + {{ extraCount }}
-    </v-chip>
+      tone="neutral"
+      :dot="false"
+      :label="`+ ${extraCount}`"
+    />
   </div>
 </template>
 

package/components/TableV3.vue

@@ -162,10 +162,6 @@ watch(
  * same tokenised header, cell and hover treatment as every other table in the
  * product, which measures 4.77:1 light / 4.71:1 dark.
  */
-.table-v3 :deep(tbody td) {
-  height: 54px;
-}
-
 .table-v3__footer {
   border-top: 1px solid var(--border);
   border-bottom: 0;

package/components/TiptapEditor.vue

@@ -1,8 +1,10 @@
 <template>
   <div>
-    <VCard class="">
+    <!-- AppCard, not VCard: the design's 14px radius and 1px rule, without
+         Vuetify's own elevation and 4px corner fighting the class for it. -->
+    <AppCard>
       <VuetifyTiptap v-model="content" />
-    </VCard>
+    </AppCard>
   </div>
 </template>
 
@@ -39,35 +41,37 @@ const updateContent = () => {
 </script>
 
 <style scoped>
-/deep/ .vuetify-pro-tiptap-editor__content {
+/*
+ * The rich-text tables. Every colour here used to be a literal - #333 borders,
+ * #fff and #f8f8f8 cells, #f0f0f0 headers, #000 header text, #e6f3ff hover -
+ * so an editor opened in the dark theme drew a white table with black text on
+ * a dark page. They are the same tokens every other table in the product uses,
+ * so the editor content now follows the theme it is opened in.
+ *
+ * The selectors were also written twice, once with :deep() and again with the
+ * deprecated /deep/, matching the same two roots. One copy is enough.
+ */
+:deep(.vuetify-pro-tiptap-editor__content) {
   padding: 15px;
 }
 
-/* Table styles with strong visible borders */
 :deep(.vuetify-pro-tiptap-editor__content table),
-:deep(.ProseMirror table),
-/deep/ .vuetify-pro-tiptap-editor__content table,
-/deep/ .ProseMirror table {
+:deep(.ProseMirror table) {
   border-collapse: collapse;
   border-spacing: 0;
-  border: 2px solid #333333 !important;
+  border: 2px solid var(--border) !important;
   width: 100%;
   margin: 16px 0;
-  background-color: #ffffff;
+  background-color: var(--card);
   display: table !important;
-  font-size: 14px;
+  font-size: var(--fs-cell);
 }
 
-/* Cell borders - very visible */
 :deep(.vuetify-pro-tiptap-editor__content table th),
 :deep(.vuetify-pro-tiptap-editor__content table td),
 :deep(.ProseMirror table th),
-:deep(.ProseMirror table td),
-/deep/ .vuetify-pro-tiptap-editor__content table th,
-/deep/ .vuetify-pro-tiptap-editor__content table td,
-/deep/ .ProseMirror table th,
-/deep/ .ProseMirror table td {
-  border: 1px solid #333333 !important;
+:deep(.ProseMirror table td) {
+  border: 1px solid var(--border) !important;
   padding: 8px 12px;
   text-align: left;
   vertical-align: top;
@@ -75,38 +79,27 @@ const updateContent = () => {
   box-sizing: border-box;
 }
 
-/* Header styling */
 :deep(.vuetify-pro-tiptap-editor__content table th),
-:deep(.ProseMirror table th),
-/deep/ .vuetify-pro-tiptap-editor__content table th,
-/deep/ .ProseMirror table th {
-  font-weight: 600;
-  background-color: #f0f0f0;
-  color: #000000;
-  border-bottom: 2px solid #333333 !important;
+:deep(.ProseMirror table th) {
+  font-weight: var(--fw-table-head);
+  background-color: var(--thead);
+  color: var(--text);
+  border-bottom: 2px solid var(--border) !important;
 }
 
-/* Regular cells */
 :deep(.vuetify-pro-tiptap-editor__content table td),
-:deep(.ProseMirror table td),
-/deep/ .vuetify-pro-tiptap-editor__content table td,
-/deep/ .ProseMirror table td {
-  background-color: #ffffff;
+:deep(.ProseMirror table td) {
+  background-color: var(--card);
+  color: var(--text);
 }
 
-/* Alternating row colors */
 :deep(.vuetify-pro-tiptap-editor__content table tr:nth-child(2n) td),
-:deep(.ProseMirror table tr:nth-child(2n) td),
-/deep/ .vuetify-pro-tiptap-editor__content table tr:nth-child(2n) td,
-/deep/ .ProseMirror table tr:nth-child(2n) td {
-  background-color: #f8f8f8;
+:deep(.ProseMirror table tr:nth-child(2n) td) {
+  background-color: var(--thead);
 }
 
-/* Hover effects */
 :deep(.vuetify-pro-tiptap-editor__content table tr:hover td),
-:deep(.ProseMirror table tr:hover td),
-/deep/ .vuetify-pro-tiptap-editor__content table tr:hover td,
-/deep/ .ProseMirror table tr:hover td {
-  background-color: #e6f3ff !important;
+:deep(.ProseMirror table tr:hover td) {
+  background-color: var(--hover) !important;
 }
 </style>

package/package.json

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