feat: implement nib design system — warm amber palette, dual themes, new typography

Replace Tokyonight/Catppuccin blue palette with warm amber/ink identity.
Dual theme support (noir + paper) via data-theme attribute with
localStorage persistence. Space Grotesk for chrome, Monaspace Neon for
content. Updated glyph set (Strokes: — ○ ◇) across web and CLI.
This commit is contained in:
2026-05-14 17:02:11 -04:00
parent be590a0f6f
commit aa7c9aef7d
4 changed files with 299 additions and 221 deletions
+16 -2
View File
@@ -2,7 +2,7 @@
'use strict';
const GLYPHS = {
note: '', todo: '', event: '◇',
note: '', todo: '', event: '◇',
snippet: '◆', template: '◈', checklist: '☐',
decision: '⚖', link: '↗',
};
@@ -222,7 +222,7 @@
const groups = groupByDate(state.entities);
let idx = 0;
for (const g of groups) {
html += `<div class="date-header">── ${g.label} ──</div>`;
html += `<div class="date-header">${g.label}</div>`;
for (const e of g.entities) {
html += renderEntityItem(e, idx);
idx++;
@@ -754,6 +754,20 @@
return escHtml(s).replace(/'/g, '&#39;');
}
// ========== Theme ==========
const themeToggle = $('#theme-toggle');
let nibTheme = localStorage.getItem('nib:theme') || 'dark';
document.documentElement.setAttribute('data-theme', nibTheme);
themeToggle.textContent = nibTheme === 'paper' ? '◐' : '◑';
themeToggle.addEventListener('click', () => {
nibTheme = nibTheme === 'dark' ? 'paper' : 'dark';
document.documentElement.setAttribute('data-theme', nibTheme);
localStorage.setItem('nib:theme', nibTheme);
themeToggle.textContent = nibTheme === 'paper' ? '◐' : '◑';
});
// ========== Init ==========
async function init() {