@7365admin1/layer-common 3.2.2-staging.128 → 3.2.2-staging.129

package/components/Carousel.vue

@@ -22,9 +22,7 @@
 
         <div class="edit-btn mb-5" v-if="imgEditable">
           <v-btn
-            color="primary"
-            height="42px"
-            width="100px"
+            class="screen-btn-primary"
             @click.stop="onMediaEdit(item.url, idx)"
           >
             Edit
@@ -32,14 +30,9 @@
         </div>
 
         <div class="delete-btn mb-3" v-if="imgDelete">
-          <v-btn
-            color="red"
-            height="42px"
-            width="100px"
-            @click.stop="onMediaDelete(item.url)"
-          >
+          <AppButton variant="err" @click.stop="onMediaDelete(item.url)">
             Delete
-          </v-btn>
+          </AppButton>
         </div>
       </v-carousel-item>
 
@@ -53,20 +46,15 @@
             <source :src="item.url" />
           </video>
           <div class="play-overlay">
-            <v-btn class="play-btn" icon size="55" color="primary">
+            <v-btn class="play-btn" icon size="55">
               <v-icon icon="mdi-play" size="40" />
             </v-btn>
           </div>
 
           <div class="delete-btn pb-4" v-if="imgDelete">
-            <v-btn
-              color="red"
-              height="42px"
-              width="100px"
-              @click.stop="onMediaDelete(item.url)"
-            >
+            <AppButton variant="err" @click.stop="onMediaDelete(item.url)">
               Delete
-            </v-btn>
+            </AppButton>
           </div>
         </div>
       </v-carousel-item>
@@ -82,19 +70,16 @@
           <v-icon
             :icon="getFileIcon(item.type)"
             size="150"
-            :color="getFileIconColor(getFileIcon(item.type))"
+            :class="getFileIconTone(getFileIcon(item.type))"
           />
-          <div class="text-h6 text-center text-wrap mt-2">{{ item.name }}</div>
+          <div class="screen-card-title text-center text-wrap mt-2">
+            {{ item.name }}
+          </div>
 
           <div class="delete-btn pb-4" v-if="imgDelete">
-            <v-btn
-              color="red"
-              height="42px"
-              width="100px"
-              @click.stop="onMediaDelete(item.url)"
-            >
+            <AppButton variant="err" @click.stop="onMediaDelete(item.url)">
               Delete
-            </v-btn>
+            </AppButton>
           </div>
         </div>
       </v-carousel-item>
@@ -105,7 +90,7 @@
 
   <!-- Dialog for fullscreen view -->
   <v-dialog v-model="isDialogOpen" max-width="700">
-    <v-card>
+    <v-card class="screen-modal">
       <v-btn icon class="close-btn" @click="isDialogOpen = false">
         <v-icon icon="mdi-close" size="40" />
       </v-btn>
@@ -346,14 +331,21 @@ const getFileIcon = (type: string) => {
   return iconMap[type] || "mdi-file-outline";
 };
 
-function getFileIconColor(icon?: string) {
-  if (icon === "mdi-file-pdf-box") return "#F44336"; // Red
-  if (icon === "mdi-file-word-box") return "#2196F3"; // Blue
+/**
+ * The file-type tone. The handoff draws no file-type icon palette at all, so
+ * the six distinctions this screen already made are kept and simply said in the
+ * tokens that carry those tones - the same reading `AttachmentsViewer` took.
+ * The one exception is the archive icon, which was purple: there is no purple
+ * token, so it falls in with the generic files on `--muted`. That IS a change
+ * of meaning and is recorded rather than papered over.
+ */
+function getFileIconTone(icon?: string) {
+  if (icon === "mdi-file-pdf-box") return "tone-err";
+  if (icon === "mdi-file-word-box") return "tone-info";
   if (icon === "mdi-file-excel-box" || icon === "mdi-file-delimited-outline")
-    return "#4CAF50"; // Green
-  if (icon === "mdi-file-powerpoint-box") return "#FF9800"; // Orange
-  if (icon === "mdi-zip-box-outline") return "#9C27B0"; // Purple
-  return "grey";
+    return "tone-ok";
+  if (icon === "mdi-file-powerpoint-box") return "tone-warn";
+  return "tone-muted";
 }
 
 const message = ref("");
@@ -419,6 +411,13 @@ async function downloadFile({
   right: 5%;
 }
 
+/**
+ * DELIBERATELY NOT `.screen-modal__close`. This close sits ON the picture, not
+ * on a card, so the design's borderless muted glyph would be unreadable over a
+ * bright photo in light theme and over a dark one in dark theme. The existing
+ * dark chip is legible on both, and the handoff draws no media lightbox at all
+ * - parity with a readable control wins over a primitive that would disappear.
+ */
 .close-btn {
   position: absolute;
   top: 10px;
@@ -440,8 +439,29 @@ async function downloadFile({
   pointer-events: auto;
 }
 
+/* Was `color="primary"`, i.e. the FOREGROUND token used as a fill. The button
+   the design fills is `--accent-strong` with `--on-accent-strong` ink. */
 .play-btn {
-  border-radius: 9999px;
+  border-radius: var(--r-pill);
+  background: var(--accent-strong);
+  color: var(--on-accent-strong);
+}
+
+/* The file-type tones, on tokens instead of six hard-coded hexes. */
+.tone-err {
+  color: var(--err);
+}
+.tone-info {
+  color: var(--info);
+}
+.tone-ok {
+  color: var(--ok);
+}
+.tone-warn {
+  color: var(--warn);
+}
+.tone-muted {
+  color: var(--muted);
 }
 
 .dialog-video-container {

package/components/Chat/Bubbles.vue

@@ -1,36 +1,32 @@
 <template>
-  <v-card class="mb-2 pa-4 rounded-lg" width="400" elevation="2">
+  <v-card class="chat-bubble screen-card mb-2 pa-4" width="400" elevation="0">
     <v-row no-gutters align="center">
       <v-col cols="auto" class="mr-3">
-        <v-avatar color="surface-variant" size="35">
+        <v-avatar class="chat-bubble__avatar" size="35">
           <v-img v-if="currentUser?.profile" width="15" height="15" />
-          <span v-else class="text-h5">{{ getNameInitials(senderName) }}</span>
+          <span v-else>{{ getNameInitials(senderName) }}</span>
         </v-avatar>
       </v-col>
 
       <v-col class="d-flex flex-column">
-        <span class="text-body-2 font-weight-medium">{{ senderName }}</span>
-        <span class="text-caption text-grey">{{ role }}</span>
+        <span class="chat-bubble__sender">{{ senderName }}</span>
+        <span class="chat-bubble__sub">{{ role }}</span>
       </v-col>
     </v-row>
 
     <v-row no-gutters class="mt-1">
       <v-col>
-        <span class="py-2">{{ message }}</span>
+        <span class="chat-bubble__text py-2">{{ message }}</span>
 
         <v-row no-gutters justify="space-between" align="center" class="mt-1">
           <v-col cols="auto">
-            <span class="text-caption">{{ timestamp }}</span>
+            <span class="chat-bubble__sub">{{ timestamp }}</span>
           </v-col>
-          <v-col
-            v-if="isCurrentUser"
-            cols="auto"
-            class="d-flex align-center bg-grey-200"
-          >
-            <v-icon size="16" class="mr-1 text--secondary"
+          <v-col v-if="isCurrentUser" cols="auto" class="d-flex align-center">
+            <v-icon size="16" class="chat-bubble__sub mr-1"
               >mdi-eye-outline</v-icon
             >
-            <span class="text-caption text--secondary">{{ seenLabel }}</span>
+            <span class="chat-bubble__sub">{{ seenLabel }}</span>
           </v-col>
         </v-row>
       </v-col>
@@ -51,3 +47,36 @@ defineProps<{
 const { currentUser } = useLocalAuth();
 const { getNameInitials } = useUtils();
 </script>
+
+<style scoped>
+.chat-bubble {
+  font-family: var(--font-sans);
+  color: var(--text);
+}
+
+/* Was `color="surface-variant"` with the initials at `text-h5`, i.e. a 24px
+   pair of letters in a 35px circle. The design's avatar is the tone wash with
+   the accent ink, and the initials fit inside it. */
+.chat-bubble__avatar {
+  background: var(--hover);
+  color: var(--text2);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.chat-bubble__sender {
+  font-size: var(--fs-cell);
+  font-weight: 600;
+}
+
+.chat-bubble__text {
+  font-size: var(--fs-cell);
+}
+
+/* The role, the timestamp and the seen label were `text-grey`, `text-caption`
+   and `text--secondary` - three different greys for one sub-line. One tone. */
+.chat-bubble__sub {
+  font-size: var(--fs-chip);
+  color: var(--muted);
+}
+</style>

package/components/Chat/Information.vue

@@ -1,21 +1,16 @@
 <template>
   <v-sheet
-    elevation="1"
+    elevation="0"
     rounded="0"
-    class="fill-height d-flex flex-column"
-    style="border-right: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0"
+    class="chat-info fill-height d-flex flex-column"
   >
     <v-row class="pa-4">
       <v-sheet
         class="overflow-y-auto flex-grow-1"
         :style="{ height: 'calc(100vh - 250px)', overflowX: 'hidden' }"
       >
-        <v-col
-          cols="12"
-          class="mb-2"
-          style="position: sticky; top: 0; background-color: white; z-index: 1"
-        >
-          <h3 class="text-h6">
+        <v-col cols="12" class="chat-info__head mb-2">
+          <h3 class="screen-card-title">
             {{ type === "workOrder" ? "Work Order" : "Feedback" }} Information
           </h3>
         </v-col>
@@ -105,7 +100,7 @@
             </v-col>
             <v-col v-else cols="6" class="py-1 text-right">
               <v-btn
-                class="text-none text-capitalize text-blue"
+                class="chat-info__link text-none"
                 rounded="pill"
                 variant="flat"
                 size="small"
@@ -130,13 +125,7 @@
           <v-row dense class="my-1">
             <v-col cols="6" class="py-1"><strong>Status:</strong></v-col>
             <v-col cols="6" class="py-1 text-right">
-              <v-chip
-                :color="getColorStatus(item.status)"
-                size="x-small"
-                text-color="white"
-              >
-                {{ item.status }}
-              </v-chip>
+              <StatusChip :status="item.status" />
             </v-col>
           </v-row>
 
@@ -152,12 +141,11 @@
       </v-sheet>
     </v-row>
 
-    <v-sheet class="px-4 py-2">
+    <v-sheet class="chat-info__actions px-4 py-2">
       <v-btn
         block
-        color="primary"
         variant="flat"
-        class="mb-2 text-capitalize"
+        class="screen-btn-primary mb-2"
         @click="$emit('edit')"
       >
         Edit
@@ -165,23 +153,15 @@
       <v-btn
         v-if="item?.status !== 'Completed'"
         block
-        color="primary-button"
-        density="default"
-        class="mb-2 text-capitalize"
+        variant="flat"
+        class="screen-btn-primary mb-2"
         @click="$emit('mark-complete-request')"
       >
         Mark as Complete
       </v-btn>
-      <v-btn
-        block
-        variant="flat"
-        color="red"
-        density="default"
-        class="text-white text-capitalize"
-        @click="$emit('delete')"
-      >
+      <AppButton variant="err" class="chat-info__delete" @click="$emit('delete')">
         Delete
-      </v-btn>
+      </AppButton>
     </v-sheet>
 
     <WorkOrderCreate
@@ -414,3 +394,40 @@ function showWorkOrderInfo(workOrderId: string) {
   };
 }
 </script>
+
+<style scoped>
+/* The same two hard-coded #e0e0e0 hairlines the other two chat panels carried,
+   and a sticky heading whose background was the literal word `white` - i.e. a
+   white bar across the dark theme. */
+.chat-info {
+  background: var(--card);
+  border-right: 1px solid var(--border);
+  border-top: 1px solid var(--border);
+  font-family: var(--font-sans);
+  color: var(--text);
+}
+
+.chat-info__head {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--card);
+}
+
+.chat-info__actions {
+  background: var(--card);
+}
+
+/* AppButton is a <button>, not a v-btn, so `block` does not reach it. */
+.chat-info__delete {
+  width: 100%;
+}
+
+/* Was `text-blue` - a Vuetify palette word, not a token. */
+.chat-info__link {
+  background: transparent;
+  color: var(--accent-text);
+  font-size: var(--fs-btn);
+  font-weight: var(--fw-btn-strong);
+}
+</style>

package/components/Chat/ListCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card class="mb-2 pa-2 rounded-lg border-sm" elevation="0">
+  <v-card class="chat-listcard screen-card mb-2 pa-2" elevation="0">
     <v-row no-gutters align="center">
       <v-col cols="12" sm="4" class="d-flex justify-center align-center">
         <v-img
@@ -15,30 +15,30 @@
       <v-col cols="12" sm="8" class="py-2 pe-1">
         <v-row dense>
           <v-col cols="12" class="d-flex align-center flex-wrap">
-            <span class="text-caption font-weight-medium me-1">Created by</span>
+            <span class="chat-listcard__label me-1">Created by</span>
 
-            <v-avatar color="surface-variant" size="20" class="me-1">
+            <v-avatar class="chat-listcard__avatar me-1" size="20">
               <v-img
                 v-if="userProfile"
                 :src="userProfile"
                 width="20"
                 height="20"
               />
-              <span v-else class="text-overline">
+              <span v-else class="chat-listcard__initials">
                 {{ getNameInitials }}
               </span>
             </v-avatar>
 
-            <span class="text-caption">{{ createdByName || "Unknown" }}</span>
+            <span class="chat-listcard__cell">{{ createdByName || "Unknown" }}</span>
           </v-col>
 
-          <v-col cols="12" class="text-caption">Subject: {{ subject }}</v-col>
+          <v-col cols="12" class="chat-listcard__cell">Subject: {{ subject }}</v-col>
 
-          <v-col cols="12" class="text-caption">
-            Status: <span class="text-orange">{{ status }}</span>
+          <v-col cols="12" class="chat-listcard__cell d-flex align-center ga-1">
+            Status: <StatusChip :status="status" />
           </v-col>
 
-          <v-col cols="12" class="text-caption">
+          <v-col cols="12" class="chat-listcard__cell">
             Date Created: {{ createdAt }}
           </v-col>
         </v-row>
@@ -60,3 +60,32 @@ defineProps({
   getNameInitials: Function,
 });
 </script>
+
+<style scoped>
+.chat-listcard {
+  font-family: var(--font-sans);
+  color: var(--text);
+}
+
+.chat-listcard__cell,
+.chat-listcard__label {
+  font-size: var(--fs-cell-dense);
+}
+
+.chat-listcard__label {
+  font-weight: 600;
+}
+
+/* Was `color="surface-variant"` with `text-overline` initials - 10px letters
+   with 1.6px tracking inside a 20px circle, which drew as one clipped glyph. */
+.chat-listcard__avatar {
+  background: var(--hover);
+  color: var(--text2);
+}
+
+.chat-listcard__initials {
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0;
+}
+</style>

package/components/Chat/Message.vue

@@ -1,18 +1,17 @@
 <template>
   <v-sheet
-    elevation="1"
+    elevation="0"
     rounded="0"
-    class="fill-height d-flex flex-column"
-    style="border-right: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0"
+    class="chat-panel fill-height d-flex flex-column"
   >
-    <div style="border-bottom: 1px solid #e0e0e0" class="px-4 pt-4 pb-2 mb-2">
-      <h3 class="text-h6">
+    <div class="chat-panel__head px-4 pt-4 pb-2 mb-2">
+      <h3 class="screen-card-title">
         {{ type === "workOrder" ? "Work Order" : "Feedback" }} Chat
       </h3>
     </div>
 
     <v-sheet
-      class="overflow-y-auto flex-grow-1 pa-3"
+      class="chat-panel__thread overflow-y-auto flex-grow-1 pa-3"
       :style="{ height: 'calc(100vh - 300px)', overflowX: 'hidden' }"
     >
       <v-row
@@ -35,10 +34,11 @@
       </v-row>
     </v-sheet>
 
-    <v-card class="mx-4 mb-4 mt-2 pa-3 rounded-lg" elevation="2">
+    <v-card class="screen-card mx-4 mb-4 mt-2 pa-3" elevation="0">
       <v-row no-gutters align="end">
         <v-col cols="10">
           <v-textarea
+            class="filter-field"
             label="Message"
             auto-grow
             hide-details
@@ -47,9 +47,7 @@
           />
         </v-col>
         <v-col cols="2" class="pl-2">
-          <v-btn color="primary-button" block class="pa-4 py-6 text-capitalize"
-            >Send</v-btn
-          >
+          <v-btn class="screen-btn-primary" variant="flat" block>Send</v-btn>
         </v-col>
       </v-row>
 
@@ -57,23 +55,27 @@
 
       <v-row justify="start" no-gutters align="center">
         <v-col cols="auto">
-          <v-icon size="20" class="mr-3">mdi-paperclip</v-icon>
+          <v-icon size="20" class="chat-panel__tool mr-3">mdi-paperclip</v-icon>
         </v-col>
 
         <v-col cols="auto">
-          <v-icon size="20" class="mr-3">mdi-emoticon-happy-outline</v-icon>
+          <v-icon size="20" class="chat-panel__tool mr-3"
+            >mdi-emoticon-happy-outline</v-icon
+          >
         </v-col>
 
         <v-col cols="auto">
           <v-menu location="top" offset="10">
             <template #activator="{ props }">
               <v-btn icon v-bind="props" density="compact" variant="text">
-                <v-icon size="20" color="gray">mdi-message-outline</v-icon>
+                <v-icon size="20" class="chat-panel__tool"
+                  >mdi-message-outline</v-icon
+                >
               </v-btn>
             </template>
 
-            <v-card min-width="350" class="rounded-lg">
-              <v-card-title class="text-subtitle-1 font-weight-medium pb-1"
+            <v-card min-width="350" class="screen-card">
+              <v-card-title class="screen-card-title pb-1"
                 >Quick Chat</v-card-title
               >
               <v-divider class="mb-1" />
@@ -156,3 +158,27 @@ const selectQuickChat = (msg: string) => {
   console.log("Quick Chat Selected:", msg);
 };
 </script>
+
+<style scoped>
+/* The panel's two rules were hard-coded `1px solid #e0e0e0`, which is a light-
+   theme hairline drawn on the dark theme as well. Same lines, on `--border`. */
+.chat-panel {
+  background: var(--card);
+  border-right: 1px solid var(--border);
+  border-top: 1px solid var(--border);
+}
+
+.chat-panel__head {
+  border-bottom: 1px solid var(--border);
+}
+
+.chat-panel__thread {
+  background: var(--bg);
+}
+
+/* Was a bare icon and one `color="gray"` - not a token, and not the same tone
+   as the icon beside it. */
+.chat-panel__tool {
+  color: var(--muted);
+}
+</style>

package/components/Chat/Navigation.vue

@@ -1,31 +1,24 @@
 <template>
-  <v-sheet
-    elevation="1"
-    rounded="0"
-    class="pa-4 fill-height"
-    style="border-right: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0"
-  >
-    <h3 class="text-h6 mb-4">{{ title }}</h3>
+  <v-sheet elevation="0" rounded="0" class="chat-nav pa-4 fill-height">
+    <h3 class="screen-card-title mb-4">{{ title }}</h3>
 
     <v-text-field
       v-model="search"
       @input="_search"
       label="Search"
       prepend-inner-icon="mdi-magnify"
-      density="compact"
       hide-details
       variant="outlined"
-      class="mb-4"
+      class="filter-field mb-4"
     />
 
     <v-select
       label="Filter by Status"
       :items="['All', 'In Progress', 'To Do', 'Done']"
       v-model="selectedStatus"
-      density="compact"
       hide-details
       variant="outlined"
-      class="mb-4"
+      class="filter-field mb-4"
     />
 
     <v-row dense class="mb-4" align="center">
@@ -43,7 +36,7 @@
               v-bind="props"
               v-model="startDate"
               label="Start Date"
-              density="compact"
+              class="filter-field"
               variant="outlined"
               readonly
               hide-details
@@ -63,7 +56,7 @@
       </v-col>
 
       <v-col cols="2" class="d-flex align-center justify-center">
-        <span class="text-subtitle-2">to</span>
+        <span class="chat-nav__to">to</span>
       </v-col>
 
       <v-col cols="5">
@@ -80,7 +73,7 @@
               v-bind="props"
               v-model="endDate"
               label="End Date"
-              density="compact"
+              class="filter-field"
               variant="outlined"
               readonly
               hide-details
@@ -101,7 +94,7 @@
     </v-row>
 
     <v-sheet
-      class="overflow-y-auto flex-grow-1 pa-3"
+      class="chat-nav__list overflow-y-auto flex-grow-1 pa-3"
       :style="{ height: 'calc(100vh - 320px)', overflowX: 'hidden' }"
     >
       <v-row dense>
@@ -148,3 +141,22 @@ function _search() {
   emit("search", search.value);
 }
 </script>
+
+<style scoped>
+/* Same two hard-coded #e0e0e0 hairlines the chat panel carried, on --border. */
+.chat-nav {
+  background: var(--card);
+  border-right: 1px solid var(--border);
+  border-top: 1px solid var(--border);
+}
+
+.chat-nav__list {
+  background: var(--bg);
+}
+
+.chat-nav__to {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--muted);
+}
+</style>

package/components/DrawImage.vue

@@ -4,32 +4,25 @@
     transition="dialog-top-transition"
     max-width="1000"
   >
-    <v-card class="pa-1">
-      <v-toolbar>
-        <v-spacer></v-spacer>
-        <v-btn icon="mdi-close" @click="emit('onCloseDialog')" />
-      </v-toolbar>
-      <canvas id="imageCanvas" />
-      <v-card-title class="text-end">
+    <v-card class="screen-modal">
+      <div class="draw-image__head">
         <v-btn
-          color="orange-darken-3"
-          size="small"
-          variant="flat"
-          style="height: 40px; margin-right: 12px"
-          @click="onClearDrawing()"
-        >
+          class="screen-modal__close"
+          variant="text"
+          icon="mdi-close"
+          aria-label="Close"
+          @click="emit('onCloseDialog')"
+        />
+      </div>
+      <canvas id="imageCanvas" />
+      <div class="screen-modal__footer">
+        <v-btn class="screen-btn-ghost" variant="outlined" @click="onClearDrawing()">
           Clear Drawing
         </v-btn>
-        <v-btn
-          color="blue-darken-3"
-          size="small"
-          variant="flat"
-          style="height: 40px"
-          @click="submit"
-        >
+        <v-btn class="screen-btn-primary" variant="flat" @click="submit">
           Submit
         </v-btn>
-      </v-card-title>
+      </div>
     </v-card>
   </v-dialog>
 </template>
@@ -170,3 +163,18 @@ async function onClearDrawing() {
   ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
 }
 </script>
+
+<style scoped>
+/* The design's modal has a title row; this dialog has never had a title, only
+   a close - so the row keeps that and just moves the close onto the design's
+   borderless 32px square. No copy invented. */
+.draw-image__head {
+  display: flex;
+  justify-content: flex-end;
+  padding: 12px 12px 0;
+}
+
+/* The canvas itself is untouched: its width/height are computed in script from
+   its own bounding box, so a layout rule here would quietly move the drawing
+   coordinates - a behaviour change no render can prove. */
+</style>

package/components/Input/Date.vue

@@ -13,6 +13,7 @@
             v-model="month"
             :items="props.months"
             label="Month"
+            class="filter-field"
             density="comfortable"
             :name="props.name + 'custom-input-date-month'"
             hide-details
@@ -28,6 +29,7 @@
             label="Day"
             hide-details
             placeholder="DD"
+            class="filter-field"
             density="comfortable"
             :name="props.name + 'custom-input-date-day'"
             :error="!!validationErrMsg"
@@ -42,6 +44,7 @@
             label="Year"
             hide-details
             placeholder="YYYY"
+            class="filter-field"
             density="comfortable"
             :name="props.name + 'custom-input-date-year'"
             :error="!!validationErrMsg"

package/components/Input/File.vue

@@ -11,7 +11,7 @@
         "
       >
         <div
-          class="d-flex align-center justify-center pa-4 rounded-lg border-dashed border border-grey"
+          class="file-drop d-flex align-center justify-center pa-4"
           @dragover.prevent
           @drop="handleDrop"
           style="position: relative; z-index: 1"
@@ -35,12 +35,10 @@
             class="d-flex align-center"
             style="z-index: 1; pointer-events: none"
           >
-            <v-icon size="28" class="mr-2" color="primary"
+            <v-icon size="28" class="file-drop__icon mr-2"
               >mdi-cloud-upload-outline</v-icon
             >
-            <span class="text-body-1 font-weight-medium"
-              >Drag and drop files here</span
-            >
+            <span class="file-drop__hint">Drag and drop files here</span>
           </div>
         </div>
       </v-col>
@@ -55,11 +53,10 @@
         "
       >
         <v-btn
-          color="primary-button"
-          min-width="55"
-          width="55"
-          height="55"
+          class="screen-btn-primary file-camera"
+          variant="flat"
           elevation="0"
+          aria-label="Take a photo"
           @click="selectAttachment"
         >
           <v-icon size="20">mdi-camera-outline</v-icon>
@@ -73,7 +70,7 @@
           v-for="(file, index) in attachments"
           :key="index"
           cols="12"
-          class="d-flex align-center pa-2 mr-2 mb-2 rounded bg-white border-sm"
+          class="file-row d-flex align-center pa-2 mr-2 mb-2"
         >
           <div class="mr-3">
             <!-- <v-img
@@ -108,6 +105,8 @@
 
           <v-icon
             size="small"
+            class="file-row__remove"
+            aria-label="Remove file"
             @click.stop="$emit('delete', file)"
             v-if="
               props.createdFrom === 'feedback' && props.attachments.length > 0
@@ -234,3 +233,49 @@ defineExpose({
   },
 });
 </script>
+
+<style scoped>
+/* The drop zone was `border-dashed border border-grey` with a `primary` glyph -
+   `primary` being the FOREGROUND token, used here as an icon colour, and the
+   grey a fixed light-theme hairline. */
+.file-drop {
+  border: 1px dashed var(--border);
+  border-radius: var(--r-inner);
+  position: relative;
+  z-index: 1;
+}
+
+.file-drop__icon {
+  color: var(--accent-text);
+}
+
+.file-drop__hint {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  font-weight: 600;
+  color: var(--text);
+}
+
+/* Was a 55px square. The design's button is 40px, which is what
+   .screen-btn-primary carries; this only keeps it square. */
+.file-camera {
+  min-width: var(--btn-h) !important;
+  width: var(--btn-h);
+  padding: 0 !important;
+}
+
+/* Each attachment row was `bg-white border-sm` - a hard white slab drawn on the
+   dark theme as well. */
+.file-row {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--text);
+}
+
+.file-row__remove {
+  color: var(--err);
+}
+</style>

package/components/Input/ListGroupSelection.vue

@@ -1,6 +1,6 @@
 <template>
   <v-input v-bind="attrs">
-    <v-card width="100%" v-bind="attrs">
+    <v-card class="perm-list screen-card" elevation="0" width="100%" v-bind="attrs">
       <v-list
         v-model:selected="selected"
         lines="two"
@@ -18,14 +18,14 @@
           <v-list-group :value="permissionKey" fluid>
             <template v-slot:activator="{ props }">
               <v-list-item v-bind="props" density="compact">
-                <span class="text-capitalize">
+                <span class="perm-list__group text-capitalize">
                   {{ formatResourceLabel(String(permissionKey)) }}
                 </span>
 
                 <template #prepend>
-                  <v-chip class="mr-2" small>
+                  <span class="perm-list__count mr-2">
                     {{ selectedActionCount(String(permissionKey)) }}
-                  </v-chip>
+                  </span>
                 </template>
               </v-list-item>
             </template>
@@ -34,13 +34,13 @@
               <v-divider></v-divider>
               <v-list-item v-if="attrs.readonly" density="compact">
                 <template #title class="pl-2">
-                  <span class="text-subtitle-2 text-capitalize">
+                  <span class="perm-list__title text-capitalize">
                     {{ String(itemKey).replace(/-/g, " ") }}
                   </span>
                 </template>
 
                 <template #subtitle class="pl-2">
-                  <span class="text-subtitle-2">{{ item.description }}</span>
+                  <span class="perm-list__sub">{{ item.description }}</span>
                 </template>
               </v-list-item>
 
@@ -50,13 +50,13 @@
                 density="compact"
               >
                 <template #title class="pl-2">
-                  <span class="text-subtitle-2 text-capitalize">
+                  <span class="perm-list__title text-capitalize">
                     {{ String(itemKey).replace(/-/g, " ") }}
                   </span>
                 </template>
 
                 <template #subtitle class="pl-2">
-                  <span class="text-subtitle-2 text-capitalize">
+                  <span class="perm-list__sub text-capitalize">
                     {{ String(item.description).replace(/-/g, " ") }}
                   </span>
                 </template>
@@ -101,3 +101,51 @@ const selectedActionCount = (resource: string) => {
     .length;
 };
 </script>
+
+<style scoped>
+.perm-list {
+  font-family: var(--font-sans);
+}
+
+.perm-list__group {
+  font-size: var(--fs-cell);
+  font-weight: 600;
+  color: var(--text);
+}
+
+/**
+ * The count beside each permission group. The handoff draws no counter here at
+ * all, so this is the neutral chip's own geometry - 999px, 12px/700, the tone
+ * wash - rather than a new shape: a `v-chip small`, which is what it was, is
+ * 24px of Vuetify grey with its own font.
+ */
+.perm-list__count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  height: 20px;
+  padding: 0 8px;
+  border-radius: var(--r-pill);
+  background: var(--hover);
+  color: var(--text2);
+  font-size: var(--fs-chip);
+  font-weight: 700;
+}
+
+/* A ticked row was Vuetify's own rgb(224,224,224) slab - a light-theme grey
+   painted on the dark theme too. Same emphasis, on the design's hover wash. */
+.perm-list :deep(.v-list-item--active) {
+  background: var(--hover);
+}
+
+.perm-list__title {
+  font-size: var(--fs-cell);
+  color: var(--text);
+}
+
+.perm-list__sub {
+  font-size: var(--fs-cell-dense);
+  color: var(--muted);
+}
+</style>

package/components/WorkOrder/Create.vue

@@ -1,7 +1,7 @@
 <template>
   <FormDialog v-model="dialog" @close="closeDialog">
     <template #title>
-      <span class="text-h6 font-weight-medium pt-1 text-capitalize">
+      <span class="screen-card-title pt-1 text-capitalize">
         {{ isEditMode ? "Edit Work Order" : "Create Work Order" }}
       </span>
     </template>
@@ -24,8 +24,7 @@
       item-props
       label="Subject"
       variant="outlined"
-      density="compact"
-      class="mb-2"
+      class="filter-field mb-2"
       :clearable="
         props.createdFrom === 'feedback' && workOrder.subject !== ''
           ? false
@@ -39,7 +38,7 @@
       :custom-filter="customFilter"
       :rules="[requiredRule]"
     >
-      <template #label> Subject <span class="text-red">*</span> </template>
+      <template #label> Subject <span class="form-required">*</span> </template>
     </v-autocomplete>
 
     <v-autocomplete
@@ -50,8 +49,7 @@
       item-props
       label="Category"
       variant="outlined"
-      density="compact"
-      class="mb-2"
+      class="filter-field mb-2"
       :clearable="
         props.createdFrom === 'feedback' && workOrder.category !== ''
           ? false
@@ -64,12 +62,12 @@
       "
       :rules="[requiredRule]"
     >
-      <template #label> Category <span class="text-red">*</span> </template>
+      <template #label> Category <span class="form-required">*</span> </template>
     </v-autocomplete>
 
     <v-checkbox v-model="workOrder.highPriority" density="compact" class="ma-0">
       <template #label>
-        <span class="text-caption">
+        <span class="form-check-label">
           Set work order as High Priority (Optional)
         </span>
       </template>
@@ -98,14 +96,13 @@
     <v-autocomplete
       label="Unit"
       variant="outlined"
-      density="compact"
+      class="filter-field mt-1"
       v-model="workOrder.unit"
       :items="units"
-      class="mt-1"
       clearable
       :rules="[requiredRule]"
     >
-      <template #label> Unit <span class="text-red">*</span> </template>
+      <template #label> Unit <span class="form-required">*</span> </template>
     </v-autocomplete>
 
     <!-- <v-text-field
@@ -125,23 +122,21 @@
     <v-textarea
       label="Work Order Description"
       variant="outlined"
-      density="compact"
+      class="filter-field mt-1"
       v-model="workOrder.description"
-      class="mt-1"
       rows="4"
       clearable
       auto-grow
       :rules="[requiredRule]"
     >
-      <template #label> Description <span class="text-red">*</span> </template>
+      <template #label> Description <span class="form-required">*</span> </template>
     </v-textarea>
 
     <template #footer>
       <v-btn
-        color="primary-button"
-        class="text-capitalize mb-4"
+        class="screen-btn-primary mb-4"
+        variant="flat"
         block
-        height="40"
         :loading="loading"
         :disabled="loading || !isFormValid"
         @click="submitWorkOrder"
@@ -282,3 +277,17 @@ const customFilter = (value: string, query: string, item: any) => {
   return title.includes(search) || subtitle.includes(search);
 };
 </script>
+
+<style scoped>
+/* The required star was `text-red`, a Vuetify palette word rather than the
+   design's error token. */
+.form-required {
+  color: var(--err);
+}
+
+.form-check-label {
+  font-family: var(--font-sans);
+  font-size: var(--fs-cell);
+  color: var(--text);
+}
+</style>

package/package.json

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