@7365admin1/layer-common 3.2.2-staging.142 → 3.2.2-staging.144

package/assets/css/screens.css

@@ -915,3 +915,62 @@
 .screen-menu__item--danger:hover {
   background: var(--err-bg);
 }
+
+/* ------------------------------------------------------------------ */
+/* SIGNATURE PAD - `SignaturePad.vue`.                                 */
+/*                                                                     */
+/* DESIGN GAP, STATED: the handoff draws no signature pad and contains */
+/* no dashed border anywhere, so everything below is the established   */
+/* primitives and tokens, not a handoff literal. The one value taken   */
+/* from the handoff is the caption pair at line 659 - 12.5px / 600.    */
+/*                                                                     */
+/* THE PAD IS PAPER AND STAYS LIGHT IN BOTH THEMES, DELIBERATELY.      */
+/* The canvas ink is `#111` and `stop()` exports the drawing as a PNG  */
+/* that callers render back on light surfaces and print. A `--card`    */
+/* pad would be dark in the dark theme, so the signature would be      */
+/* black-on-black on the pad AND the exported PNG would be a black     */
+/* scrawl on transparency. The three literals here are the LIGHT theme */
+/* values of `--card`, `--border` and `--muted`, named so nobody has   */
+/* to guess where they came from.                                      */
+/* ------------------------------------------------------------------ */
+.screen-signpad {
+  position: relative;
+  overflow: hidden;
+  /* Light `--muted` at 55% - NOT `--border`. A drop zone's dashed edge is an
+     affordance and has to be seen; `--border` (rgb 232,232,225) on a white pad
+     is all but invisible, which the first render showed. This lands on the same
+     weight as the `#bbb` it replaces, from a token value rather than a hex. */
+  border: 1.5px dashed rgba(139, 143, 152, 0.55);
+  border-radius: var(--r-inner);
+  background: rgb(255, 255, 255); /* light `--card` */
+}
+
+.screen-signpad__canvas {
+  display: block;
+  width: 100%;
+  height: 130px;
+  cursor: crosshair;
+  touch-action: none;
+}
+
+.screen-signpad__hint {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  font-family: var(--font-sans);
+  font-size: 12.5px;
+  font-weight: 600;
+  letter-spacing: 0;
+  color: rgb(139, 143, 152); /* light `--muted` - the pad is paper */
+}
+
+.screen-signpad__label {
+  font-family: var(--font-sans);
+  font-size: 12.5px;
+  font-weight: 600;
+  letter-spacing: 0;
+  color: var(--muted);
+}

package/components/SignaturePad.vue

@@ -1,25 +1,11 @@
 <template>
   <div>
-    <div
-      style="
-        position: relative;
-        border: 1.5px dashed #bbb;
-        border-radius: 6px;
-        background: #fafafa;
-        overflow: hidden;
-      "
-    >
+    <div class="screen-signpad">
       <canvas
         ref="canvasRef"
         :width="W"
         :height="H"
-        style="
-          display: block;
-          width: 100%;
-          height: 130px;
-          cursor: crosshair;
-          touch-action: none;
-        "
+        class="screen-signpad__canvas"
         @mousedown="startMouse"
         @mousemove="moveMouse"
         @mouseup="stop"
@@ -28,23 +14,13 @@
         @touchmove.prevent="moveTouch"
         @touchend="stop"
       />
-      <div
-        v-if="isEmpty"
-        style="
-          position: absolute;
-          inset: 0;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          pointer-events: none;
-        "
-      >
-        <span class="text-caption text-disabled">Draw your signature here</span>
+      <div v-if="isEmpty" class="screen-signpad__hint">
+        Draw your signature here
       </div>
     </div>
 
     <v-row no-gutters align="center" class="mt-1" style="min-height: 28px">
-      <span class="text-caption text-medium-emphasis">{{ label }}</span>
+      <span class="screen-signpad__label">{{ label }}</span>
       <v-spacer />
       <v-btn
         v-if="!isEmpty"

package/package.json

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