@7365admin1/layer-common 3.2.2-staging.151 → 3.2.2-staging.153

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/components/TiptapEditorQr.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <VCard class="mx-auto">
+    <!-- AppCard, not VCard: the design's 14px radius and 1px rule, without
+         Vuetify's own elevation and 4px corner fighting the class for it.
+         Same swap as TiptapEditor, which wraps the same editor. -->
+    <AppCard class="mx-auto">
       <VuetifyTiptap
         v-model="content"
         markdown-theme="github"
@@ -9,7 +12,7 @@
         :maxWidth="maxWidth"
         :disabled="isViewMode"
       />
-    </VCard>
+    </AppCard>
   </div>
 </template>
 

package/package.json

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