@visin/frontend-core 1.9.0 → 1.10.0

package/dist/theme/tokens.d.ts

@@ -0,0 +1,224 @@
+/**
+ * The colours Visin draws with, per colour scheme, in one place.
+ *
+ * Pages never read the raw values: they use `ink`, `surface`, `glass` and
+ * `chrome`, which point at CSS variables the theme writes for both schemes, so
+ * a page that says `color: ink.muted` follows the switch without knowing there
+ * is one. The raw values are here for the contrast tests and for the few places
+ * outside a React tree (`theme-color`, the manifest, the offline page).
+ *
+ * The dark scheme is slate with a little blue in it rather than neutral grey:
+ * it keeps the brand's cast, and pure grey behind charts reads as dead.
+ */
+/** Primary, per scheme: what can be acted on. Walked lighter for dark, where the light blue fails AA. */
+export declare const brand: {
+    readonly light: "#2563eb";
+    readonly dark: "#60a5fa";
+};
+export declare const schemes: {
+    readonly light: {
+        /** Text, darkest to lightest. Slate rather than grey, to sit under the blue. */
+        readonly ink: {
+            readonly strong: "#0f172a";
+            readonly body: "#475569";
+            readonly muted: "#5b6779";
+            /** Decorative only — under 3:1. Never put words a reader needs in this. */
+            readonly faint: "#94a3b8";
+        };
+        readonly surface: {
+            /** A faint blue glow at the top of the page, over `default`. */
+            readonly glow: "rgba(37,99,235,0.10)";
+            readonly default: "#f6f7fb";
+            readonly paper: "#ffffff";
+            /** Table heads, inset panels: one step back from `paper`. */
+            readonly sunken: "#f8fafc";
+            readonly divider: "#e2e8f0";
+            /** The edge of the frosted chrome: an opaque divider draws a hard rule across the blur. */
+            readonly chromeEdge: "rgba(15,23,42,0.08)";
+            /** Hover tint on neutral controls. */
+            readonly hover: "rgba(15,23,42,0.05)";
+            /** The veil over an image that text has to stay readable on. */
+            readonly scrim: "rgba(255,255,255,0.72)";
+        };
+        readonly glass: {
+            readonly background: "rgba(255,255,255,0.88)";
+            readonly border: "rgba(15,23,42,0.07)";
+            readonly shadow: "rgba(15,23,42,0.30)";
+        };
+        readonly chrome: {
+            readonly background: "rgba(255,255,255,0.72)";
+            readonly ink: "#0f172a";
+            readonly inkMuted: "#5b6779";
+        };
+        /** The main action's gradient, blue into indigo; white text clears AA on every stop. */
+        readonly accent: {
+            readonly start: "#2563eb";
+            readonly end: "#4f46e5";
+            readonly startHover: "#1d4ed8";
+            readonly endHover: "#4338ca";
+        };
+        /** The browser's own bar, `<meta name="theme-color">`. */
+        readonly themeColor: "#f6f7fb";
+    };
+    readonly dark: {
+        readonly ink: {
+            readonly strong: "#e6eaf2";
+            readonly body: "#b3bccb";
+            readonly muted: "#8f9aac";
+            readonly faint: "#5b6474";
+        };
+        readonly surface: {
+            readonly glow: "rgba(96,165,250,0.12)";
+            readonly default: "#0b0f17";
+            readonly paper: "#121826";
+            readonly sunken: "#182030";
+            readonly divider: "#232b3a";
+            readonly chromeEdge: "rgba(148,163,184,0.12)";
+            readonly hover: "rgba(255,255,255,0.06)";
+            readonly scrim: "rgba(11,15,23,0.72)";
+        };
+        readonly glass: {
+            readonly background: "rgba(18,24,38,0.86)";
+            readonly border: "rgba(255,255,255,0.07)";
+            readonly shadow: "rgba(0,0,0,0.65)";
+        };
+        readonly chrome: {
+            readonly background: "rgba(13,18,28,0.72)";
+            readonly ink: "#e6eaf2";
+            readonly inkMuted: "#8f9aac";
+        };
+        readonly accent: {
+            readonly start: "#60a5fa";
+            readonly end: "#818cf8";
+            readonly startHover: "#93c5fd";
+            readonly endHover: "#a5b4fc";
+        };
+        readonly themeColor: "#0b0f17";
+    };
+};
+export type ColorSchemeName = keyof typeof schemes;
+/** One scheme as CSS custom properties. The theme writes these; nothing else should. */
+export declare function schemeCssVars(name: ColorSchemeName): Record<string, string>;
+/** Text, darkest to lightest. Follows light and dark. */
+export declare const ink: {
+    readonly strong: string;
+    readonly body: string;
+    readonly muted: string;
+    readonly faint: string;
+};
+/** Page and panel backgrounds. Follows light and dark. */
+export declare const surface: {
+    readonly glow: string;
+    readonly default: string;
+    readonly paper: string;
+    readonly sunken: string;
+    readonly divider: string;
+    readonly chromeEdge: string;
+    readonly hover: string;
+    readonly scrim: string;
+};
+/** The page behind everything: a glow at the top, fading into `default`. */
+export declare const pageBackground: {
+    readonly backgroundColor: string;
+    readonly backgroundImage: `radial-gradient(1200px 520px at 50% -160px, ${string}, transparent 70%)`;
+    readonly backgroundRepeat: "no-repeat";
+};
+/**
+ * A frosted surface that floats over the page: menus, popovers, dialogs, the
+ * phone's bottom sheet, cards on the home page. Translucent on purpose, so what
+ * is under it shows through as colour rather than being cut out.
+ *
+ * Not for tables, lists and charts. Blur behind numbers costs legibility and
+ * scrolling; those stay on solid `Panel`s.
+ */
+export declare const glass: {
+    readonly background: "var(--vi-glass-background)";
+    readonly backdropFilter: "blur(14px) saturate(160%)";
+    readonly WebkitBackdropFilter: "blur(14px) saturate(160%)";
+    readonly border: "1px solid var(--vi-glass-border)";
+    readonly boxShadow: "0 18px 40px -24px var(--vi-glass-shadow)";
+};
+/**
+ * The resting shadow of a solid surface (a `Panel`, a card): enough to lift it
+ * off the page, soft enough that a stack of them does not read as clutter.
+ */
+export declare const raisedShadow = "0 12px 32px -28px rgba(15,23,42,0.45)";
+/** A surface that rises toward the pointer. `accent` tints the edge and the lifted shadow. */
+export declare const liftOnHover: (accent?: string) => {
+    readonly transition: "transform .2s ease, box-shadow .2s ease, border-color .2s ease";
+    readonly '&:hover': {
+        readonly transform: "translateY(-2px)";
+        readonly borderColor: `color-mix(in srgb, ${string} 35%, transparent)`;
+        readonly boxShadow: `0 22px 44px -26px color-mix(in srgb, ${string} 80%, transparent)`;
+    };
+    readonly '@media (prefers-reduced-motion: reduce)': {
+        readonly transition: "none";
+        readonly '&:hover': {
+            readonly transform: "none";
+        };
+    };
+};
+/** A glass card that responds to being pointed at. `accent` tints the lifted shadow. */
+export declare const glassInteractive: (accent?: string) => {
+    readonly transition: "transform .2s ease, box-shadow .2s ease, border-color .2s ease";
+    readonly '&:hover': {
+        readonly transform: "translateY(-2px)";
+        readonly borderColor: `color-mix(in srgb, ${string} 35%, transparent)`;
+        readonly boxShadow: `0 22px 44px -26px color-mix(in srgb, ${string} 80%, transparent)`;
+    };
+    readonly '@media (prefers-reduced-motion: reduce)': {
+        readonly transition: "none";
+        readonly '&:hover': {
+            readonly transform: "none";
+        };
+    };
+    readonly background: "var(--vi-glass-background)";
+    readonly backdropFilter: "blur(14px) saturate(160%)";
+    readonly WebkitBackdropFilter: "blur(14px) saturate(160%)";
+    readonly border: "1px solid var(--vi-glass-border)";
+    readonly boxShadow: "0 18px 40px -24px var(--vi-glass-shadow)";
+};
+/**
+ * The one action a page is for, where a plain filled button undersells it: a
+ * blue-to-indigo gradient with a glow. At most one per page.
+ */
+export declare const mainAction: {
+    readonly backgroundImage: `linear-gradient(135deg, ${string} 0%, ${string} 100%)`;
+    readonly color: "var(--mui-palette-primary-contrastText)";
+    readonly boxShadow: "0 10px 28px -12px color-mix(in srgb, var(--mui-palette-primary-main) 85%, transparent)";
+    readonly '&:hover': {
+        readonly backgroundImage: `linear-gradient(135deg, ${string} 0%, ${string} 100%)`;
+        readonly boxShadow: "0 12px 32px -12px color-mix(in srgb, var(--mui-palette-primary-main) 95%, transparent)";
+    };
+};
+/**
+ * The frosted chrome around the content: the navigation rail, the app bar and
+ * the phone's tab bar. One tint and one blur for all three, because they meet
+ * at a corner, and two slightly different tints show as a step there.
+ */
+export declare const chrome: {
+    readonly background: string;
+    readonly ink: string;
+    readonly inkMuted: string;
+    readonly edge: string;
+    readonly surface: {
+        readonly background: string;
+        readonly backdropFilter: "blur(16px) saturate(165%)";
+        readonly WebkitBackdropFilter: "blur(16px) saturate(165%)";
+    };
+};
+/**
+ * Controls laid over a photo or a frame: a viewer's buttons, a caption chip.
+ * The same in both schemes, because the picture under them is.
+ */
+export declare const onImage: {
+    /** Behind a frame being judged: dark and neutral, so the picture's own colours read true. */
+    readonly backdrop: "#0b0f19";
+    readonly ink: "#ffffff";
+    readonly scrim: "rgba(0,0,0,0.5)";
+    readonly scrimStrong: "rgba(0,0,0,0.7)";
+    readonly chip: "rgba(255,255,255,0.2)";
+};
+/** `color` at `opacity` (0–1). Unlike MUI's `alpha()`, works on a CSS variable as well as a hex. */
+export declare const tint: (color: string, opacity: number) => string;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/theme/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,yGAAyG;AACzG,eAAO,MAAM,KAAK;;;CAGR,CAAC;AAEX,eAAO,MAAM,OAAO;;QAEhB,gFAAgF;;;;;YAK9E,2EAA2E;;;;YAI3E,gEAAgE;;;;YAIhE,6DAA6D;;;YAG7D,2FAA2F;;YAE3F,sCAAsC;;YAEtC,gEAAgE;;;;;;;;;;;;;QAelE,wFAAwF;;;;;;;QAOxF,0DAA0D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCpD,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,OAAO,CAAC;AAcnD,wFAAwF;AACxF,wBAAgB,aAAa,CAAC,IAAI,EAAE,eAAe,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAS3E;AAED,yDAAyD;AACzD,eAAO,MAAM,GAAG;;;;;CAAiC,CAAC;AAElD,0DAA0D;AAC1D,eAAO,MAAM,OAAO;;;;;;;;;CAAyC,CAAC;AAK9D,4EAA4E;AAC5E,eAAO,MAAM,cAAc;;;;CAIjB,CAAC;AAEX;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK;;;;;;CAMR,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,YAAY,0CAA0C,CAAC;AAEpE,8FAA8F;AAC9F,eAAO,MAAM,WAAW,GAAI,eAA0C;;;;;;;;;;;;;CASzD,CAAC;AAEd,wFAAwF;AACxF,eAAO,MAAM,gBAAgB,GAAI,SAAS,MAAM;;;;;;;;;;;;;;;;;;CAAoD,CAAC;AAErG;;;GAGG;AACH,eAAO,MAAM,UAAU;;;;;;;;CAQb,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;CAUT,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,OAAO;IAClB,6FAA6F;;;;;;CAMrF,CAAC;AAEX,oGAAoG;AACpG,eAAO,MAAM,IAAI,GAAI,OAAO,MAAM,EAAE,SAAS,MAAM,WACwB,CAAC"}

package/dist/theme/tokens.js

@@ -0,0 +1,205 @@
+/**
+ * The colours Visin draws with, per colour scheme, in one place.
+ *
+ * Pages never read the raw values: they use `ink`, `surface`, `glass` and
+ * `chrome`, which point at CSS variables the theme writes for both schemes, so
+ * a page that says `color: ink.muted` follows the switch without knowing there
+ * is one. The raw values are here for the contrast tests and for the few places
+ * outside a React tree (`theme-color`, the manifest, the offline page).
+ *
+ * The dark scheme is slate with a little blue in it rather than neutral grey:
+ * it keeps the brand's cast, and pure grey behind charts reads as dead.
+ */
+/** Primary, per scheme: what can be acted on. Walked lighter for dark, where the light blue fails AA. */
+export const brand = {
+    light: '#2563eb',
+    dark: '#60a5fa'
+};
+export const schemes = {
+    light: {
+        /** Text, darkest to lightest. Slate rather than grey, to sit under the blue. */
+        ink: {
+            strong: '#0f172a',
+            body: '#475569',
+            muted: '#5b6779',
+            /** Decorative only — under 3:1. Never put words a reader needs in this. */
+            faint: '#94a3b8'
+        },
+        surface: {
+            /** A faint blue glow at the top of the page, over `default`. */
+            glow: 'rgba(37,99,235,0.10)',
+            default: '#f6f7fb',
+            paper: '#ffffff',
+            /** Table heads, inset panels: one step back from `paper`. */
+            sunken: '#f8fafc',
+            divider: '#e2e8f0',
+            /** The edge of the frosted chrome: an opaque divider draws a hard rule across the blur. */
+            chromeEdge: 'rgba(15,23,42,0.08)',
+            /** Hover tint on neutral controls. */
+            hover: 'rgba(15,23,42,0.05)',
+            /** The veil over an image that text has to stay readable on. */
+            scrim: 'rgba(255,255,255,0.72)'
+        },
+        // Opaque enough that a bright button under a menu reads as colour, not as
+        // a second button: 0.72 let one show through as a smear.
+        glass: {
+            background: 'rgba(255,255,255,0.88)',
+            border: 'rgba(15,23,42,0.07)',
+            shadow: 'rgba(15,23,42,0.30)'
+        },
+        chrome: {
+            background: 'rgba(255,255,255,0.72)',
+            ink: '#0f172a',
+            inkMuted: '#5b6779'
+        },
+        /** The main action's gradient, blue into indigo; white text clears AA on every stop. */
+        accent: {
+            start: '#2563eb',
+            end: '#4f46e5',
+            startHover: '#1d4ed8',
+            endHover: '#4338ca'
+        },
+        /** The browser's own bar, `<meta name="theme-color">`. */
+        themeColor: '#f6f7fb'
+    },
+    dark: {
+        ink: {
+            strong: '#e6eaf2',
+            body: '#b3bccb',
+            muted: '#8f9aac',
+            faint: '#5b6474'
+        },
+        surface: {
+            glow: 'rgba(96,165,250,0.12)',
+            default: '#0b0f17',
+            paper: '#121826',
+            // One step *forward* in dark: a darker head on a dark table disappears.
+            sunken: '#182030',
+            divider: '#232b3a',
+            chromeEdge: 'rgba(148,163,184,0.12)',
+            hover: 'rgba(255,255,255,0.06)',
+            scrim: 'rgba(11,15,23,0.72)'
+        },
+        glass: {
+            background: 'rgba(18,24,38,0.86)',
+            border: 'rgba(255,255,255,0.07)',
+            shadow: 'rgba(0,0,0,0.65)'
+        },
+        chrome: {
+            background: 'rgba(13,18,28,0.72)',
+            ink: '#e6eaf2',
+            inkMuted: '#8f9aac'
+        },
+        // Lighter stops for dark, under dark text; hover lightens rather than darkens.
+        accent: {
+            start: '#60a5fa',
+            end: '#818cf8',
+            startHover: '#93c5fd',
+            endHover: '#a5b4fc'
+        },
+        themeColor: '#0b0f17'
+    }
+};
+/** A token's CSS variable, e.g. `--vi-surface-chrome-edge`. */
+const cssVar = (group, key) => `--vi-${group}-${key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)}`;
+const refs = (group, values) => Object.fromEntries(Object.keys(values).map((key) => [key, `var(${cssVar(group, key)})`]));
+const flatten = (group, values) => Object.entries(values).map(([key, value]) => [cssVar(group, key), value]);
+/** One scheme as CSS custom properties. The theme writes these; nothing else should. */
+export function schemeCssVars(name) {
+    const scheme = schemes[name];
+    return Object.fromEntries([
+        ...flatten('ink', scheme.ink),
+        ...flatten('surface', scheme.surface),
+        ...flatten('glass', scheme.glass),
+        ...flatten('chrome', scheme.chrome),
+        ...flatten('accent', scheme.accent)
+    ]);
+}
+/** Text, darkest to lightest. Follows light and dark. */
+export const ink = refs('ink', schemes.light.ink);
+/** Page and panel backgrounds. Follows light and dark. */
+export const surface = refs('surface', schemes.light.surface);
+const chromeVars = refs('chrome', schemes.light.chrome);
+const accentVars = refs('accent', schemes.light.accent);
+/** The page behind everything: a glow at the top, fading into `default`. */
+export const pageBackground = {
+    backgroundColor: surface.default,
+    backgroundImage: `radial-gradient(1200px 520px at 50% -160px, ${surface.glow}, transparent 70%)`,
+    backgroundRepeat: 'no-repeat'
+};
+/**
+ * A frosted surface that floats over the page: menus, popovers, dialogs, the
+ * phone's bottom sheet, cards on the home page. Translucent on purpose, so what
+ * is under it shows through as colour rather than being cut out.
+ *
+ * Not for tables, lists and charts. Blur behind numbers costs legibility and
+ * scrolling; those stay on solid `Panel`s.
+ */
+export const glass = {
+    background: 'var(--vi-glass-background)',
+    backdropFilter: 'blur(14px) saturate(160%)',
+    WebkitBackdropFilter: 'blur(14px) saturate(160%)',
+    border: '1px solid var(--vi-glass-border)',
+    boxShadow: '0 18px 40px -24px var(--vi-glass-shadow)'
+};
+/**
+ * The resting shadow of a solid surface (a `Panel`, a card): enough to lift it
+ * off the page, soft enough that a stack of them does not read as clutter.
+ */
+export const raisedShadow = '0 12px 32px -28px rgba(15,23,42,0.45)';
+/** A surface that rises toward the pointer. `accent` tints the edge and the lifted shadow. */
+export const liftOnHover = (accent = 'var(--mui-palette-primary-main)') => ({
+    transition: 'transform .2s ease, box-shadow .2s ease, border-color .2s ease',
+    '&:hover': {
+        transform: 'translateY(-2px)',
+        borderColor: `color-mix(in srgb, ${accent} 35%, transparent)`,
+        boxShadow: `0 22px 44px -26px color-mix(in srgb, ${accent} 80%, transparent)`
+    },
+    '@media (prefers-reduced-motion: reduce)': { transition: 'none', '&:hover': { transform: 'none' } }
+});
+/** A glass card that responds to being pointed at. `accent` tints the lifted shadow. */
+export const glassInteractive = (accent) => ({ ...glass, ...liftOnHover(accent) });
+/**
+ * The one action a page is for, where a plain filled button undersells it: a
+ * blue-to-indigo gradient with a glow. At most one per page.
+ */
+export const mainAction = {
+    backgroundImage: `linear-gradient(135deg, ${accentVars.start} 0%, ${accentVars.end} 100%)`,
+    color: 'var(--mui-palette-primary-contrastText)',
+    boxShadow: '0 10px 28px -12px color-mix(in srgb, var(--mui-palette-primary-main) 85%, transparent)',
+    '&:hover': {
+        backgroundImage: `linear-gradient(135deg, ${accentVars.startHover} 0%, ${accentVars.endHover} 100%)`,
+        boxShadow: '0 12px 32px -12px color-mix(in srgb, var(--mui-palette-primary-main) 95%, transparent)'
+    }
+};
+/**
+ * The frosted chrome around the content: the navigation rail, the app bar and
+ * the phone's tab bar. One tint and one blur for all three, because they meet
+ * at a corner, and two slightly different tints show as a step there.
+ */
+export const chrome = {
+    background: chromeVars.background,
+    ink: chromeVars.ink,
+    inkMuted: chromeVars.inkMuted,
+    edge: surface.chromeEdge,
+    surface: {
+        background: chromeVars.background,
+        backdropFilter: 'blur(16px) saturate(165%)',
+        WebkitBackdropFilter: 'blur(16px) saturate(165%)'
+    }
+};
+/**
+ * Controls laid over a photo or a frame: a viewer's buttons, a caption chip.
+ * The same in both schemes, because the picture under them is.
+ */
+export const onImage = {
+    /** Behind a frame being judged: dark and neutral, so the picture's own colours read true. */
+    backdrop: '#0b0f19',
+    ink: '#ffffff',
+    scrim: 'rgba(0,0,0,0.5)',
+    scrimStrong: 'rgba(0,0,0,0.7)',
+    chip: 'rgba(255,255,255,0.2)'
+};
+/** `color` at `opacity` (0–1). Unlike MUI's `alpha()`, works on a CSS variable as well as a hex. */
+export const tint = (color, opacity) => `color-mix(in srgb, ${color} ${Math.round(opacity * 100)}%, transparent)`;
+//# sourceMappingURL=tokens.js.map

package/dist/theme/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visin/frontend-core",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "Shared frontend auth/API-client logic for Visin frontends",
   "author": "Toomas Tahves",
   "license": "MIT",

package/dist/theme.d.ts

@@ -1,27 +0,0 @@
-import { type Theme, type ThemeOptions } from '@mui/material/styles';
-/**
- * The colours of Visin's own chrome — the landing page's: dark ink behind the
- * navigation, one blue for what can be acted on. Exported for the places that
- * have to name a colour outside a theme: the browser's `theme-color`, the
- * manifest, the offline page.
- */
-export declare const VISIN_COLORS: {
-    /** Primary: buttons, links, the selected state. */
-    readonly brand: "#2563EB";
-    /** The app bar across the top of every page (and the phone's status bar); the landing page's ink. */
-    readonly appBar: "#111827";
-    /** The desktop navigation rail beside the content. */
-    readonly rail: "#111827";
-    readonly background: "#F6F7FB";
-};
-/**
- * The one theme every Visin front renders with — shell, vision, label, account
- * and sign-in — so crossing apps inside the shell never changes the typeface,
- * the blue, or the shape of a button.
- *
- * `shape.borderRadius` stays MUI's 4px unit on purpose: pages across the apps
- * set radii as theme multiples (`borderRadius: 2`), and a larger unit turned
- * those into pills. Components get their rounder corners here instead.
- */
-export declare function createVisinTheme(overrides?: ThemeOptions): Theme;
-//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,KAAK,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAElF;;;;;GAKG;AACH,eAAO,MAAM,YAAY;IACvB,mDAAmD;;IAEnD,qGAAqG;;IAErG,sDAAsD;;;CAG9C,CAAC;AAOX;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,SAAS,GAAE,YAAiB,GAAG,KAAK,CA8FpE"}

package/dist/theme.js

@@ -1,121 +0,0 @@
-import { createTheme } from '@mui/material/styles';
-/**
- * The colours of Visin's own chrome — the landing page's: dark ink behind the
- * navigation, one blue for what can be acted on. Exported for the places that
- * have to name a colour outside a theme: the browser's `theme-color`, the
- * manifest, the offline page.
- */
-export const VISIN_COLORS = {
-    /** Primary: buttons, links, the selected state. */
-    brand: '#2563EB',
-    /** The app bar across the top of every page (and the phone's status bar); the landing page's ink. */
-    appBar: '#111827',
-    /** The desktop navigation rail beside the content. */
-    rail: '#111827',
-    background: '#F6F7FB'
-};
-/** Below `md` — the compact (phone) layout, as `useCompactLayout` reads it. */
-const PHONE = '@media (max-width:899.95px)';
-const FONT_STACK = '"Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
-/**
- * The one theme every Visin front renders with — shell, vision, label, account
- * and sign-in — so crossing apps inside the shell never changes the typeface,
- * the blue, or the shape of a button.
- *
- * `shape.borderRadius` stays MUI's 4px unit on purpose: pages across the apps
- * set radii as theme multiples (`borderRadius: 2`), and a larger unit turned
- * those into pills. Components get their rounder corners here instead.
- */
-export function createVisinTheme(overrides = {}) {
-    return createTheme({
-        palette: {
-            primary: { main: VISIN_COLORS.brand, light: '#60A5FA', dark: '#1D4ED8', contrastText: '#FFFFFF' },
-            secondary: { main: '#64748B' },
-            success: { main: '#16A34A' },
-            warning: { main: '#D97706' },
-            error: { main: '#DC2626' },
-            info: { main: '#0284C7' },
-            background: { default: VISIN_COLORS.background, paper: '#FFFFFF' },
-            text: { primary: '#0F172A', secondary: '#475569' },
-            divider: '#E2E8F0'
-        },
-        typography: {
-            fontFamily: FONT_STACK,
-            h1: { fontWeight: 700, letterSpacing: '-0.02em' },
-            h2: { fontWeight: 700, letterSpacing: '-0.02em' },
-            h3: { fontWeight: 700, letterSpacing: '-0.02em' },
-            // Page titles: MUI's 2.125rem h4 filled a phone's width with two words.
-            h4: { fontWeight: 700, letterSpacing: '-0.02em', fontSize: '1.75rem', [PHONE]: { fontSize: '1.375rem' } },
-            h5: { fontWeight: 600, [PHONE]: { fontSize: '1.2rem' } },
-            h6: { fontWeight: 600 },
-            subtitle1: { fontWeight: 600 },
-            subtitle2: { fontWeight: 600 },
-            button: { textTransform: 'none', fontWeight: 600 }
-        },
-        shape: { borderRadius: 4 },
-        components: {
-            MuiCssBaseline: {
-                styleOverrides: {
-                    body: { WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale' }
-                }
-            },
-            // AppLayout's content column already has the page gutters; a Container's
-            // own added a second pair, which a phone paid for in width.
-            MuiContainer: {
-                defaultProps: { disableGutters: true }
-            },
-            MuiButton: {
-                defaultProps: { disableElevation: true },
-                styleOverrides: { root: { borderRadius: 10 } }
-            },
-            MuiFab: {
-                styleOverrides: { root: { textTransform: 'none', fontWeight: 600 } }
-            },
-            MuiPaper: {
-                styleOverrides: {
-                    rounded: { borderRadius: 12 },
-                    outlined: { borderColor: '#E2E8F0' }
-                }
-            },
-            MuiCard: {
-                defaultProps: { variant: 'outlined' },
-                styleOverrides: { root: { borderRadius: 16 } }
-            },
-            MuiDialog: {
-                styleOverrides: { paper: { borderRadius: 16 } }
-            },
-            MuiMenu: {
-                styleOverrides: { paper: { borderRadius: 12 } }
-            },
-            MuiOutlinedInput: {
-                styleOverrides: { root: { borderRadius: 10, backgroundColor: '#FFFFFF' } }
-            },
-            MuiAlert: {
-                styleOverrides: { root: { borderRadius: 10 } }
-            },
-            MuiChip: {
-                styleOverrides: { root: { fontWeight: 500 } }
-            },
-            MuiTab: {
-                styleOverrides: { root: { textTransform: 'none', fontWeight: 600 } }
-            },
-            MuiTableCell: {
-                styleOverrides: {
-                    root: { borderColor: '#E2E8F0' },
-                    head: {
-                        backgroundColor: '#F8FAFC',
-                        color: '#475569',
-                        fontSize: '0.75rem',
-                        fontWeight: 600,
-                        letterSpacing: '0.04em',
-                        textTransform: 'uppercase'
-                    }
-                }
-            },
-            MuiLinearProgress: {
-                styleOverrides: { root: { borderRadius: 999 }, bar: { borderRadius: 999 } }
-            }
-        }
-    }, overrides);
-}
-//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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"}