@7365admin1/layer-common 3.2.2-staging.139 → 3.2.2-staging.140

package/assets/css/primitives.css

@@ -958,3 +958,29 @@ select.app-field__input {
     min-width: 720px;
   }
 }
+
+/* ------------------------------------------------------------------ */
+/* Field label (`components/InputLabel.vue`, 125 caller files).        */
+/*                                                                     */
+/* Every form label in the product rendered Vuetify's `text-subtitle-2`:*/
+/* 14px/500 at 0.0071em tracking, declaring `font-family: Roboto`.     */
+/* The handoff's own label - the Create Role modal - is 12.5px/700 with*/
+/* a 6px gap under it and the asterisk on `--err`.                     */
+/*                                                                     */
+/* `margin-bottom` is deliberately NOT `!important`, so the ~40 callers*/
+/* that already pass a Vuetify spacing utility (`mb-1`, `mb-2`) keep   */
+/* winning - those classes carry `!important` - and only the labels    */
+/* that state no spacing take the design's 6px.                        */
+/* ------------------------------------------------------------------ */
+.app-input-label {
+  font-family: var(--font-sans);
+  font-size: 12.5px;
+  font-weight: 700;
+  letter-spacing: 0;
+  color: var(--text);
+  margin-bottom: 6px;
+}
+
+.app-input-label__req {
+  color: var(--err);
+}

package/assets/css/screens.css

@@ -739,3 +739,38 @@
   height: 2px;
   background: var(--accent);
 }
+
+/* ------------------------------------------------------------------ */
+/* Toast (`components/Snackbar.vue`, 163 caller files).                */
+/*                                                                     */
+/* The handoff draws no toast at all - it is one of the gaps. So this  */
+/* is deliberately NOT an invented surface: it is the design's own     */
+/* button type scale, inner radius and menu shadow applied to          */
+/* Vuetify's snackbar. Vuetify's own default is a 4px radius, a        */
+/* Material elevation and Roboto at 14px, none of which are ours.      */
+/*                                                                     */
+/* The FILL is the `color` prop, defaulted in the component to         */
+/* `primary-button` - never `primary`, which is a foreground token.    */
+/* ------------------------------------------------------------------ */
+.app-toast .v-snackbar__wrapper {
+  border-radius: var(--r-inner);
+  box-shadow: var(--shadow-menu);
+  font-family: var(--font-sans);
+}
+
+.app-toast .v-snackbar__content {
+  font-size: var(--fs-btn);
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+/* Vuetify's text button is uppercase with wide tracking; the design has no
+   uppercase control anywhere. Named on `.v-btn` so it outweighs the default. */
+.v-btn.app-toast__close {
+  border-radius: var(--r-inner-sm);
+  font-family: var(--font-sans);
+  font-size: var(--fs-btn);
+  font-weight: var(--fw-btn);
+  letter-spacing: 0;
+  text-transform: none;
+}

package/components/InputLabel.vue

@@ -1,6 +1,6 @@
 <template>
-  <span :class="`text-subtitle-2 font-weight-medium ${props.class}`">
-    {{ title }} <span v-if="props.required" class="text-error">*</span>
+  <span :class="`app-input-label ${props.class}`">
+    {{ title }} <span v-if="props.required" class="app-input-label__req">*</span>
   </span>
 </template>
 

package/components/Snackbar.vue

@@ -1,9 +1,16 @@
 <template>
-  <v-snackbar v-model="snackbar" :color="props.color" :z-index="100000000" >
+  <v-snackbar
+    v-model="snackbar"
+    class="app-toast"
+    :color="props.color || 'primary-button'"
+    :z-index="100000000"
+  >
     {{ props.text }}
 
     <template #actions>
-      <v-btn variant="text" @click="snackbar = false"> Close </v-btn>
+      <v-btn class="app-toast__close" variant="text" @click="snackbar = false">
+        Close
+      </v-btn>
     </template>
   </v-snackbar>
 </template>
@@ -15,9 +22,35 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  /**
+   * A Vuetify theme colour name. `success` / `warning` / `error` / `info` are
+   * mapped onto the design palette in `utils/theme.ts` and pass through here
+   * unchanged.
+   *
+   * An UNCOLOURED toast used to land on one of two wrong surfaces, and both are
+   * corrected by the `||` in the template rather than by 163 caller files:
+   *
+   *   - the prop omitted or bound to `undefined` fell to the old default
+   *     `"primary"`, and `theme.ts:228` maps Vuetify's `primary` to
+   *     `--accent-text` - a FOREGROUND (the link ink), never a fill. Measured:
+   *     `rgb(74,110,182)` light, `rgb(120,162,244)` dark - the dark one a pale
+   *     link-blue slab that matches no other accent surface in the product.
+   *   - `:color=""`, which is how most callers initialise their toast state
+   *     (`reactive({ show: false, message: "", color: "" })`), is not falsy to
+   *     Vue's default machinery, so it reached Vuetify as an empty colour and
+   *     fell through to `.v-snackbar--variant-elevated`, i.e. `surface-variant`
+   *     = the NAVIGATION RAIL colour with `--text2` ink.
+   *
+   * `primary-button` is the accent FILL, and its pair `on-primary-button`
+   * supplies the white label (4.57:1 in both themes). The same correction is
+   * already on `FileInput`, `FeedbackDetail` and `BuildingUnitFormEdit`.
+   *
+   * The handoff draws no toast at all, so "an uncoloured toast is the accent
+   * fill" is our reading of a gap in the design, not a value it states.
+   */
   color: {
     type: String,
-    default: "primary",
+    default: "",
   },
 });
 </script>

package/package.json

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