@7365admin1/layer-common 3.2.2-staging.163 → 3.2.2-staging.165

package/assets/css/screens.css

@@ -752,6 +752,20 @@
   font-weight: var(--fw-btn);
   letter-spacing: 0;
   color: var(--text2);
+  /*
+   * Same reason as `.screen-btn-ghost` (#1200): `border-color` alone draws
+   * nothing, it only tints an edge whose width the Vuetify `variant` decided.
+   * Measured: paired with `outlined` this rule gives 1px, paired with `flat`
+   * it gives 0px - and the fill is `--card`, the same colour as the surface
+   * behind it, so a borderless copy has no boundary at all.
+   *
+   * The one call site today (`TableMain.vue`, Scan QR Code) does use
+   * `outlined`, so nothing is visibly broken right now. This is the latent
+   * half of the same defect: the next caller who writes `flat` gets an
+   * invisible button and no error. Naming the width closes it.
+   */
+  border-width: 1px;
+  border-style: solid;
   border-color: var(--border);
   background: var(--card);
 }

package/components/PeopleForm.vue

@@ -1,20 +1,20 @@
 <template>
-  <v-card width="100%" :loading="processing">
-    <v-toolbar>
+  <v-card width="100%" class="screen-modal" :loading="processing">
+    <v-toolbar class="screen-dialog-bar" flat>
       <v-row no-gutters class="fill-height px-6" align="center">
-        <span class="font-weight-bold text-h5 text-capitalize">
+        <span class="screen-card-title text-capitalize">
           {{ prop.mode }} {{ prop.type }}
         </span>
       </v-row>
     </v-toolbar>
     <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-3">
       <div class="w-100 d-flex justify-space-between ga-2">
-        <span v class="text-subtitle-1 w-100 font-weight-bold mb-3">
+        <span v class="people-form__section w-100 mb-3">
           <span v-if="step === 1">General Information</span>
           <span v-else-if="step === 2">Pass Information</span>
         </span>
-        <span class="text-subtitle-2 font-weight-bold" style="text-wrap: nowrap;">Step
-          <span class="text-primary-button">{{ step }}</span>/2</span>
+        <span class="people-form__step" style="text-wrap: nowrap;">Step
+          <span class="people-form__stepno">{{ step }}</span>/2</span>
       </div>
       <v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorMessage = ''">
         <v-row no-gutters class="pt-4">
@@ -93,7 +93,7 @@
             <v-col v-if="prop.mode === 'add'" cols="12" class="mt-2">
               <v-checkbox v-model="createMore" density="comfortable" hide-details>
                 <template #label>
-                  <span class="text-subtitle-2 font-weight-bold">
+                  <span class="people-form__step">
                     Create more
                   </span>
                 </template>
@@ -106,20 +106,14 @@
     </v-card-text>
 
     <v-row no-gutters class="w-100" v-if="errorMessage">
-      <p class="text-error w-100 text-center text-subtitle-2">{{ errorMessage }}</p>
+      <p class="text-error w-100 text-center people-form__error">{{ errorMessage }}</p>
     </v-row>
-    <v-toolbar density="compact">
-      <v-row no-gutters>
-        <v-col cols="6">
-          <v-btn v-if="step > 1" tile block variant="text" class="text-none" size="48" @click="back" text="Back" />
-          <v-btn v-else tile block variant="text" class="text-none" size="48" @click="close" text="Close" />
-        </v-col>
-        <v-col cols="6">
-          <v-btn tile block variant="flat" color="primary-button" class="text-none" size="48" :disabled="processing"
-            @click="handleNextPage" :text="step === 2 ? 'Submit' : 'Next'" />
-        </v-col>
-      </v-row>
-    </v-toolbar>
+    <div class="screen-modal__footer">
+      <v-btn v-if="step > 1" variant="outlined" class="screen-btn-ghost" @click="back" text="Back" />
+      <v-btn v-else variant="outlined" class="screen-btn-ghost" @click="close" text="Close" />
+      <v-btn variant="flat" class="screen-btn-primary" :disabled="processing"
+        @click="handleNextPage" :text="step === 2 ? 'Submit' : 'Next'" />
+    </div>
   </v-card>
 </template>
 
@@ -449,4 +443,31 @@ onMounted(() => {
 .button-outline-class {
   border: 1px solid rgba(var(--v-theme-primary));
 }
+
+/* Was `text-subtitle-1` / `text-subtitle-2` - Vuetify's 16px/14px scale, which
+   drew the section label LARGER than the card title above it. The step counter
+   step number is handled below and the error line keeps `text-error`;
+   only their sizes move. */
+.people-form__section {
+  font-size: var(--fs-card-title);
+  font-weight: 700;
+  color: var(--text);
+}
+
+.people-form__step {
+  font-size: var(--fs-cell);
+  font-weight: 700;
+  color: var(--text2);
+}
+
+.people-form__error {
+  font-size: var(--fs-cell);
+}
+
+/* The step number was `text-primary-button` - the design's FILL token used as
+   ink. On dark that is rgb(75,116,196) on rgb(28,30,36): 3.64:1 against a 4.5
+   floor. `--accent-text` is the foreground half of the same pair. */
+.people-form__stepno {
+  color: var(--accent-text);
+}
 </style>

package/package.json

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