@7365admin1/layer-common 3.2.2-staging.166 → 3.2.2-staging.168

package/assets/css/screens.css

@@ -183,9 +183,28 @@
  * appear on 35 files across the layer and eleven applications.
  *
  * `--muted` is the design's own secondary ink and is a token, so it follows
- * the theme: 4.77:1 light, 4.71:1 dark on the same surfaces. Redirected here,
- * once, rather than renamed at 35 call sites - the layer's stylesheet ships to
- * every application, so the class keeps working and simply reads correctly.
+ * the theme. Redirected here, once, rather than renamed at 35 call sites - the
+ * layer's stylesheet ships to every application, so the class keeps working.
+ *
+ * THE READING THIS COMMENT USED TO CLAIM IS NO LONGER TRUE, and the correction
+ * matters because it inverts the justification above.
+ *
+ * It said "4.77:1 light, 4.71:1 dark". That was measured when `--muted` was
+ * `#6b7079` - one of the six values darkened on 2026-08-13 to clear AA. The
+ * owner REVERSED that on 2026-08-14 in favour of 100% design fidelity, and
+ * `--muted` went back to the handoff's `#8b8f98`. Re-measured on the current
+ * token, alpha composited:
+ *
+ *     --muted on a card   3.24:1   (the old #7e7e7e read 4.06:1)
+ *     --muted on the page 2.99:1   - below even the 3.0 large-text floor
+ *
+ * So on the LIGHT theme this redirect is now a DOWNGRADE for the ~5 files that
+ * still use the class, not the improvement the original comment describes. It
+ * is left in place deliberately: `#7e7e7e` was a fixed grey that ignored the
+ * theme entirely and read 4.10:1 on dark where `--muted` reads 4.93:1, so
+ * reverting would trade a light-theme gain for a dark-theme loss. Which way
+ * this should go is a PALETTE decision for the owner, not a per-class one -
+ * see `utils/theme-aa-ledger.ts`, which pins every one of these readings.
  */
 .text-fontgray {
   color: var(--muted) !important;

package/components/Nfc/NFCTagForm.vue

@@ -2,7 +2,7 @@
   <v-card width="100%">
     <v-toolbar class="screen-dialog-bar">
       <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-h5 text-capitalize">
+        <span class="screen-card-title text-capitalize">
           {{ title }}
         </span>
       </v-row>
@@ -15,7 +15,7 @@
       <v-form ref="formRef" v-model="valid" @submit.prevent="submit">
         <v-row no-gutters>
           <v-col cols="12" class="mb-4">
-            <label class="text-subtitle-2 font-weight-medium mb-2">
+            <label class="nfc-tag__label mb-2">
               Name <span class="text-error">*</span>
             </label>
             <v-text-field
@@ -29,7 +29,7 @@
           </v-col>
 
           <v-col cols="12" class="mb-4">
-            <label class="text-subtitle-2 font-weight-medium mb-2">
+            <label class="nfc-tag__label mb-2">
               Tag ID <span class="text-error">*</span>
             </label>
             <v-text-field
@@ -238,3 +238,13 @@ async function submit() {
   }
 }
 </script>
+
+<style scoped>
+/* Was `text-subtitle-2`, Vuetify's 14px. The required asterisk beside it
+   keeps `text-error`; only the label's size and ink move. */
+.nfc-tag__label {
+  font-size: var(--fs-cell);
+  font-weight: 500;
+  color: var(--text);
+}
+</style>

package/components/Nfc/PatrolReport/MonthlyReportTable.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mt-6">
-    <div class="text-h6 font-weight-bold mb-4">
+    <div class="screen-card-title mb-4">
       {{ title }}
     </div>
 

package/components/OvernightParkingManagement.vue

@@ -74,11 +74,11 @@
           <v-list>
             <v-list-item @click="openActionDialog(item, 'approved')">
               <v-list-item-title>
-                <v-icon class="text-success mr-2 text-subtitle-1">mdi-check</v-icon>Approve</v-list-item-title>
+                <v-icon class="text-success mr-2" size="16">mdi-check</v-icon>Approve</v-list-item-title>
             </v-list-item>
             <v-list-item @click="openActionDialog(item, 'rejected')">
               <v-list-item-title>
-                <v-icon class="text-error mr-2 text-subtitle-1">mdi-close</v-icon>Reject</v-list-item-title>
+                <v-icon class="text-error mr-2" size="16">mdi-close</v-icon>Reject</v-list-item-title>
             </v-list-item>
           </v-list>
         </v-menu>
@@ -107,7 +107,7 @@
 
     <v-dialog v-model="actionDialog.open" max-width="520" persistent>
       <v-card>
-        <v-card-title class="text-subtitle-1 font-weight-bold pt-4 px-4">
+        <v-card-title class="screen-card-title pt-4 px-4">
           {{ actionDialog.action === 'approved' ? 'Approve Request' : 'Reject Request' }}
         </v-card-title>
         <v-card-text class="px-4 pb-2">

package/components/WorkOrder/ListView.vue

@@ -14,7 +14,7 @@
     :length="pages"
   >
     <template #title>
-      <span class="text-h6 font-weight-regular">Work Order</span>
+      <span class="screen-card-title">Work Order</span>
     </template>
     <template #action-button>
       <v-btn

package/package.json

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