57 lines
3.6 KiB
TypeScript
57 lines
3.6 KiB
TypeScript
|
import { CSSProperties } from 'react';
|
|||
|
|
import { ChatBgVariants } from './types';
|
|||
|
|
|
|||
|
|
// crosshatch — fine pen-and-ink engraving, like a banknote guilloché.
|
|||
|
|
// Three hatch directions (right-leaning, left-leaning, near-horizontal cross)
|
|||
|
|
// are layered at low opacity so the eye reads a woven ink texture rather than
|
|||
|
|
// discrete stripes. Each direction uses a slightly different pitch so the
|
|||
|
|
// combined pattern never lines up into a coarse moire, and a barely-there
|
|||
|
|
// diagonal tonal gradient lends etched depth.
|
|||
|
|
//
|
|||
|
|
// Seamless tiling: each hatch is a `repeating-linear-gradient`, which repeats
|
|||
|
|
// infinitely by definition, so the layers are left at `backgroundSize: auto`
|
|||
|
|
// and tile with no visible seam at any element size (constraining a diagonal
|
|||
|
|
// repeat to a small square would clip it mid-period and create a seam). The
|
|||
|
|
// tonal wash is a single non-repeating gradient stretched to `cover`.
|
|||
|
|
//
|
|||
|
|
// Opacities are kept in the 0.02–0.05 range so the texture is felt, not read —
|
|||
|
|
// crisp message text sits comfortably above it in both themes (WCAG-AA safe).
|
|||
|
|
|
|||
|
|
const dark: CSSProperties = {
|
|||
|
|
// near-black base with a whisper of cool blue so silver ink reads as engraving
|
|||
|
|
backgroundColor: 'oklch(0.16 0.01 255)',
|
|||
|
|
backgroundImage: [
|
|||
|
|
// faint tonal gradient — top-left slightly lifted for etched depth
|
|||
|
|
'linear-gradient(135deg, oklch(0.20 0.012 255 / 0.5) 0%, oklch(0.15 0.01 255 / 0) 55%, oklch(0.14 0.008 260 / 0.45) 100%)',
|
|||
|
|
// primary hatch, right-leaning fine lines (cool silver ink), ~9px pitch
|
|||
|
|
'repeating-linear-gradient(45deg, oklch(0.75 0.02 250 / 0.05) 0, oklch(0.75 0.02 250 / 0.05) 0.75px, transparent 0.75px, transparent 9px)',
|
|||
|
|
// secondary hatch, left-leaning — the cross of the crosshatch
|
|||
|
|
'repeating-linear-gradient(135deg, oklch(0.75 0.02 250 / 0.045) 0, oklch(0.75 0.02 250 / 0.045) 0.75px, transparent 0.75px, transparent 9px)',
|
|||
|
|
// tertiary hatch, right-leaning at a denser pitch for engraved richness
|
|||
|
|
'repeating-linear-gradient(45deg, oklch(0.78 0.018 250 / 0.02) 0, oklch(0.78 0.018 250 / 0.02) 0.5px, transparent 0.5px, transparent 4.5px)',
|
|||
|
|
// quaternary near-horizontal fill line, very faint, weaves the mesh together
|
|||
|
|
'repeating-linear-gradient(20deg, oklch(0.72 0.015 255 / 0.018) 0, oklch(0.72 0.015 255 / 0.018) 0.5px, transparent 0.5px, transparent 13px)',
|
|||
|
|
].join(','),
|
|||
|
|
backgroundSize: 'cover, auto, auto, auto, auto',
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const light: CSSProperties = {
|
|||
|
|
// warm paper base — graphite ink on cream stock
|
|||
|
|
backgroundColor: 'oklch(0.975 0.006 85)',
|
|||
|
|
backgroundImage: [
|
|||
|
|
// faint tonal wash — soft warm depth for aged-paper feel
|
|||
|
|
'linear-gradient(135deg, oklch(0.94 0.008 85 / 0.55) 0%, oklch(0.98 0.005 85 / 0) 55%, oklch(0.93 0.01 80 / 0.5) 100%)',
|
|||
|
|
// primary hatch, right-leaning graphite lines, ~9px pitch
|
|||
|
|
'repeating-linear-gradient(45deg, oklch(0.42 0.01 265 / 0.055) 0, oklch(0.42 0.01 265 / 0.055) 0.75px, transparent 0.75px, transparent 9px)',
|
|||
|
|
// secondary hatch, left-leaning — the cross
|
|||
|
|
'repeating-linear-gradient(135deg, oklch(0.42 0.01 265 / 0.05) 0, oklch(0.42 0.01 265 / 0.05) 0.75px, transparent 0.75px, transparent 9px)',
|
|||
|
|
// tertiary denser right-leaning hatch for engraved fineness
|
|||
|
|
'repeating-linear-gradient(45deg, oklch(0.40 0.012 265 / 0.025) 0, oklch(0.40 0.012 265 / 0.025) 0.5px, transparent 0.5px, transparent 4.5px)',
|
|||
|
|
// quaternary near-horizontal weave line, barely-there
|
|||
|
|
'repeating-linear-gradient(20deg, oklch(0.45 0.01 260 / 0.022) 0, oklch(0.45 0.01 260 / 0.022) 0.5px, transparent 0.5px, transparent 13px)',
|
|||
|
|
].join(','),
|
|||
|
|
backgroundSize: 'cover, auto, auto, auto, auto',
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export const crosshatch: ChatBgVariants = { dark, light };
|