@7365admin1/layer-common 3.2.1-staging.65 → 3.2.1-staging.66

package/package.json

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

package/plugins/vuetify.ts

@@ -42,6 +42,67 @@ import {
 } from "vuetify-pro-tiptap";
 import "vuetify-pro-tiptap/style.css";
 
+/**
+ * Contrast decisions live here rather than inline, because both themes need the
+ * same two opacity corrections and a value that differs by accident between
+ * light and dark is a bug nobody sees until somebody flips the switch.
+ *
+ * `disabled-opacity`: Material's 0.38 measures 2.68:1 on white, below the 4.5:1
+ * a sentence needs, and disabled fields in this product carry sentences people
+ * are expected to read. 0.55 is 4.74:1 on white and 6.21:1 on the dark page -
+ * the same value the camera wall settled on, for the same reason.
+ *
+ * `border-opacity`: 0.12 measures 1.32:1, which is a divider you cannot see.
+ * Dark goes to 0.35 (3.22:1) and carries the boundary properly. Light goes to
+ * 0.26 (1.88:1) - visible, but short of the 3:1 a component boundary wants.
+ * Reaching it on white needs 0.42, which turns every table and card edge into a
+ * mid-grey grid across eleven applications; that is a change somebody should
+ * look at before it ships, not one to slip in behind a contrast fix.
+ */
+const LIGHT_THEME = {
+  dark: false,
+  colors: {
+    primary: "#042134",
+    "primary-button": "#1867C0",
+    "text-primary": "#052439",
+  },
+  variables: {
+    "disabled-opacity": 0.55,
+    "border-opacity": 0.26,
+  },
+};
+
+/**
+ * Only the keys that must differ; Vuetify merges the rest from its stock dark.
+ */
+const DARK_THEME = {
+  dark: true,
+  colors: {
+    /**
+     * Stock dark's #121212 page and #212121 surface measure 1.16:1 apart, so a
+     * card, a dialog and the page behind them were one flat sheet. These are
+     * 1.19:1 - elevation on a dark screen is a genuinely small delta - but they
+     * are tinted towards the brand navy rather than neutral grey, and the
+     * divider opacity above is what actually draws the edges.
+     */
+    background: "#0E1319",
+    surface: "#1B242F",
+    /** Stock dark ships a lavender #ccbfd6 here, which is not our product. */
+    "surface-bright": "#26313E",
+    "surface-light": "#26313E",
+    /** The brand navy lifted until the nav drawer is a surface, not a hole. */
+    primary: "#17506F",
+    /** Unchanged on purpose: it already passes in both themes. */
+    "primary-button": "#1867C0",
+    /** #052439 on a dark page measures 1.18:1. This is 15.72:1. */
+    "text-primary": "#E8ECF1",
+  },
+  variables: {
+    "disabled-opacity": 0.55,
+    "border-opacity": 0.35,
+  },
+};
+
 export default defineNuxtPlugin((app) => {
   const vuetify = createVuetify({
     defaults: {
@@ -69,17 +130,53 @@ export default defineNuxtPlugin((app) => {
       //   hint: "This field is required",
       // },
     },
+    /**
+     * THE PRODUCT HAS TWO THEMES, AND UNTIL NOW ONLY ONE OF THEM WAS OURS.
+     *
+     * Every app shows a light/dark toggle in the app bar (Layout/Header.vue),
+     * and it sets Vuetify's built-in "light" and "dark" themes. Those were left
+     * at Vuetify's factory values, so one click on any screen in any of the
+     * eleven apps threw the brand away: `primary` stopped being the Seven365
+     * navy and became Material blue #2196F3 - and `primary` is the navigation
+     * drawer's fill - while `primary-button` and `text-primary`, used in around
+     * eighty places across the layer and the apps, do not exist in a stock
+     * theme at all, so those components lost their colour to an undefined CSS
+     * variable. There was also no way back to the brand: the toggle only ever
+     * flipped between the two stock themes.
+     *
+     * The fix is to make the stock names OURS rather than to add new names.
+     * Several components already branch on `theme.global.name === "dark"` (this
+     * layer's FormDialog, property-management's facility icons), so a
+     * differently-named dark theme would have left every one of them silently
+     * on their light branch inside a dark app. Overriding `light` and `dark`
+     * means the toggle, `v-theme-provider theme="light"`, the `plain-dark`
+     * layout and all of those comparisons keep working, and start being right.
+     *
+     * Measured, not eyeballed - WCAG 2.1, alpha composited against the surface
+     * each value actually sits on:
+     *
+     *   text-primary on the page       dark   1.18:1 -> 15.72:1
+     *   nav drawer fill vs the page    dark   1.13:1 ->  2.14:1 (+ a real border)
+     *   white label in the nav drawer  dark   3.12:1 ->  8.70:1
+     *   primary-button vs the page     dark   3.34:1 ->  3.32:1 (unchanged)
+     *   white label on that button     both   5.61:1 ->  5.61:1 (unchanged)
+     *   disabled text                  light  2.68:1 ->  4.74:1
+     *   disabled text                  dark   3.57:1 ->  6.21:1
+     *   divider / outline              dark   1.38:1 ->  3.22:1
+     *   divider / outline              light  1.32:1 ->  1.88:1
+     */
     theme: {
-      defaultTheme: "iservice365",
+      defaultTheme: "light",
       themes: {
-        iservice365: {
-          dark: false,
-          colors: {
-            primary: "#042134",
-            "primary-button": "#1867C0",
-            "text-primary": "#052439",
-          },
-        },
+        light: LIGHT_THEME,
+        dark: DARK_THEME,
+        /**
+         * The name this product booted on before the two above carried the
+         * brand. Kept, and identical to `light`, so anything that asks for it
+         * by name - in an app that is not in this repository - still gets a
+         * theme rather than a blank one.
+         */
+        iservice365: LIGHT_THEME,
       },
     },
     icons: {