// Daygram design tokens — warm minimal, stamp metaphor.
// Two themes (light/dark) share the same shape; `T` is a mutable view that
// `applyDaygramTheme(mode)` mutates in place so existing references like
// `T.paper` re-read the current value on next React render.
const T_LIGHT = {
paper: '#FAF7F2',
surface: '#FFFFFF',
surface2:'#F3EFE7',
hairline:'#EAE3D5',
hairlineSoft:'#F0E9DC',
ink: '#1F1B16',
ink2: '#4A4138',
sub: '#7A6F62',
muted: '#B0A595',
stamp: '#C9573D',
stampInk:'#A8442E',
stampSoft:'#F2DACE',
stampWash:'#FBEFE7',
tent: '#D9A285',
tentSoft:'#F6E4D7',
ok: '#5B7F5A',
okSoft: '#E2EBDC',
// Growth-tree foliage — used by the weekly tree progress bar.
leaf: '#6FA04C',
leafDk: '#5E8A3E',
};
const T_DARK = {
// Neutral deep grays with a very subtle warm undertone — keeps the brand
// warm without tinting everything yellow.
paper: '#141416',
surface: '#1E1E22',
surface2:'#272730',
hairline:'#2F2F36',
hairlineSoft:'#26262C',
// Near-white ink — no cream tint.
ink: '#F2F2F4',
ink2: '#C8C8CF',
sub: '#8C8C96',
muted: '#5A5A62',
// Terracotta accent stays warm and pops against the neutral dark surface.
stamp: '#E2674A',
stampInk:'#F5B59A',
stampSoft:'#4C261A',
stampWash:'#2C1810',
tent: '#D49A7E',
tentSoft:'#382C24',
ok: '#76A268',
okSoft: '#2B3826',
// Growth-tree foliage — brighter so it reads against the dark hero.
leaf: '#7DB45A',
leafDk: '#5E8A3E',
};
const T = {
...T_LIGHT,
font: '"Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif',
// Brand wordmark only — a sleek geometric sans, distinct from the body font.
brandFont: '"Outfit", "Pretendard", sans-serif',
mono: '"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace',
};
function applyDaygramTheme(mode) {
const src = mode === 'dark' ? T_DARK : T_LIGHT;
Object.assign(T, src);
try {
if (typeof document !== 'undefined' && document.body) {
document.body.style.background = T.paper;
document.body.style.colorScheme = mode === 'dark' ? 'dark' : 'light';
}
localStorage.setItem('dg-theme', mode);
} catch (e) {}
}
// Boot-time restore: do this before React mounts so first paint matches.
try {
const _saved = localStorage.getItem('dg-theme');
if (_saved === 'dark') applyDaygramTheme('dark');
} catch (e) {}
// Pip (새싹) — completion mark, used everywhere a "stamp" appears
function Stamp({ size = 28, rotate = -6, faded = false, style = {} }) {
const uid = React.useId().replace(/:/g, '');
const op = faded ? 0.35 : 1;
const showFace = size >= 24;
const leafG = `pipLeaf-${uid}`;
const bodyG = `pipBody-${uid}`;
return (
);
}
const Icon = {
spark: (c = T.ink, s = 16) => (
),
send: (c, s = 18) => (
),
chev: (dir='r', c=T.ink, s=14) => (
),
plus: (c, s=18) => (
),
clock: (c, s=14) => (
),
fire: (c, s=14) => (
),
check: (c, s=14) => (
),
grip: (c=T.muted, s=14) => (
),
user: (c, s=14) => (
),
cal: (c, s=14) => (
),
chart: (c, s=14) => (
),
tag: (c, s=14) => (
),
people: (c, s=14) => (
),
search: (c, s=14) => (
),
bell: (c, s=14) => (
),
settings: (c, s=14) => (
),
trash: (c, s=14) => (
),
};
Object.assign(window, { T, Stamp, Icon, applyDaygramTheme });