86 lines
4.7 KiB
TypeScript
86 lines
4.7 KiB
TypeScript
|
import { ChatBgVariants } from './types';
|
|||
|
|
|
|||
|
|
// blueprint — an engineering / architectural drafting sheet.
|
|||
|
|
//
|
|||
|
|
// Layers (painted top-to-bottom):
|
|||
|
|
// 1. SVG draftsman tick-marks + a centred crosshair accent (96px tile — lands
|
|||
|
|
// exactly on the major grid; corner quarter-arms tile into a full "+" on
|
|||
|
|
// every major intersection).
|
|||
|
|
// 2. Major grid lines (heavier) — 96px.
|
|||
|
|
// 3. Minor grid lines (fine, fainter) — 16px (96 = 6 × 16, so it nests
|
|||
|
|
// seamlessly inside the major grid with no beat/moiré).
|
|||
|
|
// 4. A soft radial vignette + a gentle sheet-glow so the surface reads like a
|
|||
|
|
// real drafting sheet with subtle dimension rather than a flat tile.
|
|||
|
|
//
|
|||
|
|
// Everything is kept at low alpha (~0.03–0.16) so the motif is felt, not read:
|
|||
|
|
// crisp message text sits comfortably above it in both themes (WCAG-AA safe).
|
|||
|
|
|
|||
|
|
const DARK_TICKS =
|
|||
|
|
'url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2296%22%20height%3D%2296%22%3E%3Cg%20stroke%3D%22oklch%280.72%200.11%20230%20%2F%200.32%29%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%200%20H7%20M0%200%20V7%22%2F%3E%3Cpath%20d%3D%22M96%200%20H89%20M96%200%20V7%22%2F%3E%3Cpath%20d%3D%22M0%2096%20H7%20M0%2096%20V89%22%2F%3E%3Cpath%20d%3D%22M96%2096%20H89%20M96%2096%20V89%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22oklch%280.72%200.11%20230%20%2F%200.18%29%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M48%2044%20V52%20M44%2048%20H52%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")';
|
|||
|
|
|
|||
|
|
const LIGHT_TICKS =
|
|||
|
|
'url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2296%22%20height%3D%2296%22%3E%3Cg%20stroke%3D%22oklch%280.48%200.13%20250%20%2F%200.38%29%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M0%200%20H7%20M0%200%20V7%22%2F%3E%3Cpath%20d%3D%22M96%200%20H89%20M96%200%20V7%22%2F%3E%3Cpath%20d%3D%22M0%2096%20H7%20M0%2096%20V89%22%2F%3E%3Cpath%20d%3D%22M96%2096%20H89%20M96%2096%20V89%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22oklch%280.48%200.13%20250%20%2F%200.22%29%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M48%2044%20V52%20M44%2048%20H52%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")';
|
|||
|
|
|
|||
|
|
export const blueprint: ChatBgVariants = {
|
|||
|
|
// Cyan-blue lines on a deep navy sheet.
|
|||
|
|
dark: {
|
|||
|
|
backgroundColor: 'oklch(0.22 0.05 250)',
|
|||
|
|
backgroundImage: [
|
|||
|
|
// 1. draftsman ticks + centre crosshair
|
|||
|
|
DARK_TICKS,
|
|||
|
|
// 4a. sheet-glow: a faint cooler highlight drifting off the top-left,
|
|||
|
|
// giving the flat navy some dimension.
|
|||
|
|
'radial-gradient(120% 120% at 18% 8%, oklch(0.30 0.06 245 / 0.55) 0%, transparent 55%)',
|
|||
|
|
// 4b. vignette: gently darkens the corners like a drafting sheet edge.
|
|||
|
|
'radial-gradient(140% 140% at 50% 42%, transparent 58%, oklch(0.14 0.04 255 / 0.5) 100%)',
|
|||
|
|
// 2. major grid (heavier)
|
|||
|
|
'linear-gradient(oklch(0.72 0.12 230 / 0.13) 1px, transparent 1px)',
|
|||
|
|
'linear-gradient(90deg, oklch(0.72 0.12 230 / 0.13) 1px, transparent 1px)',
|
|||
|
|
// 3. minor grid (fine, fainter)
|
|||
|
|
'linear-gradient(oklch(0.72 0.12 230 / 0.05) 1px, transparent 1px)',
|
|||
|
|
'linear-gradient(90deg, oklch(0.72 0.12 230 / 0.05) 1px, transparent 1px)',
|
|||
|
|
].join(','),
|
|||
|
|
backgroundSize: [
|
|||
|
|
'96px 96px', // ticks
|
|||
|
|
'100% 100%', // sheet-glow
|
|||
|
|
'100% 100%', // vignette
|
|||
|
|
'96px 96px', // major V
|
|||
|
|
'96px 96px', // major H
|
|||
|
|
'16px 16px', // minor V
|
|||
|
|
'16px 16px', // minor H
|
|||
|
|
].join(','),
|
|||
|
|
// All layers share the default top-left (0 0) origin so the tick tile, the
|
|||
|
|
// 96px major grid and the 16px minor grid stay phase-locked (96 = 6 × 16) —
|
|||
|
|
// no drift, no visible seams. (A per-layer `center` would let the differently
|
|||
|
|
// sized tiles center independently and fall out of alignment.)
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// Blue lines on a cool paper-white sheet.
|
|||
|
|
light: {
|
|||
|
|
backgroundColor: 'oklch(0.97 0.01 240)',
|
|||
|
|
backgroundImage: [
|
|||
|
|
LIGHT_TICKS,
|
|||
|
|
// sheet-glow: a hint of brighter paper toward the top-left.
|
|||
|
|
'radial-gradient(120% 120% at 18% 8%, oklch(0.99 0.008 240 / 0.7) 0%, transparent 55%)',
|
|||
|
|
// vignette: soft cool shading into the corners.
|
|||
|
|
'radial-gradient(140% 140% at 50% 42%, transparent 60%, oklch(0.90 0.02 245 / 0.55) 100%)',
|
|||
|
|
// major grid (heavier)
|
|||
|
|
'linear-gradient(oklch(0.48 0.13 250 / 0.15) 1px, transparent 1px)',
|
|||
|
|
'linear-gradient(90deg, oklch(0.48 0.13 250 / 0.15) 1px, transparent 1px)',
|
|||
|
|
// minor grid (fine, fainter)
|
|||
|
|
'linear-gradient(oklch(0.48 0.13 250 / 0.06) 1px, transparent 1px)',
|
|||
|
|
'linear-gradient(90deg, oklch(0.48 0.13 250 / 0.06) 1px, transparent 1px)',
|
|||
|
|
].join(','),
|
|||
|
|
backgroundSize: [
|
|||
|
|
'96px 96px',
|
|||
|
|
'100% 100%',
|
|||
|
|
'100% 100%',
|
|||
|
|
'96px 96px',
|
|||
|
|
'96px 96px',
|
|||
|
|
'16px 16px',
|
|||
|
|
'16px 16px',
|
|||
|
|
].join(','),
|
|||
|
|
// Shared top-left origin keeps the tick tile and both grids phase-locked.
|
|||
|
|
},
|
|||
|
|
};
|