@7365admin1/layer-common 3.2.1-staging.73 → 3.2.1-staging.75

package/utils/theme.ts

@@ -75,6 +75,17 @@ export const LIGHT_THEME = {
     "brand-surface": "#EDF1F7",
     /** The drawer's label colour. On the rail: 15.43:1. */
     "on-brand-surface": "#0B1B27",
+    /**
+     * Vuetify leaves `warning` (#FB8C00) and `info` (#2196F3) at its stock
+     * values and DERIVES their foreground, and — as with `on-primary` — the
+     * derivation picks WHITE. Measured, that is 2.37:1 on warning and 3.12:1
+     * on info: every filled warning/info chip, alert, button and badge in the
+     * product, including the invitation status chips. Setting the label to the
+     * dark page colour takes them to 8.9:1 and 5.3:1. Same value in both
+     * themes because the two fills are the same in both themes.
+     */
+    "on-warning": "#0E1319",
+    "on-info": "#0E1319",
     "primary-button": "#1867C0",
     "text-primary": "#052439",
   },
@@ -108,12 +119,20 @@ export const DARK_THEME = {
      * camera wall already draws its accents in (`--vms-accent`), so the two
      * dark surfaces in this product now agree on one blue.
      *
-     * Where it is still used as a fill, Vuetify derives `on-primary` from it
-     * and picks black, which reads at 7.21:1. What it cannot carry is a
-     * hardcoded white label - see the note in the PR for the app-side sites
-     * that still do that.
+     * Where it is still used as a fill it needs a foreground, and the claim
+     * that used to sit here - that Vuetify derives black - is wrong. Measured
+     * in a browser, Vuetify picks WHITE, which reads at 2.68:1 on this fill:
+     * every filled primary button, chip, alert and tab bar in dark mode. So
+     * `on-primary` is set explicitly below rather than derived.
      */
     primary: "#5B9BE0",
+    /**
+     * The label on a filled `primary` surface. Measured 6.40:1 against
+     * `primary`, against the 2.68:1 Vuetify's own derivation gives. Not a new
+     * colour - it is the dark page `background` above, so a filled button
+     * reads as a hole punched in the page rather than a fifth shade of navy.
+     */
+    "on-primary": "#0E1319",
     /**
      * The navigation drawer's own fill. Deliberately the same value as
      * `surface`: on a dark page the drawer, the app bar and the cards are the
@@ -124,6 +143,14 @@ export const DARK_THEME = {
     "brand-surface": "#1B242F",
     /** The drawer's label colour. On the rail: 13.21:1. */
     "on-brand-surface": "#E8ECF1",
+    /** See LIGHT_THEME: Vuetify derives white on these fills, at 2.37:1. */
+    "on-warning": "#0E1319",
+    "on-info": "#0E1319",
+    /**
+     * Dark's stock `error` is the pale #CF6679, and white on it is 3.60:1 —
+     * the light theme's darker #B00020 carries white fine, this one does not.
+     */
+    "on-error": "#0E1319",
     /** 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. */