feat: final production polish — light mode rebuild, lt.init(), cross-tab theme

Light mode — complete rebuild (section 51):
- Full token override for every surface, component, and state
- Desaturated accents: orange #c44e00, cyan #0062b8, green #006d35 etc.
- Glows replaced with subtle drop-shadow rings (no neon on white)
- Covers: toasts, modals, dropdowns, notification panel, context menu,
  right drawer, combobox, typeahead, wizard, timeline, pagination, tabs,
  badges, tables, code blocks, skeleton, avatar, sortable, markdown,
  scrollbars, buttons, nav drawer, WS status — nothing missed
- Dot-grid: neutral gray (was incorrect blue tint)
- Toast background uses var(--bg-overlay) instead of hardcoded dark rgba

Theme system improvements:
- _applyTheme now sets document.documentElement.style.colorScheme
- theme-color meta tag syncs on toggle (browser chrome follows theme)
- Cross-tab sync via storage event (toggle in one tab updates others)

lt.init() master initializer:
- Single call wires accordion, tooltip, alerts, clipboard, sidebar,
  submenus, and boot sequence
- Replaces 6+ individual .init() calls in user code
- demo HTML updated to use lt.init({ bootName: 'MY APP' })

Accessibility:
- Ticket table: add <caption class="lt-sr-only"> for WCAG compliance
- Table gets aria-label attribute

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-26 00:12:04 -04:00
parent 1d8d274fdd
commit d5dc96178f
3 changed files with 406 additions and 51 deletions
+5 -12
View File
@@ -455,7 +455,8 @@
<div class="lt-section-header">Ticket Queue</div>
<div class="lt-table-wrap">
<table class="lt-table lt-table-responsive" id="ticket-table">
<table class="lt-table lt-table-responsive" id="ticket-table" aria-label="Ticket queue">
<caption class="lt-sr-only">Ticket queue — sorted by priority</caption>
<thead>
<tr>
<th><input type="checkbox" class="lt-checkbox" aria-label="Select all"></th>
@@ -1696,17 +1697,9 @@ Storage array link-down on `compute-storage-01`.
<!-- Init v1.2 modules -->
<script>
document.addEventListener('DOMContentLoaded', () => {
// Accordion
lt.accordion.init();
// Tooltips (JS-positioned — optional, CSS tooltips work without this)
lt.tooltip.init();
// Clipboard copy buttons ([data-copy])
lt.clipboard.initCopyButtons();
// Alert dismiss buttons
lt.alerts.init();
// One call initializes accordion, tooltip, alerts, clipboard, sidebar, submenus + boot.
// Pass { boot: false } to skip the terminal boot animation.
lt.init({ bootName: 'MY APP' });
// Command palette demo commands
lt.cmdPalette.init([