@7365admin1/layer-common 3.2.2-staging.171 → 3.2.2-staging.173

package/assets/css/primitives.css

@@ -387,6 +387,62 @@
   filter: brightness(1.06);
 }
 
+/*
+ * THE `type="button"` TIE, AND WHY THIS BLOCK EXISTS.
+ *
+ * Vuetify ships `[type="button"] { color: inherit }`. That is an ATTRIBUTE
+ * selector at (0,1,0) - an exact tie with every `.app-btn` rule above, which is
+ * also (0,1,0). A tie is broken by INJECTION ORDER, so in a document where
+ * Vuetify's stylesheet lands after this one, the background from the rules above
+ * still applies and the `color` does not: the button keeps its accent fill and
+ * takes the page ink instead of its own.
+ *
+ * `AppButton` renders `<button :type="type">` with `type` defaulting to
+ * "button", so EVERY variant carries the attribute the tie needs.
+ *
+ * MEASURED, 2026-08-16. Injecting `[type="button"] { color: inherit }` last, on
+ * a real primary in the harness:
+ *
+ *     before   fill rgb(75,116,196)   ink rgb(255,255,255)   4.57:1
+ *     after    fill rgb(75,116,196)   ink rgb(25,27,31)      3.77:1
+ *
+ * `rgb(25,27,31)` is `--text` on the light theme - the button had stopped
+ * choosing its own ink at all.
+ *
+ * Naming the ELEMENT makes each of these (0,1,1), which beats an attribute
+ * selector WHATEVER the order. No `!important`: a screen that wants a different
+ * label colour must still be able to say so.
+ *
+ * This is an ADDITIONAL block rather than an edit to the rules above, and
+ * deliberately so: `AppButton` renders a `NuxtLink` when `to` is given, which is
+ * an `<a>` with no `type` attribute. Putting `button` on the original selectors
+ * would have taken the colour away from that path entirely. The values below are
+ * copied verbatim from the rules above; if one changes, change both.
+ */
+button.app-btn {
+  color: var(--on-accent-strong);
+}
+
+button.app-btn--ghost {
+  color: var(--text2);
+}
+
+button.app-btn--icon {
+  color: var(--text2);
+}
+
+button.app-btn--row {
+  color: var(--muted);
+}
+
+button.app-btn--ok {
+  color: var(--on-ok);
+}
+
+button.app-btn--err {
+  color: var(--err);
+}
+
 .app-btn:disabled {
   opacity: 0.5;
   cursor: default;

package/components/AccessCardQrTagging.vue

@@ -120,7 +120,7 @@
 
           <template #item.qrTag="{ item }">
             <v-icon
-              :color="item.qrTag ? 'success' : 'grey-lighten-1'"
+              :color="item.qrTag ? 'success' : 'muted'"
               size="22"
             >
               {{ item.qrTag ? "mdi-check-circle" : "mdi-circle-outline" }}

package/components/BulletinBoardForm.vue

@@ -37,7 +37,7 @@
                   <template v-slot:prepend>
                     <v-checkbox-btn
                       :color="
-                        selectedSomeRecipients ? 'indigo-darken-4' : undefined
+                        selectedSomeRecipients ? 'primary-button' : undefined
                       "
                       :indeterminate="
                         selectedSomeRecipients && !selectedAllRecipients

package/components/CameraForm.vue

@@ -91,7 +91,7 @@
               density="comfortable"
               true-value="active"
               false-value="inactive"
-              :color="camera.status === 'active' ? 'success' : 'grey'"
+              :color="camera.status === 'active' ? 'success' : 'muted'"
               :label="camera.status === 'active' ? 'Active' : 'Inactive'"
             ></v-switch>
           </v-col>

package/components/DocumentManagement.vue

@@ -123,7 +123,7 @@
             <v-icon
               size="18"
               :color="
-                isFolderItem(item._raw) ? 'amber-darken-2' : 'grey-darken-2'
+                isFolderItem(item._raw) ? 'warning' : 'muted'
               "
             >
               {{

package/components/VehicleManagement.vue

@@ -81,7 +81,10 @@
                 <span class="d-flex ga-3 align-center"><strong>{{ label }}:</strong></span>
                 <!-- <PlateNumberDisplay :plate-numbers="selectedVehicleObject[key]" show-all :default-value="selectedVehicleObject.plateNumber" />   -->
                 <v-col cols="12">
-                  <v-card flat outlined class="pa-2" border="sm black" :loading="loadingPlateNumberDetails">
+                  <!-- `border="sm black"` pinned a hard black edge on BOTH themes. Dropping only
+                       the colour word keeps the width and lets the edge fall back to
+                       `--v-border-color`, which is the design's `--border` in each theme. -->
+                  <v-card flat outlined class="pa-2" border="sm" :loading="loadingPlateNumberDetails">
                     <v-data-table :items="selectedVehicleObject[key]" :headers="plateHeaders" hide-default-footer>
                       <template #item.status="{ value }">
                         <v-chip :color="formatVehicleStatus(value).color" size="x-small" dark>
@@ -102,13 +105,13 @@
                               title="Approve" prepend-icon="mdi-check-circle" base-color="success"
                               @click="handleApproveVehicle(plateNumberItem as TPlateNumber)" />
                             <v-list-item v-if="(plateNumberItem as TPlateNumber)?.status == 'deleted'" title="Restore"
-                              prepend-icon="mdi-restore" base-color="orange"
+                              prepend-icon="mdi-restore" base-color="warning"
                               @click="handleRestoreVehicle(plateNumberItem as TPlateNumber)" />
                             <v-list-item
                               v-if="((plateNumberItem as TPlateNumber)?.type === 'whitelist' || (plateNumberItem as TPlateNumber)?.type === 'blocklist') && plateNumberItem?.status == 'active'"
                               :title="(plateNumberItem as TPlateNumber)?.type === 'blocklist' ? 'Whitelist' : 'Blocklist'"
                               prepend-icon="mdi-swap-horizontal"
-                              :base-color="(plateNumberItem as TPlateNumber)?.type === 'blocklist' ? 'primary' : 'red'"
+                              :base-color="(plateNumberItem as TPlateNumber)?.type === 'blocklist' ? 'primary' : 'error'"
                               @click="handleUpdateType(plateNumberItem as TPlateNumber)" />
 
                             <v-list-item

package/components/VisitorSocketPopUp.vue

@@ -49,7 +49,7 @@
           v-if="snackBarMessage.isUnregistered"
           rounded="md"
           variant="text"
-          color="baseButton"
+          color="primary"
           class="text-truncate text-decoration-underline px-0"
           @click="goToUnregistered"
         >

package/package.json

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