@7365admin1/layer-common 3.2.2-staging.170 → 3.2.2-staging.172

package/assets/css/primitives.css

@@ -599,6 +599,26 @@ select.app-field__input {
   opacity: 0.55;
 }
 
+/*
+ * The SAME step for the typed field, which never had one. `AppField` and
+ * `AppDateField` both take a `disabled` prop and pass it to the native
+ * `<input>` - and `AppField`'s prop doc says disabled "also greys the box" -
+ * but `.app-field` pins `background: var(--card)` and `.app-field__input` pins
+ * `color: var(--text)`, which overrides the greying a browser gives a disabled
+ * input for free. Measured 2026-08-16 on `AccessManagement`: enabled and
+ * disabled came back identical on background, colour, border, opacity and
+ * filter, on BOTH themes. The field was genuinely dead and read as live.
+ *
+ * Keyed off the input's own `:disabled` rather than a new modifier class, so
+ * it covers `AppField`, `AppDateField` and the native path of `AppSelect`
+ * without three templates having to remember to add it. 0.55 is
+ * `.app-select--disabled`'s number, not a second one.
+ */
+.app-field:has(.app-field__input:disabled) {
+  cursor: default;
+  opacity: 0.55;
+}
+
 .app-select__values {
   display: flex;
   align-items: center;

package/assets/css/screens.css

@@ -434,11 +434,26 @@
  * plain `<button>` carries, `.v-btn--disabled` is what Vuetify adds, and a
  * rule that matched only one of them would go quiet the moment the other path
  * was used.
+ *
+ * `.screen-icon-btn` was MISSED when this rule was written, and it has exactly
+ * the same shape: `.v-btn.screen-icon-btn` is (0,2,0) and sets `background:
+ * var(--card)` and `color: var(--text2)`, so it out-specifies Vuetify the same
+ * way. Measured 2026-08-16 on `AreaMain`: enabled and disabled came back
+ * identical on background, colour, border, opacity and filter, on BOTH themes.
+ * Its `:disabled` call sites are the promo-code tier rows in the admin app,
+ * where the last remaining tier's delete button is gated off and looked live.
+ *
+ * `.screen-modal__close` and `.screen-modal` were checked at the same time and
+ * are NOT affected - both already read as distinct when disabled, because the
+ * close button's background is `transparent` and a disabled `v-card` dims its
+ * children rather than itself. Neither is listed here.
  */
 .v-btn.screen-btn-primary:disabled,
 .v-btn.screen-btn-primary.v-btn--disabled,
 .v-btn.screen-btn-ghost:disabled,
-.v-btn.screen-btn-ghost.v-btn--disabled {
+.v-btn.screen-btn-ghost.v-btn--disabled,
+.v-btn.screen-icon-btn:disabled,
+.v-btn.screen-icon-btn.v-btn--disabled {
   opacity: 0.5;
 }
 

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.170",
+  "version": "3.2.2-staging.172",
   "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.",