@visin/frontend-core 1.8.0 → 1.10.0

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.8.0",
+  "version": "1.10.0",
   "description": "Shared frontend auth/API-client logic for Visin frontends",
   "author": "Toomas Tahves",
   "license": "MIT",