From 2e12c742fb100a34bbcf09955a9b7fc399188500 Mon Sep 17 00:00:00 2001 From: root Date: Wed, 13 May 2026 22:01:16 -0400 Subject: [PATCH] Add chevron, polka, triangles, plaid backgrounds --- src/app/features/lotus/chatBackground.ts | 82 ++++++++++++++++++++++++ src/app/state/settings.ts | 2 +- 2 files changed, 83 insertions(+), 1 deletion(-) diff --git a/src/app/features/lotus/chatBackground.ts b/src/app/features/lotus/chatBackground.ts index 39345b635..5783ec7dd 100644 --- a/src/app/features/lotus/chatBackground.ts +++ b/src/app/features/lotus/chatBackground.ts @@ -9,6 +9,10 @@ export const BG_OPTIONS: { value: ChatBackground; label: string }[] = [ { value: 'topographic', label: 'Topographic' }, { value: 'herringbone', label: 'Herringbone' }, { value: 'crosshatch', label: 'Crosshatch' }, + { value: 'chevron', label: 'Chevron' }, + { value: 'polka', label: 'Polka' }, + { value: 'triangles', label: 'Triangles' }, + { value: 'plaid', label: 'Plaid' }, ]; const DARK: Record = { @@ -73,6 +77,47 @@ const DARK: Record = { ].join(','), backgroundSize: '60px 60px, 60px 60px, 12px 12px, 12px 12px', }, + + // Interlocking zigzag stripes + chevron: { + backgroundColor: '#0f0f17', + backgroundImage: [ + 'linear-gradient(135deg, rgba(180,160,210,0.1) 25%, transparent 25%)', + 'linear-gradient(225deg, rgba(180,160,210,0.1) 25%, transparent 25%)', + 'linear-gradient(315deg, rgba(180,160,210,0.1) 25%, transparent 25%)', + 'linear-gradient(45deg, rgba(180,160,210,0.1) 25%, transparent 25%)', + ].join(','), + backgroundSize: '20px 20px', + }, + + // Even dot grid + polka: { + backgroundColor: '#0e0e14', + backgroundImage: 'radial-gradient(circle, rgba(255,255,255,0.2) 2px, transparent 2px)', + backgroundSize: '28px 28px', + }, + + // Isometric triangle grid + triangles: { + backgroundColor: '#111118', + backgroundImage: [ + 'linear-gradient(60deg, rgba(100,149,237,0.09) 25%, transparent 25%, transparent 75%, rgba(100,149,237,0.09) 75%)', + 'linear-gradient(120deg, rgba(100,149,237,0.09) 25%, transparent 25%, transparent 75%, rgba(100,149,237,0.09) 75%)', + ].join(','), + backgroundSize: '40px 70px', + backgroundPosition: '0 0, 20px 35px', + }, + + // Tartan-inspired crossing lines with accent colour + plaid: { + backgroundColor: '#0a1020', + backgroundImage: [ + 'repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(100,149,237,0.13) 39px, rgba(100,149,237,0.13) 40px)', + 'repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(100,149,237,0.13) 39px, rgba(100,149,237,0.13) 40px)', + 'repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(152,0,0,0.08) 7px, rgba(152,0,0,0.08) 8px)', + 'repeating-linear-gradient(90deg, transparent, transparent 7px, rgba(152,0,0,0.08) 7px, rgba(152,0,0,0.08) 8px)', + ].join(','), + }, }; const LIGHT: Record = { @@ -138,6 +183,43 @@ const LIGHT: Record = { ].join(','), backgroundSize: '60px 60px, 60px 60px, 12px 12px, 12px 12px', }, + + chevron: { + backgroundColor: '#f9f8ff', + backgroundImage: [ + 'linear-gradient(135deg, rgba(80,60,130,0.1) 25%, transparent 25%)', + 'linear-gradient(225deg, rgba(80,60,130,0.1) 25%, transparent 25%)', + 'linear-gradient(315deg, rgba(80,60,130,0.1) 25%, transparent 25%)', + 'linear-gradient(45deg, rgba(80,60,130,0.1) 25%, transparent 25%)', + ].join(','), + backgroundSize: '20px 20px', + }, + + polka: { + backgroundColor: '#fafafa', + backgroundImage: 'radial-gradient(circle, rgba(0,0,0,0.18) 2px, transparent 2px)', + backgroundSize: '28px 28px', + }, + + triangles: { + backgroundColor: '#f4f7ff', + backgroundImage: [ + 'linear-gradient(60deg, rgba(50,100,220,0.1) 25%, transparent 25%, transparent 75%, rgba(50,100,220,0.1) 75%)', + 'linear-gradient(120deg, rgba(50,100,220,0.1) 25%, transparent 25%, transparent 75%, rgba(50,100,220,0.1) 75%)', + ].join(','), + backgroundSize: '40px 70px', + backgroundPosition: '0 0, 20px 35px', + }, + + plaid: { + backgroundColor: '#f5f0ff', + backgroundImage: [ + 'repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(100,50,180,0.15) 39px, rgba(100,50,180,0.15) 40px)', + 'repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(100,50,180,0.15) 39px, rgba(100,50,180,0.15) 40px)', + 'repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(200,0,0,0.09) 7px, rgba(200,0,0,0.09) 8px)', + 'repeating-linear-gradient(90deg, transparent, transparent 7px, rgba(200,0,0,0.09) 7px, rgba(200,0,0,0.09) 8px)', + ].join(','), + }, }; export const getChatBg = (bg: ChatBackground, isDark: boolean): CSSProperties => diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts index 1ce83bae1..723747576 100644 --- a/src/app/state/settings.ts +++ b/src/app/state/settings.ts @@ -3,7 +3,7 @@ import { atom } from 'jotai'; const STORAGE_KEY = 'settings'; export type DateFormat = 'D MMM YYYY' | 'DD/MM/YYYY' | 'MM/DD/YYYY' | 'YYYY/MM/DD' | ''; export type MessageSpacing = '0' | '100' | '200' | '300' | '400' | '500'; -export type ChatBackground = 'none' | 'blueprint' | 'carbon' | 'stars' | 'topographic' | 'herringbone' | 'crosshatch'; +export type ChatBackground = 'none' | 'blueprint' | 'carbon' | 'stars' | 'topographic' | 'herringbone' | 'crosshatch' | 'chevron' | 'polka' | 'triangles' | 'plaid'; export enum MessageLayout { Modern = 0, Compact = 1,