@7365admin1/layer-common 3.2.2-staging.120 → 3.2.2-staging.121

package/components/HidQrCodeConfiguration.vue

@@ -1,276 +1,229 @@
+<!--
+  HID QR CODE CONFIGURATION - the reader's own settings, inside Site Settings.
+
+  It is mounted in `SiteSettings.vue`'s "HID Face Reader" expansion panel, next
+  to `HidServiceSettingsPanel`, so it takes the shape the handoff gives a
+  settings module BODY: section labels at 13px/700, explanatory lines at
+  12-13px/600 in `--muted`, the 38x22 toggle, 40px fields and 38px buttons.
+
+  Two pieces of legacy chrome are gone rather than restyled:
+    * the `#082e43` navy title bar. The design puts NO card inside an accordion
+      body - the accordion head ("HID Face Reader") is the card, and a second
+      titled panel inside it is a header the design does not draw. Its title is
+      kept as the body's first section label.
+    * the chevron button that sat on that bar. It had no `@click` and no model:
+      it looked like a collapse control and did nothing.
+
+  Every field, toggle, dialog, handler and save call is otherwise unchanged.
+-->
 <template>
   <section class="hid-qr-config">
-    <v-card flat class="config-panel">
-      <div class="panel-header">
+    <div class="config-body">
+      <div class="section-label config-body__title">HID Configuration</div>
+
+      <div class="online-mode-row">
         <div>
-          <h2>HID Configuration</h2>
+          <h3>Activate Online Mode</h3>
+          <p>Enables real-time server communication, synchronizing live credential verification and access data across the network.</p>
         </div>
-        <v-btn icon="mdi-chevron-up" variant="text" density="comfortable" />
+        <v-switch
+          v-model="form.onlineMode"
+          class="app-switch"
+          hide-details
+          :loading="savingSection === 'online-mode'"
+          :disabled="Boolean(savingSection) || !form.readerId"
+          @update:model-value="saveOnlineMode"
+        />
       </div>
 
-      <div class="config-body">
-        <div class="online-mode-row">
-          <div>
-            <h3>Activate Online Mode</h3>
-            <p>Enables real-time server communication, synchronizing live credential verification and access data across the network.</p>
+      <v-divider />
+
+      <div class="form-section identification-section">
+        <div class="section-label">Enable/disable reader identification method</div>
+        <p class="section-description">
+          Toggles multi-factor access methods, allowing users to authenticate via biometric, physical card, or credential inputs.
+        </p>
+        <div class="methods-grid">
+          <div
+            v-for="method in identificationMethodOptions"
+            :key="method.key"
+            class="method-control"
+            :class="{ 'method-control--disabled': !form.onlineMode }"
+          >
+            <span>{{ method.label }}</span>
+            <v-switch
+              v-model="form.identificationMethods[method.key]"
+              class="app-switch"
+              hide-details
+              density="compact"
+              :loading="savingSection === `method-${method.key}`"
+              :disabled="Boolean(savingSection) || !form.onlineMode"
+              @update:model-value="saveIdentificationMethod(method.key)"
+            />
           </div>
-          <v-switch
-            v-model="form.onlineMode"
-            class="hid-config-switch"
-            color="success"
-            hide-details
-            inset
-            :loading="savingSection === 'online-mode'"
-            :disabled="Boolean(savingSection) || !form.readerId"
-            @update:model-value="saveOnlineMode"
-          />
         </div>
+      </div>
 
-        <v-divider />
+      <v-divider />
+
+      <div class="form-section">
+        <div class="section-label">Printer Setup</div>
+        <div class="printer-grid">
+          <AppField v-model="form.printer.vendorId" placeholder="Vendor" />
+          <AppField v-model="form.printer.productId" placeholder="Product Id" />
+          <AppButton variant="ghost" icon="mdi-magnify" @click="scanPrinter">
+            Scan Printer
+          </AppButton>
+          <AppButton
+            variant="ghost"
+            icon="mdi-printer-check"
+            :disabled="!hasPrinterConfig || testingPrinter"
+            @click="testPrint"
+          >
+            Test &amp; Print
+          </AppButton>
+          <AppButton
+            icon="mdi-printer"
+            :disabled="savingSection === 'printer'"
+            @click="saveSection('printer')"
+          >
+            Save Settings
+          </AppButton>
+        </div>
+      </div>
 
-        <div class="form-section identification-section">
-          <div class="section-label">Enable/disable reader identification method</div>
-          <p class="section-description">
-            Toggles multi-factor access methods, allowing users to authenticate via biometric, physical card, or credential inputs.
-          </p>
-          <div class="methods-grid">
-            <div
-              v-for="method in identificationMethodOptions"
-              :key="method.key"
-              class="method-control"
-              :class="{ 'method-control--disabled': !form.onlineMode }"
-            >
-              <span>{{ method.label }}</span>
-              <v-switch
-                v-model="form.identificationMethods[method.key]"
-                class="hid-config-switch"
-                color="success"
-                hide-details
-                inset
-                density="compact"
-                :loading="savingSection === `method-${method.key}`"
-                :disabled="Boolean(savingSection) || !form.onlineMode"
-                @update:model-value="saveIdentificationMethod(method.key)"
-              />
-            </div>
-          </div>
+      <v-divider />
+
+      <div class="form-section">
+        <div class="section-label">HID QR Code Template</div>
+        <div class="template-grid">
+          <AppField v-model="form.template.header" placeholder="Header" />
+          <AppField v-model="form.template.subtext" placeholder="Subtext" />
+          <AppButton variant="ghost" icon="mdi-eye" @click="previewDialog = true">
+            Preview
+          </AppButton>
+          <AppButton
+            icon="mdi-qrcode-scan"
+            :disabled="savingSection === 'template'"
+            @click="saveSection('template')"
+          >
+            Save
+          </AppButton>
         </div>
+      </div>
 
-        <v-divider />
+      <v-divider />
 
-        <div class="form-section">
-          <div class="section-label">Printer Setup</div>
-          <div class="printer-grid">
-            <v-text-field
-              v-model="form.printer.vendorId"
-              placeholder="Vendor"
-              variant="outlined"
-              density="compact"
-              hide-details
-            />
-            <v-text-field
-              v-model="form.printer.productId"
-              placeholder="Product Id"
-              variant="outlined"
-              density="compact"
-              hide-details
-            />
-            <v-btn
-              class="text-none utility-button"
-              variant="outlined"
-              prepend-icon="mdi-magnify"
-              height="40"
-              @click="scanPrinter"
-            >
-              Scan Printer
-            </v-btn>
-            <v-btn
-              class="text-none test-button"
-              variant="outlined"
-              prepend-icon="mdi-printer-check"
-              height="40"
-              :loading="testingPrinter"
-              :disabled="!hasPrinterConfig"
-              @click="testPrint"
-            >
-              Test & Print
-            </v-btn>
-            <v-btn
-              class="text-none save-button"
-              variant="flat"
-              prepend-icon="mdi-printer"
-              height="40"
-              :loading="savingSection === 'printer'"
-              @click="saveSection('printer')"
-            >
-              Save Settings
-            </v-btn>
-          </div>
+      <div class="form-section">
+        <div class="section-label">HID QR Code Validity</div>
+        <div class="validity-grid">
+          <AppField v-model="validityInput" type="number" placeholder="Validity (minutes)" />
+          <AppButton
+            icon="mdi-timer-outline"
+            :disabled="savingSection === 'validity'"
+            @click="saveSection('validity')"
+          >
+            Save
+          </AppButton>
         </div>
+      </div>
 
-        <v-divider />
+      <v-divider />
 
-        <div class="form-section">
-          <div class="section-label">HID QR Code Template</div>
-          <div class="template-grid">
-            <v-text-field
-              v-model="form.template.header"
-              placeholder="Header"
-              variant="outlined"
-              density="compact"
-              hide-details
-            />
-            <v-text-field
-              v-model="form.template.subtext"
-              placeholder="Subtext"
-              variant="outlined"
-              density="compact"
-              hide-details
-            />
-            <v-btn
-              class="text-none preview-button"
-              variant="flat"
-              prepend-icon="mdi-eye"
-              height="40"
-              @click="previewDialog = true"
-            >
-              Preview
-            </v-btn>
-            <v-btn
-              class="text-none save-button"
-              variant="flat"
-              prepend-icon="mdi-qrcode-scan"
-              height="40"
-              :loading="savingSection === 'template'"
-              @click="saveSection('template')"
-            >
-              Save
-            </v-btn>
+      <div v-if="isPermissionManager" class="permission-section">
+        <div class="permission-location">
+          <div class="permission-copy">
+            <div class="section-label">Permission Location</div>
+            <p class="section-description">
+              Permissions are scoped to the location configured on the HID Face Reader.
+            </p>
           </div>
+          <AppSelect
+            v-model="permissionReaderId"
+            class="permission-location__select"
+            :items="permissionLocations"
+            item-title="label"
+            item-value="readerId"
+            placeholder="Select a Face Reader location"
+            :disabled="permissionLocations.length === 0"
+            @update:model-value="loadPermissions"
+          />
         </div>
 
+        <v-alert
+          v-if="permissionLocations.length === 0"
+          class="mb-4"
+          type="warning"
+          variant="tonal"
+          density="compact"
+        >
+          Add a Location to a Face Reader before assigning HID permissions.
+        </v-alert>
+
         <v-divider />
 
-        <div class="form-section">
-          <div class="section-label">HID QR Code Validity</div>
-          <div class="validity-grid">
-            <v-text-field
-              v-model.number="form.validityMinutes"
-              placeholder="Validity (minutes)"
-              variant="outlined"
-              density="compact"
-              hide-details
-              min="1"
-              type="number"
-            />
-            <v-btn
-              class="text-none save-button"
-              variant="flat"
-              prepend-icon="mdi-timer-outline"
-              height="40"
-              :loading="savingSection === 'validity'"
-              @click="saveSection('validity')"
+        <div class="permission-row">
+          <div class="permission-copy">
+            <div class="section-label">Access Permission</div>
+            <p class="section-description">
+              Select who can use the enabled HID identification methods at this site.
+            </p>
+          </div>
+          <div class="permission-actions">
+            <AppButton
+              v-for="option in accessPermissionOptions"
+              :key="option.category"
+              variant="ghost"
+              class="permission-button"
+              :disabled="!form.onlineMode || !permissionReaderId"
+              @click="openPermissionDialog(option.category)"
             >
-              Save
-            </v-btn>
+              <span class="permission-count">{{ permissionCount(option.category) }}</span>
+              <span>{{ option.label }}</span>
+            </AppButton>
           </div>
         </div>
 
         <v-divider />
 
-        <div v-if="isPermissionManager" class="permission-section">
-          <div class="permission-location">
-            <div class="permission-copy">
-              <div class="section-label">Permission Location</div>
-              <p class="section-description">
-                Permissions are scoped to the location configured on the HID Face Reader.
-              </p>
-            </div>
-            <v-select
-              v-model="permissionReaderId"
-              class="permission-location__select"
-              :items="permissionLocations"
-              item-title="label"
-              item-value="readerId"
-              placeholder="Select a Face Reader location"
-              variant="outlined"
-              density="compact"
-              hide-details
-              :disabled="permissionLocations.length === 0"
-              @update:model-value="loadPermissions"
-            />
+        <div class="permission-row permission-row--intercom">
+          <div class="permission-copy">
+            <div class="section-label">Access Intercom</div>
+            <p class="section-description">
+              Choose which authorized people and providers may use HID intercom access.
+            </p>
           </div>
-
-          <v-alert
-            v-if="permissionLocations.length === 0"
-            class="mb-4"
-            type="warning"
-            variant="tonal"
-            density="compact"
-          >
-            Add a Location to a Face Reader before assigning HID permissions.
-          </v-alert>
-
-          <v-divider />
-
-          <div class="permission-row">
-            <div class="permission-copy">
-              <div class="section-label">Access Permission</div>
-              <p class="section-description">
-                Select who can use the enabled HID identification methods at this site.
-              </p>
-            </div>
-            <div class="permission-actions">
-              <v-btn
-                v-for="option in accessPermissionOptions"
-                :key="option.category"
-                class="permission-button text-none"
-                variant="outlined"
-                :disabled="!form.onlineMode || !permissionReaderId"
-                @click="openPermissionDialog(option.category)"
-              >
-                <span class="permission-count">{{ permissionCount(option.category) }}</span>
-                <span>{{ option.label }}</span>
-              </v-btn>
-            </div>
-          </div>
-
-          <v-divider />
-
-          <div class="permission-row permission-row--intercom">
-            <div class="permission-copy">
-              <div class="section-label">Access Intercom</div>
-              <p class="section-description">
-                Choose which authorized people and providers may use HID intercom access.
-              </p>
-            </div>
-            <div class="permission-actions permission-actions--single">
-              <v-btn
-                class="permission-button text-none"
-                variant="outlined"
-                :disabled="!form.onlineMode || !permissionReaderId || permissionState.assignments.length === 0"
-                @click="openPermissionDialog('intercom')"
-              >
-                <span class="permission-count">{{ permissionState.counts.intercom }}</span>
-                <span>Intercom Permissions</span>
-              </v-btn>
-            </div>
+          <div class="permission-actions permission-actions--single">
+            <AppButton
+              variant="ghost"
+              class="permission-button"
+              :disabled="!form.onlineMode || !permissionReaderId || permissionState.assignments.length === 0"
+              @click="openPermissionDialog('intercom')"
+            >
+              <span class="permission-count">{{ permissionState.counts.intercom }}</span>
+              <span>Intercom Permissions</span>
+            </AppButton>
           </div>
         </div>
       </div>
-    </v-card>
+    </div>
 
     <v-dialog v-model="previewDialog" max-width="420">
       <v-card class="preview-shell">
-        <v-btn
+        <AppButton
+          variant="icon"
           class="preview-close"
           icon="mdi-close"
-          variant="text"
-          density="comfortable"
           @click="previewDialog = false"
         />
         <v-card-text>
           <div class="preview-title">QR code Preview</div>
+          <!--
+            THE PRINTED PASS. Deliberately NOT themed: this is a preview of a
+            piece of card that comes out of a printer, so it is white with black
+            ink on both themes, the way the physical pass is. Everything AROUND
+            it sits on the dialog scrim, which is dark in both themes.
+          -->
           <div class="pass-preview">
             <div class="pass-heading">{{ form.template.header || "Header" }}</div>
             <div class="pass-subtext">{{ form.template.subtext || "Subtext" }}</div>
@@ -302,25 +255,19 @@
             <div class="permission-dialog__title">{{ permissionDialogTitle }}</div>
             <div class="permission-dialog__subtitle">{{ permissionDialogDescription }}</div>
           </div>
-          <v-btn
+          <AppButton
+            variant="icon"
             icon="mdi-close"
-            variant="text"
-            density="comfortable"
             aria-label="Close permission dialog"
             @click="closePermissionDialog"
           />
         </v-card-title>
 
         <v-card-text class="permission-dialog__body">
-          <v-text-field
+          <AppField
             v-model="permissionSearch"
-            class="permission-search"
-            prepend-inner-icon="mdi-magnify"
+            search
             placeholder="Search by name or details"
-            variant="outlined"
-            density="compact"
-            hide-details
-            clearable
           />
 
           <div class="permission-list-summary" aria-live="polite">
@@ -332,7 +279,7 @@
 
           <div class="permission-list" :class="{ 'permission-list--loading': loadingPermissionCandidates }">
             <div v-if="loadingPermissionCandidates" class="permission-empty">
-              <v-progress-circular indeterminate color="primary" size="28" />
+              <v-progress-circular indeterminate class="permission-spinner" size="28" />
               <span>Loading permissions...</span>
             </div>
 
@@ -352,7 +299,6 @@
                   class="permission-list-item__checkbox"
                   :model-value="selectedPermissionIds.has(candidate.subjectId)"
                   :aria-label="`Select ${candidate.name}`"
-                  color="success"
                   @update:model-value="togglePermissionCandidate(candidate.subjectId, Boolean($event))"
                 />
               </label>
@@ -366,17 +312,13 @@
         </v-card-text>
 
         <v-card-actions class="permission-dialog__actions">
-          <v-btn class="text-none" variant="text" @click="closePermissionDialog">Cancel</v-btn>
-          <v-btn
-            class="text-none save-button"
-            variant="flat"
-            min-width="140"
-            :loading="savingPermissions"
-            :disabled="loadingPermissionCandidates"
+          <AppButton variant="ghost" @click="closePermissionDialog">Cancel</AppButton>
+          <AppButton
+            :disabled="loadingPermissionCandidates || savingPermissions"
             @click="savePermissions"
           >
             Save Permissions
-          </v-btn>
+          </AppButton>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -385,6 +327,7 @@
   </section>
 </template>
 
+
 <script setup lang="ts">
 type HidIdentificationMethod = keyof NonNullable<THidQrCodePassConfig["identificationMethods"]>;
 
@@ -536,6 +479,19 @@ const siteLabel = computed(() => siteData.value?.code || siteData.value?.block |
 const validityText = computed(() =>
   form.validityMinutes ? `${form.validityMinutes} minutes` : "Not set",
 );
+
+/**
+ * `AppField` is a native `<input>` and its model is a string, where
+ * `form.validityMinutes` is a `number | null` on the config type. This keeps
+ * the field's value exactly the number `v-model.number` used to put there -
+ * empty stays `null`, not `NaN` and not `""`.
+ */
+const validityInput = computed({
+  get: () => (form.validityMinutes === null || form.validityMinutes === undefined ? "" : String(form.validityMinutes)),
+  set: (value: string) => {
+    form.validityMinutes = value === "" ? null : Number(value);
+  },
+});
 const visiblePermissionCandidates = computed(() => {
   const search = permissionSearch.value.trim().toLowerCase();
   if (!search) return permissionCandidates.value;
@@ -904,38 +860,32 @@ function showMessage(text: string, color: string) {
 }
 </script>
 
+
 <style scoped>
+/*
+  EVERY COLOUR IS A TOKEN NOW.
+
+  This file carried 38 distinct literal hexes - a navy `#082e43` bar, greens
+  `#2eaf55` / `#35b84b` / `#34b84a` / `#2da643`, greys `#233545` / `#677280` /
+  `#334454` / `#8b9297` / `#dce2e7` / `#e6eaee` and a dozen more. A literal is
+  the same colour on both themes, which is why this screen had no dark theme at
+  all. The LAYOUT (the grids, the breakpoints, the 42px method boxes) is the
+  screen's own and is kept; only the palette moved.
+
+  The one deliberate exception is `.pass-preview` - see the template comment.
+*/
 .hid-qr-config {
   width: 100%;
   min-width: 0;
   padding: 8px 0 28px;
 }
 
-.config-panel {
-  border: 1px solid #e6eaee;
-  border-radius: 6px;
-  overflow: hidden;
-  background: #ffffff;
-}
-
-.panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 48px;
-  padding: 0 18px;
-  background: #082e43;
-  color: #ffffff;
-}
-
-.panel-header h2 {
-  margin: 0;
-  font-size: 13px;
-  font-weight: 700;
+.config-body {
+  padding: 4px 0 0;
 }
 
-.config-body {
-  padding: 30px 38px;
+.config-body__title {
+  margin-bottom: 14px;
 }
 
 .online-mode-row {
@@ -946,10 +896,13 @@ function showMessage(text: string, color: string) {
   padding: 0 0 20px;
 }
 
+/* The prototype's settings body: a 13px/700 label over a 12-13px/600 muted
+   line. */
 .online-mode-row h3,
 .section-label {
   margin: 0 0 6px;
-  color: #233545;
+  color: var(--text);
+  font-family: var(--font-sans);
   font-size: 13px;
   font-weight: 700;
 }
@@ -957,8 +910,10 @@ function showMessage(text: string, color: string) {
 .online-mode-row p,
 .section-description {
   margin: 0;
-  color: #677280;
+  color: var(--muted);
+  font-family: var(--font-sans);
   font-size: 12px;
+  font-weight: 600;
   line-height: 1.5;
 }
 
@@ -984,10 +939,12 @@ function showMessage(text: string, color: string) {
   min-width: 0;
   min-height: 42px;
   padding: 0 10px 0 14px;
-  border: 1px solid #dce2e7;
-  border-radius: 6px;
-  color: #334454;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  color: var(--text2);
+  font-family: var(--font-sans);
   font-size: 12px;
+  font-weight: 700;
 }
 
 .method-control span {
@@ -997,8 +954,8 @@ function showMessage(text: string, color: string) {
 }
 
 .method-control--disabled {
-  background-color: #f5f6f7;
-  color: #8b9297;
+  background-color: var(--hover);
+  color: var(--muted);
 }
 
 .method-control :deep(.v-switch) {
@@ -1009,33 +966,15 @@ function showMessage(text: string, color: string) {
   min-height: 32px;
 }
 
-.hid-config-switch :deep(.v-switch__track) {
-  background-color: #8b9297;
-  opacity: 1;
-}
-
-.hid-config-switch :deep(.v-selection-control--dirty .v-switch__track) {
-  background-color: #2eaf55 !important;
-  color: #2eaf55 !important;
-  opacity: 1;
-}
-
-.hid-config-switch :deep(.v-switch__thumb) {
-  background-color: #fff !important;
-  color: #fff !important;
-}
-
-.hid-config-switch.v-input--disabled :deep(.v-switch__track) {
-  background-color: #aeb4b8 !important;
-  color: #aeb4b8 !important;
-  opacity: 1;
-}
+/* The three `.hid-config-switch` rules are gone: `.app-switch` in
+   primitives.css is the handoff's toggle, and it is shared with the other two
+   HID panels that have one. */
 
 .printer-grid {
   display: grid;
   grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr);
   gap: 14px;
-  align-items: center;
+  align-items: end;
 }
 
 .template-grid {
@@ -1044,16 +983,11 @@ function showMessage(text: string, color: string) {
   gap: 14px;
 }
 
-.template-grid .preview-button,
-.template-grid .save-button {
-  width: 100%;
-}
-
 .validity-grid {
   display: grid;
   grid-template-columns: minmax(180px, 260px) minmax(140px, 260px);
   gap: 14px;
-  align-items: center;
+  align-items: end;
 }
 
 .permission-section {
@@ -1099,12 +1033,11 @@ function showMessage(text: string, color: string) {
   justify-content: end;
 }
 
+/* A ghost button carrying a count badge. `AppButton --ghost` supplies the
+   height, radius, border and type; only the alignment is local. */
 .permission-button {
   justify-content: flex-start;
   min-height: 42px;
-  padding-inline: 12px;
-  border-color: #dce2e7;
-  color: #334454;
 }
 
 .permission-count {
@@ -1114,20 +1047,21 @@ function showMessage(text: string, color: string) {
   height: 20px;
   margin-right: 8px;
   border-radius: 50%;
-  background: #dce2e7;
-  color: #526170;
+  background: var(--accent-soft);
+  color: var(--accent-text);
   font-size: 11px;
   font-weight: 700;
 }
 
 .permission-button:not(:disabled):hover {
-  border-color: #1473c9;
-  color: #0a5da7;
+  border-color: var(--accent);
+  color: var(--accent-text);
 }
 
 .permission-dialog {
   overflow: hidden;
-  border-radius: 6px;
+  border-radius: var(--r-modal);
+  background: var(--card);
 }
 
 .permission-dialog__header {
@@ -1136,19 +1070,21 @@ function showMessage(text: string, color: string) {
   justify-content: space-between;
   gap: 16px;
   padding: 16px 18px 14px;
-  border-bottom: 1px solid #e5e9ed;
+  border-bottom: 1px solid var(--border);
 }
 
 .permission-dialog__title {
-  color: #172534;
+  color: var(--text);
+  font-family: var(--font-sans);
   font-size: 18px;
-  font-weight: 700;
+  font-weight: 800;
 }
 
 .permission-dialog__subtitle {
   margin-top: 4px;
-  color: #687583;
+  color: var(--muted);
   font-size: 12px;
+  font-weight: 600;
   white-space: normal;
 }
 
@@ -1158,21 +1094,18 @@ function showMessage(text: string, color: string) {
   padding: 14px 18px 16px;
 }
 
-.permission-search :deep(.v-field) {
-  min-height: 44px;
-}
-
 .permission-list-summary {
   display: flex;
   align-items: center;
   justify-content: space-between;
   min-height: 22px;
-  color: #778391;
+  color: var(--muted);
   font-size: 11px;
+  font-weight: 600;
 }
 
 .permission-list-summary__selected {
-  color: #286c3c;
+  color: var(--ok);
   font-weight: 700;
 }
 
@@ -1180,9 +1113,9 @@ function showMessage(text: string, color: string) {
   min-height: 180px;
   max-height: min(360px, 48vh);
   overflow-y: auto;
-  border: 1px solid #dfe5ea;
-  border-radius: 6px;
-  background: #ffffff;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--card);
 }
 
 .permission-list--loading {
@@ -1197,9 +1130,9 @@ function showMessage(text: string, color: string) {
   align-items: center;
   min-height: 56px;
   padding: 7px 12px;
-  border-bottom: 1px solid #edf0f3;
+  border-bottom: 1px solid var(--border);
   cursor: pointer;
-  transition: background-color 120ms ease;
+  transition: background-color var(--motion) ease;
 }
 
 .permission-list-item:last-child {
@@ -1207,15 +1140,12 @@ function showMessage(text: string, color: string) {
 }
 
 .permission-list-item:hover {
-  background: #f7fafc;
-}
-
-.permission-list-item--selected {
-  background: #f1f8f3;
+  background: var(--hover);
 }
 
+.permission-list-item--selected,
 .permission-list-item--selected:hover {
-  background: #eaf5ed;
+  background: var(--accent-soft);
 }
 
 .permission-list-item__content {
@@ -1232,23 +1162,25 @@ function showMessage(text: string, color: string) {
 }
 
 .permission-list-item__content strong {
-  color: #243443;
+  color: var(--text);
   font-size: 13px;
+  font-weight: 700;
   line-height: 1.35;
 }
 
 .permission-list-item__content small,
 .permission-list-item__group {
-  color: #778391;
+  color: var(--muted);
   font-size: 11px;
+  font-weight: 600;
 }
 
 .permission-list-item__group {
   max-width: 170px;
   overflow: hidden;
   padding: 4px 9px;
-  border-radius: 4px;
-  background: #eef2f5;
+  border-radius: var(--r-tag);
+  background: var(--hover);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -1269,37 +1201,31 @@ function showMessage(text: string, color: string) {
   gap: 10px;
   min-height: 180px;
   padding: 24px;
-  color: #75818c;
+  color: var(--muted);
   font-size: 13px;
   text-align: center;
 }
 
+.permission-spinner {
+  color: var(--accent);
+}
+
 .permission-dialog__actions {
   justify-content: flex-end;
   gap: 8px;
   padding: 12px 18px;
-  border-top: 1px solid #e5e9ed;
-}
-
-.save-button {
-  background: #082e43;
-  color: #ffffff;
+  border-top: 1px solid var(--border);
 }
 
-.preview-button {
-  background: #35b84b;
-  color: #ffffff;
-}
-
-.test-button {
-  border-color: #34b84a;
-  color: #2da643;
-}
-
-.utility-button {
-  color: #1f3448;
-}
+/*
+  THE PRINTED PASS - the one thing here that is NOT themed.
 
+  It previews a physical card that comes out of a badge printer, so it stays
+  white with dark ink on both themes; theming it would show the operator a
+  preview of something the printer cannot produce. Everything around it sits on
+  the dialog scrim, which is dark on both themes - which is why the title above
+  it is white.
+*/
 .preview-shell {
   position: relative;
   overflow: visible;
@@ -1312,13 +1238,15 @@ function showMessage(text: string, color: string) {
   top: 38px;
   right: 18px;
   z-index: 2;
+  color: #ffffff;
 }
 
 .preview-title {
   margin: 0 0 12px;
   color: #ffffff;
+  font-family: var(--font-sans);
   font-size: 18px;
-  font-weight: 700;
+  font-weight: 800;
 }
 
 .pass-preview {
@@ -1408,10 +1336,6 @@ function showMessage(text: string, color: string) {
 }
 
 @media (max-width: 700px) {
-  .config-body {
-    padding: 22px 16px;
-  }
-
   .online-mode-row,
   .printer-grid,
   .template-grid,