@7365admin1/layer-common 3.2.2-staging.110 → 3.2.2-staging.111

package/assets/css/primitives.css

@@ -286,13 +286,16 @@
   filter: none;
 }
 
+/* The design draws the ghost at the SAME size as the primary it stands next to
+   - Bulk Upload beside Add Unit, Scan QR Code beside Add Visitor are both
+     `height:40px; padding:0 16px; font-size:13.5px`, and only the fill, the
+   border and the weight differ. 38px / 0 14px / 13px was a smaller button than
+   the handoff asks for, and the 2px mismatch shows on every screen that draws
+   the pair. Height, padding and type therefore come from `.app-btn`. */
 .app-btn--ghost {
-  height: 38px;
-  padding: 0 14px;
   border: 1px solid var(--border);
   background: var(--card);
   color: var(--text2);
-  font-size: var(--fs-nav);
   font-weight: var(--fw-btn);
 }
 

package/assets/css/screens.css

@@ -242,9 +242,24 @@
   font-size: var(--fs-cell);
 }
 
-/* The design's two buttons, for the dialogs and toolbars that draw their own. */
-.screen-btn-primary {
-  height: var(--btn-h);
+/**
+ * The design's two buttons, for the dialogs and toolbars that draw their own.
+ *
+ * `.v-btn` is named on every selector below for SPECIFICITY, not decoration.
+ * Vuetify sizes its button from `--v-btn-height` (36px, set on
+ * `.v-btn--size-default`) and applies it at `.v-btn.v-btn--density-default` -
+ * two classes, which outrank a bare `.screen-btn-*`. So `height: var(--btn-h)`
+ * never reached the glass and EVERY one of these buttons drew at 36px against
+ * the design's 40. `min-width` lost the same argument at 64px.
+ *
+ * Beaten by specificity, not `!important` - the same way the central font
+ * re-point beat Vuetify's own font declarations. And the fix FEEDS
+ * `--v-btn-height` rather than overwriting `height`, so Vuetify's density
+ * arithmetic (including the icon button's `+12px`) keeps working off our number.
+ */
+.v-btn.screen-btn-primary {
+  --v-btn-height: var(--btn-h);
+  min-width: 0;
   border-radius: var(--r-inner);
   padding: 0 16px;
   font-family: var(--font-sans);
@@ -269,10 +284,12 @@
  * the input next to it - the same button Phase 2 gave the top bar - not a
  * tinted pill.
  */
-.screen-icon-btn {
+.v-btn.screen-icon-btn {
+  --v-btn-height: var(--btn-h);
   height: var(--btn-h);
   width: var(--btn-h);
   min-width: var(--btn-h);
+  padding: 0;
   border-radius: var(--r-inner);
   border: 1px solid var(--border);
   background: var(--card);
@@ -283,8 +300,9 @@
   opacity: 0;
 }
 
-.screen-btn-ghost {
-  height: var(--btn-h);
+.v-btn.screen-btn-ghost {
+  --v-btn-height: var(--btn-h);
+  min-width: 0;
   border-radius: var(--r-inner);
   padding: 0 16px;
   font-family: var(--font-sans);

package/components/AppButton.vue

@@ -9,7 +9,8 @@
 
   Variants, straight from the handoff:
     primary  40px pill-radius accent fill, 13.5px/800, white label
-    ghost    38px, 1px border, card fill, 13px/700 in `--text2`
+    ghost    40px, 1px border, card fill, 13.5px/700 in `--text2` - the SAME
+             box as primary; the handoff differs only in fill, border and weight
     icon     32px transparent square, 8px radius
     row      30px bordered square - the `more_vert` at the end of a table row
 -->

package/package.json

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