Add TDS light mode: LotusTerminalLightTheme, light CSS vars, no CRT effects
This commit is contained in:
root
@@ -352,3 +352,226 @@ globalStyle(`body.${lotusTerminalBodyClass} img:hover`, {
|
||||
globalStyle(`body.${lotusTerminalBodyClass}`, {
|
||||
color: '#c4d9ee',
|
||||
});
|
||||
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
// LIGHT MODE — TDS "daylight reading" variant
|
||||
// html[data-theme="light"] + body.lotusTerminalBodyClass
|
||||
// Mirrors base.css:3614–3684: desaturated accents, off-white bg, no CRT
|
||||
// ═══════════════════════════════════════════════════════════════════════════
|
||||
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass}`, {
|
||||
backgroundColor: '#edf0f5',
|
||||
backgroundImage: 'radial-gradient(circle, rgba(90,110,150,0.14) 1px, transparent 1px)',
|
||||
color: '#111827',
|
||||
vars: {
|
||||
'--lt-bg-primary': '#edf0f5',
|
||||
'--lt-bg-secondary': '#e2e7ef',
|
||||
'--lt-bg-tertiary': '#d4dae6',
|
||||
'--lt-bg-card': '#ffffff',
|
||||
'--lt-bg-terminal': '#f4f6fa',
|
||||
'--lt-accent-orange': '#c44e00',
|
||||
'--lt-accent-orange-bright':'#d45800',
|
||||
'--lt-accent-orange-dim': 'rgba(196,78,0,0.10)',
|
||||
'--lt-accent-orange-border':'rgba(196,78,0,0.28)',
|
||||
'--lt-accent-amber': '#8a5a00',
|
||||
'--lt-accent-amber-dim': 'rgba(138,90,0,0.10)',
|
||||
'--lt-accent-cyan': '#0062b8',
|
||||
'--lt-accent-cyan-bright': '#0070cc',
|
||||
'--lt-accent-cyan-dim': 'rgba(0,98,184,0.10)',
|
||||
'--lt-accent-cyan-border': 'rgba(0,98,184,0.22)',
|
||||
'--lt-accent-green': '#006d35',
|
||||
'--lt-accent-green-bright': '#007d3e',
|
||||
'--lt-accent-green-dim': 'rgba(0,109,53,0.10)',
|
||||
'--lt-accent-green-border': 'rgba(0,109,53,0.22)',
|
||||
'--lt-accent-red': '#b5001f',
|
||||
'--lt-accent-red-dim': 'rgba(181,0,31,0.12)',
|
||||
'--lt-accent-gold': '#8a5a00',
|
||||
'--lt-accent-gold-dim': 'rgba(138,90,0,0.10)',
|
||||
'--lt-accent-purple': '#6b2fb8',
|
||||
'--lt-accent-purple-dim': 'rgba(107,47,184,0.10)',
|
||||
'--lt-text-primary': '#111827',
|
||||
'--lt-text-secondary': '#2d3d56',
|
||||
'--lt-text-muted': '#5a6e8c',
|
||||
'--lt-text-dim': '#8a9ab8',
|
||||
'--lt-border-color': 'rgba(50,80,130,0.18)',
|
||||
'--lt-border-color-hi': '#0062b8',
|
||||
'--lt-border-color-dim': 'rgba(50,80,130,0.09)',
|
||||
'--lt-glow-orange': '0 0 0 1px rgba(196,78,0,0.25), 0 1px 6px rgba(196,78,0,0.18)',
|
||||
'--lt-glow-orange-intense': '0 0 0 2px rgba(196,78,0,0.35), 0 2px 10px rgba(196,78,0,0.25)',
|
||||
'--lt-glow-cyan': '0 0 0 1px rgba(0,98,184,0.25), 0 1px 6px rgba(0,98,184,0.18)',
|
||||
'--lt-glow-cyan-intense': '0 0 0 2px rgba(0,98,184,0.35), 0 2px 10px rgba(0,98,184,0.25)',
|
||||
'--lt-glow-green': '0 0 0 1px rgba(0,109,53,0.25), 0 1px 6px rgba(0,109,53,0.18)',
|
||||
'--lt-glow-green-intense': '0 0 0 2px rgba(0,109,53,0.35), 0 2px 10px rgba(0,109,53,0.25)',
|
||||
'--lt-glow-amber': '0 0 0 1px rgba(138,90,0,0.25), 0 1px 6px rgba(138,90,0,0.18)',
|
||||
'--lt-glow-amber-intense': '0 0 0 2px rgba(138,90,0,0.35), 0 2px 10px rgba(138,90,0,0.25)',
|
||||
'--lt-glow-red': '0 0 0 1px rgba(181,0,31,0.25), 0 1px 6px rgba(181,0,31,0.18)',
|
||||
'--lt-box-glow-orange': '0 0 0 2px rgba(196,78,0,0.22), 0 2px 8px rgba(196,78,0,0.12)',
|
||||
'--lt-box-glow-cyan': '0 0 0 2px rgba(0,98,184,0.22), 0 2px 8px rgba(0,98,184,0.12)',
|
||||
'--lt-box-glow-green': '0 0 0 2px rgba(0,109,53,0.22), 0 2px 8px rgba(0,109,53,0.12)',
|
||||
'--lt-box-glow-red': '0 0 0 2px rgba(181,0,31,0.22), 0 2px 8px rgba(181,0,31,0.12)',
|
||||
'--lt-box-glow-amber': '0 0 0 2px rgba(138,90,0,0.22), 0 2px 8px rgba(138,90,0,0.12)',
|
||||
} as any,
|
||||
});
|
||||
|
||||
// Scanlines + vignette: OFF in light mode (base.css:3676-3678)
|
||||
globalStyle(
|
||||
`html[data-theme="light"] body.${lotusTerminalBodyClass}::before,` +
|
||||
`html[data-theme="light"] body.${lotusTerminalBodyClass}::after`,
|
||||
{ display: 'none' }
|
||||
);
|
||||
|
||||
// Caret
|
||||
globalStyle(
|
||||
`html[data-theme="light"] body.${lotusTerminalBodyClass} input,` +
|
||||
`html[data-theme="light"] body.${lotusTerminalBodyClass} textarea`,
|
||||
{ caretColor: '#c44e00' }
|
||||
);
|
||||
|
||||
// Scrollbar
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ::-webkit-scrollbar-track`, {
|
||||
background: '#e2e7ef',
|
||||
});
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ::-webkit-scrollbar-thumb`, {
|
||||
background: 'rgba(0,98,184,0.25)',
|
||||
borderRadius: '3px',
|
||||
});
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ::-webkit-scrollbar-thumb:hover`, {
|
||||
background: 'rgba(0,98,184,0.50)',
|
||||
});
|
||||
|
||||
// Selection
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ::selection`, {
|
||||
background: 'rgba(196,78,0,0.18)',
|
||||
color: '#030508',
|
||||
});
|
||||
|
||||
// Links
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} a`, { color: '#0062b8' });
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} a:hover`, {
|
||||
color: '#c44e00',
|
||||
textShadow: 'none',
|
||||
});
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} a:focus-visible`, {
|
||||
outline: '2px solid #0062b8',
|
||||
outlineOffset: '2px',
|
||||
});
|
||||
|
||||
// Code
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} code`, {
|
||||
background: '#f0f4f8',
|
||||
border: '1px solid rgba(0,98,184,0.18)',
|
||||
color: '#006d35',
|
||||
});
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} pre`, {
|
||||
background: '#f0f4f8',
|
||||
border: '1px solid rgba(0,98,184,0.14)',
|
||||
borderLeft: '2px solid #006d35',
|
||||
color: '#006d35',
|
||||
textShadow: 'none',
|
||||
});
|
||||
|
||||
// Inline semantics
|
||||
globalStyle(
|
||||
`html[data-theme="light"] body.${lotusTerminalBodyClass} strong,` +
|
||||
`html[data-theme="light"] body.${lotusTerminalBodyClass} b`,
|
||||
{ color: '#c44e00' }
|
||||
);
|
||||
globalStyle(
|
||||
`html[data-theme="light"] body.${lotusTerminalBodyClass} em,` +
|
||||
`html[data-theme="light"] body.${lotusTerminalBodyClass} i`,
|
||||
{ color: '#0062b8' }
|
||||
);
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} mark`, {
|
||||
background: 'rgba(138,90,0,0.15)',
|
||||
color: '#8a5a00',
|
||||
});
|
||||
globalStyle(
|
||||
`html[data-theme="light"] body.${lotusTerminalBodyClass} del,` +
|
||||
`html[data-theme="light"] body.${lotusTerminalBodyClass} s`,
|
||||
{ color: '#b5001f' }
|
||||
);
|
||||
|
||||
// Blockquote
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} blockquote`, {
|
||||
borderLeft: '2px solid #c44e00',
|
||||
background: 'rgba(196,78,0,0.05)',
|
||||
color: '#5a6e8c',
|
||||
});
|
||||
|
||||
// HR
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} hr`, {
|
||||
borderTop: '1px solid rgba(0,98,184,0.18)',
|
||||
boxShadow: 'none',
|
||||
});
|
||||
|
||||
// Input focus
|
||||
globalStyle(
|
||||
`html[data-theme="light"] body.${lotusTerminalBodyClass} input:focus,` +
|
||||
`html[data-theme="light"] body.${lotusTerminalBodyClass} textarea:focus`,
|
||||
{
|
||||
borderColor: '#c44e00',
|
||||
boxShadow: '0 0 0 2px rgba(196,78,0,0.22), 0 1px 6px rgba(196,78,0,0.12)',
|
||||
}
|
||||
);
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} [contenteditable="true"]:focus`, {
|
||||
boxShadow: '0 0 0 1px rgba(196,78,0,0.40), 0 1px 6px rgba(196,78,0,0.10)',
|
||||
});
|
||||
|
||||
// Tables
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} table`, {
|
||||
border: '1px solid rgba(0,98,184,0.18)',
|
||||
});
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} th`, {
|
||||
color: '#c44e00',
|
||||
background: 'rgba(196,78,0,0.06)',
|
||||
borderBottom: '1px solid rgba(0,98,184,0.18)',
|
||||
textShadow: 'none',
|
||||
});
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} td`, {
|
||||
color: '#2d3d56',
|
||||
borderBottom: '1px solid rgba(0,98,184,0.08)',
|
||||
});
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} tr:hover td`, {
|
||||
background: 'rgba(196,78,0,0.03)',
|
||||
});
|
||||
|
||||
// Lists
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ul li::marker`, {
|
||||
color: '#0062b8',
|
||||
content: '"▸ "',
|
||||
});
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} ol li::marker`, {
|
||||
color: '#c44e00',
|
||||
});
|
||||
|
||||
// Structural chrome
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} nav`, {
|
||||
borderRight: '1px solid rgba(0,98,184,0.12)',
|
||||
});
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} header`, {
|
||||
borderBottom: '1px solid rgba(0,98,184,0.14)',
|
||||
boxShadow: '0 1px 8px rgba(0,0,0,0.07)',
|
||||
});
|
||||
|
||||
// kbd
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} kbd`, {
|
||||
background: '#e2e7ef',
|
||||
border: '1px solid rgba(0,98,184,0.28)',
|
||||
borderBottom: '2px solid rgba(0,98,184,0.42)',
|
||||
color: '#0062b8',
|
||||
textShadow: 'none',
|
||||
boxShadow: '0 1px 3px rgba(0,0,0,0.10)',
|
||||
});
|
||||
|
||||
// abbr / time / img
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} abbr[title]`, {
|
||||
textDecoration: 'underline dotted #0062b8',
|
||||
});
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} time`, {
|
||||
color: '#5a6e8c',
|
||||
});
|
||||
globalStyle(`html[data-theme="light"] body.${lotusTerminalBodyClass} img:hover`, {
|
||||
outline: '1px solid rgba(0,98,184,0.28)',
|
||||
boxShadow: '0 1px 8px rgba(0,98,184,0.08)',
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user