@7365admin1/layer-common 3.2.2-staging.98 → 3.2.2-staging.99

package/assets/css/screens.css

@@ -175,6 +175,22 @@
   color: var(--muted);
 }
 
+/**
+ * `fontgray` is a legacy application-side Vuetify colour - a fixed `#7e7e7e`
+ * that is the SAME grey in both themes, so it neither darkens for the light
+ * page nor lightens for the dark one. Measured on the glass it reads 4.06:1 on
+ * a light card and 4.10:1 on a dark card: below AA on both, on labels that
+ * 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.
+ */
+.text-fontgray {
+  color: var(--muted) !important;
+}
+
 /* ------------------------------------------------------------------ */
 /* 4. Dialogs.                                                         */
 /* ------------------------------------------------------------------ */

package/components/AccessCardQrTagging.vue

@@ -57,7 +57,7 @@
         rounded="lg"
         :loading="loading"
       >
-        <v-toolbar density="compact" color="grey-lighten-4">
+        <v-toolbar density="compact" class="px-3 border-b-sm" color="transparent">
           <template #prepend>
             <v-btn fab icon density="comfortable" @click="fetchItems">
               <v-icon>mdi-refresh</v-icon>

package/components/DocumentManagement.vue

@@ -1,77 +1,60 @@
 <template>
   <v-row no-gutters class="pa-0">
     <v-col cols="12" class="mb-2">
-      <v-row no-gutters align="center">
-        <v-col cols="12" md="6" class="d-flex align-center">
-          <v-btn
-            class="text-none me-2"
-            rounded="pill"
-            variant="tonal"
-            size="large"
-            @click="setDocument()"
+      <PageHeader title="Documents">
+        <template #actions>
+          <AppButton
+            v-if="canCreate && canCreateFolder"
+            variant="ghost"
+            icon="mdi-folder-plus-outline"
+            @click="openCreateFolderDialog()"
+          >
+            Create Folder
+          </AppButton>
+
+          <AppButton
             v-if="canCreate && canCreateDocument"
+            icon="mdi-plus"
+            @click="setDocument()"
           >
             Add Document
-          </v-btn>
+          </AppButton>
+        </template>
+      </PageHeader>
+
+      <div class="doc-filters">
+        <AppField
+          v-model="search"
+          search
+          icon="mdi-magnify"
+          placeholder="Search"
+          klass="doc-filters__search"
+        />
 
-          <v-btn
-            class="text-none"
-            rounded="pill"
-            variant="tonal"
-            size="large"
-            @click="openCreateFolderDialog()"
-            v-if="canCreate && canCreateFolder"
-          >
-            Create Folder
-          </v-btn>
-        </v-col>
-
-        <v-col
-          cols="12"
-          md="6"
-          class="d-flex justify-end align-center mt-4 mt-md-0"
-        >
-          <v-text-field
-            v-model="search"
-            placeholder="Search"
-            density="comfortable"
-            variant="outlined"
-            hide-details
-            rounded="lg"
-            class="me-3"
-            style="max-width: 220px"
-          />
-
-          <v-menu v-model="filterMenu" offset-y>
-            <template #activator="{ props }">
-              <v-btn
-                v-bind="props"
-                variant="outlined"
-                rounded="lg"
-                class="filtertype-btn text-none"
-                style="max-width: 220px"
-              >
-                {{ selectedFileType || "Filter by File Type" }}
-              </v-btn>
-            </template>
+        <v-menu v-model="filterMenu" offset-y>
+          <template #activator="{ props }">
+            <button v-bind="props" type="button" class="doc-filters__type">
+              <span>{{ selectedFileType || "Filter by File Type" }}</span>
+              <v-icon size="18">mdi-chevron-down</v-icon>
+            </button>
+          </template>
 
-            <v-card class="filtertype-card">
-              <v-list class="pa-0">
-                <v-list-item
-                  v-for="(type, idx) in fileTypes"
-                  :key="idx"
-                  @click="selectFileType(type)"
-                  class="filtertype-item"
-                >
-                  <v-list-item-title class="text-subtitle-2">
-                    {{ type }}
-                  </v-list-item-title>
-                </v-list-item>
-              </v-list>
-            </v-card>
-          </v-menu>
-        </v-col>
-      </v-row>
+          <v-card class="filtertype-card">
+            <v-list class="pa-0">
+              <v-list-item
+                v-for="(type, idx) in fileTypes"
+                :key="idx"
+                @click="selectFileType(type)"
+                class="filtertype-item"
+              >
+                <v-list-item-title class="text-subtitle-2">
+                  {{ type }}
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-card>
+        </v-menu>
+      </div>
     </v-col>
 
     <v-col cols="12" class="mb-2" v-if="isInsideFolder">
@@ -82,7 +65,7 @@
           variant="text"
           @click="goBackFolder"
         />
-        <v-icon size="18" color="grey-darken-2">mdi-folder</v-icon>
+        <v-icon size="18" style="color: var(--muted)">mdi-folder</v-icon>
         <span class="text-body-2 font-weight-medium">{{
           currentFolderPath
         }}</span>
@@ -114,18 +97,18 @@
             />
 
             <span
-              class="breadcrumb-segment text-body-2 text-grey-darken-1 cursor-pointer"
+              class="breadcrumb-segment text-body-2 breadcrumb-segment--link cursor-pointer"
               @click="navigateToRoot"
               >Home</span
             >
             <template v-for="(folder, idx) in folderStack" :key="folder.id">
-              <v-icon size="14" color="grey-darken-1">mdi-chevron-right</v-icon>
+              <v-icon size="14" style="color: var(--muted)">mdi-chevron-right</v-icon>
               <span
                 :class="[
                   'breadcrumb-segment text-body-2 font-weight-medium',
                   idx === folderStack.length - 1
-                    ? 'text-black'
-                    : 'text-grey-darken-1 cursor-pointer',
+                    ? 'breadcrumb-segment--current'
+                    : 'breadcrumb-segment--link cursor-pointer',
                 ]"
                 @click="
                   idx < folderStack.length - 1 && navigateToStackIndex(idx)
@@ -1197,36 +1180,87 @@ function selectFileType(type: string) {
 </script>
 
 <style scoped>
+/*
+ * EVERY COLOUR IN THIS BLOCK WAS A LITERAL. `#fff` menus, `#fafafa` bars,
+ * `#e0e0e0` rules and `#38475a` ink do not follow the theme, so in dark mode
+ * this screen drew white slabs on the dark page. All of them are tokens now;
+ * nothing about the layout, the flow or the actions changed.
+ */
+
+/* The breadcrumb was `text-grey-darken-1` and `text-black` - the same two
+   greys on the dark page, i.e. black lettering on a dark card. */
+.breadcrumb-segment--link {
+  color: var(--muted);
+}
+
+.breadcrumb-segment--current {
+  color: var(--text);
+}
+
 .table-download-btn {
   min-width: 106px;
   height: 30px;
-  border-radius: 4px;
-  background-color: #e3e3e3;
-  color: #38475a;
+  border-radius: var(--r-tag);
+  background-color: var(--hover);
+  color: var(--text2);
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 600;
   box-shadow: none;
 }
 
 .table-download-btn:hover {
-  background-color: #d8d8d8;
+  background-color: var(--thead);
+}
+
+/* The filter row under the title: the design puts search and filters on one
+   line, right-aligned, rather than in a second full-width toolbar. */
+.doc-filters {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 12px;
 }
 
-.filtertype-btn {
-  justify-content: flex-start;
+.doc-filters :deep(.doc-filters__search) {
+  flex: 0 0 auto;
   width: 220px;
+  min-width: 0;
+}
+
+.doc-filters__type {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 220px;
+  height: 38px;
+  padding: 0 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--card);
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 600;
+  text-align: left;
+}
+
+.doc-filters__type:hover {
+  background: var(--hover);
 }
 
 .filtertype-card {
-  background: #fff;
-  border-radius: 8px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
   min-width: 160px;
-  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
+  box-shadow: var(--shadow-menu);
   overflow: hidden;
 }
 
 .filtertype-item {
-  border-bottom: 1px solid #f0f0f0;
+  border-bottom: 1px solid var(--border);
   padding: 10px 16px;
 }
 
@@ -1235,27 +1269,29 @@ function selectFileType(type: string) {
 }
 
 .folder-path-bar {
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  background: #fafafa;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--thead);
+  color: var(--text);
 }
 
 .folder-action-btn {
-  color: #38475a;
+  color: var(--text2);
 }
 
 .folder-action-list {
   min-width: 180px;
-  border-radius: 8px;
-  background: #fff;
-  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22);
+  border-radius: var(--r-inner);
+  background: var(--card);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-menu);
   overflow: hidden;
 }
 
 .folder-action-item {
   min-height: 40px;
-  border-bottom: 1px solid #eef0f2;
-  color: #38475a;
+  border-bottom: 1px solid var(--border);
+  color: var(--text2);
 }
 
 .folder-action-item:last-child {
@@ -1263,11 +1299,11 @@ function selectFileType(type: string) {
 }
 
 .folder-dialog-card {
-  border-radius: 6px;
+  border-radius: var(--r-inner);
   overflow: hidden;
 }
 
 .folder-dialog-toolbar {
-  border-bottom: 1px solid #eef0f2;
+  border-bottom: 1px solid var(--border);
 }
 </style>

package/components/OnlineFormsConfiguration.vue

@@ -22,7 +22,7 @@
         rounded="lg"
         :loading="loading"
       >
-        <v-toolbar density="compact" color="grey-lighten-4">
+        <v-toolbar density="compact" class="px-3 border-b-sm" color="transparent">
           <template #prepend>
             <v-btn
               fab

package/components/TableList.vue

@@ -6,7 +6,7 @@
     rounded="lg"
     :loading="loading"
   >
-    <v-toolbar density="compact" color="grey-lighten-4">
+    <v-toolbar density="compact" class="px-3 border-b-sm" color="transparent">
       <template #prepend>
         <v-checkbox v-model="selectAll" hide-details class="mx-1"></v-checkbox>
 

package/components/TableListSecondary.vue

@@ -159,6 +159,6 @@ watch(selectAll, (curr) => {
 }
 
 .clickable-rows tbody tr:hover {
-  background-color: #f5f5f5;
+  background-color: var(--hover);
 }
 </style>

package/components/TableV3.vue

@@ -5,43 +5,39 @@
     border="thin"
     rounded="lg"
     :loading="loading"
-    class="table-v3"
+    class="table-v3 table-card"
   >
-    <v-toolbar density="compact" color="grey-lighten-5">
-      <template #prepend>
+    <div class="app-toolbar app-toolbar--plain">
+      <v-btn
+        icon
+        variant="text"
+        density="comfortable"
+        class="table-v3__refresh-btn"
+        @click="emit('refresh')"
+      >
+        <v-icon size="24">mdi-history</v-icon>
+      </v-btn>
+
+      <div class="app-toolbar__spacer" />
+
+      <div class="app-toolbar__right">
+        <span class="table-card__range">{{ pageRange }}</span>
         <v-btn
-          icon
+          icon="mdi-chevron-left"
           variant="text"
           density="comfortable"
-          class="table-v3__refresh-btn"
-          @click="emit('refresh')"
-        >
-          <v-icon size="28" color="black">mdi-history</v-icon>
-        </v-btn>
-      </template>
-
-      <template #append>
-        <v-row no-gutters justify="end" align="center">
-          <span class="mr-2 text-caption text-fontgray">
-            {{ pageRange }}
-          </span>
-          <v-btn
-            icon="mdi-chevron-left"
-            variant="text"
-            density="comfortable"
-            :disabled="!canGoPrev"
-            @click="goPrev"
-          />
-          <v-btn
-            icon="mdi-chevron-right"
-            variant="text"
-            density="comfortable"
-            :disabled="!canGoNext"
-            @click="goNext"
-          />
-        </v-row>
-      </template>
-    </v-toolbar>
+          :disabled="!canGoPrev"
+          @click="goPrev"
+        />
+        <v-btn
+          icon="mdi-chevron-right"
+          variant="text"
+          density="comfortable"
+          :disabled="!canGoNext"
+          @click="goNext"
+        />
+      </div>
+    </div>
 
     <div v-if="$slots.breadcrumb" class="table-v3__breadcrumb">
       <slot name="breadcrumb" />
@@ -62,29 +58,27 @@
       </template>
     </v-data-table>
 
-    <v-toolbar density="compact" color="grey-lighten-5" class="table-v3__footer">
-      <template #append>
-        <v-row no-gutters justify="end" align="center">
-          <span class="mr-2 text-caption text-fontgray">
-            {{ pageRange }}
-          </span>
-          <v-btn
-            icon="mdi-chevron-left"
-            variant="text"
-            density="comfortable"
-            :disabled="!canGoPrev"
-            @click="goPrev"
-          />
-          <v-btn
-            icon="mdi-chevron-right"
-            variant="text"
-            density="comfortable"
-            :disabled="!canGoNext"
-            @click="goNext"
-          />
-        </v-row>
-      </template>
-    </v-toolbar>
+    <div class="app-toolbar app-toolbar--plain table-v3__footer">
+      <div class="app-toolbar__spacer" />
+
+      <div class="app-toolbar__right">
+        <span class="table-card__range">{{ pageRange }}</span>
+        <v-btn
+          icon="mdi-chevron-left"
+          variant="text"
+          density="comfortable"
+          :disabled="!canGoPrev"
+          @click="goPrev"
+        />
+        <v-btn
+          icon="mdi-chevron-right"
+          variant="text"
+          density="comfortable"
+          :disabled="!canGoNext"
+          @click="goNext"
+        />
+      </div>
+    </div>
   </v-card>
 </template>
 
@@ -161,19 +155,20 @@ watch(
 </script>
 
 <style scoped>
-.table-v3 :deep(thead th) {
-  background-color: #f5f5f5;
-  color: #6b7280;
-  font-weight: 600 !important;
-  font-size: 12px;
-}
-
+/*
+ * The header row is no longer drawn here. It was `#f5f5f5` on `#6b7280`,
+ * both literal, so in the dark theme the fixed-header rule won the background
+ * and the header read 3.45:1. `.table-card` on the root gives this table the
+ * same tokenised header, cell and hover treatment as every other table in the
+ * product, which measures 4.77:1 light / 4.71:1 dark.
+ */
 .table-v3 :deep(tbody td) {
   height: 54px;
 }
 
 .table-v3__footer {
-  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  border-top: 1px solid var(--border);
+  border-bottom: 0;
 }
 
 .table-v3__refresh-btn {
@@ -182,8 +177,8 @@ watch(
 }
 
 .table-v3__breadcrumb {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-  background-color: #fff;
+  border-bottom: 1px solid var(--border);
+  background-color: var(--card);
   padding: 6px 12px;
 }
 </style>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.98",
+  "version": "3.2.2-staging.99",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {