@7365admin1/layer-common 3.2.1-staging.73 → 3.2.1-staging.74

package/.changeset/dashboard-dark-theme-contrast.md

@@ -0,0 +1,15 @@
+---
+"@7365admin1/layer-common": patch
+---
+
+Dashboard and filled-primary surfaces now follow the theme in dark mode.
+
+- `DashboardMain` painted its panels, list rows and text with fixed hex values,
+  so the ACTIVE PATROL / STAFF STATUS / Feedbacks cards rendered white on the
+  dark page and the heading and KPI figures were dark grey on near-black
+  (1.19:1). They now use the theme's surface and foreground tokens.
+- `DARK_THEME` had no `on-primary`, so Vuetify derived white for every filled
+  `primary` button, chip, alert, tab bar and snackbar - 2.91:1. It is now set
+  explicitly and measures 6.40:1.
+
+The print / PDF / Word export styles are unchanged and stay ink-on-white.

package/components/DashboardMain.vue

@@ -207,10 +207,10 @@
       class="d-flex flex-column flex-md-row align-md-start justify-space-between ga-5 mb-6"
     >
       <div>
-        <h1 class="text-h5 font-weight-black text-blue-grey-darken-4 mb-0">
+        <h1 class="text-h5 font-weight-black text-high-emphasis mb-0">
           {{ dashboardTitle }}
         </h1>
-        <div class="d-flex align-center text-blue-grey ga-1 mt-2 text-caption">
+        <div class="d-flex align-center text-medium-emphasis ga-1 mt-2 text-caption">
           <v-icon icon="mdi-map-marker" size="16" />
           <span>{{ currentSiteName || "Selected site" }}</span>
         </div>
@@ -222,7 +222,6 @@
       >
         <v-btn
           variant="outlined"
-          color="blue-grey-darken-1"
           class="text-none font-weight-bold"
           prepend-icon="mdi-tune-variant"
           @click="openCustomizeDialog"
@@ -235,7 +234,6 @@
             <v-btn
               v-bind="menuProps"
               variant="outlined"
-              color="blue-grey-darken-1"
               class="text-none font-weight-bold"
               append-icon="mdi-chevron-down"
               :loading="isExporting"
@@ -257,8 +255,8 @@
           density="comfortable"
           divided
           variant="outlined"
-          class="bg-white"
-          style="border-radius: 8px; border-color: #d9e1e8"
+          class="bg-surface"
+          style="border-radius: 8px"
         >
           <v-btn
             v-for="range in rangeOptions"
@@ -269,11 +267,11 @@
             :style="
               selectedRange === range.value
                 ? {
-                    backgroundColor: '#e2e8f0',
-                    color: '#0b2f47',
+                    backgroundColor: 'rgba(var(--v-theme-on-surface), 0.12)',
+                    color: 'rgb(var(--v-theme-on-surface))',
                     fontWeight: '600',
                   }
-                : { backgroundColor: 'transparent', color: '#64748b' }
+                : { backgroundColor: 'transparent', color: 'rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))' }
             "
           >
             {{ range.label }}
@@ -363,7 +361,7 @@
 
           <div class="mt-6 w-100">
             <p
-              class="text-caption font-weight-black text-uppercase text-blue-grey-darken-2 mb-3"
+              class="text-caption font-weight-black text-uppercase text-medium-emphasis mb-3"
             >
               {{ card.title }}
             </p>
@@ -376,21 +374,21 @@
                 <div
                   v-for="item in card.raw.items"
                   :key="item._id || item.name"
-                  class="d-flex justify-space-between text-body-2 text-blue-grey-darken-4 font-weight-medium"
+                  class="d-flex justify-space-between text-body-2 text-high-emphasis font-weight-medium"
                 >
                   <span>{{ item.name }}</span>
-                  <span class="text-blue-grey">Balance: {{ item.qty }}</span>
+                  <span class="text-medium-emphasis">Balance: {{ item.qty }}</span>
                 </div>
               </div>
             </template>
             <template v-else>
               <div class="d-flex align-center mb-3" style="min-height: 31px">
-                <span class="text-h5 font-weight-black text-blue-grey-darken-4">
+                <span class="text-h5 font-weight-black text-high-emphasis">
                   {{ card.value }}
                 </span>
               </div>
               <div class="d-flex align-center flex-wrap ga-2">
-                <span v-if="card.meta" class="text-caption text-blue-grey">{{
+                <span v-if="card.meta" class="text-caption text-medium-emphasis">{{
                   card.meta
                 }}</span>
                 <v-chip
@@ -426,7 +424,7 @@
       class="px-5 pt-4 pb-3 mt-3"
     >
       <div class="d-flex align-center justify-space-between">
-        <h2 class="text-body-1 font-weight-black text-blue-grey-darken-4 mb-0">
+        <h2 class="text-body-1 font-weight-black text-high-emphasis mb-0">
           {{ activityTitle }}
         </h2>
       </div>
@@ -444,7 +442,7 @@
             :y1="tick"
             :x2="chartWidth - 20"
             :y2="tick"
-            style="stroke: #e9eef2; stroke-width: 1"
+            style="stroke: rgba(var(--v-theme-on-surface), 0.12); stroke-width: 1"
           />
           <text
             v-for="label in chartYLabels"
@@ -453,7 +451,7 @@
             :y="label.y"
             text-anchor="end"
             alignment-baseline="middle"
-            style="fill: #7e8b96; font-size: 11px; font-weight: 500"
+            style="fill: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); font-size: 11px; font-weight: 500"
           >
             {{ label.text }}
           </text>
@@ -483,7 +481,7 @@
             :cx="point.x"
             :cy="point.y"
             r="4"
-            style="fill: #ff9b9b; stroke: #fff; stroke-width: 2"
+            style="fill: #ff9b9b; stroke: rgb(var(--v-theme-surface)); stroke-width: 2"
           />
           <circle
             v-for="point in secondaryDots"
@@ -491,7 +489,7 @@
             :cx="point.x"
             :cy="point.y"
             r="4"
-            style="fill: #e53935; stroke: #fff; stroke-width: 2"
+            style="fill: #e53935; stroke: rgb(var(--v-theme-surface)); stroke-width: 2"
           />
           <text
             v-for="label in chartAxisLabels"
@@ -499,7 +497,7 @@
             :x="label.x"
             y="246"
             text-anchor="middle"
-            style="fill: #7e8b96; font-size: 12px; font-weight: 600"
+            style="fill: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); font-size: 12px; font-weight: 600"
           >
             {{ label.text }}
           </text>
@@ -507,7 +505,7 @@
 
         <div class="d-flex align-center justify-center ga-5 mt-2">
           <span
-            class="d-inline-flex align-center ga-2 text-caption font-weight-bold text-blue-grey"
+            class="d-inline-flex align-center ga-2 text-caption font-weight-bold text-medium-emphasis"
           >
             <span
               class="rounded-circle"
@@ -521,7 +519,7 @@
             {{ primaryLegendLabel }}
           </span>
           <span
-            class="d-inline-flex align-center ga-2 text-caption font-weight-bold text-blue-grey"
+            class="d-inline-flex align-center ga-2 text-caption font-weight-bold text-medium-emphasis"
           >
             <span
               class="rounded-circle"
@@ -565,11 +563,11 @@
               <div class="d-flex align-center flex-wrap ga-3">
                 <div class="flex-grow-1" style="min-width: 0">
                   <div
-                    class="text-body-2 font-weight-bold text-blue-grey-darken-4 text-truncate"
+                    class="text-body-2 font-weight-bold text-high-emphasis text-truncate"
                   >
                     {{ item.title }}
                   </div>
-                  <div class="text-caption text-blue-grey mt-1 text-truncate">
+                  <div class="text-caption text-medium-emphasis mt-1 text-truncate">
                     {{ item.subtitle
                     }}<template v-if="item.subtitle && item.time">
                       &bull; </template
@@ -577,7 +575,7 @@
                   </div>
                 </div>
                 <div
-                  class="d-flex align-center ga-2 text-caption text-blue-grey"
+                  class="d-flex align-center ga-2 text-caption text-medium-emphasis"
                 >
                   <AvatarMain :name="item.person" :size="30" />
                   <span class="text-truncate" style="max-width: 100px">{{
@@ -632,17 +630,16 @@
                 <AvatarMain :name="item.name" :size="32" />
                 <div class="flex-grow-1" style="min-width: 0">
                   <div
-                    class="text-body-2 font-weight-bold text-blue-grey-darken-4 text-truncate"
+                    class="text-body-2 font-weight-bold text-high-emphasis text-truncate"
                   >
                     {{ item.name }}
                   </div>
-                  <div class="text-caption text-blue-grey mt-1 text-truncate">
+                  <div class="text-caption text-medium-emphasis mt-1 text-truncate">
                     {{ item.role }}
                   </div>
                 </div>
                 <v-chip
                   size="small"
-                  color="blue-grey-darken-1"
                   variant="tonal"
                   label
                   class="ml-auto flex-shrink-0 font-weight-bold"
@@ -669,10 +666,10 @@
               class="d-flex align-center justify-space-between"
               style="
                 padding: 16px 20px;
-                border: 1px solid #e2e8f0;
+                border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
                 border-radius: 12px;
                 margin-bottom: 12px;
-                background-color: #ffffff;
+                background-color: rgb(var(--v-theme-surface-bright));
                 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
               "
             >
@@ -682,12 +679,12 @@
                     display: block;
                     font-size: 15px;
                     font-weight: 700;
-                    color: #0b2f47;
+                    color: rgb(var(--v-theme-on-surface));
                     margin-bottom: 4px;
                   "
                   >{{ item.title }}</strong
                 >
-                <span style="font-size: 13px; color: #94a3b8">{{
+                <span style="font-size: 13px; color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))">{{
                   item.subtitle
                 }}</span>
               </div>
@@ -696,7 +693,7 @@
                 style="flex: 1; display: flex; align-items: center; gap: 12px"
               >
                 <AvatarMain :name="item.person" :size="36" />
-                <span style="font-size: 14px; color: #64748b">{{
+                <span style="font-size: 14px; color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))">{{
                   item.person
                 }}</span>
               </div>
@@ -721,9 +718,9 @@
                   variant="outlined"
                   class="text-none font-weight-medium"
                   size="small"
-                  color="#3b82f6"
+                  color="primary"
                   style="
-                    border-color: #e2e8f0;
+                    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
                     border-radius: 8px;
                     padding: 0 16px;
                     height: 32px;
@@ -1026,9 +1023,9 @@
                     variant="outlined"
                     class="text-none font-weight-medium"
                     size="small"
-                    color="#3b82f6"
+                    color="primary"
                     style="
-                      border-color: #e2e8f0;
+                      border-color: rgba(var(--v-border-color), var(--v-border-opacity));
                       border-radius: 8px;
                       padding: 0 16px;
                       height: 32px;
@@ -1064,10 +1061,10 @@
                 class="d-flex align-center justify-space-between"
                 style="
                   padding: 16px 20px;
-                  border: 1px solid #e2e8f0;
+                  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
                   border-radius: 12px;
                   margin-bottom: 12px;
-                  background-color: #ffffff;
+                  background-color: rgb(var(--v-theme-surface-bright));
                   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
                 "
               >
@@ -1087,14 +1084,14 @@
                         display: block;
                         font-size: 15px;
                         font-weight: 700;
-                        color: #0b2f47;
+                        color: rgb(var(--v-theme-on-surface));
                         margin-bottom: 4px;
                       "
                       >{{
                         item.userName || item.personName || "Unassigned"
                       }}</strong
                     >
-                    <span style="font-size: 13px; color: #94a3b8">{{
+                    <span style="font-size: 13px; color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))">{{
                       item.role || item.designation || "Officer"
                     }}</span>
                   </div>
@@ -1134,10 +1131,10 @@
               class="d-flex align-center justify-space-between"
               style="
                 padding: 16px 20px;
-                border: 1px solid #e2e8f0;
+                border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
                 border-radius: 12px;
                 margin-bottom: 12px;
-                background-color: #ffffff;
+                background-color: rgb(var(--v-theme-surface-bright));
                 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
               "
             >
@@ -1147,12 +1144,12 @@
                     display: block;
                     font-size: 15px;
                     font-weight: 700;
-                    color: #0b2f47;
+                    color: rgb(var(--v-theme-on-surface));
                     margin-bottom: 4px;
                   "
                   >{{ item.title }}</strong
                 >
-                <span style="font-size: 13px; color: #94a3b8">{{
+                <span style="font-size: 13px; color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))">{{
                   item.subtitle
                 }}</span>
               </div>
@@ -1161,7 +1158,7 @@
                 style="flex: 1; display: flex; align-items: center; gap: 12px"
               >
                 <AvatarMain :name="item.person" :size="36" />
-                <span style="font-size: 14px; color: #64748b">{{
+                <span style="font-size: 14px; color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))">{{
                   item.person
                 }}</span>
               </div>
@@ -1186,9 +1183,9 @@
                   variant="outlined"
                   class="text-none font-weight-medium"
                   size="small"
-                  color="#3b82f6"
+                  color="primary"
                   style="
-                    border-color: #e2e8f0;
+                    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
                     border-radius: 8px;
                     padding: 0 16px;
                     height: 32px;
@@ -1211,10 +1208,10 @@
           class="d-flex align-start justify-space-between pa-6 pb-4 border-b"
         >
           <div>
-            <div class="text-h6 font-weight-black text-blue-grey-darken-4">
+            <div class="text-h6 font-weight-black text-high-emphasis">
               Customize Dashboard
             </div>
-            <div class="text-caption text-blue-grey mt-1">
+            <div class="text-caption text-medium-emphasis mt-1">
               Select which widgets to display on your dashboard
             </div>
           </div>
@@ -1240,7 +1237,6 @@
           <div class="d-flex justify-end mt-3 mb-1">
             <v-btn
               variant="text"
-              color="blue-grey-darken-4"
               size="small"
               class="text-none font-weight-bold"
               prepend-icon="mdi-refresh"
@@ -1262,11 +1258,11 @@
               <div class="d-flex align-center justify-space-between ga-4">
                 <div>
                   <div
-                    class="text-body-2 font-weight-black text-blue-grey-darken-4"
+                    class="text-body-2 font-weight-black text-high-emphasis"
                   >
                     {{ widget.title }}
                   </div>
-                  <div class="text-caption text-blue-grey mt-1">
+                  <div class="text-caption text-medium-emphasis mt-1">
                     {{ widget.description }}
                   </div>
                 </div>
@@ -1292,7 +1288,7 @@
         <v-card-actions class="pa-6 pt-4 border-t justify-end ga-3">
           <v-btn
             variant="text"
-            class="text-none font-weight-bold text-blue-grey"
+            class="text-none font-weight-bold text-medium-emphasis"
             @click="cancelCustomize"
           >
             Cancel
@@ -1320,7 +1316,7 @@
         <v-card-title
           class="d-flex align-center justify-space-between pa-6 pb-3"
         >
-          <div class="text-body-1 font-weight-black text-blue-grey-darken-4">
+          <div class="text-body-1 font-weight-black text-high-emphasis">
             Facility Booking
           </div>
           <v-btn
@@ -4185,8 +4181,8 @@ function formatDashboardTime(value?: string) {
 }
 
 .dashboard-card {
-  background: #fff;
-  border: 1px solid #d9e0e7;
+  background: rgb(var(--v-theme-surface));
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
   border-radius: 8px;
   box-shadow: 0 1px 2px rgba(15, 35, 54, 0.04);
 }
@@ -4209,7 +4205,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .figma-panel {
-  border-color: #dde4ea;
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
   box-shadow: none;
   min-height: 276px;
   padding: 26px 28px 24px;
@@ -4224,7 +4220,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .figma-panel-header h2 {
-  color: #18324a;
+  color: rgb(var(--v-theme-on-surface));
   font-size: 12px;
   font-weight: 900;
   letter-spacing: 0;
@@ -4238,7 +4234,7 @@ function formatDashboardTime(value?: string) {
   appearance: none;
   background: transparent;
   border: 0;
-  color: #1976d2;
+  color: rgb(var(--v-theme-primary));
   cursor: pointer;
   font-size: 12px;
   font-weight: 800;
@@ -4248,7 +4244,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .facility-booking-modal {
-  border: 1px solid #d9e0e7;
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
   box-shadow: 0 18px 48px rgba(15, 35, 54, 0.18);
 }
 
@@ -4269,7 +4265,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .facility-booking-summary-label {
-  color: #1565c0;
+  color: rgb(var(--v-theme-primary));
   font-size: 16px;
   font-weight: 500;
   line-height: 1.25;
@@ -4289,7 +4285,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .facility-booking-summary-dots {
-  border-bottom: 2px dotted #9aa3ad;
+  border-bottom: 2px dotted rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   display: block;
   height: 1px;
   min-width: 32px;
@@ -4297,7 +4293,7 @@ function formatDashboardTime(value?: string) {
 
 .facility-booking-summary-value,
 .facility-booking-total-label {
-  color: #0b2f47;
+  color: rgb(var(--v-theme-on-surface));
   font-size: 16px;
   font-weight: 800;
   line-height: 1.25;
@@ -4320,8 +4316,8 @@ function formatDashboardTime(value?: string) {
 
 .figma-list-row {
   align-items: center;
-  background: #fff;
-  border: 1px solid #e1e7ed;
+  background: rgb(var(--v-theme-surface-bright));
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
   border-radius: 6px;
   display: grid;
   gap: 10px;
@@ -4332,7 +4328,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .figma-list-row:hover {
-  border-color: #d5e0ea;
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
   box-shadow: 0 6px 14px rgba(15, 44, 69, 0.05);
 }
 
@@ -4341,7 +4337,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .figma-list-main strong {
-  color: #152f47;
+  color: rgb(var(--v-theme-on-surface));
   display: block;
   font-size: 12px;
   font-weight: 800;
@@ -4352,7 +4348,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .figma-list-main p {
-  color: #7b8895;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   font-size: 11px;
   font-weight: 700;
   line-height: 1.3;
@@ -4398,8 +4394,8 @@ function formatDashboardTime(value?: string) {
 
 .active-patrol-row {
   align-items: center;
-  background-color: #ffffff;
-  border: 1px solid #e2e8f0;
+  background-color: rgb(var(--v-theme-surface-bright));
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
   border-radius: 8px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
   display: grid;
@@ -4416,7 +4412,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .active-patrol-main strong {
-  color: #0b2f47;
+  color: rgb(var(--v-theme-on-surface));
   display: block;
   font-size: 13px;
   font-weight: 700;
@@ -4426,7 +4422,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .active-patrol-main span {
-  color: #94a3b8;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   display: block;
   font-size: 11px;
   line-height: 1.25;
@@ -4442,8 +4438,8 @@ function formatDashboardTime(value?: string) {
 
 .active-patrol-assignee {
   align-items: center;
-  background: #f8fafc;
-  border: 1px solid #e7edf3;
+  background: rgba(var(--v-theme-on-surface), 0.05);
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
   border-radius: 999px;
   display: inline-flex;
   flex: 1 1 auto;
@@ -4454,7 +4450,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .active-patrol-assignee span {
-  color: #475569;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   font-size: 11px;
   font-weight: 600;
   line-height: 1.2;
@@ -4484,10 +4480,10 @@ function formatDashboardTime(value?: string) {
 
 .active-patrol-more-pill {
   align-items: center;
-  background: #eef3f8;
-  border: 1px solid #dbe4ed;
+  background: rgba(var(--v-theme-on-surface), 0.05);
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
   border-radius: 999px;
-  color: #607386;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   display: inline-flex;
   flex: 0 0 auto;
   font-size: 11px;
@@ -4587,7 +4583,7 @@ function formatDashboardTime(value?: string) {
 
 .figma-status-label {
   align-items: center;
-  color: #263d53;
+  color: rgb(var(--v-theme-on-surface));
   display: flex;
   font-size: 12px;
   font-weight: 800;
@@ -4597,13 +4593,13 @@ function formatDashboardTime(value?: string) {
 }
 
 .figma-status-label strong {
-  color: #18324a;
+  color: rgb(var(--v-theme-on-surface));
   font-size: 12px;
   font-weight: 900;
 }
 
 .figma-progress-track {
-  background: #edf2f6;
+  background: rgba(var(--v-theme-on-surface), 0.08);
   border-radius: 999px;
   height: 6px;
   overflow: hidden;
@@ -4624,8 +4620,8 @@ function formatDashboardTime(value?: string) {
 
 .feedback-row {
   align-items: center;
-  background: #fff;
-  border: 1px solid #e0e5ea;
+  background: rgb(var(--v-theme-surface-bright));
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
   border-radius: 8px;
   display: grid;
   gap: 16px;
@@ -4636,7 +4632,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .feedback-row:hover {
-  border-color: #d8e3ec;
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
   box-shadow: 0 6px 14px rgba(15, 44, 69, 0.04);
 }
 
@@ -4645,7 +4641,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .feedback-summary strong {
-  color: #132b43;
+  color: rgb(var(--v-theme-on-surface));
   display: block;
   font-size: 12px;
   font-weight: 800;
@@ -4656,7 +4652,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .feedback-summary p {
-  color: #888;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   font-size: 12px;
   font-weight: 500;
   line-height: 1.35;
@@ -4726,7 +4722,7 @@ function formatDashboardTime(value?: string) {
   appearance: none;
   background: transparent;
   border: 0;
-  color: #2196f3;
+  color: rgb(var(--v-theme-primary));
   cursor: pointer;
   font-size: 12px;
   font-weight: 800;

package/components/DashboardPanel.vue

@@ -7,7 +7,7 @@
     style="min-height: 200px"
   >
     <div class="d-flex align-center justify-space-between pa-5 pb-3">
-      <h2 class="text-body-1 font-weight-black text-blue-grey-darken-4 mb-0">
+      <h2 class="text-body-1 font-weight-black text-high-emphasis mb-0">
         {{ title }}
       </h2>
       <v-btn

package/package.json

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

package/utils/theme.test.ts

@@ -180,6 +180,21 @@ test("primary-button carries a white label in both themes", () => {
   assert.ok(contrast(WHITE, light["primary-button"]) >= 4.5);
 });
 
+/**
+ * `primary` is still a fill in a v-btn, a v-chip, a v-alert and a tab bar. The
+ * comment above `primary` used to claim Vuetify derives black for `on-primary`;
+ * it derives WHITE, and white on this blue is 2.68:1. Nothing measured it, so
+ * it shipped. This is that measurement.
+ */
+test("a filled primary surface carries a readable label in both themes", () => {
+  assert.equal(DARK_THEME.colors["on-primary"], dark.background);
+  assert.ok(contrast(dark["on-primary"], dark.primary) >= 4.5);
+  assert.ok(contrast(WHITE, dark.primary) < 4.5, "white here is the defect");
+
+  // Light derives its own and it passes; measure it rather than assume.
+  assert.ok(contrast(WHITE, light.primary) >= 4.5);
+});
+
 /**
  * Both themes correct the same two Vuetify defaults, and a value that drifts
  * apart between them is a bug nobody sees until they flip the switch.

package/utils/theme.ts

@@ -108,12 +108,20 @@ export const DARK_THEME = {
      * camera wall already draws its accents in (`--vms-accent`), so the two
      * dark surfaces in this product now agree on one blue.
      *
-     * Where it is still used as a fill, Vuetify derives `on-primary` from it
-     * and picks black, which reads at 7.21:1. What it cannot carry is a
-     * hardcoded white label - see the note in the PR for the app-side sites
-     * that still do that.
+     * Where it is still used as a fill it needs a foreground, and the claim
+     * that used to sit here - that Vuetify derives black - is wrong. Measured
+     * in a browser, Vuetify picks WHITE, which reads at 2.68:1 on this fill:
+     * every filled primary button, chip, alert and tab bar in dark mode. So
+     * `on-primary` is set explicitly below rather than derived.
      */
     primary: "#5B9BE0",
+    /**
+     * The label on a filled `primary` surface. Measured 6.40:1 against
+     * `primary`, against the 2.68:1 Vuetify's own derivation gives. Not a new
+     * colour - it is the dark page `background` above, so a filled button
+     * reads as a hole punched in the page rather than a fifth shade of navy.
+     */
+    "on-primary": "#0E1319",
     /**
      * The navigation drawer's own fill. Deliberately the same value as
      * `surface`: on a dark page the drawer, the app bar and the cards are the